/* Оформление mini app — направление «Ambient»: состояние несёт свечение.
 *
 * Палитра СВОЯ, а не выведенная из --tg-theme-*. Так задумано: приложение
 * должно выглядеть одинаково и внутри Телеграма, и отдельным приложением на
 * телефоне, где этих переменных нет вовсе.
 *
 * Тёмная — базовая (приложение задумано тёмным, иконка тоже), светлая —
 * переопределение. Выбираем по data-theme (его ставит app.js из
 * tg.colorScheme): внутри Телеграма prefers-color-scheme отражает тему ОС, а
 * она может не совпадать с темой самого Телеграма. Медиазапрос оставлен для
 * запуска вне Телеграма, где data-theme никто не проставит.
 *
 * Цвет = состояние: лайм — живо, янтарь — ждёт/занято, красный — мертво или
 * опасно. Свечение вверху экрана красится в цвет ЕГО состояния (app.js,
 * setGlow) — так состояние читается до чтения текста.
 */

:root {
  --bg: #151210;
  --card: rgba(255, 255, 255, .055);
  --card2: rgba(255, 255, 255, .09);
  --card3: rgba(255, 255, 255, .14);
  --line: rgba(255, 255, 255, .09);
  --ink: #f3ede4;
  --ink2: rgba(243, 237, 228, .62);
  --ink3: rgba(243, 237, 228, .38);

  --lime: #c6f04a;
  --amber: #f0a13a;
  --red: #ef6b5e;
  --lime-soft: rgba(198, 240, 74, .14);
  --amber-soft: rgba(240, 161, 58, .16);
  --red-soft: rgba(239, 107, 94, .16);

  --term: #0d0b09;
  --term-ink: #d9d2c5;
  --sheet: #1f1b17;

  --glow-amber: rgba(240, 161, 58, .55);
  --glow-lime: rgba(198, 240, 74, .55);
  --glow-red: rgba(239, 107, 94, .55);
  --glow: var(--glow-amber);

  --radius: 18px;
  --radius-sm: 12px;
  --radius-xs: 9px;

  --sans: Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

:root[data-theme="light"] {
  --bg: #f3efe8;
  --card: rgba(20, 16, 12, .045);
  --card2: rgba(20, 16, 12, .07);
  --card3: rgba(20, 16, 12, .12);
  --line: rgba(20, 16, 12, .09);
  --ink: #1a1612;
  --ink2: rgba(26, 22, 18, .62);
  --ink3: rgba(26, 22, 18, .4);

  --lime: #6f9a10;
  --amber: #c9791a;
  --red: #cf4d3f;
  --lime-soft: rgba(111, 154, 16, .14);
  --amber-soft: rgba(201, 121, 26, .14);
  --red-soft: rgba(207, 77, 63, .14);

  --term: #1a1612;
  --term-ink: #e8e1d6;
  --sheet: #faf7f2;

  --glow-amber: rgba(201, 121, 26, .42);
  --glow-lime: rgba(111, 154, 16, .38);
  --glow-red: rgba(207, 77, 63, .38);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f3efe8;
    --card: rgba(20, 16, 12, .045);
    --card2: rgba(20, 16, 12, .07);
    --card3: rgba(20, 16, 12, .12);
    --line: rgba(20, 16, 12, .09);
    --ink: #1a1612;
    --ink2: rgba(26, 22, 18, .62);
    --ink3: rgba(26, 22, 18, .4);
    --lime: #6f9a10;
    --amber: #c9791a;
    --red: #cf4d3f;
    --lime-soft: rgba(111, 154, 16, .14);
    --amber-soft: rgba(201, 121, 26, .14);
    --red-soft: rgba(207, 77, 63, .14);
    --term: #1a1612;
    --term-ink: #e8e1d6;
    --sheet: #faf7f2;
    --glow-amber: rgba(201, 121, 26, .42);
    --glow-lime: rgba(111, 154, 16, .38);
    --glow-red: rgba(207, 77, 63, .38);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--ink);
  font: 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

#app {
  position: relative;
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh; height: var(--app-vh, 100dvh);
  overflow: hidden;
}

/* Ambient-свечение: единственный элемент, который меняет цвет от состояния
 * экрана. Лежит под всем, кликов не ловит. */
/* Геометрия ровно из макета: ядро выше верхней кромки, поэтому свечение самое
 * яркое у самого верха и гаснет вниз. Пробовал опускать ядро, чтобы кнопки
 * шапки не размывались, — стало не как в концепте; правильное лечение не в
 * сдвиге свечения, а в плотности фона у самих контролов (см. .chat-bar .btn). */
#glow {
  position: absolute; left: -30%; right: -30%; top: -34%; height: 64%;
  background: radial-gradient(ellipse at 50% 40%, var(--glow) 0%, transparent 62%);
  filter: blur(28px);
  pointer-events: none; z-index: 0;
}

@keyframes ccPulse { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 0; transform: scale(2.2); } }
@keyframes ccDots  { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }
@keyframes ccSkel  { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes ccSheet { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ------------------------------------------------------------------ шапка */
#topbar {
  position: relative; z-index: 1;
  padding: calc(env(safe-area-inset-top) + 10px) 20px 0;
  flex: 0 0 auto;
}
#title-row { display: flex; align-items: center; gap: 8px; }
#title { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }

/* Переключатель устройства — в шапке: он влияет на ВСЁ содержимое приложения,
 * поэтому виден с любого экрана, а не спрятан в настройках. */
#device-pill {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 12px 0 11px;
  border: 1px solid var(--line); border-radius: 17px;
  background: var(--card2); color: var(--ink);
  font: 500 13px var(--sans); cursor: pointer; max-width: 60%;
}
#device-pill .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#device-pill:disabled { opacity: .6; }

#tabs {
  display: flex; gap: 16px; margin-top: 22px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
#tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto; padding: 0 0 10px;
  border: 0; background: transparent; color: var(--ink3);
  font: 500 14.5px var(--sans); cursor: pointer; white-space: nowrap;
}
.tab.active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }

main#view {
  position: relative; z-index: 1;
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 22px 20px calc(env(safe-area-inset-bottom) + 24px);
  -webkit-overflow-scrolling: touch;
}
/* чат и экраны с прилипшей нижней панелью делят высоту сами */
main#view.flush { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.screen-scroll {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 18px 20px 24px; -webkit-overflow-scrolling: touch;
}

/* ------------------------------------------------------------- примитивы */
.loading, .empty, .error { padding: 28px 4px; text-align: center; color: var(--ink3); }
.error { color: var(--red); }
.muted { color: var(--ink2); font-size: 13px; }
.mono { font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.section-label {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 0 4px 8px;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3);
}
.section-label .right { letter-spacing: 0; text-transform: none; font-family: var(--mono); }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 12px;
}
.card-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink3); margin-bottom: 8px;
}

.kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; }
.kv > :last-child { font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: right; }
.kv + .kv { border-top: 1px solid var(--line); }

/* Точка состояния. Пульс у «ждёт ответа» — единственная анимация в списке:
 * она должна отбирать взгляд, остальные состояния — нет. */
.dot {
  position: relative; width: 10px; height: 10px; border-radius: 50%;
  flex: 0 0 auto; background: var(--ink3);
}
.dot.live { background: var(--lime); box-shadow: 0 0 10px var(--lime); }
.dot.busy { background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.dot.waiting { background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.dot.waiting::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--amber); animation: ccPulse 1.8s ease-out infinite;
}
.dot.dead { background: transparent; box-shadow: inset 0 0 0 1.5px var(--red); }
.dot.small { width: 8px; height: 8px; }

/* «работает» рядом с подписью — три точки, а не спиннер: спиннер обещает
 * прогресс, которого мы не знаем. */
.dots { display: inline-flex; gap: 3px; align-items: center; }
.dots i { width: 4px; height: 4px; border-radius: 2px; background: currentColor; animation: ccDots 1.2s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: .2s; }
.dots i:nth-child(3) { animation-delay: .4s; }

.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.badge {
  height: 26px; padding: 0 10px; border-radius: 8px;
  background: var(--card2); border: 1px solid var(--line);
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: 11px; color: var(--ink2);
}
.badge.accent { color: var(--lime); }

.btn {
  height: 46px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card2); color: var(--ink);
  font: 600 14.5px var(--sans); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:active { opacity: .65; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--ink); color: var(--bg); border-color: transparent; }
.btn.danger { color: var(--red); border-color: var(--red-soft); background: var(--red-soft); }
.btn.small { height: 32px; padding: 0 11px; border-radius: var(--radius-xs); font: 500 12.5px var(--mono); color: var(--ink2); background: var(--card); }
/* Шапка подэкрана стоит у самой кромки, где свечение сильнее всего, и сквозь
 * --card (белый с альфой .055) его ядро просвечивало — контрол читался
 * размытым. Плотности --card3 хватает, чтобы кнопка держала свою границу,
 * оставаясь стеклянной, как пилюля устройства в макете. */
.chat-bar .btn.small, .sub-nav .btn.small {
  background: var(--card3); color: var(--ink); border-color: var(--card3);
}
.btn.wide { width: 100%; }
.btn.tall { height: 54px; border-radius: var(--radius); font-size: 15px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.actions .btn { flex: 1 1 auto; }
.icon-btn {
  height: 26px; padding: 0 9px; border: 0; border-radius: 8px;
  background: var(--card2); color: var(--ink);
  font: 500 11.5px var(--sans); cursor: pointer; flex: 0 0 auto;
}

/* ------------------------------------------------- сводка экрана «Сессии» */
.headline { font-size: 22px; line-height: 1.2; font-weight: 500; letter-spacing: -.01em; text-wrap: pretty; }

/* Полоска: один сегмент на сессию, цвет = состояние. Отвечает «сколько их и
 * что с ними» быстрее, чем чтение списка. */
.strip { display: flex; gap: 4px; margin-top: 14px; }
.strip span { flex: 1; height: 6px; border-radius: 3px; background: var(--card3); }
.strip span.live { background: var(--lime); }
.strip span.busy, .strip span.waiting { background: var(--amber); }
.strip span.dead { background: var(--red); opacity: .55; }

.summary { margin-top: 10px; font-family: var(--mono); font-size: 12px; color: var(--ink2); }

.tiles { display: flex; gap: 8px; margin-top: 14px; }
.tile {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink);
  font-family: var(--mono); font-size: 11.5px; cursor: pointer;
}
.tile .label { color: var(--ink3); flex: 0 0 auto; }
.tile .val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --------------------------------------------------------- список сессий */
.list { display: flex; flex-direction: column; gap: 8px; }
.row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 14px 14px 16px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); cursor: pointer;
}
.row:active { opacity: .7; }
.row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.row-head { display: flex; align-items: baseline; gap: 8px; }
.row-name { font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-kind { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); flex: 0 0 auto; }
.row-sub {
  font-family: var(--mono); font-size: 12px; color: var(--ink2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; }
.row-state { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.row-state.live { color: var(--lime); }
.row-state.busy, .row-state.waiting { color: var(--amber); }
.row-state.dead { color: var(--red); }
.row-time { font-family: var(--mono); font-size: 11px; color: var(--ink3); }

/* Нижняя панель действий прибита к нижней кромке экрана — сосед прокрутки в
 * колонке #view.flush, не её содержимое. Короткий список оставляет над ней
 * пустое место, и это правильно: главное действие должно быть в одном и том
 * же месте под большим пальцем, а не гулять по экрану вслед за длиной списка.
 * Ранняя версия отъедала лишние 24px отрицательным margin-top — отсюда была
 * дыра шире ожидаемой; теперь панель занимает ровно свою высоту. */
.bottom-bar {
  flex: 0 0 auto; display: flex; gap: 10px;
  padding: 12px 20px calc(env(safe-area-inset-bottom) + 20px);
  background: linear-gradient(to top, var(--bg) 72%, transparent);
}
.bottom-bar .btn { flex: 1; }
/* Quick RC — второе действие в паре с «Новой сессией»: запуск RC в папке по
 * умолчанию, без мастера. */
.bottom-bar .btn.secondary { background: var(--card2); color: var(--ink); }
/* Плюс на «Новой сессии» — как в макете: крупнее подписи и тоньше её. */
.bottom-bar .plus { font-size: 20px; line-height: 1; font-weight: 400; }

/* ------------------------------------------------------- карточка сессии */
.hero-state {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.hero-state.live { color: var(--lime); }
.hero-state.busy, .hero-state.waiting { color: var(--amber); }
.hero-state.dead { color: var(--red); }
.hero-name { margin-top: 8px; font-size: 32px; line-height: 1.1; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
.hero-dir { margin-top: 8px; font-family: var(--mono); font-size: 13px; color: var(--ink2); word-break: break-all; }

.grid3 { display: flex; gap: 8px; margin-top: 8px; }
.grid3 .btn {
  flex: 1; height: 60px; border-radius: var(--radius-sm);
  flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 500;
  background: var(--card);
}

.connect-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.connect-row code { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12.5px; line-height: 1.5; word-break: break-all; }

/* Тихий список: переименовать / рестарт — и отдельно опасная группа.
 * Разделение не косметическое: «стоп» и «забыть» не должны стоять в одном
 * ряду с безобидными действиями. */
.listgroup {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); overflow: hidden; margin-bottom: 16px;
}
.listgroup-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 48px; padding: 10px 16px;
  border: 0; border-bottom: 1px solid var(--line);
  background: transparent; color: var(--ink);
  font: 14.5px var(--sans); text-align: left; cursor: pointer;
}
.listgroup-item:last-child { border-bottom: 0; }
.listgroup-item:active { background: var(--card2); }
.listgroup-item .hint { color: var(--ink3); font-size: 12px; text-align: right; flex: 0 0 auto; }
.listgroup-item .grow { flex: 1; min-width: 0; }
.listgroup-item .sub { margin-top: 2px; color: var(--ink2); font-size: 12px; font-weight: 400; }
.listgroup-item .title { font-weight: 500; }
.listgroup-item.warn .title { color: var(--amber); }
.listgroup-item.danger .title { color: var(--red); }

.table { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); overflow: hidden; }
.table-row { display: flex; justify-content: space-between; gap: 10px; padding: 11px 16px; font-size: 13.5px; }
.table-row + .table-row { border-top: 1px solid var(--line); }
.table-row > :first-child { min-width: 0; }
.table-row > :not(:first-child) {
  font-family: var(--mono); font-size: 12.5px; color: var(--ink2);
  white-space: nowrap; flex: 0 0 auto;
}

/* ------------------------------------------------------------------- чат */
.chat { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.chat-bar, .sub-nav {
  display: flex; align-items: center; gap: 10px;
  padding: calc(env(safe-area-inset-top) + 8px) 16px 8px;
  flex: 0 0 auto;
}
.chat-bar .grow, .sub-nav .grow { flex: 1; min-width: 0; }
.chat-bar .name, .sub-nav .name { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-bar .state { display: flex; align-items: center; gap: 6px; margin-top: 1px; font-size: 12px; color: var(--ink2); }
.chat-bar .state.live { color: var(--lime); }
.chat-bar .state.busy, .chat-bar .state.waiting { color: var(--amber); }
.chat-bar .state.dead { color: var(--red); }

.back-btn {
  width: 36px; height: 36px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--ink); cursor: pointer;
  font-size: 18px; line-height: 1;
}

/* Лента переписки строится из JSONL-транскрипта Claude Code, а не из пейна:
 * пейн — alternate screen без скроллбэка, история из него недоступна
 * физически (см. agent/transcript.py). */
.chat-log {
  flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px 8px;
  display: flex; flex-direction: column; gap: 14px; -webkit-overflow-scrolling: touch;
}
/* Короткая переписка прижимается ко дну, а не висит под шапкой: новое
 * сообщение должно появляться там же, где ты только что печатал. Отступ на
 * первом элементе, а не justify-content: flex-end — последний в прокрутке
 * обрезает верх ленты, когда сообщений становится больше экрана. */
.chat-log > :first-child { margin-top: auto; }

.msg { display: flex; flex-direction: column; }
.msg-user { align-items: flex-end; }
.msg-assistant { align-items: flex-start; }

.bubble {
  max-width: 88%; padding: 10px 14px; border-radius: var(--radius);
  font-size: 14.5px; line-height: 1.45;
  white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere;
}
.msg-user .bubble { background: var(--card2); border: 1px solid var(--line); border-bottom-right-radius: 6px; }
.msg-assistant .bubble { background: var(--card); }
.msg-time { display: block; margin-top: 4px; font-family: var(--mono); font-size: 10.5px; color: var(--ink3); }

/* markdown-лайт внутри пузыря и ответа «Спросить» — своих отступов у блоков
 * нет, весь ритм задаёт контейнер (padding) и margin-top на непервом блоке */
.bubble .md-p, .bubble .md-code, .bubble .md-list, .bubble .md-quote, .bubble .md-h,
.ask-a .md-p, .ask-a .md-code, .ask-a .md-list, .ask-a .md-quote, .ask-a .md-h { margin: 0; }
.bubble .md-p + .md-p, .bubble .md-p + .md-code, .bubble .md-p + .md-list, .bubble .md-p + .md-quote, .bubble .md-p + .md-h,
.bubble .md-code + .md-p, .bubble .md-list + .md-p, .bubble .md-quote + .md-p, .bubble .md-h + .md-p,
.bubble .md-code + .md-code, .bubble .md-list + .md-list,
.ask-a .md-p + .md-p, .ask-a .md-p + .md-code, .ask-a .md-p + .md-list, .ask-a .md-p + .md-quote, .ask-a .md-p + .md-h,
.ask-a .md-code + .md-p, .ask-a .md-list + .md-p, .ask-a .md-quote + .md-p, .ask-a .md-h + .md-p,
.ask-a .md-code + .md-code, .ask-a .md-list + .md-list { margin-top: 8px; }
.bubble code, .ask-a code {
  padding: 1px 5px; border-radius: 5px; background: var(--card3);
  font-family: var(--mono); font-size: 12.5px;
}
.bubble .md-code, .ask-a .md-code {
  padding: 10px 12px; border-radius: var(--radius-xs); background: var(--card3);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.bubble .md-code code, .ask-a .md-code code { padding: 0; background: none; font-size: 12.5px; white-space: pre; }
.bubble .md-list, .ask-a .md-list { padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.bubble .md-quote, .ask-a .md-quote { padding-left: 10px; border-left: 2px solid var(--line); color: var(--ink2); }
.bubble .md-h, .ask-a .md-h { font-weight: 600; }
.bubble a, .ask-a a { color: inherit; text-decoration: underline; text-decoration-color: var(--ink3); text-underline-offset: 2px; }

/* Вызовы инструментов — компактными чипами внутри пузыря: полезный след
 * «что именно делалось», но забивать переписку они не должны. */
.tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tool-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  height: 24px; padding: 0 8px; border-radius: 7px;
  background: var(--card2); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px;
}
.tool-chip b { font-weight: 400; color: var(--ink3); flex: 0 0 auto; }
.tool-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.day-sep {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3);
}
.day-sep::before, .day-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.term {
  max-height: 42vh; overflow: auto; margin: 12px 16px 0; padding: 10px 14px 12px;
  background: var(--term); color: var(--term-ink);
  border-radius: 14px;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
}
.card .term, .sheet .term { margin: 8px 0 0; max-height: 34vh; }

.keys { display: flex; gap: 6px; padding: 0 16px; }

/* Варианты ответа на вопрос TUI. Живут над клавишами и во всю ширину: это
 * ответ на заданный вопрос, а не вспомогательная клавиша, и промахнуться
 * пальцем по нужному пункту нельзя. */
.picks { display: flex; flex-direction: column; gap: 6px; padding: 0 16px 8px; }
.pick {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 44px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card2); color: var(--ink);
  font: 14.5px var(--sans); text-align: left; cursor: pointer;
}
.pick b { font-family: var(--mono); font-size: 12px; color: var(--ink3); font-weight: 500; }
.pick.active { border-color: var(--amber); background: var(--amber-soft); }
.pick.active b { color: var(--amber); }
.pick:disabled { opacity: .5; }

.chat-input-row {
  display: flex; gap: 8px; align-items: flex-end;
  padding: 10px 16px calc(env(safe-area-inset-bottom) + 12px);
  background: linear-gradient(to top, var(--bg) 80%, transparent);
}
.chat-input {
  flex: 1; min-width: 0; max-height: 34vh; padding: 12px 16px;
  border: 1px solid var(--line); border-radius: 23px;
  background: var(--card2); color: var(--ink);
  font: 15px var(--sans); resize: none; overflow-y: auto;
}
.chat-input:focus { outline: none; border-color: var(--card3); }
.chat-input-row .btn.primary { width: 46px; height: 46px; border-radius: 23px; padding: 0; flex: 0 0 auto; }

.ask-thread { flex: 1; overflow-y: auto; padding: 18px 16px 8px; display: flex; flex-direction: column; gap: 14px; }
.ask-q { align-self: flex-end; max-width: 82%; padding: 10px 14px; border-radius: 18px 18px 6px 18px; background: var(--card2); border: 1px solid var(--line); font-size: 14.5px; line-height: 1.45; }
.ask-a { align-self: flex-start; max-width: 92%; padding: 12px 14px; border-radius: 18px; background: var(--card); font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; }

/* -------------------------------------------------------------- шторка */
.sheet-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .45); display: flex; align-items: flex-end; }
.sheet {
  width: 100%; background: var(--sheet);
  border-radius: 28px 28px 0 0;
  padding: 10px 20px calc(env(safe-area-inset-bottom) + 28px);
  max-height: 84vh; overflow-y: auto;
  animation: ccSheet .28s cubic-bezier(.2, .8, .2, 1);
  box-shadow: 0 -20px 60px rgba(0, 0, 0, .35);
}
.sheet::before { content: ""; display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--card3); margin: 0 auto 18px; }
.sheet h3 { margin: 0 0 14px; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.sheet-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 54px; padding: 10px 16px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink);
  font: 15px var(--sans); text-align: left; cursor: pointer; margin-bottom: 8px;
}
.sheet-item.active { border-color: var(--card3); background: var(--card2); }
.sheet-item .grow { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Предупреждение, которое нельзя пролистать мимо: показывается там, где
 * повторить действие уже нельзя (токен устройства — один раз). */
.notice {
  padding: 12px 14px; border-radius: 14px; background: var(--amber-soft);
  font-size: 13.5px; line-height: 1.5; text-wrap: pretty; margin-bottom: 12px;
}
.notice b { color: var(--amber); }

/* ------------------------------------------------- элементы мастера/форм */
/* Сегментированный выбор — компактнее выпадающих списков и не прячет
 * варианты: на телефоне важно видеть, из чего выбираешь, одним взглядом. */
.seg { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.seg-btn {
  flex: 1 1 auto; height: 38px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--radius-xs);
  background: var(--card); color: var(--ink);
  font: 500 13px var(--sans); cursor: pointer;
}
.seg-btn.active { background: var(--ink); color: var(--bg); border-color: transparent; }
/* Карточки режима в мастере: заметно выше сегментированной полосы, потому
 * что несут вторую строку с последствиями выбора — как в концепте. */
.mode-cards { display: flex; gap: 6px; margin-bottom: 12px; }
.mode-card {
  flex: 1; min-width: 0; padding: 12px 12px 11px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--card); color: var(--ink);
  text-align: left; cursor: pointer; font: inherit;
}
.mode-card .title { font-size: 14px; font-weight: 600; }
.mode-card .sub { margin-top: 3px; font-size: 11px; line-height: 1.35; opacity: .65; }
.mode-card.active { background: var(--ink); color: var(--bg); border-color: transparent; }

.seg.mono { gap: 4px; }
.seg.mono .seg-btn { flex: 1 1 0; min-width: 0; padding: 0 4px; font-family: var(--mono); font-size: 11px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.chip {
  height: 34px; padding: 0 13px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--ink);
  font-family: var(--mono); font-size: 12.5px; cursor: pointer;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chip.active { background: var(--ink); color: var(--bg); border-color: transparent; }
.chip.dashed { border-style: dashed; font-family: var(--sans); color: var(--ink2); }

.field {
  width: 100%; margin: 0 0 12px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--card); color: var(--ink); font: 15px var(--sans);
}
.field:focus { outline: none; border-color: var(--card3); }
.field.mono { font-family: var(--mono); font-size: 13px; }
textarea.field { resize: none; line-height: 1.45; }
input[type="file"].field { font-size: 13px; }

/* Переключатель-строка: подпись объясняет последствие, а не повторяет
 * название — иначе тумблер приходится пробовать, чтобы понять. */
.switch {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 12px 14px; margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--card); color: var(--ink); text-align: left; cursor: pointer;
  font: 14px var(--sans);
}
.switch .sub { margin-top: 2px; font-size: 12px; color: var(--ink2); }
.switch .knob { width: 44px; height: 26px; border-radius: 13px; background: var(--card3); position: relative; flex: 0 0 auto; transition: background .2s; }
.switch .knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); transition: left .2s; }
.switch.on .knob { background: var(--lime); }
.switch.on .knob::after { left: 21px; }

/* Радио-строка мастера прав: цена ошибки тут выше средней, поэтому у каждого
 * режима подпись «что именно случится». */
.radio {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; color: var(--ink); font: 14px var(--sans);
  text-align: left; cursor: pointer;
}
.radio:last-child { border-bottom: 0; }
.radio .mark { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--ink3); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.radio .mark::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.radio.active .mark { border-color: var(--ink); }
.radio.active .mark::after { background: var(--ink); }
.radio .title { font-weight: 500; }
.radio .sub { margin-top: 2px; font-size: 12px; color: var(--ink2); }
.radio.bypass { border: 1px solid var(--red-soft); border-radius: var(--radius-sm); margin-top: 10px; }
.radio.bypass .title { color: var(--red); font-weight: 600; }
.radio.bypass .mark { border-color: var(--red); }
.radio.bypass.active { background: var(--red-soft); }
.radio.bypass.active .mark::after { background: var(--red); }

/* ------------------------------------------------------- индикаторы нагрузки */
.metric { margin: 12px 0; }
.meter { height: 8px; border-radius: 4px; background: var(--card2); overflow: hidden; }
.meter-fill { height: 100%; border-radius: 4px; background: var(--lime); transition: width .4s ease; }
.meter-fill.warm { background: var(--amber); }
.meter-fill.hot { background: var(--red); }

.big-number { font-family: var(--mono); font-size: 60px; line-height: 1; font-weight: 500; letter-spacing: -.04em; }

/* Разовые вопросы («Спросить»): лежат в том же транскрипте, но это не
 * переписка сессии — приглушаем и по умолчанию прячем (см. app.js). */
.msg.side .bubble { opacity: .72; border: 1px dashed var(--line); }
.side-toggle { align-self: center; }

/* --------------------------------------------------------------- вход */
.signin { display: flex; flex-direction: column; min-height: 100%; padding: 60px 8px 24px; }
.signin .title { margin-top: 34px; font-size: 32px; line-height: 1.1; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
.signin .lead { margin-top: 14px; font-size: 15.5px; line-height: 1.5; color: var(--ink2); text-wrap: pretty; }
.signin code { font-family: var(--mono); color: var(--ink); background: var(--card2); padding: 1px 6px; border-radius: 6px; }
.signin .foot { margin-top: auto; padding-top: 28px; text-align: center; font-family: var(--mono); font-size: 11px; color: var(--ink3); }

/* Скелет загрузки: показывает форму будущего списка, а не крутилку —
 * ожидание по VPN тут норма, и его лучше объяснить, чем спрятать. */
.skel { display: flex; flex-direction: column; gap: 8px; }
.skel-row {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 14px 16px 16px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line);
  animation: ccSkel 1.4s ease-in-out infinite;
}
.skel-row .bones { flex: 1; }
.skel-row .bone { height: 12px; border-radius: 4px; background: var(--card3); }
.skel-row .bone.thin { height: 10px; background: var(--card2); margin-top: 7px; }
.skel-note { display: flex; align-items: center; gap: 8px; margin: 4px 0 14px; font-family: var(--mono); font-size: 12px; color: var(--ink2); }