/* KB article modal + inline `[kb:ID]` citation pills.
   Auto-loaded on every page (partials/i18n_keys.html) with
   js/shared/kb_article.js, which builds the modal on demand — every surface
   that renders an agent answer (AI Analytics, Data Workspace, notebook /
   metric-builder chart panels) shows the same thing. */

/* Header */
.kb-modal-header {
    background: linear-gradient(135deg, var(--color-success-light) 0%, var(--color-success) 100%);
    color: var(--color-text-white);
    border-bottom: none;
}

.kb-modal-header .close {
    color: var(--color-text-white);
    opacity: 0.8;
}

.kb-modal-header .close:hover {
    opacity: 1;
}

.kb-modal-category {
    display: block;
    font-size: 12px;
    opacity: 0.85;
    margin-top: 4px;
}

/* Dark: the light-mode gradient starts at #4ade80 here, which white text
   can't be read on. Use a tinted band with normal text instead. */
[data-theme="dark"] .kb-modal-header {
    background: var(--color-success-bg);
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-success-border);
}

[data-theme="dark"] .kb-modal-header .close {
    color: var(--color-text-primary);
}

[data-theme="dark"] .kb-modal-header .fa-book,
[data-theme="dark"] .kb-modal-category {
    color: var(--color-success-text);
}

/* Fixed height, scrollable body. Typography: shared/markdown-content.css */
#kb-article-modal .modal-body {
    max-height: 70vh;
    overflow-y: auto;
}

/* Inline KB References in text */
.kb-inline-ref {
    color: var(--accent-green, var(--color-success));
    font-weight: 600;
    font-size: 0.65em;
    text-decoration: none;
    cursor: pointer;
    background: rgb(var(--color-success-rgb) / 0.1);
    border: 1px solid rgb(var(--color-success-rgb) / 0.3);
    border-radius: 12px;
    padding: 1px 6px;
    transition: all 0.15s ease;
    display: inline-block;
}

.kb-inline-ref:hover {
    color: var(--color-success);
    background: rgb(var(--color-success-rgb) / 0.2);
    border-color: var(--accent-green, var(--color-success));
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgb(var(--color-success-rgb) / 0.2);
    text-decoration: none;
}