/* ============================================================
   ТДН-База — прикладной клей поверх дизайн-системы vai8.
   Палитра, компоненты и типографика приходят из vai8.css;
   здесь только раскладка экранов и кастомные элементы.
   ============================================================ */

:root {
  /* alias моноширинного стека vai8 (.mono) для употребления в свойствах */
  --font-mono: 'SF Mono', ui-monospace, 'JetBrains Mono', Consolas, Menlo, monospace;
}

.hidden { display: none !important; }
.muted { color: var(--ink-3); }
.empty { color: var(--ink-3); padding: 16px 4px; font-size: 13.5px; }
.error-text { color: var(--danger); font-size: 12px; font-weight: 500; margin-top: 8px; min-height: 1em; }

/* видимый фокус для элементов без собственного кольца vai8 */
.nav a:focus-visible,
.tab:focus-visible,
.cbtn:focus-visible,
.send:focus-visible,
.col-card:focus-visible,
.back-link:focus-visible,
.source-item summary:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* ============ Экран входа ============ */

.login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bg); }

.login-card { width: 360px; max-width: 100%; padding: 32px 28px; box-shadow: var(--shadow); }
.login-card .field { max-width: none; }

.login-logo { text-align: center; }
.login-logo .lg { font-size: 34px; }

.login-sub { text-align: center; color: var(--ink-2); font-size: 12.5px; margin: 6px 0 24px; }

#login-error { min-height: 18px; }

.btn-block { width: 100%; justify-content: center; }

/* ============ Каркас: навигация ============ */

.nav .lg { font-size: inherit; }

.nav-foot .btn { width: 100%; justify-content: center; margin-bottom: 10px; }
.nav-foot-meta { line-height: 1.6; }

@media (max-width: 900px) {
  /* vai8 прячет .nav на узких экранах — возвращаем его горизонтальной полосой */
  .nav { display: flex; position: static; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 2px; border-right: 0; border-bottom: 1px solid var(--line-soft); padding: 10px 12px; }
  .nav-brand { padding: 4px 8px; }
  .nav a { white-space: nowrap; padding: 7px 10px; }
  .nav a .nn { display: none; }
  .nav-foot { margin: 0 0 0 auto; border-top: 0; padding: 0; }
  .nav-foot .btn { width: auto; margin-bottom: 0; }
  .nav-foot-meta { display: none; }
}

/* ============ Секции ============ */

.view-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.view-head h2 { margin-bottom: 0; }
.view-head .btn { margin-bottom: 4px; }

.back-link { color: var(--ink-3); text-decoration: none; font-size: 12.5px; font-weight: 600; }
.back-link:hover { color: var(--amber); }

/* ============ Дашборд ============ */

.stat-grid { margin-bottom: 24px; }

.stat-value { font-family: var(--font-mono); font-size: 28px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-value-sm { font-size: 20px; line-height: 1.4; }
.stat-sub { margin-top: 8px; display: flex; align-items: center; gap: 8px; font-size: 11px; flex-wrap: wrap; }

/* Сервер + Компоненты: двухколоночная сетка */
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } }

/* полосы нагрузки — на базе score-бара */
.meter { margin-bottom: 16px; }
.meter-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.meter-val { color: var(--ink-2); font-weight: 500; font-size: 12px; }
.meter-bar { height: 6px; margin: 0; }
.meter-fill { transition: width .6s ease; }
.meter-fill.m-warning { background: var(--warning); }
.meter-fill.m-danger { background: var(--danger); }
.meter-sub { font-size: 11px; margin-top: 5px; }
.server-extra { font-size: 11.5px; margin-top: 4px; }

/* компоненты */
.comp-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.comp-item:last-child { border-bottom: 0; padding-bottom: 0; }
.comp-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.comp-name { font-size: 13.5px; font-weight: 600; }
.comp-item .badge { flex-shrink: 0; }
.status-label { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); word-break: break-all; }

/* журнал */
.log-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.log-filters { display: flex; gap: 4px; }
.log-filter.active { color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, transparent); }
.log-box { background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 12px; max-height: 320px; overflow-y: auto; font-family: var(--font-mono); font-size: 12px; }
.log-row { display: flex; gap: 8px; align-items: baseline; padding: 2px 0; }
.log-time { color: var(--ink-3); flex-shrink: 0; }
.log-level { font-size: 10px; padding: 1px 7px; flex-shrink: 0; font-family: var(--font-mono); }
.log-mod { color: var(--ink-3); flex-shrink: 0; }
.log-msg { color: var(--ink); word-break: break-word; white-space: pre-wrap; min-width: 0; }

/* задания */
.job-error { color: var(--danger); font-size: 12px; max-width: 280px; word-break: break-word; }

.score-good { color: var(--success); }
.score-bad { color: var(--danger); }

/* заголовки таблиц у нас не сортируются */
table.dt th { cursor: default; }

/* широкие таблицы прокручиваются внутри рамки, а не обрезаются */
.dt-wrap { overflow-x: auto; }

/* ============ Коллекции ============ */

.subgrid > .empty,
.subgrid > .state-box { grid-column: 1 / -1; }

.col-card { cursor: pointer; transition: border-color .16s, background .16s; }
.col-card:hover { border-color: var(--amber); }

.col-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.col-card-name { font-weight: 700; font-size: 15px; }
.col-card-desc { color: var(--ink-2); font-size: 13px; margin: 6px 0 12px; min-height: 1.4em; }
.col-card-counts { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); margin-bottom: 4px; }
.col-card-model { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }

/* иконка-крестик удаления на базе .cbtn из vai8 */
.cbtn-danger:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }

/* ============ Документы: раскрытие чанков ============ */

.doc-title-cell .exp { margin-right: 6px; }
.td-actions { text-align: right; white-space: nowrap; }

.chunk-item { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 10px 12px; margin-bottom: 8px; }
.chunk-item:last-child { margin-bottom: 0; }

.chunk-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.chunk-index { color: var(--amber); font-size: 12px; }
.chunk-tokens { margin-left: auto; font-size: 11px; }
.chunk-product { font-size: 12px; }

.chunk-text { font-size: 12.5px; color: var(--ink); white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow-y: auto; }

.pager { display: flex; align-items: center; gap: 12px; margin-top: 16px; }

/* ============ Загрузка ============ */

.field-wide { max-width: none; }
.field-row { display: flex; gap: 16px; flex-wrap: wrap; }
.field-row .field { flex: 1; min-width: 140px; }

.input.mono, .textarea.mono { font-family: var(--font-mono); font-size: 13px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 8px 0 24px; }

.tab { background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 600; padding: 10px 16px; cursor: pointer; transition: color .16s, border-color .16s; }
.tab:hover { color: var(--ink); }
.tab.active { color: var(--amber); border-bottom-color: var(--amber); }

.tab-panel { max-width: 720px; }

.dropzone { border: 1px dashed var(--line); border-radius: 14px; background: var(--surface); padding: 36px 20px; text-align: center; cursor: pointer; margin-bottom: 16px; transition: border-color .16s, background .16s; }
.dropzone:hover, .dropzone.dragover { border-color: var(--amber); background: var(--surface-2); }
.dropzone-hint { font-size: 14px; font-weight: 600; }
.dropzone-sub { color: var(--ink-3); font-size: 12px; margin-top: 4px; }
.dropzone-file { font-family: var(--font-mono); color: var(--amber); font-size: 13px; margin-top: 12px; }

.job-panel { max-width: 720px; margin-top: 24px; }
.job-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.job-head .label { margin-bottom: 0; }
.job-counts { font-size: 12px; margin-top: 10px; color: var(--ink-2); }

.progress { height: 6px; background: var(--surface-3); border-radius: 4px; overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: var(--amber); transition: width .3s ease; }

/* ============ Поиск ============ */

.search-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.search-input { flex: 1 1 280px; width: auto; }
.search-bar .select { width: auto; min-width: 120px; }

.took { color: var(--ink-3); font-size: 12px; min-height: 18px; margin-bottom: 12px; }

.results { display: flex; flex-direction: column; gap: 12px; }

.result-card { display: flex; gap: 20px; transition: border-color .16s; }
.result-card:hover { border-color: var(--amber); }

.result-score-col { width: 130px; flex-shrink: 0; }
.result-score { font-family: var(--font-mono); font-size: 22px; color: var(--amber); font-variant-numeric: tabular-nums; }

.score-bar { height: 5px; background: var(--surface-3); border-radius: 4px; overflow: hidden; margin: 8px 0; }
.score-fill { height: 100%; background: var(--amber); }

.result-subscores { font-size: 11px; }

.result-body { flex: 1; min-width: 0; }
.result-text { font-size: 13.5px; white-space: pre-wrap; word-break: break-word; max-height: 180px; overflow-y: auto; margin-bottom: 10px; }
.result-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; border-top: 1px solid var(--line-soft); padding-top: 10px; }

/* ============ RAG-чат ============ */

.view-chat { max-width: 1200px; display: flex; flex-direction: column; height: 100vh; }
.view-chat.hidden { display: none !important; }

.chat-toolbar { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.chat-toolbar > div:first-child { margin-right: auto; }
.chat-toolbar h2 { margin-bottom: 0; }
.chat-toolbar .select { width: auto; max-width: 240px; }
.chat-toolbar .btn { margin-bottom: 2px; }

.chat-messages { flex: 1; overflow-y: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 18px 18px 6px; }

.msg-body { flex: 1; min-width: 0; }
.msg .bubble, .msg .content { white-space: pre-wrap; word-break: break-word; }
.msg .alert { margin-top: 10px; margin-bottom: 0; }

/* строка ввода: однострочный input внутри .composer vai8 */
.composer-input { width: 100%; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 14px; padding: 13px 15px 4px; outline: none; }
.composer-input::placeholder { color: var(--ink-3); }
.composer-hint { font-size: 11.5px; color: var(--ink-3); padding-left: 5px; }

.msg-sources { margin-top: 12px; }

.sources-title { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; margin-bottom: 8px; }

.source-item { border: 1px solid var(--line-soft); border-radius: 10px; background: var(--surface-2); margin-bottom: 6px; font-size: 12.5px; }
.source-item summary { display: flex; align-items: center; gap: 8px; padding: 7px 11px; cursor: pointer; list-style: none; border-radius: 10px; }
.source-item summary::-webkit-details-marker { display: none; }
.source-item summary:hover { background: var(--surface-3); }
.source-item[open] summary { border-bottom: 1px solid var(--line-soft); border-radius: 10px 10px 0 0; }

.source-n { color: var(--amber); flex-shrink: 0; }
.source-doc { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-score { flex-shrink: 0; font-size: 11px; }

.source-product { padding: 8px 11px 0; font-size: 11px; color: var(--amber); }
.source-text { padding: 8px 11px 10px; white-space: pre-wrap; word-break: break-word; max-height: 200px; overflow-y: auto; color: var(--ink-2); }

/* ============ Настройки ============ */

.settings-form { max-width: 720px; }

/* ============ API-доступ ============ */

.key-scope { margin: 4px 0 20px; }
.key-scope .label { margin-bottom: 10px; }

.key-collections { margin: 12px 0 4px 29px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 10px; max-width: 420px; max-height: 220px; overflow-y: auto; }
.key-collections .choice:last-child { margin-bottom: 0; }
.key-collections .cnt { color: var(--ink-3); font-size: 12px; margin-left: 6px; }

.key-access { display: flex; flex-wrap: wrap; gap: 4px; }

.new-key-card { border-color: var(--amber); margin-top: 20px; }
.new-key-card .alert { margin-bottom: 0; }
.new-key-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.new-key-value { font-family: var(--font-mono); font-size: 13px; color: var(--amber); background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; word-break: break-all; flex: 1; min-width: 200px; }

/* ============ Код-блоки (быстрый старт, документация) ============ */

.codeblock { position: relative; margin-bottom: 8px; }
.codeblock pre { background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 10px; padding: 14px 16px; overflow-x: auto; }
.codeblock code { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; color: var(--ink); white-space: pre; }
.codeblock .code-copy { position: absolute; top: 8px; right: 8px; color: var(--ink-3); background: var(--surface-2); }
.codeblock .code-copy:hover { color: var(--ink); background: var(--surface-3); }

/* ============ Документация ============ */

.apidocs p { color: var(--ink-2); font-size: 13.5px; margin-bottom: 12px; max-width: 640px; }
.apidocs .dt-wrap { margin-bottom: 20px; }
.apidocs .codeblock { margin-bottom: 20px; }
.apidocs ul { color: var(--ink-2); font-size: 13.5px; margin: 0 0 20px 18px; }
.apidocs li { margin-bottom: 6px; }

/* ============ Модалки ============ */

.modal-backdrop { position: fixed; inset: 0; background: rgba(10, 9, 8, 0.6); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }

.modal { width: 440px; max-width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 24px; box-shadow: var(--shadow); }

.modal-title { font-size: 16px; font-weight: 700; margin-bottom: 16px; }
.modal-text { color: var(--ink-2); font-size: 13.5px; margin-bottom: 16px; }
.modal-text strong { color: var(--danger); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ============ Тосты (стек, вид vai8) ============ */

.toasts { position: fixed; right: 22px; bottom: 22px; display: flex; flex-direction: column; gap: 8px; z-index: 200; }

.toast { min-width: 220px; max-width: 380px; padding: 11px 16px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--info); border-radius: 11px; box-shadow: var(--shadow); font-size: 13px; animation: toast-in .2s ease; }
.toast-success { border-left-color: var(--success); }
.toast-error { border-left-color: var(--danger); }
.toast-out { opacity: 0; transform: translateX(12px); transition: opacity .3s, transform .3s; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============ Адаптив ============ */

@media (max-width: 680px) {
  .result-card { flex-direction: column; gap: 12px; }
  .result-score-col { width: 100%; }
  .field-row { flex-direction: column; gap: 0; }
  .view-chat { height: auto; min-height: 100vh; }
  .chat-messages { min-height: 300px; }
}