/*
 * AICER — сине-белая тема (синий сайдбар, тёмная тема по умолчанию).
 *
 * Подключается после собранного Tailwind/Flux CSS. Tailwind v4 берёт цвета из
 * CSS-переменных, поэтому шкала zinc (была нейтрально-серой) заменяется на navy,
 * а акцент Flux — на фирменный синий. Правила здесь без @layer, поэтому они
 * сильнее утилит из сборки при равной специфичности.
 */

:root {
    --brand-blue: #1F4E9E;
    --brand-blue-dark: #163B7A;
    --brand-navy: #0D1F3F;
    --brand-navy-2: #132B52;
    --brand-navy-3: #0A1830;
    --brand-accent-dark: #2F63B8;
    --brand-link-dark: #8DB3EE;
    --brand-soft: #EAF0FA;
    /* олива — цвет кнопки «Создать чат», взят из снимка заказчика */
    --brand-olive: #6A7729;
    --brand-olive-hover: #7A8930;

    --nv-50: #F5F7FB;
    --nv-100: #EDF1F8;
    --nv-200: #D5DEEA;
    --nv-300: #BFCBDA;
    --nv-400: #8FA3C4;
    --nv-500: #5A6B85;
    --nv-600: #44546E;
    --nv-700: #2A4572;
    --nv-800: #132B52;
    --nv-900: #0D1F3F;
    --nv-950: #0A1830;

    --color-zinc-50: var(--nv-50);
    --color-zinc-100: var(--nv-100);
    --color-zinc-200: var(--nv-200);
    --color-zinc-300: var(--nv-300);
    --color-zinc-400: var(--nv-400);
    --color-zinc-500: var(--nv-500);
    --color-zinc-600: var(--nv-600);
    --color-zinc-700: var(--nv-700);
    --color-zinc-800: var(--nv-800);
    --color-zinc-900: var(--nv-900);
    --color-zinc-950: var(--nv-950);

    --color-accent: var(--brand-blue);
    --color-accent-content: var(--brand-blue);
    --color-accent-foreground: #FFFFFF;
}

.dark {
    --color-accent: var(--brand-accent-dark);
    --color-accent-content: var(--brand-link-dark);
    --color-accent-foreground: #FFFFFF;
}

/* ---------- фон страниц ---------- */

body:not(.auth-page) {
    background-color: var(--nv-50);
}

html.dark body:not(.auth-page) {
    background-color: var(--brand-navy);
}

/* ---------- синий сайдбар и мобильная шапка ---------- */

[data-flux-sidebar],
[data-flux-header] {
    /* внутри синего блока «серые» оттенки — это полупрозрачный белый */
    --color-zinc-50: rgba(255, 255, 255, 0.07);
    --color-zinc-100: rgba(255, 255, 255, 0.12);
    --color-zinc-200: rgba(255, 255, 255, 0.16);
    --color-zinc-300: rgba(255, 255, 255, 0.80);
    --color-zinc-400: rgba(255, 255, 255, 0.68);
    --color-zinc-500: rgba(255, 255, 255, 0.74);
    --color-zinc-600: rgba(255, 255, 255, 0.80);
    --color-zinc-700: rgba(255, 255, 255, 0.86);
    --color-zinc-800: #FFFFFF;
    --color-zinc-900: #FFFFFF;
    --color-accent-content: #FFFFFF;
    background-color: var(--brand-blue-dark);
    border-color: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
}

html.dark [data-flux-sidebar],
html.dark [data-flux-header] {
    /* в тёмной теме эти оттенки идут на фон элементов (dark:bg-zinc-800 / hover:bg-zinc-700) */
    --color-zinc-700: rgba(255, 255, 255, 0.10);
    --color-zinc-800: rgba(255, 255, 255, 0.05);
    background-color: var(--brand-navy-3);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-flux-sidebar] [data-flux-sidebar-item] {
    color: rgba(255, 255, 255, 0.82);
}

[data-flux-sidebar] [data-flux-sidebar-item]:hover {
    color: #FFFFFF;
    background-color: rgba(255, 255, 255, 0.08);
}

[data-flux-sidebar] [data-flux-sidebar-item][data-current] {
    color: #FFFFFF;
    background-color: rgba(255, 255, 255, 0.18);
    border-color: transparent;
}

html.dark [data-flux-sidebar] [data-flux-sidebar-item][data-current] {
    background-color: var(--brand-blue);
}

[data-flux-sidebar] [data-flux-sidebar-brand] > div:last-child,
[data-flux-sidebar] [data-flux-sidebar-brand] {
    color: #FFFFFF;
}

/* «Создать чат» — ссылка-кнопка; кнопки-меню «…» остаются прозрачными.
   Олива в обеих темах: это единственное действие в панели, которое
   что-то создаёт, остальное серое. */
[data-flux-sidebar] a[data-flux-button] {
    background-color: var(--brand-olive);
    border: 1px solid var(--brand-olive);
    color: #FFFFFF;
    box-shadow: none;
}

[data-flux-sidebar] a[data-flux-button]:hover {
    background-color: var(--brand-olive-hover);
    border-color: var(--brand-olive-hover);
}

html.dark [data-flux-sidebar] a[data-flux-button] {
    background-color: var(--brand-olive);
    border-color: var(--brand-olive);
}

html.dark [data-flux-sidebar] a[data-flux-button]:hover {
    background-color: var(--brand-olive-hover);
    border-color: var(--brand-olive-hover);
}

[data-flux-sidebar] [data-flux-avatar],
[data-flux-header] [data-flux-avatar] {
    background-color: rgba(255, 255, 255, 0.18);
    color: #FFFFFF;
}

/* выпадающие меню и подсказки внутри синих блоков — обычная палитра */
[data-flux-sidebar] [data-flux-menu],
[data-flux-header] [data-flux-menu],
[data-flux-sidebar] [popover],
[data-flux-header] [popover] {
    --color-zinc-50: var(--nv-50);
    --color-zinc-100: var(--nv-100);
    --color-zinc-200: var(--nv-200);
    --color-zinc-300: var(--nv-300);
    --color-zinc-400: var(--nv-400);
    --color-zinc-500: var(--nv-500);
    --color-zinc-600: var(--nv-600);
    --color-zinc-700: var(--nv-700);
    --color-zinc-800: var(--nv-800);
    --color-zinc-900: var(--nv-900);
    --color-accent-content: var(--brand-blue);
    color: var(--nv-900);
}

html.dark [data-flux-sidebar] [data-flux-menu],
html.dark [data-flux-header] [data-flux-menu],
html.dark [data-flux-sidebar] [popover],
html.dark [data-flux-header] [popover] {
    --color-accent-content: var(--brand-link-dark);
    color: #E6ECF5;
}

/* ---------- логотип и название продукта ---------- */

.aicer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 6px;
    color: #FFFFFF;
    text-decoration: none;
}

.aicer-brand-logo {
    display: block;
    height: 34px;
    width: auto;
}

.aicer-brand-name {
    padding-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.1;
    white-space: nowrap;
}

.auth-logo {
    width: 190px;
    max-width: 100%;
    height: auto;
}

/* старый знак «iA» (оставлен на случай отката шаблонов) */

div:has(> .brand-mark) {
    background-color: #FFFFFF;
    color: var(--brand-blue);
    border-radius: 8px;
}

.brand-mark {
    font-weight: 800;
    font-size: 13px;
    line-height: 1;
    letter-spacing: -0.02em;
}

/* ---------- чат ---------- */

html #chat-messages .bg-blue-500 {
    background-color: var(--brand-blue);
}

html.dark #chat-messages .bg-blue-500 {
    background-color: var(--brand-accent-dark);
}

html #chat-messages a {
    color: var(--brand-blue);
}

html.dark #chat-messages a {
    color: var(--brand-link-dark);
}

html #chat-messages .bg-blue-500 a {
    color: #FFFFFF;
}

html #chat-messages table th,
html #chat-messages table td {
    border-color: var(--nv-200);
}

html #chat-messages thead th {
    background-color: var(--nv-100);
}

html.dark #chat-messages table th,
html.dark #chat-messages table td {
    border-color: rgba(143, 163, 196, 0.3);
}

html.dark #chat-messages thead th {
    background-color: rgba(255, 255, 255, 0.04);
}

html #chat-messages a.cite-link {
    background-color: rgba(31, 78, 158, 0.1);
    color: var(--brand-blue);
}

html.dark #chat-messages a.cite-link {
    background-color: rgba(141, 179, 238, 0.14);
    color: var(--brand-link-dark);
}

html #chat-messages .source-chip {
    background-color: var(--brand-soft);
    border-color: rgba(31, 78, 158, 0.25);
    color: var(--brand-blue);
}

html #chat-messages .source-chip:hover {
    border-color: var(--brand-blue);
}

html.dark #chat-messages .source-chip {
    background-color: rgba(47, 99, 184, 0.18);
    border-color: rgba(141, 179, 238, 0.3);
    color: #CFE0FA;
}

html #chat-messages .export-btn:hover {
    border-color: var(--brand-blue);
    color: var(--brand-blue);
}

html.dark #chat-messages .export-btn:hover {
    border-color: var(--brand-link-dark);
    color: #CFE0FA;
}

/* ---------- страница входа ---------- */

body.auth-page {
    background: linear-gradient(160deg, #1F4E9E 0%, #163B7A 45%, #0D1F3F 100%) fixed;
}

body.auth-page .bg-background {
    background: transparent;
}

.auth-card {
    max-width: 340px;
    background-color: #FFFFFF;
    color: var(--nv-900);
    border-radius: 14px;
    padding: 24px 22px 22px;
    box-shadow: 0 20px 50px rgba(5, 15, 35, 0.35);
}

html.dark .auth-card {
    background-color: var(--nv-800);
    color: #E6ECF5;
}

.auth-brand {
    color: inherit;
    text-decoration: none;
}

.auth-brand-name {
    margin-top: 4px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

/* ---------- страница входа: подпись, «Powered by» ---------- */

.auth-card form {
    gap: 16px;
}

/* подпись относится к форме, а не к логотипу: отступ от логотипа больше, до полей — меньше */
.auth-lead {
    margin: 18px 0 -8px;
    text-align: center;
    font-size: 14px;
    line-height: 1.45;
    color: var(--nv-500, #5A6B85);
}

html.dark .auth-lead {
    color: rgba(230, 236, 245, 0.75);
}

.auth-lead strong,
.auth-powered strong {
    font-weight: 800;
    letter-spacing: 0.04em;
}

html .auth-lead strong {
    color: var(--nv-900);
}

html.dark .auth-lead strong {
    color: #FFFFFF;
}

/* сноска под кнопкой «Войти» */
.auth-note {
    margin: -10px 0 0;
    text-align: center;
    font-size: 12px;
    line-height: 1.45;
    color: var(--nv-500, #5A6B85);
}

html.dark .auth-note {
    color: rgba(230, 236, 245, 0.7);
}

.auth-note a {
    color: var(--brand-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}

html.dark .auth-note a {
    color: #8DB3EE;
}

/* подпись прижата к низу экрана по центру; отступ снизу, чтобы карточка на неё не наезжала */
body.auth-page .bg-background {
    position: relative;
    padding-bottom: 64px;
}

.auth-powered {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    text-align: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.auth-powered strong {
    color: #FFFFFF;
}

/* ---------- полосы прокрутки: тонкие, стальные, без стрелок ---------- */

* {
    scrollbar-width: thin;
    scrollbar-color: #9AA5B4 transparent;
}

html.dark * {
    scrollbar-color: #6F7C8F transparent;
}

/* сайдбар синий в обеих темах — полоса того же стального тона, но светлее */
html [data-flux-sidebar],
html [data-flux-sidebar] * {
    scrollbar-color: rgba(203, 213, 225, 0.45) transparent;
}

/* браузеры без scrollbar-color (старый Safari) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #9AA5B4;
    border-radius: 8px;
}

html.dark ::-webkit-scrollbar-thumb {
    background-color: #6F7C8F;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #8A94A3;
}

/* ---------- верхняя полоса: продолжение блока логотипа ---------- */

.app-topbar {
    height: 64px;
    min-height: 64px;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* в светлой теме полоса цвета страницы, отделена линией; внутри обычные (не «белые на синем») оттенки */
html:not(.dark) body [data-flux-header].app-topbar {
    --color-zinc-50: inherit;
    --color-zinc-100: inherit;
    --color-zinc-200: inherit;
    --color-zinc-300: inherit;
    --color-zinc-400: inherit;
    --color-zinc-500: inherit;
    --color-zinc-600: inherit;
    --color-zinc-700: inherit;
    --color-zinc-800: inherit;
    --color-zinc-900: inherit;
    --color-accent-content: inherit;
    background-color: var(--nv-50);
    border-color: var(--nv-200);
    color: var(--nv-900);
}

html:not(.dark) body .app-topbar [data-flux-avatar] {
    background-color: var(--brand-blue);
    color: #FFFFFF;
}

/* блок логотипа той же высоты, что верхняя полоса, линия под ним — начало общей линии (на всех экранах) */
[data-flux-sidebar] > [data-flux-sidebar-header] {
    height: 64px;
    margin: -16px -16px 0;
    padding: 0 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

html.dark [data-flux-sidebar] > [data-flux-sidebar-header] {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.topbar-title {
    min-width: 0;
    max-width: 46vw;
    padding-right: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 600;
}

.topbar-chat-actions,
.topbar-tools {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* вертикальные разделители — как между CER и AICER */
.topbar-chat-actions {
    margin-left: -4px;
    padding-left: 12px;
    border-left: 1px solid currentColor;
    border-left-color: rgba(127, 140, 160, 0.35);
}

.topbar-tools {
    padding-left: 12px;
    border-left: 1px solid rgba(127, 140, 160, 0.35);
}

.app-topbar [popover].topbar-tip {
    max-width: 300px;
    padding: 8px 10px;
    white-space: normal;
    font-size: 12.5px;
    line-height: 1.45;
    text-align: left;
    background-color: #0D1F3F;
    color: #F1F4F7;
}

html.dark .app-topbar [popover].topbar-tip {
    background-color: #F1F4F7;
    color: #0D1F3F;
}

/* окна Flux (<dialog>): базовые стили Tailwind обнуляют margin, и окно встаёт в левый верхний угол — центрируем */
[data-flux-modal] > dialog {
    margin: auto;
}

[data-flux-modal] > dialog::backdrop {
    background-color: rgba(8, 18, 38, 0.55);
}

html.dark [data-flux-modal] > dialog::backdrop {
    background-color: rgba(2, 8, 20, 0.75);
}

.docs-help-modal {
    width: min(560px, calc(100vw - 32px));
}

.docs-help-body {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.6;
}

.docs-help-body p {
    margin: 0 0 8px;
}

.docs-help-body ul {
    margin: 0;
    padding-left: 20px;
    list-style: disc;
}

.docs-help-body li {
    margin: 4px 0;
}

/* таблица условных аббревиатур в справке */
.docs-help-body {
    max-height: min(60vh, 540px);
    overflow-y: auto;
}

.docs-help-table {
    width: 100%;
    border-collapse: collapse;
}

.docs-help-table td {
    padding: 6px 10px 6px 0;
    vertical-align: top;
    border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}

.docs-help-table tr:last-child td {
    border-bottom: 0;
}

.docs-help-table .docs-help-num {
    width: 28px;
    text-align: right;
    opacity: 0.6;
    font-variant-numeric: tabular-nums;
}

.docs-help-table .docs-help-code {
    width: 84px;
    padding-left: 10px;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 420px) {
    .docs-help-table .docs-help-code {
        width: 70px;
    }

    .docs-help-body {
        font-size: 13px;
    }
}

.docs-help-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

@media (max-width: 639px) {
    .topbar-title {
        max-width: 38vw;
        padding-right: 4px;
        font-size: 15px;
    }

    .topbar-chat-actions {
        padding-left: 6px;
    }

    /* на телефоне «Скачать в Word» — только в меню «…», чтобы осталось место для названия */
    .topbar-chat-actions > [data-flux-tooltip] {
        display: none;
    }

    .topbar-tools {
        padding-left: 6px;
        gap: 0;
    }
}

/* обёртка @persist между сайдбаром и списком должна передавать высоту дальше, иначе прокручивается весь сайдбар */
[data-flux-sidebar] > [x-persist="chat-list"] {
    flex: 1 1 0%; /* база 0: иначе длинный список ужимает соседей, в том числе блок логотипа */
    min-height: 0;
    display: flex;
    flex-direction: column;
}

[data-flux-sidebar] > [data-flux-sidebar-header] {
    flex-shrink: 0;
}

/* телефон и планшет: рядом с логотипом стоит кнопка закрытия меню — логотип и AICER чуть меньше, кнопка не сжимается */
@media (max-width: 1023px) {
    [data-flux-sidebar] > [data-flux-sidebar-header] {
        gap: 8px;
        height: 64px;
    }

    [data-flux-sidebar] > [data-flux-sidebar-header] > .aicer-brand {
        min-width: 0;
        gap: 8px;
        padding: 4px 0;
    }

    [data-flux-sidebar] .aicer-brand-logo {
        height: 28px;
    }

    [data-flux-sidebar] .aicer-brand-name {
        padding-left: 8px;
        font-size: 15px;
    }

    [data-flux-sidebar] > [data-flux-sidebar-header] > :not(.aicer-brand) {
        flex-shrink: 0;
    }
}

/* ---------- активный чат в списке: как выбранный пункт меню ---------- */

[data-flux-sidebar] .flex-1.overflow-y-auto.space-y-2 > .relative.is-active > a {
    background-color: rgba(255, 255, 255, 0.2);
    box-shadow: inset 3px 0 0 #FFFFFF;
}

/* селектор длиннее правила строк графитовой темы, чтобы перекрыть его и там */
html.dark [data-flux-sidebar] .flex-1.overflow-y-auto.space-y-2 > .relative.is-active > a {
    background-color: var(--brand-accent-dark);
    box-shadow: inset 3px 0 0 #FFFFFF;
}

/* ---------- фирменное написание AICER: Open Sans, жирный ---------- */

:root {
    --aicer-font: 'Open Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* сайдбар и верхняя полоса, подпись под формой входа, «Powered by AICER» */
.aicer-brand-name,
.auth-lead strong,
.auth-powered strong,
.aicer-word {
    font-family: var(--aicer-font);
    font-weight: 700;
}

/* ---------- раздел «Документы» ---------- */

.doc-count {
    margin-right: auto;
    font-size: 12px;
    font-weight: 600;
    color: #8A94A3;
}

.status-badge.is-wait {
    background-color: rgba(217, 119, 6, 0.12);
    color: #B45309;
}

html.dark .status-badge.is-wait {
    background-color: rgba(251, 191, 36, 0.15);
    color: #FCD34D;
}

.doc-meta {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 400;
    color: #8A94A3;
}

/* панель загрузки шире обычной боковой панели: в ней форма, а не список */
@media (min-width: 640px) {
    .docs-drawer {
        width: 400px;
    }
}

.doc-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 18px 14px;
    border: 1px dashed rgba(31, 78, 158, 0.45);
    border-radius: 8px;
    background-color: rgba(31, 78, 158, 0.06);
    color: #1F4E9E;
    text-align: center;
    cursor: pointer;
}

.doc-drop.is-over {
    border-color: #1F4E9E;
    background-color: rgba(31, 78, 158, 0.12);
}

html.dark .doc-drop {
    border-color: rgba(147, 197, 253, 0.4);
    background-color: rgba(147, 197, 253, 0.08);
    color: #BFDBFE;
}

.doc-drop-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.doc-drop-title {
    font-size: 13px;
    font-weight: 600;
}

.doc-drop-hint {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.4;
    color: #6B7280;
}

html.dark .doc-drop-hint {
    color: #9CA3AF;
}

.doc-progress {
    height: 4px;
    border-radius: 999px;
    background-color: rgba(31, 78, 158, 0.15);
    overflow: hidden;
}

.doc-progress > span {
    display: block;
    height: 100%;
    background-color: #1F4E9E;
    transition: width 0.2s linear;
}

.doc-file {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(113, 113, 122, 0.25);
    border-radius: 8px;
    font-size: 12px;
}

.doc-file-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-file-meta {
    flex-shrink: 0;
    font-size: 11px;
    color: #6B7280;
}

.doc-file-remove {
    flex-shrink: 0;
    color: #9CA3AF;
    cursor: pointer;
}

.doc-file-remove:hover {
    color: #B91C1C;
}

.doc-file-error {
    margin: -4px 0 0 8px;
    font-size: 11px;
    color: #B91C1C;
}

html.dark .doc-file-error {
    color: #FCA5A5;
}

.doc-state {
    flex-shrink: 0;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background-color: rgba(113, 113, 122, 0.15);
    color: #52525B;
}

html.dark .doc-state {
    color: #D4D4D8;
}

.doc-state.is-done {
    background-color: rgba(22, 163, 74, 0.12);
    color: #15803D;
}

.doc-state.is-uploading {
    background-color: rgba(31, 78, 158, 0.12);
    color: #1F4E9E;
}

.doc-state.is-error {
    background-color: rgba(220, 38, 38, 0.1);
    color: #B91C1C;
}

html.dark .doc-state.is-done { color: #86EFAC; }
html.dark .doc-state.is-uploading { color: #BFDBFE; }
html.dark .doc-state.is-error { color: #FCA5A5; }

/* Кнопка загрузки теперь без подписи на всех экранах, и Flux сам рисует
   её квадратом 40 x 40 — прежние правила (.doc-upload-label и ширина
   .doc-upload-btn на телефоне) стали не нужны и убраны. Метка класса
   на кнопке оставлена: пригодится, если понадобится её выделить. */

/* В верхнем листании нет подписи «Показано с 1 до 15 из 41 результатов»:
   она занимала 232 px и вместе с подписью кнопки ломала шапку на две
   строки при 1180 px. Общее число и так стоит у заголовка, текущая
   страница подсвечена в самом листании, а под таблицей фраза осталась
   целиком — там места хватает. */
.doc-pager-top p {
    display: none;
}

/* Поле поиска по названию: 256 px (sm:w-64) -> 294 px, то есть длиннее
   на сантиметр (37,8 px при 96 точках на дюйм). Место справа от него
   есть: строка прижата к правому краю, а слева пусто.

   Ширина задаётся обёртке поля — класс у Flux попадает на неё, сам
   <input> внутри тянется на 100 %. [data-flux-input] в селекторе —
   чтобы перебить sm:w-64 из собранного стиля.

   До 640 px поле во всю ширину строки, там правило не нужно. */
@media (min-width: 640px) {
    .doc-search[data-flux-input] {
        width: 294px;
        /* Жёсткая ширина роняла шапку на две строки: не хватало
           десятка пикселей, и правый блок уезжал вниз целиком.
           Теперь поле отдаёт ширину, когда строке тесно: 294 px
           при свободном месте и не меньше 200 px при нехватке.
           Перенос остаётся только для окон уже ~975 px. */
        flex: 0 1 294px;
        min-width: 200px;
    }
}

/* Шапка раздела на планшете не помещалась в строку: при 1180 px под неё
   остаётся ~880 px, а нужно ~1170 — заголовок со счётчиком и кнопкой
   загрузки 358, поиск 294, фильтр 40 и верхнее листание с подписью
   «Показано …» около 450. Flex не ужимает элементы ниже содержимого,
   поэтому страница становилась шире экрана: появлялась горизонтальная
   прокрутка, а у края экран пружинил.

   Разрешаем перенос. Сначала вниз уезжает весь правый блок, а если
   тесно и ему (1024 px) — внутри него переносится верхнее листание.
   На широком экране всё как было: блок растягивается и прижимается
   вправо, как при justify-between. */
@media (min-width: 640px) {
    .doc-head-row {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .doc-head-tools {
        flex: 1 1 auto;
        flex-wrap: wrap;
        justify-content: flex-end;
        row-gap: 10px;
        min-width: 0;
    }
}

/* ---------- квота хранилища компании ---------- */

.storage-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font-size: 12px;
    color: #5A6B85;
}

html.dark .storage-bar {
    color: #BFCBDA;
}

.storage-bar-label {
    font-weight: 600;
    white-space: nowrap;
}

.storage-bar-value {
    white-space: nowrap;
}

.storage-meter {
    flex: 0 1 240px;
    min-width: 80px;
    height: 6px;
    border-radius: 999px;
    background-color: rgba(31, 78, 158, 0.15);
    overflow: hidden;
}

.storage-meter > span {
    display: block;
    height: 100%;
    background-color: #1F4E9E;
}

html.dark .storage-meter {
    background-color: rgba(147, 197, 253, 0.18);
}

html.dark .storage-meter > span {
    background-color: #8DB3EE;
}

.storage-meter.is-warn80 > span { background-color: #D97706; }
.storage-meter.is-warn95 > span,
.storage-meter.is-over > span { background-color: #DC2626; }
html.dark .storage-meter.is-warn80 > span { background-color: #FBBF24; }
html.dark .storage-meter.is-warn95 > span,
html.dark .storage-meter.is-over > span { background-color: #F87171; }

.storage-note {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
}

.storage-note.is-warn80 {
    background-color: rgba(217, 119, 6, 0.12);
    color: #B45309;
}

.storage-note.is-warn95,
.storage-note.is-over {
    background-color: rgba(220, 38, 38, 0.1);
    color: #B91C1C;
}

html.dark .storage-note.is-warn80 {
    background-color: rgba(251, 191, 36, 0.15);
    color: #FCD34D;
}

html.dark .storage-note.is-warn95,
html.dark .storage-note.is-over {
    background-color: rgba(248, 113, 113, 0.15);
    color: #FCA5A5;
}

.storage-hint {
    font-size: 12px;
    color: #5A6B85;
}

html.dark .storage-hint {
    color: #BFCBDA;
}

.storage-hint.is-warn80 { color: #B45309; }
.storage-hint.is-warn95,
.storage-hint.is-over { color: #B91C1C; }
html.dark .storage-hint.is-warn80 { color: #FCD34D; }
html.dark .storage-hint.is-warn95,
html.dark .storage-hint.is-over { color: #FCA5A5; }

.storage-cell.is-warn80 { color: #B45309; }
.storage-cell.is-warn95,
.storage-cell.is-over { color: #B91C1C; }
html.dark .storage-cell.is-warn80 { color: #FCD34D; }
html.dark .storage-cell.is-warn95,
html.dark .storage-cell.is-over { color: #FCA5A5; }

.storage-custom {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 11px;
    background-color: rgba(31, 78, 158, 0.1);
    color: #1F4E9E;
}

html.dark .storage-custom {
    background-color: rgba(147, 197, 253, 0.15);
    color: #BFDBFE;
}

/* ---------- мобильная вёрстка ---------- */

/* 100vh на телефонах не учитывает панели браузера */
@supports (height: 100dvh) {
    .h-screen {
        height: 100dvh;
    }

    /* иначе страница остаётся высотой с «раскрытое» окно Safari, а содержимое — с видимое,
       и снизу висит пустая полоса высотой с панели браузера, которая ещё и прыгает при прокрутке */
    body {
        min-height: 100dvh;
    }
}

/* чат по высоте экрана: шапка (56px, только < lg) и отступы main (24px + 24px, на lg 32px + 32px) */
.chat-page {
    --chat-chrome: 112px; /* верхняя полоса 64 + отступы main 24+24 */
    height: calc(100vh - var(--chat-chrome));
    height: calc(100dvh - var(--chat-chrome));
    /* --app-vh ставит скрипт чата по настоящей видимой области (панели браузера, клавиатура) */
    height: calc(var(--app-vh, 100dvh) - var(--chat-chrome));
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (min-width: 1024px) {
    .chat-page {
        --chat-chrome: 128px; /* верхняя полоса 64 + отступы main 32+32 */
    }
}

.chat-thread {
    flex: 1 1 auto;
    min-height: 0;
}

/* общая колонка 768px для ленты и поля ввода: строки ответа не растягиваются на весь экран */
#chat-messages > * {
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
}

/* у ленты справа отступ под полосу прокрутки — такой же слева, чтобы колонка совпала с полем ввода */
@media (min-width: 640px) {
    #chat-messages {
        padding-left: 1rem;
    }
}

.composer-row {
    max-width: 768px;
}

.chat-bubble-user {
    max-width: min(85%, 600px);
    overflow-wrap: anywhere;
}

.chat-time {
    font-size: 11.5px;
    line-height: 1.2;
}

.chat-list-time {
    font-size: 11px;
    line-height: 1;
}

/* название раздела в мобильной шапке */
.mobile-page-title {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 600;
}

/* модальные окна: затемнённый фон, кнопки справа, основная последней */
.modal-overlay {
    background-color: rgba(8, 18, 38, 0.55);
}

html.dark .modal-overlay {
    background-color: rgba(2, 8, 20, 0.75);
}

.modal-card .flex.justify-between.gap-4.mt-6 {
    flex-direction: row-reverse;
    justify-content: flex-start;
    gap: 12px;
}

/* статус пользователя */
.status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

.status-badge.is-on {
    background-color: rgba(22, 163, 74, 0.12);
    color: #15803D;
}

.status-badge.is-off {
    background-color: rgba(220, 38, 38, 0.1);
    color: #B91C1C;
}

html.dark .status-badge.is-on {
    background-color: rgba(74, 222, 128, 0.15);
    color: #86EFAC;
}

html.dark .status-badge.is-off {
    background-color: rgba(248, 113, 113, 0.15);
    color: #FCA5A5;
}

/* Таблица документов без прокрутки вбок (от 640 px; ниже — карточки).

   Замер при окне 1110: под таблицу 773 px, а ей нужно было ~1050.
   Съедали ширину поля ячеек (7 столбцов по 48 px) и длинные имена
   файлов: подчёркивание не точка разрыва, поэтому строка вроде
   «2007_ДОП2_ПРАЗВЕДКИ_Кемерколь» распирала столбец целиком.

   Поля ужаты вдвое, остальным столбцам задана точная ширина, а
   «Название» забирает остаток строки (table-layout: fixed) и
   подрезается многоточием. Полное имя — в подсказке (title).
   Шесть столбцов занимают 581 px. При 1110 имени остаётся 192 px
   (около 21 знака), при 1722 — 804 px, то есть имена видны целиком. */
@media (min-width: 640px) {
    .doc-table {
        table-layout: fixed;
        width: 100%;
    }

    .doc-table th,
    .doc-table td {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* ширины подобраны по самому длинному содержимому столбца плюс поля */
    .doc-table th:nth-child(2), .doc-table td:nth-child(2) { width: 90px; }   /* Тип */
    .doc-table th:nth-child(3), .doc-table td:nth-child(3) { width: 64px; }   /* Год */
    .doc-table th:nth-child(4), .doc-table td:nth-child(4) { width: 150px; }  /* Объект */
    .doc-table th:nth-child(5), .doc-table td:nth-child(5) { width: 112px; }  /* Статус */
    .doc-table th:nth-child(6), .doc-table td:nth-child(6) { width: 105px; }  /* Загружен */
    .doc-table th:nth-child(7), .doc-table td:nth-child(7) { width: 60px; }   /* меню строки */

    /* при фиксированной раскладке содержимое шире столбца вылезает
       на соседний — обрезаем многоточием. Ячейку меню не трогаем:
       в ней выпадающее меню строки. */
    .doc-table th,
    .doc-table td:not([data-actions]) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Список документов прокручивается внутри себя, а шапка раздела, полоса
   хранилища, заголовки столбцов и нижнее листание остаются на месте.

   Высоту считает сама раскладка: строка сетки Flux под содержимое
   сжимается, область содержимого и корень страницы — колонки,
   таблица занимает остаток. Ничего не измеряется скриптом.

   У прилипшей шапки таблицы фон обязателен и непрозрачный: родной
   dark:bg-zinc-900/50 полупрозрачный, сквозь него просвечивали бы
   уезжающие строки. #102548 — это и есть нынешний цвет шапки,
   nv-900 под 50 % поверх карточки nv-800. */
@media (min-width: 640px) {
    /* Строка сетки Flux под содержимое объявлена как 1fr — такая строка
       растёт под содержимое. Разрешаем ей сжиматься.

       Одного minmax(0, 1fr) мало: у body задана только min-height,
       а для сетки это «высота не определена», и доля 1fr считается от
       содержимого, а не от окна — строка снова вырастет под таблицу.
       Поэтому высота здесь именно height, а не min-height.
       100dvh, а не 100vh: на планшете и телефоне учитывает полосы
       браузера, которые появляются и исчезают при прокрутке. */
    body:has(.doc-table-wrap) {
        height: 100dvh;
        overflow: hidden;
        grid-template-rows: auto minmax(0, 1fr) auto;
    }

    /* область содержимого (p-6 lg:p-8) и корень страницы — колонка:
       нижние поля и высота листания учитываются сами */
    [data-flux-main]:has(.doc-table-wrap),
    [data-flux-main]:has(.doc-table-wrap) > .doc-page {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    [data-flux-main]:has(.doc-table-wrap) > .doc-page {
        flex: 1 1 auto;
    }

    /* 0 1 auto: по содержимому, но не больше остатка строки — тогда
       короткий список не растягивается, а длинный прокручивается внутри */
    .doc-table-wrap {
        flex: 0 1 auto;
        min-height: 0;
        overflow-y: auto;
    }

    .doc-table thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background-color: var(--nv-50);
    }

    html.dark .doc-table thead th {
        background-color: #102548;
    }
}

/* таблицы на телефоне: строка = карточка, подписи полей слева, меню действий справа */
@media (max-width: 639px) {
    .data-table thead {
        display: none;
    }

    .data-table,
    .data-table tbody {
        display: block;
        width: 100%;
    }

    .data-table tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 8px;
        padding: 12px 8px 12px 14px;
    }

    .data-table tbody td {
        grid-column: 1;
        padding: 0;
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: 13px;
        line-height: 1.55;
    }

    .data-table tbody td:first-child {
        margin-bottom: 2px;
        font-size: 15px;
        font-weight: 600;
    }

    .data-table tbody td[data-label]:not(:first-child)::before {
        content: attr(data-label) ": ";
        color: var(--color-zinc-500);
    }

    .data-table tbody td[data-actions] {
        grid-column: 2;
        grid-row: 1 / span 6;
        align-self: start;
        text-align: right;
    }

    .data-table tbody td[colspan] {
        grid-column: 1 / -1;
        padding: 28px 0;
        text-align: center;
    }
}

/* ---------- пружинящая пустота на iPad ---------- */

/* На iPadOS документ оттягивается за свои границы, и под ним показывается
   фон страницы. У списка чатов это закрыто своим правилом, но тянуть можно
   за любое пустое место — особенно заметно в альбомной ориентации.

   none, а не contain: contain запрещает только подхват соседней области,
   а пружинить за своей границей всё равно разрешает.

   Ценой этого на страницах, которые прокручиваются целиком, пропадает жест
   «потянуть вниз для обновления». Обычное обновление страницы работает.

   Правило живёт здесь, а не классом в разметке: собранный стиль Tailwind
   от 13.07 не пересобирается, и нового класса в нём не появится. */
html,
body {
    overscroll-behavior: none;
}


/* ---------- плотность строк бокового меню ---------- */

/* Строка меню по умолчанию 32 px плюс 4 px зазора — шаг 36 px.
   Делаем шаг 31 px: строки стоят плотнее примерно на 15 %.

   На телефоне и планшете боковая панель открывается поверх страницы
   (data-flux-sidebar-on-mobile) — там строки остаются прежними,
   чтобы по ним было удобно попадать пальцем.

   Правило живёт здесь, а не классом в разметке: собранный стиль
   Tailwind от 13.07 не пересобирается. */
[data-flux-sidebar]:not([data-flux-sidebar-on-mobile]) [data-flux-sidebar-nav] [data-flux-sidebar-item] {
    height: 29px;
    margin-top: 1px;
    margin-bottom: 1px;
}