/* Общие стили компонента чата (chat.jsx) и базовый UI-слой.

   Подключается ОБОИМИ фронтами (ksg-frontend и ai-chat-frontend) — единый
   источник, чтобы рендер чата (markdown-ответ, блок «Источники», кнопки)
   выглядел одинаково везде. Тема (тёмная/светлая) — в theme.css. */

/* --- Скроллбары --- */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #27272a; border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: #3f3f46; }
*::-webkit-scrollbar-corner { background: transparent; }

/* --- Базовые утилиты --- */
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
.tag-chev { transition: transform 150ms ease-out; }
details[open] .tag-chev { transform: rotate(90deg); }
/* Фокус-обвод: заметный для кнопок (только клавиатура), убран у текстовых
   полей (их focus-обводку рисует обёртка). */
button:focus-visible, [role=button]:focus-visible { outline: none; box-shadow: 0 0 0 2px #6366f1; }
input, textarea, select { outline: none; }
input:focus, textarea:focus, select:focus,
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; box-shadow: none; }
.btn-press:active { transform: scale(0.98); }
/* Двухстрочное усечение (line-clamp может отсутствовать в локальной сборке
   Tailwind). */
.clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal; overflow-wrap: anywhere; }
/* Boot-splash наследует фон body (тёмный/светлый по теме). Спиннер — светлый
   обод на светлом фоне. */
html:not(.dark) .boot-spin { border-color: #e4e4e7; border-top-color: #6366f1; }

/* --- Markdown-ответ ассистента. Цвет — через theme.css (text-zinc-*). --- */
.md-body { font-size: 14px; line-height: 1.65; }
.md-body h1 { font-size: 18px; font-weight: 700; margin: 14px 0 8px; }
.md-body h2 { font-size: 16.5px; font-weight: 700; margin: 12px 0 6px; }
.md-body h3 { font-size: 15px; font-weight: 600; margin: 10px 0 4px; }
.md-body h4 { font-size: 14px; font-weight: 600; margin: 8px 0 4px; }
.md-body p { margin: 6px 0; }
.md-body ul, .md-body ol { margin: 6px 0; padding-left: 20px; }
.md-body li { margin: 2px 0; }
.md-body code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px;
  background: rgba(127,127,127,0.15); padding: 1px 4px; border-radius: 4px; }
.md-body pre { background: rgba(127,127,127,0.12); padding: 10px; border-radius: 8px;
  overflow-x: auto; margin: 8px 0; }
.md-body pre code { background: none; padding: 0; }
.md-body table { border-collapse: collapse; margin: 8px 0; font-size: 13px; width: 100%; }
.md-body th, .md-body td { border: 1px solid rgba(127,127,127,0.3); padding: 4px 8px; text-align: left; }
.md-body th { font-weight: 600; background: rgba(127,127,127,0.1); }
.md-body a { color: #6366f1; text-decoration: underline; }
.md-body blockquote { border-left: 3px solid rgba(127,127,127,0.4); padding-left: 10px; margin: 8px 0; opacity: 0.85; }
.md-body > :first-child { margin-top: 0; }
.md-body img { display: block; max-width: 100%; height: auto; max-height: 300px; border-radius: 6px; margin: 18px auto; cursor: zoom-in; }

/* Lightbox: всплывающая картинка по клику — затемнение + увеличение в пределах
   экрана (object-fit:contain, 95vw/95vh). Клик по фону закрывает. */
.chat-lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0,0,0,0.85); cursor: zoom-out; opacity: 1; transition: opacity 180ms ease; animation: chat-lb-fade 180ms ease-out; }
.chat-lightbox.closing { opacity: 0; }
.chat-lightbox img { max-width: 95vw; max-height: 95vh; object-fit: contain; border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,0.6); transition: transform 180ms ease; }
.chat-lightbox.closing img { transform: scale(0.96); }
@keyframes chat-lb-fade { from { opacity: 0; } to { opacity: 1; } }

/* Ответ ассистента: подтянуть текст к верхнему краю иконки (компенсация
   half-leading первой строки, иначе текст визуально проседает вниз). */
.chat-answer { margin-top: -3px; }

/* Кнопка удаления (корзина чата, снятие файла) — красная при наведении в
   обеих темах. Явный класс надёжнее tailwind hover:text-rose-* (его
   light-инверсию перебивает рантайм-tailwind). */
.chat-del { color: #71717a; transition: color 150ms; }
.chat-del:hover { color: #e11d48; }

/* Блок «Источники»: api отдаёт per-документ <details>. Summary явно
   кликабельный (фон, маркер-стрелка, hover) + иконка типа файла и «Скачать». */
.chat-sources details { border: 1px solid rgba(127,127,127,0.22); border-radius: 8px; margin: 6px 0; overflow: hidden; }
.chat-sources summary { padding: 9px 12px; background: rgba(127,127,127,0.08); cursor: pointer; font-weight: 500; font-size: 14px; display: flex; align-items: center; gap: 6px; transition: background 150ms; }
.chat-sources summary:hover { background: rgba(127,127,127,0.16); }
.chat-sources .src-chev { flex-shrink: 0; opacity: 0.55; transition: transform 150ms; }
.chat-sources details[open] .src-chev { transform: rotate(90deg); }
.chat-sources details > *:not(summary) { padding: 4px 12px 10px; }
/* Иконка типа файла рядом с названием источника — мелкая inline (класс
   src-icon из references.py). */
.chat-sources img.src-icon { display: inline; height: 16px; width: 16px; vertical-align: -3px; margin: 0 1px; }
/* Картинки контента (VLM-схемы, вырезки формул) — по центру, до 300px высотой,
   по клику открываются во весь экран (lightbox). */
.chat-sources img:not(.src-icon) { display: block; max-width: 100%; height: auto; max-height: 300px; border-radius: 6px; margin: 18px auto; cursor: zoom-in; }
.chat-sources a { color: #6366f1; text-decoration: none; font-weight: 500; }
.chat-sources a:hover { text-decoration: underline; }
/* Кнопка скачивания источника — как в списке документов КСГ: w-7 h-7,
   text-zinc-400, hover text-zinc-100 + bg-zinc-800/60, rounded. */
.chat-sources .src-dl { margin-left: auto; flex-shrink: 0; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: #a1a1aa; text-decoration: none; transition: color 150ms, background-color 150ms; }
.chat-sources .src-dl:hover { color: #f4f4f5; background: rgba(39,39,42,0.6); }
.chat-sources .src-dl svg { width: 13px; height: 13px; }
html:not(.dark) .chat-sources .src-dl { color: #52525b; }
html:not(.dark) .chat-sources .src-dl:hover { color: #18181b; background: rgba(228,228,231,0.6); }
/* Разделитель фрагментов внутри источника — приглушённо. */
.chat-sources .frag-sep { text-align: center; font-size: 11px; font-weight: 500; opacity: 0.5; margin: 14px 0 6px; letter-spacing: 0.03em; }