/* Citena — макет панели. Оформление снято с дизайн-прототипа
   «CRM Bagira Perfeccion.dc.html»: тёмная лента слева, зелёный акцент,
   панель ассистента справа, светлая и тёмная тема. */
:root{
  --bg:#f3f4f6; --card:#ffffff; --ink:#111827; --ink-2:#374151; --mut:#6b7280;
  --line:#e5e7eb; --line-2:#f3f4f6;
  /* Дорожка шкалы. Отдельный токен, а не `--line`: линиям положено быть
     еле заметными, а дорожка обязана читаться даже под заливкой на всю
     ширину — иначе полоса выглядит просто зелёным прямоугольником. */
  --track:#d6dae0;
  /* ⚠️ Зелёный — тот же, что на citena.es (04.10.2026): раньше в панели стоял
     #16a34a, теплее и с желтизной, и рядом с искрой логотипа он читался как
     чужой. Пары разведены по назначению:
     --ok      #22a06b  полосы, точки, рамки, крупные цифры (графика, норма 3:1);
     --ok-fill #1a8456  заливка ПОД БЕЛЫМ ТЕКСТОМ: белый по фирменному даёт 3,3:1
                        при норме 4,5, здесь 4,69. Прежние кнопки панели белым
                        по #16a34a давали те же 3,3 — исправилось заодно;
     --ok-ink  #17754e  зелёный ТЕКСТ на светлом (5,69 на белом, 4,87 на --ok-bg). */
  --rail:#0f1a14; --rail-ink:#8b9a91; --rail-on:#1a8456;
  --ok:#22a06b; --ok-fill:#1a8456; --ok-bg:#dff2e7; --ok-ink:#17754e;
  --bad:#dc2626; --bad-bg:#fee2e2;
  --warn:#d97706; --warn-bg:#fef3c7;
  /* ⚠️ Текст на предупреждающей подложке — свой оттенок: сам --warn по ней
     даёт 2,86:1 при норме 4,5. #92400e — 6,37:1. */
  --warn-ink:#92400e; --info-ink:#1d4ed8;
  --warn-soft:#fffaeb;   /* подсветка строки: заметна, но не кричит */
  --info:#2563eb; --info-bg:#dbeafe;
  /* Машинный разбор (разбор ИИ в диалогах, метка «ИИ», суточная сводка).
     ⚠️ ФИОЛЕТОВОГО В ПАНЕЛИ БОЛЬШЕ НЕТ (решение владельца 04.10.2026: «не сочетается
     ни в светлой, ни в тёмной»). Разбор — в цвет темы, как ассистент. От «сделано»
     догадку отличает не цвет, а форма: пунктирная рамка у разбора и метка «ИИ».
     Точка «заход на сайт» в ленте клиента, которая держалась на фиолетовом, — синяя. */
  --ai:#1a8456; --ai-bg:#eef8f2; --ai-ink:#17754e; --ai-on:#fff; --ai-sel:#d2eedf;
  /* Ассистент — в цвет темы (решение владельца 03.10.2026). Заливка с белым
     текстом — #1a8456, а не фирменный #22a06b: у того белый даёт 3,3:1, ниже
     нормы для текста, а на лаунчере текст есть. Выделение #d2eedf держит
     текст 4,62:1 (прежнее #bbf7d0 давало 4,14 — ниже нормы). */
  --aiq:#1a8456; --aiq-bg:#dff2e7; --aiq-ink:#17754e; --aiq-on:#fff; --aiq-sel:#d2eedf;
  --col:#e8eaee;  /* подложка колонки канбана: темнее страницы, светлее карточки */
  --shadow:0 1px 2px rgba(16,24,40,.05);
}
[data-theme="dark"]{
  --bg:#0b100d; --card:#141b17; --ink:#e8edea; --ink-2:#c3ccc7; --mut:#8b9a91;
  --line:#22302a; --line-2:#1a241f; --track:#2e3f37;
  --rail:#080d0a; --rail-ink:#7d8c83;
  --ok-bg:#0f2a20; --bad-bg:#2a1214; --warn-bg:#2a2110; --info-bg:#101f37;
  --warn-ink:#fbbf24; --info-ink:#93c5fd;   /* 9,51:1 и 9,71:1 */
  --warn-soft:#1e1f14;
  /* ⚠️ `--ok-ink` тёмной теме нужен СВОЙ: тёмно-зелёный текст светлой темы
     на тёмной подложке метки давал около 3:1 при норме 4,5 — так были набраны
     все зелёные метки, «Записана» в том числе. Здесь светлый зелёный сайта:
     9,76:1 на --ok-bg, 11,17:1 на карточке. Правило общее (см. `--ai-on`):
     меняется переменная фона — обязана меняться и переменная текста поверх неё. */
  --ok-ink:#7ee2b0;
  --ai:#7ee2b0; --ai-bg:#0f2a20; --ai-ink:#7ee2b0; --ai-on:#05301f; --ai-sel:#164a33;
  /* ⚠️ В тёмной теме заливка СВЕТЛЕЕ, поэтому текст на ней тёмный: белый
     по светлому зелёному нечитаем, тёмный #05301f — 9,24:1. */
  --aiq:#7ee2b0; --aiq-bg:#0f2a20; --aiq-ink:#7ee2b0; --aiq-on:#05301f; --aiq-sel:#164a33;
  --col:#0f1713;
  --shadow:none;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg); color:var(--ink); font-size:15px; line-height:1.5;
  /* ⚠️ Onest — тот же шрифт, что на citena.es, и ЗАГРУЖАЕТСЯ с нашего сервера
     (04.10.2026). Раньше здесь стоял Inter, которого панель не грузила вовсе:
     он был виден только там, где установлен в системе, а клиника видела
     Segoe UI на Windows, системный шрифт Apple на iPhone и Roboto на Android. */
  font-family:'Onest',system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
button{font:inherit; color:inherit}

.ct-app{display:flex; min-height:100vh}

/* ---------- лента слева ---------- */
.ct-rail{width:64px; flex:0 0 64px; background:var(--rail); display:flex; flex-direction:column;
  align-items:center; padding:12px 0; position:sticky; top:0; height:100vh; gap:4px}
.ct-ten{width:34px; height:34px; border-radius:9px; border:0; cursor:pointer; font-weight:600; font-size:14px;
  display:flex; align-items:center; justify-content:center; background:#1e2b24; color:#93a49a; margin-bottom:4px; line-height:1}
.ct-ten[aria-pressed="true"]{background:var(--ok-fill); color:#fff}
.ct-rail__sep{width:26px; height:1px; background:rgba(255,255,255,.1); margin:8px 0 6px}
.ct-rail__b{width:40px; height:40px; border-radius:10px; border:0; background:none; color:var(--rail-ink);
  text-decoration:none;
  cursor:pointer; display:flex; align-items:center; justify-content:center; position:relative; font-size:17px; line-height:1}
.ct-rail__b:hover{background:rgba(255,255,255,.06); color:#fff}
.ct-rail__b[aria-selected="true"]{background:rgba(34,160,107,.18); color:#fff}
.ct-rail__b .ct-dot{position:absolute; top:4px; right:4px; min-width:16px; height:16px; border-radius:9px;
  background:var(--bad); color:#fff; font-size:10px; font-weight:600; display:flex; align-items:center;
  justify-content:center; padding:0 4px; line-height:1}

/* ---------- содержимое ---------- */
.ct-main{flex:1; min-width:0; padding:22px 26px 50px; overflow:hidden}
.ct-top{display:flex; gap:16px; align-items:flex-start; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap}
.ct-top h1{font-size:24px; margin:0 0 5px; font-weight:600; letter-spacing:-.3px; line-height:1.2}
.ct-top p{margin:0; color:var(--mut); font-size:14px; max-width:520px; line-height:1.5}
/* Правая группа шапки, как в макете: тянется, переносится и остаётся прижатой
   ВПРАВО. Без flex:1 1 auto она на средних ширинах уезжала на вторую строку
   и вставала по левому краю — выглядело как рассыпавшаяся вёрстка.
   min-width:0 обязателен: у flex-элемента он по умолчанию auto, и группа
   не сжимается уже своего содержимого. Та же ловушка, что была у плиток
   в полосе цифр на лендинге.
   Зазор разный по осям (8px между строками, 10px между элементами) —
   иначе перенесённые строки липнут друг к другу. */
.ct-ctl{display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end;
  gap:8px 10px; flex:1 1 auto; min-width:0}
/* Заголовок тоже должен уметь сжиматься, иначе он не отдаст место группе. */
.ct-top > div:first-child{min-width:0}
/* Вкладки внутри экрана — тот же сегмент, но крупнее: это выбор раздела,
   а не переключатель языка в углу. Своей строкой над содержимым. */
.ct-seg--tabs{display:inline-flex; margin-bottom:16px}
/* Кнопка добавления стоит в одну строку со вкладками и прижата вправо.
   Через flex, а не float: float вынимает элемент из потока, и кнопка
   наезжала на плашку под вкладками. */
.ct-tabsbar{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.ct-tabsbar .ct-seg--tabs{margin-bottom:16px}
.ct-tabs-add{margin-bottom:16px; text-decoration:none; display:inline-flex; align-items:center}
/* Поиск и кнопка в одной строке: на узком поиск занимает всю ширину,
   кнопка уезжает под него, а не сжимается в нечитаемую. */
.ct-bar-row{display:flex; gap:10px; align-items:stretch; flex-wrap:wrap}
.ct-bar-row .ct-search{flex:1 1 220px}
.ct-bar-row .ct-btn{flex:0 0 auto; display:inline-flex; align-items:center; text-decoration:none}
/* Левая колонка каталога шире обычной: в ней таблица, а не список имён. */
/* У каталога слева не список имён, а таблица с ценой и длительностью —
   332px ей мало, названия ломаются на четыре строки. Модификатор ставится
   на КОНТЕЙНЕР: .ct-split это grid с фиксированной первой колонкой,
   и flex на потомке там не действует. */
/* ⚠️ Селектор ДВОЙНОЙ (.ct-split.ct-split--wide), а не одиночный: у .ct-split
   та же специфичность, и оно объявлено ниже по файлу — при равенстве
   выигрывает последний, и модификатор молча не срабатывал. Та же ловушка
   записана для лендинга: правила, зависящие от порядка, ломаются при первой
   же перестановке блоков. */
.ct-split.ct-split--wide{grid-template-columns:minmax(0,520px) minmax(0,1fr)}
@media(max-width:1200px){ .ct-split.ct-split--wide{grid-template-columns:minmax(0,420px) minmax(0,1fr)} }
@media(max-width:1000px){ .ct-split.ct-split--wide{grid-template-columns:1fr} }
/* Выключенная строка приглушена, но читаема: история по ней остаётся. */
.ct-off td{opacity:.55}
/* Недельный шаблон смен: семь строк «с — по». */
.ct-week{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px}
.ct-week__d{display:flex; align-items:center; gap:6px}
.ct-week__k{flex:0 0 34px; font-size:12.5px; color:var(--mut)}
.ct-week__d input{width:100%; min-width:0; background:var(--line-2); border:1px solid var(--line);
  border-radius:8px; padding:7px 9px; font:inherit; font-size:15px; color:var(--ink)}
.ct-week__d input:focus{outline:none; border-color:var(--ok); background:var(--card)}
.ct-hint{display:block; font-size:12px; color:var(--mut); margin-top:5px; line-height:1.45}
.ct-seg--tabs button{padding:7px 16px; font-size:13.5px}
/* Длинный список внутри карточки прокручивается САМ. Иначе страница вытягивается
   под него целиком: в «Пациентах» сто строк давали 7000px, и чтобы дойти
   до карточки справа, надо было проскроллить мимо сотни чужих фамилий. */
.ct-scroll{max-height:min(68vh, 620px); overflow-y:auto; overscroll-behavior:contain}
/* Широкая таблица прокручивается внутри своей обёртки, а не тянет страницу
   вбок: резать колонки нельзя, в них весь смысл. */
.ct-tblwrap{overflow-x:auto}
.ct-tr--head td{background:var(--line-2); font-size:12.5px}
.ct-who{display:flex; gap:10px; align-items:center}
.ct-seg--ico button{display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:26px; padding:0}
.ct-seg--ico svg{width:15px; height:15px}
.ct-seg a{text-decoration:none; display:block}
.ct-seg{display:flex; background:var(--line-2); border:1px solid var(--line); border-radius:9px; padding:2px}
.ct-seg button{border:0; background:none; padding:5px 11px; border-radius:7px; cursor:pointer;
  font-size:13px; color:var(--mut); line-height:1.4}
.ct-seg button[aria-pressed="true"]{background:var(--card); color:var(--ink); font-weight:600; box-shadow:var(--shadow)}
.ct-clock{text-align:right; line-height:1.25}
.ct-clock__k{font-size:10px; letter-spacing:.8px; color:var(--mut); text-transform:uppercase}
.ct-clock__v{font-size:17px; font-weight:600; font-variant-numeric:tabular-nums}

.ct-view{display:none}
.ct-view.ct-on{display:block}

.ct-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(172px,1fr)); gap:12px; margin-bottom:18px}
.ct-kpi{background:var(--card); border:1px solid var(--line); border-radius:11px; padding:14px 16px; box-shadow:var(--shadow)}
.ct-kpi__k{font-size:10px; letter-spacing:.8px; text-transform:uppercase; color:var(--mut); line-height:1.5}
.ct-kpi__v{font-size:28px; font-weight:600; letter-spacing:-.6px; margin:3px 0 2px; line-height:1.15}
.ct-kpi__d{font-size:12.5px; color:var(--mut); line-height:1.45}
.ct-kpi--bad .ct-kpi__v{color:var(--bad)} .ct-kpi--ok .ct-kpi__v{color:var(--ok)} .ct-kpi--warn .ct-kpi__v{color:var(--warn)}
/* В плитке не всегда число. Источник и название кампании — это текст, и в слоте
   на 28px с отрицательным межбуквенным он выглядит как заголовок, а длинное
   («Botox | Leads | 21.09.26») ещё и вылезает: у числа переносить нечего,
   у текста есть. Поэтому текстовому значению — свой размер и перенос. */
.ct-kpi__v--t{font-size:17px; letter-spacing:0; line-height:1.35; white-space:normal;
  overflow-wrap:anywhere; margin-top:4px}

.ct-card{background:var(--card); border:1px solid var(--line); border-radius:11px; margin-bottom:16px;
  overflow:hidden; box-shadow:var(--shadow)}
.ct-card__h{padding:13px 17px; border-bottom:1px solid var(--line); display:flex; gap:12px;
  align-items:center; justify-content:space-between; flex-wrap:wrap}
.ct-card__h h2{font-size:15px; margin:0; font-weight:600; line-height:1.35}
.ct-card__h .ct-sub{font-size:12.5px; color:var(--mut); line-height:1.45}
.ct-card__b{padding:15px 17px}
.ct-card__b--0{padding:0}
.ct-grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.ct-grid2--w{grid-template-columns:1.5fr 1fr}
@media(max-width:1100px){.ct-grid2,.ct-grid2--w{grid-template-columns:1fr}}

table{width:100%; border-collapse:collapse; font-size:14px}
th{text-align:left; font-size:10px; letter-spacing:.7px; text-transform:uppercase; color:var(--mut);
  font-weight:600; padding:9px 17px; border-bottom:1px solid var(--line); white-space:nowrap; line-height:1.5}
td{padding:11px 17px; border-bottom:1px solid var(--line-2); line-height:1.45; vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--line-2)}
td:last-child,th:last-child{white-space:nowrap; width:1%}
.ct-num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
/* «Смотрят против спрашивают»: подсвечены страницы, которые смотрят и о которых
   не спрашивают. Подложка + черта слева + оранжевый ноль — видно с первого
   взгляда, не читая пометку. Пометка — обычным кеглем и с переносом:
   серым мелким в одну строку её не замечали вовсе. */
/* Подсветка СЛАБАЯ (просьба владельца): полная --warn-bg и черта в 3px
   перекрикивали таблицу. Главный сигнал — оранжевый ноль. */
/* ОБЩАЯ подсветка строки «здесь надо действовать» — для всех таблиц панели
   (04.10.2026): слабая подложка, черта 2px слева, ключевое число оранжевым.
   Правило, по которому строка горит, у каждой таблицы своё и записано
   рядом с разметкой; стиль — один, чтобы «горит» везде значило одно. */
tr.ct-hot td{background:var(--warn-soft)}
tr.ct-hot td:first-child{box-shadow:inset 2px 0 0 var(--warn)}
tr.ct-hot .ct-hot__v{color:var(--warn-ink); font-weight:600}
.ct-hot__t{display:inline-block; margin-left:6px; font-size:12px; color:var(--warn-ink); white-space:nowrap}
.ct-vs td.ct-vs__n{white-space:normal; width:auto; min-width:200px; font-size:13px; line-height:1.4}
.ct-vs tr.ct-hot .ct-vs__n{color:var(--warn-ink)}
.ct-vs .ct-vs__n.is-lost{color:var(--info-ink)}
.ct-vs th.ct-num{text-align:right}
.ct-vs__m{display:none}
@media(max-width:820px){
  /* Четыре колонки в телефон не помещаются: пометка уезжала за край карточки.
     Она встаёт под название услуги, четвёртая колонка прячется. */
  .ct-vs th:last-child,.ct-vs td.ct-vs__n{display:none}
  .ct-vs__m{display:block; margin-top:6px; font-size:13px; line-height:1.4}
  .ct-vs tr.ct-hot .ct-vs__m{color:var(--warn-ink)}
  .ct-vs .ct-vs__m.is-lost{color:var(--info-ink)}
  .ct-vs td{padding-left:12px; padding-right:12px}
}
.ct-mut{color:var(--mut)} .ct-b{font-weight:600} .ct-sm{font-size:12.5px}

.ct-tag{display:inline-block; padding:2px 8px; border-radius:20px; font-size:11.5px; line-height:1.6; white-space:nowrap; font-weight:500}
.ct-tag--ok{background:var(--ok-bg); color:var(--ok-ink)}
.ct-tag--bad{background:var(--bad-bg); color:var(--bad)}
.ct-tag--warn{background:var(--warn-bg); color:var(--warn-ink)}
.ct-tag--info{background:var(--info-bg); color:var(--info)}
.ct-tag--mut{background:var(--line-2); color:var(--mut)}

.ct-q{display:flex; gap:12px; align-items:center; padding:13px 17px; border-bottom:1px solid var(--line-2)}
.ct-q:last-child{border-bottom:0}
.ct-q--late{background:var(--bad-bg); box-shadow:inset 3px 0 0 var(--bad)}
[data-theme="dark"] .ct-q--late{background:rgba(220,38,38,.09)}
.ct-av{width:36px; height:36px; flex:0 0 36px; border-radius:50%; background:var(--line-2); color:var(--mut);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; line-height:1}
.ct-q__m{flex:1; min-width:0}
.ct-q__n{font-weight:600; display:flex; gap:7px; align-items:center; flex-wrap:wrap; line-height:1.4}
.ct-q__t{color:var(--mut); font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.45}
.ct-q__w{text-align:right; line-height:1.3}
.ct-q__w b{color:var(--bad); font-size:15px; font-variant-numeric:tabular-nums}
.ct-q__w span{display:block; font-size:11.5px; color:var(--mut)}
.ct-btn{border:0; background:var(--ok-fill); color:#fff; padding:7px 14px; border-radius:8px; cursor:pointer;
  font-size:13px; font-weight:500; line-height:1.4}
.ct-btn--g{background:var(--line-2); color:var(--ink-2)}

/* Полоса нехватки над доской: сколько обращений неполны и чем именно.
   Кликается — доска сужается до них. */
.ct-gaps{display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 16px}
.ct-gap{display:inline-flex; align-items:baseline; gap:6px; padding:6px 12px; border-radius:20px;
  border:1px solid var(--line); background:var(--card); color:var(--mut); font-size:12.5px;
  line-height:1.5; text-decoration:none; transition:background-color .16s ease, border-color .16s ease}
.ct-gap b{font-size:14px; color:var(--ink); font-variant-numeric:tabular-nums}
.ct-gap:hover{background:var(--line-2); border-color:var(--mut)}
.ct-gap--on{background:var(--ok-bg); border-color:var(--ok); color:var(--ok-ink)}
.ct-gap--on b{color:var(--ok-ink)}
/* Проверочные отличаются видом: их видно, но ни с чем живым не спутать. */
.ct-gap--test{border-style:dashed}
.ct-gap--test.ct-gap--on{background:var(--warn-bg); border-color:var(--warn); color:var(--ink-2)}
.ct-gap--test.ct-gap--on b{color:var(--ink)}

.ct-kan{display:grid; grid-template-columns:repeat(5,1fr); gap:12px}
@media(max-width:1250px){.ct-kan{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.ct-kan{grid-template-columns:1fr}}
/* Колонка получает свою подложку: раньше она была того же цвета, что страница,
   и белые карточки висели ни на чём — границы столбца не читалось вовсе. */
.ct-kan__c{background:var(--col); border-radius:12px; padding:10px 10px 4px}
.ct-kan__h{display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12.5px;
  font-weight:600; color:var(--ink-2); padding:3px 4px 10px; line-height:1.4}
.ct-kan__h span:last-child{background:var(--card); color:var(--mut); border-radius:20px;
  min-width:22px; text-align:center; padding:1px 7px; font-size:11.5px; font-weight:600}
.ct-kan__n{background:var(--card); border:1px solid var(--line); border-radius:9px;
  padding:10px 11px 10px 13px; margin-bottom:8px; line-height:1.45; box-shadow:var(--shadow);
  border-left:3px solid var(--line);
  transition:background-color .16s ease, box-shadow .16s ease, transform .16s ease}
/* Карточка целиком кликабельна, а единственным откликом было подчёркивание
   имени — для коробки в 200px этого мало, непонятно, на чём стоит курсор.
   Подложка берётся из --line-2: в светлой теме это лёгкий серый по белому,
   в тёмной — наоборот чуть светлее фона, так что работает в обеих. */
/* Тестовая строка приглушена и обведена пунктиром: видно, что она есть,
   и невозможно спутать с настоящей. В счётчики и выгрузку не идёт. */
.ct-kan__n--test{opacity:.72; border-style:dashed}
.ct-kan__n--test:hover{opacity:1}
.ct-kan__n:hover{background:var(--line-2); box-shadow:0 3px 10px rgba(16,24,40,.10); transform:translateY(-1px)}
/* То же самое с клавиатуры: карточка — это кнопка, и обойти её табом должно
   быть так же понятно, как навести мышью. */
.ct-kan__n:has(.ct-kan__go:focus-visible){background:var(--line-2); box-shadow:0 3px 10px rgba(16,24,40,.10)}
.ct-kan__go:focus-visible{outline:2px solid var(--ok); outline-offset:2px; border-radius:4px}
/* Карточка без перехода дальше (последний статус) не притворяется кнопкой:
   подложка меняется, подъёма нет — наведение видно, обещания клика нет. */
.ct-kan__n:has(.ct-kan__go--off):hover{transform:none; box-shadow:var(--shadow)}
@media (prefers-reduced-motion: reduce){
  .ct-kan__n{transition:none}
  .ct-kan__n:hover{transform:none}
}
/* Левая грань карточки повторяет цвет колонки — статус виден, даже когда
   столбцы на узком экране встают друг под друга и шапка уезжает. */
.ct-kan__c--info .ct-kan__n{border-left-color:var(--info)}
.ct-kan__c--warn .ct-kan__n{border-left-color:var(--warn)}
.ct-kan__c--ok   .ct-kan__n{border-left-color:var(--ok)}
.ct-kan__c--mut  .ct-kan__n{border-left-color:var(--mut)}
.ct-kan__c--bad  .ct-kan__n{border-left-color:var(--bad)}
/* Карточка целиком — кнопка «в следующий статус»: это самое частое действие
   администратора за день, и прятать его в выпадающий список значит делать
   частое медленным. Кнопка, а не ссылка: перевод статуса меняет данные,
   и GET для этого не годится. */
.ct-kan__go{display:block; width:100%; text-align:left; background:none; border:0;
  padding:0; font:inherit; color:inherit; cursor:pointer; position:relative}
/* Стрелка «в следующий статус». Видна всегда, а не только при наведении:
   на телефоне наведения нет вовсе, а подсказка title там не показывается.
   Приглушена, чтобы не спорить с именем, и сдвигается вправо под курсором —
   направление действия читается без подписи.
   Отступ справа у имени и услуги, иначе длинная строка заезжает под стрелку. */
.ct-kan__next{position:absolute; top:-1px; right:0; width:24px; height:24px; border-radius:50%;
  border:1px solid var(--line); background:var(--line-2); color:var(--ink-2);
  display:flex; align-items:center; justify-content:center;
  transition:transform .16s ease, color .16s ease, background-color .16s ease, border-color .16s ease}
.ct-kan__next svg{width:15px; height:15px; margin-left:1px}
/* Под курсором кружок становится зелёным и уезжает вправо: и то, что это
   кнопка, и куда она ведёт, видно без подписи. */
.ct-kan__go:hover .ct-kan__next{transform:translateX(4px); background:var(--ok-fill); border-color:var(--ok-fill); color:#fff}
/* display:block обязателен: у строчного элемента padding-right добавляет
   пробел ПОСЛЕ последнего знака, но ширину строки не ограничивает — текст
   переносится позже и заезжает под стрелку. Поймано измерением (-5px),
   на глаз выглядело нормально. */
.ct-kan__go b, .ct-kan__go .ct-s{display:block; padding-right:30px}
/* Подчёркивания при наведении НЕТ намеренно: оно было единственным откликом,
   пока не появилась подсветка всей карточки. Теперь их два на одно действие,
   и подчёркивание читается как ссылка, хотя это кнопка. */
.ct-kan__go--off{cursor:default}
/* Откат и «потеряна» — мелкие и приглушённые: нужны редко, но без них
   ошибку одного клика пришлось бы чинить в базе. */
.ct-kan__act{display:flex; gap:4px; margin-top:8px}
.ct-kan__act form{margin:0}
.ct-kan__b{display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border:1px solid var(--line); border-radius:6px;
  background:var(--card); color:var(--mut); font-size:12px; line-height:1;
  cursor:pointer; text-decoration:none; padding:0;
  transition:background-color .16s ease, color .16s ease, border-color .16s ease}
/* --fill в проекте нет: была ссылка на несуществующую переменную, и фон
   при наведении молча не менялся. CSS о таком не сообщает никак. */
.ct-kan__b:hover{background:var(--line-2); color:var(--ink); border-color:var(--mut)}
.ct-kan__b--bad:hover{border-color:var(--bad); color:var(--bad)}
.ct-kan__n b{display:block; font-size:13.5px; margin-bottom:2px}
.ct-kan__n .ct-s{font-size:12.5px; color:var(--mut)}
.ct-kan__n .ct-m{display:flex; gap:6px; margin-top:7px; flex-wrap:wrap}

.ct-cal{overflow-x:auto}
.ct-cal table{min-width:620px; font-size:13.5px}
.ct-cal td{padding:0; height:34px; border-bottom:1px solid var(--line-2); border-right:1px solid var(--line-2)}
.ct-cal th{padding:11px 14px}
.ct-cal .ct-hh{width:62px; color:var(--mut); font-size:12px; padding:0 10px; text-align:right;
  vertical-align:top; border-right:1px solid var(--line)}
.ct-slot{margin:1px 4px; padding:5px 9px; border-radius:7px; font-size:12.5px; line-height:1.35;
  background:var(--info-bg); box-shadow:inset 3px 0 0 var(--info); height:calc(100% - 2px); overflow:hidden}
.ct-slot--g{background:var(--ok-bg); box-shadow:inset 3px 0 0 var(--ok)}
.ct-slot b{display:block; font-weight:600}
.ct-slot span{color:var(--mut); font-size:11.5px}

/* ⚠️ Зазор МЕЖДУ строками заметно больше, чем внутри строки (18 против 4):
   строка стала двухэтажной, и по расстоянию должно быть сразу видно, что
   подпись относится к дорожке ПОД ней, а не над. При равных зазорах читается
   наоборот — подпись липнет к предыдущей полосе. */
.ct-bars{display:flex; flex-direction:column; gap:18px; margin-bottom:16px}
.ct-bars:last-child{margin-bottom:0}
/* ⚠️ Подпись и значение — СТРОКОЙ НАД дорожкой, а не по бокам от неё.
   В три колонки (подпись | дорожка | значение) короткая подпись оставляла
   полэкрана пустоты, и дорожка начиналась где-то посередине: полоса на все
   сто процентов читалась как «заполнена наполовину» — считали от левого края
   строки, а не от начала дорожки. Плюс все дорожки теперь одной ширины
   и начинаются в одной точке, то есть их наконец можно сравнивать глазом.
   Раскладка одна на все ширины: на телефоне она и так была такой. */
.ct-bar{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px;
  align-items:baseline; font-size:13px; line-height:1.4}
/* ⚠️ Места заданы явно. При автоматической раскладке дорожка, растянутая
   на обе колонки, занимает вторую строку целиком — и значение уезжает
   в ТРЕТЬЮ, под полосу. Выглядело так, будто число относится к следующей
   строке. */
.ct-bar__k{grid-column:1; grid-row:1}
.ct-bar__v{grid-column:2; grid-row:1}
.ct-bar__t{grid-column:1 / -1; grid-row:2}
/* Строка полосы: подпись — дорожка — значение. ⚠️ Классы значат ровно это
   и ничего другого: раньше на «Аналитике» `__t` носила ПОДПИСЬ и получала
   стиль дорожки — серая плашка вокруг текста, а сама полоса шла без дорожки.
   Две разные разметки под одними именами расходятся при первой же правке. */
.ct-bar__k{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2)}
/* ⚠️ Заливка лежит ВНУТРИ отступа, а не впритык к краям. Иначе строка
   со ста процентами закрывает дорожку целиком, и полоса выглядит как просто
   зелёный прямоугольник: непонятно даже, что это шкала. А сто процентов
   тут не исключение — они бывают у каждой верхней строки. */
/* ⚠️ Дорожка — `--line`, а не `--line-2`. Второй в светлой теме равен фону
   страницы (#f3f4f6) и на белой карточке просто не виден: полоса читалась
   как зелёный прямоугольник в пустоте. Отступ в 3px оставляет серую рамку
   даже у строки со ста процентами — а сто процентов бывают у каждой верхней. */
.ct-bar__t{background:var(--track); border-radius:7px;
  height:20px; box-sizing:border-box; padding:3px; overflow:hidden}
.ct-bar__v{text-align:right; color:var(--mut); font-variant-numeric:tabular-nums;
  font-size:12.5px; white-space:nowrap}
/* display:block обязателен: .ct-bar__f лежит внутри .ct-bar__t, которая сама не флекс
   и не грид, поэтому span оставался строчным и игнорировал и width, и height —
   полоски выглядели пустыми. */
.ct-bar__f{display:block; height:100%; background:var(--ok); border-radius:4px; min-width:3px}

/* Отступ снизу — такой же, как у карточки: заметка стоит В ПОТОКЕ наравне
   с ними, и без него прилипала к следующему блоку. Признак того, что правила
   не хватало: пять шаблонов приклеивали ровно этот отступ инлайном. */
.ct-note{border-left:3px solid var(--ok); background:var(--ok-bg); padding:11px 14px;
  border-radius:0 8px 8px 0; font-size:13.5px; line-height:1.55; color:var(--ink-2);
  margin-bottom:16px}
/* Заметка последней внутри карточки не должна добавлять дыру под собой. */
.ct-note:last-child{margin-bottom:0}
.ct-note--bad{border-color:var(--bad); background:var(--bad-bg)}
.ct-note--warn{border-color:var(--warn); background:var(--warn-bg)}

.ct-wa{display:flex; flex-direction:column; gap:9px}
.ct-msg{padding:9px 13px; border-radius:12px; font-size:13.5px; line-height:1.5; max-width:84%}
.ct-msg--in{background:var(--line-2); align-self:flex-start; border-bottom-left-radius:3px}
.ct-msg--out{background:var(--ok-bg); align-self:flex-end; border-bottom-right-radius:3px}
.ct-msg em{display:block; font-style:normal; font-size:11px; color:var(--mut); margin-top:4px; line-height:1.4}
.ct-msg__t{display:block; font-size:11px; color:var(--mut); margin-top:4px; line-height:1.4}
/* Откуда пришла строка, если не из WhatsApp. Подпись над текстом, а не
   рядом: иначе она читается как часть сказанного человеком. */
.ct-msg__k{display:block; font-size:10.5px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ai-ink); font-weight:600; margin-bottom:3px; line-height:1.3}
/* ⚠️ Заметка — НЕ сообщение: её никто не отправлял и никто не получал.
   Поэтому посередине, без пузыря и приглушённо. Пузырём она читалась бы
   как ответ администратора, которого человек не видел. */
.ct-msg__note{align-self:center; max-width:92%; margin:2px 0; text-align:center;
  font-size:11.5px; line-height:1.5; color:var(--mut)}
/* Лента прокручивается сама: длинная переписка иначе вытягивает страницу,
   и поле ответа уезжает за нижний край. */
/* Блок разбора ИИ. Пунктир и приглушённый фон намеренно: он не должен
   выглядеть как данные карточки — это догадка, и её видно как догадку. */
.ct-guess{border:1px dashed var(--ai); border-radius:10px; padding:11px 13px; margin-bottom:14px;
  background:var(--ai-bg)}
.ct-guess__k{font-size:10px; letter-spacing:.8px; text-transform:uppercase; color:var(--ai-ink);
  line-height:1.5; font-weight:600}
.ct-guess__l li::marker{color:var(--ai)}
.ct-guess__l li{margin-bottom:7px}
.ct-guess__l li:last-child{margin-bottom:0}
.ct-guess__l{margin:6px 0 0; padding-left:18px; font-size:13.5px; line-height:1.55}
.ct-guess__d{margin:8px 0 0; font-size:11.5px; color:var(--mut); line-height:1.5}

.ct-wa{max-height:min(52vh, 460px); overflow-y:auto; overscroll-behavior:contain; padding-right:4px}

/* ---------- врезка ответа ---------- */
/* Поле ответа стояло прямо в потоке под лентой — той же ширины и на том же
   фоне, что сообщения, — и читалось как ещё одно сообщение, только пустое.
   Своя врезка отделяет «читаю» от «пишу». */
.ct-say{margin-top:14px; padding:13px; border:1px solid var(--line);
  border-radius:12px; background:var(--bg)}
.ct-say .ct-form{margin:0}
/* Внутри врезки поле светлее её самой, иначе оно сливается с подложкой:
   у `.ct-f textarea` фон `--line-2`, а в светлой теме он совпадает с `--bg`. */
.ct-say .ct-f textarea{background:var(--card)}
.ct-say__w{margin:0 0 10px; font-size:12px; color:var(--mut); line-height:1.45}
.ct-say__n{margin:10px 0 0; font-size:11.5px; color:var(--mut); line-height:1.5}
/* Отказ отправки. Красным и рядом с полем: сообщение пациенту, которое
   не ушло, — это не мелочь, и узнать о нём надо там же, где его набирали. */
.ct-say__e{margin:10px 0 0; font-size:12.5px; line-height:1.5; color:var(--bad)}
/* Пока сообщение в пути: кнопка занята, поле не трогаем — набранный текст
   не должен исчезнуть из-за сбоя сети. */
.ct-say.is-busy .ct-btn{opacity:.6; pointer-events:none}
.ct-say .ct-note{margin-bottom:0}
/* ⚠️ Во врезке ответа подложка кнопки и подложка самой врезки почти
   совпадают (--line-2 на --bg), и серая кнопка читается как жирная
   строка текста. Здесь ей нужны своя заливка и граница: при закрытом
   окне суток это ЕДИНСТВЕННОЕ действие на экране, и выглядеть оно
   обязано нажимаемым. Мерить глазами тут нельзя — разница в один тон. */
.ct-say .ct-btn--g{background:var(--card); border:1px solid var(--line)}
.ct-say .ct-btns{margin-top:12px}
.ct-f textarea{width:100%; background:var(--line-2); border:1px solid var(--line); border-radius:9px;
  padding:11px 13px; font:inherit; font-size:16px; color:var(--ink); line-height:1.5; resize:vertical}
.ct-f textarea:focus{outline:none; border-color:var(--ok); background:var(--card)}

.ct-set{display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:11px 0; border-bottom:1px solid var(--line-2); line-height:1.45}
.ct-set:last-child{border-bottom:0}
.ct-set__d{font-size:12.5px; color:var(--mut); margin-top:2px; line-height:1.45}
.ct-pill{background:var(--line-2); border:1px solid var(--line); border-radius:8px; padding:5px 11px;
  font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap}

@media(max-width:820px){
  .ct-app{flex-direction:column}
  .ct-rail{width:100%; flex:none; height:auto; position:static; flex-direction:row; overflow-x:auto;
    padding:8px 10px; justify-content:flex-start; gap:2px}
  .ct-rail__sep{width:1px; height:26px; margin:0 6px}
  .ct-ten{margin-bottom:0}
  .ct-main{padding:16px 14px 36px}
  .ct-top h1{font-size:20px}
  .ct-kan{grid-template-columns:1fr}
  th,td{padding:9px 12px}
}

/* Колонки мастеров должны быть равными. Без table-layout:fixed браузер отдаёт
   ширину по содержимому, и врач с длинными названиями услуг забирает полсетки.
   Общее правило `th:last-child{width:1%}` (оно для кнопок в обычных таблицах)
   в календаре сжимало последнего мастера до 11px — здесь оно отменяется. */
.ct-cal table{table-layout:fixed}
.ct-cal th:first-child{width:62px}
.ct-cal td:last-child,.ct-cal th:last-child{width:auto; white-space:normal}
.ct-cal th{overflow:hidden; text-overflow:ellipsis}
.ct-slot b{overflow-wrap:anywhere}

/* ---------- раздвижная лента ---------- */
/* Иконки без подписи угадываются не всегда — в дизайне поэтому есть кнопка
   «Свернуть меню». Ширина и выравнивание меняются классом на самой ленте,
   подписи скрыты не через display у каждой, а одним правилом. */
.ct-rail{transition:width .18s}
.ct-rail__l{display:none; font-size:13.5px; white-space:nowrap; text-align:left; overflow:hidden; text-overflow:ellipsis}
.ct-rail.ct-wide{width:208px; flex:0 0 208px; align-items:stretch; padding-left:10px; padding-right:10px}
.ct-rail.ct-wide .ct-rail__l{display:block; flex:1 1 0; min-width:0}
.ct-rail.ct-wide .ct-rail__b{width:100%; justify-content:flex-start; gap:12px; padding:0 10px}
.ct-rail.ct-wide .ct-ten{width:100%; justify-content:flex-start; gap:12px; padding:0 11px; height:36px}
.ct-rail.ct-wide .ct-rail__sep{width:100%}
/* В раскрытом виде счётчик уходит вправо. order нужен потому, что в разметке
   он стоит перед подписью — без него margin-left:auto прижал бы его к тексту. */
.ct-rail.ct-wide .ct-rail__b .ct-dot{position:static; order:3; margin-left:auto}
.ct-rail.ct-wide .ct-rail__l{order:2}
/* Низ ленты: кто вошёл и выдвигатель. Отделён чертой — это не пункт меню,
   а сведения о сеансе, и путать их не нужно. */
.ct-rail__foot{margin-top:auto; width:100%; display:flex; flex-direction:column; gap:8px;
  padding-top:10px; border-top:1px solid rgba(255,255,255,.12)}
.ct-rail__me{display:flex; align-items:center; gap:11px; justify-content:center; min-width:0}
.ct-rail__av{flex:0 0 34px; width:34px; height:34px; border-radius:50%;
  background:#cfe0d6; color:var(--rail); display:flex; align-items:center; justify-content:center;
  font-size:13.5px; font-weight:600; line-height:1}
/* Подпись живёт только в раскрытой ленте: в 64px ей негде поместиться,
   а обрезанное имя хуже, чем никакого — по нему всё равно не опознать. */
.ct-rail__who{display:none; min-width:0; line-height:1.3}
.ct-rail.ct-wide .ct-rail__who{display:block; flex:1 1 0}
.ct-rail.ct-wide .ct-rail__me{justify-content:flex-start; padding:0 4px}
.ct-rail__who b{display:block; font-size:13.5px; font-weight:500; color:#d0d0d0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ct-rail__who i{display:block; font-style:normal; font-size:11.5px; color:var(--rail-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* Выдвигатель — ссылка (нужен переход с кукой), но выглядит кнопкой,
   и подчёркивание ему ни к чему. Глобального a{text-decoration:none}
   в проекте нет намеренно, поэтому снимается поимённо. */
.ct-rail__t{text-decoration:none; margin-top:0; width:40px; height:40px; border:0; background:none; color:var(--rail-ink);
  cursor:pointer; border-radius:10px; display:flex; align-items:center; gap:12px; padding:0;
  justify-content:center; flex:0 0 40px}
.ct-rail__t:hover{background:rgba(255,255,255,.06); color:#fff}
/* Свёрнутая лента: стрелка вправо — «раздвинуть». Раскрытая: влево — «свернуть». */
.ct-rail__t svg{width:20px; height:20px; flex:0 0 20px; transition:transform .18s}
.ct-rail.ct-wide .ct-rail__t{width:100%; justify-content:flex-start; padding:0 10px}
.ct-rail.ct-wide .ct-rail__t svg{transform:rotate(180deg)}
/* Выход пользуется той же строкой, что и выдвигатель, но стрелку крутить
   не надо: она часть значка, а не указание направления. */
.ct-rail__out svg{transform:none !important}
.ct-rail__out:hover{color:#ffb4a8}
/* На узком экране лента и так превращается в горизонтальную полосу —
   сворачивать там нечего, и кнопка только путала бы. */
@media(max-width:820px){
  .ct-rail__t{display:none}
  .ct-rail.ct-wide{width:100%; flex:none}
  .ct-rail__foot{margin-top:0; border-top:0; padding-top:0; width:auto; flex-direction:row}
  .ct-rail__who{display:none}
}

/* Иконки ленты — штриховые SVG, не типографские символы: у тех разная насечка
   и разный кегль в каждом шрифте, из-за чего меню выглядело рассыпанным. */
.ct-rail__b svg{width:20px; height:20px; flex:0 0 20px}

/* ---------- демо-полоса ---------- */
/* Переключателя клиник в продукте нет: арендатор берётся из аккаунта при входе,
   и админ одной клиники не должен даже видеть, что рядом есть чужая. Для показа
   он нужен — поэтому вынесен за пределы панели и подписан как демонстрационный. */
.ct-demobar{background:#1f2a24; color:#c8d3cd; display:flex; gap:12px; align-items:center;
  flex-wrap:wrap; padding:4px 16px; min-height:38px; box-sizing:border-box; font-size:12.5px; line-height:1.5}
.ct-demobar__k{background:#c19a3e; color:#1b1205; border-radius:5px; padding:1px 8px;
  font-weight:600; font-size:11px; letter-spacing:.4px; text-transform:uppercase; white-space:nowrap}
.ct-demobar__t{flex:1 1 260px; min-width:0}
.ct-demobar__s{display:flex; gap:2px; background:rgba(0,0,0,.28); border-radius:8px; padding:2px}
.ct-demobar__s button{border:0; background:none; color:#9aa8a1; padding:3px 11px; border-radius:6px;
  cursor:pointer; font-size:12.5px; white-space:nowrap; line-height:1.4}
.ct-demobar__s button[aria-pressed="true"]{background:var(--ok-fill); color:#fff}
/* Ссылки-обёртки у кнопок переключателя и у выхода на страницу продукта:
   глобального `a{text-decoration:none}` в проекте нет намеренно, поэтому
   подчёркивание снимается поимённо у того, что выглядит управлением. */
.ct-demobar__s a{text-decoration:none}
.ct-demobar__b{flex:0 0 auto; color:#9aa8a1; text-decoration:underline; white-space:nowrap}
.ct-demobar__b:hover{color:#fff}
/* ⚠️ Высота полосы обязана попасть в `--bar`: на широком экране лента
   меню считает свою высоту как `100vh - var(--bar)`, и без этого её низ
   уезжает под экран ровно на высоту полосы. */
body.ct-hasbar{--bar:38px}
/* ⚠️ Полоса держит РОВНО 38px (min-height + ужатые поля кнопок): с шрифтом
   Onest она выросла до 45, и низ ленты меню уезжал за экран на 7px. */
.ct-ten--now{cursor:default; background:#1e2b24; color:#cfe0d6}
.ct-rail.ct-wide .ct-ten--now{justify-content:flex-start}
@media(max-width:820px){.ct-demobar__t{display:none}}
/* Выпадающий выбор роли — только на телефоне. */
.ct-demobar__m{display:none; position:relative}
.ct-demobar__m summary{display:flex; align-items:center; gap:6px; list-style:none; cursor:pointer;
  padding:5px 10px; border-radius:8px; background:rgba(0,0,0,.28); color:#fff; font-size:13px;
  font-weight:600; white-space:nowrap}
.ct-demobar__m summary::-webkit-details-marker{display:none}
.ct-demobar__m summary svg{width:14px; height:14px; color:#9aa8a1; transition:transform .15s}
.ct-demobar__m[open] summary svg{transform:rotate(180deg)}
.ct-drop__l{position:absolute; right:0; top:calc(100% + 6px); z-index:70; min-width:190px;
  background:#1f2a24; border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:5px;
  box-shadow:0 10px 30px rgba(0,0,0,.35); display:flex; flex-direction:column}
.ct-drop__l a{display:block; padding:10px 12px; border-radius:7px; color:#c8d3cd; text-decoration:none;
  font-size:14px; line-height:1.3}
.ct-drop__l a:hover{background:rgba(255,255,255,.06); color:#fff}
.ct-drop__l a[aria-current]{background:var(--ok-fill); color:#fff}
.ct-drop__l a.ct-drop__x{margin-top:4px; border-top:1px solid rgba(255,255,255,.1); border-radius:0 0 7px 7px;
  color:#9aa8a1}
@media(max-width:640px){
  /* Одна строка: «ДЕМО» слева, роль справа. */
  .ct-demobar{flex-wrap:nowrap; justify-content:space-between; padding:6px 16px}
  .ct-demobar__s,.ct-demobar__b{display:none}
  .ct-demobar__m{display:block}
}

/* Роль переключает не оформление, а состав ленты: у администратора смена,
   у владельца — деньги и загрузка. Скрытые пункты не занимают места. */
.ct-rail__b[hidden]{display:none}
.ct-chain{display:flex; gap:8px; flex-wrap:wrap}
.ct-step{flex:1 1 150px; min-width:150px; background:var(--line-2); border:1px solid var(--line);
  border-radius:9px; padding:11px 12px; line-height:1.45}
.ct-step--live{border-color:var(--ok); background:var(--ok-bg)}
.ct-step__k{font-size:10px; letter-spacing:.7px; text-transform:uppercase; color:var(--mut); line-height:1.5}
.ct-step__v{font-size:16px; font-weight:600; margin:2px 0 3px; line-height:1.25}
.ct-step__d{font-size:12px; color:var(--mut); line-height:1.45}

/* Лента и панель ассистента прибиты к 100vh, но над ними стоит демо-полоса,
   и на её высоту они вылезали за экран — вместе с кнопкой «Свернуть меню».
   Высоту полосы меряет JS: она переносится на узких экранах, и фиксировать
   её числом значило бы обрезать ленту при первом же переносе. */
/* ⚠️ Только на десктопе. Правило объявлено НИЖЕ мобильного медиазапроса
   и при равной специфичности перебивало его `height:auto` — на телефоне
   лента растягивалась ровно на экран (664px на iPhone 13), а всё содержимое
   уезжало под неё, за нижний край. Страница выглядела пустой, и ни одна
   проверка ширины этого не ловила: горизонтальной прокрутки нет, ломается
   высота. Ловушка «последний побеждает» в этом файле уже третья. */
:root{--bar:0px}
@media(min-width:821px){
  .ct-rail{height:calc(100vh - var(--bar))}
}

/* ---------- переписка ---------- */
/* Системная реплика — не сообщение, а отметка системы: передача человеку,
   вложение, создание обращения. Её видно только в панели, пациенту не уходит. */
.ct-msg--sys{align-self:center; max-width:92%; background:none; border:1px dashed var(--line);
  color:var(--mut); font-size:12px; text-align:center; padding:6px 12px; border-radius:8px; line-height:1.5}
.ct-msg--sys em{margin-top:2px}
.ct-wa__in{display:flex; gap:9px; align-items:center; margin-top:14px; padding-top:13px; border-top:1px solid var(--line)}
.ct-wa__f{flex:1; min-width:0; background:var(--line-2); border:1px solid var(--line); border-radius:9px;
  padding:9px 13px; font:inherit; font-size:16px; color:var(--ink); line-height:1.45}
.ct-wa__f::placeholder{color:var(--mut)}
.ct-wa__f:focus{outline:none; border-color:var(--ok); background:var(--card)}
@media(min-width:821px){ .ct-wa__f{font-size:13.5px} }
.ct-q--pick{cursor:pointer}
.ct-q--pick:hover{background:var(--line-2)}
.ct-q--on{background:var(--ok-bg); box-shadow:inset 3px 0 0 var(--ok)}
[data-theme="dark"] .ct-q--on{background:rgba(34,160,107,.12)}

/* ---------- список слева, содержимое справа ---------- */
/* Так устроены и «Диалоги», и «Клиенты» в макете: слева выбираешь, справа
   работаешь. Обратный порядок читается как отчёт, а не как рабочее место. */
/* ⚠️ `--split-gap` — это ещё и то, что приходится ГАСИТЬ. Левая колонка —
   флекс с зазором, и всё, что должно лежать встык (полоса отбора под шапкой
   карточки), отодвигается им на 16px. Отрицательный отступ там берётся
   из этой же переменной, иначе при смене зазора он разъедется молча. */
:root{--split-gap:16px}
.ct-split{display:grid; grid-template-columns:332px minmax(0,1fr); gap:var(--split-gap); align-items:start}
.ct-split__l{display:flex; flex-direction:column; gap:var(--split-gap); min-width:0}
.ct-split__r{min-width:0}
/* Возврат к списку разговоров. На широком экране список и так слева —
   ссылка там была бы кнопкой в никуда. */
.ct-back{display:none; align-items:center; gap:6px; flex:0 0 auto;
  text-decoration:none; color:var(--mut); font-size:13.5px; margin-right:2px}
.ct-back svg{width:18px; height:18px; flex:0 0 18px}
.ct-back:hover{color:var(--ink)}
@media(max-width:1000px){ .ct-split{grid-template-columns:1fr} }
.ct-h3{font-size:13px; font-weight:600; margin:22px 0 4px; color:var(--ink-2); line-height:1.4}
.ct-btns{display:flex; gap:9px; flex-wrap:wrap}
.ct-split__r table{margin:0 -17px; width:calc(100% + 34px)}

/* ---------- добавления рабочей панели ---------- */
/* Демонстрационные полоса и панель ассистента сюда не переносятся: в рабочем
   месте им нечего делать. Стили оставлены в файле, но ничего их не включает. */
/* Логотип — `ct_logo()`. Геометрия с citena.es: знак мельче слова и стоит
   выше него, слово опущено относительным сдвигом (в em — пропорция держится
   при любом кегле). Сдвиг на раскладку не влияет, поэтому снизу столько же
   поля: иначе слово наезжало бы на черту под логотипом. */
/* Шрифт панели — Onest, самохостом (как на сайте: Google Fonts отдаёт IP
   посетителя третьей стороне). Вариативный 400–700, три набора по диапазонам:
   браузер тянет только те, чьи буквы есть на странице. */
@font-face{font-family:'Onest'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('font/on-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Onest'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('font/on-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Onest'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('font/on-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
.ct-logo{display:inline-flex; align-items:center; gap:7px; line-height:1}
.ct-logo svg{width:19px; height:19px; flex:0 0 19px; position:relative; top:3px}
.ct-logo b{position:relative; top:.444em; margin-left:-2px; font-family:'Onest',system-ui,sans-serif;
  font-size:22px; font-weight:600;
  letter-spacing:.03em; white-space:nowrap}
.ct-logo i{font-style:normal; color:var(--ok)}
.ct-logo--mark svg{width:26px; height:26px; flex:0 0 26px; top:0}
/* Название компании вместо слова «citena.»: шрифтом панели, а не Onest —
   это имя клиента, а не наш логотип, и кириллическое название в латинском
   наборе Onest рассыпалось бы на два шрифта. Без сдвига вниз (он часть
   нашего логотипа) и с переносом на две строки: обрезанное название
   компании выглядит хуже, чем перенесённое. */
.ct-logo--co{gap:9px; min-width:0; max-width:100%}
.ct-logo--co svg{width:20px; height:20px; flex:0 0 20px; top:0}
.ct-logo--co b{position:static; margin:0; font-family:inherit; font-size:15.5px; font-weight:600;
  letter-spacing:-.01em; line-height:1.25; white-space:normal; min-width:0; overflow:hidden;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2}
.ct-rail__logo{color:#fff; padding:2px 0 12px}
.ct-rail.ct-wide .ct-rail__logo{padding-left:8px}
.ct-login__logo{display:flex; justify-content:center; color:var(--ink); padding-bottom:14px; margin-bottom:18px}
.ct-login__logo svg{width:24px; height:24px; flex-basis:24px; top:4px}
.ct-login__logo b{font-size:28px}
/* Поиск по коду — строка, а не колонка полей. `.ct-form` рассчитан на форму
   записи, где поля идут друг под другом; здесь поле одно, и растянутая
   на всю ширину кнопка под ним читается как «отправить анкету», а не «найти».
   Ширина ограничена: код — четыре знака, поле во весь экран обещает длинный
   ввод, которого не бывает. */
.ct-search{display:flex; gap:8px; align-items:stretch; max-width:440px}
.ct-search input{flex:1 1 auto; min-width:0; background:var(--line-2);
  border:1px solid var(--line); border-radius:9px; padding:10px 13px; font:inherit;
  /* 16px — чтобы iOS не зумил страницу при фокусе, как и в остальных полях */
  font-size:16px; color:var(--ink); line-height:1.45; letter-spacing:.04em;
  text-transform:uppercase; transition:border-color .16s ease, background-color .16s ease}
.ct-search input::placeholder{letter-spacing:normal; text-transform:none; color:var(--mut)}
.ct-search input:focus{outline:none; border-color:var(--ok); background:var(--card)}
.ct-search button{flex:0 0 auto; padding:10px 20px}
@media(max-width:520px){.ct-search{max-width:none}}

.ct-form{display:flex; flex-direction:column; gap:14px}
.ct-f label{display:block; font-size:12.5px; color:var(--mut); margin-bottom:5px; line-height:1.5}
.ct-f input,.ct-f select{width:100%; background:var(--line-2); border:1px solid var(--line); border-radius:9px;
  padding:11px 13px; font:inherit; font-size:16px; color:var(--ink); line-height:1.45}
.ct-f input:focus{outline:none; border-color:var(--ok); background:var(--card)}
@media(min-width:821px){ .ct-f input,.ct-f select{font-size:14px} }
.ct-err{background:var(--bad-bg); color:var(--bad); border-radius:9px; padding:10px 13px; font-size:13.5px; line-height:1.5}
.ct-mid{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px}
.ct-box{width:100%; max-width:380px}
/* Элементы, которые выглядят как управление (кнопка, вкладка, тег, пункт
   меню), но размечены ссылкой — переход по ним ведёт на другой адрес, и
   подменять его на button значило бы ломать открытие в новой вкладке.
   Подчёркивание им не нужно: их природа читается по форме и фону.

   Глобального a{text-decoration:none} тут нет и быть не должно: ссылка
   внутри обычного текста обязана отличаться не только цветом. */
a.ct-b, a.ct-tag, a.ct-free, a.ct-btn, a.ct-kan__b{text-decoration:none}

.ct-link{color:var(--ok-ink); text-decoration:none}
.ct-link:hover{text-decoration:underline}
.ct-row-link{color:inherit; text-decoration:none; display:block}
.ct-daynav{display:flex; gap:8px; align-items:center}
.ct-daynav a{padding:6px 11px; border:1px solid var(--line); border-radius:8px; background:var(--card);
  text-decoration:none; color:var(--ink); font-size:13px; line-height:1.4}
.ct-daynav b{font-variant-numeric:tabular-nums}
/* Цвет главного действия — правилом, а не инлайном: повторённый инлайновый
   стиль это всегда недостающее правило. Специфичность выше, чем у
   `.ct-daynav a`, иначе общий `color:var(--ink)` победил бы по порядку. */
.ct-daynav a.ct-daynav__add{background:var(--ok-fill); color:#fff; border-color:var(--ok-fill);
  font-weight:600; white-space:nowrap}

/* Пустая клетка календаря — это приглашение записать, а не пустота.
   Плюс проявляется при наведении: иначе сетка рябит значками. */
.ct-free{display:flex; align-items:center; justify-content:center; height:100%; color:transparent;
  text-decoration:none; font-size:17px; line-height:1}
.ct-free:hover{color:var(--ok); background:var(--ok-bg)}
a.ct-slot{display:block; text-decoration:none; color:inherit}
a.ct-slot:hover{filter:brightness(.97)}

/* Согласия. Две галочки одинакового веса: приглушить отказ — тёмный паттерн,
   а слить их в одну — сделать невозможными обе рассылки сразу. */
.ct-consent{display:flex; flex-direction:column; gap:12px; margin-top:4px}
.ct-check{display:flex; gap:11px; align-items:flex-start; cursor:pointer; line-height:1.45}
.ct-check input{width:18px; height:18px; margin:2px 0 0; flex:0 0 18px; accent-color:var(--ok)}
.ct-check b{display:block; font-size:14px; font-weight:600}
.ct-check i{display:block; font-style:normal; font-size:12.5px; color:var(--mut); line-height:1.5}
.ct-consent .ct-btn{align-self:flex-start}

/* Быстрый вход. Намеренно скромнее обычной кнопки: это подпорка предпросмотра,
   а не часть продукта, и выглядеть как часть продукта она не должна. */
.ct-quick{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:18px;
  padding-top:16px; border-top:1px solid var(--line)}
.ct-quick__k{flex:1 0 100%; font-size:11px; letter-spacing:.6px; text-transform:uppercase;
  color:var(--mut); line-height:1.5}
.ct-quick__d{margin:10px 0 0; font-size:12px; color:var(--mut); line-height:1.5}

/* Назначение услуги обращению. Кнопка подтверждения стоит в разборе ИИ
   и означает «беру эту догадку». С 04.10.2026 фиолетового в панели нет —
   см. токены `--ai*`: разбор в цвет темы, догадку выдаёт пунктир и метка «ИИ». */
.ct-btn--s{padding:4px 10px; font-size:12px}
.ct-btn--ai{background:var(--ai); color:var(--ai-on)}
.ct-inline{display:contents}
/* Кнопка выше межстрочного, поэтому строка разбора — флекс, а не поток текста:
   в потоке она налезала на следующую строку списка. */
.ct-guess__r{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; min-width:0}
.ct-guess__n{flex:1 1 220px; min-width:0}
/* Машинный источник помечается теми же токенами `--ai*`, что и разбор ИИ:
   отличие от подтверждённого — рамка и слово «ИИ», а не отдельный цвет. */
.ct-tag--ai{background:var(--ai-bg); color:var(--ai-ink); border:1px solid var(--ai)}
.ct-guess__ok{display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
  border-radius:50%; background:var(--ok-bg); color:var(--ok-ink); font-size:13px; line-height:1; flex:0 0 auto}
.ct-svc{border:1px solid var(--line); border-radius:11px; padding:12px 14px; margin-bottom:14px;
  background:var(--card)}
/* ⚠️ Заголовок блока и подпись поля были набраны ОДИНАКОВО — мелкими
   прописными, — и «ЗАПИСАТЬ НА ПРИЁМ» весило ровно столько же, сколько
   «УСЛУГА (КАССА)» под ним. Глаз не видел, что одно содержит другое.
   Теперь заголовок блока обычным регистром и в полный вес, подписи полей
   остаются мелкими прописными: два уровня, а не два одинаковых. */
.ct-svc__k{display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.4;
  margin-bottom:9px}
.ct-svc__f{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.ct-svc__s{flex:1 1 220px; min-width:0; background:var(--line-2); border:1px solid var(--line);
  border-radius:9px; padding:7px 10px; color:var(--ink); font:inherit; font-size:13px; line-height:1.4}
.ct-svc__s:focus{outline:none; border-color:var(--ok); background:var(--card)}
.ct-svc .ct-sm{margin:8px 0 0}

/* ⚠️ Этот блок обязан стоять В КОНЦЕ ФАЙЛА. Основной медиазапрос телефона
   объявлен выше базовых правил ленты, и при равной специфичности побеждает
   последний — написанные там правила молча не применялись. Та же ловушка
   уже дважды записана в CLAUDE.md: проверять computed style, а не исходник. */
@media(max-width:820px){
  /* Низ ленты рассчитан на вертикальную колонку: там он прижат к низу
     (`margin-top:auto`), занимает всю ширину и отделён чертой сверху.
     В горизонтальной полосе те же правила растягивали ленту на 664px,
     и всё содержимое экрана уезжало за нижний край — страница выглядела
     пустой. Здесь низ становится частью полосы: строкой, а не колонкой. */
  .ct-rail__foot{margin-top:0; width:auto; flex:0 0 auto; flex-direction:row;
    align-items:center; gap:4px; padding-top:0; padding-left:10px; margin-left:6px;
    border-top:0; border-left:1px solid rgba(255,255,255,.12)}
  /* Имени и клиники в полосе не показываем: обрезанное имя хуже никакого,
     а место нужно пунктам меню. Значок и «выйти» остаются. */
  .ct-rail__who{display:none}
  .ct-rail__me{gap:0}
  /* Выдвигателя на телефоне нет — сворачивать горизонтальную полосу нечего. */
  .ct-rail__t{display:none}
  /* Пункты не должны сжиматься: полоса прокручивается, а не ужимается. */
  .ct-rail__b, .ct-rail__foot > *{flex:0 0 auto}
}

/* ---------- плашки «требуют ответа» ---------- */
/* Внизу справа, поверх любой страницы. Не модалка и кликов не перехватывает:
   администратор должен продолжать работать, а не закрывать окно. */
.ct-toasts{position:fixed; right:18px; bottom:18px; z-index:40; width:min(420px, calc(100vw - 36px));
  display:flex; flex-direction:column; gap:8px; pointer-events:none}
.ct-toasts > *{pointer-events:auto}
.ct-toast{border-left:4px solid var(--bad); border-radius:8px; padding:9px 12px;
  background:var(--bad-bg); box-shadow:0 6px 20px rgba(0,0,0,.14)}
.ct-toast__r{display:flex; align-items:center; gap:10px; min-width:0}
/* Точка пульсирует — это единственная анимация в панели, и она здесь
   оправдана: плашка появляется, когда человек уже не смотрит на экран. */
.ct-toast__dot{flex:0 0 auto; width:8px; height:8px; border-radius:50%; background:var(--bad);
  animation:ctPulse 2.4s ease-in-out infinite}
.ct-toast__n{flex:0 1 auto; min-width:0; font-size:14.5px; font-weight:600; line-height:1.4;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ct-toast__ch{flex:0 0 auto; font-size:11.5px; font-weight:600; padding:2px 7px; border-radius:20px;
  white-space:nowrap; background:var(--ok-bg); color:var(--ok-ink); line-height:1.5}
.ct-toast__gap{flex:1 1 0}
.ct-toast__w{flex:0 0 auto; font-size:14px; font-weight:700; font-variant-numeric:tabular-nums;
  color:var(--bad); white-space:nowrap}
/* ⚠️ Кнопка НЕ зелёная. Зелёный в панели означает «сделано, всё в порядке»,
   и внутри красной плашки «ждёт ответа» он спорил сам с собой: тревога
   и успех в одном ряду. Красной её тоже не делаем — красный тут уже занят
   срочностью (черта, точка, минуты), а второй красный читался бы как
   «удалить». Нейтральная заливка чернилами: плашка кричит, кнопка просто
   действует. Работает в обеих темах — цвет берётся из пары ink/card. */
.ct-toast__b{flex:0 0 auto; text-decoration:none; padding:7px 13px;
  background:var(--ink); color:var(--card); border-color:var(--ink)}
.ct-toast__b:hover{background:var(--ink-2); border-color:var(--ink-2)}
/* Крестик — тихий: он не должен звать нажать его вместо «Ответить».
   Цель 28px — по меньшей нажимать мышью неудобно, а палец до плашек
   не дотягивается вовсе (на телефоне их нет). */
.ct-toast__x{flex:0 0 28px; width:28px; height:28px; margin-right:-4px; border-radius:7px;
  display:flex; align-items:center; justify-content:center; color:var(--mut); text-decoration:none}
.ct-toast__x svg{width:15px; height:15px}
.ct-toast__x:hover{background:var(--line-2); color:var(--ink)}
.ct-toast__x:focus-visible{outline:2px solid var(--ok); outline-offset:1px}
.ct-toast.is-off{opacity:0; transform:translateX(24px); transition:opacity .2s, transform .2s}
.ct-toast__s{font-size:13px; line-height:1.45; color:var(--mut); margin-top:3px; padding-left:18px}
.ct-toast__more{align-self:flex-start; font-size:13px; line-height:1.45; color:var(--mut);
  background:var(--card); border:1px solid var(--line); border-radius:8px; padding:5px 11px;
  text-decoration:none; box-shadow:0 4px 14px rgba(0,0,0,.10)}
.ct-toast__more:hover{color:var(--ink); border-color:var(--mut)}
@keyframes ctPulse{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.45; transform:scale(.82)}}
/* Плашки ВЫЕЗЖАЮТ справа, а не возникают приклеенными. Разница не в красоте:
   появившееся движением замечают краем глаза — а в этом вся их работа,
   они и нужны тому, кто смотрит в другую часть экрана. Возникшее без
   движения читается как часть страницы, которая была там всегда.
   Друг за другом со ступенькой: одновременный рывок двух карточек
   читается как перерисовка. */
@keyframes ctToastIn{from{opacity:0; transform:translateX(26px)} to{opacity:1; transform:none}}
.ct-toasts > *{animation:ctToastIn .42s cubic-bezier(.22,.7,.3,1) both}
.ct-toasts > :nth-child(2){animation-delay:.1s}
.ct-toasts > :nth-child(3){animation-delay:.2s}
/* Настройка «меньше движения» — это просьба, а не пожелание. */
@media(prefers-reduced-motion:reduce){
  .ct-toast__dot{animation:none}
  .ct-toasts > *{animation:none}
}

/* ---------- настройки ---------- */
.ct-opts{display:grid; gap:9px; margin-bottom:16px}
.ct-opt{display:grid; grid-template-columns:20px 1fr; gap:4px 11px; align-items:start;
  border:1px solid var(--line); border-radius:10px; padding:11px 13px; cursor:pointer;
  transition:border-color .16s ease, background-color .16s ease}
.ct-opt:hover{border-color:var(--mut)}
.ct-opt--on{border-color:var(--ok); background:var(--ok-bg)}
.ct-opt input{grid-row:1/3; width:18px; height:18px; margin:2px 0 0; accent-color:var(--ok)}
.ct-opt__t{font-weight:600; line-height:1.4}
.ct-opt__d{font-size:12.5px; color:var(--mut); line-height:1.5}
.ct-opt--on .ct-opt__d{color:var(--ok-ink)}
.ct-fld{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 14px}
.ct-fld label{font-size:13.5px; line-height:1.45}
.ct-in{background:var(--line-2); border:1px solid var(--line); border-radius:9px; padding:7px 10px;
  color:var(--ink); font:inherit; font-size:13px; line-height:1.4}
.ct-in:focus{outline:none; border-color:var(--ok); background:var(--card)}
.ct-in--n{width:92px}
.ct-card__h--in{padding:0; border:0; margin:4px 0 10px}
.ct-card__h--in h3{font-size:14px; margin:0; line-height:1.4}
.ct-note--ok{border-color:var(--ok); background:var(--ok-bg)}

/* ---------- лента событий пациента ---------- */
/* Дата · точка на линии · текст. Линия рисуется псевдоэлементом у точки,
   а не отдельным блоком: у последнего события она обрывается сама. */
.ct-card__b--tabs{padding-bottom:0}
.ct-card__b--tabs .ct-seg--tabs{margin-bottom:0}
.ct-tl{display:grid; grid-template-columns:62px 18px minmax(0,1fr); gap:12px; align-items:start;
  text-decoration:none; color:inherit}
.ct-tl:hover .ct-tl__h{text-decoration:underline}
.ct-tl__d{font-size:13px; color:var(--mut); padding-top:9px; text-align:right;
  font-variant-numeric:tabular-nums; line-height:1.45}
.ct-tl__l{display:flex; flex-direction:column; align-items:center; height:100%}
.ct-tl__dot{width:9px; height:9px; border-radius:50%; margin-top:11px; flex:0 0 auto;
  background:var(--mut)}
.ct-tl__l::after{content:''; flex:1 1 0; width:1px; background:var(--line); min-height:14px}
.ct-tl:last-child .ct-tl__l::after{display:none}
.ct-tl__b{padding:7px 0 12px; min-width:0}
.ct-tl__h{display:block; font-size:15px; font-weight:600; margin-bottom:2px; line-height:1.4}
.ct-tl__t{display:block; font-size:14px; color:var(--mut); line-height:1.5}
/* Цвет точки — вид события. Красная только у неотвеченного: остальное
   не беда, а история, и красить историю тревожным цветом незачем. */
.ct-tl__dot--wait{background:var(--bad)}
.ct-tl__dot--done{background:var(--ok)}
.ct-tl__dot--wa{background:var(--ok)}
.ct-tl__dot--site{background:var(--info)}
.ct-tl__dot--ad{background:var(--warn)}
.ct-tl__dot--form{background:var(--warn)}
.ct-tl__dot--plan{background:var(--mut)}
@media(max-width:640px){
  .ct-tl{grid-template-columns:52px 16px minmax(0,1fr); gap:9px}
  .ct-tl__d{font-size:12px}
  .ct-tl__h{font-size:14.5px}
}

/* Быстрая запись из разговора. Поля в строку, подпись над полем: подпись
   слева съедала бы ширину, а полей пять. */
.ct-book{display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end}
.ct-book__f{display:flex; flex-direction:column; gap:4px; min-width:0}
.ct-book__f > span{font-size:11.5px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--mut); line-height:1.5}
.ct-book__f:first-child{flex:1 1 170px}
/* ⚠️ `.ct-svc__s` написан под горизонтальный ряд блока услуги: у него
   `flex:1 1 220px`. Здесь он лежит внутри подписи-колонки, и базис 220px
   стал ВЫСОТОЙ — селект растягивался на 241px. Компонент, перенесённый
   в другую ось, почти всегда требует такой поправки. */
.ct-book .ct-svc__s{flex:0 0 auto; width:100%}
.ct-book .ct-in{min-width:0}
.ct-book .ct-btn{height:34px}

/* ---------- выбор дня ---------- */
/* Родное поле остаётся в потоке, пока скрипт не отработал: без этого при
   отключённом JS поле исчезло бы, и записать стало бы нечем. Прячется оно
   только тем же скриптом, который ставит замену. */
.ct-pick{position:relative}
.ct-pick__t{background:var(--line-2); border:1px solid var(--line); border-radius:9px;
  padding:7px 12px; color:var(--ink); font:inherit; font-size:13px; line-height:1.4;
  cursor:pointer; text-align:left; white-space:nowrap;
  transition:border-color .16s ease, background-color .16s ease}
.ct-pick__t:hover{border-color:var(--mut)}
.ct-pick__t.is-open{border-color:var(--ok); background:var(--card)}
/* ⚠️ position задаёт скрипт (fixed): у карточки панели `overflow:hidden`,
   и абсолютный попап обрезался её нижней границей. Здесь остаётся только вид. */
.ct-pick__p{position:absolute; z-index:60; top:calc(100% + 6px); left:0;
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px;
  box-shadow:0 12px 34px rgba(0,0,0,.20)}
.ct-pick__n{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px}
.ct-pick__nb{width:30px; height:30px; border:1px solid var(--line); border-radius:8px;
  background:transparent; color:var(--ink); font-size:17px; line-height:1; cursor:pointer}
.ct-pick__nb:hover:not(:disabled){border-color:var(--mut)}
.ct-pick__nb:disabled{opacity:.35; cursor:default}
.ct-pick__ms{display:flex; gap:18px}
.ct-pick__h{font-size:13px; font-weight:600; text-align:center; margin-bottom:8px; line-height:1.4}
.ct-pick__w,.ct-pick__d{display:grid; grid-template-columns:repeat(7, 32px)}
.ct-pick__w span{font-size:11px; color:var(--mut); text-align:center; line-height:2}
.ct-pick__d button{height:30px; border:0; border-radius:7px; background:transparent;
  color:var(--ink); font:inherit; font-size:13px; cursor:pointer; line-height:1}
.ct-pick__d button:hover:not(:disabled){background:var(--line-2)}
/* Прошлое закрыто, но видно: пропуск в сетке читался бы как сбой отрисовки. */
.ct-pick__d button.is-past{color:var(--mut); opacity:.4; cursor:default}
.ct-pick__d button.is-today{box-shadow:inset 0 0 0 1px var(--ok); color:var(--ok-ink)}
.ct-pick__d button.is-on{background:var(--ok-fill); color:#fff}
.ct-pick__d button.is-on.is-today{box-shadow:none}
/* ⚠️ На телефоне показываем ОДИН месяц. Второй под первым делает попап
   выше экрана: до октября надо доскроллить, а до кнопок формы под ним —
   тем более. Листать вперёд стрелкой и быстрее, и понятнее. */
@media(max-width:560px){
  .ct-pick__ms > .ct-pick__m + .ct-pick__m{display:none}
}

/* ---------- выбор времени ---------- */
/* Строка = час, четыре кнопки = четверти. Барабан родного поля крутить ради
   «16:30» дольше, чем нажать один раз. */
.ct-tpick{position:relative}
.ct-tpick__p{padding:10px; max-height:min(58vh, 420px); overflow:auto}
.ct-tpick__n{font-size:12px; color:var(--mut); line-height:1.5; margin-bottom:8px;
  position:sticky; top:-10px; background:var(--card); padding:2px 0}
.ct-tpick__g{display:flex; flex-direction:column; gap:3px}
.ct-tpick__r{display:grid; grid-template-columns:30px repeat(4, 42px); gap:3px; align-items:center}
.ct-tpick__r > span{font-size:12px; color:var(--mut); text-align:right; padding-right:4px;
  font-variant-numeric:tabular-nums; line-height:1.4}
.ct-tpick__r button{height:28px; border:0; border-radius:7px; background:var(--line-2);
  color:var(--ink); font:inherit; font-size:12.5px; cursor:pointer; line-height:1;
  font-variant-numeric:tabular-nums}
.ct-tpick__r button:hover{background:var(--ok-bg); color:var(--ok-ink)}
/* ⚠️ Часы вне расписания приглушены, но НЕ убраны: администратор записывает
   и вне часов, а не найдя нужного времени решит, что панель сломана. */
.ct-tpick__r button.is-off{background:transparent; color:var(--mut); opacity:.5}
.ct-tpick__r button.is-off:hover{opacity:1; background:var(--line-2)}
.ct-tpick__r button.is-on{background:var(--ok-fill); color:#fff; opacity:1}

/* ⚠️ Этот блок в КОНЦЕ файла намеренно: медиазапросы телефона объявлены выше
   базовых правил формы, и при равной специфичности побеждает последний.
   Ловушка в этом файле уже четвёртая. */
@media(max-width:560px){
  /* Поля записи — по одному в строку. Дело не только в удобстве ввода:
     в узкой строке поле времени стояло у правого края, и его попап уезжал
     за экран левым краем. Поле во всю ширину — попап всегда помещается. */
  .ct-book__f, .ct-book > .ct-btn{flex:1 1 100%}
  .ct-book .ct-pick__t, .ct-book .ct-svc__s, .ct-book .ct-in{width:100%}
  .ct-book .ct-pick__p{max-width:calc(100vw - 16px)}
}

/* ---------- длительность ---------- */
.ct-dpick{position:relative}
/* Пустое значение приглушено: пустая длительность — рабочее состояние формы,
   а не ошибка, но и не выглядит заполненной. */
.ct-pick__t.is-empty{color:var(--mut)}
.ct-dpick__p{padding:10px}
.ct-dpick__g{display:grid; grid-template-columns:repeat(5, 48px); gap:4px}
.ct-dpick__g button{height:30px; border:0; border-radius:7px; background:var(--line-2);
  color:var(--ink); font:inherit; font-size:13px; cursor:pointer; line-height:1;
  font-variant-numeric:tabular-nums}
.ct-dpick__g button:hover{background:var(--ok-bg); color:var(--ok-ink)}
.ct-dpick__g button.is-on{background:var(--ok-fill); color:#fff}
.ct-dpick__own{display:flex; gap:6px; margin-top:8px; align-items:center}
.ct-dpick__own .ct-in{width:78px}
/* Занятое время помечено полосой, но кнопка живая: пересечения у клиники
   разрешены, и запрет сломал бы обычную работу. */
.ct-tpick__r button.is-busy{background:var(--bad-bg); color:var(--bad);
  box-shadow:inset 0 -2px 0 var(--bad); opacity:1}
.ct-tpick__r button.is-busy.is-on{background:var(--ok-fill); color:#fff; box-shadow:none}
/* «Запись» отделена от ссылок-переходов и прижата вправо: это действие,
   а не навигация, и стоять в одном ряду с ними она не должна. */
.ct-btns__gap{flex:1 1 0}

/* Значки в действиях карточки — рисованные, а не символы «← ✕ ?».
   Символы разной ширины и разного веса: ряд выглядел собранным из того,
   что нашлось. Плюс «?» ничего не сообщал про расшифровку кода. */
.ct-kan__b svg{width:13px; height:13px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
/* Переход в переписку подкрашен зелёным WhatsApp при наведении: из четырёх
   значков это единственный, ведущий к самому человеку. */
.ct-kan__b--wa:hover{border-color:var(--ok); color:var(--ok-ink); background:var(--ok-bg)}

/* ---------- полоски отбора и статуса ---------- */
/* Полоса, а не выпадающий список: видно сразу, где сколько, и «ноль в работе»
   само по себе довод. Кнопка и ссылка выглядят одинаково — разница только
   в том, меняет ли нажатие данные. */
.ct-chips{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
/* Внизу карточки, поэтому отступ сверху и черта: это не продолжение
   переписки, а действие над обращением. */
.ct-chips--st{margin-top:16px; padding-top:14px; border-top:1px solid var(--line)}
.ct-chips__k{font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--mut); line-height:1.5; margin-right:2px}
.ct-chip{display:inline-flex; align-items:baseline; gap:5px; padding:4px 10px; border-radius:20px;
  border:1px solid var(--line); background:var(--card); color:var(--mut); font:inherit;
  font-size:12.5px; line-height:1.5; text-decoration:none; cursor:pointer;
  transition:background-color .16s ease, border-color .16s ease, color .16s ease}
.ct-chip b{font-size:13px; color:var(--ink); font-variant-numeric:tabular-nums}
.ct-chip:hover{background:var(--line-2); border-color:var(--mut)}
.ct-chip--on{background:var(--ok-bg); border-color:var(--ok); color:var(--ok-ink); cursor:default}
.ct-chip--on b{color:var(--ok-ink)}
.ct-chip--on:hover{background:var(--ok-bg); border-color:var(--ok)}

/* ---------- выбор из списка ---------- */
.ct-spick{position:relative}
.ct-spick--wide{flex:1 1 220px; min-width:0; display:block}
.ct-spick__t{max-width:100%; overflow:hidden; text-overflow:ellipsis}
.ct-spick--wide .ct-spick__t{width:100%}
.ct-spick__p{padding:8px; min-width:200px; max-width:min(420px, calc(100vw - 20px))}
.ct-spick__q{width:100%; margin-bottom:6px}
/* Список прокручивается внутри себя: 46 услуг иначе делают попап выше экрана,
   и до кнопки «Сохранить» под ним уже не добраться. */
.ct-spick__l{display:flex; flex-direction:column; gap:2px; max-height:min(46vh, 320px); overflow:auto}
.ct-spick__l button{border:0; border-radius:7px; background:transparent; color:var(--ink);
  font:inherit; font-size:13px; line-height:1.45; cursor:pointer; padding:7px 9px; text-align:left}
.ct-spick__l button:hover{background:var(--line-2)}
.ct-spick__l button.is-on{background:var(--ok-bg); color:var(--ok-ink); font-weight:600}
.ct-spick__none{padding:8px 9px; color:var(--mut); font-size:13px; line-height:1.45}

/* ---------- «как меняются статусы» ---------- */
/* Родной <details>: свёрнуто по умолчанию — читают это один раз,
   а мешает оно каждый день. Ни строки скрипта. */
/* Отступ сверху нужен: под строкой статусов блок прилипал к плашкам
   вплотную и читался как их продолжение, хотя это справка, а не действие. */
.ct-how{margin:12px 0 14px; border:1px solid var(--line); border-radius:10px;
  background:var(--card); overflow:hidden}
/* Внутри карточки разговора — своя граница снизу: там под ним сразу край
   карточки, и общие 14px давали тесноту. */
.ct-chips--st + .ct-how{margin:14px 0 4px}
.ct-how > summary{cursor:pointer; padding:9px 14px; font-size:13px; line-height:1.5;
  color:var(--mut); list-style:none; user-select:none}
.ct-how > summary::-webkit-details-marker{display:none}
.ct-how > summary::before{content:'▸'; display:inline-block; width:14px; color:var(--mut)}
.ct-how[open] > summary::before{content:'▾'}
.ct-how > summary:hover{color:var(--ink); background:var(--line-2)}
.ct-how__l{margin:0; padding:2px 14px 4px 32px; font-size:13px; line-height:1.6; color:var(--mut)}
.ct-how__l b{color:var(--ink); font-weight:600}
.ct-how__l li{margin-bottom:3px}
.ct-how__n{margin:0 14px 10px; font-size:12.5px; line-height:1.55; color:var(--mut)}
.ct-how__n:last-child{margin-bottom:12px}

/* Полоса действий над перепиской: отделена фоном и чертой снизу.
   Ряд кнопок с одним отступом сливался с лентой — первое сообщение
   читалось как ещё одна кнопка. */
.ct-actbar{margin:-15px -17px 16px; padding:13px 17px 14px;
  background:var(--line-2); border-bottom:1px solid var(--line)}
/* Список догадок: строка кликается целиком, подсвеченная — та, что стоит
   в обращении. Нажатие на неё снимает услугу, поэтому отдельной кнопки
   отказа нет. Значков нет намеренно: два смысла на ряд («стоит» и
   «поставить») глаз разбирал дольше, чем читал сами услуги. */
.ct-guess__l{display:flex; flex-direction:column; gap:3px; margin:2px 0 10px; padding:0; list-style:none}
.ct-gl{display:contents}
.ct-gl__r{display:block; width:100%; text-align:left; border:1px solid transparent;
  border-radius:8px; padding:7px 10px; background:transparent; color:var(--ink);
  font:inherit; font-size:13.5px; line-height:1.45; cursor:pointer;
  transition:background-color .16s ease, border-color .16s ease}
.ct-gl__r b{font-weight:600}
.ct-gl__r span{color:var(--mut)}
/* ⚠️ Подсветка из ФИОЛЕТОВОЙ палитры блока, а не зелёная. Зелёный в панели
   означает «сделано, всё в порядке», и внутри блока машинного разбора он
   читался как чужой: будто это подтверждённый факт, а не догадка. Цвет
   выбранной строки обязан оставаться цветом самого блока. */
.ct-gl__r.is-on{background:var(--ai-sel); border-color:var(--ai); color:var(--ai-ink)}
.ct-gl__r.is-on b{color:var(--ai-ink)}
.ct-gl__r.is-on span{color:var(--ai-ink); opacity:.8}
.ct-gl__r:hover{background:var(--ai-sel); border-color:var(--ai); opacity:.9}
.ct-gl__r.is-on:hover{opacity:1}
/* Нечего выбирать — строка не притворяется кнопкой. */
.ct-gl__r--off{cursor:default}
.ct-gl__r--off:hover{background:transparent; border-color:transparent}

/* Действия у догадок — значки, не кнопки с подписью: здесь читают текст,
   а нажимают редко. Подпись в `title`. */
.ct-gb{display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:24px; height:24px; padding:0; border-radius:7px; cursor:pointer;
  border:1px solid var(--line); background:transparent; color:var(--mut);
  transition:background-color .16s ease, color .16s ease, border-color .16s ease}
.ct-gb svg{width:13px; height:13px; fill:none; stroke:currentColor;
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
/* «Поставить эту» — подтверждающее действие: зелёное при наведении. */
.ct-gb--use:hover{border-color:var(--ok); color:var(--ok-ink); background:var(--ok-bg)}
/* «Не то» — отказ: красное, и только при наведении. Звать нажимать оно
   не должно, его нажимают, когда машина ошиблась. */
.ct-gb--x:hover{border-color:var(--bad); color:var(--bad); background:var(--bad-bg)}
/* Кнопка со значком: значок слева, подпись рядом — это одно действие,
   а не значок и текст по отдельности. */
.ct-btn--ico{display:inline-flex; align-items:center; gap:7px}
.ct-btn--ico svg{width:15px; height:15px; flex:0 0 15px; fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
/* Выборы внутри вертикальной формы записи: подпись сверху, кнопка во всю
   ширину поля — как у родных полей рядом. */
.ct-f.ct-spick, .ct-f.ct-pick, .ct-f.ct-tpick, .ct-f.ct-dpick{position:relative}
.ct-f .ct-pick__t{width:100%; margin-top:5px}
/* Нумерованный список шагов: порядок здесь и есть смысл — что за чем. */
.ct-how__l--num{list-style:decimal}
.ct-how__n b{color:var(--ink)}
/* Полоса отбора над списком разговоров: свой фон и черта снизу. */
/* Встык под шапкой карточки: гасим зазор колонки — без этого полоса висела
   отдельным блоком в 16px от шапки и не читалась как её продолжение. */
.ct-chips--bar{padding:12px 17px 13px; background:var(--line-2);
  border-bottom:1px solid var(--line); gap:7px; margin-top:calc(-1 * var(--split-gap))}
/* «Выйти» — второй строкой под именем, вместо названия клиники. */
.ct-rail__exit{display:block; font-size:11.5px; color:var(--rail-ink); text-decoration:none;
  line-height:1.4; margin-top:1px; transition:color .16s ease}
.ct-rail__exit:hover{color:#fff; text-decoration:underline}
/* Отдельной строки выхода нет вовсе — см. разметку. Правило осталось
   на случай, если она где-то ещё встретится. */
.ct-rail__out{display:none}

/* ---------- «Пора вернуться» ---------- */
.ct-rc{display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center;
  padding:12px 17px; border-bottom:1px solid var(--line)}
.ct-rc:last-child{border-bottom:0}
.ct-rc__who{flex:1 1 170px; min-width:0}
.ct-rc__n{display:block; font-size:15px; font-weight:600; color:var(--ink);
  text-decoration:none; line-height:1.4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ct-rc__n:hover{text-decoration:underline}
.ct-rc__p{display:block; font-size:13px; color:var(--mut); line-height:1.4}
.ct-rc__why{flex:2 1 230px; min-width:0; font-size:14px; line-height:1.5; display:flex;
  align-items:baseline; gap:8px; flex-wrap:wrap}
.ct-rc__dot{flex:0 0 auto; width:7px; height:7px; border-radius:50%; align-self:center}
/* Срок — зелёный: это работа по плану. День рождения — оранжевый: повод,
   а не обязанность. */
.ct-rc__dot--term{background:var(--ok)}
.ct-rc__dot--bday{background:var(--warn)}
.ct-rc__tag{flex:0 0 auto}
.ct-rc__act{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; flex:1 1 auto}
.ct-rc__act .ct-btn{text-decoration:none}

/* Время ожидания в строке списка разговоров. Приглушено, пока не перешло
   порог: «ждёт две минуты» — обычное состояние, а не тревога. */
.ct-q__wait{flex:0 0 auto; font-size:13px; font-weight:600; color:var(--mut);
  font-variant-numeric:tabular-nums; white-space:nowrap}
.ct-q__wait.is-hot{color:var(--bad)}
.ct-chip--wait b{color:var(--bad)}
.ct-chip--wait.ct-chip--on b{color:var(--ok-ink)}

/* ---------- нижняя полоса вкладок: меню на телефоне ---------- */
/* ⚠️ На телефоне боковая лента разворачивалась в горизонтальную полосу,
   но правило раскрытой ленты `.ct-wide .ct-rail__b{width:100%}` там никто
   не отменял: каждый пункт занимал ВСЮ ширину экрана, полоса прокрутки
   скрыта — и видно было ровно один пункт из одиннадцати. Выглядело это
   не как «меню уехало», а как «меню нет».
   Лечится не шириной кнопок: горизонтальное меню со скрытой прокруткой
   прячет разделы в любом случае. На телефоне меню другое — закреплённая
   внизу полоса из макета: всё видно сразу и до всего достаёт большой палец.

   ⚠️ Этот блок обязан оставаться В КОНЦЕ ФАЙЛА — см. соседнюю пометку
   выше: медиазапросы телефона объявлены раньше базовых правил ленты,
   и при равной специфичности побеждает последний. */
.ct-tabs{display:none}

@media(max-width:820px){
  :root{--tabh:calc(64px + env(safe-area-inset-bottom, 0px))}

  /* Боковой ленты на телефоне нет вовсе — не спрятана «на всякий случай»,
     а заменена: две навигации на одном экране спорили бы за подсветку
     текущего раздела. */
  .ct-rail{display:none}

  .ct-tabs{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50;
    background:var(--rail); border-top:1px solid rgba(255,255,255,.12);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom, 0px))}

  .ct-tab{flex:1 1 0; min-width:0; position:relative; text-decoration:none;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:4px; min-height:52px; padding:0 2px; border-radius:10px;
    color:var(--rail-ink); background:none; cursor:pointer;
    list-style:none}                       /* <summary> у «Ещё» */
  .ct-tab::-webkit-details-marker{display:none}
  .ct-tab svg{width:22px; height:22px; flex:0 0 22px}
  /* ⚠️ Подпись — ОДНА строка с многоточием, и это решение владельца
     (26.09.2026), а не вынужденность. Короткие формы `nav.*.s` пробовали
     и сняли: ради трёх длинных слов пришлось бы держать второй словарь,
     который разойдётся с меню. Перенос на две строки тоже отвергнут —
     полоса становится разновысокой и выглядит неряшливо. «Обраще…»
     на своём месте в ряду узнаётся, а значок над ним и так свой. */
  .ct-tab__l{max-width:100%; font-size:11px; font-weight:500; line-height:1;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  /* Текущий раздел — заливка и белый цвет: одного цвета мало, соседние
     значки отличаются не ярче, чем рисунком. */
  .ct-tab[aria-selected="true"], .ct-tab--in{color:#fff}
  .ct-tab[aria-selected="true"] .ct-tab__l, .ct-tab--in .ct-tab__l{font-weight:700}
  .ct-tab[aria-selected="true"]{background:rgba(34,160,107,.18)}
  /* Значок ожидающих — у иконки, а не в углу вкладки: в углу он попадал
     на соседнюю вкладку и читался как её число. */
  .ct-tab .ct-dot{position:absolute; top:3px; left:50%; margin-left:5px;
    min-width:17px; height:17px; border-radius:9px; background:var(--bad); color:#fff;
    font-size:10px; font-weight:600; display:flex; align-items:center;
    justify-content:center; padding:0 4px; line-height:1}

  /* «Ещё» — родной <details>: закрывается повторным нажатием и уходом
     на другую страницу, ни строки скрипта не требует. */
  .ct-more{flex:1 1 0; min-width:0}
  .ct-more > .ct-tab{width:100%}

  /* Затемнение под листом. ⚠️ Оно принадлежит ПОЛОСЕ, а не листу: нажатие
     по затемнению должно закрывать лист, а обработчик закрывает по признаку
     «цель вне <details>». Псевдоэлемент листа целью дал бы сам лист, то есть
     «внутри», и нажатие мимо молча не работало бы. Полосы затемнение
     не касается — по вкладкам нужно попадать с первого раза. */
  .ct-tabs:has(.ct-more[open])::before{content:''; position:fixed; inset:0;
    bottom:var(--tabh); background:rgba(0,0,0,.45)}

  .ct-sheet{position:fixed; left:0; right:0; bottom:var(--tabh); z-index:51;
    background:var(--card); color:var(--ink);
    border-top:1px solid var(--line); border-radius:14px 14px 0 0;
    padding:8px 14px 16px; box-shadow:0 -18px 40px rgba(0,0,0,.34);
    max-height:min(70vh, 520px); overflow-y:auto}
  .ct-sheet__h{display:block; width:38px; height:4px; border-radius:3px;
    background:var(--line); margin:4px auto 12px}
  .ct-sheet__t{font-size:11px; font-weight:600; letter-spacing:.085em;
    text-transform:uppercase; color:var(--mut); margin-bottom:10px}
  /* Две колонки: остальных разделов бывает семь, и в один столбец лист
     перерастает экран — до нижних приходилось бы мотать. */
  .ct-sheet__g{display:grid; grid-template-columns:1fr 1fr; gap:8px}
  .ct-sheet__b{position:relative; display:flex; align-items:center; gap:10px;
    min-height:50px; padding:0 12px; border:1px solid var(--line); border-radius:8px;
    background:var(--bg); color:var(--ink); text-decoration:none;
    font-size:13.5px; min-width:0}
  .ct-sheet__b svg{width:19px; height:19px; flex:0 0 19px; color:var(--mut)}
  /* И в листе подпись тоже в ОДНУ строку с многоточием: перенос делал
     плитки разной высоты, и сетка из семи штук переставала читаться рядом.
     Ровный ряд с «Расшифровка ко…» аккуратнее рваного с полным текстом. */
  .ct-sheet__b span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .ct-sheet__b[aria-selected="true"]{border-color:var(--ok); font-weight:600}
  .ct-sheet__b[aria-selected="true"] svg{color:var(--ok)}
  .ct-sheet__b .ct-dot{position:static; margin-left:auto; flex:0 0 auto;
    min-width:18px; height:18px; border-radius:9px; background:var(--bad); color:#fff;
    font-size:10px; font-weight:600; display:flex; align-items:center;
    justify-content:center; padding:0 5px; line-height:1}

  .ct-sheet__me{display:flex; align-items:center; gap:10px; margin-top:14px;
    padding-top:12px; border-top:1px solid var(--line); font-size:14px}
  .ct-sheet__me b{font-weight:600; min-width:0; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap}
  .ct-sheet__me .ct-rail__av{flex:0 0 32px; width:32px; height:32px}
  .ct-sheet__out{margin-left:auto; flex:0 0 auto; font-size:13.5px; color:var(--bad)}

  /* ⚠️ «Добавить запись» уходит ПОД стрелки и во всю ширину. В один ряд
     с «← Сегодня →» она на 390px не помещается и ломалась на две строки
     внутри кнопки — выглядело как сбой вёрстки. Это главное действие
     экрана, и в ряду навигации оно к тому же терялось.
     `order` вместо перестановки в разметке: на широком экране порядок
     обратный, и держать два варианта разметки ради этого незачем. */
  /* ⚠️ Лента НЕ прокручивается внутри себя на телефоне. На широком экране
     это правильно: переписка не вытягивает страницу, поле ответа всегда
     на виду. На телефоне получалось обратное — окошко в пол-экрана,
     под ним намертво стоящее поле, и вся страница переставала двигаться
     привычным образом: скролл то листает ленту, то страницу, в зависимости
     от того, где палец. Здесь страница листается целиком, а поле ответа
     лежит там, где ему и место, — после последнего сообщения. */
  .ct-wa{max-height:none; overflow:visible; padding-right:0}

  .ct-daynav{flex-wrap:wrap}
  .ct-daynav:has(.ct-daynav__add){width:100%}
  .ct-daynav a.ct-daynav__add{order:2; flex:1 0 100%; text-align:center; padding:11px 14px}

  /* Полоса закреплена поверх страницы, значит низ содержимого обязан
     подняться — иначе последняя карточка и кнопка «Сохранить» уезжают
     под неё, и на глаз это выглядит как обрезанная страница. */
  .ct-main{padding-bottom:calc(var(--tabh) + 24px)}
  /* ⚠️ На телефоне показывается ОДНО из двух: список разговоров или сам
     разговор, как в мессенджере. Рядом они не помещаются: список съедал
     пол-экрана над перепиской, и до первого сообщения приходилось мотать
     мимо чужих имён. Возврат — стрелкой в шапке разговора.
     Признак несёт `.ct-split--one`, который ставит шаблон по наличию
     выбранного разговора: решать это стилем по `:empty` или по количеству
     детей значило бы угадывать. */
  .ct-split--one .ct-split__l{display:none}
  .ct-split:not(.ct-split--one) .ct-split__r{display:none}
  .ct-back{display:flex}
  /* Имя собеседника идёт СРАЗУ за стрелкой, как в мессенджере. У шапки
     карточки `justify-content:space-between`, и без этого стрелка уезжала
     к левому краю, а имя к правому — между ними полэкрана пустоты.
     Номер и код переносятся на свою строку целиком. */
  .ct-split__r .ct-card__h{justify-content:flex-start; gap:8px}
  .ct-split__r .ct-card__h .ct-sub{flex:1 0 100%}
  /* «Отправить» во всю ширину врезки: на телефоне это единственное действие
     экрана, и попадать по нему надо большим пальцем с первого раза.
     Кнопка растягивается, а не просто увеличивается поле нажатия: узкая
     кнопка у левого края в ряду пустоты читается как второстепенная. */
  /* ⚠️ На телефоне ВСЁ управление карточкой уходит вниз, одной полосой:
     стрелка «дальше» и мелкие действия. Наверху остаётся то, что читают —
     имя, услуга, метки. Стрелка в верхнем правом углу спорила с именем
     за первую строку и требовала отступа справа у текста, а до кнопок
     в 22px попадали не с первого раза.
     Стрелка позиционируется от КАРТОЧКИ, поэтому у неё снимается
     `position:relative` с внутренней кнопки — иначе «низ» был бы низом
     текстового блока, а не низом карточки. */
  .ct-kan__n{position:relative}
  .ct-kan__go{position:static}
  .ct-kan__next{top:auto; bottom:10px; right:11px; width:38px; height:38px}
  .ct-kan__next svg{width:19px; height:19px}
  /* Отступ справа у текста больше не нужен: под стрелкой он не проходит. */
  .ct-kan__go b, .ct-kan__go .ct-s{padding-right:0}
  /* Действия отделены чертой — это подвал карточки, а не продолжение меток.
     Поле справа оставлено под стрелку, чтобы значки под неё не заезжали. */
  .ct-kan__act{margin-top:10px; padding-top:10px; padding-right:46px; gap:8px;
    border-top:1px solid var(--line)}
  .ct-kan__b{width:38px; height:38px; border-radius:9px}
  .ct-kan__b svg{width:17px; height:17px}

  .ct-say .ct-btns{display:block}
  .ct-say .ct-btns .ct-btn{width:100%; justify-content:center; padding:13px 16px}
  /* Список остался один на экране — прокручивать его внутри себя незачем:
     страница листается целиком, как и переписка. */
  .ct-split__l .ct-scroll{max-height:none; overflow:visible}

  /* ⚠️ Плашек «ждёт ответа» на телефоне НЕТ. На широком экране они и есть
     весь смысл: администратор сидит в календаре, а ждущий висит в углу
     и не даёт о себе забыть. На 390px две плашки занимают треть экрана
     и ложатся поверх карточек доски — то есть закрывают ту самую работу,
     к которой зовут.
     Сигнал при этом НЕ теряется: красный значок с числом висит на вкладке
     «Диалоги» в нижней полосе и виден с любого экрана. Прятать плашку
     можно только потому, что счёт остаётся на виду; убери значок —
     плашки придётся вернуть. */
  .ct-toasts{display:none}
}

/* ---------- календарь: месяц слева, подробности рядом ---------- */
/* ⚠️ Сетка дня шире всего остального и должна получать место первой,
   поэтому её колонка резиновая, а боковая — фиксированная. Боковая идёт
   в РАЗМЕТКЕ первой (месяц — это навигация, её читают раньше сетки),
   а вправо её уводит `order`: на телефоне порядок остаётся естественным. */
.ct-ag{display:grid; grid-template-columns:minmax(0,1fr) 304px; gap:var(--split-gap); align-items:start}
.ct-ag__side{order:2; display:flex; flex-direction:column; gap:var(--split-gap); min-width:0}
.ct-ag__main{order:1; min-width:0}

.ct-mini__h{gap:8px}
.ct-mini__h h2{flex:1 1 auto; text-align:center; text-transform:capitalize}
.ct-mini__nav{flex:0 0 28px; width:28px; height:28px; display:flex; align-items:center;
  justify-content:center; border:1px solid var(--line); border-radius:8px;
  color:var(--mut); text-decoration:none; font-size:15px; line-height:1}
.ct-mini__nav:hover{color:var(--ink); border-color:var(--line-2)}
.ct-mini{display:grid; grid-template-columns:repeat(7, 1fr); gap:2px; padding:12px}
.ct-mini__w{font-size:10.5px; color:var(--mut); text-align:center; padding-bottom:4px}
.ct-mini__d{position:relative; display:flex; align-items:center; justify-content:center;
  height:32px; border-radius:8px; font-size:13px; color:var(--ink-2);
  text-decoration:none; font-variant-numeric:tabular-nums}
.ct-mini__d:hover{background:var(--line-2)}
/* Сегодня — обводкой, выбранный день — заливкой: это разные вещи, и когда
   они совпадают, видно обе. */
.ct-mini__d.is-today{box-shadow:inset 0 0 0 1px var(--line-2); font-weight:600}
.ct-mini__d.is-on{background:var(--ok-fill); color:#fff; font-weight:600}
/* Точка «здесь есть записи». У выбранного дня она белая, иначе теряется. */
.ct-mini__d i{position:absolute; bottom:4px; left:50%; margin-left:-2px;
  width:4px; height:4px; border-radius:50%; background:var(--ok)}
.ct-mini__d.is-on i{background:#fff}

.ct-det__l{display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 14px; margin:0;
  font-size:13.5px; line-height:1.45}
.ct-det__l dt{color:var(--mut); font-size:11.5px; letter-spacing:.04em; text-transform:uppercase;
  padding-top:2px}
.ct-det__l dd{margin:0; min-width:0; overflow-wrap:anywhere}
/* ⚠️ Ссылке внутри подробностей нужен свой цвет: браузерный синий
   по тёмному фону читается на пределе, а это телефон клиента — то, ради
   чего панель и открывают перед звонком. */
.ct-det__l dd a{color:var(--ok-ink); text-decoration:none}
.ct-det__l dd a:hover{text-decoration:underline}
.ct-det__st{margin-top:12px; padding-top:12px; border-top:1px solid var(--line)}
/* Выбранная запись в сетке помечается — иначе непонятно, чьи подробности
   показаны справа. */
.ct-slot--on{outline:2px solid var(--ok); outline-offset:-2px}

@media(max-width:1100px){
  /* Боковая колонка под сетку не влезает: на планшете она встаёт сверху,
     и порядок разметки (месяц, потом сетка) оказывается верным сам собой. */
  .ct-ag{grid-template-columns:1fr}
  .ct-ag__side{order:0}
  .ct-ag__main{order:1}
  /* ⚠️ Пустая карточка подробностей здесь ПРЯЧЕТСЯ. Сбоку она подсказка
     («выберите запись»), а сверху — блок текста, который отодвигает сетку
     и ничего не сообщает: выбирать ещё нечего, сетки не видно. */
  .ct-det--empty{display:none}
}

/* ---------- быстрые отметки в списке дня ---------- */
/* Кнопки стоят рядом со статусом и приглушены: читают список ради
   расписания, а отмечают между делом. Громкие кнопки в каждой строке
   превратили бы расписание в пульт. */
.ct-st{display:inline-flex; gap:6px; margin-left:8px; vertical-align:middle}
.ct-chip--sm{padding:3px 9px; font-size:12px}
/* «Пришёл» — самое частое действие дня, поэтому у него свой цвет.
   Остальные остаются серыми: ошибиться отменой дороже, чем приходом. */
.ct-chip--go{border-color:var(--ok); color:var(--ok-ink)}
.ct-chip--go:hover{background:var(--ok-fill); color:#fff; border-color:var(--ok-fill)}
@media(max-width:640px){
  /* На телефоне отметки уходят под статус: в строку они не помещаются
     и ломали бы таблицу вбок, а колонки резать нельзя. */
  .ct-st{display:flex; margin:6px 0 0; flex-wrap:wrap}
  .ct-chip--sm{padding:7px 12px; font-size:12.5px}
}

/* ---------- что смотрел на сайте ---------- */
/* Отдельная врезка, а не строка в разборе ИИ: это РАЗНЫЕ источники.
   Разбор — догадка машины по словам человека, а здесь факт: он сам открыл
   эту страницу. Смешать их значит потерять, чему верить. */
.ct-seen{border:1px solid var(--line); border-radius:12px; padding:12px 13px; margin-bottom:14px}
.ct-seen__k{font-size:11px; letter-spacing:.085em; text-transform:uppercase;
  color:var(--mut); font-weight:600; margin-bottom:8px}
.ct-seen__l{margin:0; padding-left:18px; font-size:13.5px; line-height:1.55}
.ct-seen__l li{margin-bottom:4px}
.ct-seen__l li:last-child{margin-bottom:0}
/* Звезда постоянного в списке разговоров: мелкая и не спорит с именем. */
.ct-q__star{color:var(--ok); font-size:11px; vertical-align:2px}

/* ---------- кого звать: строка получателя ---------- */
/* Каждая строка — СВОЯ форма (правку и удаление шлёт именно она), поэтому
   раскладку держит flex на самой форме, а не таблица: вложить <form> внутрь
   строки таблицы можно, но переносить такую строку на телефоне нечем. */
.ct-nt{display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding:10px 0; border-bottom:1px solid var(--line-2)}
.ct-nt--new{border-bottom:0; padding-bottom:4px}
.ct-nt__n{flex:1 1 130px; min-width:0}
.ct-nt__c{flex:0 0 auto}
/* ⚠️ min-width:0 обязателен: у flex-элемента он по умолчанию auto, и поле
   не сжимается уже своего содержимого — строка вылезала бы за карточку.
   Та же ловушка уже записана для плиток лендинга и шапки панели. */
.ct-nt__a{flex:1 1 160px; min-width:0}
.ct-nt__k{flex:0 0 auto; margin:0; font-size:12.5px; white-space:nowrap}
@media(max-width:640px){
  /* На телефоне строка разворачивается в столбец: шесть полей в ряд
     не помещаются даже в три переноса, и читается это как каша. */
  .ct-nt{flex-direction:column; align-items:stretch; gap:7px; padding:12px 0}
  .ct-nt__n, .ct-nt__a, .ct-nt__c{flex:0 0 auto; width:100%}
}

/* ---------- проигрыватель записи ---------- */
.ct-play__bar{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:11px}
/* ⚠️ min-width:0 обязателен: у flex-элемента он по умолчанию auto, и ползунок
   не сжимается уже своей «естественной» ширины — панель уезжала за карточку.
   Та же ловушка в этом файле уже четвёртая. */
.ct-play__seek{flex:1 1 180px; min-width:0}
.ct-play__t{flex:0 0 auto; font-size:12.5px; color:var(--mut); font-variant-numeric:tabular-nums}
.ct-play__note{font-size:13px; color:var(--mut); padding:10px 0}
/* Коробка воспроизведения: страница внутри рисуется в iframe своей ширины,
   поэтому здесь только рамка и прокрутка, без попыток управлять содержимым. */
/* ⚠️ overflow:hidden, а не auto: кадр уменьшен трансформацией, и она НЕ меняет
   размеры бокса — браузер по-прежнему считает, что внутри лежит страница
   в натуральную величину, и рисует полосы прокрутки на пустоту. */
.ct-play__box{border:1px solid var(--line); border-radius:10px; overflow:hidden;
  background:#fff; min-height:220px}
/* ⚠️ Эти четыре правила rrweb ЖДЁТ от готового rrweb-player, которого мы
   не берём. Без них слои воспроизведения (кадр, холст следа курсора, сам
   курсор) встают в обычный поток друг под другом: холст в 664px отодвигал
   кадр вниз, и в рамке была видна ровно пустота под ним. Выглядело как
   «запись не загрузилась», хотя внутри всё было на месте. */
.ct-play__box .replayer-wrapper{position:relative}
.ct-play__box .replayer-wrapper > iframe,
.ct-play__box .replayer-wrapper > canvas{position:absolute; top:0; left:0}
.ct-play__box iframe{border:0; display:block; background:#fff}
/* Курсор посетителя. Картинку указателя даёт та же чужая таблица стилей,
   поэтому рисуем точку сами — видно, куда человек вёл руку. */
.ct-play__box .replayer-mouse{position:absolute; width:14px; height:14px; margin:-7px 0 0 -7px;
  border-radius:50%; background:rgba(34,160,107,.6); border:2px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,.35); z-index:3}
.ct-play__box .replayer-mouse.active{background:rgba(220,38,38,.75)}
@media(max-width:640px){
  /* На телефоне кнопки скоростей уходят под ползунок: в строку они
     не помещаются и ломают панель вбок. */
  .ct-play__seek{flex:1 1 100%; order:-1}
}

/* ---------- разбор записи ---------- */
/* Фразы перечислением, а не сплошной строкой: их две-три, и каждая —
   отдельный признак. Точка с запятой между ними читается как один вывод. */
.ct-rd{display:flex; flex-wrap:wrap; gap:6px; margin:0; font-size:12.5px; line-height:1.45}
/* Код визита не переносится: «PA-» и четыре знака на разных строках читаются
   как две разные ячейки. */
.ct-tbl td .ct-link{white-space:nowrap}
.ct-rd__i{background:var(--line-2); border:1px solid var(--line); border-radius:7px;
  padding:2px 8px; color:var(--ink-2); white-space:nowrap}

/* ---------- находка сводки ---------- */
/* Три уровня: что видно — сколько подтверждений — что делать. Тот же порядок,
   что и во всех разделах отчётов: цифра, чтение, действие. */
/* Находка суточной сводки — карточка (04.10.2026). Сетка: номер | что видно |
   насколько массово; ниже — «что сделать» на всю ширину. */
.ct-find{display:grid; grid-template-columns:28px minmax(0,1fr) 150px; gap:4px 14px; align-items:start;
  background:var(--ai-bg); border-radius:12px; padding:14px 16px; margin-bottom:12px}
.ct-find:last-child{margin-bottom:0}
.ct-find__k{width:28px; height:28px; border-radius:50%; background:var(--ai); color:var(--ai-on);
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700}
.ct-find__t{font-size:15px; font-weight:600; line-height:1.45; color:var(--ink); padding-top:3px}
.ct-find__s{display:flex; flex-direction:column; gap:6px; padding-top:3px}
.ct-find__v{font-size:12.5px; color:var(--mut); line-height:1.3; white-space:nowrap}
.ct-find__v b{font-size:20px; font-weight:700; color:var(--ai-ink); margin-right:2px}
.ct-find__bar{display:block; height:6px; border-radius:3px; background:var(--card); overflow:hidden}
.ct-find__bar i{display:block; height:100%; border-radius:3px; background:var(--ai)}
.ct-find__do{grid-column:2 / -1; margin-top:8px; background:var(--card); border-radius:8px;
  border-left:3px solid var(--ok); padding:10px 12px; font-size:14px; line-height:1.5; color:var(--ink)}
.ct-find__do span{display:block; font-size:11px; font-weight:600; letter-spacing:.5px; text-transform:uppercase;
  color:var(--ok-ink); margin-bottom:3px}
@media(max-width:640px){
  /* На телефоне массовость уходит под текст: третьей колонке места нет. */
  .ct-find{grid-template-columns:28px minmax(0,1fr)}
  .ct-find__s{grid-column:2; flex-direction:row; align-items:center; gap:10px}
  .ct-find__bar{flex:1 1 auto}
  .ct-find__do{grid-column:1 / -1}
}



/* Переключатель режима руководителя: «Руководство ⇄ Менеджер».
   ⚠️ Ссылки, а не кнопки: переход меняет меню и домашний экран, это
   навигация. Подчёркивание снимаем поимённо — глобального правила нет. */
.ct-mode{display:none; gap:2px; padding:3px; border-radius:9px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08)}
.ct-rail.ct-wide .ct-mode{display:flex}
.ct-mode a{flex:1 1 0; min-width:0; text-align:center; text-decoration:none; padding:6px 6px;
  border-radius:7px; font-size:12px; font-weight:600; color:var(--rail-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ct-mode a:hover{color:#fff}
.ct-mode a.is-on{background:var(--rail-on); color:#fff}
/* В листе «Ещё» на телефоне фон светлый — те же цвета, что у остального листа. */
.ct-sheet .ct-mode{display:flex; margin:0 0 10px; background:var(--line-2); border-color:var(--line)}
.ct-sheet .ct-mode a{color:var(--mut)}
.ct-sheet .ct-mode a.is-on{background:var(--ok-ink); color:#fff}

/* Отменённые и неявки в своём календаре — приглушены, но видны:
   спрятать их значило бы удивить человека пустым окном в расписании. */
.ct-tr--mut td{opacity:.55}

/* ================== Панель ассистента ==================
   По образцу панели MoySells: плавающая карточка справа, лента
   с прокруткой посередине, поле ввода закреплено снизу.

   ⚠️ Пространство имён `ct-aiq` новое НАМЕРЕННО. Прежние `.ct-ai*` (панель
   из макета, лежавшая мёртвым кодом) и `.ct-asst*` (отдельная страница)
   удалены целиком: сегодня одно совпадение имён уже схлопнуло карточку
   до 310px, и второй раз на те же грабли не надо.

   Цвет — зелёный, в тему (решение владельца 03.10.2026). Свои переменные
   `--aiq*`: общие `--ai*` красят ещё и «Разбор ИИ» в диалогах. */
.ct-aiq{display:none}
.aiq-open .ct-aiq{display:block; flex:0 0 400px; width:400px; position:sticky; top:0;
  height:100vh; padding:10px 10px 10px 0}
.ct-aiq__card{height:100%; display:flex; flex-direction:column; background:var(--card);
  border:1px solid var(--line); border-radius:18px; overflow:hidden;
  box-shadow:0 10px 40px rgba(0,0,0,.18)}

.ct-aiq__head{flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:13px 14px;
  border-bottom:1px solid var(--line)}
.ct-aiq__av{width:34px; height:34px; flex:0 0 34px; border-radius:10px; background:var(--aiq);
  color:var(--aiq-on); display:flex; align-items:center; justify-content:center}
.ct-aiq__av svg{width:18px; height:18px}
.ct-aiq__ttl{flex:1 1 0; min-width:0; display:flex; flex-direction:column; line-height:1.3}
.ct-aiq__ttl b{font-size:15px}
.ct-aiq__ttl small{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--mut)}
.ct-aiq__ttl small i{width:7px; height:7px; border-radius:50%; background:var(--aiq)}
/* ⚠️ Кнопки шапки размечены ссылками (работают и без скрипта) — значит
   подчёркивание снимаем поимённо, глобального правила в проекте нет. */
.ct-aiq__ib{flex:0 0 auto; width:32px; height:32px; border-radius:8px; color:var(--mut);
  display:flex; align-items:center; justify-content:center; text-decoration:none}
.ct-aiq__ib:hover,.ct-aiq__ib:focus-visible{background:var(--line-2); color:var(--ink)}
.ct-aiq__ib svg{width:17px; height:17px}

/* Лента. ⚠️ `min-height:0` обязателен: без него flex-ребёнок не сжимается
   уже своего содержимого, и поле ввода уезжает вниз за край карточки. */
.ct-aiq__scroll{flex:1 1 0; min-height:0; overflow-y:auto; padding:16px 14px}
.ct-aiq__feed{display:flex; flex-direction:column; gap:10px}

.ct-aiq__feed:has(.ct-aiq__u) .ct-aiq__empty{display:none}
.ct-aiq__empty{display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:18px 4px 4px}
.ct-aiq__big{width:52px; height:52px; border-radius:14px; background:var(--aiq-bg); color:var(--aiq);
  border:1px solid var(--aiq-sel); display:flex; align-items:center; justify-content:center; margin-bottom:6px}
.ct-aiq__big svg{width:24px; height:24px}
.ct-aiq__empty b{font-size:15.5px; letter-spacing:-.01em}
.ct-aiq__empty p{margin:0 0 8px; font-size:13px; color:var(--mut); line-height:1.5}
.ct-aiq__hint{display:block; width:100%; text-align:left; text-decoration:none; color:var(--ink);
  border:1px solid var(--line); border-radius:10px; padding:11px 13px; font-size:13.5px;
  line-height:1.4; background:var(--line-2); transition:background .15s,border-color .15s}
.ct-aiq__hint:hover,.ct-aiq__hint:focus-visible{background:var(--aiq-bg); border-color:var(--aiq)}

/* Вопрос — пузырь справа, как в любом чате; под ним, мелко, откуда спросили. */
.ct-aiq__u{align-self:flex-end; max-width:88%; background:var(--line-2); border:1px solid var(--line);
  border-radius:14px 14px 4px 14px; padding:10px 13px; font-size:14px; line-height:1.45;
  white-space:pre-wrap; overflow-wrap:anywhere}
.ct-aiq__ctx{display:block; margin-top:5px; font-size:11.5px; color:var(--mut);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; white-space:normal}
.ct-aiq__t{align-self:stretch}

/* Ответ — проза. Межстрочный задан явно: глобального line-height в панели нет,
   и без него многострочный текст схлопывается в 1.2. */
.ct-aiq__prose{font-size:14px; line-height:1.6; color:var(--ink); overflow-wrap:anywhere}
.ct-aiq__prose p{margin:0 0 9px}
.ct-aiq__prose p:last-child{margin-bottom:0}
.ct-aiq__prose b{font-weight:650}
.ct-aiq__prose h4{margin:12px 0 6px; font-size:14px}
.ct-aiq__prose ul,.ct-aiq__prose ol{margin:4px 0 10px; padding-left:20px}
.ct-aiq__prose li{margin:3px 0}
.ct-aiq__prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px;
  background:var(--line-2); border-radius:5px; padding:1px 5px}
.ct-aiq__tbl{overflow-x:auto; margin:6px 0 10px; border:1px solid var(--line); border-radius:9px}
.ct-aiq__tbl table{border-collapse:collapse; width:100%; font-size:12.5px}
.ct-aiq__tbl th,.ct-aiq__tbl td{padding:6px 9px; border-bottom:1px solid var(--line-2); text-align:left; white-space:nowrap}
.ct-aiq__tbl th{background:var(--line-2); font-weight:600}
.ct-aiq__tbl tr:last-child td{border-bottom:0}

/* «Думаю…». ⚠️ Пульсация — единственный признак, что вопрос ушёл: модель
   думает 10–20 секунд. При reduced-motion анимации нет, а сам блок есть. */
.ct-aiq__think{font-size:13.5px; color:var(--mut); display:flex; align-items:center; gap:8px}
.ct-aiq__think::before{content:''; width:8px; height:8px; border-radius:50%; background:var(--aiq);
  animation:ct-aiq-pulse 1.1s ease-in-out infinite}
@keyframes ct-aiq-pulse{0%,100%{opacity:1; transform:scale(1)}50%{opacity:.35; transform:scale(.7)}}
.ct-aiq__err{font-size:13.5px; line-height:1.5; background:var(--bad-bg); border-radius:10px; padding:10px 12px}

/* Поле ввода: многострочное, кнопка ВНУТРИ рамки, как в образце. */
.ct-aiq__foot{flex:0 0 auto; padding:10px 12px 12px; border-top:1px solid var(--line)}
.ct-aiq__composer{border:1px solid var(--line); border-radius:14px; background:var(--line-2);
  transition:border-color .15s}
.ct-aiq__composer:focus-within{border-color:var(--aiq)}
.ct-aiq__input{display:block; width:100%; border:0; background:transparent; resize:none;
  padding:11px 13px 4px; font:inherit; font-size:14px; line-height:1.45; color:var(--ink);
  max-height:160px; min-height:44px}
.ct-aiq__input:focus{outline:none}
.ct-aiq__bar{display:flex; align-items:center; gap:8px; padding:4px 6px 6px 13px}
.ct-aiq__bar span{flex:1 1 0; min-width:0; font-size:11px; color:var(--mut);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ct-aiq__send{flex:0 0 auto; width:34px; height:34px; border:0; border-radius:10px; cursor:pointer;
  background:var(--aiq); color:var(--aiq-on); display:flex; align-items:center; justify-content:center}
.ct-aiq__send svg{width:17px; height:17px}
.ct-aiq__send:disabled{opacity:.45; cursor:default}
.ct-aiq__note{margin-top:7px; font-size:11px; line-height:1.4; color:var(--mut)}

/* Лаунчер — когда панель свёрнута. */
.ct-aiq-launch{position:fixed; right:22px; bottom:22px; z-index:40; display:flex; align-items:center;
  gap:8px; padding:11px 17px 11px 14px; border-radius:999px; background:var(--aiq); color:var(--aiq-on);
  text-decoration:none; font-weight:600; font-size:14px; box-shadow:0 8px 26px rgba(0,0,0,.28)}
.ct-aiq-launch svg{width:18px; height:18px}
.aiq-open .ct-aiq-launch{display:none}

/* Кнопка «Спросить» над блоком. Приглушена: она сопровождает блок, а не спорит с ним. */
.ct-ask{display:inline-flex; align-items:center; gap:6px; text-decoration:none; flex:0 0 auto;
  border:1px solid var(--aiq-sel); border-radius:999px; padding:5px 12px 5px 10px;
  font-size:12.5px; font-weight:600; color:var(--aiq-ink); background:var(--card);
  transition:background .15s,border-color .15s}
.ct-ask svg{width:13px; height:13px}
.ct-ask:hover,.ct-ask:focus-visible{background:var(--aiq-bg); border-color:var(--aiq)}
.ct-card__h .ct-ask{margin-left:auto}

@media (prefers-reduced-motion:reduce){
  .ct-aiq__think::before{animation:none}
  .ct-aiq__hint,.ct-ask,.ct-aiq__composer{transition:none}
}

/* ⚠️ В САМЫЙ КОНЕЦ файла: мобильные блоки выше по файлу, и при равной
   специфичности побеждает последний. Ловушка в этом файле седьмая.
   Узкий экран — панель поверх содержимого справа, а не колонкой: колонка
   в 400px съела бы треть ширины у таблиц, ради которых экран и открывают. */
@media (max-width:1280px){
  .aiq-open .ct-aiq{position:fixed; right:0; top:0; bottom:0; z-index:60; width:420px;
    max-width:100vw; padding:8px}
}
/* Телефон — панель на весь экран; лаунчер поднят над нижней полосой вкладок. */
@media (max-width:820px){
  .aiq-open .ct-aiq{left:0; width:auto; padding:0}
  .ct-aiq__card{border-radius:0; border:0}
  .ct-aiq-launch{bottom:calc(var(--tabh, 64px) + 14px); right:14px}
  .ct-aiq-launch span{display:none}
  .ct-aiq-launch{padding:13px}
  .ct-aiq__input{font-size:16px}   /* меньше — iOS зумит страницу при фокусе */
}

/* =====================================================================
   «Диалоги» как WhatsApp Web (04.10.2026, просьба владельца; «важно на
   мобильном»). Свой набор токенов `--wx-*`: палитра мессенджера, а не
   панели, — экран должен узнаваться с первого взгляда. Все пары
   «текст на фоне» сверены на норму 4,5:1 (значки — 3:1).
   ⚠️ Стоит В КОНЦЕ файла: при равной специфичности побеждает последнее,
   а старые правила `.ct-wa`, `.ct-say`, `.ct-msg` выше никуда не делись —
   ими пользуется отправка без перезагрузки.
   ===================================================================== */
.wx{
  --wx-panel:#fff; --wx-head:#f0f2f5; --wx-line:#e9edef; --wx-hover:#f5f6f6; --wx-on:#f0f2f5;
  --wx-ink:#111b21; --wx-mut:#667781; --wx-wall:#efeae2; --wx-search:#f0f2f5; --wx-input:#fff;
  --wx-in:#fff; --wx-out:#d9fdd3; --wx-time:#667781; --wx-time-out:#5a6b63;
  --wx-chip:#f0f2f5; --wx-chip-on:#d9fdd3; --wx-chip-on-ink:#17754e;
  --wx-badge:#1a8456; --wx-badge-ink:#fff; --wx-send:#1a8456; --wx-send-ink:#fff;
  --wx-day:#fff; --wx-day-ink:#54656f; --wx-sys:#ffeecd; --wx-sys-ink:#54656f; --wx-label:#17754e;
  --wx-shadow:0 1px .5px rgba(11,20,26,.13);
  /* Узор «обоев» свой (пузырь, искра Citena, галочка, календарь), не взятый
     у WhatsApp: их рисунок — чужая собственность. Едва заметный. */
  --wx-doodle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180' fill='none' stroke='%23000' stroke-opacity='.06' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 34a14 14 0 0 1 28 0v14H32a14 14 0 0 1-14-14z'/%3E%3Cpath d='M122 16c.6 5 2.6 7 7.6 7.6-5 .6-7 2.6-7.6 7.6-.6-5-2.6-7-7.6-7.6 5-.6 7-2.6 7.6-7.6z'/%3E%3Ccircle cx='152' cy='104' r='6'/%3E%3Cpath d='M58 122l6 6 12-14'/%3E%3Cpath d='M92 76h22a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5h-12l-7 6v-6h-3a5 5 0 0 1-5-5V81a5 5 0 0 1 5-5z'/%3E%3Cpath d='M22 150c3-4 9-4 12 0s9 4 12 0'/%3E%3Crect x='126' y='146' width='18' height='14' rx='2'/%3E%3Cpath d='M126 151h18'/%3E%3C/svg%3E");
  display:grid; grid-template-columns:minmax(300px,32%) minmax(0,1fr);
  height:calc(100vh - var(--bar, 0px) - 152px); min-height:520px;
  border:1px solid var(--wx-line); border-radius:12px; overflow:hidden;
  background:var(--wx-panel); color:var(--wx-ink)}
[data-theme="dark"] .wx{
  --wx-panel:#111b21; --wx-head:#202c33; --wx-line:#222d34; --wx-hover:#202c33; --wx-on:#2a3942;
  --wx-ink:#e9edef; --wx-mut:#8696a0; --wx-wall:#0b141a; --wx-search:#202c33; --wx-input:#2a3942;
  --wx-in:#202c33; --wx-out:#005c4b; --wx-time:#8696a0; --wx-time-out:#b3d1ca;
  --wx-chip:#202c33; --wx-chip-on:#0a332c; --wx-chip-on-ink:#7ee2b0;
  --wx-badge:#7ee2b0; --wx-badge-ink:#05301f; --wx-send:#22a06b; --wx-send-ink:#fff;
  --wx-day:#182229; --wx-day-ink:#8696a0; --wx-sys:#182229; --wx-sys-ink:#ffd279; --wx-label:#7ee2b0;
  --wx-shadow:0 1px .5px rgba(0,0,0,.25);
  --wx-doodle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180' fill='none' stroke='%23fff' stroke-opacity='.045' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 34a14 14 0 0 1 28 0v14H32a14 14 0 0 1-14-14z'/%3E%3Cpath d='M122 16c.6 5 2.6 7 7.6 7.6-5 .6-7 2.6-7.6 7.6-.6-5-2.6-7-7.6-7.6 5-.6 7-2.6 7.6-7.6z'/%3E%3Ccircle cx='152' cy='104' r='6'/%3E%3Cpath d='M58 122l6 6 12-14'/%3E%3Cpath d='M92 76h22a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5h-12l-7 6v-6h-3a5 5 0 0 1-5-5V81a5 5 0 0 1 5-5z'/%3E%3Cpath d='M22 150c3-4 9-4 12 0s9 4 12 0'/%3E%3Crect x='126' y='146' width='18' height='14' rx='2'/%3E%3Cpath d='M126 151h18'/%3E%3C/svg%3E")}
.wx svg{flex:0 0 auto}

/* --- список --- */
.wx-l{display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--wx-panel);
  border-right:1px solid var(--wx-line)}
.wx-find{display:flex; align-items:center; gap:10px; margin:10px 12px 4px; padding:0 12px; height:38px;
  border-radius:8px; background:var(--wx-search); color:var(--wx-mut)}
.wx-find svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round}
.wx-find input{flex:1; min-width:0; border:0; outline:none; background:transparent; color:var(--wx-ink);
  font:inherit; font-size:14px}
.wx-find input::placeholder{color:var(--wx-mut)}
.wx-chips{display:flex; gap:6px; padding:8px 12px 10px; overflow-x:auto; scrollbar-width:none; flex:0 0 auto}
.wx-chips::-webkit-scrollbar{display:none}
.wx-chip{flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; border:0; border-radius:999px;
  padding:6px 12px; background:var(--wx-chip); color:var(--wx-mut); font:inherit; font-size:13px; font-weight:500;
  line-height:1.3; white-space:nowrap; text-decoration:none; cursor:pointer}
.wx-chip:hover{color:var(--wx-ink)}
.wx-chip b{font-weight:600; color:var(--wx-ink)}
.wx-chip.is-on,.wx-chip.is-on b{background:var(--wx-chip-on); color:var(--wx-chip-on-ink)}
.wx-list{flex:1 1 auto; min-height:0; overflow-y:auto; border-top:1px solid var(--wx-line)}
.wx-row{display:flex; align-items:center; gap:13px; padding:0 0 0 14px; color:inherit; text-decoration:none}
/* ⚠️ `display:flex` перебивает браузерное `[hidden]` — без этой строки поиск
   по списку ничего бы не прятал. Ловушка записана в CLAUDE.md дважды. */
.wx-row[hidden],.wx-empty[hidden]{display:none}
.wx-row:hover{background:var(--wx-hover)}
.wx-row.is-on{background:var(--wx-on)}
.wx-row__m{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; padding:12px 14px 12px 0;
  border-bottom:1px solid var(--wx-line)}
.wx-row__top,.wx-row__bot{display:flex; align-items:center; gap:6px; min-width:0}
.wx-row__n{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15.5px; font-weight:500}
.wx-row__time{margin-left:auto; flex:0 0 auto; font-size:12px; color:var(--wx-mut)}
.wx-row__time.is-wait{color:var(--wx-chip-on-ink); font-weight:600}
.wx-row__t{flex:1; min-width:0; display:flex; align-items:center; gap:3px; overflow:hidden; white-space:nowrap;
  text-overflow:ellipsis; font-size:13.5px; color:var(--wx-mut)}
/* Сколько ждёт — на месте счётчика непрочитанных. После порога — красное. */
.wx-row__wait{flex:0 0 auto; padding:2px 8px; border-radius:999px; background:var(--wx-badge);
  color:var(--wx-badge-ink); font-size:11.5px; font-weight:700; line-height:1.4; font-variant-numeric:tabular-nums}
.wx-row__wait.is-hot{background:var(--bad); color:#fff}
.wx-row__closed{flex:0 0 auto; font-size:11.5px; color:var(--wx-mut)}
.wx-star{flex:0 0 auto; color:var(--ok); font-size:11px}
.wx-tag{flex:0 0 auto; padding:1px 6px; border-radius:4px; background:var(--wx-chip); color:var(--wx-mut);
  font-size:10.5px; font-weight:600; line-height:1.5; white-space:nowrap}
.wx-tag--site,.wx-tag--ok{background:var(--wx-chip-on); color:var(--wx-chip-on-ink)}
.wx-tick{width:16px; height:11px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round;
  stroke-linejoin:round}
.wx-row__t .wx-tick{color:var(--wx-mut)}
.wx-empty{margin:0; padding:26px 16px; text-align:center; font-size:14px; color:var(--wx-mut)}
/* Аватар — кружок с инициалами. Шесть пар без фиолетового (его в панели нет). */
.wx-av{flex:0 0 46px; width:46px; height:46px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:16px; font-weight:600; letter-spacing:.02em}
.wx-av svg{width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round}
.wx-av--h{flex-basis:40px; width:40px; height:40px; font-size:15px}
.wx-av--0{background:#d7f0e3; color:#17754e} .wx-av--1{background:#d3eef0; color:#0e6470}
.wx-av--2{background:#dbe7fb; color:#1d4ed8} .wx-av--3{background:#fde9cf; color:#92400e}
.wx-av--4{background:#fbdde3; color:#a8325e} .wx-av--5{background:#e2e8ee; color:#3b4a58}
[data-theme="dark"] .wx-av--0{background:#1d3a2c; color:#7ee2b0} [data-theme="dark"] .wx-av--1{background:#16393e; color:#7dd3dc}
[data-theme="dark"] .wx-av--2{background:#1c2b4a; color:#93c5fd} [data-theme="dark"] .wx-av--3{background:#3a2a14; color:#fbbf24}
[data-theme="dark"] .wx-av--4{background:#3d1d27; color:#f9a8c0} [data-theme="dark"] .wx-av--5{background:#2a333c; color:#cbd5e1}

/* --- разговор --- */
.wx-r{display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--wx-wall)}
.wx-hello{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  padding:24px; background:var(--wx-head); color:var(--wx-mut); text-align:center}
.wx-hello svg{width:64px; height:64px; color:var(--wx-ink); opacity:.85}
.wx-hello p{margin:0; max-width:320px; font-size:14px; line-height:1.5}
.wx-h{display:flex; align-items:center; gap:12px; flex:0 0 auto; min-height:60px; padding:8px 12px 8px 16px;
  background:var(--wx-head); border-bottom:1px solid var(--wx-line)}
.wx-back{display:none; width:36px; height:36px; margin-left:-8px; border-radius:50%; align-items:center;
  justify-content:center; color:var(--wx-ink)}
.wx-back svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.wx-h__m{flex:1; min-width:0}
.wx-h__n{display:flex; align-items:center; gap:7px; min-width:0}
.wx-h__n b{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; font-weight:600}
.wx-h__s{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; color:var(--wx-mut);
  font-variant-numeric:tabular-nums}
.wx-h__a{display:flex; align-items:center; gap:2px; flex:0 0 auto}
.wx-ico{width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--wx-mut); text-decoration:none}
.wx-ico:hover{background:var(--wx-on); color:var(--wx-ink)}
.wx-ico svg,.wx-tab svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
/* «Быстрая запись» меняет экран — кнопка с подписью, в обоих состояниях заметная. */
.wx-tab{display:inline-flex; align-items:center; gap:7px; height:36px; margin-left:6px; padding:0 14px;
  border-radius:999px; background:var(--wx-chip-on); color:var(--wx-chip-on-ink); font-size:13.5px; font-weight:600;
  text-decoration:none; white-space:nowrap}
.wx-tab svg{width:18px; height:18px}
.wx-st{display:flex; align-items:center; gap:6px; flex:0 0 auto; padding:7px 16px; overflow-x:auto;
  scrollbar-width:none; background:var(--wx-head); border-bottom:1px solid var(--wx-line)}
.wx-st::-webkit-scrollbar{display:none}
.wx-st__k{flex:0 0 auto; margin-right:2px; font-size:12px; color:var(--wx-mut)}
.wx-st .wx-chip{padding:4px 11px; font-size:12.5px; background:var(--wx-panel)}
.wx-st .wx-chip.is-on{background:var(--wx-chip-on)}
.wx-pane{flex:1 1 auto; min-height:0; overflow-y:auto; padding:18px 20px; background:var(--card); color:var(--ink)}

/* --- лента --- */
.wx .ct-wa{flex:1 1 auto; min-height:0; max-height:none; overflow-y:auto; display:flex; flex-direction:column;
  gap:2px; padding:12px 7% 16px; background:var(--wx-wall) var(--wx-doodle) repeat; background-size:180px}
.wx-day{align-self:center; margin:10px 0 8px}
.wx-day span{display:inline-block; padding:5px 12px; border-radius:8px; background:var(--wx-day);
  color:var(--wx-day-ink); font-size:12.5px; box-shadow:var(--wx-shadow)}
.wx .ct-msg{position:relative; max-width:min(65%, 560px); margin:0; padding:6px 9px 8px; border-radius:8px;
  font-size:14.2px; line-height:1.42; color:var(--wx-ink); box-shadow:var(--wx-shadow); overflow-wrap:anywhere}
.wx .ct-msg--first{margin-top:8px}
.wx .ct-msg--in{align-self:flex-start; background:var(--wx-in)}
.wx .ct-msg--out{align-self:flex-end; background:var(--wx-out)}
.wx .ct-msg--in.ct-msg--first{border-top-left-radius:0}
.wx .ct-msg--out.ct-msg--first{border-top-right-radius:0}
.wx .ct-msg--first::before{content:''; position:absolute; top:0; width:8px; height:13px; background:inherit}
.wx .ct-msg--in.ct-msg--first::before{left:-8px; clip-path:polygon(100% 0, 0 0, 100% 100%)}
.wx .ct-msg--out.ct-msg--first::before{right:-8px; clip-path:polygon(0 0, 100% 0, 0 100%)}
/* Время — внутри пузыря справа внизу, обтекаемое текстом. */
.wx .ct-msg__t{float:right; display:inline-flex; align-items:center; gap:3px; position:relative; top:5px;
  margin:0 -2px 0 12px; font-size:11px; line-height:1; color:var(--wx-time)}
.wx .ct-msg--out .ct-msg__t{color:var(--wx-time-out)}
.wx .ct-msg__k{display:block; margin:0 0 2px; font-size:12.5px; font-weight:600; letter-spacing:0;
  text-transform:none; color:var(--wx-label)}
.wx .ct-msg__note{align-self:center; max-width:85%; margin:8px 0; padding:6px 12px; border:0; border-radius:8px;
  background:var(--wx-sys); color:var(--wx-sys-ink); font-size:12.5px; line-height:1.45; text-align:center;
  box-shadow:var(--wx-shadow)}

/* --- поле ввода --- */
.wx .ct-say{flex:0 0 auto; margin:0; padding:8px 14px 9px; border:0; border-radius:0; background:var(--wx-head)}
.wx-form{display:flex; align-items:flex-end; gap:8px; margin:0}
.wx-form textarea{flex:1; min-width:0; min-height:42px; max-height:140px; resize:none; border:0; outline:none;
  border-radius:10px; padding:10px 14px; background:var(--wx-input); color:var(--wx-ink); font:inherit;
  font-size:15px; line-height:1.4}
.wx-form textarea::placeholder{color:var(--wx-mut)}
.wx-send{flex:0 0 42px; width:42px; height:42px; border:0; border-radius:50%; display:flex; align-items:center;
  justify-content:center; background:var(--wx-send); color:var(--wx-send-ink); cursor:pointer}
.wx-send svg{width:20px; height:20px; fill:currentColor; margin-left:2px}
.wx-send:focus-visible,.wx-ico:focus-visible,.wx-tab:focus-visible,.wx-row:focus-visible,.wx-chip:focus-visible{
  outline:2px solid var(--ok); outline-offset:2px}
.wx .ct-say.is-busy .wx-send{opacity:.55; pointer-events:none}
.wx-foot__n{margin:6px 4px 0; font-size:11.5px; line-height:1.45; color:var(--wx-mut)}
.wx .ct-say__e{margin:6px 4px 0; font-size:12.5px; color:var(--bad)}
.wx-closed{margin:0 0 10px; padding:9px 12px; border-radius:8px; background:var(--wx-sys); color:var(--wx-sys-ink);
  font-size:13.5px; line-height:1.45}
.wx-out{display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin:0}
.wx-out .wx-foot__n{flex:1 1 220px; margin:0}

/* --- одно из двух: узкий экран --- */
@media(max-width:1000px){
  .wx{grid-template-columns:minmax(0,1fr)}
  .wx:not(.wx--one) .wx-r{display:none}
  .wx--one .wx-l{display:none}
  .wx-back{display:flex}
}
/* --- телефон: как в мессенджере --- */
@media(max-width:820px){
  /* Список и разговор — от края до края, без рамки карточки. */
  .wx{height:auto; min-height:0; margin:0 -14px; border:0; border-radius:0}
  .wx-list{overflow:visible}
  .wx-find input,.wx-form textarea{font-size:16px}   /* меньше — iOS приближает страницу */
  /* Разговор во весь экран: заголовок страницы, нижняя полоса вкладок
     и кнопка ассистента прячутся, шапка и поле ввода прилипают к краям.
     Назад — стрелкой в шапке, как в WhatsApp. */
  /* ⚠️ `position:sticky` не работает, если у предка `overflow:hidden`:
     прилипание считается к нему, а он не прокручивается. У `.ct-main`
     и у самой `.wx` он стоит ради широкого экрана — здесь снимается. */
  .ct-main:has(.wx),.wx{overflow:visible}
  .ct-main:has(.wx) > .ct-top p{display:none}   /* над списком — сразу чаты */
  .ct-main:has(.wx--one){padding:0}
  .ct-main:has(.wx--one) > .ct-top{display:none}
  .ct-main:has(.wx--one) .wx{margin:0}
  body:has(.wx--one) .ct-tabs,body:has(.wx--one) .ct-aiq-launch{display:none}
  .wx--one .wx-r{min-height:100dvh}
  .wx--one .wx-h{position:sticky; top:0; z-index:30}
  .wx .ct-wa{overflow:visible; padding:10px 12px 14px}
  .wx .ct-msg{max-width:84%}
  .wx--one .ct-say{position:sticky; bottom:0; z-index:30; padding-bottom:calc(9px + env(safe-area-inset-bottom, 0px))}
  .wx-pane{padding:14px 14px 28px}
  .wx-tab{width:38px; height:38px; margin-left:2px; padding:0; justify-content:center}
  .wx-tab span{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
  .wx-ico{width:36px; height:36px}
  .wx-h{gap:10px; padding-right:6px}
}

/* Полоска перехода без перезагрузки — появляется, только если ответ
   задержался дольше 150 мс (pick.js). */
.ct-navbar{position:fixed; top:0; left:0; right:0; height:2px; z-index:200; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--ok) 40%, var(--ok) 60%, transparent);
  background-size:40% 100%; background-repeat:no-repeat; opacity:0; transition:opacity .15s}
.ct-navbar.is-on{opacity:1; animation:ctNav 1s linear infinite}
@keyframes ctNav{from{background-position:-40% 0} to{background-position:140% 0}}
@media(prefers-reduced-motion:reduce){.ct-navbar.is-on{animation:none; background:var(--ok)}}
.ct-top h1:focus{outline:none}

/* ---------- демо: подсказка «три панели — три роли» ----------
   Появляется при первом заходе у переключателя ролей и указывает на него.
   Карточка, а не окно с затемнением: работать можно сразу. */
.ct-demobar__q{flex:0 0 auto; width:24px; height:24px; display:inline-flex; align-items:center;
  justify-content:center; border-radius:50%; background:rgba(255,255,255,.1); color:#c8d3cd;
  text-decoration:none; font-weight:700; font-size:12.5px; line-height:1}
.ct-demobar__q:hover{background:rgba(255,255,255,.2); color:#fff}
.ct-tour{position:absolute; z-index:65; top:calc(var(--bar, 38px) + 12px); right:16px;
  width:min(400px, calc(100vw - 24px)); box-sizing:border-box; background:var(--card); color:var(--ink);
  border:1px solid var(--line); border-radius:14px; padding:18px 18px 16px;
  box-shadow:0 18px 50px rgba(16,24,40,.18), 0 2px 6px rgba(16,24,40,.08);
  animation:ctTourIn .5s cubic-bezier(.2,.7,.2,1) .6s both}
.ct-tour[hidden]{display:none}
/* Открыли кнопкой «?» — без задержки: её ждут сразу после нажатия. */
.ct-tour.is-now{animation-delay:0s}
.ct-tour.is-out{opacity:0; transform:translateY(-6px); transition:opacity .2s, transform .2s}
@keyframes ctTourIn{from{opacity:0; transform:translateY(-12px) scale(.98)}}
/* Носик на переключатель. Его место считает скрипт (`--ax`); без скрипта
   носика нет: указывать мимо хуже, чем не указывать. */
.ct-tour::before{content:''; display:none; position:absolute; top:-7px; left:calc(var(--ax, 50%) - 6px);
  width:12px; height:12px; background:var(--card); border-left:1px solid var(--line);
  border-top:1px solid var(--line); transform:rotate(45deg)}
.ct-tour.is-placed::before{display:block}
.ct-tour h2{margin:0 30px 6px 0; font-size:17px; line-height:1.3; font-weight:700}
.ct-tour:focus{outline:none}
.ct-tour__lead{margin:0 0 12px; color:var(--ink-2); font-size:13.5px; line-height:1.5}
.ct-tour__l{list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:6px}
.ct-tour__l a{display:block; padding:10px 12px; border:1px solid var(--line); border-radius:10px;
  color:inherit; text-decoration:none; transition:border-color .15s, background .15s}
.ct-tour__l a:hover,.ct-tour__l a[aria-current]{border-color:var(--ok); background:var(--ok-bg)}
.ct-tour__r{display:flex; align-items:baseline; gap:8px; font-size:14px}
.ct-tour__r i{font-style:normal; font-size:11.5px; font-weight:600; color:var(--ok-ink)}
.ct-tour__d{display:block; margin-top:3px; color:var(--mut); font-size:12.5px; line-height:1.45}
.ct-tour__x{position:absolute; top:10px; right:10px; width:30px; height:30px; display:flex;
  align-items:center; justify-content:center; border-radius:8px; color:var(--mut)}
.ct-tour__x:hover{background:var(--line-2); color:var(--ink)}
.ct-tour__x svg{width:16px; height:16px}
.ct-tour__ok{display:flex; width:100%; box-sizing:border-box; justify-content:center; text-decoration:none;
  padding:10px 14px; font-weight:600}
/* Пока подсказка открыта, переключатель ролей пульсирует: глаз находит,
   на что она указывает, ещё до того, как дочитал. */
.ct-tour-on .ct-demobar__s,.ct-tour-on .ct-demobar__m summary{animation:ctTourPulse 1.8s ease-out infinite}
@keyframes ctTourPulse{
  0%{box-shadow:0 0 0 2px #22a06b, 0 0 0 0 rgba(34,160,107,.55)}
  100%{box-shadow:0 0 0 2px #22a06b, 0 0 0 10px rgba(34,160,107,0)}}
/* На телефоне «?» нет: в строке полосы он вставал посреди, между «ДЕМО»
   и ролью. Там подсказка открывается пунктом в списке ролей. */
@media(max-width:640px){.ct-tour{right:12px; left:12px; width:auto; top:54px} .ct-demobar__q{display:none}}
@media(prefers-reduced-motion:reduce){
  .ct-tour{animation:none} .ct-tour.is-out{transition:none}
  .ct-tour-on .ct-demobar__s,.ct-tour-on .ct-demobar__m summary{animation:none; box-shadow:0 0 0 2px #22a06b}}