/* Кабинет Mentor внутри первого экрана.
 *
 * Это копия настоящего app.salesmentor.ru, а не «оформление в духе». Значения
 * перенесены из исходников продукта: Web/src/components/CompanyDashboard.tsx
 * (оболочка, меню, таблица), Web/src/analysis.tsx (разбор звонка),
 * Web/src/lib/score.ts (пороги 75 и 50 и цвета оценок).
 *
 * Поэтому размеры здесь заданы в пикселях и НЕ берутся из лестницы кегля сайта:
 * у продукта своя шкала (10-14px, плотный интерфейс), и если пересчитать её в
 * ступени лендинга, макет перестанет совпадать с тем, что человек увидит внутри.
 * Это единственное место на сайте с такой вольностью, и она осознанная -
 * см. DESIGN.md, раздел о макете кабинета.
 *
 * Все данные внутри выдуманы: настоящие звонки содержат персональные данные
 * клиентов, выносить их на сайт запрещено.
 */

.ck {
  --ck-bg: #f8f7f2;
  --ck-card: #ffffff;
  --ck-line: #e6e4d7;
  --ck-line-soft: #f2f1e8;
  --ck-line-mid: #e2e0d3;
  --ck-ink: #1f1f1d;
  /* Три ступени серого. 14.09.2026 вся лестница притемнена: подписи и телефоны
     давали 3,26:1 на белом при норме 4,5:1 для мелкого текста, и на телефоне
     кабинет читался как серая рябь. Теперь каждая ступень ≥ 4,5:1 на самом
     светлом фоне кабинета, порядок светлот сохранён. */
  --ck-ink-2: #63615a;  /* 5,78:1 - второстепенный текст */
  --ck-ink-3: #6f6d64;  /* 4,84:1 - подписи, телефоны, тайм-коды */
  /* Не текст, а значок: норма для графики 3:1 */
  --ck-ink-4: #8e8d82;
  --ck-dark: #1e1e1e;
  --ck-paper: #fdfcf9;

  /* Скругления кабинета - своя лестница из трёх ступеней, а не лестница сайта:
     у продукта другая шкала, и подогнать мокап под сайт значит перестать быть
     похожим на кабинет (это правило из DESIGN.md). 14.09.2026 здесь жили
     десять разных чисел - 4, 6, 8, 9, 12, 14, 16, 20, 22 и 24 - на три роли,
     и макет читался собранным из разных наборов. Значения сверены со снимком
     настоящего кабинета `1-spisok.png`. */
  --ck-r-sm: 8px;    /* метки, оценки, мелкие элементы внутри карточек */
  --ck-r: 12px;      /* карточки, поля, кнопки, строки списков */
  --ck-r-lg: 16px;   /* крупные панели: показатели, рейтинг, разбор */

  display: flex;
  background: var(--ck-bg);
  font-family: var(--font-body);
  color: var(--ck-ink);
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

.ck * { box-sizing: border-box; }
/* :where() обнуляет вес селектора. Без него «.ck button» весит больше любого
   одиночного класса и перебивал заливку и цвет текста у всех кнопок кабинета
   ниже: чёрная «Загрузить», светлые кнопки боковой колонки, «Выйти», стрелки
   пагинации - все рисовались прозрачной надписью. */
.ck :where(button) { font: inherit; color: inherit; background: none; border: 0; }

/* ---------- Левая колонка ---------- */

.ck-side {
  width: 256px;
  flex: none;
  background: var(--ck-card);
  border-right: 1px solid var(--ck-line);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ck-brand {
  padding: 24px;
  border-bottom: 1px solid var(--ck-line-soft);
}

.ck-brand b {
  display: block;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.ck-brand span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ck-ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ck-nav {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ck-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--ck-r);
  font-size: 14px;
  font-weight: 500;
  color: var(--ck-ink-2);
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease;
}

.ck-nav-item[aria-current='page'] { background: var(--ck-dark); color: #f5f4ef; }

.ck-sep {
  margin: 8px 0;
  border-top: 1px solid var(--ck-line-soft);
}

.ck-side-foot {
  padding: 16px;
  border-top: 1px solid var(--ck-line-soft);
  background: #fdfdfc;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ck-balance {
  border: 1px solid var(--ck-line-mid);
  border-radius: var(--ck-r-lg);
  padding: 12px;
  background: var(--ck-card);
}

.ck-balance-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ck-ink-3);
}

.ck-balance b {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 700;
}

.ck-soft-btn,
.ck-exit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px;
  border-radius: var(--ck-r);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.16s ease;
}

.ck-soft-btn {
  background: var(--ck-card);
  border: 1px solid var(--ck-line-mid);
  color: var(--ck-ink-2);
}


.ck-exit-btn {
  background: #fff5f5;
  border: 1px solid #ffd8d8;
  color: #c92a2a;
}


.ck-ico { flex: none; width: 16px; height: 16px; }
.ck-ico svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ck-ico-sm { width: 14px; height: 14px; }
.ck-ico-xs { width: 12px; height: 12px; }

/* ---------- Правая часть ---------- */

.ck-main {
  flex: 1;
  min-width: 0;
  padding: 32px;
}

.ck-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
}

.ck-h1 {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
}

.ck-sub {
  margin-top: 2px;
  font-size: 14px;
  color: var(--ck-ink-2);
}

/* ---------- Таблица звонков ---------- */

.ck-table-wrap { overflow-x: auto; }

.ck-table {
  width: 100%;
  min-width: 650px;
  border-collapse: collapse;
  text-align: left;
}

.ck-table thead tr {
  background: var(--ck-paper);
  border-bottom: 1px solid var(--ck-line-mid);
}

.ck-table th {
  padding: 12px 18px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ck-ink-3);
  white-space: nowrap;
}

.ck-table th.ck-mid,
.ck-table td.ck-mid { text-align: center; }

.ck-table tbody tr {
  border-bottom: 1px solid var(--ck-line-soft);
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.16s ease;
}

.ck-table td { padding: 14px 18px; }

/* Первая колонка - выбор звонка, как в кабинете (там ею отправляют звонки
   в общий отчёт). Центрирование из CompanyDashboard.tsx; ширина там 80px,
   здесь 56px - у нас окно уже, а лишние 24px отнимали их у колонки «Клиент». */
.ck-check { width: 56px; }


.ck-check input {
  width: 14px;
  height: 14px;
  accent-color: #1e1e1e;
  cursor: pointer;
}

/* Дата в одну строку: перенос делал строки вдвое выше, чем в кабинете. */
.ck-date { font-weight: 500; white-space: nowrap; }
.ck-dur { font-weight: 500; color: var(--ck-ink-2); white-space: nowrap; }
.ck-mgr { color: var(--ck-ink-2); }

.ck-client {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
}

.ck-client-name { display: block; font-weight: 500; }
.ck-client-phone { display: block; margin-top: 2px; font-size: 12px; color: var(--ck-ink-3); }
.ck-client svg { color: #8e8d82; margin-top: 2px; }

/* Клиент не определился: в кабинете ячейка остаётся бледной, а не пустой.
   Прочерк - тоже текст, поэтому держим его на общей ступени подписей: при
   прежнем #c4c2b6 он давал 1,79:1 и с телефона просто исчезал. */
.ck-empty { color: var(--ck-ink-3); }

/* Пример не загрузился: честное сообщение вместо чужой таблицы. */
.ck-fail {
  padding: 48px 32px;
  text-align: center;
  font-size: 14px;
  color: var(--ck-ink-2);
}

/* Плашки итога, оценки и статуса - те же цвета, что в кабинете (score.ts). */
.ck-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 112px;
  padding: 2px 8px;
  border-radius: var(--ck-r-sm);
  border: 1px solid;
  font-size: 12px;
  font-weight: 500;
}

.ck-tag.lost { background: #fff1f2; color: #be123c; border-color: #ffe4e6; }
.ck-tag.saved { background: #ecfdf5; color: #047857; border-color: #d1fae5; }
/* Своя запись - не «сохранен» и не «потерян»: итог по ней не выставляется. */
.ck-tag.own { background: #fffbeb; color: #92400e; border-color: #fde68a; }

.ck-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  padding: 2px 4px;
  border-radius: var(--ck-r-sm);
  border: 1px solid;
  font-size: 12px;
  font-weight: 700;
}

.ck-score.good { background: #ecfdf5; color: #047857; border-color: #d1fae5; }
.ck-score.mid { background: #fef3c7; color: #78350f; border-color: #fcd34d; }
.ck-score.bad { background: #fff1f2; color: #be123c; border-color: #ffe4e6; }

.ck-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid #a7f3d0;
  background: #ecfdf5;
  color: #047857;
  font-size: 12px;
  font-weight: 500;
}

.ck-mine td { background: #fffbeb; }
.ck-mine-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: var(--ck-r-sm);
  background: #fef3c7;
  border: 1px solid #fcd34d;
  font-size: 12px;
  font-weight: 700;
  color: #92400e;
  vertical-align: middle;
}

.ck-pager {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--ck-line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  color: var(--ck-ink-3);
}

.ck-pager-btns { display: flex; gap: 6px; }

.ck-pager-btn {
  padding: 6px 12px;
  border: 1px solid var(--ck-line-mid);
  border-radius: var(--ck-r-sm);
  font-size: 12px;
  font-weight: 500;
  color: var(--ck-ink);
  opacity: 0.4;
}

/* ---------- Экран разбора ---------- */

.ck-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ck-ink-2);
  cursor: pointer;
}


.ck-card {
  background: var(--ck-card);
  border: 1px solid var(--ck-line-mid);
  border-radius: var(--ck-r-lg);
  padding: 24px;
}

.ck-card + .ck-card { margin-top: 24px; }

.ck-a-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.ck-tags { display: flex; gap: 8px; flex-wrap: wrap; }

.ck-tag-sm {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--ck-r-sm);
  border: 1px solid;
  font-size: 12px;
  font-weight: 500;
}

.ck-tag-sm.ok { background: #ecfdf5; color: #047857; border-color: #d1fae5; }

.ck-a-title {
  margin: 12px 0 0;
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.ck-a-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--ck-ink-2);
}

.ck-a-meta span { display: inline-flex; align-items: center; gap: 4px; }
.ck-a-meta svg { color: var(--ck-ink-4); }

.ck-a-score {
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid #eeebe0;
  border-radius: var(--ck-r-lg);
  background: #fcfbf9;
}

.ck-a-score-lbl {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ck-ink-3);
}

.ck-a-score b {
  font-family: var(--font-num);
  font-size: 24px;
  font-weight: 800;
}

.ck-a-score b.good { color: #047857; }
.ck-a-score b.mid { color: #b45309; }
.ck-a-score b.bad { color: #be123c; }

.ck-a-medal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--ck-r);
  border: 1px solid #a7f3d0;
  background: rgba(236, 253, 245, 0.5);
  color: #059669;
}

/* Вкладки разбора */
.ck-tabs {
  display: flex;
  gap: 8px;
  margin: 24px 0;
  padding: 8px;
  background: var(--ck-card);
  border: 1px solid var(--ck-line-mid);
  border-radius: var(--ck-r-lg);
}

.ck-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border-radius: var(--ck-r);
  font-size: 12px;
  font-weight: 700;
  color: var(--ck-ink-2);
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease;
}

.ck-tab[aria-selected='true'] { background: var(--ck-dark); color: #fbfbf9; }

.ck-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1000px) {
  .ck-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

.ck-h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
}

.ck-h3 svg { color: #d97706; }

.ck-note { font-size: 14px; line-height: 1.6; color: #55534c; }

/* Реплики диалога */
/* Лента реплик со своей прокруткой. Высота привязана к окну, а не к числу
   реплик: иначе длинный разговор уводил страницу на три экрана вниз, а вместе
   с ней разъезжался и наклон кабинета за курсором. */
.ck-lines {
  max-height: clamp(320px, 44vh, 560px);
  overflow-y: auto;
  /* Дочитал ленту до конца - колесо дальше крутит страницу, а не упирается */
  padding-right: 8px;
  scrollbar-width: thin;
}

/* Точную высоту ленты - «до низа Рисков» - ставит app.js замером: чистым CSS
   это не выразить, потому что грид берёт высоту от содержимого, а содержимому
   нужна высота от грида. Значение выше остаётся запасным на случай, если JS
   не отработал: без него лента растянула бы страницу на три экрана. */
.ck-card-fill { display: flex; flex-direction: column; min-height: 0; }
.ck-card-fill .ck-lines { min-height: 260px; }

.ck-lines:focus-visible { outline: 2px solid var(--ck-dark); outline-offset: 4px; }

.ck-line { padding: 16px 0; border-top: 1px solid var(--ck-line-soft); }
.ck-line:first-of-type { border-top: 0; padding-top: 0; }

.ck-line-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.ck-line-who {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
}

.ck-line-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--ck-r-sm);
  border: 1px solid var(--ck-line-mid);
  background: #faf9f5;
  font-size: 12px;
  font-weight: 500;
  color: var(--ck-ink-2);
}

.ck-line-time { font-size: 12px; color: var(--ck-ink-3); }

.ck-line p {
  margin: 0;
  padding-left: 14px;
  font-size: 13px;
  line-height: 1.6;
  font-style: italic;
  color: #33312c;
}

/* Факты и риски */
.ck-fact + .ck-fact { margin-top: 16px; }

.ck-fact-lbl {
  display: block;
  margin-bottom: 2px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ck-ink-3);
}

.ck-fact-val { font-size: 14px; line-height: 1.55; color: var(--ck-ink); }

.ck-risk {
  padding: 12px;
  border: 1px solid #ffe4e6;
  border-radius: var(--ck-r);
  background: #fff8f8;
  font-size: 14px;
  line-height: 1.55;
}

.ck-risk + .ck-risk { margin-top: 12px; }

.ck-quote {
  margin: 8px 0 0;
  font-size: 13px;
  font-style: italic;
  color: #9f1239;
}

/* Этапы */
.ck-stage {
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-r-lg);
  background: rgba(250, 249, 245, 0.3);
  overflow: hidden;
}

.ck-stage + .ck-stage { margin-top: 12px; }

.ck-stage > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  background: var(--ck-card);
  cursor: pointer;
  list-style: none;
  transition: background-color 0.16s ease;
}

.ck-stage > summary::-webkit-details-marker { display: none; }

.ck-stage-name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
}

/* Шеврон рисуем повёрнутыми границами: в Geologica нет знака «▾». */
.ck-chev {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--ck-ink-3);
  border-bottom: 1.5px solid var(--ck-ink-3);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}

.ck-stage[open] .ck-chev { transform: translateY(2px) rotate(-135deg); }

.ck-pct {
  flex: none;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid;
  font-size: 12px;
  font-weight: 800;
}

.ck-pct.good { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.ck-pct.mid { background: #fef3c7; color: #78350f; border-color: #fcd34d; }
.ck-pct.bad { background: #fff1f2; color: #be123c; border-color: #fecdd3; }

.ck-stage-body { padding: 16px; border-top: 1px solid var(--ck-line); }

.ck-crit {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid #f0eee4;
  border-radius: var(--ck-r);
  background: var(--ck-paper);
  font-size: 13px;
  line-height: 1.5;
}

.ck-crit + .ck-crit { margin-top: 10px; }

.ck-crit-mark {
  flex: none;
  padding: 2px 8px;
  border-radius: var(--ck-r-sm);
  border: 1px solid;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.ck-crit-mark.yes { background: rgba(236, 253, 245, 0.6); color: #047857; border-color: #a7f3d0; }
.ck-crit-mark.no { background: rgba(255, 241, 242, 0.6); color: #be123c; border-color: #fecdd3; }

.ck-fix {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #fde68a;
  border-radius: var(--ck-r);
  background: #fffbeb;
  font-size: 13px;
  line-height: 1.55;
  color: #78350f;
}

.ck-fix b {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #b45309;
}

/* Возражения */
.ck-obj {
  padding: 16px;
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-r-lg);
  background: var(--ck-card);
}

.ck-obj + .ck-obj { margin-top: 12px; }

.ck-obj-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.ck-obj-fear { font-size: 14px; font-weight: 700; line-height: 1.45; }

.ck-obj-lbl {
  display: block;
  margin: 12px 0 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ck-ink-3);
}

.ck-obj-say {
  padding: 12px;
  border: 1px solid #f0eee4;
  border-radius: var(--ck-r);
  background: var(--ck-paper);
  font-size: 13px;
  font-style: italic;
  line-height: 1.55;
}

.ck-obj-say.answer { border-color: rgba(253, 230, 138, 0.6); background: rgba(255, 251, 235, 0.6); }

/* Рекомендации: цитаты из диалога, разбор для менеджера, пример фразы */
.ck-rec {
  padding: 16px;
  border: 1px solid #f0eee4;
  border-radius: var(--ck-r-lg);
  background: var(--ck-paper);
}

.ck-rec + .ck-rec { margin-top: 14px; }
.ck-rec-text { margin: 0; font-size: 14px; line-height: 1.65; }
.ck-fold + .ck-rec-text { margin-top: 8px; }

.ck-fold summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  color: #b45309;
  cursor: pointer;
  list-style: none;
}

.ck-fold summary::-webkit-details-marker { display: none; }

/* Подпись переключается из атрибутов: два состояния одной кнопки без JS. */
.ck-fold summary span::after { content: attr(data-ck-show); }
.ck-fold[open] summary span::after { content: attr(data-ck-hide); }
.ck-fold-chev { transition: transform 0.18s ease; }
.ck-fold[open] .ck-fold-chev { transform: rotate(180deg); }

.ck-fold-sep { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(243, 241, 232, 0.9); }
.ck-fold-body { margin-top: 8px; }

.ck-ev { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 6px; font-size: 13px; line-height: 1.6; }
.ck-ev:last-child { margin-bottom: 0; }

.ck-ev-no {
  flex: none;
  margin-top: 1px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 600;
  color: #b45309;
  text-decoration: underline;
  cursor: pointer;
}

.ck-ev span { padding-left: 8px; border-left: 2px solid rgba(217, 119, 6, 0.6); font-style: italic; color: #4a4943; }

.ck-rec-example {
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(253, 230, 138, 0.5);
  border-radius: var(--ck-r);
  background: rgba(255, 251, 235, 0.55);
  font-size: 13px;
  font-style: italic;
  line-height: 1.65;
  color: var(--ck-ink-2);
}

/* Реплика, к которой перешли по «#12» */
.ck-line-hit { background: #fef3c7; transition: background-color 0.4s ease; }

/* Связанные звонки */
.ck-linked {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px;
  border: 1px solid #f0eee4;
  border-radius: var(--ck-r-lg);
  background: var(--ck-paper);
  font-size: 12px;
  cursor: pointer;
}

.ck-linked + .ck-linked { margin-top: 10px; }
.ck-linked b { font-weight: 600; }
.ck-linked span { color: var(--ck-ink-3); }

/* ---------- Аналитика ----------
   Порядок блоков и все размеры сняты с AnalyticsTab.tsx, LostClientsPanel.tsx и
   DeptInsights.tsx: сводный отчёт, потерянные клиенты, три показателя, воронка с
   рейтингом, четыре блока отдела, подпись с кнопкой обновления. */

.ck-h3-plain { margin: 0 0 18px; font-size: 13px; font-weight: 700; }
.ck-main > .ck-card,
.ck-an-grid,
.ck-di-grid { margin-bottom: 20px; }

/* Сводный ИИ-отчёт: шапка раздела с фильтрами */
.ck-report {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
}

.ck-report-left { display: flex; align-items: center; gap: 14px; }

.ck-report-ico {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #fde68a;
  border-radius: var(--ck-r);
  background: #fffbeb;
  color: #d97706;
}

.ck-report-h { margin: 0; font-size: 15px; font-weight: 800; }
.ck-report-sub { margin: 3px 0 0; font-size: 12px; color: var(--ck-ink-2); }
.ck-report-right { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

.ck-pick-field { display: flex; align-items: center; gap: 7px; }

.ck-pick-field > span:first-child {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ck-ink-3);
}

.ck-pick-wrap { position: relative; display: inline-flex; align-items: center; }

.ck-pick-wrap select {
  appearance: none;
  padding: 7px 30px 7px 12px;
  border: 1px solid var(--ck-line-mid);
  border-radius: var(--ck-r);
  background: var(--ck-paper);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--ck-ink);
  cursor: pointer;
}

.ck-pick-chev { position: absolute; right: 10px; pointer-events: none; color: var(--ck-ink-2); }

/* Кнопки этого вида в боковой колонке тянутся на всю ширину; здесь она стоит в
   ряду с выпадающими списками, поэтому ширину берёт по содержимому. */
.ck-report-pdf { flex: none; width: auto; padding: 8px 13px; background: var(--ck-paper); }

/* Потерянные клиенты: самое действенное на странице, поэтому идёт первым */
.ck-winback {
  margin-bottom: 20px;
  padding: 24px;
  border: 2px solid #fde68a;
  border-radius: var(--ck-r-lg);
  background: linear-gradient(135deg, #fffbeb 0%, var(--ck-card) 62%);
}

.ck-winback-h {
  margin: 4px 0 0;
  font-family: var(--font-num);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.ck-winback-h em { font-style: normal; color: #047857; }
.ck-winback .ck-note { margin: 8px 0 0; }

.ck-black-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  padding: 9px 16px;
  border: 0;
  border-radius: var(--ck-r);
  background: var(--ck-dark);
  color: #f5f4ef;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.ck-black-btn.ck-flat { margin-top: 0; cursor: default; }

/* Три показателя */
.ck-kpis {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-bottom: 20px;
}

.ck-kpi {
  padding: 20px;
  border: 1px solid var(--ck-line-mid);
  border-radius: var(--ck-r-lg);
  background: var(--ck-card);
}

.ck-kpi-lbl {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ck-ink-3);
}

.ck-kpi b {
  font-family: var(--font-num);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Воронка и рейтинг: две трети на одну треть, как в кабинете */
.ck-an-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; }

.ck-funnel-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 28px;
  align-items: center;
}

.ck-donut-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-right: 24px;
  border-right: 1px solid var(--ck-line-soft);
}

.ck-donut { position: relative; width: 144px; height: 144px; }
.ck-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ck-donut circle { fill: none; stroke-width: 10; }
.ck-donut-bg { stroke: #ffe4e6; }
.ck-donut-arc { stroke: #10b981; stroke-linecap: round; }

.ck-donut-mid {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ck-donut-mid b {
  font-family: var(--font-num);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.ck-donut-mid span {
  margin-top: 2px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ck-ink-2);
}

.ck-legend { width: 100%; margin: 20px 0 0; display: flex; flex-direction: column; gap: 9px; font-size: 12px; }
.ck-legend > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ck-legend dt { display: flex; align-items: center; gap: 7px; color: var(--ck-ink-2); }
.ck-legend dd { margin: 0; font-weight: 700; }
.ck-legend i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ck-legend i.good { background: #10b981; }
.ck-legend i.bad { background: #fb7185; }
.ck-legend i.none { background: #cbcabb; }

.ck-funnel { display: flex; flex-direction: column; gap: 16px; }
.ck-funnel-row { display: flex; flex-direction: column; gap: 7px; }

.ck-funnel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
}

.ck-funnel-bar { height: 8px; border-radius: var(--radius-pill); background: #f0eee4; overflow: hidden; }
.ck-funnel-bar i { display: block; height: 100%; border-radius: inherit; }
.ck-funnel-bar i.good { background: #10b981; }
.ck-funnel-bar i.mid { background: #f59e0b; }
.ck-funnel-bar i.bad { background: #f43f5e; }

/* Динамика конверсии по месяцам */
.ck-months { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--ck-line-soft); }
.ck-months h4 { margin: 0 0 14px; }
.ck-months-row { display: flex; align-items: flex-end; gap: 12px; height: 128px; overflow-x: auto; }
.ck-month { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 56px; height: 100%; flex: none; }
.ck-month b { margin-bottom: 5px; font-family: var(--font-num); font-size: 11px; font-weight: 800; }

.ck-month-bar {
  display: flex;
  align-items: flex-end;
  width: 100%;
  max-width: 52px;
  flex: 1;
  background: #f0eee4;
  border-radius: var(--ck-r-sm) var(--ck-r-sm) 0 0;
  overflow: hidden;
}

.ck-month-bar i { width: 100%; background: #10b981; border-radius: var(--ck-r-sm) var(--ck-r-sm) 0 0; }
.ck-month small { margin-top: 6px; font-size: 12px; color: var(--ck-ink-2); }

/* Рейтинг менеджеров */
.ck-mgrs { display: flex; flex-direction: column; gap: 12px; }

.ck-mgr-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--ck-line-mid);
  border-radius: var(--ck-r-lg);
  background: var(--ck-card);
}

.ck-place {
  flex: none;
  padding: 5px 9px;
  border: 1px solid #fde68a;
  border-radius: var(--ck-r-sm);
  background: #fef3c7;
  color: #92400e;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ck-mgr-who { flex: 1; min-width: 0; }
.ck-mgr-who b { display: block; font-size: 13px; font-weight: 800; }
.ck-mgr-who span { display: block; margin-top: 2px; font-size: 11px; color: var(--ck-ink-3); }

.ck-saved {
  flex: none;
  padding: 7px 12px;
  border: 1px solid #a7f3d0;
  border-radius: var(--ck-r);
  background: #ecfdf5;
  color: #065f46;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
  text-align: right;
}

/* Возражения, ошибки, практики и рекомендации отдела */
.ck-di-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.ck-di-box {
  padding: 20px;
  border: 1px solid var(--ck-line-mid);
  border-radius: var(--ck-r-lg);
  background: var(--ck-card);
}

.ck-di-head h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 13px; font-weight: 800; }
.ck-di-head h3 i { font-style: normal; font-size: 12px; font-weight: 600; color: var(--ck-ink-3); }
.ck-di-box.amber .ck-di-head svg { color: #d97706; }
.ck-di-box.rose .ck-di-head svg { color: #e11d48; }
.ck-di-box.emerald .ck-di-head svg { color: #059669; }

.ck-di-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Без своей прокрутки (видео владельца 11.09.2026): список под курсором
     перехватывал колесо, и страница вставала. Блок показывает все строки. */
}

.ck-di-row {
  padding: 11px 13px;
  border: 1px solid var(--ck-line-mid);
  border-radius: var(--ck-r);
  background: var(--ck-paper);
}

.ck-di-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ck-di-name { font-size: 13px; font-weight: 700; line-height: 1.4; }
.ck-di-share { flex: none; font-size: 12px; font-weight: 700; }

.ck-di-meta {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 3px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ck-ink-3);
}

.ck-di-gain { color: #be123c; }
.ck-di-act { margin: 6px 0 0; font-size: 11px; line-height: 1.55; color: var(--ck-ink-3); }
.ck-di-empty { margin: 0; padding: 28px 0; text-align: center; font-size: 13px; color: var(--ck-ink-3); }

/* Подпись под аналитикой */
.ck-an-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--ck-line-soft);
  font-size: 12px;
  color: var(--ck-ink-2);
}

.ck-an-foot > span:first-child { display: inline-flex; align-items: center; gap: 7px; }

/* Экран «Потерянные клиенты» */
.ck-lost-list { padding: 0; }
.ck-lost-row { padding: 20px 22px; border-bottom: 1px solid var(--ck-line-soft); }
.ck-lost-row:last-child { border-bottom: 0; }
.ck-lost-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ck-lost-top > div { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; min-width: 0; }
.ck-lost-top b { font-size: 13px; font-weight: 700; }
.ck-lost-tel { font-size: 12px; color: var(--ck-ink-3); }
.ck-lost-sum { flex: none; font-family: var(--font-num); font-size: 14px; font-weight: 800; }
.ck-lost-part { margin-top: 12px; }
.ck-lost-part p { margin: 3px 0 0; font-size: 13px; line-height: 1.6; }

.ck-lost-foot {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--ck-ink-3);
}

.ck-lost-foot .ck-soft-btn { width: auto; padding: 8px 13px; background: var(--ck-paper); }

.ck-tag.good { background: #ecfdf5; color: #047857; border-color: #d1fae5; }
.ck-tag.mid { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.ck-tag.none { background: var(--ck-bg); color: var(--ck-ink-2); border-color: var(--ck-line-mid); }

@media (max-width: 1180px) {
  .ck-an-grid,
  .ck-di-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .ck-funnel-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .ck-donut-col { padding-right: 0; padding-bottom: 22px; border-right: 0; border-bottom: 1px solid var(--ck-line-soft); }
}

/* ---------- Телефон ---------- */

@media (max-width: 860px) {
  .ck { flex-direction: column; }

  /* Видео владельца 15.09.2026. Два блока аналитики на телефоне съедали экран,
     не давая взамен ничего, ради чего стоило листать:
     - «Сводный ИИ-отчёт» - это фильтры по сотруднику и периоду плюс экспорт PDF.
       Отчёт по каждому сотруднику с телефона никто не читает, а места он занимал
       больше всех. Прячем стилем, а не рендером: <select data-ck-mgr> остаётся
       в разметке, поэтому обработчик выбора менеджера работает как раньше и
       ничего не ломается при повороте телефона.
     - «Рейтинг менеджеров по результату» - по той же причине.
     На компьютере оба остаются. */
  .ck-report,
  .ck-mgrs-card { display: none; }

  /* Три показателя вставали друг под друга и занимали полэкрана ради не самой
     важной информации. Владелец: «сделать не сверху вниз, а слева направо».
     Метка и цифра мельче - иначе «Конверсия в сделку» не влезает в треть. */
  .ck-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .ck-kpi { padding: 12px 10px; }

  .ck-kpi .ck-kpi-lbl {
    margin-bottom: 4px;
    font-size: 10px;
    letter-spacing: 0.04em;
  }

  .ck-kpi b { font-size: 22px; }

  .ck-side {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--ck-line);
  }

  .ck-nav { flex-direction: row; overflow-x: auto; }
  .ck-nav-item { width: auto; white-space: nowrap; }
  .ck-sep { display: none; }
  .ck-side-foot { display: none; }
  .ck-main { padding: 18px 16px; }
  /* Три вкладки разбора влезают в строку, если разделить ширину поровну.
     С переносом они занимали два ряда и 132 пикселя. */
  .ck-tabs { flex-wrap: nowrap; }

  .ck-tab {
    flex: 1 1 0;
    min-width: 0;
    gap: 0;
    padding: 8px 6px;
    font-size: 11px;
    line-height: 1.25;
    text-align: center;
  }

  /* Значки вкладок съедали 24 пикселя ширины, и «Транскрибация» не влезала
     в свою треть строки. Слово важнее значка. */
  .ck-tab .ck-ico { display: none; }

  /* Шапка разбора: заголовок, пять строк сведений и коробка с оценкой.
     На телефоне всё это ужимается, но ничего не убирается - в разборе
     дата и длительность как раз нужны. */
  .ck-main > .ck-card { padding: 18px; }
  .ck-a-head { gap: 14px; }
  .ck-a-title { margin-top: 10px; font-size: 19px; }
  .ck-a-meta { gap: 6px 14px; margin-top: 8px; }
  .ck-a-score { width: 100%; padding: 12px 14px; gap: 12px; }

  /* Шапка кабинета на телефоне ужимается: заголовок «Звонки» и подпись
     стояли с отступом в 32 пикселя, рассчитанным на широкое окно. */
  .ck-brand { padding: 16px 20px; }
  .ck-head { margin-bottom: 16px; }
  .ck-h1 { font-size: 20px; }
  .ck-sub { font-size: 13px; }

  /* ---------- Список звонков на телефоне ----------
     Восемь колонок в 390 пикселей не помещаются: «Клиент» и «Статус»
     уезжали за правый край, а таблица тянулась вбок. Здесь строка становится
     карточкой, и из неё убрано всё, что человеку, который просто смотрит
     пример, ничего не говорит: галочка выбора, дата создания, длительность и
     повторяющийся у всех статус «Готово». Остаётся то, ради чего сюда
     смотрят - клиент, оценка ИИ, менеджер, итог - и подпись «Открыть»,
     чтобы было видно: по звонку можно нажать. */
  .ck-table-wrap { overflow-x: visible; }
  /* min-width в 650 пикселей держал таблицу шире экрана - карточки уезжали
     вправо вместе с оценкой и кнопкой. */
  .ck-table { min-width: 0; }
  .ck-table thead { display: none; }
  .ck-table,
  .ck-table tbody,
  .ck-table tr,
  .ck-table td { display: block; }

  .ck-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "metka  ocenka"
      "klient ocenka"
      "mgr    otkryt"
      "itog   otkryt";
    align-items: center;
    gap: 4px 12px;
    margin-bottom: 10px;
    padding: 14px 16px;
    border: 1px solid var(--ck-line);
    border-radius: var(--ck-r);
    background: var(--ck-card);
  }

  /* Больше трёх карточек экран телефона не держит, а пример понятен и на трёх.
     Свой звонок посетителя встаёт первой строкой, поэтому он всегда виден. */
  .ck-table tbody tr:nth-child(n + 4) { display: none; }

  .ck-table td { padding: 0; border: 0; }

  .ck-table td.ck-check,
  .ck-table td.ck-dur,
  .ck-table td:nth-child(8) { display: none; }

  /* Дата не нужна, а метка «Ваш звонок» на строке посетителя - нужна:
     ячейка остаётся только ради неё. */
  .ck-table td.ck-date:not(:has(.ck-mine-tag)) { display: none; }
  .ck-table td.ck-date { grid-area: metka; font-size: 0; }
  .ck-table td.ck-date .ck-mine-tag { margin-left: 0; font-size: 12px; }

  .ck-table td:nth-child(4) { grid-area: itog; justify-self: start; }
  .ck-table td:nth-child(5) { grid-area: ocenka; justify-self: end; }
  .ck-table td:nth-child(6) { grid-area: mgr; color: var(--ck-ink-2); }
  .ck-table td:nth-child(7) { grid-area: klient; }

  .ck-table tbody tr::after {
    content: "Открыть";
    grid-area: otkryt;
    justify-self: end;
    padding: 7px 14px;
    border: 1px solid var(--ck-line-mid);
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
  }

  /* Подсветка своей строки жила на ячейках; ячейки стали блоками внутри
     карточки, поэтому цвет переезжает на саму карточку. */
  .ck-mine td { background: none; }
  .ck-table tbody tr.ck-mine { background: #fffbeb; border-color: #fde68a; }

  .ck-score { width: auto; padding: 3px 8px; font-size: 12px; }
  .ck-tag { min-width: 0; }

  /* «Показано звонков: 3 из 3» и стрелки листания на телефоне не работают
     и только удлиняют блок. */
  .ck-pager { display: none; }

  /* ---------- Створки: разбор звонка и аналитика на телефоне ----------
     «Итоги разговора», «Расшифровка», «Факты о клиенте», «Риски» подряд -
     это 3,4 экрана прокрутки, а «Аналитика» с возражениями, ошибками и
     практиками - 5,8. Здесь эти блоки свёрнуты в заголовки и открываются
     по нажатию. Открытым остаётся только первый блок разбора - «Итоги
     разговора»: с него человек и начинает читать.

     Состояние держит один класс ck-perekl - «не как по умолчанию»: у
     свёрнутого блока он означает «открыт», у «Итогов» - «закрыт». Так и
     первый блок можно свернуть, и ничего не нужно расставлять скриптом
     при каждой перерисовке. Переключает app.js. */
  :is(.ck-grid .ck-card, .ck-an-grid > .ck-card, .ck-di-grid > .ck-di-box) {
    padding: 18px;
  }

  .ck-grid .ck-card + .ck-card { margin-top: 12px; }

  :is(.ck-grid .ck-card > .ck-h3,
      .ck-an-grid > .ck-card > .ck-h3-plain,
      .ck-di-grid > .ck-di-box > .ck-di-head) {
    position: relative;
    padding-right: 46px;
    margin-bottom: 0;
    min-height: 34px;
    display: flex;
    align-items: center;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
  }

  /* У «Популярных возражений» и соседей заголовок лежит во вложенном <h3>
     с отступом снизу 14 px. Пока шапка была блочной, отступ схлопывался;
     с display:flex он остался и опускал шапку на 14 px, а текст переставал
     стоять по центру кнопки-стрелки (найдено замером 15.09.2026). Отступ
     между шапкой и содержимым даёт сама шапка, когда блок открыт. */
  .ck-di-grid > .ck-di-box > .ck-di-head h3 { margin-bottom: 0; }

  /* Вместо плюса - стрелка вниз в круглой кнопке (видео владельца 15.09.2026).
     Плюс человек не читает как «разверни»: «плюс не всегда понятно... лучше
     какую-то стрелочку вниз, чтобы это выглядело как будто то, что можно
     развернуть». Подложка с рамкой нужна, чтобы значок читался кнопкой, а не
     украшением. Нажимается по-прежнему весь заголовок, поэтому цель нажатия
     заведомо больше 44 px - кружок только показывает, куда жать. */
  :is(.ck-grid .ck-card > .ck-h3,
      .ck-an-grid > .ck-card > .ck-h3-plain,
      .ck-di-grid > .ck-di-box > .ck-di-head)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 34px;
    height: 34px;
    transform: translateY(-50%);
    border: 1px solid var(--ck-line-mid);
    border-radius: 50%;
    background: var(--ck-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6d64' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 17px 17px no-repeat;
    transition: transform 0.18s ease;
  }

  /* свёрнуто. Заголовки у трёх видов блоков разные (ck-h3, ck-h3-plain,
     ck-di-head) - это разметка продукта, её не трогаем, просто перечисляем. */
  .ck-grid .ck-card > :not(.ck-h3),
  .ck-an-grid > .ck-card > :not(.ck-h3-plain),
  .ck-di-grid > .ck-di-box > :not(.ck-di-head) { display: none; }

  /* развёрнуто нажатием */
  .ck-grid .ck-card.ck-perekl > :not(.ck-h3),
  .ck-an-grid > .ck-card.ck-perekl > :not(.ck-h3-plain),
  .ck-di-grid > .ck-di-box.ck-perekl > :not(.ck-di-head) { display: revert; }

  .ck-grid .ck-card.ck-perekl > .ck-h3,
  .ck-an-grid > .ck-card.ck-perekl > .ck-h3-plain,
  .ck-di-grid > .ck-di-box.ck-perekl > .ck-di-head { margin-bottom: 14px; }

  /* Открыто - стрелка смотрит вверх. Разворот вместо смены знака: человек
     видит то же самое движение, каким блок и раскрылся. */
  .ck-grid .ck-card.ck-perekl > .ck-h3::after,
  .ck-an-grid > .ck-card.ck-perekl > .ck-h3-plain::after,
  .ck-di-grid > .ck-di-box.ck-perekl > .ck-di-head::after { transform: translateY(-50%) rotate(180deg); }

  /* «Итоги разговора» открыты сразу - и закрываются тем же нажатием */
  .ck-grid .ck-col:first-child > .ck-card:first-child > :not(.ck-h3) { display: revert; }
  .ck-grid .ck-col:first-child > .ck-card:first-child > .ck-h3 { margin-bottom: 14px; }
  .ck-grid .ck-col:first-child > .ck-card:first-child > .ck-h3::after { transform: translateY(-50%) rotate(180deg); }

  .ck-grid .ck-col:first-child > .ck-card:first-child.ck-perekl > :not(.ck-h3) { display: none; }
  .ck-grid .ck-col:first-child > .ck-card:first-child.ck-perekl > .ck-h3 { margin-bottom: 0; }
  .ck-grid .ck-col:first-child > .ck-card:first-child.ck-perekl > .ck-h3::after { transform: translateY(-50%); }

  /* Лента реплик внутри раскрытой карточки: на телефоне ей хватает трети
     экрана, дальше человек листает саму ленту. */
  .ck-lines { max-height: 40vh; }
  .ck-card-fill .ck-lines { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ck * { transition: none !important; }
}


/* Разбор своего звонка встаёт первой строкой таблицы. Раньше он появлялся
   мгновенно - человек не успевал понять, что именно изменилось. Теперь строка
   проявляется за 250 мс и один раз подсвечивается золотом за 600 мс. */
@keyframes ckMineIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@keyframes ckMineGlow {
  0% { box-shadow: inset 0 0 0 100px rgba(245, 183, 84, 0); }
  35% { box-shadow: inset 0 0 0 100px rgba(245, 183, 84, 0.35); }
  100% { box-shadow: inset 0 0 0 100px rgba(245, 183, 84, 0); }
}

.ck-table tbody tr.ck-mine.ck-mine-in {
  animation: ckMineIn 250ms var(--ease-out), ckMineGlow 600ms var(--ease-out) 250ms;
}

/* Вкладки разбора меняют содержимое подменой, и до 14.09.2026 оно просто
   перещёлкивалось. Проявление в 120 мс без единого сдвига: двигать тут нечего,
   человек уже смотрит в это место. */
@keyframes ckTabIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ck-main.ck-tab-swap .ck-tabs ~ * {
  animation: ckTabIn 120ms var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .ck-table tbody tr.ck-mine.ck-mine-in,
  .ck-main.ck-tab-swap .ck-tabs ~ * { animation: none; }
}

/* Отклик на нажатие. Наведения на телефоне нет вовсе, и до 14.09.2026 палец
   бил в кабинет без единого ответа: ни строка, ни кнопка, ни вкладка не
   показывали, что нажатие принято. */
.ck-nav-item:active,
.ck-soft-btn:active,
.ck-exit-btn:active,
.ck-tab:active,
.ck-black-btn:active,
.ck-table tbody tr:active { background: #f0efe4; }

.ck-exit-btn:active { background: #ffeef0; }
.ck-nav-item[aria-current='page']:active,
.ck-tab[aria-selected='true']:active,
.ck-black-btn:active { background: #343430; }

/* Наведение - только там, где есть настоящий курсор. На телефоне браузер
   держит состояние «под курсором» до следующего касания, и строка таблицы
   или пункт меню после нажатия так и оставались подсвеченными. */
@media (hover: hover) and (pointer: fine) {
  .ck-nav-item:hover { background: #f3f2e8; color: var(--ck-ink); }
  .ck-nav-item[aria-current='page']:hover { background: var(--ck-dark); color: #f5f4ef; }
  .ck-soft-btn:hover { background: #f3f2e8; }
  .ck-exit-btn:hover { background: #ffeef0; }
  .ck-table tbody tr:hover { background: #f6f5ec; }
  .ck-table tbody tr:hover .ck-date { color: #a16207; }
  .ck-back:hover { color: var(--ck-ink); }
  .ck-tab:hover { background: #f5f4ef; color: var(--ck-ink); }
  .ck-tab[aria-selected='true']:hover { background: var(--ck-dark); color: #fbfbf9; }
  .ck-stage > summary:hover { background: #faf9f5; }
  .ck-fold summary:hover { color: #92400e; }
  .ck-ev-no:hover { color: #78350f; }
  .ck-linked:hover { background: #f6f5ec; }
  .ck-black-btn:hover { background: #343430; }
}