/* ═══════════════════════════════════════════════════════════
   Sentinel CSS — Sentinel Design System v40
   Used by landing.html, report.html, and all public pages.
   ═══════════════════════════════════════════════════════════ */

/* ── CSS Variables ───────────────────────────────────────── */
:root {
    --bg: #0a0c0f;
    --bg-card: #0f1318;
    --bg-card-hover: #141a22;
    --bg-elevated: #161d27;
    --bg-row: #121820;
    --border: rgba(255,255,255,0.06);
    --border-active: rgba(209,163,74,0.4);
    --gold: #d1a34a;
    --gold-dim: rgba(209,163,74,0.15);
    --gold-glow: rgba(209,163,74,0.08);
    --red: #c0392b;
    --red-dim: rgba(192,57,43,0.15);
    --teal: #1abc9c;
    --teal-dim: rgba(26,188,156,0.12);
    --blue: #3498db;
    --blue-dim: rgba(52,152,219,0.12);
    --amber: #e67e22;
    --amber-dim: rgba(230,126,34,0.12);
    --text: #e8e0d0;
    --text-dim: #8a8070;
    --text-muted: #505050;
    --mono: 'IBM Plex Mono', monospace;
    --serif: 'Libre Baskerville', Georgia, serif;
    --condensed: 'Barlow Condensed', sans-serif;
    --score-high: #27ae60;
    --score-mid: #e67e22;
    --score-low: #c0392b;
}

/* ── Base ────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.6;
    min-height: 100vh;
    padding: 0;
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: #5dade2; }

/* ── Classification Bar ──────────────────────────────────── */
.class-bar {
    background: var(--red);
    text-align: center;
    padding: 4px 0;
    font-family: var(--condensed);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3em;
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 100;
}

/* ── Platform Header ─────────────────────────────────────── */
.platform-header {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.platform-header .logo {
    font-family: var(--condensed);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--gold);
}
.platform-header .logo span {
    color: var(--text-dim);
    font-weight: 300;
}
.platform-header .meta {
    font-size: 11px;
    color: var(--text-dim);
    text-align: right;
    line-height: 1.8;
}
.platform-header .meta strong {
    color: var(--text);
    display: block;
    font-size: 12px;
}

/* ── Document Identity Strip ─────────────────────────────── */
.doc-strip {
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    padding: 10px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.doc-id {
    display: none;
}
.doc-id sub {
    display: none;
}
.doc-title {
    font-family: var(--condensed);
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}
.doc-subtitle {
    font-size: 11px;
    color: var(--text-dim);
    letter-spacing: 0.05em;
}
.doc-info { flex: 1; }
.doc-meta-grid {
    display: flex;
    gap: 16px;
    font-size: 10px;
    text-align: right;
    flex-shrink: 0;
}
.doc-meta-item label {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: block;
    font-size: 9px;
}
.doc-meta-item value {
    color: var(--text);
    font-weight: 500;
    font-size: 11px;
}

/* ── Nav Tabs ────────────────────────────────────────────── */
.nav-strip {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: 0 24px;
    display: flex;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.nav-strip::-webkit-scrollbar { display: none; }
.nav-tab {
    padding: 12px 18px;
    font-family: var(--condensed);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    white-space: nowrap;
    text-transform: uppercase;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
}
.nav-tab:hover { color: var(--text); }
.nav-tab.active {
    color: var(--gold);
    border-bottom-color: var(--gold);
}

/* ── Main Layout ─────────────────────────────────────────── */
.main {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 1400px;
}

/* ── Cards ───────────────────────────────────────────────── */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 2px;
    overflow: hidden;
}
.card-header {
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}
.card-header:hover { background: var(--bg-card-hover); }
.card-header .card-label {
    font-family: var(--condensed);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 2px;
}
.card-header .card-title {
    font-family: var(--condensed);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--text);
}
.card-header .card-right {
    display: flex;
    align-items: center;
    gap: 12px;
}
.chevron {
    font-size: 12px;
    color: var(--text-dim);
    transition: transform 0.25s;
}
.card.collapsed .chevron { transform: rotate(-90deg); }
.card.collapsed .card-body { display: none; }
.card-body { padding: 18px; }

/* ── Score Card ──────────────────────────────────────────── */
.score-layout {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 24px;
    align-items: start;
}
.score-dial {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.dial-svg { display: block; }
.score-number {
    font-family: var(--condensed);
    font-size: 48px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: middle;
}
.score-label {
    font-family: var(--condensed);
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin-top: 8px;
    letter-spacing: 0.05em;
}
.score-result {
    font-size: 11px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.score-breakdown {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.score-row {
    display: grid;
    grid-template-columns: 160px 1fr 36px;
    align-items: center;
    gap: 12px;
    font-size: 11px;
}
.score-row-label {
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.score-bar-track {
    height: 4px;
    background: rgba(255,255,255,0.05);
    border-radius: 2px;
    overflow: hidden;
}
.score-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.6s ease;
}
.score-row-val {
    font-weight: 600;
    text-align: right;
    font-size: 12px;
}

/* Score bar band colors */
.score-bar-critical { background: var(--red); }
.score-bar-flagged { background: var(--amber); }
.score-bar-review { background: var(--gold); }
.score-bar-sound { background: var(--score-high); }
.score-bar-unknown { background: var(--text-muted); }

/* Score SVG colors */
.score-arc-critical { stroke: var(--red); }
.score-arc-flagged { stroke: var(--amber); }
.score-arc-review { stroke: var(--gold); }
.score-arc-sound { stroke: var(--score-high); }
.score-arc-unknown { stroke: var(--text-muted); }

.score-text-critical { fill: var(--red); }
.score-text-flagged { fill: var(--amber); }
.score-text-review { fill: var(--gold); }
.score-text-sound { fill: var(--score-high); }
.score-text-unknown { fill: var(--text-muted); }

/* Inline score colors */
.score-color-critical { color: var(--red); }
.score-color-flagged { color: var(--amber); }
.score-color-review { color: var(--gold); }
.score-color-sound { color: var(--score-high); }
.score-color-unknown { color: var(--text-muted); }

/* ── CIB / Intelligence Brief Sections ───────────────────── */
.cib-sections {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.cib-section {
    border-bottom: 1px solid var(--border);
}
.cib-section:last-child { border-bottom: none; }
.cib-section-header {
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: background 0.15s;
}
.cib-section-header:hover { background: var(--bg-card-hover); }
.cib-num {
    font-family: var(--condensed);
    font-size: 22px;
    font-weight: 700;
    color: var(--gold);
    width: 32px;
    flex-shrink: 0;
    line-height: 1;
}
.cib-title {
    font-family: var(--condensed);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
    flex: 1;
}
.cib-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.cib-caret {
    font-size: 10px;
    color: var(--text-muted);
    transition: transform 0.2s;
    flex-shrink: 0;
}
.cib-section.open .cib-caret { transform: rotate(90deg); }
.cib-body {
    display: none;
    padding: 0 18px 16px 62px;
}
.cib-section.open .cib-body { display: block; }
.cib-prose {
    font-family: var(--serif);
    font-size: 13px;
    line-height: 1.8;
    color: #c8bfaf;
    margin-bottom: 14px;
}
.cib-finding-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}
.cib-finding {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 8px;
    font-size: 12px;
    line-height: 1.6;
}
.cib-finding .fi-icon {
    margin-top: 2px;
    font-size: 9px;
    text-align: center;
    flex-shrink: 0;
}
.fi-crit { color: #e74c3c; }
.fi-warn { color: var(--amber); }
.fi-info { color: var(--blue); }
.fi-good { color: var(--teal); }
.cib-finding .fi-text { color: var(--text); }
.cib-finding .fi-text em { color: var(--text-dim); font-style: normal; }

/* ── Badges ──────────────────────────────────────────────── */
.badge {
    font-family: var(--condensed);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    padding: 2px 8px;
    border-radius: 1px;
    text-transform: uppercase;
    white-space: nowrap;
}
.badge-red    { background: var(--red-dim);  color: #e74c3c; border: 1px solid rgba(231,76,60,0.3); }
.badge-gold   { background: var(--gold-dim); color: var(--gold); border: 1px solid rgba(209,163,74,0.3); }
.badge-teal   { background: var(--teal-dim); color: var(--teal); border: 1px solid rgba(26,188,156,0.3); }
.badge-blue   { background: var(--blue-dim); color: var(--blue); border: 1px solid rgba(52,152,219,0.3); }
.badge-amber  { background: var(--amber-dim); color: var(--amber); border: 1px solid rgba(230,126,34,0.3); }
.badge-muted  { background: rgba(255,255,255,0.04); color: var(--text-dim); border: 1px solid var(--border); }

/* Band-based badge aliases */
.badge-critical { background: var(--red-dim); color: #e74c3c; border: 1px solid rgba(231,76,60,0.3); }
.badge-flagged  { background: var(--amber-dim); color: var(--amber); border: 1px solid rgba(230,126,34,0.3); }
.badge-review   { background: var(--gold-dim); color: var(--gold); border: 1px solid rgba(209,163,74,0.3); }
.badge-sound    { background: var(--teal-dim); color: var(--teal); border: 1px solid rgba(26,188,156,0.3); }
.badge-unknown  { background: rgba(255,255,255,0.04); color: var(--text-dim); border: 1px solid var(--border); }

/* Severity badge compat (sev-N from report_context.py) */
.badge.sev-5, .badge.sev-4 { background: var(--red-dim); color: #e74c3c; border: 1px solid rgba(231,76,60,0.3); }
.badge.sev-3 { background: var(--amber-dim); color: var(--amber); border: 1px solid rgba(230,126,34,0.3); }
.badge.sev-2, .badge.sev-1 { background: var(--gold-dim); color: var(--gold); border: 1px solid rgba(209,163,74,0.3); }

/* Legacy rpt-badge compat */
.rpt-badge-critical { background: var(--red-dim); color: #e74c3c; border: 1px solid rgba(231,76,60,0.3); }
.rpt-badge-flagged  { background: var(--amber-dim); color: var(--amber); border: 1px solid rgba(230,126,34,0.3); }
.rpt-badge-review   { background: var(--gold-dim); color: var(--gold); border: 1px solid rgba(209,163,74,0.3); }
.rpt-badge-sound    { background: var(--teal-dim); color: var(--teal); border: 1px solid rgba(26,188,156,0.3); }
.rpt-badge-unknown  { background: rgba(255,255,255,0.04); color: var(--text-dim); border: 1px solid var(--border); }
.rpt-sev-badge { font-family: var(--condensed); font-size: 10px; padding: 2px 8px; }

/* ── Data Tables ─────────────────────────────────────────── */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    margin-top: 8px;
}
.data-table th {
    font-family: var(--condensed);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: left;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
}
.data-table td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    color: var(--text);
    vertical-align: top;
    line-height: 1.5;
}
.data-table tr:hover td { background: var(--bg-card-hover); }
.data-table .cell-dim { color: var(--text-dim); font-size: 10px; }
.data-table .cell-code { font-family: var(--mono); font-size: 10px; color: var(--gold); }

/* ── Deep Dive Grid ──────────────────────────────────────── */
.deepdive-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* ── Stat Rows ───────────────────────────────────────────── */
.stat-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    align-items: center;
}
.stat-row:last-child { border-bottom: none; }
.stat-row .stat-label { color: var(--text-dim); }
.stat-row .stat-val { font-weight: 600; text-align: right; }

/* ── Technique Blocks ────────────────────────────────────── */
.technique-block {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border);
    border-left: 3px solid var(--gold);
    padding: 12px 14px;
    margin-bottom: 10px;
    border-radius: 1px;
}
.technique-block.danger { border-left-color: #e74c3c; }
.technique-block.warn   { border-left-color: var(--amber); }
.technique-block.teal   { border-left-color: var(--teal); }
.technique-block.blue   { border-left-color: var(--blue); }
.technique-name {
    font-family: var(--condensed);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.technique-def {
    font-size: 11px;
    color: var(--text-dim);
    margin-bottom: 8px;
    font-style: italic;
}
.technique-instance {
    font-family: var(--serif);
    font-size: 12px;
    color: #b8a898;
    background: rgba(0,0,0,0.2);
    padding: 8px 10px;
    border-radius: 1px;
    border-left: 2px solid rgba(255,255,255,0.1);
    margin-bottom: 6px;
    line-height: 1.6;
}
.technique-counter {
    font-size: 11px;
    color: var(--teal);
    line-height: 1.5;
}

/* ── Verse Blocks ────────────────────────────────────────── */
.verse-block {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    align-items: start;
}
.verse-block:last-child { border-bottom: none; }
.verse-ref {
    font-family: var(--condensed);
    font-size: 12px;
    font-weight: 700;
    color: var(--gold);
    white-space: nowrap;
    padding-top: 2px;
    min-width: 120px;
}
.verse-verdict {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 2px 6px;
    border-radius: 1px;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 4px;
}
.verdict-oppose  { background: var(--red-dim); color: #e74c3c; border: 1px solid rgba(231,76,60,0.3); }
.verdict-support { background: var(--teal-dim); color: var(--teal); border: 1px solid rgba(26,188,156,0.3); }
.verdict-caution { background: var(--amber-dim); color: var(--amber); border: 1px solid rgba(230,126,34,0.3); }
.verse-text {
    font-family: var(--serif);
    font-size: 12px;
    font-style: italic;
    color: var(--text-dim);
    line-height: 1.6;
    margin-bottom: 4px;
}
.verse-analysis { font-size: 11px; color: var(--text); line-height: 1.5; }

/* ── Alert Boxes ─────────────────────────────────────────── */
.alert-box {
    background: rgba(192,57,43,0.1);
    border: 1px solid rgba(192,57,43,0.3);
    border-left: 4px solid #c0392b;
    padding: 12px 14px;
    border-radius: 1px;
    margin-bottom: 14px;
}
.alert-box.gold {
    background: var(--gold-glow);
    border-color: rgba(209,163,74,0.25);
    border-left-color: var(--gold);
}
.alert-box.teal {
    background: var(--teal-dim);
    border-color: rgba(26,188,156,0.25);
    border-left-color: var(--teal);
}
.alert-title {
    font-family: var(--condensed);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 4px;
    color: var(--text);
}
.alert-body { font-size: 12px; color: var(--text-dim); line-height: 1.6; }

/* ── Section Dividers ────────────────────────────────────── */
.section-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0 12px;
    font-family: var(--condensed);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--text-muted);
    text-transform: uppercase;
}
.section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* ── Footer Strip ────────────────────────────────────────── */
.footer-strip {
    border-top: 1px solid var(--border);
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.06em;
}
.footer-strip .ww-mark {
    font-family: var(--condensed);
    font-size: 12px;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 0.1em;
}

/* ── FOIA Items ──────────────────────────────────────────── */
.foia-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 1px;
    margin-bottom: 8px;
    align-items: start;
    background: rgba(255,255,255,0.01);
}
.foia-item .foia-type {
    font-family: var(--condensed);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 2px 6px;
    text-transform: uppercase;
    white-space: nowrap;
    border-radius: 1px;
}
.foia-item .foia-text { font-size: 12px; line-height: 1.5; }
.foia-item .foia-text .foia-label { color: var(--text); font-weight: 500; margin-bottom: 2px; }
.foia-item .foia-text .foia-detail { color: var(--text-dim); font-size: 11px; }
.foia-item .foia-priority { font-size: 10px; text-align: right; color: var(--text-muted); white-space: nowrap; }

/* ── Logic Chain ─────────────────────────────────────────── */
.logic-chain { display: flex; flex-direction: column; gap: 0; }
.logic-premise {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.logic-premise:last-child { border-bottom: none; }
.logic-num {
    font-family: var(--condensed);
    font-size: 18px;
    font-weight: 700;
    color: var(--text-muted);
    line-height: 1;
    padding-top: 2px;
}
.logic-content .logic-claim { font-size: 13px; color: var(--text); margin-bottom: 4px; line-height: 1.5; }
.logic-content .logic-failure { font-size: 11px; color: #e74c3c; margin-bottom: 3px; }
.logic-content .logic-note { font-size: 11px; color: var(--text-dim); }

/* ── Pill ────────────────────────────────────────────────── */
.pill {
    display: inline-block;
    font-family: var(--condensed);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 1px 8px;
    border-radius: 1px;
    border: 1px solid;
}

/* ── Source Doc Collapse ─────────────────────────────────── */
.source-doc-wrap { position: relative; }
.source-doc-text {
    max-height: 200px;
    overflow: hidden;
    font-family: var(--serif);
    font-size: 13px;
    line-height: 1.7;
    color: #b8a898;
    white-space: pre-line;
    transition: max-height 0.4s ease;
}
.source-doc-text.expanded { max-height: none; }
.source-toggle {
    display: block;
    margin-top: 8px;
    font-family: var(--condensed);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    background: none;
    border: 1px solid var(--gold-dim);
    padding: 4px 12px;
    cursor: pointer;
    transition: background 0.15s;
}
.source-toggle:hover { background: var(--gold-dim); }

/* ── Summary List (for format_summary filter) ────────────── */
.r-summary-list {
    list-style: disc;
    padding-left: 20px;
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.8;
}
.r-summary-list li { margin-bottom: 4px; }
.r-summary-list li:last-child { margin-bottom: 0; }


/* ═══════════════════════════════════════════════════════════
   CHAT / LANDING PAGE
   ═══════════════════════════════════════════════════════════ */

.chat-page {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 120px);
}
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 1125px;
    width: 100%;
    margin: 0 auto;
}

/* ── Welcome ─────────────────────────────────────────────── */
.chat-welcome {
    text-align: center;
    color: var(--text-dim);
    padding: 60px 0 24px;
    animation: welcomeFade 0.6s ease-out both;
}
.chat-welcome h2 {
    font-family: var(--condensed);
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
    letter-spacing: 0.05em;
}
.chat-welcome p {
    font-size: 14px;
    color: var(--text-dim);
    margin-bottom: 16px;
}
@keyframes welcomeFade {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Chips ────────────────────────────────────────────────── */
.chat-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    max-width: 500px;
    margin: 0 auto;
}
.chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 1px;
    font-family: var(--condensed);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.chip:hover {
    border-color: var(--gold);
    background: var(--bg-card-hover);
    color: var(--gold);
}

/* ── Chat Bubbles ────────────────────────────────────────── */
.chat-bubble {
    padding: 12px 16px;
    border-radius: 2px;
    max-width: 85%;
    font-size: 13px;
    line-height: 1.6;
    animation: fadeInUp 0.3s ease-out both;
}
.chat-bubble-user {
    background: rgba(209,163,74,0.15);
    color: var(--text);
    align-self: flex-end;
    border: 1px solid rgba(209,163,74,0.3);
}
.chat-bubble-system {
    background: transparent;
    color: var(--text);
    align-self: stretch;
    max-width: 100%;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
}
.chat-label {
    display: block;
    font-family: var(--condensed);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.chat-bubble-user .chat-label { color: var(--gold); }

/* ── Document Cards (search results) ─────────────────────── */
.chat-docs {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}
.chat-doc-card {
    display: block;
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 1px;
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.15s, background 0.15s;
}
.chat-doc-card:hover {
    border-color: var(--gold);
    background: var(--bg-card-hover);
}
.chat-doc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.chat-doc-title {
    font-family: var(--condensed);
    font-size: 14px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.chat-doc-band {
    font-family: var(--condensed);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 1px;
    flex-shrink: 0;
    letter-spacing: 0.08em;
}
.band-sound    { background: var(--teal-dim); color: var(--teal); }
.band-review   { background: var(--gold-dim); color: var(--gold); }
.band-flagged  { background: var(--amber-dim); color: var(--amber); }
.band-critical { background: var(--red-dim); color: #e74c3c; }
.band-pending  { background: rgba(255,255,255,0.04); color: var(--text-muted); }
.band-unknown  { background: rgba(255,255,255,0.04); color: var(--text-muted); }
.band-text-sound    { color: var(--teal); }
.band-text-review   { color: var(--gold); }
.band-text-flagged  { color: var(--amber); }
.band-text-critical { color: #e74c3c; }

.chat-doc-snippet {
    font-size: 11px;
    color: var(--text-dim);
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.chat-doc-deficiencies {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 11px;
    margin-bottom: 4px;
}
.chat-doc-deficiency-count { color: var(--text-dim); font-weight: 600; }
.chat-doc-scriptural {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 11px;
    margin-bottom: 4px;
}
.chat-doc-scriptural-label { color: var(--gold); font-weight: 600; }
.chat-doc-scripture {
    background: var(--gold-dim);
    color: var(--gold);
    padding: 1px 6px;
    border-radius: 1px;
    font-size: 11px;
    border: 1px solid rgba(209,163,74,0.2);
}
.chat-doc-score-bar {
    height: 2px;
    background: rgba(255,255,255,0.05);
    border-radius: 1px;
    margin-top: 4px;
    overflow: hidden;
}
.chat-doc-score-fill { height: 100%; border-radius: 1px; }
.band-bg-sound    { background: var(--teal); }
.band-bg-review   { background: var(--gold); }
.band-bg-flagged  { background: var(--amber); }
.band-bg-critical { background: var(--red); }

/* ── See Also ────────────────────────────────────────────── */
.chat-see-also {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}
.chat-see-also-label {
    font-family: var(--condensed);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.chat-see-also-card {
    display: flex;
    flex-direction: column;
    padding: 8px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 1px;
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.15s;
}
.chat-see-also-card:hover { border-color: var(--gold); }
.chat-see-also-title {
    font-family: var(--condensed);
    font-size: 13px;
    font-weight: 700;
    color: var(--gold);
}
.chat-see-also-desc {
    font-size: 11px;
    color: var(--text-dim);
}

/* ── Choice/Option Buttons ───────────────────────────────── */
.chat-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}
.chat-choice {
    padding: 5px 12px;
    background: transparent;
    border: 1px solid var(--gold);
    border-radius: 1px;
    color: var(--gold);
    font-family: var(--condensed);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.15s;
}
.chat-choice:hover { background: var(--gold-dim); }
.chat-choice:active { background: rgba(209,163,74,0.3); }

/* ── Filter Tags ─────────────────────────────────────────── */
.chat-filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.chat-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--gold-dim);
    border: none;
    border-radius: 1px;
    color: var(--gold);
    font-family: var(--condensed);
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
}
.chat-filter-tag:hover { background: rgba(209,163,74,0.3); }

/* ── Option Buttons (grouped) ────────────────────────────── */
.chat-options-grouped {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}
.chat-option-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
.chat-group-label {
    font-family: var(--condensed);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-right: 4px;
}
.chat-option-btn {
    padding: 5px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 1px;
    color: var(--text);
    font-family: var(--condensed);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.chat-option-btn:hover {
    border-color: var(--gold);
    background: var(--bg-card-hover);
}
.chat-option-btn-show {
    border-color: var(--gold);
    color: var(--gold);
}
.chat-show-all { margin-top: 4px; }

/* ── Thinking Indicator ──────────────────────────────────── */
.chat-indicator { display: none; }
.chat-thinking-bubble { background: transparent; }
.chat-thinking-bubble .thinking-dots {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: normal;
    color: var(--text);
}

/* ── Input Bar ───────────────────────────────────────────── */
.chat-input-bar {
    flex-shrink: 0;
    padding: 12px 24px 16px;
    max-width: 1125px;
    width: 100%;
    margin: 0 auto;
}
.chat-input-wrap {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}
.msg-input {
    flex: 1;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--gold);
    border-radius: 1px;
    color: var(--text);
    font-size: 14px;
    font-family: var(--mono);
    outline: none;
    resize: none;
    min-height: 44px;
    max-height: 120px;
    line-height: 1.6;
    box-shadow: 0 0 0 3px rgba(209,163,74,0.15);
}
.msg-input::placeholder { color: var(--text-muted); }
.chat-send {
    padding: 10px 16px;
    background: var(--gold);
    border: none;
    border-radius: 1px;
    color: #000;
    font-family: var(--condensed);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}
.chat-send:hover { background: #e8b84a; }
.chat-send:disabled { opacity: 0.5; cursor: default; }

/* ── Animations ──────────────────────────────────────────── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes statusFlash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}

.status-running {
    color: var(--teal);
    animation: statusFlash 1.5s ease-in-out infinite;
}


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 800px) {
    .score-layout { grid-template-columns: 1fr; }
    .deepdive-grid { grid-template-columns: 1fr; }
    .doc-strip { flex-wrap: wrap; }
    .doc-meta-grid { display: none; }
    .chat-bubble { max-width: 95%; }
    .chat-input-bar { padding: 8px 12px 12px; }
}

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

/* ── Executive Summary Styles ──────────────────────── */
.exec-headline {
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 2px solid rgba(37,99,235,0.3);
}
.exec-section {
    margin-bottom: 18px;
}
.exec-section:last-child {
    margin-bottom: 0;
}
.exec-section-label {
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #2563eb;
    margin-bottom: 6px;
}
.exec-section-text {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--text-light, #e5e7eb);
}

/* ── Executive Brief Styles ────────────────────────── */
.exec-brief-section {
    margin-bottom: 20px;
}
.exec-brief-section:last-child {
    margin-bottom: 0;
}
.exec-brief-section-title {
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted, #9ca3af);
    padding-bottom: 8px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.exec-brief-item {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.exec-brief-item:last-child {
    border-bottom: none;
}
.exec-brief-item-body {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-light, #e5e7eb);
}
.exec-brief-source {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-dim, #6b7280);
    margin-top: 6px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.02);
    border-left: 2px solid rgba(37,99,235,0.3);
    border-radius: 0 4px 4px 0;
}
.exec-brief-detail {
    font-size: 11px;
    color: var(--text-dim, #6b7280);
    margin-top: 4px;
}
/* Severity badges within brief */
.badge-critical-sev { background: rgba(239,68,68,0.15); color: #f87171; border: 1px solid rgba(239,68,68,0.3); }
.badge-high-sev { background: rgba(251,146,60,0.15); color: #fb923c; border: 1px solid rgba(251,146,60,0.3); }
.badge-medium-sev { background: rgba(251,191,36,0.15); color: #fbbf24; border: 1px solid rgba(251,191,36,0.3); }
.badge-low-sev { background: rgba(52,211,153,0.15); color: #34d399; border: 1px solid rgba(52,211,153,0.3); }

/* ── Print ───────────────────────────────────────────────── */
@media print {
    body { background: #fff; color: #000; }
    .class-bar { display: none; }
    .platform-header { background: #fff; border-bottom: 2px solid #000; }
    .platform-header .logo { color: #000; }
    .doc-strip { background: #f5f5f5; }
    .card { break-inside: avoid; border-color: #ccc; background: #fff; }
    .card.collapsed .card-body { display: block; }
    .card-header { background: #f5f5f5; }
    .footer-strip { background: #fff; color: #666; }
    .chat-input-bar { display: none; }
    .chat-indicator { display: none; }
    .nav-strip { display: none; }
    a { color: #000; text-decoration: underline; }
    .badge { border: 1px solid #666; }
}