: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);
}
/* ТЕМА PicPac · БУМАГА (тёплая светлая). Применяется классами body.light.picpac-paper —
берёт светлую базу (в т.ч. пузыри сообщений), а цвета переопределяет тёплой палитрой. */
html.picpac-paper,
body.picpac-paper {
--bg: #ece3d4;
--surface: #fbf6ec;
--surface2: #f3ece0;
--surface3: #ece2d2;
--border: #d8ccb8;
--border2: #c4b59a;
--text: #2c2823;
--text2: #6b6357;
--text3: #8f8574;
--accent: #c74a4f;
--accent2: #b06a5f;
--accent3: #c0304a;
--green: #3f7d54;
--yellow: #9a7000;
--orange: #c07a2b;
--red: #c23b40;
--overlay-bg: rgba(236,227,212,0.95);
--overlay-modal: rgba(0,0,0,0.35);
--shadow-sm: 0 2px 8px rgba(44,40,35,0.08);
--shadow-md: 0 4px 24px rgba(44,40,35,0.12);
--shadow-lg: 0 24px 80px rgba(44,40,35,0.22);
}
/* ТЕМА PicPac · ГРАФИТ (тёплая тёмная). Применяется классом 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);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
/* Фон холста берём и с . Инлайн-скрипт в вешает тему на до первой
отрисовки — если фон есть только на body, браузер успевает мигнуть белым/тёмным, пока
body не распарсился. С фоном на холст красится сразу правильным цветом. */
html { background: var(--bg); }
body {
font-family: 'Onest', 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 { 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-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; }
/* Утверждённый вензель PicPac в сайдбаре (развёрнутое меню). «PP»-квадрат остаётся для свёрнутого. */
.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-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); }
nav { flex: 1; padding: 10px 0; overflow-y: auto; }
nav::-webkit-scrollbar { width: 3px; }
nav::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }
.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;
}
.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;
}
.topbar-search input {
background: none; border: none; outline: none;
color: var(--text); font-size: 13px; font-family: inherit; width: 100%;
}
.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-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; }
/* Фильтр-чип «PP» — заказы с сайта picpac.by (внутри это email-канал).
Логотип занимает кнопку целиком: у чипа снимаем внутренние отступы, картинку
растягиваем на 100%. Иначе лого висело маленьким квадратом в центре. */
.channel-tag.pp { padding: 0 !important; overflow: hidden; border: 1px solid rgba(199,74,79,0.35); }
.pp-logo-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
/* Архив чатов — компактные фильтры (было 5 строк, стало 3).
Ключевое: у полей снят min-width:130px из разметки, поэтому дата+дата+оператор
умещаются в одну строку, а у чекбоксов каналов скрыты текстовые подписи —
остаются иконки, они и так узнаваемы (у label есть title с названием). */
#inboxArchiveFilters { gap: 5px !important; padding: 8px 12px !important; }
#inboxArchiveFilters input[type="date"],
#inboxArchiveFilters #archiveOperator { min-width: 0 !important; flex: 1 1 30% !important; }
/* Каналы архива — тот же приём: делят строку поровну, а не по фикс. ширине */
#archiveChannelFilter { gap: 4px !important; align-items: center; flex-wrap: nowrap !important; }
#archiveChannelFilter label {
flex: 1 1 0 !important; min-width: 0; justify-content: center;
font-size: 0; gap: 2px !important;
}
#archiveChannelFilter label > span { font-size: 12px; } /* иконка остаётся */
/* Подпись «Каналы:» на мобильном скрыта: она съедала ~55px, из-за чего шестой
чекбокс (Веб-чат) переносился на вторую строку. Смысл ряда и так понятен. */
#archiveChannelFilter > span:first-child { display: none; }
#archiveChannelFilter input[type="checkbox"] { margin: 0; }
/* 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); }
.deal-card {
background: var(--surface2); border: 1px solid var(--border);
border-radius: var(--radius2); padding: 12px; cursor: pointer; transition: all 0.15s;
}
.deal-card:hover { border-color: var(--accent); background: var(--surface3); transform: translateY(-1px); box-shadow: var(--shadow); }
.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); }
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-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);
display: flex; gap: 12px; cursor: pointer; transition: background 0.12s;
}
.notif-item:hover { background: var(--surface2); }
.notif-item.unread { background: rgba(79,124,255,0.04); }
.notif-icon { font-size: 20px; flex-shrink: 0; }
.notif-body { flex: 1; }
.notif-title { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.notif-desc { font-size: 12px; color: var(--text3); line-height: 1.4; }
.notif-time { font-size: 11px; color: var(--text3); flex-shrink: 0; margin-top: 2px; }
.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; }
.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; }
.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;
}
/* 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-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-btn {
font-size: 20px; cursor: pointer; padding: 4px; border-radius: 6px;
transition: background 0.12s; display: inline-block;
}
.emoji-btn:hover { background: var(--surface3); }
.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-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; }
/* :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-like { font-size:13px; line-height:1; cursor:default; } /* «класс» 👍 от клиента в веб-чате */
/* Дата-разделители */
.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 { 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; }
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; }
.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; }
/* поле ввода прилипает к низу экрана */
.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)); }
/* отступы экономнее */
.card { padding: 12px; }
.card-header { padding: 10px 12px; }
/* Шапка карточки переносится. Во «Входящих» в одной строке стояли заголовок
«Сообщения» + кнопка «+» + 6 значков мессенджеров по 44px (тач-таргет):
466px против 366px доступных на iPhone — значки не помещались и обрезались.
Теперь заголовок в первой строке, управление — во второй. */
.card-header { flex-wrap: wrap; row-gap: 8px; }
/* Ряд «+ и значки мессенджеров» (Входящие и Архив чатов) — лента .u-strip.
Внутри шапки места мало: ширина карточки 369px минус паддинги .card и
.card-header = 321px, а 6 элементов по 44px с гэпами 8px в это упирались —
последний значок обрезался. Поджимаем гэп и размер значков: получается
~285px с запасом ~36px, лента помещается целиком и листать не нужно. */
/* Шапка карточки: у .card-header стоит justify-content:space-between — на десктопе
это разводит заголовок и кнопки по краям, но после переноса на вторую строку
ряд кнопок уезжал вправо. На мобильном прижимаем всё влево. */
.card-header { justify-content: flex-start; }
/* Ряд «+ и каналы» ПЕРЕНОСИТСЯ, а не режется и не скроллится.
Подгонять размер под ширину экрана бессмысленно: 6 каналов давали ровно
320px при 321 доступных, а стоит включить ещё один (WhatsApp) — снова обрез.
С переносом лишние кнопки уходят на вторую строку при любом их числе. */
/* Ряд «+ и каналы» ВСЕГДА в одну строку — размер не фиксируем, а делим ширину.
Фиксированные 38px не работали: любая мелочь (рамка, паддинг, лишний канал)
выталкивала последнюю кнопку. Теперь flex:1 1 0 — семь кнопок делят строку
поровну и физически не могут в неё не влезть, сколько бы их ни стало. */
.card-header .u-strip {
gap: 5px; width: 100%; justify-content: flex-start;
flex-wrap: nowrap !important; overflow: visible !important;
}
.card-header .u-strip .channel-tag-icon {
flex: 1 1 0 !important; min-width: 0 !important; width: auto !important;
aspect-ratio: 1 / 1; height: auto; max-width: 48px;
}
/* «+» приводим к размеру чипов: с 44px ряд не помещался в строку.
Правило тач-таргета 44px здесь перебиваем осознанно — кнопки стоят в ряд
и промахнуться сложно, зато всё видно без переносов и обрезки. */
/* «+» — такой же участник дележа ширины, как и чипы каналов */
.card-header .u-strip > .btn-icon {
flex: 1 1 0 !important; min-width: 0 !important; width: auto !important;
min-height: 0 !important; aspect-ratio: 1 / 1; height: auto; max-width: 48px;
padding: 0 !important;
}
/* display:contents растворяет контейнер #inboxFilters — его чипы становятся
прямыми детьми .u-strip. Без этого «+» и блок чипов были ДВУМЯ flex-элементами,
и при нехватке места весь блок чипов переносился на вторую строку целиком.
Теперь в ряду 7 равноправных элементов, они и выстраиваются в одну строку. */
.card-header .u-strip #inboxFilters { display: contents; }
/* Заголовочный ряд страницы: «Название раздела … [Обновлено —] [Обновить]».
Ряд 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; }
/* Канбан задач. Колонки свёрстаны ИНЛАЙНОМ (min-width:280px), поэтому правила для
класса .kanban-col до них не долетают — целимся по id-префиксу.
4 колонки × 280px = 1162px: на телефоне было видно одну с обрезком, до «Готова»
три экрана вбок. Делаем колонку почти во всю ширину + прилипание при свайпе. */
[id^="kanbanCol-"] { min-width: 82vw !important; width: 82vw !important; scroll-snap-align: start; }
#page-tasks > div[style*="overflow-x:auto"] { scroll-snap-type: x proximity; }
/* Панель инструментов «Задачи»: вкладки + поиск + переключатель доски + кнопка
≈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 { gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
#inboxChatHeader::-webkit-scrollbar { display: none; }
#inboxChatHeader .act-label { display: none; }
#inboxChatHeader .btn { white-space: nowrap; flex: 0 0 auto; padding: 8px 9px; margin-left: 4px !important; }
#inboxChatHeader .card-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 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; }
/* Компенсация выреза/статус-бара для ШИРОКИХ экранов (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; }
body.is-offline .topbar { box-shadow: inset 0 -3px 0 var(--orange); }
/* 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; }
/* Базовый layout композера: 4 кнопки + textarea + Отправить в одну строку
с переносом на узких. Кнопки не сжимаются, textarea растёт и сжимается. */
.inbox-composer {
display: flex; align-items: center; gap: 6px;
padding: 8px 12px; border-top: 1px solid var(--border);
flex-wrap: wrap;
}
.inbox-composer > button, .inbox-composer > input[type="file"] { flex-shrink: 0; }
.inbox-composer > textarea { flex: 1 1 200px; min-width: 0; }
.inbox-composer .send-btn { flex-shrink: 0; min-width: 92px; }
@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; }
/* 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; }