/* Оформление ассистента «Законы Приднестровья».
   Один файл на веб и мобильное приложение: компоненты общие, значит и стили общие. */

/* Тема следует за настройкой браузера или системы. Светлая — базовая,
   тёмная переопределяет только цвета. Объявление color-scheme обязательно:
   без него системные элементы (списки, поля дат, полосы прокрутки, поле ввода)
   остаются светлыми даже в тёмной теме. */
:root {
    color-scheme: light dark;

    --bg: #f7f7f8;
    --surface: #ffffff;
    --surface-2: #eef0f3;
    --border: #d5d9e0;
    --text: #1c1e21;
    --text-muted: #5c626b;
    --accent: #1d4f91;
    --accent-contrast: #ffffff;
    --accent-soft: #e5edf8;
    --danger: #b3261e;
    --shadow: 0 8px 24px rgb(15 23 42 / 12%);
    --radius: 10px;
    /* Заголовки диалогов — это начало вопроса, при узкой панели они почти все
       обрывались многоточием. На узких экранах ширина ограничена долей окна. */
    --sidebar-width: 340px;
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #17181c;
        --surface: #1f2126;
        --surface-2: #272a30;
        --border: #383c44;
        --text: #e8eaed;
        --text-muted: #a2a7b0;
        --accent: #7ea8e0;
        --accent-contrast: #10131a;
        --accent-soft: #232d3c;
        --danger: #ef857d;
        --shadow: 0 8px 24px rgb(0 0 0 / 45%);
    }
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
    line-height: 1.55;
}

/* --- Каркас --- */

.app-shell {
    display: flex;
    height: 100dvh;
    overflow: hidden;
}

.chat-area {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.chat-title {
    align-items: center;
    display: flex;
    font-weight: 600;
    font-size: 16px;
    gap: 8px;
    margin-right: auto;

    /* Заголовок обязан уступать место. Флексовый элемент по умолчанию не сжимается
       ниже своего самого длинного слова, поэтому с меткой фильтра («вид: Приказ»)
       строка шапки переставала помещаться: на экране 375 px её содержимое занимало
       397 px, и кнопка фильтров вместе с раскрытой панелью уезжала вправо за край.
       Здесь заголовок вместо этого обрезается многоточием.

       Большой flex-shrink — чтобы место уступал именно заголовок: название приложения
       постоянно и видно целиком, пока фильтр не выбран, а метка несёт то, что человек
       только что выбрал сам. Нижняя граница не нулевая, иначе заголовок исчезает совсем. */
    flex-shrink: 100;
    min-width: 3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Знак не должен сжиматься, когда заголовку не хватает места на узком экране. */
.chat-title-mark {
    flex: none;
}

/* Экран «Подключение к серверу…» вместо чата, пока сервер не ответил (только MAUI,
   ChatPanel.WaitForServer). Повторяет экран загрузки из index.html мобильного приложения,
   чтобы при «Назад к чату» из настроек одно не сменялось другим заметно. */
.connecting-screen {
    align-items: center;
    background: var(--bg);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 18px;
    height: 100dvh;
    justify-content: center;
    padding: 24px;
    text-align: center;
}

.connecting-title {
    color: var(--text);
    display: flex;
    flex-direction: column;
    font-weight: 600;
    gap: 2px;
}

.connecting-kind {
    font-size: 17px;
}

.connecting-subject {
    font-size: 22px;
}

.chat-footer {
    border-top: 1px solid var(--border);
    background: var(--surface);
    padding: 12px 16px 10px;
    /* От подвала отсчитывается сообщение «Ответ готов». */
    position: relative;
}

/* «Ответ готов» — над подвалом, по центру, поверх ленты сообщений. Появляется, держится
   и гаснет само; длительность (3 с) совпадает с ReadyToastLifetime в ChatPanel, который
   после неё убирает элемент из разметки. Нажатия проходят сквозь него к ленте. */
.answer-toast {
    align-items: center;
    animation: answer-toast 3s ease forwards;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    bottom: calc(100% + 10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    color: var(--text);
    display: flex;
    font-size: 13px;
    gap: 6px;
    left: 50%;
    padding: 6px 14px 6px 10px;
    pointer-events: none;
    position: absolute;
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 5;
}

.answer-toast svg {
    color: var(--accent);
    height: 16px;
    width: 16px;
}

@keyframes answer-toast {
    0% { opacity: 0; transform: translate(-50%, 6px); }
    10% { opacity: 1; transform: translate(-50%, 0); }
    75% { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, -4px); }
}

/* Без анимаций по настройке системы — просто показывается и пропадает. */
@media (prefers-reduced-motion: reduce) {
    .answer-toast {
        animation: none;
    }
}

.footer-note {
    margin: 8px 0 0;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
}

/* Разработчик — приглушённее оговорки: на узком экране уходит на свою строку. */
.footer-vendor {
    margin-left: 8px;
    white-space: nowrap;
}

.footer-vendor a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.footer-vendor a:hover {
    color: var(--accent);
}

/* --- Расход токенов в окнах учёта (5 часов и неделя) --- */

/* Кнопка в шапке рядом с «Фильтрами»: оформление берёт у .filter-toggle,
   здесь только процент. Кнопка не сжимается — сжимается заголовок чата. */
.usage-toggle {
    flex: none;
}

.usage-toggle-percent {
    color: var(--text-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.usage-toggle.usage-high .usage-toggle-percent {
    color: var(--danger);
}

/* На узком экране шапке не хватает места — остаются значок и процент. */
@media (max-width: 600px) {
    .usage-toggle-label {
        display: none;
    }
}

.usage-bar {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: var(--surface-2);
    overflow: hidden;
}

.usage-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
}

.usage-bar.usage-high > span {
    background: var(--danger);
}

/* Панель выпадает под кнопкой, как у «Фильтров»: прижата к правому краю кнопки,
   подложка прозрачная и только ловит щелчок мимо. */
.usage-panel {
    position: relative;
    flex: none;
}

.usage-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 19;
}

.usage-dialog {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    width: min(420px, calc(100vw - 32px));
    max-height: 70vh;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 16px 18px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.usage-dialog:focus {
    outline: none;
}

.usage-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.usage-dialog-title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
}

/* На узком экране панель не прижимается к кнопке: кнопка стоит левее «Фильтров»,
   и панель шириной почти в экран уехала бы левым краем за его границу. Встаёт под
   шапкой во всю ширину с полями по 16 px. Правило стоит после основного намеренно —
   при равной специфичности побеждает то, что ниже. */
@media (max-width: 600px) {
    .usage-dialog {
        position: fixed;
        top: 64px;
        left: 16px;
        right: 16px;
        width: auto;
    }
}

.usage-window-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
    font-size: 13px;
}

.usage-window-title {
    font-weight: 600;
}

.usage-window-percent {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.usage-window-note,
.usage-hint {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

.usage-hint {
    margin: 0;
}

.usage-window-blocked {
    color: var(--danger);
}

/* --- Список диалогов --- */

.sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface-2);
    border-right: 1px solid var(--border);
    overflow: hidden;
}

.sidebar:not(.open) {
    display: none;
}

.sidebar-header {
    align-items: center;
    display: flex;
    gap: 6px;
    padding: 12px;
}

.sidebar-header .new-chat {
    flex: 1;
}

/* Поиск по названию — между кнопкой «Новый диалог» и списком. */
.sidebar-search {
    position: relative;
    margin: 0 12px 8px;
}

.sidebar-search-icon {
    position: absolute;
    left: 9px;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.sidebar-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 8px 7px 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 14px;
}

.sidebar-search-input:focus {
    outline: none;
    border-color: var(--accent);
}

.sidebar-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 8px 12px;
}

.sidebar-more {
    display: block;
    width: 100%;
    margin-top: 6px;
}

.sidebar-empty {
    color: var(--text-muted);
    font-size: 13px;
    padding: 8px;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: var(--radius);
    padding: 2px 4px;
}

.sidebar-item:hover {
    background: var(--surface);
}

.sidebar-item.current {
    background: var(--accent-soft);
}

.sidebar-title {
    flex: 1;
    min-width: 0;
    text-align: left;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    padding: 8px 6px;
}

.sidebar-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-meta {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
}

.sidebar-actions {
    display: flex;
    gap: 2px;
    opacity: 0;
}

.sidebar-item:hover .sidebar-actions,
.sidebar-item.current .sidebar-actions {
    opacity: 1;
}

.sidebar-rename {
    flex: 1;
    min-width: 0;
    font: inherit;
    padding: 7px 8px;
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
}

.sidebar-confirm {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--text-muted);
    padding: 4px 8px 8px;
}

/* --- Лента сообщений --- */

.message-list-container {
    flex: 1;
    overflow-y: auto;
    padding: 20px 16px;
}

.message-list {
    display: block;
    max-width: 820px;
    margin: 0 auto;
}

.no-messages {
    max-width: 620px;
    margin: 8vh auto 0;
    text-align: center;
    color: var(--text-muted);
}

.no-messages h1 {
    color: var(--text);
    font-size: 24px;
    margin-bottom: 8px;
}

/* Заголовок в две строки: «AI-ассистент» над «Законы Приднестровья». */
.no-messages-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Обе строки — один заголовок: цвет и начертание наследуются от h1, разный только
   размер. Верхняя чуть мельче, чтобы главным читалось название, а не род занятий. */
.no-messages-kind {
    font-size: 20px;
    line-height: 1.2;
}

.no-messages-subject {
    font-size: 26px;
    line-height: 1.2;
}

.examples {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 20px 0;
}

.example {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    padding: 10px 14px;
    text-align: left;
}

.example:hover {
    border-color: var(--accent);
}

.disclaimer {
    font-size: 12px;
}

.user-message {
    background: var(--accent-soft);
    border-radius: var(--radius);
    margin: 16px 0 16px auto;
    max-width: 80%;
    padding: 10px 14px;
    white-space: pre-wrap;
    width: fit-content;
}

.assistant-message {
    display: flex;
    gap: 12px;
    margin: 16px 0 24px;
}

.assistant-message-icon svg {
    width: 22px;
    height: 22px;
    color: var(--accent);
}

.assistant-message-body {
    min-width: 0;
    flex: 1;
}

.assistant-message-header {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
}

.assistant-message-text :first-child {
    margin-top: 0;
}

.assistant-message-text :last-child {
    margin-bottom: 0;
}

.assistant-message-text pre {
    background: var(--surface-2);
    border-radius: var(--radius);
    overflow-x: auto;
    padding: 10px 12px;
}

.assistant-message-text table {
    border-collapse: collapse;
    display: block;
    overflow-x: auto;
}

.assistant-message-text td,
.assistant-message-text th {
    border: 1px solid var(--border);
    padding: 4px 8px;
}

.message-status {
    align-items: center;
    color: var(--text-muted);
    display: flex;
    font-size: 13px;
    gap: 8px;
    padding: 4px 0;
}

.message-error {
    background: var(--surface-2);
    border-left: 3px solid var(--danger);
    border-radius: 4px;
    color: var(--danger);
    padding: 8px 12px;
}

/* Три точки с бегущей слева направо подсветкой.
   Разметка не меняется: в компонентах это по-прежнему один пустой <span class="spinner">,
   поэтому боковые точки рисуются тенями, а анимируется их цвет — так три точки
   получаются из одного элемента без дополнительных узлов. */
.spinner {
    animation: dots 1.2s linear infinite;
    background: var(--border);
    border-radius: 50%;
    display: inline-block;
    height: 5px;
    width: 5px;
    /* Крайние точки; из-за них элемент шире своей ширины — компенсируем отступом,
       иначе текст рядом наезжал бы на третью точку. */
    box-shadow: 8px 0 var(--border), 16px 0 var(--border);
    margin-right: 16px;
    /* Выравнивание по строке текста рядом: точка ниже базовой линии. */
    vertical-align: 2px;
}

@keyframes dots {
    0%, 100% { background: var(--accent); box-shadow: 8px 0 var(--border), 16px 0 var(--border); }
    33%      { background: var(--border); box-shadow: 8px 0 var(--accent), 16px 0 var(--border); }
    66%      { background: var(--border); box-shadow: 8px 0 var(--border), 16px 0 var(--accent); }
}

@media (prefers-reduced-motion: reduce) {
    /* Бегущая подсветка сама по себе резкая; замедляем и оставляем как индикатор. */
    .spinner { animation-duration: 3s; }
}

/* --- Источники и цитаты --- */

.sources {
    border-top: 1px solid var(--border);
    margin-top: 16px;
    padding-top: 10px;
}

.usage {
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 10px;
}

/* Оценка приблизительная — отделяем её от точных чисел модели. */
.usage-estimate {
    opacity: 0.75;
}

.sources-toggle {
    align-items: center;
    background: none;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    font: inherit;
    font-size: 13px;
    gap: 4px;
    padding: 2px 0;
}

/* Общая стрелка раскрытия: и у всего списка, и у отдельного источника.
   Знак «▸» сам по себе мелкий: при кегле списка 13px он выходил меньше строчной
   буквы. Увеличен масштабированием, а не кеглем: крупный кегль раздвигал строки
   списка и поднимал знак над серединой текста, масштаб же на раскладку не влияет.
   Поворот в обоих состояниях указан явно, чтобы переход анимировал только его. */
.caret {
    display: inline-block;
    transform: rotate(0deg) scale(1.4);
    transition: transform 0.15s;
}

.caret.open {
    transform: rotate(90deg) scale(1.4);
}

@media (prefers-reduced-motion: reduce) {
    .caret { transition: none; }
}

.sources-list {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
}

.source-item {
    font-size: 13px;
    margin-bottom: 2px;
}

.source-row {
    align-items: baseline;
    display: flex;
    gap: 2px;
}

.source-caret {
    background: none;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    font: inherit;
    line-height: 1.4;
    padding: 2px 4px;
}

.source-caret:hover {
    color: var(--text);
}

.source-link {
    background: none;
    border: 0;
    color: var(--accent);
    cursor: pointer;
    font: inherit;
    padding: 2px 0;
    text-align: left;
}

.source-link:hover {
    text-decoration: underline;
}

.source-count {
    color: var(--text-muted);
    flex-shrink: 0;
    font-size: 12px;
    white-space: nowrap;
}

/* Части текста выравниваются по названию документа, а не по стрелке. */
.source-details {
    border-left: 2px solid var(--border);
    margin: 2px 0 10px 26px;
    padding-left: 10px;
}

.source-parts {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
}

.source-part + .source-part {
    border-top: 1px solid var(--border);
    margin-top: 8px;
    padding-top: 8px;
}

.source-part-link {
    background: none;
    border: 0;
    /*  color: var(--text-muted);*/
    color: var(--accent);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    padding: 0;
    text-align: left;
}

.source-part-link:hover {
    color: var(--accent);
    text-decoration: underline;
}

.source-name,
.source-path {
    color: var(--text-muted);
    font-size: 12px;
}

.source-snippet {
    color: var(--text-muted);
    margin-top: 4px;
}

.citations {
    margin-top: 14px;
}

.citations-title {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
}

.citation {
    align-items: flex-start;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: inherit;
    cursor: pointer;
    display: flex;
    font: inherit;
    gap: 8px;
    margin-bottom: 6px;
    padding: 8px 10px;
    text-align: left;
    width: 100%;
}

.citation:hover {
    border-color: var(--accent);
}

/* Те же карточки и ссылки, но тегом <a> — когда в настройках выбран портал.
   Браузер даёт кнопке box-sizing: border-box и не даёт его ссылке, поэтому без
   этого правила карточка при width: 100% вылезала бы за колонку на ширину полей
   и рамки. Подчёркивание снимается по той же причине: у кнопки его нет. */
a.citation,
a.source-link,
a.source-part-link {
    box-sizing: border-box;
    text-decoration: none;
}

a.source-link:hover,
a.source-part-link:hover {
    text-decoration: underline;
}

.citation-icon {
    color: var(--accent);
    flex-shrink: 0;
    height: 18px;
    width: 18px;
}

.citation-title {
    display: block;
    font-size: 13px;
    font-weight: 600;
}

.citation-part {
    background: var(--surface-2);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 400;
    margin-left: 6px;
    padding: 1px 7px;
    white-space: nowrap;
}

.citation-quote {
    color: var(--text-muted);
    display: block;
    font-size: 13px;
}

/* --- Фильтры --- */

.filter-panel {
    position: relative;

    /* Тоже флексовый элемент шапки: без этого не сжимается ниже ширины кнопки
       вместе с меткой и распирает строку. */
    min-width: 0;
}

.filter-toggle {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: inherit;
    cursor: pointer;
    display: flex;
    font: inherit;
    gap: 6px;
    max-width: 100%;
    min-width: 0;
    padding: 6px 10px;
}

/* Слово «Фильтры» не сжимается: уступать место должна метка с выбранными значениями,
   а не название кнопки — иначе на узком экране от неё остаётся «Фи…». */
.filter-toggle-label {
    flex: none;
}

.filter-icon {
    /* Без этого воронку сплющивает: она флексовый элемент кнопки и сжимается
       наравне с меткой, когда в шапке не хватает места. */
    flex: none;

    height: 16px;
    width: 16px;
}

.filter-badge {
    background: var(--accent-soft);
    border-radius: 999px;
    color: var(--accent);
    font-size: 11px;
    max-width: 260px;
    overflow: hidden;
    padding: 2px 8px;
    text-overflow: ellipsis;
    white-space: nowrap;

    /* Метка — единственное, что здесь можно сжать. Без min-width: 0 многоточие
       не срабатывает вовсе: флексовый элемент держит ширину своего содержимого. */
    min-width: 0;
}

.filter-backdrop {
    inset: 0;
    position: fixed;
    z-index: 19;
}

.filter-body {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);

    /* Обязательно: панель прижата правым краем к кнопке, а ширина считается от ширины
       экрана. Без border-box поля (14+14) и рамка (1+1) прибавляются к width сверх неё,
       и на узком экране левый край уходит за границу. Замер при 375 px: ширина выходила
       373 вместо 343, левый край оказывался на −14. */
    box-sizing: border-box;

    box-shadow: var(--shadow);
    max-height: 70vh;
    overflow-y: auto;
    padding: 14px;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    width: min(420px, calc(100vw - 32px));
    z-index: 20;
}

.filter-group {
    margin-bottom: 14px;
}

.filter-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.filter-empty {
    color: var(--text-muted);
    font-size: 12px;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chip {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    padding: 4px 10px;
}

.chip.selected {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.chip-count {
    color: var(--text-muted);
    font-size: 11px;
    margin-left: 4px;
}

.filter-select,
.filter-date {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);

    /* Поля и рамка обязаны входить в ширину. Пока поле было прямым потомком флекс-строки,
       это сходило с рук — флекс сам его ужимал. Внутри обёртки календаря width: 100 %
       стало шириной содержимого, и поле вылезало за обёртку на 44 пикселя, утаскивая
       кнопку календаря внутрь текста. */
    box-sizing: border-box;

    color: var(--text);
    font: inherit;
    padding: 6px 8px;
    width: 100%;
}

.filter-dates {
    align-items: center;
    display: flex;
    gap: 8px;
}

.filter-dash {
    color: var(--text-muted);
}

/* --- Календарь в полях дат (Vanilla Calendar Pro) ---
   Поле остаётся обычным <input type="date">: класс calendar-enhanced и кнопку
   добавляет pravochat.js после загрузки библиотеки. Не загрузилась — поле работает
   родным выбором браузера, и ничего из этого блока не применяется. */

/* Обёртку вставляет скрипт вместо самого поля, поэтому долю строки наследует она. */
.calendar-wrap {
    flex: 1;
    min-width: 0;
    position: relative;
}

/* Своя кнопка заменяет родную — иначе рядом оказались бы две. */
input.calendar-enhanced {
    padding-right: 34px;
}

input.calendar-enhanced::-webkit-calendar-picker-indicator {
    display: none;
}

.calendar-button {
    align-items: center;
    background: none;
    border: 0;
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    height: 24px;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
}

.calendar-button:hover {
    background: var(--surface-2);
    color: var(--accent);
}

.calendar-button svg {
    height: 16px;
    width: 16px;
}

/* fixed, а не absolute: панель фильтров прокручиваемая (max-height: 70vh, overflow-y: auto),
   и absolute обрезался бы её границами — календарь виден только наполовину.
   Координаты ставит скрипт при открытии. */
.calendar-popup {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: none;
    padding: 6px;
    position: fixed;
    z-index: 60;
}

.calendar-popup.open {
    display: block;
}

/* Фон и текст самого календаря — как у панели фильтров. Библиотека зашивает свою палитру
   в таблицу стилей: корень .vc залит #ffffff в светлой теме и #0f172a в тёмной, а у нас
   поверхность тёмной темы #1f2126 — календарь выделялся на панели чужим пятном.

   Всюду !important по той же причине, что и ниже: её стили подключаются во время работы,
   то есть ПОСЛЕ этого файла, и при равной силе селектора выигрывали бы они. Сама библиотека
   !important не использует нигде, так что перебить её нечем больше. */
.calendar-popup .vc,
.calendar-popup .vc-months__month,
.calendar-popup .vc-years__year {
    background-color: var(--surface) !important;
    color: var(--text) !important;
}

.calendar-popup .vc-months__month:hover,
.calendar-popup .vc-years__year:hover {
    background-color: var(--surface-2) !important;
}

/* Ячейки чисел залиты отдельно от корня календаря и тем же чужим цветом
   (#ffffff в светлой теме, #0f172a в тёмной) — приводим и их к поверхности панели.
   Цвет текста не трогаем: библиотека им отличает выходные, праздники и дни соседних
   месяцев, и единый цвет стёр бы это различие. */
.calendar-popup .vc-date__btn {
    background-color: var(--surface) !important;
}

.calendar-popup .vc-date__btn:hover {
    background-color: var(--surface-2) !important;
}

/* Сегодняшнее число библиотека выделяет и заливкой, и своим бирюзовым цветом.
   Заливку убираем — фон должен быть ровным, — а метку оставляем цветом приложения.
   :not(выбрано) обязательно: без него правило для наведения оказалось бы сильнее
   правила выбранного дня ниже и перекрашивало бы выбранное сегодняшнее число. */
.calendar-popup .vc-date[data-vc-date-today]:not([data-vc-date-selected]) .vc-date__btn {
    background-color: var(--surface) !important;
    color: var(--accent) !important;
}

.calendar-popup .vc-date[data-vc-date-today]:not([data-vc-date-selected]) .vc-date__btn:hover {
    background-color: var(--surface-2) !important;
}

/* Выбранный день, месяц и год — цветом приложения. Библиотека расписывает свою палитру
   отдельно для каждой темы и каждого сочетания «выходной, праздник, диапазон», и каждый
   её селектор специфичнее простого переопределения. Вместо того чтобы повторять всю эту
   матрицу, одно правило с !important перекрывает её целиком. */
.calendar-popup .vc-date[data-vc-date-selected] .vc-date__btn,
.calendar-popup .vc-months__month[data-vc-months-month-selected],
.calendar-popup .vc-years__year[data-vc-years-year-selected] {
    background-color: var(--accent) !important;
    color: var(--accent-contrast) !important;
}

/* --- Ввод --- */

.input-box {
    align-items: flex-end;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    gap: 8px;
    margin: 0 auto;
    max-width: 820px;
    padding: 8px 10px;
}

.input-box:focus-within {
    border-color: var(--accent);
}

.input-box textarea {
    background: none;
    border: 0;
    color: inherit;
    flex: 1;
    font: inherit;
    outline: none;
    resize: none;
    /* Страховка на случай, если скрипт не успел отработать: поле не должно занимать пол-экрана. */
    max-height: 10lh;
}

.input-tools {
    display: flex;
}

.send-button,
.stop-button {
    background: var(--accent);
    border: 0;
    border-radius: 50%;
    color: var(--accent-contrast);
    cursor: pointer;
    display: grid;
    height: 32px;
    place-items: center;
    width: 32px;
}

.send-button:disabled {
    background: var(--border);
    cursor: default;
}

.tool-icon {
    height: 17px;
    width: 17px;
}

.suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 10px;
}

/* --- Кнопки --- */

.btn-primary {
    align-items: center;
    background: var(--accent);
    border: 0;
    border-radius: var(--radius);
    color: var(--accent-contrast);
    cursor: pointer;
    display: flex;
    font: inherit;
    gap: 6px;
    justify-content: center;
    padding: 8px 12px;
    width: 100%;
}

.btn-subtle {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    padding: 5px 12px;
}

.btn-subtle:hover {
    border-color: var(--accent);
}

.btn-subtle.danger,
.icon-button.danger {
    color: var(--danger);
}

.icon-button {
    background: none;
    border: 0;
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    font: inherit;
    line-height: 1;
    padding: 6px 8px;
}

.icon-button:hover {
    background: var(--surface-2);
    color: var(--text);
}

/* --- Просмотр документа --- */

.viewer-backdrop {
    background: rgb(0 0 0 / 40%);
    inset: 0;
    position: fixed;
    z-index: 30;
}

.viewer {
    background: var(--surface);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    inset: 0 0 0 auto;
    position: fixed;
    width: min(760px, 100vw);
    z-index: 31;
}

/* Закреплённая панель встаёт в общий поток справа от чата и сужает его, а не накрывает.
   Ширина зависит от окна: на 1920 px — те же 760, на пороге 1200 px — 480, иначе
   при закреплённой заодно истории чату не осталось бы места. */
.app-shell.viewer-pinned .viewer {
    flex-shrink: 0;
    /* relative, а не static: от панели отсчитывается кнопка «В начало документа». */
    position: relative;
    width: clamp(360px, 40vw, 760px);
    z-index: auto;
}

/* Страховка к порогу, который проверяет ChatPanel: если сообщение о ширине до компонента
   не дошло, закреплённая панель на узком окне всё равно всплывает поверх чата. */
@media (max-width: 1200px) {
    .app-shell.viewer-pinned .viewer {
        position: fixed;
        width: min(760px, 100vw);
        z-index: 31;
    }
}

.viewer-header {
    align-items: flex-start;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 12px;
    padding: 12px 16px;
}

.viewer-title {
    flex: 1;
    min-width: 0;
}

.viewer-requisites {
    font-weight: 600;
}

.viewer-name {
    color: var(--text-muted);
    font-size: 13px;
}

.viewer-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px 60px;
}

/* Кнопка «В начало документа» — внизу панели поверх текста. Появляется, когда текст
   прокручен дальше первого экрана (класс visible ставит trackScrollTop в pravochat.js):
   у начала документа она не нужна и только закрывала бы текст. */
.viewer-top {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    color: var(--text);
    cursor: pointer;
    display: flex;
    font: inherit;
    font-size: 13px;
    gap: 6px;
    opacity: 0;
    padding: 8px 14px 8px 10px;
    pointer-events: none;
    position: absolute;
    right: 24px;
    transform: translateY(8px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.viewer-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.viewer-top:hover {
    background: var(--surface-2);
}

.viewer-top svg {
    height: 16px;
    width: 16px;
}

/* Ссылка на первоисточник перед текстом документа. */
.viewer-source {
       border-bottom: 1px solid var(--border);
    font-size: 13px;
    margin-bottom: 12px;
/*    margin: 12px 0;*/
    padding: 0 6px 10px;
}

.viewer-source a {
    color: var(--accent);
}

.viewer-paragraph {
    border-radius: 4px;
    margin-bottom: 8px;
    padding: 2px 6px;

    /* Вид документа, а не веб-страницы: выключка по ширине и красная строка.
       Переносы обязательны — без них выключка на русском рвёт строки огромными
       пробелами, слишком уж длинные слова. Язык страницы задан (lang="ru"),
       поэтому браузер переносит по словарю. */
    hyphens: auto;
    text-align: justify;
    text-indent: 1.5em;
}

/* Красная строка и выключка наследуются вглубь, а таблицам, спискам, заголовкам
   и преформатированному тексту они противопоказаны: в узких ячейках прайс-листов
   отступ съедает половину колонки, а моноширинные таблицы выключка ломает. */
.viewer-paragraph :is(table, thead, tbody, tr, th, td, pre, code,
                      h1, h2, h3, h4, h5, h6, ul, ol, li) {
    hyphens: manual;
    text-align: left;
    text-indent: 0;
}

/* Абзац, исключённый из акта: текст остаётся для чтения, но приглушён и помечен. */
.viewer-paragraph.excluded {
    color: var(--text-muted);
    box-shadow: inset 3px 0 0 var(--border);
}

.viewer-paragraph.excluded document-html {
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

.viewer-excluded-label {
    display: inline-block;
    margin: 2px 0 0 4px;
    padding: 0 6px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.8em;
    text-indent: 0;
    color: var(--text-muted);
}

.viewer-paragraph.cited,
.paragraph-highlight {
    background: var(--accent-soft);
    box-shadow: inset 3px 0 0 var(--accent);
}

/* --- Узкие экраны и мобильное приложение --- */

/* По умолчанию панель истории всплывает поверх чата: она открывается по требованию
   и не должна постоянно отнимать ширину у ответа. */
.sidebar {
    inset: 0 auto 0 0;
    position: fixed;
    z-index: 25;
    box-shadow: var(--shadow);
}

/* Закреплённая панель встаёт в общий поток и раздвигает чат, а не накрывает его. */
.app-shell.sidebar-pinned .sidebar {
    box-shadow: none;
    position: static;
}

.sidebar-backdrop {
    inset: 0;
    position: fixed;
    z-index: 24;
}

.pin-button.active {
    background: var(--accent-soft);
    color: var(--accent);
}

@media (max-width: 900px) {
    .sidebar {
        width: min(var(--sidebar-width), 82vw);
    }

    /* Страховка к тому же порогу, что проверяет ChatPanel. Если сообщение о ширине
       до компонента не дошло — скрипт не загрузился, окно изменили до подписки, —
       закреплённая панель всё равно обязана всплывать поверх чата. Иначе она встаёт
       в общий поток и на экране 375 px оставляет чату 67 пикселей. */
    .app-shell.sidebar-pinned .sidebar {
        box-shadow: var(--shadow);
        position: fixed;
    }

    .sidebar-backdrop {
        background: rgb(0 0 0 / 35%);
    }

    .user-message {
        max-width: 92%;
    }

    .chat-title {
        font-size: 15px;
    }
}