/* Пульт — Telegram Mini App.
 *
 * Цвета берём из темы Telegram (--tg-theme-*), а не задаём свои: приложение
 * открывается внутри клиента, и своя палитра выглядела бы там инородно. У
 * каждой переменной есть запасное значение — тёмная OLED-схема, потому что
 * сессии смотрят ночью с телефона; в светлой теме Telegram подставит своё.
 *
 * Шрифты системные намеренно. Технический характер даёт моноширинный шрифт там,
 * где он несёт смысл (команды, пути, id), а не веб-шрифт с Google Fonts: за
 * него платит мобильная сеть на каждом открытии.
 */

:root {
  --bg:        var(--tg-theme-bg-color, #020617);
  --card:      var(--tg-theme-secondary-bg-color, #0f172a);
  --card-2:    color-mix(in srgb, var(--card) 70%, var(--bg));
  --text:      var(--tg-theme-text-color, #f8fafc);
  --muted:     var(--tg-theme-hint-color, #94a3b8);
  --accent:    var(--tg-theme-button-color, #22c55e);
  --on-accent: var(--tg-theme-button-text-color, #04120a);
  --link:      var(--tg-theme-link-color, #60a5fa);
  --line:      color-mix(in srgb, var(--text) 14%, transparent);

  /* Состояния. Цвет — не единственный признак: рядом всегда есть текст.
     Значения подобраны под тёмный фон; светлый вариант ниже. */
  --wait:   #f59e0b;   /* ждёт тебя */
  --work:   #38bdf8;   /* в работе  */
  --done:   #22c55e;
  --fail:   #f87171;
  --stop:   var(--muted);

  --r: 14px;
  --gap: 12px;
  --tap: 44px;                            /* минимальная цель нажатия */
  --linkH: 37px;                          /* высота строки связи; от неё считаются отступы */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Светлая тема Telegram. Те же оттенки на белом дают контраст ~2:1 и текст
   «ждёт: вопрос» становится нечитаемым, поэтому для неё — отдельные, тёмные
   варианты (все ≥ 4.5:1 на белом). Тему проставляет app.js по tg.colorScheme:
   Telegram не обязан совпадать с системной prefers-color-scheme. */
:root[data-theme="light"] {
  --bg:     var(--tg-theme-bg-color, #ffffff);
  --card:   var(--tg-theme-secondary-bg-color, #f1f5f9);
  --text:   var(--tg-theme-text-color, #0f172a);
  --muted:  var(--tg-theme-hint-color, #475569);
  --wait:   #b45309;
  --work:   #0369a1;
  --done:   #15803d;
  --fail:   #b91c1c;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden;                     /* горизонтальному скроллу здесь неоткуда взяться */
  -webkit-text-size-adjust: 100%;
}

h1 { font-size: 22px; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 18px; margin: 0; letter-spacing: -.01em; }
p  { margin: 0; }
.muted { color: var(--muted); font-size: 14px; }
.mono  { font-family: var(--mono); font-size: 13px; }

/* Фокус виден всегда — outline не убираем, а заменяем на явное кольцо. */
:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ── строка связи ──────────────────────────────────────────────────── */
/* Фиксированная, а не sticky: экраны-«шторки» перекрывали её собой, и заголовок
   сессии уезжал под неё. Высота задана жёстко, текст не переносится — от неё
   считается верхний отступ и body, и шторок. */
.link {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  height: var(--linkH);
  display: flex; align-items: center; gap: 8px;
  padding: 0 16px; font-size: 14px; font-weight: 500;
  border-bottom: 1px solid var(--line);
  background: var(--card);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body { padding-top: var(--linkH); }
.link__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted); }
.link--ok   { color: var(--muted); }
.link--ok   .link__dot { background: var(--done); }
.link--wait { color: var(--wait); }
.link--wait .link__dot { background: var(--wait); animation: pulse 1.4s ease-in-out infinite; }
.link--off  { color: var(--fail); background: color-mix(in srgb, var(--fail) 16%, var(--card)); }
.link--off  .link__dot { background: var(--fail); }

@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* ── каркас ────────────────────────────────────────────────────────── */
.screen { padding: 0 16px calc(24px + var(--safe-b)); max-width: 720px; margin: 0 auto; }
.screen--sheet {
  position: fixed; top: var(--linkH); left: 0; right: 0; bottom: 0; z-index: 20;
  overflow-y: auto; overscroll-behavior: contain; background: var(--bg);
  padding: 0 16px calc(24px + var(--safe-b));
}

.head { display: flex; align-items: center; gap: 10px; padding: 16px 0 12px; }
.head--sticky {
  position: sticky; top: 0; z-index: 10;
  background: var(--bg); border-bottom: 1px solid var(--line); margin-bottom: 12px;
}
.head h1, .head h2 { flex: 1; min-width: 0; }
.head__mid { flex: 1; min-width: 0; }
.head__mid h2,
.head__mid p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── группы списка ─────────────────────────────────────────────────── */
.group { margin-bottom: 22px; }
.group__head {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); margin-bottom: 8px;
}
.group__count {
  font-variant-numeric: tabular-nums; background: var(--card);
  border-radius: 99px; padding: 1px 8px; font-size: 12px;
}
.group--wait .group__head { color: var(--wait); }

/* ── карточка сессии в списке ──────────────────────────────────────── */
.card {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid transparent; border-left: 3px solid var(--stop);
  border-radius: var(--r); padding: 12px 14px; margin-bottom: 8px;
  color: inherit; font: inherit;
  transition: background 180ms ease, border-color 180ms ease;
}
.card:hover  { background: color-mix(in srgb, var(--text) 6%, var(--card)); }
.card:active { background: color-mix(in srgb, var(--text) 10%, var(--card)); }
.card--wait { border-left-color: var(--wait); }
.card--work { border-left-color: var(--work); }
.card--done { border-left-color: var(--done); }
.card--fail { border-left-color: var(--fail); }

.card__top { display: flex; align-items: baseline; gap: 8px; }
.card__no  { font-family: var(--mono); font-size: 12px; color: var(--muted); flex: none; }
.card__title {
  flex: 1; min-width: 0; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card__age { font-size: 12px; color: var(--muted); flex: none; font-variant-numeric: tabular-nums; }
.card__meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; }
.card__proj {
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  background: var(--card-2); border-radius: 6px; padding: 1px 6px; flex: none;
}
.card__what { color: var(--wait); font-weight: 500; }
.card__act  {
  color: var(--muted); font-family: var(--mono); font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

details.group--recent > summary {
  cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); padding: 6px 0;
  display: flex; align-items: center; gap: 8px; min-height: var(--tap);
}
details.group--recent > summary::-webkit-details-marker { display: none; }
details.group--recent > summary::after {
  content: ""; width: 7px; height: 7px; margin-left: 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform 180ms ease;
}
details[open].group--recent > summary::after { transform: rotate(-135deg); }

/* ── пустое состояние ──────────────────────────────────────────────── */
.empty { text-align: center; padding: 48px 24px; color: var(--muted); }
.empty svg { width: 40px; height: 40px; opacity: .5; margin-bottom: 12px; }

/* ── лента сессии ──────────────────────────────────────────────────── */
/* Нижний отступ = высота липкой панели действий: иначе последнее сообщение
   ленты навсегда остаётся под кнопкой «Остановить». */
.feed { display: flex; flex-direction: column; gap: 10px; padding-bottom: 84px; }
.msg { border-radius: var(--r); padding: 10px 12px; font-size: 15px; overflow-wrap: anywhere; }
.msg--user   { background: var(--accent); color: var(--on-accent); align-self: flex-end;
               max-width: 88%; }
.msg--agent  { background: var(--card); }
.msg--tool   { background: transparent; border: 1px dashed var(--line); color: var(--muted);
               font-family: var(--mono); font-size: 12.5px; padding: 7px 10px; }
.msg--tool_error { background: color-mix(in srgb, var(--fail) 16%, var(--card));
                   color: var(--fail); font-family: var(--mono); font-size: 12.5px; }

/* ── карточки-запросы: вопрос, план, разрешение ────────────────────── */
.ask { border-radius: var(--r); padding: 14px; margin-bottom: 12px; background: var(--card);
       border: 1px solid var(--line); border-top: 3px solid var(--wait); }
.ask__kind { font-size: 12px; font-weight: 700; text-transform: uppercase;
             letter-spacing: .06em; color: var(--wait); margin-bottom: 6px; }
.ask__text { margin-bottom: 12px; overflow-wrap: anywhere; }
.ask pre {
  background: var(--bg); border-radius: 10px; padding: 10px; margin: 0 0 12px;
  max-height: 320px; overflow: auto;              /* длинный план скроллит сам, не страницу */
  font-family: var(--mono); font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ── кнопки ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--tap); padding: 10px 16px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  color: var(--text); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
  transition: background 180ms ease, opacity 180ms ease;
}
.btn:hover:not(:disabled)  { background: color-mix(in srgb, var(--text) 8%, var(--card)); }
/* Обесцвечиваем, а не только гасим: яркий акцент на 50% прозрачности всё равно
   читался как «нажимай», хотя кнопка заблокирована. */
.btn:disabled { opacity: .45; filter: grayscale(.8); cursor: not-allowed; }
.btn--primary { background: var(--accent); color: var(--on-accent); border-color: transparent;
                font-weight: 600; }
.btn--primary:hover:not(:disabled) { background: color-mix(in srgb, #000 12%, var(--accent)); }
.btn--danger  { color: var(--fail); border-color: color-mix(in srgb, var(--fail) 40%, transparent); }
.btn--wide    { width: 100%; }
/* Компактная — про ширину, а не про высоту: цель нажатия остаётся 44px. */
.btn--compact { min-height: var(--tap); padding: 8px 14px; font-size: 14px; flex: none; }
.btn--icon    { min-width: var(--tap); padding: 10px; flex: none; background: transparent;
                border-color: transparent; }
.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2;
     stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Непрозрачная, а не градиентом: сквозь градиент просвечивала лента, и кнопка
   «Остановить» читалась поверх строки лога. */
.actions {
  position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 -16px; padding: 10px 16px calc(10px + var(--safe-b));
  background: var(--bg); border-top: 1px solid var(--line);
}
.actions .btn { flex: 1 1 auto; }
.reply { display: flex; gap: 8px; width: 100%; }
.reply textarea { flex: 1; }

/* ── формы ─────────────────────────────────────────────────────────── */
.form { display: flex; flex-direction: column; gap: 20px; }
.field { border: 0; padding: 0; margin: 0; display: block; }
.field__label { display: block; font-size: 13px; font-weight: 600; color: var(--muted);
                text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; padding: 0; }
textarea, input[type=text] {
  width: 100%; background: var(--card); color: var(--text);
  border: 1px solid var(--line); border-radius: 12px; padding: 12px;
  font: inherit; font-size: 16px;                 /* 16px — иначе iOS зумит поле при фокусе */
  resize: vertical; min-height: var(--tap);
}
textarea::placeholder { color: var(--muted); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: var(--tap); padding: 9px 14px; cursor: pointer;
  background: var(--card); color: var(--text);
  border: 1px solid var(--line); border-radius: 99px; font: inherit; font-size: 15px;
  transition: background 180ms ease, border-color 180ms ease;
}
.chip:hover { background: color-mix(in srgb, var(--text) 8%, var(--card)); }
.chip[aria-checked=true] {
  background: var(--accent); color: var(--on-accent);
  border-color: transparent; font-weight: 600;
}

.switch { display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
          min-height: var(--tap); }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__box {
  width: 46px; height: 28px; border-radius: 99px; background: var(--card);
  border: 1px solid var(--line); position: relative; flex: none; margin-top: 2px;
  transition: background 180ms ease;
}
.switch__box::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--muted); transition: transform 180ms ease, background 180ms ease;
}
.switch input:checked + .switch__box { background: var(--accent); border-color: transparent; }
.switch input:checked + .switch__box::after { transform: translateX(18px); background: var(--on-accent); }
.switch input:focus-visible + .switch__box { outline: 2px solid var(--link); outline-offset: 2px; }
.switch small { display: block; }
.hint { margin-top: 8px; }

/* ── скелет и тост ─────────────────────────────────────────────────── */
.sk__row { height: 68px; border-radius: var(--r); background: var(--card);
           margin-bottom: 8px; animation: shim 1.4s ease-in-out infinite; }
.sk__row:nth-child(2) { animation-delay: .15s }
.sk__row:nth-child(3) { animation-delay: .3s }
@keyframes shim { 0%,100% { opacity: .55 } 50% { opacity: 1 } }

.toast {
  position: fixed; left: 16px; right: 16px; bottom: calc(20px + var(--safe-b)); z-index: 50;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; font-size: 15px; text-align: center;
  box-shadow: 0 8px 28px rgb(0 0 0 / .4);
}
.toast--bad { border-color: var(--fail); color: var(--fail); }

/* Никакой анимации тем, кто её отключил. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}