/* ============================================================
   theme.css — цветовые роли двух тем, шрифты, оболочка и «Сейчас»
   ------------------------------------------------------------
   Компонент не знает hex — только роль. Тёмная тема — не инверсия
   светлой: те же роли, подобранные под тёмный фон. Бирюза и коралл
   в ней светлее, чтобы держать контраст; поверхности отличаются
   тоном, а не рамкой. Каждая пара «текст на поверхности» проверена
   тестом tests/test_theme_contrast.py.

   Подключается после core.css и побеждает его по порядку.
   ============================================================ */

:root {
  --c-bg: #EEF0F3;
  --c-surface: #FFFFFF;
  --c-surface-2: #E9ECF1;
  --c-line: #E5E8ED;
  --c-ink: #15181D;
  --c-ink-2: #2B3039;
  --c-ink-3: #454C57;       /* подписи и подсказки: 8.7:1 на белом */
  --c-ink-4: #565E6B;       /* самое тихое, что ещё легко читать: 6.5:1 */
  --c-teal: #176B78;        /* рабочий цвет: кнопки, ссылки, активный пункт */
  --c-teal-tint: #E3EEF0;
  --c-teal-ink: #FFFFFF;
  --c-coral: #B53E27;       /* только внимание: «ждёт», время ожидания */
  --c-coral-tint: #FBE7E2;
  --c-coral-ink: #FFFFFF;   /* текст на коралловой кнопке */
  --c-green: #1F7A4D;       /* только «всё хорошо» */
  --c-green-tint: #E1F4EA;
  --c-nav-bg: #FFFFFF;
  --c-nav-active: #E3EEF0;
  --c-line-2: #D8DCE3;      /* линия заметнее: рамки полей, разделители групп */
  --c-warn: #8A5A00;        /* предупреждение: не ошибка, но требует взгляда */
  --c-warn-tint: #FBF1DA;
  --f-text: "Golos Text", "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --c-bg: #121417;
  --c-surface: #1B1E24;
  --c-surface-2: #242830;
  --c-line: #2A2F38;
  --c-ink: #EDEFF3;
  --c-ink-2: #D0D4DC;
  --c-ink-3: #B4BAC6;
  --c-ink-4: #A0A7B4;
  --c-teal: #4FB3C1;
  --c-teal-tint: #173239;
  --c-teal-ink: #0F1C20;
  --c-coral: #F0705A;
  --c-coral-tint: #3A231F;
  --c-coral-ink: #1B1E24;
  --c-green: #5CC48F;
  --c-green-tint: #173224;
  --c-nav-bg: #16191E;
  --c-nav-active: #173239;
  --c-line-2: #343A45;
  --c-warn: #E3B341;
  --c-warn-tint: #3A2E12;
  color-scheme: dark;
}


/* ------------------------------------------------------------
   Старые токены → роли
   ------------------------------------------------------------
   core.css и style.legacy.css собраны на своих переменных. Здесь
   каждая из них становится ролью — и весь старый CSS следует за
   темой без правки правил. В legacy токены стоят с !important,
   поэтому и здесь так же: иначе их не перебить.
   ------------------------------------------------------------ */

:root {
  /* фон и поверхности */
  --bg: var(--c-bg) !important;
  --bg-1: var(--c-nav-bg) !important;
  --bg-2: var(--c-surface) !important;
  --bg-3: var(--c-surface-2) !important;
  --bg-4: var(--c-surface-2) !important;
  --surface: var(--c-surface) !important;
  --surface-2: var(--c-surface-2) !important;
  --lg-bg: var(--c-bg) !important;
  --lg-bg-2: var(--c-nav-bg) !important;
  --lg-glass: color-mix(in srgb, var(--c-ink) 3%, transparent) !important;
  --lg-glass-strong: color-mix(in srgb, var(--c-ink) 5%, transparent) !important;
  --lg-glass-stroke: var(--c-line) !important;
  --lg-glass-stroke-hot: var(--c-line-2) !important;
  /* текст */
  --fg: var(--c-ink) !important;
  --text: var(--c-ink) !important;
  --lg-text: var(--c-ink) !important;
  --text-2: var(--c-ink-2) !important;
  --text-dim: var(--c-ink-2) !important;
  --lg-text-dim: var(--c-ink-2) !important;
  --muted: var(--c-ink-3) !important;
  --lg-muted: var(--c-ink-3) !important;
  --muted-2: var(--c-ink-4) !important;
  --text-faint: var(--c-ink-4) !important;
  /* линии */
  --line: var(--c-line) !important;
  --border: var(--c-line) !important;
  --line-2: var(--c-line-2) !important;
  --line-strong: var(--c-line-2) !important;
  /* рабочий цвет */
  --accent: var(--c-teal) !important;
  --accent-hot: var(--c-teal) !important;
  --accent-dim: var(--c-teal) !important;
  --primary-hot: var(--c-teal) !important;
  --lg-accent: var(--c-teal) !important;
  --lg-accent-2: var(--c-teal) !important;
  --lg-cyan: var(--c-teal) !important;
  --info: var(--c-teal) !important;
  --accent-soft: var(--c-teal-tint) !important;
  --accent-line: color-mix(in srgb, var(--c-teal) 40%, transparent) !important;
  --accent-fg: var(--c-teal-ink) !important;
  /* смыслы */
  --ok: var(--c-green) !important;
  --success: var(--c-green) !important;
  --lg-success: var(--c-green) !important;
  --ok-soft: var(--c-green-tint) !important;
  --warn: var(--c-warn) !important;
  --lg-warn: var(--c-warn) !important;
  --warn-soft: var(--c-warn-tint) !important;
  --danger: var(--c-coral) !important;
  --error: var(--c-coral) !important;
  --lg-error: var(--c-coral) !important;
  --danger-soft: var(--c-coral-tint) !important;
  /* шрифты */
  --font: var(--f-text) !important;
  --mono: var(--f-mono) !important;
}

/* Шрифт всей панели. В legacy он стоит с !important — только так. */
html, body { font-family: var(--f-text) !important; }

/* Атрибут hidden сильнее любого display из классов: иначе «скрытая» кнопка
   с display: inline-flex остаётся на экране. */
[hidden] { display: none !important; }

/* ------------------------------------------------------------
   Оболочка: фон страницы, меню, шапка
   ------------------------------------------------------------
   Меню и шапка в core.css собраны на старых переменных (--surface,
   --accent, --text-dim …). Вместо правки каждого правила старые
   переменные переназначаются на новые роли внутри .topbar —
   переменные наследуются, и всё меню перекрашивается целиком.
   Тела остальных разделов остаются на старых цветах до перевода.
   ------------------------------------------------------------ */

/* Фон в legacy стоит с !important — иначе роль не применится. */
html, body, .app { background: var(--c-bg) !important; }

.topbar {
  /* Меню — на своём фоне и со своей подложкой активного пункта. */
  --surface: var(--c-nav-bg) !important;
  --accent-soft: var(--c-nav-active) !important;
}
/* Название — ссылка на «Сейчас», выглядит как прежде */
.topbar a.brand { color: var(--c-ink); text-decoration: none; border-radius: 10px; }
.topbar a.brand:hover { color: var(--c-ink); }
.topbar a.brand:hover .brand-logo { filter: brightness(1.08); }
.topbar a.brand:active { transform: scale(.98); }

/* Активный пункт — подложка, без полоски слева */
.topbar .nav a.active { box-shadow: none; font-weight: 600; }

/* Переключатель темы: 40×40, иконка луны в светлой и солнца в тёмной */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: var(--c-surface-2);
  color: var(--c-ink-2);
  cursor: pointer;
  padding: 0;
}
.theme-toggle:hover { color: var(--c-ink); }
.theme-toggle:active { transform: scale(.96); }
.theme-toggle .ico-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .ico-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .ico-moon { display: none; }

@media (max-width: 768px) {
  /* Переключатель и «Выйти» — в одну строку с названием, иначе шапка
     на телефоне вырастает вдвое и съедает первый экран. */
  .topbar .user { flex-direction: row; align-items: center; gap: 10px; }
  /* На короткой странице сетка делила лишнюю высоту между шапкой и
     содержимым, и шапка вырастала до 300 px. Лишнее — содержимому. */
  .app { grid-template-rows: auto 1fr; }
  .topbar { grid-row: auto; }
  /* Шторка меню на телефоне просторная — пункты крупнее, чем в колонке. */
  .topbar .nav a { font-size: 15px; min-height: 48px; }
  .topbar .nav-group { font-size: 12px; }
}
@media (max-width: 480px) {
  /* На узком экране название переносилось на две строки — остаётся логотип. */
  .topbar .brand-name { display: none; }
  .topbar .brand { padding-right: 0; }
  .topbar .user { margin-left: auto; }
  .topbar .mobile-menu-btn { margin-left: 0; }
}

/* ------------------------------------------------------------
   Страница «Сейчас»
   ------------------------------------------------------------
   Телефон — основной размер: одна колонка, карточки во всю ширину,
   цели касания 44 px. От 1024 px — две колонки: очередь слева,
   день и служба справа.
   ------------------------------------------------------------ */

[data-page="/dashboard"] .content { padding: 8px 12px 24px; max-width: none; }

.now {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--c-ink);
  font-family: var(--f-text);
}
.now-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.now-mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.now-hot { color: var(--c-coral); font-weight: 600; }
.now-ok { color: var(--c-green); }
.now-bad { color: var(--c-coral); }
.now-warn { color: var(--c-warn); font-weight: 600; }

.now-head { display: flex; align-items: baseline; justify-content: space-between; padding: 4px 8px 0; }
.now-title { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.now-date { font-size: 13px; color: var(--c-ink-3); }

.now-card { background: var(--c-surface); border-radius: 14px; }

/* Ждут ответа */
.now-hero { display: flex; flex-direction: column; gap: 12px; padding: 18px 16px 16px; }
.now-hero-top { display: flex; align-items: flex-end; gap: 14px; }
.now-hero-text { display: flex; flex-direction: column; gap: 3px; padding-bottom: 4px; }
.now-big {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: 64px;
  font-weight: 600;
  line-height: .9;
  letter-spacing: -.03em;
}
.now-big.is-hot { color: var(--c-coral); }
.now-hero-label { font-size: 18px; font-weight: 600; line-height: 1.15; }
.now-hero-sub { font-size: 13px; color: var(--c-ink-3); }
.now-actions { display: flex; gap: 8px; }
.now-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 18px;
  border-radius: 10px;
  background: var(--c-teal);
  color: var(--c-teal-ink);
  font-size: 15px;
  font-weight: 600;
  flex-grow: 1;
  transition: filter .12s ease, transform .1s ease;
}
.now-btn:hover { color: var(--c-teal-ink); filter: brightness(1.08); }
.now-btn:active { transform: scale(.98); }
.now-btn-2 { background: var(--c-surface-2); color: var(--c-ink); font-weight: 500; flex-grow: 0; }
.now-btn-2:hover { color: var(--c-ink); }
.now-done { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--c-ink-2); }

/* Очередь */
.now-queue { display: flex; flex-direction: column; overflow: hidden; }
.now-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  min-height: 64px;
  border-bottom: 1px solid var(--c-line);
  color: inherit;
  transition: background-color .12s ease;
}
.now-row:last-child { border-bottom: 0; }
.now-row:hover, .now-row:active { background: var(--c-surface-2); color: inherit; }
.now-av {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--c-teal-tint);
  color: var(--c-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.now-row.is-waiting .now-av { background: var(--c-coral-tint); color: var(--c-coral); }
.now-row-body { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0; }
.now-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.now-who { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-when { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--c-ink-3); white-space: nowrap; }
.now-row.is-waiting .now-when { color: var(--c-coral); font-weight: 600; }
.now-preview { font-size: 14px; color: var(--c-ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-row.is-waiting .now-preview { color: var(--c-ink-2); }

/* За день */
.now-sec { display: flex; align-items: baseline; justify-content: space-between; padding: 8px 8px 0; }
.now-sec-title { font-size: 13px; font-weight: 600; color: var(--c-ink-3); }
.now-sec a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  margin: -12px -8px -12px 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-teal);
}
.now-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.now-tile { display: flex; flex-direction: column; gap: 4px; padding: 12px; background: var(--c-surface); border-radius: 12px; }
.now-tile-num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 600; line-height: 1; }
.now-tile-cap { font-size: 12px; color: var(--c-ink-3); line-height: 1.2; }
.now-up { color: var(--c-green); font-weight: 600; }
.now-down { color: var(--c-coral); font-weight: 600; }

/* Служба */
.now-service { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.now-line { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.now-ico { flex-shrink: 0; color: var(--c-ink-3); }
.now-line-main { flex-grow: 1; min-width: 0; }
.now-line-meta { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--c-ink-3); white-space: nowrap; }

@media (min-width: 1024px) {
  [data-page="/dashboard"] .content { padding: 24px 28px; }
  .now { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px 20px; max-width: 1120px; }
  .now-head { grid-column: 1 / -1; padding: 0 4px; }
  .now-col { gap: 12px; }
  .now-big { font-size: 72px; }
  .now-row { padding: 14px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .now-btn, .now-row, .theme-toggle, .seg-nav-i { transition: none; }
  .now-btn:active, .theme-toggle:active { transform: none; }
}

/* ------------------------------------------------------------
   Список обращений
   ------------------------------------------------------------
   Фишки состояния и канала вместо карточки фильтров; строки — те же
   .now-row, что на «Сейчас». Поиск раскрывается кнопкой в шапке.
   ------------------------------------------------------------ */

[data-page="/tickets"] .content { padding: 8px 12px 24px; max-width: none; }

.tl { display: flex; flex-direction: column; gap: 10px; color: var(--c-ink); font-family: var(--f-text); }
.tl-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 0 0 8px; }
.tl-title-row { display: flex; align-items: baseline; gap: 10px; }
.tl-title { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.tl-count { font-size: 13px; color: var(--c-ink-3); }
.tl-stamp { font-size: 12px; color: var(--c-ink-4); white-space: nowrap; }
@media (max-width: 480px) { .tl-stamp { display: none; } }
.tl-search-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 0; border-radius: 10px;
  background: var(--c-surface); color: var(--c-ink-2); cursor: pointer;
}
.tl-search-btn.is-on, .tl-search-btn[aria-expanded="true"] { background: var(--c-teal-tint); color: var(--c-teal); }

.tl-search { display: none; gap: 8px; align-items: center; }
.tl-search.is-open { display: flex; }
.tl-search-input {
  flex-grow: 1; min-width: 0; height: 44px; padding: 0 12px;
  border: 1px solid var(--c-line); border-radius: 10px;
  background: var(--c-surface); color: var(--c-ink); font: inherit; font-size: 16px;
}
.tl-search-input:focus { outline: 2px solid var(--c-teal); outline-offset: 0; border-color: transparent; }
.tl-search-go {
  height: 44px; padding: 0 16px; border: 0; border-radius: 10px;
  background: var(--c-teal); color: var(--c-teal-ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.tl-search-clear { display: inline-flex; align-items: center; height: 44px; padding: 0 8px; font-size: 14px; color: var(--c-ink-3); }

.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chips-gap { width: 1px; height: 24px; background: var(--c-line); align-self: center; flex-shrink: 0; margin: 0 2px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px;
  border-radius: 10px; background: var(--c-surface); color: var(--c-ink-2);
  font-size: 14px; font-weight: 500; white-space: nowrap; flex-shrink: 0;
  transition: background-color .12s ease, color .12s ease;
}
.chip:hover { color: var(--c-ink); }
.chip:active { transform: scale(.97); }
.chip.is-on { background: var(--c-teal); color: var(--c-teal-ink); }
.chip-n { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--c-ink-3); }
.chip.is-on .chip-n { color: var(--c-teal-ink); }

/* Состояние — сегменты во всю ширину: подпись и число столбиком, чтобы
   четыре сегмента с числами помещались в 375 px. Активный — как фишка. */
.seg-nav { display: flex; gap: 4px; padding: 4px; background: var(--c-surface); border-radius: 12px; }
.seg-nav-i {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 48px; padding: 4px 2px; border-radius: 9px; color: var(--c-ink-2); text-align: center;
  transition: background-color .12s ease, color .12s ease;
}
.seg-nav-i:hover { color: var(--c-ink); }
.seg-nav-i:active { transform: scale(.98); }
.seg-nav-l { font-size: 13px; font-weight: 500; line-height: 1.1; white-space: nowrap; }
.seg-nav-n { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 12px; line-height: 1; color: var(--c-ink-3); }
.seg-nav-n.is-hot { color: var(--c-coral); font-weight: 600; }
.seg-nav-i.is-on { background: var(--c-teal); color: var(--c-teal-ink); }
.seg-nav-i.is-on .seg-nav-l { font-weight: 600; }
.seg-nav-i.is-on .seg-nav-n, .seg-nav-i.is-on .seg-nav-n.is-hot { color: var(--c-teal-ink); font-weight: 500; }
/* Вкладки объединённого раздела — те же сегменты, в одну строку */
.seg-nav.is-tabs .seg-nav-i { flex-direction: row; min-height: 40px; }
.seg-nav.is-tabs .seg-nav-l { font-size: 14px; }
.tl-active { font-size: 13px; color: var(--c-ink-3); padding: 0 8px; }
.tl-active a { color: var(--c-teal); margin-left: 4px; display: inline-block; padding: 10px 0; margin-top: -10px; margin-bottom: -10px; }

/* Канал и ИИ — меню за воронкой в шапке */
.tl-head-actions { display: flex; align-items: center; gap: 8px; }
.tl-filter { position: relative; }
.tl-filter > summary { list-style: none; }
.tl-filter > summary::-webkit-details-marker { display: none; }
.tl-filter-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 10px; background: var(--c-surface); color: var(--c-ink-2); cursor: pointer;
}
.tl-filter-btn.is-on { background: var(--c-teal-tint); color: var(--c-teal); }
.tl-filter-n {
  position: absolute; top: 5px; right: 5px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 9px;
  background: var(--c-teal); color: var(--c-teal-ink); font-family: var(--f-mono); font-size: 12px; font-weight: 600; line-height: 1;
}
.tl-filter-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 240px;
  display: flex; flex-direction: column; padding: 6px;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}
.tl-filter-t { font-size: 12px; font-weight: 600; color: var(--c-ink-3); padding: 8px 12px 2px; }
.tl-filter-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 12px;
  border-radius: 8px; color: var(--c-ink); font-size: 14px;
}
.tl-filter-item:hover { background: var(--c-surface-2); color: var(--c-ink); }
.tl-filter-item.is-on { color: var(--c-teal); font-weight: 600; }
.tl-filter-item.is-on::after { content: "✓"; font-weight: 700; }
.tl-filter-reset { display: flex; align-items: center; min-height: 44px; padding: 0 12px; margin-top: 4px; border-top: 1px solid var(--c-line); color: var(--c-coral); font-size: 14px; }
.tl-filter-reset:hover { color: var(--c-coral); }

.now-row.is-closed .now-who { color: var(--c-ink-3); }
.now-row.is-closed .now-av { background: var(--c-surface-2); color: var(--c-ink-3); }
.tl-src { font-size: 12px; font-weight: 600; color: var(--c-ink-3); margin-left: 4px; }
.tl-busy { color: var(--c-warn); font-weight: 600; }

.tl-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px 16px; color: var(--c-ink-2); }
.tl-empty p { margin: 0; }

.tl-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tl-page {
  display: inline-flex; align-items: center; height: 44px; padding: 0 14px;
  border-radius: 10px; background: var(--c-surface); color: var(--c-ink-2); font-size: 14px; font-weight: 500;
}
.tl-page:hover { color: var(--c-ink); }
.tl-page-n { font-size: 13px; color: var(--c-ink-3); }

.tl-bulk { padding: 8px 8px 0; font-size: 13px; color: var(--c-ink-4); }
.tl-bulk summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; list-style: none; }
.tl-bulk summary::-webkit-details-marker { display: none; }
.tl-bulk-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 0 0; }
.tl-bulk-silent { display: inline-flex; align-items: center; gap: 8px; color: var(--c-ink-2); font-size: 14px; min-height: 44px; }
.tl-bulk-btn { background: var(--c-coral); color: var(--c-coral-ink); flex-grow: 0; }
.tl-bulk-btn:hover { color: var(--c-coral-ink); }

@media (min-width: 1024px) {
  [data-page="/tickets"] .content { padding: 20px 28px; }
  .tl { max-width: 960px; gap: 12px; }
  .tl-head { padding: 0 4px; }
  .tl-search-btn { display: none; }
  .tl-search { display: flex; }
  .seg-nav { max-width: 460px; }
  .seg-nav.is-tabs { max-width: 420px; }
  .seg-nav-i { flex-direction: row; gap: 6px; min-height: 40px; }
  .seg-nav-l { font-size: 14px; }
  .seg-nav-n { font-size: 13px; }
  .tl-search-input { max-width: 420px; height: 40px; font-size: 14px; }
  .tl-search-go { height: 40px; }
  .chips { flex-wrap: wrap; overflow: visible; }
}

/* ------------------------------------------------------------
   Переписка
   ------------------------------------------------------------
   Страница занимает экран целиком: шапка, лента с прокруткой внутри,
   поле ответа внизу. На компьютере справа — «О клиенте».
   ------------------------------------------------------------ */

[data-page^="/tickets/"] .content, [data-page^="/webchats/"] .content { padding: 0; max-width: none; }

.tk { display: flex; flex-direction: column; height: calc(100dvh - 68px); color: var(--c-ink); font-family: var(--f-text); }
.tk-head {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: var(--c-surface); border-bottom: 1px solid var(--c-line); flex-shrink: 0;
}
.tk-back {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 10px; background: var(--c-surface-2); color: var(--c-ink-2); flex-shrink: 0;
}
.tk-title { display: flex; flex-direction: column; gap: 1px; flex-grow: 1; min-width: 0; }
.tk-who-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tk-who { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-pill { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--c-surface-2); color: var(--c-ink-3); flex-shrink: 0; }
.tk-pill.is-open { background: var(--c-teal-tint); color: var(--c-teal); }
.tk-meta { font-size: 12px; color: var(--c-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.tk-hbtn {
  display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px;
  border: 0; border-radius: 10px; background: var(--c-surface-2); color: var(--c-ink);
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.tk-hbtn:hover { color: var(--c-ink); background: var(--c-line); }
.tk-hbtn-wide { display: none; }

.tk-close { position: relative; }
.tk-close summary { list-style: none; }
.tk-close summary::-webkit-details-marker { display: none; }
.tk-close-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  width: 280px; display: flex; flex-direction: column; gap: 8px; padding: 12px;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}
.tk-close-menu form { display: flex; }
.tk-close-menu .now-btn { width: 100%; }
.tk-close-hint { font-size: 13px; color: var(--c-ink-3); line-height: 1.35; }

.tk-body { display: flex; flex-direction: column; flex-grow: 1; min-height: 0; }
.tk-main { display: flex; flex-direction: column; flex-grow: 1; min-height: 0; }
.tk-alert { margin: 8px 12px 0; }
.tk-chat { flex-grow: 1; min-height: 0; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.tk-chat .msg { margin: 0; }
.tk-empty { color: var(--c-ink-2); padding: 24px 8px; }
.tk-empty p { margin: 0 0 6px; }
.tk-closed-note { padding: 12px 16px; font-size: 14px; color: var(--c-ink-3); background: var(--c-surface); border-top: 1px solid var(--c-line); }

.tk-reply { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--c-surface); border-top: 1px solid var(--c-line); flex-shrink: 0; }
.tk-reply-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tk-qa {
  height: 32px; max-width: 150px; padding: 0 8px; border: 0; border-radius: 8px;
  background: var(--c-surface-2); color: var(--c-ink-2); font: inherit; font-size: 13px; font-weight: 500;
}
.tk-tool {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px;
  border: 0; border-radius: 8px; background: var(--c-surface-2); color: var(--c-ink-2);
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none;
}
.tk-tool:hover { color: var(--c-ink); }
.tk-tool-x { color: var(--c-coral); }
.tk-photo-name { font-size: 12px; color: var(--c-ink-3); }
.tk-hint { margin: 0; font-size: 12px; color: var(--c-ink-3); }
.tk-hint.is-right { margin-left: auto; }
.tk-dot { font-size: 12px; color: var(--c-ink-4); flex-shrink: 0; }
.msg-photo { margin: 4px 0; }
.msg-photo img { display: block; max-width: 100%; max-height: 320px; border-radius: 10px; }
.tk-reply-row { display: flex; gap: 8px; align-items: flex-end; }
.tk-textarea {
  flex-grow: 1; min-height: 44px; max-height: 154px; padding: 11px 12px; resize: none;
  border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-bg); color: var(--c-ink);
  font: inherit; font-size: 16px; line-height: 22px; box-sizing: border-box;
}
.tk-textarea:focus { outline: 2px solid var(--c-teal); outline-offset: 0; border-color: transparent; }
.tk-send {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 0; border-radius: 10px; background: var(--c-teal); color: var(--c-teal-ink); cursor: pointer; flex-shrink: 0;
}
.tk-send:disabled { opacity: .6; cursor: default; }
.tk-send:active { transform: scale(.96); }

/* «О клиенте» */
.tk-side { display: flex; flex-direction: column; gap: 8px; order: -1; padding: 8px 12px 0; }
.tk-client { border-radius: 12px; }
.tk-client-sum { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; cursor: pointer; list-style: none; font-size: 14px; }
.tk-client-sum::-webkit-details-marker { display: none; }
.tk-client-t { font-weight: 600; }
.tk-client-s { color: var(--c-ink-3); font-size: 12px; flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-client-chev { color: var(--c-ink-3); transition: transform .15s ease; flex-shrink: 0; }
.tk-client[open] .tk-client-chev { transform: rotate(90deg); }
.tk-client-body { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px; border-top: 1px solid var(--c-line); font-size: 14px; }
.tk-client-actions { display: flex; gap: 8px; }
.tk-sub-title { font-size: 12px; font-weight: 600; color: var(--c-ink-3); padding-top: 4px; }
.tk-sub-row { display: flex; align-items: center; gap: 8px; }
.tk-days { width: 64px; height: 40px; padding: 0 10px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-bg); color: var(--c-ink); font: inherit; font-size: 15px; text-align: center; }
.tk-sub-unit { font-size: 14px; color: var(--c-ink-3); }
.tk-sub-btn { height: 40px; margin-left: auto; flex-grow: 0; }
.tk-danger { background: var(--c-coral); color: var(--c-coral-ink); }
.tk-danger:hover { color: var(--c-coral-ink); }
.tk-sub-revoke { padding-top: 4px; }
.tk-link-danger { border: 0; background: none; padding: 8px 0; min-height: 44px; font: inherit; font-size: 13px; color: var(--c-coral); cursor: pointer; text-align: left; }
.tk-foot { display: none; font-size: 12px; color: var(--c-ink-4); padding: 0 4px; }
.tk-toast { position: fixed; top: 80px; right: 20px; z-index: 9999; max-width: 340px; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); }

@media (min-width: 1024px) {
  [data-page^="/tickets/"] .content, [data-page^="/webchats/"] .content { padding: 0; }
  .tk { height: 100vh; }
  .tk-head { padding: 10px 28px; gap: 12px; }
  .tk-hbtn-wide { display: inline-flex; }
  .tk-body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 0; }
  .tk-main { border-right: 1px solid var(--c-line); }
  .tk-chat { padding: 16px 24px; }
  .tk-reply { padding: 12px 24px; }
  .tk-side { order: 0; padding: 16px; overflow-y: auto; }
  .tk-client { background: var(--c-surface); }
  .tk-client-sum { pointer-events: none; }
  .tk-client-chev { display: none; }
  .tk-foot { display: block; }
}

/* ------------------------------------------------------------
   Образец «список + форма» — контент бота и настройки
   ------------------------------------------------------------
   Список: заголовок с числом и одной главной кнопкой, строки с
   главным и второстепенным текстом, состоянием справа. Форма: одна
   колонка, подпись над полем, поля 44 px, подсказка под полем,
   главная кнопка внизу, опасное — текстовой ссылкой.
   ------------------------------------------------------------ */

.ls-page .content, .fm-page .content { padding: 8px 12px 24px; max-width: none; }

.ls { display: flex; flex-direction: column; gap: 10px; color: var(--c-ink); font-family: var(--f-text); }
.ls-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0 0 8px; }
.ls-head-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ls-title { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-title.is-sub { font-size: 22px; }
.ls-count { font-size: 13px; color: var(--c-ink-3); font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.ls-back {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 10px; background: var(--c-surface); color: var(--c-ink-2); flex-shrink: 0;
}
.ls-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px;
  border: 0; border-radius: 10px; background: var(--c-teal); color: var(--c-teal-ink);
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.ls-btn:hover { color: var(--c-teal-ink); filter: brightness(1.08); }
.ls-btn:active { transform: scale(.98); }
.ls-sub { font-size: 13px; color: var(--c-ink-3); padding: 0 8px; line-height: 1.4; }
.ls-sub a { color: var(--c-teal); }
.ls-note { font-size: 13px; color: var(--c-ink-4); padding: 4px 8px 0; line-height: 1.4; }
.ls-note a { color: var(--c-teal); }

.ls-rows { display: flex; flex-direction: column; background: var(--c-surface); border-radius: 14px; overflow: hidden; }
.ls-row { display: flex; align-items: center; gap: 10px; min-height: 56px; border-bottom: 1px solid var(--c-line); }
.ls-row:last-child { border-bottom: 0; }
.ls-row-main {
  display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0;
  padding: 12px 0 12px 14px; color: inherit; min-height: 56px; justify-content: center;
}
.ls-row-main:hover { color: inherit; }
.ls-row-main:active { background: var(--c-surface-2); }
.ls-primary { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-secondary { font-size: 13px; color: var(--c-ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-row.is-dim .ls-primary { color: var(--c-ink-3); }
.ls-row-side { display: flex; align-items: center; gap: 6px; padding-right: 10px; flex-shrink: 0; }
.ls-chev { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -8px; color: var(--c-ink-4); flex-shrink: 0; }
.ls-empty { padding: 20px 14px; color: var(--c-ink-3); font-size: 14px; }

.pill { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: var(--c-surface-2); color: var(--c-ink-3); white-space: nowrap; }
.pill-ok { background: var(--c-green-tint); color: var(--c-green); }
.pill-teal { background: var(--c-teal-tint); color: var(--c-teal); }
.pill-warn { background: var(--c-warn-tint); color: var(--c-warn); }
.pill-btn { border: 0; font: inherit; cursor: pointer; min-height: 32px; }
.pill-btn:hover { color: var(--c-ink); }

/* Меню действий строки: «⋯» раскрывает список */
.ls-menu { position: relative; }
.ls-menu > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; color: var(--c-ink-3); cursor: pointer; font-size: 20px; line-height: 1; }
.ls-menu > summary::-webkit-details-marker { display: none; }
.ls-menu > summary:hover { background: var(--c-surface-2); color: var(--c-ink); }
.ls-menu-body {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 220px;
  display: flex; flex-direction: column; padding: 6px;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}
.ls-menu-body form { display: flex; }
.ls-menu-item {
  display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 12px;
  border: 0; border-radius: 8px; background: none; color: var(--c-ink); text-align: left;
  font: inherit; font-size: 14px; cursor: pointer;
}
.ls-menu-item:hover { background: var(--c-surface-2); color: var(--c-ink); }
.ls-menu-item:disabled { color: var(--c-ink-4); cursor: default; }
.ls-menu-item.is-danger { color: var(--c-coral); }

/* Свёрнутый блок: «Загрузить документ», «Проверить поиск», «Добавить кнопку» */
.ls-more { background: var(--c-surface); border-radius: 12px; }
.ls-more > summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; cursor: pointer; font-size: 14px; }
.ls-more > summary::-webkit-details-marker { display: none; }
.ls-more-t { font-weight: 600; }
.ls-more-s { color: var(--c-ink-3); font-size: 12px; flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-more-chev { color: var(--c-ink-3); transition: transform .15s ease; flex-shrink: 0; }
.ls-more[open] > summary .ls-more-chev { transform: rotate(90deg); }
.ls-more-body { display: flex; flex-direction: column; gap: 14px; padding: 12px 14px 14px; border-top: 1px solid var(--c-line); }
@media (max-width: 768px) {
  /* Подзаголовок свёрнутого блока на телефоне не влезал в строку и
     обрезался — уходит под название целиком. */
  .ls-more > summary { flex-wrap: wrap; row-gap: 0; padding-top: 8px; padding-bottom: 8px; }
  .ls-more-chev { margin-left: auto; }
  .ls-more-s { flex-basis: 100%; order: 3; white-space: normal; }
}

/* Форма */
.fm { display: flex; flex-direction: column; gap: 14px; padding: 16px 14px; background: var(--c-surface); border-radius: 14px; }
.fm-group { font-size: 13px; font-weight: 600; color: var(--c-ink-3); padding: 8px 8px 0; }
.fm-field { display: flex; flex-direction: column; gap: 6px; }
.fm-label { font-size: 13px; font-weight: 600; color: var(--c-ink-2); }
.fm-input, .fm-select, .fm-textarea, .tge-ta {
  width: 100%; min-height: 44px; padding: 10px 12px; box-sizing: border-box;
  border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-bg); color: var(--c-ink);
  font: inherit; font-size: 16px; line-height: 1.45;
}
.fm-input:focus, .fm-select:focus, .fm-textarea:focus, .tge-ta:focus { outline: 2px solid var(--c-teal); outline-offset: 0; border-color: transparent; }
.fm-input[readonly], .tge-ta[readonly] { color: var(--c-ink-3); background: var(--c-surface-2); }
.fm-textarea { resize: vertical; }
.fm-hint { font-size: 12px; color: var(--c-ink-3); line-height: 1.35; }
.fm-hint code, .ls-sub code, .ls-note code { font-family: var(--f-mono); font-size: 12px; background: var(--c-surface-2); padding: 1px 5px; border-radius: 5px; }
.fm-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fm-actions { display: flex; gap: 8px; padding: 4px 0 0; }
.fm-actions .now-btn { flex-grow: 1; }
.fm-actions .now-btn-2 { flex-grow: 0; }
.fm-danger { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; border: 0; background: none; font: inherit; font-size: 13px; color: var(--c-coral); cursor: pointer; text-align: left; }
.fm-danger:hover { color: var(--c-coral); text-decoration: underline; }
.fm-file { font-size: 14px; }
.fm-file::file-selector-button {
  height: 40px; margin-right: 10px; padding: 0 12px; border: 0; border-radius: 10px;
  background: var(--c-surface-2); color: var(--c-ink-2); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
.fm-check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; color: var(--c-ink-2); }
.fm-check input { width: 18px; height: 18px; accent-color: var(--c-teal); }

/* Сегментный выбор: «Callback / URL», «Текст / Подменю / Ссылка» */
.seg { display: flex; gap: 4px; padding: 4px; background: var(--c-surface-2); border-radius: 10px; }
.seg label { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 36px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--c-ink-2); cursor: pointer; text-align: center; }
.seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg input:checked + span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 8px; background: var(--c-surface); color: var(--c-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.seg label span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }

/* Редактор текста Telegram */
.tge { display: flex; flex-direction: column; gap: 8px; }
.tge-bar { display: flex; flex-wrap: wrap; gap: 6px; }
.tge-b { min-height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: var(--c-surface-2); color: var(--c-ink-2); font: inherit; font-size: 13px; cursor: pointer; }
.tge-b:hover { color: var(--c-ink); }
.tge-b:active { transform: scale(.96); }
.tge-b code { font-family: var(--f-mono); font-size: 12px; }
.tge-var { font-size: 12px; }
.tge-sep { width: 1px; height: 24px; background: var(--c-line); align-self: center; }
.tge-ta { min-height: 132px; resize: vertical; font-family: var(--f-mono); font-size: 14px; line-height: 1.5; }
.tge-meta { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--c-ink-3); }
.tge-toggle { margin-left: auto; min-height: 32px; padding: 0 8px; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 500; color: var(--c-teal); cursor: pointer; }
.tge-preview { padding: 10px 12px; border-radius: 12px; background: var(--c-teal-tint); color: var(--c-ink); font-size: 14px; line-height: 1.45; word-break: break-word; }
.tge-preview a { color: var(--c-teal); text-decoration: underline; }
.tge-preview blockquote { margin: 4px 0; padding: 4px 10px; border-left: 2px solid var(--c-teal); color: var(--c-ink-2); }
.tge-preview code, .tge-preview pre { font-family: var(--f-mono); font-size: 13px; }
.tge-empty { color: var(--c-ink-4); }

/* Превью меню «как в Telegram» */
.tgp { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; }
.tgp-msg { padding: 10px 12px; border-radius: 12px; background: var(--c-teal-tint); font-size: 14px; line-height: 1.45; }
.tgp-kb { display: flex; flex-direction: column; gap: 6px; }
.tgp-btn { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 10px; background: var(--c-surface-2); font-size: 14px; font-weight: 500; text-align: center; }
.tgp-note { font-size: 12px; color: var(--c-ink-4); }

/* Фото авто-ответа */
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.thumbs figure { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--c-surface-2); }
.thumbs form { display: flex; }
.thumbs .pill-btn { width: 100%; justify-content: center; }

/* Рассылка: ход отправки */
.bp { display: flex; flex-direction: column; gap: 12px; }
.bp-bar { position: relative; height: 12px; border-radius: 999px; background: var(--c-surface-2); overflow: hidden; }
.bp-fill { height: 100%; width: 0; background: var(--c-teal); transition: width .4s ease; }
.bp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bp-num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 600; line-height: 1; }
.bp-cap { font-size: 12px; color: var(--c-ink-3); }
.pin-code { font-family: var(--f-mono); font-size: 24px; font-weight: 700; letter-spacing: .12em; color: var(--c-teal); }
.pin-input { width: 120px; text-align: center; font-family: var(--f-mono); font-size: 20px; letter-spacing: .2em; }

@media (min-width: 1024px) {
  .ls-page .content, .fm-page .content { padding: 20px 28px; }
  .ls { max-width: 760px; gap: 12px; }
  .ls-head { padding: 0 4px; }
  .fm { padding: 20px; }
  .bp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------
   Образец «настройки группами» — ИИ, бот, безопасность, сервис, виджет
   ------------------------------------------------------------
   Страница — стопка групп. Группа — карточка с названием и строками.
   Строка: подпись и подсказка слева, элемент справа — переключатель,
   число или выбор. Длинные тексты — во всю ширину под подписью.
   «Сохранить» — внизу группы, небольшая; опасное — текстовой ссылкой.
   Переключатели, что применяются сразу, отправляют форму сами.
   ------------------------------------------------------------ */

.st-page .content { padding: 8px 12px 24px; max-width: none; }

.st { display: flex; flex-direction: column; gap: 10px; color: var(--c-ink); font-family: var(--f-text); }
.st-status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 0 8px; font-size: 13px; color: var(--c-ink-3); }
.st-sec { font-size: 13px; font-weight: 600; color: var(--c-ink-3); padding: 10px 8px 0; scroll-margin-top: 84px; }

.st-group { display: flex; flex-direction: column; background: var(--c-surface); border-radius: 14px; overflow: hidden; }
.st-group form { display: contents; }
.st-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 12px 14px 6px; }
.st-group-t { font-size: 15px; font-weight: 600; }
.st-group-s { font-size: 12px; color: var(--c-ink-3); }
.st-group-head .st-group-s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-note { padding: 0 14px 10px; font-size: 13px; color: var(--c-ink-3); line-height: 1.4; }
.st-note code, .st-hint code, .st-label code { font-family: var(--f-mono); font-size: 12px; background: var(--c-surface-2); padding: 1px 5px; border-radius: 5px; }
.st-note a, .st-hint a { color: var(--c-teal); }
/* Ссылка в подсказке — цель касания выше строки, без сдвига текста */
.st-hint a { display: inline-block; padding: 10px 0; margin: -10px 0; }

.st-row {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px;
  border-top: 1px solid var(--c-line); margin: 0; color: inherit; font: inherit;
}
.st-group > .st-row:first-child, .st-group > form:first-child > .st-row:first-child,
.st-group-head + .st-row, .st-group-head + form > .st-row:first-child,
.st-note + .st-row, .st-note + form > .st-row:first-child { border-top: 0; }
label.st-row { cursor: pointer; }
.st-row-l { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0; }
.st-label { font-size: 15px; line-height: 1.3; }
.st-label .now-mono { font-size: 12px; color: var(--c-ink-3); }
.st-hint { font-size: 12px; color: var(--c-ink-3); line-height: 1.3; }
.st-hint.is-warn { color: var(--c-warn); }
.st-hint.is-bad { color: var(--c-coral); }
.st-row-r { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Элементы справа */
.st-num, .st-text, .st-select, .st-color {
  height: 40px; padding: 0 10px; box-sizing: border-box;
  border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-bg); color: var(--c-ink);
  font: inherit; font-size: 15px;
}
.st-num { width: 88px; text-align: center; font-family: var(--f-mono); font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.st-num::-webkit-outer-spin-button, .st-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.st-num.is-s { width: 64px; }
.st-text { width: 150px; font-size: 14px; }
.st-text.is-mono { font-family: var(--f-mono); font-size: 13px; }
.st-select { max-width: 200px; padding-right: 8px; font-size: 14px; }
.st-color { width: 44px; padding: 3px; cursor: pointer; }
.st-color::-webkit-color-swatch-wrapper { padding: 0; }
.st-color::-webkit-color-swatch { border: 0; border-radius: 7px; }
.st-color::-moz-color-swatch { border: 0; border-radius: 7px; }
.st-num:focus, .st-text:focus, .st-select:focus, .st-ta:focus, .st-color:focus { outline: 2px solid var(--c-teal); outline-offset: 0; border-color: transparent; }
.st-range { width: 150px; accent-color: var(--c-teal); }
.st-val { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 15px; }

/* Текстовое поле и выбор на телефоне — под подписью, во всю ширину */
@media (max-width: 1023px) {
  .st-row.is-wrap { flex-wrap: wrap; }
  .st-row.is-wrap .st-row-l { flex-basis: 100%; }
  .st-row.is-wrap .st-row-r { width: 100%; }
  .st-row.is-wrap .st-text, .st-row.is-wrap .st-select { width: 100%; max-width: none; flex-grow: 1; }
  .st-row.is-wrap .st-range { flex-grow: 1; width: auto; }
}

/* Переключатель: сама строка — label, цель касания во всю ширину */
.sw { position: relative; display: inline-block; width: 44px; height: 26px; flex-shrink: 0; }
.sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.sw-k { position: absolute; inset: 0; border-radius: 13px; background: var(--c-line-2); transition: background-color .15s ease; }
.sw-k::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s ease;
}
.sw input:checked + .sw-k { background: var(--c-teal); }
.sw input:checked + .sw-k::after { transform: translateX(18px); }
.sw input:focus-visible + .sw-k { outline: 2px solid var(--c-teal); outline-offset: 2px; }
.sw input:disabled + .sw-k { opacity: .5; }

/* Широкое поле: подпись сверху, текст во всю ширину */
.st-wide { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px 12px; border-top: 1px solid var(--c-line); }
.st-group > .st-wide:first-child, .st-group > form:first-child > .st-wide:first-child,
.st-group-head + .st-wide, .st-group-head + form > .st-wide:first-child,
.st-note + .st-wide, .st-note + form > .st-wide:first-child { border-top: 0; }
.st-wide-l { font-size: 13px; font-weight: 600; color: var(--c-ink-2); }
.st-ta, .st-in {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-bg); color: var(--c-ink);
  font: inherit; font-size: 16px; line-height: 1.45;
}
.st-in { min-height: 44px; }
.st-in:focus { outline: 2px solid var(--c-teal); outline-offset: 0; border-color: transparent; }
.st-ta { min-height: 88px; resize: vertical; }
.st-ta.is-mono, .st-in.is-mono { font-family: var(--f-mono); font-size: 14px; line-height: 1.5; }
.st-ta.is-tall { min-height: 220px; }
.st-code {
  margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--c-surface-2); color: var(--c-ink);
  font-family: var(--f-mono); font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; overflow-x: auto;
}

/* Свёрнутая строка группы: заголовок — строка, содержимое — широкое поле */
.st-fold { border-top: 1px solid var(--c-line); }
.st-group > .st-fold:first-child, .st-group-head + .st-fold, .st-note + .st-fold { border-top: 0; }
.st-fold > summary { list-style: none; cursor: pointer; }
.st-fold > summary::-webkit-details-marker { display: none; }
.st-fold > summary.st-row { border-top: 0; }
.st-fold > summary.st-row:hover { background: var(--c-surface-2); }
.st-fold > .st-wide, .st-fold > .st-list { border-top: 0; padding-top: 0; }
.st-num[type="time"] { width: 120px; }
.now-tiles.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Низ группы: небольшие кнопки справа */
.st-foot { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 10px 14px 12px; }
.st-foot form { display: contents; }
.st-save, .st-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 14px;
  border: 0; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.st-save { background: var(--c-teal); color: var(--c-teal-ink); }
.st-save:hover { color: var(--c-teal-ink); filter: brightness(1.08); }
.st-save:disabled { opacity: .5; cursor: default; }
.st-btn { background: var(--c-surface-2); color: var(--c-ink-2); font-weight: 500; }
.st-btn:hover { color: var(--c-ink); }
.st-btn.is-danger { color: var(--c-coral); }
.st-btn.is-warn { color: var(--c-warn); }
.st-save.is-danger { background: var(--c-coral); color: var(--c-coral-ink); }
.st-save.is-danger:hover { color: var(--c-coral-ink); }
.pill-bad { background: var(--c-coral-tint); color: var(--c-coral); }
.st-save:active, .st-btn:active { transform: scale(.98); }
.st-foot .fm-danger { margin-right: auto; padding-left: 0; }
.st-danger { padding: 4px 8px 0; }

/* Список файлов обновления, состояние, ход */
.st-list { margin: 0; padding: 0 14px 12px; list-style: none; display: flex; flex-direction: column; gap: 4px; font-family: var(--f-mono); font-size: 12px; }
.st-list li { display: flex; justify-content: space-between; gap: 8px; min-width: 0; }
.st-list li span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-list li span:last-child { color: var(--c-ink-3); flex-shrink: 0; }
.st-spin { width: 18px; height: 18px; border: 2px solid var(--c-line-2); border-top-color: var(--c-teal); border-radius: 50%; animation: st-spin .8s linear infinite; flex-shrink: 0; }
@keyframes st-spin { to { transform: rotate(360deg); } }

/* Плитки статистики внутри страницы настроек */
.st .now-tiles { padding: 0; }

/* Логи: фишки сверху, строки моноширинным */
.lg-lines { display: flex; flex-direction: column; background: var(--c-surface); border-radius: 14px; overflow: hidden; }
.lg-line { display: flex; gap: 8px; padding: 6px 14px; border-bottom: 1px solid var(--c-line); font-family: var(--f-mono); font-size: 12px; line-height: 1.4; }
.lg-line:last-child { border-bottom: 0; }
.lg-t { color: var(--c-ink-4); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.lg-l { width: 36px; color: var(--c-ink-3); flex-shrink: 0; }
.lg-l.is-warn { color: var(--c-warn); }
.lg-l.is-err { color: var(--c-coral); font-weight: 600; }
.lg-m { min-width: 0; color: var(--c-ink); word-break: break-word; white-space: pre-wrap; }
.lg-w { display: none; color: var(--c-ink-4); flex-shrink: 0; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-line.is-err .lg-m { color: var(--c-ink); }
.lg-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 0 8px; font-size: 13px; color: var(--c-ink-3); }
.lg-meta a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; margin: -12px 0; color: var(--c-teal); }
.lg-meta .is-on { color: var(--c-ink); font-weight: 600; }
.lg-meta-r { margin-left: auto; display: flex; gap: 10px; }
.lg-empty { padding: 20px 14px; color: var(--c-ink-3); font-size: 14px; }

/* Аналитика: графики, сводка ИИ, полоски сервера */
.chips-set { display: contents; }
.chips button.chip { border: 0; font: inherit; cursor: pointer; }
.an-chips { padding: 0 14px 4px; }
.an-chart { padding: 6px 14px 12px; }
.an-chart svg { display: block; width: 100%; height: auto; }
.an-legend { display: flex; gap: 14px; padding: 8px 0 0; font-size: 12px; color: var(--c-ink-3); }
.an-legend span { display: inline-flex; align-items: center; gap: 6px; }
.an-legend i { width: 10px; height: 10px; border-radius: 3px; }
.an-legend .c-teal { background: var(--c-teal); }
.an-legend .c-warn { background: var(--c-warn); }
.an-legend .c-green { background: var(--c-green); }
.an-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 8px 14px 4px; }
.an-sum-n { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 600; line-height: 1; }
.an-sum-c { font-size: 12px; color: var(--c-ink-3); line-height: 1.2; padding-top: 4px; }
.an-tip {
  position: absolute; z-index: 40; pointer-events: none; opacity: 0; max-width: 240px;
  padding: 8px 10px; border-radius: 10px; background: var(--c-surface); border: 1px solid var(--c-line);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16); font-size: 12px; line-height: 1.4; color: var(--c-ink); transition: opacity .1s ease;
}
.an-bar { display: inline-block; width: 100px; height: 6px; border-radius: 3px; background: var(--c-surface-2); overflow: hidden; }
.an-bar span { display: block; height: 100%; width: 0; background: var(--c-line-2); transition: width .3s ease; }
a.ls-row { color: inherit; }
a.ls-row:hover { color: inherit; background: var(--c-surface-2); }
.ls-more-body.is-rows { gap: 0; padding: 0; }
.ls-more-body > .st-row:first-child { border-top: 0; }

/* Индикатор обновления: «потяните» / «обновляю» — плашка под шапкой */
.ptr {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 72px); z-index: 80;
  width: 200px; height: 36px; margin-left: -100px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 18px; background: var(--c-surface); color: var(--c-ink-2);
  font-family: var(--f-text); font-size: 13px; font-weight: 500;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .16); border: 1px solid var(--c-line);
  opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .1s ease;
}
.ptr.is-on { opacity: 1; }
.ptr-spin { display: none; width: 14px; height: 14px; border: 2px solid var(--c-line-2); border-top-color: var(--c-teal); border-radius: 50%; animation: st-spin .8s linear infinite; }
.ptr.is-spin .ptr-spin { display: block; }
@media (min-width: 1024px) { .ptr { top: 16px; } }

/* Вход */
.au-wrap { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px 16px; background: var(--c-bg); color: var(--c-ink); font-family: var(--f-text); box-sizing: border-box; }
.au-card { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 14px; padding: 24px 20px; background: var(--c-surface); border-radius: 16px; box-sizing: border-box; }
.au-field { display: flex; flex-direction: column; gap: 6px; }
.au-field span { font-size: 13px; font-weight: 600; color: var(--c-ink-2); }
.au-btn { height: 44px; margin-top: 4px; border: 0; border-radius: 10px; background: var(--c-teal); color: var(--c-teal-ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.au-btn:hover { filter: brightness(1.08); }
.au-note { font-size: 12px; color: var(--c-ink-4); text-align: center; }
.au-wrap .alert { margin: 0; }

@media (min-width: 1024px) {
  .st-page .content { padding: 20px 28px; }
  .an-chart { padding: 8px 18px 14px; }
  .an-chips, .an-sum { padding-left: 18px; padding-right: 18px; }
  .st { max-width: 760px; gap: 12px; }
  .st-row { padding: 10px 18px; }
  .st-wide, .st-foot, .st-note, .st-list { padding-left: 18px; padding-right: 18px; }
  .st-group-head { padding: 14px 18px 6px; }
  .lg-w { display: block; }
  .lg-line { padding: 6px 18px; }
  [data-page="/logs"] .st, [data-page="/analytics"] .st { max-width: 1120px; }
}

@media (prefers-reduced-motion: reduce) {
  .sw-k, .sw-k::after { transition: none; }
  .st-spin { animation: none; }
}


/* ------------------------------------------------------------
   Читаемость
   ------------------------------------------------------------
   Текст мельче 13 px и светло-серые подписи читаются с трудом —
   особенно на телефоне и в тёмной теме. Правило одно на всю панель:
   ничего мельче 13 px, подписи и подсказки — 500-м начертанием,
   серые роли темнее (см. --c-ink-3/4 выше). Числа и крупные подписи
   не трогаем — они и так читаются.
   ------------------------------------------------------------ */

/* Подписи, подсказки, метки времени — 13 px, полужирные */
.now-when, .now-tile-cap, .now-line-meta, .now-date, .now-hero-sub, .now-sec-title,
.st-hint, .st-note, .st-group-s, .fm-hint, .fm-label, .st-wide-l,
.ls-sub, .ls-note, .ls-secondary, .ls-count, .ls-more-s, .tl-count, .tl-stamp, .tl-src, .tl-page-n,
.tk-meta, .tk-hint, .tk-photo-name, .tk-client-s, .tk-sub-title, .tk-sub-unit, .tk-close-hint, .tk-foot,
.tl-filter-t, .tl-active, .tge-meta, .tge-var, .tgp-note, .an-sum-c, .an-legend, .au-note, .lg-meta,
.pill, .tk-pill, .chip-n, .seg-nav-n, .bp-cap, .msg-head, .msg-time, .kind-tag {
  font-size: 13px;
}
.now-tile-cap, .now-line-meta, .now-when, .now-date, .now-hero-sub, .st-hint, .st-note, .st-group-s,
.fm-hint, .ls-sub, .ls-note, .ls-secondary, .ls-more-s, .tk-meta, .tk-hint, .tk-client-s, .tk-close-hint,
.an-sum-c, .an-legend, .au-note, .tl-active, .tge-meta, .tgp-note, .bp-cap, .msg-time { font-weight: 500; }
.now-preview { color: var(--c-ink-3); }
.now-row.is-waiting .now-preview { color: var(--c-ink-2); }
.now-preview, .now-line, .ls-primary, .tl-filter-item, .st-label, .ls-menu-item { font-size: 15px; }
.st-label, .ls-primary { font-weight: 600; }
.msg-text { font-size: 15px; line-height: 1.5; }
.msg-head strong { font-weight: 700; }
.lg-line { font-size: 13px; }
.lg-l { width: 40px; }
.st-code, .tge-b code, .fm-hint code, .st-hint code, .st-note code, .ls-sub code, .ls-note code { font-size: 13px; }
.chip, .seg-nav-l, .st-btn, .st-save, .tk-hbtn, .tl-page, .tl-search-clear { font-size: 14px; }
.tk-tool, .tk-qa, .tge-b, .tge-toggle, .pill-btn, .tl-search-clear { font-size: 13px; font-weight: 500; }
.tge-toggle { font-weight: 600; }
.topbar .nav a { font-size: 14px; font-weight: 500; }
.topbar .nav a.active { font-weight: 600; }
.topbar .nav-group { font-size: 13px; font-weight: 600; letter-spacing: .03em; color: var(--c-ink-3); }
.chat-day { font-size: 13px; font-weight: 500; color: var(--c-ink-3); }
@media (max-width: 768px) {
  /* Подзаголовок группы на телефоне переносится, а не обрезается */
  .st-group-head { flex-wrap: wrap; }
  .st-group-head .st-group-s { white-space: normal; flex-basis: 100%; }
}
.topbar .user-name, .topbar .logout { font-size: 13px; font-weight: 500; }
.alert { font-size: 14px; }
.muted, .small { color: var(--c-ink-3) !important; font-size: 13px !important; }
.subscription-block { font-size: 14px; }
.content code { font-size: 13px; }

/* Системная пометка в переписке: не реплика, а событие. */
.msg-system {
  align-self: center;
  max-width: 80%;
  margin: 6px auto;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--c-surface-2);
  color: var(--c-ink-3);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}