/* Оболочка веб-программы: боковое меню, вкладки окна, правая полоса.
   Всё, что внутри разделов, красит panel.css — он общий с расширением.
   Здесь только то, чего в узкой панели нет и быть не может.

   Размеры взяты из артборда Web (Макет/экраны5.py): сайдбар 236,
   верхняя полоса 54, правая полоса 336. Кегли, радиусы и отступы —
   из общей шкалы, её стережёт Тесты/ТЕСТ_ДИЗАЙН_СИСТЕМА.py. */

body.веб {
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
}

/* Шапка и нижние вкладки — принадлежность узкой панели. В окне их роль
   играют боковое меню и полоса вкладок, но разметка остаётся в DOM:
   на неё завязано переключение разделов, общее с расширением. */
body.веб .topbar,
body.веб .tabs { display: none !important; }

.окно {
  display: flex;
  height: 100vh;
  min-height: 0;
}

/* ── Боковое меню ─────────────────────────────────────────────────────── */
.боковое {
  /* 268 px владелец 03.09.2026 назвал «широко, много пустоты», и замер это
     подтвердил: у пункта меню значок и подпись кончались на 104-й точке из
     239 внутренних — 135 px пустого хвоста у КАЖДОЙ кнопки. 236 оставляет
     самому длинному имени разговора те же ~140 px до многоточия, а полосе
     возвращает вид колонки, а не половины экрана. */
  width: 236px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Поля сверху и снизу 12, а не 16: владелец 04.09.2026 просил «меню чуть
     компактнее по высоте, чтобы больше видеть открытые чаты». 12 — ступень
     шкалы отступов, боковые поля остаются 14 (край меню = край знака). */
  padding: 12px 14px;
  background: var(--card);
  border-right: 1px solid var(--line);
  overflow: hidden;
}

.боковое-знак {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  /* Знак — кнопка на главную: сбрасываем кнопочный фон, оставляем поведение. */
  width: 100%;
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-xs);
  /* Отбивка под знаком — на ступень больше расстояния между кнопками:
     иначе первая кнопка липнет к логотипу. Внешняя, а не внутренняя: с ней
     кнопка-логотип имела высоту 52 и выпадала из шкалы высот. */
  padding: 0 4px;
  /* Отбивку под собой держит .боковое-шапка: знак теперь стоит в ряду со
     значками поиска и складки (макет владельца 03.09.2026). */
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

/* Шапка меню: знак слева, поиск и складка справа. Владелец нарисовал её сам —
   «сверху рядом с логотипом справа значок поиска и значок сворачивания». */
.боковое-шапка {
  display: flex;
  align-items: center;
  gap: 4px;
  /* Отбивка под знаком — на ступень больше расстояния между кнопками:
     иначе первый пункт меню липнет к логотипу. Раньше к ней добавлялся ещё
     и свой margin у меню: под знаком выходило 26 px пустоты. */
  margin-bottom: 12px;
}

.боковое-шапка-кнопки {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.боковое-значок {
  width: var(--h-btn);
  height: var(--h-btn);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.боковое-значок:hover { background: var(--control-hover); color: var(--text); }
.боковое-значок svg { width: 19px; height: 19px; }

/* В развёрнутой полосе шапка живёт на ступень ниже — 32 (--h-btn-sm).
   На 38 ряд «знак + имя + метка + поиск + складка» не помещался в 207 px
   внутренней ширины, и метка «веб» наезжала на лупу (замер по рендеру
   03.09.2026). В сжатой полосе всё возвращается к 38: там знак и значки
   стоят столбцом, и разнокалиберность видна как раз в столбце. */
body.веб:not(.меню-узко) .боковое-шапка .brand-mark,
body.веб:not(.меню-узко) .боковое-значок {
  width: var(--h-btn-sm);
  height: var(--h-btn-sm);
  min-height: var(--h-btn-sm);
}

body.веб:not(.меню-узко) .боковое-значок svg { width: 18px; height: 18px; }

/* Имя программы жмётся первым: обрезать метку «веб» или значки нельзя —
   метка объясняет, где человек находится, а значки нажимают. */
.боковое-имя {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* По горизонтали метка ужата (ряд шапки тесный), по вертикали — нет:
   на 1px высота падала до 22 и выпадала из шкалы (24 — ближняя ступень). */
.боковое-знак .chip { padding: 2px 5px; flex: 0 0 auto; }

/* Метка «веб» — не состояние «всё хорошо». Общий .chip в panel.css зелёный
   (--good-soft), и рядом со знаком он читался как значок исправности. */
.боковое-знак .chip {
  background: var(--control);
  border-color: var(--line);
  color: var(--muted);
}

/* Строка поиска: открывается значком, закрывается им же и клавишей Esc. */
.боковое-поиск { margin-bottom: 6px; }
.боковое-поиск.hidden { display: none; }

.боковое-поиск-поле {
  width: 100%;
  height: var(--h-btn);
  padding: 0 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xs);
  background: var(--control);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-13);
}

.боковое-поиск-поле::placeholder { color: var(--soft); }

.боковое-знак .brand-mark {
  /* 27 px рядом с 38-пиксельными кнопками читались как «логотип меньше всех»
     (замечание владельца 31.08.2026). Знак — такой же по площади элемент
     полосы, как остальные значки, поэтому берёт ту же ступень шкалы. */
  width: var(--h-btn);
  height: var(--h-btn);
  color: var(--accent);
  display: inline-flex;
}

.боковое-знак .brand-mark svg { width: 100%; height: 100%; }

.боковое-имя {
  /* Кегль на ступень ниже, чем в панели: в ряду со знаком, меткой «веб» и
     двумя значками имя на 15 не помещалось в 207 px и обрезалось
     многоточием — «Vklad…». Имя программы пишется одним начертанием, от
     места к месту вправе меняться только кегль. */
  font-size: var(--fs-14);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
}

/* «+ Чат» и «+ Папка» стоят в строке своей подписи, а не отдельной кнопкой
   во всю ширину: владелец 04.09.2026 — «пусть тоже будет в виде кнопки + Чат,
   чтобы не занимала место». Кнопка во всю полосу съедала целую строку списка
   (32 px + отбивка), а разговоров на окне 700 px видно и так немного. */
.боковое .боковое-добавить {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: var(--h-btn-sm);
  min-height: var(--h-btn-sm);
  padding: 0 8px;
  border: 1px dashed var(--accent-3);
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: var(--fs-12);
  font-weight: 600;
  cursor: pointer;
}

.боковое .боковое-добавить:hover {
  background: var(--accent-soft);
  border-style: solid;
}

.боковое-добавить-плюс { font-size: var(--fs-13); line-height: 1; }

/* Полоса компактная: владелец 03.09.2026 — «очень много пустых пробелов и
   больших по высоте кнопок, чатов видно всего три». Замер на окне 700 px:
   до списка разговоров уходило 480 px из 700, и на чаты оставалось 135.
   Поэтому весь ряд полосы живёт на ступени --h-btn-sm (32), а не 38, а
   собственные отступы блоков убраны — расстояние задаёт gap полосы. */
.боковое-меню {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 0;
}

.боковое-пункт {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: var(--h-btn-sm);
  /* Без своего min-height высота не действует: в panel.css у кнопок стоит
     min-height: var(--h-btn) (38), и он сильнее. */
  min-height: var(--h-btn-sm);
  padding: 0 11px;
  border: 0;
  border-radius:var(--radius-xs);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-13);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.боковое-пункт:hover { background: var(--control-hover); }

.боковое-пункт[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.боковое-пункт svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--muted);
}

.боковое-пункт[aria-current="page"] svg { color: var(--accent); }

.боковое-подпись {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Нижнего отступа нет: его даёт gap полосы. Со своим выходило 12 + 4. */
  margin: 4px 4px 0;
}

.боковое-подпись .черта {
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}

/* Подпись блока — «надзаголовок»: мелкий капс с разрядкой, один и тот же у
   всех блоков полосы. Это из макета владельца 03.09.2026; в панели
   расширения капса нет намеренно — там он был разнобоем из одиннадцати
   разных начертаний, а здесь это один приём на два одинаковых блока. */
.боковое-подпись .label {
  margin: 0;
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--soft);
}

.боковое-чаты {
  /* Отбивка от подписи: с общим шагом полосы (4) заголовок и первая строка
     сливались в один столбец — владелец 03.09.2026 «слишком слепаются».
     Внутри списка шаг остаётся 4, снаружи — 6. */
  margin-top: 6px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.боковое-чат {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: var(--h-btn-sm);
  min-height: var(--h-btn-sm);
  padding: 0 11px;
  border: 0;
  border-radius:var(--radius-xs);
  background: transparent;
  font: inherit;
  font-size: var(--fs-13);
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}

.боковое-чат:hover { background: var(--control-hover); }

/* Значок разговора: владелец попросил «этот значок типа общения» в строках
   чатов. Он же отличает строку разговора от строки раздела. */
.боковое-чат .значок {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  display: inline-flex;
  color: var(--soft);
}

.боковое-чат .значок svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Имя разговора — основной текст, а не служебный: в макете владельца оно
   того же тона, что пункты разделов, и только дата рядом бледная. Серым было
   всё сразу, и список читался как один сплошной комментарий. */
.боковое-чат .имя {
  color: var(--text);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.боковое-чат .когда {
  flex: 0 0 auto;
  font-size: var(--fs-12);
  color: var(--soft);
}

/* ── Дерево папок в боковой полосе ───────────────────────────────────────
   Папка — строка того же роста, что и разговор (32), но с своей ролью:
   стрелка слева, счётчик справа, «+» и крестик появляются при наведении.
   Вложенные разговоры сдвинуты, а не обведены рамкой: рамка внутри рамки
   на 260 px превращает полосу в лесенку коробок. */
.боковое-папка-ряд {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  /* «⋮» разговора висит абсолютом в 4 px от края ряда. Без такого же поля у
     папки её крестик вставал на 4 px правее — замер 10.09.2026 дал 221
     против 217, и две соседние колонки действий читались как две разные. */
  padding-right: 4px;
}

.боковое-папка {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--h-btn-sm);
  min-height: var(--h-btn-sm);
  padding: 0 6px;
  border: 0;
  background: none;
  border-radius: var(--radius-xs);
  color: var(--text);
  font-size: var(--fs-13);
  font-weight: 660;
  text-align: left;
}

.боковое-папка:hover { background: var(--control-hover); }
.боковое-папка .имя { flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.боковое-папка .когда { flex: 0 0 auto; color: var(--muted); font-size: var(--fs-12);
  font-variant-numeric: tabular-nums; }

.папка-стрелка { flex: 0 0 auto; width: 14px; height: 14px; display: inline-flex;
  transition: transform .14s ease; transform: rotate(90deg); }
.боковое-папка[aria-expanded="false"] .папка-стрелка { transform: rotate(0deg); }
.папка-стрелка svg { width: 14px; height: 14px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* «+» виден всегда: это единственный способ завести разговор прямо в папке,
   а спрятанная до наведения кнопка не существует для пальца и не находится
   глазами. Крестик держит место, но выходит только по наведению — удаление
   необратимо, и постоянный крестик у каждой папки зовёт нажать его случайно. */
.боковое-папка-плюс,
.боковое-папка-убрать {
  flex: 0 0 auto; width: var(--h-btn-sm); height: var(--h-btn-sm);
  min-height: var(--h-btn-sm); padding: 0; border: 0; background: none;
  border-radius: var(--radius-xs); color: var(--muted); font-size: var(--fs-15);
  line-height: 1;
}
.боковое-папка-убрать { visibility: hidden; font-size: var(--fs-12); }
.боковое-папка-ряд:hover .боковое-папка-убрать,
.боковое-папка-ряд:focus-within .боковое-папка-убрать { visibility: visible; }
.боковое-папка-плюс:hover { background: var(--control-hover); color: var(--accent); }
.боковое-папка-убрать:hover {
  background: color-mix(in srgb, var(--bad) 12%, transparent); color: var(--bad);
}

/* Сдвиг ровно на стрелку с зазором: вложенный разговор должен читаться как
   принадлежащий папке выше, а не как отдельный список. */
.боковое-вложено { margin-left: 14px; }

.боковое-вне-папок {
  margin: 8px 0 2px; padding: 0 6px;
  color: var(--muted); font-size: var(--fs-12); font-weight: 660;
  letter-spacing: .04em; text-transform: uppercase;
}

/* Точка «здесь идёт работа». Цвет акцентный, а не красный: работа — это не
   беда. Дыхание останавливается по prefers-reduced-motion. */
.боковое-работа {
  flex: 0 0 auto; width: 7px; height: 7px; margin: 0 2px;
  border-radius: var(--radius-circle); background: var(--accent);
}
@media (prefers-reduced-motion: no-preference) {
  .боковое-работа { animation: работа-дышит 1.4s ease-in-out infinite; }
}
@keyframes работа-дышит { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }

.боковое-пусто {
  padding: 7px 11px;
  font-size: var(--fs-13);
  color: var(--soft);
}

.боковое-низ {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Рамки у ряда больше нет: в макете 03.09.2026 подвал отделён от списка
     одной чертой, а профиль в нём — обычная строка, а не карточка внутри
     карточки. Ширину отдаёт flex подвала: справа в том же ряду шестерёнка. */
  padding: 0 6px;
  border: 0;
  border-radius: var(--radius-xs);
  flex: 1 1 auto;
  min-width: 0;
  /* Ряд-карточка живёт по шкале рядов разделов, а не растёт от содержимого:
     иначе высота уезжает на пол-пикселя и выпадает из шкалы эталона. */
  /* 38, а не 44 и не 54: внизу высота ни на что не влияет, кроме съеденного
     места под список разговоров. Две строки (имя и «ключ задан») в 38 px
     помещаются — проверено рендером, обрезки нет. */
  height: var(--h-btn);
  min-height: var(--h-btn);
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.боковое-низ:hover { background: var(--control-hover); }

.боковое-кто { min-width: 0; }

.боковое-имя-кого {
  display: block;
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--text);
}

.боковое-ключ {
  display: block;
  font-size: var(--fs-12);
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Правая часть окна ────────────────────────────────────────────────── */
.окно-право {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.окно-верх {
  height: var(--h-nav);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}

/* Кнопка возврата вместо полосы вкладок (ТЗ 13.09.2026, п. 2). Квадрат той
   же ступени, что соседние кнопки строки: подпись «Назад к <разделу>» внутри
   кнопки растягивала её до 40×32 рядом с кнопками 32×32 — владелец назвал это
   «значок назад кривой». Куда вернёт, говорит подсказка и aria-label. */
/* По id, а не по классу: правило `.окно-кнопка` ниже в файле задаёт
   `display:none` (кнопки верхней строки показываются медиазапросами), и
   правило одной с ним силы проиграло бы по порядку. */
#вебНазад.окно-назад {
  display: grid;
  place-items: center;
}

#вебЕщё { display: grid; }

/* Кнопки дополнительных окон — сайт и расширение. Место назвал владелец
   14.09.2026: «в правый верхний угол, там хочу видеть кнопки для открытия доп
   окон». Видны на любой ширине: окна, которые они открывают, есть везде. */
#вебКнопкаСайты, #вебКнопкаРасширение { display: grid; }

/* Нажатая кнопка видна: её окно сейчас открыто. Без этого человек не знает,
   что показано справа, и жмёт второй раз. */
#вебКнопкаСайты[aria-pressed="true"], #вебКнопкаРасширение[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.окно-назад:disabled { opacity: .45; cursor: default; }

/* Меню «ещё» — тот же вид, что у меню разговора слева: одно меню на окно,
   а не два разных. */
.окно-ещё-обёртка { position: relative; display: flex; }

.окно-ещё-меню { z-index: 60; }

/* Куда привели — видно. Подсветка живёт секунду и не мигает: человек должен
   успеть заметить, куда его перенесло, и не отвлекаться дальше. */
.право-файлы.подсвечено {
  box-shadow: 0 0 0 3px var(--accent-soft);
  border-radius: var(--radius-xs);
}

.окно-верх-хвост {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Честная строка о границах веб-версии: она не читает вкладки браузера,
   и владелец должен видеть это до того, как чего-то от неё ждать. */
.окно-статус {
  font-size: var(--fs-12);
  color: var(--muted);
}

.окно-тело {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

/* Порядок задаём явно: у main в panel.css свой order для узкой панели,
   и без этого правая полоса вставала левее центра. */
.окно-центр {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
  padding: 20px 24px;
}

/* Строка текста шириной в окно не читается: держим колонку, как в эталоне.
   Ширину задаём явно: у flex-элемента с auto-полями она иначе считается по
   содержимому, и раздел сжимался до ширины самой широкой карточки. */
.окно-центр > .panel.active { width: 100%; max-width: 720px; margin: 0 auto; }

/* Лист «Что уйдёт наружу» и одобрение плана. В panel.css они
   `position:fixed;left:0;right:0;bottom:0` — в узкой панели расширения это
   правильно, а в окне лист растягивался на все 1440, и кнопки «Понятно,
   отправить» стояли в дальнем левом углу, оторванные от чата (владелец
   07.09.2026: «почему выбор аж на всю страницу, а не под размер открытого
   чата»). Остаётся листом снизу (fixed + bottom из panel.css), но по ширине —
   колонка 720, отцентрованная в области справа от бокового меню (236 → правый
   край). Правую полосу данных, когда она есть, лист перекрывает как модальное
   окно чата. Узкое меню и накладку разбираем ниже медиазапросами. */
body.веб .disclosure-sheet {
  left: 236px;
  right: 336px;
  margin-inline: auto;
  max-width: 720px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
/* Сжатое меню (класс, а не только ширина) — лист начинается за узкой полосой. */
body.веб.меню-узко .disclosure-sheet { left: 68px; }
/* До 1180 правая полоса данных — накладка, а не колонка в потоке: лист доходит
   до правого края, как и сама лента чата. */
@media (max-width: 1180px) { body.веб .disclosure-sheet { right: 0; } }
/* Телефон: меню — накладка, контент во всю ширину, значит и лист тоже. */
@media (max-width: 720px) { body.веб .disclosure-sheet { left: 0; } }

/* Пустая полоса — это 336 px белизны без смысла: пока в ней нечего
   показать, её нет. Наполнится вместе со столом сбора данных. */
.окно-право-полоса:empty { display: none; }

.окно-право-полоса {
  order: 2;
  width: 336px;
  flex: 0 0 auto;
  padding: 16px;
  /* Не белый лист, а ФОН под карточками. Пока полоса была одного цвета с
     блоками, граница между темами держалась на черте в .18 — на снимке
     14.09.2026 её не видно, и владелец прочитал полосу как один блок. */
  background: var(--bg);
  border-left: 1px solid var(--line);
  overflow-y: auto;
}

body.веб > footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
}

/* ── Чего веб-версия не умеет, того и не показываем ───────────────────────
   Заголовок текущей страницы, кнопка «перечитать» и предложения по ней
   опираются на активную вкладку браузера. В окне её нет: показать их
   значило бы позвать владельца туда, где всегда пусто. Объяснение он
   получает строкой выше — её пишет panel.js, когда видит веб-среду. */
body.веб #pageTitle,
body.веб #pageMeta,
body.веб #refreshPage,
body.веб #pageOffer,
body.веб #goTabs { display: none; }

/* ─ Правая полоса окна: что под рукой ────────────────────────────────────
   Артборд Web держит здесь три вещи: с чем идёт работа, что уже собрано и
   где всё это лежит. Размеры — из той же шкалы, что и панель: радиусы 8/14,
   отступы 6/8/12/16, высота кнопки 34. */
.окно-право-полоса {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.право-блок {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Каждый блок — своя карточка: у темы есть края, а не только пустота между
   абзацами. Черта сверху этого не давала — блоки оставались одним полотном.
   Угол 14 и поля 12/14 — те же, что у карточек в разговоре: полоса не должна
   выглядеть программой из другого проекта. */
.окно-право-полоса .право-блок,
.окно-сайт-полоса .право-блок {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
}

/* Карточка внутри карточки — второй белый прямоугольник с тенью вокруг того
   же содержимого. Внутри блока она остаётся плашкой: мягкий фон и граница,
   без тени и без внешнего отступа. */
.окно-право-полоса .право-блок > .card,
.окно-сайт-полоса .право-блок > .card {
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: none;
  padding: 10px 12px;
  margin-bottom: 0;
}

/* Обёртка раздела «Данные»: показывается и прячется целиком, а внутри —
   те же самые блоки со своими метками и своими границами. */
.право-раздел {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.право-раздел.hidden { display: none; }

.право-карточка { margin-bottom: 0; }

/* Подпись под кнопкой — это подпись, и по шкале проекта её кегль 12, а не 13.
   На 13 четыре таких абзаца подряд весили столько же, сколько сам разговор:
   полоса читалась стеной серого (снимок 14.09.2026). Внутри плашек кегль не
   трогаем — там текст и есть содержимое блока. */
.окно-право-полоса .право-блок > .muted.small,
.окно-сайт-полоса .право-блок > .muted.small { font-size: 12px; }

.право-кнопка {
  /* В артборде Web эта кнопка ровно 32 (замерено на самом артборде). Базовый
     `button{min-height:38px}` панели пришлось перебить: одна height его не
     побеждает — min-height всегда сильнее. */
  min-height: var(--h-btn-sm);
  height: var(--h-btn-sm);
  width: 100%;
  border-radius:var(--radius-xs);
}

.право-файлы {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.право-файл {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius:var(--radius-xs);
  background: var(--bg-2);
  text-align: left;
}

.право-файл .имя {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.право-файл .когда {
  flex: 0 0 auto;
  font-size: var(--fs-12);
  color: var(--muted);
}

/* Пустое место объясняет себя плашкой, а не строкой в воздухе: голый текст
   рядом с карточками читается как обрыв вёрстки. */
.право-пусто {
  font-size: var(--fs-12);
  color: var(--muted);
  padding: 10px 12px;
  border: 1px dashed var(--line-strong);
  border-radius:var(--radius-xs);
  background: var(--bg-2);
}

.право-хвост { flex: 1 1 auto; min-height: 8px; }

.право-замок {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius:var(--radius);
  background: var(--accent-soft);
  border: 1px solid var(--line);
}

.право-замок-знак {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--accent);
}

.право-замок-знак svg { width: 18px; height: 18px; display: block; }

/* ─ Карточка владельца ────────────────────────────────────────────────── */
.боковое-лицо {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius:var(--radius-pill);
  background: var(--bg-2);
  color: var(--muted);
}

.боковое-лицо svg { width: 16px; height: 16px; }

.боковое-кто { flex: 1 1 auto; }

/* Оставлено ради старых сборок: в разметке шеврона больше нет — в подвале
   стоит шестерёнка настроек, как в макете владельца. */
.боковое-шеврон-удалён {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: var(--muted);
}

.боковое-шеврон svg { width: 15px; height: 15px; display: block; }

/* ─ Ход работы и качество (артборд WebParser) ────────────────────────── */
.право-шкала {
  height: 6px;
  border-radius:var(--radius-pill);
  background: var(--bg-2);
  border: 1px solid var(--line);
  overflow: hidden;
}

.право-шкала > i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
}

.право-мера {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  font-size: var(--fs-13);
  color: var(--text);
}

.право-мера + .право-мера { border-top: 1px solid var(--line); }

.право-мера b { font-variant-numeric: tabular-nums; }

.право-мера b.тревога { color: var(--warn); }

/* ─ Три ширины: 1440, планшет 834, телефон 390 ───────────────────────────
   Артборды WebTablet и WebPhone: на планшете боковое меню сжимается до
   значков, а правая полоса уходит за кнопку; на телефоне меню выезжает
   поверх. Ничего не прячется молча — у каждого спрятанного блока есть
   видимая кнопка, которая говорит, что откроет. */
.окно-кнопка {
  flex: 0 0 auto;
  display: none;
  place-items: center;
  width: var(--h-btn-sm);
  height: var(--h-btn-sm);
  min-height: var(--h-btn-sm);
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius:var(--radius-xs);
  background: var(--card);
  color: var(--muted);
}

.окно-кнопка svg { width: 18px; height: 18px; }

/* Помощь видна на любой ширине: остальные кнопки окна появляются только
   там, где что-то спрятано, а к помощи человек идёт в любом размере окна.
   Кнопка правой полосы — тоже: до 10.09.2026 она выходила лишь на ≤1180, и
   на широком экране полосу нельзя было убрать ничем, хотя ровно там она и
   отнимает место у разговора (ТЗ владельца, пункт 13). */
#вебПомощь,
.окно-полоса-кнопка { display: grid; }

/* Свёрнутая полоса на широком экране: её нет, а колонка разговора
   вырастает с 720 до 960. Просто убрать полосу мало — центр остался бы
   той же ширины и только переехал бы вправо, то есть места разговору не
   прибавилось бы вовсе. 960 — та же колонка, что и в разделе «Данные». */
body.веб.полоса-скрыта .окно-право-полоса { display: none; }
body.веб.полоса-скрыта .окно-центр > .panel.active { max-width: 960px; }

.окно-затемнение {
  position: fixed;
  inset: 0;
  background: rgba(16, 19, 25, .38);
  z-index: 40;
}

.окно-затемнение.hidden { display: none; }

/* Планшет и всё, что уже: правая полоса открывается кнопкой. */
@media (max-width: 1180px) {
  .окно-статус { display: none; }
  .окно-право-полоса {
    position: fixed;
    /* Не от нуля, а под полосой окна. Замер 10.09.2026: выехавшая полоса
       накрывала собой ту самую кнопку, которой её открыли, — настоящее
       нажатие в неё не проходило («С чем я работаю сейчас … intercepts
       pointer events»), и закрыть блок кнопкой было нельзя. Прежние замеры
       этого не видели: они жали кнопку из кода, а код перехвата не замечает.
       Спрятанный блок обязан иметь ВИДИМУЮ и работающую кнопку. */
    top: var(--h-nav, 54px);
    right: 0;
    bottom: 0;
    z-index: 50;
    box-shadow: -18px 0 40px rgba(16, 19, 25, .14);
    transform: translateX(100%);
    /* Спрятано глазами — значит спрятано и для клавиатуры. Без этого Tab
       уходил в кнопки за краем экрана: замер 01.09.2026 нашёл 2 таких на
       1180/980 и 12 на 720. Фокус исчезал, на экране ничего не двигалось,
       а читалка объявляла закрытую полосу частью страницы.
       `visibility` убирает узел и из обхода, и из дерева доступности;
       смена откладывается на время выезда, чтобы не резать анимацию. */
    visibility: hidden;
    transition: transform .18s ease, visibility 0s linear .18s;
  }
  body.веб.полоса-открыта .окно-право-полоса {
    transform: none;
    visibility: visible;
    transition: transform .18s ease, visibility 0s;
  }
  /* Кнопка остаётся НАД затемнением: это переключатель, и закрыть им то, что
     он открыл, человек вправе. Ниже полосы (z 50) и выше затемнения (40) —
     полоса начинается под шапкой и её не накрывает. Замер 10.09.2026:
     настоящее нажатие уходило в `#вебЗатемнение`. */
  body.веб.полоса-открыта .окно-полоса-кнопка { position: relative; z-index: 45; }
  /* На узком экране полоса и так убрана за край и выезжает по той же
     кнопке — свёрнутость широкого экрана здесь только помешала бы выезду. */
  body.веб.полоса-скрыта .окно-право-полоса { display: flex; }
  body.веб.полоса-скрыта .окно-центр > .panel.active { max-width: 720px; }
  /* Сайту на узком экране нужна вся ширина: в оставшихся 300 px не читается
     ни одна страница. Полоса накрывает разговор и закрывается своим
     крестиком и клавишей Escape — тем же способом, что и выехавшее меню. */
  /* Кнопка закрытия остаётся над затемнением: закрыть то, что открыл, человек
     вправе нажатием и по самой полосе, и мимо неё. */
  .окно-сайт-полоса {
    position: fixed;
    top: var(--h-nav, 54px);
    right: 0;
    bottom: 0;
    width: min(92vw, 760px);
    z-index: 50;
    box-shadow: -18px 0 40px rgba(16, 19, 25, .14);
  }
}

/* Сжатое меню — класс, а не только медиазапрос: скрипт ставит его по ширине
   окна ИЛИ по нажатию складки. Пока это был чистый медиазапрос, развернуть
   меню на узком окне было нечем — владелец увидел это как «нет кнопки
   раскрыть». Ширина 68 = 38 (кнопка) + два поля по 15.

   Один размер у всего: 38 из шкалы высот — среднее между прежними 32 у лупы
   и 44 у пунктов. Разнокалиберные квадраты и были вторым замечанием. */
body.веб.меню-узко .боковое { width: 68px; padding: 14px 15px; align-items: center; }
body.веб.меню-узко .боковое-знак .боковое-имя,
body.веб.меню-узко .боковое-знак .chip,
body.веб.меню-узко .боковое-подпись,
body.веб.меню-узко .боковое-чаты,
body.веб.меню-узко .боковое-пункт > span,
body.веб.меню-узко .боковое-кто,
body.веб.меню-узко .боковое-поиск,
body.веб.меню-узко .боковое-добавить-текст { display: none; }
/* В сжатой полосе подписи не показываются, но завести разговор человек
   обязан мочь: строка подписи «Чаты» остаётся ради своей кнопки, а сама
   кнопка становится таким же квадратом ступени 38, как значки разделов.
   margin — 0: иначе после неё шаг вырастает и полоса снова читается как
   «отступы между значками разные». */
/* В столбик: с 10.09.2026 в этой строке две кнопки — «+ Папка» и «+ Чат», а
   на 68 px рядом помещается одна. Два квадрата ступени 32 с зазором дают
   ~70 px и вылезли бы за полосу. */
body.веб.меню-узко #вебЧатыПодпись { display: flex; flex-direction: column;
  align-items: center; gap: 6px; margin: 0; }
body.веб.меню-узко #вебЧатыПодпись .label,
body.веб.меню-узко #вебЧатыПодпись .черта { display: none; }
body.веб.меню-узко .боковое-добавить { width: var(--h-btn-sm); height: var(--h-btn-sm); min-height: var(--h-btn-sm);
  padding: 0; justify-content: center; margin-bottom: 0; }
/* Шапка в столбик: знак, поиск, складка — три квадрата одной ступени.
   Отбивка внешняя и в узком меню: с внутренней кнопка-знак вырастала до
   52 px и выпадала из шкалы высот (замер на 834). 8 + 6 (gap шапки) = 14 —
   ровно та отбивка под знаком, что была раньше. */
body.веб.меню-узко .боковое-шапка { flex-direction: column; gap: 6px; margin-bottom: 0; }
body.веб.меню-узко .боковое-шапка-кнопки { flex-direction: column; gap: 6px; }
body.веб.меню-узко .боковое-знак { width: var(--h-btn-sm); height: var(--h-btn-sm); flex: 0 0 auto;
  justify-content: center; padding: 0; margin-bottom: 8px; }
/* Сам знак внутри кнопки тоже 32: правило `.боковое-знак .brand-mark` ставит
   38 на обе ширины, и в сжатой полосе логотип оставался единственным крупным
   квадратом столбца. В развёрнутой полосе он по-прежнему 38 — там рядом стоят
   кнопки той же ступени, и мельче он читался бы как «логотип меньше всех»
   (замечание владельца 31.08.2026). */
body.веб.меню-узко .боковое-знак .brand-mark { width: var(--h-btn-sm); height: var(--h-btn-sm); }
/* Разные шаги (4 у полосы, 6 у верха, 8 у меню) читались как «отступы
   между значками разные». В сжатой полосе шаг один — 6 px. */
body.веб.меню-узко .боковое { gap: 6px; }
body.веб.меню-узко .боковое-меню { gap: 6px; margin-top: 0; }
/* Свёрнутый рельс — квадрат 38×38, как ВСЕ остальные квадраты этой же полосы:
   знак, поиск, складка, «новый чат», ключ и подвал стоят на `--h-btn`.
   Ступень 32 сюда завели, чтобы попасть в высоту строки РАЗВЁРНУТОГО меню, —
   но развёрнутого меню в этот момент на экране нет, а есть столбец значков, в
   котором два размера соседствуют и читаются ровно как «разнобой», от которого
   уходили. Замер 09.09.2026: [32, 38] в одном столбце. Сторожат
   ТЕСТ_БОКОВАЯ_ПОЛОСА («Все значки сжатой полосы одного размера») и
   ТЕСТ_МЕНЮ_И_ШРИФТЫ.
   Ступень выбрана 32, а не 38: строка меню обязана быть одной высоты на всех
   ширинах (ТЕСТ_ПОЛЕ_ВВОДА_И_МЕНЮ, замечание владельца «кнопки меню компактнее
   по высоте»), а на 1180 и 390 она 32. Поэтому вниз сведена вся полоса —
   и пункты, и кнопки-значки, — а не подняты пункты. */
body.веб.меню-узко .боковое-пункт,
body.веб.меню-узко #вебПодвалМеню .боковое-пункт { width: var(--h-btn-sm); height: var(--h-btn-sm);
  min-height: var(--h-btn-sm); justify-content: center; padding: 0; }
body.веб.меню-узко .боковое-низ { width: var(--h-btn-sm); height: var(--h-btn-sm);
  min-height: var(--h-btn-sm); flex: 0 0 auto; justify-content: center; padding: 0; }
/* Знак, поиск, складка и «новый чат» — те же 32 в сжатой полосе. Без этой
   строки столбец шёл двумя размерами: 38 у кнопок, 32 у пунктов. */
body.веб.меню-узко .боковое-шапка-кнопки > button,
body.веб.меню-узко .боковое-шапка > button { width: var(--h-btn-sm); height: var(--h-btn-sm);
  min-height: var(--h-btn-sm); padding: 0; justify-content: center; }

/* Перенос разговора мышью и линия вставки — в `panel.css`: его грузят обе
   цели, жест общий (`чаты.js → включитьПеренос`), и вторая копия правил
   разошлась бы с первой на следующей правке. */
.боковое-папка-ряд.принимает,
.боковое-вне-папок.принимает {
  outline: 2px dashed var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Документ открывается ОКНОМ СПРАВА, а не поверх разговора (ТЗ 13.09.2026,
   п. 3: «хочется, чтобы я мог открыть разные документы через доп. окно
   справа, как сделано у тебя и других подобных ИИ-программ»). Разговор при
   этом виден и остаётся рабочим — в этом весь смысл, иначе это та же модалка.
   В боковой панели расширения окно остаётся во весь экран: там ширины на две
   колонки нет. */
body.веб .док-оверлей {
  inset: 0 0 0 auto;
  width: min(620px, 46vw);
  padding: 0;
  background: transparent;
  align-items: stretch;
  justify-content: stretch;
  box-shadow: -18px 0 44px color-mix(in srgb, var(--text) 10%, transparent);
}

body.веб .док-окно {
  width: 100%;
  height: 100%;
  max-height: none;
  border-radius: 0;
  border-left: 1px solid var(--line);
}

/* Узкий экран: колонки рядом не помещаются — документ занимает окно целиком. */
@media (max-width: 980px) {
  body.веб .док-оверлей { width: 100%; }
}

/* Пока документ открыт, полоса «что под рукой» уступает ему место: два
   столбца справа не помещаются, и файл открывался бы поверх своего же списка. */
body.веб.док-открыт .окно-право-полоса { display: none; }

/* Кнопка меню видна на любой ширине (ТЗ 13.09.2026, п. 3), а не только на
   телефоне: полоса теперь убирается и на широком экране. По id — правило
   `.окно-кнопка` ниже гасит кнопки верхней строки. */
#вебМенюКнопка { display: grid; }
body.веб.меню-скрыто .боковое { display: none; }

/* Телефон: меню выезжает поверх по кнопке. */
@media (max-width: 720px) {
  .окно-меню-кнопка { display: grid; }
  .боковое {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 50;
    width: 236px;
    padding: 16px 14px;
    align-items: stretch;
    box-shadow: 18px 0 40px rgba(16, 19, 25, .14);
    transform: translateX(-100%);
    /* То же, что у правой полосы: за краем экрана лежало двенадцать
       фокусируемых элементов — знак, «новый чат», пункты меню и действия
       разговоров. Tab уводил в них вслепую. */
    visibility: hidden;
    transition: transform .18s ease, visibility 0s linear .18s;
  }
  body.веб.меню-открыто .боковое {
    transform: none;
    visibility: visible;
    transition: transform .18s ease, visibility 0s;
  }
  /* Внутри выехавшего меню всё снова подписано словами. */
  body.веб .боковое-знак .боковое-имя,
  body.веб .боковое-знак .chip,
  body.веб .боковое-пункт > span,
  body.веб .боковое-кто,
  body.веб .боковое-добавить-текст { display: inline; }
  /* Возврат к СВОЕМУ отображению, а не к inline. Строка подписи — это ряд
     «ПАПКИ — черта — + Папка»; `display: inline` рушил ряд, и кнопка падала
     под заголовок. Владелец 09.09.2026: «плохо съезжают кнопки +папка и +чат,
     можно сделать их более на уровне с заголовком». Список чатов по той же
     причине возвращается блоком, а не строчным элементом. */
  body.веб .боковое-подпись { display: flex; }
  body.веб .боковое-чаты { display: block; }
  /* Ящик уже широкого меню (236 px против 300): кнопка обязана сжиматься по
     месту, а не переноситься. */
  body.веб .боковое-подпись .label { flex: 0 0 auto; }
  body.веб .боковое-подпись .черта { flex: 1 1 auto; min-width: 8px; }
  body.веб .боковое-добавить { flex: 0 1 auto; white-space: nowrap; }
  /* Поиск открыт только когда его открыли: :not(.hidden) обязателен, иначе
     это правило пересиливает класс `hidden` и поле висит всегда. */
  body.веб .боковое-поиск:not(.hidden) { display: block; }
  body.веб #вебЧатыПодпись .label,
  body.веб #вебЧатыПодпись .черта { display: block; }
  body.веб .боковое-добавить { width: auto; height: var(--h-btn-sm); min-height: var(--h-btn-sm);
    padding: 0 8px; justify-content: center; margin-bottom: 0; }
  /* Ступень та же, что на широком экране: 32. На телефоне строки были 38, то
     есть меню оказывалось КРУПНЕЕ десктопного — ровно наоборот тому, зачем
     полосу переводили на --h-btn-sm (замер 09.09.2026: 32 на 1180 против 38
     на 390). 32 остаётся в габарите нажатия по WCAG 2.2 (минимум 24). */
  body.веб .боковое-пункт { width: auto; height: var(--h-btn-sm);
    min-height: var(--h-btn-sm); justify-content: flex-start; padding: 0 11px; }
  body.веб #вебПодвалМеню .боковое-пункт { width: var(--h-btn-sm); height: var(--h-btn-sm);
    min-height: var(--h-btn-sm); justify-content: center; padding: 0; }
  body.веб #вебПодвалМеню .боковое-пункт > span { display: none; }
  body.веб .боковое-низ { width: auto; flex: 1 1 auto; height: var(--h-nav); justify-content: flex-start; padding: 0 6px; }
  body.веб .боковое-знак { width: auto; height: auto; flex: 1 1 auto; justify-content: flex-start; margin-bottom: 0; }
  body.веб .боковое-шапка { flex-direction: row; gap: 4px; margin-bottom: 14px; }
  body.веб .боковое-шапка-кнопки { flex-direction: row; gap: 4px; }
  body.веб .боковое-подвал { flex-direction: row-reverse; align-items: center; }
  .окно-право-полоса { width: min(336px, 92vw); }
}


/* Шаги установки: нумерованный список внутри карточки правого поля. */
.установка-шаги{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.установка-шаги code{font-size:13px;background:var(--card-solid);border:1px solid var(--line);border-radius:var(--radius-xs);padding:1px 4px}


/* Подвал прижат вниз: список разговоров растёт, а настройки и учётка стоят
   на месте — их ищут глазами в одном и том же углу. Одним рядом: слева
   профиль, справа шестерёнка (макет владельца 03.09.2026). Складка отсюда
   уехала в шапку — там её нарисовал владелец. */
.боковое-подвал {
  /* auto, а не отступ: в сжатом меню список разговоров скрыт и растягивать
     нечему — подвал повисал посреди полосы вместо нижнего угла. */
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px solid var(--line);
  display: flex;
  /* В разметке сначала настройки, потом профиль — так порядок в СЖАТОЙ полосе
     совпадает с порядком в коде (столбец сверху вниз), и замер шага между
     значками не получает отрицательных расстояний. В широком меню ряд
     разворачивается: профиль слева, шестерёнка справа — как в макете. */
  flex-direction: row-reverse;
  align-items: center;
  gap: 6px;
}

.боковое-меню-низ { margin-top: 0; flex: 0 0 auto; }

/* Настройки в подвале — значок, а не строка с подписью: подпись живёт в
   title и aria-label, поэтому смысл не теряется ни для мыши, ни для читалки. */
#вебПодвалМеню .боковое-пункт {
  width: var(--h-btn-sm);
  height: var(--h-btn-sm);
  min-height: var(--h-btn-sm);
  padding: 0;
  justify-content: center;
}

#вебПодвалМеню .боковое-пункт > span { display: none; }

/* В сжатом меню ряд разворачивается в столбец: два значка рядом не влезают.
   column-reverse, а не column: шестерёнка обязана остаться НАД профилем —
   так же, как в широком меню она стоит от него справа. */
body.веб.меню-узко .боковое-подвал { flex-direction: column; align-items: center; }

/* ── Одна геометрия для всей полосы ───────────────────────────────────────
   Замер 31.08.2026: в одном столбце стояли три скругления — 8 у кнопки
   «новый чат», 11 у пунктов, 14 у учётки. Владелец: «значок + выделяется от
   общего стиля, и то же самое с кнопкой профиль». Радиус здесь один и берётся
   у пунктов меню: они задают ритм полосы. */
.боковое .боковое-добавить,
.боковое-низ,
.боковое-значок { border-radius: var(--radius-xs); }

/* ── Действия с разговором в боковом списке ───────────────────────────── */
.боковое-чат-ряд {
  position: relative;
  display: flex;
  align-items: center;
}

/* Дата стоит у самого края, как в макете, а при наведении на её место
   встаёт «⋮». Прятать дату надо visibility, а не display: с display имя
   разговора расширяется и дёргается под курсором. */
.боковое-чат-ряд:hover .боковое-чат .когда,
.боковое-чат-ряд:has(.боковое-чат-ещё[aria-expanded="true"]) .боковое-чат .когда {
  visibility: hidden;
}

/* Предупреждение о пределе хранения: это примечание, а не строка списка,
   поэтому кегль меньше и цвет приглушённый — но оно есть, а не молчит. */
.боковое-предел {
  margin: 6px 4px 0;
  font-size: var(--fs-12);
  line-height: 1.35;
  color: var(--soft);
}

.боковое-чат-ещё {
  position: absolute;
  right: 4px;
  width: 24px;
  height: 24px;
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--accent);
  font-size: var(--fs-15);
  line-height: 1;
  cursor: pointer;
  opacity: 0;
}

.боковое-чат-ряд:hover .боковое-чат-ещё,
.боковое-чат-ещё:focus-visible,
.боковое-чат-ещё[aria-expanded="true"] { opacity: 1; }

.боковое-чат-ещё svg { width: 16px; height: 16px; fill: currentColor; }
.боковое-чат-ещё:hover { background: var(--accent-soft); color: var(--accent); }

.боковое-чат-меню {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 40;
  min-width: 208px;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-strong);
}

.боковое-чат-меню.скрыто { display: none; }

.боковое-чат-пункт {
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--h-btn-sm);
  min-height: var(--h-btn-sm);
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-13);
  text-align: left;
  cursor: pointer;
}

.боковое-чат-пункт:hover { background: var(--control-hover); }

/* Необратимое отличается цветом ещё до нажатия — как в разделе «История». */
.боковое-чат-пункт.опасное { color: var(--bad); }
.боковое-чат-пункт.опасное:hover { background: color-mix(in srgb, var(--bad) 10%, transparent); }

/* Ссылка-кнопка «Скачать архив». Классы `.ghost`/`.compact` писались под
   `button`, а рамку, угол и ступень задаёт правило `button{}` — на `<a>` оно
   не действует, и кнопка выходила подчёркнутым текстом в светлой коробке
   (владелец 04.09.2026: «кривая и не в нашем стиле»). Ссылкой она обязана
   остаться: атрибут `download` у кнопки не работает. */
a.ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--h-btn-sm);
  min-height: var(--h-btn-sm);
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  background: var(--card);
  color: var(--text);
  font-size: var(--fs-13);
  font-weight: 620;
  text-decoration: none;
}

a.ghost:hover {
  background: var(--control-hover);
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
}


/* ── Уведомление окна ──────────────────────────────────────────────────────
   В панели сообщение стоит отдельной строкой над меню и занимает своё место
   (`#toast{order:3;position:static}` в panel.css) — там панель узкая, и это
   уместно. В окне то же правило растягивало его на всю ширину экрана: полоса
   в 1572 px под программой, поверх бокового меню (замер 10.09.2026). Владелец:
   «не нравится, как вылазит строка уведомления внизу, хочется поудобнее и не
   такой раздражающей».

   Здесь сообщение — карточка по размеру текста, снизу по центру, над
   содержимым. `pointer-events:none` обязателен: сообщение о работе не должно
   перехватывать нажатия на саму работу — ровно из-за этого его когда-то и
   увели из `position:fixed` в панели. */
#toast {
  position: fixed;
  /* Середина КОЛОНКИ РАЗГОВОРА, а не всего окна: иначе с открытой полосой
     сайта карточка садилась ровно на её шапку. Значение ставит `веб.js`;
     запасное 50% работает, пока полос нет. */
  left: var(--тост-центр, 50%);
  /* Сверху, а не снизу. Снизу карточка легла ровно на ряд кнопок композера
     (замер 10.09.2026: и сообщение, и ряд на y=842) — то есть накрыла кнопку
     отправки. Ровно из-за этого сообщение когда-то и увели из `position:fixed`
     в панели. Верх окна свободен: там только полоса заголовка. */
  top: calc(var(--h-nav, 54px) + 12px);
  transform: translateX(-50%);
  width: max-content;
  max-width: min(520px, calc(100% - 48px));
  margin: 0;
  z-index: 60;
  pointer-events: none;
  box-shadow: 0 10px 34px rgba(24, 26, 28, .18);
}

/* Крестик отказа — исключение из `pointer-events:none`: сама карточка нажатий
   не перехватывает, а закрыть её чем-то надо. Без этой строки кнопка видна и
   мертва: замер 10.09.2026 — нажатие 30 с уходило в распорку ленты
   (`.feed-spacer … intercepts pointer events`). */
#toast .toast-close { pointer-events: auto }

@media (prefers-reduced-motion: no-preference) {
  #toast { animation: тост-снизу .18s ease-out }
}

@keyframes тост-снизу {
  from { opacity: 0; transform: translate(-50%, -8px) }
  to   { opacity: 1; transform: translate(-50%, 0) }
}


/* ── Учётка: меню, а не переход ────────────────────────────────────────────
   Владелец 10.09.2026 прислал образец: нажатие на себя открывает список того,
   что можно сделать со своей учёткой. Обёртка нужна как якорь для меню —
   раскладку подвала (ряд справа налево) она не меняет, потому что берёт на
   себя ровно те же flex-свойства, что были у самой кнопки. */
.боковое-учётка { position: relative; flex: 1 1 auto; min-width: 0; }

.боковое-шеврон { width: 14px; height: 14px; flex: 0 0 auto; color: var(--muted); }

/* `fixed`, а не `absolute`: в сжатой полосе боковое меню шириной 68 px
   обрезало выпадающий список своим `overflow` — на снимке 10.09.2026 от меню
   остались первые буквы пунктов. Геометрия при этом была верной, поэтому
   координатами такой дефект не ловится: положение считает JS от кнопки, а
   сторож проверяет, что правый край меню действительно виден. */
.учётка-меню {
  position: fixed;
  z-index: 70;
  width: 268px;
  max-width: calc(100vw - 32px);
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: 0 14px 40px rgba(24, 26, 28, .18);
}

.учётка-меню.hidden { display: none; }

.учётка-шапка {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 10px;
  min-width: 0;
}

.учётка-кто { display: flex; flex-direction: column; min-width: 0; }

.учётка-почта {
  font-size: var(--fs-14);
  font-weight: 650;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.учётка-тариф { font-size: var(--fs-12); color: var(--muted); }

.учётка-черта { height: 1px; margin: 4px 6px; background: var(--line); }

/* Пункт — та же строка, что и в меню композера: один вид у всех выпадающих
   списков программы, иначе они читаются как части разных программ. */
.учётка-пункт {
  display: block;
  white-space: normal;
  width: 100%;
  min-height: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text);
  font-size: var(--fs-14);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.учётка-пункт small {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-13);
  font-weight: 400;
  color: var(--muted);
  /* Перенос задаётся явно: строки бокового меню вокруг живут в одну строку, и
     без этого пояснение обрезалось о правый край меню (снимок 10.09.2026 —
     «тот же архив, что уходит в магази…»). */
  white-space: normal;
  overflow-wrap: anywhere;
}

.учётка-пункт:hover { background: var(--bg-2); }

.учётка-выход { color: var(--bad); }

/* В сжатой полосе учётка — такой же значок 32, как соседи: обёртка не должна
   растягивать её обратно, а шеврон и подписи там не показываются. */
body.веб.меню-узко .боковое-учётка { flex: 0 0 auto; width: var(--h-btn-sm); }
body.веб.меню-узко .боковое-шеврон { display: none; }
body.веб.меню-узко .учётка-меню { width: 260px; }

/* ── Рабочее окно сайта справа (ТЗ 13.09.2026, п. 4) ────────────────────── */
/* Своя колонка между разговором и «что под рукой». Прежде сайт был блоком
   ВНУТРИ узкой полосы файлов, и та раздвигалась с 336 до 760 px, чтобы его
   вместить: одна функция управляла шириной и видимостью другой. Владелец
   14.09.2026: «нужно разделить». Ширина в vw, а не числом: окно бывает и
   1280, и 2560. */
.окно-сайт-полоса {
  order: 2;
  /* Тот же фон, что и у полосы файлов: две полосы стоят рядом, и разный
     белый между ними читался бы как две разные программы. */
  background: var(--bg);
  /* Уступает первой. Жёсткая ширина на 1600 оставляла разговору 240 px:
     текст переносился по три слова, поле ввода становилось непригодным
     (снимок 14.09.2026). Колонка сайта широкая, но не любой ценой. */
  flex: 0 1 min(52vw, 760px);
  min-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-left: 1px solid var(--line);
  overflow-y: auto;
}

/* Полосы нет вовсе, пока человек её не открыл: `display:none` убирает её и из
   обхода Tab, и из дерева доступности. Прятать её трансформацией, как полосу
   файлов, незачем — она не постоянный блок экрана, а открытое человеком окно. */
.окно-сайт-полоса.hidden { display: none; }

/* Полоса файлов уходит правее сайта и своей ширины больше не меняет. */
.окно-право-полоса { order: 3; }

/* ─ Своя страница окна (установка расширения) ───────────────────────────
   Не раздел расширения: в расширении ставить расширение незачем. Лежит в той
   же колонке, что и разговор, и на время закрывает его — иначе два экрана
   наложились бы друг на друга. Ширина колонки текста: 760 — потолок, за
   которым строка перестаёт читаться. */
.окно-страница {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 20px 16px;
  overflow-y: auto;
}

.окно-страница.hidden { display: none; }

/* Разговор уходит целиком, а не прячется под страницей: `.panel.active`
   сильнее обычного правила, поэтому здесь `!important` — тот же случай, что
   и с правками поверх готовых наборов стилей. */
body.веб.страница-расширение .окно-центр > .panel { display: none !important; }

.окно-страница-шапка {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* 15 — заголовок по шкале проекта: это имя страницы, а не крупная вывеска. */
.окно-страница-имя { font-size: 15px; font-weight: 720; }

/* Кнопка-значок квадратная: ширину ей задаёт роль, а не знак внутри. */
.окно-страница-крест { width: 32px; height: 32px; min-height: 32px; flex: 0 0 auto; }

/* В полосе кнопка тянулась во всю ширину — там колонка 300 px. На странице в
   760 px та же кнопка становится плашкой во весь экран: ширину ей задаёт
   подпись, а не колонка. */
.окно-страница .право-кнопка { width: auto; align-self: flex-start; padding-inline: 16px; }

/* Шеврон обещает список выбора. В окне списка нет — нажатие ведёт к самой
   рамке сайта, поэтому и стрелки быть не должно: значок, обещающий не то,
   что случится, — такая же неправда, как надпись. */
body.веб #composerCtx .ctx-chev { display: none; }

/* Разговор — главное на экране, и отдавать его до нечитаемости нельзя.
   420 px — та ширина, на которой строка ответа ещё держит 45–50 знаков. Ниже
   1400 такой пол не помещается втроём и вызвал бы горизонтальную прокрутку —
   там место освобождает полоса «что под рукой» (правило ниже). */
.окно-центр { min-width: 320px; }

@media (min-width: 1400px) {
  .окно-центр { min-width: 420px; }
}

/* Три колонки помещаются рядом не на всякой ширине. Когда их не разместить
   по-человечески, уступает наименее срочная: файлы и подсказки подождут, а
   разговор и сайт нужны одновременно — ради этого сайт и открывали. Полоса не
   закрывается, а уступает место: вернётся, как только сайт закроют. */
@media (max-width: 1399px) {
  body.веб.окно-сайта .окно-право-полоса { display: none; }
}

/* Пока сайт не открыт, в полосе только поле адреса и подпись: 760 px под них
   — это пол-экрана пустоты. Ширину полоса набирает вместе с сайтом. */
body.веб:not(.сайт-открыт) .окно-сайт-полоса { flex-basis: 400px; }

/* Рамка занимает всю высоту колонки: 62vh посреди пустой полосы читались бы
   как «сайт не догрузился». Но растёт карточка ТОЛЬКО с открытым сайтом:
   пока в ней одно поле адреса, тянуться во всю высоту — значит показывать
   белую коробку в пол-экрана (снимок 14.09.2026, полоса стала карточками). */
.окно-сайт-полоса .право-блок { flex: 0 0 auto; min-height: 0; }
body.веб.сайт-открыт .окно-сайт-полоса .право-блок { flex: 1 1 auto; }
.окно-сайт-полоса .сайт-рамка { flex: 1 1 auto; min-height: 0; }
.окно-сайт-полоса #вебСайт { flex: 1 1 auto; height: auto; min-height: 320px; }

.сайт-полоса-шапка {
  display: flex;
  align-items: center;
  gap: 8px;
}

.сайт-полоса-шапка .label { flex: 1 1 auto; min-width: 0; }

/* Кнопка-значок квадратная, и пара height + min-height обязательна: общее
   `button { min-height }` иначе тихо растягивает её в 32×38. */
.сайт-полоса-крест {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  min-height: 32px;
  border-radius: var(--radius-xs);
}

/* Документ справа и сайт справа спорят за одно место: пока открыт документ,
   полоса сайта уступает. Сайт при этом не закрывается и возвращается, когда
   документ закрыли. */
body.веб.док-открыт .окно-сайт-полоса { display: none; }

.сайт-адрес {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}

.сайт-адрес input {
  min-width: 0;
  height: var(--h-btn-sm);
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xs);
  background: var(--card);
  color: var(--text);
  font-size: var(--fs-13);
}

.сайт-адрес button { height: var(--h-btn-sm); min-height: var(--h-btn-sm); }

.сайт-рамка {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

/* Ряд действий под адресом. Кнопки одного роста и прижаты вправо — так ряд
   читается как один элемент, а не как три разнокалиберные надписи. */
.сайт-строка {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.сайт-строка button {
  flex: 0 0 auto;
  height: var(--h-btn-sm);
  min-height: var(--h-btn-sm);
  border-radius: var(--radius-xs);
}

/* Памятка под рамкой: одна строка правды и подробности по нажатию. Абзац в
   469 знаков мелким кеглем владелец 14.09.2026 назвал «непонятной
   инструкцией» — и был прав: под рамкой человек ищет ответ на один вопрос,
   а не инструкцию. */
.сайт-памятка {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  max-width: 62ch;
}

#вебСайтКоротко { color: var(--text); }

.сайт-памятка details > summary {
  cursor: pointer;
  color: var(--accent);
  font-size: var(--fs-12);
  list-style: none;
}

.сайт-памятка details > summary::-webkit-details-marker { display: none; }

.сайт-памятка details > summary::after {
  content: ' →';
}

.сайт-памятка details[open] > summary::after { content: ' ↑'; }

.сайт-памятка details > div { margin-top: 6px; }

#вебСайт {
  width: 100%;
  /* Высота от окна, а не числом: на ноутбуке 560 px съедали бы весь экран,
     на большом мониторе рамка выглядела бы форточкой. */
  height: min(62vh, 720px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xs);
  background: var(--bg-2);
}