:root {
--bg: #0d0f14;
--surface: #151820;
--surface2: #1c2030;
--surface3: #232840;
--border: #2a3050;
--border2: #3a4470;
--accent: #4f7cff;
--accent2: #7c4fff;
--accent3: #ff4f7c;
--green: #22d87a;
--yellow: #ffc840;
--orange: #ff8c40;
--red: #ff4f4f;
--tg: #26a9e3;
--vb: #7360F2;
--ig: #e1306c;
--text: #e8eaf0;
--text2: #9199be; /* WCAG: было #8890b0 (4.2:1) → 4.5:1 */
--text3: #6b7499; /* WCAG: было #535a78 (2.6:1) → ~3.6:1 для UI */
--table-header: #1e3a8a;
--overlay-bg: rgba(13,15,20,0.95);
--overlay-modal: rgba(0,0,0,0.6);
/* ── ДИЗАЙН-ТОКЕНЫ ── */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 48px;
--text-xs: 0.6875rem; --text-sm: 0.75rem; --text-base: 0.8125rem;
--text-md: 0.875rem; --text-lg: 1.0625rem; --text-xl: 1.125rem; --text-2xl: 1.375rem;
--leading-tight: 1.25; --leading-normal: 1.45; --leading-relaxed: 1.6;
--radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px;
--radius-bubble: 16px 16px 4px 16px; --radius-bubble-in: 16px 16px 16px 4px;
--radius-full: 9999px;
--duration-fast: 100ms; --duration-normal: 150ms; --duration-slow: 250ms;
--easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--shadow-sm: 0 2px 8px rgba(0,0,0,0.25);
--shadow-md: 0 4px 24px rgba(0,0,0,0.4);
--shadow-lg: 0 24px 80px rgba(0,0,0,0.6);
--text-scale: 1; /* настройка размера интерфейса в профиле */
/* алиасы для обратной совместимости */
--radius: var(--radius-lg);
--radius2: var(--radius-md);
--shadow: var(--shadow-md);
}
/* СВЕТЛАЯ ТЕМА.
Селектор продублирован на : анти-мигающий инлайн-скрипт в вешает класс именно
туда — body в тот момент ещё не существует. CSS-переменные с наследуются в body,
поэтому тема применяется до первой отрисовки. applyTheme() потом ставит класс и на body. */
html.light,
body.light {
--bg: #f0f2f7;
--surface: #ffffff;
--surface2: #f5f7fb;
--surface3: #eaecf4;
--border: #d8dce8;
--border2: #b8bdd4;
--text: #1a1d2e;
--text2: #4a5068;
--text3: #6a7290; /* WCAG: было #8890b0 (3.6:1 на белом) → 4.6:1 */
--accent: #3060e8; /* контраст на белом для текста/ссылок */
--accent2: #6030d8;
--accent3: #d0003c;
--green: #0da05a;
--yellow: #9a7000;
--orange: #c05000;
--red: #cc2020;
--overlay-bg: rgba(240,242,247,0.95);
--overlay-modal: rgba(0,0,0,0.35);
--shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
--shadow-md: 0 4px 24px rgba(0,0,0,0.1);
--shadow-lg: 0 24px 80px rgba(0,0,0,0.18);
}
/* Светлая фирменная тема Mary. Внутренний ключ сохраняется для совместимости
с уже сохранёнными профилями пользователей. */
html.picpac-paper,
body.picpac-paper {
--bg: #f2f2ef;
--surface: #ffffff;
--surface2: #f7f7f4;
--surface3: #ecece7;
--border: #deded7;
--border2: #bdbdb4;
--text: #11110f;
--text2: #4f4f49;
--text3: #6f6f67;
--accent: #11110f;
--accent2: #2579a6;
--accent3: #d92f58;
--green: #26724a;
--yellow: #765900;
--orange: #a64c17;
--red: #b4232d;
--brand-yellow: #ffdc2e;
--brand-yellow-hover: #f2cb00;
--brand-blue: #b9e4ff;
--brand-green: #d8f5b8;
--brand-pink: #ffc5d9;
--brand-orange: #ffd39e;
--overlay-bg: rgba(242,242,239,0.95);
--overlay-modal: rgba(17,17,15,0.32);
--shadow-sm: 0 2px 8px rgba(17,17,15,0.05);
--shadow-md: 0 8px 24px rgba(17,17,15,0.08);
--shadow-lg: 0 24px 72px rgba(17,17,15,0.18);
--radius-lg: 8px;
--radius-xl: 8px;
}
/* ТЕМА Mary · ГРАФИТ (тёплая тёмная). Применяется классом body.picpac-graphite (тёмная база). */
html.picpac-graphite,
body.picpac-graphite {
--bg: #1e1b17;
--surface: #2a2620;
--surface2: #332e27;
--surface3: #3c362d;
--border: #443d33;
--border2: #5a5142;
--text: #f3ede3;
--text2: #a99f90;
--text3: #786f62;
--accent: #e26469;
--accent2: #c98f86;
--accent3: #e26469;
--green: #8fb9ab;
--yellow: #d9b25a;
--orange: #e0a15a;
--red: #e26469;
--overlay-bg: rgba(30,27,23,0.95);
--overlay-modal: rgba(0,0,0,0.55);
--shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
--shadow-md: 0 4px 24px rgba(0,0,0,0.4);
--shadow-lg: 0 24px 80px rgba(0,0,0,0.6);
}
/* Мягкие пастельные темы для ежедневной работы. */
html.picpac-lavender,
body.picpac-lavender {
--bg:#f3f0fb; --surface:#ffffff; --surface2:#f8f6fd; --surface3:#e9e3f5;
--border:#dcd3ef; --border2:#b9a8d8; --text:#252033; --text2:#635879; --text3:#7e7195;
--accent:#8567d8; --accent2:#aa8bdc; --accent3:#cf6c9c; --green:#4d987a; --yellow:#987a2c; --orange:#b56f3c; --red:#c25e70;
--overlay-bg:rgba(243,240,251,.95); --overlay-modal:rgba(37,32,51,.28);
--shadow-sm:0 2px 8px rgba(72,54,110,.06); --shadow-md:0 8px 24px rgba(72,54,110,.1); --shadow-lg:0 24px 72px rgba(72,54,110,.18);
}
html.picpac-mint,
body.picpac-mint {
--bg:#eff7f3; --surface:#ffffff; --surface2:#f6fbf8; --surface3:#e2f0e8;
--border:#cfe2d7; --border2:#a9cbbb; --text:#1e3028; --text2:#557568; --text3:#6d8f80;
--accent:#4f9b7d; --accent2:#76b89b; --accent3:#ce7891; --green:#3e8b69; --yellow:#897a2c; --orange:#b77945; --red:#c16073;
--overlay-bg:rgba(239,247,243,.95); --overlay-modal:rgba(30,48,40,.28);
--shadow-sm:0 2px 8px rgba(45,96,73,.06); --shadow-md:0 8px 24px rgba(45,96,73,.1); --shadow-lg:0 24px 72px rgba(45,96,73,.18);
}
html.picpac-peach,
body.picpac-peach {
--bg:#fff4ef; --surface:#ffffff; --surface2:#fff9f6; --surface3:#f7e4db;
--border:#edd5ca; --border2:#d8b6a6; --text:#3a2823; --text2:#765b50; --text3:#9a7568;
--accent:#d58a6c; --accent2:#e0ab8c; --accent3:#c9788e; --green:#4f956f; --yellow:#98762e; --orange:#b56d3b; --red:#c76470;
--overlay-bg:rgba(255,244,239,.95); --overlay-modal:rgba(58,40,35,.28);
--shadow-sm:0 2px 8px rgba(119,73,53,.06); --shadow-md:0 8px 24px rgba(119,73,53,.1); --shadow-lg:0 24px 72px rgba(119,73,53,.18);
}
html.picpac-sky,
body.picpac-sky {
--bg:#eef6fb; --surface:#ffffff; --surface2:#f7fbfe; --surface3:#e1eef7;
--border:#cddfea; --border2:#a9c7da; --text:#20303d; --text2:#567084; --text3:#6e8c9d;
--accent:#5b99c6; --accent2:#83b6d8; --accent3:#c87998; --green:#478e78; --yellow:#92782d; --orange:#b57040; --red:#c46675;
--overlay-bg:rgba(238,246,251,.95); --overlay-modal:rgba(32,48,61,.28);
--shadow-sm:0 2px 8px rgba(55,91,117,.06); --shadow-md:0 8px 24px rgba(55,91,117,.1); --shadow-lg:0 24px 72px rgba(55,91,117,.18);
}
html.picpac-rose,
body.picpac-rose {
--bg:#fff1f5; --surface:#ffffff; --surface2:#fff8fa; --surface3:#f6e0e8;
--border:#eccfd9; --border2:#d9aeba; --text:#38242d; --text2:#765564; --text3:#987182;
--accent:#c97891; --accent2:#dc9db2; --accent3:#c46785; --green:#528f74; --yellow:#98772c; --orange:#b66f44; --red:#c46072;
--overlay-bg:rgba(255,241,245,.95); --overlay-modal:rgba(56,36,45,.28);
--shadow-sm:0 2px 8px rgba(112,55,75,.06); --shadow-md:0 8px 24px rgba(112,55,75,.1); --shadow-lg:0 24px 72px rgba(112,55,75,.18);
}
html.picpac-sage,
body.picpac-sage {
--bg:#f2f6ee; --surface:#ffffff; --surface2:#f8fbf5; --surface3:#e6efdf;
--border:#d4e1c9; --border2:#b4c8a5; --text:#2a3525; --text2:#61735a; --text3:#7d8f74;
--accent:#789b68; --accent2:#9fba88; --accent3:#be7e88; --green:#578b62; --yellow:#8e792d; --orange:#a87845; --red:#be6875;
--overlay-bg:rgba(242,246,238,.95); --overlay-modal:rgba(42,53,37,.28);
--shadow-sm:0 2px 8px rgba(65,91,52,.06); --shadow-md:0 8px 24px rgba(65,91,52,.1); --shadow-lg:0 24px 72px rgba(65,91,52,.18);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
/* Фон холста берём и с . Инлайн-скрипт в вешает тему на до первой
отрисовки — если фон есть только на body, браузер успевает мигнуть белым/тёмным, пока
body не распарсился. С фоном на холст красится сразу правильным цветом. */
html { background: var(--bg); }
body {
font-family: 'Inter', system-ui, sans-serif;
background: var(--bg);
color: var(--text);
display: flex;
height: 100vh;
height: 100dvh; /* iOS/Android: учитывает системные панели, 100vh их игнорирует */
overflow: hidden;
font-size: calc(14px * var(--text-scale));
}
/* ── Доступность: видимый фокус только для клавиатуры ── */
:focus { outline: none; }
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 3px;
}
/* WCAG 2.4.11 (Focus Not Obscured): на mobile bottom-nav фиксирован 62px высоты.
scroll-margin-bottom гарантирует что Tab-focused элемент при scrollIntoView не
уезжает под панель навигации. Декларативно, без JS. */
@media (max-width: 768px) {
a, button, [tabindex], input, select, textarea, [role="button"], [role="option"] {
scroll-margin-bottom: calc(72px + env(safe-area-inset-bottom));
}
}
/* ── Скрыто визуально, доступно скринридерам ── */
.sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ── Skeleton loaders (вместо текста «Загрузка…») ── */
@keyframes skel-shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.skel {
background: linear-gradient(90deg, var(--surface2) 25%, var(--surface3) 50%, var(--surface2) 75%);
background-size: 200% 100%;
animation: skel-shimmer 1.4s ease-in-out infinite;
border-radius: 4px;
}
.skel-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.skel-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.skel-lines { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.skel-line { height: 12px; }
.skel-line.w70 { width: 70%; } .skel-line.w50 { width: 50%; } .skel-line.w90 { width: 90%; }
.skel-card { padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 8px; }
@media (prefers-reduced-motion: reduce) {
.skel { animation: none; background: var(--surface2); }
}
/* ── Empty / Error states ── */
.empty-state, .error-state {
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 32px 16px; text-align: center; color: var(--text2);
}
.empty-state .icon, .error-state .icon { font-size: 42px; margin-bottom: 8px; opacity: 0.6; }
.empty-state .title, .error-state .title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.empty-state .desc, .error-state .desc { font-size: 12px; color: var(--text3); max-width: 320px; line-height: 1.5; margin-bottom: 12px; }
.error-state { color: var(--red); }
.error-state .icon { opacity: 0.8; }
.error-state .title { color: var(--red); }
.error-state .desc { color: var(--text2); }
/* ── Таблицы — ARIA-friendly заголовки и accessible chart-wrap ── */
table[role="table"] caption.sr-only { /* объясняет SR контекст */ }
.chart-wrap[role="img"] { position: relative; }
.chart-wrap[role="img"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
/* ── Командная палитра Ctrl+K ── */
.cmdk-overlay { position:fixed; inset:0; background:var(--overlay-modal); display:none; justify-content:center; align-items:flex-start; padding-top:12vh; z-index:100000; }
.cmdk-overlay.open { display:flex; }
.cmdk-box { width:min(600px,92vw); max-height:70vh; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); display:flex; flex-direction:column; overflow:hidden; }
.cmdk-input-row { display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--border); }
.cmdk-input { flex:1; background:transparent; border:none; outline:none; color:var(--text); font-size:16px; font-family:inherit; }
.cmdk-esc { font-size:11px; color:var(--text3); border:1px solid var(--border); border-radius:6px; padding:2px 6px; }
.cmdk-results { overflow-y:auto; padding:6px; }
.cmdk-group-title { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--text3); padding:8px 12px 4px; }
.cmdk-item { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--radius-md); cursor:pointer; }
.cmdk-item.sel { background:var(--accent); color:#fff; }
.cmdk-item.sel .cmdk-sub { color:rgba(255,255,255,.82); }
.cmdk-ico { width:22px; text-align:center; font-size:15px; }
.cmdk-main { flex:1; min-width:0; }
.cmdk-title { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmdk-sub { font-size:11px; color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmdk-empty { padding:24px; text-align:center; color:var(--text3); font-size:13px; }
.cmdk-foot { padding:8px 14px; border-top:1px solid var(--border); font-size:11px; color:var(--text3); display:flex; gap:14px; }
/* Клавиатурная навигация по списку чатов (J/K) */
.kbd-focus { outline:2px solid var(--accent) !important; outline-offset:-2px; border-radius:var(--radius-md); }
.sidebar {
width: 188px; min-width: 188px;
background: var(--surface);
border-right: 1px solid var(--border);
display: flex; flex-direction: column;
overflow: hidden;
transition: width var(--duration-normal), min-width var(--duration-normal);
}
/* Свёрнутый sidebar — только иконки. Применяется на desktop (>768px). */
@media (min-width: 769px) {
body.sidebar-collapsed .sidebar { width: 64px; min-width: 64px; }
body.sidebar-collapsed .sidebar .label,
body.sidebar-collapsed .sidebar .logo-text,
body.sidebar-collapsed .sidebar .logo-sub,
body.sidebar-collapsed .sidebar .logo-img,
body.sidebar-collapsed .sidebar .logo-crm,
body.sidebar-collapsed .sidebar .nav-section,
body.sidebar-collapsed .sidebar .user-info,
body.sidebar-collapsed .sidebar .sidebar-footer,
body.sidebar-collapsed .sidebar .sidebar-order-logo-toggle { display: none !important; }
body.sidebar-collapsed .sidebar .sidebar-order-toolbar { display: none !important; }
body.sidebar-collapsed .sidebar .logo .logo-icon { display: flex !important; }
body.sidebar-collapsed .sidebar .logo { justify-content: center; padding: 12px 8px; }
body.sidebar-collapsed .sidebar .user-card { justify-content: center; padding: 12px 8px; }
body.sidebar-collapsed .sidebar .nav-item { justify-content: center; padding: 12px 8px; gap: 0; }
body.sidebar-collapsed .sidebar .nav-item .icon { font-size: 20px; }
body.sidebar-collapsed .sidebar .nav-item .badge { position: absolute; top: 4px; right: 6px; }
/* tooltip на hover через title — уже отрисует браузер; для скринридеров — aria-label на .nav-item остаётся */
}
.sidebar-toggle { cursor: pointer; padding: 6px 10px; border-radius: var(--radius-md); background: transparent; border: 1px solid var(--border); color: var(--text2); font-size: 18px; line-height: 1; transition: background var(--duration-fast), color var(--duration-fast); }
.sidebar-toggle:hover { background: var(--surface2); color: var(--text); }
.logo {
padding: 18px 16px 14px;
border-bottom: 1px solid var(--border);
display: flex; align-items: center; gap: 10px;
}
.logo-icon {
width: 36px; height: 36px;
background: var(--accent);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 16px; font-weight: 800; color: white; letter-spacing: -1px;
}
.logo-icon > img {
width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 50%;
}
.logo-text { font-weight: 700; font-size: 16px; letter-spacing: -0.3px; }
.logo-sub { font-size: 10px; color: var(--text3); font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; }
/* Утверждённый логотип Mary в сайдбаре (развёрнутое меню). Компактный знак остаётся для свёрнутого. */
.logo .logo-icon { display: none; }
.logo-img { height: 30px; width: auto; display: block; }
.logo-crm { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.16em; color: var(--text3); text-transform: uppercase; }
.user-card {
padding: 14px 16px; border-bottom: 1px solid var(--border);
display: flex; align-items: center; gap: 10px; cursor: pointer;
}
.user-info { min-width: 0; flex: 1; }
.user-avatar {
width: 34px; height: 34px; border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent2));
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 13px; color: white; flex-shrink: 0;
}
.user-info .name { font-weight: 600; font-size: 13px; }
.user-info .role { font-size: 11px; color: var(--text3); }
.sidebar-work-status { align-items: center; gap: 5px; margin-top: 2px; font-size: 10px; color: var(--text3); }
.sidebar-work-status span { width: 6px; height: 6px; border-radius: 50%; background: var(--text3); flex: 0 0 auto; }
.sidebar-work-status b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.sidebar-work-status.working { color: var(--green); }
.sidebar-work-status.working span { background: var(--green); box-shadow: 0 0 5px color-mix(in oklab, var(--green) 65%, transparent); }
.sidebar-order-logo-toggle { flex: 0 0 28px; width: 28px; height: 28px; }
.client-name-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.client-highlighted-discount {
color: var(--green); cursor: help; font-size: inherit; font-weight: 700; line-height: inherit;
border-bottom: 1px dotted currentColor; white-space: nowrap;
}
nav { flex: 1; padding: 10px 0; overflow-y: auto; }
nav::-webkit-scrollbar { width: 3px; }
nav::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }
.sidebar-order-toolbar {
display: none; align-items: center; justify-content: flex-end; gap: 8px;
min-height: 30px; padding: 0 10px 4px 14px; order: -1; flex: 0 0 auto;
}
.sidebar-order-toolbar-label {
display: none; min-width: 0; flex: 1; color: var(--text3);
font-size: 10px; font-weight: 600; text-transform: uppercase;
}
.sidebar-order-toolbar-actions { display: flex; align-items: center; gap: 3px; }
.sidebar-order-tool,
.sidebar-order-move {
width: 26px; height: 26px; padding: 0; border: 1px solid transparent; border-radius: 6px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent; color: var(--text3); cursor: pointer;
}
.sidebar-order-tool:hover,
.sidebar-order-move:hover { background: var(--surface2); color: var(--text); border-color: var(--border); }
.sidebar-order-tool:focus-visible,
.sidebar-order-move:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sidebar-order-tool svg,
.sidebar-order-move svg {
width: 15px; height: 15px; stroke: currentColor; fill: none;
stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
#sidebarOrderReset { display: none; }
.sidebar-order-controls { display: none; align-items: center; gap: 2px; margin-left: auto; order: 3; }
body.sidebar-custom-order .sidebar > nav,
body.sidebar-order-editing .sidebar > nav { display: flex; flex-direction: column; }
body.sidebar-custom-order .sidebar .nav-section,
body.sidebar-order-editing .sidebar .nav-section { display: none !important; }
body.sidebar-order-editing .sidebar-order-toolbar { display: flex; justify-content: space-between; }
body.sidebar-order-editing .sidebar-order-toolbar-label,
body.sidebar-order-editing #sidebarOrderReset,
body.sidebar-order-editing .sidebar-order-controls { display: flex; }
body.sidebar-custom-order .sidebar .nav-item,
body.sidebar-order-editing .sidebar .nav-item { flex: 0 0 auto; }
body.sidebar-order-editing .sidebar .nav-item { cursor: default; }
body.sidebar-order-editing .sidebar .nav-item .label {
min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.sidebar-order-editing .sidebar .nav-item .badge { margin-left: 0; order: 2; }
.sidebar-order-tool:disabled,
.sidebar-order-move:disabled { opacity: .3; cursor: default; pointer-events: none; }
.nav-section { padding: 8px 14px 4px; font-size: 10px; color: var(--text3); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.nav-item {
display: flex; align-items: center; gap: 10px;
padding: 9px 14px; cursor: pointer;
transition: background 0.15s; position: relative;
text-decoration: none; color: inherit;
}
.nav-item:hover { background: var(--surface2); }
.nav-item.active { background: var(--surface3); color: var(--accent); }
.nav-item.active::before {
content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 3px; height: 60%; background: var(--accent); border-radius: 0 2px 2px 0;
}
.nav-item .icon { font-size: 16px; width: 20px; text-align: center; }
/* Модерн-иконки навигации: SVG наследует цвет пункта (активный = var(--accent)), округлый стиль */
.nav-item .icon svg { width: 20px; height: 20px; display: block; margin: 0 auto;
stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
body.sidebar-collapsed .sidebar .nav-item .icon svg { width: 22px; height: 22px; }
.nav-item .label { font-size: 13px; font-weight: 500; }
/* Иконки в кнопках (SVG вместо эмодзи): наследуют цвет кнопки, округлый стиль */
.bic { width: 16px; height: 16px; display: inline-block; vertical-align: -3px;
stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* Иконки-кнопки топбара (тема, звук, меню, уведомления) — по центру */
.tbic { width: 18px; height: 18px; display: block; margin: 0 auto;
stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* Иконки в заголовках/метках страниц (перед текстом) — масштабируются под кегль */
.hic { width: 1.1em; height: 1.1em; display: inline-block; vertical-align: -0.16em; margin-right: 2px;
stroke: currentColor; fill: none; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.nav-item .badge {
margin-left: auto; background: var(--accent3);
color: white; font-size: 10px; font-weight: 700;
padding: 2px 6px; border-radius: 10px; min-width: 20px; text-align: center;
}
.nav-item .badge.green { background: var(--green); color: #0d0f14; }
.sidebar-footer {
padding: 12px 16px; border-top: 1px solid var(--border);
font-size: 11px; color: var(--text3);
display: flex; align-items: center; gap: 8px;
}
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.topbar {
height: 56px; min-height: 56px;
background: var(--surface); border-bottom: 1px solid var(--border);
display: flex; align-items: center; padding: 0 24px; gap: 16px;
position: sticky; top: 0; z-index: 50; /* фон шапки перекрывает контент при прокрутке (в т.ч. под статус-баром PWA) */
}
.topbar-title { font-size: 17px; font-weight: 700; flex: 1; }
.topbar-search {
display: flex; align-items: center; gap: 8px;
background: var(--surface2); border: 1px solid var(--border);
border-radius: var(--radius2); padding: 7px 12px; width: 260px;
transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.topbar-search:hover { border-color: var(--border2); }
.topbar-search:focus-within {
border-color: var(--accent);
background: var(--surface);
box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 18%, transparent);
}
.topbar-search input {
background: none; border: none; outline: none;
color: var(--text); font-size: 13px; font-family: inherit; width: 100%;
cursor: text; caret-color: var(--accent);
}
.topbar-search:focus-within > span { color: var(--accent) !important; }
.topbar-search input::placeholder { color: var(--text3); }
.btn {
padding: 8px 16px; border-radius: var(--radius2);
font-family: inherit; font-size: 13px; font-weight: 600;
cursor: pointer; border: none; transition: all 0.15s;
display: flex; align-items: center; gap: 6px;
}
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn-primary { background: var(--accent); color: white; }
.btn-primary:hover { filter: brightness(1.1); }
.btn-ghost { background: var(--surface2); color: var(--text2); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--surface3); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
/* justify-content обязателен: у .btn стоит display:flex + align-items:center,
то есть центрирование ТОЛЬКО по вертикали. Пока кнопка сжата по содержимому,
это незаметно, но стоит задать ей ширину (как в ряду фильтров инбокса) —
иконка прижимается к левому краю. Центрируем по обеим осям, глобально. */
.btn-icon { padding: 7px; justify-content: center; }
.btn-danger { background: rgba(255,79,79,0.15); color: var(--red); border: 1px solid rgba(255,79,79,0.3); }
.btn-success { background: rgba(34,216,122,0.15); color: var(--green); border: 1px solid rgba(34,216,122,0.3); }
.content { flex: 1; overflow-y: auto; padding: 24px; }
.content::-webkit-scrollbar { width: 4px; }
.content::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }
.page { display: none; }
.page.active { display: block; }
/* STATS */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.stat-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); padding: 20px; position: relative; overflow: hidden;
}
.stat-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; }
.stat-card.blue::after { background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.stat-card.green::after { background: var(--green); }
.stat-card.yellow::after { background: var(--yellow); }
.stat-card.red::after { background: var(--red); }
.stat-label { font-size: 12px; color: var(--text3); font-weight: 500; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.stat-value { font-size: 28px; font-weight: 800; letter-spacing: -1px; margin-bottom: 4px; font-family: 'JetBrains Mono', monospace; }
.stat-change { font-size: 12px; color: var(--text3); }
.stat-change.up { color: var(--green); }
.stat-change.down { color: var(--red); }
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
/* дети grid по умолчанию min-width:auto → широкая таблица распирала сетку вбок.
Разрешаем сжатие + широкий контент скроллим внутри самой карточки, а не всей страницы.
Скоуп — только дашборд, чтобы не задеть раскладку «Входящих». */
#page-dashboard .dash-grid > * { min-width: 0; }
#incUnrepliedList, #incTopMgrs { overflow-x: auto; }
/* Inbox: список | разделитель | переписка — ширину можно перетаскивать */
#page-inbox .dash-grid { grid-template-columns: var(--inbox-list-w, 380px) 8px 1fr; gap: 8px; }
.inbox-client-panel[hidden] { display: none !important; }
body.inbox-client-panel-open #page-inbox .dash-grid {
grid-template-columns: minmax(380px, 1fr) 8px clamp(320px, var(--inbox-client-w, 400px), 52vw);
}
body.inbox-client-panel-open #page-inbox .inbox-pane-list,
body.inbox-client-panel-open #page-inbox .inbox-list-resizer { display: none !important; }
.inbox-client-resizer { display: none; }
body.inbox-client-panel-open #page-inbox .inbox-client-resizer { display: block; }
body.inbox-client-panel-open #page-inbox .inbox-client-panel {
display: block;
min-width: 0;
height: calc(100vh - 140px);
padding: 0;
overflow: hidden;
}
.inbox-client-panel .inbox-client-panel-dialog {
width: 100% !important;
max-width: none !important;
height: 100%;
max-height: none;
margin: 0;
border: 0;
border-radius: 8px;
box-shadow: none;
animation: none;
display: flex;
flex-direction: column;
overflow: hidden;
}
.inbox-client-panel .inbox-client-panel-dialog[hidden] { display: none !important; }
.inbox-client-panel .inbox-client-panel-dialog .modal-header { flex: 0 0 auto; padding: 14px 16px; }
.inbox-client-profile-btn {
position: relative;
margin-left: 6px;
overflow: visible;
}
.inbox-client-tags-btn {
margin-left: 4px;
}
.inbox-conversation-tags-btn {
position: relative;
margin-left: 4px;
overflow: visible;
}
.inbox-conversation-tags-btn.has-missing-topic::after {
content: '';
position: absolute;
top: -4px;
right: -4px;
width: 9px;
height: 9px;
border: 2px solid var(--surface);
border-radius: 50%;
background: #d92f58;
animation: inbox-missing-contact-pulse 1.2s ease-in-out infinite;
}
.inbox-client-tasks-btn {
position: relative;
margin-left: 4px;
overflow: visible;
}
.inbox-client-task-badge {
position: absolute;
top: -6px;
right: -6px;
min-width: 18px;
height: 18px;
padding: 0 4px;
border: 2px solid var(--surface);
border-radius: 9px;
background: var(--green);
color: #0d0f14;
font-size: 9px;
font-weight: 800;
line-height: 14px;
text-align: center;
font-variant-numeric: tabular-nums;
}
#inboxChatHeader .act-label { display: none; }
#inboxChatHeader .inbox-close-appeal-btn .act-label { display: inline; }
#inboxChatHeader .inbox-release-icon {
box-sizing: border-box;
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid currentColor;
border-radius: 50%;
flex: 0 0 18px;
line-height: 0;
vertical-align: middle;
}
#inboxChatHeader .inbox-release-icon .bic {
display: block;
flex: 0 0 10px;
width: 10px;
height: 10px;
margin: 0;
vertical-align: 0;
}
#inboxChatHeader .btn {
flex: 0 0 auto;
padding: 8px 9px;
}
#inboxChatHeader {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
min-width: 0;
}
.inbox-chat-header-main,
.inbox-chat-header-context,
.inbox-chat-header-identity,
.inbox-chat-header-identity-actions,
.inbox-chat-header-actions {
display: flex;
align-items: center;
}
.inbox-chat-header-main {
flex: 1 1 auto;
gap: 6px;
min-width: 0;
}
.inbox-chat-header-context {
flex: 1 1 auto;
min-width: 0;
flex-direction: column;
align-items: stretch;
gap: 3px;
}
.inbox-chat-header-identity {
flex: 1 1 auto;
gap: 6px;
min-width: 0;
}
.inbox-chat-header-identity .inbox-client-title-block {
flex: 0 1 auto;
min-width: 0;
}
.inbox-chat-header-identity-actions,
.inbox-chat-header-actions {
flex: 0 0 auto;
gap: 6px;
}
.inbox-chat-header-actions {
justify-content: flex-end;
margin-left: auto;
}
#inboxChatHeader .inbox-client-profile-btn,
#inboxChatHeader .inbox-client-tags-btn,
#inboxChatHeader .inbox-conversation-tags-btn,
#inboxChatHeader .inbox-client-tasks-btn,
#inboxChatHeader .inbox-back-btn {
margin-left: 0;
}
.inbox-claim-banner {
display: none;
align-items: center;
gap: 4px;
color: var(--orange);
font-size: 12px;
font-weight: 600;
min-width: 0;
}
.inbox-claim-banner-text {
display: block;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.inbox-claim-manager {
color: var(--text);
}
.inbox-toolbar-tooltip {
position: fixed;
z-index: 10050;
max-width: 280px;
padding: 6px 9px;
border: 1px solid rgba(255,255,255,.16);
border-radius: 6px;
background: #171714;
box-shadow: 0 8px 24px rgba(0,0,0,.22);
color: #fff;
font-size: 11px;
font-weight: 600;
line-height: 1.35;
text-align: center;
pointer-events: none;
}
#inboxChatHeader .card-title {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.inbox-chat-search {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
border-bottom: 1px solid var(--border);
background: var(--surface);
}
.inbox-chat-search[hidden] { display: none; }
.inbox-chat-search-field {
position: relative;
flex: 1 1 auto;
min-width: 100px;
}
.inbox-chat-search-field > .bic {
position: absolute;
left: 10px;
top: 50%;
z-index: 1;
width: 16px;
height: 16px;
color: var(--text3);
transform: translateY(-50%);
pointer-events: none;
}
.inbox-chat-search-field .form-input {
width: 100%;
height: 36px;
padding: 7px 10px 7px 34px;
}
.inbox-chat-search-count {
min-width: 62px;
color: var(--text2);
font-size: 12px;
font-variant-numeric: tabular-nums;
text-align: center;
white-space: nowrap;
}
.inbox-chat-search .btn-icon {
width: 36px;
height: 36px;
min-width: 36px;
padding: 8px;
}
.inbox-chat-search[aria-busy="true"] .inbox-chat-search-count { color: var(--text3); }
mark.chat-search-mark {
padding: 0 1px;
border-radius: 2px;
background: #ffe37a;
color: #231f14;
}
mark.chat-search-mark.is-current {
background: #ffb629;
box-shadow: 0 0 0 1px rgba(116, 71, 0, .25);
}
.msg-row.chat-search-current .msg-bubble,
.msg-row.chat-search-current .msg-system-note {
outline: 2px solid #e09a13;
outline-offset: 2px;
}
.inbox-client-title-block {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.2;
}
.inbox-client-header-avatar {
width: 28px;
height: 28px;
flex: 0 0 28px;
font-size: 10px;
}
.inbox-client-header-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.inbox-client-card-details {
display: flex;
align-items: center;
gap: 5px;
min-width: 0;
margin-top: 2px;
overflow: hidden;
color: var(--text3);
font-size: 11px;
white-space: nowrap;
}
.inbox-client-card-details > span:not(.inbox-client-detail-separator) {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.inbox-client-detail-separator { flex: 0 0 auto; }
.inbox-client-header-tags {
display: inline-flex;
align-items: center;
gap: 5px;
min-width: 0;
white-space: nowrap;
}
.inbox-client-header-tags .client-tag-chip { max-width: 110px; }
.conversation-tags-header {
display: inline-flex;
align-items: center;
gap: 5px;
min-width: 0;
white-space: nowrap;
}
.conversation-tag-chip {
--conversation-tag-color: #6b7280;
--conversation-tag-text: #ffffff;
max-width: 120px;
min-height: 20px;
display: inline-flex;
align-items: center;
padding: 2px 7px;
border: 1px solid color-mix(in oklab, var(--conversation-tag-color) 82%, #000000);
border-radius: 999px;
background: var(--conversation-tag-color);
color: var(--conversation-tag-text);
font-size: 10px;
font-weight: 700;
line-height: 1.35;
}
.conversation-tag-chip > span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.inbox-client-profile-btn.has-missing-contact::after {
content: '';
position: absolute;
top: -4px;
right: -4px;
width: 10px;
height: 10px;
border: 2px solid var(--surface);
border-radius: 50%;
background: #d92f58;
animation: inbox-missing-contact-pulse 1.2s ease-in-out infinite;
}
@keyframes inbox-missing-contact-pulse {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(217, 47, 88, .42); }
50% { opacity: .3; box-shadow: 0 0 0 5px rgba(217, 47, 88, 0); }
}
@media (prefers-reduced-motion: reduce) {
.inbox-client-profile-btn.has-missing-contact::after,
.inbox-conversation-tags-btn.has-missing-topic::after { animation: none; }
}
.inbox-client-email {
margin-top: 2px;
overflow: hidden;
color: var(--text3);
font-size: 11px;
text-overflow: ellipsis;
white-space: nowrap;
}
.inbox-client-panel .inbox-client-panel-dialog .modal-body {
flex: 1 1 auto;
min-height: 0;
padding: 14px;
overflow-y: auto;
}
.inbox-client-panel .inbox-client-tasks-body { padding: 0; }
.inbox-client-tasks-header {
gap: 10px;
align-items: center;
}
.inbox-client-task-heading {
min-width: 0;
flex: 1 1 auto;
}
.inbox-client-task-heading .modal-title,
.inbox-client-task-heading .text-sm {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.inbox-client-task-heading .text-sm { margin-top: 3px; }
.inbox-client-task-actions {
display: flex;
align-items: center;
gap: 6px;
flex: 0 0 auto;
}
.inbox-client-task-total {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 28px;
padding: 0 7px;
border-radius: 6px;
background: color-mix(in oklab, var(--green) 18%, var(--surface2));
color: var(--green);
font-size: 12px;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.inbox-client-task-row {
display: flex;
align-items: center;
gap: 8px;
min-height: 82px;
padding: 11px 12px;
border-bottom: 1px solid var(--border);
}
.inbox-client-task-row:last-child { border-bottom: 0; }
.inbox-client-task-row:hover { background: var(--surface2); }
.inbox-client-task-row.is-overdue { box-shadow: inset 3px 0 0 var(--red); }
.inbox-client-task-main {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: 5px;
min-width: 0;
padding: 0;
border: 0;
background: transparent;
color: inherit;
text-align: left;
cursor: pointer;
}
.inbox-client-task-main strong {
overflow: hidden;
font-size: 13px;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
.inbox-client-task-main:hover strong,
.inbox-client-task-main:focus-visible strong { color: var(--accent); }
.inbox-client-task-main:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 4px;
}
.inbox-client-task-meta {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
color: var(--text3);
font-size: 10px;
line-height: 1.3;
}
.inbox-client-task-meta > span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.inbox-client-task-meta > span:last-child { margin-left: auto; }
.inbox-client-task-meta .is-overdue { color: var(--red); font-weight: 700; }
.inbox-client-task-status { display: inline-flex; align-items: center; gap: 5px; }
.inbox-client-task-status i {
display: inline-block;
flex: 0 0 7px;
width: 7px;
height: 7px;
border-radius: 50%;
}
.inbox-client-tasks-empty {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 160px;
padding: 24px;
color: var(--text3);
font-size: 12px;
}
.client-task-archive-modal { width: 620px; max-width: 94vw; }
#clientTaskArchiveBody { padding: 0; max-height: min(65vh, 640px); overflow-y: auto; }
.inbox-client-panel .mock-client-profile-layout { grid-template-columns: 1fr; }
.inbox-client-panel .external-profile-grid { grid-template-columns: 1fr; }
.inbox-client-panel .client-additional-contacts,
.inbox-client-panel .client-contact-channels { grid-template-columns: 1fr; }
.inbox-client-panel .client-contact-add-form { grid-template-columns: 1fr 34px; }
.inbox-client-panel .client-contact-add-form select { grid-column: 1 / -1; }
.inbox-resizer { cursor: col-resize; background: transparent; position: relative; border-radius: 4px; transition: background var(--duration-fast); user-select: none; }
.inbox-resizer::after { content: ''; position: absolute; inset: 0; left: 2px; right: 2px; background: var(--border); border-radius: 4px; opacity: 0.4; transition: opacity var(--duration-fast); }
.inbox-resizer:hover::after, .inbox-resizer.dragging::after { opacity: 1; background: var(--accent); }
body.inbox-resizing { cursor: col-resize !important; user-select: none; }
body.inbox-resizing * { cursor: col-resize !important; pointer-events: none; }
body.inbox-resizing .inbox-resizer { pointer-events: auto; }
.dash-grid-3 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.card-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.card-title { font-weight: 700; font-size: 14px; }
.card-body { padding: 16px 20px; }
/* ─────────────────────────────────────────────────────────────
УТИЛИТЫ АДАПТИВНОСТИ — вешать на новые ряды кнопок/фильтров.
Причина появления: ряды, свёрстанные инлайном (переключатели периодов,
фильтры дат, значки каналов), на телефоне не помещались — кнопки сжимались
до вылезания текста за рамку либо обрезались за краем экрана. Каждый такой
случай приходилось ловить отдельным селектором по атрибуту style, что хрупко.
.u-strip — лента: на телефоне ОДНА строка с горизонтальной прокруткой.
Для наборов из многих кнопок (периоды, фильтры каналов).
.u-wrap — ряд: на телефоне переносится вместо сжатия.
Для «заголовок + пара кнопок».
На десктопе оба класса ничего не навязывают.
───────────────────────────────────────────────────────────── */
.u-strip { display: flex; align-items: center; gap: 8px; }
/* ── Плашка заказа с сайта picpac.by (под сообщением клиента) ── */
.order-chip {
margin-top: 8px; padding: 8px 10px;
background: var(--surface2); border: 1px solid var(--border);
border-left: 3px solid var(--accent);
border-radius: var(--radius-md);
font-size: 12px; line-height: 1.45;
}
.order-chip-load { color: var(--text3); font-size: 11px; }
.order-chip-head { font-weight: 700; margin-bottom: 3px; }
.order-chip-track { color: var(--text2); margin-bottom: 2px; }
.order-chip-city { color: var(--text3); font-size: 11px; margin-bottom: 4px; }
.order-chip-item { color: var(--text2); font-size: 11px; padding-left: 10px; }
.order-chip-actions { margin-top: 8px; }
/* на телефоне кнопка во всю ширину — попасть пальцем */
@media (max-width: 768px) {
.order-chip-actions .btn { width: 100%; justify-content: center; }
}
/* Номер заказа в тексте сообщения → ссылка в админку сайта.
Пунктир, а не сплошное подчёркивание: это не обычная ссылка, а переход
во внешнюю систему — визуально отличаем от ссылок, которые прислал клиент. */
.msg-order-link {
color: var(--accent); font-weight: 700;
text-decoration: underline; text-decoration-style: dotted;
text-underline-offset: 2px; cursor: pointer;
}
.msg-order-link:hover { text-decoration-style: solid; }
.msg-bubble.out .msg-order-link { color: #fff; }
/* Архив чатов — компактные фильтры. */
#inboxArchiveFilters { gap: 5px !important; padding: 8px 12px !important; }
#inboxArchiveFilters input[type="date"],
#inboxArchiveFilters #archiveOperator { min-width: 0 !important; flex: 1 1 30% !important; }
.inbox-workflow-filters {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-bottom: 1px solid var(--border);
background: var(--surface2);
}
.inbox-workflow-filters > .bic { flex: 0 0 auto; color: var(--text3); }
.inbox-workflow-filters .form-select {
width: 100%;
min-width: 0;
padding: 6px 30px 6px 9px;
font-size: 12px;
}
.inbox-channel-filter {
position: relative;
flex: 0 0 auto;
}
.inbox-channel-filter-button {
display: inline-flex;
align-items: center;
gap: 5px;
min-height: 32px;
padding: 5px 10px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
color: var(--text2);
font: inherit;
font-size: 12px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
}
.inbox-channel-filter-button:hover,
.inbox-channel-filter-button.is-active {
border-color: var(--accent);
color: var(--text);
background: color-mix(in oklab, var(--accent) 10%, var(--surface));
}
.inbox-channel-filter-label { line-height: 1; }
.inbox-channel-filter-chevron {
width: 14px;
height: 14px;
color: var(--text3);
transition: transform .15s ease;
}
.inbox-channel-filter-button.is-open .inbox-channel-filter-chevron { transform: rotate(180deg); }
.inbox-channel-filter-panel {
position: absolute;
z-index: 80;
top: calc(100% + 6px);
right: 0;
display: grid;
gap: 4px;
min-width: 190px;
max-height: 260px;
overflow-y: auto;
padding: 8px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
box-shadow: var(--shadow-lg);
}
.inbox-channel-filter-panel[hidden] { display: none; }
.inbox-channel-filter-option {
display: flex;
align-items: center;
gap: 7px;
min-height: 28px;
padding: 3px 5px;
border-radius: 5px;
color: var(--text2);
font-size: 12px;
cursor: pointer;
}
.inbox-channel-filter-option:hover { background: var(--surface2); color: var(--text); }
.inbox-channel-filter-option input { accent-color: var(--accent); }
.inbox-channel-filter-option span { display: inline-flex; align-items: center; gap: 5px; }
.inbox-channel-filter-empty { padding: 5px; color: var(--text3); font-size: 11px; }
.inbox-my-groups-toggle {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 32px;
padding: 5px 8px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
color: var(--text2);
font-size: 12px;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
}
.inbox-my-groups-toggle input {
width: 14px;
height: 14px;
margin: 0;
accent-color: var(--accent);
}
.inbox-work-switch {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4px;
padding: 8px 12px;
border-bottom: 1px solid var(--border);
background: var(--surface2);
}
.inbox-work-switch-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-width: 0;
min-height: 34px;
padding: 6px 8px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
color: var(--text2);
font: inherit;
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
}
.inbox-work-switch-btn:hover {
border-color: var(--border2);
color: var(--text);
}
.inbox-work-switch-btn.is-active {
border-color: var(--accent);
background: color-mix(in oklab, var(--accent) 12%, var(--surface));
color: var(--text);
}
.inbox-work-switch-count {
min-width: 20px;
padding: 1px 6px;
border-radius: 999px;
background: var(--surface3);
color: var(--text2);
font-size: 11px;
line-height: 16px;
text-align: center;
font-variant-numeric: tabular-nums;
}
.inbox-work-switch-btn.is-active .inbox-work-switch-count {
background: var(--accent);
color: #fff;
}
.inbox-work-switch-waiting {
color: var(--text3);
font-size: 10px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.inbox-work-switch-btn.is-active .inbox-work-switch-waiting {
color: var(--accent);
}
.inbox-system-channel-row {
display: grid;
grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.4fr) auto;
align-items: center;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--border);
}
.inbox-system-channel-row:last-child { border-bottom: 0; }
.inbox-system-channel-main,
.inbox-system-channel-toggle,
.inbox-system-channel-roles,
.inbox-system-role {
display: flex;
align-items: center;
}
.inbox-system-channel-main { gap: 10px; min-width: 0; }
.inbox-system-channel-toggle,
.inbox-system-role { gap: 5px; font-size: 11px; color: var(--text2); cursor: pointer; }
.inbox-system-channel-toggle input,
.inbox-system-role input { accent-color: var(--accent); }
.inbox-system-channel-identity { min-width: 0; }
.inbox-system-channel-identity strong,
.inbox-system-channel-identity span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-system-channel-identity strong { font-size: 12px; color: var(--text); }
.inbox-system-channel-identity span { margin-top: 2px; font-size: 10px; color: var(--text3); }
.inbox-system-channel-roles { gap: 8px 12px; flex-wrap: wrap; }
@media (max-width: 900px) {
.inbox-system-channel-row { grid-template-columns: 1fr; align-items: stretch; }
.inbox-system-channel-row > .btn { justify-self: start; }
}
.inbox-list-search {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-bottom: 1px solid var(--border);
background: var(--surface2);
}
.inbox-list-search-field {
position: relative;
flex: 1 1 auto;
min-width: 0;
}
.inbox-list-search-field > .bic {
position: absolute;
left: 10px;
top: 50%;
width: 14px;
height: 14px;
transform: translateY(-50%);
color: var(--text3);
pointer-events: none;
}
.inbox-list-search-field .form-input {
width: 100%;
min-width: 0;
height: 36px;
padding: 6px 10px 6px 32px;
font-size: 12px;
}
.inbox-list-search .btn-icon {
width: 36px;
height: 36px;
flex: 0 0 auto;
}
.inbox-workflow-badge {
display: inline-flex;
align-items: center;
gap: 4px;
max-width: 100%;
margin-top: 4px;
padding: 2px 6px;
border: 1px solid transparent;
border-radius: 6px;
font-size: 10px;
font-weight: 700;
line-height: 1.25;
white-space: normal;
}
.inbox-workflow-badge .bic { width: 11px; height: 11px; flex: 0 0 auto; }
.inbox-workflow-badge.waiting-client {
border-color: color-mix(in oklab, var(--yellow) 35%, var(--border));
background: color-mix(in oklab, var(--yellow) 15%, var(--surface));
color: color-mix(in oklab, var(--yellow) 70%, var(--text));
}
.inbox-workflow-badge.waiting-team {
border-color: color-mix(in oklab, var(--orange) 35%, var(--border));
background: color-mix(in oklab, var(--orange) 14%, var(--surface));
color: color-mix(in oklab, var(--orange) 78%, var(--text));
}
.inbox-current-workflow .inbox-workflow-badge { margin: 0 0 0 6px; vertical-align: middle; }
.inbox-appeal-badge {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
min-width: max-content;
min-height: 20px;
margin-left: 6px;
padding: 2px 6px;
overflow: visible;
border: 1px solid var(--border);
border-radius: 5px;
font-size: 10px;
font-weight: 700;
line-height: 1.2;
text-overflow: clip;
white-space: nowrap;
}
.inbox-appeal-badge.is-active {
border-color: color-mix(in oklab, var(--green) 38%, var(--border));
background: color-mix(in oklab, var(--green) 12%, var(--surface));
color: color-mix(in oklab, var(--green) 72%, var(--text));
}
.inbox-appeal-badge.is-closed {
background: var(--surface2);
color: var(--text3);
}
.inbox-completion-trigger.has-workflow-status {
color: var(--orange);
background: color-mix(in oklab, var(--orange) 12%, transparent);
}
.inbox-completion-menu {
position: fixed;
z-index: 10060;
width: min(310px, calc(100vw - 16px));
padding: 5px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
box-shadow: 0 14px 34px rgba(0,0,0,.2);
}
.inbox-completion-menu[hidden] { display: none; }
.inbox-completion-menu button {
display: flex;
align-items: flex-start;
gap: 9px;
width: 100%;
min-height: 38px;
padding: 8px 9px;
border: 0;
border-radius: 5px;
background: transparent;
color: var(--text);
font: inherit;
text-align: left;
cursor: pointer;
}
.inbox-completion-menu button:hover,
.inbox-completion-menu button:focus-visible { background: var(--surface2); outline: none; }
.inbox-completion-menu button.is-selected { background: color-mix(in oklab, var(--accent) 10%, var(--surface)); }
.inbox-completion-menu .bic { width: 17px; height: 17px; margin-top: 1px; flex: 0 0 auto; }
.inbox-completion-menu-title { display: block; font-size: 12px; font-weight: 700; line-height: 1.3; }
.inbox-completion-menu-note { display: block; margin-top: 2px; color: var(--text3); font-size: 10px; line-height: 1.35; }
/* KANBAN */
.kanban-wrap {
display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px;
min-height: calc(100dvh - 140px);
}
.kanban-wrap::-webkit-scrollbar { height: 4px; }
.kanban-wrap::-webkit-scrollbar-thumb { background: var(--border2); }
.kanban-col {
min-width: 240px; width: 240px;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); display: flex; flex-direction: column;
max-height: calc(100dvh - 140px);
}
.kanban-col-header {
padding: 12px 14px; display: flex; align-items: center; gap: 8px;
border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.kanban-col-dot { width: 10px; height: 10px; border-radius: 50%; }
.kanban-col-title { font-weight: 700; font-size: 13px; flex: 1; }
.kanban-col-count {
background: var(--surface3); color: var(--text2);
font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 20px;
}
.kanban-cards { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.kanban-cards::-webkit-scrollbar { width: 3px; }
.kanban-cards::-webkit-scrollbar-thumb { background: var(--border2); }
.task-client-filter-chip {
display: inline-flex;
align-items: center;
gap: 8px;
max-width: min(360px, 100%);
min-height: 34px;
padding: 4px 5px 4px 10px;
border: 1px solid color-mix(in oklab, var(--accent) 36%, var(--border));
border-radius: 7px;
background: color-mix(in oklab, var(--accent) 10%, var(--surface));
color: var(--text);
font-size: 12px;
font-weight: 700;
}
.task-client-filter-chip[hidden] { display: none !important; }
.task-client-filter-chip > span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.task-client-filter-chip .btn {
width: 26px;
height: 26px;
padding: 0;
}
.task-client-filter-chip .bic {
flex: 0 0 auto;
}
.tabs.task-board-switch {
order: 20;
flex: 1 0 100%;
width: 100%;
max-width: none;
display: grid;
grid-template-columns: repeat(var(--task-board-columns, 5), minmax(0, 1fr));
gap: 6px;
}
.task-board-switch .tab {
min-width: 0;
margin: 0;
padding: 8px 10px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid var(--border);
border-radius: 6px;
white-space: nowrap;
overflow: hidden;
}
.task-board-switch .tab span:first-of-type {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.task-board-switch .tab.active {
background: var(--surface2);
border-color: var(--text);
}
.task-kanban-shell {
position: relative;
min-width: 0;
}
.task-kanban-scroll-controls {
position: absolute;
z-index: 8;
inset: 0;
pointer-events: none;
}
.task-kanban-scroll-controls[hidden] { display: none; }
.task-kanban-scroll-controls .btn {
position: absolute;
top: 50%;
width: 46px;
height: 46px;
padding: 0;
display: grid;
place-items: center;
border-color: rgba(255, 255, 255, .16);
border-radius: 50%;
background: rgba(10, 12, 18, .64);
box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
color: #fff;
opacity: .82;
transform: translateY(-50%);
pointer-events: auto;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.task-kanban-scroll-controls .btn:hover,
.task-kanban-scroll-controls .btn:focus-visible {
border-color: rgba(255, 255, 255, .3);
background: rgba(10, 12, 18, .86);
opacity: 1;
}
.task-kanban-scroll-controls .btn:disabled { opacity: .24; }
.task-kanban-scroll-left { left: 8px; }
.task-kanban-scroll-right { right: 8px; }
.task-kanban-scroll-controls .bic {
width: 20px;
height: 20px;
margin: 0;
}
@media (max-width: 768px) {
.tabs.task-board-switch {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.task-kanban {
display: flex;
gap: 14px;
overflow-x: auto;
padding-bottom: 8px;
min-height: calc(100dvh - 200px);
}
.task-kanban::-webkit-scrollbar { height: 4px; }
.task-kanban::-webkit-scrollbar-thumb { background: var(--border2); }
.task-kanban-column {
min-width: 300px;
width: 300px;
max-height: calc(100dvh - 200px);
}
.task-kanban-column .kanban-col-header {
min-height: 48px;
padding: 10px 12px;
gap: 6px;
}
.task-kanban-column .kanban-col-title {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.task-archive-column {
min-width: 0;
width: 100%;
max-height: calc(100dvh - 200px);
}
.deal-card {
background: var(--surface2); border: 1px solid var(--border);
border-radius: var(--radius2); padding: 12px; cursor: pointer; transition: all 0.15s;
}
.deal-card.task-card-link,
.deal-card.task-arch-row { color: inherit; text-decoration: none; }
.deal-card:hover { border-color: var(--accent); background: var(--surface3); transform: translateY(-1px); box-shadow: var(--shadow); }
.task-board-add-column {
align-self: flex-start; min-width: 180px; margin: 8px 0; padding: 10px 14px;
border: 1px dashed var(--border2); border-radius: var(--radius); background: transparent;
color: var(--text2); cursor: pointer; font: inherit; white-space: nowrap;
}
.task-board-add-column:hover { border-color: var(--accent); color: var(--accent); background: var(--surface2); }
.task-column-remove {
flex: 0 0 auto;
width: 26px;
height: 26px;
padding: 0;
color: var(--red);
opacity: .72;
}
.task-column-remove:hover { opacity: 1; background: rgba(255,79,79,.12); }
.deal-card-name { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.deal-card-client { font-size: 12px; color: var(--text3); margin-bottom: 8px; }
.deal-card-footer { display: flex; align-items: center; gap: 6px; }
.channel-tag {
font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 6px;
display: flex; align-items: center; gap: 3px;
}
.channel-tag.tg { background: rgba(38,169,227,0.15); color: var(--tg); border: 1px solid rgba(38,169,227,0.3); }
.channel-tag.vb { background: rgba(115,96,242,0.15); color: var(--vb); border: 1px solid rgba(115,96,242,0.3); }
.channel-tag.ig,
.channel-tag.instagram { background: rgba(225,48,108,0.15); color: var(--ig); border: 1px solid rgba(225,48,108,0.3); }
.channel-tag.email { background: rgba(224,108,64,0.15); color: #e06c40; border: 1px solid rgba(224,108,64,0.3); }
.channel-tag.wc { background: rgba(242,107,71,0.15); color: #F26B47; border: 1px solid rgba(242,107,71,0.3); }
/* Компактный фильтр-чип — только иконка, без подписи */
.channel-tag-icon {
width: 32px; height: 32px; padding: 0;
font-size: 15px;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer; user-select: none;
transition: transform var(--duration-fast), box-shadow var(--duration-fast), opacity var(--duration-fast);
border-radius: var(--radius-md);
}
.channel-tag-icon:hover { transform: scale(1.08); }
.channel-tag-icon.active { box-shadow: 0 0 0 2px var(--accent); opacity: 1 !important; }
vb-icon {
display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em;
background: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.deal-card-manager { margin-left: auto; }
.mini-avatar {
width: 22px; height: 22px; border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent2));
display: flex; align-items: center; justify-content: center;
font-size: 9px; font-weight: 700; color: white;
}
.mini-avatar.m2 { background: linear-gradient(135deg, var(--green), #0dad5a); }
.mini-avatar.m3 { background: linear-gradient(135deg, var(--yellow), #e0a000); }
.mini-avatar.m4 { background: linear-gradient(135deg, var(--orange), #e06000); }
.mini-avatar.m5 { background: linear-gradient(135deg, var(--accent3), #d00040); }
.add-card-btn {
margin: 8px; padding: 8px; border: 1px dashed var(--border2);
border-radius: var(--radius2); background: none; color: var(--text3); font-size: 12px;
cursor: pointer; font-family: inherit;
display: flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.15s;
}
.add-card-btn:hover { border-color: var(--accent); color: var(--accent); }
/* UTM badge */
.utm-badge {
font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 4px;
background: rgba(255,200,64,0.15); color: var(--yellow);
border: 1px solid rgba(255,200,64,0.3); white-space: nowrap;
}
/* TABLE */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th {
padding: 10px 14px; text-align: left;
font-size: 11px; font-weight: 600; color: var(--text3);
text-transform: uppercase; letter-spacing: 0.5px;
border-bottom: 1px solid var(--border); white-space: nowrap;
}
td { padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 13px; }
.kpi-sales-table thead th { background:#1e3a8a; color:#fff; font-size:11px; font-weight:700; text-align:center; text-transform:none; letter-spacing:0; line-height:1.2; padding:8px 6px; border-bottom:none; }
.kpi-sales-table thead th:first-child { text-align:left; }
tr:hover td { background: var(--surface2); }
.client-profile-row { cursor: pointer; }
.client-profile-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.client-profile-row:focus-visible td { background: var(--surface2); }
.client-tag-filter-field {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 13px;
font-weight: 600;
color: var(--text2);
}
.client-tag-filter-field .form-select {
width: 170px;
min-height: 34px;
padding-block: 6px;
font-size: 13px;
}
.client-name-cell {
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.client-new-status {
display: inline-flex;
align-items: center;
min-height: 20px;
max-width: 180px;
padding: 2px 7px;
overflow: hidden;
border: 1px solid var(--border2);
border-radius: 6px;
color: var(--text2);
background: var(--surface2);
font-size: 10px;
font-weight: 700;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
}
.client-lead-status {
display: inline-flex;
align-items: center;
min-height: 20px;
max-width: 180px;
padding: 2px 7px;
overflow: hidden;
border: 1px solid #9bb9df;
border-radius: 6px;
color: #244b78;
background: #eaf2ff;
font-size: 10px;
font-weight: 700;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
}
.client-new-status.first-order {
border-color: #d6b600;
color: #5e4a00;
background: #fff3a6;
}
.client-new-status.first-order-waiting {
border-color: #d6b600;
border-style: dashed;
color: #5e4a00;
background: #fffbe0;
}
.client-new-status.second-order {
border-color: #87cbb5;
color: #0b5742;
background: #d9f4e9;
}
.client-new-status.second-order-waiting {
border-color: #87cbb5;
border-style: dashed;
color: #0b5742;
background: #eefaf6;
}
.client-new-status.unassigned {
color: var(--text3);
}
.client-new-status-summary {
display: inline-flex;
align-items: center;
gap: 3px;
}
.client-lead-status-summary {
display: inline-flex;
align-items: center;
gap: 3px;
}
.client-lead-status.first-message {
border-color: #76a7da;
color: #174d82;
background: #eaf4ff;
}
.client-lead-status.second-message {
border-color: #d6b600;
color: #5e4a00;
background: #fff3a6;
}
.client-lead-status.waiting {
border-style: dashed;
color: var(--text2);
background: var(--surface2);
}
.client-lead-status.in-progress {
border-color: #87cbb5;
color: #0b5742;
background: #d9f4e9;
}
.client-lead-status.refused {
border-color: #e39a9a;
color: #8c2020;
background: #fff0f0;
}
.client-lead-status.unassigned { color: var(--text3); }
.client-new-status-edit {
width: 20px;
min-width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid transparent;
border-radius: 5px;
color: var(--text2);
background: transparent;
cursor: pointer;
}
.client-new-status-edit:hover { border-color: var(--border2); background: var(--surface2); }
.client-new-status-edit:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.client-new-status-edit .bic { width: 12px; height: 12px; }
.client-new-status-menu {
position: fixed;
z-index: 10060;
width: min(260px, calc(100vw - 16px));
padding: 10px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
box-shadow: 0 14px 34px rgba(0,0,0,.2);
}
.client-new-status-menu[hidden] { display: none; }
.client-new-status-menu-field {
display: grid;
gap: 6px;
color: var(--text2);
font-size: 11px;
font-weight: 700;
}
.client-new-status-menu .client-new-status-select {
width: 100%;
min-height: 36px;
font-size: 13px;
font-weight: 600;
}
.client-new-status-menu-separator {
height: 1px;
margin: 10px 0 6px;
background: var(--border);
}
.client-new-status-menu .client-new-transfer {
width: 100%;
min-height: 44px;
display: inline-flex;
align-items: center;
gap: 9px;
padding: 7px 8px;
border: 0;
border-radius: 5px;
color: var(--text2);
background: transparent;
font: inherit;
text-align: left;
cursor: pointer;
}
.client-new-status-menu .client-new-transfer:hover,
.client-new-status-menu .client-new-transfer:focus-visible { background: var(--surface2); outline: none; }
.client-new-status-menu .client-new-transfer .bic { width: 17px; height: 17px; flex: 0 0 auto; }
.client-new-status-menu .client-new-transfer span { display: grid; gap: 2px; }
.client-new-status-menu .client-new-transfer strong { color: var(--text); font-size: 12px; }
.client-new-status-menu .client-new-transfer small { color: var(--text3); font-size: 10px; }
.client-group-person > .client-new-status,
.client-group-person > .client-new-status-summary,
.client-group-person > .client-lead-status-summary,
.client-group-person > .client-lead-status { margin-bottom: 3px; }
.inbox-client-new-status {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
flex-wrap: wrap;
gap: 4px;
}
.client-unreceived-orders-badge {
min-height: 22px;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 7px;
border: 1px solid color-mix(in oklab, var(--orange) 45%, var(--border));
border-radius: 999px;
background: color-mix(in oklab, var(--orange) 12%, var(--surface));
color: var(--orange);
font-size: 10px;
font-weight: 700;
line-height: 1;
white-space: nowrap;
}
.client-unreceived-orders-badge .bic {
width: 13px;
height: 13px;
}
.client-portfolio-column {
width: 1%;
white-space: nowrap;
}
.client-list-empty {
padding: 28px 16px;
text-align: center;
color: var(--text3);
}
.client-list-footer {
min-height: 48px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 8px 14px;
border-top: 1px solid var(--border);
color: var(--text3);
font-size: 12px;
}
/* CLIENT GROUPS */
.client-groups-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
}
.client-groups-heading,
.client-group-section-title {
display: flex;
align-items: center;
gap: 7px;
color: var(--text);
font-size: 14px;
font-weight: 700;
}
.client-groups-heading { margin-bottom: 3px; font-size: 16px; }
.client-groups-card,
.client-groups-table-wrap { overflow: visible; }
.client-groups-table th:last-child,
.client-groups-table td:last-child { text-align: right; }
.client-groups-empty,
.client-group-list-empty {
padding: 28px 16px;
color: var(--text3);
text-align: center;
}
.client-group-table-name { font-weight: 700; }
.client-group-row { cursor: pointer; }
.client-group-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.client-group-row:focus-visible td { background: var(--surface2); }
.client-group-table-count {
display: inline-flex;
min-width: 30px;
min-height: 24px;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface2);
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
}
.client-group-table-actions {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
white-space: nowrap;
}
.client-group-schedule {
display: grid;
grid-template-columns: repeat(7, 28px);
gap: 4px;
width: max-content;
}
.client-group-schedule-day {
position: relative;
display: inline-flex;
width: 28px;
height: 28px;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface2);
color: var(--text2);
cursor: help;
font-size: 10px;
font-weight: 700;
line-height: 1;
}
.client-group-schedule-day.none {
border-color: color-mix(in oklab, var(--red) 48%, var(--border));
background: color-mix(in oklab, var(--red) 16%, var(--surface));
color: var(--red);
}
.client-group-schedule-day.multiple {
border-color: color-mix(in oklab, var(--brand-yellow) 72%, #8a7000);
background: var(--brand-yellow);
color: #16140a;
}
.client-group-schedule-day::before,
.client-group-schedule-day::after {
position: absolute;
left: 50%;
z-index: 100;
pointer-events: none;
opacity: 0;
visibility: hidden;
transition: opacity var(--duration-fast), transform var(--duration-fast), visibility var(--duration-fast);
}
.client-group-schedule-day::before {
content: '';
bottom: calc(100% + 3px);
width: 8px;
height: 8px;
background: #171714;
transform: translate(-50%, 3px) rotate(45deg);
}
.client-group-schedule-day::after {
content: attr(data-tooltip);
bottom: calc(100% + 7px);
width: max-content;
max-width: 320px;
padding: 8px 10px;
border: 1px solid rgba(255,255,255,.16);
border-radius: 6px;
background: #171714;
box-shadow: var(--shadow-md);
color: #fff;
font-size: 11px;
font-weight: 500;
line-height: 1.4;
text-align: left;
white-space: normal;
transform: translate(-50%, 4px);
}
.client-group-schedule-day:hover::before,
.client-group-schedule-day:hover::after,
.client-group-schedule-day:focus-visible::before,
.client-group-schedule-day:focus-visible::after {
opacity: 1;
visibility: visible;
}
.client-group-schedule-day:hover::before,
.client-group-schedule-day:focus-visible::before {
transform: translate(-50%, 0) rotate(45deg);
}
.client-group-schedule-day:hover::after,
.client-group-schedule-day:focus-visible::after { transform: translate(-50%, 0); }
.modal.client-group-editor-modal { width: 460px; border-radius: 8px; }
.client-group-detail-view { min-width: 0; }
.client-group-detail-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 18px;
}
.client-group-detail-header .btn-icon { flex: 0 0 38px; width: 38px; height: 38px; }
.client-group-detail-heading { min-width: 0; }
.client-group-detail-title-row {
min-width: 0;
display: flex;
align-items: center;
gap: 6px;
}
.client-group-detail-title {
min-width: 0;
overflow-wrap: anywhere;
color: var(--text);
font-size: 18px;
font-weight: 750;
}
.client-group-detail-header .client-group-title-edit {
flex: 0 0 30px;
width: 30px;
height: 30px;
}
.client-group-detail-body {
display: grid;
grid-template-columns: minmax(240px, .72fr) minmax(420px, 1.45fr);
gap: 24px;
align-items: start;
}
/* MANAGER ABSENCES */
.absence-page { max-width: 1040px; }
.absence-page-header { margin-bottom: 18px; }
.absence-page-title {
display: flex;
align-items: center;
gap: 8px;
color: var(--text);
font-size: 18px;
font-weight: 750;
}
.absence-layout {
display: grid;
grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
border-top: 1px solid var(--border);
}
.absence-form-section,
.absence-list-section { min-width: 0; padding-top: 18px; }
.absence-form-section {
padding-right: 24px;
border-right: 1px solid var(--border);
}
.absence-list-section { padding-left: 24px; }
.absence-form-section > .client-group-section-title,
.absence-list-section > .client-group-section-title { margin-bottom: 14px; }
.absence-date-fields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.absence-reason { min-height: 96px; resize: vertical; }
.absence-list { border-top: 1px solid var(--border); }
.absence-row {
min-width: 0;
display: flex;
align-items: center;
gap: 12px;
padding: 13px 4px;
border-bottom: 1px solid var(--border);
}
.absence-row-main { min-width: 0; flex: 1; }
.absence-row-heading {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 5px;
}
.absence-status {
flex: 0 0 auto;
padding: 2px 6px;
border: 1px solid var(--border);
border-radius: 5px;
background: var(--surface2);
color: var(--text2);
font-size: 10px;
font-weight: 700;
}
.absence-status.active {
border-color: color-mix(in oklab, var(--red) 45%, var(--border));
background: color-mix(in oklab, var(--red) 12%, var(--surface));
color: var(--red);
}
.absence-status.planned {
border-color: color-mix(in oklab, var(--brand-yellow) 65%, var(--border));
background: color-mix(in oklab, var(--brand-yellow) 20%, var(--surface));
color: var(--text);
}
.absence-status.past { opacity: .7; }
.absence-dates { min-width: 0; color: var(--text2); font-size: 12px; font-weight: 650; }
.absence-row-reason { overflow-wrap: anywhere; color: var(--text); font-size: 13px; }
.absence-row.past .absence-row-main { opacity: .65; }
.absence-row > .btn { flex: 0 0 32px; width: 32px; height: 32px; }
.client-group-coverage {
min-width: 0;
grid-column: 1 / -1;
padding-bottom: 18px;
border-bottom: 1px solid var(--border);
}
.client-group-coverage-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.client-group-coverage-legend {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
color: var(--text3);
font-size: 10px;
font-weight: 600;
}
.client-group-coverage-legend span {
display: inline-flex;
align-items: center;
gap: 5px;
}
.client-group-coverage-legend span::before {
content: '';
width: 8px;
height: 8px;
border: 1px solid var(--border);
border-radius: 2px;
background: var(--surface2);
}
.client-group-coverage-legend .none::before {
border-color: color-mix(in oklab, var(--red) 48%, var(--border));
background: color-mix(in oklab, var(--red) 18%, var(--surface));
}
.client-group-coverage-legend .multiple::before {
border-color: color-mix(in oklab, var(--brand-yellow) 72%, #8a7000);
background: var(--brand-yellow);
}
.client-group-coverage-days {
display: grid;
grid-template-columns: repeat(7, minmax(38px, 1fr));
gap: 5px;
}
.client-group-coverage-day {
height: 34px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface2);
color: var(--text2);
cursor: pointer;
font: inherit;
font-size: 11px;
font-weight: 700;
}
.client-group-coverage-day.none {
border-color: color-mix(in oklab, var(--red) 48%, var(--border));
background: color-mix(in oklab, var(--red) 16%, var(--surface));
color: var(--red);
}
.client-group-coverage-day.multiple {
border-color: color-mix(in oklab, var(--brand-yellow) 72%, #8a7000);
background: var(--brand-yellow);
color: #16140a;
}
.client-group-coverage-day.active {
box-shadow: inset 0 0 0 2px var(--text);
}
.client-group-coverage-details { margin-top: 12px; }
.client-group-coverage-day-title {
margin-bottom: 6px;
color: var(--text2);
font-size: 12px;
font-weight: 700;
}
.client-group-absence-notices {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 10px;
}
.client-group-absence-notice {
min-width: 0;
display: flex;
align-items: baseline;
gap: 8px;
padding: 8px 10px;
border: 1px solid color-mix(in oklab, var(--red) 40%, var(--border));
border-radius: 6px;
background: color-mix(in oklab, var(--red) 10%, var(--surface));
color: var(--text2);
font-size: 12px;
}
.client-group-absence-notice strong {
flex: 0 0 auto;
color: var(--red);
}
.client-group-absence-notice span {
min-width: 0;
overflow-wrap: anywhere;
}
.client-group-coverage-intervals {
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.client-group-coverage-interval {
min-height: 40px;
display: grid;
grid-template-columns: 105px minmax(0, 1fr);
align-items: center;
gap: 10px;
padding: 7px 10px;
border-bottom: 1px solid var(--border);
background: var(--surface2);
}
.client-group-coverage-interval:last-child { border-bottom: 0; }
.client-group-coverage-interval.none {
background: color-mix(in oklab, var(--red) 12%, var(--surface));
}
.client-group-coverage-interval.multiple {
background: color-mix(in oklab, var(--brand-yellow) 28%, var(--surface));
}
.client-group-coverage-time {
color: var(--text);
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
.client-group-coverage-status {
min-width: 0;
display: flex;
align-items: baseline;
gap: 8px;
}
.client-group-coverage-status strong {
flex: 0 0 auto;
color: var(--text);
font-size: 12px;
}
.client-group-coverage-interval.none .client-group-coverage-status strong { color: var(--red); }
.client-group-coverage-status span {
min-width: 0;
overflow: hidden;
color: var(--text3);
font-size: 11px;
text-overflow: ellipsis;
white-space: nowrap;
}
.client-group-managers,
.client-group-clients {
min-width: 0;
min-height: 0;
}
.client-group-section-heading {
min-height: 36px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.client-group-manager-list,
.client-group-client-list {
overflow-y: auto;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.client-group-manager-list { max-height: 430px; }
.client-group-client-list { max-height: 210px; }
.client-group-assigned-list { max-height: 480px; }
.modal.client-group-add-member-modal {
width: min(680px, 96vw);
max-height: 90vh;
overflow: hidden;
border-radius: 8px;
display: flex;
flex-direction: column;
}
.client-group-add-member-modal > .modal-body {
min-height: 0;
overflow: hidden;
}
.client-group-add-member-modal .client-group-add-options {
margin: 0;
padding: 0;
border: 0;
}
.client-group-option-list { max-height: min(60vh, 520px); }
.client-group-manager-option-list { max-height: min(60vh, 520px); }
.client-group-manager-row,
.client-group-client-row {
min-width: 0;
display: flex;
align-items: center;
gap: 10px;
min-height: 48px;
padding: 8px 5px;
border-bottom: 1px solid var(--border);
}
.client-group-manager-row:last-child,
.client-group-client-row:last-child { border-bottom: 0; }
.client-group-person {
min-width: 0;
flex: 1;
}
.client-group-client-profile {
margin: -3px -4px;
padding: 3px 4px;
border-radius: 6px;
cursor: pointer;
}
.client-group-client-profile:hover {
background: var(--surface2);
}
.client-group-client-profile:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.client-group-person-name {
display: block;
overflow: hidden;
color: var(--text);
font-size: 13px;
font-weight: 650;
text-overflow: ellipsis;
white-space: nowrap;
}
.client-group-person-meta {
display: block;
overflow: hidden;
margin-top: 2px;
color: var(--text3);
font-size: 11px;
text-overflow: ellipsis;
white-space: nowrap;
}
.client-group-manager-row .btn,
.client-group-client-row .btn {
flex: 0 0 32px;
width: 32px;
min-width: 32px;
max-width: 32px;
height: 32px;
min-height: 32px;
max-height: 32px;
padding: 0;
justify-content: center;
line-height: 1;
}
.client-group-manager-row .btn .bic,
.client-group-client-row .btn .bic {
display: block;
flex: 0 0 16px;
margin: 0;
vertical-align: 0;
}
.client-group-search-field {
height: 38px;
display: flex;
align-items: center;
gap: 7px;
margin-bottom: 9px;
padding: 0 10px;
border: 1px solid var(--border);
border-radius: 7px;
background: var(--surface2);
color: var(--text3);
}
.client-group-search-field:focus-within { border-color: var(--accent); }
.client-group-search-field input {
min-width: 0;
flex: 1;
border: 0;
outline: 0;
background: transparent;
color: var(--text);
font: inherit;
font-size: 13px;
}
.client-group-search-field input::placeholder { color: var(--text3); }
.client-group-add-button {
flex: 0 0 30px;
width: 30px;
height: 30px;
min-height: 30px;
margin-left: 2px;
padding: 0;
}
.client-group-more { width: 100%; margin-top: 8px; }
.client-group-option-meta {
min-height: 18px;
padding-top: 6px;
text-align: center;
}
.client-table-tags,
.client-tags-list {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 5px;
}
.client-table-tags {
margin-top: 0;
}
.client-tag-chip {
--client-tag-color: #4f7cff;
--client-tag-text: #ffffff;
max-width: 180px;
min-height: 20px;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 7px;
border: 1px solid color-mix(in oklab, var(--client-tag-color) 82%, #000000);
border-radius: 999px;
background: var(--client-tag-color);
color: var(--client-tag-text);
font-size: 10px;
font-weight: 700;
line-height: 1.35;
}
.client-tag-chip > span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.client-tag-chip > button {
flex: 0 0 16px;
width: 16px;
height: 16px;
padding: 0;
border: 0;
border-radius: 50%;
background: color-mix(in oklab, var(--client-tag-text) 18%, transparent);
color: inherit;
cursor: pointer;
font: inherit;
font-size: 14px;
line-height: 14px;
}
.client-tag-chip > button:hover {
background: color-mix(in oklab, var(--client-tag-text) 32%, transparent);
}
.client-tag-more {
color: var(--text3);
font-size: 10px;
font-weight: 700;
}
tr:last-child td { border-bottom: none; }
.status-badge {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 600;
}
.status-badge.new { background: rgba(79,124,255,0.15); color: var(--accent); border: 1px solid rgba(79,124,255,0.3); }
.status-badge.progress { background: rgba(255,200,64,0.15); color: var(--yellow); border: 1px solid rgba(255,200,64,0.3); }
.status-badge.success { background: rgba(34,216,122,0.15); color: var(--green); border: 1px solid rgba(34,216,122,0.3); }
.status-badge.fail { background: rgba(255,79,79,0.15); color: var(--red); border: 1px solid rgba(255,79,79,0.3); }
.status-badge.wait { background: rgba(255,140,64,0.15); color: var(--orange); border: 1px solid rgba(255,140,64,0.3); }
.status-badge.info { background: rgba(38,169,227,0.15); color: var(--tg); border: 1px solid rgba(38,169,227,0.3); }
/* TEAM */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.team-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); padding: 20px; text-align: center; transition: all 0.15s;
}
.team-card:hover { border-color: var(--border2); transform: translateY(-2px); box-shadow: var(--shadow); }
.team-avatar {
width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 12px;
display: flex; align-items: center; justify-content: center;
font-size: 24px; font-weight: 800; color: white;
}
.team-name { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.team-role { font-size: 12px; color: var(--text3); margin-bottom: 14px; }
.team-work-status { display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 3px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 11px; font-weight: 700; color: var(--text3); }
.team-work-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--text3); }
.team-work-status.working { color: var(--green); border-color: color-mix(in oklab, var(--green) 35%, var(--border)); background: color-mix(in oklab, var(--green) 9%, transparent); }
.team-work-status.working::before { background: var(--green); box-shadow: 0 0 5px color-mix(in oklab, var(--green) 60%, transparent); }
.team-stats { display: flex; justify-content: center; gap: 20px; }
.team-stat { text-align: center; }
.team-stat-val { font-size: 18px; font-weight: 800; font-family: 'JetBrains Mono', monospace; }
.team-stat-lbl { font-size: 10px; color: var(--text3); margin-top: 2px; }
.progress-bar { height: 4px; background: var(--surface3); border-radius: 2px; overflow: hidden; margin-top: 6px; }
.progress-fill { height: 100%; border-radius: 2px; background: var(--accent); }
/* ACTIVITY */
.activity-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.activity-item:last-child { border-bottom: none; }
.activity-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; }
.activity-text { font-size: 13px; line-height: 1.5; }
.activity-text strong { color: var(--text); }
.activity-time { font-size: 11px; color: var(--text3); margin-top: 3px; }
/* FUNNEL */
.funnel { display: flex; flex-direction: column; gap: 8px; }
.funnel-row { display: flex; align-items: center; gap: 12px; }
.funnel-label { width: 130px; font-size: 12px; color: var(--text2); flex-shrink: 0; text-align: right; }
.funnel-bar-wrap { flex: 1; height: 24px; background: var(--surface2); border-radius: 6px; overflow: hidden; }
.funnel-bar { height: 100%; border-radius: 6px; display: flex; align-items: center; padding-left: 10px; font-size: 11px; font-weight: 700; color: white; transition: width 0.6s ease; }
.funnel-count { width: 60px; font-size: 12px; font-family: 'JetBrains Mono', monospace; color: var(--text3); }
/* CHART */
.chart-bars { display: flex; align-items: flex-end; gap: 6px; height: 80px; padding: 0 4px; }
.chart-bar { flex: 1; border-radius: 4px 4px 0 0; transition: opacity 0.15s; cursor: pointer; }
.chart-bar:hover { opacity: 0.8; }
.chart-labels { display: flex; gap: 6px; padding: 4px 4px 0; }
.chart-label { flex: 1; text-align: center; font-size: 10px; color: var(--text3); }
.source-list { display: flex; flex-direction: column; gap: 10px; }
.source-item { display: flex; align-items: center; gap: 10px; }
.source-name { font-size: 12px; font-weight: 600; width: 80px; flex-shrink: 0; }
.source-bar-wrap { flex: 1; height: 8px; background: var(--surface2); border-radius: 4px; overflow: hidden; }
.source-bar { height: 100%; border-radius: 4px; }
.source-val { width: 40px; text-align: right; font-size: 12px; font-family: 'JetBrains Mono', monospace; color: var(--text2); }
/* NOTIFICATIONS */
.notif-list { display: flex; flex-direction: column; }
.notif-item {
padding: 14px 20px; border-bottom: 1px solid var(--border);
position: relative;
display: flex; gap: 12px; cursor: pointer; transition: background 0.12s, box-shadow 0.12s;
}
.notif-item:hover { background: var(--surface2); }
.notif-item.unread { background: rgba(79,124,255,0.04); }
.notif-item.has-client-last-message {
background: color-mix(in oklab, var(--yellow) 13%, var(--surface));
box-shadow: inset 3px 0 0 var(--yellow);
}
.notif-item.has-client-last-message:hover {
background: color-mix(in oklab, var(--yellow) 18%, var(--surface));
}
.notif-item.is-current-chat {
background: color-mix(in oklab, var(--accent) 12%, var(--surface));
box-shadow: inset 3px 0 0 var(--accent);
}
.notif-item.is-current-chat:hover {
background: color-mix(in oklab, var(--accent) 16%, var(--surface));
}
.notif-item.is-current-chat.unread {
background: color-mix(in oklab, var(--accent) 18%, var(--surface));
}
.notif-item.has-client-last-message.is-current-chat {
background: color-mix(in oklab, var(--yellow) 16%, color-mix(in oklab, var(--accent) 12%, var(--surface)));
box-shadow: inset 3px 0 0 var(--yellow), inset 0 0 0 1px color-mix(in oklab, var(--accent) 35%, transparent);
}
.notif-icon {
width: 32px; height: 32px; font-size: 20px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
}
.inbox-chat-client-avatar { width: 32px; height: 32px; font-size: 11px; flex: 0 0 32px; }
.notif-body { flex: 1; min-width: 0; }
.notif-title {
display: flex;
align-items: center;
gap: 4px;
min-width: 0;
margin-bottom: 2px;
overflow: hidden;
font-size: 13px;
font-weight: 600;
white-space: nowrap;
}
.notif-title-text {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.inbox-client-source-flag {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
font-size: 14px;
line-height: 1;
}
.inbox-client-header-source-flag {
font-size: 16px;
}
.inbox-chat-order-badge {
flex: 0 0 auto;
padding: 1px 6px;
border-radius: 6px;
background: color-mix(in oklab, var(--accent) 15%, transparent);
color: var(--accent);
font-size: 10px;
font-weight: 700;
}
.notif-preview-row {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.inbox-chat-last-channel {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
flex: 0 0 18px;
border-radius: 6px;
background: var(--surface2);
box-shadow: inset 0 0 0 1px var(--border);
}
.inbox-chat-last-channel svg,
.inbox-chat-last-channel img {
width: 13px !important;
height: 13px !important;
}
.notif-desc {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
color: var(--text3);
line-height: 1.4;
}
.notif-preview-author {
margin-right: 4px;
color: var(--text2);
font-weight: 700;
}
.notif-item.has-client-last-message .notif-preview-author { color: var(--orange); }
.notif-time { font-size: 11px; color: var(--text3); flex-shrink: 0; margin-top: 2px; }
.inbox-chat-assignment-badge {
display: inline-flex;
align-items: center;
gap: 2px;
max-width: 150px;
overflow: hidden;
padding: 1px 6px;
border: 1px solid color-mix(in oklab, currentColor 28%, transparent);
border-radius: 10px;
font-size: 10px;
font-weight: 700;
line-height: 15px;
white-space: nowrap;
text-overflow: ellipsis;
}
.inbox-chat-assignment-badge.is-unassigned {
border-style: dashed;
}
.unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-top: 5px; }
/* MODAL */
.modal-overlay {
position: fixed; inset: 0; background: var(--overlay-modal); backdrop-filter: blur(4px);
z-index: 1000; display: none; align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal {
background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
width: 560px; max-height: 90vh; overflow-y: auto;
box-shadow: var(--shadow-lg); animation: slideUp 0.2s ease;
}
@keyframes slideUp {
from { transform: translateY(16px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.modal-header {
padding: 20px 24px; border-bottom: 1px solid var(--border);
display: flex; align-items: center; justify-content: space-between;
}
.modal-title { font-size: 16px; font-weight: 700; }
.client-profile-modal-heading {
min-width: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.client-profile-modal-heading .btn { text-decoration: none; }
.client-profile-tasks-button {
gap: 6px;
}
.client-profile-refresh-button {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}
.client-profile-refresh-button[aria-busy="true"] .bic {
animation: client-profile-refresh-spin 0.8s linear infinite;
}
@keyframes client-profile-refresh-spin {
to { transform: rotate(360deg); }
}
.modal-close {
width: 30px; height: 30px; border-radius: 8px;
background: var(--surface2); border: 1px solid var(--border);
color: var(--text2); font-size: 16px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
.modal-body { padding: 24px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.form-group { margin-bottom: 14px; }
.user-work-schedule {
margin-top: 2px;
padding-top: 16px;
border-top: 1px solid var(--border);
}
.user-work-schedule[hidden] { display: none; }
.user-work-schedule-title {
margin-bottom: 10px;
font-size: 13px;
font-weight: 700;
}
.user-work-schedule-list {
border-top: 1px solid var(--border);
}
.user-work-schedule-day {
display: grid;
grid-template-columns: minmax(140px, 1fr) auto;
align-items: center;
gap: 16px;
min-height: 48px;
padding: 7px 0;
border-bottom: 1px solid var(--border);
}
.user-work-schedule-toggle {
display: flex;
align-items: center;
gap: 9px;
min-width: 0;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.user-work-schedule-toggle input {
width: 16px;
height: 16px;
margin: 0;
accent-color: var(--accent);
}
.user-work-schedule-times {
display: grid;
grid-template-columns: 104px 14px 104px;
align-items: center;
gap: 6px;
}
.user-work-schedule-times span {
color: var(--text3);
text-align: center;
}
.user-work-schedule-times .form-input {
width: 104px;
min-width: 0;
padding: 7px 8px;
text-align: center;
}
.user-work-schedule-day.is-off .user-work-schedule-times {
opacity: 0.42;
}
.form-label { font-size: 12px; font-weight: 600; color: var(--text2); margin-bottom: 6px; display: block; text-transform: uppercase; letter-spacing: 0.4px; }
.form-input {
width: 100%; padding: 9px 12px;
background: var(--surface2); border: 1px solid var(--border);
border-radius: var(--radius2); color: var(--text); font-family: inherit; font-size: 13px; outline: none;
transition: border-color 0.15s;
}
.form-input:focus { border-color: var(--accent); }
.form-select {
width: 100%; padding: 9px 12px;
background: var(--surface2); border: 1px solid var(--border);
border-radius: var(--radius2); color: var(--text); font-family: inherit; font-size: 13px; outline: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239199be' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 12px center;
}
.modal-footer {
padding: 16px 24px; border-top: 1px solid var(--border);
display: flex; gap: 10px; justify-content: flex-end;
}
.modal.task-create-modal {
display: flex;
flex-direction: column;
width: 720px;
max-width: calc(100vw - 32px);
max-height: min(860px, calc(100dvh - 32px));
overflow: hidden;
}
.task-create-modal .modal-header,
.task-create-modal .modal-footer { flex: 0 0 auto; }
.task-create-modal .modal-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
.task-create-description {
min-height: 180px;
resize: vertical;
line-height: 1.5;
}
.task-description-editor { position: relative; }
.task-description-editor .task-create-description { padding-right: 48px; }
.task-description-expand {
position: absolute;
top: 8px;
right: 8px;
}
.external-profile-source {
font-size: 12px; color: var(--text2); margin-bottom: 12px;
}
.external-profile-card {
border: 1px solid var(--border); border-radius: 8px;
background: var(--surface2); padding: 14px; margin-bottom: 14px;
}
.external-profile-card-title {
display: flex; justify-content: space-between; gap: 12px; align-items: center;
font-weight: 700; font-size: 14px; margin-bottom: 12px;
}
.external-profile-grid {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
.external-profile-technical-dates {
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid var(--border);
}
.external-profile-technical-dates .external-profile-field {
padding: 6px 8px;
background: transparent;
}
.external-profile-field {
min-width: 0; padding: 8px; border-radius: 8px; background: var(--surface);
border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
}
.external-profile-field > div {
font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: .4px;
margin-bottom: 3px;
}
.external-profile-field > strong {
display: block; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text);
overflow-wrap: anywhere;
}
.client-notes-section {
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid var(--border);
}
.client-notes-title {
margin-bottom: 10px;
}
.client-notes-list {
display: grid;
gap: 8px;
}
.client-note-item {
padding: 9px 10px;
border: 1px solid color-mix(in oklab, var(--border) 78%, transparent);
border-radius: 6px;
background: var(--surface);
}
.client-note-item.is-pinned {
border-color: color-mix(in oklab, var(--accent) 60%, var(--border));
background: color-mix(in oklab, var(--accent) 8%, var(--surface));
}
.client-note-legacy {
background: color-mix(in oklab, var(--surface2) 65%, var(--surface));
}
.client-note-meta {
min-height: 24px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 7px;
color: var(--text3);
font-size: 11px;
}
.client-note-meta > span:first-child {
color: var(--text2);
font-weight: 700;
}
.client-note-actions {
display: inline-flex;
align-items: center;
gap: 2px;
margin-left: auto;
}
.client-note-pinned-label {
display: inline-flex;
align-items: center;
gap: 3px;
color: color-mix(in oklab, var(--accent) 65%, var(--text));
font-weight: 700;
}
.client-note-pinned-label .bic {
width: 12px;
height: 12px;
}
.client-note-pin.is-active {
color: color-mix(in oklab, var(--accent) 68%, var(--text));
background: color-mix(in oklab, var(--accent) 18%, transparent);
}
.client-note-actions .btn-icon,
.client-note-edit-actions .btn-icon {
width: 28px;
height: 28px;
min-height: 28px;
padding: 5px;
}
.client-note-delete {
color: var(--red);
}
.client-note-text {
white-space: pre-wrap;
overflow-wrap: anywhere;
color: var(--text);
font-size: 13px;
line-height: 1.45;
}
.client-notes-empty {
color: var(--text3);
font-size: 12px;
}
.client-profile-tasks-section {
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid var(--border);
}
.client-profile-tasks-title {
margin-bottom: 10px;
}
.client-profile-task-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 26px;
height: 24px;
margin-left: auto;
padding: 0 7px;
border-radius: 6px;
background: color-mix(in oklab, var(--accent) 14%, var(--surface));
color: var(--accent);
font-size: 11px;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.client-profile-task-list {
display: grid;
gap: 8px;
}
.client-profile-task-row {
display: grid;
gap: 5px;
min-width: 0;
padding: 9px 10px;
border: 1px solid color-mix(in oklab, var(--border) 78%, transparent);
border-radius: 6px;
background: var(--surface);
color: inherit;
text-align: left;
cursor: pointer;
}
.client-profile-task-row:hover,
.client-profile-task-row:focus-visible {
border-color: color-mix(in oklab, var(--accent) 60%, var(--border));
}
.client-profile-task-row:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.client-profile-task-row.is-overdue {
box-shadow: inset 3px 0 0 var(--red);
}
.client-profile-task-title {
overflow: hidden;
color: var(--text);
font-size: 13px;
font-weight: 700;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
.client-profile-task-meta {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
color: var(--text3);
font-size: 10px;
line-height: 1.3;
}
.client-profile-task-meta > span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.client-profile-task-meta .is-overdue {
color: var(--red);
font-weight: 700;
}
.client-profile-task-status {
display: inline-flex;
align-items: center;
gap: 5px;
}
.client-profile-task-status i {
display: inline-block;
flex: 0 0 7px;
width: 7px;
height: 7px;
border-radius: 50%;
}
.client-profile-tasks-empty {
color: var(--text3);
font-size: 12px;
}
.client-note-edit-form {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: 8px;
}
.client-note-edit-form textarea {
min-width: 0;
resize: vertical;
}
.client-note-edit-actions {
display: flex;
align-items: center;
gap: 3px;
}
.client-note-form {
display: grid;
grid-template-columns: minmax(0, 1fr) 34px;
align-items: center;
gap: 8px;
margin-top: 10px;
}
.client-note-form .form-input {
min-width: 0;
}
.client-note-form .btn-icon {
width: 34px;
height: 34px;
}
.client-email-form {
display: grid;
grid-template-columns: minmax(0, 1fr) 34px;
align-items: center;
gap: 6px;
}
.client-email-form .form-input {
min-width: 0;
height: 34px;
padding: 6px 9px;
font-size: 13px;
}
.client-email-form .btn-icon {
width: 34px;
height: 34px;
}
.client-name-form {
margin-top: 2px;
}
.client-contact-field.is-missing {
border-color: #d92f58;
background: color-mix(in oklab, #d92f58 9%, var(--surface));
}
.client-contact-field.is-missing > div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
color: #b4234a;
}
.client-contact-field.is-missing > strong { color: #b4234a; }
.client-contact-field.is-missing .form-input {
border-color: #d92f58;
background: color-mix(in oklab, #d92f58 6%, var(--surface2));
}
.client-contact-field.is-missing .form-input:focus {
box-shadow: 0 0 0 3px rgba(217, 47, 88, .16);
}
.client-contact-missing-label {
color: #b4234a;
font-size: 9px;
font-weight: 800;
white-space: nowrap;
}
.client-profile-title-content {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 7px;
min-width: 0;
}
.client-portfolio-badge {
display: inline-flex;
align-items: center;
min-height: 20px;
padding: 2px 7px;
border: 1px solid transparent;
border-radius: 5px;
font-size: 10px;
font-weight: 800;
line-height: 1;
white-space: nowrap;
}
.client-portfolio-badge.unassigned {
color: #575752;
background: #ecece8;
border-color: #d6d6d0;
}
.client-portfolio-badge.pro {
color: #0b5742;
background: #d9f4e9;
border-color: #a9ddcd;
}
.client-portfolio-badge.vip {
color: #7c1f35;
background: #ffe0e8;
border-color: #f4afc0;
}
.client-portfolio-badge.top {
color: #11110f;
background: var(--brand-yellow);
border-color: #d6b600;
}
.external-profile-subtitle {
margin: 14px 0 8px; font-size: 12px; font-weight: 700; color: var(--text2);
}
.client-contacts-section {
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--border);
}
.client-contacts-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
.client-contacts-heading .external-profile-card-title {
margin: 0;
}
.client-contacts-heading .btn-icon {
flex: 0 0 32px;
width: 32px;
height: 32px;
}
.client-primary-contacts {
margin-bottom: 0;
}
.client-contact-add-form {
display: grid;
grid-template-columns: minmax(125px, .65fr) minmax(150px, 1.35fr) 34px;
align-items: center;
gap: 7px;
margin-top: 9px;
padding: 9px;
border: 1px solid var(--border);
border-radius: 7px;
background: var(--surface2);
}
.client-contact-add-form .form-input {
min-width: 0;
height: 34px;
padding: 6px 9px;
font-size: 12px;
}
.client-contact-add-form .btn-icon {
width: 34px;
height: 34px;
}
.client-additional-contacts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 7px;
}
.client-additional-contact {
min-width: 0;
display: grid;
grid-template-columns: 16px auto minmax(0, 1fr) 28px;
align-items: center;
gap: 7px;
padding: 8px 9px;
border: 1px solid var(--border);
border-radius: 7px;
background: var(--surface);
}
.client-additional-contact-label {
color: var(--text3);
font-size: 11px;
white-space: nowrap;
}
.client-additional-contact strong {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
white-space: nowrap;
}
.client-contact-delete {
flex: 0 0 28px;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: 5px;
background: transparent;
color: var(--text3);
cursor: pointer;
}
.client-contact-delete:hover,
.client-contact-delete:focus-visible {
color: var(--red);
background: color-mix(in oklab, var(--red) 9%, transparent);
}
.client-contact-delete .bic {
width: 15px;
height: 15px;
}
.client-contacts-empty {
padding: 10px 12px;
border: 1px dashed var(--border);
border-radius: 7px;
color: var(--text3);
font-size: 12px;
text-align: center;
}
.client-contact-channels {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.client-contact-channel {
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
padding: 9px 10px;
border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
border-radius: 8px;
background: var(--surface);
color: var(--text);
text-decoration: none;
}
.client-contact-channel-action {
min-width: 0;
flex: 1 1 auto;
display: flex;
align-items: center;
gap: 8px;
padding: 0;
border: 0;
background: transparent;
color: inherit;
font: inherit;
text-align: left;
}
button.client-contact-channel-action {
cursor: pointer;
}
button.client-contact-channel-action:disabled {
cursor: not-allowed;
opacity: 0.52;
}
button.client-contact-channel-action.is-loading {
cursor: progress;
}
.client-contact-channel:has(button.client-contact-channel-action:not(:disabled):hover),
.client-contact-channel:has(button.client-contact-channel-action:focus-visible) {
border-color: var(--border2);
background: var(--surface3);
}
.client-contact-channel-action:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 4px;
}
.client-contact-channel-details {
min-width: 0;
flex: 1 1 auto;
display: grid;
grid-template-columns: minmax(82px, auto) auto minmax(0, 1fr);
align-items: center;
gap: 8px;
color: inherit;
text-decoration: none;
}
.client-contact-chat-button {
flex: 0 0 30px;
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 6px;
color: var(--text2);
}
.client-contact-external-link {
flex: 0 0 30px;
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 6px;
color: var(--text3);
}
.client-contact-external-link:hover {
color: var(--text);
background: var(--surface3);
}
.client-contact-channel-name {
display: inline-flex;
align-items: center;
gap: 6px;
}
.client-contact-channel-name > span:last-child {
color: var(--text3);
font-size: 11px;
}
.client-contact-channel-kind {
min-width: 0;
max-width: 86px;
padding: 2px 6px;
border: 1px solid var(--border);
border-radius: 5px;
background: var(--surface2);
color: var(--text3);
font-size: 10px;
font-weight: 700;
line-height: 1.15;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.client-contact-channel-brand-icon {
flex: 0 0 16px;
width: 16px;
height: 16px;
display: inline-flex;
}
.client-contact-channel-brand-icon > svg {
display: block;
}
.client-contact-channel-details > strong {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
white-space: nowrap;
}
@media (max-width: 760px) {
.client-contact-add-form {
grid-template-columns: 1fr 34px;
}
.client-contact-add-form select {
grid-column: 1 / -1;
}
.client-additional-contacts,
.client-contact-channels {
grid-template-columns: 1fr;
}
}
.client-tags-section {
margin-top: 14px;
}
.client-tags-heading {
min-height: 30px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 8px;
}
.client-tags-heading .external-profile-subtitle {
margin: 0;
}
.client-tags-heading .btn {
min-height: 28px;
padding: 4px 8px;
}
.client-tags-heading-actions {
display: flex;
align-items: center;
gap: 5px;
}
.client-tag-manager {
display: grid;
gap: 6px;
margin-top: 9px;
padding: 8px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
}
.client-tag-manager-row {
min-width: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.client-tag-manager-row .client-tag-chip {
max-width: calc(100% - 44px);
}
.client-tag-manager-row .btn {
flex: 0 0 30px;
width: 30px;
min-height: 30px;
color: var(--red);
}
.client-tags-empty {
padding: 9px 10px;
border: 1px dashed var(--border);
border-radius: 6px;
color: var(--text3);
font-size: 12px;
}
.client-tags-controls,
.client-tag-create-form {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
margin-top: 9px;
}
.client-tags-controls .form-select {
min-width: 0;
}
.client-tag-create-form {
grid-template-columns: minmax(0, 1fr) 34px auto;
}
.client-tag-create-form[hidden] {
display: none;
}
.client-tag-color-input {
width: 34px;
height: 34px;
padding: 3px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
cursor: pointer;
}
.client-tag-color-input::-webkit-color-swatch-wrapper {
padding: 0;
}
.client-tag-color-input::-webkit-color-swatch {
border: 0;
border-radius: 3px;
}
.external-profile-empty {
border: 1px dashed var(--border); border-radius: 8px; padding: 16px;
background: var(--surface2);
}
.mock-client-profile-layout {
display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr);
gap: 14px;
align-items: start;
}
.mock-client-profile-layout.client-profile-local-only {
grid-template-columns: minmax(0, 1fr);
}
.mock-client-profile-layout .external-profile-card {
margin-bottom: 0;
}
.client-profile-after-details {
grid-column: 1 / -1;
}
.client-profile-after-details > :first-child {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.client-discounts-section {
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid var(--border);
}
.client-discounts-section.standalone {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.client-discount-shortcuts {
display: grid;
gap: 7px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--border);
}
.client-discount-shortcut {
display: grid;
grid-template-columns: 18px minmax(0, 1fr) auto 18px;
align-items: center;
gap: 8px;
width: 100%;
min-height: 38px;
padding: 8px 10px;
text-align: left;
}
.client-discount-shortcut > span:nth-child(2) {
min-width: 0;
font-weight: 700;
}
.client-discount-shortcut-open {
color: var(--text3);
}
.client-discounts-title {
margin-bottom: 10px;
}
.client-discounts-list {
display: flex;
flex-direction: column;
gap: 7px;
}
.client-discount-item {
display: flex;
align-items: flex-start;
gap: 8px;
min-width: 0;
padding: 9px 10px;
border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
border-radius: 6px;
background: var(--surface);
font-size: 13px;
color: var(--text);
}
.client-discount-item > span {
flex: 1;
min-width: 0;
overflow-wrap: anywhere;
}
.client-discount-delete {
flex: 0 0 24px;
width: 24px;
height: 24px;
border: 0;
border-radius: 4px;
background: transparent;
color: var(--text3);
cursor: pointer;
font: inherit;
font-size: 18px;
line-height: 22px;
}
.client-discount-delete:hover {
background: color-mix(in oklab, var(--red) 14%, transparent);
color: var(--red);
}
.client-discounts-empty {
padding: 10px;
border: 1px dashed var(--border);
border-radius: 6px;
color: var(--text3);
font-size: 12px;
}
.client-discount-form {
display: flex;
align-items: center;
gap: 8px;
margin-top: 10px;
}
.client-discount-form .form-input {
min-width: 0;
}
.client-discount-form .btn-icon {
flex: 0 0 34px;
width: 34px;
height: 34px;
}
.client-erp-discounts-summary {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-bottom: 12px;
}
.client-erp-discounts-summary > div {
min-width: 0;
padding: 9px 10px;
border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
border-radius: 6px;
background: var(--surface);
}
.client-erp-discounts-summary span {
display: block;
color: var(--text3);
font-size: 10px;
text-transform: uppercase;
}
.client-erp-discounts-summary strong {
display: block;
min-width: 0;
margin-top: 3px;
font-size: 13px;
overflow-wrap: anywhere;
}
.client-erp-discount-subtitle {
margin: 12px 0 7px;
color: var(--text2);
font-size: 12px;
font-weight: 700;
}
.client-erp-discount-list {
display: flex;
flex-direction: column;
gap: 7px;
}
.client-erp-discount-row {
min-width: 0;
padding: 9px 10px;
border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
border-radius: 6px;
background: var(--surface);
}
.client-erp-discount-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.client-erp-discount-heading strong {
min-width: 0;
font-size: 13px;
overflow-wrap: anywhere;
}
.client-erp-discount-value {
flex: 0 0 auto;
color: var(--red);
font-size: 13px;
font-weight: 700;
white-space: nowrap;
}
.client-erp-discount-meta,
.client-erp-discount-note {
margin-top: 5px;
color: var(--text3);
font-size: 11px;
}
.client-erp-discount-badges {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 7px;
}
.client-erp-discount-badges span {
max-width: 100%;
padding: 2px 7px;
border-radius: 999px;
background: color-mix(in oklab, var(--accent) 10%, transparent);
color: var(--text2);
font-size: 10px;
font-weight: 700;
overflow-wrap: anywhere;
}
.client-erp-discounts-empty,
.client-erp-discounts-warning {
padding: 10px;
border: 1px dashed var(--border);
border-radius: 6px;
color: var(--text3);
font-size: 12px;
}
.client-erp-discounts-warning {
margin-top: 10px;
border-color: color-mix(in oklab, var(--orange) 35%, var(--border));
color: var(--orange);
}
.mock-order-list {
border-top: 1px solid var(--border);
}
.mock-order-row {
display: block;
padding: 14px 0;
border-bottom: 1px solid var(--border);
color: inherit;
text-decoration: none;
}
.mock-order-row.is-link {
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.mock-order-row.is-link:hover,
.mock-order-row.is-link:focus-visible {
background: var(--surface2);
outline: none;
}
.mock-order-row:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.mock-order-row.is-unpaid {
padding-left: 12px;
box-shadow: inset 3px 0 0 var(--red);
}
.mock-order-row.is-unreceived:not(.is-unpaid) {
padding-left: 12px;
box-shadow: inset 3px 0 0 var(--orange);
}
.mock-order-row.is-latest {
--latest-order-color: var(--green);
margin: 8px 0;
padding: 12px;
border: 1px solid color-mix(in oklab, var(--latest-order-color) 28%, var(--border));
border-left: 4px solid var(--latest-order-color);
border-radius: 6px;
background: color-mix(in oklab, var(--latest-order-color) 7%, var(--surface));
box-shadow: 0 2px 8px color-mix(in oklab, var(--latest-order-color) 10%, transparent);
}
.mock-order-row.is-latest.is-link:hover,
.mock-order-row.is-latest.is-link:focus-visible {
border-color: var(--latest-order-color);
background: color-mix(in oklab, var(--latest-order-color) 12%, var(--surface));
}
.mock-order-row.is-latest.is-warning {
--latest-order-color: var(--yellow);
}
.mock-order-row.is-latest.is-stale {
--latest-order-color: var(--red);
}
.mock-order-row.is-latest .mock-order-heading > strong {
color: var(--latest-order-color);
}
.mock-order-row.is-latest .mock-order-price {
color: var(--latest-order-color);
}
.mock-order-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.mock-order-heading > strong {
min-width: 0;
overflow-wrap: anywhere;
}
.mock-order-price {
flex: 0 0 auto;
color: var(--accent);
font-weight: 700;
white-space: nowrap;
}
.mock-order-meta {
display: flex;
justify-content: space-between;
gap: 10px;
margin-top: 6px;
color: var(--text3);
font-size: 11px;
}
.mock-order-status {
min-width: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
.mock-order-payment-badge,
.mock-order-receipt-badge {
display: inline-flex;
align-items: center;
min-height: 20px;
padding: 2px 7px;
border: 1px solid color-mix(in oklab, var(--red) 35%, var(--border));
border-radius: 999px;
background: color-mix(in oklab, var(--red) 9%, var(--surface));
color: var(--red);
font-size: 10px;
font-weight: 700;
line-height: 1;
white-space: nowrap;
}
.mock-order-receipt-badge {
border-color: color-mix(in oklab, var(--orange) 40%, var(--border));
background: color-mix(in oklab, var(--orange) 10%, var(--surface));
color: var(--orange);
}
.mock-orders-all-button {
width: 100%;
justify-content: flex-start;
margin-top: 14px;
}
.mock-orders-count {
margin-left: auto;
color: var(--text3);
font-size: 11px;
}
.client-orders-summary .external-profile-card-title {
margin-bottom: 6px;
}
.client-orders-summary .mock-order-row.is-latest {
margin: 4px 0 0;
padding: 9px 10px;
box-shadow: none;
}
.client-orders-summary .mock-order-meta {
margin-top: 3px;
}
.client-orders-summary .mock-orders-all-button {
min-height: 34px;
margin-top: 8px;
padding-top: 6px;
padding-bottom: 6px;
}
.mock-turnover-grid {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
margin-top: 14px;
}
.mock-turnover-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-top: 10px;
border-top: 1px solid var(--border);
}
.mock-turnover-item > span {
color: var(--text3);
font-size: 11px;
}
.mock-turnover-item > strong {
flex: 0 0 auto;
white-space: nowrap;
font-size: 13px;
}
.mock-orders-history-title {
display: grid;
grid-template-columns: auto 1fr auto;
}
.mock-orders-history-title > span:nth-child(2) {
text-align: left;
}
#clientOrdersModal {
z-index: 1100;
}
#clientOrdersModal .modal {
display: flex;
flex-direction: column;
width: 720px;
max-width: 95vw;
overflow: hidden;
}
#clientOrdersModal .modal-header,
#clientOrdersModal .modal-footer {
flex: 0 0 auto;
}
#clientOrdersModal .modal-body {
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-gutter: stable;
}
#clientDiscountsModal {
align-items: center;
z-index: 1200;
}
#clientDiscountsModal .modal {
display: flex;
flex-direction: column;
width: min(760px, 94vw);
max-height: min(820px, 92vh);
overflow: hidden;
}
#clientDiscountsModal .modal-header,
#clientDiscountsModal .modal-footer {
flex: 0 0 auto;
}
#clientDiscountsModal .modal-body {
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-gutter: stable;
}
#inboxClientTagsModal {
z-index: 1300;
}
#inboxClientTagsModal .modal {
width: min(500px, 94vw);
overflow: hidden;
}
#inboxClientTagsModal .client-tags-section {
margin-top: 0;
}
#conversationTagsModal {
z-index: 1300;
}
#wazzupChannelPickerModal {
z-index: 1400;
}
.conversation-tags-modal {
width: min(520px, 94vw);
overflow: hidden;
}
.conversation-tags-modal-body {
display: grid;
gap: 8px;
}
.conversation-tag-create-form {
display: grid;
grid-template-columns: minmax(0, 1fr) 38px;
gap: 8px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.conversation-tag-create-form .form-input,
.conversation-tag-create-form .form-select,
.conversation-tag-create-form .btn {
min-height: 38px;
}
.conversation-tag-options {
display: grid;
gap: 8px;
max-height: min(420px, 56vh);
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-gutter: stable;
}
.conversation-tag-option-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px;
}
.conversation-tag-option {
width: 100%;
min-height: 48px;
display: grid;
grid-template-columns: 12px minmax(0, 1fr) auto 24px;
align-items: center;
gap: 10px;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
color: var(--text);
cursor: pointer;
text-align: left;
}
.conversation-tag-option:hover,
.conversation-tag-option.is-selected {
border-color: var(--accent);
background: color-mix(in oklab, var(--accent) 8%, var(--surface));
}
.conversation-tag-option:disabled {
cursor: wait;
opacity: .65;
}
.conversation-tag-option-dot {
width: 12px;
height: 12px;
border-radius: 50%;
}
.conversation-tag-option-name {
min-width: 0;
font-size: 13px;
font-weight: 700;
line-height: 1.3;
overflow-wrap: anywhere;
}
.conversation-tag-edit-button {
width: 42px;
min-width: 42px;
min-height: 48px;
}
.conversation-tag-edit-form {
display: grid;
grid-template-columns: minmax(0, 1fr) 38px 38px;
gap: 6px;
}
.conversation-tag-edit-form .form-input,
.conversation-tag-edit-form .btn {
min-height: 42px;
}
.conversation-tag-complex {
color: var(--red);
font-size: 10px;
font-weight: 700;
white-space: nowrap;
}
.conversation-tag-option-check {
width: 24px;
height: 24px;
grid-column: -2 / -1;
display: grid;
place-items: center;
color: var(--accent);
}
.conversation-tag-option-check .bic {
width: 20px;
height: 20px;
}
@media (max-width: 520px) {
.conversation-tag-create-form {
grid-template-columns: minmax(0, 1fr) 38px;
gap: 6px;
}
}
.client-orders-modal-title {
display: flex;
align-items: baseline;
gap: 10px;
}
.client-orders-modal-heading {
min-width: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px 16px;
}
.client-orders-modal-actions {
display: flex;
align-items: center;
gap: 8px;
}
.client-orders-modal-actions [hidden] {
display: none;
}
.client-turnover-chart-section + .client-turnover-chart-section {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--border);
}
.client-turnover-chart-heading {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin-bottom: 14px;
}
.client-turnover-chart-heading > span {
color: var(--text2);
font-size: 12px;
font-weight: 700;
}
.client-turnover-chart-heading > strong {
font-size: 14px;
white-space: nowrap;
}
.client-turnover-chart-viewport {
width: 100%;
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-gutter: stable;
}
.client-turnover-chart {
width: max(100%, calc(var(--turnover-columns) * 56px));
min-height: 286px;
display: grid;
grid-template-columns: repeat(var(--turnover-columns), minmax(48px, 1fr));
align-items: end;
gap: 8px;
padding: 8px 2px 4px;
border-bottom: 1px solid var(--border);
}
.client-turnover-column {
min-width: 0;
display: grid;
grid-template-rows: 24px 220px 24px;
align-items: end;
gap: 6px;
text-align: center;
}
.client-turnover-value {
align-self: center;
color: var(--text2);
font-size: 10px;
font-weight: 700;
white-space: nowrap;
}
.client-turnover-track {
width: min(32px, 72%);
height: 220px;
display: flex;
align-items: flex-end;
justify-self: center;
overflow: hidden;
border-radius: 4px 4px 0 0;
background: var(--surface2);
}
.client-turnover-track > span {
width: 100%;
min-height: 0;
border-radius: 4px 4px 0 0;
background: var(--accent);
transition: background-color 0.15s ease;
}
.client-turnover-column:hover .client-turnover-track > span {
background: var(--green);
}
.client-turnover-month {
align-self: start;
color: var(--text3);
font-size: 10px;
white-space: nowrap;
}
#clientExternalProfileModal {
align-items: flex-start;
overflow: hidden;
padding: 24px 0;
}
#clientExternalProfileModal .modal {
display: flex;
flex-direction: column;
max-height: calc(100dvh - 48px) !important;
overflow: hidden;
margin: auto 0;
}
#clientExternalProfileModal .modal-header {
flex: 0 0 auto;
position: relative;
z-index: 1;
background: var(--surface);
}
#clientExternalProfileModal .modal-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
#clientExternalProfileModal .modal-footer {
flex: 0 0 auto;
}
/* TABS */
.tabs { display: flex; gap: 0; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.tab {
padding: 10px 18px; font-size: 13px; font-weight: 600; color: var(--text3);
cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all 0.15s;
}
.tab:hover { color: var(--text2); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
/* UTM section */
.utm-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
background: var(--surface2); border-radius: 10px; padding: 14px;
border: 1px solid var(--border);
}
.utm-item {}
.utm-key { font-size: 10px; color: var(--text3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px; }
.utm-val { font-size: 12px; font-family: 'JetBrains Mono', monospace; color: var(--yellow); }
/* File attach area */
.file-drop-zone {
border: 2px dashed var(--border2); border-radius: var(--radius2);
padding: 20px; text-align: center; cursor: pointer; transition: all 0.15s;
background: var(--surface2);
}
.file-drop-zone:hover { border-color: var(--accent); background: var(--surface3); }
.file-drop-zone.dragover { border-color: var(--accent); background: rgba(79,124,255,0.05); }
.attached-file {
display: flex; align-items: center; gap: 10px; padding: 10px 12px;
background: var(--surface2); border: 1px solid var(--border);
border-radius: var(--radius2); margin-top: 8px;
}
.attached-file .file-icon { font-size: 20px; flex-shrink: 0; }
.attached-file .file-name { font-size: 13px; font-weight: 600; flex: 1; }
.attached-file .file-size { font-size: 11px; color: var(--text3); }
.attached-file .file-remove { cursor: pointer; color: var(--text3); font-size: 14px; padding: 2px 6px; }
.attached-file .file-remove:hover { color: var(--red); }
/* Priority dot */
.priority-dot { width: 6px; height: 6px; border-radius: 50%; }
.priority-dot.high { background: var(--red); }
.priority-dot.mid { background: var(--yellow); }
.priority-dot.low { background: var(--green); }
/* TOOLTIP */
[data-tip] { position: relative; }
[data-tip]:hover::after {
content: attr(data-tip);
position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
background: var(--text); border: 1px solid var(--border);
color: var(--bg); font-size: 11px; padding: 4px 8px;
border-radius: 6px; white-space: nowrap; pointer-events: none; z-index: 100;
}
/* Helpers */
.flex { display: flex; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.text-muted { color: var(--text3); }
.text-sm { font-size: 12px; }
.font-mono { font-family: 'JetBrains Mono', monospace; }
.fw-700 { font-weight: 700; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }
/* Info section in deal modal */
.info-block {
background: var(--surface2); border: 1px solid var(--border);
border-radius: var(--radius2); padding: 12px 14px; margin-bottom: 10px;
}
.info-block-title {
font-size: 11px; color: var(--text3); font-weight: 600;
text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px;
}
.info-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--border); }
.info-row:last-child { border-bottom: none; }
.info-row-key { font-size: 12px; color: var(--text3); }
.info-row-val { font-size: 12px; font-weight: 600; color: var(--text); font-family: 'JetBrains Mono', monospace; }
/* Task edit */
.task-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; transition: border-color 0.15s;
}
.task-card:hover { border-color: var(--border2); }
.task-card-body { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.task-edit-description-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 6px;
}
.task-edit-description-head .form-label { margin-bottom: 0; }
.task-edit-description-toggle { flex: 0 0 auto; }
.task-edit-description-view {
min-height: 180px;
max-height: none;
overflow-y: auto;
resize: vertical;
cursor: ns-resize;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: var(--radius2);
background: var(--surface2);
color: var(--text);
font-size: 13px;
line-height: 1.5;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.task-edit-description-view,
.task-comment-text,
.task-comment-row {
user-select: text;
-webkit-user-select: text;
}
.task-comment-row {
padding: 8px 10px;
background: var(--surface);
border-radius: 6px;
border: 1px solid var(--border);
}
.task-comment-row.is-own {
background: color-mix(in srgb, var(--accent) 10%, var(--surface));
border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}
.task-edit-description-view.is-empty { color: var(--text3); }
.task-edit-created-at {
margin: -2px 0 10px;
color: var(--text3);
font-size: 11px;
}
.task-viewers-list {
display: flex;
flex-direction: column;
gap: 5px;
padding: 7px 9px;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 8px;
}
.task-viewer-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
.task-viewer-name { color: var(--text); font-weight: 600; }
.task-viewer-time, .task-viewers-empty { color: var(--text3); font-size: 11px; }
.task-activity-list { display: flex; flex-direction: column; gap: 5px; max-height: 180px; overflow-y: auto; }
.task-activity-row { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; line-height: 1.4; color: var(--text3); }
.photo-lightbox-zoom-controls {
position: absolute;
bottom: 14px;
right: 14px;
display: flex;
gap: 4px;
}
.photo-lightbox-zoom-controls button {
min-width: 38px;
height: 38px;
padding: 0 8px;
border: 0;
border-radius: 8px;
background: rgba(255,255,255,.12);
color: #fff;
cursor: pointer;
font-weight: 700;
}
.task-edit-description-view a,
.task-comment-text a {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 2px;
}
.task-edit-description-input {
display: none;
min-height: 180px;
resize: vertical;
line-height: 1.5;
}
.task-edit-description-group.is-editing .task-edit-description-view { display: none; }
.task-edit-description-group.is-editing .task-edit-description-input { display: block; }
.task-client-summary {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 8px;
min-width: 0;
}
.task-client-summary[hidden] { display: none; }
.task-client-link {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
flex: 1;
padding: 0;
border: 0;
background: transparent;
color: inherit;
text-align: left;
cursor: pointer;
}
.task-client-link:disabled {
cursor: default;
opacity: 1;
}
.task-client-link:not(:disabled):hover strong,
.task-client-link:not(:disabled):focus-visible strong { color: var(--accent); }
.task-client-link:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 4px;
}
.task-client-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 24px;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--surface3);
color: var(--accent);
}
.task-client-copy {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.25;
}
.task-client-copy strong,
.task-client-copy > span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.task-client-copy strong { font-size: 12px; }
.task-client-copy > span { color: var(--text3); font-size: 11px; }
.task-client-chat { flex: 0 0 auto; }
.task-edit-client-summary {
padding: 10px;
border: 1px solid var(--border);
background: var(--surface2);
border-radius: 6px;
margin-bottom: 14px;
}
.task-status-select {
background: var(--surface2); border: 1px solid var(--border);
border-radius: 6px; color: var(--text); font-family: inherit; font-size: 11px;
padding: 3px 8px; outline: none; cursor: pointer;
}
.emoji-search {
min-height: 34px;
padding: 6px 10px;
font-size: 12px;
}
.emoji-tab,
.emoji-btn {
border: 0;
color: var(--text);
background: transparent;
cursor: pointer;
font-family: inherit;
}
.emoji-tab {
padding: 4px 8px;
border-radius: 6px;
font-size: 18px;
}
.emoji-tab:hover,
.emoji-tab.active,
.emoji-btn:hover,
.emoji-btn:focus-visible {
background: var(--surface3);
}
.emoji-btn {
font-size: 20px; padding: 4px; border-radius: 6px;
transition: background 0.12s; display: flex; align-items: center; justify-content: center;
min-width: 32px; min-height: 32px; line-height: 1;
}
.msg-bubble { position: relative; }
.msg-edit-btn {
display: none; position: absolute; top: 4px; right: 4px;
background: var(--surface3); border: 1px solid var(--border);
border-radius: 4px; padding: 2px 6px; font-size: 10px;
cursor: pointer; color: var(--text2);
}
.msg-bubble:hover .msg-edit-btn { display: block; }
/* ── Inbox под Telegram (Волна 4) ── */
.msg-row { display:flex; margin-bottom: var(--space-1); }
.msg-row.in { justify-content:flex-start; }
.msg-row.out { justify-content:flex-end; }
.msg-row.note { justify-content:center; }
.msg-bubble {
max-width:72%;
padding: var(--space-2) var(--space-3) var(--space-1);
font-size: var(--text-base);
line-height: var(--leading-relaxed);
word-break: break-word;
position: relative;
box-shadow: var(--shadow-sm);
transition: box-shadow var(--duration-fast);
}
/* pre-wrap только на тексте — не на контейнере с дочерними элементами */
.msg-bubble [class^="msg-text-"] {
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.msg-bubble.in { background:var(--surface2); border:1px solid var(--border); color:var(--text); border-radius:var(--radius-bubble-in); }
.msg-bubble.out { background:var(--accent); color:#fff; border-radius:var(--radius-bubble); }
.msg-bubble.is-deleted {
border-style: dashed;
box-shadow: none;
}
.msg-bubble.out.is-deleted {
background: color-mix(in oklab, var(--accent) 62%, var(--surface));
color: rgba(255,255,255,0.9);
}
.msg-deleted-notice {
display: inline-flex;
align-items: center;
max-width: 100%;
padding: 1px 6px;
border-radius: 5px;
background: color-mix(in oklab, var(--red) 12%, transparent);
color: color-mix(in oklab, var(--red) 80%, var(--text));
font-size: 11px;
font-weight: 700;
line-height: 1.4;
}
.msg-bubble.out .msg-deleted-notice {
background: rgba(255,255,255,0.16);
color: #fff;
}
.msg-deleted-original {
margin-top: 5px;
padding-left: 8px;
border-left: 2px solid color-mix(in oklab, var(--red) 35%, var(--border));
color: var(--text2);
opacity: 0.78;
}
.msg-bubble.out .msg-deleted-original {
border-left-color: rgba(255,255,255,0.45);
color: rgba(255,255,255,0.86);
}
.msg-deleted-at {
color: inherit;
font-size: 10px;
font-weight: 700;
opacity: 0.78;
}
/* Ссылки в сообщениях: во входящих — акцент, в исходящих (синий фон) — белые с подчёркиванием (иначе сливались). */
.msg-link { color:var(--accent); word-break:break-all; }
.msg-bubble.out .msg-link { color:#fff; text-decoration:underline; text-underline-offset:2px; font-weight:600; }
.msg-markdown-image { display:block; max-width:min(420px, 100%); max-height:420px; margin:5px 0; border-radius:8px; object-fit:contain; }
.msg-markdown-quote {
display:block;
margin:3px 0;
padding-left:9px;
border-left:3px solid color-mix(in oklab, var(--accent) 65%, transparent);
color:var(--text2);
}
.msg-bubble.out .msg-markdown-quote { color:rgba(255,255,255,.88); border-left-color:rgba(255,255,255,.6); }
.msg-markdown-rule { border:0; border-top:1px solid var(--border); margin:7px 0; }
.msg-bubble.out .msg-markdown-rule { border-top-color:rgba(255,255,255,.45); }
.msg-bubble [class^="msg-text-"] strong { font-weight:750; }
.msg-bubble [class^="msg-text-"] code {
padding:1px 4px;
border:1px solid var(--border);
border-radius:4px;
background:var(--surface3);
font:0.92em ui-monospace, SFMono-Regular, Consolas, monospace;
}
.msg-bubble.out [class^="msg-text-"] code { border-color:rgba(255,255,255,.3); background:rgba(0,0,0,.14); }
/* :not(.picpac-paper) обязателен: applyTheme() для песочной темы вешает ОБА класса
('light' и 'picpac-paper'), поэтому холодный #f1f5fb перебивал тёплый --surface2
и входящие пузыри были голубыми посреди песочной палитры. */
body.light:not(.picpac-paper) .msg-bubble.in { background:#f1f5fb; border-color:#e3eaf3; }
body.picpac-paper .msg-bubble.in { background: var(--surface2); border-color: var(--border); }
.msg-bubble.in::before {
content:''; position:absolute; left:-6px; bottom:0; width:12px; height:14px;
background: inherit; border-left:1px solid var(--border); border-bottom:1px solid var(--border);
border-bottom-left-radius:2px;
clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
body.light:not(.picpac-paper) .msg-bubble.in::before { border-color:#e3eaf3; }
body.picpac-paper .msg-bubble.in::before { border-color: var(--border); }
.msg-bubble.out::before {
content:''; position:absolute; right:-6px; bottom:0; width:12px; height:14px;
background: var(--accent); clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.msg-bubble.note { max-width:80%; background:rgba(255,200,64,0.10); border:1px dashed rgba(255,200,64,0.55); color:var(--text2); border-radius:var(--radius-md); padding:var(--space-2) var(--space-3); font-size:var(--text-sm); box-shadow:none; }
.msg-from { font-size:11px; font-weight:600; color: color-mix(in oklab, var(--accent) 80%, var(--text)); margin-bottom:2px; }
.msg-bubble.out .msg-from { display:none; }
.msg-meta { display:flex; align-items:center; gap:6px; margin-top:2px; font-size:11px; }
.msg-bubble.out .msg-meta { justify-content:flex-end; color:rgba(255,255,255,0.82); opacity:1; }
.msg-bubble.in .msg-meta { color:var(--text3); }
.msg-meta button { background:none; border:none; cursor:pointer; padding:0; font-size:10px; opacity:0.7; color:inherit; }
.msg-meta button:hover { opacity:1; }
.msg-meta .msg-edited {
min-width:0;
color:inherit;
font-size:10px;
line-height:1;
text-decoration:underline;
text-underline-offset:2px;
}
.msg-like { font-size:13px; line-height:1; cursor:default; } /* «класс» 👍 от клиента в веб-чате */
.msg-status {
display:inline-flex;
min-width:12px;
align-items:center;
justify-content:center;
font-weight:700;
letter-spacing:0;
line-height:1;
}
.msg-status.is-delivered { color:inherit; }
.msg-status.is-read { color:#8bd3ff; }
.msg-status.is-error { color:#ffd0d0; }
body.picpac-paper .msg-status.is-read { color:#006bb3; }
body.picpac-paper .msg-status.is-error { color:#b4232d; }
.inbox-message-history-modal { width:min(560px, calc(100vw - 24px)); }
.message-history-entry { padding:12px 0; border-bottom:1px solid var(--border); }
.message-history-entry:last-child { border-bottom:0; }
.message-history-entry.is-current { padding-top:0; }
.message-history-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; color:var(--text3); font-size:11px; }
.message-history-meta strong { color:var(--text2); font-size:12px; }
.message-history-deleted { margin-bottom:8px; color:var(--red); font-size:12px; font-weight:700; }
.message-history-text { max-height:220px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--text); font-size:13px; line-height:1.45; }
.msg-channel-divider { display:flex; align-items:center; gap:10px; margin:var(--space-3) 0 var(--space-2); color:var(--text3); }
.msg-channel-divider::before, .msg-channel-divider::after { content:''; flex:1; height:1px; background:var(--border); }
.msg-channel-divider-content {
display: inline-flex;
align-items: center;
gap: 4px;
flex: 0 1 auto;
min-width: 0;
max-width: min(460px, 72vw);
padding: 3px 7px;
border: 0;
border-radius: 5px;
background: transparent;
color: inherit;
font: inherit;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
}
.msg-channel-divider-content:hover,
.msg-channel-divider-content:focus-visible { background: var(--surface2); color: var(--text2); outline: 0; }
.msg-channel-divider-content.is-selected-route { background: color-mix(in oklab, var(--accent) 9%, transparent); color: var(--accent); }
.msg-channel-divider-label { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.msg-channel-divider svg, .msg-channel-divider img { width:12px !important; height:12px !important; }
.inbox-message-route-menu {
position: fixed;
z-index: 10020;
width: min(310px, calc(100vw - 16px));
padding: 5px;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--surface);
box-shadow: var(--shadow-lg);
}
.inbox-message-route-menu[hidden] { display: none; }
.inbox-message-route-menu-label {
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
align-items: center;
gap: 8px;
padding: 7px 9px;
color: var(--text3);
font-size: 11px;
line-height: 1.35;
overflow-wrap: anywhere;
}
.inbox-message-route-menu > button {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
min-height: 38px;
padding: 8px 9px;
border: 0;
border-radius: 5px;
background: transparent;
color: var(--text);
font: inherit;
font-size: 12px;
font-weight: 600;
text-align: left;
cursor: pointer;
}
.inbox-message-route-menu > button:hover,
.inbox-message-route-menu > button:focus-visible { background: var(--surface2); outline: 0; }
.inbox-message-route-menu > button .bic { width: 16px; height: 16px; color: var(--accent); }
/* Дата-разделители */
.msg-day { display:flex; align-items:center; gap:10px; margin: var(--space-3) 0 var(--space-2); }
.msg-day::before, .msg-day::after { content:''; flex:1; height:1px; background:var(--border); }
.msg-day span { font-size:11px; color:var(--text3); padding:2px 12px; background:var(--surface2); border-radius:var(--radius-full); border:1px solid var(--border); }
/* Системная строка ленты: открыл/закрыл чат (только для операторов) */
.msg-sys { text-align:center; margin: var(--space-2) 0; }
.msg-sys span { font-size:11px; color:var(--text3); padding:3px 12px; background:var(--surface2); border-radius:var(--radius-full); border:1px dashed var(--border); }
/* Иконка канала-кружок */
.ch-dot { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; font-size:10px; color:#fff; margin-right:6px; vertical-align:middle; }
.ch-dot.tg { background:var(--tg); }
.ch-dot.wa { background:#25d366; }
.ch-dot.vb { background:var(--vb); }
.ch-dot.ig { background:var(--ig); }
.ch-dot.em { background:var(--orange); }
/* МОБИЛЬНАЯ ВЕРСИЯ — bottom-nav вместо top-bar */
@media (max-width: 768px) {
body { flex-direction: column; }
/* Sidebar → фиксированная нижняя панель */
.sidebar {
position: fixed; bottom: 0; left: 0; right: 0;
width: 100%; min-width: 100%;
/* высота РАСТЁТ на safe-area (home-indicator), иначе инсет «съедал» зону иконок */
height: calc(62px + env(safe-area-inset-bottom));
border-right: none; border-top: 1px solid var(--border); border-bottom: none;
flex-direction: row; overflow: visible;
z-index: 100; background: var(--surface);
padding-bottom: env(safe-area-inset-bottom);
}
/* Скрываем то, что не помещается в bottom-nav */
.logo, .logo-sub, .user-info, .user-card, .nav-section, .sidebar-footer, .sidebar-order-toolbar, .sidebar-order-controls, .sidebar-order-logo-toggle { display: none !important; }
nav { display: flex; flex-direction: row; padding: 0 4px; overflow-x: auto; overflow-y: hidden; flex: 1; gap: 0; align-items: stretch; scrollbar-width: none; }
body.sidebar-custom-order .sidebar > nav,
body.sidebar-order-editing .sidebar > nav { flex-direction: row; }
nav::-webkit-scrollbar { display: none; }
.nav-item {
flex-direction: column; padding: 6px 10px; gap: 2px;
min-width: 58px; flex: 0 0 auto; border-radius: 0;
justify-content: center; align-items: center;
border-left: none !important; border-right: none !important;
}
.nav-item .label { font-size: 10px; line-height: 1.1; white-space: nowrap; }
.nav-item .icon { font-size: 22px; line-height: 1; }
.nav-item .badge { position: absolute; top: 4px; right: 8px; }
.nav-item.active { background: transparent; color: var(--accent); }
.nav-item.active .icon { transform: scale(1.1); }
.nav-item.active::before { display: none; }
/* main — место для bottom-nav через padding */
.main { flex: 1; min-height: 0; padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
.topbar { padding: env(safe-area-inset-top) 12px 0; gap: 8px; min-width: 0;
height: calc(48px + env(safe-area-inset-top)); box-sizing: border-box; }
.topbar-search { width: 140px; }
/* заголовок сжимается с эллипсисом, а не выталкивает кнопки за край шапки */
.topbar-title { font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* «+ Задача» → компактная «+» на мобиле, чтобы заголовку хватало места */
.topbar-btn-label { display: none; }
/* переключатель периода дашборда — на всю ширину, кнопки равной доли (не рвётся лесенкой) */
#incPeriodSwitcher { width: 100%; justify-content: space-between; }
#incPeriodSwitcher .btn-period { flex: 1; }
/* эмодзи-сетка: 8 колонок на мобиле (10 слишком тесно) + удобная тач-зона */
#emojiGrid { grid-template-columns: repeat(8, 1fr) !important; }
.emoji-btn { padding: 6px; min-width: 36px; min-height: 36px; display: flex; align-items: center; justify-content: center; }
.content { padding: 12px; }
.stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.dash-grid, .dash-grid-3 { grid-template-columns: 1fr; }
.kanban-wrap { min-height: auto; }
.kanban-col { min-width: 260px; }
.modal { width: 95vw !important; margin: 10px; }
.form-row { grid-template-columns: 1fr; }
.user-work-schedule-day { grid-template-columns: 1fr; gap: 7px; padding: 10px 0; }
.user-work-schedule-times { grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr); width: 100%; }
.user-work-schedule-times .form-input { width: 100%; }
.client-profile-modal-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
.client-tag-filter-field { width: 100%; }
.client-tag-filter-field .form-select { flex: 1; width: auto; }
#clientSearch { width: 100% !important; }
.external-profile-grid { grid-template-columns: 1fr; }
.client-contact-channels { grid-template-columns: 1fr; }
.mock-client-profile-layout { grid-template-columns: 1fr; }
.client-erp-discounts-summary { grid-template-columns: 1fr; }
.client-tag-create-form { grid-template-columns: minmax(0, 1fr) 44px; }
.client-tag-create-form .btn { grid-column: 1 / -1; }
.client-tag-color-input { width: 44px; height: 44px; }
.client-groups-toolbar { align-items: stretch; flex-direction: column; }
.client-groups-toolbar .btn { align-self: flex-start; }
.client-groups-card { overflow: hidden; }
.client-groups-table-wrap { overflow-x: auto; }
.client-group-coverage-heading { align-items: flex-start; flex-direction: column; }
.client-group-coverage-legend { gap: 7px; }
.client-group-coverage-interval { grid-template-columns: 88px minmax(0, 1fr); }
.client-group-coverage-status { align-items: flex-start; flex-direction: column; gap: 2px; }
.client-group-absence-notice { align-items: flex-start; flex-direction: column; gap: 2px; }
.client-group-detail-header { align-items: flex-start; }
.client-group-detail-title { font-size: 16px; }
.client-group-detail-body { grid-template-columns: 1fr; gap: 22px; }
.absence-layout { grid-template-columns: 1fr; }
.absence-form-section { padding-right: 0; padding-bottom: 22px; border-right: 0; border-bottom: 1px solid var(--border); }
.absence-list-section { padding-left: 0; }
.client-group-manager-list { max-height: 260px; }
.client-group-client-list { max-height: 240px; }
.client-group-assigned-list { max-height: 420px; }
.client-group-add-member-modal .client-group-option-list,
.client-group-add-member-modal .client-group-manager-option-list { max-height: 58vh; }
.client-group-table-actions .btn span { display: none; }
.team-grid { grid-template-columns: repeat(2, 1fr); }
table { font-size: 12px; }
th, td { padding: 8px 10px; }
/* Высоту панелей инбокса НЕ считаем вручную — отдаём флексу.
Прежняя формула calc(100vh - 110px - safe-area-bottom) забывала padding:12px
у .content (24px) и env(safe-area-inset-top) у .topbar → на iPhone с вырезом
панель была на 71-83px выше экрана: композер уезжал под нижнюю навигацию,
снизу оставалась мёртвая полоса прокрутки. */
ВАЖНО: селектор обязан быть #page-inbox.active, а НЕ #page-inbox.
У .page стоит display:none, у .page.active — display:block. ID (1,0,0) бьёт
класс (0,1,0), поэтому голый #page-inbox{display:flex} показывал Входящие
поверх ЛЮБОГО раздела на телефоне. */
#page-inbox.active { display: flex; flex-direction: column; min-height: 0; height: 100%; }
/* .dash-grid — grid-контейнер, ему нужна своя высота, иначе панели внутри не
растянутся: grid-элементы тянутся (align-items:stretch) только если у сетки
есть определённая высота. flex:1 задаёт её от родителя-флекса выше. */
#page-inbox.active .dash-grid { flex: 1 1 auto; min-height: 0; margin-bottom: 0; }
.inbox-pane-list, .inbox-pane-thread { height: auto !important; min-height: 0; }
/* composer не уезжает под bottom-nav */
.inbox-composer { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}
@media (max-width: 480px) {
.stats-grid { grid-template-columns: 1fr 1fr; }
.team-grid { grid-template-columns: 1fr; }
.topbar-search { display: none; }
}
/* ── Mobile-улучшения (Волна PWA): touch-targets + stack-Inbox + composer ── */
@media (max-width: 768px) and (pointer: coarse) {
/* Apple HIG: минимальный тач-таргет 44px */
.btn, .nav-item, select, button { min-height: 44px; }
.nav-item { min-height: 56px; }
.btn-sm, .btn-icon { min-width: 44px; min-height: 44px; }
.inbox-composer .send-btn { min-width: 48px; min-height: 48px; }
.cmdk-item { min-height: 44px; }
/* фильтр-чипы каналов и кнопка закрытия модалки — тоже до 44px (это /div, не .btn) */
.channel-tag-icon { width: 44px; height: 44px; font-size: 18px; }
.modal-close { width: 44px; height: 44px; font-size: 18px; }
/* убираем hover-эффекты которые ломаются на touch */
.msg-bubble:hover .msg-edit-btn { display: none; }
/* iOS автоматически зумит страницу при фокусе в поле с font-size < 16px, и в
display:standalone вернуть масштаб обратно нечем (body{overflow:hidden}).
16px — порог, при котором Safari не зумит. !important нужен: у части полей
размер задан инлайном в разметке. .cmdk-input уже был сделан правильно. */
.form-input, .form-select, input, textarea, select { font-size: 16px !important; }
/* тач-таргеты для элементов, которые не .btn/button */
.qj-pill { width: 44px; height: 44px; }
.tab { min-height: 44px; display: inline-flex; align-items: center; }
}
/* Кнопка «← Назад» в шапке чата — видна только на mobile в стек-режиме */
.inbox-back-btn { display: none; }
@media (max-width: 768px) {
body.inbox-thread-open .inbox-back-btn { display: inline-flex; }
}
/* Stack-Inbox: на узком экране показываем ИЛИ список ИЛИ открытый чат */
@media (max-width: 768px) {
#page-inbox .dash-grid { grid-template-columns: 1fr !important; }
.inbox-resizer { display: none !important; }
/* !important нужен — у обеих панелей inline style="display:flex" побеждает обычные правила */
body.inbox-thread-open #page-inbox .inbox-pane-list { display: none !important; }
body:not(.inbox-thread-open) #page-inbox .inbox-pane-thread { display: none !important; }
body.inbox-thread-open #page-inbox .inbox-pane-thread { display: flex !important; flex-direction: column; }
body.inbox-client-panel-open #page-inbox .inbox-pane-thread,
body.inbox-client-panel-open #page-inbox .inbox-pane-list { display: none !important; }
body.inbox-client-panel-open #page-inbox .inbox-client-panel {
display: block !important;
height: auto;
min-height: 0;
}
/* поле ввода прилипает к низу экрана */
.inbox-composer { position: sticky; bottom: 0; z-index: 5; }
/* модалки на весь экран.
Скролл переносим с .modal на .modal-body, иначе на длинной форме шапка с
крестиком уезжает наверх и закрыть модалку нечем. Футер с кнопками
«Сохранить/Отмена» отступает от home-indicator. */
.modal { width: 100vw !important; max-width: 100vw !important; max-height: 100dvh !important; margin: 0; border-radius: 0 !important;
display: flex; flex-direction: column; overflow: hidden !important; }
.modal-header { flex: 0 0 auto; }
.modal-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.modal-footer { flex: 0 0 auto; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
#clientExternalProfileModal { padding: 0; }
#clientExternalProfileModal .modal { margin: 0; overflow: hidden !important; }
#clientExternalProfileModal .modal-body { flex: 1 1 auto; overflow-y: auto; }
/* отступы экономнее */
.card { padding: 12px; }
.card-header { padding: 10px 12px; }
/* Компактные шапки карточек могут переносить управление на вторую строку. */
.card-header { flex-wrap: wrap; row-gap: 8px; }
/* Шапка карточки: у .card-header стоит justify-content:space-between — на десктопе
это разводит заголовок и кнопки по краям, но после переноса на вторую строку
ряд кнопок уезжал вправо. На мобильном прижимаем всё влево. */
.card-header { justify-content: flex-start; }
/* Заголовочный ряд страницы: «Название раздела … [Обновлено —] [Обновить]».
Ряд flex БЕЗ переноса, поэтому при нехватке места кнопка сжималась, а её
подпись вылезала за рамку. Встречается на 4 страницах: Клиенты, Задачи,
Календарь, Безопасность. */
.flex.items-center.mb-16 { flex-wrap: wrap; row-gap: 8px; }
/* Кнопка не сжимается ниже своего содержимого — подпись обязана оставаться внутри */
.btn { flex-shrink: 0; white-space: nowrap; }
/* Переключатель периодов на Дашборде: 7 кнопок («Сегодня»…«Прошлый месяц») ≈528px
в один ряд без переноса против 366px экрана. Разрешаем перенос; flex:1 меняем на
«расти, но не сжиматься», иначе подписи не помещаются в свои 52px. */
/* Переключатель периодов на Дашборде — лента (класс .u-strip в разметке) */
#incPeriodSwitcher .btn-period { flex: 0 0 auto !important; }
/* Кнопка обновления дашборда занимала отдельную строку (~55px впустую).
Переставляем её в строку с «обновлено: чч:мм:сс», где места полно.
order управляет порядком в flex-контейнере, margin-left:auto прижимает вправо. */
#page-dashboard > div > h2 { order: 1; }
#dashIncTime { order: 2; }
#page-dashboard button[title="Обновить"] { order: 3; margin-left: auto; }
#incPeriodSwitcher { order: 4; }
#page-dashboard .u-daterange { order: 5; }
/* распорка flex:1 на мобильном только мешает переносу */
#page-dashboard > div > div[style="flex:1"] { display: none; }
/* ── УТИЛИТЫ (см. описание у объявления .u-strip выше) ── */
.u-strip {
flex-wrap: nowrap !important;
overflow-x: auto; -webkit-overflow-scrolling: touch;
scrollbar-width: none; -ms-overflow-style: none;
max-width: 100%;
}
.u-strip::-webkit-scrollbar { display: none; }
/* элементы ленты не сжимаются — иначе подписи кнопок вылезают за рамку */
.u-strip > * { flex: 0 0 auto; }
.u-wrap { flex-wrap: wrap !important; row-gap: 8px; }
/* Поля выбора даты. В разметке им заданы инлайном 130-150px, а фикс автозума
поднял шрифт до 16px — поля стали шире, и в ряду «дата — дата [Открыть]»
кнопка переставала помещаться (434px против 366px экрана).
120px хватает: «19.07.2026» при 16px ≈ 95px + суженные боковые отступы. */
/* Шрифт полей даты — 13px вместо общих 16px.
iOS показывает дату длинным форматом («19 июля 2026 г.», а не «19.07.2026»),
при 16px это ~130px текста, и группа «дата — дата [Открыть]» не влезала в строку.
Правило автозума (.form-input{font-size:16px!important}) перебивается за счёт
более высокой специфичности селектора. Автозум тут не грозит: у type="date"
iOS открывает барабан выбора даты, а не клавиатуру. */
input[type="date"].form-input {
font-size: 13px !important;
padding-left: 8px; padding-right: 8px;
}
/* Поля и кнопка «Открыть» в одну линию: у .btn на тач-экране min-height:44px, а поле
без min-height выходило 39px — кнопка торчала сверху и снизу на 5px.
Приводим поля к той же высоте 44px (заодно это корректный тач-таргет). */
.form-input, .form-select { min-height: 44px; }
/* Ряд фильтра дат — компактная группа «дата — дата [Открыть]», без растягивания
на всю ширину (иначе поля раздувались и кнопка улетала к самому краю экрана)
и без прижатия вправо (иначе слева оставалась пустота).
flex:0 1 128px — одинаковая база у обоих полей, поэтому они всегда равной длины;
сжаться могут только вместе и только если места совсем мало. */
/* .u-daterange — фильтр «дата — дата [кнопка]». ВСЕГДА одна строка, без оценок
«на глаз», чисто арифметикой флекса: nowrap запрещает перенос, поля получают
flex:1 1 0 с min-width:0 — делят ровно то место, что осталось после кнопки и
тире, и ужимаются сколько нужно. Кнопка не сжимается (.btn{flex-shrink:0}),
поэтому не обрежется и не перенесётся ни при какой ширине.
max-width держит поля компактными, чтобы кнопка не улетала к правому краю. */
.u-daterange { display: flex !important; flex-wrap: nowrap; width: 100%; }
.u-daterange input[type="date"].form-input {
flex: 1 1 0; width: auto !important; min-width: 0; max-width: 140px;
}
/* Календарь: на телефоне рисуется построчный список (renderCalendarList),
поэтому шапка с днями недели «Пн Вт Ср…» не нужна. */
#page-calendar .card > div:first-child { display: none; }
/* ── ИНЛАЙНОВЫЕ СЕТКИ ──
Разделы Календарь, Безопасность, Профиль, Аналитика свёрстаны инлайн-стилями,
мимо классов (.stats-grid/.dash-grid/.form-row), у которых адаптив есть.
Поэтому на телефоне они оставались многоколоночными: 4 колонки = 85px,
3 колонки = 114px. Целимся по атрибуту style — иначе инлайн не перебить. */
[style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
[style*="grid-template-columns:repeat(3,1fr)"],
[style*="grid-template-columns:repeat(3, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
/* Панель эмодзи: 10 колонок = 34px на клетку, меньше тач-минимума */
#emojiGrid { grid-template-columns: repeat(7, 1fr) !important; }
/* Безопасность/профиль: жёсткие ширины блоков вылезают за экран */
[style*="width:480px"] { width: 100% !important; max-width: 480px; }
[style*="width:160px"] { width: 100% !important; max-width: 160px; }
/* ── КАЛЕНДАРЬ ──
Месячная сетка 7×6 на телефоне нечитаема (клетка 49px, под текст 36px ≈ 7 знаков),
поэтому renderCalendar() на ширине ≤768px рисует построчный список дней
(renderCalendarList). Правил под клетки сетки здесь быть НЕ должно — они бы
ломали строки списка. */
/* Архив задач: на десктопе строка одна, но её фикс-колонки (82+88+150px + гэпы +
кнопка 44px) требуют ~450px — на телефоне заголовок с flex:1;min-width:0
схлопывался в НОЛЬ, и названия задачи не было видно вообще.
Ниже 768px раскладываем в две строки: название целиком, метаданные под ним. */
.task-arch-row { flex-wrap: wrap; row-gap: 4px !important; }
.task-arch-row .tar-title {
flex: 1 0 100% !important; order: -1;
white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
}
.task-arch-row .tar-arch,
.task-arch-row .tar-created { flex: 0 0 auto !important; }
.task-arch-row .tar-mgr { flex: 1 1 auto !important; justify-content: flex-end; }
.task-kanban { scroll-snap-type: x proximity; }
.task-kanban-column { min-width: 82vw; width: 82vw; scroll-snap-align: start; }
.task-archive-column { min-width: 100%; width: 100%; }
/* Панель инструментов «Задачи»: вкладки + поиск + переключатель доски + кнопка
≈878px при flex-wrap:wrap раскладывались в 4-5 строк и съедали треть экрана. */
#taskSearch { width: 100% !important; order: 10; }
#taskArchiveSort { width: 100% !important; order: 11; }
#taskBoardSwitch .tab { padding: 10px 12px; }
/* Плашка «войти под пользователем» стоит fixed;bottom:0;z-index:9999, а нижняя
навигация — bottom:0;z-index:100. На мобильном плашка ложилась ПОВЕРХ меню, и в
режиме просмотра оно было недоступно. Поднимаем её над навигацией. */
#impBar { bottom: calc(62px + env(safe-area-inset-bottom)) !important; }
/* Шапка открытого чата: кнопки действий — только иконки (текст в .act-label скрыт),
чтобы «Принять в работу/Оценка/Заметка/…» не ломались на 3 строки и не уезжали в обрез.
Заголовок-имя сжимается эллипсисом; ряд кнопок при нехватке места горизонтально скроллится. */
#inboxChatHeader {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 8px;
overflow: visible;
}
#inboxChatHeader .act-label { display: none; }
#inboxChatHeader .btn { white-space: nowrap; flex: 0 0 auto; padding: 8px 9px; margin-left: 0 !important; }
#inboxChatHeader .card-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; }
.inbox-chat-header-main { width: 100%; }
.inbox-chat-header-identity { overflow: hidden; }
.inbox-chat-header-identity-actions { gap: 4px; }
.inbox-chat-header-actions {
width: 100%;
max-width: 100%;
gap: 6px;
margin-left: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.inbox-chat-header-actions::-webkit-scrollbar { display: none; }
.inbox-chat-search { padding: 7px 8px; gap: 4px; }
.inbox-chat-search-count { min-width: 52px; }
.inbox-chat-search .btn-icon { flex: 0 0 auto; }
}
/* iOS PWA safe-area: верх учтён в .topbar (height+padding-top), низ — в .sidebar (height+padding-bottom)
и .main (padding-bottom под фикс-меню). Отдельный body padding-bottom убран — он только обнажал
полосу var(--bg) рядом с белой панелью в светлой теме. */
/* PWA-режим (установлено на главный экран) — прячем элементы браузерного UI */
@media (display-mode: standalone) {
body { user-select: none; -webkit-user-select: none; }
.inbox-composer textarea, input, textarea { -webkit-user-select: text; user-select: text; }
.task-edit-description-view,
.task-comment-text,
.task-comment-row,
#taskCommentsList { user-select: text; -webkit-user-select: text; }
/* Компенсация выреза/статус-бара для ШИРОКИХ экранов (iPad в standalone).
Основное правило .topbar живёт в @media (max-width:768px), поэтому выше 768px
шапка уезжала под статус-бар. */
@media (min-width: 769px) {
.topbar { padding-top: env(safe-area-inset-top); height: calc(56px + env(safe-area-inset-top)); box-sizing: border-box; }
.sidebar { padding-bottom: env(safe-area-inset-bottom); }
}
}
/* ── Доработка PWA: install-кнопка, network indicator, update-тост ── */
.pwa-install-btn { display: none; }
.pwa-install-btn.show { display: inline-flex; gap:6px; align-items:center; }
.net-dot { display:inline-flex; align-items:center; justify-content:center; width:10px; height:10px; border-radius:50%; background:var(--green); box-shadow:0 0 6px color-mix(in oklab, var(--green) 55%, transparent); margin-right:4px; transition: background var(--duration-normal), box-shadow var(--duration-normal); vertical-align:middle; }
.net-dot.off { background:var(--text3); box-shadow:none; }
.manager-work-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 82px; border: 1px solid var(--border2); background: var(--surface); color: var(--green); }
.manager-work-toggle.is-working { color: var(--red); border-color: color-mix(in oklab, var(--red) 45%, var(--border)); }
.manager-work-toggle:disabled { cursor: wait; opacity: 0.55; }
.manager-work-profile-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; margin-bottom: 10px; }
body.is-offline .topbar { box-shadow: inset 0 -3px 0 var(--orange); }
@media (max-width: 768px) {
#managerWorkToggleTop { min-width: 36px; width: 36px; padding: 7px; flex: 0 0 36px; }
#managerWorkToggleTop .manager-work-toggle-label { display: none; }
}
/* PWA update prompt — фиксированный баннер снизу с кнопкой */
.pwa-update-bar { position:fixed; left:50%; transform:translateX(-50%); bottom:18px; z-index:100001; background:var(--surface); border:1px solid var(--accent); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:10px 16px; display:none; align-items:center; gap:12px; font-size:13px; color:var(--text); }
.pwa-update-bar.show { display:flex; }
.pwa-update-bar button { padding:6px 12px; background:var(--accent); color:#fff; border:none; border-radius:var(--radius-md); font-weight:600; cursor:pointer; font-size:12px; }
/* Отключаем pull-to-refresh на mobile в PWA — случайный потяг не должен перегружать чат */
html { overscroll-behavior-y: none; }
body { overscroll-behavior-y: none; }
.inbox-composer textarea, #inboxMessages, #inboxChatList { overscroll-behavior: contain; }
#inboxMessages .msg-search-text { user-select: text; -webkit-user-select: text; }
.inbox-pane-thread { position: relative; }
.inbox-scroll-bottom-wrap {
position: absolute;
right: 18px;
bottom: 82px;
z-index: 25;
pointer-events: none;
}
.inbox-scroll-bottom {
position: relative;
width: 36px;
height: 36px;
padding: 0;
border: 1px solid color-mix(in oklab, var(--accent) 45%, var(--border));
border-radius: 50%;
background: color-mix(in oklab, var(--surface) 92%, var(--accent));
box-shadow: var(--shadow);
pointer-events: auto;
}
.inbox-scroll-bottom:hover { border-color: var(--accent); color: var(--accent); }
.inbox-scroll-bottom-count {
position: absolute;
top: -7px;
right: -7px;
min-width: 18px;
height: 18px;
padding: 0 4px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid var(--surface);
border-radius: 20px;
background: var(--accent);
color: #fff;
font-size: 10px;
font-weight: 700;
line-height: 1;
}
.client-history-section { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 8px; }
.client-history-section summary { cursor: pointer; color: var(--text2); font-size: 12px; }
.client-history-list { display: grid; gap: 6px; margin-top: 8px; max-height: 260px; overflow: auto; }
.client-history-row { display: grid; grid-template-columns: auto auto 1fr auto; gap: 6px; align-items: baseline; font-size: 11px; color: var(--text2); }
/* Базовый layout композера: кнопки + textarea + маршрут/отправка в одну строку
с переносом на узких. Кнопки не сжимаются, textarea растёт и сжимается. */
.inbox-composer {
display: flex; align-items: flex-end; gap: 6px;
padding: 8px 12px; border-top: 1px solid var(--border);
flex-wrap: wrap;
}
.inbox-pending-email-subject {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 8px;
flex: 1 0 100%;
min-width: 0;
padding-bottom: 2px;
}
.inbox-pending-email-subject[hidden] { display: none; }
.inbox-pending-email-subject label {
color: var(--text2);
font-size: 12px;
font-weight: 650;
}
.inbox-pending-email-subject .form-input { min-width: 0; min-height: 36px; padding-block: 7px; }
.inbox-pending-attachment {
display: grid;
grid-template-columns: 42px minmax(0, 1fr) 34px;
align-items: center;
gap: 9px;
flex: 1 0 100%;
min-width: 0;
padding: 7px 8px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface2);
}
.inbox-pending-attachment[hidden] { display: none; }
.inbox-pending-attachment-thumbnail,
.inbox-pending-attachment-file-icon {
width: 42px;
height: 42px;
border-radius: 5px;
}
.inbox-pending-attachment-thumbnail { display: block; object-fit: cover; }
.inbox-pending-attachment-thumbnail[hidden],
.inbox-pending-attachment-file-icon[hidden] { display: none; }
.inbox-pending-attachment-file-icon {
display: flex;
align-items: center;
justify-content: center;
background: var(--surface3);
font-size: 19px;
}
.inbox-pending-attachment-details {
display: flex;
flex-direction: column;
min-width: 0;
gap: 2px;
}
.inbox-pending-attachment-details strong {
overflow: hidden;
color: var(--text);
font-size: 12px;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
.inbox-pending-attachment-details > span {
color: var(--text3);
font-size: 11px;
line-height: 1.3;
}
.inbox-pending-attachment-remove { width: 34px; height: 34px; padding: 7px; }
.inbox-composer > button, .inbox-composer > input[type="file"] { flex-shrink: 0; }
.inbox-composer > textarea { flex: 1 1 200px; min-width: 0; }
.inbox-composer-actions {
display: flex; align-items: flex-end; gap: 6px;
flex: 0 1 auto; min-width: 0; margin-left: auto;
}
.inbox-composer .send-btn { flex: 0 0 auto; min-width: 92px; min-height: 38px; }
.inbox-route-picker {
position: relative;
flex: 0 0 148px;
width: 148px;
min-width: 0;
}
.inbox-route-native { display: none; }
.inbox-route-trigger {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
min-height: 38px;
padding: 7px 8px;
border: 1px solid color-mix(in oklab, var(--accent) 24%, var(--border));
border-radius: var(--radius-md);
background: color-mix(in oklab, var(--accent) 5%, var(--surface2));
color: var(--text2);
font: inherit;
font-size: 12px;
font-weight: 650;
cursor: pointer;
}
.inbox-route-trigger:hover { border-color: color-mix(in oklab, var(--accent) 52%, var(--border)); }
.inbox-route-trigger:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 18%, transparent); outline: 0; }
.inbox-route-trigger:disabled { cursor: not-allowed; opacity: .58; }
.inbox-route-trigger-icon,
.inbox-route-option-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 16px;
width: 16px;
height: 16px;
}
.inbox-route-trigger-icon svg,
.inbox-route-trigger-icon img,
.inbox-route-option-icon svg,
.inbox-route-option-icon img { width: 15px !important; height: 15px !important; }
.inbox-route-trigger-label { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.inbox-route-trigger-chevron { flex: 0 0 14px; width: 14px; height: 14px; color: var(--text3); }
.inbox-route-menu {
position: absolute;
right: 0;
bottom: calc(100% + 6px);
z-index: 60;
width: max-content;
min-width: 260px;
max-width: min(380px, calc(100vw - 24px));
padding: 5px;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--surface);
box-shadow: var(--shadow-lg);
}
.inbox-route-menu[hidden] { display: none; }
.inbox-route-option {
display: grid;
grid-template-columns: 18px minmax(0, 1fr) 16px;
align-items: center;
gap: 8px;
width: 100%;
min-height: 38px;
padding: 7px 9px;
border: 0;
border-radius: 5px;
background: transparent;
color: var(--text);
font: inherit;
font-size: 12px;
text-align: left;
cursor: pointer;
}
.inbox-route-option:hover,
.inbox-route-option:focus-visible { background: var(--surface2); outline: 0; }
.inbox-route-option.is-selected { background: color-mix(in oklab, var(--accent) 9%, var(--surface)); }
.inbox-route-option-label { overflow-wrap: anywhere; line-height: 1.35; }
.inbox-route-option-check { width: 15px; height: 15px; color: var(--accent); opacity: 0; }
.inbox-route-option.is-selected .inbox-route-option-check { opacity: 1; }
@media (max-width: 768px) {
.inbox-composer-actions { flex: 1 1 254px; width: 100%; justify-content: flex-end; }
.inbox-route-picker { flex: 0 1 148px; width: 148px; }
}
.chat-composer-input {
min-height: 38px;
max-height: 200px;
overflow-y: hidden;
resize: none;
line-height: 1.4;
font-family: inherit;
}
.chat-composer-expand[hidden] { display: none !important; }
.chat-composer-fullscreen-overlay,
.task-description-fullscreen-overlay { padding: 0; }
.chat-composer-fullscreen-dialog,
.task-description-fullscreen-dialog {
width: 100vw;
max-width: none;
height: 100dvh;
max-height: none;
margin: 0;
border-radius: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.chat-composer-fullscreen-body,
.task-description-fullscreen-body {
flex: 1 1 auto;
min-height: 0;
display: flex;
padding: 18px;
}
.chat-composer-fullscreen-body textarea,
.task-description-fullscreen-body textarea {
width: 100%;
height: 100%;
min-height: 0;
resize: none;
line-height: 1.55;
font-family: inherit;
}
@media print {
.sidebar, .topbar, .btn, select, input, .modal-overlay { display: none !important; }
.main { overflow: visible !important; }
.content { overflow: visible !important; padding: 0 !important; }
body { background: white !important; color: black !important; }
.card { border: 1px solid #ccc !important; break-inside: avoid; }
.stat-card { background: #f5f5f5 !important; border: 1px solid #ccc !important; }
.stat-value, .stat-label { color: black !important; }
.status-badge { border: 1px solid #ccc !important; color: black !important; background: #eee !important; }
table { width: 100% !important; border-collapse: collapse !important; }
th, td { border: 1px solid #ccc !important; padding: 6px 10px !important; color: black !important; font-size: 11px !important; }
th { background: #f0f0f0 !important; }
#page-reports { display: block !important; }
h1.print-title { display: block !important; font-size: 20px; margin-bottom: 16px; color: black; }
}
.search-item {
display: flex; align-items: center; gap: 12px;
padding: 10px 16px; cursor: pointer; transition: background 0.12s;
border-bottom: 1px solid var(--border);
}
.search-item:last-child { border-bottom: none; }
.search-item:hover { background: var(--surface2); }
.search-icon { font-size: 18px; flex-shrink: 0; }
.search-title { font-size: 13px; font-weight: 600; }
.search-sub { font-size: 11px; color: var(--text3); margin-top: 2px; }
.search-badge { font-size: 10px; padding: 2px 7px; border-radius: 20px; background: var(--surface3); color: var(--text2); margin-left: auto; flex-shrink: 0; }
.search-empty { padding: 20px; text-align: center; font-size: 13px; color: var(--text3); }
/* P2.12: подсветка матчей в выдаче поиска. Под dark/light темы через color-mix. */
mark { background: color-mix(in oklab, var(--accent) 40%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; font-weight: 600; }
/* Emoji pack: Twemoji вставляет ![]()
— крупнее и плотнее, в стиле Telegram. */
img.emoji { height: 1.3em; width: 1.3em; margin: 0 .02em; vertical-align: -0.25em; display: inline-block; }
/* Emoji pack: Noto Color Emoji — браузер сам выбирает шрифт для emoji-глифов. */
body.emoji-noto { font-family: 'Noto Color Emoji', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
/* ── Mary × Fabrika: только стилистика, без изменения структуры интерфейса ── */
body.picpac-paper .sidebar {
background: #fbfbfa;
border-color: var(--border);
}
body.picpac-paper .logo {
padding-top: 16px;
padding-bottom: 16px;
background: #fff;
}
body.picpac-paper .logo-img {
height: 32px;
filter: none;
}
body.picpac-paper .logo-crm {
color: var(--text);
letter-spacing: 0;
font-weight: 700;
}
body.picpac-paper .logo-icon {
background: transparent;
letter-spacing: 0;
}
body.picpac-paper .user-avatar,
body.picpac-paper .mini-avatar {
background: var(--brand-yellow);
color: #11110f;
}
body.picpac-paper .nav-section {
color: var(--text3);
letter-spacing: 0;
}
body.picpac-paper .nav-item {
margin: 2px 8px;
padding: 9px 10px;
border-radius: 8px;
}
body.picpac-paper .nav-item:hover {
background: var(--surface3);
color: var(--text);
}
body.picpac-paper .nav-item.active {
background: var(--brand-yellow);
color: #11110f;
}
body.picpac-paper .nav-item.active::before {
display: none;
}
body.picpac-paper .nav-item .label {
font-weight: 600;
}
body.picpac-paper .topbar {
background: rgba(255,255,255,0.94);
border-color: var(--border);
backdrop-filter: blur(12px);
}
body.picpac-paper .topbar-title,
body.picpac-paper .card-title,
body.picpac-paper .modal-title {
color: var(--text);
letter-spacing: 0;
}
body.picpac-paper .topbar-search {
background: var(--surface2);
border-color: var(--border);
}
body.picpac-paper .sidebar-toggle,
body.picpac-paper .btn-ghost {
background: #fff;
color: var(--text);
border-color: var(--border);
}
body.picpac-paper .sidebar-toggle:hover,
body.picpac-paper .btn-ghost:hover {
background: var(--surface3);
color: var(--text);
border-color: var(--border2);
}
body.picpac-paper .btn-primary {
background: var(--brand-yellow);
color: #11110f;
border: 1px solid #d6b600;
}
body.picpac-paper .btn-primary:hover {
background: var(--brand-yellow-hover);
filter: none;
}
body.picpac-paper .card,
body.picpac-paper .kanban-col,
body.picpac-paper .task-card,
body.picpac-paper .external-profile-card {
background: #fff;
border-color: var(--border);
box-shadow: none;
}
body.picpac-paper .card-header,
body.picpac-paper .modal-header,
body.picpac-paper .modal-footer {
border-color: var(--border);
}
body.picpac-paper .stat-card {
border-color: transparent;
box-shadow: none;
}
body.picpac-paper .stat-card::after {
display: none;
}
body.picpac-paper .stat-card.blue { background: var(--brand-blue); }
body.picpac-paper .stat-card.green { background: var(--brand-green); }
body.picpac-paper .stat-card.yellow { background: #fff0a3; }
body.picpac-paper .stat-card.red { background: var(--brand-pink); }
body.picpac-paper .stat-label,
body.picpac-paper .stat-change {
color: #3f3f39;
letter-spacing: 0;
}
body.picpac-paper .stat-value {
color: #11110f;
letter-spacing: 0;
}
body.picpac-paper th {
background: var(--surface2);
color: var(--text2);
letter-spacing: 0;
}
body.picpac-paper .kpi-sales-table thead th {
background: #11110f;
color: #fff;
}
body.picpac-paper tr:hover td {
background: #fff9d9;
}
body.picpac-paper .form-label {
color: var(--text2);
letter-spacing: 0;
}
body.picpac-paper .form-input,
body.picpac-paper .form-select,
body.picpac-paper .task-status-select {
background: var(--surface2);
border-color: var(--border);
color: var(--text);
}
body.picpac-paper .form-input:focus,
body.picpac-paper .form-select:focus,
body.picpac-paper .task-status-select:focus {
border-color: #11110f;
box-shadow: 0 0 0 3px rgba(255,220,46,0.55);
}
body.picpac-paper input[type="checkbox"],
body.picpac-paper input[type="radio"] {
accent-color: #11110f;
}
body.picpac-paper .modal {
border-radius: 8px;
border-color: var(--border);
}
body.picpac-paper .modal-close {
background: var(--surface2);
color: var(--text);
border-color: var(--border);
}
body.picpac-paper .tab {
letter-spacing: 0;
}
body.picpac-paper .tab.active {
color: #11110f;
border-bottom-color: var(--brand-yellow);
}
body.picpac-paper .deal-card {
background: var(--surface2);
}
body.picpac-paper .deal-card:hover {
background: #fff9d9;
border-color: #d6b600;
box-shadow: none;
}
body.picpac-paper .progress-fill {
background: var(--brand-yellow);
}
body.picpac-paper .notif-item.unread {
background: #fff9d9;
}
body.picpac-paper .notif-item.is-current-chat {
background: #ffef8a;
box-shadow: inset 3px 0 0 #11110f;
}
body.picpac-paper .notif-item.is-current-chat:hover {
background: #ffe45c;
}
body.picpac-paper .unread-dot {
background: #11110f;
}
body.picpac-paper .msg-bubble.in {
background: #fff;
}
body.picpac-paper .msg-bubble.out {
background: var(--brand-yellow);
color: #11110f;
}
body.picpac-paper .msg-bubble.out::before {
background: var(--brand-yellow);
}
body.picpac-paper .msg-bubble.out .msg-link,
body.picpac-paper .msg-bubble.out .msg-order-link {
color: #11110f;
}
body.picpac-paper .msg-bubble.out .msg-meta {
color: rgba(17,17,15,0.62);
}
body.picpac-paper .client-discount-item,
body.picpac-paper .external-profile-field {
background: var(--surface2);
}
body.picpac-paper ::selection {
background: var(--brand-yellow);
color: #11110f;
}
@media (max-width: 768px) {
body.picpac-paper .nav-item {
margin: 0;
border-radius: 0;
}
body.picpac-paper .nav-item.active {
background: transparent;
color: #11110f;
}
body.picpac-paper .nav-item.active .icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--brand-yellow);
display: flex;
align-items: center;
justify-content: center;
}
}
/* Экран входа использует ту же систему, его содержимое не меняется. */
body #loginModal.pxp-login {
font-family: 'Inter', system-ui, sans-serif;
background: #f2f2ef;
}
body #loginModal .pxp-filmno,
body #loginModal .pxp-grease,
body #loginModal .pxp-keep {
display: none;
}
body #loginModal .pxp-stage {
max-width: 410px;
}
body #loginModal .pxp-card {
background: #fff;
border: 1px solid #deded7;
border-radius: 8px;
box-shadow: 0 24px 72px rgba(17,17,15,0.16);
padding: 32px;
}
body #loginModal .pxp-card::before,
body #loginModal .pxp-card::after {
display: none;
}
body #loginModal .pxp-brand {
border-bottom: 1px solid #deded7;
}
body #loginModal .pxp-logo {
height: 42px;
filter: none;
border-radius: 50%;
}
body #loginModal .pxp-brandtag,
body #loginModal .pxp-label,
body #loginModal .pxp-foot {
font-family: 'Inter', system-ui, sans-serif;
color: #4f4f49;
letter-spacing: 0;
}
body #loginModal .pxp-brandtag {
color: #11110f;
}
body #loginModal .pxp-hello {
color: #11110f;
letter-spacing: 0;
}
body #loginModal .pxp-sub,
body #loginModal .pxp-check,
body #loginModal .pxp-link {
color: #4f4f49;
}
body #loginModal .pxp-input {
font-family: 'Inter', system-ui, sans-serif;
color: #11110f;
background: #f7f7f4;
border: 1px solid #deded7;
border-radius: 8px;
}
body #loginModal .pxp-input:focus {
border-color: #11110f;
box-shadow: 0 0 0 3px rgba(255,220,46,0.55);
}
body #loginModal .pxp-input.code {
font-family: 'JetBrains Mono', monospace;
}
body #loginModal .pxp-check input {
accent-color: #11110f;
}
body #loginModal .pxp-btn {
font-family: 'Inter', system-ui, sans-serif;
color: #11110f;
background: #ffdc2e;
border: 1px solid #d6b600;
border-radius: 8px;
box-shadow: none;
}
body #loginModal .pxp-btn:hover {
background: #f2cb00;
}
body #loginModal .pxp-btn:focus-visible {
outline: 3px solid rgba(255,220,46,0.55);
}
body #loginModal .pxp-btn.ghost {
background: #fff;
color: #11110f;
border-color: #deded7;
}
body #loginModal .pxp-btn.ghost:hover {
background: #ecece7;
}
body #loginModal .pxp-err,
body #loginModal .pxp-foot a {
color: #b4232d;
}
/* Jumbo: сообщение содержит ТОЛЬКО эмодзи (без текста) — большой размер как в TG.
Работает для всех 3 паков: для Twemoji через img.emoji, для native/noto через font-size. */
.msg-bubble.jumbo { background: transparent !important; border: none !important; box-shadow: none !important; padding: 4px 8px; }
.msg-bubble.jumbo::before { display: none; }
.msg-bubble.jumbo .msg-text-jumbo { font-size: 2.6em; line-height: 1.1; letter-spacing: 0; }
.msg-bubble.jumbo img.emoji { height: 2.4em; width: 2.4em; vertical-align: middle; margin: 0 .04em; }
.wz-inbound-filter {
margin-bottom: 14px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border);
}
.wz-inbound-filter-toggle {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
.wz-inbound-filter-toggle input,
.wz-inbound-channel input {
accent-color: var(--accent);
}
.wz-inbound-channel-list {
max-height: 260px;
margin-top: 8px;
overflow-y: auto;
border-top: 1px solid var(--border);
}
.wz-inbound-channel-list.is-disabled {
opacity: .58;
}
.wz-inbound-channel {
display: grid;
grid-template-columns: 18px minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 6px 2px;
border-bottom: 1px solid var(--border);
cursor: pointer;
}
.wz-inbound-channel-copy {
min-width: 0;
font-size: 12px;
}
.wz-inbound-channel-copy strong,
.wz-inbound-channel-copy span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wz-inbound-channel-copy span {
margin-top: 2px;
color: var(--text2);
}
.wz-inbound-channel-state {
color: var(--text3);
font-size: 11px;
}
.wz-inbound-channel-state.is-active {
color: var(--green);
}
.conversation-history {
margin-top: 16px;
border-top: 1px solid var(--border);
padding-top: 12px;
}
.conversation-history summary { cursor: pointer; font-weight: 600; }
.conversation-history-row {
padding: 12px 0;
border-bottom: 1px solid var(--border);
overflow-wrap: anywhere;
font-size: 13px;
line-height: 1.5;
}
.triage-audit-page {
width: min(1480px, 100%);
margin: 0 auto;
padding: 24px;
}
.triage-audit-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
}
.triage-audit-toolbar h2 {
margin: 0;
font-size: 20px;
letter-spacing: 0;
}
.triage-audit-actions {
display: flex;
align-items: center;
gap: 8px;
}
.triage-audit-actions .form-select { min-width: 180px; }
.triage-audit-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
margin-bottom: 16px;
}
.triage-audit-stat {
min-height: 70px;
padding: 12px 14px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 6px;
}
.triage-audit-stat span { color: var(--text3); font-size: 12px; }
.triage-audit-stat strong { color: var(--text); font-size: 22px; }
.triage-audit-table-wrap {
overflow: auto;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
}
.triage-audit-table {
width: 100%;
min-width: 1180px;
border-collapse: collapse;
table-layout: fixed;
}
.triage-audit-table th,
.triage-audit-table td {
padding: 10px 12px;
border-bottom: 1px solid var(--border);
text-align: left;
vertical-align: top;
}
.triage-audit-table th {
position: sticky;
top: 0;
z-index: 1;
background: var(--surface2);
color: var(--text3);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
}
.triage-audit-table th:nth-child(1) { width: 126px; }
.triage-audit-table th:nth-child(2) { width: 160px; }
.triage-audit-table th:nth-child(3),
.triage-audit-table th:nth-child(4) { width: 270px; }
.triage-audit-table th:nth-child(5) { width: 170px; }
.triage-audit-table th:nth-child(6) { width: 150px; }
.triage-audit-table th:nth-child(7) { width: 76px; }
.triage-audit-table tbody tr:last-child td { border-bottom: 0; }
.triage-audit-table tbody tr:hover { background: var(--surface2); }
.triage-audit-time { color: var(--text3); font-size: 12px; white-space: nowrap; }
.triage-audit-client strong,
.triage-audit-client span { display: block; overflow-wrap: anywhere; }
.triage-audit-client span { margin-top: 4px; color: var(--text3); font-size: 12px; }
.triage-audit-text {
max-height: 126px;
overflow: auto;
color: var(--text2);
font-size: 12px;
line-height: 1.45;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.triage-audit-topic-label {
color: var(--text);
font-size: 12px;
font-weight: 700;
overflow-wrap: anywhere;
}
.triage-audit-confidence {
margin-top: 5px;
color: var(--text3);
font-size: 12px;
font-variant-numeric: tabular-nums;
}
.triage-audit-result {
flex: 0 0 auto;
padding: 4px 7px;
border: 1px solid var(--border);
border-radius: 6px;
color: var(--text2);
font-size: 11px;
font-weight: 700;
}
.triage-audit-result.is-assign { border-color: color-mix(in srgb, var(--green) 45%, var(--border)); color: var(--green); }
.triage-audit-result.is-clarify { border-color: color-mix(in srgb, var(--orange) 45%, var(--border)); color: var(--orange); }
.triage-audit-result.is-error { border-color: color-mix(in srgb, var(--red) 45%, var(--border)); color: var(--red); }
.triage-audit-details {
max-height: 68px;
margin-top: 7px;
overflow: auto;
color: var(--text3);
font-size: 12px;
line-height: 1.45;
overflow-wrap: anywhere;
}
.triage-audit-open a { color: var(--accent); font-size: 12px; font-weight: 700; }
.triage-audit-empty {
padding: 28px 16px;
color: var(--text3);
text-align: center;
}
.triage-audit-empty.is-error { color: var(--red); }
.triage-audit-more { display: block; margin: 16px auto 0; }
@media (max-width: 760px) {
.triage-audit-page { padding: 14px; }
.triage-audit-toolbar { align-items: stretch; flex-direction: column; }
.triage-audit-actions { align-items: stretch; }
.triage-audit-actions .form-select { min-width: 0; flex: 1; }
.triage-audit-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}