/* Оболочка панели станций (S17): боковая панель 196 px и шапка 54 px по макету docs/design/panel-map.pdf, стр. 1;
   карта проекта (S18) — по стр. 2 с правками паспорта; экран станции (S19) — в духе карты; S20 — экран гейта,
   очередь решений, полоса связи, одно состояние станции (значок и подпись везде), читаемость: серые подписи
   не светлее #5f5f5a (контраст каждой пары текст/фон не меньше 4,5:1 — tests/web-style.test.ts), области
   нажатия --tap, цвет никогда не единственный носитель смысла. Внешних ресурсов и шрифтов нет — только системные. */

:root {
  --bg: #f8f8f6;
  --side: #f3f3f0;
  --line: #e4e4df;
  --text: #1f1f1d;
  --muted: #5f5f5a;
  --faint: #a9a9a3;
  --selected: #e7e7e2;
  --amber: #e2a23c;
  --amber-bg: #fdf4e4;
  --amber-text: #8a5608;
  --blue: #2f63c2;
  --blue-bg: #e6eefc;
  --green: #2f8f5b;
  --green-bg: #e8f4ec;
  --green-text: #1f6b41;
  --red: #d6453d;
  --red-bg: #fbe9e7;
  --red-text: #a3281f;
  --grey-bg: #ededea;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* минимальная область нажатия: ячейки станций, заголовки фаз, строки ленты, кнопки, элементы очереди и списка проектов */
  --tap: 32px;
}

* { box-sizing: border-box; }

/* S23: атрибут hidden сильнее правил display (.modal, .connbar, .header-details задают display: flex — без этого
   правила пустое окно подтверждения затягивало экран серым, а пустая полоса связи была видна всегда) */
[hidden] { display: none !important; }

html, body { height: 100%; margin: 0; }

body {
  display: flex;
  font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
}

/* ---- боковая панель ---- */

.sidebar {
  flex: 0 0 196px;
  width: 196px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 14px 10px 16px;
  font-size: 13px;
  white-space: nowrap;
  background: var(--side);
  border-right: 1px solid var(--line);
  overflow: hidden;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 8px 10px;
  font-weight: 600;
  font-size: 15px;
}

.brand-mark {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #1c1c1a;
  position: relative;
}

.brand-mark::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
}

/* очередь решений — кнопка (S20) */
.queue {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: var(--tap);
  padding: 8px 8px;
  border: 0;
  border-radius: 8px;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.queue:hover, .queue.active { background: var(--selected); }
.queue:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.queue-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* «Новый проект» (S27): кнопка в боковой панели, ссылка «Бриф» у проекта, экран анкеты и чата брифа */
.new-project-mark { width: 10px; text-align: center; font-weight: 700; color: var(--muted); }
.projects .intake-link { margin-left: 6px; padding: 0 6px; border-radius: 8px; font-size: 12px; background: var(--blue-bg); color: var(--blue); }
.intake-screen { max-width: 860px; }
.intake-field { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.intake-field input, .intake-field textarea, .intake-input, .intake-brief { font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--text); }
.intake-field textarea, .intake-input { min-height: 64px; resize: vertical; }
.intake-brief { width: 100%; min-height: 240px; font-family: var(--mono); font-size: 12px; resize: vertical; }
/* S32 §6 (B-16): поле сообщения чата брифа — на всю ширину колонки, как редактор брифа; подпись редактора */
.intake-input { display: block; width: 100%; box-sizing: border-box; }
.intake-brief { display: block; box-sizing: border-box; }
.intake-brief-label { display: block; margin: 16px 0 6px; font-weight: 600; }
.intake-path { margin-top: 4px; font-family: var(--mono); font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.intake-messages { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.intake-msg { padding: 8px 10px; border-radius: 8px; background: var(--grey-bg); white-space: pre-wrap; overflow-wrap: anywhere; }
.intake-msg.human { background: var(--blue-bg); }
.intake-who { font-size: 12px; font-weight: 600; color: var(--muted); }
.intake-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

.badge {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 11px;
  text-align: center;
  font-size: 12px;
  background: var(--amber-bg);
  color: var(--amber-text);
}

.notify { padding: 2px 8px 0; font-size: 12px; }
.notify-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); cursor: pointer; }
.notify-off { display: inline-block; min-height: var(--tap); line-height: var(--tap); white-space: normal; }

.section-title {
  margin: 18px 8px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.projects, .model-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.projects li, .model-list .model-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 7px 8px;
  border-radius: 8px;
  cursor: default;
}

.model-list .model-row { padding-bottom: 0; }

/* вторая строка лимита (S18): окно и время сброса — мелко, приглушённо. Куски не рвутся внутри, перенос — между
   ними (перед «сброс …»): время сброса видно целиком в 196 px (Л-01, Н-04); обрезается только длинное окно */
.model-sub {
  padding: 1px 8px 4px 24px;
  font-size: 11px;
  line-height: 15px;
  color: var(--muted);
  white-space: normal;
}

.model-sub .seg { white-space: nowrap; }

.model-sub .seg-window {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

.projects li { cursor: pointer; }
.projects li:hover { background: var(--selected); }
.projects li.selected { background: var(--selected); font-weight: 600; }
.projects li:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

.name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* S32 §2: одноимённые проекты — под именем последние части пути родительской папки */
.name-box {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.name-box .name { flex: none; }

.project-hint {
  font-size: 11px;
  line-height: 14px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.count, .quota {
  font: 12px var(--mono);
  color: var(--muted);
}

.dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--faint);
}

/* точки состояний (S20): те же шесть состояний, что у ячеек карты; у списка проектов рядом — подсказка словами */
.dot-human { background: var(--amber); }
.dot-running { background: var(--blue); }
.dot-ready { background: var(--blue); }
.dot-closed, .dot-done { background: var(--green); }
.dot-stopped, .dot-error { background: var(--red); }
.dot-ahead, .dot-none { background: var(--faint); }
/* S32 §4.1: провайдер лимитов без вызова модели не сообщает — нейтральное кольцо, не «нет данных» */
.dot-unreported { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }

.models { margin-top: auto; }

.models-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

/* S32 §4.4: кнопка «Обновить» в заголовке блока «Модели» */
.models-refresh {
  margin-left: auto;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: none;
  color: var(--blue);
  font: inherit;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

.models-refresh:disabled { color: var(--muted); cursor: default; }

.models-note {
  margin-left: 8px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-size: 11px;
}

/* ---- шапка и содержимое ---- */

.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.topbar {
  flex: 0 0 54px;
  height: 54px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}

.project-name {
  flex: none;
  min-width: 8em;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
  font-weight: 600;
  padding-right: 18px;
  border-right: 1px solid var(--line);
}

.progress {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
  font: 13px var(--mono);
}

.progress b { font-size: 15px; color: var(--text); flex: none; }
.progress .of { color: var(--muted); flex: none; }
.progress-caption { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 11px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--muted); }

/* полоса из total сегментов по 4 px; при узком окне сжимается она, а не значок внимания (проверка S17, Н-04) */
.bar {
  display: inline-flex;
  gap: 2px;
  height: 14px;
  align-items: stretch;
  width: 240px;
  flex: 0 1 240px;
  min-width: 60px;
}

.bar i {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  border-radius: 1px;
  background: var(--line);
}

.bar i.closed { background: var(--green); }

/* S26 (V-01): блок прогресса сжимается и в окне шире 1200 px (полоса — до своего min-width, подпись — с многоточием),
   иначе при ширине ноутбука «Команда» и «Подробнее» уходили за правый край шапки */
.progress { flex: 0 1 auto; }

.complexity {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted);
  font-size: 13px;
  position: relative;
}

.cx-info { min-width: 24px; min-height: 24px; padding: 0; border: 0; background: none; font: inherit; color: var(--muted); cursor: pointer; }
.cx-info:hover { color: var(--text); }
.cx-note {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 3;
  width: 320px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  white-space: normal;
  font-size: 12px;
  color: var(--text);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* узкое окно (проверка S17, Н-04): строка станции не уже 10em, дальше сжимаются имя, полоса прогресса, подпись и текст сложности */
@media (max-width: 1200px) {
  .project-name, .progress, .complexity { flex: 0 1 auto; }
  .progress-caption, .updated { display: none; }
}

.spacer { flex: 1; }

.updated { flex: none; font-size: 12px; color: var(--muted); }

/* строка текущей станции в шапке — кнопка, открывает экран станции (S20) */
.header-station {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
  min-width: 10em;
  max-width: 44vw;
  min-height: var(--tap);
  padding: 6px 14px;
  border-radius: 18px;
  border: 1px solid transparent;
  background: var(--grey-bg);
  font: inherit;
  font-size: 13px;
  color: var(--text);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
}

.header-station:disabled { cursor: default; }
.header-station:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.header-station b { font-weight: 600; flex: none; }
.header-station .text, .header-station .turn, .header-station .state-text { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.header-station .state-icon { flex: none; font-weight: 700; }

.attention-human { background: var(--amber-bg); color: var(--amber-text); border-color: #f0d9b0; }
.attention-running, .attention-ready { background: var(--blue-bg); color: var(--blue); }
.attention-done, .attention-closed { background: var(--green-bg); color: var(--green-text); }
.attention-error, .attention-stopped { background: var(--red-bg); color: var(--red-text); }

.header-more {
  flex: none;
  min-height: var(--tap);
  padding: 4px 8px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}

.header-more:hover { color: var(--text); text-decoration: underline; }

/* S25: кнопка «Команда» — экран состава проекта */
.header-team {
  flex: none;
  min-height: var(--tap);
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

.header-team:hover { background: var(--grey-bg); }
.header-team.active { background: var(--text); border-color: var(--text); color: #fff; }
.header-team:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.header-details {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  padding: 6px 24px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}

.hd-row { display: inline-flex; gap: 6px; min-width: 0; }
.hd-key { color: var(--muted); }
.hd-val { font-family: var(--mono); overflow-wrap: anywhere; }

/* S26 (V-01): подпись автопилота (web/state.js, autopilotView) — полоса под шапкой на всю ширину области
   содержимого: в строке шапки при ширине ноутбука ей не хватало места. Текст переносится, а не обрезается; цвет — не
   единственный носитель смысла: вариант назван словами */
.autopilot-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 6px 24px;
  background: var(--grey-bg);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--text);
}
.autopilot-bar .ap-text { font-weight: 600; overflow-wrap: anywhere; }
.autopilot-bar .ap-hint { overflow-wrap: anywhere; }
.ap-stop { background: var(--amber-bg); color: var(--amber-text); }
.ap-running { background: var(--blue-bg); color: var(--blue); }
.ap-not_running { background: var(--red-bg); color: var(--red-text); }
.ap-foreign { background: var(--grey-bg); color: var(--text); }

/* полоса связи (S20): нет связи или сервер останавливается — серая полоса над содержимым */
.connbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 8px 24px;
  background: var(--grey-bg);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.conn-text { font-weight: 600; }
.conn-hint { color: var(--muted); }

.content {
  flex: 1;
  overflow: auto;
}

/* ---- общие кнопки и блоки ---- */

.btn {
  min-height: var(--tap);
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

.btn:hover:not(:disabled) { background: var(--grey-bg); }
.btn:disabled { color: var(--muted); background: var(--grey-bg); cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.btn-primary { background: var(--text); color: #fff; border-color: var(--text); }
.btn-primary:hover:not(:disabled) { background: #000; }
.btn-primary:disabled { background: var(--grey-bg); color: var(--muted); border-color: var(--line); }
.btn-small { min-height: 28px; padding: 2px 8px; font-size: 12px; }
.btn-option { margin: 4px 6px 0 0; }

.copy-diag {
  min-height: var(--tap);
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
}

.copy-diag:hover { background: var(--grey-bg); }

.copy-field {
  display: block;
  width: 100%;
  max-width: 640px;
  height: 120px;
  margin-top: 6px;
  font: 11px var(--mono);
}

/* значок состояния с подписью (S20) */
.state-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 12px;
  background: var(--grey-bg);
  color: var(--text);
}

.state-icon { font-weight: 700; }
.state-closed { background: var(--green-bg); color: var(--green-text); }
.state-human { background: var(--amber-bg); color: var(--amber-text); }
.state-running, .state-ready { background: var(--blue-bg); color: var(--blue); }
.state-stopped { background: var(--red-bg); color: var(--red-text); }
.state-ahead { background: var(--grey-bg); color: var(--muted); }

/* ---- карта проекта (S18) ---- */

.map-message {
  padding: 28px 40px;
  color: var(--muted);
}

.map-error { color: var(--red-text); }

/* две колонки (S20): карта на свободную ширину, правая колонка фиксированной ширины; при окне уже 1100 px — над картой */
.map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  column-gap: 40px;
  align-items: start;
  padding: 24px 40px 40px;
}

.map-col { min-width: 0; }

.side-col {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

@media (max-width: 1099px) {
  .map-layout {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 20px;
  }
  .side-col {
    position: static;
    grid-row: 1;
    max-width: 640px;
  }
}

.map-heading {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 600;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.legend-count { font: 12px var(--mono); color: var(--text); }
.legend-caption { font-size: 12px; color: var(--muted); }

.legend-dispute {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
}

.marks {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* фаза: заголовок — кнопка, ниже сетка станций */

.phase { border-bottom: 1px solid var(--line); }

.phase-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  min-height: var(--tap);
  padding: 14px 2px;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}

.phase-head:hover .phase-title { text-decoration: underline; text-decoration-color: var(--faint); }
.phase-head:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

.chevron {
  flex: none;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: translateY(-2px) rotate(45deg);
}

.phase-head[aria-expanded="false"] .chevron { transform: rotate(-45deg); }

.phase-title {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 15px;
  font-weight: 600;
}

.phase-range { flex: none; font: 12px var(--mono); color: var(--muted); }
.phase-state { flex: none; font-size: 13px; color: var(--muted); }
.phase-state-closed { color: var(--green-text); }
.phase-state-waiting_human { color: var(--amber-text); }
.phase-state-problem { color: var(--red-text); }
.phase-state-in_progress { color: var(--blue); }
.phase-count { flex: none; min-width: 4.5em; text-align: right; font: 12px var(--mono); color: var(--muted); }

/* сетка станций (S20): ячейки по свободной ширине, не уже 9.5rem */
.stations {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0 0 18px;
  list-style: none;
}

.station {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 8px 6px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
}

/* будущие станции (не начаты) открываются для просмотра: обычный контраст, курсор-указатель, подсветка при наведении */
.station:hover { background: var(--grey-bg); }
.station:hover .st-title { text-decoration: underline; text-decoration-color: var(--faint); }
.station:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* текущая станция — плотная рамка, фон и метка «сейчас»; выбранная — пунктирный контур без метки */
.station.current { border-color: var(--text); background: #fff; box-shadow: 0 0 0 1px var(--text); }
.station.selected { outline: 2px dashed var(--blue); outline-offset: 2px; }

.st-top { display: flex; align-items: baseline; gap: 6px; height: 18px; margin-bottom: 6px; }

.st-id {
  font: 12px/18px var(--mono);
  color: var(--muted);
}

.st-now {
  padding: 0 5px;
  border-radius: 8px;
  background: var(--text);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 16px;
}

.station.current .st-id { color: var(--text); font-weight: 700; }

.circle {
  position: relative;
  z-index: 1;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--faint);
  background: var(--bg);
  font: 700 11px/1 sans-serif;
  color: var(--text);
}

.circle-icon { line-height: 1; }
.circle-sm { width: 15px; height: 15px; font-size: 9px; }

/* шесть состояний (S20): цвет вместе со значком (✓ ■ ! ▷ ▶ ○) и подписью под ячейкой */
.circle-closed { border-color: var(--green); background: var(--green); color: #fff; }
.circle-running { border-color: var(--blue); background: var(--blue); color: #fff; }
.circle-ready { border-color: var(--blue); background: var(--blue-bg); color: var(--blue); }
.circle-human { border-color: var(--amber); background: var(--amber-bg); color: var(--amber-text); }
.circle-stopped { border-color: var(--red); background: var(--red); color: #fff; }
.circle-ahead { border-color: var(--faint); background: var(--bg); color: var(--muted); }

.dispute-dot {
  position: absolute;
  right: -6px;
  top: -6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red);
  border: 1.5px solid var(--bg);
}

.st-marks { margin-top: 6px; line-height: 14px; }

/* название станции: перенос только между словами, не больше трёх строк, длинное слово обрезается, а не рвётся по буквам */
.st-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  max-width: 100%;
  margin-top: 4px;
  padding: 0 4px;
  overflow: hidden;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
  text-align: center;
  font-size: 13px;
  line-height: 17px;
}

.station.current .st-title { font-weight: 700; }

.st-state { margin-top: 4px; font-size: 11px; color: var(--muted); }
.view-human .st-state { color: var(--amber-text); }
.view-stopped .st-state { color: var(--red-text); }
.view-closed .st-state { color: var(--green-text); }

/* правая колонка: «Что дальше», значимые события, показатели */

.card {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font-size: 13px;
}

.card-caption {
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.card-human { background: #fffaf0; border-color: #f0d9b0; }
.card-stopped { background: var(--red-bg); border-color: #f0c4bf; }

.next-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wait-elapsed { font-size: 12px; color: var(--amber-text); white-space: nowrap; }
.next-action { margin-top: 10px; }
.next-who { margin-top: 4px; font-weight: 600; }
.next-why { margin-top: 4px; color: var(--muted); }

.wait-station {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
}

.wait-sid { flex: none; font: 13px var(--mono); }
.wait-title { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; overflow-wrap: normal; word-break: normal; }

.next-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.open-station, .open-gate, .open-queue {
  min-height: var(--tap);
  padding: 6px 12px;
  border: 1px solid #f0d9b0;
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 13px;
  color: var(--amber-text);
  cursor: pointer;
}

.open-station:hover, .open-gate:hover, .open-queue:hover { background: var(--amber-bg); }
.open-gate { border-color: var(--text); color: var(--text); font-weight: 600; }
.open-gate:hover { background: var(--grey-bg); }

.stop-block { margin-top: 10px; padding: 10px; border-radius: 8px; background: #fff; border: 1px solid #f0c4bf; }
.stop-title { font-weight: 700; color: var(--red-text); }
.stop-reason { margin-top: 4px; }
.stop-next { margin: 4px 0 8px; font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }

.card-idle { background: var(--grey-bg); border-color: var(--grey-bg); }
.idle-title { font-weight: 600; }
.idle-text { margin-top: 6px; color: var(--muted); }

.events-list { list-style: none; margin: 0; padding: 0; }
.events-list li { display: flex; gap: 8px; align-items: baseline; min-height: 24px; padding: 3px 0; border-top: 1px solid #f0f0ec; }
.events-list li:first-child { border-top: 0; }
.ev-time { flex: none; font: 11px var(--mono); color: var(--muted); }
.ev-link { color: var(--blue); text-decoration: none; }
.ev-link:hover { text-decoration: underline; }

.metric { display: flex; justify-content: space-between; align-items: baseline; min-height: 24px; }
.metric-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.metric-value { font-size: 18px; font-weight: 600; }
.metric.muted .metric-value { font-size: 13px; font-weight: 400; color: var(--muted); }

/* ---- экран станции (S19): лента шагов слева, документы и паспорт справа ---- */

.station-screen, .gate-screen, .queue-screen {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 16px 24px 24px;
}

.station-top {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.back-link, .item-link {
  min-height: 24px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--blue);
  cursor: pointer;
}

.back-link { flex: none; font-size: 13px; }
.back-link:hover, .item-link:hover { text-decoration: underline; }
.item-link-a { color: var(--blue); }

.sh-id { flex: none; font: 600 15px var(--mono); }
.sh-title { flex: 0 1 auto; min-width: 0; font-size: 18px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-detail { flex: 0 1 auto; min-width: 0; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* лента 420 px и документы; при 1280 px лента без горизонтальной прокрутки */
.station-layout {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  column-gap: 24px;
  align-items: start;
  padding-top: 14px;
}

.feed { min-width: 0; }

.feed-heading {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.feed-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: calc(100vh - 160px);
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.feed-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  min-height: var(--tap);
  padding: 6px 10px;
  border-top: 1px solid #f0f0ec;
  font-size: 13px;
  white-space: nowrap;
}

.feed-row:first-child { border-top: 0; }
.feed-row.level-1 { padding-left: 28px; font-size: 12px; }
.feed-row.level-2 { padding-left: 46px; font-size: 12px; }
.feed-row.clickable { cursor: pointer; }
.feed-row.clickable:hover { background: var(--bg); }
.feed-row.selected { background: var(--blue-bg); }
.feed-row:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.feed-row.pending { color: var(--muted); font-style: italic; }
.feed-row.pending .fr-who, .feed-row.pending .fr-outcome { color: var(--muted); }

.fr-time { flex: 0 0 86px; font: 11px var(--mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.level-1 .fr-time, .level-2 .fr-time { flex-basis: 86px; }
.fr-icon { flex: none; width: 14px; text-align: center; color: var(--muted); }
.fr-label { flex: 0 0 auto; max-width: 124px; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.level-1 .fr-label, .level-2 .fr-label, .tone-mark .fr-label { font-weight: 400; }
.fr-who { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 12px; }
.fr-outcome { flex: 0 1 auto; min-width: 0; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.tone-mark .fr-outcome { flex: 1 1 auto; max-width: none; color: var(--muted); }
.tone-ok .fr-outcome { color: var(--green-text); }
.tone-fail .fr-outcome { color: var(--red-text); }
.tone-running .fr-outcome { color: var(--blue); }
.tone-waiting .fr-outcome { color: var(--amber-text); }
.tone-skipped .fr-outcome { color: var(--muted); font-style: italic; }
.kind-dispute .fr-icon { color: var(--red); }
.kind-gate_return .fr-icon, .kind-fork .fr-icon { color: var(--amber-text); }

.pane {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.tabs {
  display: flex;
  gap: 4px;
  padding: 6px 8px 0;
  border-bottom: 1px solid var(--line);
}

.tab {
  min-height: var(--tap);
  padding: 6px 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}

.tab.active { color: var(--text); border-bottom-color: var(--text); font-weight: 600; }

.pane-body {
  padding: 14px 18px 20px;
  max-height: calc(100vh - 190px);
  overflow-y: auto;
  font-size: 13px;
}

.doc-head { margin-bottom: 10px; }
.doc-title { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.doc-sub { margin-top: 2px; overflow-wrap: anywhere; }
.doc-section { margin: 18px 0 6px; font-size: 13px; font-weight: 700; }
.doc-label { margin-top: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.doc-label.inline { margin: 0 6px 0 0; }
.doc-path { margin-top: 14px; font: 600 12px var(--mono); overflow-wrap: anywhere; }
.doc-value { margin-top: 2px; white-space: pre-wrap; overflow-wrap: anywhere; }
.doc-field { margin-top: 6px; }
.doc-note { margin-top: 6px; color: var(--muted); }
.doc-message { padding: 4px 0; }
.doc-list { margin: 4px 0 0; padding-left: 18px; }
.doc-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 8px; }
.item-current { color: var(--text); font-weight: 600; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-size: 12px; }

.doc-state { margin-top: 6px; padding: 4px 8px; border-radius: 6px; background: var(--grey-bg); color: var(--text); }
.doc-state-ok { background: var(--green-bg); color: var(--green-text); }
.doc-state-changed, .doc-state-waiting { background: var(--amber-bg); color: var(--amber-text); }
.doc-state-missing, .doc-state-invalid, .doc-state-linked { background: var(--red-bg); color: var(--red-text); }

/* длинные тексты — в прокручиваемом блоке; горизонтальная прокрутка — только внутри блока */
.doc-pre {
  margin: 6px 0 0;
  padding: 8px 10px;
  max-height: 420px;
  overflow: auto;
  border: 1px solid #f0f0ec;
  border-radius: 6px;
  background: var(--bg);
  font: 12px/1.45 var(--mono);
  white-space: pre;
}

.commit-message { white-space: pre-wrap; max-height: 160px; }
.diff .dl { display: block; }
.dl-add { background: #e6f4ea; color: #1f5f36; }
.dl-del { background: #fbe9e7; color: #8f2219; }
.dl-hunk { color: var(--blue); }
.dl-file { color: var(--muted); font-weight: 600; }
.dl-meta { color: var(--muted); }

.remark { margin-top: 8px; padding: 8px 10px; border: 1px solid #f0f0ec; border-radius: 8px; }
.remark-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.remark-label { font: 600 12px var(--mono); }
.remark-summary { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.sev, .verdict, .tag { flex: none; padding: 0 6px; border-radius: 8px; font-size: 11px; background: var(--grey-bg); color: var(--text); }
.sev-HIGH { background: var(--red-bg); color: var(--red-text); }
.sev-MED { background: var(--amber-bg); color: var(--amber-text); }
.verdict-accepted { background: var(--green-bg); color: var(--green-text); }
.verdict-rejected { background: var(--red-bg); color: var(--red-text); }
.commit, .check { margin-top: 10px; }
.check-fail .doc-sub { color: var(--red-text); }
.station-link { margin-right: 8px; font-family: var(--mono); color: var(--blue); }

/* ---- экран гейта (S20): разделы сверху вниз ---- */

.gate-summary { margin: 12px 0 4px; padding: 10px 14px; border-radius: 8px; background: var(--grey-bg); font-size: 13px; }

.gate-section {
  max-width: 980px;
  margin-top: 18px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font-size: 13px;
}

.gate-section.gate-empty { background: var(--bg); }
.gate-title { margin: 0 0 8px; font-size: 15px; font-weight: 700; }
/* отклонения и решения исполнителя — заметный блок с рамкой сразу под решениями */
.gate-deviations { border: 2px solid var(--amber); background: #fffaf0; }
.gate-deviations.gate-empty { border-color: var(--line); background: var(--bg); }
.gate-decision { border-color: var(--text); }

.criteria { list-style: none; margin: 8px 0 0; padding: 0; }
.criterion { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; min-height: 24px; padding: 3px 0; }
.criterion code { font: 12px var(--mono); }
.criterion-icon { flex: none; width: 16px; font-weight: 700; }
.criterion-passed .criterion-icon { color: var(--green-text); }
.criterion-failed .criterion-icon { color: var(--red-text); }
.criterion-not_run .criterion-icon { color: var(--muted); }
.rev-note { font-size: 12px; color: var(--amber-text); }
.evidence { margin-top: 10px; }

.card-dispute, .card-fork, .card-backlog-entry { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.decision-buttons { margin-top: 8px; }
.option-row { display: flex; flex-wrap: wrap; gap: 0 6px; }
.consequences { margin: 6px 0 0; padding-left: 18px; font-size: 12px; color: var(--muted); }
.decision-comment, .decision-other, .return-comment, .debt-text {
  display: block;
  width: 100%;
  max-width: 640px;
  margin-top: 6px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
}
.write-note { margin-top: 6px; font-size: 12px; }

.checks-story { font-weight: 600; }
.diff-stat { max-height: 240px; }

.gate-form { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.gate-form .btn { margin-right: 8px; margin-top: 4px; }
.check-row { display: flex; align-items: center; gap: 8px; min-height: var(--tap); cursor: pointer; }
.reasons { margin: 6px 0 0; padding-left: 18px; color: var(--red-text); font-size: 12px; }
.debt-rows { margin-top: 6px; }
.debt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.debt-row .debt-text { flex: 1 1 320px; margin-top: 0; }
.debt-target, .return-step { min-height: var(--tap); padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 13px; background: #fff; }
.form-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.phrase-note { margin-top: 6px; font-size: 12px; }
.return-consequences { margin-top: 8px; }

/* итог записи */
.result { margin: 8px 0 12px; padding: 10px 12px; border-radius: 8px; }
.result-ok { background: var(--green-bg); border: 1px solid #bfe0cb; color: var(--green-text); }
.result-fail { background: var(--red-bg); border: 1px solid #f0c4bf; color: var(--red-text); }
/* S28 §10: «Не подтверждено» — жёлтый; пометка ремонта у записанного решения */
.result-warn { background: var(--amber-bg); border: 1px solid #f0d9b0; color: var(--amber-text); }
.result-repair { margin-top: 6px; padding: 4px 8px; border-radius: 6px; background: var(--amber-bg); color: var(--amber-text); overflow-wrap: anywhere; }
.result-list { margin: 6px 0 0; color: var(--text); }
.result .copy-diag { margin-top: 6px; }
.result-title { font-weight: 700; }
.result-pre { max-height: 240px; color: var(--text); white-space: pre-wrap; }
.result details summary { cursor: pointer; margin-top: 6px; }

/* ---- очередь решений (S20) ---- */

.queue-note { margin: -4px 0 12px; font-size: 12px; color: var(--muted); }
.queue-item { max-width: 980px; margin-top: 12px; min-height: var(--tap); }
.queue-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.queue-project { font-weight: 700; }
.queue-sid { font: 600 13px var(--mono); }
/* S25: вид готовой развилки («повтор ревью») */
.queue-kind { font-size: 12px; color: var(--muted); }
/* S26: метка «автопилот ждёт» у решения и вид элемента «автопилот» */
.queue-autopilot { padding: 0 6px; border-radius: 8px; font-size: 12px; background: var(--amber-bg); color: var(--amber-text); }
.queue-question { margin-top: 8px; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.queue-reason { margin-top: 6px; white-space: pre-wrap; color: var(--text); }
/* C-05: блок «Арбитр» — решение или подсказка арбитра, отличимые от решения человека (очередь, экран гейта) */
.arbiter-box { margin-top: 8px; padding: 6px 10px; border-left: 3px solid var(--amber-text); background: var(--amber-bg); color: var(--text); }

/* ---- окно подтверждения (S20) ---- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(31, 31, 29, 0.45);
}

.modal-box {
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 18px 20px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  font-size: 13px;
}

.modal-title { margin: 0 0 10px; font-size: 16px; }
.modal-phrase { margin-top: 6px; }
.modal-phrase .phrase { display: inline; padding: 2px 6px; }
.modal-name { margin-top: 8px; color: var(--muted); }
.modal-consequences { margin: 4px 0 0; padding-left: 18px; }
.modal-note { margin-top: 10px; padding: 6px 8px; border-radius: 6px; background: var(--amber-bg); color: var(--amber-text); }
.modal-buttons { display: flex; gap: 8px; margin-top: 16px; }
/* S28 §10: окно держится до итога записи */
.modal-writing { margin-top: 14px; font-weight: 600; color: var(--blue); }

.phrase {
  display: block;
  margin-top: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--line);
  font: 12px var(--mono);
  overflow-wrap: anywhere;
  user-select: all;
}

/* S21: «Возврат к работе» над картой проекта */

.resume-wrap {
  padding: 24px 40px 0;
}

.resume {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font-size: 13px;
}

.resume-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 8px;
}

.resume-heading {
  margin: 0;
  font-size: 15px;
}

.resume-part + .resume-part {
  margin-top: 12px;
}

.resume-title {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.resume-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.resume-item {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  padding: 3px 0;
  overflow-wrap: anywhere;
}

.resume-station {
  font-weight: 600;
}

.resume-more {
  min-height: var(--tap);
  margin-top: 6px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--blue);
  font: inherit;
  cursor: pointer;
}

.resume-interrupted {
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--amber-bg);
  color: var(--amber-text);
}

.resume-error {
  color: var(--red-text);
}

.sh-docs {
  font-size: 12px;
  color: var(--muted);
}

.sh-docs-warn {
  color: var(--amber-text);
}

/* S25: экран «Команда» и вкладка «Состав»: участники с моделями, значки состояния модели и оплаты (цвет — не
   единственный носитель смысла: у каждого значка подпись), команды для ведущего */

.team-providers { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; }
.team-members { list-style: none; margin: 6px 0 0; padding: 0; }
.team-member { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: var(--tap); padding: 3px 0; border-bottom: 1px solid var(--line); }
.team-member:last-child { border-bottom: 0; }
.tm-role { flex: 0 0 8.5em; font-weight: 600; }
.tm-model { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.tm-default { font-size: 12px; }
.tm-conflicts { flex: 1 0 100%; margin: 2px 0 0; padding-left: 18px; color: var(--red-text); font-size: 12px; }
.chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.chip { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; background: var(--grey-bg); color: var(--text); white-space: nowrap; }
.chip-ok { background: var(--green-bg); color: var(--green-text); }
.chip-warn { background: var(--amber-bg); color: var(--amber-text); }
.chip-fail { background: var(--red-bg); color: var(--red-text); }
.chip-muted { background: var(--grey-bg); color: var(--muted); }
.chip-billing { background: var(--bg); border: 1px solid var(--line); color: var(--text); }
.chip-billing-api { background: var(--amber-bg); border-color: #f0d9b0; color: var(--amber-text); }
.team-station { margin-top: 12px; }
.team-cmd { margin-top: 8px; }
.team-cmd .copy-diag { margin-top: 4px; }
.team-edit { border: 2px solid var(--text); }
.team-select { min-height: var(--tap); max-width: 100%; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 13px; background: #fff; }
.team-preview { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }

/* ---- S28: вкладка «Чат» экрана станции (§8; V-01 — лента получает основную высоту колонки) ---- */

.pane-body.chat-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: calc(100vh - 175px);
  min-height: 420px;
  max-height: none;
  padding: 8px 12px 10px;
  /* запас: если всё же не влезло, колонка прокручивается, а поле ввода не обрезается */
  overflow-y: auto;
}

/* шапка: состояние, сессия и кнопки сессии — одной строкой; остальное — строкой ниже, по раскрытию */
.chat-head { flex: none; display: flex; flex-direction: column; gap: 2px; }
.chat-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.chat-status {
  flex: 1 1 14em;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow-wrap: anywhere;
}
.chat-status-running { color: var(--blue); }
.chat-status-waiting { color: var(--amber-text); }
.chat-status-ok { color: var(--green-text); }
.chat-status-muted { color: var(--muted); }
.chat-session { flex: none; font: 12px var(--mono); color: var(--muted); }
.chat-more { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px; font-size: 12px; }
.chat-readonly { padding: 2px 8px; border-radius: 6px; background: var(--grey-bg); color: var(--text); }
.chat-reason { font-size: 12px; overflow-wrap: anywhere; }
details.chat-reason summary, .chat-open summary { cursor: pointer; padding: 2px 0; }
details.chat-reason summary { color: var(--muted); }
.chat-open summary { color: var(--blue); }
.chat-open-warn summary { color: var(--amber-text); }
.chat-open-info { margin-top: 2px; color: var(--muted); overflow-wrap: anywhere; }
details.chat-reason[open], .chat-open[open] { flex: 1 0 100%; }

/* лента забирает всё, что осталось от шапки, полосы решений и поля ввода (основа 0, не меньше 200 px) */
.chat-list-wrap { position: relative; flex: 1 1 0; min-height: 200px; display: flex; }
.chat-list {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
}

.chat-msg { flex: none; max-width: 92%; padding: 6px 10px; border-radius: 8px; overflow-wrap: anywhere; }
.chat-human { align-self: flex-end; background: var(--blue-bg); color: var(--text); }
.chat-leader { align-self: flex-start; border: 1px solid var(--line); background: #fff; color: var(--text); }
/* инструмент — серой строкой, пробуждение и уведомление — серой плашкой, сжатие — разделителем */
.chat-tool { max-width: 100%; padding: 0 10px; font: 12px var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-plate { align-self: stretch; max-width: none; background: var(--grey-bg); color: var(--text); font-size: 12px; }
.chat-compact { align-self: stretch; max-width: none; padding: 2px 0; border-top: 1px dashed var(--line); text-align: center; font-size: 12px; color: var(--muted); }
.chat-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11px; color: var(--muted); }
.chat-who { font-weight: 600; }
.chat-text { white-space: pre-wrap; }
.chat-time { flex: none; font: 11px var(--mono); color: var(--muted); }

.chat-new {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  min-height: var(--tap);
  padding: 4px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  font: inherit;
  font-size: 12px;
  color: var(--blue);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* V-01: полоса решений — под лентой, не выше 35% колонки, со своей прокруткой; у решения — одна строка */
.chat-decisions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  max-height: 35%;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.chat-decisions-head {
  flex: none;
  min-height: var(--tap);
  padding: 4px 10px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  color: var(--text);
  cursor: pointer;
}
.chat-decisions-head:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.chat-decisions-body { flex: 0 1 auto; min-height: 0; overflow-y: auto; padding: 0 10px 4px; }
.chat-decision { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 2px 0; border-top: 1px solid var(--line); }
.chat-decision-name { flex: 0 0 auto; font-size: 12px; font-weight: 700; }
.chat-phrase { padding: 2px 6px; font-family: var(--mono); font-size: 12px; text-align: left; overflow-wrap: anywhere; }
.chat-target { min-height: 28px; padding: 2px 4px; font-size: 12px; }
/* причина — коротко в той же строке (обрезка многоточием), полный текст stn — по раскрытию на всю ширину */
.chat-why { flex: 1 1 10em; min-width: 0; font-size: 12px; color: var(--muted); }
.chat-why summary { cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-why[open] { flex-basis: 100%; }
.chat-why[open] summary { white-space: normal; }
.chat-why-text { margin-top: 2px; color: var(--text); overflow-wrap: anywhere; }
.chat-decisions > .result-line { margin: 0 10px 6px; }

/* итог записи строкой (полоса решений, записи чата): заголовок и «подробнее» — в одну строку, подробности — по раскрытию */
.result-line { flex: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin: 0; padding: 4px 10px; font-size: 12px; }
.result-line .result-title { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.result-line .result-repair { flex: 1 1 100%; }
.result-line details summary { cursor: pointer; }
.result-line details[open] { flex: 1 1 100%; }

.chat-queue { flex: 0 1 auto; max-height: 90px; overflow-y: auto; }
.chat-queue-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; min-height: var(--tap); padding: 3px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.chat-queue-text { flex: 1 1 12em; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-queue-state { color: var(--amber-text); }
.chat-queue-failed .chat-queue-state { color: var(--red-text); }
.chat-denial { flex: none; padding: 4px 10px; border-radius: 6px; background: var(--amber-bg); color: var(--amber-text); font-size: 12px; overflow-wrap: anywhere; }
.chat-skipped { flex: none; font-size: 12px; }

/* поле ввода и «Отправить» — одной строкой */
.chat-compose { flex: none; display: flex; flex-direction: column; gap: 2px; }
.chat-compose-row { display: flex; align-items: flex-end; gap: 8px; }
.chat-input { flex: 1 1 auto; min-width: 0; height: 40px; min-height: 40px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font: inherit; color: var(--text); resize: vertical; }
.chat-input:disabled { background: var(--grey-bg); }

/* узкое окно: лента станции и вкладки — друг под другом */
@media (max-width: 900px) {
  .station-layout { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .pane-body.chat-body { height: 75vh; }
}

/* S32 §3: блок «Закрытие S00» в последствиях гейта S00 — на него ведёт ссылка у «Принять с долгом» */
.planning-closure {
  margin-top: 8px;
  scroll-margin-top: 16px;
}

/* S33 §7: веб-панель — полоса раннера под шапкой, вход по passkey, кабинет; правка состава и «Новый проект» скрыты */
.runner-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 6px 24px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.runner-ok { background: var(--grey-bg); color: var(--text); }
.runner-warn { background: var(--amber-bg); color: var(--amber-text); }
.tab-off { cursor: default; }
.auth-screen { display: flex; flex-direction: column; gap: 12px; max-width: 32rem; padding: 24px 16px; }
.auth-code { font: inherit; font-size: 16px; min-height: var(--tap); padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; }
.cabinet-runner, .cabinet-passkey, .cabinet-link { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 0; }
.web-mode .team-member .btn, .web-mode .option-row { display: none; }