/* ============================================================
 * ОБОЛОЧКА ПРИЛОЖЕНИЯ — боковое меню по прототипу дизайнера 17.10.2026
 * ============================================================
 * Источник — design/prototypes/login-variants/fountain.html («chat-rail»),
 * значения сняты с отрисованной страницы прототипа: в его CSS несколько
 * слоёв правок, и итог виден только в браузере.
 *
 * ⚠️ Подключается ПОСЛЕ main.css и theme.css: правила старого меню там
 * остаются (на них опираются другие экраны), здесь — то, чем новое
 * отличается. Только токены (tokens.css), без #hex.
 * ============================================================ */

.sidebar.sidebar-rail {
    width: var(--rail-width);
    padding: var(--space-6) var(--space-4) var(--rail-bottom-inset);
    gap: var(--rail-gap);
    background: var(--bg-sidebar);
    border-right: var(--hairline) solid var(--border);
    box-shadow: none;
    color: var(--text);
    font-family: var(--font-sans);
}

/* --- шапка: логотип и закрытие (на телефоне) --- */
.sidebar-rail .sidebar-header {
    margin: 0 0 var(--space-2);
    padding: 0;
    border: 0;
    min-height: 24px;
}

.sidebar-rail .sidebar-wordmark {
    display: flex;
    width: 132px;
    height: 24px;
}

.sidebar-rail .sidebar-wordmark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Логотип для тёмной темы — свой файл: белые буквы. */
.sidebar-rail .brand-on-dark,
body.dark-theme .sidebar-rail .brand-on-light {
    display: none;
}

body.dark-theme .sidebar-rail .brand-on-dark {
    display: block;
}

.sidebar-rail .sidebar-close-btn {
    width: var(--control-compact);
    height: var(--control-compact);
    border-radius: var(--ui-radius);
    color: var(--text-secondary);
    font-size: 24px;
    line-height: 1;
    transform: none;
}

.sidebar-rail .sidebar-close-btn:hover {
    background: var(--bg-hover);
    color: var(--text);
    transform: none;
}

/* --- «Новый чат | Общий чат» --- */
.sidebar-create {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.sidebar-create-btn {
    flex: 1;
    min-width: 0;
    min-height: var(--control-height);
    padding: var(--space-2) var(--rail-gap);
    background: transparent;
    border: 0;
    color: var(--text);
    font: inherit;
    font-size: var(--font-label);
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--motion);
}

.sidebar-create-btn + .sidebar-create-btn {
    border-left: var(--hairline) solid var(--border);
}

.sidebar-create-btn:hover {
    color: var(--primary);
}

/* --- пункты меню --- */
.sidebar-rail .sidebar-nav {
    gap: 0;
    margin: 0;
}

.sidebar-rail .nav-item {
    min-height: var(--control-height);
    padding: var(--space-2) var(--space-3);
    gap: var(--space-3);
    border-radius: var(--ui-radius);
    color: var(--text);
    /* У button браузер оставлял Arial вместо шрифта оболочки. */
    font-family: var(--font-sans);
    font-size: var(--font-base);
    font-weight: 400;
    line-height: var(--rail-text-leading);
}

.sidebar-rail .nav-item:hover {
    background: var(--bg-hover);
    color: var(--text);
}

/* Открытый раздел — серая подложка и синий текст, без полосы слева. */
.sidebar-rail .nav-item.active {
    background: var(--bg-hover);
    color: var(--primary);
    font-weight: 400;
}

.sidebar-rail .nav-item.active::before {
    display: none;
}

.sidebar-rail .nav-icon {
    width: var(--icon-size);
    height: var(--icon-size);
}

.sidebar-rail .nav-dropdown-icon {
    width: var(--icon-size);
    height: var(--icon-size);
    -webkit-mask-image: url('/static/images/icons/rail-chevron.svg');
    mask-image: url('/static/images/icons/rail-chevron.svg');
    margin-left: auto;
    /* Стрелка смотрит вниз, при раскрытом списке — вверх (как в прототипе).
       Сам файл rail-chevron.svg смотрит влево, отсюда −90° и 90°. */
    transform: rotate(-90deg);
    transition: transform var(--motion);
}

.sidebar-rail .nav-item.active .nav-dropdown-icon {
    transform: rotate(-90deg);
}

.sidebar-rail .nav-item[aria-expanded="true"] .nav-dropdown-icon {
    transform: rotate(90deg);
}

/* Метка «Beta» — не кнопка: смысл передаёт слово, цвет только помогает. */
.nav-beta {
    margin-left: auto;
    padding: 3px 7px;
    border-radius: var(--ui-radius-small);
    background: var(--beta-bg);
    color: var(--beta-text);
    font-size: var(--font-badge);
    font-weight: 700;
    line-height: 1.3;
    pointer-events: none;
}

/* --- список чатов под «Чатами» --- */
.sidebar-rail .nav-chats-dropdown {
    padding: 0 0 0 var(--space-3);
    margin: 0;
}

.sidebar-rail .nav-chat-row {
    margin: 0;
    border-radius: var(--ui-radius-small);
}

.sidebar-rail .nav-chat-row:hover,
.sidebar-rail .nav-chat-row.active {
    background: var(--bg-hover);
}

.sidebar-rail .nav-chat-row.active .nav-chat-item {
    color: var(--primary);
}

.sidebar-rail .nav-chat-item {
    min-height: var(--row-compact);
    padding: var(--rail-gap) var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--font-label);
    line-height: var(--rail-chat-leading);
}

.sidebar-rail .nav-chat-item.active { font-weight: 400; }

/* --- низ: тема, профиль, помощь --- */
.sidebar-rail .sidebar-spacer {
    flex: 1;
}

.sidebar-rail .sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: var(--space-3) 0 0;
    border-top: var(--hairline) solid var(--border);
}

.sidebar-theme {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    color: var(--text-secondary);
    font-size: var(--font-label);
}

.sidebar-rail .theme-buttons {
    display: flex;
    gap: var(--rail-gap);
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
}

.sidebar-rail .btn-theme-option {
    width: var(--control-compact);
    height: var(--control-compact);
    padding: var(--space-2);
    border: 0;
    border-radius: var(--ui-radius);
    background: transparent;
    color: var(--text-secondary);
}

.sidebar-rail .btn-theme-option.active {
    background: var(--bg-hover);
    color: var(--primary);
}

.sidebar-rail .theme-option-icon {
    width: var(--icon-size);
    height: var(--icon-size);
}

/* --- телефон: меню выезжает поверх, ширина та же --- */
@media (max-width: 768px) {
    .sidebar.sidebar-rail {
        width: min(var(--rail-width), 85%);
    }
}

/* --- тёмная тема ---
   ⚠️ theme.css задаёт старому меню свои цвета с body.dark-theme — у
   этих правил вес больше, поэтому новое меню повторяет их с тем же
   префиксом. Цвета — те же токены, просто в тёмной теме у них другие
   значения. */
body.dark-theme .sidebar-rail .nav-item {
    background: transparent;
    color: var(--text);
}

body.dark-theme .sidebar-rail .nav-item:hover,
body.dark-theme .sidebar-rail .nav-item.active {
    background: var(--bg-hover);
}

body.dark-theme .sidebar-rail .nav-item.active {
    color: var(--primary);
}

body.dark-theme .sidebar-rail .btn-theme-option {
    background: transparent;
    border: 0;
    color: var(--text-secondary);
}

body.dark-theme .sidebar-rail .btn-theme-option.active {
    background: var(--bg-hover);
    color: var(--primary);
}


/* --- Баннер пробного периода (TrialBanner в app.js) ---
   Над всей страницей во всю ширину (ТЗ «Регистрация и подписка», п. 6);
   каркас приложения сдвигается на его высоту, а не уходит под него. */
.trial-banner {
    position: fixed;
    top: var(--app-offset-top, 0px);
    left: 0;
    right: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    box-sizing: border-box;
    background: var(--bg-primary-light);
    border-bottom: var(--hairline) solid var(--border);
    color: var(--text);
    font-size: var(--font-label);
}
.trial-banner[hidden] { display: none; }
.trial-banner.is-ended {
    /* Оттенок полупрозрачный — кладём его на фон темы, иначе под ним
       просвечивает светлая подложка страницы и текст тёмной темы не читается. */
    background: linear-gradient(var(--warning-soft), var(--warning-soft)), var(--bg-base);
}
.trial-banner-text { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px var(--space-3); min-width: 0; flex: 1 1 auto; }
.trial-banner-text strong { font-weight: 600; }
.trial-banner-text span { color: var(--text-secondary); font-size: var(--font-caption); }
.trial-banner-buy {
    flex-shrink: 0;
    min-height: var(--row-compact);
    padding: 4px var(--space-3);
    border: 0;
    border-radius: var(--ui-radius);
    background: var(--primary);
    color: var(--on-primary);
    font: inherit;
    font-size: var(--font-caption);
    font-weight: 600;
    cursor: pointer;
}
.trial-banner-buy:hover { background: var(--primary-light); }
.trial-banner-close {
    flex-shrink: 0;
    width: var(--row-compact);
    height: var(--row-compact);
    border: 0;
    border-radius: var(--ui-radius);
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--font-lead);
    cursor: pointer;
}
.trial-banner-close:hover { background: var(--bg-card); color: var(--primary); }
.trial-banner-buy:focus-visible, .trial-banner-close:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Стрелка «в чат» в правом верхнем углу — по макету её нет: на компьютере чат
   рядом в боковом меню, на телефоне — в меню под бургером; у «Помощи» своя
   стрелка в шапке. ⚠️ !important — видимость ставит UI.updateBackButton инлайном. */
#back-to-chat-btn { display: none !important; }

/* ============================================================
 * Компактная шапка на телефоне (решение владельца 17.10.2026, макет):
 * «☰ Компания ⚙» одной строкой с небольшой тенью, а не полоса с логотипом
 * и под ней ещё раз крупный заголовок.
 *
 * Общая полоса .app-header схлопывается (бургер в ней — position: fixed),
 * а шапкой становится строка заголовка самого раздела: прилипает к верху,
 * слева место под бургер. Так шестерёнка и «Отмена / Сохранить» остаются
 * у своих разделов. Высота --phone-head-h — бургер ровно посередине.
 * ============================================================ */
@media (max-width: 768px) {
    .app-header { height: 0; min-height: 0; padding: 0; }
    .header-logo, .deviding-line { display: none; }
    #settings-section { padding: 0; }

    /* «Компания»: блок шапки «растворяется» в странице, чтобы строка
       заголовка прилипала на всю прокрутку, а не только в своём блоке.
       В режиме настройки шапка — прежняя липкая (company.css). */
    .co-head:not(.is-editing) { display: contents; }
    .co-head:not(.is-editing) > * + * { margin-top: var(--space-3); }
    .co-head:not(.is-editing) > :last-child { margin-bottom: var(--space-4); }

    .co-head:not(.is-editing) > .co-top,
    #reports-section .reports-top,
    #profile-section .pf-title,
    .help-head {
        position: sticky; top: 0; z-index: 30;
        display: flex; align-items: center;
        min-height: var(--phone-head-h); box-sizing: border-box;
        margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-3);
        padding: 0 var(--space-4) 0 calc(var(--space-4) + 40px);
        background: var(--bg-main); box-shadow: var(--shadow-head);
    }
    .co-head:not(.is-editing) > .co-top { margin-bottom: 0; }
    #profile-section .pf-title { margin-bottom: var(--space-4); }

    /* «Помощь» по макету — без бургера: возврат стрелкой в её шапке. */
    .main-content[data-section="help"] .burger-btn { display: none !important; }
    .help-head { padding-left: var(--space-4); }

    /* Чат: название чата в той же шапке, рядом с бургером. */
    .main-content.chat-active .app-header {
        height: var(--phone-head-h); padding: 0 var(--space-4) 0 calc(var(--space-4) + 40px);
        justify-content: flex-start; position: relative; z-index: 30;
        box-shadow: var(--shadow-head);
    }
    .main-content.chat-active .chat-heading { display: flex; min-width: 0; }
    .main-content.chat-active .chat-current-title { font-size: var(--font-base); font-weight: 600; }

    /* Меню: страница за ним размыта, пункты крупнее (макет). */
    .sidebar.active ~ .main-content { filter: blur(3px); }
    .sidebar .nav-item { font-size: var(--font-base); }
}

body.has-trial-banner .app-container {
    top: calc(var(--app-offset-top, 0px) + var(--trial-banner-height, 0px));
    height: calc(var(--app-height) - var(--trial-banner-height, 0px));
}

@media (max-width: 768px) {
    /* Плавающая кнопка меню закреплена от верха экрана — опускаем её под баннер. */
    body.has-trial-banner .burger-btn { top: calc(var(--burger-top) + var(--trial-banner-height, 0px)); }
}

@media (max-width: 768px) {
    /* На телефоне действия переносятся под текст, без обрезки (ТЗ). */
    .trial-banner { flex-wrap: wrap; padding: var(--space-2) var(--space-3); }
    .trial-banner-text { flex-basis: calc(100% - var(--row-compact) - var(--space-3)); }
    .trial-banner-buy { order: 3; }
}

/* Баннер подписки: финальное компактное оформление из onboarding.css. */
.trial-banner {
    padding: var(--trial-padding) var(--trial-inline);
    background: var(--trial-background);
    transition: opacity var(--trial-motion) ease, transform var(--trial-motion) ease;
}
.trial-banner-text { align-items: center; flex-wrap: nowrap; gap: var(--space-3); }
.trial-banner-text strong { color: var(--primary); font-weight: var(--trial-weight); white-space: nowrap; }
.trial-banner-text span { font-size: var(--font-label); }
.trial-banner-buy {
    min-height: var(--trial-control);
    padding: var(--trial-padding) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--font-label);
}
.trial-banner-close { width: var(--trial-control); height: var(--trial-control); }
.trial-banner.is-closing { opacity: 0; transform: translateY(-100%); pointer-events: none; }
body.trial-banner-closing .app-container {
    transition: top var(--trial-motion) ease, height var(--trial-motion) ease;
}
body.trial-banner-closing .burger-btn { transition: top var(--trial-motion) ease; }
@media (max-width: 768px) {
    .trial-banner { min-height: var(--trial-touch); padding: 0 var(--space-3); flex-wrap: nowrap; gap: var(--space-2); }
    .trial-banner-text { flex-basis: auto; }
    .trial-banner-text span { display: none; }
    .trial-banner-buy { order: 0; }
    .trial-banner-close { height: var(--trial-touch); }
}
@media (prefers-reduced-motion: reduce) {
    .trial-banner, body.trial-banner-closing .app-container, body.trial-banner-closing .burger-btn { transition: none; }
}

.trial-banner-days { display: none; }
@media (max-width: 768px) {
    .trial-banner-text { gap: var(--trial-padding); }
    .trial-banner-days { display: inline; font-size: var(--font-caption); color: var(--text-secondary); white-space: nowrap; }
}
/* Внутренние колонки занимают оставшееся место, а не полный viewport. */
body.has-trial-banner .main-content,
body.has-trial-banner .sidebar { height: 100%; }

.trial-banner-buy { background: var(--trial-action-bg); color: var(--trial-action-ink); }
.trial-banner-buy:hover { background: var(--trial-action-hover); }
@media (max-width: 768px) {
    .trial-banner.is-ended .trial-banner-text strong { white-space: normal; }
}
@media (max-width: 768px) {
    body.has-trial-banner .sidebar {
        top: calc(var(--app-offset-top, 0px) + var(--trial-banner-height, 0px));
        height: calc(var(--app-height) - var(--trial-banner-height, 0px));
    }
    body.trial-banner-closing .sidebar {
        transition: transform var(--motion) ease, top var(--trial-motion) ease, height var(--trial-motion) ease;
    }
}
@media (prefers-reduced-motion: reduce) {
    body.trial-banner-closing .sidebar { transition: none; }
}


/* Заголовки Компании и Отчётов — по видимой линии букв Fountain.
   Оптическая поправка учитывает разные метрики Jost и фирменного логотипа.
   Меняем отступ контейнеров: всё содержимое поднимается вместе с шапкой. */
@media (min-width: 769px) {
    #settings-section:has(> #company-root) { padding: 0; }
    #company-root.co-root,
    #reports-section .reports-container { padding-top: var(--desktop-title-inset); }
    #company-root .co-top,
    #reports-section .reports-top { min-height: var(--desktop-title-row); }
}


/* Первые пять чатов видны постоянно; названиям оставляем ширину строки. */
.sidebar-rail .nav-chats-dropdown { max-height: none; overflow: visible; padding: 0; }
.sidebar-rail .nav-chats-list { padding: 0; max-height: calc(var(--row-compact) * 10); overflow-y: auto; overscroll-behavior: contain; }
.sidebar-rail .nav-chat-row[hidden], .sidebar-rail .nav-dropdown-icon[hidden] { display: none; }
.sidebar-rail .nav-chat-item { padding: 0 var(--rail-gap); white-space: nowrap; }
.sidebar-rail .sidebar-spacer { min-height: 0; }
.sidebar-rail .chat-list-name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* По решению владельца действие выделяется только цветом текста. */
.nav-chat-menu.open > .nav-chat-menu-item:not(.is-danger):is(:hover, :focus-visible) { background: transparent; color: var(--primary); }
.sidebar-rail .nav-chat-menu-btn:is(:hover, :focus-visible) { background: var(--bg-primary-light); color: var(--primary); }