/* Цвета и плотность — из макета `m5-design.pen` (ADR 14): семейство М, плотность прототипа А. */
/* Шрифты (оба — OFL) вшиты в программу: сервер заказчика может быть без интернета. JetBrains Mono — полным
   набором: у Google Fonts нет знаков рамок, и таблицы ядра разъезжались. Inter — переменный файл выпуска 4.1
   на все начертания, как у Google Fonts. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: block; src: url("/fonts/InterVariable.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: block; src: url("/fonts/JetBrainsMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 700; font-display: block; src: url("/fonts/JetBrainsMono-Bold.woff2") format("woff2"); }
:root {
  --blue: #4a66a8;
  --blue-soft: #e9edf6;
  --ink: #1e2129;
  --graphite: #31343f;
  --muted: #858ba0;
  --line: #e3e5ea;
  --panel: #f5f6f8;
  --canvas: #ffffff;
  --ok: #5fa877;
  --warn: #c9a24e;
  --bad: #d2655c;
  --ui: "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
/* Без крупного варианта Inter для заголовков: Google Fonts отдаёт Inter без него, вид остаётся прежним
   (заголовок 30px с ним уже на 5 %). */
body { font: 13px/1.4 var(--ui); font-optical-sizing: none; color: var(--ink); background: var(--canvas); }

.app { display: grid; grid-template-columns: var(--tree-width, 300px) minmax(0, 1fr) var(--chat-width, 340px); height: 100vh; }
.caps { font: 400 10px var(--mono); letter-spacing: 1.5px; color: var(--muted); }
.empty { color: var(--muted); padding: 24px; }
.grow { flex: 1; }

/* Слева: файлы среза */
.files { display: flex; flex-direction: column; background: var(--panel); min-height: 0; overflow: hidden; }
.files-head { display: flex; align-items: center; gap: 12px; height: 40px; }
.mark { width: 40px; height: 40px; background: var(--blue); color: #fff; font: 700 16px var(--ui);
        display: grid; place-items: center; flex: none; }
.files-title { font: 700 11px var(--mono); letter-spacing: 2px; }
/* Шапка сессии: «завершить» — итог сессии (ADR 27). */
.chat-head .finish { all: unset; cursor: pointer; font: 11px var(--ui); color: var(--graphite); border: 1px solid var(--line); padding: 2px 8px; }
.chat-head .finish:hover { border-color: var(--blue); color: var(--blue); }
.chat-head .finish:disabled { opacity: .5; cursor: default; }
/* Есть ходы без итога — кнопка синяя (Александр, 28.10). */
.chat-head .finish.due { background: var(--blue); border-color: var(--blue); color: #fff; }
.chat-head .finish.due:hover { background: #3b5590; border-color: #3b5590; color: #fff; }
/* «Подвести итоги» и крестик: крестик закрывает окно без итога (Александр, 28.10). */
.chat-head .head-actions { display: flex; align-items: center; gap: 6px; }
.chat-head .close-session { all: unset; cursor: pointer; font: 18px/1 var(--ui); color: var(--graphite); padding: 0 4px; }
.chat-head .close-session:hover { color: var(--blue); }
.chat-head .close-session:disabled { opacity: .5; cursor: default; }

/* Дерево агентства (блок 5, ADR 25–27): уровни, срезы, файлы, сессии на своих уровнях. */
.tree { list-style: none; flex: 1; min-height: 0; overflow-y: auto; padding: 0 0 8px; }
/* Размеры дерева (Александр, 26.10: рядом с ChatGPT дерево мелкое) — шрифт 14, строка 32, значки 16. */
.tree .node { display: flex; align-items: center; gap: 8px; height: 32px; padding-right: 12px; cursor: pointer; white-space: nowrap; font-size: 14px; color: var(--ink); }
.tree .node:hover { background: var(--blue-soft); }
.tree .node.active, .tree .node.current { background: var(--blue-soft); }
.tree .node.active .name { color: var(--blue); }
.tree .node.current .name { font-weight: 600; }
.tree .node.client .name { font-weight: 600; }
.tree .node.empty { cursor: default; color: var(--muted); font-style: italic; }
.tree .node.empty:hover { background: none; }
.tree .arrow { width: 12px; flex: none; color: var(--muted); font-size: 12px; text-align: center; }
.tree .icon { flex: none; }
.tree .icon.folder { width: 12px; height: 9px; border: 1.5px solid var(--blue); border-radius: 1px 2px 2px 2px; }
/* Значки уровней (SVG из Lucide): цвет — синий, у правил — светлее. */
.tree .icon.svg { width: 16px; height: 16px; color: var(--blue); }
.tree .icon.svg svg { width: 16px; height: 16px; display: block; }
.tree .icon.svg.rules { color: var(--blue-light, #7E97D2); }
/* Разделы дерева: «Агентство «…»» и «Заказчики» — подпись с линией; щелчок — страница уровня. */
.tree .section { display: flex; align-items: center; gap: 8px; padding: 18px 12px 8px 14px; font: 600 12px var(--mono); letter-spacing: 1.5px; color: var(--muted); cursor: pointer; white-space: nowrap; overflow: hidden; }
.tree .section::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* Раздел дерева прилипает к верху, пока прокручивается его содержимое (Александр, 28.10). */
.tree .tree-group { list-style: none; }
.tree .tree-group > ul { list-style: none; }
.tree .tree-group > .section { position: sticky; top: 0; z-index: 2; background: var(--panel); }
.tree .section:hover, .tree .section.active { color: var(--blue); }
.tree .section.drop-over { background: var(--blue-soft); outline: 1px dashed var(--blue); outline-offset: -1px; }
/* Раздел без своей страницы («Сервисы», ADR 44) — подпись, не ссылка. */
.tree .section.plain { cursor: default; }
.tree .section.plain:hover { color: var(--muted); }
/* Строка агентства под разделом «Агентство» — жирным, как заказчик. */
.tree .node.agency .name { font-weight: 600; }
/* Пометка «бета» у сервиса — синим, чтобы не читалась как пометка уровня. */
.tree .tag.beta { color: var(--blue); }
.tree .icon.folder.sessions { border-color: var(--blue-light, #7E97D2); }
.tree .icon.file { font: 700 8px var(--mono); width: 24px; text-align: center; padding: 2px 0; background: var(--graphite); color: #fff; }
.tree .icon.file.text { background: none; color: var(--muted); border: 1px solid var(--line); }
.tree .icon.session { color: var(--line); font-size: 9px; width: 16px; text-align: center; }
.tree .icon.session.live { color: var(--blue); }
.tree .name { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.tree .tag { margin-left: auto; padding-left: 8px; flex: none; font: 10px var(--mono); color: var(--muted); }
.tree .node.current .tag { color: var(--blue); }
/* Шапка дерева: «М5» и вплотную, с зазором в 1 пиксель, «+ Новая сессия» — той же высоты, на всю
   оставшуюся ширину (Александр, 28.10). */
.files .files-head { gap: 1px; }
.files .new-session { all: unset; box-sizing: border-box; cursor: pointer; flex: 1; min-width: 0; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--blue); color: #fff; font: 600 13px var(--ui); white-space: nowrap; }
.files .new-session:hover { filter: brightness(1.08); }
.files .new-session:disabled { opacity: .6; cursor: default; }

/* Файлы бросают на папку (дерево, страница, подпапка на странице) — цель подсвечивается. */
.tree .node.drop-over { background: var(--blue-soft); outline: 1px dashed var(--blue); outline-offset: -1px; }
.page.drop-over { outline: 2px dashed var(--blue); outline-offset: -10px; background: var(--blue-soft); }
.page-item.drop-over, .page-section.drop-over { outline: 1px dashed var(--blue); outline-offset: 2px; background: var(--blue-soft); }
/* Создание и загрузка на странице папки (блок 6). */
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 4px; }
.page-add { all: unset; cursor: pointer; font-size: 13px; color: var(--muted); }
.page-add:hover { color: var(--blue); }
.page-section > .creator { padding: 10px 0 2px; }
.creator-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.creator-form input { font: 14px var(--ui); color: var(--ink); padding: 6px 10px; border: 1px solid var(--line); border-radius: 4px; min-width: 300px; outline: none; }
.creator-form input:focus { border-color: var(--blue); }
.creator-form select { font: 13px var(--ui); padding: 5px 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--canvas, #fff); }
.page-link { all: unset; cursor: pointer; font-size: 12px; color: var(--muted); }
.page-link:hover { color: var(--blue); }
.creator-error { font-size: 12px; color: var(--bad, #D2655C); padding-top: 4px; min-height: 0; }
.page-upload { all: unset; cursor: pointer; align-self: flex-start; margin-top: 4px; font-size: 12px; color: var(--muted); }
.page-upload:hover { color: var(--blue); }
.group { padding: 14px 0 4px; }
.group h2 { padding: 0 16px 6px; }
.results { border-top: 1px solid var(--line); }
.list { list-style: none; }
.list li { display: flex; align-items: center; gap: 10px; padding: 8px 14px; cursor: pointer; border-left: 3px solid transparent; }
.list li:hover { background: #eceef2; }
.list li.active { background: var(--canvas); border-left-color: var(--blue); }
.badge { width: 26px; height: 26px; flex: none; display: grid; place-items: center; font: 700 8px var(--mono); }
.badge.table { background: var(--graphite); color: #fff; }
.badge.text, .badge.other { border: 1px solid #c9cdd6; color: var(--ink); background: var(--canvas); }
.file-name { font-weight: 500; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-meta { font: 10px var(--mono); color: var(--muted); }
.list .none { color: var(--muted); font-size: 12px; cursor: default; }
.list .none:hover { background: none; }

/* Центр: открытый файл */
.view { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.view-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px 12px; }
.view-head h1 { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; font-size: 15px; font-weight: 600; overflow: hidden; white-space: nowrap; }
/* Назад / вперёд и путь в шапке центрального окна (блок 6). */
.view-head .nav { display: flex; gap: 2px; flex: none; }
.view-head .nav button { all: unset; cursor: pointer; width: 26px; height: 26px; text-align: center; line-height: 26px; font-size: 15px; color: var(--graphite); border-radius: 4px; }
.view-head .nav button:hover:not(:disabled) { background: var(--blue-soft); color: var(--blue); }
.view-head .nav button:disabled { color: var(--line); cursor: default; }
.view-head .crumb { font-weight: 400; color: var(--muted); cursor: pointer; overflow: hidden; text-overflow: ellipsis; max-width: 180px; flex: 0 1 auto; }
.view-head .crumb:hover { color: var(--blue); }
.view-head .crumb.current { font-weight: 600; color: var(--ink); cursor: default; max-width: none; flex: 0 1 auto; }
.view-head .crumb-sep { color: var(--line); flex: none; }
.view-body { flex: 1; overflow: auto; min-height: 0; }
table { border-collapse: collapse; font-size: 12px; table-layout: fixed; min-width: 100%; }
thead th { position: sticky; top: 0; background: var(--graphite); color: #fff; font: 700 10px var(--mono);
           letter-spacing: 1px; text-transform: uppercase; text-align: left; height: 30px; padding: 0 10px; white-space: nowrap; }
tbody td { height: 30px; padding: 0 10px; border-bottom: 1px solid var(--line); white-space: nowrap;
           max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
tbody td.num { font: 11px var(--mono); }
tbody tr:hover { background: var(--blue-soft); }
tbody tr.spacer td { padding: 0; border: 0; }
tbody tr.spacer:hover { background: none; }
/* Строка таблицы результатов (как в прототипе А): щелчок разворачивает, длинное — полностью. */
tbody tr.row { cursor: pointer; }
tbody tr.open td { height: auto; white-space: pre-wrap; word-break: break-word; vertical-align: top; padding-top: 7px; padding-bottom: 7px; }
tbody tr.open td .long { max-height: 360px; overflow-y: auto; }
tbody td a { color: inherit; text-decoration: underline; text-decoration-color: var(--muted); }
tbody td a:hover { text-decoration-color: var(--ink); }
tbody td.st-ok, tbody td.tn-pos { background: #eaf4ea; color: #2e6b38; }
tbody td.st-bad, tbody td.tn-neg { background: #f9ecea; color: #a03d31; }
tbody td.st-dup { background: #f7f1e0; color: #8a6d1a; }
tbody td.st-cut { background: #fbeadb; color: #9a5320; }
tbody td.tn-neu { background: #eaf0f8; color: #35577e; }
.paste-button { all: unset; cursor: pointer; margin-left: 6px; padding: 0 5px; border: 1px solid #d9a79f; border-radius: 3px; font-size: 11px; line-height: 16px; color: #a03d31; }
.paste-button:hover { background: #a03d31; color: #fff; }
.paste-cover { position: fixed; inset: 0; z-index: 90; background: rgba(30, 33, 41, .45); display: flex; align-items: center; justify-content: center; }
.paste-box { background: var(--canvas); border: 1px solid var(--line); width: 640px; max-width: 92vw; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.paste-box .hint { font-size: 12px; color: var(--muted); }
.paste-box .link { font: 11px var(--mono); color: var(--muted); word-break: break-all; }
.paste-box textarea { width: 100%; height: 260px; border: 1px solid var(--line); padding: 10px; font: 13px/1.5 var(--ui); resize: vertical; }
.paste-box .actions { display: flex; justify-content: flex-end; gap: 8px; }
.paste-box button { font: 12px var(--ui); padding: 6px 14px; border: 1px solid var(--line); background: var(--canvas); cursor: pointer; }
.paste-box button.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.paste-box button:disabled { opacity: .5; cursor: default; }
.textview { padding: 8px 24px 40px; white-space: pre-wrap; font-size: 13px; line-height: 1.6; max-width: 820px; }
/* Правка документа на месте (блок 6). */
.textbar { display: flex; align-items: center; gap: 14px; padding: 6px 24px 2px; }
.textbar-hint { font: 10px var(--mono); color: var(--muted); letter-spacing: 0.5px; }
.editor-note { padding: 0 24px; font-size: 12px; color: var(--bad, #D2655C); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.editor-note:empty { display: none; }
.textwrap.editing { padding-bottom: 40px; }
/* PDF (ADR 45): просмотр — встроенный просмотрщик браузера, под ним — состояние текста для агента. */
.pdfwrap { display: flex; flex-direction: column; height: 100%; }
.pdfview { flex: 1; min-height: 0; width: 100%; border: none; }
.pdfagent { padding: 8px 24px; font: 11px var(--mono); color: var(--muted); letter-spacing: 0.5px; border-top: 1px solid var(--line); }
.editor { display: block; box-sizing: border-box; width: calc(100% - 48px); max-width: 820px; margin: 8px 24px 0; padding: 12px 14px; font: 13px/1.6 var(--ui); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; resize: none; outline: none; white-space: pre-wrap; }
.editor:focus { border-color: var(--blue); }
.error { margin: 24px; padding: 12px 14px; border-left: 3px solid var(--bad); background: #fbefee; }

/* Справа: сессия */
.chat { display: flex; flex-direction: column; border-left: 1px solid var(--line); min-height: 0; }
.chat { position: relative; }
.chat-resize { position: absolute; left: -4px; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 5; }
.chat-resize:hover, .chat-resize.dragging, .tree-resize:hover, .tree-resize.dragging { background: linear-gradient(to right, transparent 3px, var(--blue) 3px, var(--blue) 5px, transparent 5px); }
.files { position: relative; }
.tree-resize { position: absolute; right: -4px; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 5; }
body.resizing { cursor: col-resize; user-select: none; }
.chat-head { padding: 16px 20px 12px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; }
.chat-status { font-size: 11px; color: var(--blue); }
.chat-feed { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.chat-user { align-self: flex-end; max-width: 85%; background: var(--panel); padding: 9px 12px; white-space: pre-wrap; line-height: 1.45; }
.chat-answer { display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: 8px; row-gap: 6px; }
.chat-answer > :not(.chat-mark) { grid-column: 2; }
.chat-answer-text { line-height: 1.5; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.chat-answer-text:empty { display: none; }
.chat-answer-text p { white-space: pre-wrap; }
.chat-answer-text code { font: 11.5px var(--mono); background: var(--panel); padding: 1px 4px; }
.chat-answer-text pre { font: 11.5px/1.5 var(--mono); background: var(--panel); padding: 8px 10px; overflow-x: auto; white-space: pre; }
.chat-answer-text ul, .chat-answer-text ol { padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.chat-answer-text .md-h1, .chat-answer-text .md-h2 { font-weight: 700; font-size: 14px; }
.chat-answer-text .md-h3, .chat-answer-text .md-h4 { font-weight: 600; }
.chat-answer-text .md-table { overflow-x: auto; }
.chat-answer-text table { border-collapse: collapse; font-size: 12px; min-width: 0; table-layout: auto; }
.chat-answer-text th, .chat-answer-text td { border: 1px solid var(--line); padding: 4px 8px; text-align: left; white-space: normal;
  height: auto; max-width: none; position: static; background: none; color: var(--ink); font: 12px var(--ui); letter-spacing: 0; text-transform: none; }
.chat-answer-text th { font-weight: 600; background: var(--panel); }
.chat-restart { align-self: stretch; text-align: center; font: 10px var(--mono); color: var(--muted); border-top: 1px dashed var(--line); padding-top: 8px; }
.chat-line { font-size: 12px; line-height: 1.45; }
.chat-call { font: 11px var(--mono); color: var(--muted); word-break: break-all; }
.chat-call.ok { color: var(--muted); }
.chat-call.bad { color: var(--bad); }
.chat-note { color: var(--muted); }
.chat-note.bad { color: var(--bad); }
.chat-meta { font: 10px var(--mono); color: var(--muted); }
.chat button { font: 600 12px var(--ui); padding: 6px 12px; border: 1px solid var(--line); background: var(--canvas); color: var(--ink); cursor: pointer; }
.chat button.primary { background: var(--blue); border-color: var(--blue); color: #fff; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--graphite); color: #fff;
         padding: 10px 16px; font-size: 12px; max-width: 560px; }
.toast.bad { background: var(--bad); }

/* Лента в духе окна М1 (`~/m1/src/tui/theme.ts`): знаки, серый служебный текст, квадрат «работает». */
.glyph { display: inline-block; width: 12px; color: var(--muted); font: 11px var(--mono); }
.glyph.spin { color: #7E97D2; }
.chat-mark { color: var(--blue); font: 10px var(--mono); line-height: 1.9; }
.chat .chat-fold { all: unset; cursor: pointer; font: 11px var(--mono); color: var(--muted); }
.chat .chat-fold:hover { color: var(--ink); }
.chat-thought { color: var(--muted); font-size: 11.5px; line-height: 1.45; white-space: pre-wrap; border-left: 2px solid var(--line); padding: 1px 0 1px 10px; margin: 2px 0; }
.chat-thought-body { color: var(--muted); font-size: 12px; line-height: 1.45; white-space: pre-wrap; border-left: 2px solid var(--line); padding-left: 10px; max-height: 240px; overflow-y: auto; }
.chat-thought-body[hidden] { display: none; }
.chat-actions { display: flex; flex-direction: column; gap: 3px; }
.chat-actions-bad { color: var(--bad); }
.chat-actions-body { display: flex; flex-direction: column; gap: 2px; }
.chat-actions-body[hidden] { display: none; }
.chat-action { display: flex; gap: 6px; font: 11px var(--mono); color: var(--muted); min-width: 0; }
.chat-action-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 0 1 auto; }
.chat-action-time { white-space: nowrap; flex: none; }
.chat-action.bad, .chat-action.bad .chat-action-time { color: var(--bad); }
.chat-action.note { font-family: var(--ui); }
.chat-agents { display: flex; flex-direction: column; gap: 3px; border-left: 2px solid #7E97D2; padding: 2px 0 2px 10px; }
.chat-agent { display: grid; grid-template-columns: 12px max-content minmax(0, 1fr) auto; gap: 8px; align-items: baseline; font: 11px var(--mono); color: var(--muted); }
.chat-agent .glyph { color: #7E97D2; }
.chat-agent-name { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22ch; }
.chat-agent-action { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-agent-state { white-space: nowrap; }
.chat-agent.done .chat-agent-state { color: var(--ink); }
.chat-agent.failed .chat-agent-state, .chat-agent.failed .glyph { color: var(--bad); white-space: normal; }
/* Карточка вопроса — как в М1: рамка, строка вызова, предмет, причина, ответы столбиком с цифрами. */
.chat-permission { border: 1px solid var(--blue); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; outline: none; }
.chat-permission:focus-within, .chat-permission:focus { box-shadow: 0 0 0 2px var(--blue-soft); }
.chat-permission.answered { opacity: 0.5; pointer-events: none; }
.chat-permission-head { font: 600 11px var(--mono); color: var(--ink); }
.chat-permission-subject { font: 11px/1.45 var(--mono); white-space: pre-wrap; word-break: break-all; background: var(--panel); padding: 6px 8px; max-height: 180px; overflow-y: auto; margin: 0; }
.chat-permission-reason { font-size: 11px; color: var(--muted); }
.chat-permission-options { display: flex; flex-direction: column; }
.chat .chat-permission-option { all: unset; cursor: pointer; font: 12px var(--mono); color: var(--muted); padding: 3px 6px; }
.chat .chat-permission-option.selected { color: var(--ink); background: var(--blue-soft); }
.chat .chat-permission-option:hover { color: var(--ink); }
.chat-permission-note { font: 12px var(--ui); padding: 6px 8px; border: 1px solid var(--line); background: var(--canvas); color: var(--ink); }
.chat-permission-note[hidden] { display: none; }
.chat-permission-hint { font: 10px var(--mono); color: var(--muted); }
.chat-status { display: flex; align-items: center; gap: 2px; }
.chat-foot-context.low { color: #3E8E5A; }
.chat-foot-context.mid { color: #B08B2E; }
.chat-foot-context.high { color: var(--bad); }
.chat .chat-fold .glyph { width: 14px; }
.chat-actions-label { overflow: hidden; text-overflow: ellipsis; }
.chat .chat-fold { display: flex; align-items: baseline; min-width: 0; white-space: nowrap; }
.chat-live { padding: 6px 20px 4px; font: 11px var(--mono); color: #7E97D2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-live[hidden] { display: none; }
.chat-live .glyph { width: 14px; }
.chat-live-time, .chat-live-hint { color: var(--muted); }
.chat-answer > .chat-mark { grid-column: 1; }
/* Поле ввода и нижняя строка — как в окне М1: «›» и текст без рамки, синяя черта, под ней срез · модель · контекст. */
.chat-pending { padding: 4px 20px 0; display: flex; flex-direction: column; gap: 2px; }
.chat-pending[hidden] { display: none; }
.chat-pending-item { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 8px; font-size: 12px; color: var(--muted); }
.chat-pending-item span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-input { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; column-gap: 8px; align-items: start; padding: 10px 20px 10px; }
.chat-prompt { color: var(--blue); font: 700 14px/1.45 var(--mono); }
.chat-input textarea { border: 0; outline: 0; resize: none; padding: 0; font: 13px/1.45 var(--ui); color: var(--ink); background: transparent; max-height: 40vh; overflow-y: auto; }
.chat .chat-input button.send { all: unset; cursor: pointer; color: var(--muted); font: 14px/1.45 var(--mono); padding: 0 2px; }
.chat .chat-input button.send:hover { color: var(--blue); }
.chat .chat-input button.send:disabled { opacity: 0.35; cursor: default; }
.chat-rule { height: 1px; background: var(--blue); margin: 0 20px; }
.chat-foot { display: flex; gap: 24px; padding: 6px 20px 10px; font: 10.5px var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; }
.chat-foot-folder { overflow: hidden; text-overflow: ellipsis; direction: rtl; text-align: left; min-width: 8ch; flex: 0 1 auto; }
.chat-foot > span:not(.chat-foot-folder) { flex: none; }
.chat-foot-model { color: var(--blue); }
.chat-foot-hint { color: var(--muted); }
.chat-live-hint { cursor: pointer; }
.chat .chat-fold[hidden] { display: none; }

/* Панель сессии — окно М1 в браузере (ADR 23): клетка — знак моноширинного шрифта, строка — --line. */
.session { flex: 1; min-height: 0; display: flex; }
/* Шрифт панели — системный моноширинный: в веб-сборке JetBrains Mono нет знаков рамок (─ │ ┼), браузер брал их
   из другого шрифта другой ширины — таблицы и карточка разъезжались. Высота строки — как у терминала, чтобы
   вертикальные линии рамок смыкались. */
.m1-window { --line: 1.25em; white-space: pre-wrap; flex: 1; min-width: 0; display: flex; flex-direction: column; font: 12px/1.25 var(--mono); color: #31343F; }
.m1-feed { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 4px 14px 2px; position: relative; display: flex; flex-direction: column; }
/* Короткая беседа прижата к низу, поле ввода — сразу над чертой, как в терминале; длинная — листается. */
.m1-push { margin-top: auto; }
.m1-probe { position: absolute; visibility: hidden; white-space: pre; pointer-events: none; }
.m1-feed .ink-text { line-height: var(--line); }
.m1-working { cursor: pointer; }
.m1-input { display: flex; align-items: flex-start; margin-top: var(--line); }
/* Файл тянут над чатом (загрузка в inbox сессии, ADR 46): обводка поля ввода, как у папок в дереве. */
.m1-window.drop-over .m1-input { outline: 1px dashed var(--blue); outline-offset: 3px; background: var(--blue-soft); }
.m1-prompt { width: calc(2 * var(--cell, 1ch)); flex: none; color: #4A66A8; font-weight: 700; line-height: var(--line); }
.m1-input textarea { flex: 1; min-width: 0; border: 0; outline: 0; resize: none; padding: 0; font: inherit; line-height: var(--line); color: inherit; background: transparent; max-height: 45vh; overflow-y: auto; }
.m1-input textarea::placeholder { color: var(--muted); opacity: 1; }
.chat .m1-input button.m1-send { all: unset; cursor: pointer; color: var(--muted); line-height: var(--line); padding: 0 2px; }
.chat .m1-input button.m1-send:hover { color: var(--blue); }
.m1-status { padding: 0 14px 8px; flex: none; }
/* Строка состояния М1 ставит над чертой пустую строку; в браузере поле ввода и так отделено — убираем. */
.m1-status > .ink-box { margin-top: 0 !important; }
.m1-status { padding-top: 4px; }

/* Страница папки (как в Notion, экраны блока 5): агентство, проект, срез, любая папка. */
/* Страница папки — на всю область центра: бросить файл можно куда угодно; ширина строк ограничена. */
.page { padding: 28px 40px 48px; min-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; }
.page > * { max-width: 900px; }
.page-crumbs { font-size: 12px; color: var(--muted); min-height: 16px; }
.page-name { font-size: 26px; font-weight: 700; color: var(--ink); }
/* «бета» у названия сервиса (ADR 44). */
.page-name .page-beta { margin-left: 10px; padding: 2px 7px; vertical-align: middle; font: 600 10px var(--mono); letter-spacing: 1px; color: var(--blue); border: 1px solid var(--blue); }
/* Ссылка отдельной строкой страницы — шириной в свой текст, а не во всю страницу. */
.page-goto { align-self: flex-start; margin-top: 8px; font-size: 13px; }
.page-lead { font-size: 13px; line-height: 1.5; color: var(--graphite); max-width: 760px; margin-top: 2px; }
.page-section { margin-top: 26px; }
.page-rules { list-style: none; margin: 6px 0 2px; padding: 0; max-width: 760px; display: flex; flex-direction: column; gap: 6px; }
.page-rules li { font-size: 13px; line-height: 1.5; color: var(--graphite); padding-left: 22px; position: relative; }
.page-rules li::before { content: "—"; position: absolute; left: 0; color: var(--muted); }
.page-rules-lead { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-section h3 { margin-bottom: 4px; }
.page-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.page-item.link { cursor: pointer; }
.page-item.link:hover .page-title { color: var(--blue); }
.page-icon { flex: none; width: 16px; height: 12px; }
.page-icon.folder { border: 1.5px solid var(--blue); border-radius: 1px 2px 2px 2px; }
.page-icon.session { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); margin: 0 4px; }
.page-icon.file { height: 14px; background: var(--graphite); }
.page-icon.file.text { background: none; border: 1px solid var(--muted); }
.page-icon.svg { width: 18px; height: 18px; color: var(--blue); }
.page-icon.svg svg { width: 18px; height: 18px; display: block; }
.page-icon.svg.rules { color: var(--blue-light, #7E97D2); }
.page-icon.svg.file { color: var(--graphite); background: none; } /* не квадрат старого значка файла */
.page-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.page-title { font-size: 14px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-meta { font-size: 12px; color: var(--muted); }
.page-empty { font-size: 12px; color: var(--muted); padding: 10px 0; }
.page-button { all: unset; cursor: pointer; flex: none; font: 600 12px var(--ui); color: var(--blue); border: 1px solid var(--line); padding: 5px 14px; }
.page-button.primary { background: var(--blue); color: #fff; border-color: var(--blue); cursor: default; }
/* Справа в строке чата: «итог» и метка идущей сессии. */
.page-actions { display: flex; align-items: center; gap: 8px; }
.page-button:not(.primary):hover { border-color: var(--blue); }

/* Меню по правому щелчку и окно подтверждения (блок 6: переименовать, удалить в корзину). */
.ctx { position: fixed; z-index: 50; min-width: 190px; padding: 4px 0; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 24px rgba(30, 33, 41, 0.12); display: flex; flex-direction: column; }
.ctx button { all: unset; cursor: pointer; padding: 7px 14px; font: 13px var(--ui); color: var(--ink); }
.ctx button:hover { background: var(--blue-soft); }
.ctx button.danger { color: var(--bad, #D2655C); }
.modal-back { position: fixed; inset: 0; z-index: 60; background: rgba(30, 33, 41, 0.25); display: flex; align-items: flex-start; justify-content: center; padding-top: 18vh; }
.modal { width: min(440px, calc(100vw - 32px)); background: #fff; border-radius: 8px; box-shadow: 0 12px 40px rgba(30, 33, 41, 0.2); padding: 20px 22px 16px; display: flex; flex-direction: column; gap: 10px; }
.modal h3 { font-size: 16px; font-weight: 600; color: var(--ink); }
.modal p { font-size: 13px; line-height: 1.5; color: var(--graphite); }
.modal input { font: 14px var(--ui); padding: 7px 10px; border: 1px solid var(--line); border-radius: 4px; outline: none; }
.modal input:focus { border-color: var(--blue); }
.modal-bar { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.page-button.danger { color: #fff; background: var(--bad, #D2655C); border-color: var(--bad, #D2655C); }
.tree .node.bin { margin-top: 14px; color: var(--muted); }
.tree .node.bin .icon.svg { color: var(--muted); }

/* Сессии нет (завершена или не начата) — правая панель скрыта (Александр, 27.10). */
body.no-session .app { grid-template-columns: var(--tree-width, 300px) minmax(0, 1fr) 0; }
body.no-session .chat { display: none; }

/* Вход и мастер первого запуска (блок 1): карточка по центру на фоне панели. */
body.gate-body { background: var(--panel); }
.gate { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 10vh 16px 40px; }
.gate-wait { color: var(--muted); }
.gate-card { width: min(440px, 100%); background: var(--canvas); border: 1px solid var(--line); padding: 28px 32px 26px; display: flex; flex-direction: column; gap: 12px; }
.gate-card.wide { width: min(640px, 100%); }
.gate-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.gate-head .mark { width: 32px; height: 32px; font-size: 13px; }
.gate-brand { font: 700 10px var(--mono); letter-spacing: 2px; color: var(--muted); }
.gate-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; font: 10px var(--mono); letter-spacing: 1px; color: var(--muted); text-transform: uppercase; }
.gate-steps li.done { color: var(--ok); }
.gate-steps li.now { color: var(--blue); font-weight: 700; }
.gate-title { font-size: 22px; font-weight: 700; color: var(--ink); }
.gate-lead { font-size: 13px; line-height: 1.5; color: var(--graphite); }
.gate-form { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.gate-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--graphite); }
.gate-field input { font: 14px var(--ui); color: var(--ink); padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; outline: none; }
.gate-field input:focus { border-color: var(--blue); }
.gate-code { font-family: var(--mono) !important; letter-spacing: 3px; text-transform: uppercase; }
.gate-error { font-size: 12px; color: var(--bad); min-height: 0; }
.gate-error:empty { display: none; }
.gate-button { all: unset; cursor: pointer; align-self: flex-start; background: var(--blue); color: #fff; font: 600 13px var(--ui); padding: 9px 18px; }
.gate-button:hover { filter: brightness(1.08); }
.gate-button:disabled { opacity: .5; cursor: default; }
.gate-button.secondary { margin-top: 10px; }
.gate-link { all: unset; cursor: pointer; align-self: flex-start; font-size: 12px; color: var(--muted); }
.gate-link:hover { color: var(--blue); }
.gate-link:disabled { opacity: .5; cursor: default; }
.gate-note { font-size: 12px; color: var(--muted); }
.gate-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 4px 0 6px; }
.gate-kind { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; border: 1px solid var(--line); min-height: 200px; cursor: pointer; }
.gate-kind.chosen { border: 2px solid var(--blue); background: var(--blue-soft); padding: 15px 17px 17px; cursor: default; }
.gate-kind.off { color: var(--muted); background: var(--panel); cursor: not-allowed; }
.gate-kind-name { font-size: 16px; font-weight: 700; }
.gate-kind.chosen .gate-kind-name { color: var(--blue); }
.gate-kind-text { font-size: 12px; line-height: 1.5; }
.gate-levels { list-style: none; display: flex; flex-direction: column; gap: 2px; margin-top: 4px; font-size: 13px; font-weight: 600; }
.gate-kind-soon { margin-top: auto; font: 10px var(--mono); letter-spacing: 1px; text-transform: uppercase; }
@media (max-width: 560px) { .gate-kinds { grid-template-columns: 1fr; } .gate-card { padding: 22px 18px; } }
.gate-result { font-size: 12px; line-height: 1.5; color: var(--graphite); display: flex; flex-direction: column; gap: 6px; }
.gate-result:empty { display: none; }
.gate-result.ok { color: #2e6b38; }
.gate-result.bad { color: var(--bad); }
.gate-sample { color: var(--graphite); background: var(--panel); padding: 8px 10px; }
.gate-answer { font: 11px/1.5 var(--mono); color: var(--ink); white-space: pre-wrap; word-break: break-word; background: var(--panel); padding: 8px 10px; }
.gate-meta { font: 10px var(--mono); color: var(--muted); }

/* Кто вошёл — внизу дерева; администрирование — строками дерева (блок 1). */
.whoami { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--graphite); }
.whoami-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.whoami-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.whoami-role { color: var(--muted); font: 10px var(--mono); }
.whoami .whoami-gear { all: unset; cursor: pointer; flex: none; width: 28px; height: 28px; display: grid; place-items: center; color: var(--muted); border-radius: 4px; }
.whoami .whoami-gear:hover { color: var(--blue); background: var(--blue-soft); }
.whoami .whoami-gear svg { width: 18px; height: 18px; display: block; }
.ctx .ctx-head { padding: 8px 14px 3px; font: 600 10px var(--mono); letter-spacing: 1.5px; color: var(--muted); }
.ctx .ctx-head + button { margin-top: 1px; }
.gear-menu { min-width: 220px; }
.page-form { display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.page-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--graphite); }
.page-form input, .page-form select { font: 14px var(--ui); color: var(--ink); padding: 6px 10px; border: 1px solid var(--line); border-radius: 4px; outline: none; background: var(--canvas); }
.page-form input:focus, .page-form select:focus { border-color: var(--blue); }
.page-form .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.page-form .row > label { flex: 1 1 180px; }
.page-choice { display: flex; flex-direction: column; gap: 6px; }
.page-choice label { display: flex; flex-direction: row !important; align-items: flex-start; gap: 8px !important; font-size: 13px !important; color: var(--ink) !important; line-height: 1.4; cursor: pointer; }
.page-choice input { margin-top: 2px; }
.page-hint { font-size: 12px; color: var(--muted); line-height: 1.5; }
.page-note { margin-top: 14px; max-width: 760px; }
.grants { display: flex; flex-direction: column; gap: 2px; max-height: 340px; overflow-y: auto; border: 1px solid var(--line); padding: 8px 10px; }
.grants label { display: flex; flex-direction: row !important; align-items: center; gap: 8px !important; font-size: 13px !important; color: var(--ink) !important; }
.grants .project { padding-left: 22px; }
.grants .note { color: var(--muted); font-size: 11px; }
.secret { font: 15px var(--mono); letter-spacing: 1px; background: var(--blue-soft); padding: 8px 12px; user-select: all; }
.journal-row { display: grid; grid-template-columns: 140px 200px 160px 1fr; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.journal-row .at { font: 11px var(--mono); color: var(--muted); }
.journal-row .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.journal-row .what { font-weight: 600; }
.badge-off { font: 10px var(--mono); color: var(--bad); margin-left: 6px; }
/* Статус пользователя — плашкой (Александр, 28.10). */
.status-chip { flex: none; font: 600 11px var(--ui); padding: 3px 10px; border-radius: 10px; }
.status-chip.on { background: #eaf4ea; color: #2e6b38; }
.status-chip.off { background: #f9ecea; color: #a03d31; }
.page-item.user-off .page-title { color: var(--muted); }
.user-status { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--graphite); }
.badge-me { font: 10px var(--mono); color: var(--blue); margin-left: 6px; }
.modal .secret { margin: 4px 0; }
.page-section > .page-link { display: inline-block; margin: 2px 0 10px; }
.page-add:disabled { opacity: .45; cursor: default; color: var(--muted); }
.gate-field select { font: 14px var(--ui); color: var(--ink); padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; outline: none; background: var(--canvas); }
.gate-field select:focus { border-color: var(--blue); }
.gate-pick { display: flex; flex-direction: column; gap: 10px; }
.gate-pick:empty { display: none; }
.gate-form .gate-note { margin-top: -4px; }

/* Прогресс дорожной карты проекта (Александр, 28.10). */
.progress { display: flex; align-items: center; gap: 8px; flex: none; }
.progress-bar { width: 96px; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.progress-bar > span { display: block; height: 100%; background: var(--blue); }
.page-section > .progress { margin: 6px 0 4px; }
.page-stages { list-style: none; margin: 6px 0 2px; padding: 0; max-width: 760px; display: flex; flex-direction: column; gap: 6px; }
.page-stages li { font-size: 13px; line-height: 1.5; color: var(--graphite); padding-left: 22px; position: relative; }
.page-stages li::before { content: "○"; position: absolute; left: 0; color: var(--muted); }
.page-stages li.done { color: var(--muted); }
.page-stages li.done::before { content: "●"; color: var(--blue); }

/* Новостные сводки (ADR 42, web/digests.js): вкладки, повестка, ход работы, отбор, выпуск, источники. */
.dg-page { gap: 4px; }
.dg-tabs { display: flex; gap: 2px; margin-top: 6px; border-bottom: 1px solid var(--line); }
.dg-tab { all: unset; cursor: pointer; padding: 7px 14px 8px; font: 600 13px var(--ui); color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.dg-tab:hover { color: var(--blue); }
.dg-tab.on { color: var(--ink); border-bottom-color: var(--blue); }
.dg-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 8px 0 6px; }
.dg-seg { display: flex; align-items: center; gap: 0; }
.dg-seg .dg-label { margin-right: 8px; }
.dg-seg button { all: unset; cursor: pointer; font: 12px var(--mono); padding: 4px 9px; border: 1px solid var(--line); margin-left: -1px; color: var(--graphite); }
.dg-seg button.on { background: var(--blue); border-color: var(--blue); color: #fff; position: relative; }
.dg-seg button:disabled { opacity: .5; cursor: default; }
.dg-label { font: 400 10px var(--mono); letter-spacing: 1px; color: var(--muted); text-transform: uppercase; }
.dg-field { display: flex; align-items: center; gap: 8px; }
.dg-field select { font: 13px var(--ui); padding: 4px 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--canvas); }
.dg-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); cursor: pointer; }
.dg-go { all: unset; cursor: pointer; flex: none; font: 600 12px var(--ui); color: #fff; background: var(--blue); border: 1px solid var(--blue); padding: 6px 16px; }
.dg-go:hover { filter: brightness(1.08); }
.dg-go:disabled, .page-button:disabled { opacity: .5; cursor: default; }
.dg-note { font-size: 12px; color: var(--muted); line-height: 1.5; }
.dg-note.bad, .dg-src-sub.bad { color: var(--bad); }
.dg-state { display: flex; flex-direction: column; gap: 2px; }
.dg-state .page-link { font-size: 12px; }
.dg-all { margin: 2px 0 4px; font-size: 12px; }
.dg-error { margin: 12px 0; }
.dg-link { color: var(--graphite); text-decoration: underline; text-decoration-color: var(--muted); }
.dg-link:hover { color: var(--blue); }

/* Ход работы: шаги конвейера, текущая строка, итог; обновлено — по Москве. */
.dg-run { display: none; }
.dg-run.on { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 4px; padding: 12px 14px; background: var(--panel); border-left: 3px solid var(--blue); }
.dg-run.bad { border-left-color: var(--bad); }
.dg-run.ok { border-left-color: var(--ok); }
.dg-run-title { font-weight: 600; font-size: 13px; }
.dg-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 18px; font: 11px var(--mono); color: var(--muted); }
.dg-steps li::before { content: "○ "; }
.dg-steps li.done { color: var(--graphite); }
.dg-steps li.done::before { content: "● "; color: var(--blue); }
.dg-steps li.now { color: var(--blue); font-weight: 700; }
.dg-steps li.now::before { content: "◉ "; }
.dg-steps li.bad { color: var(--bad); font-weight: 700; }
.dg-steps li.bad::before { content: "✕ "; }
.dg-run-line { font-size: 12px; color: var(--graphite); }
.dg-run-note { font-size: 12px; color: var(--graphite); }
.dg-run-note.bad, .dg-run-error { color: var(--bad); font-size: 12px; }
.dg-run-done { color: #2e6b38; font-size: 12px; }
.dg-run-foot { display: flex; gap: 16px; align-items: center; font: 10px var(--mono); color: var(--muted); }
.dg-run-foot .page-link { font: 12px var(--ui); }

/* Отбор: карточки кандидатов. */
.dg-selection, .dg-issue { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; }
.dg-sel-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.dg-sel-title { font-size: 17px; font-weight: 700; color: var(--ink); }
.dg-sel-count { font-size: 12px; color: var(--muted); flex: 1; }
.dg-toggles { display: flex; gap: 18px; margin: 2px 0 4px; }
.dg-toggles .dg-check { font-size: 12px; color: var(--graphite); }
.dg-block { margin-top: 14px; padding: 6px 0; border-bottom: 1px solid var(--line); font: 600 12px var(--ui); color: var(--ink); }
.dg-block.fold { cursor: pointer; }
.dg-block.fold:hover { color: var(--blue); }
.dg-topic { padding: 10px 0 2px; font: 400 10px var(--mono); letter-spacing: 1px; color: var(--muted); text-transform: uppercase; }
.dg-card { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.dg-card > input { align-self: start; width: 15px; height: 15px; margin: 2px 0 0 2px; }
.dg-card.chosen { background: linear-gradient(to right, var(--blue-soft), transparent 60%); }
.dg-card-body { min-width: 0; cursor: pointer; outline: none; display: flex; flex-direction: column; gap: 3px; }
.dg-card-body:focus-visible { box-shadow: 0 0 0 2px var(--blue-soft); }
.dg-card-title { font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.dg-card-body:hover .dg-card-title { color: var(--blue); }
.dg-caret { display: inline-block; width: 14px; color: var(--muted); font-weight: 400; }
.dg-card-meta { font-size: 12px; color: var(--muted); }
.dg-card-status { font-size: 11px; color: var(--muted); }
.dg-card-status.ok { color: #2e6b38; }
.dg-card-status.bad { color: #a03d31; }
.dg-card-reason { font-size: 12px; color: var(--graphite); font-style: italic; }
.dg-card-preview { font-size: 12.5px; line-height: 1.5; color: var(--graphite); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dg-article { cursor: default; margin-top: 6px; padding: 8px 12px; border-left: 2px solid var(--line); }
.dg-article-text { max-width: 820px; font-size: 13px; line-height: 1.55; color: var(--ink); }
.dg-article-text p { margin: 0 0 8px; }
.dg-article-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 8px; font-size: 12px; }
.dg-dropped { padding: 8px 0 8px 30px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.dg-dropped .dg-card-title { font-weight: 400; color: var(--graphite); }

/* Выпуск. */
.dg-focus { font-size: 15px; font-weight: 600; margin: 10px 0 2px; }
.dg-line { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.dg-line-text { font-size: 13.5px; line-height: 1.5; }
.dg-line-repeat { font-size: 12px; color: var(--bad); }
.dg-warn { padding: 10px 12px; border: 1px solid #e3b4ae; background: #fbf1ef; font-size: 12px; line-height: 1.5; color: var(--ink); display: flex; flex-direction: column; gap: 4px; }
.dg-warn-title { font-weight: 600; color: #a03d31; }
.dg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 16px; }

/* Источники. */
.dg-src-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin: 6px 0; }
.dg-src { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.dg-src-section { margin-top: 18px; }
.dg-src-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) 120px 110px 78px 118px 52px; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.dg-src-row.off { opacity: .55; }
.dg-src-head { font: 400 10px var(--mono); letter-spacing: 1px; color: var(--muted); text-transform: uppercase; padding: 6px 0; }
.dg-src-row select { font: 12px var(--ui); padding: 2px 4px; border: 1px solid var(--line); border-radius: 3px; background: var(--canvas); max-width: 120px; }
.dg-src-info { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dg-src-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.dg-src-sub { font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
.dg-src-num { font: 12px var(--mono); }
.dg-src-num.none { color: var(--bad); }
.dg-src-acts { display: flex; gap: 10px; justify-content: flex-end; }
.dg-src-acts .page-link { font-size: 13px; }
.dg-form { display: none; margin: 10px 0 6px; padding: 14px 16px; border: 1px solid var(--line); background: var(--canvas); max-width: 720px; }
.dg-form.dg-form-open { display: flex; }
.dg-textarea { width: 100%; min-height: 180px; border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; font: 13px/1.5 var(--ui); resize: vertical; }
.dg-tg-find { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }
.dg-tg-found { display: flex; flex-direction: column; }
.dg-tg-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.dg-tg-item .dg-src-info { flex: 1; }
.dg-marks { display: flex; gap: 6px; margin-top: 2px; }
.dg-chip { font: 600 10.5px var(--ui); padding: 1px 8px; border-radius: 9px; }
.dg-chip.ok { background: #eaf4ea; color: #2e6b38; }
.dg-chip.bad { background: #f9ecea; color: #a03d31; }
.dg-chip.from { background: #edf1f9; color: #3d5a99; cursor: help; }
.dg-inherit { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 12px; }
/* Источники заказчика в проекте: вопрос при заведении мониторинга и строка «проект берёт источники заказчика». */
.dg-ask { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: 6px; background: #f7f9fc; }
.dg-ask-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.dg-take-line { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* Окно с галочками — «и в проекты?», «какие источники взять». */
.dg-choose { width: min(560px, calc(100vw - 32px)); }
.dg-choose-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.dg-choose-list .dg-check { align-items: baseline; flex-wrap: wrap; }
.dg-choose-list .dg-src-sub { margin-left: 4px; }
.dg-list { margin: 2px 0 6px 18px; font-size: 12px; color: var(--graphite); }
.dg-load-result { display: flex; flex-direction: column; gap: 4px; }

/* Настройки администратора: сводки. */
.dg-state-line { font-size: 13px; font-weight: 600; }
.dg-state-line.ok { color: #2e6b38; }
.dg-label-line { font-size: 12px; color: var(--graphite); }
.dg-web-row { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.page-form [hidden] { display: none !important; }
.page-form .dg-check { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); }
.dg-modal-wide { width: min(640px, calc(100vw - 32px)); }
.dg-modal-wide .dg-textarea { min-height: 260px; }

/* «Сервисы» › «Telegram» (ADR 44; карта переноса, часть Е): слева — каналы и упоминания, в середине — канал
   (карточки, лента, правая колонка графиков), упоминания или «о разделе». Своя прокрутка у ленты и у правой
   колонки, как в «Комблоке»; узкое окно — одна прокрутка, правая колонка под лентой. Вид — М5. */
.tg-page { position: relative; display: grid; grid-template-columns: 240px minmax(0, 1fr); height: 100%; min-height: 0; overflow: hidden; }
.tg-page span.warn { color: #8a6d1a; }
.tg-page span.bad { color: var(--bad); }
.tg-page span.muted, .tg-muted { color: var(--muted); }
.tg-pad { padding: 10px 14px; }
.tg-side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--canvas); }
.tg-tabs { display: flex; margin: 12px 14px 8px; border: 1px solid var(--line); }
.tg-tab { all: unset; cursor: pointer; flex: 1; text-align: center; padding: 6px 0; font: 600 12px var(--ui); color: var(--muted); }
.tg-tab:hover { color: var(--blue); }
.tg-tab.on { background: var(--blue); color: #fff; }
.tg-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tg-pane[hidden] { display: none; }
.tg-filter { margin: 0 14px; font: 13px var(--ui); color: var(--ink); padding: 6px 10px; border: 1px solid var(--line); border-radius: 4px; outline: none; }
.tg-filter:focus { border-color: var(--blue); }
.tg-list-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 6px; }
.tg-add { all: unset; cursor: pointer; width: 24px; height: 24px; text-align: center; line-height: 22px; font-size: 16px; color: var(--graphite); border: 1px solid var(--line); }
.tg-add:hover { color: var(--blue); border-color: var(--blue); }
.tg-list { flex: 1; min-height: 0; overflow-y: auto; }
.tg-chan { display: flex; align-items: center; gap: 10px; padding: 9px 14px; cursor: pointer; border-left: 2px solid transparent; border-bottom: 1px solid var(--line); }
.tg-chan:hover { background: var(--blue-soft); }
.tg-chan.on { background: var(--blue-soft); border-left-color: var(--blue); }
.tg-avatar { flex: none; width: 30px; height: 30px; display: grid; place-items: center; background: var(--blue); color: #fff; font: 700 13px var(--ui); border-radius: 4px; }
.tg-avatar.small { width: 26px; height: 26px; font-size: 11px; }
.tg-chan-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tg-chan-title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-chan-sub { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-chan-subs { flex: none; font: 11px var(--mono); color: var(--graphite); }
.tg-search { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 0; min-height: 0; overflow-y: auto; }
.tg-search > .caps, .tg-search > .page-hint { margin: 0 14px; }
.tg-search > .dg-go { margin: 0 14px; text-align: center; }
.tg-history { display: flex; flex-direction: column; margin: 8px 14px 12px; gap: 2px; }
.tg-history > .caps { margin-bottom: 4px; }
.tg-past { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.tg-past-text { flex: 1; min-width: 0; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-past-text:hover { color: var(--blue); }
.tg-past.on .tg-past-text { font-weight: 600; color: var(--blue); }
.tg-side-foot { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 14px 12px; border-top: 1px solid var(--line); }
.tg-capacity { font-size: 11px; line-height: 1.4; color: var(--graphite); }

.tg-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; container-type: inline-size; }
.tg-banner { display: none; }
.tg-banner.on { display: flex; flex-direction: column; gap: 4px; padding: 8px 18px; border-bottom: 1px solid var(--line); background: #fbf7ec; }
.tg-banner-line { font-size: 12px; line-height: 1.45; color: var(--ink); }
.tg-banner-line.bad { color: #a03d31; }
.tg-runs { display: flex; flex-direction: column; gap: 6px; padding: 0 18px; }
.tg-runs:empty { display: none; }
.tg-runs .dg-run.on { margin: 8px 0 0; }
.tg-view { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.tg-about { overflow-y: auto; min-height: 0; flex: 1; }
.tg-state { font-size: 13px; font-weight: 600; line-height: 1.45; }
.tg-state.ok { color: #2e6b38; }
.tg-state.warn { color: #8a6d1a; }
.tg-state.bad { color: #a03d31; }
.tg-limits { margin: 6px 0 0 18px; display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.tg-limit-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.tg-limit-text { font-size: 13px; line-height: 1.5; color: var(--graphite); }
.tg-limit-refs { font-size: 11px; color: var(--muted); }

.tg-top { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 18px 10px; border-bottom: 1px solid var(--line); }
.tg-head { flex: 1 1 280px; min-width: 0; }
.tg-title { font-size: 17px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-sub { font-size: 12px; color: var(--muted); line-height: 1.4; }
.tg-tools { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.tg-periods button { font-size: 11px; padding: 3px 7px; }
.tg-periods button.tg-gray { color: #b7bbc8; cursor: help; }
.tg-fresh { flex: none; padding: 4px 18px; font-size: 11px; color: var(--muted); min-height: 0; }
.tg-fresh:empty { display: none; }
.tg-stats { flex: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.tg-stats > .page-empty, .tg-stats > .tg-notready, .tg-stats > .dg-note { grid-column: 1 / -1; padding: 10px 18px; }
.tg-card { min-width: 0; padding: 10px 14px 6px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.tg-card:last-child { border-right: none; }
.tg-card-row { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.tg-card-value { font-size: 19px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-delta { flex: none; font: 11px var(--mono); }
.tg-delta.up { color: #2e6b38; }
.tg-delta.down { color: var(--bad); }
.tg-delta.flat { color: var(--muted); }
.tg-card-note { font-size: 11px; color: var(--muted); line-height: 1.3; }
.tg-spark { height: 26px; margin-top: auto; }
.tg-spark svg { display: block; }

.tg-content { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, 1fr); }
.tg-feed { position: relative; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.tg-feed-head { flex: none; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 18px 8px; border-bottom: 1px dashed var(--line); }
.tg-feed-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 18px 18px; }
.tg-feed-scroll > .tg-notready, .tg-feed-scroll > .dg-warn { margin-bottom: 10px; }
.tg-more { text-align: center; font: 11px var(--mono); color: var(--muted); padding: 10px 0 4px; }
.tg-totop { all: unset; cursor: pointer; position: absolute; right: 18px; bottom: 16px; padding: 6px 12px; background: var(--graphite); color: #fff; font: 600 12px var(--ui); opacity: .88; }
.tg-totop:hover { opacity: 1; }
.tg-totop[hidden] { display: none; }
.tg-day { display: flex; align-items: center; gap: 10px; margin: 16px 0 10px; font: 10px var(--mono); letter-spacing: 1px; color: var(--muted); text-transform: uppercase; }
.tg-day::before, .tg-day::after { content: ""; flex: 1; border-top: 1px dashed var(--line); }
.tg-feed-scroll > .tg-day:first-child { margin-top: 0; }
.tg-jumped { font-size: 12px; color: var(--graphite); padding: 0 0 10px; }
.tg-post { border: 1px solid var(--line); border-radius: 4px; padding: 12px 14px; margin-bottom: 10px; background: var(--canvas); }
.tg-post.deleted { background: var(--panel); }
.tg-post.flash { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-soft); }
.tg-post-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tg-post-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tg-post-title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-post-meta { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-post-link { flex: none; font-size: 11px; color: var(--graphite); text-decoration: underline; text-decoration-color: var(--line); }
.tg-post-link:hover { color: var(--blue); }
.tg-post-deleted { font-size: 11px; color: var(--bad); margin-bottom: 6px; }
.tg-post-text { font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow: hidden; }
.tg-post-text.open { max-height: none; }
.tg-post-text mark { background: #f3e7b3; color: inherit; padding: 0 1px; border-radius: 2px; }
.tg-more-link { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--blue); cursor: pointer; border-bottom: 1px dashed var(--blue); }
.tg-media { display: grid; place-items: center; height: 120px; max-width: 420px; margin-top: 8px; border: 1px solid var(--line); border-radius: 4px; font: 10px var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); background: repeating-linear-gradient(45deg, #f5f6f8, #f5f6f8 8px, #eef0f3 8px, #eef0f3 16px); }
.tg-media.none { height: 34px; text-transform: none; letter-spacing: 0; font: 11px var(--ui); }
.tg-media-img { display: block; width: 100%; max-width: 420px; height: 240px; object-fit: cover; margin-top: 8px; border: 1px solid var(--line); border-radius: 4px; }
.tg-post-foot { display: flex; flex-wrap: wrap; gap: 6px 26px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); }
.tg-metric-v { font: 700 14px var(--mono); color: var(--ink); }
.tg-metric-s { font-size: 10px; color: var(--muted); }
.tg-metric.link { cursor: pointer; }
.tg-metric.link:hover .tg-metric-v, .tg-metric.link .tg-metric-s { color: var(--blue); }

.tg-aside { min-height: 0; overflow-y: auto; padding: 12px 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.tg-panel { border: 1px solid var(--line); border-radius: 4px; padding: 12px 14px; background: var(--canvas); }
.tg-panel-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.tg-line { position: relative; }
.tg-line-svg { display: block; overflow: visible; }
.tg-axis { font: 9px var(--mono); fill: var(--muted); }
.tg-tip { position: absolute; top: -4px; padding: 2px 8px; background: var(--graphite); color: #fff; font-size: 11px; white-space: nowrap; pointer-events: none; }
.tg-tip[hidden] { display: none; }
.tg-bars { display: flex; gap: 6px; height: 104px; align-items: flex-end; margin-bottom: 8px; }
.tg-bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; min-width: 0; }
.tg-bar-value { font: 9px var(--mono); color: var(--graphite); text-align: center; white-space: nowrap; overflow: hidden; }
.tg-bar-fill { background: var(--blue); border-radius: 4px 4px 0 0; }
.tg-bar-n { font: 10px var(--mono); color: var(--muted); text-align: center; margin-top: 3px; }
.tg-toprow { display: flex; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 12px; cursor: pointer; }
.tg-toprow:last-child { border-bottom: none; }
.tg-toprow:hover .tg-toprow-text { color: var(--blue); }
.tg-toprow-n { flex: none; width: 18px; font: 11px var(--mono); color: var(--muted); }
.tg-toprow-text { flex: 1; min-width: 0; color: var(--graphite); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-toprow-v { flex: none; font: 700 11px var(--mono); color: var(--ink); }
.tg-heat { display: grid; grid-template-columns: 20px repeat(24, minmax(0, 1fr)); gap: 2px; align-items: center; }
.tg-heat-wd { font: 9px var(--mono); color: var(--muted); }
.tg-heat-cell { aspect-ratio: 1; border-radius: 2px; }
.tg-heat-hours { display: grid; grid-template-columns: 20px repeat(24, minmax(0, 1fr)); gap: 2px; margin-top: 3px; font: 8px var(--mono); color: var(--muted); }
.tg-heat-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; margin-top: 8px; font-size: 11px; color: var(--graphite); }
.tg-heat-legend { color: var(--muted); white-space: nowrap; }
.tg-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 1px; vertical-align: middle; }
.tg-ring { display: flex; gap: 14px; align-items: center; }
.tg-ring svg { flex: none; }
.tg-ring-total { font: 700 16px var(--ui); fill: var(--ink); }
.tg-ring-rows { flex: 1; min-width: 0; }
.tg-ring-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.tg-ring-row:last-child { border-bottom: none; }
.tg-ring-n { margin-left: auto; font: 700 11px var(--mono); }
.tg-ring-p { width: 46px; text-align: right; font: 11px var(--mono); color: var(--muted); }
.tg-big { display: flex; gap: 24px; margin-bottom: 10px; }
.tg-big-v { font-size: 20px; font-weight: 700; }
.tg-row { display: flex; gap: 8px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.tg-row-head { color: var(--muted); font-size: 11px; margin-top: 6px; }
.tg-row-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-row-n { flex: none; width: 50px; text-align: right; font: 700 11px var(--mono); }
.tg-row-head .tg-row-n { font-weight: 400; }
.tg-row-v { flex: none; width: 70px; text-align: right; font: 11px var(--mono); color: var(--muted); }
.tg-notready { font-size: 12px; color: var(--muted); padding: 8px 10px; border: 1px dashed var(--line); border-radius: 4px; background: var(--panel); }

/* Спонсорское сообщение Telegram — под последним постом, с пометкой «Реклама». */
.tg-sponsored-box:empty { display: none; }
.tg-sponsored-box { margin-bottom: 10px; }
.tg-sponsored { border: 1px solid #d7deef; border-radius: 4px; padding: 10px 14px; background: #f7f9fc; display: flex; flex-direction: column; gap: 4px; }
.tg-sponsored-head { display: flex; align-items: center; gap: 12px; }
.tg-sponsored-mark { font: 600 10px var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--blue); }
.tg-sponsored-about { font-size: 11px; color: var(--graphite); line-height: 1.45; }
.tg-sponsored-about[hidden] { display: none; }
.tg-sponsored-title { font-size: 13px; font-weight: 600; }
.tg-sponsored-text { font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.tg-sponsored-go { align-self: flex-start; margin-top: 4px; text-decoration: none; }

/* Комментарии — выезжающая панель в середине (справа — сессия, её не закрываем). */
.tg-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 92%); z-index: 20; display: flex; flex-direction: column; background: var(--canvas); border-left: 1px solid var(--line); box-shadow: -8px 0 24px rgba(30, 33, 41, 0.12); outline: none; }
.tg-drawer-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 12px; }
.tg-drawer-title { flex: 1; min-width: 0; }
.tg-drawer-name { font-size: 13px; font-weight: 600; margin-top: 2px; }
.tg-drawer-close { all: unset; cursor: pointer; font: 18px/1 var(--ui); color: var(--graphite); padding: 0 4px; }
.tg-drawer-close:hover { color: var(--blue); }
.tg-drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 16px; }
.tg-drawer-foot { padding: 10px 16px; border-top: 1px dashed var(--line); font-size: 11px; color: var(--muted); }
.tg-comment { padding: 8px 0; border-bottom: 1px solid var(--line); }
.tg-comment-meta { display: flex; gap: 10px; font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.tg-comment-who { color: var(--ink); font-weight: 600; }
.tg-comment-text { font-size: 13px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Окна раздела: добавить канал, глубже, выгрузка в проект. */
.tg-modal { width: min(500px, calc(100vw - 32px)); max-height: 76vh; overflow-y: auto; }
.tg-modal-wide { width: min(600px, calc(100vw - 32px)); }
.tg-modal .dg-seg { flex-wrap: wrap; }
.tg-depths button { margin-bottom: 4px; }
.tg-find-row { display: flex; gap: 8px; }
.tg-find-row input { flex: 1; min-width: 0; }
.tg-explain { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 4px; font-size: 12px; line-height: 1.5; color: var(--graphite); }
.tg-explain .page-button { align-self: flex-start; }
.tg-select { font: 13px var(--ui); padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--canvas); }

/* «Настройки» › «Telegram». */
.tg-gap { margin-top: 12px; }
.tg-qr { display: flex; gap: 18px; align-items: center; }
.tg-qr img { flex: none; width: 200px; height: 200px; image-rendering: pixelated; border: 1px solid var(--line); }
.tg-qr-how { display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.5; }
.tg-ritms { margin-top: 6px; }

/* Узкая середина: карточки в два ряда, правая колонка под лентой, прокрутка одна. */
@container (max-width: 760px) {
  .tg-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tg-card:nth-child(3n) { border-right: none; }
  .tg-content { display: block; overflow-y: auto; }
  .tg-feed { border-right: none; min-height: auto; }
  .tg-feed-scroll { overflow: visible; }
  .tg-totop { position: sticky; float: right; bottom: 12px; margin: -40px 18px 0 0; }
}
.tg-more .tg-notready, .tg-more .dg-note { font: 12px var(--ui); text-align: left; }

/* Демо-разбор (решение Александра 02.11): одно окно `/demo` без входа — бросок выгрузки, живой
   статус читателей, результат JSON. */
.demo { min-height: 100vh; max-width: 760px; margin: 0 auto; padding: 8vh 16px 40px; display: flex; flex-direction: column; gap: 14px; }
.demo-head { display: flex; align-items: center; gap: 12px; }
.demo-head .mark { width: 36px; height: 36px; font-size: 13px; }
.demo-title { font-size: 20px; font-weight: 700; color: var(--ink); }
.demo-card { background: var(--canvas); border: 1px solid var(--line); padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
/* Атрибут hidden выше класса: панели (ошибка, результат) не светятся до своего события (замечание Александра 03.11). */
.demo-card[hidden] { display: none; }
.demo-drop { border: 1.5px dashed var(--line); padding: 42px 20px; text-align: center; color: var(--graphite); cursor: pointer; font-size: 14px; }
.demo-drop:hover, .demo-drop.over { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); }
.demo-drop-hint { font-size: 12px; color: var(--muted); margin-top: 6px; }
.demo-file { display: flex; align-items: center; gap: 10px; }
.demo-file-name { font: 600 13px var(--mono); color: var(--ink); }
.demo-file-rows { color: var(--muted); font-size: 12px; flex: 1; }
.demo-upload-error { font-size: 12px; color: var(--bad); }
.demo-stage { font: 600 13px var(--ui); color: var(--blue); }
.demo-readers { font: 12px var(--mono); color: var(--graphite); }
.demo-active { font: 11px var(--mono); color: var(--muted); white-space: pre-line; max-height: 160px; overflow-y: auto; }
.demo-active:empty, .demo-readers:empty { display: none; }
.demo-notes { font: 11px var(--mono); color: var(--warn); white-space: pre-line; display: flex; flex-direction: column; gap: 4px; }
.demo-notes:empty { display: none; }
.demo-report { font-size: 12px; color: var(--graphite); }
.demo-json { font: 11px/1.5 var(--mono); background: var(--panel); border: 1px solid var(--line); padding: 12px; max-height: 46vh; overflow: auto; white-space: pre; }
.demo-actions { display: flex; gap: 8px; }
.demo-error-title { font-weight: 700; color: var(--bad); }
.demo-error-text { font: 11px/1.5 var(--mono); color: var(--bad); white-space: pre-wrap; max-height: 30vh; overflow-y: auto; }