/* Тёмная тема в цветах двери (#0e0e10): окно и дверь стоят рядом на одном
   столе, и разнобой фонов читается как «два разных инструмента».

   Файл читается сверху вниз как одна раскладка — МАКА. Телефонная целиком
   живёт в единственном медиазапросе в самом конце (≤700px) и не трогает выше
   ни строки: одно ядро на два устройства, а не две сборки. Проверяет это
   ревьюер глазами и тест ширины (ui/phone.test.js): разъедься число здесь и
   PHONE_MAX в main.js — телефон получил бы телефонную раскладку с живым
   websocket внутри. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #0e0e10;
  color: #eee;
  font-family: -apple-system, system-ui, "Segoe UI", sans-serif;
  font-size: 14px;
  overflow: hidden;                /* прокручиваются колонки, не страница */
}

/* Каркас окна: шапка фиксированной высоты, всё остальное — под ней. */
body {
  display: grid;
  grid-template-rows: 44px 1fr;
}

/* ---------- шапка ---------- */

#head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  background: #16171a;
  border-bottom: 1px solid #1e1f25;
}
.hgap { flex: 1 1 auto; }          /* всё, что правее, прижато к правому краю */

#hwait { font-weight: 600; font-variant-numeric: tabular-nums; }
#hwait.wait0 { color: #7d8aa0; }
/* Жёлтый — тот же сигнал, что и у ждущей плитки: один цвет = одно значение
   («тебя ждут»), чтобы взгляд ловил его без чтения. */
#hwait.waitN { color: #ffb02e; }

#head button {
  padding: 6px 11px;
  background: #1c2733;
  color: #bfe0ff;
  border: 0;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}
#head button:hover { background: #2a3b50; }
#head button:disabled { background: #16171a; color: #4a4d55; cursor: default; }

/* Строка-сводка: «работают: 2 · за сутки: 24 действия». Приглушённая — это
   фон, а не сигнал; сигналы в шапке ровно два (жёлтое «ждут» и красная
   пауза), и третий забрал бы у них внимание.
   min-width: 0 + ellipsis — иначе длинная сводка распирает шапку и выдавливает
   стоп-кран за край (тот же урок, что у колонки сессий). */
#hsum {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #7d8aa0;
  font-size: 12px;
}

/* Активный аккаунт подписки: «акк 6 · 5h:73% · 7d:77%». Стоит рядом со
   сводкой и приглушён так же — это фон, а не сигнал: проценты читают,
   когда сами захотели узнать, много ли сожжено. Не сжимается (flex 0 0):
   в отличие от сводки, обрезать проценты по середине бессмысленно. */
#hacc {
  /* Сжимается и обрезается, как сводка, и по той же причине: узкое окно мака
     (половина экрана 13") — это ~720px, а несжимаемые проценты выдавливали бы
     «ждут» и «к ждущему» в ДВЕ строки внутри 44-пиксельной шапки, где вторая
     строка просто обрезается. Проверено живьём в Chrome на 760px. */
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #7d8aa0;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* Шапке нельзя переноситься: её высота фиксирована сеткой (44px), и вторая
   строка не сжимает соседей, а уезжает под обрез. Слова короткие, места им
   надо мало — уступают сводка и аккаунт, у них для этого «…». Это про мак;
   телефон переносит шапку на вторую строку сам (см. медиазапрос внизу). */
#hwait, #head button, #hstale { white-space: nowrap; }

/* Снимок пульта протух (degraded.stale): поллер на a1 молчит дольше трёх
   своих тиков. Гасим ВСЮ шапку целиком, а не одну надпись: устарели все её
   числа разом — и «ждут», и «работают», и проценты аккаунта, — а приглушённый
   блок читается как «этому не верь» без единого слова. Само слово рядом со
   стоп-краном на случай, если приглушение примут за оформление. */
body.stale #head { opacity: .55; }
#hstale {
  padding: 3px 9px;
  border-radius: 8px;
  background: #3a3320;
  color: #ffd9a8;
  font-size: 12px;
}

/* Место стоп-крана. Пустое до первого удачного ответа сервера, но с
   минимальной шириной: когда кнопка появится, шапка не сдвинется.
   display:flex — авторский, поэтому прятать этот узел атрибутом hidden
   НЕЛЬЗЯ (см. комментарий в index.html); main.js его просто опустошает. */
#hpause {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex: 0 0 auto;
  min-width: 96px;
  min-height: 28px;
}

/* Стоп-кран нажат. Красное на кнопке — и вся шапка следом (body.paused ниже):
   человек обязан узнавать об этом боковым зрением, не вчитываясь. */
#hpause.on button {
  background: #6d1f24;
  color: #ffd7d7;
  font-weight: 600;
}
#hpause.on button:hover { background: #83262c; }

/* Не кнопка: отказ сервера («стоп-кран не для этого токена») и разовое
   сообщение о неудаче. Нажимать нечего — и вида кнопки у него нет. */
#hpause .pnote {
  font-size: 12px;
  color: #d8a0a0;
  white-space: nowrap;
}

/* Пауза включена — шапка целиком меняет цвет. Одно состояние, один сигнал:
   красная полоса над окном читается раньше, чем любая надпись в ней. */
body.paused #head {
  background: #2b1416;
  border-bottom-color: #6d1f24;
}

#hnet {
  padding: 3px 9px;
  border-radius: 8px;
  background: #5a3a1a;
  color: #ffd9a8;
  font-size: 12px;
}

/* ---------- тело: колонка сессий + рабочая область ---------- */

/* ЛОВУШКА ШИРИНЫ. min-width здесь — не украшение, а единственное, что
   держит страницу в границах окна.

   #body — элемент грида body, а у грид-элемента min-width по умолчанию
   `auto`, то есть «не уже своего содержимого». Дальше ширина ползёт ВВЕРХ:
   колонка грида растягивается под самого широкого жильца, и вместе с ней
   растягивается ШАПКА — она в той же колонке. Заметно это не по жильцу (у
   него своя прокрутка), а по краям шапки: стоп-кран и счётчик ожидающих
   уезжают за правый край, и добраться до них нельзя (страница по горизонтали
   не прокручивается, у html стоит overflow:hidden).

   Широких жильцов у нас двое, и оба неустранимы по существу:
   • снимок экрана сессии на телефоне — моноширинный <pre> БЕЗ переносов
     (правило в телефонном медиазапросе), иначе рамки TUI расползаются в
     кашу. Найдено живой проверкой в Chrome на 390×844: 448px при экране 390;
   • живой терминал на маке — xterm с ФИКСИРОВАННОЙ сеткой 200×50 (см. шапку
     ui/term.js: за размер окна tmux мы не воюем), это ~1445px независимо от
     того, какое у человека окно. Замер: страница 1725px при окне 1200.

   min-width:0 на #main не спасает ни в одном из двух случаев: он разрешает
   элементу СЖИМАТЬСЯ, но min-content ФЛЕКС-КОНТЕЙНЕРА всё равно считается по
   базовым размерам его детей. Резать ширину надо ровно здесь, на границе с
   гридом. Правило общее, а не телефонное (каким было до этапа 6.5): трап
   один и тот же, разные у него только жильцы. */
#body { display: flex; min-height: 0; min-width: 0; }

/* Второй жилец ТОЙ ЖЕ грид-колонки — шапка, и трап у неё тот же: min-width
   `auto` у грид-элемента. Дети шапки сжимаются («…» у #hsum/#hacc), но это
   не помогает, пока сам #head вправе требовать свой min-content: колонка
   растягивается под него, и стоп-кран уезжает за обрез html. Ниже 700px
   спасал телефонный медиазапрос (прячет #hsum/#hacc), а полоса 700–857px —
   портрет любого айпада — не проверялась: на 820 стоп-кран обрезан, на 744
   (mini) невидим целиком. Замок тот же, что у #body строкой выше. */
#head { min-width: 0; }

/* flex: 0 0 240px + min-width: 0 — прямой урок двери: без min-width колонка
   раздувается под самое длинное имя проекта («szmarket-redesign») и отбирает
   ширину у терминала. С ним ширина фиксирована, а имена жмутся в «…». */
#tiles {
  flex: 0 0 240px;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  overflow-y: auto;
  background: #000;
  border-right: 1px solid #1e1f25;
}

#main {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 18px 20px;
}
#main h1 { margin: 0 0 8px; font-size: 20px; font-weight: 600; }
#main .mstate { margin: 0 0 10px; color: #9fb3cc; display: flex; align-items: center; gap: 8px; }
#main .msub {
  margin: 0 0 14px;
  /* Строка сообщения не растягивается на весь монитор: длинная строка через
     полтора метра экрана нечитаема, глаз теряет начало следующей. */
  max-width: 78ch;
  padding: 10px 12px;
  background: #16171a;
  border-radius: 10px;
  color: #cfd2d8;
  white-space: pre-wrap;           /* last_message бывает многострочным */
  overflow-wrap: anywhere;
}
.hint { color: #7d8aa0; font-size: 13px; }

/* ---------- плитка ---------- */

.tile {
  flex: 0 0 auto;
  display: block;
  width: 100%;
  min-width: 0;
  text-align: left;
  padding: 9px 11px;
  background: #1c2733;
  color: #bfe0ff;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  /* transform-переходом управляет FLIP из tiles.js: он ставит и снимает
     transition сам, поэтому здесь его НЕ объявляем — иначе анимировался бы
     и «инвертирующий» кадр, и плитка ездила бы дважды. */
}
.tile:hover { background: #2a3b50; }
.tile.on { background: #2d5a8a; color: #fff; box-shadow: inset 0 0 0 1px #4a90d9; }

.tile .trow { display: flex; align-items: center; gap: 7px; min-width: 0; }
.tile .tname {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
/* Возраст состояния — справа, моноширинными цифрами: число меняется раз в
   секунду-другую, и без tabular-nums имя слева дёргалось бы вместе с ним. */
.tile .tsince {
  flex: 0 0 auto;
  color: #7d8aa0;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.tile.on .tsince { color: #cfe3ff; }
/* Бейдж паузы вкладки. Цвет — тот же приглушённый, что у возраста, а не
   жёлтый: жёлтым в этом окне говорится ровно одно («на тебе ход»), и второе
   значение у одного цвета стоило бы дороже заметности. Узнаётся бейдж по
   самому знаку.
   display здесь НЕ задаём намеренно: правило [hidden]{display:none} живёт в
   стилях БРАУЗЕРА, и любое авторское `display` его перебило бы — тот же
   капкан, что уже стоил работоспособности hidden у .tsub и .thealth. */
.tile .tpause {
  flex: 0 0 auto;
  color: #7d8aa0;
  font-size: 11px;
}
.tile.on .tpause { color: #cfe3ff; }

/* Вторая строка: причина ожидания или последнее сообщение. Одна строка с
   «…» — плитка обязана оставаться одного размера, иначе список прыгает. */
.tile .tsub {
  display: block;
  margin-top: 3px;
  padding-left: 14px;              /* под точку, чтобы текст был на одной оси с именем */
  color: #8a97a8;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tile.on .tsub { color: #cfe3ff; }
/* Здоровье вкладки: «39% · 602k/1000k · Fable 5·xhigh». Третья строка и
   САМАЯ мелкая — это фон, к которому обращаются намеренно, а не сигнал.
   Сигнал в ней ровно один и цветом: остаток контекста (healthTone в core.js).
   tabular-nums — числа меняются на глазах у работающей сессии, и без
   моноширинных цифр строка дёргалась бы вместе с ними. */
.tile .thealth {
  display: block;
  margin-top: 2px;
  padding-left: 14px;              /* на одну ось с именем и второй строкой */
  color: #7d8aa0;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Три цвета — те же три, что у точек статуса: один цвет = одно значение во
   всём окне. Зелёный тут приглушать нельзя до незаметности и нельзя делать
   ярче точки: это подпись под ней, а не второй индикатор.
   Цвет переживает выделение плитки намеренно (у .tsub — наоборот): «12%
   контекста» на открытой сессии важнее, чем ровный синий фон. */
.tile .thealth.h-ok { color: #36c45a; }
.tile .thealth.h-warn { color: #ffb02e; }
.tile .thealth.h-crit { color: #e05252; }
/* Правило [hidden]{display:none} живёт в стилях БРАУЗЕРА, и любое авторское
   `display` его перебивает — то есть строки выше молча ломали атрибут hidden
   на обоих узлах. Тот же капкан обойдён у #gate ниже. Возвращаем hidden силу
   явно: узел не должен ни занимать место, ни доезжать до скринридера. Без
   этого заглушка «здоровья» останется видимой навсегда, как только этап
   оркестратора положит в неё текст. */
.tile .tsub[hidden], .tile .thealth[hidden] { display: none; }

/* ---------- точка статуса ---------- */

.dot {
  flex: 0 0 auto;
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3a4150;
}
/* working — зелёная с пульсом: единственный статус, который меняется сам по
   себе, и пульс отличает «работает прямо сейчас» от «замерла зелёной». */
.dot.working { background: #36c45a; box-shadow: 0 0 6px #36c45a; animation: pulse 1.6s ease-in-out infinite; }
.dot.waiting { background: #ffb02e; box-shadow: 0 0 6px #ffb02e; }
.dot.idle { background: #5a5f6a; }
.dot.off { background: #22242b; box-shadow: inset 0 0 0 1px #33363f; }
/* unknown и limit_blocked — красная: «посмотри на меня», а не рабочий статус */
.dot.alert { background: #e05252; box-shadow: 0 0 6px #e05252; }

@keyframes pulse { 50% { opacity: .35; } }
/* Уважаем системную настройку «меньше движения»: пульс — украшение, цвет и
   так несёт весь смысл. */
@media (prefers-reduced-motion: reduce) {
  .dot.working { animation: none; }
}

.tempty { color: #5a5f6a; font-size: 12px; padding: 8px 4px; margin: 0; }

/* ---------- ворота токена ---------- */

#gate {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, .6);
  display: flex;
  align-items: center;
  justify-content: center;
}
#gate[hidden] { display: none; }    /* иначе display:flex перебил бы hidden */

#gateform {
  width: min(90%, 340px);
  background: #16171a;
  border-radius: 14px;
  padding: 20px 18px 16px;
}
#gateform h2 { margin: 0 0 6px; font-size: 17px; font-weight: 600; }
#gateform .hint { margin: 0 0 14px; }
#gatein {
  width: 100%;
  padding: 11px 13px;
  margin-bottom: 10px;
  background: #0e0e10;
  color: #eee;
  border: 1px solid #2a2c33;
  border-radius: 10px;
  font-size: 16px;                 /* 16px — чтобы iOS не зумил поле при фокусе */
}
#gateform button {
  width: 100%;
  padding: 11px;
  background: #2d5a8a;
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
#gateform button:hover { background: #3a6ea6; }
.err { margin: 10px 0 0; color: #ff9b9b; font-size: 13px; }

/* ---------- экран «Вопросы» («Панель Зануды», 24.10.2026) ---------- */

/* Очередь вопросов вкладок к владельцу (ui/asks.js). Живёт как ящик «Ждут
   тебя»: открыт — прочие жильцы #main спрятаны классом. Кнопка в шапке
   выглядит как счётчик «ждут», а не как соседние кнопки. */
#hasks[hidden], #asks[hidden] { display: none; }
#head #hasks { background: none; padding: 6px 4px; font-weight: 600;
               font-variant-numeric: tabular-nums; }
#head #hasks.wait0 { color: #7d8aa0; }
#head #hasks.waitN { color: #ffb02e; }
#head #hasks:hover { text-decoration: underline; }
#main.asked > :not(#asks) { display: none !important; }
/* Низ экрана вопросов (прод-скрин 25.10): нижний отступ #main (18px) оставлял
   под прилипшей панелью вкладок щель, в которой просвечивали карточки, —
   читалось как «карточка уходит под панель». padding-bottom: 0 — панель
   стоит вплотную к низу (на коротком списке тоже: #asks держит min-height
   100%). scroll-padding-bottom — та же высота панели (48px) и воздух: всё,
   что прокрутка подтягивает в видимое (фокус, раскрытое подтверждение у
   последней карточки — bringIntoView в asks.js), встаёт НАД панелью. */
#main.asked { display: block; overflow: auto; padding-bottom: 0;
              scroll-padding-bottom: 56px; }
#asks { display: flex; flex-direction: column; gap: 12px; max-width: 78ch;
        min-height: 100%; }
.askhead { display: flex; align-items: center; gap: 8px; }
.askhead h2 { flex: 1 1 auto; margin: 0; font-size: 18px; font-weight: 600; }
.aclose { padding: 6px 10px; background: none; border: 0; border-radius: 8px;
          color: #9fb3cc; font-size: 18px; cursor: pointer; }
.aclose:hover { background: #1c2733; }
/* «выйти» из сессии Telegram (день 3): тихая кнопка рядом с «✕» */
.alogout { padding: 6px 10px; background: none; border: 1px solid #2a3b50;
           border-radius: 8px; color: #9fb3cc; font-size: 13px; cursor: pointer; }
.alogout:hover { background: #1c2733; }
.alogout[hidden] { display: none; }
#gatetg { margin: 12px 0 0; }
#gatetg[hidden] { display: none; }
/* Сессия Telegram (день 3): окно — только экран «Вопросы». Колонка сессий и
   кнопки шапки, ведущие туда, куда cookie не пускает, — прочь. */
body.tgsession #tiles, body.tgsession #hwait, body.tgsession #hnext,
body.tgsession #hnanny, body.tgsession #nannylist, body.tgsession #hpause,
body.tgsession .aclose { display: none !important; }
.apane { display: flex; flex-direction: column; gap: 12px; }
.apane[hidden] { display: none; }
.alist { display: flex; flex-direction: column; gap: 12px; }
.ask { padding: 12px 14px; border: 1px solid #1e1f25; border-radius: 10px;
       background: #121317; }
/* Срочный — красная полоса, просроченный — янтарная: тот же язык цвета, что
   у решения владельца (card--decision) и ждущей плитки. */
.ask.ask--urgent { border-left: 3px solid #ff6b5a; }
.ask.ask--overdue { border-left: 3px solid #d9a441; }
.ask.ask--done { opacity: .82; }
.ahead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
         margin: 0 0 6px; color: #9fb3cc; font-size: 12px; }
.astat, .aurg { padding: 2px 8px; border-radius: 999px; font-size: 11px;
                font-weight: 600; }
.astat { background: #1c2733; color: #bfe0ff; }
.astat.st-overdue { background: #5a4413; color: #ffd9a8; }
.astat.st-answered { background: #1d2a22; color: #b8e6c6; }
/* день 2: «вы видели» — открытый вопрос, показанный владельцу */
.astat.st-delivered { background: #22303f; color: #d2e7ff; }
.adue { color: #ffd9a8; font-size: 11px; }
/* день 2: голосом — кнопка записи под полем ответа */
.avoice { margin-top: 8px; }
.amic { min-height: 44px; }
.amic.arec-on { background: #5a2020; color: #ffd6d6; }
.avoicehint { margin-top: 6px; }
.astat.st-acknowledged { background: #1e5a32; color: #d6ffe4; }
.astat.st-closed { background: #2a2c33; color: #9a9da6; }
.aurg { background: #5a2020; color: #ffd6d6; }
.aage { margin-left: auto; }
.atopic { margin: 0 0 6px; font-size: 16px; font-weight: 600;
          overflow-wrap: anywhere; }
/* Контекст — проза, а не скрейп экрана: обычным шрифтом, с переносами;
   длинный сворачивается до шести строк («показать всё»). */
.actx { margin: 0 0 8px; padding: 8px 10px; background: #16171a;
        border-radius: 8px; color: #cfd2d8; font-family: inherit;
        font-size: 13px; line-height: 1.45; white-space: pre-wrap;
        overflow-wrap: anywhere; }
.actx.aclamp { max-height: calc(6 * 1.45em + 16px); overflow: hidden; }
.amore { padding: 0 0 8px; background: none; border: 0; color: #8fb8ff;
         font-size: 12px; text-align: left; cursor: pointer; }
.aopts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
/* Вариант — во всю ширину и с переносом: по подписи и выбирают. */
.aopt { width: 100%; min-height: 44px; padding: 12px 14px; background: #1c2733;
        color: #bfe0ff; border: 0; border-radius: 10px; font-size: 14px;
        font-weight: 600; text-align: left; white-space: normal;
        overflow-wrap: anywhere; cursor: pointer; }
.aopt:hover { background: #2a3b50; }
.aopt:disabled { background: #16171a; color: #4a4d55; cursor: default; }
.aopt.arecd { outline: 2px solid #8f73ff; }
.arec { margin-left: 8px; padding: 1px 7px; border-radius: 999px;
        background: #3a2d5a; color: #e2d6ff; font-size: 11px;
        vertical-align: middle; }
.ahidden { margin: 0; color: #7d8aa0; font-size: 12px; }
.aans { margin: 0; color: #cfd2d8; font-size: 13px; overflow-wrap: anywhere; }
.amark { margin: 4px 0 0; color: #b8e6c6; font-size: 12px; }
.aforge { margin: 4px 0 0; font-size: 13px; }
.aforge a { color: #8fb8ff; }
/* «Факты» (день 2): карточка факта — тот же язык, что у вопроса */
.flist { display: flex; flex-direction: column; gap: 10px; }
.fact { padding: 10px 14px; border: 1px solid #1e1f25; border-radius: 10px;
        background: #121317; }
.fact.fact--done { opacity: .7; }
.fhead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
         margin: 0 0 6px; color: #9fb3cc; font-size: 12px; }
.ftier { padding: 2px 8px; border-radius: 999px; font-size: 11px;
         font-weight: 600; background: #1c2733; color: #bfe0ff; }
.ftier.tier-owner { background: #3a2d5a; color: #e2d6ff; }
.ftier.tier-imported { background: #2a2c33; color: #c9ccd4; }
.fdate { margin-left: auto; }
.fsubj { margin: 0 0 2px; color: #9fb3cc; font-size: 12px; }
.fstmt { margin: 0 0 6px; color: #e6e8ec; font-size: 15px; line-height: 1.4;
         overflow-wrap: anywhere; }
.fquote { margin: 0 0 6px; color: #cfd2d8; font-size: 13px; font-style: italic;
          overflow-wrap: anywhere; }
.fsrc { margin: 0 0 6px; color: #7d8aa0; font-size: 12px; overflow-wrap: anywhere; }
.fstate { margin: 0 0 6px; color: #ffd9a8; font-size: 12px; }
.fnote { margin: 6px 0 0; color: #ffd9a8; font-size: 12px; }
.fbtns { display: flex; gap: 8px; justify-content: flex-end; }
.fbtns .cbtn, .fask .cbtn { min-height: 40px; }
.fdel { color: #ffd6d6; }
.fask .cbtn.fyes { background: #5a2020; color: #ffd6d6; }   /* удаление — красным */
.fask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
        margin-top: 8px; }
.fask .chint { flex: 1 1 100%; margin: 0; }
.fask[hidden] { display: none; }
.fhidden, .ferr { margin: 0; }
/* Вкладки экрана — снизу, под большой палец; прилипают к низу прокрутки. */
.atabs { position: sticky; bottom: 0; display: flex; gap: 4px; margin-top: auto;
         padding: 6px 0; background: #0e0e10; border-top: 1px solid #1e1f25; }
.atab { flex: 1 1 0; padding: 10px 6px; background: none; border: 0;
        border-radius: 8px; color: #9fb3cc; font-size: 13px; font-weight: 600;
        cursor: pointer; }
.atab.aon { background: #1c2733; color: #bfe0ff; }

/* ---------- карточка вопроса ---------- */

/* [hidden] живёт в стилях БРАУЗЕРА, и любое авторское `display` его
   перебивает — тот же капкан, что уже обойдён у #gate и у .tsub. Обоим
   жильцам #main возвращаем силу атрибута явно: спрятанная половина не должна
   ни занимать место, ни доезжать до скринридера. */
#card[hidden], #passport[hidden] { display: none; }
/* Та же ловушка, третий раз. Телефонные узлы получают свой display в
   медиазапросе внизу, а прячутся атрибутом hidden из main.js — без этих правил
   шапка телефона и снимок экрана остались бы на экране навсегда, накрыв собой
   карточку вопроса. Правило стоит ЗДЕСЬ, а не внутри медиазапроса: на маке эти
   узлы тоже существуют и тоже обязаны молчать. */
#pbar[hidden], #snap[hidden] { display: none; }

/* ---------- ящик «Ждут тебя» (спека 2026-10-08 §7.1) ---------- */

/* Счётчик в шапке стал кнопкой: выглядит как прежний счётчик (цвет даёт
   wait0/waitN выше), а не как соседние кнопки. */
#head #hwait { background: none; padding: 6px 4px; }
#head #hwait:hover { text-decoration: underline; }
#inbox[hidden] { display: none; }
/* Пока ящик открыт, прочие жильцы #main спрятаны классом, а не закрыты:
   терминал держит websocket, и закрытие ящика не должно переподключать tmux.
   !important — потому что у #term/#snap есть свои display выше по весу. */
#main.inboxed > :not(#inbox) { display: none !important; }
#main.inboxed { display: block; overflow: auto; }
#inbox { display: flex; flex-direction: column; gap: 14px; }
#inbox h2 { margin: 0; font-size: 18px; font-weight: 600; }
#inbox .ibitem { padding: 12px 14px; border: 1px solid #1e1f25; border-radius: 8px;
                 background: #121317; }
#inbox details { color: #9fb3cc; }
#inbox details button { margin: 6px 6px 0 0; }
#inbox details .ibitem { margin-top: 10px; color: inherit; }
.cheld { padding: 2px 8px; border-radius: 999px; font-size: 11px;
         background: #3a2d5a; color: #e2d6ff; }
.cnanny { margin: 0 0 10px; color: #c9b8ff; font-size: 13px; }
.cbtn.crec { outline: 2px solid #8f73ff; }
.cbtn.copen { margin-left: auto; padding: 3px 9px; font-size: 12px; }

.card {
  /* Та же мера, что у .msub: длинная строка через полтора метра экрана
     нечитаема, глаз теряет начало следующей. */
  max-width: 78ch;
}

/* Шапка карточки: род вопроса и чья сессия. Род — первым: рука тянется к
   «Разрешить» иначе, чем к выбору пункта, и знать это надо до чтения. */
.chead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
}
.ckind {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
/* Разрешение — жёлтое, как ждущая плитка и счётчик в шапке: один цвет = одно
   значение («тебя ждут»), чтобы взгляд ловил его без чтения. */
.ckind.cperm { background: #5a4413; color: #ffd9a8; }
.ckind.cq { background: #1c2733; color: #bfe0ff; }
.ckind.ctask { background: #1d2a22; color: #b8e6c6; }
.cproj { color: #9fb3cc; font-size: 13px; }
/* Черновик зама уровня decision (zam v2): решение за владельцем, а не
   рутинное «да». Янтарная полоса слева — тот же жёлтый «тебя ждут», что у
   разрешения и ждущей плитки. */
.card.card--decision {
  border-left: 3px solid #d9a441;
  padding-left: 12px;
}

/* #card, а не .card: правило `#main h1` выше несёт id, и по весу оно побило бы
   любой набор классов — заголовок карточки молча взял бы размеры паспорта. */
#card .ctitle { margin: 0 0 10px; font-size: 19px; font-weight: 600; }

/* Тело вопроса — это скрейп экрана сессии (аргументы инструмента, кусок
   диалога): моноширинным и с сохранением переносов, иначе JSON команды
   слипается в кашу. Своя прокрутка — чтобы длинный tool_input не утаскивал
   кнопки за нижний край. */
.cbody {
  margin: 0 0 14px;
  padding: 10px 12px;
  max-height: 34vh;
  overflow: auto;
  background: #16171a;
  border-radius: 10px;
  color: #cfd2d8;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.cbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
/* Варианты вопроса — столбцом: их подписи это целые фразы с экрана, и в ряд
   они превратились бы в нечитаемую ленту. */
.cbtns.ccol { flex-direction: column; align-items: stretch; }

.cbtn {
  padding: 10px 14px;
  background: #1c2733;
  color: #bfe0ff;
  border: 0;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.cbtn:hover { background: #2a3b50; }
.cbtn:disabled { background: #16171a; color: #4a4d55; cursor: default; }

/* Зелёная — «да», красная — «нет»: два исхода, в которые рука целится не
   глядя. «Всегда» намеренно НЕ выделена: это решение надолго, и подталкивать
   к нему цветом нельзя. */
.cbtn.cyes { background: #1e5a32; color: #d6ffe4; }
.cbtn.cyes:hover { background: #2a7a45; }
.cbtn.cno { background: #5a2020; color: #ffd6d6; }
.cbtn.cno:hover { background: #7a2c2c; }
.cbtn.calways { background: #2a2c33; color: #cfd2d8; font-weight: 500; }
.cbtn.calways:hover { background: #3a3d46; }
.cbtn.csend { background: #2d5a8a; color: #fff; }
.cbtn.csend:hover { background: #3a6ea6; }
/* Вариант вопроса растягивается на всю ширину столбца, а длинная подпись
   переносится: обрезать её нельзя — по ней и выбирают. */
.cbtn.copt { width: 100%; white-space: normal; }

.chint { margin: 0 0 12px; color: #7d8aa0; font-size: 12px; }

.ctext { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.ctext[hidden] { display: none; }        /* см. капкан [hidden] выше */
.cta {
  width: 100%;
  padding: 10px 12px;
  background: #0e0e10;
  color: #eee;
  border: 1px solid #2a2c33;
  border-radius: 10px;
  font-family: inherit;
  font-size: 16px;                 /* 16px — чтобы iOS не зумил поле при фокусе */
  line-height: 1.4;
  resize: vertical;
}
.cta:focus { outline: 0; border-color: #2d5a8a; }

/* Шаг подтверждения. Рамка и отступ — чтобы «что уйдёт» читалось как отдельная
   бумага, а не как продолжение формы: в этот момент человек проверяет строку,
   а не пишет её. */
.cconfirm {
  margin-top: 4px;
  padding: 12px;
  background: #16171a;
  border: 1px solid #2d5a8a;
  border-radius: 12px;
}
.cconfirm[hidden] { display: none; }
.cwill {
  margin: 0 0 12px;
  padding: 10px 12px;
  max-height: 30vh;
  overflow: auto;
  background: #0e0e10;
  border-radius: 8px;
  color: #eee;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  /* pre-wrap, а не nowrap: человек подтверждает РОВНО эту строку, и ни один
     её символ не имеет права уехать за край незамеченным. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.cstatus {
  margin: 12px 0 0;
  padding: 9px 12px;
  background: #16171a;
  border-radius: 10px;
  color: #cfd2d8;
  font-size: 13px;
}
.cstatus[hidden] { display: none; }

/* ---------- живой терминал (задача 4) ---------- */

/* Тот же капкан, что у #card и #passport: [hidden] живёт в стилях БРАУЗЕРА, и
   любое авторское `display` его перебивает. Ниже мы даём #term свой display,
   значит силу атрибута надо вернуть явно — иначе закрытый терминал остался бы
   занимать место, а его узлы доезжали бы до скринридера. */
#term[hidden] { display: none; }

/* Раскладка включается ТОЛЬКО с терминалом. Обычный #main (карточка, паспорт)
   остаётся прежним блоком со скроллом: переводить его во флекс насовсем
   значило бы менять отступы у половины окна ради жильца, которого там сейчас
   нет. */
#main.withterm {
  display: flex;
  flex-direction: column;
  /* hidden, а не auto: прокручиваться должен САМ терминал (.termhost), иначе
     уезжала бы и шапка сессии, и строка состояния — вместе с приглашением,
     которое человеку и нужно видеть. */
  overflow: hidden;
}

#main.withterm #term {
  flex: 1 1 auto;
  min-height: 0;                   /* без него флекс не даёт детям сжиматься */
  display: flex;
  flex-direction: column;
}
/* И ТРЕТИЙ раз тот же капкан, теперь изнутри: правило выше специфичнее
   (0,2,1 против 0,1,1), то есть оно перебивает #term[hidden] строкой выше и
   возвращает ровно то, от чего та защищает. Сейчас недостижимо — syncTerm
   переключает hidden и класс withterm одной парой строк, — но эшелон обороны,
   который не работает, хуже отсутствующего: он читается как защита. */
#main.withterm #term[hidden] { display: none; }

/* Паспорт над терминалом — одна строка-шапка: высота нужна терминалу. */
#passport.compact { flex: 0 0 auto; }
#passport.compact h1 { margin: 0 0 2px; font-size: 16px; }
#passport.compact .mstate { margin: 0 0 8px; font-size: 13px; }

/* Строка состояния связи. Пустая, когда всё хорошо: постоянное «подключено»
   быстро перестаёт читаться, а вот его исчезновение — нет. */
.termbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 18px;
  margin-bottom: 6px;
}
.tstat { font-size: 12px; color: #ffb02e; }

/* Хозяин xterm. Тут и только тут прокрутка — в ОБЕ стороны. Сетка у нас
   фиксированная (200×50, см. шапку ui/term.js — мы не воюем за размер окна
   tmux), это ~1445px, и в окно человека она обычно не влезает. Значит
   лишнюю ширину забирает горизонтальная прокрутка ЗДЕСЬ: строка не теряется
   и не тащит за собой всю страницу (см. «ловушку ширины» у #body — без неё
   этот же xterm растягивал шапку и уводил стоп-кран за край окна). */
.termhost {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

/* Кнопки переходов панели: в люк с карточки и обратно к вопросу. */
.mact { margin: 12px 0 0; }
.mact button {
  padding: 7px 12px;
  background: #1c2733;
  color: #bfe0ff;
  border: 0;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}
.mact button:hover { background: #2a3b50; }
/* Взведённый компакт («точно компакт?»). Жёлтый — тот же сигнал, что у
   ждущей плитки и у счётчика в шапке: один цвет = одно значение («на тебе
   ход»). Второй тап по такой кнопке уже нельзя сделать не глядя. */
.mact button.arm { background: #5a4413; color: #ffd9a8; }
.mact button.arm:hover { background: #6d5318; }

/* Руки этапа 7: пауза вкладки и пересадка — ОДНОЙ строкой. Не ради красоты:
   с открытым терминалом паспорт сжат до шапки (#passport.compact), и каждая
   лишняя строка отнимается у самого терминала.
   wrap — чтобы в узком окне ряд переносился, а не выдавливал панель вширь
   (та же «ловушка ширины», что у терминала в #body). */
.mhands {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
/* color-scheme стоит на самих селекторах, а не на body: он красит НАТИВНЫЕ
   части контрола (список опций, стрелку), до которых авторский цвет не
   достаёт, — и без него выпадающий список был бы белым посреди тёмного окна.
   Ставить его глобально значило бы перекрасить заодно полосы прокрутки во
   всём окне, включая терминал, ради двух узлов. */
.mhands select {
  color-scheme: dark;
  padding: 6px 8px;
  background: #1c2733;
  color: #bfe0ff;
  border: 0;
  border-radius: 8px;
  font-size: 13px;
  max-width: 45%;
  cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════════════════
   ТЕЛЕФОН (задача 5). Всё, что ниже, — внутри одного медиазапроса, и выше
   ни одна строка ради него не менялась: раскладка мака обязана остаться
   прежней до пикселя.

   700px — то же число, что PHONE_MAX в ui/main.js. CSS решает, КАК разложено,
   а JS — ЧТО живёт в рабочей половине (снимок экрана вместо живого терминала).
   Разъедутся — телефон получит телефонную раскладку с websocket внутри.

   Раскладка одноколоночная и двухэкранная: список сессий ИЛИ одна открытая.
   Колонка в 240px, которая на маке стоит слева всегда, на экране шириной
   390px съела бы две трети места; а показывать список и содержимое сразу
   значит не показать толком ни того, ни другого.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  /* Серый прямоугольник, которым iOS подсвечивает тап, на тёмном фоне
     выглядит как сбой отрисовки. Свою обратную связь дают :active-правила. */
  * { -webkit-tap-highlight-color: transparent; }

  /* Тап по кнопке срабатывает сразу: без этого Safari ждёт ~300 мс, не
     окажется ли тап половиной двойного (зум). На панели клавиш эта задержка
     превращает «нажать Enter» в «подождать и нажать Enter». */
  button { touch-action: manipulation; }

  /* Статус-бар. Мета apple-mobile-web-app-status-bar-style=black-translucent
     уводит страницу ПОД часы и индикатор связи — шапка окна оказалась бы под
     ними. Отдаём ей высоту «чёлки» сверху; в браузере (не в standalone)
     inset равен нулю, и ничего не меняется. */
  /* Шапка на телефоне переносится на вторую строку (прод-скрин 25.10): на
     390px «ждут» + «к ждущему» + «❓N» + «няня: веду 16» + пауза — это ~445px,
     и стоп-кран уезжал за правый край, где его не достать (страница по
     горизонтали не прокручивается). Высота строки сетки — auto, а не 44px:
     вторая строка шапки раздвигает её, а не уходит под обрез; min-height
     и отступы по 3px держат прежние ~44px, пока всё влезает в одну строку. */
  body { grid-template-rows: auto 1fr; }
  #head {
    flex-wrap: wrap;
    row-gap: 6px;
    min-height: calc(44px + env(safe-area-inset-top));
    padding-top: calc(3px + env(safe-area-inset-top));
    padding-bottom: 3px;
  }

  /* Место под стоп-кран не резервируем: 96px на узкой шапке выдавили бы
     кнопку «к ждущему» за край. Кнопка занимает ровно своё. margin-left:
     auto — прижимает её к правому краю и тогда, когда она одна ушла на
     вторую строку шапки (растяжка .hgap осталась на первой). */
  #hpause { min-width: 0; margin-left: auto; }
  /* Сводку в кармане не показываем вовсе: на узкой шапке она отбирает место у
     двух вещей, которые важнее, — «к ждущему» и стоп-крана. Цифры «работают/
     ждут» телефон и так видит списком плиток на весь экран. */
  #hsum { display: none; }
  /* И аккаунт — по той же причине: в кармане шапка отдана «к ждущему» и
     стоп-крану, а проценты подписки в телефоне не решают ничего (переключает
     их всё равно cswap на маке). */
  #hacc { display: none; }
  /* И слово про протухший снимок. Проверено на 390px: «ждут» + «к ждущему» +
     стоп-кран занимают шапку целиком, и надпись не обрезалась бы, а РАСПИРАЛА
     страницу — вместе с ней уезжал за край список плиток. Сигнал при этом не
     теряется: гаснет вся шапка (body.stale), а это читается без слов. */
  #hstale { display: none; }
  /* Страховка на самый узкий экран: подпись стоп-крана и текст отказа обязаны
     обрезаться сами, а не выдавливать соседей за край шапки. Короткую подпись
     паузы даёт pauseView (core.js), это второй эшелон — под отказ сервера и
     под будущие тексты. */
  #hpause button, #hpause .pnote {
    max-width: 46vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #head button { padding: 8px 12px; }

  /* ---------- экран первый: список сессий ---------- */

  #tiles {
    flex: 1 1 auto;                /* на весь экран, а не колонкой в 240px */
    border-right: 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    gap: 8px;
    /* Инерционная прокрутка не тянет за собой всю страницу: иначе список,
       докрученный до конца, оттягивал бы окно вниз и показывал белую полосу
       под ним. */
    overscroll-behavior: contain;
  }

  /* Плитка — цель для пальца, а не для курсора: 44pt это минимум, ниже
     которого промахи становятся правилом. Порядок плиток не трогаем — сервер
     уже отдаёт ждущих сверху, и на телефоне это важнее, чем на маке: экран
     один, и первое, что видит человек, должно быть тем, что его ждёт. */
  .tile { padding: 12px 14px; min-height: 56px; }
  .tile .tname { font-size: 15px; }
  .tile .tsub { font-size: 12px; margin-top: 4px; }
  .tile .thealth { font-size: 11px; margin-top: 3px; }
  .tile .tsince { font-size: 12px; }
  .tile:active { background: #2a3b50; }

  /* ---------- экран второй: одна сессия ---------- */

  /* Пока сессия не выбрана, рабочей половины на телефоне нет вовсе. Селектор
     с body — чтобы перевесить #main.withterm (у него класс, и на голом #main
     он бы выиграл). На телефоне терминала не бывает, но полагаться на это
     правилом ниже по весу было бы приглашением к однажды открытому websocket
     в кармане. */
  body:not(.picked) #main { display: none; }
  body.picked #tiles { display: none; }

  body.picked #main {
    display: flex;
    flex-direction: column;
    padding: 0;
    /* прокручивается содержимое (карточка, снимок), а не сам #main: иначе
       шапка сессии и клавиши уезжали бы вместе с текстом */
    overflow: hidden;
  }

  /* Шапка сессии: назад, имя, статус. Она же заменяет собой паспорт под
     снимком — там высота нужна самому экрану сессии. */
  #pbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #16171a;
    border-bottom: 1px solid #1e1f25;
  }
  #pbar .pback {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    background: #1c2733;
    color: #bfe0ff;
    border: 0;
    border-radius: 10px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }
  #pbar .pback:active { background: #2a3b50; }
  #pbar .pname {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 600;
  }
  #pbar .pstate { flex: 0 0 auto; color: #9fb3cc; font-size: 12px; }
  /* Жёлтая, как и всё «тебя ждут»: это дорога назад к вопросу, а не просто
     ещё одна кнопка. */
  #pbar .pquest {
    flex: 0 0 auto;
    padding: 8px 10px;
    background: #5a4413;
    color: #ffd9a8;
    border: 0;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
  }

  /* Карточка вопроса на телефоне — тот же самый cards.js, без единой ветки
     «если телефон»: меняется только место, в котором она лежит. */
  #card {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
  }
  .card { max-width: none; }         /* мера в 78ch на 390px просто мешает */
  .cbtn { padding: 13px 15px; min-height: 48px; }
  .cbtns { gap: 10px; }
  .cbody { max-height: 40vh; font-size: 12.5px; }
  /* Кнопки разрешения — в столбец и во всю ширину: «Разрешить» и «Нет» рядом
     на 390px превращаются в две узкие цели у самого края экрана. */
  .card .cbtns:not(.ccol) { flex-direction: column; align-items: stretch; }

  /* ---------- снимок экрана ---------- */

  #snap {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;                  /* см. «ловушку ширины» выше */
    display: flex;
    flex-direction: column;
  }

  /* Экран сессии как есть: моноширинный, без переносов. Строка шире экрана
     честно уезжает за правый край и доступна боковой прокруткой — переносить
     её нельзя, иначе рамки TUI и отступы Claude Code разъезжаются в кашу и
     читать становится нечего. */
  .snapbody {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 10px 12px;
    overflow: auto;
    overscroll-behavior: contain;
    background: #0e0e10;
    color: #cfd2d8;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    line-height: 1.35;
    white-space: pre;
    /* Прокрутка в обе стороны — жест пальца по экрану сессии, а не по
       странице; браузеру это надо сказать явно. */
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
  }

  /* Беда снимка (нет связи, сессия закрылась) и исход клавиши. Оба узла —
     одна строка над клавишами: место постоянное, и сообщение не сдвигает
     ни экран, ни кнопки. */
  .snapmsg, .keymsg {
    flex: 0 0 auto;
    margin: 0;
    padding: 6px 12px;
    background: #16171a;
    color: #ffd9a8;
    font-size: 12px;
  }
  .snapmsg[hidden], .keymsg[hidden] { display: none; }

  /* Клавишная панель. Внизу и на всю ширину: это единственный способ что-то
     нажать в сессии с телефона, и палец должен доставать до неё не глядя. */
  .keys {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    background: #16171a;
    border-top: 1px solid #1e1f25;
  }
  .keys .key {
    flex: 1 1 auto;
    min-width: 46px;
    min-height: 46px;              /* палец, а не курсор */
    padding: 10px 6px;
    background: #1c2733;
    color: #bfe0ff;
    border: 0;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }
  .keys .key:active { background: #3a6ea6; color: #fff; }
  .keys .key:disabled { background: #16171a; color: #4a4d55; }

  /* ---------- ворота токена ---------- */

  /* На телефоне токен вводят один раз в жизни, зато вводят его пальцем.
     Поле уже 16px (иначе iOS зумит страницу при фокусе) — здесь только место
     под клавиатуру: модалка прижимается кверху, чтобы кнопка «Сохранить» не
     оказалась под ней. */
  #gate { align-items: flex-start; padding-top: 12vh; }
  #gateform { width: min(94%, 360px); }

  /* ---------- экран «Вопросы» ---------- */

  /* #main на телефоне не прокручивается (body.picked #main: overflow hidden —
     шапка сессии и клавиши стоят на месте), поэтому прокручивается сам
     экран вопросов, а вкладки липнут к его низу над «домашней полоской». */
  #asks {
    flex: 1 1 auto;
    min-height: 0;
    max-width: none;
    padding: 12px 12px 0;
    overflow: auto;
    overscroll-behavior: contain;
    /* высота панели вкладок на телефоне (57px) и воздух, плюс «домашняя
       полоска» — см. scroll-padding-bottom у #main.asked выше */
    scroll-padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }
  .ask { padding: 12px; }
  .aopt { min-height: 48px; padding: 13px 15px; }
  .atabs { padding: 6px 0 calc(6px + env(safe-area-inset-bottom)); }
  .atab { min-height: 44px; font-size: 14px; }
}

/* ---------- панель няни (спека 2026-10-08 §7.3) ---------- */
#hnanny[hidden], #nannylist[hidden] { display: none; }
#nannylist { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 16px;
             background: #16171a; border-bottom: 1px solid #1e1f25; }
.mnanny { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mnanny button.on { outline: 2px solid #8f73ff; }
/* команда ушла, няня ещё не исполнила — видно сразу по клику */
.mnanny button.wait { outline: 2px dashed #e0b84f; color: #ffe2a0; }
.mnanny .nwhy, .mnanny .nstatus { color: #9fb3cc; font-size: 12px; }
/* пара режимов при старой няне: видна, но выключена (спека 2026-10-15 §2) */
.mnanny button:disabled, .mnanny button:disabled:hover { opacity: .5; cursor: default; background: #1c2733; }