/* Светлая тёплая палитра: белые карточки на песочном фоне, фиолетовый акцент.
   Тёмная тема читалась как «сделано нейросетью» и на длинных таблицах
   утомляла — цифры на белом разбирать проще. */
:root {
  /* Палитра ElevenLabs: страница белая, сайдбар чуть серее, цвет только
     на данных. Фиолетовый остаётся, но как цвет ИИ, а не интерфейса. */
  --bg:#FFFFFF; --bg-side:#FAFAF9; --surface:#FFFFFF; --surface-warm:#F5F3F1;
  --sand:#EBE8E4; --fill-subtle:#F5F3F1;
  --text-strong:#0F0F10; --text-primary:#1C1A17; --text-muted:rgba(0,0,0,.53);
  --text-quiet:#A59F97;
  --border:rgba(0,0,0,.1); --border-soft:rgba(0,0,0,.075); --border-strong:rgba(0,0,0,.14);
  /* Основное действие чёрное; кольцо вместо рамки с тенью у карточек. */
  --brand:#0F0F10; --brand-hover:#2A2724; --brand-tint:rgba(0,0,0,.05);
  --ai-tint:rgba(139,124,255,.13);
  --brand-tint-soft:rgba(0,0,0,.03); --brand-ink:#0F0F10;
  --ring:0 0 0 .5px rgba(0,0,0,.125), 0 1px 1px rgba(0,0,0,.04), 0 2px 4px rgba(0,0,0,.04);
  /* Фиолетовый — только ИИ: метки ИИшки, её ответы, «Спроси ИИшку». */
  --ai:#675DFF; --ai-tint:#F3F2FF;
  --success:#1FA34A; --success-ink:#157A37; --success-tint:#E7F7EC;
  --error:#D92D3F; --error-ink:#B81F30; --error-tint:#FDECEE;
  --warning:#E58A00; --warning-ink:#8A5300; --warning-tint:#FFF3E0;
  --blue:#152A9A; --blue-tint:#ECEFFF;
  --marker:#0F0F10;
  /* Палитра данных: цвет живёт в этапах, а не в кнопках и меню. */
  --st-new:#BFD4FF; --st-qual:#8FB3FF; --st-offer:#5E8BF2; --st-decision:#2F5FD8; --st-later:#F2B347; --st-won:#22A06B; --st-lost:#F0616D; --st-dup:#D9D4CD; --st-other:#D9D4CD; --st-r_new:#BFD4FF; --st-r_work:#8FB3FF; --st-r_conf:#5E8BF2; --st-r_docs:#2F5FD8; --st-r_done:#22A06B; --st-r_cancel:#F0616D; --st-r_back:#F0616D;
  --radius:10px; --radius-card:16px; --radius-sm:8px; --radius-pill:9999px;
  --shadow:none; --shadow-pop:0 24px 48px -12px rgba(0,0,0,.12);
  /* Фон закреплённых полос — нижней панели на телефоне. Отдельный токен,
     а не --surface: полоса полупрозрачная и размывает то, что под ней. */
  --bar:rgba(255,255,255,.95);
  /* Затемнение под листами и окнами. */
  --scrim:rgba(17,17,17,.22);
  color-scheme: light;
}
/* Тёмная тема — нейтральный графит, без фиолетового оттенка. */
:root[data-theme="dark"] {
  --bg:#0B0B0B; --bg-side:#101010; --surface:#161616; --surface-warm:#1C1C1C;
  --sand:#242424; --fill-subtle:#1C1C1C;
  --text-strong:#F7F7F7; --text-primary:#E4E2E0; --text-muted:rgba(255,255,255,.56);
  --text-quiet:#8A8681;
  --border:rgba(255,255,255,.1); --border-soft:rgba(255,255,255,.07);
  --border-strong:rgba(255,255,255,.16);
  --brand:#F7F7F7; --brand-hover:#E0E0E0; --brand-tint:rgba(255,255,255,.08);
  --ai-tint:rgba(160,146,255,.22);
  --brand-tint-soft:rgba(255,255,255,.04); --brand-ink:#F7F7F7;
  --ring:0 0 0 .5px rgba(255,255,255,.1), 0 1px 2px rgba(0,0,0,.4);
  --ai:#8E86FF; --ai-tint:#1E1B3A;
  --success:#4ADE80; --success-ink:#4ADE80; --success-tint:#16301F;
  --error:#FF7A85; --error-ink:#FF7A85; --error-tint:#3A1A20;
  --warning:#FBBF5B; --warning-ink:#FBBF5B; --warning-tint:#3A2A12;
  --blue:#9BB0FF; --blue-tint:#1C2448;
  --marker:#F7F7F7;
  --st-new:#3A5A99; --st-qual:#4D74C7; --st-offer:#6A93F5; --st-decision:#8DAEFF; --st-later:#E0A23A; --st-won:#4ACB8E; --st-lost:#FF7A85; --st-dup:#3A3836; --st-other:#3A3836; --st-r_new:#3A5A99; --st-r_work:#4D74C7; --st-r_conf:#6A93F5; --st-r_docs:#8DAEFF; --st-r_done:#4ACB8E; --st-r_cancel:#FF7A85; --st-r_back:#FF7A85;
  --shadow-pop:0 24px 48px -12px rgba(0,0,0,.6);
  --bar:rgba(11,11,11,.92);
  --scrim:rgba(0,0,0,.55);
  color-scheme: dark;
}
* { box-sizing:border-box; }
.mono, .num-mono { font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric:tabular-nums; }
html, body { margin:0; }
body { background:var(--bg); color:var(--text-primary);
  /* Inter 300-500, как у ElevenLabs: кириллица есть, жирных начертаний нет
     намеренно — вес 700 и 800 давал «громкий» интерфейс. */
  font:14px/20px Inter, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button, input, textarea, select { font:inherit; color:inherit; }
h1, h2, h3 { margin:0; color:var(--text-strong); }
h1 { font-size:24px; line-height:30px; font-weight:500; letter-spacing:-.015em; }
h2 { font-size:16px; line-height:22px; font-weight:500; margin:28px 0 12px; }
h3 { font-size:15px; line-height:20px; font-weight:500; margin:0 0 10px; }
p { margin:0; }
.sub { color:var(--text-muted); font-size:13px; line-height:18px; margin:5px 0 0; }
.muted { color:var(--text-muted); }
/* Кнопки, которые существуют только на телефоне: на большом экране их
   роль выполняет сама раскладка. */
.only-phone { display:none; }
.no-phone { display:inline-flex; }
/* Селектор длиннее нарочно: .icon-btn объявлен ниже и задаёт display,
   поэтому «только на телефоне» ему проигрывало — лупа висела в шапке
   рядом с полем поиска на любом экране. */
.icon-btn.only-phone { display:none; }
/* Полоса «данные встали» — под шапкой, во всю ширину: это не ошибка
   одной страницы, а состояние всех чисел на ней. */
.stale-strip { display:flex; align-items:center; gap:9px; padding:8px 22px;
  background:var(--warning-tint); color:var(--warning-ink); font-size:12.5px;
  border-bottom:.5px solid var(--border-soft); }
.stale-strip svg { width:15px; height:15px; flex:none; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; }
.stale-strip span { min-width:0; }
.stale-strip a { margin-left:auto; flex:none; color:var(--warning-ink); text-decoration:underline; }
/* «Войти как»: админ смотрит глазами сотрудника. Полоса не дает забыть,
   чьими руками сейчас делается каждое действие. */
.as-strip { position:sticky; top:0; z-index:60; display:flex; align-items:center; gap:10px;
  padding:8px 22px; background:var(--brand); color:var(--bg); font-size:13px; }
.as-strip b { font-weight:600; }
.as-strip a { margin-left:auto; flex:none; color:var(--bg); text-decoration:underline; white-space:nowrap; }

.err { color:var(--error); font-size:13px; background:var(--error-tint);
  border-radius:var(--radius); padding:10px 12px; }

/* Клавиатурный фокус: рамка браузера по умолчанию теряется на цветных
   подложках, а своей не было вовсе. */
:focus-visible { outline:2px solid var(--brand); outline-offset:2px; border-radius:4px; }
/* Поля рисуют фокус сами — рамкой и кольцом, без системного контура. */
input:focus, textarea:focus, select:focus { outline:none; }

/* Кому движение мешает — тому его не показываем. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* Микродетали: 150ms на hover, 200ms на всплывающее, без отскоков. */
a, button, .btn, input, select, textarea, .chat-item, .tmini-row, .sl-row, td, .views a {
  transition:background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out;
}
details > .ws-menu, details > .me-menu, details > .notif-panel, details > .filter-panel {
  animation:pop .2s ease-out;
}
@keyframes pop { from { opacity:0; transform:translateY(-4px); } }

/* Тултип на любой иконке: чёрный, 12px, с задержкой. */
[data-tip] { position:relative; }
[data-tip]::after { content:attr(data-tip); position:absolute; bottom:calc(100% + 6px); left:50%;
  transform:translateX(-50%); background:var(--text-strong); color:var(--bg); font-size:12px;
  line-height:16px; padding:4px 8px; border-radius:6px; white-space:nowrap; opacity:0;
  pointer-events:none; transition:opacity .15s ease-out .3s; z-index:200; }
[data-tip]:hover::after { opacity:1; }

/* Скелетоны вместо «Загрузка…». */
.sk { background:linear-gradient(90deg, var(--fill-subtle), var(--sand), var(--fill-subtle));
  background-size:200% 100%; animation:sk 1.2s infinite; border-radius:var(--radius-sm);
  height:12px; }
@keyframes sk { to { background-position:-200% 0; } }

/* Тост снизу по центру, сам закрывается. */
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:var(--text-strong); color:var(--bg); font-size:13.5px; padding:9px 16px;
  border-radius:var(--radius-pill); box-shadow:var(--shadow-pop); z-index:300;
  animation:pop .2s ease-out; }
/* На телефоне — сверху: внизу поле ввода и пальцы, тост их закрывал. */
@media (max-width:860px) {
  .toast { bottom:auto; top:calc(12px + env(safe-area-inset-top)); max-width:calc(100vw - 32px); text-align:center; }
}

/* ── Каркас: сайдбар на всю высоту, тонкая шапка над контентом ───────── */
.app { display:grid; grid-template-columns:240px minmax(0,1fr); min-height:100vh; }
.sidebar { background:var(--bg-side); border-right:1px solid var(--border-soft);
  display:flex; flex-direction:column; padding:14px 12px 12px; position:sticky; top:0;
  height:100vh; overflow-y:auto; scrollbar-width:none; }
.sidebar::-webkit-scrollbar { display:none; }

/* Логотип и аккаунт — одной кнопкой наверху сайдбара, как переключатель
   рабочего пространства. Плашка в шапке для этого не нужна. */
.ws { position:relative; margin-bottom:14px; }
.ws > summary { list-style:none; display:flex; align-items:center; gap:9px; height:44px;
  padding:0 8px; border-radius:var(--radius); cursor:pointer; }
.ws > summary::-webkit-details-marker { display:none; }
.ws > summary:hover { background:var(--brand-tint); }
.ws-mark { width:26px; height:26px; border-radius:7px; flex:none; object-fit:contain;
  background:var(--ai-tint); }
.ws-text { min-width:0; flex:1; }
.ws-name { font-size:13.5px; font-weight:500; color:var(--text-strong); line-height:16px; }
.ws-acct { font-size:12px; color:var(--text-muted); line-height:15px; }
.ws-chev { color:var(--text-quiet); flex:none; }
.ws-menu { position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:60;
  background:var(--surface); border-radius:var(--radius-card); box-shadow:var(--shadow-pop);
  padding:6px; }
.ws-menu a { display:block; padding:9px 11px; border-radius:var(--radius-sm);
  color:var(--text-muted); font-size:13px; }
.ws-menu a:hover { background:var(--fill-subtle); color:var(--text-strong); }

.sidebar nav { display:flex; flex-direction:column; gap:1px; }
.navgroup { font-size:13px; color:var(--text-muted); padding:0 8px; margin:16px 0 4px; }
.sidebar nav a { display:flex; align-items:center; gap:10px; height:32px; padding:0 8px;
  border-radius:var(--radius-sm); color:var(--text-primary); font-weight:400; font-size:14px;
  transition:background .15s ease-out; }
.sidebar nav a svg { width:16px; height:16px; flex:none; fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; color:var(--text-muted); }
.sidebar nav a:hover { background:rgba(0,0,0,.04); }
:root[data-theme="dark"] .sidebar nav a:hover { background:rgba(255,255,255,.05); }
/* Активный пункт — нейтральная подложка, а не цветная плашка. */
.sidebar nav a.active { background:var(--brand-tint); color:var(--text-strong); font-weight:500; }
.sidebar nav a.active svg { color:var(--text-strong); }
/* Цветной значок у ИИ-аналитика: единственное место, где на цифры
   отвечают словами, и его не находили среди восьми пунктов подряд. */
.sidebar nav a.accent svg { color:var(--ai); }
.sidebar nav a.accent.active { background:var(--ai-tint); }
/* Значок вопроса у показателя: откуда взялось число. Серый и мелкий —
   он для того, кто засомневался, а не для всех подряд. Текст
   раскрывается под карточкой: подсказка по наведению на телефоне не
   показывается вовсе, а объяснение цифры нужно и там. */
/* Значком, а не буквой «?»: буква в кружке садится по базовой линии и
   выглядит сдвинутой вниз-вправо, сколько её ни центрируй. */
.kpi-q { display:inline-grid; place-items:center; width:15px; height:15px; margin-left:4px;
  color:var(--text-quiet); vertical-align:-2px; cursor:help; }
.kpi-q svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; }
.kpi-q:hover { color:var(--text-strong); }
/* Объяснение показателя — фразой в несколько строк, а не одной длинной
   строкой с многоточием: в обычной подсказке текст не переносится. */
.kpi-q[data-hint]::after { white-space:normal; width:max-content; max-width:min(240px, 80vw); text-overflow:clip;
  text-wrap:balance; font-style:normal; font-size:12px; line-height:1.4; padding:7px 10px; }
.kpi-d[data-hint] { cursor:help; }
.sidebar nav a .count { margin-left:auto; font-size:12px; color:var(--text-quiet);
  font-variant-numeric:tabular-nums; }

.navfoot { margin-top:auto; padding:10px 8px 0; display:flex; flex-direction:column; gap:2px;
  border-top:1px solid var(--border-soft); }
.navfoot a { color:var(--text-quiet); font-size:12.5px; line-height:24px; }
.navfoot a:hover { color:var(--text-muted); }
.navpromo { margin-top:auto; padding:0 4px 10px; }
.np { position:relative; display:flex; align-items:center; gap:9px; padding:10px 22px 10px 9px; border-radius:12px;
  background:color-mix(in srgb, var(--ai) 9%, var(--surface)); box-shadow:var(--ring); color:var(--text-primary); }
.np[hidden] { display:none; }
.np:hover { background:color-mix(in srgb, var(--ai) 14%, var(--surface)); }
.np-ic { width:30px; height:30px; flex:none; border-radius:9px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--ai) 18%, transparent); color:var(--ai); }
.np-ic svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.np-t { display:flex; flex-direction:column; gap:1px; min-width:0; }
.np-t b { font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.np-t small { font-size:11.5px; color:var(--text-muted); line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.np-x { all:unset; position:absolute; top:6px; right:8px; cursor:pointer; color:var(--text-quiet); font-size:16px; line-height:1; padding:2px; }
.np-x:hover { color:var(--text-strong); }
.sidebar nav.navbottom { margin-top:0; padding-top:10px; border-top:1px solid var(--border-soft); }
.upd-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--error); margin-left:6px; vertical-align:middle; }
.upd-dot[hidden] { display:none; }

/* Шапка только над содержимым: хлебные крошки, поиск, тихие действия. */
.topbar { position:sticky; top:0; z-index:50; height:48px; background:var(--bg);
  border-bottom:.5px solid var(--border); }
.topbar-inner { display:flex; align-items:center; gap:14px; height:48px; padding:0 20px; }
.crumbs { display:flex; align-items:center; gap:6px; color:var(--text-muted); font-size:13.5px;
  min-width:0; }
.crumbs b { color:var(--text-strong); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.crumbs a { white-space:nowrap; }
.crumbs a { color:var(--text-muted); }
.crumbs a:hover { color:var(--text-strong); }
.crumbs i { color:var(--text-quiet); font-style:normal; }
.topsearch { position:relative; flex:0 1 420px; margin:0 auto; min-width:0; }
.topsearch input { width:100%; height:32px; padding:0 58px 0 32px; border-radius:var(--radius-pill);
  border:1px solid transparent; background:var(--fill-subtle); font-size:13px; }
.topsearch input:focus { border-color:var(--text-strong); background:var(--surface); }
.topsearch svg { position:absolute; left:11px; top:50%; transform:translateY(-50%);
  width:14px; height:14px; fill:none; stroke:var(--text-quiet); stroke-width:2; }
.topsearch kbd { position:absolute; right:8px; top:50%; transform:translateY(-50%);
  font-family:"JetBrains Mono", ui-monospace, monospace; font-size:11px; color:var(--text-quiet);
  background:var(--surface); border:1px solid var(--border-soft); border-radius:5px;
  padding:1px 5px; pointer-events:none; }
.top-actions { display:flex; align-items:center; gap:2px; flex:none; }
.icon-btn { width:32px; height:32px; border:0; background:none; border-radius:var(--radius-sm);
  display:inline-flex; align-items:center; justify-content:center; color:var(--text-muted);
  position:relative; cursor:pointer; padding:0; }
.icon-btn:hover { background:var(--fill-subtle); color:var(--text-strong); }
.icon-btn svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round; }
.icon-btn .dot { position:absolute; top:5px; right:5px; width:6px; height:6px; border-radius:50%;
  background:var(--error); }
.notif { position:relative; }
.notif > summary { list-style:none; }
.notif > summary::-webkit-details-marker { display:none; }
.notif-panel { position:absolute; top:calc(100% + 6px); right:0; width:340px; max-height:60vh;
  overflow-y:auto; background:var(--surface); border-radius:var(--radius-card);
  box-shadow:var(--shadow-pop); padding:6px; z-index:110; }
.notif-panel a { display:block; padding:9px 11px; border-radius:var(--radius-sm); }
.notif-panel a:hover { background:var(--fill-subtle); }
.notif-panel .n { color:var(--text-strong); font-weight:500; font-size:13px; }
.notif-panel .m { color:var(--text-muted); font-size:12.5px; margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.notif-head { padding:8px 11px; font-size:13px; color:var(--text-muted); }
.me { position:relative; }
.me .avatar { width:26px; height:26px; border-radius:50%; background:var(--fill-subtle);
  color:var(--text-strong); display:grid; place-items:center; font-weight:500; font-size:12px;
  flex:none; }
.tab-ava img, .me .avatar img { width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
.me .avatar, .tab-ava { overflow:hidden; }
.userchip { display:flex; align-items:center; height:32px; padding:0 3px; border-radius:var(--radius-sm);
  cursor:pointer; list-style:none; }
.userchip::-webkit-details-marker { display:none; }
.userchip:hover { background:var(--fill-subtle); }
.me-menu { position:absolute; top:calc(100% + 6px); right:0; min-width:220px;
  background:var(--surface); border-radius:var(--radius-card); padding:6px;
  box-shadow:var(--shadow-pop); display:flex; flex-direction:column; z-index:110; }
.me-menu a { padding:9px 11px; border-radius:var(--radius-sm); color:var(--text-muted);
  font-size:13px; }
.me-menu a:hover { background:var(--fill-subtle); color:var(--text-strong); }
.me-menu a:not(.me-head) { display:flex; align-items:center; gap:10px; }
.me-menu a svg { width:17px; height:17px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; }
.me-menu a.me-out { color:var(--error); margin-top:4px; border-top:1px solid var(--border-soft);
  border-radius:0 0 var(--radius-sm) var(--radius-sm); padding-top:11px; }
.me-menu a.me-out:hover { background:var(--error-tint); color:var(--error-ink); }
.icon-btn.on { background:var(--fill-subtle); color:var(--text-strong); }
.me-head { padding:9px 11px 10px; border-bottom:1px solid var(--border-soft); margin-bottom:4px; }
.me-head .n { color:var(--text-strong); font-size:13.5px; font-weight:500; }
.me-head .r { color:var(--text-muted); font-size:12.5px; }

.content { padding:24px 20px 56px; max-width:1240px; }
.content.wide { max-width:none; }
.page-head { display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; margin-bottom:18px; flex-wrap:wrap; }

/* Подменю разделов — табы под заголовком, а не колонка справа.
   Прилипают под шапкой: в аналитике страницы длинные, и чтобы уйти на
   соседнюю вкладку, приходилось листать до самого верха. Фон непрозрачный
   и края растянуты на отступы содержимого, иначе под полосой просвечивает
   уезжающий текст. */
.subtabs { display:flex; gap:2px; border-bottom:1px solid var(--border-soft); margin-bottom:18px;
  overflow-x:auto; scrollbar-width:none;
  position:sticky; top:48px; z-index:40; background:var(--bg);
  margin-left:-20px; margin-right:-20px; padding:0 20px; }
.subtabs::-webkit-scrollbar { display:none; }
.subtabs a { padding:0 2px 10px; margin-right:18px; color:var(--text-muted); font-size:13.5px;
  white-space:nowrap; border-bottom:1.5px solid transparent; margin-bottom:-1px; }
.subtabs a:hover { color:var(--text-strong); }
.subtabs a.active { color:var(--text-strong); border-bottom-color:var(--text-strong); }
/* Настройки: подменю колонкой слева, содержимое — одной колонкой 720px. */
.setpage { display:grid; grid-template-columns:184px minmax(0,1fr); gap:32px;
  align-items:start; }
/* Прилипает под шапкой, а не под верхним краем окна: шапка высотой 48px
   и сама липкая, поэтому при top:12px подменю уезжало ей за спину —
   первый пункт срезало. Своя прокрутка на случай, когда пунктов больше,
   чем помещается в экран. */
.setnav { display:flex; flex-direction:column; gap:1px; position:sticky; top:60px;
  max-height:calc(100vh - 76px); overflow-y:auto; scrollbar-width:none; }
.setnav::-webkit-scrollbar { display:none; }
.setnav a { padding:7px 10px; border-radius:var(--radius-sm); color:var(--text-muted);
  font-size:13.5px; }
.setnav a:hover { background:var(--fill-subtle); color:var(--text-primary); }
.setnav a.active { background:var(--fill-subtle); color:var(--text-strong); }
.setnav a { display:flex; align-items:center; gap:9px; }
.setnav a svg { width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; opacity:.85; }
.setnav-group { padding:14px 10px 4px; font-size:11.5px; color:var(--text-quiet); letter-spacing:.02em; }
.setnav-group:first-child { padding-top:2px; }
.setbody { max-width:720px; min-width:0; }
.setbody .cards, .setbody .grid2 { grid-template-columns:1fr; }
/* Страницы с таблицами в 720px уезжали в горизонтальный скролл: колонок
   там шесть, и роль обрезалась на «Администратор». Им даём 960px. */
.setbody.wide { max-width:960px; }
@media (max-width:860px) { .setpage { grid-template-columns:1fr; gap:14px; }
  .setnav { flex-direction:row; flex-wrap:wrap; position:static; }
  .setnav-group { flex-basis:100%; padding:8px 10px 2px; } }

/* ── Примитивы ───────────────────────────────────────────────────────── */
/* Карточка на кольце 0.5px, а не рамка плюс тень: так легче и ближе к
   ElevenLabs, где граница почти не видна. */
.card { background:var(--surface); border:0; border-radius:var(--radius-card);
  box-shadow:var(--ring); padding:16px; }
/* Две карточки подряд или карточка и таблица срастались краями в один
   блок, разрезанный пополам: у формы «добавить» снизу прямой край, у
   таблицы сверху такой же. Между блоками всегда есть воздух. */
.card + .card, .card + .table-wrap, .table-wrap + .card,
.table-wrap + .table-wrap, .card + .pgrid, .table-wrap + .pgrid { margin-top:14px; }
button, .btn { display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:36px; padding:0 14px; border-radius:var(--radius); border:1px solid transparent;
  font-size:13.5px; font-weight:500; cursor:pointer; white-space:nowrap;
  background:var(--brand); color:var(--bg); transition:background .15s ease-out; }
button:hover, .btn:hover { background:var(--brand-hover); }
.btn.ghost, button.ghost { background:var(--surface); color:var(--text-strong);
  border-color:var(--border); }
.btn.ghost:hover, button.ghost:hover { background:var(--fill-subtle); }
/* Текстовая кнопка: действие без веса, для «Скрыть», «Отвязать». */
.btn.text, button.text { background:none; color:var(--text-muted); padding:0 4px; height:auto; }
.btn.text:hover, button.text:hover { background:none; color:var(--text-strong); }
input, textarea, select { background:var(--surface); color:var(--text-primary);
  border:1px solid var(--border); border-radius:var(--radius);
  padding:9px 12px; outline:none;
  transition:border-color .15s ease-out, box-shadow .15s ease-out; }
/* Фокус — тонкая чёрная рамка и мягкое кольцо вокруг. Раньше поверх рамки
   ложился ещё и системный outline, и получалась двойная толстая рамка. */
input:focus, textarea:focus, select:focus { border-color:var(--text-strong);
  box-shadow:0 0 0 3px rgba(0,0,0,.06); }
:root[data-theme="dark"] input:focus, :root[data-theme="dark"] textarea:focus,
:root[data-theme="dark"] select:focus { box-shadow:0 0 0 3px rgba(255,255,255,.08); }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline:none; }
input::placeholder, textarea::placeholder { color:var(--text-quiet); }
textarea { width:100%; resize:vertical; line-height:20px; }
.field { display:flex; flex-direction:column; gap:5px; min-width:0; }
/* Строка добавления: поля и кнопка в ряд, на узком экране — в столбик. */
.addrow { display:grid; grid-template-columns:1fr 1fr auto; gap:12px; align-items:end; }
@media (max-width:860px) { .addrow { grid-template-columns:1fr; } }
.field label { font-size:12px; font-weight:500; color:var(--text-muted); }

/* Статус — точка и текст, без заливки: цветная плашка на каждой строке
   красит интерфейс там, где решения не принимают. */
.pill { display:inline-flex; align-items:center; gap:6px; font-size:13px; line-height:18px;
  color:var(--text-primary); white-space:nowrap; }
.pill::before { content:""; width:6px; height:6px; border-radius:50%; flex:none;
  background:var(--text-quiet); }
.pill.ok::before { background:var(--success); }
.pill.warn::before { background:var(--warning); }
.pill.bad::before { background:var(--error); }
.pill.muted::before { background:var(--text-quiet); }
.pill.brand::before { background:#8B7CFF; }
/* Там, где плашка действительно нужна заливкой — счётчик или ярлык. */
.chipcount { display:inline-flex; align-items:center; min-height:20px; padding:1px 7px;
  border-radius:var(--radius-pill); background:var(--fill-subtle); color:var(--text-muted);
  font-size:12px; font-variant-numeric:tabular-nums; }
.tag { display:inline-flex; align-items:center; gap:5px; min-height:22px; padding:2px 9px;
  border-radius:var(--radius-sm); background:var(--fill-subtle); color:var(--text-muted);
  font-size:12.5px; }
.tag .dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
.tag.waba { background:var(--fill-subtle); color:var(--text-muted); }
.tag.wa { background:var(--fill-subtle); color:var(--text-muted); }
.tag.src { background:var(--fill-subtle); color:var(--text-muted); }
.tag.ai { background:var(--ai-tint); color:#5B50E0; }
.tag.man { background:var(--fill-subtle); color:var(--text-muted); }
/* Единственное фиолетовое в интерфейсе — там, где работает ИИшка. */
.ai-mark { display:inline-grid; place-items:center; width:16px; height:16px; border-radius:50%;
  font-size:0; background:radial-gradient(circle at 32% 28%, #C9C2FF 0%, #8B7CFF 38%, #C084FC 68%, #7DD3FC 100%); }
.ai-mark.qual { background:radial-gradient(circle at 32% 28%, #9FE8C3 0%, #34C98A 40%, #22A06B 100%); }
/* Сегмент-контрол: трек песочный, активный — белая таблетка. */
.range { display:inline-flex; gap:2px; padding:3px; background:var(--sand);
  border-radius:var(--radius); flex-wrap:wrap; }
.range a { height:28px; padding:0 12px; border-radius:var(--radius-sm); display:inline-flex;
  align-items:center; font-size:13px; color:var(--text-muted); }
.range a.active { background:var(--surface); color:var(--text-strong); box-shadow:var(--ring); }
.empty { text-align:center; padding:36px 16px; color:var(--text-muted); }
.loading { color:var(--text-muted); padding:16px; text-align:center; }
.bar { height:6px; border-radius:9999px; background:var(--fill-subtle); overflow:hidden; margin-top:5px; }
.bar i { display:block; height:100%; border-radius:9999px; background:var(--brand); }
.callout { margin-top:14px; padding:11px 14px; border-radius:var(--radius);
  background:var(--brand-tint-soft); color:var(--text-primary); font-size:13.5px;
  border-left:3px solid var(--brand); }
.cols-2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px;
  align-items:start; }

/* ── Баннер страницы ─────────────────────────────────────────────────── */
/* Сплошное фиолетовое пятно на каждой странице обесценивало акцент:
   когда фиолетовым залито всё, им уже ничего не выделишь. Баннер стал
   глубоким и тёмным, фиолетовый горит только в углу. */
/* Баннер с градиентом и точечной сеткой убран: он занимал треть экрана на
   каждой странице и красил интерфейс там, где цвет ничего не значит.
   Осталась обычная шапка — заголовок, подпись и факты строкой. */
.banner { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px;
  align-items:start; margin-bottom:20px; padding:0; background:none; color:inherit; }
.banner-text { min-width:0; }
.banner .eyebrow { font-size:13px; color:var(--text-muted); margin-bottom:4px; }
.banner .eyebrow a { color:var(--text-strong); }
.banner h1 { color:var(--text-strong); font-size:24px; line-height:30px; font-weight:500;
  letter-spacing:-.015em; }
.banner p { margin-top:6px; font-size:13.5px; line-height:19px; color:var(--text-muted);
  max-width:620px; }
/* Факты строкой через разделители, а не плашками. */
.banner-chips { display:flex; flex-wrap:wrap; gap:4px 18px; margin-top:12px; }
.banner-chips span { color:var(--text-muted); font-size:13px; }
.banner-chips b { color:var(--text-strong); font-weight:500; font-variant-numeric:tabular-nums; }
.banner-side { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.banner-art { display:none; }
/* KPI — одна лента, а не четыре карточки: цифры одного периода читаются
   подряд, и четыре рамки вокруг них только дробят взгляд. Колонок столько,
   сколько нужно, чтобы в ленте не осталось пустых ячеек. */
.stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0;
  background:var(--surface); border-radius:var(--radius-card); box-shadow:var(--ring);
  overflow:hidden; }
.stat { padding:16px 18px; border-left:.5px solid var(--border-soft); min-width:0; }
.stat:nth-child(4n+1) { border-left:0; }
.stat:nth-child(n+5) { border-top:.5px solid var(--border-soft); }
.stats[data-n="1"] { grid-template-columns:repeat(1,minmax(0,1fr)); }
.stats[data-n="1"] .stat:nth-child(1n+1) { border-left:0; }
.stats[data-n="1"] .stat:nth-child(n+2) { border-top:.5px solid var(--border-soft); }
.stats[data-n="2"] { grid-template-columns:repeat(2,minmax(0,1fr)); }
.stats[data-n="2"] .stat:nth-child(2n+1) { border-left:0; }
.stats[data-n="2"] .stat:nth-child(n+3) { border-top:.5px solid var(--border-soft); }
.stats[data-n="3"] { grid-template-columns:repeat(3,minmax(0,1fr)); }
.stats[data-n="3"] .stat:nth-child(3n+1) { border-left:0; }
.stats[data-n="3"] .stat:nth-child(n+4) { border-top:.5px solid var(--border-soft); }
.stats[data-n="4"] { grid-template-columns:repeat(4,minmax(0,1fr)); }
.stats[data-n="4"] .stat:nth-child(4n+1) { border-left:0; }
.stats[data-n="4"] .stat:nth-child(n+5) { border-top:.5px solid var(--border-soft); }
.stats[data-n="5"] { grid-template-columns:repeat(5,minmax(0,1fr)); }
.stats[data-n="5"] .stat:nth-child(5n+1) { border-left:0; }
.stats[data-n="5"] .stat:nth-child(n+6) { border-top:.5px solid var(--border-soft); }
.stats[data-n="6"] { grid-template-columns:repeat(3,minmax(0,1fr)); }
.stats[data-n="6"] .stat:nth-child(3n+1) { border-left:0; }
.stats[data-n="6"] .stat:nth-child(n+4) { border-top:.5px solid var(--border-soft); }
.stats[data-n="7"] { grid-template-columns:repeat(4,minmax(0,1fr)); }
.stats[data-n="7"] .stat:nth-child(4n+1) { border-left:0; }
.stats[data-n="7"] .stat:nth-child(n+5) { border-top:.5px solid var(--border-soft); }
.stats[data-n="8"] { grid-template-columns:repeat(4,minmax(0,1fr)); }
.stats[data-n="8"] .stat:nth-child(4n+1) { border-left:0; }
.stats[data-n="8"] .stat:nth-child(n+5) { border-top:.5px solid var(--border-soft); }
@media (max-width:1100px) { .stats, .stats[data-n] { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .stats .stat, .stats[data-n] .stat { border-left:.5px solid var(--border-soft); border-top:0; }
  .stats .stat:nth-child(3n+1), .stats[data-n] .stat:nth-child(3n+1) { border-left:0; }
  .stats .stat:nth-child(n+4), .stats[data-n] .stat:nth-child(n+4) {
    border-top:.5px solid var(--border-soft); } }
@media (max-width:760px) { .stats, .stats[data-n] { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stats .stat:nth-child(3n+1), .stats[data-n] .stat:nth-child(3n+1) {
    border-left:.5px solid var(--border-soft); }
  .stats .stat:nth-child(odd), .stats[data-n] .stat:nth-child(odd) { border-left:0; }
  .stats .stat:nth-child(n+3), .stats[data-n] .stat:nth-child(n+3) {
    border-top:.5px solid var(--border-soft); } }
@media (max-width:460px) { .stats, .stats[data-n] { grid-template-columns:1fr; }
  .stats .stat, .stats[data-n] .stat { border-left:0; }
  .stats .stat:nth-child(n+2), .stats[data-n] .stat:nth-child(n+2) {
    border-top:.5px solid var(--border-soft); } }

/* ── Таблицы ─────────────────────────────────────────────────────────── */
.table-wrap { background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-card); box-shadow:var(--shadow); overflow-x:auto; }
/* Таблицы: шапка без заливки, строки 44px, разделители 0.5px, числа
   моноширинные по правому краю. Зебры нет — она спорит с подсветкой строки. */
table { width:100%; border-collapse:collapse; font-size:13.5px; }
th { text-align:left; padding:0 14px; height:36px; font-size:12px; font-weight:400;
  letter-spacing:0; color:var(--text-muted); border-bottom:.5px solid var(--border-soft);
  white-space:nowrap; background:none; }
td { padding:0 14px; height:44px; border-bottom:.5px solid var(--border-soft);
  color:var(--text-primary); }
tr:last-child td { border-bottom:0; }
tbody tr:hover td { background:rgba(0,0,0,.02); }
:root[data-theme="dark"] tbody tr:hover td { background:rgba(255,255,255,.03); }
th.sortable { cursor:pointer; user-select:none; }
th.sortable:hover { color:var(--text-strong); }
th.sortable .sort-arrow { display:inline-block; width:0; height:0; margin-left:5px;
  vertical-align:middle; opacity:0; border-left:4px solid transparent; border-right:4px solid transparent; }
th.sortable:hover .sort-arrow { opacity:.35; border-top:5px solid currentColor; }
th.sort-asc .sort-arrow { opacity:1; border-bottom:5px solid var(--text-strong); border-top:0; }
th.sort-desc .sort-arrow { opacity:1; border-top:5px solid var(--text-strong); border-bottom:0; }


/* ── Разделы ─────────────────────────────────────────────────────────── */
.hero { display:grid; grid-template-columns:minmax(340px,1.15fr) 1.2fr; gap:16px;
  align-items:stretch; }
/* Карточка главной цифры: белая на кольце. Тёмная заливка с точечной
   сеткой была самым крупным цветным пятном в интерфейсе и спорила с тем,
   что цвет должен оставаться на данных. */
.hero-main { background:var(--surface); border-radius:var(--radius-card); padding:22px 24px;
  box-shadow:var(--ring); display:flex; flex-direction:column; color:var(--text-primary); }
.hero-label { color:var(--text-muted); font-size:13px; }
.hero-num { font-size:clamp(30px,4.4vw,48px); line-height:1.05; font-weight:300;
  color:var(--text-strong); letter-spacing:-.03em; font-variant-numeric:tabular-nums;
  margin:8px 0 6px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.hero-num small { font-size:.4em; font-weight:400; color:var(--text-muted); letter-spacing:0; }
.hero-note { color:var(--text-muted); font-size:13px; line-height:19px; }
.hero-note b { color:var(--text-strong); font-weight:500; }
/* Дельта — маленькая плашка с точкой, цвет только на ней. */
.hero-delta { margin-top:14px; font-weight:500; display:inline-flex; align-items:center;
  gap:7px; font-size:13px; align-self:flex-start; padding:4px 10px; border-radius:var(--radius-pill);
  background:var(--fill-subtle); color:var(--text-primary); }
.hero-delta::before { content:""; width:6px; height:6px; border-radius:50%; flex:none; }
.hero-delta.up::before { background:var(--success); }
.hero-delta.down::before { background:var(--error); }
/* Шапка плашки: подпись слева, переключатель точки отсчёта справа. */
.hero-top { display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; }
.hero-modes { display:flex; flex-wrap:wrap; gap:2px; padding:2px; max-width:100%;
  border-radius:var(--radius-pill); background:var(--fill-subtle); }
.hero-modes a { padding:4px 10px; border-radius:var(--radius-pill); font-size:12.5px;
  color:var(--text-muted); white-space:nowrap; min-width:0; }
.hero-modes a:hover { color:var(--text-strong); }
.hero-modes a.active { background:var(--surface); color:var(--text-strong); box-shadow:var(--ring); }
.hero-hint { display:inline-grid; place-items:center; width:15px; height:15px; margin-left:6px;
  color:var(--text-quiet); cursor:help; vertical-align:-2px; }
.hero-hint svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; }
.hero-hint:hover { color:var(--text-strong); }
.hero-hint[data-hint]::after { white-space:normal; width:max-content; max-width:min(240px, 80vw); text-overflow:clip; text-wrap:balance; }
.hero-num a { color:inherit; }
.hero-num a:hover { text-decoration:underline; text-underline-offset:6px;
  text-decoration-thickness:1.5px; text-decoration-color:var(--border); }
/* Сравнений два, и каждое со своей строки: «за те же дни» и «весь месяц». */
.hero-note span { display:block; }
.hero-foot { margin-top:18px; padding-top:16px; border-top:1px solid var(--border-soft);
  display:flex; flex-wrap:wrap; gap:6px 28px; }
/* Ячейка-ссылка: подчёркивания нет, но при наведении видно, что это
   вход в разбор, а не просто цифра. */
.hero-cell { display:block; border-radius:var(--radius-sm); padding:2px 6px; margin:-2px -6px;
  transition:background .15s ease-out; }
a.hero-cell:hover { background:var(--fill-subtle); }
a.hero-cell:hover .k { color:var(--text-primary); }
.hero-foot .k { color:var(--text-muted); font-size:13px; }
.hero-foot .v { color:var(--text-strong); font-size:20px; font-weight:400; white-space:nowrap;
  font-variant-numeric:tabular-nums; margin-top:2px; letter-spacing:-.02em; }
.hero-foot .v.bad { color:var(--error-ink); }
.hero-foot .v.good { color:var(--text-strong); }
/* Полоса с отметкой плана: сама полоса — факт, лаймовая риска — ориентир. */
.prog { position:relative; height:6px; border-radius:var(--radius-pill); background:var(--sand);
  overflow:visible; margin-top:7px; }
.prog i { display:block; height:100%; border-radius:var(--radius-pill); background:var(--text-strong);
  transition:width .3s cubic-bezier(.2,0,0,1); }
.prog i.ahead { background:var(--success); }
.prog i.behind { background:var(--error); }
/* Риска «где надо быть» живёт под полосой, а подпись — над ней. Раньше
   риска торчала вверх прямо в строку подписи, и подпись с ней слипалась. */
.prog u { position:absolute; top:0; width:1px; height:13px; background:var(--text-strong); }
.prog-wrap { position:relative; padding-top:20px; padding-bottom:9px; }
.prog-legend { position:absolute; top:0; transform:translateX(-50%); white-space:nowrap;
  line-height:15px; color:var(--text-muted); font-size:11.5px; }
.rows-card { background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow); }
.rows-group { color:var(--text-quiet); font-size:11px; letter-spacing:.09em;
  /* капс убран: ElevenLabs пишет подписи обычным регистром */ margin:16px 0 10px; font-weight:500; }
.rows-group:first-child { margin-top:0; }
.prow { display:grid; grid-template-columns:minmax(120px,1fr) minmax(90px,170px) auto;
  gap:16px; align-items:center; padding:7px 0; }
.prow .nm { color:var(--text-primary); }
.prow .vl { color:var(--text-strong); font-weight:500; text-align:right; white-space:nowrap;
  font-variant-numeric:tabular-nums; }
.prow .vl small { color:var(--text-quiet); font-weight:400; }
.hint { color:var(--text-quiet); font-size:12px; margin-top:16px; padding-left:11px;
  border-left:2px solid var(--marker); }
/* Источники: строка читается слева направо как фраза — кто, сколько принёс,
   какая доля дошла до денег. Полоса тонкая и приглушённая, цифры главные. */
.srow { display:grid; grid-template-columns:22px 1fr 110px 64px; gap:14px; align-items:center;
  padding:11px 0; border-bottom:1px solid var(--border); }
.srow:last-child { border-bottom:none; }
.srank { color:var(--text-quiet); font-size:12px; font-variant-numeric:tabular-nums;
  text-align:center; }
.sname { color:var(--text-strong); font-weight:500; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.smeta { color:var(--text-quiet); font-size:12px; margin-top:2px; font-variant-numeric:tabular-nums; }
.sbar { position:relative; height:6px; border-radius:9999px; background:var(--fill-subtle); }
.sbar i { display:block; height:100%; border-radius:9999px;
  background:linear-gradient(90deg,#5B51F0,#8B7BFF); }
.sbar u { position:absolute; top:-3px; width:2px; height:12px; background:var(--marker);
  border-radius:1px; opacity:.85; }
.spct { text-align:right; font-variant-numeric:tabular-nums; }
@media (max-width:620px) { .srow { grid-template-columns:20px 1fr 56px; }
.srow .sbar { display:none; } }
/* Воронка: шаги крупно, потери между ними — мелко, провал подсвечен. */
.alert-list { display:flex; flex-direction:column; }
/* Строка очереди: ссылка на переписку во всю ширину и тихая кнопка
   «не отвечать» справа. Кнопка не может лежать внутри ссылки, поэтому
   строка — контейнер, а ссылка его растягивает. */
.alert-row { display:flex; align-items:stretch; gap:6px; border-radius:10px; }
.alert-row + .alert-row { border-top:.5px solid var(--border-soft); border-radius:0; }
.alert-row:hover { background:rgba(0,0,0,.02); }
:root[data-theme="dark"] .alert-row:hover { background:rgba(255,255,255,.03); }
.alert-link { flex:1 1 auto; min-width:0; display:flex; align-items:flex-start; gap:11px;
  padding:13px 4px 13px 12px; }
.alert-body { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px; }
.alert-skip { display:flex; align-items:center; padding-right:8px; opacity:0;
  transition:opacity .15s ease-out; }
.alert-row:hover .alert-skip, .alert-skip:focus-within { opacity:1; }
@media (hover:none) { .alert-skip { opacity:1; } }
.alert-skip .icon-btn svg { width:17px; height:17px; }
.alert-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.alert-top b { color:var(--text-strong); font-weight:500; }
.alert-msg { color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.alert-meta { color:var(--text-quiet); font-size:12px; }
.stage-bar { display:flex; height:14px; border-radius:7px; overflow:hidden; gap:2px; }
.stage-seg { min-width:3px; border-radius:3px; }
.stage-legend { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:12px; font-size:13px; color:var(--text-muted); }
.stage-leg i { display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:6px; }
.stage-leg b { color:var(--text-strong); font-weight:500; }
.av { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px 28px; }
.av-row { min-width:0; }
.av-head { display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:10px; }
.av-title { color:var(--text-strong); font-weight:500; font-size:14px; }
.av-pair { display:grid; grid-template-columns:62px 1fr auto; gap:10px; align-items:center;
  margin-bottom:6px; }
.av-who { color:var(--text-quiet); font-size:12px; }
.av-track { height:9px; border-radius:9999px; background:var(--fill-subtle); overflow:hidden; }
.av-track i { display:block; height:100%; border-radius:9999px; background:var(--border-strong);
  min-width:3px; }
.av-track i.ai { background:linear-gradient(90deg,var(--brand) 0%,var(--brand-hover) 100%); }
.av-val { color:var(--text-strong); font-size:13px; font-weight:500; white-space:nowrap; }
.av-note { margin-top:18px; padding-top:16px; border-top:1px solid var(--border);
  color:var(--text-muted); font-size:13px; line-height:19px; }
.sf { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:10px; align-items:end; }
.sf-col { display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; }
.sf-bar-wrap { height:104px; width:100%; display:flex; align-items:flex-end; }
.sf-bar { width:100%; border-radius:6px 6px 2px 2px; }
.sf-bar.brand { background:var(--text-strong); }
.sf-bar.ok { background:var(--text-strong); }
.sf-bar.bad { background:var(--sand); }
.sf-n { font-size:18px; font-weight:400; color:var(--text-strong); letter-spacing:-.01em;
  font-variant-numeric:tabular-nums; }
.sf-l { font-size:12px; color:var(--text-muted); text-align:center; line-height:15px; }
.sf-key { margin-top:14px; font-size:12px; color:var(--text-quiet); }
@media (max-width:860px) {
  .sf { grid-auto-flow:row; grid-auto-columns:auto; gap:4px; }
.sf-col { flex-direction:row; align-items:center; gap:10px; }
.sf-bar-wrap { height:14px; width:34%; align-items:center; }
.sf-bar { height:14px !important; border-radius:7px; }
.sf-n { font-size:15px; min-width:46px; text-align:right; }
.sf-l { flex:1; text-align:left; }
}
.funnel { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; }
.fstep { padding:2px 6px; }
.fstep .n { font-size:29px; font-weight:300; color:var(--text-strong);
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.fstep .l { font-size:12px; color:var(--text-muted); margin-top:1px; }
.fgap { font-size:12px; color:var(--text-muted); text-align:center; padding:0 4px; }
.fgap.bad { background:var(--error-tint); color:var(--error-ink); border-radius:7px;
  padding:5px 9px; font-weight:500; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
td.num { font-size:13px; }
.thread-actions { display:inline-flex; margin-left:auto; }
.thread-actions .btn { white-space:nowrap; font-size:13px; }
/* Поле на всю ширину, параметры строкой под ним: в узкой колонке четыре
   селекта в один ряд слипались в кашу. */
.task-form { display:flex; flex-direction:column; gap:8px; background:var(--surface);
  border-radius:var(--radius-card); box-shadow:var(--ring); padding:12px 14px; }
.task-form .task-title { width:100%; height:38px; }
.task-params { display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.task-params .ch-pick { flex:0 1 auto; height:30px; max-width:none; border:0; box-shadow:none;
  background:var(--fill-subtle); border-radius:var(--radius-pill); font-size:12.5px;
  color:var(--text-muted); padding:0 24px 0 11px; }
.task-params input.ch-pick { padding:0 10px; color:var(--text-primary); }
.task-params .send { margin-left:auto; flex:none; width:32px; height:32px; padding:0;
  border-radius:50%; display:grid; place-items:center; background:var(--text-strong);
  color:var(--bg); border:0; }
.task-params .send svg { width:16px; height:16px; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.task-params .send:hover { background:var(--brand-hover); }
.task-group { margin-top:22px; }
.task-group-head { display:flex; align-items:center; gap:9px; font-size:13px; font-weight:500;
  /* капс убран: ElevenLabs пишет подписи обычным регистром */ letter-spacing:0; color:var(--text-quiet); margin:0 0 9px; }
.task-group-head b { font-weight:500; color:var(--text-muted); }
.task-group-head.late { color:var(--error); }
.task-group-head.today { color:var(--success); }
.task-group-head.soon { color:var(--warning); }
.task { display:flex; gap:11px; padding:12px 10px; border-radius:10px; }
.task + .task { border-top:.5px solid var(--border-soft); border-radius:0; }
.task.closed { opacity:.6; }
.task-icon { width:30px; height:30px; flex:none; border-radius:9px; display:grid; place-items:center;
  background:var(--fill-subtle); color:var(--text-muted); }
.task-icon svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; }
/* Тип задачи — тихий значок одного цвета: тонированные кружки превращали
   список в ёлку, а тип задачи и так написан словами. */
.task-body { flex:1; min-width:0; }
.task-line { display:flex; align-items:baseline; gap:10px; }
.task-line b { color:var(--text-strong); font-weight:500; flex:1; min-width:0; }
.task-when { color:var(--text-quiet); font-size:12px; white-space:nowrap; }
.task-meta { color:var(--text-quiet); font-size:12px; margin-top:3px; }
.task-meta a { color:var(--brand); }
.task-details { color:var(--text-muted); font-size:13px; margin-top:6px; }
.task-result { margin-top:8px; padding:10px 12px; border-radius:9px; white-space:pre-wrap;
  background:var(--fill-subtle); color:var(--text-primary); font-size:13.5px; line-height:19px; }
.task-result.warn { background:var(--warning-tint); color:var(--warning-ink); }
.task-close { display:flex; gap:8px; margin-top:9px; }
.task-close input { flex:1; min-width:0; background:var(--surface-warm); color:var(--text-primary);
  border:1px solid var(--border); border-radius:8px; padding:7px 10px; font:inherit; font-size:13px; }
/* --- карточка сделки --------------------------------------------------- */
.deal { display:grid; grid-template-columns:320px 1fr; gap:16px; align-items:start; }
.deal-side { display:flex; flex-direction:column; gap:12px; position:sticky; top:16px; }
.df { padding:0 0 16px; margin-bottom:16px; border-bottom:1px solid var(--border); }
.df:last-child { border-bottom:0; margin-bottom:0; }
.df-head { font-size:12px; letter-spacing:0;
  color:var(--text-quiet); font-weight:500; margin-bottom:10px; }
.df-row { display:flex; align-items:center; gap:10px; padding:6px 0; font-size:13px;
  border-top:1px solid var(--border); }
.df-row:first-of-type { border-top:0; }
.df-row span { color:var(--text-muted); flex:0 0 118px; }
.df-row b { color:var(--text-strong); font-weight:500; flex:1; min-width:0; text-align:right; }
.df-row select { width:100%; background:var(--surface-warm); color:var(--text-primary);
  border:1px solid var(--border-strong); border-radius:8px; padding:5px 8px; font:inherit; font-size:13px; }
.df-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.df-addtag { display:flex; gap:6px; }
.df-addtag input { flex:1; min-width:0; background:var(--surface-warm); color:var(--text-primary);
  border:1px solid var(--border); border-radius:8px; padding:6px 9px; font:inherit; font-size:13px; }
/* История: метки слева узкой колонкой, сообщения — пузырями. */
.tl { display:flex; flex-direction:column; }
.tl-item { display:grid; grid-template-columns:62px 1fr; gap:12px; padding:9px 0;
  border-top:1px solid var(--border); }
.tl-item:first-child { border-top:0; }
.tl-time { color:var(--text-quiet); font-size:11px; padding-top:2px; white-space:nowrap; }
.tl-who { color:var(--text-muted); font-size:11px;   letter-spacing:0; margin-right:6px; }
.tl-text { color:var(--text-primary); font-size:13.5px; line-height:19px; }
.tl-note { color:var(--text-quiet); font-size:12px; margin-top:3px; }
.tl-msg { background:var(--fill-subtle); border-radius:10px; padding:9px 12px; margin-top:4px;
  color:var(--text-primary); font-size:13.5px; line-height:19px; white-space:pre-wrap;
  overflow-wrap:anywhere; }
.tl-item.msg.out .tl-msg, .tl-item.msg.ai .tl-msg { background:var(--brand-tint); }
.tl-item.note .tl-text { background:var(--warning-tint); color:#7A4A00; border-radius:10px;
  padding:9px 12px; }
.tl-item.task .tl-text { color:var(--brand); }
.tl-item.ai .tl-text { color:var(--success); }
.tl-item.mark .tl-text { color:var(--text-muted); }
.deal-foot { margin-top:14px; }
.deal-tabs { display:flex; gap:6px; margin-bottom:10px; }
.deal-tabs button { background:var(--fill-subtle); color:var(--text-muted); border:0;
  border-radius:9px; padding:8px 14px; font:inherit; font-size:13px; cursor:pointer; }
.deal-tabs button.active { background:var(--brand-tint); color:var(--brand); }
.deal-pane { display:none; }
.deal-pane.active { display:block; }
.bcard-tags { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.bcard-when { color:var(--text-quiet); font-size:11px; margin-left:auto; }
.bcard-src { color:var(--text-quiet); font-size:11px; margin-top:4px; }
.bcard-foot { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:7px;
  color:var(--text-quiet); font-size:11px; }
@media (max-width:980px) { .deal { grid-template-columns:1fr; } .deal-side { position:static; } }
/* ── Профиль ─────────────────────────────────────────────────────────── */
/* Фиолетовая обложка убрана: это страница настроек, а не визитка. */
.phero { display:flex; align-items:center; gap:14px; margin-bottom:24px; }
.phero .avatar { width:56px; height:56px; border-radius:50%; font-size:20px; font-weight:400;
  background:var(--fill-subtle); color:var(--text-strong); display:grid; place-items:center;
  flex:none; }
.pname h1 { font-size:20px; line-height:26px; font-weight:500; }
.pname .sub { margin-top:1px; }
.pbody { display:flex; flex-wrap:wrap; gap:4px 20px; color:var(--text-muted); font-size:13px;
  margin-bottom:24px; }
.pbody b { color:var(--text-strong); font-weight:500; }
/* Одна колонка секций вместо карточек в два ряда.
   Раньше секции лежали полосами без полей и краёв: страница обрывалась
   ровно там, где кончалась последняя, а текст упирался в край заливки.
   Теперь это одна карточка с внутренними разделителями. */
.pgrid { display:flex; flex-direction:column; max-width:720px; background:var(--surface);
  border-radius:var(--radius-card); box-shadow:var(--ring); overflow:hidden; }
.psec { padding:20px 22px; border-bottom:.5px solid var(--border-soft); }
.psec:last-child { border-bottom:0; }
.psec h3 { display:flex; align-items:center; gap:9px; margin-bottom:3px; font-size:15px; }
.psec > .sub { margin-bottom:14px; }
.switch { display:flex; gap:11px; align-items:flex-start; cursor:pointer; }
/* Тумблер вместо чекбокса: включённый чёрный. */
.switch input { appearance:none; width:32px; height:18px; border-radius:9px; background:var(--sand);
  position:relative; flex:none; cursor:pointer; transition:background .15s ease-out; margin-top:1px; }
.switch input::after { content:""; position:absolute; top:2px; left:2px; width:14px; height:14px;
  border-radius:50%; background:var(--surface); transition:transform .15s ease-out;
  box-shadow:0 1px 2px rgba(0,0,0,.2); }
.switch input:checked { background:var(--text-strong); }
.switch input:checked::after { transform:translateX(14px); }
.switch b { display:block; color:var(--text-strong); font-weight:500; }
.linkcode { font-family:"JetBrains Mono", ui-monospace, monospace; background:var(--fill-subtle);
  padding:11px 14px; border-radius:var(--radius); font-size:14px; color:var(--text-strong);
  margin:10px 0; user-select:all; }

/* ── Карточка сделки: слева поля, справа лента, снизу ввод ───────────── */
.dealpage { display:grid; grid-template-columns:330px minmax(0,1fr); gap:0;
  background:var(--surface); border-radius:var(--radius-card);
  overflow:hidden; box-shadow:var(--ring); height:calc(100vh - 128px); }
.dealpane { border-right:.5px solid var(--border-soft); display:flex; flex-direction:column;
  min-height:0; background:var(--surface); }
.dealpane-head { padding:14px 16px; border-bottom:.5px solid var(--border-soft); }
.dealpane-head h1 { font-size:18px; line-height:23px; font-weight:400; }
.dealpane-head .sub { margin-top:4px; }
.stagebar { display:flex; gap:3px; margin-top:12px; }
.stagebar i { flex:1; height:3px; border-radius:2px; background:var(--sand); }
.stagebar i.done { background:var(--text-strong); }
.stagebar i.now { background:var(--text-strong); box-shadow:0 0 0 2px var(--brand-tint); }

/* Этапы в карточке: видно все сразу, текущий выделен. Менять их одним
   нажатием мы пробовали — так промахиваются, а перевод уходит в U-ON.
   Поэтому строка только показывает, а меняют через окно. */
/* Карточка сделки поверх воронки. Выезжает справа: список остаётся на
   месте и виден краем, поэтому понятно, что никуда не ушёл. На телефоне
   едет снизу — там боковая панель заняла бы весь экран и всё равно
   читалась бы как отдельная страница. */
.dsheet { position:fixed; inset:0; z-index:90; display:flex; justify-content:flex-end; }
.dsheet[hidden] { display:none; }
.dsheet-back { position:absolute; inset:0; background:rgba(0,0,0,.28); opacity:0;
  transition:opacity .18s ease-out; }
.dsheet.on .dsheet-back { opacity:1; }
.dsheet-card { position:relative; width:min(1040px, 86vw); height:100%; background:var(--bg);
  box-shadow:var(--shadow-pop); display:flex; flex-direction:column;
  transform:translateX(24px); opacity:0;
  transition:transform .18s ease-out, opacity .18s ease-out; }
.dsheet.on .dsheet-card { transform:none; opacity:1; }
/* Панель не прокручивается целиком: внутри у карточки свои области —
   поля слева, история справа, а снизу примечание и задачи, которые
   должны быть видны всегда. Общая прокрутка их прятала, и до «Задачи»
   приходилось листать через теги и контакт. */
.dsheet-body { flex:1; min-height:0; display:flex; flex-direction:column;
  padding:20px 24px 24px; overflow:hidden; }
/* Селектор длиннее, чем хочется: у кнопки есть подсказка, а правило
   [data-hint] идёт ниже по файлу и перебивало позиционирование — крестик
   уезжал за левый край панели. */
.dsheet-card > .dsheet-x { position:absolute; top:12px; right:16px; z-index:2;
  background:var(--surface); }
/* Карточка занимает оставшуюся высоту панели и дальше делит её сама. */
.dsheet-body .dealpage { flex:1; min-height:0; height:auto; }
body.dsheet-open { overflow:hidden; }
@media (max-width:860px) {
  /* На телефоне карточка и так в одну колонку, и три независимые области
     превратились бы в три щели. Там панель листается целиком. */
  .dsheet-body { display:block; overflow-y:auto; }
  .dsheet-body .dealpage { height:auto; }
  .dsheet { align-items:flex-end; }
  .dsheet-card { width:100%; height:92vh; border-radius:var(--radius-card) var(--radius-card) 0 0;
    transform:translateY(24px); }
  .dsheet-body { padding:16px 14px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .dsheet-back, .dsheet-card { transition:none; }
}

.stageline { display:flex; flex-wrap:wrap; gap:4px 10px; margin-top:12px; font-size:12px;
  line-height:16px; color:var(--text-quiet); }
.stageline span { position:relative; }
.stageline span.done { color:var(--text-muted); }
.stageline span.now { color:var(--text-strong); font-weight:500; }
.stageline span.now::before { content:""; position:absolute; left:0; right:0; bottom:-3px;
  height:1.5px; border-radius:2px; background:var(--text-strong); }
.stagerow { margin-top:12px; }
.stagerow .btn { height:30px; font-size:13px; }
.stageform { display:flex; flex-direction:column; gap:2px; }
.stageopt { display:flex; align-items:center; gap:10px; padding:9px 10px;
  border-radius:var(--radius-sm); font-size:14px; }
.stageopt:hover { background:var(--fill-subtle); }
.stageopt.on { color:var(--text-quiet); }
.stageopt i { font-style:normal; font-size:12px; color:var(--text-quiet); margin-left:auto; }
.stageform .btn { margin-top:10px; align-self:flex-start; }


.dealpane-body { flex:1; overflow-y:auto; padding:12px 16px 20px; }
.dealfeed { display:flex; flex-direction:column; min-height:0; }
.feed-body { flex:1; overflow-y:auto; padding:16px 20px; display:flex; flex-direction:column; gap:3px; }
.feed-foot { border-top:.5px solid var(--border-soft); padding:12px 14px; }

/* Лента: системные записи строкой, сообщения — пузырями как в мессенджере. */
.ev { display:flex; justify-content:center; margin:8px 0; }
.ev span { background:var(--fill-subtle); color:var(--text-muted); font-size:12px;
  padding:5px 12px; border-radius:999px; max-width:80%; text-align:center; }
.ev.note span { background:var(--warning-tint); color:var(--warning-ink); }
.ev.task span { background:var(--fill-subtle); color:var(--text-primary); }
.daysep { display:flex; justify-content:center; margin:14px 0 8px; }
.daysep span { background:var(--sand); color:var(--text-muted); font-size:11.5px; font-weight:500;
  padding:4px 12px; border-radius:999px; }
/* pre-wrap живёт на самом тексте, а не на пузыре: иначе отступы разметки
   превращаются в пустые строки и пузырь раздувается втрое. */
.bub { max-width:72%; padding:9px 13px 7px; border-radius:14px; position:relative;
  font-size:14px; line-height:20px; overflow-wrap:anywhere; }
.bub .txt { white-space:pre-wrap; }
.bub .who { font-size:12px; font-weight:400; opacity:.6; margin-bottom:2px; }
.bub .at { font-size:11px; opacity:.5; text-align:right; margin-top:2px;
  font-variant-numeric:tabular-nums; }
.bub a { color:inherit; text-decoration:underline; text-underline-offset:2px; }
.row-in { display:flex; justify-content:flex-start; }
.row-out { display:flex; justify-content:flex-end; }
.bub.in { background:var(--surface-warm); color:var(--text-primary); border-top-left-radius:4px; }
.bub.out { background:var(--text-strong); color:var(--bg); border-top-right-radius:4px; }
.bub.ai { background:var(--surface); color:var(--text-primary); box-shadow:var(--ring);
  border-top-right-radius:4px; }
.bub.ai .who { color:var(--text-muted); opacity:1; display:flex; align-items:center; gap:6px; }
.bub.ai .who::before { content:""; width:12px; height:12px; border-radius:50%; flex:none;
  background:radial-gradient(circle at 32% 28%, #C9C2FF 0%, #8B7CFF 38%, #C084FC 68%, #7DD3FC 100%); box-shadow:inset 0 1px 2px rgba(255,255,255,.5); }
.feed-wrap { background:var(--surface); }
.composer-row { display:flex; gap:8px; align-items:center; }
.composer-row input[type=text] { flex:1; min-width:0; height:40px; border-radius:var(--radius); }
.composer-row select { height:40px; max-width:190px; }
/* Табы композера — подчёркиваниями, а не кнопками: это выбор режима ввода,
   а не три действия. */
.deal-quick { display:flex; gap:16px; margin-bottom:10px;
  border-bottom:.5px solid var(--border-soft); }
.deal-quick button { height:30px; padding:0; font-size:13px; background:none; border:0;
  box-shadow:none; color:var(--text-muted); border-radius:0; position:relative; }
.deal-quick button:hover { color:var(--text-primary); }
.deal-quick button.on { color:var(--text-strong); }
.deal-quick button.on::after { content:""; position:absolute; left:0; right:0; bottom:-.5px;
  height:1.5px; background:var(--text-strong); }
.composer-box.wrap { flex-wrap:wrap; row-gap:6px; }
.composer-box.wrap input[type=text] { flex:1 1 100%; order:-1; height:28px; }
@media (max-width:980px) { .dealpage { grid-template-columns:1fr; height:auto; }
  .dealpane { border-right:0; border-bottom:.5px solid var(--border-soft); }
  .feed-body { max-height:60vh; } }
/* Компактный список задач на дашборде. */
.tmini { padding:6px; }
.tmini-row { display:flex; align-items:center; gap:11px; padding:10px;
  border-radius:var(--radius-sm); }
.tmini-row + .tmini-row { border-top:1px solid var(--border); border-radius:0; }
.tmini-row:hover { background:var(--surface-warm); }
.tmini-row .task-icon { width:30px; height:30px; }
.tmini-row .task-icon svg { width:15px; height:15px; }
.tmini-body { flex:1; min-width:0; }
.tmini-title { color:var(--text-strong); font-weight:500; font-size:13.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tmini-meta { color:var(--text-quiet); font-size:12px; margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tmini-meta a { color:var(--brand); }
.tmini-when { color:var(--text-quiet); font-size:11.5px; white-space:nowrap; flex:none; }
.tmini-when.late { color:var(--error); font-weight:500; }
.tmini-ok { width:30px; height:30px; padding:0; flex:none; font-size:14px; }
.tmini-all { display:block; padding:10px; color:var(--brand); font-size:13px; font-weight:500; }
.tmini-all:hover { background:var(--surface-warm); border-radius:var(--radius-sm); }
/* Пульс дня — одна лента вместо шести коробок. */
/* Колонки задаём явно: auto-fit оставлял шестую ячейку одну на второй
   строке, и лента рассыпалась. */
/* Шесть в ряд помещаются только на широком экране: иначе «наших ответов»
   обрезается многоточием. По умолчанию три на две строки. */
.pulse { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; padding:6px 0; }
@media (min-width:1500px) { .pulse { grid-template-columns:repeat(6,minmax(0,1fr)); } }
@media (max-width:620px) { .pulse { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.pulse-cell { padding:14px 18px; min-width:0;
  border-right:.5px solid var(--border-soft); border-bottom:.5px solid var(--border-soft); }
.pulse-cell:nth-child(3n) { border-right:0; }
.pulse-cell:nth-last-child(-n+3) { border-bottom:0; }
@media (min-width:1500px) {
  .pulse-cell { border-bottom:0; border-right:.5px solid var(--border-soft); }
  .pulse-cell:nth-child(3n) { border-right:.5px solid var(--border-soft); }
  .pulse-cell:last-child { border-right:0; }
}
@media (max-width:620px) {
  .pulse-cell:nth-child(3n) { border-right:.5px solid var(--border-soft); }
  .pulse-cell:nth-child(2n) { border-right:0; }
  .pulse-cell:nth-last-child(-n+2) { border-bottom:0; }
}
.pulse-ico { width:32px; height:32px; border-radius:9px; background:var(--brand-tint);
  color:var(--brand); display:grid; place-items:center; flex:none; }
.pulse-ico svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; }
.pulse-v { font-size:24px; font-weight:300; color:var(--text-strong); letter-spacing:-.02em;
  line-height:24px; white-space:nowrap; }
.pulse-l { color:var(--text-muted); font-size:12px; line-height:16px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
@media (max-width:860px) { .pulse-cell { border-right:0; border-bottom:1px solid var(--border); }
  .pulse-cell:last-child { border-bottom:0; } }

/* Этапы списком: строка на этап со своей полосой. */
.stagelist { padding:6px; }
.sl-row { display:grid; grid-template-columns:120px 1fr 56px; gap:12px; align-items:center;
  padding:9px 10px; border-radius:var(--radius-sm); }
.sl-row:hover { background:var(--surface-warm); }
.sl-name { color:var(--text-primary); font-size:13px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.sl-bar { height:4px; border-radius:var(--radius-pill); background:var(--sand); overflow:hidden; }
.sl-bar i { display:block; height:100%; border-radius:9999px; }
/* Полосы чёрные: цвет на этапах ничего не решает. Красным помечен только
   «Потерян» — единственный исход, о котором стоит думать. */
.sl-bar i.brand, .sl-bar i.ok { background:var(--text-strong); }
.sl-bar i.bad { background:var(--error); }
.sl-n { color:var(--text-strong); font-weight:400; font-size:13px; text-align:right;
  font-variant-numeric:tabular-nums; }
.jobbar { background:var(--surface); border:1px solid var(--brand); border-radius:var(--radius-card);
  padding:14px 16px; margin-bottom:16px; box-shadow:var(--shadow); }
.jobbar.done { border-color:var(--success); }
.jobbar.failed { border-color:var(--error); }
.jobbar-top { display:flex; align-items:baseline; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.jobbar-top b { color:var(--text-strong); }
.job-step { color:var(--text-muted); font-size:13px; }
.jobbar .bar { height:7px; }
.jobbar .bar i { transition:width .4s ease; }
.jobbar.done .bar i { background:var(--success); }
.jobbar.failed .bar i { background:var(--error); }
.chipline { display:flex; gap:5px; flex-wrap:nowrap; }
.rowacts { display:flex; gap:6px; justify-content:flex-end; }
.rowacts button { height:30px; padding:0 10px; font-size:12px; }
.adder > summary { list-style:none; display:inline-flex; margin-top:14px; }
.adder > summary::-webkit-details-marker { display:none; }
/* Кнопка «Поставить задачу» живёт в панели справа и открывает модалку. */
.newtask { margin-left:auto; }
/* Выпадающие списки в таблице: ширина по содержимому, иначе колонка
   растягивает строку и часть таблицы уезжает за край. */
td select { height:32px; font-size:13px; max-width:170px; }
/* ── Панель над доской ───────────────────────────────────────────────── */
/* Подсказки запросов — вспомогательные, поэтому мельче и тише кнопок. */
.hints { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.hints button { height:26px; padding:0 10px; border-radius:999px; font-size:12px;
  font-weight:500; background:var(--fill-subtle); color:var(--text-muted);
  border:1px solid transparent; }
.hints button:hover { background:var(--sand); color:var(--text-strong); }
.composer .ask { display:flex; gap:8px; }
.composer .ask input { flex:1; min-width:0; height:38px; }
.toolbar { margin-bottom:14px; }
.toolbar-top { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.pipe-switch { display:inline-flex; gap:2px; padding:3px; background:var(--sand);
  border-radius:var(--radius); }
.pipe-switch a { height:30px; padding:0 14px; display:inline-flex; align-items:center;
  border-radius:var(--radius-sm); font-size:13px; font-weight:500; color:var(--text-muted); }
.pipe-switch a.active { background:var(--surface); color:var(--text-strong); box-shadow:var(--shadow); }
.toolbar-search { position:relative; flex:1 1 280px; max-width:420px; min-width:0; }
.toolbar-search input { width:100%; height:34px; padding:0 12px 0 34px; border-radius:999px;
  background:var(--fill-subtle); border:1px solid transparent; }
.toolbar-search input:focus { background:var(--surface); border-color:var(--text-strong); }
.toolbar-search svg { position:absolute; left:11px; top:50%; transform:translateY(-50%);
  width:15px; height:15px; fill:none; stroke:var(--text-quiet); stroke-width:2; }
.toolbar-count { margin-left:auto; color:var(--text-muted); font-size:13px; white-space:nowrap; }
.toolbar-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.views { display:flex; gap:4px; flex-wrap:wrap; }
/* Фильтры категорий — чипы как в Voices: рамка 1px, активный чёрный. */
.views a { display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 12px;
  border-radius:var(--radius); font-size:13px; color:var(--text-primary); background:var(--surface);
  border:1px solid var(--border); }
.views a:hover { background:var(--fill-subtle); }
.views a.active { background:var(--text-strong); border-color:transparent; color:var(--bg); }
.views a small { color:var(--text-quiet); font-size:12px;
  font-variant-numeric:tabular-nums; }
.views a.active small { color:var(--bg); opacity:.7; }
.vdot { width:7px; height:7px; border-radius:50%; display:inline-block; }
.vdot.warn { background:var(--warning); }
.vdot.bad { background:var(--error); }
.filter { position:relative; }
.filter > summary { list-style:none; }
.filter > summary::-webkit-details-marker { display:none; }
.filter-panel { position:absolute; top:calc(100% + 6px); right:0; z-index:50; width:min(560px,86vw);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card);
  box-shadow:var(--shadow-pop); padding:14px; }
.filter-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.filter-grid label { display:flex; flex-direction:column; gap:4px; font-size:12px;
  color:var(--text-muted); }
.filter-acts { display:flex; gap:8px; margin-top:12px; }
.board { display:flex; gap:12px; overflow-x:auto; padding-bottom:10px; align-items:flex-start;
  -webkit-overflow-scrolling:touch; }
/* Колонка — это область, а не карточка: без рамки и фона. Этап обозначен
   точкой и счётчиком, а не цветной полосой во всю ширину. */
.bcol { flex:0 0 268px; background:none; border:0; border-radius:var(--radius);
  padding:0 2px 10px; max-height:calc(100vh - 230px); display:flex; flex-direction:column; }
.bcol.over { background:var(--brand-tint); }
.bcol-head { padding:0 4px 10px; }
.bcol-strip { display:none; }
.bcol-title { display:flex; align-items:center; gap:7px; font-size:13px; font-weight:500;
  color:var(--text-primary); }
.bcol-title::before { content:""; width:6px; height:6px; border-radius:50%; flex:none;
  background:var(--text-strong); }
.bcol.won .bcol-title::before { background:var(--success); }
.bcol.lost .bcol-title::before { background:var(--text-quiet); }
.bcol-title b { margin-left:auto; color:var(--text-quiet); font-weight:400;
  font-variant-numeric:tabular-nums; font-size:12px; }
.bcol-sum { color:var(--text-muted); font-size:12.5px; font-weight:400; margin:3px 0 0 13px;
  font-variant-numeric:tabular-nums; }
.bcol-body { display:flex; flex-direction:column; gap:8px; overflow-y:auto; }
.bcol-empty { color:var(--text-quiet); font-size:12px; padding:8px 4px; }
.tcard { background:var(--surface-warm); border:1px solid var(--border); border-radius:11px;
  padding:10px 11px; }
.tcard-top { display:flex; align-items:flex-start; gap:9px; }
.tcard-top b { color:var(--text-strong); font-weight:500; font-size:13.5px; flex:1; min-width:0; }
.tcard-top .task-icon { width:26px; height:26px; }
.tcard-top .task-icon svg { width:14px; height:14px; }
.tcard-deal { display:block; color:var(--brand); font-size:12.5px; margin:7px 0 0 35px; }
.tcard-foot { display:flex; gap:8px; margin:6px 0 0 35px; color:var(--text-quiet); font-size:11.5px; }
.tcard-when { margin-left:auto; }
.tcard-close { display:flex; gap:6px; margin-top:9px; }
.tcard-close input { flex:1; min-width:0; height:30px; font-size:12.5px; }
.tcard-close button { width:32px; padding:0; flex:none; }
.bcol-strip.muted { background:var(--border-strong); }
/* Рамка видимая: карточки на светлом фоне колонки сливались в одно полотно,
   и границы приходилось угадывать. */
.bcard { background:var(--surface); border:1px solid var(--border); border-radius:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.04); padding:11px 12px; cursor:pointer;
  transition:box-shadow .15s ease, border-color .15s ease, transform .15s ease; }
.bcard:active { cursor:grabbing; }
.bcard:hover { border-color:var(--border-strong); box-shadow:0 2px 8px rgba(0,0,0,.07); }
.bcard.dragging { opacity:.5; transform:rotate(1deg);
  box-shadow:0 10px 24px rgba(0,0,0,.16), 0 0 0 .5px rgba(0,0,0,.12); }
.bcard.pending { opacity:.6; border-style:dashed; }
.bcard-head { display:flex; align-items:baseline; gap:8px; }
.bcard-name { color:var(--text-strong); font-weight:500; font-size:13.5px; flex:1; min-width:0;
  font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bcard-sum { color:var(--text-muted); font-size:12px; font-weight:400; white-space:nowrap;
  font-variant-numeric:tabular-nums; }
.bcard-who { color:var(--text-muted); font-size:12px; margin-top:2px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.bcard-msg { color:var(--text-muted); font-size:12px; margin-top:5px; line-height:16px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* Следующий шаг — точкой: оранжевая «задачи нет», зелёная «есть», красная
   «просрочена». Строка «нет задачи» повторялась на каждой карточке. */
.btask { width:8px; height:8px; border-radius:50%; flex:none; background:var(--warning); }
.btask.ok { background:var(--success); }
.btask.late { background:var(--error); }
.bcard-mgr { display:inline-flex; align-items:center; gap:5px; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.bcard-mgr svg { width:13px; height:13px; flex:none; fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.chan-ico { width:12px; height:12px; flex:none; fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; margin-right:5px;
  vertical-align:-2px; }
/* Старый флажок остался для списков задач. */
.bflag { display:flex; align-items:center; gap:6px; margin-top:8px; font-size:11.5px;
  color:var(--text-quiet); }
.bflag i { width:7px; height:7px; border-radius:9999px; background:var(--text-quiet); flex:none; }
.bflag.ok { color:var(--text-muted); }
.bflag.ok i { background:var(--success); }
.bflag.late { color:var(--error-ink); }
.bflag.late i { background:var(--error); }
.bflag.none i { background:transparent; border:1.5px dashed var(--text-quiet); width:9px; height:9px; }
.bcard-foot { display:flex; align-items:center; gap:7px; margin-top:8px; color:var(--text-quiet);
  font-size:11.5px; min-width:0; }
.bcard-foot .bcard-when { margin-left:auto; flex:none; }
.bcard-mgr { color:var(--text-quiet); font-size:11px; margin-left:auto; }
/* Телефон: доска листается по одному этапу. 78% ширины показывали край
   соседней колонки — глаз цеплялся за обрезанную карточку вместо той,
   что читает. Прилипание останавливает прокрутку ровно на этапе. */
@media (max-width:860px) {
  /* Без отрицательных полей: они расширяют саму доску за пределы
     содержимого, и документ становится шире экрана — следом за ним
     растягивается нижняя панель. */
  .board { scroll-snap-type:x mandatory; gap:12px; padding-bottom:10px; }
  /* Колонка на всю ширину: край соседней только отвлекал, а куда листать,
     теперь видно по полосе этапов сверху. */
  .bcol { flex-basis:100%; max-height:none; scroll-snap-align:start; scroll-snap-stop:always; }
  .bcol-head { position:sticky; top:0; z-index:2; background:var(--bg); padding-top:2px; }
  /* Название этапа уже во вкладке сверху; сумма заявок остается. */
  .bcol-title { display:none; }
  .bcol-sum { margin:0 0 2px 2px; }
  .bcol-head:not(:has(.bcol-sum)) { display:none; }
  .board-hint { display:none; }
  .bcard { padding:13px 14px; }
  .bcard-name { font-size:15px; }
  /* Срезы — одной строкой с прокруткой, а не тремя рядами чипов. */
  .toolbar-row .views { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 -2px; padding:0 2px; }
  .toolbar-row .views::-webkit-scrollbar { display:none; }
  .toolbar-row .views a { flex:none; height:34px; }
  .sv-add { display:none; }
  /* Этапы — вкладками с чертой, а не чипами: чипы выше — это срезы, и
     два одинаковых ряда путались. */
  .stage-tabs { display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; margin:6px 0 12px;
    border-bottom:1px solid var(--border); }
  .stage-tabs::-webkit-scrollbar { display:none; }
  .stage-tabs button { flex:none; display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 10px;
    border:0; border-bottom:2px solid transparent; border-radius:0; background:none; box-shadow:none;
    color:var(--text-muted); font-size:14px; font-weight:500; white-space:nowrap; margin-bottom:-1px; }
  .stage-tabs button small { color:var(--text-quiet); font-size:12px; font-weight:400; font-variant-numeric:tabular-nums; }
  .stage-tabs button.on { color:var(--text-strong); border-bottom-color:var(--text-strong); }
}
.stage-tabs { display:none; }
@media (max-width:860px) { .stage-tabs { display:flex; } }
.pickbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.pickbar select { background:var(--surface-warm); color:var(--text-primary);
  border:1px solid var(--border-strong); border-radius:9px; padding:7px 10px;
  font:inherit; font-size:13px; max-width:200px; }
.crm-row { display:flex; align-items:center; gap:6px; margin:3px 0; }
.crm-link { display:inline-flex; align-items:center; gap:4px; color:var(--brand); font-weight:500; }
.crm-link svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; }
.crm-link:hover { color:var(--brand-hover); }
/* Событие по сделке в ленте: не реплика, поэтому без пузыря и по центру. */
.msg-event { display:flex; align-items:center; gap:8px; margin:10px auto; max-width:92%;
  width:fit-content;
  padding:7px 12px; border-radius:9999px; background:var(--fill-subtle);
  border:1px solid var(--border); color:var(--text-muted); font-size:12.5px; }
.msg-event svg { width:15px; height:15px; flex:none; fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.msg-event.handoff { color:var(--brand); border-color:var(--brand-tint); }
.msg-event.ai { color:var(--success); border-color:var(--success-tint); }
.msg-event span { min-width:0; }
.msg-event time { color:var(--text-quiet); font-size:11px; flex:none; }
/* Последнее сообщение клиента в очереди: две строки максимум, иначе таблица
   превращается в полотно и очередь перестают разбирать. */
.lastmsg { color:var(--text-muted); font-size:13px; max-width:420px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.row-title { color:var(--text-strong); font-weight:500; }
.row-sub { color:var(--text-quiet); font-size:12px; margin-top:2px; }
/* Переключатель периода — сегментированный контрол, как в шапке MoonAI. */
.period { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.monthnav { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; background:var(--surface);
  border:1px solid var(--border); border-radius:9999px; padding:3px 6px; }
.monthnav span { padding:0 10px; font-weight:500; color:var(--text-strong);
  min-width:118px; text-align:center; }
/* 28×28 — это размер стрелок ‹ ›. Ссылка «к месяцам» тоже <a> и получала
   их размеры, из-за чего текст вываливался из кружка. */
.monthnav a { width:28px; height:28px; border-radius:9999px; display:grid; place-items:center;
  color:var(--text-muted); font-size:17px; line-height:1; }
.monthnav a.back { width:auto; height:28px; padding:0 12px; display:inline-flex;
  align-items:center; gap:6px; font-size:13px; font-weight:500; }
.monthnav a:hover { background:var(--fill-subtle); color:var(--text-primary); }
.monthnav a.off { opacity:.25; pointer-events:none; }
/* ── ИИ-аналитик ─────────────────────────────────────────────────────── */
/* Страница сама является чатом: лента по центру, поле прижато к низу,
   слева прошлые вопросы. Коробки с внутренним скроллом больше нет. */
.ia { display:grid; grid-template-columns:240px minmax(0,1fr); gap:28px; align-items:start; }
/* Колонка разговоров прилипает к верху и листается внутри себя: когда
   разговоров много, вместе с лентой уезжала и кнопка «Новый разговор» —
   начать новый можно было, только пролистав страницу обратно вверх. */
/* Колонка тянется на всю высоту ленты, а прилипает её содержимое: если
   прилипшим сделать саму колонку, двигаться ей будет некуда — она и есть
   вся высота ячейки, и «Новый разговор» уезжает вверх вместе с лентой. */
.ia-hist { align-self:stretch; }
.ia-hist-inner { position:sticky; top:60px; max-height:calc(100vh - 84px); display:flex;
  flex-direction:column; gap:12px; }
.ia-new { width:100%; }
.ia-hist-list { display:flex; flex-direction:column; }
.ia-main { display:flex; flex-direction:column; min-height:calc(100vh - 150px); }
.ia-main.empty { justify-content:center; }
.ia-feed { display:flex; flex-direction:column; gap:26px; width:100%; max-width:760px;
  margin:0 auto; flex:1 1 auto; }
.ia-main.empty .ia-feed, .ia-main.reading .ia-feed { flex:0 0 auto; }
@media (max-width:1200px) { .ia { grid-template-columns:minmax(0,1fr); }
  .ia-hist { display:none; } }

.ia-empty { display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center; }
.ia-empty h1 { font-size:28px; line-height:34px; font-weight:400; letter-spacing:-.02em; margin:0; }

/* Вопрос — пузырём справа, ответ — без пузыря во всю ширину ленты:
   длинный разбор должен читаться как документ, а не как смс. */
.ia-q { align-self:flex-end; max-width:70%; background:var(--surface-warm);
  color:var(--text-primary); border-radius:18px; padding:11px 15px; font-size:14px;
  line-height:20px; white-space:pre-wrap; overflow-wrap:anywhere; }
.ia-a { display:grid; grid-template-columns:24px minmax(0,1fr); gap:12px; align-items:start; }
.ia-a-wrap { min-width:0; }
.ia-a-body { font-size:14px; line-height:22px; color:var(--text-primary); }
.ia-a-body > :first-child { margin-top:0; }
.ia-a-body p { margin:0 0 10px; }
.ia-a-body h3 { font-size:16px; font-weight:500; margin:18px 0 8px; color:var(--text-strong); }
.ia-a-body ul, .ia-a-body ol { margin:0 0 10px; padding-left:20px; }
.ia-a-body li { margin:3px 0; }
.ia-a-body b { font-weight:500; color:var(--text-strong); }
.ia-a-body code { font-family:"JetBrains Mono", ui-monospace, monospace; font-size:13px;
  background:var(--fill-subtle); padding:1px 5px; border-radius:5px; }
.ia-a-body a { color:var(--text-strong); text-decoration:underline; text-underline-offset:2px; }
.ia-a-body .table-wrap { margin:4px 0 12px; }
/* Главная цифра первой строкой: вывод, а не абзац текста. */
.ia-lead { font-size:28px; line-height:34px; font-weight:400; letter-spacing:-.02em;
  color:var(--text-strong); margin:0 0 10px; }

.ia-steps { display:flex; flex-direction:column; gap:4px; color:var(--text-quiet); font-size:13px; }
.ia-step::before { content:"· "; }
.ia-step.done::before { content:"✓ "; color:var(--success); }
.ia-fail { display:flex; align-items:center; gap:8px; color:var(--text-muted); font-size:13.5px; }

.ia-acts { display:flex; gap:2px; margin-top:10px; }
.ia-acts .icon-btn svg { width:16px; height:16px; }
.ia-acts .icon-btn.on, .ia-acts .icon-btn.done { color:var(--text-strong); }
.ia-acts .icon-btn.on svg { fill:currentColor; fill-opacity:.12; }
.ia-why { display:flex; gap:8px; margin-top:8px; max-width:520px; }
.ia-why input { flex:1; height:34px; padding:0 12px; font:inherit; font-size:13.5px;
  color:var(--text-strong); background:var(--surface); border:0; border-radius:var(--radius-sm);
  box-shadow:var(--ring); }
.ia-why input:focus { outline:none; box-shadow:0 0 0 1px var(--text-strong); }
.ia-why .btn { height:34px; }
.ia-said { margin-top:8px; font-size:12.5px; color:var(--text-quiet); }
.ia-meta { margin-top:10px; }
.ia-chip { display:inline-flex; align-items:center; height:24px; padding:0 10px;
  border-radius:var(--radius-pill); background:var(--fill-subtle); color:var(--text-muted);
  font-size:12px; }

/* Поле: одно, крупное, с тенью. При фокусе рамка становится градиентом
   орба — единственное место, где градиент выходит за пределы самого орба. */
/* Поле прижато к низу и имеет свой фон: иначе лента проезжала под ним
   насквозь и текст читался сквозь поле. */
.ia-composer { position:sticky; bottom:0; width:100%; max-width:760px; margin:20px auto 0;
  z-index:5; padding:10px 0 14px; background:var(--bg); }
.ia-main:not(.empty) .ia-feed { padding-bottom:8px; }
.ia-main.empty .ia-composer { margin:6px auto 0; }
.ia-field { display:flex; align-items:flex-end; gap:8px; padding:9px 9px 9px 16px;
  border-radius:20px; background:var(--surface); box-shadow:var(--shadow-pop);
  border:1.5px solid transparent; }
.ia-field:focus-within { background-image:linear-gradient(var(--surface), var(--surface)),
  linear-gradient(120deg, #8B7CFF, #C084FC, #7DD3FC);
  background-origin:border-box; background-clip:padding-box, border-box; }
.ia-field textarea { flex:1 1 auto; min-width:0; min-height:38px; max-height:160px; border:0;
  background:none; box-shadow:none; outline:none; resize:none; padding:8px 0;
  font:inherit; font-size:15px; line-height:22px; }
.ia-field textarea:focus { box-shadow:none; outline:none; }
.ia-period { flex:none; height:28px; border:0; box-shadow:none; background:var(--fill-subtle);
  border-radius:var(--radius-pill); font-size:12px; color:var(--text-muted);
  padding:0 22px 0 10px; margin-bottom:5px; }
.ia-field .send { flex:none; width:36px; height:36px; padding:0; border-radius:50%;
  display:grid; place-items:center; background:var(--text-strong); color:var(--bg); border:0; }
.ia-field .send:hover { background:var(--brand-hover); }
.ia-field .send[hidden], .ia-rec[hidden] { display:none; }
.ia-field .send.mic { background:var(--fill-subtle); color:var(--text-strong); }
.ia-field .send.mic:hover { background:var(--border-soft); }
.ia-rec { flex:1; display:flex; align-items:center; gap:10px; min-height:38px; cursor:pointer; padding-left:2px; }
.ia-rec b { font-size:14px; font-weight:500; font-variant-numeric:tabular-nums; color:var(--error); }
.ia-rec small { font-size:12.5px; color:var(--text-muted); }
.ia-wave { display:flex; align-items:center; gap:3px; height:22px; }
.ia-wave i { width:3px; height:6px; border-radius:2px; background:var(--error); animation:iawave 1s ease-in-out infinite; }
.ia-wave i:nth-child(2) { animation-delay:.1s } .ia-wave i:nth-child(3) { animation-delay:.2s } .ia-wave i:nth-child(4) { animation-delay:.3s }
.ia-wave i:nth-child(5) { animation-delay:.4s } .ia-wave i:nth-child(6) { animation-delay:.5s } .ia-wave i:nth-child(7) { animation-delay:.6s }
@keyframes iawave { 0%, 100% { height:5px } 50% { height:20px } }
.ia-next { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.ia-next { gap:8px; margin-top:14px; }
.ia-next button { all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:8px; padding:9px 15px 9px 12px; border-radius:18px;
  font-size:14px; line-height:1.3; color:var(--text-strong);
  background:color-mix(in srgb, var(--ai) 8%, var(--surface)); border:1px solid color-mix(in srgb, var(--ai) 35%, transparent); }
.ia-next button svg { width:14px; height:14px; fill:var(--ai); flex:none; }
.ia-next button:hover { background:color-mix(in srgb, var(--ai) 15%, var(--surface)); }
.ia-field .send svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; }
.ia-field .send.stop svg { display:none; }
.ia-field .send.stop::after { content:""; width:11px; height:11px; border-radius:3px;
  background:currentColor; }
.ia-kbd { color:var(--text-quiet); font-size:12px; text-align:right; margin:6px 6px 0; }

/* Карточки-подсказки и недавние вопросы — только в пустом диалоге. */
.ia-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px;
  width:100%; max-width:760px; margin:16px auto 0; }
/* Кнопка по умолчанию не переносит текст — у карточек-подсказок обрезало
   и заголовок, и пример. */
.ia-card { display:flex; flex-direction:column; align-items:flex-start; gap:5px; height:auto;
  padding:12px 14px; text-align:left; background:var(--surface); color:var(--text-primary);
  border:1px solid var(--border-soft); border-radius:16px; box-shadow:none;
  white-space:normal; }
.ia-card b, .ia-card span { white-space:normal; overflow-wrap:anywhere; }
.ia-card:hover { border-color:var(--border-strong); background:var(--surface); }
.ia-card svg { width:16px; height:16px; fill:none; stroke:var(--text-quiet); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; }
.ia-card b { font-size:14px; font-weight:500; color:var(--text-strong); }
.ia-card span { font-size:13px; color:var(--text-muted); line-height:17px; }
.ia-src { color:var(--text-quiet); font-size:12px; text-align:center; margin:14px auto 0;
  max-width:760px; }
.ia-main:not(.empty) .ia-cards, .ia-main:not(.empty) .ia-recent,
.ia-main:not(.empty) .ia-src { display:none; }
@media (max-width:860px) { .ia-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } }

.ia-recent { width:100%; max-width:760px; margin:26px auto 0; text-align:left; }
.ia-recent > b { display:block; font-size:13px; font-weight:500; color:var(--text-quiet);
  margin-bottom:2px; }
.ia-recent-row { display:flex; align-items:center; gap:10px; padding:9px 0;
  border-bottom:.5px solid var(--border-soft); }
.ia-recent-row:last-child { border-bottom:0; }
.ia-recent-row > a { flex:1 1 auto; min-width:0; color:var(--text-primary); font-size:14px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ia-recent-row > a:hover { color:var(--text-strong); text-decoration:underline;
  text-underline-offset:2px; }
.ia-recent-row time { flex:none; color:var(--text-quiet); font-size:12px; }
.ia-recent-row .icon-btn { width:26px; height:26px; opacity:0; transition:opacity .15s ease-out; }
.ia-recent-row:hover .icon-btn, .ia-recent-row .icon-btn:focus-visible { opacity:1; }
.ia-recent-row .icon-btn svg { width:15px; height:15px; }
/* В узкой колонке слева тот же список, но теснее и без даты. */
.ia-hist .ia-recent-row { padding:5px 8px; border-bottom:0; border-radius:var(--radius-sm); }
.ia-hist .ia-recent-row:hover { background:var(--fill-subtle); }
.ia-hist .ia-recent-row > a { font-size:13px; color:var(--text-muted); }
.ia-hist .ia-recent-row time { display:none; }

/* Разговоры слева: строка — разговор целиком, с названием и днём. */
.ia-chats { display:flex; flex-direction:column; gap:1px; overflow-y:auto; min-height:0;
  margin:0 -4px; padding:0 4px; }
/* Строка разговора: ссылка во всю ширину и кнопка «забыть», которая
   появляется под курсором — она нужна редко и не должна висеть всегда. */
.ia-chat-row { display:flex; align-items:center; border-radius:var(--radius-sm); }
.ia-chat-row:hover, .ia-chat-row.active { background:var(--fill-subtle); }
.ia-chat-row .icon-btn { width:24px; height:24px; flex:none; margin-right:4px; opacity:0;
  transition:opacity .15s ease-out; }
.ia-chat-row:hover .icon-btn, .ia-chat-row .icon-btn:focus-visible { opacity:1; }
.ia-chat-row .icon-btn svg { width:14px; height:14px; }
.ia-chat { flex:1 1 auto; min-width:0; display:flex; align-items:baseline; gap:8px;
  padding:7px 9px; border-radius:var(--radius-sm); color:var(--text-muted); font-size:13px;
  line-height:18px; }
.ia-chat-row:hover .ia-chat { color:var(--text-primary); }
.ia-chat-row.active .ia-chat { color:var(--text-strong); font-weight:500; }
.ia-chat .t { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.ia-chat time { flex:none; font-size:11px; color:var(--text-quiet); }

.ia-opened { display:flex; flex-direction:column; gap:18px; }
.ia-opened .back { align-self:flex-start; color:var(--text-muted); font-size:13px; }
.ia-opened .back:hover { color:var(--text-strong); }
.ia-again { align-self:flex-start; }

/* ── Стенд подбора туров ─────────────────────────────────────────────── */
.tr { display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr); gap:20px;
  align-items:start; }
@media (max-width:1000px) { .tr { grid-template-columns:1fr; } }
.tr-prov { display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px;
  border-radius:var(--radius-pill); font-size:12px; background:var(--fill-subtle);
  color:var(--text-muted); }
.tr-prov::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--warning); }
.tr-prov.ok::before { background:var(--success); }

.tr-ask { background:var(--surface); border-radius:var(--radius-card); box-shadow:var(--ring);
  padding:12px 14px; display:flex; flex-direction:column; gap:10px; }
.tr-ask textarea { width:100%; border:0; box-shadow:none; background:none; resize:vertical;
  font:inherit; font-size:14px; line-height:20px; padding:0; outline:none; }
.tr-ask-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tr-examples { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.tr-ex { height:28px; padding:0 11px; font-size:12.5px; background:var(--fill-subtle);
  color:var(--text-muted); border:0; box-shadow:none; border-radius:var(--radius-pill);
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tr-ex:hover { background:var(--sand); color:var(--text-strong); }

.tr-brief { margin-top:14px; display:flex; flex-direction:column; gap:10px; }
.tr-brief-head { display:flex; align-items:baseline; gap:8px; }
.tr-brief-head b { color:var(--text-strong); font-weight:500; }
.tr-fields { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.tr-f { display:flex; flex-direction:column; gap:4px; min-width:0; }
.tr-f.wide { grid-column:1 / -1; }
.tr-f > span { color:var(--text-muted); font-size:12px; }
.tr-f input { height:34px; font-size:13.5px; width:100%; }
.tr-missing { display:flex; gap:8px; align-items:flex-start; background:var(--warning-tint);
  color:var(--warning-ink); border-radius:var(--radius); padding:9px 11px; font-size:13px;
  line-height:18px; }
.tr-brief-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; }

.tr-empty { background:var(--surface); border-radius:var(--radius-card); box-shadow:var(--ring);
  padding:40px 24px; display:flex; flex-direction:column; align-items:center; gap:10px;
  text-align:center; }
.tr-empty b { color:var(--text-strong); font-weight:500; font-size:16px; }
.tr-empty .sub { max-width:420px; }

.tr-res { display:flex; flex-direction:column; gap:10px; }
.tr-res-head { display:flex; align-items:baseline; gap:8px; }
.tr-res-head b { font-size:18px; font-weight:400; color:var(--text-strong); }
.tr-card { background:var(--surface); border-radius:var(--radius-card); box-shadow:var(--ring);
  padding:13px 15px; display:flex; flex-direction:column; gap:6px; }
.tr-card-top { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.tr-card-top b { color:var(--text-strong); font-weight:500; font-size:15px; }
.tr-stars { color:var(--warning); font-size:12px; letter-spacing:1px; }
.tr-price { margin-left:auto; color:var(--text-strong); font-size:15px;
  font-variant-numeric:tabular-nums; }
.tr-card-meta { color:var(--text-muted); font-size:13px; }
.tr-why { display:flex; gap:7px; align-items:center; color:var(--text-primary); font-size:13px; }
.tr-score > summary { list-style:none; cursor:pointer; color:var(--text-quiet); font-size:12px; }
.tr-score > summary::-webkit-details-marker { display:none; }
.tr-score > div { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.tr-sc { font-size:11.5px; background:var(--fill-subtle); color:var(--text-muted);
  border-radius:var(--radius-pill); padding:2px 8px; font-variant-numeric:tabular-nums; }
.tr-sc.neg { background:var(--error-tint); color:var(--error-ink); }
.tr-text { display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.tr-text pre { margin:0; white-space:pre-wrap; font:inherit; font-size:13.5px; line-height:20px;
  color:var(--text-primary); background:var(--fill-subtle); border-radius:var(--radius);
  padding:12px 14px; width:100%; }

/* ── Вход ────────────────────────────────────────────────────────────── */
/* Одна карточка по центру экрана: логотип, заголовок, альтернативные
   способы входа, разделитель, поля. Один фокус на экран, без обложек. */
/* Фон страницы входа — единственное место, где продукт позволяет себе
   цвет во всю площадь: это витрина, а не рабочий экран. Мягкая сетка из
   цветов орба, карточка плавает поверх. */
.login { min-height:100vh; display:grid; place-items:center; padding:24px 16px;
  position:relative; z-index:1; background:#F7F6FB; }
.login::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 55% at 12% 18%, rgba(139,124,255,.42), transparent 70%),
    radial-gradient(55% 50% at 88% 12%, rgba(125,211,252,.40), transparent 70%),
    radial-gradient(65% 60% at 78% 88%, rgba(192,132,252,.38), transparent 70%),
    radial-gradient(50% 45% at 25% 85%, rgba(99,160,255,.30), transparent 70%); }
/* Лёгкое зерно поверх градиента: чистые градиенты на больших площадях
   полосят на дешёвых матрицах. */
.login::after { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:.4; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .login { background:#0A0A0F; }
:root[data-theme="dark"] .login::before {
  background:
    radial-gradient(60% 55% at 12% 18%, rgba(139,124,255,.30), transparent 70%),
    radial-gradient(55% 50% at 88% 12%, rgba(125,211,252,.22), transparent 70%),
    radial-gradient(65% 60% at 78% 88%, rgba(192,132,252,.26), transparent 70%); }
@media (prefers-reduced-motion:no-preference) {
  .auth { animation:authin .35s cubic-bezier(.2,0,0,1) both; }
  @keyframes authin { from { opacity:0; transform:translateY(8px); } }
}
/* min() вместо width + max-width: на 375px карточка с фиксированными 380px
   вылезала за экран и страница ехала вбок. */
.auth { width:min(380px, 100%); display:flex; flex-direction:column; gap:14px;
  padding:28px 24px 26px; background:var(--surface);
  box-shadow:0 0 0 .5px rgba(0,0,0,.06), 0 24px 60px -20px rgba(28,26,40,.28); }
.tg-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.tg-btn svg { width:17px; height:17px; fill:currentColor; stroke:none; flex:none; }
.auth-brand { display:flex; align-items:center; justify-content:center; gap:10px; }
.auth-brand .brand-mark { width:36px; height:36px; border-radius:10px; }
.login-name { font-size:18px; font-weight:500; color:var(--text-strong); letter-spacing:-.01em; }
.login-name span { color:var(--text-strong); }
.auth-head { text-align:center; margin:2px 0 2px; }
.auth-title { font-size:28px; line-height:34px; font-weight:300; letter-spacing:-.02em;
  color:var(--text-strong); margin:0; }
.auth-sub { color:var(--text-muted); font-size:13px; line-height:18px; margin:7px 0 0; }
.auth-note { background:var(--success-tint); color:var(--success-ink); font-size:13px;
  padding:10px 12px; border-radius:var(--radius); }

.auth .field { display:flex; flex-direction:column; gap:6px; }
.auth .field label { color:var(--text-muted); font-size:13px; }
.auth input { height:40px; }
.auth button[type=submit] { height:40px; margin-top:2px; }

/* Поле пароля с глазком: вводят вслепую и ошибаются, а переспросить не у кого. */
.pw-wrap { position:relative; }
.pw-wrap input { width:100%; padding-right:40px; }
.pw-eye { position:absolute; right:4px; top:50%; transform:translateY(-50%); width:32px; height:32px;
  padding:0; border:0; background:none; box-shadow:none; color:var(--text-quiet);
  border-radius:50%; display:grid; place-items:center; }
.pw-eye:hover { background:var(--fill-subtle); color:var(--text-primary); }
.pw-eye svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; }
.pw-eye .off { display:none; }
.pw-eye[aria-pressed="true"] .on { display:none; }
.pw-eye[aria-pressed="true"] .off { display:block; }
.field-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }

.forgot { align-self:flex-end; color:var(--text-muted); font-size:13px; margin-top:-6px; }
.forgot:hover { color:var(--text-strong); }

/* Разделитель «или» между способами входа. */
.or { display:flex; align-items:center; gap:12px; color:var(--text-quiet); font-size:12.5px;
  margin:-2px 0; }
.or::before, .or::after { content:""; flex:1; height:.5px; background:var(--border-soft); }
.auth .alt { display:flex; flex-direction:column; gap:8px; }
.auth .alt .btn { width:100%; height:40px; }
/* Блок кнопки Telegram: пока домен не задан у BotFather, виджет рисует
   вместо кнопки английскую строку об ошибке — держим его по центру. */
.tg-wrap { display:flex; justify-content:center; align-items:center; min-height:40px;
  border-radius:var(--radius); overflow:hidden; }
.auth .hint { color:var(--text-muted); font-size:12.5px; line-height:17px;
  margin-top:0; padding-left:0; border-left:0; }
.back { color:var(--text-muted); font-size:13px; text-align:center; }
.back:hover { color:var(--text-strong); }
/* Код из шести цифр: моноширинный и разреженный, чтобы не слипался. */
.code-input { font-family:"JetBrains Mono", ui-monospace, monospace; font-size:20px;
  letter-spacing:.3em; text-align:center; padding-left:.3em; }

/* Чаты */
/* ── Аналитика: блоки и графики ───────────────────────────────────────── */
/* Липкая навигация по блокам: страница длинная, и возвращаться к началу
   ради перехода в другой блок — лишняя работа. */
.anav { position:sticky; top:0; z-index:20; display:flex; gap:4px; overflow-x:auto;
  scrollbar-width:none; background:var(--bg); padding:8px 0 10px;
  box-shadow:0 1px 0 var(--border-soft); margin-bottom:18px; }
.anav::-webkit-scrollbar { display:none; }
/* Своё правило, не наследуя сайдбарное: там ссылка — строка на всю
   ширину, и навигация по блокам вставала столбиком. */
.anav a { display:inline-flex; align-items:center; height:30px; flex:none; padding:0 11px;
  border-radius:var(--radius-pill); font-size:13px; color:var(--text-muted);
  white-space:nowrap; }
.anav a:hover { background:var(--fill-subtle); color:var(--text-primary); }
.anav a.on { background:var(--text-strong); color:var(--bg); }

.ablock { scroll-margin-top:64px; margin-bottom:34px; }
.ablock-head { display:flex; align-items:baseline; gap:10px; margin-bottom:12px; }
.ablock-head h2 { font-size:19px; font-weight:400; letter-spacing:-.01em; margin:0; }
.ablock-head .q { color:var(--text-quiet); font-size:13px; }
/* Вывод блока: одна строка о том, что видно и что делать. */
.verdict { display:flex; align-items:flex-start; gap:10px; margin-top:12px; padding:11px 13px;
  border-radius:var(--radius); background:var(--fill-subtle); font-size:13.5px;
  line-height:19px; color:var(--text-primary); }
.verdict .orb { margin-top:2px; }
.verdict b { font-weight:500; color:var(--text-strong); }

.kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0;
  background:var(--surface); border-radius:var(--radius-card); box-shadow:var(--ring);
  overflow:hidden; }
.kpi { padding:16px 18px 12px; border-left:.5px solid var(--border-soft); min-width:0; }
.kpi:first-child { border-left:0; }
.kpi-l { color:var(--text-muted); font-size:13px; }
.kpi-v { font-size:28px; line-height:34px; font-weight:300; letter-spacing:-.02em;
  color:var(--text-strong); font-variant-numeric:tabular-nums; margin-top:2px; }
.kpi-row { display:flex; align-items:baseline; gap:8px; margin-top:4px; flex-wrap:wrap; }
.kpi-d { font-size:12.5px; font-variant-numeric:tabular-nums; }
.kpi-d.up { color:var(--success-ink); }
.kpi-d.down { color:var(--error-ink); }
.kpi-d.flat { color:var(--text-quiet); }
.kpi-n { color:var(--text-quiet); font-size:12.5px; }
.spark { display:block; width:100%; height:28px; margin-top:8px; color:var(--text-quiet); }
.spark.ai { color:var(--ai); }
@media (max-width:980px) { .kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kpi:nth-child(odd) { border-left:0; }
  .kpi:nth-child(n+3) { border-top:.5px solid var(--border-soft); } }
@media (max-width:520px) { .kpis { grid-template-columns:1fr; }
  .kpi { border-left:0; }
  .kpi:nth-child(n+2) { border-top:.5px solid var(--border-soft); } }

/* Зеркальный график: обращения вверх, заявки вниз от общей оси. */
.dm { background:var(--surface); border-radius:var(--radius-card); box-shadow:var(--ring);
  padding:14px 12px 10px; margin-top:14px; }
.dm svg { display:block; width:100%; height:190px; }
.dm-axis { stroke:var(--border); stroke-width:1; }
.dm-up { fill:var(--sand); }
.dm-dn { fill:var(--text-strong); }
.dm-hit { fill:transparent; }
.dm-col.on .dm-up { fill:var(--border-strong); }
.dm-col.on .dm-dn { fill:var(--brand-hover); }
.dm-x { fill:var(--text-quiet); font-size:11px; }
.dm-key { display:flex; gap:16px; color:var(--text-muted); font-size:12.5px; padding:6px 4px 0; }
.dm-key i { display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:6px; }
.dm-key i.up { background:var(--sand); }
.dm-key i.dn { background:var(--text-strong); }

/* Вертикальный ритм между блоками: лента показателей и таблица стояли
   вплотную и читались как один слипшийся кусок. */
.stats + *, .table-wrap + *, .sb + *, .cy + *, .dm + *, .kpis + * { margin-top:16px; }

/* Полосы этапов: длина — объём, конверсия точкой справа. */
.sb { background:var(--surface); border-radius:var(--radius-card); box-shadow:var(--ring);
  padding:8px 14px; }
.sb-row { display:grid; grid-template-columns:132px minmax(0,1fr) 68px 62px; gap:12px;
  align-items:center; padding:9px 0; border-bottom:.5px solid var(--border-soft);
  color:var(--text-primary); }
.sb-row:last-child { border-bottom:0; }
.sb-row.on, a.sb-row:hover { background:rgba(0,0,0,.02); }
.sb-n { font-size:13.5px; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.sb-track { display:block; height:16px; border-radius:4px; background:var(--fill-subtle);
  overflow:hidden; }
.sb-track i { display:block; height:100%; border-radius:4px; }
.sb-v { text-align:right; font-variant-numeric:tabular-nums; color:var(--text-strong);
  font-size:13.5px; }
.sb-c { text-align:right; font-variant-numeric:tabular-nums; font-size:13px;
  color:var(--text-quiet); }
.sb-c::before { content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:currentColor; margin-right:6px; vertical-align:middle; }
.sb-c.ok { color:var(--success-ink); }
.sb-c.warn { color:var(--warning-ink); }
.sb-c.bad { color:var(--error-ink); }
.sb-c.lost { color:var(--text-quiet); }
@media (max-width:720px) { .sb-row { grid-template-columns:96px minmax(0,1fr) 52px 54px; gap:8px; } }
/* Телефон: четыре колонки в одну строку не помещаются — название и числа
   сверху, полоса под ними во всю ширину. Четырёхколоночная строка была
   единственным, что растягивало всю страницу обзора. */
@media (max-width:520px) {
  .sb-row { grid-template-columns:minmax(0,1fr) auto auto; gap:4px 10px; padding:9px 6px; }
  .sb-n { grid-column:1; grid-row:1; }
  .sb-v { grid-column:2; grid-row:1; }
  .sb-c { grid-column:3; grid-row:1; }
  .sb-track { grid-column:1 / -1; grid-row:2; height:10px; }
}

/* За сколько покупают: столбики сделок и заработка, переключатель метрики. */
.cy { background:var(--surface); border-radius:var(--radius-card); box-shadow:var(--ring);
  padding:14px 16px 12px; }
.cy-switch { display:inline-flex; gap:2px; background:var(--fill-subtle);
  border-radius:var(--radius-pill); padding:3px; margin-bottom:12px; }
.cy-switch button { height:26px; padding:0 12px; font-size:12.5px; background:none;
  box-shadow:none; color:var(--text-muted); border:0; border-radius:var(--radius-pill); }
.cy-switch button.on { background:var(--surface); color:var(--text-strong); box-shadow:var(--ring); }
.cy-plot { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:10px;
  align-items:end; }
.cy-col { min-width:0; text-align:center; }
.cy-bars { height:128px; display:flex; align-items:flex-end; justify-content:center; }
.cy-bars i { display:block; width:100%; max-width:54px; border-radius:6px 6px 2px 2px;
  background:var(--sand); transition:height .2s cubic-bezier(.2,0,0,1); }
.cy-col.first .cy-bars i { background:var(--text-strong); }
.cy[data-metric="deals"] .cy-bars i.m, .cy[data-metric="margin"] .cy-bars i.d { display:none; }
.cy[data-metric="deals"] .cy-v .m, .cy[data-metric="margin"] .cy-v .d { display:none; }
.cy-v { font-size:13px; color:var(--text-strong); font-variant-numeric:tabular-nums;
  margin-top:8px; }
.cy-l { font-size:12px; color:var(--text-muted); margin-top:2px; line-height:15px; }
@media (max-width:720px) { .cy-plot { grid-auto-flow:row; grid-auto-columns:auto; }
  .cy-col { display:grid; grid-template-columns:110px minmax(0,1fr) auto; gap:10px;
    align-items:center; text-align:left; }
  .cy-bars { height:14px; order:2; }
  .cy-bars i { height:14px !important; max-width:none; border-radius:7px; }
  .cy-l { order:1; margin:0; } .cy-v { order:3; margin:0; } }

/* Карта направлений: тёмное полотно — единственный тёмный блок в светлом
   интерфейсе, потому что океан и подсветка стран иначе не читаются. */
.geo { background:var(--surface); border-radius:var(--radius-card); box-shadow:var(--ring);
  padding:14px 16px 16px; }
.geo-top { display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:12px; flex-wrap:wrap; }
.geo-switch { display:inline-flex; gap:2px; background:var(--fill-subtle);
  border-radius:var(--radius-pill); padding:3px; }
.geo-switch button { height:26px; padding:0 12px; font-size:12.5px; background:none;
  box-shadow:none; color:var(--text-muted); border:0; border-radius:var(--radius-pill); }
.geo-switch button.on { background:var(--surface); color:var(--text-strong); box-shadow:var(--ring); }
.geo-zoom { display:inline-flex; gap:2px; }
.geo-zoom button { height:26px; min-width:28px; padding:0 9px; font-size:13px; background:none;
  color:var(--text-muted); border:0; border-radius:var(--radius-sm); box-shadow:var(--ring); }
.geo-zoom button:hover { color:var(--text-strong); background:var(--fill-subtle); }
/* Карта и список рядом: наведение подсвечивает обе стороны, клик по
   стране раскрывает её здесь же, а не уводит на страницу заявок. */
.geo-wrap { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:16px;
  align-items:start; }
.geo-map { position:relative; background:#0E1626; border-radius:var(--radius); overflow:hidden;
  cursor:grab; }
.geo-map:active { cursor:grabbing; }
.geo-map svg { display:block; width:100%; height:auto; }
.geo-map path.c { fill:#1A2338; stroke:#0E1626; stroke-width:.4; transition:fill .2s ease-out; }
.geo-map path.c.hot { stroke:#FFFFFF; stroke-width:1.2; }
.geo-map .arcs path { fill:none; stroke:#8FC2FF; stroke-opacity:.45; stroke-linecap:round; }
.geo-map .dots circle { fill:#CFE4FF; fill-opacity:.9; stroke:#0E1626; stroke-width:1;
  transition:r .2s ease-out; }
.geo-map .dots circle.hot { fill:#FFFFFF; }
/* Дом: страна, из которой летят. Светлее остальных, но без заливки
   метрикой — на карте «куда летают» он отвечает за «откуда». */
.geo-map path.c.home { stroke:#9FC4FF; stroke-opacity:.9; }
/* Подпись страны мешает только мешать: она не кликается. Города —
   наоборот, ими выбирают, откуда смотреть вылеты. */
.geo-map .home-name { fill:#DCE7F7; font-size:14px; font-weight:500; letter-spacing:.02em;
  pointer-events:none; }
.geo-map .home-dot { fill:#FFFFFF; fill-opacity:.95; cursor:pointer; }
.geo-map .home-city { fill:#C3D3EA; font-size:11px; cursor:pointer; }
.geo-map .home-dot:hover, .geo-map .home-city:hover { fill:#FFFFFF; }
.geo-map .home-dot.off { fill-opacity:.35; }
.geo-origin { margin-left:8px; }
/* Мини-справка у курсора: тёмная, как и карта, иначе она выглядит
   приклеенной из другого интерфейса. */
.geo-tip { position:absolute; z-index:5; pointer-events:none; width:188px;
  background:rgba(14,22,38,.96); box-shadow:0 0 0 .5px rgba(143,194,255,.3), var(--shadow-pop);
  border-radius:12px; padding:10px 12px; color:#E7EDF7; }
.geo-tip .t-h { display:flex; align-items:center; gap:7px; font-size:13px; }
.geo-tip .t-h b { font-weight:500; }
.geo-tip .t-v { font-size:17px; margin:4px 0 8px; font-variant-numeric:tabular-nums; }
.geo-tip .t-v span { font-size:11px; color:#8FA6C8; }
.geo-tip .t-r { display:flex; justify-content:space-between; gap:8px; font-size:11.5px;
  color:#8FA6C8; line-height:18px; }
.geo-tip .t-r b { color:#E7EDF7; font-weight:400; font-variant-numeric:tabular-nums; }
.geo-tip .t-c { margin-top:7px; padding-top:7px; font-size:11px; color:#8FA6C8;
  border-top:.5px solid rgba(143,194,255,.18); }
.geo-side { min-width:0; }
.geo-list { display:flex; flex-direction:column; max-height:452px; overflow-y:auto;
  margin:0 -6px; padding:0 2px 0 6px; }
.geo-head { display:flex; align-items:baseline; gap:8px; padding-bottom:6px;
  border-bottom:.5px solid var(--border-soft); margin-bottom:6px; }
.geo-head b { font-size:22px; font-weight:300; letter-spacing:-.02em; color:var(--text-strong);
  font-variant-numeric:tabular-nums; }
/* Строка на страну — ровно одна строка.
   Два этажа (страна с числом сверху, курорты с деньгами снизу) читались
   не как одна запись, а как чересполосица: подпись курортов висела ближе
   к следующей стране, чем к своей. Курорты теперь живут в подсказке на
   карте и в карточке страны, а в списке остаётся то, по чему его
   просматривают: флаг, страна и две цифры. */
.geo-row { display:grid; grid-template-columns:20px minmax(0,1fr) auto auto; gap:0 10px;
  align-items:center; height:38px; padding:0 8px; width:100%;
  border:0; background:none; text-align:left; box-shadow:none;
  border-bottom:.5px solid var(--border-soft); border-radius:var(--radius-sm); }
.geo-row:last-child { border-bottom:0; }
.geo-row:hover, .geo-row.hot { background:var(--fill-subtle); }
.geo-flag { font-size:16px; line-height:1; }
.geo-name { font-size:13.5px; color:var(--text-strong);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.geo-v { text-align:right; font-variant-numeric:tabular-nums; font-size:13.5px;
  color:var(--text-strong); white-space:nowrap; }
.geo-m { text-align:right; color:var(--text-quiet); font-size:12px; white-space:nowrap;
  font-variant-numeric:tabular-nums; min-width:76px; }
.geo-unknown { margin:10px 0 0; }
/* display у списка и карточки свой, поэтому служебный hidden нужно
   проговорить явно — иначе скрытый блок остаётся на экране. */
.geo-list[hidden], .geo-card[hidden], .geo-row[hidden] { display:none; }
/* Карточка страны встаёт на место списка — человек остаётся на карте. */
.geo-card { display:flex; flex-direction:column; }
.geo-back { align-self:flex-start; padding:0; height:24px; font-size:12.5px; border:0;
  background:none; box-shadow:none; color:var(--text-quiet); }
.geo-back:hover { color:var(--text-strong); background:none; }
.geo-card-h { display:flex; align-items:center; gap:8px; margin-top:6px; font-size:15px;
  color:var(--text-strong); }
.geo-card-h span { font-size:20px; line-height:1; }
.geo-card-h b { font-weight:500; }
.geo-card-v { font-size:26px; font-weight:300; letter-spacing:-.02em; color:var(--text-strong);
  margin:4px 0 10px; font-variant-numeric:tabular-nums; }
.geo-card-v span { font-size:12px; color:var(--text-quiet); letter-spacing:0; }
.geo-card-g > div { display:flex; justify-content:space-between; gap:10px; padding:6px 0;
  font-size:12.5px; color:var(--text-muted); border-bottom:.5px solid var(--border-soft); }
.geo-card-g > div:last-child { border-bottom:0; }
.geo-card-g b { font-weight:400; color:var(--text-strong); font-variant-numeric:tabular-nums; }
.geo-card-c { margin-top:10px; font-size:12px; }
.geo-card-c span { color:var(--text-quiet); }
.geo-card-c p { margin:2px 0 0; color:var(--text-primary); }
.geo-open { margin-top:14px; justify-content:center; }
@media (max-width: 900px) {
  .geo-wrap { grid-template-columns:minmax(0,1fr); }
  .geo-list { max-height:none; }
}

/* Шаблоны WABA: кнопка в композере и список над ним. Вне 24 часов
   свободный текст не доходит, и выбор шаблона — не украшение, а
   единственный способ написать клиенту. */
.tpl-wrap { position:relative; }
.tpl-pop { position:absolute; bottom:calc(100% + 8px); left:0; z-index:50;
  width:min(420px, 86vw); max-height:320px; overflow-y:auto; background:var(--surface);
  border-radius:var(--radius-card); box-shadow:var(--shadow-pop); padding:8px; }
.tpl-pop[hidden] { display:none; }
.tpl-i { display:block; width:100%; text-align:left; border:0; background:none; box-shadow:none;
  padding:9px 10px; border-radius:var(--radius-sm); }
.tpl-i:hover { background:var(--fill-subtle); }
.tpl-i b { display:block; font-size:13px; font-weight:500; color:var(--text-strong); }
.tpl-i span { display:block; font-size:12px; color:var(--text-quiet); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tpl-vars { display:flex; flex-direction:column; gap:6px; padding:8px 10px; }
.tpl-vars input { width:100%; height:32px; font-size:13px; }
.tpl-empty { padding:14px; font-size:13px; color:var(--text-quiet); }

/* Знак ИИ: один значок на все места, где это нужно сказать. */
.aimark { display:inline-flex; align-items:center; vertical-align:middle; margin-left:5px;
  color:var(--ai); }
.aimark svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.4;
  stroke-linejoin:round; }
.aimark.ok { color:var(--ok, #22A06B); }
.aimark.muted { color:var(--text-quiet); }
/* Повторный клиент: уже покупал. Монетка рядом с именем, без заливки строки. */
.buyer-mark { display:inline-flex; align-items:center; justify-content:center; vertical-align:middle;
  margin-left:5px; width:15px; height:15px; border-radius:50%; font-size:10px; font-weight:700;
  color:#8A5A00; background:#FCE7B2; flex:none; }
:root[data-theme="dark"] .buyer-mark { color:#FCE7B2; background:#5C4310; }
/* Предупреждение о блокировке номера. Жёлтым, а не красным: это не
   ошибка, а решение, которое человек принимает сам. */
.tpl-warn { display:flex; gap:8px; align-items:flex-start; margin:2px 0 4px;
  padding:9px 10px; border-radius:var(--radius-sm); background:var(--warn-soft, rgba(240,180,60,.12));
  font-size:12px; line-height:1.45; color:var(--text-muted); cursor:pointer; }
.tpl-warn input { width:14px; height:14px; margin-top:2px; flex:0 0 auto; }
.tpl-warn b { color:var(--text-strong); font-weight:500; }

/* --- ИИ-агент: рабочее место, а не страница настроек ------------------ */
/* Вкладок у агента много, и на узкой колонке они переносились второй
   строкой с одинокой вкладкой на конце — выглядело как сломанная
   вёрстка. Лента прокручивается вбок, полоса прокрутки спрятана. */
.ag-tabs { margin-bottom:16px; display:flex; flex-wrap:nowrap; max-width:100%;
  overflow-x:auto; scrollbar-width:none; }
.ag-tabs::-webkit-scrollbar { display:none; }
.ag-tabs a { flex:none; white-space:nowrap; }
/* Настройки живут в левой колонке рабочего места, поэтому внутри себя
   они одноколоночные: вторая колонка осталась от старой раскладки
   и держала полстраницы пустоты. */
.ag-grid { display:flex; flex-direction:column; gap:14px; }
.ag-card { padding:18px; }
.ag-card h3 { margin:0 0 12px; font-size:15px; font-weight:500; color:var(--text-strong); }
.ag-head { display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.ag-head b { display:block; font-size:15px; font-weight:500; color:var(--text-strong); }
.ag-head .sub { font-size:12.5px; }
.ag-mode { margin-left:auto; display:flex; align-items:center; gap:10px; }
/* Три состояния вместо галочки и выпадашки: решение одно, и оно видно
   целиком, вместе с ценой каждого варианта. */
.ag-states { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-bottom:18px; }
.ag-state { display:block; padding:10px 12px; border-radius:var(--radius); cursor:pointer;
  background:var(--surface-warm); box-shadow:var(--ring); }
.ag-state input { position:absolute; opacity:0; pointer-events:none; }
.ag-state b { display:block; font-size:13px; font-weight:500; color:var(--text-primary); }
.ag-state span { display:block; font-size:11.5px; color:var(--text-quiet); line-height:15px;
  margin-top:2px; }
.ag-state.on { background:var(--surface); box-shadow:0 0 0 1px var(--text-strong); }
.ag-state.on b { color:var(--text-strong); }

/* Тонкая настройка свёрнута: двадцать полей заставляют принимать
   двадцать решений, из которых девятнадцать принимать не нужно. */
.ag-more { grid-column:1 / -1; padding:14px 18px; }
.ag-more > summary { cursor:pointer; list-style:none; display:flex; align-items:baseline; gap:10px;
  flex-wrap:wrap; }
.ag-more > summary::-webkit-details-marker { display:none; }
.ag-more > summary b { font-size:14px; font-weight:500; color:var(--text-strong); }
.ag-more-body { margin-top:16px; padding-top:16px; border-top:.5px solid var(--border-soft);
  columns:2; column-gap:22px; }
.ag-more-body > * { break-inside:avoid; }
@media (max-width:900px) { .ag-more-body { columns:1; } .ag-states { grid-template-columns:1fr; } }

.ag-f { display:block; margin-bottom:14px; }
.ag-l { display:flex; align-items:center; font-size:13px; color:var(--text-strong); margin-bottom:6px; }
.ag-h { display:block; font-size:12px; color:var(--text-quiet); margin-bottom:6px; }
.ag-f input, .ag-f select, .ag-f textarea, .ag-k input, .ag-k textarea {
  width:100%; max-width:none; font:inherit; font-size:13.5px; color:var(--text-strong);
  background:var(--surface-warm); border:0; border-radius:var(--radius-sm);
  box-shadow:var(--ring); padding:9px 11px; }
.ag-f textarea, .ag-k textarea { line-height:19px; resize:vertical; }
.ag-f input:focus, .ag-f select:focus, .ag-f textarea:focus,
.ag-k input:focus, .ag-k textarea:focus { outline:none; box-shadow:0 0 0 1px var(--text-strong); }
.ag-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ag-chk { display:inline-flex; align-items:center; gap:7px; font-size:13px;
  color:var(--text-primary); cursor:pointer; }
.ag-chk input { width:16px; height:16px; accent-color:var(--text-strong); }
.ag-chks { display:flex; flex-direction:column; gap:7px; }
/* Канал: галочка «отвечать здесь» и то немногое, что здесь другое. */
.ag-chans { display:flex; flex-direction:column; gap:6px; }
.ag-chan { background:var(--surface-warm); border-radius:var(--radius); padding:10px 12px; }
.ag-chan.on { box-shadow:var(--ring); background:var(--surface); }
.ag-chan > summary { display:flex; align-items:center; gap:10px; cursor:pointer;
  list-style:none; }
.ag-chan > summary::-webkit-details-marker { display:none; }
.ag-chan-body { margin-top:12px; padding-top:12px; border-top:.5px solid var(--border-soft); }
.ag-chan-foot { display:flex; align-items:center; gap:10px; margin-top:8px; }
.ag-save { display:flex; align-items:center; gap:12px; margin-top:16px; padding-top:14px;
  border-top:.5px solid var(--border-soft); }
.ag-vers { display:flex; flex-direction:column; gap:8px; }
.ag-ver { display:flex; gap:10px; align-items:baseline; font-size:12.5px;
  color:var(--text-quiet); }
.ag-ver b { font-weight:400; color:var(--text-primary); }

/* Рабочее место раздела: настройки слева, живая проверка справа.
   Правка без проверки рядом превращается в веру: поменял характер и
   пошёл смотреть результат в другое место. */
.ag-work { display:grid; grid-template-columns:minmax(0,2fr) minmax(320px,1fr); gap:18px;
  align-items:start; }
.ag-left { min-width:0; }
/* Верхняя плашка в 48 пикселей липкая, поэтому проверка прилипает ниже
   неё — иначе при прокрутке она уезжала под плашку. */
.ag-right { position:sticky; top:60px; }

.ag-test { display:flex; flex-direction:column; padding:14px 16px; }
.ag-test-head { display:flex; align-items:center; gap:8px; }
.ag-test-head b { font-size:14px; font-weight:500; color:var(--text-strong); }
.ag-test-sub { margin:4px 0 10px; font-size:12px; color:var(--text-quiet); }
.ag-test-who { all:unset; display:flex; align-items:center; gap:10px; cursor:pointer; padding:4px 8px 4px 4px; margin:-4px; border-radius:12px; }
.ag-test-who:hover { background:var(--fill-subtle); }
.ag-test-who span { display:flex; flex-direction:column; line-height:1.25; }
.ag-test-who b { font-size:14.5px; font-weight:500; color:var(--text-strong); }
.ag-test-who small { font-size:12px; color:var(--text-muted); }
/* Тестовый чат всегда в пределах экрана: размер фиксированный, листаются
   только сообщения внутри. */
.ag-test { height:min(620px, calc(100vh - 96px)); min-height:420px; }
.ag-body { position:relative; flex:1; min-height:0; display:flex; flex-direction:column; margin-top:10px; }
.ag-test .ag-chat { flex:1; height:auto; min-height:0; max-height:none; margin-top:0; overflow-y:auto; }
.ag-drawer { position:absolute; left:0; right:0; top:0; z-index:30; max-height:75%; overflow:auto; padding:6px 10px 10px;
  border-radius:12px; background:var(--surface); box-shadow:var(--ring), 0 12px 24px rgba(0,0,0,.12); animation:agdrop .18s ease-out; }
.ag-drawer[hidden] { display:none; }
@keyframes agdrop { from { transform:translateY(-6px); opacity:0; } }
.ag-fact { display:grid; grid-template-columns:104px minmax(0,1fr); gap:10px; padding:7px 6px; border-radius:8px; font-size:13px; }
.ag-fact + .ag-fact { border-top:.5px solid var(--border-soft); }
.ag-fact span { color:var(--text-muted); }
.ag-fact b { font-weight:500; color:var(--text-primary); overflow-wrap:anywhere; }
.ag-fact.new { animation:agnew 1.8s ease-out; }
@keyframes agnew { 0% { background:color-mix(in srgb, var(--success) 22%, transparent); } 100% { background:transparent; } }
.ag-drawer-empty { margin:6px; font-size:13px; color:var(--text-muted); }
.ag-sum-count { display:inline-grid; place-items:center; min-width:18px; height:18px; margin-left:6px; padding:0 5px; border-radius:99px;
  font-style:normal; font-size:11px; font-weight:600; background:var(--success); color:#fff; vertical-align:1px; }
.ag-sum-count[hidden] { display:none; }
.ag-test-who.bump .ag-sum-count { animation:agbump .6s ease-out; }
.ag-test-who.bump { animation:agglow 1.2s ease-out; }
@keyframes agbump { 30% { transform:scale(1.35); } }
@keyframes agglow { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--success) 40%, transparent); } 100% { box-shadow:0 0 0 10px transparent; } }
.ag-chev { width:16px; height:16px; fill:none; stroke:var(--text-muted); stroke-width:1.8; transition:transform .15s; }
.ag-test-who[aria-expanded="true"] .ag-chev { transform:rotate(180deg); }
.ag-test-who small { max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ag-tlabel { display:flex; align-items:center; font-size:13px; color:var(--text-muted); margin-bottom:6px; }
.ag-tsw { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; font-size:14px; cursor:pointer;
  border-top:.5px solid var(--border-soft); }
.ag-tsw input { position:absolute; opacity:0; pointer-events:none; }
.ag-tsw input:checked + .ag-sw-btn { background:var(--success); }
.ag-tsw input:checked + .ag-sw-btn i { transform:translateX(14px); }
.ag-whorow { display:flex; gap:8px; margin-bottom:12px; }
.ag-whorow select { width:140px; flex:none; }
.ag-whorow input { flex:1; min-width:0; }
@media (max-width:1100px) { .ag-test { height:560px; } }
.ag-hint { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; height:100%; text-align:center; padding:0 12px; }
.ag-hint b { font-size:14px; font-weight:500; color:var(--text-primary); }
.ag-hint span { font-size:12.5px; color:var(--text-muted); }
/* Подсказки плавают поверх низа переписки: фон прозрачный, сообщения
   прокручиваются под ними, а не срезаются полосой. */
.ag-sugg { position:absolute; left:0; right:0; bottom:6px; z-index:5; display:flex; gap:6px; justify-content:flex-start;
  overflow-x:auto; scrollbar-width:none; pointer-events:none; padding:0 22px 0 12px; }
.ag-sugg button { pointer-events:auto; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  background:color-mix(in srgb, var(--ai) 9%, color-mix(in srgb, var(--surface) 75%, transparent)) !important;
  border-color:color-mix(in srgb, var(--ai) 38%, transparent) !important; }
.ag-sugg button:hover { background:color-mix(in srgb, var(--ai) 16%, var(--surface)) !important; }
.ag-body:has(.ag-sugg button) .ag-chat { padding-bottom:50px; }
/* all:unset у кнопок наследует pointer-events:none от полосы — возвращаем клики. */
.ag-sugg > button { pointer-events:auto !important; }
.ag-sugg::-webkit-scrollbar { display:none; }
.ag-sugg:empty { display:none; }
/* Быстрые ответы — как в мессенджерах: тонкая обводка, одна строка. */
.ag-sugg { background:transparent; }
.ag-sugg button { all:unset; flex:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px; padding:6px 12px 6px 9px;
  border-radius:16px; font-size:13px; line-height:1.3; white-space:nowrap; background:transparent;
  color:var(--text-strong); border:1px solid var(--border-strong); transition:background .12s, border-color .12s; }
.ag-sugg button svg { width:13px; height:13px; fill:var(--ai); stroke:none; flex:none; }
.ag-sugg button:hover { background:var(--fill-subtle); border-color:var(--text-muted); }
.ag-sugg button svg { width:15px; height:15px; }
/* Перемотка времени — не подсказка ИИшки: зеленая, со значком часов. */
.ag-sugg button.skip { color:var(--success-ink, #15803d); background:color-mix(in srgb, var(--success) 10%, color-mix(in srgb, var(--surface) 80%, transparent)) !important;
  border-color:color-mix(in srgb, var(--success) 40%, transparent) !important; }
.ag-sugg button.skip:hover { background:color-mix(in srgb, var(--success) 18%, var(--surface)) !important; }
.ag-sugg button.skip svg { fill:none; stroke:var(--success); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
/* Файл из базы файлов в тестовом чате. */
.ag-msg.ag-file { display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; max-width:78%; }
.ag-msg.ag-file i { width:36px; height:36px; flex:none; border-radius:10px; display:grid; place-items:center; background:var(--surface); }
.ag-msg.ag-file i svg { width:18px; height:18px; fill:none; stroke:var(--text-muted); stroke-width:1.6; stroke-linejoin:round; }
.ag-msg.ag-file span { font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ag-msg.ag-file:has(img) { flex-direction:column; align-items:stretch; padding:4px 4px 8px; }
.ag-msg.ag-file img { display:block; width:220px; max-width:100%; border-radius:12px; }
.ag-msg.ag-file:has(img) span { padding:0 6px; }
/* Голосовое: дорожка в пузыре и полоса записи вместо поля ввода. */
.ag-msg.voice { display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-width:210px; }
.ag-vplay { all:unset; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:color-mix(in srgb, var(--bg) 22%, transparent); }
.ag-vplay svg { width:14px; height:14px; fill:currentColor; }
.ag-msg.voice.playing .ag-vplay svg { opacity:.5; }
.ag-vwave { display:flex; align-items:center; gap:2px; height:22px; flex:1; }
.ag-vwave i { width:2px; border-radius:2px; background:currentColor; opacity:.7; }
.ag-vwave i:nth-child(3n) { height:14px } .ag-vwave i:nth-child(3n+1) { height:8px } .ag-vwave i:nth-child(3n+2) { height:18px }
.ag-msg.voice.playing .ag-vwave i { animation:agvw .9s ease-in-out infinite; }
@keyframes agvw { 50% { transform:scaleY(.4); } }
.ag-vdur { font-size:12px; opacity:.8; font-variant-numeric:tabular-nums; }
.ag-vtx { all:unset; cursor:pointer; font-size:12px; opacity:.85; text-decoration:underline; text-underline-offset:2px; }
.ag-vt { flex-basis:100%; font-size:13px; line-height:1.45; padding-top:4px; border-top:1px solid color-mix(in srgb, currentColor 20%, transparent); }
.ag-vt[hidden] { display:none; }
.ag-recbar { flex:1; display:flex; align-items:center; gap:8px; min-width:0; height:38px; padding:0 4px 0 2px; }
.ag-recbar[hidden] { display:none; }
.ag-recdot { width:9px; height:9px; border-radius:50%; background:var(--error); animation:agpulse 1.2s ease-in-out infinite; flex:none; }
.ag-recbar b { font-size:13.5px; font-weight:500; font-variant-numeric:tabular-nums; min-width:34px; }
.ag-recwave { flex:1; display:flex; align-items:center; gap:3px; height:20px; overflow:hidden; }
.ag-recwave i { width:3px; height:6px; border-radius:2px; background:var(--error); animation:iawave 1s ease-in-out infinite; }
.ag-recwave i:nth-child(2n) { animation-delay:.15s } .ag-recwave i:nth-child(3n) { animation-delay:.3s }
.ag-recbar.paused .ag-recdot, .ag-recbar.paused .ag-recwave i { animation:none; background:var(--text-quiet); }
.ag-recbar .icon-btn svg { width:17px; height:17px; }
#agrecplay svg { fill:currentColor; stroke:none; }
/* Что ИИшка записала в заявку — разделителем, как «прошло 10 минут». */
.ag-factnote { align-self:stretch; display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--success-ink);
  cursor:pointer; animation:agfact .5s ease-out; }
.ag-factnote::before, .ag-factnote::after { content:""; flex:1; border-top:1px dashed color-mix(in srgb, var(--success) 45%, transparent); }
.ag-factnote span { display:inline-flex; align-items:center; gap:5px; }
.ag-factnote svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.ag-factnote:hover span { text-decoration:underline; text-underline-offset:2px; }
@keyframes agfact { from { opacity:0; transform:translateY(6px); } }
.ag-ask input { border-radius:20px; padding:9px 14px; }
.ag-round { all:unset; flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:var(--text-strong); color:var(--bg); transition:transform .12s; }
.ag-round[hidden] { display:none; }
.ag-round:active { transform:scale(.92); }
.ag-round svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ag-round.ag-mic { background:var(--fill-subtle); color:var(--text-strong); }
.ag-round.ag-mic.on { background:var(--error); color:#fff; animation:agpulse 1.2s ease-in-out infinite; }
.ag-test .ag-meta { margin:8px 0 0; padding:6px 10px; font-size:12px; }
.ag-meta[hidden] { display:none; }
.ag-test .ag-chat { margin-top:10px; }
.ag-ask { align-items:center; }
.ag-ask .ag-clip { flex:none; cursor:pointer; color:var(--text-muted); }
@keyframes agpulse { 50% { opacity:.6; } }
.ag-hist-h { font-size:11.5px; color:var(--text-quiet); margin:10px 0 2px; }
.ag-chat { display:flex; flex-direction:column; gap:8px; min-height:260px;
  max-height:min(52vh, 460px); overflow-y:auto; padding:2px 2px 10px; }
.ag-msg-acts { display:flex; gap:2px; margin-top:4px; margin-left:-6px; }
.ag-msg-acts .icon-btn { width:24px; height:24px; }
.ag-msg-acts .icon-btn svg { width:13px; height:13px; }
.ag-msg-acts .icon-btn.on { color:var(--text-strong); }
/* Что агент понял — свёрнутой строкой: раскрытая карточка занимала
   пол-панели и выдавливала поле ввода за край. */
.ag-sum { margin:4px 0 10px; background:var(--surface-warm); border-radius:var(--radius);
  padding:9px 12px; }
.ag-sum[hidden] { display:none; }
.ag-sum > summary { display:flex; align-items:center; gap:8px; cursor:pointer; list-style:none;
  font-size:12.5px; color:var(--text-strong); }
.ag-sum > summary::-webkit-details-marker { display:none; }
.ag-sum > summary::after { content:""; margin-left:auto; width:7px; height:7px; flex:none;
  border-right:1.5px solid var(--text-quiet); border-bottom:1.5px solid var(--text-quiet);
  transform:rotate(45deg) translateY(-2px); transition:transform .15s ease-out; }
.ag-sum[open] > summary::after { transform:rotate(-135deg) translateY(-2px); }
.ag-sum-t { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.ag-sum-body { display:flex; flex-direction:column; gap:7px; margin-top:10px; padding-top:10px;
  border-top:.5px solid var(--border-soft); max-height:40vh; overflow-y:auto; }
.ag-sum-body > div { display:flex; justify-content:space-between; gap:10px; font-size:12.5px; }
.ag-sum-body span { color:var(--text-quiet); flex:none; }
.ag-sum-body b { font-weight:400; color:var(--text-strong); text-align:right;
  overflow-wrap:anywhere; }
/* Мета-данные чата — своей строкой под шапкой проверки. Раньше они лежали
   внутри свёрнутой «Заявки», и их там просто не находили. */
.ag-meta { display:flex; gap:8px; margin:0 0 10px; padding:8px 11px;
  border-radius:var(--radius); background:var(--surface-warm);
  font-size:12px; line-height:17px; }
.ag-meta-l { flex:none; color:var(--text-quiet); }
.ag-meta-v { color:var(--text-muted); }
.ag-wait { margin-top:8px; font-size:12px; color:var(--text-quiet); }

/* Своя подсказка вместо нативного title.
   Браузер рисует нативную сам и не убирает её, когда узел исчез из-под
   курсора, — а кнопки оценки перерисовываются после каждого ответа,
   и подсказка «Ответ мимо» залипала поверх шапки. Эта живёт внутри
   кнопки и исчезает вместе с ней. */
[data-hint] { position:relative; }
/* Координаты ставит скрипт, а позиционирование — fixed: иначе подсказку
   обрезает любой предок со скрытым переполнением, а у кнопки с краю она
   уезжает за экран. */
[data-hint]::after {
  content:attr(data-hint); position:fixed; left:var(--hint-x, 50%); top:var(--hint-y, 0);
  transform:translate(-50%, -100%); white-space:nowrap; max-width:min(280px, 90vw);
  overflow:hidden; text-overflow:ellipsis; padding:5px 8px; border-radius:7px;
  background:var(--text-strong); color:var(--bg); font-size:11.5px; line-height:1.3;
  opacity:0; pointer-events:none; transition:opacity .12s ease-out; z-index:200; }
[data-hint]:hover::after, [data-hint]:focus-visible::after { opacity:1; }
/* Окно «что не так»: своё, а не системный prompt браузера. */
.ag-why-pop { width:min(440px, 92vw); }
.ag-why-pop textarea { width:100%; font:inherit; font-size:13.5px; line-height:19px;
  color:var(--text-strong); background:var(--surface-warm); border:0;
  border-radius:var(--radius-sm); box-shadow:var(--ring); padding:10px 12px; resize:vertical; }
.ag-why-pop textarea:focus { outline:none; box-shadow:0 0 0 1px var(--text-strong); }
.ag-why-foot { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
.ag-ask .btn { width:38px; padding:0; display:grid; place-items:center; }

/* Что умеет: список по смысловым блокам. Плитка из двенадцати
   одинаковых карточек читалась как стена. */
.ag-group { margin-bottom:22px; }
.ag-group h3 { margin:0 0 8px; font-size:13px; font-weight:400; color:var(--text-quiet); }
.ag-acts { background:var(--surface); border-radius:var(--radius-card); box-shadow:var(--ring); }
.ag-acts > :first-child { border-radius:var(--radius-card) var(--radius-card) 0 0; }
.ag-acts > :last-child { border-radius:0 0 var(--radius-card) var(--radius-card); }
.ag-act { display:grid; grid-template-columns:34px minmax(0,1fr) auto auto; gap:12px;
  align-items:center; padding:12px 14px; border-bottom:.5px solid var(--border-soft); }
.ag-act:last-child { border-bottom:0; }
.ag-act-i { width:34px; height:34px; display:grid; place-items:center; border-radius:10px;
  background:var(--fill-subtle); color:var(--text-muted); }
.ag-act-i svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; }
.ag-act.ok .ag-act-i { color:var(--success); }
.ag-act.soon .ag-act-i { opacity:.55; }
.ag-act-t { min-width:0; }
.ag-act-t b { display:block; font-size:13.5px; font-weight:500; color:var(--text-strong); }
.ag-act-t p { margin:2px 0 0; font-size:12.5px; line-height:17px; color:var(--text-muted); }
.ag-act-pad { width:1px; }
.ag-group-h { display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.ag-group-h h3 { margin:0; }
.ag-empty { padding:16px; font-size:13px; color:var(--text-quiet); }

/* Настройка действия — маленьким окном рядом с самим действием, а не
   прыжком в «тонкую настройку», где полтора десятка полей. */
/* Метка с цветом и значком: цвет — тонкой заливкой и самим значком. */
.tag.tc { display:inline-flex; align-items:center; gap:4px; color:var(--text-primary);
  background:color-mix(in srgb, var(--tc) 13%, transparent); border-color:color-mix(in srgb, var(--tc) 28%, transparent); }
.tag.tc svg { width:11px; height:11px; fill:none; stroke:var(--tc); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.ag-skill-sw { margin:0; display:flex; }
.ag-sw-btn { all:unset; cursor:pointer; width:34px; height:20px; border-radius:99px; background:var(--border-strong); position:relative; transition:background .15s; }
.ag-sw-btn i { position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .15s; }
.ag-sw-btn.on { background:var(--success); }
.ag-sw-btn.on i { transform:translateX(14px); }
.ag-set { width:min(500px, 92vw); }
.ag-set .modal-body { display:flex; flex-direction:column; gap:14px; padding-top:6px; }
.ag-set .ag-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:end; }
.ag-set .ag-f { margin:0; display:flex; flex-direction:column; gap:6px; }
.ag-set .ag-l { display:flex; align-items:center; margin:0; font-size:13px; color:var(--text-muted); }
.ag-set input, .ag-set select, .ag-set textarea { width:100%; font:inherit; font-size:14px;
  color:var(--text-strong); background:var(--fill-subtle); border:0;
  border-radius:10px; box-shadow:none; padding:10px 12px; }
.ag-set input[type=checkbox], .ag-set input[type=radio] { width:auto; padding:0; }
.ag-set input:focus, .ag-set select:focus, .ag-set textarea:focus {
  outline:none; box-shadow:0 0 0 1px var(--text-strong); }
.ag-set-foot { display:flex; align-items:center; justify-content:flex-end; gap:8px;
  margin-top:4px; padding-top:14px; border-top:.5px solid var(--border-soft); }

/* Тонкая настройка: карточки в столбик, поля во всю ширину. */
.ag-tune { display:flex; flex-direction:column; gap:14px; }
.ag-tune .ag-row { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.ag-tune-foot { display:flex; align-items:center; gap:12px; }
@media (max-width:1200px) {
  .ag-work { grid-template-columns:1fr; }
  .ag-right { position:static; }
}

.ag-msg { max-width:86%; padding:8px 12px; border-radius:14px; font-size:13.5px;
  line-height:19px; white-space:pre-wrap; }
.ag-msg.me { align-self:flex-end; background:var(--text-strong); color:var(--bg); }
.ag-msg.bot { align-self:flex-start; background:var(--ai-tint); color:var(--text-primary); }
.ag-msg.wait { align-self:flex-start; color:var(--text-quiet); }
.ag-msg.note { align-self:flex-start; font-size:12px; color:var(--text-quiet); }
.ag-ask { display:flex; gap:8px; }
.ag-ask input { flex:1; height:38px; padding:0 12px; font:inherit; font-size:13.5px;
  background:var(--surface-warm); border:0; border-radius:var(--radius-sm); box-shadow:var(--ring); }
.ag-ask input:focus { outline:none; box-shadow:0 0 0 1px var(--text-strong); }

/* База знаний: свёрнутый список, развернул — правишь. */
.ag-kb { display:flex; flex-direction:column; gap:8px; }
.ag-k { background:var(--surface); border-radius:var(--radius-card); box-shadow:var(--ring);
  padding:12px 16px; }
.ag-k.off { opacity:.6; }
.ag-k > summary { cursor:pointer; list-style:none; display:flex; align-items:baseline; gap:10px; }
.ag-k > summary::-webkit-details-marker { display:none; }
.ag-k > summary b { font-weight:500; color:var(--text-strong); font-size:13.5px; }
.ag-k form { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.ag-krow { display:flex; align-items:center; gap:10px; }

/* Подпись над полем: что это и как заполнять — второй строкой, тише. */
.ag-lbl { display:flex; flex-direction:column; gap:2px; font-size:13px; color:var(--text-strong);
  margin-top:4px; }
.ag-lbl .sub { font-size:11.5px; }

/* Дожимы: лесенка пауз. Шаг выглядит как знание из базы — та же
   свёрнутая карточка, — потому что это и есть настройка одной мысли. */
.ag-fu-head { display:flex; flex-direction:column; gap:12px; padding:14px 16px; }
.ag-fu-top { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.ag-fu-top p { margin:4px 0 0; max-width:60ch; }
.ag-fu-days { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-muted); }
.ag-fu-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px 12px; }
.ag-fu-grid select, .ag-fu-grid input { width:100%; max-width:none; }
.ag-fu-days input { width:64px; }
.ag-fu-delay { display:flex; align-items:center; gap:8px; }
.ag-fu-delay input { width:72px; }
.ag-fu-delay select { width:84px; }
.ag-fu-stop { padding:14px 16px; }
.ag-fu-stop b { font-size:13.5px; font-weight:500; color:var(--text-strong); }
.ag-fu-stop ul { margin:8px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:5px; }
.ag-fu-stop li { font-size:12.5px; line-height:18px; color:var(--text-muted); }

/* Разбор переписок: предложенная правка с доказательством. */
.ag-run-btn { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.ag-fixes { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:12px; }
.ag-fix { background:var(--surface); border-radius:var(--radius-card); box-shadow:var(--ring);
  padding:14px 16px; }
.ag-fix-h { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.ag-fix-h b { font-size:13.5px; font-weight:500; color:var(--text-strong); }
.ag-quote { margin:8px 0; padding:8px 12px; border-left:2px solid var(--border);
  font-size:12.5px; color:var(--text-muted); }
.ag-fix-text { display:none; }
.ag-fix form { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.ag-fix textarea { width:100%; font:inherit; font-size:13px; line-height:18px; resize:vertical;
  background:var(--surface-warm); border:0; border-radius:var(--radius-sm); box-shadow:var(--ring);
  padding:9px 11px; color:var(--text-strong); }
.ag-fix .btn { align-self:flex-start; }

/* Журнал: входящее, ответ и оценка в одной карточке. */
.ag-log { display:flex; flex-direction:column; gap:10px; }
.ag-run { background:var(--surface); border-radius:var(--radius-card); box-shadow:var(--ring);
  padding:12px 16px; }
.ag-run-h { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.ag-run-h b { font-size:13.5px; font-weight:500; color:var(--text-strong); }
.ag-in, .ag-out { font-size:13.5px; line-height:19px; white-space:pre-wrap;
  overflow-wrap:anywhere; padding:8px 12px; border-radius:12px; }
.ag-in { background:var(--surface-warm); color:var(--text-primary); }
.ag-out { background:var(--ai-tint); color:var(--text-primary); margin-top:6px; }
.ag-why { margin-top:6px; }
@media (max-width:1100px) {
  .ag-grid { grid-template-columns:1fr; }
  .ag-try { grid-column:1; }
}

/* Два блока в ряд: каждому по половине экрана, на узком — в столбик. */
.split2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start;
  margin-top:18px; }
.split2-col { min-width:0; }
.split2-col h3 { margin:0 0 2px; font-size:16px; font-weight:500; color:var(--text-strong); }
.split2-col > .sub { margin:0 0 12px; }
.split2-col .dn { grid-template-columns:1fr; justify-items:center; }
.split2-col .dn-legend { width:100%; }
@media (max-width:1100px) { .split2 { grid-template-columns:1fr; } }

/* Кольцо долей: круг слева, подписи справа, в центре общее число. */
.dn { display:grid; grid-template-columns:auto minmax(0,1fr); gap:22px; align-items:center; }
.dn-ring { position:relative; width:168px; height:168px; }
.dn-ring svg { display:block; width:100%; height:100%; }
.dn-a { transition:opacity .15s ease-out; cursor:default; }
.dn:hover .dn-a { opacity:.45; }
.dn .dn-a.on, .dn:hover .dn-a:hover { opacity:1; }
.dn-hole { position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; pointer-events:none; }
.dn-hole b { font-size:24px; font-weight:300; letter-spacing:-.02em; color:var(--text-strong);
  font-variant-numeric:tabular-nums; }
.dn-hole span { font-size:11px; color:var(--text-quiet); }
.dn-legend { display:flex; flex-direction:column; gap:6px; min-width:0; }
.dn-i { display:grid; grid-template-columns:9px minmax(0,1fr) auto; gap:9px; align-items:center;
  font-size:13px; padding:3px 4px; border-radius:var(--radius-sm); }
.dn-i:hover { background:var(--fill-subtle); }
.dn-dot { width:9px; height:9px; border-radius:50%; }
.dn-n { color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dn-v { color:var(--text-quiet); font-variant-numeric:tabular-nums; white-space:nowrap; }
.dn-v b { color:var(--text-strong); font-weight:400; }
.dn-note { grid-column:1 / -1; margin:0; }
@media (max-width:640px) { .dn { grid-template-columns:1fr; justify-items:center; } }

/* Вердикт: одна фраза вывода под блоком, с цветной полосой слева. */
.vrd { display:block; margin:12px 0 0; padding:10px 14px; font-size:13.5px; line-height:20px;
  color:var(--text-primary); background:var(--fill-subtle); border-radius:var(--radius);
  border-left:3px solid var(--text-strong); }
.vrd b { font-weight:500; color:var(--text-strong); }
.vrd.warn { border-left-color:var(--warning); }
.vrd.bad { border-left-color:var(--error); }
.vrd.ok { border-left-color:var(--success); }

/* Подпись под графиком: тихая строка, объясняющая, что на нём видно. */
.scat-key { margin:8px 0 0; color:var(--text-quiet); font-size:12px; }

/* Оборот и комиссия одной полосой: комиссия — вставка внутри оборота. */
.d2 { display:flex; flex-direction:column; gap:2px; }
.d2-key { display:flex; gap:16px; margin-bottom:6px; font-size:12px; color:var(--text-quiet); }
.d2-key span { display:inline-flex; align-items:center; gap:6px; }
.d2-key i { width:9px; height:9px; border-radius:2px; }
.d2-key i.t { background:#BFD4FF; }
.d2-key i.p { background:#2F5FD8; }
.d2-row { display:grid; grid-template-columns:minmax(80px,1fr) minmax(0,2.2fr) auto auto;
  align-items:center; gap:10px; padding:7px 4px; border-radius:var(--radius-sm); }
.d2-row:hover, .d2-row.on { background:var(--fill-subtle); }
.d2-l { font-size:13px; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.d2-t { height:14px; border-radius:7px; background:var(--fill-subtle); overflow:hidden; }
.d2-t i { display:block; height:100%; border-radius:7px; background:#BFD4FF; }
.d2-t b { display:block; height:100%; border-radius:7px; background:#2F5FD8; }
.d2-v { font-size:13px; color:var(--text-strong); text-align:right; white-space:nowrap;
  font-variant-numeric:tabular-nums; min-width:76px; }
.d2-p { font-size:12.5px; color:var(--text-muted); text-align:right; white-space:nowrap;
  font-variant-numeric:tabular-nums; min-width:68px; }

/* Рейтинг полосами: название, полоса, число — всё на одной линии. */
.rb { display:flex; flex-direction:column; gap:2px; }
/* Зазор между названием и полосой больше, чем кажется нужным: длинные
   пункты чек-листа дотягиваются до самого края колонки, и на широком
   экране текст с полосой слипались в одну строку. */
.rb-row { display:grid; grid-template-columns:minmax(120px,1.4fr) minmax(0,2fr) auto;
  align-items:center; gap:18px; padding:7px 4px; border-radius:var(--radius-sm); }
.rb-row:hover, .rb-row.on { background:var(--fill-subtle); }
.rb-l { font-size:13px; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.rb-t { height:10px; border-radius:5px; background:var(--fill-subtle); overflow:hidden; }
.rb-t i { display:block; height:100%; border-radius:5px; background:#5E8BF2; }
.rb-t i.ok { background:#22A06B; }
.rb-v { font-weight:400; font-size:13px; color:var(--text-strong); text-align:right;
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.rb-s { grid-column:2 / -1; font-size:11.5px; color:var(--text-quiet); margin-top:-2px; }

/* Дни столбиками: видно не «сколько в среду», а копится ли. */
.db-plot { position:relative; height:var(--db-h, 150px); }
.db-cols { display:flex; align-items:flex-end; gap:4px; height:100%; }
.db-col { flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:flex-end; height:100%; min-width:0; }
.db-v { font-size:11px; color:var(--text-quiet); font-variant-numeric:tabular-nums; }
.db-bar { width:100%; max-width:34px; border-radius:4px 4px 0 0; background:#5E8BF2;
  transition:filter .15s ease-out; }
.db-bar.warn { background:var(--warning); }
.db-bar.bad { background:var(--error); }
.db-col:hover .db-bar { filter:brightness(1.12); }
.db-l { font-size:10.5px; color:var(--text-quiet); margin-top:6px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.db-warn { position:absolute; left:0; right:0; border-top:1px dashed var(--border-strong);
  pointer-events:none; }
.db-warn span { position:absolute; right:0; top:-16px; font-size:11px; color:var(--text-quiet); }

/* Доли одной полосой вместо радуги из секторов. */
.shb { margin:10px 0 2px; }
.shb-bar { display:flex; height:12px; border-radius:6px; overflow:hidden;
  background:var(--fill-subtle); }
.shb-bar i { display:block; height:100%; transition:filter .15s ease-out; }
.shb-bar i:hover, .shb-bar i.on { filter:brightness(1.15); }
.shb-key { display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:8px; font-size:12px;
  color:var(--text-muted); }
.sh-l { display:inline-flex; align-items:center; gap:6px; }
.sh-l i { width:8px; height:8px; border-radius:2px; }
.sh-l b { font-weight:400; color:var(--text-strong); font-variant-numeric:tabular-nums; }

/* Индикатор фоновой задачи: угол экрана, не мешает работать. */
.jobmini { position:fixed; right:20px; bottom:20px; z-index:70; display:flex;
  flex-direction:column; gap:8px; width:290px; }
.jm-row { display:block; border-radius:14px; padding:12px 14px; text-decoration:none;
  background:color-mix(in srgb, var(--info, #3B82F6) 7%, var(--surface));
  border:1px solid color-mix(in srgb, var(--info, #3B82F6) 22%, transparent);
  box-shadow:0 10px 30px rgba(15,23,42,.14), 0 2px 6px rgba(15,23,42,.06); }
.jm-t { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13.5px; font-weight:500; color:var(--text-strong); }
.jm-p { font-size:12px; font-weight:500; color:var(--info, #3B82F6); font-variant-numeric:tabular-nums; }
.jm-s { display:block; font-size:12px; color:var(--text-muted); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jm-b { display:block; height:5px; border-radius:99px; background:color-mix(in srgb, var(--info, #3B82F6) 14%, transparent);
  margin-top:10px; overflow:hidden; }
.jm-b i { display:block; height:100%; border-radius:99px; background:var(--info, #3B82F6); min-width:6px;
  transition:width .4s ease-out; }
.jm-row:not(.done):not(.failed) .jm-b i { background-image:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  background-size:60px 100%; background-repeat:no-repeat; animation:jmrun 1.4s linear infinite; }
@keyframes jmrun { from { background-position:-60px 0; } to { background-position:300px 0; } }
.jm-row.done { background:color-mix(in srgb, var(--success) 8%, var(--surface)); border-color:color-mix(in srgb, var(--success) 28%, transparent); }
.jm-row.done .jm-p { color:var(--success); }
.jm-row.failed { background:color-mix(in srgb, var(--error) 7%, var(--surface)); border-color:color-mix(in srgb, var(--error) 26%, transparent); }
.jm-row.failed .jm-p { color:var(--error); }
.jm-row.done .jm-b i { background:var(--success); }
@media (max-width:640px) { .jobmini { right:12px; left:12px; width:auto; bottom:calc(76px + env(safe-area-inset-bottom)); } }
.jm-row.failed .jm-b i { background:var(--error); }

.charttip { position:fixed; z-index:200; display:none; pointer-events:none;
  background:var(--text-strong); color:var(--bg); font-size:12.5px; line-height:17px;
  padding:6px 9px; border-radius:8px; max-width:260px; box-shadow:var(--shadow-pop); }

/* Строка-ссылка: курсор и подсветка намекают, что внутрь можно зайти. */
tr.rowlink { cursor:pointer; }
tr.rowlink:hover > td { background:var(--fill-subtle); }
/* Имя офиса или менеджера больше не жирное: в строке и так есть цифры,
   а жирный заголовок делал из таблицы список заголовков. */
.row-name { color:var(--text-strong); }

.filter-all { display:flex; align-items:center; gap:8px; font-size:13px;
  color:var(--text-primary); margin-top:10px; cursor:pointer; }
.filter-all input { width:16px; height:16px; accent-color:var(--text-strong); }

/* Очередь «ждут ответа»: строка — одна операция, оба исхода под рукой. */
.wq { background:var(--surface); border-radius:var(--radius-card); box-shadow:var(--ring);
  padding:4px 8px; }
.wq-row { display:grid; grid-template-columns:34px minmax(150px,1.1fr) minmax(0,2fr)
  minmax(110px,.8fr) 74px auto; gap:12px; align-items:center; padding:11px 8px;
  border-bottom:.5px solid var(--border-soft);
  transition:opacity .2s ease-out, transform .2s ease-out; }
.wq-row:last-child { border-bottom:0; }
.wq-msg .quiet, .quiet { color:var(--text-quiet); }
.wq-row:hover { background:rgba(0,0,0,.02); }
:root[data-theme="dark"] .wq-row:hover { background:rgba(255,255,255,.03); }
.wq-row.gone { opacity:0; transform:translateX(26px); }
.wq-who { min-width:0; }
.wq-who b { display:block; color:var(--text-strong); font-weight:500; font-size:14px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wq-tel { color:var(--text-quiet); font-size:12px; font-variant-numeric:tabular-nums; }
.wq-msg { min-width:0; color:var(--text-primary); font-size:13.5px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.wq-mgr { min-width:0; color:var(--text-muted); font-size:12.5px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.wq-age { text-align:right; }
.wq-acts { display:flex; align-items:center; gap:4px; }
.wq-acts .btn { height:30px; padding:0 12px; font-size:13px; opacity:0;
  transition:opacity .15s ease-out; }
.wq-row:hover .wq-acts .btn, .wq-acts .btn:focus-visible { opacity:1; }
@media (hover:none) { .wq-acts .btn { opacity:1; } }
.wq-acts .icon-btn svg { width:17px; height:17px; }
@media (max-width:1100px) {
  .wq-row { grid-template-columns:34px minmax(0,1fr) 70px auto; }
  .wq-msg, .wq-mgr { grid-column:2; font-size:12.5px; }
  .wq-mgr { grid-row:3; }
}

/* Пустая доска задач — приглашение, а не констатация. Единственный блок с
   градиентом внутри рабочего экрана: он зовёт нажать. */
.tasks-empty { position:relative; overflow:hidden; display:flex; flex-direction:column;
  align-items:center; text-align:center; gap:12px; padding:52px 24px 48px;
  border-radius:var(--radius-card); background:var(--surface); box-shadow:var(--ring); }
.tasks-empty::before { content:""; position:absolute; inset:0; z-index:0; opacity:.5;
  background:
    radial-gradient(60% 70% at 18% 10%, rgba(139,124,255,.5), transparent 70%),
    radial-gradient(55% 65% at 85% 20%, rgba(125,211,252,.45), transparent 70%),
    radial-gradient(60% 70% at 70% 95%, rgba(192,132,252,.4), transparent 70%); }
.tasks-empty > * { position:relative; z-index:1; }
.tasks-empty h2 { margin:0; font-size:24px; line-height:30px; font-weight:400;
  letter-spacing:-.02em; color:var(--text-strong); }
.tasks-empty p { margin:0; max-width:460px; color:var(--text-muted); font-size:14px;
  line-height:21px; }
.tasks-empty-acts { display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  margin-top:4px; }
.tasks-empty-acts .btn.ghost { background:var(--surface); }

/* Модалка: размытый фон, окно по центру, скругление 20. */
.modal { border:0; padding:0; border-radius:20px; background:var(--surface);
  color:var(--text-primary); box-shadow:var(--shadow-pop);
  width:min(560px, calc(100vw - 32px)); max-height:calc(100vh - 80px); overflow:auto; }
.modal::backdrop { background:rgba(15,15,16,.32); backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px); }
.modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:18px 18px 10px; }
.modal-head b { display:block; font-size:17px; font-weight:500; color:var(--text-strong); }
.modal-head .sub { display:block; margin-top:3px; }
.modal-body { padding:0 18px 18px; }
.modal-body .composer-box { box-shadow:none; background:var(--fill-subtle); }
@media (prefers-reduced-motion:no-preference) {
  .modal[open] { animation:modalin .18s cubic-bezier(.2,0,0,1); }
  .modal[open]::backdrop { animation:fadein .18s ease-out; }
  @keyframes modalin { from { opacity:0; transform:translateY(6px) scale(.985); } }
  @keyframes fadein { from { opacity:0; } }
}

/* Короткий взгляд на очередь: число, пятёрка строк и кнопка «Разобрать». */
.peek { padding:14px 16px; }
.peek-head { display:flex; align-items:baseline; gap:10px; margin-bottom:6px; }
.peek-head b { font-size:24px; font-weight:300; letter-spacing:-.02em; color:var(--text-strong);
  font-variant-numeric:tabular-nums; }
.peek-head .btn { margin-left:auto; align-self:center; }
.peek-row { display:flex; align-items:center; gap:10px; padding:8px 0;
  border-top:.5px solid var(--border-soft); }
/* Номер — главное: имя из профиля мессенджера бывает «??????» или смайлик. */
.peek-name { font-weight:500; color:var(--text-strong); white-space:nowrap;
  font-variant-numeric:tabular-nums; }
.peek-who { color:var(--text-muted); font-size:12.5px; white-space:nowrap; flex:none;
  max-width:140px; overflow:hidden; text-overflow:ellipsis; }
.peek-msg { flex:1 1 auto; min-width:0; color:var(--text-muted); font-size:13px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.peek-empty { display:flex; align-items:baseline; gap:10px; padding:14px 16px; }
.peek-empty b { color:var(--text-strong); font-weight:500; }

/* Шапка чатов — одна строка: название со счётчиком и фильтры рядом.
   Заголовок с подзаголовком и отдельной формой поиска съедали 290px
   до первого диалога. */
/* Строка не переносится: при переносе фильтры уезжали вниз, а заголовок
   оставался один наверху — выглядело как сломанная вёрстка. Если всё не
   влезает, прокручивается сама лента фильтров. */
.chat-head { display:flex; align-items:center; gap:16px; flex-wrap:nowrap; margin-bottom:12px; }
.chat-head h1 { font-size:22px; line-height:28px; font-weight:400; margin:0; white-space:nowrap;
  flex:none; }
.chat-count { color:var(--text-quiet); font-size:15px; font-variant-numeric:tabular-nums;
  margin-left:4px; }
/* Лента чипов прокручивается, а поповер «Фильтр» стоит рядом с ней, а не
   внутри: overflow:auto обрезает всё, что торчит за край, — кнопка
   нажималась, но список фильтров был не виден. */
.chat-filters { display:flex; gap:8px; flex-wrap:nowrap; align-items:center; margin-left:auto;
  min-width:0; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.chat-head > .filterpop { flex:none; }
.chat-filters::-webkit-scrollbar { display:none; }
.chat-filters > * { flex:none; }
.chat-filters .range { flex:none; }
/* Редкие фильтры живут в поповере, а не в строке: менеджера и этап
   руководитель выбирает изредка, а место они занимали всегда. */
/* Поиск по списку — он же вход в подробные фильтры. Отдельная кнопка
   «Фильтр» в шапке выглядела приклеенной сбоку, а поля в ней стояли
   лесенкой разной ширины. */
.chat-find { position:relative; border-bottom:.5px solid var(--border-soft); }
.cf-bar { position:relative; display:flex; align-items:center; }
.chat-find svg { width:15px; height:15px; fill:none; stroke:var(--text-quiet);
  stroke-width:1.8; stroke-linecap:round; }
.cf-bar > svg { position:absolute; left:14px; pointer-events:none; }
.chat-find input[name=q] { width:100%; height:42px; border:0; box-shadow:none; border-radius:0;
  background:none; padding-left:38px; padding-right:70px; font-size:13.5px; }
.chat-find input[name=q]::-webkit-search-cancel-button { display:none; }
.cf-clear { position:absolute; right:40px; width:26px; height:26px; display:grid; place-items:center;
  border:0; border-radius:50%; background:var(--fill-subtle); box-shadow:none; color:var(--text-muted); padding:0; }
.cf-clear[hidden] { display:none; }
.cf-clear svg { width:12px; height:12px; stroke:currentColor; stroke-width:2.2; }
.chat-list.searching .chat-item { opacity:.55; transition:opacity .15s; }
/* Телефон: поиск крупный и прилипает к верху списка — видно, что печатаешь. */
@media (max-width:860px) {
  .chat-find { position:sticky; top:0; z-index:6; background:var(--surface); }
  .chat-find input[name=q] { height:48px; font-size:17px; padding-left:42px; }
  .cf-bar > svg { left:15px; width:18px; height:18px; }
  .cf-more { width:40px; height:40px; right:4px; }
  .cf-clear { right:46px; width:30px; height:30px; }
}
.chat-find input[name=q]:focus { box-shadow:none; outline:none; background:var(--fill-subtle); }
.cf-more { position:absolute; right:6px; width:30px; height:30px; display:grid;
  place-items:center; border:0; background:none; box-shadow:none; border-radius:var(--radius-sm);
  color:var(--text-quiet); }
.cf-more:hover { background:var(--fill-subtle); color:var(--text-strong); }
.chat-find.on .cf-more { color:var(--text-strong); }
.cf-more i { position:absolute; top:1px; right:0; min-width:14px; height:14px; padding:0 3px;
  border-radius:7px; background:var(--text-strong); color:var(--surface); font-size:10px;
  font-style:normal; line-height:14px; text-align:center; }
/* Панель шире списка: она накрывает переписку, зато поля стоят в ровной
   сетке по двое, а не в столбик шириной в палец. */
/* Панель держим на fixed и ставим по месту скриптом: список диалогов
   прокручивается и обрезает всё, что из него торчит, — ровно на этом
   прошлый поповер выглядел мёртвым. */
.ff-pop { position:fixed; z-index:60; width:min(460px, 92vw);
  background:var(--surface); border-radius:0 0 var(--radius-card) var(--radius-card);
  box-shadow:var(--shadow-pop); padding:14px; }
.ff-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; }
.ff-f { display:grid; gap:4px; min-width:0; }
.ff-f > span, .ff-dates > span { font-size:12px; color:var(--text-quiet); }
.ff-pop select, .ff-pop input[type=date] { width:100%; max-width:none; height:34px;
  font-size:13px; background:var(--surface-warm); color:var(--text-primary);
  border-radius:var(--radius-sm); box-shadow:var(--ring); border:0; }
.ff-dates { display:grid; gap:4px; margin-top:10px; }
/* В воронке полей больше, чем в чатах, и панель ей нужна шире. */
.find-form .ff-pop { width:min(560px, 94vw); border-radius:var(--radius-card); }
.ff-dates > div { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ff-check { display:flex; align-items:center; gap:8px; margin-top:12px; font-size:13px;
  color:var(--text-primary); cursor:pointer; }
.ff-check input { width:16px; height:16px; flex:none; accent-color:var(--text-strong); }
/* Пояснение под строкой фильтра: зачем эта галка, одной фразой. */
.ff-check span { display:flex; flex-direction:column; gap:1px; }
.ff-note { color:var(--text-quiet); font-size:12px; }
.ff-foot { display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:14px; padding-top:12px; border-top:.5px solid var(--border-soft); }

/* Переписка: три колонки как одна поверхность, разделённая линиями 0.5px,
   а не три отдельные карточки с рамками. */
.chat-layout { display:grid; grid-template-columns:320px minmax(0,1fr) 300px;
  align-items:stretch; height:calc(100vh - 128px); min-height:480px;
  background:var(--surface); border-radius:var(--radius-card); box-shadow:var(--ring);
  overflow:hidden; }
.chat-list { border-right:.5px solid var(--border-soft); overflow-y:auto; }
/* Строка 64px: аватар с инициалами и точкой канала, имя, сниппет, время.
   Источник и менеджер переехали в шапку диалога и карточку клиента: в
   списке они превращали каждую строку в четыре этажа мелкого текста. */
.chat-item { display:grid; grid-template-columns:32px minmax(0,1fr); column-gap:10px; row-gap:2px;
  padding:12px 14px; border-bottom:.5px solid var(--border-soft); align-items:center;
  position:relative; }
.chat-item > * { grid-column:2; }
.chat-item > .avt { grid-column:1; grid-row:1 / span 2; align-self:center; }
.chat-item:last-child { border-bottom:0; }
.chat-item:hover { background:rgba(0,0,0,.02); }
:root[data-theme="dark"] .chat-item:hover { background:rgba(255,255,255,.03); }
.chat-item.active { background:rgba(0,0,0,.05); }
:root[data-theme="dark"] .chat-item.active { background:rgba(255,255,255,.06); }
.chat-item.active .avt[data-ch]::after { box-shadow:0 0 0 2px var(--surface-warm); }
.chat-item .top { display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
.chat-item .name { font-weight:500; color:var(--text-strong); font-size:14px;
  display:flex; align-items:center; min-width:0; }
.chat-item .name > span.nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-item .when { font-size:12px; color:var(--text-quiet); white-space:nowrap;
  font-family:"JetBrains Mono", ui-monospace, monospace; }
.chat-item .when.wait { color:var(--error-ink); }
.chat-item .snippet { color:var(--text-muted); font-size:13px; display:flex; gap:8px;
  align-items:baseline; }
.chat-item .snippet > span.tx { overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  min-width:0; flex:1 1 auto; }
.chat-item .snippet .tag { flex:none; font-size:11px; color:var(--success-ink);
  background:none; padding:0; min-height:0; }
/* Метка агента — его вывод о разговоре, а не факт из CRM: тише, чем
   «купил», и без цвета, иначе строка превращается в светофор. */
.chat-item .snippet .tag.mark { color:var(--text-quiet); }
/* Орб ИИшки — единственное цветное пятно интерфейса. Фиолетовый ушёл из
   кнопок и меню и теперь значит ровно одно: здесь работала ИИшка. */
.orb { display:inline-block; width:14px; height:14px; border-radius:50%; flex:none;
  vertical-align:middle;
  background:radial-gradient(circle at 32% 28%, #C9C2FF 0%, #8B7CFF 38%, #C084FC 68%, #7DD3FC 100%);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.5); }
.name > .orb, .chat-item .orb { margin-left:6px; }
/* Довела до квалификации — зелёный орб, а не тот же фиолетовый в колечке:
   разница между «ИИшка писала» и «ИИшка довела до заявки» должна читаться
   с одного взгляда, а не по толщине обводки. */
.orb.qual { background:radial-gradient(circle at 32% 28%, #9FE8C3 0%, #34C98A 40%, #22A06B 100%);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.5); }
/* Крутится только пока ИИшка думает: в покое орб стоит. */
.orb.think { animation:orbspin 3s linear infinite; }
@keyframes orbspin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .orb.think { animation:none; } }

/* Аватар человека: мягкий градиент по имени, буква поверх, точка канала
   снизу справа — она не должна перекрывать букву. */
/* Класс .av занят сеткой «Что даёт ИИшка»: аватар, назвавшись так же,
   получал её grid-раскладку, и буква уезжала из кружка на 130px. */
.avt { position:relative; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; flex:none; font-weight:500; line-height:1; letter-spacing:0; }
.avt > img { position:absolute; inset:0; width:100%; height:100%; border-radius:50%; object-fit:cover;
  background:var(--surface); }
.avt[data-ch]::after { content:""; position:absolute; z-index:1; right:-1px; bottom:-1px; width:8px;
  height:8px; border-radius:50%; background:var(--text-quiet);
  box-shadow:0 0 0 2px var(--surface); }
.avt[data-ch="waba"]::after { background:var(--blue); }
.avt[data-ch="wa"]::after { background:var(--success); }

.cdot { display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:5px;
  vertical-align:middle; background:var(--text-quiet); }
.cdot.waba { background:var(--blue); }
.cdot.wa { background:var(--success); }

.thread { display:flex; flex-direction:column; min-height:0; min-width:0;
  border-right:.5px solid var(--border-soft); }
.thread-head { padding:10px 16px; border-bottom:.5px solid var(--border-soft); display:flex;
  justify-content:space-between; gap:10px; align-items:center; }
.thread-head b { font-size:15px; font-weight:500; }
.thread-sub { margin-top:1px; font-size:12.5px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.thread-body { padding:18px 20px; overflow-y:auto; display:flex; flex-direction:column; gap:3px;
  flex:1 1 auto; min-height:0; background:var(--surface); }
/* Пузыри: входящие серые без рамки, наши чёрные, ответы ИИшки белые
   на кольце — единственное место, где появляется фиолетовый. */
.msg { max-width:74%; padding:9px 13px 7px; border-radius:14px; font-size:14px; line-height:20px;
  overflow-wrap:anywhere; }
.msg .txt, .msg { white-space:pre-wrap; }
.msg a { color:inherit; text-decoration:underline; text-underline-offset:2px; }
.msg .who { font-size:12px; font-weight:400; opacity:.6; margin-bottom:2px; white-space:normal; }
.msg .at { font-size:11px; opacity:.5; text-align:right; margin-top:2px;
  font-variant-numeric:tabular-nums; }
.msg.in { align-self:flex-start; background:var(--surface-warm); color:var(--text-primary);
  border-top-left-radius:4px; }
.msg.out { align-self:flex-end; background:var(--text-strong); color:var(--bg);
  border-top-right-radius:4px; }
/* Пузырь ИИшки был цвета самой переписки и держался на одной полупрозрачной
   линии: на светлой теме он читался как пустое место, а если признак «писала
   ИИшка» проставлялся ошибочно, вместе с ним пропадали и ответы менеджера.
   Теперь у него свой фон. */
.msg.ai { align-self:flex-end; background:var(--ai-tint); color:var(--text-primary);
  box-shadow:var(--ring); border-top-right-radius:4px; }
/* Вложение внутри пузыря: картинка показывается, остальное — ссылкой. */
.msg-file { display:block; margin:2px 0 6px; }
.deal-audio { display:block; width:260px; max-width:100%; height:36px; margin:2px 0 4px; }
.deal-media-note { margin:4px 0 2px; font-size:12.5px; line-height:1.4; color:var(--text-muted); white-space:normal; }
.msg-file img { display:block; max-width:100%; max-height:260px; border-radius:10px; }
/* Картинка без подписи: рамка пузыря в 3px, имя мелко сверху, время на
   тёмной плашке поверх угла картинки — место занимает сама картинка. */
.msg.media { padding:3px; position:relative; white-space:normal; }
.msg.media .who { padding:3px 8px 3px; margin:0; }
.msg.media .msg-file { margin:0; line-height:0; }
.msg.media .msg-file img { width:auto; max-width:min(300px, 100%); max-height:340px; border-radius:11px; }
.msg.media .at { position:absolute; right:9px; bottom:9px; margin:0; padding:1px 7px; border-radius:9px;
  background:rgba(0,0,0,.5); color:#fff; opacity:1; line-height:16px; }
.msg-audio, .msg-video { display:block; max-width:100%; margin:2px 0 6px; border-radius:10px; }
.msg-doc { display:inline-flex; align-items:center; gap:7px; margin:2px 0 6px; padding:7px 11px;
  border-radius:10px; background:rgba(127,127,127,.14); text-decoration:none; font-size:13px; }
.msg-doc svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linejoin:round; }
.msg.ai .who { color:var(--text-muted); opacity:1; display:flex; align-items:center; gap:6px; }
.msg.ai .who::before { content:""; width:12px; height:12px; border-radius:50%; flex:none;
  background:radial-gradient(circle at 32% 28%, #C9C2FF 0%, #8B7CFF 38%, #C084FC 68%, #7DD3FC 100%); box-shadow:inset 0 1px 2px rgba(255,255,255,.5); }

/* Композер — одно поле: номер чипом внутри, вложения иконками, отправка
   круглой чёрной кнопкой. Рамка одна, а не четыре вокруг каждого элемента. */
.thread-foot { border-top:.5px solid var(--border-soft); padding:12px 14px; }
.thread-foot { display:flex; }
.thread-foot > * { flex:none; }
.thread-foot { gap:0; }
.composer-box { display:flex; align-items:center; gap:6px; width:100%; min-width:0;
  padding:5px 6px 5px 8px; border-radius:12px; background:var(--surface);
  box-shadow:var(--ring); transition:box-shadow .15s ease; }
.composer-box:focus-within { box-shadow:0 0 0 1px var(--text-strong); }
.composer-box input[type=text] { flex:1 1 auto; min-width:60px; height:30px; border:0;
  background:none; box-shadow:none; padding:0 2px; font-size:14px; }
.composer-box input[type=text]:focus { box-shadow:none; outline:0; }
.composer-box .ch-pick { flex:none; height:26px; max-width:120px; border:0; box-shadow:none;
  background:var(--fill-subtle); border-radius:var(--radius-pill); font-size:12px;
  color:var(--text-muted); padding:0 22px 0 9px; }
.composer-box .icon-sq { width:30px; height:30px; padding:0; flex:none; border:0; box-shadow:none;
  background:none; color:var(--text-muted); border-radius:50%; }
.composer-box .icon-sq:hover { background:var(--fill-subtle); color:var(--text-primary); }
.composer-box .icon-sq svg { width:17px; height:17px; fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.composer-box .send { flex:none; width:32px; height:32px; padding:0; border-radius:50%;
  display:grid; place-items:center; background:var(--text-strong); color:var(--bg); border:0; }
.composer-box .send:hover { background:var(--brand-hover); }
.composer-box .send svg { width:16px; height:16px; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.chat-side { display:flex; flex-direction:column; gap:0; overflow-y:auto; padding:14px 16px; }
.chat-side .card { box-shadow:none; padding:0 0 16px; border-bottom:.5px solid var(--border-soft);
  margin-bottom:16px; }
.chat-side .card:last-child { border-bottom:0; margin-bottom:0; padding-bottom:0; }
.chat-layout.no-side { grid-template-columns:320px minmax(0,1fr); }
.chat-layout.no-side .chat-side { display:none; }
@media (max-width:1200px) { .chat-layout { grid-template-columns:300px minmax(0,1fr); }
  .chat-side { display:none; } }
@media (max-width:980px) { .chat-layout { grid-template-columns:1fr; height:auto; }
  .thread { height:62vh; border-right:0; } }
/* Телефон: список и переписка — два разных экрана. Пока диалог не выбран,
   виден список; открыл — переписка во весь экран с кнопкой назад. */
@media (max-width:860px) {
  .chat-layout { height:calc(100dvh - 210px); min-height:420px; }
  .chat-layout.has-thread .chat-list { display:none; }
  .chat-layout:not(.has-thread) .thread { display:none; }
  .thread { height:100%; }
  /* Открытая переписка на телефоне — отдельный экран во весь просвет, как
     в любом мессенджере. Иначе над ней остаются заголовок «Чаты» с
     фильтрами и шапка страницы, на саму переписку остаётся треть экрана,
     а поле ввода уходит под нижнюю панель. Возврат — стрелка в шапке. */
  .chat-layout.has-thread { position:fixed; inset:0; z-index:50; height:auto;
    min-height:0; background:var(--bg); }
  /* Под открытой перепиской страница не прокручивается: иначе iOS с
     клавиатурой сдвигал документ, и переписка уезжала вместе с ним. */
  body:has(.chat-layout.has-thread) { overflow:hidden; overscroll-behavior:none; }
  .chat-layout.has-thread .thread { border-radius:0; box-shadow:none; }
  .chat-layout.has-thread .thread-foot {
    padding-bottom:calc(12px + env(safe-area-inset-bottom)); }
  .thread-back { display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px; margin-right:2px; border-radius:var(--radius-sm);
    color:var(--text-muted); flex:none; }
  .thread-back svg { width:20px; height:20px; fill:none; stroke:currentColor;
    stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .chat-head h1 { font-size:19px; }
  .chat-filters { overflow-x:auto; scrollbar-width:none; }
  .chat-filters::-webkit-scrollbar { display:none; }
  /* Поле ввода в iOS зумит экран, если шрифт меньше 16. */
  .thread-foot input, .thread-foot textarea { font-size:16px; }

  /* Шапка страницы и переключатели периода: на узком экране они обязаны
     переноситься и прокручиваться, иначе тянут за собой весь документ. */
  .page-head { flex-wrap:wrap; gap:10px; }
  .period { width:100%; }
  .range { flex-wrap:nowrap; overflow-x:auto; max-width:100%; scrollbar-width:none; }
  .range::-webkit-scrollbar { display:none; }
  /* Подпись вкладки в одну строку: «Больше 2 суток» переносилось внутри
     28-пиксельной таблетки, и счётчик налезал на соседнюю. */
  .range a { white-space:nowrap; flex:none; gap:5px; }
  .subtabs { max-width:100%; }
  .monthnav { flex:1; }
  .monthnav span { min-width:0; flex:1; }
  /* Пальцу нужно во что попадать: 28 точек — это размер для курсора. */
  .monthnav a { width:36px; height:36px; }
  .monthnav a.back { height:36px; }
  .range a { height:34px; padding:0 13px; }
  /* Таблицы на телефоне листаются вбок внутри своей рамки. */
  .table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .table-wrap table { min-width:520px; }
  /* Название в первой колонке не ломаем по словам: «LILO TOUR ASTANA»
     вставало в три строки и строка таблицы вырастала втрое. Вбок она и
     так листается. */
  .table-wrap td:first-child, .table-wrap th:first-child { white-space:nowrap; }
  /* Поля форм: 16px, иначе iOS приближает экран на каждом касании. */
  input, select, textarea { font-size:16px; }
  .modal { width:100%; max-width:100%; border-radius:16px 16px 0 0; }

  /* Заголовок и вкладки очереди: на узком экране они не помещаются в одну
     строку и налезали друг на друга. Вкладки уходят под заголовок и
     листаются вбок. */
  /* ИИ-аналитик: ответ набран крупно под широкий экран — на телефоне
     это четыре слова в строку. Поле вопроса поднимаем над нижней
     панелью, подсказка про Enter телефону не нужна. */
  .ia-lead { font-size:21px; line-height:27px; }
  .ia-empty h1 { font-size:22px; line-height:28px; }
  .ia-kbd { display:none; }
  /* Три точки отсчёта в плашке не влезают в 375 точек одной строкой:
     на телефоне они короче и переносятся. */
  .hero-modes a { padding:4px 8px; font-size:12px; }
  .ia-composer { bottom:calc(74px + env(safe-area-inset-bottom)); }
  .ia-cards { grid-template-columns:1fr; }
  .ia-period { max-width:45%; }

  .chat-head { flex-wrap:wrap; gap:8px 12px; }
  .chat-filters { margin-left:0; width:100%; }

  /* Строка очереди: шесть колонок на 375 точках ужимали имя до «Тес…»,
     а телефон разваливался по слову на строку. На телефоне это карточка:
     имя и срок сверху, сообщение и менеджер ниже, кнопки — во всю ширину,
     чтобы по ним попадали пальцем. */
  .wq-row { grid-template-columns:34px minmax(0,1fr) auto; gap:3px 10px;
    padding:12px 6px; align-items:start; }
  .wq-row > .avt { grid-column:1; grid-row:1 / span 2; }
  .wq-who { grid-column:2; grid-row:1; }
  .wq-age { grid-column:3; grid-row:1; }
  .wq-tel { white-space:nowrap; }
  .wq-msg { grid-column:2 / -1; grid-row:2; white-space:normal; display:-webkit-box;
    -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  .wq-mgr { grid-column:2 / -1; grid-row:3; }
  .wq-acts { grid-column:1 / -1; grid-row:4; gap:8px; margin-top:8px; }
  .wq-acts .btn { flex:1; height:38px; }
  .wq-acts .icon-btn { width:38px; height:38px; flex:none; }
}

/* Карточки рекомендаций и разборов */
/* Рекомендации.
   Было: толстая цветная полоса слева у каждой карточки, жирный заголовок и
   серый кирпич доказательств, всегда раскрытый. Девять таких карточек
   кричали одинаково громко и не давали выбрать, с чего начать.
   Стало: эффект — одной тонированной плашкой сверху, доказательства
   свёрнуты, карточки в ряд одной высоты. */
.reco-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px;
  align-items:stretch; }
.reco { background:var(--surface); border:0; border-radius:var(--radius-card);
  box-shadow:var(--ring); padding:16px 18px 14px; display:flex; flex-direction:column;
  gap:10px; align-items:flex-start; }
.reco-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.reco-impact { display:inline-flex; align-items:center; height:22px; padding:0 9px;
  border-radius:var(--radius-pill); font-size:12px; }
.reco-impact.high { background:var(--error-tint); color:var(--error-ink); }
.reco-impact.mid { background:var(--warning-tint); color:var(--warning-ink); }
.reco-impact.low { background:var(--fill-subtle); color:var(--text-muted); }
.reco-area { color:var(--text-quiet); font-size:12.5px; }
.reco-area + .reco-area::before { content:"· "; }
.reco h3 { margin:0; font-size:16px; line-height:22px; font-weight:500; color:var(--text-strong); }
.reco p { margin:0; color:var(--text-primary); font-size:13.5px; line-height:20px; }
/* Доказательства свёрнуты: их читают, только когда рекомендация зацепила. */
.reco-ev { align-self:stretch; margin-top:auto; padding-top:4px; }
.reco-ev > summary { list-style:none; cursor:pointer; color:var(--text-muted);
  font-size:12.5px; display:inline-flex; align-items:center; gap:6px; }
.reco-ev > summary::-webkit-details-marker { display:none; }
.reco-ev > summary::after { content:"▾"; font-size:10px; }
.reco-ev[open] > summary::after { content:"▴"; }
.reco-ev > summary:hover { color:var(--text-strong); }
.reco-ev > div { margin-top:8px; font-size:13px; line-height:19px; color:var(--text-muted);
  border-left:2px solid var(--border); padding-left:11px; }
.reco-ref { color:var(--text-strong); text-decoration:underline; text-underline-offset:2px; }
.reco-group { font-size:16px; font-weight:500; margin:26px 0 12px; }
.reco-group:first-of-type { margin-top:0; }
/* Строки «требует внимания» на главной: цифра крупно, действие рядом. */
.todo-row { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 0; border-bottom:1px solid var(--border); }
.todo-row:last-of-type { border-bottom:none; }
.todo-row b { font-size:19px; color:var(--text-strong); font-variant-numeric:tabular-nums;
  margin-right:6px; }
.todo-row.warn b { color:var(--warning); }
.todo-row.bad b { color:var(--error); }
.todo-row.done b { color:var(--success); }
.quick { display:flex; flex-wrap:wrap; gap:8px; }
.quick a { padding:7px 13px; border-radius:9999px; background:var(--fill-subtle);
  color:var(--text-muted); font-size:13px; }
.quick a:hover { background:var(--brand-tint); color:var(--brand); }
/* Мини-чат: открывается поверх любой страницы, не уводя с неё. */
#minichat { position:fixed; right:20px; bottom:20px; width:min(380px, calc(100vw - 32px));
  background:var(--surface); border:1px solid var(--border-strong); border-radius:14px;
  box-shadow:0 24px 60px -24px rgba(17,17,17,.18); display:none; flex-direction:column;
  max-height:min(560px, calc(100vh - 40px)); z-index:80; overflow:hidden; }
#minichat.open { display:flex; }
#minichat header { display:flex; align-items:center; gap:10px; padding:12px 14px;
  border-bottom:1px solid var(--border); }
#minichat header .who { font-weight:500; color:var(--text-strong); flex:1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#minichat header button, #minichat header a { background:none; border:none; color:var(--text-quiet);
  cursor:pointer; font-size:17px; line-height:1; padding:4px 6px; text-decoration:none; }
#minichat header button:hover, #minichat header a:hover { color:var(--text-primary); background:none; }
#minichat .body { flex:1 1 auto; min-height:0; overflow-y:auto; padding:14px;
  display:flex; flex-direction:column; gap:8px; }
#minichat .foot { border-top:1px solid var(--border); padding:10px 12px; display:flex; gap:6px;
  align-items:center; }
#minichat .icon svg, #minichat .full svg, #minichat .close svg { width:16px; height:16px;
  fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
#minichat .foot .icon { background:none; border:none; padding:0 6px; font-size:17px;
  cursor:pointer; filter:grayscale(1) opacity(.7); }
#minichat .foot .icon:hover { filter:none; background:none; }
#minichat .foot .icon.rec { filter:none; animation:pulse 1s infinite; }
@keyframes pulse { 0%,100% { opacity:.4 } 50% { opacity:1 } }
#minichat .foot input { flex:1; height:34px; }
#minichat .foot button { height:34px; padding:0 14px; }
#minichat .msg { max-width:85%; font-size:13px; line-height:18px; padding:8px 11px; }
#minichat .loading { color:var(--text-quiet); font-size:13px; text-align:center; padding:20px; }
@media (max-width:1100px) { .hero { grid-template-columns:1fr; } }
@media (max-width:960px) {
  .banner { grid-template-columns:1fr; gap:16px; padding:20px; }
}
/* --- телефон: приложение, а не сжатая страница ------------------------- */
.tabbar { display:none; }
.wa-chips { display:none; }
/* Мгновенный экран переписки, пока сервер собирает настоящую. */
.open-skel { position:fixed; inset:0; z-index:60; display:flex; flex-direction:column; background:#EFEAE2;
  animation:os-in .14s ease-out; }
:root[data-theme="dark"] .open-skel { background:#0D1115; }
@keyframes os-in { from { opacity:0; transform:translateX(18px); } }
.os-head { display:flex; align-items:center; gap:10px; padding:calc(10px + env(safe-area-inset-top)) 14px 10px;
  background:var(--bg); border-bottom:.5px solid var(--border-soft); }
.os-back { width:34px; height:34px; }
.os-av .avt { width:40px !important; height:40px !important; }
.os-head b { font-size:16px; font-weight:600; color:var(--text-strong); }
.os-body { flex:1; display:grid; place-items:center; }
.os-spin { width:28px; height:28px; border-radius:50%; border:2.5px solid color-mix(in srgb, var(--text-strong) 18%, transparent);
  border-top-color:#21C063; animation:os-rot .8s linear infinite; }
@keyframes os-rot { to { transform:rotate(360deg); } }
.chat-item.opening, .chat-item:active { background:color-mix(in srgb, var(--text-strong) 7%, transparent); }
/* «Новый чат»: шторка снизу на телефоне, окно по центру на компьютере. */
dialog.nc { padding:0; border:0; background:transparent; max-width:none; max-height:none; width:100%; height:100%;
  margin:0; inset:0; }
dialog.nc::backdrop { background:rgba(0,0,0,.45); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
dialog.nc[open] { display:flex; align-items:center; justify-content:center; }
.nc-box { width:min(420px, 100%); background:var(--surface); border-radius:22px; padding:18px 20px 22px;
  box-shadow:0 24px 60px -12px rgba(0,0,0,.45); display:flex; flex-direction:column; gap:10px;
  animation:nc-in .22s ease-out; }
@keyframes nc-in { from { transform:translateY(16px); opacity:0; } }
.nc-grab { display:none; width:38px; height:5px; border-radius:3px; background:var(--border-strong); margin:-6px auto 4px; }
.nc-head { display:flex; align-items:center; justify-content:space-between; }
.nc-head b { font-size:20px; font-weight:600; color:var(--text-strong); }
.nc-x { width:34px; height:34px; padding:0; border:0; border-radius:50%; background:var(--fill-subtle);
  color:var(--text-muted); display:grid; place-items:center; box-shadow:none; }
.nc-x svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.nc-label { font-size:13px; color:var(--text-muted); margin-top:6px; }
.nc-field { display:flex; align-items:center; gap:10px; height:58px; padding:0 16px; border-radius:16px;
  background:var(--fill-subtle); box-shadow:inset 0 0 0 1px transparent; transition:box-shadow .15s; }
.nc-field:focus-within { box-shadow:inset 0 0 0 1.5px #21C063; }
.nc-cc { display:flex; align-items:center; gap:6px; font-size:20px; font-weight:500; color:var(--text-strong);
  padding-right:10px; border-right:1px solid var(--border-strong); font-variant-numeric:tabular-nums; }
.nc-cc i { font-style:normal; font-size:20px; }
.nc-field input { flex:1; min-width:0; height:100%; border:0; background:none; box-shadow:none; padding:0;
  font-size:22px; letter-spacing:.04em; font-variant-numeric:tabular-nums; color:var(--text-strong); }
.nc-field input:focus { outline:none; box-shadow:none; }
.nc-hint { margin:0; font-size:13px; line-height:18px; color:var(--text-muted); }
.nc-go { height:50px; margin-top:6px; border:0; border-radius:25px; background:#21C063; color:#fff;
  font-size:16px; font-weight:600; box-shadow:none; }
.nc-go:disabled { opacity:.4; }
/* На телефоне — вверху экрана: снизу его закрыла бы клавиатура. */
@media (max-width:860px) {
  dialog.nc[open] { align-items:flex-start; padding:calc(10px + env(safe-area-inset-top)) 10px 0; box-sizing:border-box; }
  .nc-box { width:100%; animation:nc-down .26s cubic-bezier(.2,.8,.2,1); }
}
@keyframes nc-down { from { transform:translateY(-24px); opacity:0; } }
@media (max-width:860px) { .wa-chips { display:block; } }
@media (max-width:860px) {
  .sidebar nav, .sidebar-foot { display:none; }
  /* Подсказка по наведению на телефоне не показывается никогда — пальцем
     не наводят, — зато её текст в одну строку (nowrap) шире экрана, и
     абсолютный блок растягивал документ: страница ехала вправо. */
  [data-tip]::after, [data-hint]::after { content:none; }
  /* Кроме значка вопроса у показателя: объяснение цифры нужно и на
     телефоне. Текст переносится по словам и ограничен по ширине, так
     что документ не растягивает. */
  .kpi-q[data-hint]::after, .kpi-d[data-hint]::after {
    content:attr(data-hint); white-space:normal; width:min(250px, 76vw);
    text-overflow:clip; }
/* Панель — плавающая капсула из матового стекла, как в WhatsApp на iOS:
   контент просвечивает сквозь нее размыто, активная вкладка — на светлой
   подложке, на «Чатах» — сколько клиентов ждут ответа. */
/* Почти у нижнего края, как в WhatsApp: капсула стоит рядом с полоской
   «домой», а не над всей ее зоной. Без этой зоны (браузер, Android) —
   небольшой отступ. */
.tabbar { display:flex; position:fixed; left:10px; right:10px; bottom:max(6px, calc(env(safe-area-inset-bottom) - 14px));
    z-index:40; height:66px; view-transition-name:tabbar; padding:5px; gap:2px; border-radius:32px;
    background:color-mix(in srgb, var(--surface) 62%, transparent);
    backdrop-filter:blur(22px) saturate(180%); -webkit-backdrop-filter:blur(22px) saturate(180%);
    border:.5px solid color-mix(in srgb, var(--text-strong) 14%, transparent);
    box-shadow:0 12px 32px -8px rgba(0,0,0,.35), inset 0 .5px 0 rgba(255,255,255,.08); }
/* flex:1 с min-width:auto не даёт кнопке сжаться меньше своей подписи:
   пять подписей складывались в 413 точек и растягивали всю страницу
   (на телефоне фиксированная панель тянет за собой документ). Разрешаем
   сжиматься, а подпись при нехватке места укорачиваем. */
.tabbar > a, .tabbar summary { flex:1 1 0; min-width:0; height:100%; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:2px; padding:0 2px; border-radius:27px;
    color:var(--text-primary); font-size:11px; font-weight:500; list-style:none; cursor:pointer;
    transition:background .15s ease; -webkit-tap-highlight-color:transparent; }
.tabbar > a span, .tabbar summary span { max-width:100%; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap; }
.tabbar summary::-webkit-details-marker { display:none; }
.tabbar svg { width:29px; height:29px; fill:none; stroke:currentColor; stroke-width:1.6;
    stroke-linecap:round; stroke-linejoin:round; }
.tabbar .tab-ic { position:relative; display:flex; align-items:center; justify-content:center; width:32px; height:32px; }
.tabbar > a.active, .tab-more[open] > summary { background:color-mix(in srgb, var(--text-strong) 11%, transparent);
    color:var(--text-strong); }
.tabbar > a:active, .tabbar summary:active { background:color-mix(in srgb, var(--text-strong) 8%, transparent); }
.tab-ava { width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
    background:color-mix(in srgb, var(--text-strong) 14%, transparent); color:var(--text-strong);
    font-size:14px; font-weight:600; font-style:normal; }
.tabbar > a.tab-me.active .tab-ava { box-shadow:0 0 0 2px var(--text-strong); }
.tab-badge { position:absolute; top:-5px; left:19px; min-width:20px; height:20px; padding:0 5px;
    border-radius:10px; background:#21C063; color:#fff; font-size:11.5px; font-weight:600; font-style:normal;
    line-height:20px; text-align:center; box-shadow:0 0 0 2px color-mix(in srgb, var(--surface) 80%, transparent); }
.tab-more { flex:1 1 0; min-width:0; position:relative; }

/* Лист поверх панели: на телефоне выпадающее меню вниз уезжает за экран. */
  /* Закрытый <details> прячет содержимое сам, но только пока у него не
     задан свой display: лист с display:flex оставался в раскладке и
     растягивал документ на ширину имени пользователя. */
  .tab-more:not([open]) .tab-sheet { display:none; }
  /* Затемнение под листом. Считается оно от нижней панели, а не от окна:
     у панели backdrop-filter, а он делает её точкой отсчёта для всего
     fixed внутри. Поэтому не inset, а bottom:0 + высота в экран. */
  /* Затемнение — только над панелью: сама панель и кнопка «Еще» видны,
     и понятно, где закрыть. */
  .tab-more[open]::after { content:""; position:fixed; left:0; right:0; bottom:100%; height:100vh;
    background:var(--scrim); pointer-events:none; }
  /* Лист считается от панели (у нее backdrop-filter): во всю ее ширину,
     над ней с зазором. */
  .tab-sheet { position:fixed; left:0; right:0; bottom:calc(100% + 10px); background:var(--surface);
    border:.5px solid var(--border-strong); border-radius:22px; padding:8px;
    box-shadow:0 24px 60px -20px rgba(17,17,17,.2); display:flex; flex-direction:column; }
.tab-sheet a { padding:14px 14px; border-radius:10px; color:var(--text-primary); font-size:16px; }
.tab-sheet a.tab-sheet-head { padding:10px 14px 12px; border-radius:10px 10px 0 0; }
.tab-sheet-head .avatar { width:36px; height:36px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--fill-subtle); color:var(--text-strong); font-size:15px; font-weight:500; }
.tab-sheet-head .who { font-size:16px; color:var(--text-strong); }
.tab-sheet-head .role { font-size:13px; color:var(--text-muted); }
.tab-sheet a:active { background:var(--fill-subtle); }
.tab-sheet-head .who-wrap { min-width:0; overflow:hidden; }
.tab-sheet-head .who, .tab-sheet-head .role { display:block; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap; }
.tab-sheet-head { display:flex; align-items:center; gap:10px; padding:10px 14px 12px;
    border-bottom:.5px solid var(--border-soft); margin-bottom:6px; }
}
/* Телефон: боковое меню уезжает совсем, навигация живёт в нижней панели.
   Этот блок годами правил класс .shell, которого в разметке давно нет, —
   поэтому на телефоне оставались обе колонки, и 240 пикселей меню
   съедали экран шириной 375. */
@media (max-width:860px) {
  .app { grid-template-columns:minmax(0,1fr); }
  .sidebar { display:none; }
  /* Нижняя панель перекрывает последние строки: отдаём ей место. */
  .content { padding-bottom:calc(84px + env(safe-area-inset-bottom)); }
  .topbar-inner { padding:0 14px; gap:10px; }
  .crumbs i { display:none; }
  .crumbs { font-size:15px; }
  .topsearch kbd { display:none; }
  .topsearch input { padding-right:12px; }
  /* Поиск в шапке раскрывается поверх названия, а не рядом с ним. */
  .topsearch { position:absolute; left:14px; right:14px; top:8px; z-index:2; display:none; }
  .topbar.searching .topsearch { display:block; }
  .topbar.searching .crumbs, .topbar.searching .top-actions { visibility:hidden; }
  .topsearch input { height:34px; font-size:16px; }
  .only-phone, .icon-btn.only-phone { display:inline-flex; }
  .no-phone, .icon-btn.no-phone { display:none; }
  /* Кнопки-значки под палец. Тридцать два пикселя — это размер под
     курсор мыши, который наводят с точностью до пикселя; пальцем в такую
     кнопку попадают через раз, и это главное, из-за чего платформой
     неудобно управлять с телефона. Сорок — всё ещё помещается вчетвером
     в шапке рядом с хлебными крошками. */
  .icon-btn { width:40px; height:40px; }
  .icon-btn svg { width:19px; height:19px; }
  /* Крестики и мелкие кнопки внутри строк списков не трогаем: они растут
     вместе со строкой и к шапке отношения не имеют. */
  .ia-recent-row .icon-btn, .ia-chat-row .icon-btn, .tr-h-row .icon-btn {
    width:32px; height:32px; }
  /* Переключатель темы на телефоне нужен больше, чем на большом экране:
     система там одна на всё, а работают с платформой и при свете, и в
     темноте. Прятали его ради места в шапке — место нашлось у «Спроси
     ИИшку», она есть в меню. */
  #askai { display:none; }
  .crumbs { flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  /* Одно название страницы, а не «Задачи / Задачи». */
  .crumbs a { display:none; }
  /* В чатах свой крупный заголовок, второй сверху не нужен. */
  body:has(.chat-head) .crumbs b { visibility:hidden; }
  .crumbs b { font-size:17px; font-weight:600; }
  /* Уведомления и меню профиля — по ширине экрана, а не 340 точек от
     правого края: на телефоне они уезжали за левую границу. */
  .notif-panel { position:fixed; left:10px; right:10px; width:auto;
    top:calc(56px + env(safe-area-inset-top)); max-height:70vh; }
  .me-menu { position:fixed; right:10px; left:auto; width:min(300px, calc(100vw - 20px));
    top:calc(56px + env(safe-area-inset-top)); }
  .notif-panel a, .me-menu a { padding:12px 12px; font-size:15px; }
  .notif-panel a:active, .me-menu a:active, .tab-sheet a:active { background:var(--fill-subtle); }

  /* Список чатов как в WhatsApp: сверху «⋯» и зеленый «+», крупный
     заголовок, поиск полем-пилюлей, фильтры пилюлями со счетчиком,
     строки с крупными фото и разделителем от текста, без рамки вокруг.
     Общая шапка страницы здесь не нужна — все есть в самом списке. */
  body:has(.chat-layout:not(.has-thread)) .topbar, body:has(.me-page) .topbar { display:none; }
  /* Прокручивается вся страница, а не список внутри рамки: поиск и
     фильтры уезжают вверх, и под переписки остается весь экран. Полоска
     с «⋯» и «+» прилипает; когда крупный заголовок уходит под нее, в ней
     проявляется маленький «Чаты», а сама она становится матовой. */
  .chat-layout:not(.has-thread) { height:auto; min-height:0; overflow:visible; grid-template-columns:minmax(0,1fr); }
  /* Без своей прокрутки колонка тянулась до ширины строки фильтров, и
     страница становилась шире экрана — ограничиваем ее. */
  .chat-layout:not(.has-thread) .chat-list { overflow:visible; min-width:0; }
  .chat-head { display:contents; }
  .wa-top { position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between;
    width:auto; margin:-24px -20px 0; padding:calc(10px + env(safe-area-inset-top)) 20px 8px; }
  /* Свернутая шапка — стекло, которое сходит на нет без всякой линии.
     Размытие — только в верхней части, под почти непрозрачной подложкой,
     поэтому его край не виден; ниже — мягкий цветовой градиент с плавной
     кривой (много точек), который тает до нуля, как в WhatsApp. */
  .wa-top::after { content:""; position:absolute; left:0; right:0; top:0; height:72%; z-index:-2;
    -webkit-backdrop-filter:blur(16px) saturate(170%); backdrop-filter:blur(16px) saturate(170%);
    opacity:0; transition:opacity .2s ease; pointer-events:none; }
  .wa-top::before { content:""; position:absolute; left:0; right:0; top:0; bottom:-44px; z-index:-1;
    background:linear-gradient(to bottom,
      color-mix(in srgb, var(--bg) 97%, transparent) 0%,
      color-mix(in srgb, var(--bg) 95%, transparent) 38%,
      color-mix(in srgb, var(--bg) 90%, transparent) 50%,
      color-mix(in srgb, var(--bg) 80%, transparent) 60%,
      color-mix(in srgb, var(--bg) 64%, transparent) 69%,
      color-mix(in srgb, var(--bg) 45%, transparent) 77%,
      color-mix(in srgb, var(--bg) 27%, transparent) 85%,
      color-mix(in srgb, var(--bg) 12%, transparent) 92%,
      color-mix(in srgb, var(--bg) 3%, transparent) 97%,
      transparent 100%);
    opacity:0; transition:opacity .2s ease; pointer-events:none; }
  body.wa-collapsed .wa-top::before, body.wa-collapsed .wa-top::after { opacity:1; }
  .wa-right { display:flex; gap:10px; }
  .wa-theme .wt-sun { display:none; }
  :root[data-theme="dark"] .wa-theme .wt-sun { display:block; }
  :root[data-theme="dark"] .wa-theme .wt-moon { display:none; }
  .wa-round.wa-theme svg { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; width:21px; height:21px; }
  .wa-title { position:absolute; left:50%; transform:translate(-50%, 6px) scale(.94); opacity:0;
    font-size:17px; font-weight:600; color:var(--text-strong); pointer-events:none;
    transition:opacity .2s ease, transform .2s ease; }
  body.wa-collapsed .wa-title { opacity:1; transform:translate(-50%, 0) scale(1); }
  .chat-head h1 { transition:opacity .2s ease; }
  body.wa-collapsed .chat-head h1 { opacity:0; }
  .wa-round { width:40px; height:40px; padding:0; border:0; border-radius:50%; display:grid; place-items:center;
    background:color-mix(in srgb, var(--text-strong) 9%, transparent); color:var(--text-strong); box-shadow:none; }
  .wa-round svg { width:22px; height:22px; fill:currentColor; stroke:currentColor; stroke-width:0; }
  .wa-round.wa-new { background:#21C063; color:#fff; }
  .wa-round.wa-new svg { fill:none; stroke-width:2.2; stroke-linecap:round; }
  .chat-head { flex-wrap:wrap; gap:6px; margin-bottom:6px; }
  .chat-head h1 { font-size:34px; font-weight:700; letter-spacing:-.025em; width:100%; margin:10px 0 14px; }
  .chat-head h1 .chat-count { display:none; }
  .chat-head .chat-filters { display:none; }
  .wa-chips { padding:2px 0 8px; }
  .wa-chips .range { display:flex; gap:8px; padding:0; overflow-x:auto; scrollbar-width:none; background:none; box-shadow:none; border:0; }
  .wa-chips .range::-webkit-scrollbar { display:none; }
  .wa-chips .range a { flex:none; height:34px; display:inline-flex; align-items:center; gap:6px; padding:0 15px;
    border-radius:17px; background:none; border:1px solid var(--border-strong); color:var(--text-muted);
    font-size:15px; font-weight:500; box-shadow:none; }
  .wa-chips .range a small { font-size:13px; color:inherit; opacity:.85; }
  .wa-chips .range a.active { background:#D9FDD3; border-color:transparent; color:#0A3E1F; }
  :root[data-theme="dark"] .wa-chips .range a.active { background:#103529; color:#D9FDD3; }
  .chat-layout:not(.has-thread) { background:none; box-shadow:none; border-radius:0; }
  .chat-layout:not(.has-thread) .chat-list { border-right:0; }
  /* Поиск уезжает вместе со списком, как в WhatsApp, — не прилипает. */
  .chat-find { position:static; border-bottom:0; background:none; padding:2px 0 8px; }
  .chat-find .cf-bar { background:var(--fill-subtle); border-radius:22px; }
  .chat-find input[name=q] { height:44px; }
  .chat-find input[name=q]:focus { background:none; }
  .chat-item { grid-template-columns:52px minmax(0,1fr); column-gap:14px; padding:10px 2px; border-bottom:0; }
  .chat-item + .chat-item::before { content:""; position:absolute; top:0; left:68px; right:0;
    border-top:.5px solid var(--border-soft); }
  .chat-item > .avt { width:52px !important; height:52px !important; font-size:18px; }
  .chat-item .name { font-size:17px; font-weight:600; }
  .chat-item .snippet { font-size:15px; }
  .chat-item .when { font-family:inherit; font-size:13.5px; }
}

/* Приглашение поставить приложение: узкая полоска под шапкой, только на
   телефоне и только пока её не закрыли. */
.a2hs { display:none; }
@media (max-width:860px) {
  .a2hs.on { display:flex; align-items:center; gap:10px; padding:10px 14px;
    background:var(--brand-tint); color:var(--text-strong); font-size:13.5px; }
  .a2hs svg { width:17px; height:17px; flex:none; fill:none; stroke:var(--brand);
    stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
  .a2hs span { flex:1; min-width:0; }
  .a2hs-x { flex:none; width:28px; height:28px; padding:0; border:0; background:none;
    box-shadow:none; color:var(--text-quiet); font-size:19px; line-height:1; }
}

/* ── Переходы между разделами ─────────────────────────────────────────
   Полная перезагрузка страницы выглядела как зависание: нажал — ничего,
   потом белая вспышка. Теперь браузер (Safari 18.2+, Chrome) плавно
   проявляет новую страницу, а нижняя панель стоит на месте. Где этого
   нет, хотя бы сразу видно, что нажатие принято: вкладка подсвечивается,
   страница тускнеет. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation:vt-out .16s ease-in both; }
::view-transition-new(root) { animation:vt-in .22s ease-out both; }
::view-transition-group(tabbar) { animation:none; }
@keyframes vt-out { to { opacity:0; transform:translateY(-4px); } }
@keyframes vt-in { from { opacity:0; transform:translateY(6px); } }
body.leaving .content { opacity:.5; transition:opacity .15s ease; }
body.navigating::after { content:""; position:fixed; left:0; top:0; z-index:1000; height:3px; width:40%;
  background:linear-gradient(90deg, transparent, #21C063 40%, #21C063 60%, transparent);
  animation:nav-run 1s ease-in-out infinite; pointer-events:none; }
@keyframes nav-run { from { transform:translateX(-100%); } to { transform:translateX(260%); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation:none; }
}

/* ── Запуск с домашнего экрана ───────────────────────────────────────── */
/* Окно приложения занимает весь экран — вместе с часами сверху и полосой
   жестов снизу. Это и отличает его от вкладки браузера, но отступы с
   этого момента наши: без них заголовок лежит под часами. */
@media (display-mode: standalone) {
  .topbar { height:auto; padding-top:env(safe-area-inset-top); }
  /* Переписка открывается поверх всего экрана, её шапка — тоже под часами. */
  .chat-layout.has-thread .thread-head { padding-top:calc(10px + env(safe-area-inset-top)); }
  /* Подсветка нажатия и увеличительное стекло выдают веб-страницу. */
  body { -webkit-tap-highlight-color:transparent; }
  .btn, .tabbar a, .tabbar summary, .icon-btn { -webkit-touch-callout:none; }
  /* Оттянутая вниз страница показывала белую полосу под фоном. */
  html, body { overscroll-behavior-y:none; }
}