/* Кабинет knowledge-agent.
 *
 * Переделано после того, как первый вариант заказчику не понравился.
 * Разбор, что было не так, и чем это лечится:
 *
 *   1. Всё одного тона. Подложка, панель и поле отличались на пару
 *      процентов яркости, поэтому карточки не читались как карточки.
 *      Лечение: три явных уровня поверхности плюс граница и тень.
 *   2. Латунь везде. Один цвет был и кнопкой, и ярлыком, и полосой, и
 *      активным пунктом — иерархии не возникало. Лечение: главное действие
 *      сплошное чернильное (в тёмной теме наоборот, светлое), а латунь
 *      оставлена марке, активному разделу и предупреждению.
 *   3. Полоса под каждой строкой списка. Показывала объём текста, а
 *      выглядела сломанным индикатором. Убрана.
 *   4. Текст документа — простыня во всю ширину. Лечение: мера строки,
 *      межстрочный интервал и отбивка.
 *
 * Тем две. Светлая по умолчанию: кабинетом пользуются днём и рядом с
 * другими рабочими вкладками. Тёмная — переключателем в шапке.
 *
 * Цвета рядов на графиках прогнаны валидатором палитр для обеих тем:
 * светлота в полосе, насыщенность выше порога, соседние пары различимы при
 * дальтонизме. Подбирать такое на глаз нельзя — проверяется счётом.
 */

:root {
  /* поверхности: три явных уровня, а не оттенки одного */
  --bg: #0C1117;
  --panel: #151C25;
  --inset: #0F161E;
  --raised: #1E2834;
  --line: #242F3C;
  --line-soft: #1B242F;

  /* текст */
  --ink: #E8EDF4;
  --ink-2: #A2AEBD;
  --ink-3: #7C8899;

  /* главное действие берёт вес, а не цвет */
  --solid: #E8EDF4;
  --solid-hover: #FFFFFF;
  --solid-ink: #0C1117;

  /* латунь — марка, активный раздел, предупреждение */
  --brass: #D9A441;
  --brass-bright: #E9BC63;
  --brass-dim: rgba(217, 164, 65, 0.15);
  --brass-line: rgba(217, 164, 65, 0.4);

  --good: #4FBF86;
  --good-dim: rgba(79, 191, 134, 0.14);
  --bad: #E26A6A;
  --bad-dim: rgba(226, 106, 106, 0.14);

  /* ряды на графиках: прогнаны валидатором палитр для тёмной подложки —
     светлота в полосе, насыщенность выше порога, соседние пары различимы
     при дальтонизме */
  --s1: #4DA3DC;
  --s2: #D09A2E;
  --s3: #9A7FE6;

  --shadow-1: none;
  --shadow-2: 0 10px 28px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 28px 64px rgba(0, 0, 0, 0.6);
  --veil: rgba(4, 7, 11, 0.62);

  /* скругления разного уровня: одинаковые на всём — признак набора шаблонов */
  --r-xs: 5px;
  --r-s: 7px;
  --r-m: 10px;
  --r-l: 14px;

  --rail: 52px;
  --nav: 216px;
  --status: 30px;

  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --measure: 78ch;
}

* { box-sizing: border-box; }

/* Атрибут hidden слабее любого правила с display, а у оболочки и у входа
   display задан. Без этой строки скрытый экран остаётся на виду. */
[hidden] { display: none !important; }

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

body {
  background: var(--bg);
  color: var(--ink);
  font: 400 13.5px/1.55 "Golos Text", system-ui, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--ink); text-decoration-color: var(--line); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
  border-radius: 3px;
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb {
  background: var(--line); border-radius: 7px;
  border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ── вход ──────────────────────────────────────────────────────────────── */

.gate {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; padding: 24px;
  background: var(--bg);
}
.gate form {
  width: min(420px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: 30px;
  box-shadow: var(--shadow-2);
}
.gate .mark { margin-bottom: 22px; }
.gate h1 { font-size: 20px; font-weight: 600; margin: 0 0 7px; letter-spacing: -0.02em; }
.gate p { color: var(--ink-2); font-size: 13px; margin: 0 0 20px; line-height: 1.6; }
.gate input { width: 100%; margin-bottom: 12px; }
.gate .err { color: var(--bad); font-size: 13px; min-height: 18px; margin-top: 12px; }

/* ── каркас ────────────────────────────────────────────────────────────── */

.app {
  display: grid;
  grid-template-columns: var(--nav) 1fr;
  grid-template-rows: var(--rail) 1fr var(--status);
  grid-template-areas: "rail rail" "nav main" "bar bar";
  height: 100vh;
}

.rail {
  grid-area: rail;
  display: flex; align-items: center; gap: 14px;
  padding: 0 14px 0 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.mark { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -0.015em; }
.mark .lamp {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brass-bright);
  box-shadow: 0 0 0 3px var(--brass-dim);
}
.mark span { font-size: 14px; }
.mark em { font-style: normal; color: var(--ink-3); font-weight: 400; }

.rail .spacer { flex: 1; }

.finder {
  display: flex; align-items: center; gap: 9px;
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 7px 10px;
  color: var(--ink-3);
  font-size: 13px;
  cursor: text;
  min-width: 280px;
}
.finder:hover { border-color: var(--ink-3); color: var(--ink-2); }
.finder kbd {
  margin-left: auto;
  font: 500 10.5px/1 var(--mono);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: 4px 6px;
  color: var(--ink-3);
}

.tenant {
  display: flex; align-items: center; gap: 7px;
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 6px 10px;
  font-size: 13px; cursor: pointer;
}
.tenant:hover { border-color: var(--ink-3); }
.tenant select {
  appearance: none; background: none; border: 0; padding: 0;
  font-weight: 500; cursor: pointer; max-width: 170px;
}
.tenant svg { width: 14px; height: 14px; color: var(--ink-3); }

/* ── навигация ─────────────────────────────────────────────────────────── */

nav {
  grid-area: nav;
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 12px 10px;
  overflow-y: auto;
}

nav .group { font-size: 11px; font-weight: 500; color: var(--ink-3); padding: 16px 10px 7px; }
nav .group:first-child { padding-top: 2px; }

nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px;
  border-radius: var(--r-s);
  color: var(--ink-2);
  font-size: 13.5px;
  position: relative;
  text-decoration: none;
}
nav a:hover { background: var(--raised); color: var(--ink); }
nav a svg { width: 17px; height: 17px; flex: none; opacity: 0.7; }
nav a .count { margin-left: auto; font: 500 11px/1 var(--mono); color: var(--ink-3); }

/* активный пункт: сигнальная полоса слева, а не заливка во весь блок */
nav a[aria-current="true"] { background: var(--raised); color: var(--ink); font-weight: 500; }
nav a[aria-current="true"]::before {
  content: "";
  position: absolute; left: -10px; top: 6px; bottom: 6px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--brass-bright);
}
nav a[aria-current="true"] svg { opacity: 1; }

/* ── содержимое ────────────────────────────────────────────────────────── */

main { grid-area: main; overflow: hidden; display: flex; flex-direction: column; }

.head {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.head > .width {
  display: flex; align-items: flex-end; gap: 16px;
  width: 100%; max-width: 1540px; margin: 0 auto;
}
.head h1 { font-size: 22px; font-weight: 600; margin: 0; letter-spacing: -0.025em; }
.head .sub { color: var(--ink-3); font-size: 13px; margin-top: 4px; }
.head .acts { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.scroll { overflow-y: auto; padding: 22px 24px 32px; flex: 1; }
.scroll > .width { max-width: 1540px; margin: 0 auto; }

/* Экраны «список — подробности» и «диалог» занимают всю высоту сами. */
.scroll.flush { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.scroll.flush > * { flex: 1; min-height: 0; }

/* ── кнопки ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: var(--r-s);
  padding: 7px 12px;
  font-size: 13px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  box-shadow: var(--shadow-1);
  transition: background 0.12s, border-color 0.12s;
}
.btn:hover:not(:disabled) { background: var(--raised); border-color: var(--ink-3); }
.btn:disabled { opacity: 0.45; cursor: default; box-shadow: none; }
.btn svg { width: 15px; height: 15px; }

/* Главное действие берёт вес, а не цвет: так на экране всегда понятно, что
   тут главное, и акцентный цвет остаётся свободен для состояний. */
.btn.primary {
  background: var(--solid);
  border-color: var(--solid);
  color: var(--solid-ink);
  font-weight: 600;
}
.btn.primary:hover:not(:disabled) { background: var(--solid-hover); border-color: var(--solid-hover); }

.btn.ghost { background: none; border-color: transparent; color: var(--ink-2); box-shadow: none; }
.btn.ghost:hover:not(:disabled) { background: var(--raised); color: var(--ink); border-color: transparent; }

.btn.danger { color: var(--bad); }
.btn.danger:hover:not(:disabled) { background: var(--bad-dim); border-color: var(--bad); }

.btn.small { padding: 4px 9px; font-size: 12px; }
.btn.icon { padding: 7px; }
.btn.icon svg { width: 16px; height: 16px; }

/* ── поля ──────────────────────────────────────────────────────────────── */

input[type="text"], input[type="password"], input[type="number"], textarea, select.field {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  padding: 8px 11px;
  width: 100%;
  color: var(--ink);
  box-shadow: var(--shadow-1);
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:focus, textarea:focus, select.field:focus {
  border-color: var(--ink-3);
  outline: none;
  box-shadow: 0 0 0 3px var(--brass-dim);
}

/* Своя стрелка: системная приходит чужим серым треугольником. Правило идёт
   после общего, иначе фон перебивает картинку. */
select.field {
  appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C8899' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 15px;
}
textarea { resize: vertical; min-height: 96px; line-height: 1.65; }
textarea.code { font: 400 12.5px/1.7 var(--mono); }

.field-row { display: grid; gap: 6px; margin-bottom: 16px; }
.field-row label { font-size: 12px; color: var(--ink-2); font-weight: 500; }
.field-row .hint { font-size: 12px; color: var(--ink-3); line-height: 1.5; }
.field-row.pair { grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
/* Вложенные ряды не растягиваются по высоте соседа: иначе поле без
   подписи вытягивается и пара перестаёт быть парой. */
.field-row.pair > .field-row { align-content: start; height: auto; }

.switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13px; color: var(--ink-2); }
.switch input { display: none; }
.switch .track {
  width: 34px; height: 20px; border-radius: 10px;
  background: var(--raised);
  border: 1px solid var(--line);
  position: relative; transition: background 0.14s, border-color 0.14s;
}
.switch .track::after {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--ink-3);
  transition: transform 0.14s, background 0.14s;
}
.switch input:checked + .track { background: var(--brass-dim); border-color: var(--brass-line); }
.switch input:checked + .track::after { transform: translateX(14px); background: var(--brass); }

/* ── вкладки ───────────────────────────────────────────────────────────── */

.tabs {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
}
.tabs button {
  background: none; border: 0; cursor: pointer;
  padding: 6px 12px; border-radius: var(--r-xs);
  font-size: 13px; color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] {
  background: var(--panel); color: var(--ink); font-weight: 500;
  box-shadow: var(--shadow-1);
}
.tabs button .n { font: 500 11px/1 var(--mono); color: var(--ink-3); }
.tabs button[aria-selected="true"] .n { color: var(--ink-2); }
.tabs.stretch { display: flex; }
.tabs.stretch button { flex: 1; justify-content: center; }

/* ── панели ────────────────────────────────────────────────────────────── */

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: 20px;
  box-shadow: var(--shadow-1);
}
.panel > h2 {
  font-size: 13px; font-weight: 600; margin: 0 0 16px;
  color: var(--ink);
  display: flex; align-items: center; gap: 8px;
}
.panel > h2 .more { margin-left: auto; font-weight: 400; font-size: 12px; color: var(--ink-3); }
.panel.tight { padding: 16px; }

.grid { display: grid; gap: 16px; }
.grid.two { grid-template-columns: 1fr 1fr; }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ── приговор состояния ────────────────────────────────────────────────── */

.verdict {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-l) var(--r-l) 0 0;
  border-bottom: 0;
}
.verdict .sign { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; }
.verdict .sign svg { width: 20px; height: 20px; }
.verdict.ok .sign { background: var(--good-dim); color: var(--good); }
.verdict.warn .sign { background: var(--brass-dim); color: var(--brass); }
.verdict.bad .sign { background: var(--bad-dim); color: var(--bad); }
.verdict h2 { margin: 0 0 4px; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.verdict p { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.55; }
.verdict .btn { margin-left: auto; flex: none; }

.pipeline {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0 0 var(--r-l) var(--r-l);
  border-top: 1px solid var(--line-soft);
  padding: 20px 22px 18px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-1);
}
.pipeline .stages { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: start; }
.stage { padding-right: 22px; }
.stage:last-child { padding-right: 0; }
.stage .rail { display: flex; align-items: center; margin: 2px 0 14px; }
.stage .dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--raised); box-shadow: 0 0 0 1px var(--line);
}
.stage .line { flex: 1; height: 1px; background: var(--line); margin-left: 8px; }
.stage:last-child .line { display: none; }
.stage.ok .dot { background: var(--good); box-shadow: 0 0 0 1px var(--good); }
.stage.weak .dot { background: var(--brass-bright); box-shadow: 0 0 0 1px var(--brass); }
.stage.off .dot { background: var(--bad); box-shadow: 0 0 0 1px var(--bad); }

.stage .v {
  font: 500 27px/1 var(--mono);
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.stage .v small { font-size: 14px; color: var(--ink-3); font-weight: 400; letter-spacing: 0; }
.stage .k { font-size: 12.5px; color: var(--ink); margin-top: 8px; }
.stage .n { font-size: 12px; color: var(--ink-3); margin-top: 3px; }

/* ── числа, метки, лампы ───────────────────────────────────────────────── */

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.lampline { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.lampline i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); flex: none; }
.lampline.ok i { background: var(--good); }
.lampline.warn i { background: var(--brass-bright); }
.lampline.bad i { background: var(--bad); }
.lampline.ok { color: var(--good); }
.lampline.warn { color: var(--brass); }
.lampline.bad { color: var(--bad); }

/* Ярлык нейтральный, различается точкой. Красить сам ярлык в цвет ряда
   значило бы сорок цветных пятен в списке и ни одного смысла. */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 500;
  background: var(--inset);
  border: 1px solid var(--line);
  color: var(--ink-2);
  border-radius: var(--r-xs);
  padding: 2px 7px;
}
.tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); }
.tag.s1::before { background: var(--s1); }
.tag.s2::before { background: var(--s2); }
.tag.s3::before { background: var(--s3); }
.tag.plain::before { display: none; }
.tag.off { color: var(--ink-3); }

/* ── полосы ────────────────────────────────────────────────────────────── */

.bars { display: grid; gap: 12px; }
.bars .row { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; align-items: baseline; }
.bars .row .name { font-size: 13px; }
.bars .row .val { font: 500 13px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.bars .row .track {
  grid-column: 1 / -1; height: 6px;
  background: var(--raised); border-radius: 3px; overflow: hidden;
}
.bars .row .fill { height: 100%; border-radius: 3px; background: var(--s1); }

/* ── матрица 2×2 ───────────────────────────────────────────────────────── */

.matrix {
  display: grid; grid-template-columns: auto 1fr 1fr; gap: 1px;
  font-size: 12px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden;
}
.matrix div { padding: 10px; background: var(--panel); }
.matrix .lbl { background: var(--inset); color: var(--ink-3); display: flex; align-items: center; }
.matrix .cell { text-align: center; }
.matrix .cell b { display: block; font: 500 20px/1.25 var(--mono); }
.matrix .cell span { color: var(--ink-3); font-size: 11px; }
.matrix .cell.hit b { color: var(--good); }
.matrix .cell.miss b { color: var(--bad); }

/* ── список и подробности ──────────────────────────────────────────────── */

.split { display: grid; grid-template-columns: 360px 1fr; height: 100%; overflow: hidden; }
.split.wide { grid-template-columns: 400px 1fr; }
/* Спрятанная панель: документ читается во всю ширину. */
.split.collapsed { grid-template-columns: 1fr; }
.split.collapsed > .list { display: none; }
.split > .list { border-right: 1px solid var(--line); overflow-y: auto; background: var(--panel); }
.split > .detail { overflow-y: auto; padding: 22px 26px 32px; background: var(--bg); }

.list .filter {
  position: sticky; top: 0; z-index: 2;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding: 12px; display: grid; gap: 10px;
}
.list .filter input { background: var(--inset); }

/* Заголовок группы: щелчок складывает, ярлык типа стоит здесь один раз
   вместо повторения в каждой строке. */
.list .groupname {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 14px;
  background: var(--inset);
  border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  color: var(--ink-2); cursor: pointer; text-align: left;
}
.list .groupname:hover { background: var(--raised); }
.list .groupname .who { font: 500 11.5px/1.4 var(--mono); }
.list .groupname .n { margin-left: auto; font: 500 11px/1 var(--mono); color: var(--ink-3); }
.list .groupname .caret {
  width: 13px; height: 13px; flex: none; color: var(--ink-3);
  transform: rotate(90deg); transition: transform 0.14s;
}
.list .groupname[aria-expanded="false"] .caret { transform: rotate(0deg); }

/* Строка — одна линия заголовка и приглушённая строка различий. Так на
   экран помещается вдвое больше, и список перестаёт быть стеной. */
.item {
  display: block; width: 100%; text-align: left;
  background: none; border: 0;
  border-bottom: 1px solid var(--line-soft);
  padding: 9px 14px 9px 16px; cursor: pointer; position: relative;
}
.item:hover { background: var(--inset); }
.item[aria-current="true"] { background: var(--raised); }
.item[aria-current="true"]::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--brass-bright);
}
.item .t {
  font-size: 13px; font-weight: 500; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.item .s { display: flex; gap: 10px; align-items: baseline; margin-top: 3px; }
.item .s .where {
  flex: 1; min-width: 0;
  font: 400 11px/1.4 var(--mono); color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.item .s .n { font: 400 11px/1.4 var(--mono); color: var(--ink-3); flex: none; }
/* Единица измерения — только там, где число действительно про куски.
   Правило на все .item подписывало «кус.» и к именам вопросов, и к
   счётчикам полок. */
#k-rows .item .s .n::after, #sh-docs .item .s .n::after { content: " кус."; }

/* ── таблицы ───────────────────────────────────────────────────────────── */

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  text-align: left; font-weight: 500; font-size: 11.5px; color: var(--ink-3);
  padding: 0 12px 9px; border-bottom: 1px solid var(--line);
}
td { padding: 11px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
tbody tr:hover td { background: var(--inset); }

/* ── документ ──────────────────────────────────────────────────────────── */

.dochead { margin-bottom: 18px; }
.dochead .row { display: flex; align-items: flex-start; gap: 16px; }
.dochead h2 { margin: 0 0 7px; font-size: 20px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.3; }
.dochead .uri { font: 400 12px/1.5 var(--mono); color: var(--ink-3); word-break: break-all; }
.dochead .facts {
  display: flex; flex-wrap: wrap; align-items: stretch;
  margin-top: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.dochead .facts .f {
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 18px;
  border-right: 1px solid var(--line-soft);
}
.dochead .facts .f:last-child { border-right: 0; }
.dochead .facts .f b { font: 500 15px/1.2 var(--mono); font-variant-numeric: tabular-nums; }
.dochead .facts .f span { font-size: 11px; color: var(--ink-3); }

/* Текст документа — проза, а не дамп. Мера строки, отбивка, интервал:
   иначе страница на девяносто тысяч знаков нечитаема в принципе. */
.prose {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 24px 28px;
  box-shadow: var(--shadow-1);
}
.prose .line {
  max-width: var(--measure);
  font-size: 14px; line-height: 1.75; color: var(--ink-2);
  margin: 0 0 18px;
}
.prose .line:last-child { margin-bottom: 0; }

.chunk {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 2px solid var(--s1);
  border-radius: var(--r-s);
  padding: 12px 16px;
  margin-bottom: 9px;
  font-size: 13px; line-height: 1.65;
  color: var(--ink-2);
  white-space: pre-wrap;
  max-width: calc(var(--measure) + 6ch);
}
.chunk.cold { border-left-color: var(--bad); }
.chunk .no { font: 500 11px/1 var(--mono); color: var(--ink-3); display: block; margin-bottom: 8px; }

.more-row { text-align: center; padding: 14px 0 2px; }

/* ── свои записи ───────────────────────────────────────────────────────── */

.noteform { display: grid; gap: 16px; max-width: 860px; }
/* Со спрятанным списком форма не должна жаться к левому краю: поля шире
   860 нечитаемы, поэтому не растягиваем, а ставим по центру. */
.split.collapsed .noteform, .split.collapsed .dochead, .split.collapsed #k-doctabs,
.split.collapsed #k-docbody { margin-left: auto; margin-right: auto; max-width: 1080px; }
.noteform .actions {
  position: sticky; bottom: -32px;
  display: flex; gap: 9px; align-items: center;
  padding: 14px 0 4px;
  background: linear-gradient(180deg, transparent 0%, var(--bg) 45%);
}
.noteform .dirty { font-size: 12px; color: var(--brass); }

/* ── диалог ───────────────────────────────────────────────────────────── */

.ask-shell { display: grid; grid-template-columns: 1fr 380px; height: 100%; overflow: hidden; }
.ask-column { display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }
.ask-main { flex: 1; min-height: 0; overflow-y: auto; padding: 24px 26px 20px; }

/* Строка собеседника: кто перед нами и что с беседой. Без неё непонятно,
   помнит ли агент этот разговор вообще. */
.whois {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 26px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.whois label { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--ink-2); }
.whois input { width: 210px; background: var(--inset); padding: 5px 10px; font-size: 13px; }
.whois .spacer { flex: 1; }

.recalled {
  font-size: 12.5px; line-height: 1.6; color: var(--ink-2);
  padding: 8px 0; border-bottom: 1px solid var(--line-soft);
}
.recalled:last-child { border-bottom: 0; }
.ask-side { border-left: 1px solid var(--line); overflow-y: auto; padding: 18px; background: var(--panel); }

.turn { margin-bottom: 24px; display: grid; gap: 12px; }
.turn:last-child { margin-bottom: 4px; }
.bubble { border-radius: var(--r-l); padding: 15px 18px; max-width: 760px; }
/* Вопрос справа, ответ слева: так переписку читают везде, и спорить с этой
   привычкой — делать работу глазам. */
.bubble.q {
  background: var(--raised);
  border: 1px solid var(--line);
  border-bottom-right-radius: var(--r-xs);
  justify-self: end;
}
.bubble.a {
  background: var(--panel);
  border: 1px solid var(--line);
  border-bottom-left-radius: var(--r-xs);
  justify-self: start;
}
.bubble .who { font-size: 11px; color: var(--ink-3); margin-bottom: 8px; }
.bubble p { margin: 0; white-space: pre-wrap; line-height: 1.7; font-size: 14px; }
.bubble .flags { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; align-items: center; }

/* Источники ответа: то, на что модель сослалась. Это и есть ссылки, которые
   имеет смысл отдать клиенту, — остальные куски она видела, но не
   использовала. */
.bubble .sources {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  display: grid; gap: 5px;
}
.bubble .sources a {
  font-size: 12.5px; color: var(--ink-2);
  text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bubble .sources a::before { content: "↗ "; color: var(--ink-3); }
.bubble .sources a:hover { color: var(--ink); text-decoration: underline; }

.composer { padding: 14px 26px 16px; border-top: 1px solid var(--line); background: var(--panel); }
.composer .box {
  display: flex; gap: 10px; align-items: flex-end;
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: 8px 8px 8px 16px;
  max-width: 1000px; margin: 0 auto;
}
.composer .box:focus-within { border-color: var(--ink-3); box-shadow: 0 0 0 3px var(--brass-dim); }
/* Поле растёт само под текст: тянуть угол мышью — работа, которую
   интерфейс обязан делать за человека. */
.composer textarea {
  flex: 1; border: 0; background: none; padding: 8px 0; box-shadow: none;
  min-height: 26px; max-height: 40vh; resize: none; overflow-y: auto; font-size: 14px;
}
.composer textarea:focus { border: 0; background: none; outline: none; box-shadow: none; }
.composer .hint {
  max-width: 1000px; margin: 9px auto 0;
  font-size: 11.5px; color: var(--ink-3);
  display: flex; gap: 14px; align-items: center;
}
.composer .hint .spacer { flex: 1; }

.hit { border-bottom: 1px solid var(--line-soft); padding: 13px 0; }
.hit:last-child { border-bottom: 0; }
.hit .top { display: flex; gap: 8px; align-items: baseline; cursor: pointer; }
.hit .top b { font-size: 13px; flex: 1; min-width: 0; line-height: 1.4; }
.hit .score { font: 500 12px/1 var(--mono); color: var(--ink-2); flex: none; }
.hit .body { font-size: 12.5px; color: var(--ink-2); line-height: 1.65; margin-top: 8px; }
.hit .body.clip {
  max-height: 76px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
  mask-image: linear-gradient(180deg, #000 55%, transparent);
}

/* ── проверки ─────────────────────────────────────────────────────────── */

.case {
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--panel);
  margin-bottom: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.case > summary { display: flex; gap: 12px; align-items: center; padding: 12px 15px; cursor: pointer; list-style: none; }
.case > summary::-webkit-details-marker { display: none; }
.case > summary:hover { background: var(--inset); }
.case > summary .q { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.case > summary .name { font: 500 11px/1 var(--mono); color: var(--ink-3); flex: none; }
.case[open] > summary { border-bottom: 1px solid var(--line-soft); background: var(--inset); }
.case .inside { padding: 16px 15px; }
.case .question { color: var(--ink); line-height: 1.7; margin: 0 0 16px; font-size: 14px; max-width: var(--measure); }

.flagpair {
  display: grid; grid-template-columns: auto 1fr 1fr; gap: 1px;
  font-size: 12px; margin-bottom: 16px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-s); overflow: hidden; max-width: 560px;
}
.flagpair > div { padding: 9px 11px; background: var(--panel); }
.flagpair .h { color: var(--ink-3); background: var(--inset); }
.flagpair .same { color: var(--ink-2); }
.flagpair .diff { color: var(--bad); font-weight: 500; }

.runrow { cursor: pointer; }
.pickbox {
  width: 16px; height: 16px; border-radius: var(--r-xs); flex: none; padding: 0;
  border: 1px solid var(--line); background: var(--panel);
  display: grid; place-items: center; cursor: pointer;
}
.pickbox[aria-checked="true"] { background: var(--solid); border-color: var(--solid); }
.pickbox svg { width: 11px; height: 11px; color: var(--solid-ink); opacity: 0; }
.pickbox[aria-checked="true"] svg { opacity: 1; }

.comparebar {
  position: sticky; bottom: 0; z-index: 3;
  display: flex; align-items: center; gap: 12px;
  margin-top: 14px; padding: 12px 16px;
  background: var(--panel);
  border: 1px solid var(--brass-line);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-2);
}

/* ── промпт ───────────────────────────────────────────────────────────── */

.promptwrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.promptwrap > .panel { display: flex; flex-direction: column; }
.promptwrap textarea { flex: 1; min-height: 420px; }
/* Собранный промпт тянется на ту же высоту, что и поле правки: две колонки
   разной длины читаются как сломанная вёрстка. */
.promptwrap .log.grow { flex: 1; max-height: none; }
.promptwrap .side { display: grid; gap: 16px; align-content: start; }
.slotmark {
  display: inline-flex; align-items: center;
  font: 500 12px/1 var(--mono);
  color: var(--brass); background: var(--brass-dim);
  border: 1px solid var(--brass-line); border-radius: var(--r-xs);
  padding: 3px 6px;
}

/* ── строка состояния ──────────────────────────────────────────────────── */

.bar {
  grid-area: bar;
  display: flex; align-items: center; gap: 18px;
  padding: 0 18px;
  background: var(--panel);
  border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-3);
}
.bar .spacer { flex: 1; }
.bar .job { display: flex; align-items: center; gap: 10px; color: var(--ink-2); min-width: 0; }
.bar .job .what { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 420px; }
.bar .job .track { width: 130px; height: 4px; background: var(--raised); border-radius: 2px; overflow: hidden; flex: none; }
.bar .job .track i { display: block; height: 100%; background: var(--brass-bright); transition: width 0.3s; }
.bar .job .track.indeterminate i { width: 35% !important; animation: slide 1.4s ease-in-out infinite; }
@keyframes slide { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }

/* ── сообщения ─────────────────────────────────────────────────────────── */

.toasts {
  position: fixed; right: 18px; bottom: calc(var(--status) + 16px);
  display: grid; gap: 9px; z-index: 70;
  width: min(380px, calc(100vw - 36px));
}
.toast {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-3);
  border-radius: var(--r-m);
  padding: 11px 14px;
  font-size: 13px;
  box-shadow: var(--shadow-2);
  animation: rise 0.16s ease-out;
}
.toast.ok { border-left-color: var(--good); }
.toast.bad { border-left-color: var(--bad); }
.toast b { display: block; font-weight: 600; margin-bottom: 3px; }
.toast span { color: var(--ink-2); }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

/* ── окна ──────────────────────────────────────────────────────────────── */

.veil {
  position: fixed; inset: 0; background: var(--veil);
  z-index: 80; display: grid; place-items: center; padding: 26px;
  animation: fade 0.12s ease-out;
  backdrop-filter: blur(2px);
}
@keyframes fade { from { opacity: 0; } }
.sheet {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  max-height: calc(100vh - 80px);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
.sheet > header { display: flex; align-items: center; gap: 12px; padding: 17px 20px; border-bottom: 1px solid var(--line); }
.sheet > header h2 { font-size: 16px; font-weight: 600; margin: 0; letter-spacing: -0.02em; }
.sheet > header .btn { margin-left: auto; }
.sheet > .body { padding: 20px; overflow-y: auto; }
.sheet > .body.sectioned { padding: 0; }
.sheet > footer {
  display: flex; gap: 9px; justify-content: flex-end;
  padding: 15px 20px; border-top: 1px solid var(--line); background: var(--inset);
}
.sheet > footer .left { margin-right: auto; }

.formsection { padding: 18px 20px; border-bottom: 1px solid var(--line-soft); }
.formsection:last-child { border-bottom: 0; }
.formsection > h3 { margin: 0 0 16px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.formsection .field-row:last-child { margin-bottom: 0; }

/* ── палитра команд ────────────────────────────────────────────────────── */

.palette-veil { align-items: flex-start; padding-top: 12vh; }
.palette {
  width: min(580px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
.palette input {
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: none; padding: 15px 18px; font-size: 15px; box-shadow: none;
}
.palette input:focus { background: none; box-shadow: none; }
.palette .results { max-height: 52vh; overflow-y: auto; padding: 7px; }
.palette .opt {
  display: flex; align-items: center; gap: 11px;
  width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer;
  padding: 9px 11px; border-radius: var(--r-s);
  color: var(--ink-2);
}
.palette .opt svg { width: 16px; height: 16px; opacity: 0.65; flex: none; }
.palette .opt .t { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette .opt .where { margin-left: auto; font-size: 11px; color: var(--ink-3); flex: none; }
.palette .opt[aria-selected="true"] { background: var(--raised); }
.palette .opt[aria-selected="true"] svg { opacity: 1; }
.palette .none { padding: 20px 18px; color: var(--ink-3); font-size: 13px; }

/* ── пустые состояния, протокол, мелочи ────────────────────────────────── */

.blank { text-align: center; padding: 48px 20px; color: var(--ink-3); }
.blank b { display: block; color: var(--ink); font-weight: 600; font-size: 15px; margin-bottom: 7px; }
.blank p { margin: 0 auto 18px; max-width: 420px; font-size: 13px; line-height: 1.65; }

.log {
  font: 400 12px/1.75 var(--mono);
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  padding: 14px 16px;
  max-height: 280px; overflow-y: auto;
  color: var(--ink-2);
  white-space: pre-wrap;
}

.note { font-size: 12.5px; color: var(--ink-3); line-height: 1.65; }

mark { background: var(--brass-dim); color: var(--brass-bright); border-radius: 3px; padding: 0 2px; }
.fail {
  background: var(--bad-dim);
  border: 1px solid var(--bad);
  border-radius: var(--r-s);
  padding: 12px 14px;
  font-size: 13px;
  color: var(--bad);
}

.skeleton {
  background: linear-gradient(90deg, var(--raised) 25%, var(--line-soft) 50%, var(--raised) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
  border-radius: var(--r-xs);
  height: 12px;
}
@keyframes shimmer { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

@media (max-width: 1240px) {
  .promptwrap { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
  .grid.two, .grid.three { grid-template-columns: 1fr; }
  .split, .split.wide { grid-template-columns: 1fr; }
  .split > .list { border-right: 0; border-bottom: 1px solid var(--line); max-height: 42vh; }
  .ask-shell { grid-template-columns: 1fr; }
  .ask-side { border-left: 0; border-top: 1px solid var(--line); }
}