/* Duck — Matrix CRT x Vaporwave (muted for daily use) */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
    /* Matrix greens — muted, not eye-searing */
    --matrix-green: #39ff6e;
    --matrix-green-dim: #1a8a3a;
    --matrix-green-glow: rgba(57, 255, 110, 0.15);
    --matrix-green-faint: rgba(57, 255, 110, 0.06);

    /* Vaporwave accents — soft neon pastels */
    --vapor-cyan: #6fdfdf;
    --vapor-magenta: #c77dba;
    --vapor-pink: #e87db5;
    --vapor-blue: #7ba4d4;

    /* Core palette — brighter for readability */
    --bg: #0c100c;
    --bg-surface: #131c13;
    --bg-elevated: #1c271c;
    --text: #b8dab8;
    --text-dim: #7aaa7a;
    --text-bright: #ddf4dd;
    --accent: var(--matrix-green-dim);
    --accent-bright: var(--matrix-green);
    --success: #39ff6e;
    --warning: #e8d44d;
    --danger: #e85555;
    --border: #2a3e2a;
    --border-glow: rgba(57, 255, 110, 0.12);
    --radius: 4px;

    /* Fonts — IBM Plex Mono: readable monospace, Orbitron: display only */
    --font: 'IBM Plex Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;
    --font-display: 'Orbitron', 'IBM Plex Mono', monospace;
    --font-mono: 'IBM Plex Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;
}

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

/* CRT flicker */
@keyframes crt-flicker {
    0%, 100% { opacity: 1; }
    42% { opacity: 1; }
    43% { opacity: 0.95; }
    44% { opacity: 1; }
    78% { opacity: 1; }
    79% { opacity: 0.96; }
    80% { opacity: 1; }
}

body {
    font-family: var(--font);
    font-size: 15px;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    background-image:
        radial-gradient(ellipse at center, transparent 70%, rgba(0, 0, 0, 0.25) 100%);
    background-attachment: fixed;
    animation: crt-flicker 6s ease-in-out infinite;
}

/* CRT scanlines — subtle raster overlay across the entire viewport */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 4px,
        rgba(0, 0, 0, 0.22) 4px,
        rgba(0, 0, 0, 0.22) 5px
    );
    mix-blend-mode: multiply;
}

/* Vaporwave margin effects — only on wide screens */
@media (min-width: 1100px) {
    /* Ambient neon edge glow — upper margins */
    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 0;
        background:
            /* Left glow: pink/magenta */
            radial-gradient(ellipse at 0% 30%, rgba(199, 125, 186, 0.2) 0%, transparent 40%),
            /* Right glow: cyan */
            radial-gradient(ellipse at 100% 25%, rgba(111, 223, 223, 0.18) 0%, transparent 40%),
            /* Lower left: pink */
            radial-gradient(ellipse at 5% 80%, rgba(232, 125, 181, 0.12) 0%, transparent 30%),
            /* Lower right: blue */
            radial-gradient(ellipse at 95% 75%, rgba(123, 164, 212, 0.12) 0%, transparent 30%);
        animation: glow-drift 20s ease-in-out infinite alternate;
    }

    @keyframes glow-drift {
        0% { opacity: 0.8; }
        50% { opacity: 1; }
        100% { opacity: 0.7; }
    }

    /* Outrun perspective grid — SVG images in margins */
    .vaporwave-grid-left,
    .vaporwave-grid-right {
        position: fixed;
        bottom: 0;
        width: calc((100% - 900px) / 2);
        height: 55%;
        pointer-events: none;
        z-index: 0;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .vaporwave-grid-left {
        left: 0;
        background-image: url('/static/grid-left.svg');
        mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, transparent 100%);
    }

    .vaporwave-grid-right {
        right: 0;
        background-image: url('/static/grid-right.svg');
        mask-image: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, transparent 100%);
        -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, transparent 100%);
    }

    .vaporwave-grid-connect {
        display: none;
    }
}

/* Ensure content sits above the effects */
.nav, .view {
    position: relative;
    z-index: 1;
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.03); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--matrix-green-dim); }

/* Selection */
::selection {
    background: var(--matrix-green-dim);
    color: var(--bg);
}

/* Navigation */
.nav {
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    height: 52px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 12px var(--matrix-green-glow);
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-brand {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--accent-bright);
    margin-right: 2rem;
    text-shadow: 0 0 8px var(--matrix-green-glow);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.nav-brand-icon {
    width: 24px;
    height: 24px;
    margin-right: 0.5rem;
    vertical-align: middle;
}

.nav-links {
    display: flex;
    align-items: center;  /* keep flat links and dropdown groups on same baseline */
    gap: 0.25rem;
}

.nav-link {
    color: var(--text-dim);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    transition: color 0.2s, background 0.2s, text-shadow 0.2s;
    text-transform: uppercase;
}

.nav-link:hover {
    color: var(--text-bright);
    background: var(--bg-elevated);
}

.nav-link.active {
    color: var(--accent-bright);
    background: var(--bg-elevated);
    text-shadow: 0 0 6px var(--matrix-green-glow);
    border-bottom: 2px solid var(--matrix-green-dim);
}

/* Hierarchical nav: a parent group holds a header + dropdown submenu.
   Hover the group to reveal; click the parent to toggle (the .open
   class), and the parent's href takes you to the first child.
   Use flex+center so the parent <a> sits at the same vertical position
   as the bare Chat <a>. */
.nav-group {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-parent .nav-chevron {
    font-size: 0.7em;
    margin-left: 0.25rem;
    opacity: 0.6;
    transition: transform 0.15s;
}

.nav-group:hover .nav-parent .nav-chevron,
.nav-group.open .nav-parent .nav-chevron {
    transform: translateY(1px);
    opacity: 1;
}

/* When a child is active, the parent header gets a subtler highlight
   so both the section and page are visible at a glance. */
.nav-parent.active {
    color: var(--accent-bright);
    text-shadow: 0 0 4px var(--matrix-green-glow);
    border-bottom: 2px solid var(--matrix-green-dim);
    background: transparent;  /* don't double-highlight with the child */
}

.nav-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 12rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.25rem;
    display: none;
    flex-direction: column;
    gap: 0.15rem;
    z-index: 50;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.nav-group:hover .nav-submenu,
.nav-group.open .nav-submenu {
    display: flex;
}

.nav-child {
    padding: 0.45rem 0.75rem;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.nav-spacer {
    flex: 1;
}

.nav-logout {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
}

.nav-logout:hover {
    border-color: var(--danger);
    color: var(--danger);
}

/* Views — subtract nav (52px) + breadcrumb (~32px) so the chat input
   stays inside the viewport without scrolling. The breadcrumb is now
   always visible (single-entry on Chat) so a fixed offset is fine. */
.view {
    --nav-height: 52px;
    --breadcrumb-height: 32px;
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem;
    height: calc(100vh - var(--nav-height) - var(--breadcrumb-height));
    position: relative;
    z-index: 2;
}

.hidden {
    display: none !important;
}

/* Models View */
.models-container {
    overflow-y: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.models-section {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
}

.section-title {
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--matrix-green-dim);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.model-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
}

.model-card:last-child { border-bottom: none; }

.model-card-name {
    font-weight: 500;
    color: var(--text-bright);
}

.model-card-name .active-badge {
    display: inline-block;
    font-size: 0.7rem;
    color: var(--success);
    margin-left: 0.5rem;
    vertical-align: middle;
}

.model-card-name .embedding-badge {
    color: var(--warning);
}

.model-card-name .summary-badge {
    color: var(--warning);
}

.model-card-meta {
    font-size: 0.85rem;
    color: var(--text-dim);
}

.model-stats-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border);
}

.model-stats-row:last-child { border-bottom: none; }

.approval-bar {
    display: inline-block;
    height: 6px;
    border-radius: 3px;
    background: var(--matrix-green-dim);
    min-width: 4px;
}

.ab-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

.ab-response {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem;

}

.ab-response-label {
    font-size: 0.8rem;
    color: var(--text-dim);
    margin-bottom: 0.5rem;
}

.ab-pick-btn {
    margin-top: 0.5rem;
    background: var(--bg-surface);
    border: 1px solid var(--matrix-green-dim);
    color: var(--matrix-green-dim);
    padding: 0.375rem 1rem;
    border-radius: var(--radius);
    cursor: pointer;
    font-family: var(--font);
    font-size: 0.85rem;
    transition: all 0.2s;
}

.ab-pick-btn:hover {
    background: var(--matrix-green-faint);
    box-shadow: 0 0 6px var(--matrix-green-glow);
}

.health-service {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
}

.health-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.health-dot.up { background: var(--success); box-shadow: 0 0 4px var(--matrix-green-glow); }
.health-dot.down { background: var(--danger); }

.health-detail {
    font-size: 0.85rem;
    color: var(--text-dim);
}

.health-alert {
    background: rgba(232, 85, 85, 0.08);
    border: 1px solid rgba(232, 85, 85, 0.3);
    color: var(--danger);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

.version-history {
    font-size: 0.85rem;
}

.version-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.75rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--border);
}

.version-row:last-child { border-bottom: none; }

.version-component {
    font-weight: 500;
    color: var(--text-bright);
}

.version-number {
    font-family: var(--font-mono);
    color: var(--matrix-green-dim);
}

.version-time {
    color: var(--text-dim);
    font-size: 0.8rem;
    margin-left: auto;
}

.version-desc {
    width: 100%;
    color: var(--text-dim);
    font-size: 0.85rem;
    padding-left: 0.25rem;
}

.maintenance-controls {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.maintenance-status {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-dim);
}

/* Chat View */
.chat-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.messages {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 1rem;
}

.message {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    max-width: 85%;
    line-height: 1.6;
    word-wrap: break-word;
    font-size: 0.92rem;
}

.message-user {
    white-space: pre-wrap;
    background: var(--bg-elevated);
    margin-left: auto;
    border: 1px solid var(--border);
    color: var(--vapor-cyan);
}

.message-assistant {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-left: 2px solid var(--matrix-green-dim);
    color: var(--text-bright);
}

.message-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-dim);
}

.skill-badge {
    background: rgba(111, 223, 223, 0.1);
    border: 1px solid rgba(111, 223, 223, 0.3);
    padding: 0.125rem 0.5rem;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--vapor-cyan);
    letter-spacing: 0.03em;
}

.model-badge {
    background: var(--matrix-green-faint);
    border: 1px solid var(--border);
    padding: 0.125rem 0.5rem;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--matrix-green-dim);
    letter-spacing: 0.05em;
}

/* Sensitivity badge — passive notice that the response composed from
   a knowledge source marked sensitive. Vaporwave pink to differentiate
   from skill (cyan) and model (green) badges. */
.sensitive-badge {
    background: rgba(232, 125, 181, 0.12);
    border: 1px dashed rgba(232, 125, 181, 0.5);
    padding: 0.125rem 0.5rem;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--vapor-pink);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: help;
}

/* Think-mode badge — factual indicator that the model used think mode
   for this turn. Distinct from sensitive (pink) and skill (cyan) and
   model (green); use a muted purple/lavender to read as "mode" not
   "produced by." */
.think-badge {
    background: rgba(160, 130, 220, 0.10);
    border: 1px dotted rgba(160, 130, 220, 0.45);
    padding: 0.125rem 0.5rem;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: rgba(190, 165, 230, 0.95);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: help;
}

.feedback-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-dim);
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.feedback-btn:hover {
    border-color: var(--vapor-cyan);
    color: var(--vapor-cyan);
    box-shadow: 0 0 4px rgba(111, 223, 223, 0.2);
}

.feedback-btn.selected {
    border-color: var(--accent-bright);
    color: var(--accent-bright);
    background: var(--matrix-green-faint);
    box-shadow: 0 0 6px var(--matrix-green-glow);
}

/* Markdown in messages */
.message h1, .message h2, .message h3 {
    font-family: var(--font-display);
    color: var(--text-bright);
    margin: 0.5rem 0 0.25rem;
    font-size: 1rem;
    letter-spacing: 0.05em;
}

.message h1 { font-size: 1.1rem; }
.message h2 { font-size: 1rem; }
.message h3 { font-size: 0.95rem; }

.message ul, .message ol {
    padding-left: 1.25rem;
    margin: 0.35rem 0;
}

.message li { margin-bottom: 0.2rem; }

.message code {
    background: var(--bg);
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 0.85em;
    color: var(--vapor-cyan);
}

.message pre {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    overflow-x: auto;
    margin: 0.5rem 0;
}

.message pre code {
    background: none;
    padding: 0;
    color: var(--text);
}

.message a {
    color: var(--vapor-cyan);
    text-decoration: none;
}

.message a:hover { text-decoration: underline; }

.message p { margin: 0.35rem 0; }
.message p:first-child { margin-top: 0; }
.message p:last-child { margin-bottom: 0; }

.message strong { color: var(--text-bright); }

.message-system {
    border-left: 2px solid var(--vapor-magenta);
    background: rgba(199, 125, 186, 0.06);
    max-width: 100%;
}

/* Memory page */
.memory-page {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.memory-filters {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.memory-filters select {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: 0.9rem;
    outline: none;
}

.memory-list {
    flex: 1;
    overflow-y: auto;
}

.memory-list-item {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}

.memory-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
    font-size: 0.8rem;
    color: var(--text-dim);
}

.memory-list-summary {
    line-height: 1.5;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

/* Memory card (inline in chat) */
.memory-card { max-width: 100%; }

.memory-card-inner {
    margin-bottom: 0.5rem;

}

.memory-summary {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.memory-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.memory-provenance {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    margin: 0.35rem 0 0.5rem 0;
}
.memory-provenance-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-dim);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-right: 0.2rem;
}
.provenance-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    cursor: default;
    border: 1px dashed rgba(0, 255, 65, 0.25);
    background: rgba(0, 255, 65, 0.05);
    color: var(--text-dim);
}
.provenance-chip.provenance-user_message {
    border-color: rgba(0, 255, 65, 0.4);
    color: var(--matrix-green);
}
.provenance-chip.provenance-assistant_message {
    border-color: rgba(111, 223, 223, 0.4);
    color: var(--vapor-cyan);
}
.provenance-chip.provenance-tool-web_or_news,
.provenance-chip[class*="provenance-tool-"] {
    border-color: rgba(232, 125, 181, 0.4);
    color: var(--vapor-pink);
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    cursor: default;
}

/* Tag category colors */
.tag-employer {
    background: rgba(232, 125, 181, 0.12);
    border: 1px solid rgba(232, 125, 181, 0.35);
    color: var(--vapor-pink);
}

.tag-person {
    background: rgba(111, 223, 223, 0.1);
    border: 1px solid rgba(111, 223, 223, 0.3);
    color: var(--vapor-cyan);
}

.tag-project {
    background: rgba(123, 164, 212, 0.12);
    border: 1px solid rgba(123, 164, 212, 0.35);
    color: var(--vapor-blue);
}

.tag-topic {
    background: rgba(199, 125, 186, 0.1);
    border: 1px solid rgba(199, 125, 186, 0.3);
    color: var(--vapor-magenta);
}

.tag-remove {
    cursor: pointer;
    opacity: 0.5;
    font-size: 0.9rem;
    line-height: 1;
}

.tag-remove:hover { opacity: 1; }

.tag-add-btn {
    background: none;
    border: 1px dashed var(--border);
    color: var(--text-dim);
    width: 24px;
    height: 24px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tag-add-btn:hover {
    border-color: var(--vapor-cyan);
    color: var(--vapor-cyan);
}

.tag-input-wrap {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
}

.tag-cat-select {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0.15rem 0.35rem;
    border-radius: 3px;
    font-family: var(--font);
    font-size: 0.75rem;
}

.tag-name-input {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-bright);
    padding: 0.15rem 0.35rem;
    border-radius: 3px;
    font-family: var(--font);
    font-size: 0.8rem;
    width: 100px;
    outline: none;
}

.tag-name-input:focus { border-color: var(--vapor-cyan); }

.tag-name-input.tag-input-error {
    border-color: var(--danger);
    animation: tag-shake 0.3s ease;
}

@keyframes tag-shake {
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

.tag-confirm-btn, .tag-cancel-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-dim);
    width: 22px;
    height: 22px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.tag-confirm-btn:hover {
    border-color: var(--success);
    color: var(--success);
}

.tag-cancel-btn:hover {
    border-color: var(--danger);
    color: var(--danger);
}

.tag-confirm-btn:disabled, .tag-cancel-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Skills page */
.skills-page {
    height: 100%;
    overflow-y: auto;
}

.skill-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
}

.skill-card.skill-disabled {
    opacity: 0.5;
}

.skill-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
}

.skill-card-name {
    font-family: var(--font-mono);
    font-size: 1rem;
    color: var(--vapor-cyan);
    font-weight: 600;
}

.skill-card-badge {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    padding: 0.1rem 0.5rem;
    border-radius: 3px;
}

.skill-badge-enabled {
    background: rgba(111, 223, 223, 0.1);
    border: 1px solid rgba(111, 223, 223, 0.3);
    color: var(--vapor-cyan);
}

.skill-badge-disabled {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    color: var(--text-dim);
}

.skill-card-desc {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
    color: var(--text);
}

.skill-card-tools {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.skill-tool-chip {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
    font-size: 0.85rem;
}

.skill-tool-name {
    font-family: var(--font-mono);
    color: var(--vapor-magenta);
    white-space: nowrap;
}

.skill-tool-desc {
    color: var(--text-dim);
}

.skill-exec-badge {
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.skill-exec-idle {
    background: rgba(255, 165, 0, 0.15);
    color: #f0a040;
}

.skill-exec-async {
    background: rgba(100, 200, 255, 0.15);
    color: #70c0f0;
}

/* Gallery page */
.gallery-page {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    overflow-y: auto;
}

.gallery-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.gallery-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.gallery-card:hover {
    border-color: var(--matrix-green-dim);
    box-shadow: 0 0 8px rgba(26, 138, 58, 0.2);
}

.gallery-thumb {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}

.gallery-card-info {
    padding: 0.5rem 0.75rem;
}

.gallery-card-prompt {
    font-size: 0.8rem;
    color: var(--text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gallery-card-date {
    font-size: 0.7rem;
    color: var(--text-dim);
    opacity: 0.6;
    margin-top: 0.25rem;
}

.gallery-pager {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
}

.gallery-page-info {
    color: var(--text-dim);
    font-size: 0.85rem;
}

/* Lightbox */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox.hidden { display: none; }

.lightbox-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
}

.lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lightbox-close {
    position: absolute;
    top: -2rem;
    right: -1rem;
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 1.5rem;
    cursor: pointer;
}

.lightbox-close:hover { color: var(--text-bright); }

.lightbox-image {
    max-width: 80vw;
    max-height: 70vh;
    object-fit: contain;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.lightbox-info {
    margin-top: 1rem;
    text-align: center;
    max-width: 600px;
}

.lightbox-prompt {
    color: var(--text-bright);
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.lightbox-date {
    color: var(--text-dim);
    font-size: 0.8rem;
    margin-bottom: 0.75rem;
}

.btn-small {
    background: var(--bg-elevated);
    color: var(--text-dim);
    border: 1px solid var(--border);
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.btn-small:hover {
    background: var(--border);
    border-color: var(--matrix-green-dim);
    color: var(--text-bright);
}

.btn-small:disabled {
    opacity: 0.4;
    cursor: default;
}

.btn-danger {
    background: rgba(200, 50, 50, 0.2);
    color: #e05050;
    border: 1px solid rgba(200, 50, 50, 0.3);
}

.btn-danger:hover {
    background: rgba(200, 50, 50, 0.35);
}

/* Chat inline images */
.message img {
    max-width: 256px;
    height: auto;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    margin: 8px 0;
    display: block;
    cursor: pointer;
}

/* Knowledge page */
.knowledge-page {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.knowledge-header {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    justify-content: flex-end;
}

.knowledge-list {
    flex: 1;
    overflow-y: auto;
}

.knowledge-item {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}

.knowledge-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
    gap: 1rem;
}

.knowledge-item-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
}

.knowledge-item-meta {
    font-size: 0.8rem;
    color: var(--text-dim);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.knowledge-badge {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    padding: 0.05rem 0.4rem;
    border-radius: 3px;
}

.knowledge-badge-trusted {
    background: rgba(111, 223, 223, 0.1);
    border: 1px solid rgba(111, 223, 223, 0.3);
    color: var(--vapor-cyan);
}

.knowledge-badge-web {
    background: rgba(232, 125, 181, 0.1);
    border: 1px solid rgba(232, 125, 181, 0.3);
    color: var(--vapor-pink);
}

.knowledge-item-origin {
    font-size: 0.8rem;
    color: var(--text-dim);
    font-family: var(--font-mono);
    margin-bottom: 0.35rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.knowledge-item-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.btn-danger-sm {
    background: none;
    border: 1px solid rgba(255, 100, 100, 0.3);
    color: rgba(255, 100, 100, 0.7);
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: 0.8rem;
    cursor: pointer;
}

.btn-danger-sm:hover {
    background: rgba(255, 100, 100, 0.1);
    border-color: rgba(255, 100, 100, 0.5);
    color: rgba(255, 100, 100, 0.9);
}

.btn-danger-sm:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.message-loading {
    color: var(--text-dim);
    font-style: italic;
}

.thinking-status {
    font-size: 0.85rem;
    color: var(--text-dim);
    font-style: italic;
    padding: 0.25rem 1rem;
    margin-bottom: 0.25rem;
}

/* Streaming message — matrix rain background */
.message-streaming {
    position: relative;
    overflow: hidden;
    border-left: 2px solid var(--matrix-green-dim);
    animation: stream-fadein 0.3s ease-out;
}

.message-streaming .stream-text {
    position: relative;
    z-index: 1;
}

/* Keep positioning context while canvas fades out */
.message-rain-fading {
    position: relative;
    overflow: hidden;
}

.stream-rain-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

@keyframes stream-fadein {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Streaming error state */
.message-stream-error {
    border-left: 2px solid var(--error, #e05050);
}

.stream-error-note {
    font-size: 0.75rem;
    color: var(--text-dim);
    font-style: italic;
    margin-top: 0.5rem;
    opacity: 0.6;
}

/* Chat duck loader container */
.chat-loader {
    padding: 0.75rem 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-left: 2px solid var(--matrix-green-dim);
    border-radius: var(--radius);
    margin-bottom: 1rem;
    max-width: 300px;
}

/* Global Status Indicator (nav bar, right side) */
.status-indicator {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-right: 1rem;
    font-size: 0.8rem;
    color: var(--text-dim);
    cursor: default;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--matrix-green-dim);
    box-shadow: 0 0 4px rgba(26, 138, 58, 0.4);
    transition: background 0.3s, box-shadow 0.3s;
}

.status-indicator.active .status-dot {
    animation: status-pulse 1.2s ease-in-out infinite;
}

.status-indicator.error .status-dot {
    animation: status-glitch 0.3s ease-in-out 3;
}

@keyframes status-glitch {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

@keyframes status-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* Fixed-width label container — no reflow on state change */
.status-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    width: 25ch;
    overflow: hidden;
}

.status-text {
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
    transition: color 0.3s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.status-ab {
    flex-shrink: 0;
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity 0.3s;
}

.status-ab.visible {
    opacity: 1;
}

/* Matrix rain characters */
.status-rain {
    display: flex;
    gap: 2px;
    transition: opacity 0.3s;
}

/* Idle: slow, dim rain */
.status-rain {
    opacity: 0.3;
}

.status-indicator.active .status-rain {
    opacity: 1;
}

.status-indicator.error .status-rain {
    opacity: 1;
}

.rain-char {
    display: inline-block;
    width: 1.1ch;
    text-align: center;
    font-size: 0.85rem;
    font-family: var(--font-mono);
    color: var(--matrix-green-dim);
    opacity: 0.5;
    animation: rain-fall-slow 3.5s ease-in-out infinite;
    transition: color 0.3s;
}

.status-indicator.active .rain-char {
    animation: rain-fall 1.2s ease-in-out infinite;
}

/* Stagger timing and duration per glyph */
.rain-char:nth-child(1) { animation-delay: 0s; }
.rain-char:nth-child(2) { animation-delay: 0.35s; animation-duration: inherit; }
.rain-char:nth-child(3) { animation-delay: 0.7s; }

.status-indicator.active .rain-char:nth-child(1) { animation-duration: 1.1s; }
.status-indicator.active .rain-char:nth-child(2) { animation-duration: 1.35s; animation-delay: 0.25s; }
.status-indicator.active .rain-char:nth-child(3) { animation-duration: 1.5s; animation-delay: 0.55s; }

.rain-char:nth-child(1) { animation-duration: 3.2s; }
.rain-char:nth-child(2) { animation-duration: 3.8s; animation-delay: 0.5s; }
.rain-char:nth-child(3) { animation-duration: 4.2s; animation-delay: 1.1s; }

@keyframes rain-fall {
    0% { opacity: 0.15; transform: translateY(-3px); }
    50% { opacity: 0.85; transform: translateY(2px); }
    100% { opacity: 0.15; transform: translateY(4px); }
}

@keyframes rain-fall-slow {
    0% { opacity: 0.08; transform: translateY(-1px); }
    50% { opacity: 0.3; transform: translateY(1px); }
    100% { opacity: 0.08; transform: translateY(2px); }
}


/* Chat Input */
.chat-input {
    display: flex;
    gap: 0.5rem;
    padding-top: 0.75rem;

}

/* Slash command autocomplete */
.slash-autocomplete {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);

    margin-bottom: 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 50;
}

.slash-option {
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
    transition: background 0.1s;
}

.slash-option:hover {
    background: var(--bg-elevated);
}

.slash-name {
    font-family: var(--font-mono);
    color: var(--vapor-cyan);
    font-size: 0.9rem;
}

.slash-desc {
    color: var(--text-dim);
    font-size: 0.8rem;
}

/* Modifier slash commands (/think, /think_off) — not skills; they
   shape how the next turn runs. Tinted with the same purple as the
   think-mode badge so the visual association is consistent. */
.slash-option--modifier .slash-name {
    color: rgba(190, 165, 230, 0.95);
}

.slash-kind {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: rgba(160, 130, 220, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 1px dotted rgba(160, 130, 220, 0.4);
    padding: 0 0.3rem;
    border-radius: 2px;
}

.chat-input textarea {
    flex: 1;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-bright);
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: 1rem;
    resize: none;
    outline: none;
    overflow-y: hidden;
    min-height: 44px;
    line-height: 22px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.chat-input textarea:focus {
    border-color: var(--matrix-green-dim);
    box-shadow: 0 0 8px var(--matrix-green-glow), inset 0 0 4px var(--matrix-green-faint);
}

.chat-input textarea::placeholder {
    color: var(--text-dim);
}

.chat-input button {
    background: var(--matrix-green-dim);
    color: var(--bg);
    border: none;
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: background 0.2s, box-shadow 0.2s;
    align-self: flex-end;
}

.chat-input button:hover {
    background: var(--accent-bright);
    box-shadow: 0 0 12px var(--matrix-green-glow);
}

.chat-input button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}

/* Governance View */
.governance-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.gov-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.gov-tab,
.obs-tab {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    cursor: pointer;
    font-family: var(--font);
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: all 0.2s;
}

.gov-tab:hover,
.obs-tab:hover {
    color: var(--text-bright);
    border-color: var(--border-glow);
}

.gov-tab.active,
.obs-tab.active {
    background: var(--bg-elevated);
    color: var(--accent-bright);
    border-color: var(--matrix-green-dim);
    text-shadow: 0 0 4px var(--matrix-green-glow);
}

.gov-filters {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.gov-filters select {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: 0.95rem;
    outline: none;
}

.gov-filters select:focus {
    border-color: var(--matrix-green-dim);
}

.btn-secondary {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius);
    cursor: pointer;
    font-family: var(--font);
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    transition: all 0.2s;
}

.btn-secondary:hover {
    border-color: var(--vapor-cyan);
    color: var(--vapor-cyan);
    box-shadow: 0 0 4px rgba(111, 223, 223, 0.15);
}

.btn-secondary:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.pending-banner {
    background: rgba(232, 212, 77, 0.08);
    border: 1px solid rgba(232, 212, 77, 0.3);
    color: var(--warning);
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-size: 0.85rem;
    text-shadow: 0 0 4px rgba(232, 212, 77, 0.2);
}

/* Audit Table */
.gov-table-wrap {
    flex: 1;
    overflow-y: auto;
}

.gov-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.gov-table th {
    background: var(--bg-surface);
    padding: 0.5rem 0.75rem;
    text-align: left;
    color: var(--matrix-green-dim);
    font-weight: 400;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
}

.gov-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.gov-table tr:hover td {
    background: var(--matrix-green-faint);
}

.gov-table .details-cell {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-dim);
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.gov-table .details-cell:hover {
    color: var(--vapor-cyan);
}

.gov-table .details-cell.expanded {
    white-space: pre-wrap;
    word-break: break-all;
}

.type-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 3px;
    font-size: 0.7rem;
    font-family: var(--font-mono);
    letter-spacing: 0.03em;
}

.type-tier2_approval { background: rgba(111, 223, 223, 0.1); color: var(--vapor-cyan); }
.type-external_access { background: rgba(232, 212, 77, 0.1); color: var(--warning); }
.type-model_change { background: rgba(57, 255, 110, 0.1); color: var(--success); }
.type-memory_write { background: rgba(199, 125, 186, 0.1); color: var(--vapor-magenta); }
.type-security_event { background: rgba(232, 85, 85, 0.1); color: var(--danger); }

.gov-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    font-size: 0.8rem;
    color: var(--text-dim);
}

/* Approve/Deny buttons */
.approval-actions {
    display: flex;
    gap: 0.25rem;
}

.btn-approve {
    background: rgba(57, 255, 110, 0.1);
    border: 1px solid var(--matrix-green-dim);
    color: var(--success);
    padding: 0.125rem 0.5rem;
    border-radius: 3px;
    cursor: pointer;
    font-family: var(--font);
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    transition: all 0.2s;
}

.btn-approve:hover {
    box-shadow: 0 0 6px var(--matrix-green-glow);
    background: rgba(57, 255, 110, 0.2);
}

.btn-deny {
    background: rgba(232, 85, 85, 0.1);
    border: 1px solid var(--danger);
    color: var(--danger);
    padding: 0.125rem 0.5rem;
    border-radius: 3px;
    cursor: pointer;
    font-family: var(--font);
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    transition: all 0.2s;
}

.btn-deny:hover {
    box-shadow: 0 0 6px rgba(232, 85, 85, 0.3);
    background: rgba(232, 85, 85, 0.2);
}

/* Duck swimming loader */
.duck-loader {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    height: 1.6em;
    line-height: 1.6em;
    color: var(--matrix-green-dim);
    opacity: 0.7;
}

.duck-loader .duck {
    display: inline-block;
    transform: scaleX(-1); /* flip to face right */
    animation: duck-bob 2s ease-in-out infinite;
    font-style: normal;
    position: relative;
    z-index: 1;
    margin: 0 0.1em;
}

.duck-loader .wave {
    display: inline-block;
    opacity: 0.45;
    animation: wave-undulate 1.6s ease-in-out infinite;
}

.duck-loader .wave:nth-child(1)  { animation-delay: 0s; }
.duck-loader .wave:nth-child(2)  { animation-delay: 0.15s; }
.duck-loader .wave:nth-child(3)  { animation-delay: 0.3s; }
.duck-loader .wave:nth-child(5)  { animation-delay: 0.1s; }
.duck-loader .wave:nth-child(6)  { animation-delay: 0.25s; }
.duck-loader .wave:nth-child(7)  { animation-delay: 0.4s; }
.duck-loader .wave:nth-child(8)  { animation-delay: 0.55s; }
.duck-loader .wave:nth-child(9)  { animation-delay: 0.7s; }
.duck-loader .wave:nth-child(10) { animation-delay: 0.85s; }

.duck-loader .label {
    margin-left: 0.6em;
    font-size: 0.8rem;
    opacity: 0.5;
    animation: label-pulse 2s ease-in-out infinite;
}

@keyframes duck-bob {
    0%, 100% { transform: scaleX(-1) translateY(0px); }
    35% { transform: scaleX(-1) translateY(-2px); }
    65% { transform: scaleX(-1) translateY(1px); }
}

@keyframes wave-undulate {
    0%, 100% { transform: translateY(0px); opacity: 0.35; }
    50% { transform: translateY(-3px); opacity: 0.6; }
}

@keyframes label-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.25; }
}

/* --- Agents Pane --- */

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.section-header .section-title {
    margin: 0;
}

.agents-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.agent-card {
    background: rgba(0, 20, 0, 0.6);
    border: 1px solid rgba(0, 255, 65, 0.15);
    border-radius: 6px;
    padding: 1rem 1.2rem;
}

.agent-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
}

.agent-name {
    font-weight: bold;
    color: var(--primary);
    font-size: 1.1rem;
}

.agent-status-text {
    margin-left: auto;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.agent-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.status-running { background: #00ff41; box-shadow: 0 0 6px #00ff41; }
.status-paused { background: #ffaa00; box-shadow: 0 0 6px #ffaa00; }
.status-stopped { background: #666; }
.status-stale { background: #ff4444; box-shadow: 0 0 6px #ff4444; }
.status-loading { background: #4488ff; animation: pulse 1.5s ease-in-out infinite; }

.agent-desc {
    color: rgba(0, 255, 65, 0.5);
    font-size: 0.85rem;
    margin-bottom: 0.6rem;
}

.agent-meta {
    display: flex;
    gap: 1.5rem;
    font-size: 0.8rem;
    color: rgba(0, 255, 65, 0.4);
    margin-bottom: 0.8rem;
}

.agent-controls {
    display: flex;
    gap: 0.5rem;
}

.btn-sm {
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
}

/* --- Message Timestamps --- */

.message-timestamp {
    float: right;
    font-size: 0.65rem;
    opacity: 0.35;
    font-family: monospace;
    margin-left: 1rem;
    position: relative;
    bottom: 0.25rem;
}

.message-user .message-timestamp { color: var(--accent); }
.message-assistant .message-timestamp { color: var(--primary); }
.message-system .message-timestamp { color: var(--vaporwave); }

/* --- Context Budget Chart --- */

.budget-controls {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.budget-range.active {
    background: rgba(0, 255, 65, 0.15);
    border-color: var(--primary);
}

.budget-stats {
    font-size: 0.85rem;
    color: rgba(0, 255, 65, 0.6);
    margin-bottom: 0.75rem;
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.budget-chart {
    width: 100%;
    border: 1px solid rgba(0, 255, 65, 0.1);
    border-radius: 4px;
    background: rgba(0, 10, 0, 0.4);
}

.budget-legend {
    display: flex;
    gap: 1.2rem;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: rgba(0, 255, 65, 0.5);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.legend-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

/* --- Version Badge --- */

.version-badge {
    position: fixed;
    bottom: 0.4rem;
    right: 0.6rem;
    font-size: 0.6rem;
    font-family: monospace;
    color: rgba(0, 255, 65, 0.25);
    pointer-events: none;
    z-index: 1;
}

/* Breadcrumb under the nav. Hidden on top-level-only pages (Chat). */
.breadcrumb {
    padding: 0.4rem 1.5rem;
    font-size: 0.75rem;
    color: var(--text-dim);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.breadcrumb.hidden {
    display: none;
}

.breadcrumb-section {
    color: var(--text-dim);
}

.breadcrumb-sep {
    color: var(--matrix-green-dim);
    opacity: 0.5;
}

.breadcrumb-page {
    color: var(--accent-bright);
    text-shadow: 0 0 4px var(--matrix-green-glow);
}

/* Single-entry breadcrumb (e.g. Chat) — hide the empty section label
   and the separator so it reads as just "Chat" without leading slash. */
.breadcrumb.is-leaf-only .breadcrumb-section,
.breadcrumb.is-leaf-only .breadcrumb-sep {
    display: none;
}

/* --- Memory Audit page --- */

.memory-audit-page {
    max-width: 980px;
    margin: 0 auto;
    padding: 1rem;
}

.memory-audit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.memory-audit-header-actions {
    display: flex;
    gap: 0.5rem;
}

.memory-audit-help {
    font-size: 0.85rem;
    margin: 0 0 0.75rem 0;
    line-height: 1.5;
}

.memory-audit-filters {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.memory-audit-filters > select {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.3rem 0.5rem;
    color: var(--text);
    font-family: var(--font);
    font-size: 0.85rem;
}

.memory-audit-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.memory-audit-item {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
}

.memory-audit-item.severity-low { border-left-color: rgba(111, 223, 223, 0.6); }
.memory-audit-item.severity-medium { border-left-color: rgba(255, 200, 100, 0.7); }
.memory-audit-item.severity-high { border-left-color: rgba(232, 90, 90, 0.85); }

.memory-audit-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}

.memory-audit-item-category {
    font-family: var(--font-mono);
    font-size: 0.8rem;
}

.severity-badge {
    text-transform: uppercase;
    font-size: 0.7rem;
    padding: 0.05rem 0.4rem;
    border-radius: 3px;
    border: 1px solid var(--border);
}
.severity-badge.severity-low { color: var(--vapor-cyan); border-color: rgba(111, 223, 223, 0.4); }
.severity-badge.severity-medium { color: rgba(255, 200, 100, 0.95); border-color: rgba(255, 200, 100, 0.4); }
.severity-badge.severity-high { color: rgba(232, 110, 110, 0.95); border-color: rgba(232, 110, 110, 0.5); }

.category-badge {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    padding: 0.05rem 0.4rem;
    border-radius: 3px;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
}

.memory-audit-item-meta {
    font-size: 0.75rem;
    margin-top: 0.2rem;
    font-family: var(--font-mono);
}

.memory-audit-item-actions {
    display: flex;
    gap: 0.4rem;
}

.memory-audit-item-text {
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--text);
    margin: 0.3rem 0;
}

.memory-audit-item-mems,
.memory-audit-item-note {
    font-size: 0.78rem;
    font-family: var(--font-mono);
    margin-top: 0.2rem;
}

.memory-audit-item-detail {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.85rem;
}

.memory-audit-detail-header {
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

.memory-audit-detail-mem {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.4rem 0.6rem;
}

/* --- Briefs page (reuses Reflections shape) --- */

.briefs-page,
.reflections-page {
    max-width: 980px;
    margin: 0 auto;
    padding: 1rem;
}

.briefs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.briefs-header-actions {
    display: flex;
    gap: 0.5rem;
}

.briefs-help {
    font-size: 0.85rem;
    margin: 0 0 1rem 0;
    line-height: 1.5;
}

.briefs-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.brief-item {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-left: 3px solid rgba(255, 200, 100, 0.7);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
}

.brief-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.brief-item-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    font-family: var(--font-mono);
}

.brief-item-meta {
    font-size: 0.8rem;
    margin-top: 0.15rem;
    font-family: var(--font-mono);
}

.brief-item-actions {
    display: flex;
    gap: 0.5rem;
}

.brief-item-body {
    margin-top: 0.6rem;
    border-top: 1px solid var(--border);
    padding-top: 0.6rem;
}

.brief-content {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text);
}

.brief-content h2 {
    margin: 1rem 0 0.4rem 0;
    color: var(--accent-bright);
    font-size: 1.05rem;
}

.brief-content h3 {
    margin: 0.6rem 0 0.3rem 0;
    color: var(--text);
    font-size: 0.95rem;
}

.brief-content ul {
    padding-left: 1.2rem;
}

/* --- Reflections page --- */

.reflections-page {
    max-width: 980px;
    margin: 0 auto;
    padding: 1rem;
}

.reflections-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.reflections-help {
    font-size: 0.85rem;
    margin: 0 0 1rem 0;
    line-height: 1.5;
}

.reflections-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.reflection-item {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-left: 3px solid rgba(111, 223, 223, 0.6);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
}

.reflection-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.reflection-item-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    text-transform: capitalize;
}

.reflection-item-meta {
    font-size: 0.8rem;
    margin-top: 0.15rem;
    font-family: var(--font-mono);
}

.reflection-item-actions {
    display: flex;
    gap: 0.5rem;
}

.reflection-item-body {
    border-top: 1px solid var(--border);
    padding-top: 0.6rem;
}

.reflection-content {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text);
}

.reflection-content h1,
.reflection-content h2,
.reflection-content h3 {
    margin: 0.7rem 0 0.3rem 0;
    color: var(--accent-bright);
    font-size: 1rem;
}

.reflection-content ul {
    padding-left: 1.2rem;
}

.reflection-content code {
    font-family: var(--font-mono);
    background: var(--bg);
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
    font-size: 0.85rem;
}

.reflection-revisions {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--border);
}

.reflection-revisions-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.reflection-revision-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
}

.reflection-revision-left {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
}

.reflection-revision-id {
    color: var(--accent-bright);
    font-weight: 600;
}

.reflection-revision-current {
    background: rgba(0, 255, 65, 0.12);
    border: 1px solid rgba(0, 255, 65, 0.3);
    color: var(--accent-bright);
    padding: 0.05rem 0.4rem;
    border-radius: 3px;
    font-size: 0.7rem;
    text-transform: uppercase;
}

/* --- People page (Phase 0 v2b) --- */

.people-page {
    max-width: 980px;
    margin: 0 auto;
    padding: 1rem;
}

.people-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.people-header-actions {
    display: flex;
    gap: 0.5rem;
}

.people-help {
    font-size: 0.85rem;
    margin: 0 0 1rem 0;
    line-height: 1.5;
}

.people-form {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.people-form-row {
    display: flex;
    gap: 0.5rem;
}

.people-form-row > input,
.people-form-row > select,
.people-form-row > textarea {
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.4rem 0.6rem;
    color: var(--text);
    font-family: var(--font);
    font-size: 0.9rem;
}

.people-form-row > select {
    flex: 0 0 130px;
}

.people-form-row > textarea {
    resize: vertical;
    font-family: var(--font);
}

.people-form-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.people-form-error {
    color: rgba(255, 120, 120, 0.9);
    font-size: 0.85rem;
    min-height: 1rem;
}

.people-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.people-item {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    transition: border-left-color 0.2s ease;
}

.people-item-public { border-left-color: rgba(111, 223, 223, 0.6); }
.people-item-team { border-left-color: rgba(255, 200, 100, 0.7); }
.people-item-private { border-left-color: rgba(232, 125, 181, 0.8); }

.people-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.people-item-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    text-transform: capitalize;
}

.people-item-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.people-tier {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.2rem 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text);
    cursor: pointer;
}

.people-tier-public { color: var(--vapor-cyan); }
.people-tier-team { color: rgba(255, 200, 100, 0.95); }
.people-tier-private { color: var(--vapor-pink); }

.people-item-body {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.people-item-field {
    display: flex;
    gap: 0.6rem;
    font-size: 0.85rem;
    line-height: 1.4;
}

.people-item-field-label {
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex: 0 0 90px;
    padding-top: 0.05rem;
}

.people-item-field-value {
    color: var(--text);
    flex: 1;
}

.people-item-source {
    margin-top: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
}

/* --- Queue banner (Phase 2 — chat-view in-flight indicator) --- */

.queue-banner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.8rem;
    margin-bottom: 0.4rem;
    border-bottom: 1px solid var(--border-dim, rgba(120, 200, 160, 0.18));
    background: rgba(20, 30, 30, 0.35);
    font-size: 0.78rem;
    color: var(--matrix-green-dim, #8ad0a0);
    font-family: var(--font-mono);
}

.queue-banner.hidden {
    display: none;
}

.queue-banner-icon {
    font-size: 0.95rem;
}

.queue-banner-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.queue-banner-pause {
    margin-left: auto;
}

.queue-banner-pause.hidden {
    display: none;
}