/* ============================================================================
 * UniversalSidebar — design preview shell (NO chat integration yet).
 *
 * Layout: vertical accordion stack. Each "section" header (icon + label +
 * chevron) IS the burger row — clicking a header expands its body to fill
 * the remaining sidebar height; other sections collapse to header-only.
 *
 * Stub buttons inside sections log to console; no real wiring.
 *
 * Reflow contract — copied 1:1 from PersonalAIPanel.css:15-31 (verified
 * working pattern):
 *   1. <body> gets padding-right so main content makes room
 *   2. universal chrome (header, toolbars, action bars) escapes via
 *      width:100vw + negative margin so it stays full-viewport-width
 *   3. JS sets inline top/bottom on the sidebar so it sits BELOW header
 * ============================================================================ */

:root {
    --usb-w: 380px;
    --usb-min-w: 320px;
    --usb-max-w: 600px;
}

/* [2026-08-16] РАЗДЕЛЁННЫЙ РЕФЛОУ: контент СЖИМАЕТСЯ, хедер НЕ двигается. Разбор структуры
   (tracker/dashboard/step-by-step): внутри `.app-container` хедер и рабочий контент —
   СОСЕДИ (`header` + `.module-controls-row` + `.u-w-full` / `.page-content-wrapper`), а НЕ
   вложены друг в друга. Поэтому:
     • padding-right = ширина панели вешаем на КОНТЕНТ-соседей `.app-container > *`, КРОМЕ хедера —
       их содержимое ужимается влево, панель-оверлей накладывается на освободившуюся правую полосу
       (PO: «контент сжимать, а не резать оверлеем»);
     • ХЕДЕР (`> header` / `[role="banner"]`) ИСКЛЮЧЁН — у него при вкл/выкл НЕТ ни одного
       изменяемого свойства, поэтому аватар и кнопки рядом физически не могут сдвинуться
       (PO: «кнопки рядом с аватаром и аватар не должны двигаться»). Прошлый «прыжок» был из-за
       padding на ОБЩЕМ предке хедера + escape `calc(100%+usb-w)`, где 100% привязан к анимируемому
       паддингу → ширина хедера ползла во время перехода. Здесь хедера паддинг не касается вовсе.
   Футер (`.bottom-banner`, fixed, вне `.app-container`) не трогаем — панель встаёт над ним через
   JS-offset (_measureFooterTop). Ref: docs/GUIDE_EMBED_UNIVERSAL_SIDEBAR_CHAT_2026-08-16.md §5.
   Chat: universal-sidebar-embed-2026-08-16. */
/* [2026-08-16→08-17] СЖАТИЕ ОСНОВНОГО ВИДА — УНИВЕРСАЛЬНО для любой разметки. Раньше правило было
   завязано на конкретные классы контейнеров (`.app-container`, `body > main`, `.module-tabs-container`),
   и на каждой странице с другим корнем панель не толкала контент, а накладывалась и РЕЗАЛА его —
   whack-a-mole по страницам (PO: index, потом fish и т.д.). Теперь сжимаем контент в ДВУХ местах,
   покрывающих ВСЕ страницы:
     1) `.app-container > *` — страницы с оболочкой (tracker/analytics/edoc/profile/step-by-step/…),
        где хедер и контент лежат ВНУТРИ `.app-container`;
     2) `body > *` — страницы БЕЗ оболочки, где хедер и контент — ПРЯМЫЕ дети <body>
        (index `main`, pricing `main`, admin-data/fish `.module-controls-row`+`.module-tabs-row`+
        `#fish-main-container`, subscriptions `.subscriptions-container` и т.д.).
   Из ОБОИХ наборов исключаем то, что НЕ должно двигаться/сжиматься:
     • хром — `header`/`footer`/`[role=banner]`/`[role=contentinfo]` (аватар и кнопки хедера не
       двигаются, футер сам fixed);
     • сама панель — `.universal-sidebar`;
     • фиксированные/плавающие/скрытые — `.modal-overlay`, `*popover*`, `*context-menu*`, `*tooltip*`,
       `.hidden`, `button` (у fish в body лежат скрытые кнопки-хендлеры и модалки — их паддинг не трогает);
     • не-визуальные — `script`/`link`/`style`;
     • `span` — измерительные off-screen span'ы (напр. `_autoSizeSequenceColumn` в таблице активностей
       делает `document.body.appendChild(span)` и меряет `offsetWidth`). ЛЮБОЙ padding на таком span
       входил бы в offsetWidth и ломал замер: столбец № раздувался на ширину панели (регресс 2026-08-17,
       PO: «этот столбец расширяется и всё занимает»). Контент-корни страниц голым `<span>` не бывают.
   !important обязателен: контент-контейнеры часто имеют своё padding с ID-селектором (напр. tracker
   `.tracker-app #trackerPage { padding: 1rem }`), который по специфичности бьёт классовый селектор —
   без !important контент удерживал padding и панель его резала. longhand `padding-right !important`
   перекрывает даже ID-shorthand `padding`.
   Ref: docs/GUIDE_EMBED_UNIVERSAL_SIDEBAR_CHAT_2026-08-16.md §5. Chat: universal-sidebar-embed-2026-08-16. */
html.has-universal-sidebar
    .app-container
    > *:not(header):not(footer):not([role='banner']):not([role='contentinfo']):not(script):not(link):not(style):not(
        button
    ):not(span):not(.universal-sidebar):not(.modal-overlay):not([class*='popover']):not([class*='context-menu']):not(
        [class*='tooltip']
    ):not(.hidden),
html.has-universal-sidebar
    body
    > *:not(.app-container):not(header):not(footer):not([role='banner']):not([role='contentinfo']):not(script):not(
        link
    ):not(style):not(button):not(span):not(.universal-sidebar):not(.modal-overlay):not([class*='popover']):not(
        [class*='context-menu']
    ):not([class*='tooltip']):not(.hidden) {
    padding-right: var(--usb-w) !important;
    box-sizing: border-box;
    transition: padding-right 150ms ease;
}

/* [2026-08-17] FISH — абсолютно-позиционированные right-докнутые панели. У канвас-приложения fish
   правая панель (`#right-sidebar-panel.right-sidebar`) и её кнопка-переключатель
   (`.right-sidebar-toggle-position`) заданы `position:absolute; right:0` относительно
   `#fish-main-container` (position:relative). `right:0` считается от padding-бокса контейнера, поэтому
   наш `padding-right` их НЕ двигает — при открытой панели чата они оказывались ПОД ней (проверено:
   клик по кнопке переключателя перехватывала панель чата). Сдвигаем их на ширину панели: `var(--usb-w)`
   = 0 при закрытой панели (штатное `right:0`) и = ширине панели при открытой. `.right-sidebar` НЕ
   fish-уникален (есть в orgchart step-by-step), поэтому строго скоупим под `#fish-main-container`.
   Ref: docs/GUIDE_EMBED_UNIVERSAL_SIDEBAR_CHAT_2026-08-16.md §5. Chat: universal-sidebar-embed-2026-08-16. */
html.has-universal-sidebar #fish-main-container .right-sidebar,
html.has-universal-sidebar #fish-main-container .right-sidebar-toggle-position {
    right: var(--usb-w) !important;
}
html.has-universal-sidebar #fish-main-container.right-sidebar-collapsed .right-sidebar-toggle-position {
    /* Свёрнутая кнопка-язычок стоит у самой кромки (`right:-1px`) — сохраняем этот -1px и добавляем сдвиг. */
    right: calc(var(--usb-w) - 1px) !important;
}

/* Disable transitions during drag so pointer follows 1:1 (no rubber-band) */
html.usb-resizing .universal-sidebar,
html.usb-resizing .app-container > *,
html.usb-resizing body > *,
html.usb-resizing .chat-panel-toggle,
html.usb-resizing .chat-panel-container {
    transition: none !important;
}

/* Existing floating chat widgets — `.chat-panel-toggle` (round button)
   and `.chat-panel-container` (the panel itself) — are legacy floating
   panels that will eventually be replaced by sidebar sections. The chat
   container's position is driven by inline drag-resize styles which CSS
   right: cannot override; the cleanest approach during design-preview is
   to hide them entirely while the universal sidebar is open. Closing
   the sidebar restores them with their previous geometry intact. */
/* [2026-08-15] Исключение `:not(.is-docked)` ОБЯЗАТЕЛЬНО. Панель комментариев
   PDF — тоже `.chat-panel-container` (движок чата один, инвариант И2), но она
   ПРИСТЫКОВАНА внутрь этой секции. Без исключения правило прятало её вместе с
   плавающими панелями: пузыри были в DOM, а на экране — пусто, и нажатие
   «Комментарии» не показывало ничего. Поймано браузерной проверкой, jsdom
   такое не ловит. Ref: docs/QA_PDF_COMMENTS_AS_CHAT_2026-08-15.md §2,
   e2e/documents-pdf-comments.spec.js. Chat: pdf-comments-as-chat-2026-08-15. */
html.has-universal-sidebar .chat-panel-toggle,
html.has-universal-sidebar .chat-panel-container:not(.is-docked) {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    html.has-universal-sidebar body {
        transition: none;
    }
    .universal-sidebar__section,
    .universal-sidebar__section-body,
    .universal-sidebar__section-chevron {
        transition: none !important;
    }
    .universal-sidebar__section-body {
        transform: none !important;
    }
}

/* === Shell container ============================================== */

.universal-sidebar {
    position: fixed;
    top: 0; /* JS overrides with measured chrome.bottom */
    right: 0;
    bottom: 0;
    width: var(--usb-w);
    z-index: 1020; /* below header dropdowns (1025), above footer (1000) */
    background-color: var(--bg-primary);
    border-left: 1px solid var(--border-primary);
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    color: var(--text-primary);
    font-family: var(--font-family);
    overflow: hidden;
    transition: transform var(--transition-fast);
}

.universal-sidebar.hidden {
    display: none;
}

/* [2026-08-16] Правила .universal-sidebar__top-bar / __top-title / __top-actions УДАЛЕНЫ
   вместе с верхней полосой (см. UniversalSidebar._buildPanel). .universal-sidebar__icon-btn
   оставлен — им пользуются кнопки действий секций. Ref: docs/GUIDE_EMBED_UNIVERSAL_SIDEBAR_CHAT_2026-08-16.md §5.1.
   Chat: universal-sidebar-embed-2026-08-16. */

.universal-sidebar__icon-btn {
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background-color var(--transition-fast),
        color var(--transition-fast);
}

.universal-sidebar__icon-btn:hover {
    background-color: var(--bg-hover);
    color: var(--brand-primary);
}

.universal-sidebar__icon-btn .material-icons {
    font-size: 16px;
}

/* === Accordion sections (the "burger" stack) ===================== */

.universal-sidebar__sections {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.universal-sidebar__section {
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    /* Lock section height to header height when collapsed; body overflow
       gets clipped. Expanded state lifts the lock + grants flex-grow. */
    min-height: 44px;
    max-height: 44px;
    border-bottom: 1px solid var(--border-primary);
    background-color: var(--bg-primary);
    overflow: hidden;
    /* Easing: standard Material "decelerate" for natural feel */
    transition:
        flex-grow 320ms cubic-bezier(0.4, 0, 0.2, 1),
        max-height 320ms cubic-bezier(0.4, 0, 0.2, 1),
        min-height 320ms cubic-bezier(0.4, 0, 0.2, 1),
        background-color var(--transition-fast);
}

.universal-sidebar__section:last-child {
    border-bottom: none;
}

.universal-sidebar__section.is-expanded {
    flex-grow: 1;
    flex-shrink: 1;
    /* Release height lock. min-height keeps a usable minimum, max-height
       at large value lets max-height transition produce smooth growth. */
    min-height: 160px;
    max-height: 100vh;
}

/* Section header — clickable bar with icon + label + chevron + count */
.universal-sidebar__section-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: 12px var(--space-3);
    background-color: var(--bg-secondary);
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-align: left;
    transition:
        background-color var(--transition-fast),
        color var(--transition-fast);
    flex-shrink: 0;
    min-height: 44px;
}

.universal-sidebar__section-header:hover {
    background-color: var(--bg-hover);
}

.universal-sidebar__section.is-expanded .universal-sidebar__section-header {
    background-color: var(--bg-primary);
    color: var(--brand-primary);
    border-bottom: 1px solid var(--border-primary);
}

.universal-sidebar__section-icon {
    flex-shrink: 0;
    color: var(--text-tertiary);
    transition: color var(--transition-fast);
}

.universal-sidebar__section-icon .material-icons {
    font-size: 18px;
}

.universal-sidebar__section.is-expanded .universal-sidebar__section-icon {
    color: var(--brand-primary);
}

.universal-sidebar__section-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.universal-sidebar__section-badge {
    flex-shrink: 0;
    background-color: var(--brand-primary);
    color: var(--text-inverse, #fff);
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    line-height: 1.3;
}

.universal-sidebar__section-badge[hidden] {
    display: none;
}

.universal-sidebar__section-chevron {
    flex-shrink: 0;
    color: var(--text-tertiary);
    /* Chevron rotation matches section open/close easing */
    transition:
        transform 320ms cubic-bezier(0.4, 0, 0.2, 1),
        color var(--transition-fast);
}

.universal-sidebar__section-chevron .material-icons {
    font-size: 18px;
}

.universal-sidebar__section.is-expanded .universal-sidebar__section-chevron {
    transform: rotate(180deg);
    color: var(--brand-primary);
}

/* Section body — always rendered; fades + slides in when section is
   expanded. The section's overflow:hidden + collapsed max-height clip
   the body when it's invisible, so layout is intact. */
.universal-sidebar__section-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    background-color: var(--bg-primary);
    opacity: 0;
    transform: translateY(-6px);
    /* Fade out immediately when collapsing (no delay), faster than the
       section's height collapse so content disappears first */
    transition:
        opacity 140ms ease,
        transform 140ms ease;
}

.universal-sidebar__section.is-expanded .universal-sidebar__section-body {
    opacity: 1;
    transform: translateY(0);
    /* When expanding, delay the fade-in so the section grows first, THEN
       the content appears — feels more polished than simultaneous */
    transition:
        opacity 220ms ease 140ms,
        transform 220ms ease 140ms;
}

/* Section action row — sits inside expanded body, above content */
.universal-sidebar__section-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px var(--space-3);
    border-bottom: 1px solid var(--border-primary);
    background-color: var(--bg-primary);
    flex-shrink: 0;
}

.universal-sidebar__section-actions-spacer {
    flex: 1 1 auto;
}

/* Section content — placeholder fills middle */
.universal-sidebar__section-content {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-5) var(--space-4);
    text-align: center;
    color: var(--text-tertiary);
}

.universal-sidebar__section-content .material-icons {
    font-size: 40px;
    opacity: 0.4;
    margin-bottom: var(--space-2);
}

.universal-sidebar__section-content-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    margin: 0 0 var(--space-1) 0;
}

.universal-sidebar__section-content-text {
    font-size: var(--font-size-xs);
    line-height: 1.5;
    margin: 0;
    max-width: 260px;
}

/* Section footer — sticky bottom (for chat-type input) */
.universal-sidebar__section-footer {
    flex-shrink: 0;
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--border-primary);
    background-color: var(--bg-primary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* [2026-08-22] ЕДИНЫЙ КОМПОЗЕР ЧАТОВ (PO 2026-08-22: «у трёх полей ввода
   сообщений чатов разные кнопки по стилю и поля, надо привести все к
   единообразию по дизайну»). Поле приведено к эталону Teamwork
   (`components/universal-chat/chat-panel.css`): фон подложки вместо вторичного,
   радиус `--radius-lg`, отступы токенами вместо литералов `6px 10px`, кегль
   `--font-size-sm` вместо `--font-size-xs` — из-за него текст здесь был мельче,
   чем в двух других секциях.
   Ref: DESIGN.md. Chat: chat-composers-uniformity-2026-08-22. */
.universal-sidebar__section-footer-input {
    flex: 1 1 auto;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-2) var(--space-3);
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    outline: none;
    transition: border-color var(--transition-fast);
    min-width: 0;
}

.universal-sidebar__section-footer-input:focus {
    border-color: var(--brand-primary);
    outline: 2px solid var(--brand-primary);
    outline-offset: -2px;
}

.universal-sidebar__section-footer-input::placeholder {
    color: var(--text-tertiary);
}

/* [2026-08-22] Кнопка отправки — 32×32, как в Teamwork и Personal Assistant.
   Была 28×28, то есть третий размер из трёх. Ref: DESIGN.md.
   Chat: chat-composers-uniformity-2026-08-22. */
.universal-sidebar__section-footer-send {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background-color: var(--brand-primary);
    border: none;
    border-radius: var(--radius-md);
    /* [2026-08-22] Запасное `#fff` убрано: токен `--text-inverse` объявлен в
       styles/themes.css, а фолбэк давал ТРЕТЬЕ написание того же цвета и ломал
       сверку единообразия трёх композеров. Chat: chat-composers-uniformity-2026-08-22. */
    color: var(--text-inverse);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        background-color var(--transition-fast),
        transform var(--transition-fast);
}

.universal-sidebar__section-footer-send:hover {
    background-color: var(--brand-primary-hover);
    transform: scale(1.05);
}

/* [2026-08-22] Размер иконки выровнен с двумя другими композерами (18px).
   Было 14px — самая мелкая из трёх. Ref: DESIGN.md.
   Chat: chat-composers-uniformity-2026-08-22. */
.universal-sidebar__section-footer-send .material-icons {
    font-size: 18px;
}

/* === Resize handle (left edge) =================================== */

.universal-sidebar__resize {
    position: absolute;
    left: -3px;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: ew-resize;
    z-index: 2;
    background: transparent;
}

.universal-sidebar__resize:hover {
    background: linear-gradient(
        to right,
        transparent 0%,
        var(--brand-primary) 40%,
        var(--brand-primary) 60%,
        transparent 100%
    );
}

/* === Trigger button in Header =================================== */
/* [2026-08-17] Кастомный класс `.header-universal-sidebar-btn` (со сплошной синей заливкой в
   состоянии .is-open) УДАЛЁН. Кнопка теперь — канонический `.icon-btn` (styles/header.css), как
   тема/выход/настройки, без индикатора состояния (PO: кнопка не по канону «синела», и состояние
   панели и так видно). Иконка — forum. Chat: universal-sidebar-embed-2026-08-16. */

/* === Mobile (<768px) — full-width modal-like ==================== */

@media (max-width: 767.98px) {
    html.has-universal-sidebar body {
        padding-right: 0;
    }
    html.has-universal-sidebar body > header,
    html.has-universal-sidebar body > .app-container > header,
    html.has-universal-sidebar .module-controls-row,
    html.has-universal-sidebar .module-tabs-row,
    html.has-universal-sidebar .bottom-action-bar,
    html.has-universal-sidebar .task-bottom-bar {
        width: auto;
        margin-right: 0;
    }
    .universal-sidebar {
        width: 100vw;
        max-width: 100vw;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   [2026-08-15] Пристыкованная панель (комментарии PDF = рабочий чат).
   Панель переезжает в секцию целиком, поэтому у неё снимается плавающая
   геометрия: в доке она занимает всю секцию, без перетаскивания и ресайза.
   Ref: docs/TZ_PDF_COMMENTS_AS_CHAT_2026-08-14.md §8.7, этап P8.
   Chat: pdf-comments-as-chat-2026-08-14.
   ─────────────────────────────────────────────────────────────────────────── */

.universal-sidebar__docked-panel {
    display: flex;
    flex: 1;
    min-height: 0;
}

.universal-sidebar__docked-panel .chat-panel-container.is-docked {
    position: static;
    /* [2026-08-16] `!important` обязателен: панель проставляет INLINE `height`/`width`
       (плавающая геометрия / _clampPanelToViewport, напр. 450px), из-за чего чат не
       растягивался на всю секцию и под композером зияла «дыра». Форсируем заполнение
       секции; тело чата (flex:1) выталкивает поле ввода к низу.
       Ref: docs/TZ_UNIVERSAL_SIDEBAR_EMBED_2026-08-16.md. Chat: universal-sidebar-embed-2026-08-16. */
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    min-width: 0;
    min-height: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    resize: none;
}

.universal-sidebar__docked-panel .chat-panel-container.is-docked .chat-panel-resize {
    display: none;
}

/* [2026-08-16] PersonalAIPanel, ВСТРОЕННЫЙ в секцию универсальной панели: гасим его
   собственное плавающее позиционирование, рамку, тень и ручки ресайза — панель заполняет
   тело секции целиком. Сам PersonalAIPanel (JS/CSS) НЕ трогается — это правка только на
   стороне хоста-сайдбара. Ref: docs/TZ_UNIVERSAL_SIDEBAR_EMBED_2026-08-16.md.
   Chat: universal-sidebar-embed-2026-08-16. */
.universal-sidebar__docked-panel .personal-ai-panel {
    position: static;
    inset: auto;
    /* [2026-08-16] `!important` — панель ставит INLINE height/width из своей геометрии,
       иначе AI-панель не заполняла секцию и снизу оставалась «дыра». Форсируем заполнение;
       тело (flex) прижимает поле ввода к низу. */
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 0;
    min-height: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
}

.universal-sidebar__docked-panel .personal-ai-panel .personal-ai-panel__resize {
    display: none;
}

/* [2026-08-16] Встроенную панель показывает/прячет аккордеон секции, а НЕ её собственный
   `.hidden`. Внешняя кнопка «AI» в шапке зовёт PersonalAIPanel.close() → вешает `.hidden`
   (глобально `display:none !important`), из-за чего докнутая панель пропадала прямо в секции.
   Перебиваем это правило более специфичным селектором: пока панель в доке — она видима,
   а видимостью управляет раскрытие секции. Сам PersonalAIPanel не изменяется.
   Ref: docs/TZ_UNIVERSAL_SIDEBAR_EMBED_2026-08-16.md. Chat: universal-sidebar-embed-2026-08-16. */
.universal-sidebar__docked-panel .personal-ai-panel.hidden {
    display: flex !important;
}

/* [2026-08-16] То же для командного чата: ChatThreadPanel вешает document-level Escape-хендлер
   (ChatThreadPanel.js:321-363), который последним шагом зовёт close() → `.hidden`. Без этого
   оверрайда один Escape прятал докнутый чат навсегда — плавающая кнопка удалена, титул-бар
   (с close/reopen) скрыт, вернуть чат было нечем. Пока панель в доке — она видима, показом
   управляет аккордеон секции. Ref: docs/TZ_UNIVERSAL_SIDEBAR_EMBED_2026-08-16.md.
   Chat: universal-sidebar-embed-2026-08-16. */
.universal-sidebar__docked-panel .chat-panel-container.hidden {
    display: flex !important;
}

/* [2026-08-16] «Окно в окно»: у докнутой панели есть свой заголовок, который ДУБЛИРОВАЛ
   заголовок секции аккордеона («Personal Assistant»/«Teamwork») и создавал вид вложенного окна.
   ПЕРВАЯ версия прятала заголовок ЦЕЛИКОМ (`display:none`) — и утащила с собой РАБОЧИЕ кнопки,
   которые в нём лежат: у чата — поиск (`#chat-thread-search-toggle`), фильтр по датам
   (`#chat-thread-date-toggle`), сворачивание веток (`#chat-thread-expand-toggle`); у AI —
   новый чат, история, настройки (модель/провайдер/RAG). PO: «куда делся поиск / какой функционал
   потерялся». Правильно — прятать ТОЛЬКО избыточную оконную chrome (дублирующий статичный титул
   + крест + пин), а панели действий ОСТАВИТЬ. Заголовок-строка превращается в тонкий тулбар.
   Проверено getComputedStyle: поиск/даты/своротка и AI-кнопки снова видимы, второго титула нет.
   Ref: docs/GUIDE_EMBED_UNIVERSAL_SIDEBAR_CHAT_2026-08-16.md §5. Chat: universal-sidebar-embed-2026-08-16. */
.universal-sidebar__docked-panel .chat-panel-container > .chat-panel-header > .chat-panel-title,
.universal-sidebar__docked-panel .chat-panel-container .chat-panel-close,
.universal-sidebar__docked-panel .personal-ai-panel__close,
.universal-sidebar__docked-panel .personal-ai-panel__pin-btn {
    display: none;
}
/* Тонкий тулбар вместо титул-бара: убрать фон/рамку/лишнюю высоту, чтобы строка действий
   не читалась как второй заголовок над секцией аккордеона. */
.universal-sidebar__docked-panel .chat-panel-container > .chat-panel-header,
.universal-sidebar__docked-panel .personal-ai-panel > .personal-ai-panel__header {
    background: transparent;
    border-bottom: none;
    min-height: 0;
    padding-top: var(--space-1);
    padding-bottom: 0;
}
/* [2026-08-16] Иконки чата (свернуть/поиск/дата) — ВПРАВО, как action-кнопки Personal AI
   (+/история/⋮). Заголовок чата скрыт → кнопкам нечем оттолкнуться (у AI это делает spacer
   после заголовка), поэтому они липли ВЛЕВО. Прижимаем группу вправо. PO: «почему иконки
   слева, а не справа как у персонального». Ref: docs/GUIDE_EMBED_UNIVERSAL_SIDEBAR_CHAT_2026-08-16.md §5.
   Chat: universal-sidebar-embed-2026-08-16. */
.universal-sidebar__docked-panel .chat-panel-container > .chat-panel-header {
    justify-content: flex-end;
}

/* [2026-08-16] ЕДИНЫЙ набор иконок в универсальной панели (PO: «нужен единый дизайн, а не
   зоопарк»). Personal AI рисует иконки шрифтом Material Icons (залитые, 16px, кнопка 24×24),
   а чат — Material Symbols Outlined (контурные, 20px, кнопка 28×28) → разные коллекция/размер/
   толщина. В ДОКЕ приводим иконки командного чата к виду AI: та же коллекция Material Icons,
   тот же размер и та же кнопка. Ligature-имена (unfold_less/search/date_range/filter_alt/send/
   chat…) есть и в Material Icons, поэтому шрифт просто переключаем. step-by-step не трогаем.
   Ref: docs/GUIDE_EMBED_UNIVERSAL_SIDEBAR_CHAT_2026-08-16.md §5. Chat: universal-sidebar-embed-2026-08-16. */
.universal-sidebar__docked-panel .chat-panel-container .material-symbols-outlined {
    font-family: 'Material Icons'; /* единая коллекция (залитые), как у AI; размеры — по месту */
    font-variation-settings: normal;
}
/* Иконки-кнопки тулбара чата (свернуть/поиск/дата) — точь-в-точь action-кнопки AI:
   16px глиф, кнопка 24×24, тот же цвет. */
.universal-sidebar__docked-panel .chat-panel-container > .chat-panel-header .chat-panel-header-btn {
    width: 24px;
    height: 24px;
    padding: 4px;
    color: rgb(209, 213, 219);
}
.universal-sidebar__docked-panel
    .chat-panel-container
    > .chat-panel-header
    .chat-panel-header-btn
    .material-symbols-outlined {
    font-size: 16px;
}

/* [2026-08-16] Тулбар поиска/дат в доке — ОПРЯТНЫЕ СТРОКИ в стиле Personal AI панели
   (PO: «сделай красиво как у персонального чата»). Каждая опция — своя чистая строка на всю
   ширину: поиск = полноширинное поле (как «Search chats and messages…» у AI), даты = поле +
   пресеты. Никакого горизонтального скролла (мусор), никакого разброса иконки/поля/пресетов по
   отдельным строкам. Только в доке; плавающий чат step-by-step не трогаем.
   Ref: docs/GUIDE_EMBED_UNIVERSAL_SIDEBAR_CHAT_2026-08-16.md §5. Chat: universal-sidebar-embed-2026-08-16. */
.universal-sidebar__docked-panel .chat-panel-container .chat-panel-toolbar {
    flex-direction: column;
    gap: 6px;
    padding: 6px 8px;
}
.universal-sidebar__docked-panel .chat-panel-container .chat-panel-toolbar-row {
    align-items: center;
}
/* Полноширинное опрятное поле поиска — как у AI-панели (скруглённое, ровный паддинг). */
.universal-sidebar__docked-panel .chat-panel-container .chat-panel-toolbar-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: var(--radius-md);
}
/* Дата-виджет: поле (строка 1) + пресеты (строка 2) — обе строки чистые, на всю ширину.
   Пресеты компактными пилюлями, ведущая иконка убрана (её дубль — кнопка 📅 в тулбаре). */
.universal-sidebar__docked-panel .chat-panel-container .datepicker-wrapper--with-presets {
    flex-wrap: wrap;
    row-gap: 6px;
    padding: 5px 8px;
}
.universal-sidebar__docked-panel .chat-panel-container .datepicker-wrapper--with-presets .datepicker-lead-icon {
    display: none;
}
.universal-sidebar__docked-panel .chat-panel-container .datepicker-wrapper--with-presets .datepicker-presets {
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 5px;
}
.universal-sidebar__docked-panel .chat-panel-container .datepicker-wrapper--with-presets .datepicker-preset-btn {
    padding: 3px 10px;
    font-size: 11px;
    height: 24px;
    line-height: 18px;
    white-space: nowrap;
}