/* Chernobog: оформление приложения. Новый вид — задание 30, спека projects/chernobog/design/spec-app-v2.md v1.4:
   направление «Б · Сумерки», шрифты Onest и JetBrains Mono — свои файлы в app/fonts/, иконки Lucide — app/icons/. */

/* ---------- токены: раздел 2 спеки, имена — по ID (--color-bg ← TOK-COLOR-BG) ----------
   Цвета, шрифты, отступы, радиусы, тени и движение — только здесь: хексов и rgb() ниже этого блока нет (цвета
   аватарок ролей — в app/avatars/*.svg). Тему ставит app/theme-init.js: <html data-theme="light|dark">. */
:root {
  color-scheme: light;
  --color-bg: #FCFCFE;               /* фон области чата и страниц; цвет окна программы (theme-init.js) */
  --color-side: #F4F4F8;             /* боковая панель */
  --color-surface: #FFFFFF;          /* карточки, поле ввода, окна, меню */
  --color-hover: #EFEEF4;            /* наведение на строку и кнопку */
  --color-selected: #E9E9F0;         /* выбранный пункт и чат */
  --color-pressed: #DFDFE7;          /* нажатие */
  --color-bubble: #ECECF5;           /* пузырь владельца */
  --color-chip: #ECECF3;             /* чип, контейнер переключателя, значок в плашке */
  --color-segment: #FFFFFF;          /* выбранный сегмент переключателя */
  --color-code: #F5F5F9;             /* блок кода, шапка таблицы */
  --color-border: #DFDFE6;           /* рамки и разделители */
  --color-border-strong: #C6C6D0;    /* рамка поля; поле ввода с текстом */
  --color-text: #1B1B23;
  --color-muted: #636371;            /* второй текст, иконки действий */
  --color-accent: #61579E;           /* главная кнопка, знаки, ссылки, фокус */
  --color-accent-hover: #53498E;
  --color-accent-pressed: #49407D;
  --color-on-accent: #FFFFFF;
  --color-accent-soft: #E8E7FC;      /* фон акцентного чипа, выбранный вариант */
  --color-ok: #2B7440;
  --color-ok-soft: #E3F6E6;
  --color-warn: #8A6000;
  --color-warn-soft: #FDF1D8;
  --color-bad: #AC3031;
  --color-bad-hover: #972527;
  --color-bad-soft: #FFEAE8;
  --color-on-bad: #FFFFFF;
  --color-overlay: rgb(20 20 31 / 0.32);        /* #14141F · 32 % — подложка под окном и шторкой */
  --color-shadow-soft: rgb(20 20 31 / 0.06);    /* #14141F · 6 % */
  --color-shadow-strong: rgb(20 20 31 / 0.12);  /* #14141F · 12 % */
  /* фон знака Chernobog — цвет фона картинки владельца (спека, раздел 9), в обеих темах; виден, пока она грузится */
  --color-sign: #1C143B;

  /* 2.2 типографика: font-shorthand «начертание размер/строка семейство» */
  --font-ui: 'Onest', system-ui, sans-serif;
  --font-code: 'JetBrains Mono', ui-monospace, monospace, system-ui;
  --type-title: 600 20px/28px var(--font-ui);
  --type-heading: 600 16px/24px var(--font-ui);
  --type-body: 400 15px/24px var(--font-ui);
  --type-body-strong: 600 15px/24px var(--font-ui);
  --type-ui: 400 14px/20px var(--font-ui);
  --type-ui-strong: 500 14px/20px var(--font-ui);
  --type-ui-emph: 600 14px/20px var(--font-ui);
  --type-small: 400 13px/20px var(--font-ui);
  --type-small-strong: 600 13px/20px var(--font-ui);
  --type-caption: 400 12px/16px var(--font-ui);
  --type-caption-strong: 500 12px/16px var(--font-ui);
  --type-code: 400 13px/20px var(--font-code);
  --type-code-entry: 500 24px/32px var(--font-code);

  /* 2.3 отступы (сетка 4), радиусы, тени */
  --sp-2: 2px; --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-20: 20px; --sp-24: 24px;
  --sp-32: 32px; --sp-40: 40px; --sp-48: 48px; --sp-64: 64px;
  --radius-4: 4px; --radius-8: 8px; --radius-12: 12px; --radius-16: 16px; --radius-full: 999px;
  --shadow-1: 0 1px 2px var(--color-shadow-soft), 0 4px 12px var(--color-shadow-strong);   /* меню, подсказка */
  --shadow-2: 0 2px 4px var(--color-shadow-soft), 0 8px 24px var(--color-shadow-strong);   /* поиск, сообщение */
  --shadow-3: 0 4px 8px var(--color-shadow-soft), 0 16px 48px var(--color-shadow-strong);  /* окно, шторка */

  /* 2.4 движение */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-fast: 150ms;    /* наведение, нажатие, цвет и тема, подсказка, стрелка группы; закрытие — ease-in */
  --motion-base: 200ms;    /* панель 280 ↔ 56, полоса цели, окно, меню, всплывающее сообщение, шторка */
  --motion-pulse: 1600ms;  /* знак «идёт работа» */
  --motion-rec: 1000ms;    /* точка записи голосового */
  --motion-flash: 2400ms;  /* найденное поиском сообщение; подсказка — через 400 мс наведения (app.js) */
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #19191E;
  --color-side: #131318;
  --color-surface: #212128;
  --color-hover: #25242D;
  --color-selected: #2A2934;
  --color-pressed: #302F3A;
  --color-bubble: #272631;
  --color-chip: #2A2934;
  --color-segment: #3A3946;
  --color-code: #131318;
  --color-border: #2D2C36;
  --color-border-strong: #42414C;
  --color-text: #E9E9EF;
  --color-muted: #A2A1AF;
  --color-accent: #A19BE0;
  --color-accent-hover: #B4AFEE;
  --color-accent-pressed: #C4C0F9;
  --color-on-accent: #11101A;
  --color-accent-soft: #2A283E;
  --color-ok: #83D494;
  --color-ok-soft: #172C1C;
  --color-warn: #E8BE62;
  --color-warn-soft: #332710;
  --color-bad: #F58B84;
  --color-bad-hover: #FDA19A;
  --color-bad-soft: #3E1E1C;
  --color-on-bad: #1A0E0E;
  --color-overlay: rgb(0 0 0 / 0.56);
  --color-shadow-soft: rgb(0 0 0 / 0.20);
  --color-shadow-strong: rgb(0 0 0 / 0.24);
}

/* ---------- шрифты: свои файлы (app/fonts/, OFL 1.1), латиница и кириллица; внешних запросов нет ---------- */
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/onest-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/onest-cyrillic-400-normal.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/fonts/onest-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/fonts/onest-cyrillic-500-normal.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/fonts/onest-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/fonts/onest-cyrillic-600-normal.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/jetbrains-mono-cyrillic-400-normal.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/fonts/jetbrains-mono-cyrillic-500-normal.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }


/* ---------- основа: раздел 0 спеки — отступы кратны 4, текст не мельче 12, тени только у всплывающего ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text); font: var(--type-body); letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: 0; }
a { color: var(--color-accent); text-underline-offset: 2px; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--color-accent); outline-offset: 2px;
}
.ic { display: block; flex: none; }
.muted { color: var(--color-muted); }
.small { font: var(--type-small); }
.caption { font: var(--type-caption); }
.bad { color: var(--color-bad); }
.ok { color: var(--color-ok); }
.warn { color: var(--color-warn); }
.mono { font: var(--type-code); }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.label { font: var(--type-caption-strong); color: var(--color-muted); }

/* в прокрутке и в контейнерах с обрезкой кольцо — внутри строки, иначе его срезает край */
:where(.side-list, .list, .menu, .search-list, .options, .steps-row) :where(a, button):focus-visible { outline-offset: -2px; }

/* ---------- C-01 Кнопка ---------- */
.btn {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8);
  height: 32px; padding: 0 var(--sp-12); border: 1px solid transparent; border-radius: var(--radius-8);
  font: var(--type-ui-strong); white-space: nowrap; cursor: pointer; text-decoration: none; flex: none;
  background: transparent; color: var(--color-text);
  transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out);
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: .4; cursor: default; pointer-events: none; }
.btn.primary { background: var(--color-accent); color: var(--color-on-accent); }
.btn.primary:hover { background: var(--color-accent-hover); }
.btn.primary:active { background: var(--color-accent-pressed); }
.btn.second { background: var(--color-surface); border-color: var(--color-border); }
.btn.second:hover, .btn.quiet:hover { background: var(--color-hover); }
.btn.second:active, .btn.quiet:active { background: var(--color-pressed); }
.btn.quiet { color: var(--color-text); }
.btn.danger { background: var(--color-bad); color: var(--color-on-bad); }
.btn.danger:hover { background: var(--color-bad-hover); }
.btn.wide { width: 100%; }
.btn.busy { pointer-events: none; }  /* «Вхожу…»: полный цвет, нажатий не принимает */
.btn .ic { margin-left: calc(var(--sp-4) * -1); }

/* ---------- C-02 Кнопка-иконка ---------- */
.ib {
  appearance: none; display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; flex: none;
  border: 0; border-radius: var(--radius-8); background: transparent; color: var(--color-muted); cursor: pointer;
  text-decoration: none;
  transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.ib:hover { background: var(--color-hover); color: var(--color-text); }
.ib:active { background: var(--color-pressed); }
.ib:disabled { opacity: .4; cursor: default; pointer-events: none; }
.ib.primary { background: var(--color-accent); color: var(--color-on-accent); }
.ib.primary:hover { background: var(--color-accent-hover); }
.ib.primary:active { background: var(--color-accent-pressed); }
.ib.empty { background: var(--color-chip); color: var(--color-muted); }
.ib.stop { background: var(--color-text); color: var(--color-bg); }
.ib.stop:hover { background: var(--color-text); color: var(--color-bg); opacity: .88; }

/* ---------- C-05 Чип ---------- */
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-4); height: 24px; padding: 0 var(--sp-8); flex: none;
  border-radius: var(--radius-4); font: var(--type-caption-strong); white-space: nowrap; text-decoration: none;
  background: var(--color-chip); color: var(--color-muted); max-width: 100%;
}
.chip > span { overflow: hidden; text-overflow: ellipsis; }
.chip.accent { background: var(--color-accent-soft); color: var(--color-accent); }
.chip.ok { background: var(--color-ok-soft); color: var(--color-ok); }
.chip.warn { background: var(--color-warn-soft); color: var(--color-warn); }
.chip.bad { background: var(--color-bad-soft); color: var(--color-bad); }
a.chip { position: relative; }
a.chip::after { content: ''; position: absolute; inset: -4px 0; }  /* зона нажатия 32 */
a.chip:hover > span { text-decoration: underline; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); }
kbd { font: var(--type-caption-strong); background: var(--color-chip); color: var(--color-muted);
  border-radius: var(--radius-4); padding: var(--sp-4) var(--sp-8); white-space: nowrap; }

/* ---------- C-19 Действие ---------- */
.act {
  appearance: none; display: inline-flex; align-items: center; gap: var(--sp-4); height: 32px; padding: 0 var(--sp-8);
  border: 0; border-radius: var(--radius-8); background: transparent; color: var(--color-muted); font: var(--type-small);
  cursor: pointer; white-space: nowrap; text-decoration: none; flex: none;
  transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.act:hover { background: var(--color-hover); color: var(--color-text); }
.act.danger { color: var(--color-bad); }
.act.danger:hover { color: var(--color-bad); }
.act:disabled { opacity: .4; pointer-events: none; }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }

/* ---------- C-21 Поле, C-22 Выбор ---------- */
.field {
  width: 100%; height: 40px; padding: 0 var(--sp-12); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-8); background: var(--color-surface); color: var(--color-text); font: var(--type-ui);
  transition: border-color var(--motion-fast) var(--ease-out);
}
textarea.field { height: auto; min-height: 120px; padding: var(--sp-8) var(--sp-12); resize: vertical; font: var(--type-ui); }
.field::placeholder { color: var(--color-muted); }
.field:focus { border-color: var(--color-accent); outline: 2px solid var(--color-accent); outline-offset: 2px; }
.field.code { height: 56px; text-align: center; font: var(--type-code-entry); }
.field.err { border-color: var(--color-bad); }
.field-err { display: flex; align-items: center; gap: var(--sp-8); min-height: 20px; color: var(--color-bad);
  font: var(--type-small); }
.select { position: relative; display: block; }
.select select {
  appearance: none; width: 100%; height: 40px; padding: 0 var(--sp-40) 0 var(--sp-12); border-radius: var(--radius-8);
  border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text);
  font: var(--type-ui); cursor: pointer;
}
.select select:focus-visible { border-color: var(--color-accent); }
.select .ic { position: absolute; right: var(--sp-12); top: 12px; color: var(--color-muted); pointer-events: none; }
.form-gap { display: flex; flex-direction: column; gap: var(--sp-8); }

/* ---------- C-24 Знаки ---------- */
.sg { display: inline-flex; align-items: center; gap: var(--sp-4); flex: none; font: var(--type-caption-strong);
  white-space: nowrap; }
.sg-dot { position: relative; display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none; }
.sg-dot::after { content: ''; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-accent); }
.sg-busy .sg-dot::before {
  content: ''; position: absolute; inset: 0; border-radius: var(--radius-full); background: var(--color-accent);
  opacity: .24; animation: pulse var(--motion-pulse) var(--ease-in-out) infinite;
}
@keyframes pulse { from { transform: scale(.5); opacity: .24; } to { transform: scale(1); opacity: 0; } }
.sg-run, .sg-wait, .sg-busy { color: var(--color-accent); }
.sg-done { color: var(--color-ok); }
.sg-stop { color: var(--color-muted); }
.sg-new .sg-dot::before { content: none; }
.sg.s12 .sg-dot { width: 12px; height: 12px; }
.sg.s12 .sg-dot::after { width: 6px; height: 6px; }

/* ---------- знак Chernobog и аватарки ---------- */
.av { display: block; flex: none; user-select: none; -webkit-user-drag: none; }
.sign { display: inline-grid; place-items: center; flex: none; background: var(--color-sign); overflow: hidden;
  border-radius: var(--radius-8); }
.sign > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.sign.r4 { border-radius: var(--radius-4); }
.sign.r12 { border-radius: var(--radius-12); }
.sign.r16 { border-radius: var(--radius-16); }

/* ---------- C-15 Подсказка, C-13 Всплывающее сообщение ---------- */
.tip {
  position: fixed; z-index: 90; padding: var(--sp-4) var(--sp-8); border-radius: var(--radius-4);
  background: var(--color-text); color: var(--color-bg); font: var(--type-caption); box-shadow: var(--shadow-1);
  pointer-events: none; white-space: nowrap; max-width: 360px; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transition: opacity var(--motion-fast) var(--ease-out);
}
.tip.show { opacity: 1; }
.toast {
  position: fixed; left: 50%; bottom: var(--sp-24); z-index: 80; display: flex; align-items: center; gap: var(--sp-8);
  max-width: min(560px, calc(100vw - 32px)); padding: var(--sp-12) var(--sp-16); border-radius: var(--radius-8);
  background: var(--color-text); color: var(--color-bg); font: var(--type-ui); box-shadow: var(--shadow-2);
  transform: translate(-50%, 8px); opacity: 0;
  transition: transform var(--motion-base) var(--ease-out), opacity var(--motion-base) var(--ease-out);
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.toast.bad { background: var(--color-bad); color: var(--color-on-bad); }

/* ---------- C-12 Меню ---------- */
.menu {
  position: fixed; z-index: 70; width: 220px; padding: var(--sp-4); display: flex; flex-direction: column;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-12);
  box-shadow: var(--shadow-1); transform-origin: top left;
  animation: pop var(--motion-base) var(--ease-out);
}
@keyframes pop { from { transform: scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.menu-item {
  appearance: none; display: flex; align-items: center; gap: var(--sp-8); height: 32px; padding: 0 var(--sp-8);
  border: 0; border-radius: var(--radius-8); background: none; text-align: left; font: var(--type-ui);
  color: var(--color-text); cursor: pointer; text-decoration: none; white-space: nowrap; min-width: 0;
}
.menu-item > span { overflow: hidden; text-overflow: ellipsis; }
.menu-item .ic { color: var(--color-muted); }
.menu-item:hover, .menu-item:focus-visible { background: var(--color-hover); }
.menu-item.danger, .menu-item.danger .ic { color: var(--color-bad); }
.menu-sep { height: 1px; background: var(--color-border); margin: var(--sp-4); flex: none; }
.menu-note { padding: var(--sp-4) var(--sp-8); font: var(--type-caption); color: var(--color-muted); }

/* ---------- C-11 Окно ---------- */
.modal-back {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: var(--sp-16);
  background: var(--color-overlay); animation: fade var(--motion-base) var(--ease-out);
}
.modal-back.closing { opacity: 0; transition: opacity var(--motion-fast) var(--ease-in); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal {
  width: 100%; max-width: 480px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; min-width: 0;
  background: var(--color-surface); border-radius: var(--radius-16); box-shadow: var(--shadow-3);
  animation: pop var(--motion-base) var(--ease-out);
}
.modal.wide { max-width: 560px; }
.modal-head { display: flex; align-items: center; gap: var(--sp-8);
  padding: var(--sp-16) var(--sp-16) var(--sp-8) var(--sp-24); flex: none; }
.modal-title { flex: 1; min-width: 0; font: var(--type-heading); overflow-wrap: anywhere; }
.modal-body { padding: 0 var(--sp-24) var(--sp-8); overflow-y: auto; min-height: 0; display: flex;
  flex-direction: column; gap: var(--sp-12); font: var(--type-ui); }
.modal-body > .label { margin-top: var(--sp-8); margin-bottom: calc(var(--sp-4) * -1); }
.modal-foot { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: var(--sp-8);
  padding: var(--sp-16) var(--sp-24) var(--sp-24); flex: none; }
.modal-foot .grow { margin-right: auto; }
/* поиск: у верхнего края, 640 */
.modal-back.top { place-items: start center; padding-top: 88px; }
.modal.search-box { max-width: 640px; box-shadow: var(--shadow-2); }
.search-line { display: flex; align-items: center; gap: var(--sp-12);
  padding: var(--sp-12) var(--sp-12) var(--sp-12) var(--sp-16); border-bottom: 1px solid var(--color-border);
  color: var(--color-muted); }
.search-line input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--color-text);
  font: var(--type-body); height: 32px; }
.search-line input::placeholder { color: var(--color-muted); }
.search-line input::-webkit-search-cancel-button { appearance: none; display: none; }
.search-body { padding: var(--sp-12) var(--sp-12) var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-8);
  min-height: 0; overflow: hidden; }
.search-info { font: var(--type-caption); color: var(--color-muted); padding: 0 var(--sp-12); }
.search-list { display: flex; flex-direction: column; gap: var(--sp-4); max-height: 55vh; overflow-y: auto; }
.search-hit {
  appearance: none; border: 0; background: none; text-align: left; padding: var(--sp-8) var(--sp-12);
  border-radius: var(--radius-8); cursor: pointer; color: var(--color-text);
}
.search-hit:hover, .search-hit.on { background: var(--color-hover); }
.search-head { display: flex; align-items: center; gap: var(--sp-8); }
.search-title { flex: 1; min-width: 0; font: var(--type-ui-strong); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.search-snip { margin-top: var(--sp-4); font: var(--type-small); color: var(--color-muted); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.search-snip mark { background: none; color: var(--color-accent); font-weight: 600; }
.search-empty { padding: var(--sp-32); text-align: center; display: flex; flex-direction: column; gap: var(--sp-4); }
.search-foot { padding: var(--sp-8) var(--sp-24) var(--sp-16); font: var(--type-caption); color: var(--color-muted); }

/* ---------- C-14 Переключатель темы ---------- */
.seg { display: inline-flex; gap: var(--sp-4); padding: var(--sp-4); border-radius: var(--radius-8);
  background: var(--color-chip); flex-wrap: wrap; }
.seg-item {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8);
  height: 28px; padding: 0 var(--sp-8); border: 0; border-radius: var(--radius-4); background: none;
  color: var(--color-muted); font: var(--type-ui); cursor: pointer; white-space: nowrap;
  transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.seg-item:hover { color: var(--color-text); }
.seg-item.on { background: var(--color-segment); color: var(--color-text); font: var(--type-ui-strong);
  box-shadow: 0 0 0 1px var(--color-border); }
.seg.theme .seg-item:nth-child(1) { width: 100px; }
.seg.theme .seg-item:nth-child(2) { width: 94px; }
.seg.theme .seg-item:nth-child(3) { width: 141px; }

/* ---------- вход (S-01) ---------- */
.login { min-height: 100%; display: grid; place-items: center; padding: var(--sp-24) var(--sp-16); }
.login-card { width: 296px; display: flex; flex-direction: column; align-items: center; gap: var(--sp-24); }
.login-head { display: flex; flex-direction: column; align-items: center; gap: var(--sp-8); text-align: center; }
.login-head h1 { font: var(--type-title); }
.login-head p { font: var(--type-ui); color: var(--color-muted); }
.login-field { width: 100%; display: flex; flex-direction: column; gap: var(--sp-8); }
.login-field .field-err { min-height: 40px; align-items: flex-start; }
.login-field .field-err .ic { margin-top: var(--sp-2); }
.login-note { font: var(--type-caption); color: var(--color-muted); text-align: center; }

/* ---------- L-01 Боковая панель ---------- */
.shell {
  --side-w: 280px;
  display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); height: 100%;
  transition: grid-template-columns var(--motion-base) var(--ease-out);
}
.shell.collapsed { grid-template-columns: 56px minmax(0, 1fr); }
.shell.resizing { transition: none; user-select: none; cursor: col-resize; }
.side {
  position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden;
  padding: var(--sp-12); background: var(--color-side); box-shadow: inset -1px 0 0 var(--color-border);
}
.side-top { display: flex; align-items: center; gap: var(--sp-8); height: 40px; flex: none; }
.brand { display: flex; align-items: center; gap: var(--sp-8); min-width: 0; flex: 1; height: 40px;
  padding: 0 var(--sp-8); border-radius: var(--radius-8); color: var(--color-text); text-decoration: none; }
.brand-name { font: var(--type-heading); white-space: nowrap; }
.side-acts { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-8); flex: none; }
.side-nav { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-12); flex: none; }
.nav-item {
  appearance: none; position: relative; display: flex; align-items: center; gap: var(--sp-12); height: 36px;
  padding: 0 var(--sp-8); border: 0; border-radius: var(--radius-8); background: none; color: var(--color-text);
  font: var(--type-ui); text-decoration: none; cursor: pointer; white-space: nowrap; width: 100%; text-align: left;
  min-width: 0; overflow: hidden;
  transition: background-color var(--motion-fast) var(--ease-out);
}
.nav-item:hover { background: var(--color-hover); }
.nav-item:active { background: var(--color-pressed); }
.nav-item.on { background: var(--color-selected); font: var(--type-ui-strong); }
.nav-item .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  transition: opacity 100ms var(--ease-out); }
.nav-item .keys { font: var(--type-caption); color: var(--color-muted); transition: opacity 100ms var(--ease-out); }
.nav-ic { position: relative; display: grid; place-items: center; width: 20px; height: 20px; flex: none; }
.nav-ic .sg { position: absolute; right: -4px; top: -4px; }
.side-list {
  list-style: none; margin: var(--sp-8) 0 0; padding: 0 0 var(--sp-8); flex: 1; min-height: 0; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent;
  transition: opacity 100ms var(--ease-out);
}
.side-list::-webkit-scrollbar { width: 4px; }
.side-list::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: var(--radius-full); }
.side-empty { padding: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-4); }
.side-empty .title { font: var(--type-ui); }
.side-empty .muted { font: var(--type-caption); }
.side-foot { display: flex; align-items: center; gap: var(--sp-4); flex: none; margin: 0 calc(var(--sp-12) * -1);
  padding: var(--sp-8) var(--sp-12) 0; border-top: 1px solid var(--color-border); }
.side-foot .nav-item { flex: 1; width: auto; }
/* C-23 Группа списка */
.group { display: flex; flex-direction: column; }
.group + .group { margin-top: var(--sp-4); }
.group-head {
  appearance: none; display: flex; align-items: center; gap: var(--sp-12); width: 100%; height: 32px;
  padding: 0 var(--sp-8) 0 var(--sp-12); border: 0; border-radius: var(--radius-8); background: none; cursor: pointer;
  color: var(--color-muted); text-align: left;
}
.group-head:hover { background: var(--color-hover); }
.group-head .ic { transition: transform var(--motion-fast) var(--ease-out); }
.group.shut .group-head .ic { transform: rotate(-90deg); }
.group-name { font: var(--type-caption-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.group-n { font: var(--type-caption); }
.group-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
/* C-04 Строка чата */
.chat-li { position: relative; }
.chat-item {
  display: flex; align-items: flex-start; gap: var(--sp-8); height: 56px; padding: var(--sp-8);
  border-radius: var(--radius-8); color: var(--color-text); text-decoration: none; min-width: 0;
  transition: background-color var(--motion-fast) var(--ease-out);
}
.chat-item:hover { background: var(--color-hover); }
.chat-item.on { background: var(--color-selected); }
.chat-item > .av, .chat-item > .sign { margin-top: var(--sp-4); }
.chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.chat-top, .chat-sub { display: flex; align-items: center; gap: var(--sp-8); min-width: 0; }
.chat-top { height: 20px; }
.chat-sub { height: 16px; font: var(--type-caption); color: var(--color-muted); }
.chat-title { flex: 1; min-width: 0; font: var(--type-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-item.fresh .chat-title { font: var(--type-ui-emph); }
.chat-time { flex: none; font: var(--type-caption); color: var(--color-muted); }
.chat-last { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-sub .sg { font: var(--type-caption-strong); }
.chat-sub .sg .ic { width: 12px; height: 12px; }
.chat-more { position: absolute; right: var(--sp-4); top: var(--sp-12); opacity: 0; }
.chat-li:hover .chat-time, .chat-li:focus-within .chat-time { visibility: hidden; }
.chat-li:hover .chat-more, .chat-more:focus-visible, .chat-li:focus-within .chat-more { opacity: 1; }
@media (hover: none) { .chat-more { opacity: 1; } .chat-time { visibility: hidden; } }
/* край панели: тянуть 240–420, двойной щелчок — 280 */
.side-edge { position: absolute; top: 0; right: 0; width: 8px; height: 100%; cursor: col-resize; z-index: 5; }
.side-edge::after { content: ''; position: absolute; top: 0; right: 0; width: 2px; height: 100%;
  background: var(--color-accent); opacity: 0; transition: opacity var(--motion-fast) var(--ease-out); }
.side-edge:hover::after, .shell.resizing .side-edge::after { opacity: 1; }
/* свёрнута — 56: только иконки 40 × 40, подписи — подсказкой справа */
.shell.collapsed .side { padding: var(--sp-12) var(--sp-8); }
.shell.collapsed .side-top { flex-direction: column; height: auto; gap: var(--sp-8); }
.shell.collapsed .brand { width: 40px; flex: none; justify-content: center; padding: 0; }
.shell.collapsed .brand-name, .shell.collapsed .nav-item .lbl, .shell.collapsed .nav-item .keys {
  position: absolute; opacity: 0; pointer-events: none; }
.shell.collapsed .nav-item { width: 40px; height: 40px; padding: 0; justify-content: center; }
.shell:not(.collapsed) .nav-ic .sg { display: none; }
.shell.collapsed .side-list { visibility: hidden; opacity: 0; }
.shell.collapsed .side-foot { flex-direction: column; margin: 0 calc(var(--sp-8) * -1); padding: var(--sp-8) var(--sp-8) 0; }
.shell.collapsed .side-foot .nav-item { flex: none; }
.shell.collapsed .side-edge { display: none; }
.side-toggle { margin-left: auto; }
.shell.collapsed .side-toggle { margin-left: 0; }
.view { min-width: 0; min-height: 0; overflow: auto; position: relative; }
.scrim { display: none; }
.menu-btn { display: none; }

/* ---------- страницы (S-04…S-12): 880 по центру, поля 40 ---------- */
.page { padding: var(--sp-40) var(--sp-32); }
.page-in { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-24); }
.page-top { display: flex; flex-direction: column; gap: var(--sp-8); }
.page-head { display: flex; align-items: center; gap: var(--sp-12); min-height: 32px; }
.page-head h1 { flex: 1; min-width: 0; font: var(--type-title); overflow-wrap: anywhere; }
.page-desc { font: var(--type-ui); color: var(--color-muted); }
.page-note { font: var(--type-small); color: var(--color-muted); }
.sec { display: flex; flex-direction: column; gap: var(--sp-8); min-width: 0; }
.sec > .label { min-height: 16px; }
.list { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-12); overflow: hidden; min-width: 0; }
.list-row { display: flex; align-items: center; gap: var(--sp-16); padding: var(--sp-16); color: var(--color-text);
  text-decoration: none; min-width: 0; transition: background-color var(--motion-fast) var(--ease-out); }
.list-row + .list-row { border-top: 1px solid var(--color-border); }
a.list-row:hover, button.list-row:hover { background: var(--color-hover); }
button.list-row { appearance: none; border: 0; background: none; width: 100%; text-align: left; cursor: pointer; }
.list-row.top { align-items: flex-start; }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.row-title { font: var(--type-ui-strong); overflow-wrap: anywhere; display: flex; align-items: center;
  flex-wrap: wrap; gap: var(--sp-8); min-width: 0; }
.row-sub { font: var(--type-small); color: var(--color-muted); overflow-wrap: anywhere; }
.row-meta { font: var(--type-caption); color: var(--color-muted); }
.row-sub.warn, .page-note.warn { color: var(--color-warn); }
.row-chev { color: var(--color-muted); }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--radius-8);
  background: var(--color-chip); color: var(--color-text); }
.tile-ic.r12 { border-radius: var(--radius-12); }
.empty-box { display: flex; flex-direction: column; align-items: center; gap: var(--sp-16); text-align: center;
  padding: var(--sp-48) var(--sp-24); background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-12); }
.empty-box p { font: var(--type-ui); color: var(--color-muted); max-width: 520px; }
.paper { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-12);
  padding: var(--sp-16) var(--sp-24); min-width: 0; }
.kv { display: flex; align-items: center; gap: var(--sp-16); min-height: 40px; padding: 0 var(--sp-16);
  font: var(--type-ui); }
.kv + .kv { border-top: 1px solid var(--color-border); }
.kv > :first-child { width: 200px; flex: none; color: var(--color-muted); }
.kv > :last-child { min-width: 0; overflow-wrap: anywhere; }
.kv.keys > :first-child { color: inherit; display: flex; gap: var(--sp-4); flex-wrap: wrap; }
/* главная без чатов (S-02 empty) */
.home { min-height: 100%; display: grid; place-items: center; padding: var(--sp-40) var(--sp-32); }
.home-in { width: 100%; max-width: 744px; display: flex; flex-direction: column; align-items: center; gap: var(--sp-16);
  text-align: center; }
.home-in h1 { font: var(--type-title); }
.home-in > p { font: var(--type-ui); color: var(--color-muted); }
.quick { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-12);
  margin-top: var(--sp-8); }
.quick-card {
  appearance: none; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-8); text-align: left;
  padding: var(--sp-16); border: 1px solid var(--color-border); border-radius: var(--radius-12);
  background: var(--color-surface); color: var(--color-text); cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-out);
}
.quick-card:hover { background: var(--color-hover); }
.quick-top { display: flex; align-items: center; gap: var(--sp-12); }
.quick-card .ic { color: var(--color-text); }
.quick-title { font: var(--type-ui-strong); }
.quick-card .muted { font: var(--type-small); }

/* ---------- L-02 Шапка чата ---------- */
.view.chat { display: flex; flex-direction: column; overflow: hidden; }
.chat-head {
  display: flex; align-items: center; gap: var(--sp-12); height: 56px; padding: 0 var(--sp-16) 0 var(--sp-24); flex: none;
  box-shadow: inset 0 -1px 0 var(--color-border); background: var(--color-bg); position: relative; z-index: 12;
}
.head-name { flex: 0 1 auto; min-width: 0; font: var(--type-heading); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.head-sign { flex: none; }
.head-chips { display: flex; align-items: center; gap: var(--sp-8); flex: none; }
.head-spacer { flex: 1 1 0; min-width: 0; }
.head-acts { display: flex; align-items: center; gap: var(--sp-4); flex: none; }

/* ---------- C-08 Полоса цели ---------- */
.strip { position: relative; z-index: 11; flex: none; background: var(--color-bg); }
.strip-row {
  display: flex; align-items: center; gap: var(--sp-12); height: 48px; padding: 0 var(--sp-16) 0 var(--sp-24);
  box-shadow: inset 0 -1px 0 var(--color-border);
}
.strip.open .strip-row { box-shadow: none; }
.mini-steps { display: flex; align-items: center; gap: var(--sp-4); flex: none; }
.mini { position: relative; display: block; width: 28px; height: 28px; flex: none; }
.mini > .av, .mini > .sign { position: absolute; left: 0; top: 0; }
.mini-badge { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; display: grid; place-items: center;
  border-radius: var(--radius-full); background: var(--color-bg); }
.st-ok { color: var(--color-ok); }
.st-q, .st-run { color: var(--color-accent); }
.st-idle { color: var(--color-muted); }
.st-bad { color: var(--color-bad); }
.strip-k { flex: none; font: var(--type-small-strong); color: var(--color-muted); white-space: nowrap; }
.strip-goal { flex: 1 1 0; min-width: 0; font: var(--type-ui-strong); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.strip-row .grow { flex: 1 1 0; }
.strip-status { display: flex; align-items: center; flex: none; gap: 0; font: var(--type-caption); color: var(--color-muted);
  white-space: nowrap; }
.strip-status .sg { margin-right: var(--sp-8); }
.strip-drop {
  position: absolute; left: 0; right: 0; top: 48px; background: var(--color-bg); box-shadow: var(--shadow-1);
  padding: 0 var(--sp-16) var(--sp-16) var(--sp-24); display: flex; flex-direction: column; gap: var(--sp-12);
  max-height: calc(100vh - 160px); overflow-y: auto; transform-origin: top;
}
.strip-drop.enter { animation: drop var(--motion-base) var(--ease-out); }
@keyframes drop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.strip-goalrow { display: flex; align-items: flex-start; gap: var(--sp-16); }
.strip-full { flex: 1; min-width: 0; font: var(--type-body-strong); overflow-wrap: anywhere; }
.steps-row { display: flex; align-items: stretch; overflow-x: auto; padding-bottom: var(--sp-4); }
.step-arrow { flex: none; width: 32px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-4); color: var(--color-muted); font: var(--type-caption); }
/* C-09 Шаг — карточка */
.step-card {
  position: relative; flex: 0 0 340px; min-height: 128px; display: flex; flex-direction: column; gap: var(--sp-8);
  padding: var(--sp-12); box-shadow: inset 0 0 0 1px var(--color-border); border-radius: var(--radius-12);
  background: var(--color-surface); min-width: 0;
  transition: background-color var(--motion-fast) var(--ease-out);
}
.step-card:last-child { flex: 1 1 340px; min-width: 240px; }
.step-card:hover { background: var(--color-hover); }
.step-card.cur { box-shadow: inset 0 0 0 1px var(--color-accent); }
.step-open { appearance: none; border: 0; background: none; padding: 0; margin: 0; display: flex; align-items: center;
  gap: var(--sp-8); text-align: left; cursor: pointer; color: var(--color-text); font: var(--type-ui-strong);
  min-width: 0; height: 24px; }
.step-open::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-12); }
.step-open:focus-visible { outline: none; }
.step-open:focus-visible::after { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.step-task { font: var(--type-small); color: var(--color-muted); display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; min-height: 40px; }
.step-status { display: flex; align-items: center; gap: var(--sp-8); height: 24px; margin-top: auto; min-width: 0; }
.step-status-text { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-4);
  font: var(--type-caption-strong); overflow: hidden; white-space: nowrap; }
.step-status-text > span { overflow: hidden; text-overflow: ellipsis; }
.step-card .proto-btns { position: relative; z-index: 1; }

/* ---------- переписка ---------- */
.msgs { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-24);
  padding: var(--sp-32) var(--sp-24) var(--sp-24); }
.msgs > * { width: 100%; max-width: 744px; margin-left: auto; margin-right: auto; flex: none; }
.msgs > :first-child { margin-top: auto; }
.pending { display: flex; flex-direction: column; gap: var(--sp-24); }
.pending:empty { display: none; }
.pend { display: flex; flex-direction: column; gap: var(--sp-24); }
.older { text-align: center; font: var(--type-small); color: var(--color-muted); display: flex; align-items: center;
  justify-content: center; gap: var(--sp-4); }
/* C-07 владелец */
.msg.user { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-4); }
.bubble { max-width: min(528px, 100%); padding: var(--sp-8) var(--sp-16); border-radius: var(--radius-16);
  background: var(--color-bubble); font: var(--type-body); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-acts { display: flex; align-items: center; gap: var(--sp-4); min-height: 32px; }
.msg-acts .time { font: var(--type-caption); color: var(--color-muted); padding: 0 var(--sp-4); }
.msg.user .msg-acts .ib { opacity: 0; }
.msg.user:hover .msg-acts .ib, .msg.user .msg-acts .ib:focus-visible { opacity: 1; }
@media (hover: none) { .msg.user .msg-acts .ib { opacity: 1; } }
.user-files { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-8); }
.user-files:empty { display: none; }
.thumb img { display: block; max-width: 220px; max-height: 160px; min-width: 48px; min-height: 48px; object-fit: contain;
  background: var(--color-chip); border-radius: var(--radius-12); border: 1px solid var(--color-border); }
/* C-07 агент: без пузыря, на всю колонку */
.msg.answer, .msg.agent { display: flex; flex-direction: column; gap: var(--sp-12); min-width: 0; }
.who { display: flex; align-items: center; gap: var(--sp-8); min-width: 0; height: 20px; }
.who-name { font: var(--type-small-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who .time { font: var(--type-caption); color: var(--color-muted); flex: none; }
.msg .msg-acts { margin-top: calc(var(--sp-8) * -1); }
.msg.user .msg-acts { margin-top: 0; }
.previews { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.preview img { display: block; max-width: 260px; max-height: 200px; border-radius: var(--radius-8);
  border: 1px solid var(--color-border); }
.merge { display: flex; align-items: center; gap: var(--sp-12); flex-wrap: wrap; font: var(--type-small); }
/* C-18 Файл */
.files { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.files:empty { display: none; }
.file {
  display: inline-flex; align-items: center; gap: var(--sp-8); height: 44px; max-width: 240px; min-width: 0;
  padding: var(--sp-4) var(--sp-8) var(--sp-4) var(--sp-4); border: 1px solid var(--color-border);
  border-radius: var(--radius-8); background: var(--color-surface); color: var(--color-text); text-decoration: none;
  transition: background-color var(--motion-fast) var(--ease-out);
}
a.file:hover { background: var(--color-hover); }
.file-ic { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: var(--radius-4);
  background: var(--color-chip); color: var(--color-muted); overflow: hidden; }
.file-ic img { width: 32px; height: 32px; object-fit: cover; display: block; }
.file-text { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.file-name { font: var(--type-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-size { font: var(--type-caption); color: var(--color-muted); }
.file-dl { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: var(--radius-8);
  color: var(--color-muted); }
a.file:hover .file-dl { color: var(--color-text); }
.file.loading .file-ic { color: var(--color-accent); }
.more-files { display: none; }
/* ход ответа */
.status { display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; font: var(--type-small);
  color: var(--color-muted); min-height: 32px; }
.status .think { color: var(--color-text); font-variant-numeric: tabular-nums; }
.live { display: flex; flex-direction: column; gap: var(--sp-8); padding-left: var(--sp-24); }
.live .steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-4);
  font: var(--type-small); color: var(--color-muted); }
.live .steps li { display: flex; align-items: flex-start; gap: var(--sp-4); overflow-wrap: anywhere; min-width: 0; }
.live .steps li .ic { margin-top: var(--sp-4); }
.live-text { opacity: .92; }
.errbox { display: flex; align-items: center; gap: var(--sp-8); padding: var(--sp-8) var(--sp-8) var(--sp-8) var(--sp-16);
  border-radius: var(--radius-12); background: var(--color-bad-soft); color: var(--color-bad); font: var(--type-ui); }
.errbox > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
/* событие цепочки: строка 28, подряд — группой через 4 */
.chain-group { display: flex; flex-direction: column; gap: var(--sp-4); }
.chainline { display: flex; flex-direction: column; }
.chainline-row { display: flex; align-items: center; gap: var(--sp-8); min-height: 28px; color: var(--color-muted);
  font: var(--type-small); min-width: 0; }
.chainline-who { width: 52px; flex: none; font: var(--type-caption-strong); }
.chainline-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chainline .time { font: var(--type-caption); flex: none; }
.chainline-more { margin: var(--sp-4) 0 var(--sp-4) var(--sp-24); font: var(--type-small); color: var(--color-muted);
  white-space: pre-wrap; overflow-wrap: anywhere; }
.chainline .link { appearance: none; border: 0; background: none; padding: 0 var(--sp-4); height: 28px; cursor: pointer;
  font: var(--type-small); color: var(--color-muted); border-radius: var(--radius-4); flex: none; }
.chainline .link:hover { color: var(--color-text); text-decoration: underline; }
.chainline .link { position: relative; }
.chainline .link::after { content: ''; position: absolute; inset: -2px 0; }  /* строка 28, зона нажатия 32 */
.chain-protos { padding-left: var(--sp-24); }
.sysline { text-align: center; font: var(--type-small); color: var(--color-muted); }
/* итог чата (C-19, C-05) */
.digest { display: flex; flex-direction: column; gap: var(--sp-8); }
.digest-row { display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; min-height: 32px;
  font: var(--type-small); color: var(--color-muted); }
.digest-row .digest-title { color: var(--color-text); font: var(--type-small-strong); }
.digest-body { padding: var(--sp-16); border: 1px solid var(--color-border); border-radius: var(--radius-12);
  background: var(--color-surface); display: flex; flex-direction: column; gap: var(--sp-8); }
/* карточки в чате: запуск, C-10 план, C-20 повтор шага */
.card { display: flex; flex-direction: column; gap: var(--sp-12); padding: var(--sp-16); border: 1px solid var(--color-border);
  border-radius: var(--radius-12); background: var(--color-surface); min-width: 0; }
.card.faded { opacity: .6; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); min-height: 24px; }
.card-head .label-strong { font: var(--type-small-strong); color: var(--color-muted); min-width: 0; overflow-wrap: anywhere; }
.card-text { font: var(--type-ui); white-space: pre-wrap; overflow-wrap: anywhere; }
.card-line { font: var(--type-small); color: var(--color-muted); overflow-wrap: anywhere; }
.card-btns { display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; }
.plan-goal { font: var(--type-body-strong); overflow-wrap: anywhere; }
.plan-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.plan-step { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--sp-12); padding: var(--sp-12) 0;
  border-top: 1px solid var(--color-border); }
.plan-step:last-child { padding-bottom: 0; }
.plan-step-main { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.plan-step-top { display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; min-height: 24px; }
.plan-step-k { font: var(--type-ui-strong); }
.plan-task { font: var(--type-ui); white-space: pre-wrap; overflow-wrap: anywhere; }
.kvline { font: var(--type-small); color: var(--color-muted); overflow-wrap: anywhere; }
.plan-step .acts { margin-left: calc(var(--sp-8) * -1); }
.plan-step .act.slot { min-width: 152px; }  /* «Стоп после шага / Убрать стоп» — место 152, ряд не прыгает */
.plan-edit { display: flex; flex-direction: column; gap: var(--sp-8); margin-top: var(--sp-4); }
.plan-edit textarea.field { border-color: var(--color-accent); outline: 2px solid var(--color-accent); outline-offset: 2px;
  min-height: 96px; }
.plan-note { font: var(--type-small); color: var(--color-muted); }

/* ---------- C-06 Поле ввода ---------- */
.composer-wrap { flex: none; padding: 0 var(--sp-24) var(--sp-24); }
.composer, .composer-lock { max-width: 744px; margin: 0 auto; }
.composer {
  display: flex; flex-direction: column; gap: var(--sp-8); min-height: 96px; padding: var(--sp-8);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-16);
  transition: border-color var(--motion-fast) var(--ease-out);
}
.composer.has-text, .composer:focus-within { border-color: var(--color-border-strong); }
.composer-text {
  flex: 1; display: block; width: 100%; min-height: 32px; max-height: 260px; padding: var(--sp-4); border: 0; resize: none;
  background: none; color: var(--color-text); font: var(--type-body); outline: none;
}
.composer-text::placeholder { color: var(--color-muted); }
.composer-text:focus-visible { outline: none; }
.composer-bar { display: flex; align-items: center; gap: var(--sp-4); flex: none; }
.composer-bar .grow { flex: 1; }
.plates { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.plates:empty { display: none; }
.voice-row { display: flex; align-items: center; gap: var(--sp-8); min-height: 32px; padding: 0 0 0 var(--sp-8);
  font: var(--type-ui); flex-wrap: wrap; }
.voice-row .grow { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.voice-row.err { color: var(--color-bad); }
.voice-row .rec-time { color: var(--color-muted); font-variant-numeric: tabular-nums; }
.rec-dot { position: relative; display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none; }
.rec-dot::before { content: ''; position: absolute; inset: 0; border-radius: var(--radius-full); background: var(--color-bad);
  opacity: .24; }
.rec-dot::after { content: ''; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-bad);
  animation: rec var(--motion-rec) var(--ease-in-out) infinite; }
@keyframes rec { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.spin { animation: spin 800ms linear infinite; }
.voice-row .spin, .file-ic .spin { color: var(--color-accent); }
@keyframes spin { to { transform: rotate(360deg); } }
.composer-lock { display: flex; align-items: center; gap: var(--sp-12); flex-wrap: wrap; padding: var(--sp-16);
  border: 1px solid var(--color-border); border-radius: var(--radius-16); background: var(--color-surface);
  font: var(--type-ui); color: var(--color-muted); }
.dropzone {
  position: absolute; inset: var(--sp-12); z-index: 20; display: grid; place-items: center; pointer-events: none;
  border: 2px dashed var(--color-accent); border-radius: var(--radius-16); font: var(--type-body-strong);
  color: var(--color-accent); background: color-mix(in srgb, var(--color-bg) 88%, transparent);
}
.edit-box { width: min(528px, 100%); margin-left: auto; display: flex; flex-direction: column; gap: var(--sp-8); }
.edit-box textarea.field { min-height: 80px; font: var(--type-body); }
.edit-acts { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-8); flex-wrap: wrap; }
.edit-acts .muted { margin-right: auto; font: var(--type-small); }
.empty-chat { margin: auto; text-align: center; max-width: 520px; display: flex; flex-direction: column;
  align-items: center; gap: var(--sp-8); }
.empty-chat .empty-title { font: var(--type-heading); }
.empty-chat p { font: var(--type-ui); color: var(--color-muted); }

/* ---------- Markdown ответа, C-16 блок кода, C-17 таблица ---------- */
.md { overflow-wrap: anywhere; font: var(--type-body); display: flex; flex-direction: column; gap: var(--sp-12); }
.md > * { margin: 0; }
.md h2, .md h3, .md h4, .md h5, .md h6 { font: var(--type-body-strong); margin-top: var(--sp-4); }
.md h2 { font: var(--type-heading); }
.md ul, .md ol { padding-left: var(--sp-24); display: flex; flex-direction: column; gap: var(--sp-4); }
.md li > ul, .md li > ol { margin-top: var(--sp-4); }
.md strong, .md b { font-weight: 600; }
.md blockquote { padding: 0 var(--sp-16); border-left: 2px solid var(--color-border-strong); color: var(--color-muted); }
.md hr { border: 0; border-top: 1px solid var(--color-border); width: 100%; }
.md code { font-family: var(--font-code); font-size: .88em; background: var(--color-chip); border-radius: var(--radius-4);
  padding: 0 var(--sp-4); }
.md a.code-link code { color: var(--color-accent); }
.md .tablewrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-8); }
.md table { border-collapse: collapse; font: var(--type-ui); min-width: 100%; }
.md th, .md td { padding: var(--sp-8) var(--sp-12); text-align: left; vertical-align: top; }
.md th { background: var(--color-code); font: var(--type-ui-strong); }
.md tr + tr td, .md tbody tr:first-child td { border-top: 1px solid var(--color-border); }
.codeblock { background: var(--color-code); border: 1px solid var(--color-border); border-radius: var(--radius-12);
  overflow: hidden; }
.codebar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8);
  padding: var(--sp-4) var(--sp-4) 0 var(--sp-16); }
.codelang { font: var(--type-code); color: var(--color-muted); }
.codeblock pre { margin: 0; padding: var(--sp-4) var(--sp-16) var(--sp-16); overflow-x: auto; }
.codeblock code { font: var(--type-code); background: none; padding: 0; white-space: pre; color: var(--color-text); }
.filebox { border: 1px solid var(--color-border); border-radius: var(--radius-12); background: var(--color-surface);
  padding: var(--sp-8) var(--sp-16); }
.filebox summary { cursor: pointer; font: var(--type-ui); min-height: 32px; display: flex; align-items: center;
  gap: var(--sp-8); }
.filebox-name { font: var(--type-ui-strong); }
.msg.flash .bubble, .msg.flash .md { animation: flash var(--motion-flash) var(--ease-out); border-radius: var(--radius-12); }
@keyframes flash { 0%, 40% { box-shadow: 0 0 0 2px var(--color-accent); } 100% { box-shadow: 0 0 0 2px transparent; } }

/* ---------- окна: новый чат, шаг, прототип ---------- */
.options { display: flex; flex-direction: column; gap: var(--sp-4); }
.option {
  appearance: none; display: flex; align-items: center; gap: var(--sp-12); width: 100%; text-align: left;
  padding: var(--sp-8) var(--sp-12) var(--sp-8) var(--sp-8); border: 0; border-radius: var(--radius-8);
  background: none; color: var(--color-text); cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-out);
}
.option:hover { background: var(--color-hover); }
.option.on { background: var(--color-accent-soft); box-shadow: 0 0 0 1px var(--color-accent); }
.option .ic { color: var(--color-accent); visibility: hidden; }
.option.on .ic { visibility: visible; }
.option-text { flex: 1; min-width: 0; }
.option-name { font: var(--type-ui-strong); }
.option-what { font: var(--type-small); color: var(--color-muted); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.option-warn { font: var(--type-small); color: var(--color-warn); }
.handoff { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-12) var(--sp-16);
  background: var(--color-code); border-radius: var(--radius-8); }
.step-lines { display: flex; flex-direction: column; gap: var(--sp-4); font: var(--type-small); }
.proto-btns { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.modal.proto-box { max-width: 1400px; height: calc(100vh - 32px); }
.proto-box .modal-body { flex: 1; min-height: 0; overflow: hidden; padding-bottom: 0; }
.proto-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-8) var(--sp-12); }
.proto-meta .mono { color: var(--color-muted); overflow-wrap: anywhere; font: var(--type-caption); font-family: var(--font-code); }
.proto-stage { flex: 1; min-height: 0; min-width: 0; overflow: auto; display: flex; padding: var(--sp-12);
  background: var(--color-code); border: 1px solid var(--color-border); border-radius: var(--radius-12); }
.proto-stage iframe { flex: none; height: 100%; min-height: 420px; margin: 0 auto; border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-8); background: var(--color-surface); }
.proto-stage.full { padding: 0; }
.proto-stage.full iframe { flex: 1; width: 100%; border: 0; border-radius: 0; }

/* ---------- движение: «меньше движения» — без пульса, сдвигов и масштаба ---------- */
@media (prefers-reduced-motion: reduce) {
  .sg-busy .sg-dot::before { animation: none; opacity: .24; transform: none; }
  .rec-dot::after { animation: none; }
  .spin { animation: none; }
  .menu, .modal, .strip-drop { animation: fade var(--motion-fast) var(--ease-out); }
  .toast, .toast.show { transform: translate(-50%, 0); transition: opacity var(--motion-fast) var(--ease-out); }
  .shell { transition: none; }
  .group-head .ic { transition: none; }
}

/* ---------- узкое окно: шторка 300, цели касания 44 ---------- */
@media (max-width: 860px) {
  .shell, .shell.collapsed { grid-template-columns: minmax(0, 1fr); }
  .side, .shell.collapsed .side {
    position: fixed; inset: 0 auto 0 0; z-index: 40; width: 300px; max-width: calc(100vw - 32px);
    padding: var(--sp-12); box-shadow: var(--shadow-3); transform: translateX(-100%); visibility: hidden;
    transition: transform var(--motion-base) var(--ease-out), visibility 0s linear var(--motion-base);
  }
  body.drawer .side { transform: none; visibility: visible; transition: transform var(--motion-base) var(--ease-out); }
  body.drawer .scrim { display: block; position: fixed; inset: 0; z-index: 30; background: var(--color-overlay); }
  .shell.collapsed .side-top { flex-direction: row; height: 44px; }
  .shell.collapsed .brand { width: auto; flex: 1; justify-content: flex-start; padding: 0 var(--sp-8); }
  .shell.collapsed .brand-name, .shell.collapsed .nav-item .lbl, .shell.collapsed .nav-item .keys { opacity: 1; }
  .shell.collapsed .nav-item { width: 100%; }
  .shell.collapsed .side-list { visibility: visible; opacity: 1; }
  .shell.collapsed .side-foot { flex-direction: row; margin: 0 calc(var(--sp-12) * -1); padding: var(--sp-8) var(--sp-12) 0; }
  .side-edge, .side-toggle { display: none; }
  .nav-item, .shell.collapsed .nav-item { height: 44px; }
  .menu-item { height: 44px; }
  .brand, .side-top { height: 44px; }
  .shell.collapsed .brand-name, .shell.collapsed .nav-item .lbl, .shell.collapsed .nav-item .keys { position: static; }
  .shell.collapsed .nav-item { justify-content: flex-start; padding: 0 var(--sp-8); }
  .group-head { height: 44px; }
  .menu-btn { display: inline-grid; }
  .btn { height: 44px; }
  .ib, .act { min-width: 44px; height: 44px; }
  .ib { width: 44px; }
  .seg-item { height: 44px; }
  .chat-head { padding: 0 var(--sp-4); gap: var(--sp-4); }
  .chat-head > .av, .chat-head > .sign { margin: 0 var(--sp-4); }
  .head-chips, .head-acts .wide-only, .head-sign { display: none; }
  .head-spacer { display: none; }
  .head-name { flex: 1 1 auto; }
  .strip-row { height: 52px; padding: var(--sp-4) var(--sp-16); gap: var(--sp-4); }
  .strip-k, .strip-goal, .strip-status .st-word, .strip-status .sg-word { display: none; }
  .strip-status .sg { margin-right: 0; }
  .strip-drop { top: 52px; padding: var(--sp-12) var(--sp-16) var(--sp-16); }
  .steps-row { flex-direction: column; overflow-x: visible; }
  .step-card, .step-card:last-child { flex: none; min-width: 0; }
  .step-arrow { width: auto; height: 32px; flex-direction: row; }
  .step-arrow .ic { transform: rotate(90deg); }
  .msgs { padding: var(--sp-24) var(--sp-24) var(--sp-16); }
  .composer-wrap { padding: 0 var(--sp-24) var(--sp-24); }
  .composer { min-height: 108px; }
  .chainline-row { min-height: 44px; cursor: pointer; }
  .chainline .link, .chainline-who { display: none; }
  .files.in-msg { flex-direction: column; flex-wrap: nowrap; }
  .files.in-msg .file { max-width: none; width: 100%; padding: 0 0 0 var(--sp-4); }
  .files.in-msg .file-dl { width: 44px; height: 44px; }
  .files.in-msg.cut .file:nth-child(n+3) { display: none; }
  .files.in-msg.cut .more-files { display: inline-flex; }
  .codebar { padding: 0 0 0 var(--sp-16); }
  .page { padding: var(--sp-16) var(--sp-24) var(--sp-32); }
  .page-head .menu-btn { margin-left: calc(var(--sp-12) * -1); }
  .kv { flex-direction: column; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-8) var(--sp-16); }
  .kv > :first-child { width: auto; }
  .list-row { flex-wrap: wrap; }
  .md table { min-width: 0; table-layout: fixed; width: 100%; }
  .md th:first-child, .md td:first-child { width: 64px; }
  .md th:last-child, .md td:last-child { width: 96px; }
  .md th, .md td { overflow-wrap: anywhere; }
  .modal-back.top { padding-top: var(--sp-16); }
  .chat-item { height: 60px; }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .side, .shell.collapsed .side, body.drawer .side { transition: none; }
}
.drawer-close { display: none !important; }
@media (max-width: 860px) { .drawer-close { display: inline-grid !important; margin-left: auto; } }

/* ---------- карточка проекта, цели, устройства, уведомления ---------- */
.sign.s64 { width: 64px; height: 64px; }
.decision-date { width: 96px; flex: none; font: var(--type-small); color: var(--color-muted); }
.decision-text { flex: 1; min-width: 0; font: var(--type-ui); overflow-wrap: anywhere; }
.list-row.decision { padding: var(--sp-12) var(--sp-16); }
.list-row.file-link { padding: var(--sp-8) var(--sp-16); color: var(--color-muted); gap: var(--sp-8); }
.list-row.file-link .small { overflow-wrap: anywhere; }
.list.chat-rows { list-style: none; margin: 0; padding: var(--sp-4); }
.list.chat-rows .chat-li + .chat-li { margin-top: 0; }
.goal-steps { width: 124px; }
.notify-head { font: var(--type-ui-emph); }
.head-name + .head-sign { margin-left: calc(var(--sp-4) * -1); }
.chat-head.tight .head-chips .opt { display: none; }
.chat-head.tighter .head-chips, .chat-head.tighter .wide-only { display: none; }
.home .page-head { position: absolute; top: var(--sp-16); left: var(--sp-16); }
.view.home { position: relative; }