/* === KNOWLEDGE.CSS ===
   /assets/css/knowledge.css
   НАЗНАЧЕНИЕ: стили для вкладки Brain (4 вкладки + admin), Dev Terminal эстетика
   СВЯЗИ: assets/js/knowledge.js, index.php (page-brain)
   РАЗМЕР: ~400 строк
   ЭСТЕТИКА: Dev Terminal — JetBrains Mono для цитат, OKLCH цвета, gap 10px, плотный layout
*/

#page-brain {
    --kn-bg: var(--bg-primary);
    --kn-card-bg: oklch(from var(--bg-secondary) calc(l + 0.02) c h);
    --kn-border: oklch(from var(--bg-secondary) calc(l + 0.06) c h);
    --kn-text: var(--text-primary);
    --kn-muted: var(--text-secondary);
    --kn-accent: oklch(0.65 0.18 50);
    --kn-success: oklch(0.65 0.15 145);
    --kn-error: oklch(0.6 0.2 25);
    --kn-jabali: #FFB347;
    --kn-mertl: #87CEEB;
    --kn-kz: #98D8A8;
    --kn-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;

    padding: 20px 0;
    color: var(--kn-text);
}

.kn-app { max-width: 1400px; margin: 0 auto; padding: 0 20px; }

/* HEADER */
.kn-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--kn-border); }
.kn-title { font-size: 22px; font-weight: 600; display: flex; align-items: center; gap: 10px; margin: 0; }
.kn-title i { width: 24px; height: 24px; color: var(--kn-accent); }
.kn-stats { font-size: 13px; color: var(--kn-muted); display: flex; gap: 8px; flex-wrap: wrap; font-family: var(--kn-mono); }
.kn-stats b { color: var(--kn-text); font-weight: 600; }
.kn-stats .kn-error { color: var(--kn-error); }

/* TABS */
.kn-tabs { display: flex; gap: 6px; margin-bottom: 16px; border-bottom: 1px solid var(--kn-border); }
.kn-tab {
    background: none; border: none; padding: 10px 16px; cursor: pointer;
    color: var(--kn-muted); font-size: 14px; display: flex; align-items: center; gap: 6px;
    border-bottom: 2px solid transparent; transition: all 0.15s;
}
.kn-tab:hover { color: var(--kn-text); }
.kn-tab.active { color: var(--kn-accent); border-bottom-color: var(--kn-accent); font-weight: 500; }
.kn-tab i { width: 16px; height: 16px; }

.kn-tab-content { min-height: 400px; }

/* COMMON */
.kn-loading, .kn-empty {
    padding: 30px; text-align: center; color: var(--kn-muted); font-style: italic;
    background: var(--kn-card-bg); border-radius: 6px; border: 1px dashed var(--kn-border);
}
.kn-error {
    padding: 12px; color: var(--kn-error); background: oklch(from var(--kn-error) l c h / 0.1);
    border-left: 3px solid var(--kn-error); border-radius: 4px;
}
.kn-success {
    padding: 10px; color: var(--kn-success); background: oklch(from var(--kn-success) l c h / 0.1);
    border-left: 3px solid var(--kn-success); border-radius: 4px; margin-bottom: 10px;
}

.kn-btn-primary, .kn-btn-mini {
    background: var(--kn-accent); color: white; border: none; padding: 8px 14px;
    border-radius: 4px; cursor: pointer; font-size: 13px;
    display: inline-flex; align-items: center; gap: 6px; transition: background 0.15s;
}
.kn-btn-primary:hover, .kn-btn-mini:hover { background: oklch(from var(--kn-accent) calc(l - 0.05) c h); }
.kn-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.kn-btn-primary i, .kn-btn-mini i { width: 14px; height: 14px; }
.kn-btn-mini { padding: 4px 10px; font-size: 12px; background: var(--kn-card-bg); color: var(--kn-text); border: 1px solid var(--kn-border); }
.kn-btn-mini:hover { background: var(--kn-border); }

.kn-search-input, .kn-chat-input, .kn-filter {
    background: var(--kn-card-bg); border: 1px solid var(--kn-border); color: var(--kn-text);
    padding: 8px 12px; border-radius: 4px; font-size: 14px; font-family: inherit; outline: none;
}
.kn-search-input:focus, .kn-chat-input:focus, .kn-filter:focus { border-color: var(--kn-accent); }
.kn-search-input { flex: 1; min-width: 200px; }
.kn-filter { padding: 6px 10px; font-size: 13px; }

/* CHAT TAB */
.kn-chat-wrap { display: flex; flex-direction: column; gap: 10px; height: calc(100vh - 280px); min-height: 500px; }
.kn-chat-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 8px 0; }
.kn-thread-badge { font-size: 12px; background: var(--kn-card-bg); padding: 4px 10px; border-radius: 12px; border: 1px solid var(--kn-border); font-family: var(--kn-mono); }
.kn-thread-badge.new { background: oklch(from var(--kn-accent) l c h / 0.15); border-color: var(--kn-accent); color: var(--kn-accent); }
.kn-chat-messages { flex: 1; overflow-y: auto; background: var(--kn-card-bg); border: 1px solid var(--kn-border); border-radius: 6px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.kn-chat-empty { text-align: center; color: var(--kn-muted); margin: auto 0; padding: 40px; font-style: italic; }
.kn-msg { padding: 10px 14px; border-radius: 6px; max-width: 80%; word-wrap: break-word; }
.kn-msg-user { background: oklch(from var(--kn-accent) l c h / 0.15); align-self: flex-end; border-left: 3px solid var(--kn-accent); }
.kn-msg-assistant { background: var(--kn-bg); border: 1px solid var(--kn-border); align-self: flex-start; max-width: 95%; }
.kn-msg-loading { text-align: center; padding: 12px; color: var(--kn-muted); align-self: center; font-style: italic; }
.kn-msg-error { background: oklch(from var(--kn-error) l c h / 0.1); color: var(--kn-error); border-left: 3px solid var(--kn-error); align-self: stretch; }
.kn-msg-content { line-height: 1.6; }
.kn-msg-sources { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--kn-border); font-size: 13px; }
.kn-msg-sources ul { list-style: none; padding: 0; margin: 6px 0 0; }
.kn-msg-sources li { margin-bottom: 8px; padding: 6px; background: var(--kn-card-bg); border-radius: 4px; }
.kn-citation { color: var(--kn-accent); cursor: pointer; font-weight: 600; text-decoration: none; }
.kn-citation:hover { text-decoration: underline; }
.kn-cit-inline { background: oklch(from var(--kn-accent) l c h / 0.15); padding: 0 5px; border-radius: 3px; margin: 0 2px; font-family: var(--kn-mono); font-size: 0.85em; }
.kn-snippet { display: block; color: var(--kn-muted); font-size: 12px; margin-top: 4px; font-family: var(--kn-mono); }
.kn-score { color: var(--kn-muted); font-size: 11px; }

.kn-chat-input-wrap { display: flex; gap: 8px; }
.kn-chat-input { flex: 1; resize: vertical; min-height: 50px; max-height: 200px; }

/* SEARCH TAB */
.kn-search-wrap { display: flex; flex-direction: column; gap: 12px; }
.kn-search-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.kn-search-results { display: flex; flex-direction: column; gap: 8px; }
.kn-search-count { color: var(--kn-muted); font-size: 13px; padding: 4px 0; }
.kn-result-card {
    background: var(--kn-card-bg); border: 1px solid var(--kn-border); padding: 10px;
    border-radius: 4px; cursor: pointer; transition: all 0.15s;
}
.kn-result-card:hover { border-color: var(--kn-accent); }
.kn-result-meta { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; font-size: 11px; }
.kn-badge { padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 500; font-family: var(--kn-mono); }
.kn-badge-teacher { background: oklch(from var(--kn-jabali) l c h / 0.2); color: var(--kn-jabali); border: 1px solid var(--kn-jabali); }
.kn-badge-type { background: var(--kn-bg); color: var(--kn-muted); border: 1px solid var(--kn-border); }
.kn-rrf-score { color: var(--kn-muted); font-family: var(--kn-mono); font-size: 11px; }
.kn-result-snippet { font-family: var(--kn-mono); font-size: 13px; color: var(--kn-text); line-height: 1.5; }
.kn-result-snippet mark { background: oklch(from var(--kn-accent) l c h / 0.3); color: var(--kn-text); padding: 0 2px; border-radius: 2px; }

/* COMPARE TAB */
.kn-compare-wrap { display: flex; flex-direction: column; gap: 12px; }
.kn-compare-toolbar { display: flex; gap: 8px; align-items: center; }
.kn-compare-title { font-size: 18px; margin: 8px 0; color: var(--kn-accent); }
.kn-compare-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kn-teacher-col { background: var(--kn-card-bg); border: 1px solid var(--kn-border); border-radius: 6px; padding: 12px; }
.kn-teacher-col:nth-child(1) { border-top: 3px solid var(--kn-jabali); }
.kn-teacher-col:nth-child(2) { border-top: 3px solid var(--kn-mertl); }
.kn-teacher-col:nth-child(3) { border-top: 3px solid var(--kn-kz); }
.kn-teacher-name { font-size: 16px; margin: 0 0 10px; color: var(--kn-text); }
.kn-teacher-summary { line-height: 1.6; color: var(--kn-text); margin-bottom: 10px; font-size: 14px; }
.kn-fragments-toggle { font-size: 12px; color: var(--kn-muted); }
.kn-fragments-toggle summary { cursor: pointer; padding: 4px 0; }
.kn-fragment { background: var(--kn-bg); padding: 8px; border-radius: 4px; margin-top: 6px; border-left: 2px solid var(--kn-border); }
.kn-fragment-meta { font-size: 11px; color: var(--kn-muted); margin-bottom: 4px; font-family: var(--kn-mono); }
.kn-fragment-text { font-family: var(--kn-mono); font-size: 12px; color: var(--kn-text); line-height: 1.5; }
.kn-overall { background: var(--kn-card-bg); border: 1px solid var(--kn-accent); border-left-width: 4px; border-radius: 6px; padding: 16px; margin-top: 12px; }
.kn-overall h4 { margin: 0 0 10px; color: var(--kn-accent); font-size: 16px; }
.kn-overall-text { line-height: 1.7; color: var(--kn-text); }
.kn-compare-meta { font-size: 11px; color: var(--kn-muted); text-align: right; padding: 6px; font-family: var(--kn-mono); }

/* GRAPH TAB */
.kn-graph-wrap { display: flex; flex-direction: column; gap: 12px; }
.kn-graph-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kn-graph-modes { display: flex; gap: 4px; background: var(--kn-card-bg); padding: 4px; border-radius: 6px; border: 1px solid var(--kn-border); }
.kn-mode { background: none; border: none; padding: 6px 12px; cursor: pointer; color: var(--kn-muted); font-size: 13px; border-radius: 4px; transition: all 0.15s; }
.kn-mode:hover { color: var(--kn-text); }
.kn-mode.active { background: var(--kn-accent); color: white; }
.kn-graph-canvas { background: var(--kn-card-bg); border: 1px solid var(--kn-border); border-radius: 6px; padding: 12px; min-height: 500px; }
.kn-graph-info { font-size: 12px; color: var(--kn-muted); margin-bottom: 10px; font-family: var(--kn-mono); }
.kn-graph-svg-wrap { background: var(--kn-bg); border-radius: 4px; padding: 10px; }
.kn-graph-svg { width: 100%; height: auto; max-height: 600px; }
.kn-graph-svg text { font-family: var(--kn-mono); }
.kn-graph-details { margin-top: 16px; }
.kn-graph-details summary { cursor: pointer; padding: 6px; color: var(--kn-muted); font-size: 13px; }
.kn-graph-details ul { list-style: none; padding: 0; margin: 8px 0; max-height: 300px; overflow-y: auto; font-family: var(--kn-mono); font-size: 12px; }
.kn-graph-details li { padding: 4px 8px; border-bottom: 1px solid var(--kn-border); }
.kn-graph-details i { font-style: normal; color: var(--kn-accent); padding: 0 6px; }

/* ADMIN TAB */
.kn-admin-wrap { display: flex; flex-direction: column; gap: 12px; }
.kn-admin-toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.kn-admin-status, .kn-admin-result { background: var(--kn-card-bg); border: 1px solid var(--kn-border); border-radius: 6px; padding: 14px; }
.kn-admin-status h4 { margin: 12px 0 6px; font-size: 14px; color: var(--kn-text); }
.kn-admin-status h4:first-child { margin-top: 0; }
.kn-table { width: 100%; border-collapse: collapse; font-size: 13px; font-family: var(--kn-mono); }
.kn-table th, .kn-table td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--kn-border); }
.kn-table th { color: var(--kn-muted); font-weight: 500; font-size: 11px; text-transform: uppercase; }
.kn-table tr:hover { background: var(--kn-bg); }

/* MODAL (треды) */
.kn-modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 9999; display: flex; align-items: center; justify-content: center; }
.kn-modal { background: var(--kn-bg); border: 1px solid var(--kn-border); border-radius: 8px; padding: 20px; max-width: 800px; width: 90%; max-height: 80vh; overflow: auto; position: relative; }
.kn-modal h3 { margin: 0 0 12px; color: var(--kn-text); }
.kn-modal-close { position: absolute; top: 8px; right: 12px; background: none; border: none; color: var(--kn-muted); font-size: 24px; cursor: pointer; }
.kn-modal-close:hover { color: var(--kn-text); }
.kn-threads-list { display: flex; flex-direction: column; gap: 8px; }
.kn-thread-item { padding: 10px; background: var(--kn-card-bg); border: 1px solid var(--kn-border); border-radius: 4px; cursor: pointer; transition: all 0.15s; }
.kn-thread-item:hover { border-color: var(--kn-accent); }
.kn-thread-msg { font-weight: 500; margin-bottom: 4px; color: var(--kn-text); }
.kn-thread-meta { font-size: 11px; color: var(--kn-muted); font-family: var(--kn-mono); }

/* RESPONSIVE */
@media (max-width: 1024px) {
    .kn-compare-grid { grid-template-columns: 1fr; }
    .kn-tabs { flex-wrap: wrap; }
}
@media (max-width: 640px) {
    .kn-app { padding: 0 10px; }
    .kn-header { flex-direction: column; align-items: flex-start; gap: 6px; }
    .kn-stats { font-size: 11px; }
    .kn-msg { max-width: 95% !important; }
    .kn-search-toolbar, .kn-graph-toolbar { flex-direction: column; align-items: stretch; }
    .kn-search-input { min-width: auto; width: 100%; }
}

/* === ADMIN INFRA CARDS === */
.kn-admin-section { margin-bottom: 18px; padding: 14px; background: var(--kn-card-bg); border: 1px solid var(--kn-border); border-radius: 6px; }
.kn-admin-section h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14px; color: var(--kn-text); font-weight: 600; }
.kn-admin-section h4 i { width: 16px; height: 16px; color: var(--kn-accent); }
.kn-infra-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.kn-infra-card { padding: 10px 12px; background: var(--kn-bg); border: 1px solid var(--kn-border); border-radius: 5px; }
.kn-infra-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.kn-infra-info { font-size: 12px; color: var(--kn-muted); line-height: 1.5; }
.kn-infra-info b { color: var(--kn-text); font-weight: 600; }
.kn-infra-addr { margin-top: 6px; font-size: 11px; }
.kn-infra-addr code { font-family: var(--kn-mono); color: var(--kn-accent); background: rgba(0,0,0,0.15); padding: 2px 5px; border-radius: 3px; }
.kn-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.kn-dot.ok { background: #4ade80; box-shadow: 0 0 6px rgba(74, 222, 128, 0.5); }
.kn-dot.warn { background: #fbbf24; }
.kn-dot.err { background: #ef4444; }

.kn-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.kn-stat-card { padding: 10px 12px; background: var(--kn-bg); border: 1px solid var(--kn-border); border-radius: 5px; }
.kn-stat-card h5 { margin: 0 0 6px; font-size: 12px; color: var(--kn-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }

.kn-howto ol { margin: 0; padding-left: 20px; font-size: 12px; line-height: 1.7; color: var(--kn-text); }
.kn-howto ol li b { color: var(--kn-accent); }
.kn-pre { font-family: var(--kn-mono); font-size: 11px; padding: 8px; background: var(--kn-bg); border: 1px solid var(--kn-border); border-radius: 4px; max-height: 200px; overflow: auto; white-space: pre-wrap; color: var(--kn-muted); }

/* === GRAPH UI === */
.kn-graph-modes { display: inline-flex; gap: 4px; }
.kn-mode { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--kn-card-bg); border: 1px solid var(--kn-border); border-radius: 4px; cursor: pointer; font-size: 12px; color: var(--kn-text); transition: all 0.15s; }
.kn-mode:hover { border-color: var(--kn-accent); }
.kn-mode.active { background: var(--kn-accent); color: #000; border-color: var(--kn-accent); }
.kn-mode i { width: 14px; height: 14px; }
.kn-search-mini { max-width: 80px; }
.kn-graph-legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0; font-size: 11px; color: var(--kn-muted); }
.kn-leg { display: inline-flex; align-items: center; gap: 5px; }
.kn-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.kn-graph-canvas { min-height: 580px; padding: 0; }
.kn-graph-svg { width: 100%; height: 580px; background: var(--kn-bg); border-radius: 4px; }
.kn-graph-meta { margin-top: 8px; font-size: 12px; color: var(--kn-muted); }
.kn-graph-meta b { color: var(--kn-text); }
.kn-graph-details { margin-top: 10px; }
.kn-graph-details summary { cursor: pointer; padding: 6px 0; font-size: 12px; color: var(--kn-accent); }
.kn-graph-details ul { margin: 6px 0 0; padding-left: 18px; font-size: 12px; line-height: 1.6; color: var(--kn-text); max-height: 300px; overflow: auto; }
.kn-leg-hint { font-size: 11px; color: var(--kn-muted); margin-left: auto; opacity: 0.7; }
.kn-version { display: inline-block; padding: 2px 6px; margin-left: 6px; background: var(--kn-accent); color: #000; border-radius: 3px; font-size: 10px; font-weight: 700; vertical-align: middle; }
.kn-graph-help { padding: 10px 12px; background: var(--kn-card-bg); border-radius: 6px; font-size: 13px; line-height: 1.6; color: var(--kn-text); margin-bottom: 10px; border-left: 3px solid var(--kn-accent); }
.kn-graph-help b { color: var(--kn-accent); }
.kn-tip { display: block; margin-top: 6px; font-size: 11px; color: var(--kn-muted); font-family: var(--kn-mono); }
.kn-field { display: inline-flex; align-items: center; gap: 6px; }
.kn-field-label { font-size: 12px; color: var(--kn-muted); white-space: nowrap; }