/* Ширину панели задаёт переменная: её двигает ручка на границе и запоминает
   браузер (просьба Александра 11.08). */
:root { --sidebar-width: 240px; }
.app-shell { min-height: 100vh; padding-left: var(--sidebar-width); transition: padding-left var(--transition); }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; display: flex; width: var(--sidebar-width); flex-direction: column; border-right: 1px solid var(--color-border); background: #101215; transition: width var(--transition); }
/* Ручка на границе: узкая полоса, которая подсвечивается под курсором. */
.sidebar__grip { position: absolute; inset: 0 -3px 0 auto; width: 7px; cursor: col-resize; background: transparent; }
.sidebar__grip:hover, .sidebar__grip:focus-visible { background: color-mix(in srgb, var(--color-accent) 45%, transparent); outline: none; }
/* Пока тянем — не выделяем текст и не ждём анимацию ширины. */
body.is-resizing { user-select: none; cursor: col-resize; }
body.is-resizing .sidebar, body.is-resizing .app-shell { transition: none; }
.is-collapsed .sidebar__grip { display: none; }
[data-theme="light"] .sidebar { background: #f8f9fa; }
.sidebar__head { display: flex; height: 64px; align-items: center; justify-content: space-between; padding: 0 14px 0 18px; border-bottom: 1px solid var(--color-border); }
.brand { display: flex; align-items: center; gap: 10px; overflow: hidden; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
/* Знак бренда (утверждён 30.07): «OS» из словознака, буква O несёт
   точку-спутник — позиция «час», верхом на кольце, зазор .05em. Всё в долях
   кегля, поэтому знак одинаков в любом размере. В развёрнутой шапке знак
   живёт в самом словознаке; отдельная плашка — только в свёрнутых режимах. */
.brand__o { position: relative; display: inline-block; line-height: 1; }
.brand__dot { position: absolute; top: .20em; left: .46em; width: .19em; height: .19em; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 .05em #101215; }
[data-theme="light"] .brand__dot { box-shadow: 0 0 0 .05em #f8f9fa; }
.brand__text span { color: var(--color-accent); }
.brand__mark { display: none; width: 26px; height: 26px; flex: 0 0 26px; align-items: center; justify-content: center; border-radius: 7px; background: var(--color-accent); color: #06282a; font-size: 12px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.brand__mark .brand__dot { background: #06282a; box-shadow: 0 0 0 .05em var(--color-accent); }
.brand__col { display: flex; flex-direction: column; line-height: 1.15; overflow: hidden; }
/* Слоган садится ровно под «entOS»: левый край под «e», правый — у «S».
   align-self прижимает его вправо, точный кегль подбирает fitBrandSlogan()
   замером по факту — словознак рендерится системным шрифтом, и ширина «entOS»
   на Windows и Mac разная, поэтому вписать размер числом нельзя.
   9px здесь — запасной вариант, если скрипт не отработал: он заведомо уже
   словознака и за букву S не вылезет. */
.brand__slogan { align-self: flex-end; margin-top: -.3em; color: var(--color-text-muted); font-size: 9px; font-weight: 400; letter-spacing: .03em; white-space: nowrap; }
.is-collapsed .brand__col { display: none; }
.sidebar__collapse .icon { display: inline-block; font-size: 23px; line-height: 1; transition: transform var(--transition); }
.nav { flex: 1; overflow-y: auto; padding: 18px 10px; }
/* «Ещё» и настройка меню — те же пункты, что остальные: ничего не кричит.
   Стрелка поворачивается, когда список раскрыт. */
.nav__more-toggle, .nav__setup { font: inherit; }
.nav__more-caret { margin-left: auto; color: var(--color-text-muted); transition: transform var(--transition); }
.nav__more-block.is-open .nav__more-caret, #navMoreBlock.is-open .nav__more-caret { transform: rotate(90deg); }
.nav__more { display: grid; gap: 2px; padding-left: 12px; margin-bottom: 2px; border-left: 1px solid var(--color-border); }
.is-collapsed .nav__more { padding-left: 0; border-left: 0; }
.is-collapsed .nav__more-caret { display: none; }
/* Диалог с заголовком и крестиком: окно без видимого выхода читается
   как ловушка, даже когда Esc работает (просьба Александра 30.07). */
.dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dialog__head h3 { margin: 0; }
.dialog__close { flex: 0 0 auto; }

/* Скриншоты в обратной связи: превью с крестиком «убрать» и миниатюры
   в разборе очереди. */
.shots { margin: 4px 0 10px; }
.shots__row { display: flex; flex-wrap: wrap; gap: 8px; }
.shots__row:not(:empty) { margin-bottom: 8px; }
.shots__item { position: relative; margin: 0; width: 96px; height: 72px; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-subtle); }
.shots__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shots__drop { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .62); color: #fff; cursor: pointer; font-size: 14px; line-height: 1; }
.shots__attach { font-size: 12px; padding: 6px 10px; }
.shots__attach:disabled { opacity: .5; cursor: default; }
/* Перетаскивание файла в окно — видно, что его ждут. */
.omnibox__dialog.is-dropping { outline: 2px dashed var(--color-accent); outline-offset: -6px; }
.shots__thumb { display: inline-block; margin: 8px 8px 0 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; max-width: 220px; }
.shots__thumb img { display: block; width: 100%; height: auto; }
/* Вложение-файл: превью нет, поэтому показываем имя и вес. */
.shots__item--file { display: grid; align-content: center; justify-items: center; gap: 2px; padding: 6px; text-align: center; }
.shots__icon { font-size: 20px; line-height: 1; }
.shots__item--file figcaption { max-width: 100%; overflow: hidden; font-size: 10px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.shots__item--file small { color: var(--color-text-muted); font-size: 10px; }
.shots__file { display: inline-block; margin: 8px 8px 0 0; padding: 6px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); font-size: 12px; text-decoration: none; }
.shots__file:hover { background: var(--color-subtle); }

/* Записи обратной связи: статус, номер задачи и ответ автору. Отдельного
   экрана разбора нет — вся судьба записи читается прямо в её карточке. */
.feedback-task { padding: 2px 7px; border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-text-secondary); font-family: var(--font-mono); font-size: 11px; }
.feedback-answer { margin: 6px 0 0; color: var(--color-text-secondary); font-size: 12px; line-height: 1.5; }
.feedback-answer--empty { color: var(--color-text-muted); font-style: italic; }
.feedback-group { margin: 18px 0 8px; color: var(--color-text-muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.feedback-group:first-child { margin-top: 0; }
.feedback-edit { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-border); }
.feedback-edit input { min-height: 28px; padding: 3px 8px; border: 1px solid var(--color-border); border-radius: var(--radius-sm, 6px); background: var(--color-base); color: var(--color-text); font: inherit; font-size: 11px; }
.feedback-edit__task { width: 90px; font-family: var(--font-mono); }
.feedback-edit__note { flex: 1 1 200px; min-width: 0; }
.feedback-edit .button { padding: 5px 12px; font-size: 11px; }
.feedback-edit__error { flex-basis: 100%; color: var(--color-danger); font-size: 11px; }

/* Список агентов по «@» в поле ввода: открывается над композером, потому что
   сам композер стоит внизу экрана. */
/* Список агентов — столбец в ширину имени, а не лента во всю ширину поля:
   выбирают из восьми имён, а не читают восемь описаний (правка 11.08). */
.mention-menu { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 30; display: flex; width: max-content; max-width: min(340px, 100%); flex-direction: column; gap: 2px; max-height: 260px; overflow-x: hidden; overflow-y: auto; padding: 6px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-elevated, var(--color-surface)); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
/* Сверху не хватило места — список раскрывается вниз (Q-18). Сторону и высоту
   выбирает chat.js по факту замера, здесь только сама раскладка. */
.mention-menu--below { top: calc(100% + 6px); bottom: auto; }
.mention-menu__item { display: grid; grid-template-columns: 1fr; gap: 1px; width: 100%; padding: 7px 9px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-text); cursor: pointer; font: inherit; font-size: 13px; text-align: left; }
.mention-menu__item strong, .mention-menu__item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mention-menu__item small { color: var(--color-text-muted); font-size: 11px; }
.mention-menu__item:hover, .mention-menu__item.is-active { background: var(--color-subtle); }

/* Действия в карточке агента: разговор, закрепление, правка паспорта. */
.agent-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }

/* Правка паспорта агента: структурные поля стоят НАД текстом, а не в нём.
   Модель и права — это выбор из известного, и выпадающий список честнее
   строки, в которой можно написать несуществующее (Q-54). */
.passport-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 0 0 14px; padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-subtle); }
.passport-field { display: grid; gap: 6px; align-content: start; }
.passport-field > span { color: var(--color-text-muted); font-family: var(--font-mono); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
/* Строка «чем отличается» — половина смысла выбора: без неё модель выбирают
   по названию, а названия про цену и скорость ничего не говорят. */
.passport-field__note { margin: 0; color: var(--color-text-secondary); font-size: 11px; line-height: 1.45; }
.passport-select { width: 100%; min-height: 36px; padding: 6px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 12px; }
.passport-select:focus { border-color: var(--color-accent); outline: none; }
/* Отказ в сохранении — не «тихая подпись»: человек должен увидеть, что файл
   не записан, а не решить, что всё прошло. */
.passport-status--error { color: var(--color-danger); }
.passport-field--switch { grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; }
.passport-field--switch input { width: 16px; height: 16px; }
.passport-field--switch .passport-field__note { grid-column: 1 / -1; }

/* Раздел «Создать изображение»: поле описания — главный элемент экрана,
   результат крупно, нарисованное раньше — плиткой под ним. */
.draw-form { display: grid; gap: 10px; max-width: 820px; margin-bottom: 18px; }
.draw-form__input { width: 100%; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 15px; line-height: 1.55; resize: vertical; }
.draw-form__input:focus { border-color: var(--color-accent); outline: none; }
.draw-form__row { display: flex; align-items: center; gap: 12px; }
.draw-result { display: grid; gap: 14px; max-width: 820px; }
.draw-card { margin: 0; padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.draw-card img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
.draw-card__actions { display: flex; gap: 8px; margin-top: 12px; }
.draw-change { display: grid; gap: 8px; margin-top: 12px; }
.draw-change textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-base); color: var(--color-text); font: inherit; font-size: 13px; resize: vertical; }
.draw-change button { justify-self: start; }
.draw-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.draw-gallery__item { display: block; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-subtle); aspect-ratio: 1 / 1; }
.draw-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.draw-gallery__item:hover { border-color: var(--color-accent); }

/* Окно «Разделы»: слева переход, справа галочка видимости. Строки одной
   высоты, иконки и галочки — по колонкам, чтобы список читался столбцом,
   а не «в разнобой» (замечание Александра 11.08). */
.menu-dialog { max-width: 460px; }
.menu-settings { display: grid; gap: 2px; margin: 12px 0; max-height: 56vh; overflow: auto; }
/* Галочка слева, за ней иконка и название — как на макете Александра: взгляд
   идёт по колонке галочек, а не ищет их у правого края разной длины. */
.menu-settings__row { display: grid; grid-template-columns: 34px 1fr; align-items: stretch; border-radius: var(--radius-md); }
.menu-settings__row:hover { background: var(--color-subtle); }
.menu-settings__go { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-text); cursor: pointer; font: inherit; font-size: 14px; text-align: left; }
.menu-settings__go .nav__icon { width: 22px; flex: none; font-size: 15px; }
.menu-settings__toggle { display: grid; place-items: center; cursor: pointer; }
.menu-settings__toggle input { width: 17px; height: 17px; accent-color: var(--color-accent); cursor: pointer; }
.menu-settings__toggle input:disabled { cursor: default; opacity: .55; }
/* Между точками и словом — воздух: «••• Ещё», а не «•••Ещё». Иконки в меню
   зажаты в 18 пикселей, а три точки шире — они выпирали за свой бокс
   и съедали зазор до слова (замечание Александра 11.08). */
.nav__more-toggle .nav__icon { width: auto; min-width: 18px; flex: none; letter-spacing: .1em; padding-right: 3px; }
.nav__label { margin: 0 10px 8px; color: var(--color-text-muted); font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.nav__item { display: flex; width: 100%; min-height: 38px; align-items: center; gap: 11px; margin: 2px 0; padding: 8px 10px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-text-secondary); cursor: pointer; text-align: left; white-space: nowrap; }
/* Пустой раздел скрывается атрибутом hidden — display:flex выше его перебивает без этого правила. */
.nav__item:hover { background: var(--color-subtle); color: var(--color-text); }
.nav__item.is-active { background: var(--color-accent-soft); color: var(--color-accent); }
.nav__icon { display: grid; width: 18px; flex: 0 0 18px; place-items: center; font-family: var(--font-mono); font-size: 16px; }
.nav__count { margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--color-accent) 15%, transparent); color: var(--color-accent); font-family: var(--font-mono); font-size: 10px; text-align: center; }
.nav__count--quiet { background: var(--color-subtle); color: var(--color-text-muted); }
.nav__chevron { margin-left: auto; transition: transform var(--transition); }
.nav__item[aria-expanded="false"] .nav__chevron { transform: rotate(-90deg); }
.nav__sub { display: grid; gap: 2px; overflow: hidden; padding: 2px 0 8px 40px; }
.nav__sub a { display: flex; align-items: center; gap: 9px; min-height: 30px; color: var(--color-text-muted); font-size: 12px; }
.nav__sub a:hover { color: var(--color-text); }
/* Чаты в боковой панели — как в привычных ассистентах: список всегда под рукой. */
.nav__chats { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--color-border); }
.nav__chats-list { display: grid; gap: 2px; }
.nav__chats-list .chat-side__item { width: 100%; }
.is-collapsed .nav__chats { display: none; }
.sidebar__foot { position: relative; padding: 10px; border-top: 1px solid var(--color-border); }
/* Меню в трёх точках: контур, настройка меню, тема, выход. Раскрывается
   вверх — под кнопкой места нет, она и так в самом низу. */
/* Атрибут hidden скрывает элемент через display:none в стилях браузера,
   и любой авторский display его перебивает. Меню профиля объявлено как grid,
   поэтому hidden на него не действовал вовсе: меню висело открытым с загрузки
   страницы, и «закрыть» его было нельзя ничем — ни вторым кликом, ни Escape,
   ни кликом мимо. Код закрытия при этом был правильный и честно ставил hidden.
   Правило ниже возвращает атрибуту силу. */
.profile-menu { position: absolute; bottom: calc(100% - 4px); left: 10px; right: 10px; z-index: 40; display: grid; gap: 2px; padding: 6px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-elevated, var(--color-surface)); box-shadow: 0 18px 40px rgba(0, 0, 0, .38); }
.profile-menu__label { margin: 4px 8px 2px; color: var(--color-text-muted); font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.profile-menu__sep { height: 1px; margin: 4px 0; background: var(--color-border); }
/* Иконка слева, название и пояснение — столбцом справа: «пространство клиента»
   читается подписью к имени, а не хвостом строки, и разница с проектом видна
   сразу (замечание Александра 11.08). */
.profile-menu__item { display: grid; width: 100%; grid-template-columns: 18px 1fr; align-items: center; column-gap: 9px; padding: 7px 8px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-text-secondary); cursor: pointer; font: inherit; font-size: 13px; text-align: left; }
.profile-menu__item:hover { background: var(--color-subtle); color: var(--color-text); }
.profile-menu__item.is-current { color: var(--color-accent); }
.profile-menu__item small { grid-column: 2; margin-top: 1px; color: var(--color-text-muted); font-size: 10px; }
.trust-card { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 10px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); white-space: nowrap; overflow: hidden; }
.trust-card div, .profile > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }
.trust-card strong, .profile strong { font-size: 11px; font-weight: 600; }
.trust-card small, .profile small { color: var(--color-text-muted); font-size: 10px; }
.profile { display: flex; width: 100%; align-items: center; gap: 10px; padding: 8px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-text); cursor: pointer; text-align: left; white-space: nowrap; overflow: hidden; }
.profile:hover { background: var(--color-subtle); }
.avatar { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border: 1px solid var(--color-border-strong); border-radius: 50%; background: var(--color-elevated); font-size: 10px; }
.profile__more { margin-left: auto; color: var(--color-text-muted); }

.app-shell.is-collapsed { padding-left: 68px; }
.is-collapsed .sidebar { width: 68px; }
.is-collapsed .sidebar__head { padding: 0; justify-content: center; }
.is-collapsed .brand, .is-collapsed .nav__label, .is-collapsed .nav__item > span:not(.nav__icon), .is-collapsed .nav__sub, .is-collapsed .trust-card, .is-collapsed .profile > span:not(.avatar) { display: none; }
.is-collapsed .sidebar__collapse .icon { transform: rotate(180deg); }
.is-collapsed .nav__item { justify-content: center; padding-inline: 0; }
.is-collapsed .profile { justify-content: center; }

.workspace { min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 15; display: flex; height: 64px; align-items: center; justify-content: space-between; padding: 0 28px; border-bottom: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-base) 92%, transparent); backdrop-filter: blur(14px); }
/* Режим чтения: пошёл ответ — панель ужимается втрое, крошки и статус моделей
   уходят, поиск сжимается до значка. Значки остаются на месте, поэтому ничего
   не «пропадает»; наведение возвращает панель целиком. */
.topbar.is-slim { height: 22px; padding: 0 28px; border-bottom-color: transparent; }
/* Крошек в тонкой полосе нет, и space-between уводил единственного оставшегося
   ребёнка — значки — к левому краю: получалась полоса с кнопками слева и пустым
   местом справа (Q-49). Держим их там же, где они стоят в полной шапке, чтобы
   при раскрытии они не прыгали по горизонтали. */
.topbar.is-slim { justify-content: flex-end; }
.topbar.is-slim:hover, .topbar.is-slim:focus-within { justify-content: space-between; }
.topbar.is-slim .breadcrumbs, .topbar.is-slim .execution-state { display: none; }
.topbar.is-slim .command-trigger { min-width: 0; height: 20px; padding: 0 6px; }
.topbar.is-slim .command-trigger span:not(:first-child), .topbar.is-slim .command-trigger kbd { display: none; }
.topbar.is-slim .icon-button { height: 20px; width: 24px; }
/* Раскрытие по наведению не отодвигает разговор: минус те же 42 px в нижнем
   отступе оставляют место в потоке равным 22, и полоса просто накрывает верх
   ленты собой (у неё свой фон, размытие и z-index). До Q-49 наведение сдвигало
   весь чат на 42 px вниз, а после сжатия отступов увело бы блок ввода
   за кромку окна. */
.topbar.is-slim:hover, .topbar.is-slim:focus-within { height: 64px; margin-bottom: -42px; border-bottom-color: var(--color-border); }
.topbar.is-slim:hover .breadcrumbs, .topbar.is-slim:focus-within .breadcrumbs { display: flex; }
.topbar.is-slim:hover .command-trigger, .topbar.is-slim:focus-within .command-trigger { min-width: 210px; height: 36px; padding: 0 8px 0 11px; }
.topbar.is-slim:hover .command-trigger span, .topbar.is-slim:focus-within .command-trigger span,
.topbar.is-slim:hover .command-trigger kbd, .topbar.is-slim:focus-within .command-trigger kbd { display: block; }
.topbar.is-slim:hover .icon-button, .topbar.is-slim:focus-within .icon-button { height: 34px; width: 34px; }
.breadcrumbs { display: flex; align-items: center; gap: 9px; font-size: 12px; }
.breadcrumbs span, .breadcrumbs b { color: var(--color-text-muted); font-weight: 400; }
.breadcrumbs strong { font-weight: 500; }
.breadcrumbs strong.is-current { color: var(--color-success, #10b981); }
.topbar__actions { display: flex; align-items: center; gap: 8px; }
.execution-state { display: flex; align-items: center; gap: 7px; margin-right: 5px; color: var(--color-text-muted); font-size: 11px; }
.command-trigger { display: flex; min-width: 210px; height: 36px; align-items: center; gap: 8px; padding: 0 8px 0 11px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text-muted); font-size: 12px; text-align: left; }
.command-trigger:hover { border-color: var(--color-border-strong); background: var(--color-elevated); }
.command-trigger kbd { margin-left: auto; padding: 2px 6px; border: 1px solid var(--color-border); border-radius: 5px; background: var(--color-base); font-size: 9px; }
.notification-button { position: relative; }
.notification-button i { position: absolute; top: 7px; right: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--color-danger); }

.main { width: min(100%, 1260px); margin: 0 auto; padding: 42px 32px 72px; }
.page-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 26px; }
.page-heading h1 { margin-bottom: 7px; }
.page-heading > div > p:last-child { margin: 0; color: var(--color-text-secondary); font-size: 14px; }
.brief-card { position: relative; overflow: hidden; margin-bottom: 18px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.brief-card__accent { position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--color-accent); }
.brief-card__head { display: flex; align-items: start; justify-content: space-between; padding: 22px 24px 14px 26px; }
.brief-card__head h2 { margin-bottom: 0; font-size: 21px; }
.agent-spark { margin-right: 3px; }
.verified { display: flex; align-items: center; gap: 6px; color: var(--color-text-muted); font-family: var(--font-mono); font-size: 10px; }
.verified span { color: var(--color-success); }
.brief-card__body { display: grid; grid-template-columns: 1fr 1.2fr; gap: 34px; padding: 8px 24px 22px 26px; }
.brief-lead { margin: 0; color: var(--color-text-secondary); font-size: 15px; line-height: 1.65; }
.brief-points { display: grid; gap: 11px; }
.brief-points > div { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; }
.point-index { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid var(--color-border); border-radius: 50%; color: var(--color-text-muted); font-family: var(--font-mono); font-size: 9px; }
.brief-points p { display: flex; flex-direction: column; margin: 0; }
.brief-points strong { font-size: 13px; font-weight: 600; }
.brief-points small { color: var(--color-text-muted); font-size: 11px; }
.brief-points .is-warning .point-index { border-color: color-mix(in srgb, var(--color-warning) 30%, var(--color-border)); color: var(--color-warning); }
.brief-card__foot { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px 12px 26px; border-top: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-base) 35%, transparent); }
.brief-card__foot > span { color: var(--color-text-muted); font-size: 10px; }
.brief-card__foot code { font-size: 9px; }

.metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.metric-card { min-height: 152px; padding: 18px 20px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.metric-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.metric-icon { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text-secondary); font-family: var(--font-mono); }
.trend, .quiet-label { font-family: var(--font-mono); font-size: 10px; }
.trend--up { color: var(--color-success); }
.quiet-label { color: var(--color-text-muted); }
.metric-card > p { margin-bottom: 7px; color: var(--color-text-muted); font-size: 11px; }
.metric-value { display: flex; align-items: baseline; gap: 8px; margin-bottom: 11px; }
.metric-value strong { font-size: 22px; letter-spacing: -.02em; }
.metric-value span { color: var(--color-text-muted); font-size: 10px; }
.progress { height: 3px; overflow: hidden; border-radius: 999px; background: var(--color-border); }
.progress i { display: block; height: 100%; border-radius: inherit; background: var(--color-accent); }
.task-stats { display: flex; gap: 28px; padding-top: 2px; }
.task-stats span { display: flex; flex-direction: column; }
.task-stats strong { font-size: 20px; line-height: 1.2; }
.task-stats small { color: var(--color-text-muted); font-size: 10px; }
.danger-text strong { color: var(--color-danger); }
.agent-mini-list { display: flex; align-items: center; }
.mini-avatar { display: grid; width: 24px; height: 24px; margin-right: -5px; place-items: center; border: 2px solid var(--color-surface); border-radius: 50%; background: var(--color-elevated); font-size: 9px; }
.agent-mini-list small { margin-left: 12px; color: var(--color-text-muted); font-size: 9px; }

.content-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; margin-bottom: 36px; }
.count-badge { display: grid; min-width: 22px; height: 22px; place-items: center; border-radius: 999px; background: color-mix(in srgb, var(--color-danger) 12%, transparent); color: var(--color-danger); font-family: var(--font-mono); font-size: 10px; }
.attention-list { padding: 4px 8px 8px; }
.attention-item { display: grid; grid-template-columns: 32px 1fr auto 18px; gap: 10px; align-items: center; min-height: 67px; padding: 10px 11px; border-bottom: 1px solid var(--color-border); border-radius: var(--radius-md); }
.attention-item:last-child { border-bottom: 0; }
.attention-item:hover { background: var(--color-subtle); }
.attention-icon { display: grid; width: 28px; height: 28px; place-items: center; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 11px; }
.attention-icon--danger { background: color-mix(in srgb, var(--color-danger) 10%, transparent); color: var(--color-danger); }
.attention-icon--warning { background: color-mix(in srgb, var(--color-warning) 10%, transparent); color: var(--color-warning); }
.attention-icon--info { background: color-mix(in srgb, var(--color-info) 10%, transparent); color: var(--color-info); }
.attention-item > span:nth-child(2) { display: flex; flex-direction: column; }
.attention-item strong { font-size: 12px; }
.attention-item small, .attention-item time { color: var(--color-text-muted); font-size: 10px; }
.attention-item time { font-family: var(--font-mono); }
.arrow { color: var(--color-text-muted); }
.timeline { display: grid; gap: 0; margin: 0; padding: 10px 18px 4px; list-style: none; }
.timeline li { position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 9px; min-height: 65px; }
.timeline li:not(:last-child)::before { position: absolute; top: 30px; bottom: 0; left: 14px; width: 1px; background: var(--color-border); content: ""; }
.timeline__icon { z-index: 1; display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-surface); color: var(--color-text-secondary); font-size: 11px; }
.timeline p { margin: 3px 0 2px; color: var(--color-text-secondary); font-size: 11px; }
.timeline strong { color: var(--color-text); font-weight: 600; }
.timeline small { color: var(--color-text-muted); font-size: 9px; }
.timeline code { font-size: 9px; }
.activity-more { margin: 4px 18px 17px 57px; }

.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 14px; }
.section-heading h2 { margin: 0; font-size: 20px; }
.agent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
/* Один список агентов (Q-47): карточки команды контура и карточки агентов
   платформы рисуют разные функции, но лежать должны в одной сетке — иначе
   вторая половина начинает новый ряд, и на экране снова видны два списка.
   display:contents растворяет обёртки: их дети становятся ячейками .agents-list
   напрямую. Обёртки при этом нужны — renderAgentCards очищает .agent-grid
   целиком на каждое закрепление и унесла бы с собой чужие карточки. */
.agents-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.agents-list > .agent-grid, .agents-list > .agents-list__part { display: contents; }
/* Карточка — колонка: теги прижаты к низу, поэтому нижние края в ряду сходятся
   даже у агентов с описанием разной длины (макет Александра 11.08). */
.agent-card { display: flex; flex-direction: column; padding: 18px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); transition: border-color var(--transition), transform var(--transition); }
.agent-card:hover { border-color: var(--color-border-strong); transform: translateY(-2px); }
.agent-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 15px; }
/* Статус держим в одну строку: длинный текст свёрнут ещё в скрипте, но чужой
   паспорт с длинным словом не должен уводить звёздочку на вторую строку. */
.agent-card__head .status-badge { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-avatar { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 1px solid var(--color-border); border-radius: 9px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.agent-avatar--teal { background: rgba(33, 199, 199, .1); color: var(--color-accent); }
.agent-avatar--blue { background: rgba(88, 166, 255, .1); color: var(--color-info); }
.agent-avatar--violet { background: rgba(163, 113, 247, .1); color: #a371f7; }
.agent-card h3 { margin-bottom: 5px; }
/* Роль — ровно три строки: дальше многоточие, целиком она в карточке агента.
   Раньше описание обрывалось посреди фразы и карточки выходили разной высоты. */
.agent-card > p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; min-height: 42px; margin-bottom: 13px; overflow: hidden; color: var(--color-text-muted); font-size: 11px; line-height: 1.5; }
/* «Где с ним работать» — одинаковая по месту строка на каждой карточке: у
   агента контура «чат здесь», у агента платформы «задачи в Telegram». В один
   список их свели без заголовков, и эта строка осталась единственным, что
   объясняет разницу, — поэтому она заметнее описания и не режется по строкам.
   Нет тегов паспорта — строка последняя и сама уходит вниз, чтобы карточки
   в ряду заканчивались на одной линии. */
.agent-card > .agent-card__where { display: block; min-height: 0; margin: 0 0 12px; overflow: visible; color: var(--color-text-secondary); font-size: 11px; line-height: 1.45; }
.agent-card > .agent-card__where:last-child { margin: auto 0 0; padding-top: 10px; }
/* Карточка агента платформы кликом ничего не открывает — не обещаем нажатие
   ни подъёмом, ни курсором. Рамка та же, что у остальных: список один. */
.agent-card--platform:hover { transform: none; }
/* Уточнение при совпадении имён: в контуре свой «Аналитик», у платформы свой.
   Приписка живёт внутри заголовка, чтобы читалась как часть имени. */
.agent-card__from { color: var(--color-text-muted); font-size: 10px; font-weight: 400; white-space: nowrap; }
.proactivity-panel { margin: 0 0 18px; padding: 18px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.proactivity-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.proactivity-panel__head h2 { margin: 0 0 6px; font-size: 15px; }
.proactivity-panel__head p { max-width: 680px; margin: 0; color: var(--color-text-muted); font-size: 11px; line-height: 1.55; }
.proactivity-switch { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 11px; font-weight: 700; }
.proactivity-switch input, .proactivity-agent > input { accent-color: var(--color-accent, #0f766e); }
.proactivity-controls { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0; padding: 12px; border-radius: var(--radius-md); background: var(--color-subtle); }
.proactivity-controls label, .proactivity-agent label { display: flex; align-items: center; gap: 7px; color: var(--color-text-muted); font-size: 10px; }
.proactivity-controls input, .proactivity-agent label input { width: 82px; min-height: 32px; padding: 5px 7px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); }
.proactivity-controls label:last-child input { width: 72px; }
.proactivity-agents { display: grid; gap: 8px; }
.proactivity-agent { display: grid; grid-template-columns: 22px minmax(180px, 1fr) auto auto minmax(150px, .8fr); align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.proactivity-agent strong, .proactivity-agent small { display: block; }
.proactivity-agent small { margin-top: 3px; color: var(--color-text-muted); font-size: 9px; line-height: 1.4; }
.proactivity-agent__error { color: #b45309 !important; }
.proactivity-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
/* Предложения ждут решения: блок на главном экране и на стартовом экране чата.
   Пустого состояния у него не бывает — при нуле ожидающих узла нет совсем,
   поэтому здесь только вид самого блока. text-align задан явно: внутри
   .chat-hero всё выровнено по центру, а карточку с кнопками так читать нельзя. */
/* Отступ сверху — потому что блок переехал под карточку «Фокус дня» и встал
   к ней вплотную: заголовок читался как подпись карточки, а не как свой раздел.
   26 px — тот же воздух, что даёт заголовок страницы (.page-heading). Отступ
   на самом блоке, а не на карточке: пустая очередь блока не рисует вовсе,
   и лишнего воздуха под карточкой не остаётся. */
.pending-suggestions { margin: 26px 0 18px; text-align: left; }
.pending-suggestions__title { margin: 0 0 10px; font-size: 15px; }
/* Бейдж в меню: та же цифра, что в заголовке блока. */
.nav__count--pending { flex: none; }
/* Карта первых шагов пустого проекта (блок Б). */
.setup-card { margin-bottom: 18px; }
.setup-steps { display: grid; gap: 12px; margin: 12px 0 0; padding-left: 20px; }
.setup-steps li::marker { color: var(--color-accent); font-weight: 700; }
.setup-steps strong { display: block; font-size: 13px; }
.setup-steps p { margin: 3px 0 4px; color: var(--color-text-muted); font-size: 11px; line-height: 1.5; }
.project-summary-card { margin-bottom: 18px; }
/* Форма приглашения в проект: email → доступ к контуру. */
.invite-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; margin-top: 10px; }
.invite-form input { min-width: 220px; flex: 1; min-height: 36px; padding: 7px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); }
.invite-form small { flex-basis: 100%; }
/* Редактор файлов памяти и навыков в карточке раздела. */
.section-editor { width: 100%; min-height: 46vh; padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font-family: var(--font-mono); font-size: 12px; line-height: 1.6; resize: vertical; }
/* Экран «Память»: карточка записи кликабельна целиком; текст записи — колонкой
   читабельной ширины, как документ, а не как консольный вывод. */
.memory-card { cursor: pointer; }
.memory-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.memory-doc { max-width: 860px; }
.memory-doc__body { padding: 18px 20px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); overflow-wrap: anywhere; }
/* «Запланировано»: карточки наблюдений — что произойдёт само и когда. */
.scheduled-list { display: grid; gap: 10px; margin: 0 0 22px; }
.scheduled-card { padding: 14px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.scheduled-card.is-off { opacity: .62; }
.scheduled-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 5px; }
.scheduled-card__badge { padding: 2px 8px; border-radius: 999px; background: var(--color-subtle); color: var(--color-text-muted); font-family: var(--font-mono); font-size: 9px; white-space: nowrap; }
.scheduled-card:not(.is-off) .scheduled-card__badge { background: color-mix(in srgb, var(--color-accent) 14%, transparent); color: var(--color-accent); }
.scheduled-card > p { margin: 0 0 7px; font-size: 12px; line-height: 1.5; }
.scheduled-card small { display: block; font-size: 10px; line-height: 1.5; }
.tag-row { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 17px; }
/* В карточке агента теги — последняя строка: прижимаем их к низу, чтобы ряд
   карточек заканчивался на одной линии. */
.agent-card .tag-row { margin: auto 0 0; padding-top: 4px; }
.tag-row span { padding: 3px 7px; border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-text-muted); font-family: var(--font-mono); font-size: 8px; }

.mobile-nav { display: none; }
.overlay { position: fixed; inset: 0; z-index: 40; background: rgba(3, 5, 7, .62); backdrop-filter: blur(2px); }
.command-palette { width: min(590px, calc(100vw - 32px)); max-height: min(620px, calc(100vh - 40px)); padding: 0; overflow: hidden; border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-elevated); color: var(--color-text); box-shadow: var(--shadow-overlay); }
.command-palette::backdrop { background: rgba(3, 5, 7, .62); backdrop-filter: blur(3px); }
.command-search { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-bottom: 1px solid var(--color-border); }
.command-search input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--color-text); font-size: 14px; }
.command-search input::placeholder { color: var(--color-text-muted); }
.command-search kbd, .command-foot kbd { padding: 2px 5px; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-base); color: var(--color-text-muted); font-size: 9px; }
.command-body { max-height: 440px; overflow-y: auto; padding: 8px; }
.command-body > p { margin: 8px 8px 5px; color: var(--color-text-muted); font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; }
.command-body button { display: flex; width: 100%; align-items: center; gap: 11px; padding: 9px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-text); cursor: pointer; text-align: left; }
.command-body button:hover, .command-body button:focus { background: var(--color-subtle); outline: none; }
.command-icon { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.command-body button > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; }
.command-body strong { font-size: 12px; }
.command-body small { color: var(--color-text-muted); font-size: 10px; }
.command-body button > kbd { color: var(--color-text-muted); font-size: 10px; }
.command-foot { display: flex; gap: 18px; padding: 9px 15px; border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 9px; }

.agent-sheet { position: fixed; top: 0; right: 0; z-index: 50; display: flex; width: min(480px, 100vw); height: 100vh; flex-direction: column; border-left: 1px solid var(--color-border); background: var(--color-base); box-shadow: var(--shadow-overlay); transform: translateX(102%); transition: transform 200ms ease-out, width 200ms ease-out; }
.agent-sheet.is-open { transform: translateX(0); }

/* Главный агент — единая точка входа на Dashboard */
.primary-agent { margin: 0 0 18px; padding: 20px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.primary-agent__head { display: grid; grid-template-columns: 42px 1fr; gap: 13px; align-items: start; margin-bottom: 16px; }
.primary-agent__head .agent-avatar { width: 42px; height: 42px; }
.primary-agent__head h2 { margin: 2px 0 4px; font-size: 21px; }
.primary-agent__head p:last-child { margin: 0; color: var(--color-text-muted); font-size: 11px; }
.primary-agent textarea { width: 100%; min-height: 86px; padding: 13px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); outline: 0; background: var(--color-base); color: var(--color-text); font: inherit; resize: vertical; }
.primary-agent textarea:focus { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-soft); }
.primary-agent__foot { display: flex; gap: 14px; align-items: center; justify-content: space-between; margin-top: 10px; }
.primary-agent__foot > span { max-width: 540px; color: var(--color-text-muted); font-size: 9px; }
.primary-agent__actions, .composer__actions { display: flex; gap: 8px; align-items: center; }
.engine-select { min-height: 40px; padding: 0 34px 0 13px; border: 1px solid var(--color-border); border-radius: 999px; outline: 0; background: var(--color-base); color: var(--color-text); font: inherit; font-size: 11px; cursor: pointer; }
.engine-select:focus { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-soft); }
.engine-select:disabled { cursor: not-allowed; opacity: .62; }
.round-action { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-base); color: var(--color-text); font-size: 16px; cursor: pointer; transition: border-color var(--transition), background var(--transition), transform var(--transition); }
.round-action:hover:not(:disabled) { border-color: var(--color-border-strong); transform: translateY(-1px); }
.round-action:disabled { cursor: not-allowed; opacity: .45; }
.send-action { border-color: var(--color-accent); background: var(--color-accent); color: #fff; font-size: 20px; font-weight: 700; }
.voice-action.is-listening { border-color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 12%, var(--color-base)); color: var(--color-danger); animation: voice-pulse 1.1s ease-in-out infinite; }
@keyframes voice-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-danger) 12%, transparent); } }

/* Страница проекта — рабочий центр вместо просмотра README */
#main > [hidden] { display: none !important; }
.workspace-view { min-width: 0; }
.project-back { margin: 0 0 12px; }
.project-hero { margin-bottom: 18px; padding: 23px 24px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--color-surface), color-mix(in srgb, var(--color-accent) 4%, var(--color-surface))); }
.project-hero__top { display: flex; gap: 24px; align-items: flex-start; justify-content: space-between; }
.project-hero h1 { margin: 3px 0 7px; font-size: clamp(25px, 3vw, 36px); letter-spacing: -.035em; }
.project-hero__top > div > p:last-child { max-width: 760px; margin: 0; color: var(--color-text-muted); font-size: 12px; line-height: 1.55; }
.project-status { display: inline-flex; flex: 0 0 auto; align-items: center; min-height: 28px; padding: 0 10px; border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-text-secondary); font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; }
.project-status--priority { border-color: color-mix(in srgb, var(--color-success) 32%, var(--color-border)); background: color-mix(in srgb, var(--color-success) 8%, transparent); color: var(--color-success); }
.project-status--paused { border-color: color-mix(in srgb, var(--color-warning) 32%, var(--color-border)); background: color-mix(in srgb, var(--color-warning) 8%, transparent); color: var(--color-warning); }
.project-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 21px; }
.project-facts > div { padding: 13px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-base) 45%, transparent); }
.project-facts span { display: block; margin-bottom: 6px; color: var(--color-text-muted); font-family: var(--font-mono); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
.project-facts strong { display: block; font-size: 12px; font-weight: 600; line-height: 1.45; }

.project-agent { margin-bottom: 18px; padding: 19px 20px; border: 1px solid color-mix(in srgb, var(--color-accent) 24%, var(--color-border)); border-radius: var(--radius-lg); background: var(--color-surface); }
.project-agent__head { display: grid; grid-template-columns: 36px 1fr; gap: 11px; align-items: start; margin-bottom: 13px; }
.project-agent__head h2 { margin: 1px 0 4px; font-size: 16px; }
.project-agent__head p { margin: 0; color: var(--color-text-muted); font-size: 10px; }
.project-agent__input { width: 100%; min-height: 78px; padding: 12px 13px; border: 1px solid var(--color-border); border-radius: var(--radius-md); outline: 0; background: var(--color-base); color: var(--color-text); font: inherit; resize: vertical; }
.project-agent__input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-soft); }
.project-agent__foot { display: flex; gap: 14px; align-items: center; justify-content: space-between; margin-top: 9px; }
.project-agent__foot > span { color: var(--color-text-muted); font-size: 9px; }
.project-agent__actions { display: flex; gap: 8px; align-items: center; }

.project-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, 340px); gap: 18px; align-items: start; }
.project-workspace__primary, .project-workspace__aside { display: grid; gap: 18px; min-width: 0; }
.project-card { min-width: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.project-card__head { display: flex; min-height: 54px; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid var(--color-border); }
.project-card__head h2 { margin: 0; font-size: 15px; }
.agents-heading, .section-heading { display: flex; align-items: center; gap: 18px; min-width: 0; }
.agents-tabs, .section-tabs { display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-subtle); }
.agents-tab, .section-tab { min-height: 30px; padding: 5px 12px; border: 0; border-radius: calc(var(--radius-md) - 3px); background: transparent; color: var(--color-text-secondary); cursor: pointer; font: inherit; font-size: 12px; white-space: nowrap; }
.agents-tab:hover, .section-tab:hover { color: var(--color-text); }
.agents-tab.is-active, .section-tab.is-active { background: var(--color-surface); color: var(--color-accent); }
.agents-tab-content { padding-top: 14px; }
.control-center-head { margin-bottom: 22px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.control-center-heading { display: flex; align-items: center; gap: 18px; min-width: 0; }
.control-center-tabs { display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-subtle); }
.control-center-tab { min-height: 30px; padding: 5px 12px; border: 0; border-radius: calc(var(--radius-md) - 3px); background: transparent; color: var(--color-text-secondary); cursor: pointer; font: inherit; font-size: 12px; }
.control-center-tab:hover { color: var(--color-text); }
.control-center-tab.is-active { background: var(--color-surface); color: var(--color-accent); }
.control-center-tab-content { padding-top: 0; }
.project-empty { margin: 0; padding: 20px 18px; color: var(--color-text-muted); font-size: 11px; line-height: 1.55; }
.project-task-list { display: grid; }
.project-task { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; min-height: 66px; padding: 10px 16px; border: 0; border-bottom: 1px solid var(--color-border); background: transparent; color: var(--color-text); cursor: pointer; text-align: left; }
.project-task:last-child { border-bottom: 0; }
.project-task:hover { background: var(--color-subtle); }
.project-task__mark { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid var(--color-border); border-radius: 50%; color: var(--color-success); font-size: 11px; }
.project-task__mark.is-open { border-color: color-mix(in srgb, var(--color-warning) 35%, var(--color-border)); color: var(--color-warning); }
.project-task > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }
.project-task strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.project-task small { overflow: hidden; margin-top: 3px; color: var(--color-text-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.project-task__progress { color: var(--color-text-muted); font-family: var(--font-mono); font-size: 8px; }
.project-materials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 14px 16px; }
.project-materials button { overflow: hidden; padding: 9px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-base); color: var(--color-text-secondary); cursor: pointer; font: inherit; font-size: 10px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.project-materials button:hover { border-color: var(--color-border-strong); color: var(--color-text); }
.project-document { margin: 0 16px 16px; padding: 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-base); }
.project-document h3 { margin: 0 0 10px; }
/* Материал проекта и файл раздела читают глазами, а не сканируют: раньше оба
   валились сырым текстом моноширинным 11–13px, без заголовков и таблиц.
   Рендерер отдаёт «#» как h3, поэтому иерархию задаём здесь явно —
   иначе заголовок неотличим от абзаца. */
.project-document .md, .item-content.md {
  max-height: 56vh; overflow: auto; white-space: normal; word-break: break-word;
  color: var(--color-text); font-family: var(--font-sans); font-size: 15px; line-height: 1.7;
}
.project-document .md > :first-child, .item-content.md > :first-child { margin-top: 0; }
.project-document .md h3, .item-content.md h3 { margin: 20px 0 8px; font-size: 20px; }
.project-document .md h4, .item-content.md h4 { margin: 16px 0 7px; font-size: 17px; }
.project-document .md h5, .item-content.md h5,
.project-document .md h6, .item-content.md h6 { margin: 14px 0 6px; font-size: 15px; }
.project-document .md th, .item-content.md th,
.project-document .md td, .item-content.md td { font-size: 14px; }
.project-document .md code, .item-content.md code { font-size: 13px; }
.project-team { display: grid; gap: 10px; padding: 14px; }
.project-agent-card { padding: 13px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-base); }
.project-agent-card > div { display: flex; align-items: center; gap: 9px; }
.project-agent-card .agent-avatar { width: 30px; height: 30px; flex-basis: 30px; }
.project-agent-card > p { min-height: 32px; margin: 9px 0 12px; color: var(--color-text-muted); font-size: 9px; line-height: 1.5; }
.project-agent-card .button { width: 100%; min-height: 34px; padding: 6px 10px; font-size: 9px; }

/* Задачи — самостоятельный рабочий экран, а не список файлов в боковой панели */
.tasks-hero { display: flex; gap: 28px; align-items: flex-end; justify-content: space-between; margin-bottom: 14px; padding: 22px 24px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--color-surface), color-mix(in srgb, var(--color-accent) 4%, var(--color-surface))); }
.tasks-hero h1 { margin: 3px 0 6px; font-size: clamp(27px, 3vw, 38px); letter-spacing: -.04em; }
.tasks-hero > div > p:last-child { margin: 0; color: var(--color-text-muted); font-size: 11px; }
.tasks-stats { display: flex; flex: 0 0 auto; gap: 24px; }
.tasks-stats span { display: flex; min-width: 54px; flex-direction: column; }
.tasks-stats strong { font-size: 23px; line-height: 1; }
.tasks-stats small { margin-top: 6px; color: var(--color-text-muted); font-size: 8px; text-transform: uppercase; }
.tasks-tools { display: flex; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.tasks-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.tasks-filters button { min-height: 31px; padding: 0 11px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-text-muted); cursor: pointer; font: inherit; font-size: 9px; }
.tasks-filters button.is-active { border-color: color-mix(in srgb, var(--color-accent) 38%, var(--color-border)); background: var(--color-accent-soft); color: var(--color-accent); }
.tasks-tools input { width: min(280px, 42vw); min-height: 34px; padding: 0 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); outline: 0; background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 10px; }
.tasks-tools input:focus { border-color: var(--color-accent); }
/* Три состояния идут сверху вниз, а не колонками: канбан заставляет держать
   в голове горизонталь, а вопрос у владельца один — что сегодня. */
.tasks-board { display: grid; gap: 22px; }
.tasks-bucket__head { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; margin: 0 0 8px; }
.tasks-bucket__head h2 { margin: 0; font-size: 15px; letter-spacing: -.02em; }
.tasks-bucket .text-button { margin-top: 8px; }
.tasks-list { display: grid; gap: 8px; }
.task-card { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; min-height: 82px; padding: 13px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); text-align: left; }
/* Карточка перестала быть одной кнопкой: внутри живут поля задачи, кликается имя. */
.task-card:hover { border-color: var(--color-border-strong); }
.task-card__body > .task-card__title:hover { text-decoration: underline; }
.task-card.is-done { opacity: .68; }
.task-card__mark { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid var(--color-border); border-radius: 50%; color: var(--color-success); }
/* Взятое на сегодня выделено рамкой и точкой: это единственный список, который
   человек держит в голове, и он должен отличаться от очереди с одного взгляда. */
.task-card.is-today { border-color: color-mix(in srgb, var(--color-accent) 34%, var(--color-border)); }
.task-card.is-today .task-card__mark { border-color: color-mix(in srgb, var(--color-accent) 46%, var(--color-border)); color: var(--color-accent); }
.task-card.is-next .task-card__mark { color: var(--color-text-muted); }
.task-card__body { display: flex; min-width: 0; flex-direction: column; }
.task-card__body > .task-card__title { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; background: none; border: 0; padding: 0; margin: 0; text-align: left; cursor: pointer; font-weight: 600; color: inherit; }
.task-card__body > .task-card__title:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 3px; }
/* Карточка агента отзывается на Tab и Enter: клик висел на <article>, и для клавиатуры её не существовало. */
.agent-card[role="button"]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.task-card__body > small { overflow: hidden; margin-top: 5px; color: var(--color-text-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.task-card__meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.task-card__meta em { padding: 3px 6px; border-radius: 999px; background: var(--color-subtle); color: var(--color-text-secondary); font-size: 8px; font-style: normal; }
/* Срок — единственная метка, которая меняет тон: просроченное и «срок
   не обсуждали» должны бросаться в глаза, а не лежать ровно среди полей. */
.task-card__meta em.is-danger { background: color-mix(in srgb, var(--color-danger, #dc2626) 12%, transparent); color: var(--color-danger, #dc2626); }
.task-card__meta em.is-warning { background: color-mix(in srgb, var(--color-warning, #d97706) 14%, transparent); color: var(--color-warning, #d97706); }
.task-card__progress { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; color: var(--color-text-muted); font-family: var(--font-mono); font-size: 9px; }
.task-card__source { padding: 3px 6px; border-radius: 999px; background: var(--color-subtle); color: var(--color-text-muted); font-family: var(--font-sans, inherit); font-size: 8px; font-style: normal; }
/* Поля задачи прямо в списке: перенести задачу можно там, где на неё смотришь. */
.task-card__controls { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.task-select { max-width: 150px; padding: 3px 6px; border: 1px solid var(--color-border); border-radius: var(--radius-sm, 6px); background: var(--color-base); color: var(--color-text-secondary); font-family: inherit; font-size: 9px; cursor: pointer; }
.task-select:hover { border-color: var(--color-border-strong); }
.tasks-empty { padding: 30px; border: 1px dashed var(--color-border); border-radius: var(--radius-md); color: var(--color-text-muted); text-align: center; }
/* Предел «Сегодня» держит ядро, поэтому окно не извиняется, а показывает те
   самые пять и даёт выбрать, что отпустить. */
.today-full { min-width: min(520px, 92vw); }
.today-full__list { display: grid; gap: 8px; }
.today-full__row { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.today-full__row > span { display: flex; min-width: 0; flex-direction: column; }
.today-full__row strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.today-full__row small { margin-top: 3px; color: var(--color-text-muted); font-size: 9px; }
.today-full__row .button { flex: 0 0 auto; }

/* Страница «Чат»: диалог по центру, беседы слева, всё управление в блоке ввода. */
.chat-layout { display: flex; flex-direction: column; gap: 22px; }

/* Чат занимает экран целиком: лента читается во всю высоту, поле ввода прижато
   к низу (просьба Александра 30.07 — «опустить панель ввода в самый низ, а то
   читать неудобно»). Высота блокируется ТОЛЬКО в открытой беседе: на стартовом
   экране страница обязана прокручиваться к списку бесед, иначе длинный список
   обрежется и станет недоступен. dvh — чтобы на телефоне не мешала адресная строка. */
/* column обязателен: в строчном флексе лента получала ширину по содержимому
   и съезжала в половину экрана вместо полной. */
#chatView { display: flex; flex-direction: column; min-height: 0; }
/* 420 px — рост стартового экрана на просторном окне: приветствие и поле ввода
   стоят единым блоком по центру. Но это ПОТОЛОК, а не обязательство. Жёсткими
   420 px низ панели выталкивало за кромку окна: при высоте 500 px панель
   кончалась на 526-й точке, то есть на 26 px ниже края, и до поля ввода
   приходилось прокручивать страницу (Q-45). Берём меньшее из двух — желаемых
   420 и того, что реально осталось от окна: шапка 64 + отступы .main 42 сверху
   и 72 снизу = 178. На высоком окне вид прежний, на низком панель не требует
   места, которого нет, и укладывается по своему содержимому. */
.chat-panel { height: auto; min-height: min(420px, 100dvh - 178px); }
/* Открытая беседа — не страница-документ, и отступы документа здесь работают
   против чтения (Q-49). Сверху над лентой стояло 42 px пустой полосы, снизу под
   блоком ввода — 64: 22 своих плюс 42, которые оставляла формула высоты, считая
   шапку полной. Оставляем по краям ровно столько, чтобы текст не упирался
   в кромку: 8 сверху (плюс 4 своих у ленты) и 10 снизу. Правило смотрит на
   :not(.is-empty), поэтому стартовый экран сохраняет прежние 42/72 — и число
   178 выше, посчитанное для него, остаётся верным. */
.main:has(.chat-panel:not(.is-empty)) { padding-top: 8px; padding-bottom: 10px; }
#chatView:has(.chat-panel:not(.is-empty)) { flex: 1; min-height: 0; }
/* 40 = тонкая шапка 22 + отступы .main 8 сверху и 10 снизу. В открытой беседе
   шапка ВСЕГДА тонкая: режим чтения включается ровно там же, где снимается
   .is-empty (chat.js). Раскрытие по наведению содержимое не двигает — см.
   .topbar.is-slim:hover. */
.chat-layout:has(.chat-panel:not(.is-empty)) { height: calc(100dvh - 40px); }
.chat-layout:has(.chat-panel:not(.is-empty)) .chat-panel { flex: 1; min-height: 0; }

/* Правило, прятавшее быстрые кнопки и список бесед в открытой беседе, убрано
   вместе с ними: кнопок под полем ввода больше нет (запись Александра 12.08),
   а список бесед давно живёт в боковой панели. */
/* Беседы — под диалогом (решение владельца 27.07): страница и так открывает
   новый чат, боковая колонка ей не нужна. */
.chat-history__list { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); margin-top: 8px; }
.chat-history__item { display: flex; overflow: hidden; flex-direction: column; padding: 9px 11px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); cursor: pointer; font: inherit; text-align: left; }
.chat-history__item:hover { border-color: var(--color-border-strong); }
.chat-history__item strong { overflow: hidden; font-size: 11px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.chat-history__item small { margin-top: 3px; color: var(--color-text-muted); font-size: 9px; }
/* Строка беседы: название открывает разговор, карандаш переименовывает, три
   точки дают остальное. Значки появляются при наведении — в покое список
   остаётся списком названий (ТЗ 11.08, п. 4). */
.chat-side__item { position: relative; display: grid; grid-template-columns: 1fr auto auto; align-items: center; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--color-text); text-align: left; }
.chat-side__item:hover { background: var(--color-subtle); }
.chat-side__item.is-active { border-color: var(--color-border); background: var(--color-surface); }
.chat-side__item.is-archived .chat-side__open { opacity: .6; }
.chat-side__open { display: flex; min-width: 0; flex-direction: column; padding: 9px 4px 9px 11px; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; text-align: left; }
.chat-side__open strong { overflow: hidden; font-size: 11px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.chat-side__open small { margin-top: 3px; overflow: hidden; color: var(--color-text-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.chat-side__item.is-pinned .chat-side__open strong::before { content: "★ "; color: #eab308; }
.chat-side__act { padding: 2px 5px; border: 0; border-radius: 4px; opacity: 0; background: transparent; color: var(--color-text-muted); cursor: pointer; font: inherit; font-size: 11px; }
.chat-side__item:hover .chat-side__act, .chat-side__act:focus-visible { opacity: 1; }
.chat-side__act:hover { background: var(--color-elevated, var(--color-surface)); color: var(--color-text); }
.chat-side__act:last-child { margin-right: 6px; }
.chat-side__rename { grid-column: 1 / -1; margin: 6px; padding: 5px 7px; border: 1px solid var(--color-accent); border-radius: var(--radius-sm); background: var(--color-base); color: var(--color-text); font: inherit; font-size: 11px; outline: none; }
.chat-side__archive { width: 100%; margin-top: 4px; padding: 6px 11px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-text-muted); cursor: pointer; font: inherit; font-size: 10px; text-align: left; }
.chat-side__archive:hover { background: var(--color-subtle); color: var(--color-text); }
/* Меню беседы: над строкой, поверх соседей. */
.chat-menu { position: absolute; top: calc(100% - 4px); right: 6px; z-index: 32; display: flex; min-width: 170px; flex-direction: column; padding: 5px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-elevated, var(--color-surface)); box-shadow: 0 14px 34px rgb(0 0 0 / .32); }
.chat-menu button { padding: 7px 9px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-text); cursor: pointer; font: inherit; font-size: 12px; text-align: left; }
.chat-menu button:hover { background: var(--color-subtle); }
.chat-menu button:last-child:hover { color: var(--color-danger); }

.chat-panel { display: flex; min-width: 0; flex-direction: column; gap: 14px; }
.chat-stream { display: flex; overflow-y: auto; flex: 1; flex-direction: column; gap: 14px; padding: 4px; }
.chat-hello { margin: auto; max-width: 460px; text-align: center; }
.chat-hello h1 { margin-bottom: 8px; font-size: 26px; }
/* Вторая строка приветствия — тем же голосом, что и первая: это приглашение
   к работе, а не подпись под ней. */
.chat-hello__invite { margin-bottom: 0; }
.chat-hello p { color: var(--color-text-muted); font-size: 12px; }
.chat-msg { display: flex; }
.chat-msg--user { justify-content: flex-end; }
/* Крупный шрифт диалога — по просьбе Александра (зрение): как в чате
   Claude Code, ~16px с воздухом. Плотность здесь вторична, читаемость — нет. */
.chat-msg__body { max-width: 76%; padding: 12px 16px; border-radius: 16px; font-size: 16px; line-height: 1.7; white-space: pre-wrap; }
.chat-msg--user .chat-msg__body { background: var(--color-subtle); }
.chat-msg--agent .chat-msg__body { max-width: 100%; padding-left: 0; background: transparent; }
/* Персонализация контура: тон, характеристики, память, свои инструкции. */
.persona-dialog { max-width: 560px; }
.persona-body { display: grid; gap: 8px; max-height: 62vh; overflow: auto; margin: 12px 0; }
.persona-label { display: block; margin-top: 8px; font-size: 13px; }
.persona-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.persona-style { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-base); color: var(--color-text); cursor: pointer; font: inherit; text-align: left; }
.persona-style:hover { border-color: var(--color-border-strong); }
.persona-style.is-on { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-accent); }
.persona-style small { color: var(--color-text-muted); font-size: 11px; line-height: 1.35; }
.persona-style.is-on small { color: inherit; opacity: .85; }
.persona-own { width: 100%; padding: 9px 11px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 13px; }
.persona-traits { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px; }
.persona-trait { display: grid; grid-template-columns: 16px 1fr; align-items: center; gap: 9px; padding: 7px 8px; border-radius: var(--radius-md); cursor: pointer; font-size: 13px; }
.persona-trait:hover { background: var(--color-subtle); }
.persona-trait input { width: 16px; height: 16px; accent-color: var(--color-accent); cursor: pointer; }
.persona-memory { margin-top: 6px; }
.persona-instructions { width: 100%; padding: 11px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 14px; line-height: 1.6; resize: vertical; }

/* --- Живой прогон: индикатор, лента работы, остановка --- */
/* «Думаю» переливается спокойным градиентом из цветов системы: видно, что
   работа идёт, а не зависла. Ширина и положение не меняются, чтобы текст
   не прыгал при появлении (ТЗ, пп. 4.2 и 5.1). */
.run-indicator { display: flex; align-items: center; gap: 8px; min-height: 27px; font-size: 16px; line-height: 1.7; }
.run-indicator__label {
  background: linear-gradient(100deg,
    var(--color-text-muted) 20%,
    var(--color-accent) 40%,
    var(--color-text) 55%,
    var(--color-text-muted) 75%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: run-shimmer 2.1s linear infinite;
}
.run-indicator__dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--color-accent); animation: run-pulse 1.6s ease-in-out infinite; }
.run-indicator__hint { color: var(--color-text-muted); font-size: 12px; }
@keyframes run-shimmer { from { background-position: 130% 0; } to { background-position: -30% 0; } }
@keyframes run-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
/* Просили не двигать — не двигаем: остаётся читаемый текст и мягкая точка. */
@media (prefers-reduced-motion: reduce) {
  .run-indicator__label { animation: none; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--color-text-secondary); }
  .run-indicator__dot { animation: none; opacity: .7; }
}

/* Лента работы с интернетом: настоящий запрос и настоящие адреса. */
.tool-feed { margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-subtle); font-size: 12px; }
.tool-feed__query { margin-bottom: 6px; color: var(--color-text-secondary); }
.tool-feed__list { display: grid; gap: 4px; }
.tool-feed.is-collapsed .tool-feed__list { display: none; }
.tool-feed.is-collapsed.is-open .tool-feed__list { display: grid; margin-top: 8px; }
.tool-feed__toggle { border: 0; background: transparent; padding: 0; color: var(--color-text-secondary); cursor: pointer; font: inherit; font-size: 12px; text-decoration: underline dotted; }
.tool-feed__item { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.tool-feed__item.is-active .tool-feed__name { color: var(--color-text); }
.tool-feed__item.is-failed .tool-feed__mark { color: var(--color-danger); }
.tool-feed__mark { width: 12px; flex: none; color: var(--color-text-muted); font-family: var(--font-mono); }
.tool-feed__name { display: flex; min-width: 0; gap: 8px; align-items: baseline; overflow: hidden; }
.tool-feed__name small { color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-feed__item.is-active .tool-feed__mark { animation: run-pulse 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .tool-feed__item.is-active .tool-feed__mark { animation: none; } }

/* Кнопка отправки в режиме остановки: тот же круг, другой смысл. */
.composer__send[data-mode="stop"] { background: var(--color-danger, #b3261e); }

/* Ответ агента — документ, а не лог: заголовки, списки и таблицы должны
   читаться глазами (замечание Александра 11.08). Рендерер уже отдаёт разметку,
   но она наследовала pre-wrap и сливалась в сплошное полотно. */
.chat-msg__body.md { white-space: normal; }
.chat-msg__body.md > :first-child { margin-top: 0; }
.chat-msg__body.md > :last-child { margin-bottom: 0; }
.chat-msg__body.md p { margin: 0 0 12px; }
.chat-msg__body.md h3 { margin: 20px 0 8px; font-size: 19px; line-height: 1.35; }
.chat-msg__body.md h4 { margin: 16px 0 7px; font-size: 17px; }
.chat-msg__body.md h5, .chat-msg__body.md h6 { margin: 14px 0 6px; font-size: 15px; }
.chat-msg__body.md ul, .chat-msg__body.md ol { margin: 0 0 12px; padding-left: 22px; }
.chat-msg__body.md li { margin: 4px 0; }
.chat-msg__body.md li > p { margin: 0; }
/* Вложенный список прижат к своему пункту: отступ снизу здесь лишний. */
.chat-msg__body.md li > ul, .chat-msg__body.md li > ol { margin: 4px 0 0; }
/* «- [ ] пункт»: маркер списка заменяет сам чекбокс. */
.chat-msg__body.md li.md-task { list-style: none; margin-left: -22px; padding-left: 22px; text-indent: -22px; }
.chat-msg__body.md li.md-task input { width: 14px; height: 14px; margin-right: 8px; text-indent: 0; vertical-align: baseline; accent-color: var(--color-accent); }
/* Разделитель разделов ответа — тонкая линия, а не три дефиса текстом. */
.chat-msg__body.md hr { margin: 20px 0; border: 0; border-top: 1px solid var(--color-border); }
.chat-msg__body.md del { opacity: .65; }
.chat-msg__body.md pre { margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-subtle); overflow-x: auto; font-size: 13px; }
.chat-msg__body.md code { padding: 1px 5px; border-radius: 5px; background: var(--color-subtle); font-size: 13px; }
.chat-msg__body.md pre code { padding: 0; background: transparent; }
.chat-msg__body.md table { display: block; width: max-content; max-width: 100%; margin: 0 0 12px; border-collapse: collapse; overflow-x: auto; font-size: 14px; }
.chat-msg__body.md th, .chat-msg__body.md td { padding: 7px 12px; border: 1px solid var(--color-border); text-align: left; }
.chat-msg__body.md th { background: var(--color-subtle); font-weight: 600; }
.chat-msg__body.md blockquote { margin: 0 0 12px; padding: 2px 0 2px 14px; border-left: 3px solid var(--color-border); color: var(--color-text-secondary); }
.chat-msg__body.md a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
/* Внешняя ссылка помечена значком: видно, что уход из системы (ТЗ, п. 4.4). */
.chat-msg__body.md a[target="_blank"]::after { content: "↗"; margin-left: 3px; font-size: .85em; opacity: .7; }
/* Имя, которое система знает: ведёт внутрь, поэтому подчёркнуто мягче
   и без значка внешней ссылки. */
.md a.known-name { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-decoration-color: var(--color-accent); text-underline-offset: 3px; }
.md a.known-name:hover { color: var(--color-accent); }

/* Фокус дня отдельным разделом: выключатель под заголовком. */
.focus-toggle { display: inline-flex; align-items: center; gap: 9px; margin: 12px 0 16px; cursor: pointer; color: var(--color-text-secondary); font-size: 13px; }
.focus-toggle input { width: 16px; height: 16px; accent-color: var(--color-accent); cursor: pointer; }
#focusView .coach-card { display: block; max-width: 820px; }

/* Всё внутри рамки: над полем ввода не должно быть ничего. */
.composer { position: relative; padding: 12px 14px 10px; border: 1px solid var(--color-border); border-radius: 20px; background: var(--color-surface); }
.composer:focus-within { border-color: var(--color-border-strong); }
/* Поле и всё управление — одной строкой, как у привычных ассистентов: в покое
   ввод занимает минимум, экран остаётся под ответ (правка 11.08). При наборе
   поле растёт под текст, кнопки прижаты к его нижнему краю. */
.composer { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; }
.composer__input { flex: 1 1 170px; min-width: 0; min-height: 26px; height: 26px; padding: 2px 0; border: none; background: transparent; color: inherit; font: inherit; font-size: 16px; line-height: 1.55; overflow-y: hidden; resize: none; outline: none; }
/* Подсказка по центру поля (просьба Александра 13.08): на широком окне она
   висела у левого края сразу за «＋» и выглядела сдвинутой. Центрируем именно
   ПСЕВДОЭЛЕМЕНТ, а не поле: у поля выравнивание остаётся левым, поэтому курсор
   с самого начала стоит там, где появится первый символ, и текст при вводе
   никуда не прыгает. Только чат: у поля проекта тот же класс, но своя подсказка
   про конкретный проект — ей центр не нужен. */
.chat-panel .composer__input::placeholder { text-align: center; }
.composer.is-writing .composer__input { flex-basis: 100%; }
.composer.is-writing .composer__row { flex: 1 1 auto; justify-content: flex-end; }
.composer__row { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.composer__select { padding: 4px 8px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-base); color: var(--color-text-secondary); font-family: inherit; font-size: 10px; cursor: pointer; }
.composer__select:hover { border-color: var(--color-border-strong); }
/* Собеседник, модель и проект — в меню «+»: их меняют реже, чем в каждом
   втором сообщении, а место в строке они занимали всегда (решение Александра
   11.08). Из строки список собеседников убран, но не из интерфейса: «@имя»
   зовёт только того, у кого имя есть, а «Без агента» — это его отсутствие. */
.composer__menu-field { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 6px 10px; color: var(--color-text-muted); font-size: 11px; }
.composer__menu-select { max-width: 170px; padding: 4px 8px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-base); color: var(--color-text); font-family: inherit; font-size: 11px; cursor: pointer; }
.composer__menu-select:hover { border-color: var(--color-border-strong); }
/* Подпись под моделью — только для режима «Без агента»: там модель и есть весь
   выбор, и человек должен знать, что вместе с ролью ушли и материалы контура. */
.composer__menu-note { display: block; max-width: 230px; padding: 0 10px 6px; color: var(--color-text-muted); font-size: 10px; line-height: 1.35; }
.composer__menu-note[hidden] { display: none; }
.composer__state { color: var(--color-text-muted); font-size: 9px; }
.composer__voice { display: grid; width: 30px; height: 30px; flex: none; place-items: center; border: 1px solid var(--color-border); border-radius: 50%; background: transparent; color: var(--color-text-secondary); font-size: 12px; cursor: pointer; }
.composer__voice:hover { border-color: var(--color-border-strong); }
.composer__voice.is-recording { border-color: var(--color-danger); color: var(--color-danger); }
/* Отправка — крупным значком в конце строки управления, внутри рамки поля.
   40 пикселей: попадаешь и мышью, и пальцем. Из абсолютного угла её вернули
   в поток, когда управление переехало в одну строку с полем (правка 11.08). */
.composer__send { display: grid; width: 40px; height: 40px; flex: none; place-items: center; border: none; border-radius: 50%; background: var(--color-text); color: var(--color-base); font-size: 17px; line-height: 1; cursor: pointer; transition: transform var(--transition), opacity var(--transition); }
.composer__send:hover:not(:disabled) { transform: scale(1.06); }
.composer__send:disabled { opacity: .45; cursor: default; }
/* Микрофон рядом — тоже крупнее прежнего, чтобы пара смотрелась одинаково. */
.composer__voice { width: 34px; height: 34px; font-size: 13px; }



/* Предложение агента: заметно, но не как ответ — это карточка с решением. */
.suggestion-card { margin: 0 0 12px; padding: 13px 15px; border: 1px solid color-mix(in srgb, var(--color-accent, #0f766e) 35%, var(--color-border)); border-left-width: 3px; border-radius: var(--radius-md); background: var(--color-surface); }
.suggestion-card__head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.suggestion-card > strong { display: block; font-size: 12px; }

/* Омнибокс: поле «спросить / найти / создать» */
.omnibox { margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface, var(--color-base)); }
.omnibox textarea { width: 100%; border: none; background: transparent; color: inherit; font: inherit; resize: none; outline: none; }
.omnibox__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.omnibox__agent { margin-left: auto; padding: 6px 10px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-base); color: inherit; font: inherit; max-width: 200px; }
.omnibox__dialog { border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-base); color: inherit; padding: 20px; min-width: min(440px, 92vw); }
.omnibox__dialog::backdrop { background: rgba(0,0,0,.45); }
.omnibox__dialog h3 { margin: 0 0 12px; }
/* Поля ввода в окнах тянутся на всю ширину — но галочки и переключатели
   полями не являются: их растягивало тем же правилом на 160 пикселей, из-за
   чего подписи разъезжались и блок «Что усилить» выглядел кривым. */
.omnibox__dialog input:not([type="checkbox"]):not([type="radio"]), .omnibox__dialog textarea { width: 100%; margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 8px; background: transparent; color: inherit; font: inherit; }
.omnibox__agents { display: grid; gap: 6px; margin: 4px 0 10px; max-height: 180px; overflow: auto; }
.omnibox__agents label { display: flex; gap: 6px; align-items: center; font-size: 13px; }
.omnibox__note { color: var(--color-text-muted); font-size: 12px; margin: 0 0 12px; }
/* Отказ не должен выглядеть как подсказка: приглушённый серый текст внизу
   человек не замечает и жмёт кнопку повторно. */
.omnibox__note--error { color: var(--color-danger, #b3261e); font-weight: 500; }
#businessSub a.is-active { color: var(--color-text); font-weight: 600; }

/* Закрепление агентов */
.pin-button { border: none; background: none; cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 4px; color: var(--color-text-muted); }
.pin-button:hover { color: var(--color-text); }
.agent-card.is-pinned { border-color: var(--color-accent, #0f766e); }
.agent-card.is-pinned .pin-button { color: #eab308; }

/* Диалог агента — рабочее место, а не боковая справка: по умолчанию 2/3 экрана */
#agentSheet { width: min(66.666vw, 100vw); }
#agentSheet.is-full { width: 100vw; border-left: none; }
@media (max-width: 900px) { #agentSheet { width: 100vw; } }
.agent-sheet__head { display: flex; min-height: 72px; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--color-border); }
.agent-sheet__head > div { display: flex; align-items: center; gap: 10px; }
.agent-sheet__head h2 { margin: 0; font-size: 14px; }
.agent-sheet__head p { margin: 1px 0 0; color: var(--color-text-muted); font-size: 10px; }
.agent-sheet__head p .status-dot { margin-right: 3px; }
.agent-sheet__body { flex: 1; overflow-y: auto; padding: 20px 16px; }
.conversation { display: grid; gap: 14px; }
.message { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; }
.message p { margin: 0; padding: 11px 13px; border: 1px solid var(--color-border); border-radius: 4px 10px 10px; background: var(--color-surface); color: var(--color-text-secondary); font-size: 12px; }
.agent-output { margin: 14px 0; white-space: pre-wrap; color: var(--color-text-secondary); font-size: 12px; }
.agent-output:not(:empty) { padding: 13px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.upload-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.upload-row label { font-size: 11px; cursor: pointer; }
.upload-row span { color: var(--color-text-muted); font-size: 9px; }
.composer { padding: 12px 16px 16px; border-top: 1px solid var(--color-border); background: var(--color-surface); }
/* Поле диалога агента. Адресуем классом, а не `.composer textarea`: тот
   селектор специфичнее `.composer__input` и молча навязывал полю чата свои
   рамку и отступы — пустое поле выходило 47px вместо 26 и рисовало рамку
   внутри рамки. Тот же случай, что был с `.composer > div`.
   Размер шрифта здесь НЕ задаём — по той же причине. */
.agent-composer__input { width: 100%; resize: none; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); outline: 0; background: var(--color-base); color: var(--color-text); }
.agent-composer__input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-soft); }
/* Подвал поля ввода в диалоге агента. Раньше правило было записано как
   `.composer > div` и цепляло вообще всё, что положат внутрь: список выбора
   агента растягивало в строку с горизонтальной прокруткой, а `display:flex`
   к тому же перебивал `[hidden]` — списки не закрывались. Адресуем классом. */
.composer__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.composer__foot > span { color: var(--color-text-muted); font-size: 9px; }
.toast-region { position: fixed; right: 20px; bottom: 20px; z-index: 70; display: grid; gap: 8px; }
.toast { min-width: 260px; padding: 11px 13px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-elevated); box-shadow: var(--shadow-overlay); color: var(--color-text-secondary); font-size: 11px; animation: toast-in 180ms ease-out; }
.toast strong { color: var(--color-text); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }

@media (max-width: 1050px) {
  .app-shell { padding-left: 68px; }
  .sidebar { width: 68px; }
  .sidebar__head { padding: 0; justify-content: center; }
  .brand__text, .sidebar__collapse, .nav__label, .nav__item > span:not(.nav__icon), .nav__sub, .trust-card, .profile > span:not(.avatar) { display: none; }
  /* Узкий сайдбар — только иконки: текстовому списку чатов в нём не место. */
  .nav__chats { display: none; }
  .brand__col { display: none; }
  .brand__mark { display: flex; }
  .nav__item { justify-content: center; padding-inline: 0; }
  .profile { justify-content: center; }
  .brief-card__body { grid-template-columns: 1fr; gap: 18px; }
  .content-grid { grid-template-columns: 1fr; }
  .project-workspace { grid-template-columns: 1fr; }
  .project-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .proactivity-panel__head { flex-direction: column; }
  .proactivity-agent { grid-template-columns: 22px 1fr; }
  .proactivity-agent label, .proactivity-agent > small { grid-column: 2; }
  body { padding-bottom: 62px; }
  .app-shell { padding-left: 0; }
  .sidebar { display: none; }
  .topbar { height: 56px; padding: 0 16px; }
  .breadcrumbs span, .breadcrumbs b, .execution-state, .command-trigger span:nth-child(2) { display: none; }
  .command-trigger { min-width: 74px; }
  .main { padding: 26px 16px 48px; }
  /* 102 = тонкая шапка 22 + отступы .main 8 и 10 + нижняя навигация 62.
     Навигация в расчёте появилась в Q-49: прежние 104 её не знали, и низ блока
     ввода уходил под неё на 6 px (Q-46) — теперь между ними 10 px. Полная
     высота шапки (56) здесь ни при чём: в открытой беседе она тонкая. */
  .chat-layout:has(.chat-panel:not(.is-empty)) { height: calc(100dvh - 102px); }
  /* Обвязка стартового экрана на телефоне своя: шапка 56 + отступы .main 26
     и 48 + нижняя навигация 62 = 192. */
  .chat-panel { min-height: min(420px, 100dvh - 192px); }
  .page-heading { align-items: start; }
  .page-heading .button { width: 38px; min-height: 38px; padding: 0; overflow: hidden; font-size: 0; }
  .page-heading .button span { font-size: 14px; }
  .brief-card__head { padding: 19px 18px 12px 21px; }
  .verified { display: none; }
  .brief-card__body { padding: 6px 18px 18px 21px; }
  .brief-card__foot { padding: 11px 18px 11px 21px; }
  .brief-card__foot > span { display: none; }
  .metrics-grid, .agent-grid, .agents-list { grid-template-columns: 1fr; }
  .project-card__head:has(.agents-heading), .project-card__head:has(.section-heading) { align-items: flex-start; flex-direction: column; gap: 8px; padding-block: 12px; }
  .agents-heading, .section-heading { align-items: flex-start; flex-direction: column; gap: 8px; width: 100%; }
  .agents-tabs, .section-tabs { width: 100%; }
  .agents-tab, .section-tab { flex: 1; }
  .control-center-head { align-items: flex-start; flex-direction: column; gap: 8px; padding-block: 12px; }
  .control-center-heading { align-items: flex-start; flex-direction: column; gap: 8px; width: 100%; }
  .control-center-tabs { width: 100%; }
  .control-center-tab { flex: 1; }
  .primary-agent__foot { align-items: stretch; flex-direction: column; }
  .primary-agent__actions { width: 100%; }
  .primary-agent__actions .engine-select { min-width: 0; flex: 1; }
  /* Подсказка чата в одну строку на телефоне не помещается: поле шириной
     254 px, текст — 454. Пустому полю даём две строки (24,8 + 24,8 + отступы),
     и подсказка читается целиком, а не обрывается на полуслове.
     Высота задана БЕЗУСЛОВНО, а не только пустому полю: иначе первый же символ
     ронял бы рамку с двух строк на одну — тот самый рывок при вводе, от
     которого мы уходим. Цена — 25 px высоты на телефоне; текст подсказки задан
     владельцем дословно и в одну строку 375 px не помещается ничем, кроме
     нечитаемого кегля (замер: поле 296 px, текст 454 px). */
  .chat-panel .composer__input { min-height: 54px; }
  .composer__foot { align-items: stretch !important; flex-direction: column; }
  .composer__actions { justify-content: flex-end; }
  .composer__actions .engine-select { min-width: 0; flex: 1; }
  .project-hero { padding: 18px; }
  .project-hero__top { flex-direction: column; gap: 12px; }
  .project-facts { grid-template-columns: 1fr; }
  .project-agent__foot { align-items: stretch; flex-direction: column; }
  .project-agent__actions { width: 100%; }
  .project-agent__actions .engine-select { min-width: 0; flex: 1; }
  .project-materials, .project-team { grid-template-columns: 1fr; }
  .project-task { grid-template-columns: 26px minmax(0, 1fr); }
  .project-task__progress { display: none; }
  .tasks-hero { align-items: stretch; flex-direction: column; }
  .tasks-stats { justify-content: space-between; }
  .tasks-tools { align-items: stretch; flex-direction: column; }
  .tasks-tools input { width: 100%; }
  .task-card { grid-template-columns: 28px minmax(0, 1fr); }
  /* Раньше правая колонка на телефоне просто пряталась — вместе с ней исчезал
     и перенос между состояниями, то есть единственное действие экрана.
     Переносим её под текст, а не выключаем. */
  .task-card__progress { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; }
  .task-card__controls { flex-direction: row; align-items: center; }
  .today-full__row { align-items: stretch; flex-direction: column; }
  .metric-card { min-height: auto; }
  .attention-item { grid-template-columns: 32px 1fr 16px; }
  .attention-item time { display: none; }
  .mobile-nav { position: fixed; inset: auto 0 0; z-index: 30; display: grid; height: 62px; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-base) 95%, transparent); backdrop-filter: blur(14px); }
  .mobile-nav a, .mobile-nav button { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 2px; border: 0; background: transparent; color: var(--color-text-muted); font-size: 9px; }
  .mobile-nav span { font-size: 15px; }
  .mobile-nav .is-active { color: var(--color-accent); }
}

/* Карточка бизнеса / агента / навыка / задачи */
.item-content {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 13px;
  line-height: 1.65;
  margin: 0;
  padding: 0;
  color: inherit;
  background: transparent;
}
.command-result-kind {
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .55;
}

/* Строка списка внутри раздела */
.section-row {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  margin: 0 0 6px;
  border: 1px solid var(--border, rgba(128,128,128,.2));
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.section-row:hover { background: rgba(128,128,128,.08); }
.section-row strong { display: block; font-weight: 500; }
.section-row small { display: block; opacity: .65; margin-top: 2px; }
.section-row em { display: block; opacity: .45; font-style: normal; font-size: 12px; margin-top: 4px; }

/* Ссылка «Все бизнесы» в подменю */
.nav__sub-all { opacity: .6; font-size: 13px; }
.nav__sub-all:hover { opacity: 1; }

/* Действия в шапке проекта (создание подпроекта + статус) */
.project-hero__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* CRM Lite */
.crm-list { display: grid; gap: 8px; margin-top: 10px; }
.crm-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.crm-row > div, .crm-row__open { display: grid; min-width: 0; }
/* Кнопка вместо div: доступна с клавиатуры, но выглядеть должна строкой,
   а не кнопкой — иначе список превращается в панель управления. */
.crm-row__open { background: none; border: 0; padding: 0; margin: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; justify-items: start; }
.crm-row__open:hover strong { text-decoration: underline; }
.crm-row__open:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 4px; }
.button.is-danger { color: var(--color-danger, #b3261e); }
.crm-row strong { font-size: 13px; }
.crm-row small { color: var(--color-text-muted); font-size: 11px; }
.crm-when { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; }
.crm-when.is-late { color: var(--color-danger, #ef4444); font-weight: 600; }
.crm-when.is-none { opacity: .6; }
.crm-stage { padding: 5px 8px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-base); color: inherit; font: inherit; font-size: 12px; }
.crm-stage-label { padding: 3px 9px; border: 1px solid var(--color-border); border-radius: 999px; font-size: 11px; color: var(--color-text-secondary); white-space: nowrap; }
#contactDialog input, #contactDialog select, #contactDialog textarea { width: 100%; margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 8px; background: transparent; color: inherit; font: inherit; }

/* «Сейчас важно» — единственный блок фокуса на дашборде (v2) */
.now-card { margin-bottom: 18px; padding: 20px 22px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
/* Коуч-блок стартового экрана: живёт внутри чата и виден только до начала
   разговора — как приветствие. Метрики строкой, вторым планом. */
.coach-card { display: none; padding: 18px 20px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.chat-panel.is-empty .coach-card { display: block; width: min(100%, 720px); margin: 6px auto 0; text-align: left; }
.coach-card .now-card__head { margin-bottom: 12px; }
.coach-card .now-card__head h2 { font-size: 15px; }
.coach-metrics { display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 11px; }
.coach-metrics > span:first-child { display: flex; align-items: baseline; gap: 6px; }
.coach-metrics strong { color: var(--color-text); font-size: 15px; }
.coach-metrics .task-stats { gap: 18px; padding-top: 0; }
.coach-metrics .task-stats strong { font-size: 15px; }
.coach-metrics__date { margin-left: 2px; }
.now-card__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.now-card__head h2 { margin: 0; font-size: 19px; }
.now-card__meta { display: flex; align-items: center; gap: 12px; color: var(--color-text-muted); font-size: 11px; flex-wrap: wrap; }
.now-points { display: grid; gap: 11px; }
/* Главное — крупным текстом сверху, шаги под ним: сначала ответ на вопрос
   «что сегодня важно», потом из чего это складывается (макет 11.08). */
.now-lead { max-width: 60ch; margin: 0 0 14px; color: var(--color-text); font-size: 17px; line-height: 1.55; }
.now-steps { display: grid; gap: 4px; }
.now-point { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; }
.now-point p { margin: 0; display: grid; gap: 3px; }
.now-point small { color: var(--color-text-muted); font-size: 12px; line-height: 1.5; }
.now-point.is-warning .point-index { border-color: var(--color-danger, #ef4444); color: var(--color-danger, #ef4444); }
/* Шаг — кнопка: ведёт в задачу, поэтому и выглядит нажимаемым. */
.now-point--step { width: 100%; padding: 9px 10px; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: inherit; cursor: pointer; font: inherit; text-align: left; transition: background var(--transition), border-color var(--transition); }
.now-point--step:hover, .now-point--step:focus-visible { border-color: var(--color-border); background: var(--color-subtle); }
.now-point__body { display: grid; gap: 3px; }
.now-point__body strong { font-size: 14px; }
.now-point__task { color: var(--color-text-muted); font-family: var(--font-mono); font-size: 9px; }
.now-more { margin-top: 12px; }

/* Кнопка обратной связи: видна на любом экране — клиент не должен её искать.
   Живёт в шапке, а не плавает в правом нижнем углу: там она лежала поверх поля
   ввода, а на узком окне и на телефоне поле занимает низ экрана целиком. */
.feedback-button { font-size: 14px; line-height: 1; }

/* Дашборд: панель из виджетов, собранная агентом под запрос владельца. */
.dash-card { margin-bottom: 20px; padding: 18px 20px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.dash-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin-top: 14px; }
.dash-widget { padding: 14px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-base); }
.dash-widget--таблица, .dash-widget--срез { grid-column: span 2; }
.dash-metric { display: block; margin-top: 6px; font-size: 30px; line-height: 1.1; }
.dash-list { display: flex; flex-direction: column; gap: 7px; margin-top: 9px; list-style: none; }
.dash-list li { display: flex; flex-direction: column; }
.dash-list strong { font-size: 11px; font-weight: 500; }
.dash-list small { color: var(--color-text-muted); font-size: 9px; }
.dash-bars { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.dash-bar { display: grid; grid-template-columns: 110px 1fr 28px; gap: 8px; align-items: center; font-size: 10px; }
.dash-bar span { overflow: hidden; color: var(--color-text-secondary); text-overflow: ellipsis; white-space: nowrap; }
.dash-bar i { display: block; height: 7px; min-width: 3px; border-radius: 999px; background: var(--color-accent); }
.dash-bar b { color: var(--color-text-muted); font-family: var(--font-mono); font-weight: 400; text-align: right; }
.dash-table { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 10px; }
.dash-table th { padding: 5px 6px; border-bottom: 1px solid var(--color-border); color: var(--color-text-muted); font-weight: 500; text-align: left; }
.dash-table td { padding: 5px 6px; border-bottom: 1px solid var(--color-subtle); }
@media (max-width: 780px) { .dash-widget--таблица, .dash-widget--срез { grid-column: span 1; } }

/* Пустое состояние чата: приветствие и композер по центру, как у образцов. */
.chat-hero { display: none; margin-bottom: 4px; text-align: center; }
.chat-hero h1 { margin-bottom: 8px; font-size: 28px; }
.chat-hero p { color: var(--color-text-muted); font-size: 12px; }
.chat-panel.is-empty { justify-content: center; }
.chat-panel.is-empty .chat-stream { display: none; }
.chat-panel.is-empty .chat-hero { display: block; }

.chat-panel.is-empty .composer,
.chat-panel.is-empty .chat-hero { width: min(100%, 720px); margin-left: auto; margin-right: auto; }

/* Блок ввода чата: текст сверху, строка управления под ним — «＋» слева,
   микрофон и отправка справа (просьба Александра 13.08 со скриншотом ChatGPT).
   Вид один и тот же и в покое, и при наборе: раньше строка стояла СПРАВА от
   поля, а «＋» — над ним, и с первым же символом всё это перестраивалось.
   Теперь при вводе меняется только высота поля. Правило адресует чат, а не
   `.composer` вообще: у композера проекта своя строка с тремя списками,
   и переносить её никто не просил. */
.chat-panel .composer__input { flex-basis: 100%; }
.chat-panel .composer__row { width: 100%; justify-content: flex-end; }
/* Слева стоят «＋» и скрепка — оба про «добавить к сообщению». Распорку до
   правой группы держит последний из левых, поэтому она переехала с «＋»
   на скрепку: оставь её на «＋» — и скрепку унесло бы к кнопке отправки. */
.chat-panel .composer__plus { margin-right: 0; }
.chat-panel .composer__clip { margin-right: auto; }

/* Приложенные картинки — над полем ввода, как в привычных ассистентах: человек
   видит, что уйдёт вместе с вопросом, до отправки, а не после. Своя строка
   (flex-basis: 100%), поэтому строка кнопок и рост поля остаются как были. */
.composer__shots { display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: 8px; margin-bottom: 2px; }
.composer__shots .shots__item.is-pending { opacity: .55; }
/* Отказ — обычным читаемым текстом, а не в `composer__state`: тот в девять
   точек и стоит в ряду кнопок, объяснение там прочитать невозможно. */
.composer__shots-note { flex: 1 1 100%; margin-bottom: 4px; color: var(--color-danger, #b3261e); font-size: 12px; line-height: 1.4; }
.composer.is-dropping { border-color: var(--color-accent); }

/* Миниатюра в самой переписке: и у только что отправленного, и у истории. */
.chat-msg__shots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chat-msg__shots .shots__thumb { max-width: 180px; margin: 0; }

/* Меню «+»: выпадает над рамкой композера. */
.composer { position: relative; }
.composer__plus { font-size: 15px; }
.composer__menu { position: absolute; bottom: calc(100% + 8px); left: 10px; z-index: 6; display: flex; min-width: 230px; flex-direction: column; overflow-y: auto; padding: 6px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-elevated, var(--color-surface)); box-shadow: 0 12px 32px rgb(0 0 0 / .28); }
.composer__menu button { padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--color-text); font-family: inherit; font-size: 11px; cursor: pointer; text-align: left; }
.composer__menu button:hover { background: var(--color-subtle); }

/* Сторону задаёт замер при открытии (placeComposerMenu в chat.js), а не
   состояние экрана. Предпочтение прежнее: на стартовом экране композер стоит
   по центру и меню раскрывается ВНИЗ, чтобы не накрывать приветствие; в
   открытой беседе композер у нижнего края и меню уходит вверх. Но предпочтение
   уступает факту: в невысоком окне «вниз» не помещалось, и «Собеседник» уходил
   за кромку — при высоте окна 500 px меню занимало 495–622, то есть целиком
   ниже видимой части (Q-45). Раньше выбор стороны жил здесь правилом
   `.chat-panel.is-empty`, и окно в нём не участвовало. */
.composer__menu--above { top: auto; bottom: calc(100% + 8px); }
.composer__menu--below { top: calc(100% + 8px); bottom: auto; }

/* Ремень безопасности: спрятанное в поле ввода обязано быть спрятано. Причину
   («.composer > div» перебивал [hidden]) убрали, но правило оставляем — раньше
   из-за неё меню «+» висело открытым всегда, а список агентов не закрывался
   после выбора. */
.composer [hidden] { display: none !important; }
/* Ремень безопасности для всех экранов: спрятанный экран обязан быть спрятан,
   какой бы display ему ни назначили в будущем. */
.workspace-view[hidden] { display: none !important; }
/* Тот же урок для кнопок: .button задаёт display:inline-flex, и без явного
   правила атрибут hidden у кнопки молча не работает. */
.button[hidden] { display: none !important; }

/* Форматированный ответ агента: заголовки, таблицы, списки вместо сырых символов. */
.md { white-space: normal; }
.md p { margin: 0 0 9px; }
.md h3, .md h4, .md h5, .md h6 { margin: 14px 0 7px; line-height: 1.3; }
.md h3 { font-size: 15px; }
.md h4 { font-size: 13px; }
.md h5, .md h6 { font-size: 12px; }
.md ul, .md ol { margin: 0 0 10px; padding-left: 20px; }
.md li { margin-bottom: 4px; }
.md table { margin: 6px 0 12px; border-collapse: collapse; max-width: 100%; overflow-x: auto; display: block; }
.md th, .md td { padding: 5px 9px; border: 1px solid var(--color-border); font-size: 11px; text-align: left; vertical-align: top; }
.md th { background: var(--color-subtle); font-weight: 600; }
.md code { padding: 1px 5px; border-radius: 4px; background: var(--color-subtle); font-family: var(--font-mono); font-size: 10.5px; }
.md pre { margin: 6px 0 12px; padding: 10px 12px; border-radius: 8px; background: var(--color-subtle); overflow-x: auto; font-family: var(--font-mono); font-size: 13px; line-height: 1.55; }
.md a { color: var(--color-accent); text-decoration: underline; }
.md strong { font-weight: 600; }
.md li > ul, .md li > ol { margin: 4px 0 0; }
.md li.md-task { list-style: none; margin-left: -20px; padding-left: 20px; text-indent: -20px; }
.md li.md-task input { width: 13px; height: 13px; margin-right: 7px; text-indent: 0; vertical-align: baseline; accent-color: var(--color-accent); }
.md hr { margin: 14px 0; border: 0; border-top: 1px solid var(--color-border); }
.md del { opacity: .65; }

/* Идущая работа обязана быть видимой: серую строку статуса не замечали,
   и кнопка казалась мёртвой (находка Александра в контуре клиента). */
.busy-note { color: var(--color-accent) !important; font-size: 12px !important; font-weight: 600; }
.busy-note::after { content: ""; display: inline-block; width: 1em; text-align: left; animation: busy-dots 1.2s steps(4, end) infinite; }
@keyframes busy-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.ok-note { color: var(--color-success) !important; font-size: 12px !important; font-weight: 600; }

/* --- Каталог проектов: закрепление, перетаскивание, удаление --- */
.project-card { position: relative; }
.project-card[draggable="true"] { cursor: grab; }
.project-card.is-dragging { opacity: .45; cursor: grabbing; }
.project-card.drop-mark { outline: 2px dashed var(--accent, #6b7cff); outline-offset: 3px; }
.project-card.is-pinned::before {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--accent, #6b7cff);
}
.card-actions {
  position: absolute; top: 10px; right: 10px; display: flex; gap: 4px;
  opacity: 0; transition: opacity .15s ease;
}
.project-card:hover .card-actions,
.project-card:focus-within .card-actions,
.project-card.is-pinned .card-actions { opacity: 1; }
.card-action {
  width: 28px; height: 28px; display: grid; place-items: center;
  border: 1px solid var(--line, #e3e3e6); border-radius: 8px;
  background: var(--surface, #fff); color: var(--text-soft, #6b6b73);
  font-size: 15px; line-height: 1; cursor: pointer; padding: 0;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.card-action:hover { background: var(--surface-hover, #f4f4f6); color: var(--text, #1c1c1f); }
.card-action.is-on { color: var(--accent, #6b7cff); border-color: var(--accent, #6b7cff); }
.card-action--danger:hover { color: #b3261e; border-color: #b3261e; }
.card-action:disabled { opacity: .5; cursor: default; }
@media (hover: none) { .card-actions { opacity: 1; } }

/* Проект, названный как пространство клиента: пометка «это ваши материалы»
   и переход туда, где живёт сам клиент. Строка стоит над тегами — те прижаты
   к низу карточки, и ряд по-прежнему заканчивается на одной линии. */
.project-card__client {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 13px;
}
.project-card__client .status-badge { padding: 2px 8px; font-size: 10px; }
.project-card__client .text-button { font-size: 10px; }

/* --- Переключатель контуров: выбор рабочего пространства под словознаком --- */
.contour-switch { padding: 12px 14px 0; }
.contour-switch__select {
  width: 100%; padding: 7px 10px; border-radius: var(--radius-md, 10px);
  border: 1px solid var(--color-border, #e3e3e6); background: transparent;
  color: var(--color-text, #1c1c1f); font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.contour-switch__select:hover { background: var(--color-subtle, #f4f4f6); }
.contour-switch__select:disabled { opacity: .6; cursor: progress; }
/* В свёрнутой панели селекту не хватает места — прячем вместе с подписями. */
.is-collapsed .contour-switch { display: none; }

/* Кнопка «Ответить» у выделенного текста. Появляется над выделением и живёт
   поверх всего: разговор длинный, и всплывать она может в любом месте.
   Фон был `--color-elevated` — соседний оттенок к фону беседы, и на подсветке
   выделения кнопка пропадала: её находили только те, кто знал, где искать.
   Берём акцент контура — единственный цвет системы, которого нет ни у фона,
   ни у выделения. Подпись поверх акцента задана так же, как у `.button--primary`
   в системе оформления: в тёмной теме почти чёрная, в светлой белая (там акцент
   тёмно-бирюзовый). Кольцо цветом фона отделяет кнопку от текста под ней. */
.quote-reply { position: absolute; z-index: 60; transform: translateX(-50%); padding: 6px 12px; border: 1px solid var(--color-accent); border-radius: var(--radius-md); background: var(--color-accent); color: #071111; font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer; box-shadow: 0 0 0 2px var(--color-base), var(--shadow-overlay); }
[data-theme="light"] .quote-reply { color: #fff; }
.quote-reply:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }

/* Раздел «Настройки»: настройки самой платформы. Каркас из блоков — следующая
   настройка добавляет блок и не переделывает страницу, поэтому оформление
   принадлежит блоку вообще, а не «Нейросетям». */
.settings-block { margin: 0 0 22px; padding: 18px 20px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.settings-block__title { margin: 0; font-size: 16px; }
.settings-block__hint { margin: 6px 0 0; color: var(--color-text-muted); font-size: 11px; line-height: 1.55; }
.settings-block__body { margin-top: 14px; }
/* Строка «сейчас работаем на …» — ответ, ради которого сюда заходят. */
.settings-now { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14px; }
.settings-note { margin: 6px 0 0; color: var(--color-text-secondary); font-size: 12px; line-height: 1.5; }
.settings-note--warn { color: var(--color-text-muted); }
.settings-engines { display: grid; gap: 10px; margin: 14px 0 0; }
.settings-engine { padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-base) 45%, transparent); }
.settings-engine__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.settings-engine__head .status-badge { margin-left: auto; }
/* Место под будущий переключатель. Пунктир — не украшение: он показывает, что
   здесь пока пусто по решению, а не потому, что что-то не отрисовалось. */
.settings-slot { margin: 14px 0 0; padding: 10px 12px; border: 1px dashed var(--color-border); border-radius: var(--radius-md); color: var(--color-text-muted); font-size: 12px; line-height: 1.5; }
/* Переключатель основной нейросети: единственное место этой настройки. */
.settings-switch { margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-base) 45%, transparent); }
.settings-switch__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.settings-switch__label { font-size: 13px; font-weight: 600; }
.settings-events { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--color-border); }