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

/* --- Верхняя панель: название открытого чата (на компьютере) --- */
.chat-heading {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.chat-heading[hidden] { display: none; }

.chat-kind-icon {
    flex-shrink: 0;
    width: var(--icon-size);
    height: var(--icon-size);
    background: var(--text-secondary);
    -webkit-mask: url('/static/images/icons/rail-profile.svg') center / contain no-repeat;
    mask: url('/static/images/icons/rail-profile.svg') center / contain no-repeat;
}

.chat-kind-icon.is-shared {
    -webkit-mask-image: url('/static/images/icons/shared-chats.svg');
    mask-image: url('/static/images/icons/shared-chats.svg');
}

.chat-current-title {
    margin: 0;
    overflow: hidden;
    font-size: var(--font-base);
    font-weight: 500;
    line-height: 1.06;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
}

@media (min-width: 769px) {
    .main-content.chat-active .app-header {
        justify-content: flex-start;
        gap: var(--space-3);
        min-height: 64px;
        padding: var(--space-3) 24px;
        border-bottom: var(--hairline) solid var(--border);
    }
}

/* На телефоне название чата — в компактной шапке рядом с бургером (shell.css). */
@media (max-width: 768px) {
    .main-content:not(.chat-active) .chat-heading { display: none; }
}

/* --- Лента сообщений: колонка 760px по центру --- */
#chat-section .chat-messages {
    gap: 24px;
    padding: 24px max(24px, calc((100% - 760px) / 2));
}

#chat-section .message { padding: 0; }

/* Вопрос человека — светлая плашка, без «хвостика» и тени. */
#chat-section .message.user > :is(p, .msg) {
    max-width: 72%;
    padding: 12px 16px;
    border-radius: var(--ui-radius);
    background: var(--user-message-bg);
    color: var(--user-message-text);
    box-shadow: none;
    font-size: var(--font-base);
    line-height: 1.55;
}

/* Ответ ассистента — просто текст на всю ширину колонки. */
#chat-section .message.assistant > :is(p, .msg) {
    max-width: 100%;
    padding: 0;
    font-size: var(--font-base);
    line-height: 1.55;
}

/* Таблицы в ответе — на всю колонку, без рамки: строки с тонкой линией. */
#chat-section .message.assistant-table { margin: 0; }

#chat-section .table-scroll {
    width: 100%;
    border: 0;
    border-radius: 0;
}

#chat-section .data-table { font-size: var(--font-label); }

#chat-section .data-table thead { background: transparent; }

#chat-section .data-table th {
    padding: var(--space-2);
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--font-label);
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    border-bottom: var(--hairline) solid var(--border);
}

#chat-section .data-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }

#chat-section .data-table td {
    padding: var(--space-2);
    border-bottom: var(--hairline) solid var(--border);
}

#chat-section .data-table tbody tr:nth-child(even) { background: transparent; }

/* Кнопки под ответом («Закрепить», «Создать Excel» и т. п.). */
#chat-section .message-pin-actions .co-btn,
#chat-section .message.assistant-action button {
    min-height: var(--control-compact);
    padding: var(--space-2) var(--space-3);
    border: var(--hairline) solid transparent;
    border-radius: var(--ui-radius);
    background: var(--bg-sidebar);
    color: var(--text);
    font-size: var(--font-label);
}

/* «Сообщить об ошибке» под ответом — тихая текстовая кнопка, не спорит с ответом.
   ⚠️ Сообщение — flex-строка: без переноса кнопка встаёт справа от текста. */
#chat-section .message.assistant:has(> .msg-report) { flex-wrap: wrap; }

#chat-section .msg-report {
    flex-basis: 100%;
    margin-top: var(--space-1);
    text-align: left;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-muted);
    font: inherit;
    font-size: var(--text-small);
    line-height: var(--text-small-lh);
    cursor: pointer;
}

#chat-section .msg-report:hover:not(:disabled),
#chat-section .msg-report:focus-visible { color: var(--text); text-decoration: underline; }

#chat-section .msg-report:disabled { cursor: default; }

/* Кнопка — только при наведении на ответ (решение владельца 25.10.2026), чтобы
   не мелькала под каждым сообщением. ⚠️ Прячем прозрачностью, а не display:
   место под строкой остаётся, и текст не прыгает при наведении. С клавиатуры
   видна по фокусу; на телефоне наведения нет — там она видна всегда.
   Уже отправленная («Передали на проверку») не прячется — это ответ человеку. */
@media (hover: hover) {
    #chat-section .message.assistant .msg-report:not(:disabled) {
        opacity: 0;
        transition: opacity var(--motion) ease;
    }
    #chat-section .message.assistant:hover .msg-report,
    #chat-section .message.assistant .msg-report:focus-visible { opacity: 1; }
}

/* --- Пустой чат: «Попробуйте спросить» --- */
#chat-section .examples-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    width: min(100%, 760px);
    margin: 0 auto;
    padding: 48px 24px 0;
    box-sizing: border-box;
}

.chat-empty { width: 100%; }

.chat-empty-title {
    margin: 0 0 var(--space-4);
    text-align: center;   /* по макету — заголовок по центру над подсказками */
    color: var(--primary);
    font-size: 32px;
    font-weight: 500;
    letter-spacing: -0.02em;
}

.chat-starters { display: grid; gap: var(--space-2); }

#chat-section .chat-starters .example-item {
    min-height: var(--control-height);
    padding: var(--space-4);
    border: var(--hairline) solid var(--border);
    border-radius: var(--ui-radius);
    background: var(--bg-sidebar);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--font-base);
    line-height: 1.55;
    text-align: center;   /* по макету — текст подсказки по центру */
    justify-content: center;   /* кнопка — flex: одной строке нужен и он */
    cursor: pointer;
    transition: border-color var(--motion), background var(--motion);
}

#chat-section .chat-starters .example-item:hover {
    border-color: var(--primary);
    background: var(--bg-hover);
}

/* «Все возможности» — тихая ссылка, а не рамка-кнопка. */
#chat-section .btn-all-features {
    text-decoration: underline;   /* по макету — подчёркнутой ссылкой */
    text-underline-offset: 3px;
    width: auto;
    max-width: none;
    min-height: 32px;
    padding: 1px 6px;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--font-label);
}

#chat-section .btn-all-features:hover { color: var(--primary); background: transparent; }

/* --- Поле ввода --- */
#chat-section .input-wrapper {
    width: min(100% - 48px, 760px);
    max-width: 760px;
    margin: var(--space-3) auto;
    box-sizing: border-box;
    gap: 4px;
    padding: 4px;
    border: 0;
    border-radius: var(--ui-radius);
    background: var(--bg-card);
    box-shadow: none;
}

#chat-section .input-wrapper:focus-within { box-shadow: 0 0 0 2px var(--border-active); }

#chat-section .message-input {
    min-height: var(--control-compact);
    padding: var(--space-2);
    background: transparent;
    font-size: var(--font-label);
    color: var(--text);
}

/* Кнопки поля — круги 40px: прикрепить и голос — тихие, отправить — синий. */
#chat-section .hint-icon,
#chat-section .btn-voice,
#chat-section .btn-send {
    width: var(--control-compact);
    height: var(--control-compact);
    min-width: var(--control-compact);
    border: 0;
    border-radius: 50%;
    box-shadow: none;
}

#chat-section .hint-icon,
#chat-section .btn-voice { background: transparent; color: var(--text-secondary); }

#chat-section .btn-send { background: var(--primary); }

body.dark-theme #chat-section .hint-icon,
body.dark-theme #chat-section .btn-voice { background: transparent; }

body.dark-theme #chat-section .btn-send { background: var(--primary); }

/* ⚠️ theme.css красит строки таблиц тёмной темы через строку с
   body.dark-theme — повторяем вес, чтобы таблица чата осталась без полос. */
body.dark-theme #chat-section .data-table thead,
body.dark-theme #chat-section .data-table tbody tr,
body.dark-theme #chat-section .data-table tbody tr:nth-child(even),
body.dark-theme #chat-section .data-table td,
body.dark-theme #chat-section .data-table th {
    background: transparent;
}

body.dark-theme #chat-section .table-scroll { border: 0; background: transparent; }

body.dark-theme #chat-section .data-table th { color: var(--text-secondary); }

/* --- Чат сигнала (core/signal_chats.py): значок и «Контекст» в шапке --- */
.chat-kind-icon.is-signal {
    -webkit-mask-image: url('/static/images/icons/signal.svg');
    mask-image: url('/static/images/icons/signal.svg');
    background: var(--primary);
}
.chat-kind-icon.is-signal.is-negative { background: var(--error); }
.chat-kind-icon.is-signal.is-positive { background: var(--success); }

.chat-context-btn {
    flex-shrink: 0;
    margin-left: var(--space-2);
    min-height: var(--row-compact);
    padding: 4px var(--space-3);
    border: 0;
    border-radius: var(--ui-radius);
    background: var(--bg-card);
    color: var(--text);
    font: inherit;
    font-size: var(--font-caption);
    cursor: pointer;
}

.chat-context-btn:hover { color: var(--primary); }
.chat-context-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.chat-context-btn[hidden] { display: none; }

/* Окно «Контекст»: до 430 px, два поля, «Отмена» / «Сохранить» справа (ТЗ 10.7). */
.app-dialog.signal-context { width: min(430px, calc(100vw - 32px)); max-height: calc(100svh - 32px); overflow-y: auto; }
.signal-context-field { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-3); font-size: var(--font-label); font-weight: 600; }
.signal-context-field textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 96px;
    max-height: 40svh;
    padding: var(--space-2) var(--space-3);
    /* Окно приложения само цвета --bg-card — поле на нём светлее, с рамкой. */
    border: var(--hairline) solid var(--border-dark);
    border-radius: var(--ui-radius);
    background: var(--bg-main);
    color: var(--text);
    font: inherit;
    font-size: var(--font-label);
    font-weight: 400;
    line-height: 1.45;
    resize: vertical;
}
.signal-context-field textarea::placeholder { color: var(--text-secondary); }
.signal-context-field textarea:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.signal-context-error { margin-top: var(--space-2); font-size: var(--font-caption); color: var(--error); }
.signal-context-status { margin-top: var(--space-2); font-size: var(--font-caption); color: var(--text-secondary); }
.signal-context-status:empty { display: none; }
.signal-context-status.is-warn { color: var(--warning-text); }
.signal-context-error:empty { display: none; }

/* На телефоне шапки чата нет — «Контекст» там в меню «⋯» чата в списке. */

/* ⚠️ Личный чат узнаётся по отсутствию общего доступа и сигнала.
   Не резервируем место под декоративный значок: название занимает его место. */
.chat-kind-icon:not(.is-shared):not(.is-signal),
.chat-list-kind:not(.is-shared):not(.is-signal) {
    display: none;
}


/* Иконки из согласованного макета: один контур и цвет currentColor в обеих темах. */
.chat-kind-icon, .chat-list-kind { --chat-kind: url('/static/images/icons/chat-personal.svg'); background: currentColor; color: var(--text-secondary); mask: var(--chat-kind) center / contain no-repeat; -webkit-mask: var(--chat-kind) center / contain no-repeat; }
.chat-kind-icon.is-shared, .chat-list-kind.is-shared { --chat-kind: url('/static/images/icons/chat-shared.svg'); }
.chat-kind-icon.is-signal, .chat-list-kind.is-signal { --chat-kind: url('/static/images/icons/chat-signal.svg'); }
.chat-list-kind { display: inline-block; width: var(--icon-size); height: var(--icon-size); flex-shrink: 0; }
.sidebar-rail .nav-chat-item { display: flex; align-items: center; gap: var(--space-2); }
.chat-list-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-pop-dialog { max-width: var(--chat-dialog-width); gap: var(--space-4); background: var(--bg-main); }
.chat-pop-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.chat-pop-close { flex-shrink: 0; width: var(--control-compact); height: var(--control-compact); border: 0; border-radius: var(--ui-radius); background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--space-5); cursor: pointer; }
.chat-pop-close:hover { background: var(--bg-hover); }
.chat-capabilities { display: grid; gap: var(--space-2); }
.chat-capabilities details { padding: var(--space-3); border-radius: var(--ui-radius); background: var(--bg-card); }
.chat-capabilities summary { cursor: pointer; font-weight: 500; font-size: var(--font-base); }
.chat-capabilities p { margin: var(--space-2) 0; color: var(--text-secondary); font-size: var(--font-label); }
.chat-camera-video { width: 100%; aspect-ratio: var(--chat-camera-ratio); border-radius: var(--ui-radius); background: var(--bg-card); object-fit: contain; }
.chat-camera-status { color: var(--text-secondary); font-size: var(--font-label); }
@media (max-width: 768px) {
    .pf-scrim:has(.chat-pop-dialog) { align-items: flex-end; padding: var(--space-4) 0 0; }
    .chat-pop-dialog { max-width: 100%; padding: var(--space-4); border-radius: var(--ui-radius) var(--ui-radius) 0 0; }
}
.chat-kind-icon.is-shared, .chat-kind-icon.is-signal { mask-image: var(--chat-kind); -webkit-mask-image: var(--chat-kind); }
.chat-pop-dialog [hidden] { display: none !important; }

#chat-section .btn-all-features { position: static; transform: none; margin: var(--space-2) auto 0; flex-shrink: 0; }
#chat-section .chat-container:has(.examples-section.hidden) ~ .btn-all-features { display: none; }

#chat-section .attached-files-container { width: min(calc(100% - var(--space-4) * 2), var(--chat-content-width)); margin-inline: auto; box-sizing: border-box; }
#chat-section .attached-file-item { max-width: 100%; box-sizing: border-box; background: var(--bg-card); border-color: transparent; border-radius: var(--ui-radius); }
#chat-section .file-icon svg { display: block; width: var(--icon-size); height: var(--icon-size); color: var(--text-secondary); }
#chat-section .file-info { min-width: 0; }
#chat-section .file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Пустая история не занимает место над подсказками. Текст переписки не скрываем. */
#chat-section .chat-container:has(> .examples-section:not(.hidden)) { justify-content: center; overflow-y: auto; }
#chat-section .chat-container:has(> .examples-section:not(.hidden)) > .chat-messages:not(:has(.message:not(.system))) { display: none; }
#chat-section .examples-section { margin-block: auto; padding-block: var(--space-4); flex-shrink: 0; }

/* Вертикальное троеточие освобождает ширину названия в узкой панели. */
.sidebar-rail .nav-chat-menu-btn { box-sizing: border-box; padding: 0; width: var(--chat-menu-button-width); min-width: var(--chat-menu-button-width); }
.nav-chat-menu-btn svg { display: block; width: var(--space-4); height: var(--space-5); fill: currentColor; }