/* TRIAD — iMessage-style dark mode UI
   Created by Plucky LLC
   Dark background, blue bubbles for user, gray for others.
   JetBrains Mono for system elements, system font for messages.
   Covers: header, messages, input, welcome screen, modals, scratchpad,
   presence panel, context pane, admin dashboard, profile panel,
   body language, knowledge system, growth engine, and responsive layout. */

:root {
    --bg: #0a0a0c;
    --surface: #141418;
    --surface-hover: #1c1c22;
    --border: #2a2a32;
    --blue: #0b6fda;
    --blue-light: #1a7cf0;
    --gray-bubble: #2c2c34;
    --gray-bubble-light: #363640;
    --text: #e8e8ec;
    --text-muted: #8a8a96;
    --text-dim: #5a5a66;
    --accent: #0b6fda;
    --accent-glow: rgba(11,111,218,0.15);
    --red: #e63946;
    --red-glow: rgba(230,57,70,0.2);
    --yellow: #f4c430;
    --yellow-glow: rgba(244,196,48,0.12);
    --green: #2ecc71;
    --green-dim: rgba(46,204,113,0.15);
    --purple: #9b59b6;
    --purple-glow: rgba(155,89,182,0.12);
    --orange: #e67e22;
    --orange-glow: rgba(230,126,34,0.15);
    --cyan: #00bcd4;
    --cyan-glow: rgba(0,188,212,0.15);
    --amber: #f59e0b;
    --amber-glow: rgba(245,158,11,0.15);
    --teal: #009688;
    --teal-glow: rgba(0,150,136,0.15);
    --mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
    --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

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

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    height: 100vh;
    height: 100dvh; /* Safari iOS: accounts for address bar + toolbar */
    overflow: hidden;
}

#app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ===== HEADER ===== */
header {
    padding: 8px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    flex-shrink: 0;
    position: relative; /* anchor for hamburger menu dropdown */
    -webkit-app-region: drag; /* Electron: header is window drag handle */
}
/* Electron: all clickable header elements must opt out of drag region */
header button,
header select,
header input,
header a,
header .user-icon-wrapper,
header .user-dropdown,
header .header-left,
header .header-right,
header .header-modes {
    -webkit-app-region: no-drag;
}

/* v3.2.8: Header top — 3-column layout: left (logo+buttons), center (brand+names), right (admin+user) */
.header-top {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    position: relative;
    margin-bottom: 2px;
    min-height: 40px;
    overflow: visible;
}

/* Left column: logo on top, session buttons below */
.header-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.header-left-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Center column: brand lockup + participant names stacked */
.header-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    pointer-events: none; /* v3.2.16: Don't capture clicks — fixes Electron drag region blocking right-side buttons */
    -webkit-app-region: no-drag; /* v3.2.16: Electron: don't make center column a drag handle */
}

/* v3.2.15: Coalition Status Bar — persistent gutter between conversation and input */
.coalition-status-bar {
    display: flex;
    align-items: center;
    gap: 2em;
    background: #0a0a0c;
    padding: 5px 20px;
    font-family: 'JetBrains Mono', var(--mono);
    font-size: 10px;
    flex-shrink: 0;
}
.csb-block {
    display: inline-flex;
    align-items: center;
    gap: 0;
    white-space: nowrap;
}
.csb-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
    transition: opacity 0.2s;
}
.csb-name {
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-right: 0.5em;
}
.csb-state {
    opacity: 0.7;
    letter-spacing: 0.3px;
}
/* State: LISTENING — dim, steady */
.csb-block.csb-listening .csb-dot { opacity: 0.4; }
.csb-block.csb-listening .csb-name { opacity: 0.4; }
.csb-block.csb-listening .csb-state { opacity: 0.4; }
/* State: PREPARING — slow pulse on dot only */
.csb-block.csb-preparing .csb-dot { opacity: 0.7; animation: csb-pulse 1.5s ease-in-out infinite; }
.csb-block.csb-preparing .csb-name { opacity: 0.7; }
.csb-block.csb-preparing .csb-state { opacity: 0.7; }
/* State: READY — bright, steady */
.csb-block.csb-ready .csb-dot { opacity: 1; }
.csb-block.csb-ready .csb-name { opacity: 1; }
.csb-block.csb-ready .csb-state { opacity: 0.7; }
/* State: YIELDING — dot pulses fast, name steady */
.csb-block.csb-yielding .csb-dot { opacity: 1; animation: csb-yield-pulse 0.8s ease-in-out infinite; }
.csb-block.csb-yielding .csb-name { opacity: 1; }
.csb-block.csb-yielding .csb-state { opacity: 0.7; }
/* State: CHALLENGE — both dot AND name break to red, no pulse */
.csb-block.csb-challenging .csb-dot { background: #e63946 !important; opacity: 1; animation: none; }
.csb-block.csb-challenging .csb-name { color: #e63946 !important; opacity: 1; }
.csb-block.csb-challenging .csb-state { color: #e63946 !important; opacity: 1; }

@keyframes csb-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.9; }
}
@keyframes csb-yield-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Disabled state when body language is off — all dots LISTENING */
.coalition-status-bar.disabled .csb-dot { opacity: 0.3 !important; animation: none !important; }
.coalition-status-bar.disabled .csb-name { opacity: 0.3 !important; }
.coalition-status-bar.disabled .csb-state { opacity: 0.3 !important; }

.plucky-logo {
    height: 20px;
    width: auto;
    object-fit: contain;
}

.logo {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 4px;
    font-family: var(--mono);
    background: linear-gradient(135deg, var(--accent), var(--green));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.beta-tag {
    font-size: 11px;
    color: var(--text-dim);
    font-family: var(--mono);
}

.divider-v {
    width: 1px;
    height: 16px;
    background: var(--border);
    margin: 0 4px;
}

.divider-v-small {
    width: 1px;
    height: 12px;
    background: var(--border);
}

/* Triad swirl logo — top-left across all headers */
.triad-logo {
    height: 36px;
    width: 36px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
}
/* Welcome screen: pin top-left, vertically centered within the top bar */
.welcome-triad-logo {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
}
/* Ensure welcome top bar is tall enough to contain the 80px logo with breathing room */
.welcome-top-bar {
    min-height: 100px;
}

/* v3.1.8: Persistent Plucky / TRIAD BETA lockup — v3.2.7: centered in header-top */
/* v3.2.8: Brand lockup is now inside .header-center flex column — no absolute positioning */
.brand-lockup {
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: none;
    user-select: none;
}
.brand-plucky-img {
    height: 24px;
    width: auto;
    object-fit: contain;
}
.brand-triad {
    font-family: var(--mono);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 4px;
    background: linear-gradient(135deg, var(--accent), var(--green));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.brand-beta {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    color: var(--text-dim);
    letter-spacing: 2px;
}

/* v3.2.23: Meeting Type label — shown in header during active sessions */
.meeting-type-label {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    opacity: 0.7;
    margin-top: -2px;
    margin-bottom: 2px;
}

/* Research controls panel — inside Context pane */
.research-controls-panel {
    background: #1a1a24;
    border: 1px solid #2a2a3a;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 12px;
    position: relative;
}
/* Stage navigation: ◄ STAGE NAME ► */
.research-stage-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 8px;
}
.stage-name {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--accent);
    min-width: 120px;
    text-align: center;
}
.stage-arrow {
    background: none;
    border: 1px solid #444;
    color: var(--text);
    font-size: 14px;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.stage-arrow:hover:not(.disabled) { border-color: var(--accent); color: var(--accent); }
.stage-arrow.disabled { opacity: 0.25; cursor: not-allowed; }
/* Progress dots */
.stage-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 12px;
}
.stage-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #333;
    border: 1px solid #555;
    transition: all 0.2s;
}
.stage-dot.active { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 6px var(--accent); }
.stage-dot.completed { background: #2ecc71; border-color: #2ecc71; }
/* Research sections (saturation, auditor) */
.research-section {
    margin-top: 10px;
    cursor: help;
}
.research-section-label {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
}
/* Saturation bar */
.saturation-bar-wrap {
    height: 6px;
    background: #222;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid #333;
}
.saturation-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease, background 0.3s;
}
.saturation-bar-fill.exploring { background: #2ecc71; }
.saturation-bar-fill.narrowing { background: #e6a817; }
.saturation-bar-fill.saturated { background: #e74c3c; }
.saturation-label {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-top: 3px;
}
.saturation-label.exploring { color: #2ecc71; }
.saturation-label.narrowing { color: #e6a817; }
.saturation-label.saturated { color: #e74c3c; }

/* Bug #31: Native search counter shown beneath the saturation bar in DEEP */
.native-search-counter {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--accent);
    letter-spacing: 0.5px;
    margin-top: 5px;
    opacity: 0.85;
}

/* Bug #32: Last-DEEP-run summary header shown when no active run is in flight */
.ai-status-tracker.ai-status-summary {
    opacity: 0.75;
}
.ai-status-summary-header {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--text-dim);
    letter-spacing: 0.5px;
    padding: 4px 0 6px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 4px;
}

/* Deep Search button */
.deep-search-btn {
    display: block;
    width: 100%;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 6px 10px;
    margin-top: 10px;
    border-radius: 4px;
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    transition: all 0.2s;
}
.deep-search-btn:hover { background: var(--accent); color: var(--bg); }
.deep-search-btn.active {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
}

/* Bug #15: Visible feedback for the Generate Research Report button —
   hover/active/in-progress states so the user knows the click registered.
   Inline style sets the base color so we override it on press/disable. */
.deep-search-btn[data-report-trigger]:hover:not(:disabled) {
    background: var(--accent) !important;
    color: var(--bg) !important;
    box-shadow: 0 0 12px rgba(11,111,218,0.4);
    transform: translateY(-1px);
}
.deep-search-btn[data-report-trigger]:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 0 4px rgba(11,111,218,0.6) inset;
    filter: brightness(0.9);
}
.deep-search-btn[data-report-trigger]:disabled,
.deep-search-btn[data-report-trigger].is-generating {
    cursor: progress;
    opacity: 0.7;
    background: rgba(11,111,218,0.5) !important;
    color: var(--bg) !important;
    animation: reportBusyPulse 1.6s ease-in-out infinite;
}
.report-option[data-report-trigger]:disabled,
.report-option[data-report-trigger].is-generating {
    cursor: progress;
    opacity: 0.6;
    background: rgba(11,111,218,0.18);
    color: var(--accent);
    animation: reportBusyPulse 1.6s ease-in-out infinite;
}
@keyframes reportBusyPulse {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1.0; }
}
.research-active-note {
    font-family: var(--mono);
    font-size: 9px;
    color: #2ecc71;
    text-align: center;
    margin-top: 8px;
    letter-spacing: 1px;
}
/* Per-AI search status tracker */
.ai-status-tracker {
    margin-top: 10px;
    border-top: 1px solid #2a2a3a;
    padding-top: 8px;
}
.ai-status-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    font-family: var(--mono);
    font-size: 10px;
}
.ai-status-icon {
    width: 14px;
    text-align: center;
    font-size: 11px;
}
.ai-status-name {
    font-weight: 600;
    min-width: 65px;
    color: var(--text-muted);
}
.ai-status-text {
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ai-status-done .ai-status-icon { color: #2ecc71; }
.ai-status-done .ai-status-name { color: #2ecc71; }
.ai-status-done .ai-status-text { color: #2ecc7188; }
.ai-status-active .ai-status-icon { color: var(--accent); animation: pulse-search 1.5s ease-in-out infinite; }
.ai-status-active .ai-status-name { color: var(--text); }
.ai-status-active .ai-status-text { color: var(--accent); }
.ai-status-error .ai-status-icon { color: #e74c3c; }
.ai-status-error .ai-status-name { color: #e74c3c; }
.ai-status-queued .ai-status-icon { color: #555; }
.ai-status-queued .ai-status-name { color: #555; }
@keyframes pulse-search {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
/* Tooltip positioning inside context pane */
.research-controls-panel .tooltip-panel {
    width: 280px;
    left: 0;
    right: auto;
}

/* v3.1.8: Welcome screen top bar — lockup centered, user icon right */
.welcome-top-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 24px;
    z-index: 110;
    -webkit-app-region: drag; /* Electron: welcome top bar is drag handle */
}
/* Electron: clickable elements in welcome top bar */
.welcome-top-bar button,
.welcome-top-bar .welcome-right-controls,
.welcome-top-bar .welcome-user-icon-wrapper,
.welcome-top-bar .user-dropdown {
    -webkit-app-region: no-drag;
}
.welcome-top-bar .welcome-right-controls {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
}
.welcome-top-bar .welcome-right-controls .welcome-user-icon-wrapper {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
}

.participant-status {
    display: flex;
    align-items: center;
    gap: 12px;
}

.participant-dot {
    display: flex;
    align-items: center;
    gap: 4px;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 6px rgba(46,204,113,0.53);
}

.status-dot.offline { background: var(--text-dim); box-shadow: none; }

.participant-name {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--mono);
}

.participant-domain {
    display: block;
    font-size: 9px;
    color: var(--text-dim);
    font-family: var(--mono);
    margin-top: -1px;
    opacity: 0.7;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.cost-display {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 12px;
    border-radius: 6px;
    background: var(--bg);
    border: 1px solid var(--border);
    font-family: var(--mono);
    font-size: 11px;
}

.cost-label { color: var(--text-muted); }
.cost-value { color: var(--text); font-weight: 600; }

/* Signal score colors */
.signal-positive { color: var(--green) !important; }
.signal-neutral { color: var(--text-muted) !important; }
.signal-negative { color: var(--red) !important; }

/* v3.2.7: Sized to match .mode-btn standard */
.stop-btn {
    background: var(--red);
    color: #fff;
    border: none;
    padding: 3px 10px;
    border-radius: 5px;
    font-size: 9px;
    font-weight: 600;
    font-family: var(--mono);
    letter-spacing: 0.5px;
    cursor: pointer;
    animation: stopPulse 2s ease-in-out infinite;
}

@keyframes stopPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(230,57,70,0.4); }
    50% { box-shadow: 0 0 0 6px rgba(230,57,70,0); }
}

/* Mode bar */
.header-modes {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mode-buttons {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mode-btn {
    padding: 3px 10px;
    border-radius: 5px;
    font-size: 9px;
    font-weight: 600;
    font-family: var(--mono);
    letter-spacing: 0.5px;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    background: var(--bg);
    color: var(--text-muted);
}

.mode-btn.active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 0 12px var(--accent-glow);
}

.mode-btn:hover:not(.active) { background: var(--surface-hover); }

/* .adv-btn removed — DEBATE is now a regular mode button */

.mode-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── Hamburger Menu (responsive collapse) ─────────────────────── */
.hamburger-btn {
    display: none; /* hidden by default on wide screens */
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    width: 26px;
    height: 26px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 4px;
    cursor: pointer;
    padding: 5px;
}
.hamburger-btn span {
    display: block;
    width: 14px;
    height: 2px;
    background: var(--text-muted);
    border-radius: 1px;
    transition: all 0.2s;
}
.hamburger-btn:hover span { background: #fff; }
.hamburger-btn.active span:nth-child(1) { transform: rotate(45deg) translate(3px, 3px); }
.hamburger-btn.active span:nth-child(2) { opacity: 0; }
.hamburger-btn.active span:nth-child(3) { transform: rotate(-45deg) translate(3px, -3px); }

.hamburger-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 200;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px;
    min-width: 160px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.hamburger-menu.hidden { display: none; }
.hamburger-menu-section { margin-bottom: 6px; }
.hamburger-menu-section:last-child { margin-bottom: 0; }
.hamburger-menu-label {
    display: block;
    font-size: 8px;
    font-weight: 700;
    font-family: var(--mono);
    color: var(--text-dim);
    letter-spacing: 1px;
    padding: 2px 8px;
    margin-bottom: 2px;
}
.hamburger-menu-item {
    display: block;
    width: 100%;
    padding: 5px 8px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 600;
    font-family: var(--mono);
    letter-spacing: 0.5px;
    text-align: left;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s;
}
.hamburger-menu-item:hover {
    background: var(--surface-hover);
    color: #fff;
}

/* Responsive: collapse header-modes + brand into hamburger at narrow widths */
@media (max-width: 900px) {
    .hamburger-btn { display: flex; }
    .header-modes { display: none !important; }
    .header-center { display: none !important; }
}

/* ── Training Wheels Indicator ────────────────────────────────── */

.training-wheels-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    background: var(--orange-glow);
    border: 1px solid rgba(230,126,34,0.27);
    font-size: 10px;
    color: var(--orange);
    font-weight: 600;
    font-family: var(--mono);
    letter-spacing: 0.5px;
    transition: all 0.2s;
}

.training-wheels-indicator:hover {
    border-color: rgba(230,126,34,0.5);
}

.training-wheels-indicator.off {
    background: transparent;
    border-color: var(--border);
    color: var(--text-dim);
    opacity: 0.5;
}

.premise-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    background: var(--purple-glow);
    border: 1px solid rgba(155,89,182,0.27);
    font-size: 10px;
    color: var(--purple);
    font-weight: 600;
    font-family: var(--mono);
}

.lock-icon { font-size: 10px; }

/* Report button */
.report-wrapper {
    position: relative;
}

.report-btn {
    padding: 3px 10px;
    border-radius: 5px;
    font-size: 9px;
    font-weight: 600;
    font-family: var(--mono);
    cursor: pointer;
    border: 1px solid rgba(11,111,218,0.27);
    background: var(--accent-glow);
    color: var(--accent);
}

.report-btn:hover { border-color: rgba(11,111,218,0.5); }

.report-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 4px;
    min-width: 160px;
    z-index: 50;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.report-menu-title {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-dim);
    font-family: var(--mono);
    letter-spacing: 0.5px;
    padding: 4px 12px 6px;
}

.report-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 12px;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 12px;
    font-family: var(--sans);
    cursor: pointer;
    border-radius: 4px;
    text-align: left;
}

.report-option:hover { background: var(--surface-hover); }

.report-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.hidden { display: none !important; }

/* ===== PREMISE BANNER ===== */
.premise-banner {
    padding: 8px 20px;
    background: var(--purple-glow);
    border-bottom: 1px solid rgba(155,89,182,0.2);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.premise-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--purple);
    font-family: var(--mono);
    letter-spacing: 1px;
}

.premise-text {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}

/* ===== MESSAGES AREA ===== */
.messages-area {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
    /* v3.0: Tiled TRIAD watermark behind chat */
    background:
        url('/static/watermark-tile.png') repeat center center;
}

/* Session start divider */
.session-start {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    gap: 12px;
}

.session-start .line {
    flex: 1;
    height: 1px;
    background: var(--border);
}

.session-start .label {
    font-size: 10px;
    color: var(--text-dim);
    font-family: var(--mono);
    letter-spacing: 1px;
    white-space: nowrap;
}

/* Deliverable target */
/* v3.2.5: Session banners — Target (teal) + Premise Lock (purple) */
/* v3.2.13: Single compact session context bar — replaces stacked banners */
.session-context-bar {
    margin: 4px 20px 8px;
    padding: 7px 14px;
    background: #0d1117;
    border: 1px solid var(--border);
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 0;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1;
    cursor: default;
    transition: all 0.2s ease;
}
.session-context-bar:hover {
    white-space: normal;
    flex-wrap: wrap;
    gap: 4px 0;
    padding: 9px 14px;
}
.ctx-segment {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.ctx-label {
    font-size: 9px;
    font-weight: 700;
    font-family: var(--mono);
    letter-spacing: 0.8px;
    flex-shrink: 0;
}
.ctx-label.ctx-target { color: #1abc9c; }
.ctx-label.ctx-premise { color: #bb8fce; }
.ctx-label.ctx-context { color: #6a9ec9; }
.ctx-value {
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* When target is the only segment, let it use full width */
.ctx-segment:only-child .ctx-value { max-width: none; }
/* When multiple segments exist, cap each so they share space */
.ctx-segment:not(:only-child) .ctx-value { max-width: 300px; }
/* Hover: remove truncation so full content is visible */
.session-context-bar:hover .ctx-value {
    max-width: none;
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
    word-break: break-word;
}
.ctx-divider {
    display: inline-block;
    width: 1px;
    height: 12px;
    background: var(--text-dim);
    opacity: 0.4;
    margin: 0 12px;
    flex-shrink: 0;
}
/* Legacy compat — keep for any old references */
.deliverable-target { display: none; }

/* Message bubbles */
.message-row {
    display: flex;
    align-items: flex-end;
    gap: 0;
    padding: 0 20px;
}

.message-row.user { flex-direction: row-reverse; }
.message-row.first { margin-top: 16px; }
.message-row:not(.first) { margin-top: 2px; }
.message-row.last { margin-bottom: 8px; }
.message-row:not(.last) { margin-bottom: 2px; }

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    font-family: var(--mono);
}
/* v1.1: SVG speaker icons inside avatars */
.avatar svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.avatar-spacer { width: 32px; flex-shrink: 0; }

.message-content {
    max-width: 75%;
    display: flex;
    flex-direction: column;
}

.message-row.user .message-content { align-items: flex-end; }
.message-row:not(.user) .message-content { align-items: flex-start; }

/* Speaker labels */
.speaker-label {
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 4px;
    padding-left: 0;
    font-family: var(--mono);
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* v3.0: Inline icon circle next to speaker name — same look as old .avatar */
.label-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--mono);
}
.label-icon svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.model-label {
    font-size: 9px;
    color: var(--text-dim);
    font-weight: 400;
}

/* Signal score badge on messages */
.signal-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    font-weight: 600;
    font-family: var(--mono);
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: 4px;
}

.signal-badge.positive {
    background: rgba(46,204,113,0.15);
    color: var(--green);
}

.signal-badge.neutral {
    background: rgba(138,138,150,0.15);
    color: var(--text-muted);
}

.signal-badge.negative {
    background: rgba(230,57,70,0.15);
    color: var(--red);
}

.bubble {
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text);
    font-family: var(--sans);
    word-wrap: break-word;
    white-space: pre-wrap; /* v2.3.6: Preserve newlines from multi-line input */
}

.bubble.user-bubble {
    background: linear-gradient(135deg, var(--blue), var(--blue-light));
    border-radius: 18px 18px 4px 18px;
}

.bubble.user-bubble.not-first { border-radius: 18px; }

.bubble.other-bubble {
    background: var(--gray-bubble);
    border-radius: 18px 18px 18px 4px;
}

.bubble.other-bubble.not-first { border-radius: 18px; }

/* v3.2: Markdown rendering inside AI bubbles */
.bubble.other-bubble {
    white-space: normal;
    overflow-wrap: break-word;
}
.bubble.other-bubble > p:first-child { margin-top: 0; }
.bubble.other-bubble > p:last-child { margin-bottom: 0; }
.bubble.other-bubble > *:first-child { margin-top: 0; }
.bubble.other-bubble > *:last-child { margin-bottom: 0; }
.bubble.other-bubble h1,
.bubble.other-bubble h2,
.bubble.other-bubble h3,
.bubble.other-bubble h4,
.bubble.other-bubble h5,
.bubble.other-bubble h6 {
    margin: 0.6em 0 0.3em;
    line-height: 1.3;
}
.bubble.other-bubble h1 { font-size: 1.25em; }
.bubble.other-bubble h2 { font-size: 1.15em; }
.bubble.other-bubble h3 { font-size: 1.05em; }
.bubble.other-bubble ul,
.bubble.other-bubble ol {
    margin: 0.4em 0;
    padding-left: 1.5em;
}
.bubble.other-bubble blockquote {
    margin: 0.4em 0;
    padding: 0.3em 0.8em;
    border-left: 3px solid rgba(255,255,255,0.25);
    opacity: 0.9;
}
.bubble.other-bubble pre {
    margin: 0.4em 0;
    padding: 0.5em 0.7em;
    background: rgba(0,0,0,0.25);
    border-radius: 6px;
    overflow-x: auto;
    white-space: pre-wrap;
}
.bubble.other-bubble code {
    background: rgba(0,0,0,0.2);
    padding: 0.15em 0.35em;
    border-radius: 3px;
    font-size: 0.9em;
}
.bubble.other-bubble pre code {
    background: none;
    padding: 0;
}
.bubble.other-bubble hr {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.15);
    margin: 0.6em 0;
}

/* v2.3.6: URL links in message bubbles */
.msg-link {
    color: #0563C1;
    text-decoration: underline;
    text-decoration-color: rgba(5,99,193,0.4);
    transition: text-decoration-color 0.2s;
    cursor: pointer;
}
.msg-link:hover {
    text-decoration-color: #0563C1;
}
/* Links in user (blue) bubbles — white underlined */
.msg-link-user {
    color: #fff;
    text-decoration-color: rgba(255,255,255,0.5);
}
.msg-link-user:hover {
    text-decoration-color: #fff;
}

.timestamp {
    display: flex;
    flex-direction: column;
    margin-top: 3px;
    padding: 0 4px;
}
.timestamp-time {
    font-size: 10px;
    color: var(--text-dim);
}
.timestamp-date {
    font-size: 10px;
    font-family: var(--mono);
    color: #666666;
}

/* ===== v2.8: @Mention styling ===== */
.mention {
    font-weight: 700;
    /* color is set inline from participant identity color */
}

/* Reply indicator above directed response bubbles */
.reply-indicator {
    font-size: 10px;
    color: var(--text-dim);
    font-family: var(--mono);
    padding: 0 4px 2px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.reply-arrow {
    font-size: 11px;
    color: var(--text-dim);
}

/* @mention autocomplete dropdown */
.mention-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 4px;
    padding: 4px 0;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.4);
    z-index: 100;
}
.mention-dropdown.hidden {
    display: none;
}
.mention-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    transition: background 0.15s;
}
.mention-option:hover,
.mention-option.selected {
    background: var(--surface-hover);
}
.mention-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    font-family: var(--mono);
    flex-shrink: 0;
}
.mention-avatar svg {
    width: 12px;
    height: 12px;
}
.mention-name {
    font-size: 13px;
    color: var(--text);
}

/* Attachment cards in message bubbles */
.bubble-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.attachment-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(255,255,255,0.06);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-muted);
    font-family: var(--mono);
}

.attachment-card .file-icon {
    font-size: 14px;
}

.attachment-card .file-info {
    display: flex;
    flex-direction: column;
}

.attachment-card .file-name {
    color: var(--text);
    font-size: 11px;
    font-weight: 500;
}

.attachment-card .file-size {
    font-size: 9px;
    color: var(--text-dim);
}

/* Inline image thumbnails in bubbles */
.bubble-image-thumb {
    max-width: 300px;
    max-height: 200px;
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: transform 0.2s;
}

.bubble-image-thumb:hover {
    transform: scale(1.02);
}

/* Generating indicator */
.generating {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
}

.generating .dots {
    display: flex;
    gap: 4px;
}

.generating .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
    animation: dotPulse 1.4s ease-in-out infinite;
}

.generating .dot:nth-child(2) { animation-delay: 0.2s; }
.generating .dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes dotPulse {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1); }
}

.generating-label {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--mono);
}

/* APII: Processing status bar */
#processing-status-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--accent);
    font-family: var(--mono);
}

/* Bug #3: Prominent variant for Deep Search / parallel native research.
   Larger, brighter, and visually anchored so the user can't miss the fact that
   AIs are actively working through 1-2 minute native-search runs. */
#processing-status-bar.is-prominent {
    padding: 14px 20px;
    font-size: 14px;
    background: linear-gradient(180deg,
        rgba(11, 111, 218, 0.12) 0%,
        rgba(11, 111, 218, 0.06) 100%);
    border-top: 2px solid var(--accent);
    box-shadow: 0 -2px 12px rgba(11, 111, 218, 0.15);
    animation: prominentPulse 2.4s ease-in-out infinite;
}

#processing-status-bar.is-prominent .processing-spinner {
    width: 18px;
    height: 18px;
    border-width: 3px;
}

#processing-status-bar.is-prominent .processing-text {
    opacity: 1;
    font-weight: 500;
    letter-spacing: 0.2px;
}

@keyframes prominentPulse {
    0%, 100% { box-shadow: 0 -2px 12px rgba(11, 111, 218, 0.15); }
    50%      { box-shadow: 0 -2px 18px rgba(11, 111, 218, 0.30); }
}

.processing-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: processSpin 0.8s linear infinite;
}

@keyframes processSpin {
    to { transform: rotate(360deg); }
}

.processing-text {
    opacity: 0.9;
}

/* Drift alert */
.drift-alert {
    margin: 16px 20px;
    padding: 12px 16px;
    background: var(--yellow-glow);
    border: 1px solid rgba(244,196,48,0.27);
    border-left: 3px solid var(--yellow);
    border-radius: 8px;
    animation: pulse 2s ease-in-out infinite;
}

/* v1.1: Micro-signal status stamps */
.micro-signal {
    padding: 2px 16px 2px 60px;
    font-family: "Courier New", monospace;
    font-size: 12px;
    opacity: 0.6;
    line-height: 1.6;
}

.micro-signal-name {
    font-weight: bold;
    margin-right: 6px;
}

.micro-signal-text {
    font-style: italic;
    color: #888;
}


@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.drift-title {
    font-size: 14px;
    color: var(--yellow);
    font-weight: 700;
    font-family: var(--mono);
    letter-spacing: 1px;
}

.drift-content {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 6px;
    line-height: 1.5;
}

/* ===== INPUT AREA ===== */
.input-area {
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    background: var(--surface);
    flex-shrink: 0;
}

/* Attachment preview above input */
.attachment-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
    padding: 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.attachment-preview.hidden { display: none !important; }

.attachment-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--surface-hover);
    border: 1px solid var(--border);
    border-radius: 16px;
    font-size: 11px;
    font-family: var(--mono);
    color: var(--text-muted);
}

.attachment-chip .chip-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
}

.attachment-chip .chip-size {
    font-size: 9px;
    color: var(--text-dim);
}

.attachment-chip .chip-remove {
    cursor: pointer;
    color: var(--text-dim);
    font-size: 14px;
    line-height: 1;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: -12px -8px -12px 0;
    padding: 0;
    transition: color 0.2s;
}

.attachment-chip .chip-remove:hover { color: var(--red); }

/* Upload progress within attachment chip */
.attachment-chip.uploading {
    opacity: 0.85;
}
.chip-progress-track {
    width: 60px;
    height: 4px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
}
.chip-progress-fill {
    height: 100%;
    background: var(--accent, #0b6fda);
    border-radius: 2px;
    transition: width 0.2s ease;
}
.chip-progress-pct {
    font-size: 0.7rem;
    color: var(--text-dim, #8a8a96);
    min-width: 65px;
    text-align: right;
}
.chip-cancel-btn {
    background: none;
    border: none;
    color: var(--text-dim, #8a8a96);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0 4px;
    margin-left: 4px;
    line-height: 1;
}
.chip-cancel-btn:hover { color: var(--red, #e74c3c); }

/* Image thumbnail previews */
.attachment-chip .chip-thumb {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    object-fit: cover;
}

.input-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Paperclip attach button */
.attach-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--border);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
    font-size: 16px;
}

.attach-btn:hover {
    background: var(--surface-hover);
    border-color: var(--text-dim);
}

.input-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    background: var(--bg);
    border-radius: 22px;
    border: 1px solid var(--border);
    padding: 0 6px;
    position: relative; /* v2.8: anchor for @mention dropdown */
}

.input-wrapper:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

/* v2.3.6: Textarea for multi-line input — Return sends, CMD+Return for newline */
#message-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    font-size: 14px;
    padding: 10px 12px;
    font-family: var(--sans);
    resize: none;
    line-height: 20px;
    max-height: 120px; /* 6 lines × 20px */
    overflow-y: auto;
}

#message-input::placeholder { color: var(--text-dim); }

.send-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 16px var(--accent-glow);
    flex-shrink: 0;
    transition: transform 0.1s;
}

.send-btn:hover { transform: scale(1.05); }
.send-btn:active { transform: scale(0.95); }
.send-btn span { color: #fff; font-size: 16px; }

/* Mic / Voice Dictation button */
.mic-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--border);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
    font-size: 15px;
    opacity: 0.5;
}
.mic-btn:hover { opacity: 0.8; border-color: var(--text-dim); }
.mic-btn.mic-listening {
    opacity: 1;
    border-color: var(--red, #e74c3c);
    background: rgba(231, 76, 60, 0.1);
    animation: mic-pulse 1.2s ease-in-out infinite;
}
@keyframes mic-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.3); }
    50% { box-shadow: 0 0 12px 4px rgba(231, 76, 60, 0.2); }
}

/* Footer status bar — 3 columns: turns/tokens | costs/signal | AI models */
.input-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    padding: 0 4px;
}

.status-left, .status-right {
    display: flex;
    gap: 12px;
}
.status-center {
    display: flex;
    align-items: center;
    gap: 6px;
}
.cost-label-sm {
    font-size: 9px;
    color: var(--text-muted);
    font-family: var(--mono);
}
.cost-value-sm {
    font-size: 10px;
    color: var(--text);
    font-weight: 600;
    font-family: var(--mono);
}

.status-text {
    font-size: 10px;
    color: var(--text-dim);
    font-family: var(--mono);
}

/* ===== WELCOME SCREEN (v2.3.4: Two-panel layout) ===== */
.welcome-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.welcome-overlay.hidden { display: none; }

/* v3.1.1: Welcome content wrapper preserves flex layout */
#welcome-content {
    display: flex;
    width: 100%;
}
#welcome-content.hidden { display: none; }

/* v3.1.1: Admin view — full screen under header, scrollable */
#welcome-admin-view {
    display: flex;
    position: fixed;
    top: 65px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg);
    z-index: 101;
    overflow-y: auto;
}
#welcome-admin-view.hidden { display: none; }

/* v3.1.2: Profile view within welcome container */
#welcome-profile-view {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 65px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg);
    z-index: 101;
    overflow: hidden;
}
#welcome-profile-view.hidden { display: none; }

.welcome-container {
    display: flex;
    width: 820px;
    max-width: 95vw;
    max-height: 90vh;
    margin-top: 80px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.welcome-left {
    flex: 0 0 320px;
    background: #111115;
    padding: 36px 30px;
    display: flex;
    flex-direction: column;
    border-radius: 16px 0 0 16px;
}

.welcome-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 600;
    font-family: var(--mono);
    letter-spacing: 3px;
    color: var(--text-dim);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.welcome-wordmark {
    font-size: 42px;
    font-weight: 800;
    font-family: var(--mono);
    letter-spacing: 8px;
    background: linear-gradient(135deg, var(--accent), var(--green));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 4px;
}

.welcome-beta {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    font-family: var(--mono);
    color: var(--text-dim);
    letter-spacing: 2px;
    margin-bottom: 24px;
}

.welcome-description {
    flex: 1;
}

.welcome-description p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 12px;
}
.welcome-gradient-text {
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent), var(--green));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.welcome-divider {
    height: 1px;
    background: var(--border);
    margin: 16px 0;
}

.welcome-participants {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.welcome-participant {
    display: flex;
    align-items: center;
    gap: 8px;
}

.welcome-participant-name {
    font-size: 12px;
    font-weight: 600;
    font-family: var(--mono);
}

.welcome-participant-model {
    font-size: 10px;
    color: var(--text-dim);
    font-family: var(--mono);
}

.welcome-participant-info {
    display: flex;
    flex-direction: column;
    min-width: 80px;
}

.welcome-participant-domain {
    font-size: 9px;
    color: var(--teal);
    font-family: var(--mono);
    opacity: 0.8;
}

.welcome-right {
    flex: 1;
    background: #0e0e12;
    padding: 28px 30px;
    overflow-y: auto;
    border-radius: 0 16px 16px 0;
}

.welcome-right-title {
    font-size: 14px;
    font-weight: 800;
    font-family: var(--mono);
    letter-spacing: 3px;
    color: var(--orange);
    text-transform: uppercase;
    margin-bottom: 20px;
}

.welcome-right-subtitle {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    margin-top: 4px;
    background: linear-gradient(135deg, var(--accent), var(--green));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* v3.1.1: Admin button on welcome screen left panel */
.welcome-admin-btn {
    margin-top: 20px;
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--mono);
    letter-spacing: 1.5px;
    cursor: pointer;
    border: 1px solid rgba(245,158,11,0.3);
    background: var(--amber-glow);
    color: var(--amber);
    transition: all 0.2s;
    width: 100%;
}
.welcome-admin-btn:hover {
    background: rgba(245,158,11,0.25);
    border-color: rgba(245,158,11,0.5);
    box-shadow: 0 0 8px rgba(245,158,11,0.2);
}

/* Generic modal overlay (used by end modal) */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    backdrop-filter: blur(4px);
}

.modal-overlay.hidden { display: none; }

.modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 28px;
    width: 480px;
    max-width: 90vw;
}

.modal-title {
    font-size: 16px;
    font-weight: 800;
    font-family: var(--mono);
    letter-spacing: 3px;
    color: var(--text);
    margin-bottom: 20px;
    text-align: center;
    background: linear-gradient(135deg, var(--accent), var(--green));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.modal-field {
    margin-bottom: 14px;
    position: relative;
}

.modal-field label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    font-family: var(--mono);
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.required { color: var(--red); }

.modal-field input,
.modal-field select,
.modal-field textarea {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--text);
    font-size: 13px;
    font-family: var(--sans);
    outline: none;
}

.modal-field textarea {
    resize: vertical;
    min-height: 60px;
    line-height: 1.5;
}

.modal-field input:focus,
.modal-field select:focus,
.modal-field textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

.modal-field select { cursor: pointer; }
.modal-field select option { background: var(--surface); }

/* v3.3: Meeting Type + Mode chip row */
/* Mode chip styles removed — mode is now a standard dropdown */

.modal-row {
    display: flex;
    gap: 12px;
}

.modal-row .modal-field { flex: 1; }

.modal-start-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--accent), var(--blue-light));
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--mono);
    letter-spacing: 2px;
    cursor: pointer;
    margin-top: 8px;
    transition: transform 0.1s;
}

.modal-start-btn:hover:not(.disabled) { transform: scale(1.01); box-shadow: 0 0 20px var(--accent-glow); }
.modal-start-btn:active:not(.disabled) { transform: scale(0.99); }
.modal-start-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--border);
}
.modal-start-btn.glow {
    animation: startGlow 2s ease-in-out infinite;
}
@keyframes startGlow {
    0%, 100% { box-shadow: 0 0 8px var(--accent-glow); }
    50% { box-shadow: 0 0 24px var(--accent-glow), 0 0 48px rgba(11,111,218,0.1); }
}

/* Help icon tooltips (v2.3.4) */
.help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid var(--text-dim);
    font-size: 10px;
    font-weight: 700;
    color: var(--text-dim);
    cursor: pointer;
    margin-left: 4px;
    font-family: var(--mono);
    vertical-align: middle;
    transition: all 0.2s;
    line-height: 1;
}
.help-icon:hover {
    border-color: var(--accent);
    color: var(--accent);
}
/* v3.3.5: Section title + help icon grouping */
.section-title-group {
    display: inline-flex;
    align-items: center;
    gap: 0;
}
/* v3.3.5: Section header help icons — same style as .help-icon but inline with headers */
.section-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid var(--text-dim);
    font-size: 9px;
    font-weight: 700;
    color: var(--text-dim);
    cursor: help;
    margin-left: 4px;
    font-family: var(--mono);
    vertical-align: middle;
    transition: all 0.2s;
    line-height: 1;
}
.section-help-icon:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.tooltip-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    padding: 10px 14px;
    background: #111115;
    border: 1px solid #0B6FDA;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    z-index: 100;
}
.tooltip-panel.hidden { display: none; }

/* Bug #37: Wide two-column variant for long enumerations (Meeting Type list).
   Breaks out of the parent column's width so 10 items lay out in a 2-column
   grid without forcing scroll. column-fill:balance keeps both columns near
   equal height; break-inside:avoid prevents an item splitting mid-paragraph. */
.tooltip-panel.tooltip-panel-2col {
    right: auto;
    width: min(640px, 92vw);
    column-count: 2;
    column-gap: 18px;
    column-fill: balance;
    padding: 12px 16px;
}
.tooltip-panel-2col .tooltip-item {
    break-inside: avoid;
    border-bottom: none;
    padding: 6px 0 8px;
}
.tooltip-item {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.5;
    padding: 4px 0;
    border-bottom: 1px solid rgba(42,42,50,0.5);
    font-family: var(--sans);
}
.tooltip-item:last-child { border-bottom: none; }
.tooltip-item strong {
    color: var(--text);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.3px;
}

/* ===== SESSION END MODAL ===== */
.end-modal {
    width: 400px;
    text-align: center;
}

/* Custom confirm dialog — replaces native confirm() */
.confirm-dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    backdrop-filter: blur(4px);
}
.confirm-dialog {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 28px;
    width: 380px;
    max-width: 90vw;
    text-align: center;
}
.confirm-dialog-title {
    font-size: 14px;
    font-weight: 800;
    font-family: var(--mono);
    letter-spacing: 2px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, var(--accent), var(--green));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.confirm-dialog-message {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 24px;
    line-height: 1.5;
}
.confirm-dialog-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.confirm-dialog-btn {
    flex: 1;
    padding: 12px 20px;
    border: 2px solid transparent;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--mono);
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all 0.2s;
    max-width: 140px;
}
.confirm-dialog-cancel {
    background: rgba(255,255,255,0.05);
    color: var(--text-dim);
    border-color: var(--border);
}
.confirm-dialog-cancel:hover {
    background: rgba(255,255,255,0.1);
    border-color: var(--text-dim);
}
.confirm-dialog-ok {
    background: rgba(46,204,113,0.12);
    color: var(--green);
    border-color: rgba(46,204,113,0.3);
}
.confirm-dialog-ok:hover {
    background: rgba(46,204,113,0.2);
    border-color: rgba(46,204,113,0.6);
}
.confirm-dialog-reset-all {
    background: rgba(231,76,60,0.12);
    color: #e05050;
    border-color: rgba(231,76,60,0.3);
}
.confirm-dialog-reset-all:hover {
    background: rgba(231,76,60,0.2);
    border-color: rgba(231,76,60,0.6);
}

/* ── User Log Modal ───────────────────────────────────────────── */
.user-log-overlay {
    z-index: 10001;
    /* Anchor over the left column (user management area) instead of dead center */
    justify-content: flex-start;
    align-items: flex-start;
    padding: 60px 0 0 40px;
}
.user-log-modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    width: 60vw;
    max-width: 92vw;
    max-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.user-log-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--border);
}
.user-log-title {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--text);
}
.user-log-close {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}
.user-log-close:hover { color: var(--text); }
.user-log-stats {
    display: flex;
    gap: 0;
    padding: 0;
    border-bottom: 1px solid var(--border);
}
.user-log-stats-loading {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-dim);
    padding: 12px 20px;
    width: 100%;
}
.user-log-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    border-right: 1px solid rgba(255,255,255,0.04);
}
.user-log-stat:last-child { border-right: none; }
.user-log-stat-value {
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: 0.5px;
}
.user-log-stat-label {
    font-family: var(--mono);
    font-size: 8px;
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: 1px;
    margin-top: 3px;
}
.user-log-filters {
    display: flex;
    gap: 6px;
    padding: 12px 20px 8px;
    flex-wrap: wrap;
}
.user-log-filter-btn {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    letter-spacing: 0.5px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-dim);
    transition: all 0.15s;
}
.user-log-filter-btn:hover {
    border-color: var(--text-dim);
    color: var(--text);
}
.user-log-filter-btn.active {
    background: rgba(46,204,113,0.12);
    color: var(--green);
    border-color: rgba(46,204,113,0.4);
}
.user-log-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 20px 16px;
    min-height: 120px;
    max-height: 55vh;
}
.user-log-loading, .user-log-empty {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-dim);
    text-align: center;
    padding: 32px 0;
}
.user-log-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-family: var(--mono);
    font-size: 11px;
}
.user-log-row:last-child { border-bottom: none; }
.user-log-ts {
    color: var(--text-dim);
    white-space: nowrap;
    min-width: 140px;
}
.user-log-type {
    font-weight: 700;
    font-size: 9px;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 3px;
    white-space: nowrap;
}
.user-log-type.log-success {
    background: rgba(46,204,113,0.12);
    color: var(--green);
}
.user-log-type.log-failed {
    background: rgba(230,57,70,0.12);
    color: var(--red);
}
.user-log-type.log-warn {
    background: rgba(241,196,15,0.12);
    color: #f1c40f;
}
.user-log-type.log-neutral {
    background: rgba(255,255,255,0.06);
    color: var(--text-dim);
}
.user-log-detail {
    color: var(--text-muted);
    font-size: 10px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-log-ip {
    color: var(--text-dim);
    font-size: 10px;
    opacity: 0.6;
    white-space: nowrap;
}
.user-log-sessions {
    font-size: 10px;
    color: var(--amber);
    white-space: nowrap;
}
/* USER LOG button accent */
.admin-action-btn.user-log {
    background: transparent;
    color: var(--green);
    border-color: var(--border);
    letter-spacing: 1px;
}
.admin-action-btn.user-log:hover {
    color: #fff;
    border-color: var(--green);
    background: rgba(46,204,113,0.1);
}

/* ── Health Dot (user card) ──────────────────────────────────────── */
.health-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    flex-shrink: 0;
}
.health-dot.health-green { background: var(--green); box-shadow: 0 0 4px rgba(46,204,113,0.5); }
.health-dot.health-yellow { background: #f1c40f; box-shadow: 0 0 4px rgba(241,196,15,0.5); }
.health-dot.health-red { background: var(--red); box-shadow: 0 0 4px rgba(230,57,70,0.5); }
.health-dot.health-unknown { background: rgba(255,255,255,0.15); }

/* ── Modal Tabs ──────────────────────────────────────────────────── */
.user-log-tabs {
    display: flex;
    gap: 2px;
    margin-left: auto;
    margin-right: 12px;
}
.user-log-tab {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.15s;
}
.user-log-tab:hover { color: var(--text); border-color: var(--text-dim); }
.user-log-tab.active {
    background: rgba(46,204,113,0.12);
    color: var(--green);
    border-color: rgba(46,204,113,0.4);
}
.user-log-tab-content { display: flex; flex-direction: column; flex: 1; overflow: hidden; }

/* ── Health Dashboard ────────────────────────────────────────────── */
.user-health-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    max-height: 60vh;
}
.health-score-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
}
.health-score-number {
    font-family: var(--mono);
    font-size: 42px;
    font-weight: 900;
    letter-spacing: -1px;
    line-height: 1;
}
.health-score-label {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--text-dim);
    margin-top: 6px;
}
.health-score-green .health-score-number { color: var(--green); }
.health-score-yellow .health-score-number { color: #f1c40f; }
.health-score-red .health-score-number { color: var(--red); }

/* Sub-score bars */
.health-section {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.health-section:last-child { border-bottom: none; }
.health-section-title {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: var(--text-dim);
    margin-bottom: 8px;
}
.health-sub-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.health-sub-label {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-dim);
    width: 90px;
    flex-shrink: 0;
    letter-spacing: 0.5px;
}
.health-sub-bar-track {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    overflow: hidden;
}
.health-sub-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}
.bar-green { background: var(--green); }
.bar-yellow { background: #f1c40f; }
.bar-red { background: var(--red); }
.health-sub-pct {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    color: var(--text);
    width: 28px;
    text-align: right;
    flex-shrink: 0;
}

/* KV grid */
.health-kv-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3px 12px;
    font-family: var(--mono);
    font-size: 11px;
}
.health-kv-label { color: var(--text-dim); }
.health-kv-value { color: var(--text); font-weight: 600; }
.trend-up { color: var(--green); }
.trend-down { color: var(--red); }
.trend-flat { color: var(--text-dim); }

/* Feature checklist */
.health-feature-count {
    font-weight: 400;
    color: var(--text);
    margin-left: 6px;
}
.health-feature-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.health-feature {
    font-family: var(--mono);
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid var(--border);
}
.health-feature.used {
    color: var(--green);
    border-color: rgba(46,204,113,0.3);
    background: rgba(46,204,113,0.06);
}
.health-feature.unused {
    color: var(--text-dim);
    opacity: 0.5;
}

/* Rating sparkline */
.health-rating-sparkline {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.health-rating-dot {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dot-green { background: rgba(46,204,113,0.15); color: var(--green); }
.dot-yellow { background: rgba(241,196,15,0.15); color: #f1c40f; }
.dot-red { background: rgba(230,57,70,0.15); color: var(--red); }

/* End reasons */
.health-end-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.health-end-reason {
    font-family: var(--mono);
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(255,255,255,0.04);
    color: var(--text-dim);
    text-transform: lowercase;
}

.end-question {
    font-size: 16px;
    color: var(--text);
    margin-bottom: 20px;
    font-weight: 500;
}

.clarity-buttons {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    justify-content: center;
}

.clarity-btn {
    flex: 1;
    padding: 14px 20px;
    border: 2px solid transparent;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--mono);
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all 0.2s;
    max-width: 160px;
}

.clarity-yes {
    background: rgba(46,204,113,0.12);
    color: var(--green);
    border-color: rgba(46,204,113,0.3);
}

.clarity-yes:hover {
    background: rgba(46,204,113,0.2);
    border-color: rgba(46,204,113,0.6);
}

.clarity-yes.selected {
    background: rgba(46,204,113,0.25);
    border-color: var(--green);
    box-shadow: 0 0 16px rgba(46,204,113,0.3);
}

.clarity-no {
    background: rgba(230,57,70,0.12);
    color: var(--red);
    border-color: rgba(230,57,70,0.3);
}

.clarity-no:hover {
    background: rgba(230,57,70,0.2);
    border-color: rgba(230,57,70,0.6);
}

.clarity-no.selected {
    background: rgba(230,57,70,0.25);
    border-color: var(--red);
    box-shadow: 0 0 16px rgba(230,57,70,0.3);
}

.rating-section {
    margin-bottom: 20px;
}

.rating-label {
    font-size: 12px;
    color: var(--text-muted);
    font-family: var(--mono);
    margin-bottom: 10px;
}

.star-rating {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.star {
    font-size: 28px;
    cursor: pointer;
    color: var(--text-dim);
    transition: all 0.15s;
}

.star:hover { transform: scale(1.15); }

.star.active {
    color: var(--yellow);
    text-shadow: 0 0 8px rgba(244,196,48,0.4);
}

.end-submit-btn {
    opacity: 1;
    transition: opacity 0.2s;
}

.end-submit-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.end-cancel-btn {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 10px 0;
    background: transparent;
    border: 1px solid var(--text-dim);
    color: var(--text-dim);
    font-family: var(--font);
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}

.end-cancel-btn:hover {
    border-color: var(--text-main);
    color: var(--text-main);
}

.end-cancel-btn.hidden {
    display: none;
}

/* ===== SYSTEM MESSAGE ===== */
.system-message {
    margin: 8px 20px;
    padding: 8px 14px;
    background: rgba(138,138,150,0.08);
    border-left: 2px solid var(--text-dim);
    border-radius: 0 6px 6px 0;
    font-size: 12px;
    color: var(--text-dim);
    font-family: var(--mono);
}

/* ===== v2.3.5: QUESTION PAUSE PROMPT ===== */
.question-pause {
    margin: 16px 20px;
    padding: 14px 18px;
    background: var(--cyan-glow);
    border: 1px solid rgba(0,188,212,0.27);
    border-left: 3px solid var(--cyan);
    border-radius: 8px;
}

.question-pause-header {
    font-size: 12px;
    font-weight: 700;
    color: var(--cyan);
    font-family: var(--mono);
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.question-pause-content {
    font-size: 13px;
    color: var(--text);
    line-height: 1.5;
    margin-bottom: 10px;
}

/* Markdown elements inside question-pause */
.question-pause-content h1,
.question-pause-content h2,
.question-pause-content h3,
.question-pause-content h4,
.question-pause-content h5,
.question-pause-content h6 {
    color: var(--cyan);
    margin: 10px 0 6px 0;
    font-size: 14px;
    font-weight: 700;
}
.question-pause-content h1 { font-size: 16px; }
.question-pause-content h2 { font-size: 15px; }

.question-pause-content p {
    margin: 4px 0;
}

.question-pause-content ul,
.question-pause-content ol {
    margin: 6px 0;
    padding-left: 20px;
}

.question-pause-content li {
    margin: 3px 0;
}

.question-pause-content strong {
    color: #fff;
}

.question-pause-content hr {
    border: none;
    border-top: 1px solid rgba(0,188,212,0.25);
    margin: 10px 0;
}

.question-pause-content code {
    background: rgba(0,0,0,0.3);
    padding: 1px 5px;
    border-radius: 3px;
    font-family: var(--mono);
    font-size: 12px;
}

.question-pause-label {
    font-size: 10px;
    color: var(--cyan);
    font-family: var(--mono);
    opacity: 0.7;
    animation: pulse 2s ease-in-out infinite;
}

/* ===== v3.1.6: ROUND LIMIT WARNING ===== */
.turn-limit-warning {
    margin: 16px 20px;
    padding: 14px 18px;
    background: var(--yellow-glow);
    border: 1px solid rgba(244,196,48,0.27);
    border-left: 3px solid var(--yellow);
    border-radius: 8px;
}

.turn-limit-warning-header {
    font-size: 12px;
    font-weight: 700;
    color: var(--yellow);
    font-family: var(--mono);
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.turn-limit-warning-content {
    font-size: 13px;
    color: var(--text);
    line-height: 1.5;
    margin-bottom: 12px;
}

.turn-limit-warning-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.turn-limit-yes,
.turn-limit-confirm {
    padding: 8px 18px;
    border: none;
    border-radius: 6px;
    background: var(--yellow);
    color: #000;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--mono);
    letter-spacing: 1px;
    cursor: pointer;
    transition: filter 0.15s;
}

.turn-limit-yes:hover,
.turn-limit-confirm:hover {
    filter: brightness(1.1);
}

.turn-limit-no,
.turn-limit-cancel {
    padding: 8px 18px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 700;
    font-family: var(--mono);
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.15s;
}

.turn-limit-no:hover,
.turn-limit-cancel:hover {
    border-color: var(--yellow);
    color: var(--text);
}

.turn-limit-extend-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.turn-limit-extend-label {
    font-size: 12px;
    color: var(--yellow);
    font-family: var(--mono);
    font-weight: 600;
}

.turn-limit-extend-input {
    width: 80px;
    padding: 6px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-family: var(--mono);
    font-size: 13px;
    text-align: center;
}

.turn-limit-extend-input:focus {
    border-color: var(--yellow);
    outline: none;
    box-shadow: 0 0 0 2px var(--yellow-glow);
}

/* ===== v3.2.5: Cost Cap Warnings ===== */
.cost-cap-warning {
    margin: 16px 20px;
    padding: 14px 18px;
    background: rgba(230,57,70,0.08);
    border: 1px solid rgba(230,57,70,0.27);
    border-left: 3px solid var(--red);
    border-radius: 8px;
}
.cost-cap-warning-header {
    font-size: 12px;
    font-weight: 700;
    color: var(--red);
    font-family: var(--mono);
    letter-spacing: 1px;
    margin-bottom: 8px;
}
.cost-cap-warning-content {
    font-size: 13px;
    color: var(--text);
    line-height: 1.5;
    margin-bottom: 12px;
}
.cost-cap-warning-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
.cost-cap-export,
.session-terminated-export {
    padding: 8px 18px;
    border: none;
    border-radius: 6px;
    background: var(--amber);
    color: #000;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--mono);
    letter-spacing: 1px;
    cursor: pointer;
    transition: filter 0.15s;
}
.cost-cap-export:hover,
.session-terminated-export:hover {
    filter: brightness(1.1);
}
.cost-cap-dismiss {
    padding: 8px 18px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 700;
    font-family: var(--mono);
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.15s;
}
.cost-cap-dismiss:hover {
    border-color: var(--red);
    color: var(--text);
}
.cost-cap-increase {
    padding: 8px 18px;
    border: 1px solid var(--amber);
    border-radius: 6px;
    background: transparent;
    color: var(--amber);
    font-size: 12px;
    font-weight: 700;
    font-family: var(--mono);
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.15s;
}
.cost-cap-increase:hover {
    background: var(--amber);
    color: #000;
}
.cost-cap-increase-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.cost-cap-inc-btn {
    padding: 8px 16px;
    border: 1px solid var(--amber);
    border-radius: 6px;
    background: transparent;
    color: var(--amber);
    font-size: 13px;
    font-weight: 700;
    font-family: var(--mono);
    cursor: pointer;
    transition: all 0.15s;
}
.cost-cap-inc-btn:hover {
    background: var(--amber);
    color: #000;
}

/* v3.2.5: Session termination blocks */
.session-terminated {
    margin: 16px 20px;
    padding: 14px 18px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.session-terminated-cost {
    border-left: 3px solid var(--red);
}
.session-terminated-turn {
    border-left: 3px solid var(--yellow);
}
.session-terminated-header {
    font-size: 12px;
    font-weight: 700;
    font-family: var(--mono);
    letter-spacing: 1px;
    margin-bottom: 8px;
}
.session-terminated-cost .session-terminated-header { color: var(--red); }
.session-terminated-turn .session-terminated-header { color: var(--yellow); }
.session-terminated-content {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 12px;
}
.session-terminated-actions {
    display: flex;
    gap: 8px;
}

/* ===== v2.3.5: START NEW SESSION BUTTON — v3.2.7: sized to match .mode-btn standard ===== */
.new-session-btn {
    padding: 3px 10px;
    border-radius: 5px;
    font-size: 9px;
    font-weight: 600;
    font-family: var(--mono);
    cursor: pointer;
    border: 1px solid rgba(46,204,113,0.27);
    background: var(--green-dim);
    color: var(--green);
    letter-spacing: 0.5px;
    transition: all 0.2s;
}

.new-session-btn:hover {
    border-color: rgba(46,204,113,0.5);
}

/* ===== v2.3.5: SAVE OUTPUT MODAL ===== */
.save-output-modal {
    width: 440px;
    text-align: center;
}

.save-output-question {
    font-size: 15px;
    color: var(--text);
    margin-bottom: 16px;
    font-weight: 500;
}

.save-output-info {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 20px;
    font-family: var(--mono);
    padding: 8px 12px;
    background: var(--bg);
    border-radius: 6px;
    border: 1px solid var(--border);
    text-align: left;
}

.save-output-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.save-output-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--mono);
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all 0.2s;
}

.save-generate {
    background: rgba(46,204,113,0.15);
    color: var(--green);
    border: 1px solid rgba(46,204,113,0.3);
}
.save-generate:hover { background: rgba(46,204,113,0.25); border-color: rgba(46,204,113,0.6); }

.save-skip {
    background: rgba(230,126,34,0.15);
    color: var(--orange);
    border: 1px solid rgba(230,126,34,0.3);
}
.save-skip:hover { background: rgba(230,126,34,0.25); border-color: rgba(230,126,34,0.6); }

.save-cancel {
    background: transparent;
    color: var(--text-dim);
    border: 1px solid var(--border);
}
.save-cancel:hover { background: var(--surface-hover); }

/* ===== v2.9: SCRATCHPAD ===== */

/* Toggle button in mode bar */
.scratchpad-toggle-btn {
    background: rgba(0,188,212,0.12);
    color: var(--cyan);
    border: 1px solid rgba(0,188,212,0.25);
    font-size: 9px;
    font-weight: 700;
    font-family: var(--mono);
    padding: 3px 10px;
    border-radius: 5px;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: all 0.2s;
}
.scratchpad-toggle-btn:hover {
    border-color: rgba(0,188,212,0.5);
    background: rgba(0,188,212,0.2);
}
.scratchpad-toggle-btn.active {
    background: rgba(0,188,212,0.25);
    border-color: rgba(0,188,212,0.6);
    box-shadow: 0 0 8px rgba(0,188,212,0.2);
}

/* Split-pane container */
.split-pane {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}
.messages-pane {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

/* Pane divider (draggable) */
.pane-divider {
    width: 4px;
    background: var(--border);
    cursor: col-resize;
    flex-shrink: 0;
    transition: background 0.2s;
}
.pane-divider:hover,
.pane-divider.dragging {
    background: var(--cyan);
}

/* v3.2.6: Horizontal divider between Scratchpad and Back Channel (admin-only) */
/* v3.5: Old bc-divider removed — Back Channel uses standard .pane-divider now */

/* Scratchpad pane */
.scratchpad-pane {
    width: 420px;
    min-width: 280px;
    max-width: 60%;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-left: 1px solid var(--border);
    overflow: hidden;
}

.scratchpad-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    flex-shrink: 0;
}

.scratchpad-title {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--cyan);
    letter-spacing: 1.5px;
}

.scratchpad-version {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-dim);
    padding: 1px 6px;
    background: var(--surface-hover);
    border-radius: 4px;
}

.scratchpad-wc {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-dim);
    margin-left: auto;
}

.scratchpad-history-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    letter-spacing: 0.5px;
}
.scratchpad-history-btn:hover {
    border-color: var(--text-muted);
    color: var(--text-muted);
}

.scratchpad-close-btn {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 14px;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: -12px -12px -12px 0;
    padding: 0;
    line-height: 1;
}
.scratchpad-close-btn:hover { color: var(--red); }

/* v1.1.2: Export button */
.scratchpad-export-btn {
    background: rgba(0,150,136,0.12);
    border: 1px solid rgba(0,150,136,0.25);
    color: #009688;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    letter-spacing: 0.5px;
}
.scratchpad-export-btn:hover {
    background: rgba(0,150,136,0.2);
    border-color: rgba(0,150,136,0.4);
}

/* Clear button — red-tinted destructive action */
.scratchpad-clear-btn {
    background: rgba(231,76,60,0.10);
    border: 1px solid rgba(231,76,60,0.25);
    color: #e74c3c;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    letter-spacing: 0.5px;
}
.scratchpad-clear-btn:hover {
    background: rgba(231,76,60,0.20);
    border-color: rgba(231,76,60,0.4);
}

/* Editor area */
.scratchpad-editor-area {
    flex: 1;
    overflow: hidden;
    display: flex;
}

.scratchpad-editor {
    flex: 1;
    background: var(--bg);
    color: var(--text);
    border: none;
    padding: 12px 14px;
    font-family: var(--system-font);
    font-size: 13px;
    line-height: 1.3;
    outline: none;
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.scratchpad-editor p,
.scratchpad-editor div { margin: 0; padding: 0; }
/* Placeholder for contenteditable */
.scratchpad-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--text-dim);
    font-style: italic;
    pointer-events: none;
}

/* v1.1.2: Rich text rendering inside Scratchpad editor */
.scratchpad-editor h1 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    margin: 12px 0 6px 0;
    line-height: 1.3;
}
.scratchpad-editor h2 {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    margin: 10px 0 5px 0;
    line-height: 1.3;
}
.scratchpad-editor h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin: 8px 0 4px 0;
    line-height: 1.4;
}
.scratchpad-editor blockquote {
    border-left: 3px solid rgba(0,150,136,0.4);
    margin: 6px 0;
    padding: 4px 0 4px 12px;
    color: var(--text-muted);
    font-style: italic;
}
.scratchpad-editor ol,
.scratchpad-editor ul {
    margin: 4px 0;
    padding-left: 24px;
}
.scratchpad-editor li {
    margin: 2px 0;
}
.scratchpad-editor code {
    font-family: var(--mono);
    font-size: 12px;
    background: rgba(255,255,255,0.06);
    padding: 1px 4px;
    border-radius: 3px;
    color: #c792ea;
}
.scratchpad-editor hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 10px 0;
}
.scratchpad-editor .sp-blank {
    min-height: 1em;
}

/* v1.2.1: Tables */
.scratchpad-editor .sp-table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0;
    font-size: 12px;
    line-height: 1.4;
}
.scratchpad-editor .sp-table th {
    text-align: left;
    font-weight: 600;
    color: var(--text);
    padding: 5px 8px;
    border-bottom: 2px solid var(--border-bright, var(--border));
    background: var(--surface-hover, rgba(255,255,255,0.03));
}
.scratchpad-editor .sp-table td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted, var(--text));
    vertical-align: top;
}
.scratchpad-editor .sp-table tr:last-child td {
    border-bottom: none;
}
.scratchpad-editor .sp-table tr:hover td {
    background: rgba(255,255,255,0.02);
}

/* v1.2.1: Fenced code blocks */
.scratchpad-editor .sp-codeblock {
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 10px 12px;
    margin: 8px 0;
    overflow-x: auto;
    white-space: pre;
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.5;
    color: #d4d4d4;
}
.scratchpad-editor .sp-codeblock code {
    background: none;
    padding: 0;
    border-radius: 0;
    color: inherit;
    font-size: inherit;
}

/* v1.2.1: Task lists */
.scratchpad-editor .sp-tasklist {
    list-style: none;
    padding-left: 4px;
}
.scratchpad-editor .sp-task {
    margin: 2px 0;
}
.scratchpad-editor .sp-task input[type="checkbox"] {
    margin-right: 6px;
    accent-color: var(--accent, #009688);
    vertical-align: middle;
}

/* v1.2.1: Strikethrough */
.scratchpad-editor del {
    text-decoration: line-through;
    color: var(--text-dim);
    opacity: 0.7;
}

/* v1.2.1: Links */
.scratchpad-editor a {
    color: var(--accent, #009688);
    text-decoration: underline;
    text-decoration-style: dotted;
    cursor: pointer;
}
.scratchpad-editor a:hover {
    text-decoration-style: solid;
    opacity: 0.85;
}

/* v1.5: Scratchpad Citations section */
.scratchpad-citations-divider {
    margin: 16px 0 8px 0;
    padding: 6px 0 4px 0;
    border-top: 1px solid var(--border-bright, var(--border));
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.scratchpad-citations-section {
    font-size: 12px;
    color: var(--text-muted, var(--text));
    line-height: 1.5;
}
.scratchpad-citations-section a {
    color: var(--accent, #009688);
    text-decoration: underline;
    text-decoration-style: dotted;
}
.scratchpad-citations-section a:hover {
    text-decoration-style: solid;
}

/* Version history overlay */
.scratchpad-history {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg);
    z-index: 10;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.scratchpad-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--cyan);
    letter-spacing: 1px;
}
.scratchpad-history-header button {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 14px;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: -12px -12px -12px 0;
    padding: 0;
}
.scratchpad-history-header button:hover { color: var(--red); }

.scratchpad-history-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.scratchpad-history-entry {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}
.scratchpad-history-entry:last-child { border-bottom: none; }

.scratchpad-history-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 4px;
}
.scratchpad-history-v {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    color: var(--cyan);
}
.scratchpad-history-author {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
}
.scratchpad-history-time {
    font-size: 10px;
    color: var(--text-dim);
    margin-left: auto;
}
.scratchpad-history-type {
    font-family: var(--mono);
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--surface-hover);
    color: var(--text-dim);
    text-transform: uppercase;
}
.scratchpad-history-diff {
    font-size: 11px;
    color: var(--text-muted);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 60px;
    overflow: hidden;
}

/* ===== Body Language v1.0: BACK-CHANNEL VISIBILITY PANEL ===== */

/* v3.5: Back Channel — independent side panel (admin-only) */
.back-channel-panel {
    width: 320px;
    min-width: 240px;
    border-left: 2px solid var(--amber);
    background: #0a0a0c;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
}

.back-channel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border-bottom: 1px solid rgba(245, 158, 11, 0.3);
    flex-shrink: 0;
}

.back-channel-title {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--amber);
    letter-spacing: 1px;
}

.back-channel-status-strip {
    display: flex;
    gap: 6px;
    margin-left: auto;
    margin-right: 8px;
    align-items: center;
}

.bc-dot-label {
    font-family: "Courier New", monospace;
    font-size: 9px;
    font-weight: bold;
    margin-right: 2px;
    letter-spacing: 0;
}

.bc-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-dim);
    transition: background 0.3s, box-shadow 0.3s;
}

.bc-status-dot.listening { background: var(--text-dim); opacity: 0.5; }
.bc-status-dot.preparing { background: var(--amber); animation: bc-pulse 1.5s ease-in-out infinite; }
.bc-status-dot.ready { background: #2ecc71; box-shadow: 0 0 6px rgba(46, 204, 113, 0.5); }
.bc-status-dot.yielding { background: #5b21b6; opacity: 0.5; }
.bc-status-dot.challenging { background: var(--red); animation: bc-pulse-fast 0.6s ease-in-out infinite; }

@keyframes bc-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

@keyframes bc-pulse-fast {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; box-shadow: 0 0 8px rgba(230, 57, 70, 0.6); }
}

.back-channel-clear-btn {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: var(--amber);
    background: none;
    border: 1px solid var(--amber);
    border-radius: 4px;
    padding: 2px 8px;
    cursor: pointer;
    letter-spacing: 0.5px;
}
.back-channel-clear-btn:hover {
    background: var(--amber-glow);
}
.back-channel-close-btn {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 14px;
    cursor: pointer;
    min-width: 28px;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: 4px;
}
.back-channel-close-btn:hover { color: var(--amber); }

/* v3.5: Back Channel toolbar button — orange themed */
.backchannel-btn {
    background: rgba(245, 158, 11, 0.12) !important;
    color: var(--amber) !important;
    border: 1px solid rgba(245, 158, 11, 0.25) !important;
}
.backchannel-btn:hover {
    border-color: rgba(245, 158, 11, 0.5) !important;
    background: rgba(245, 158, 11, 0.2) !important;
}
.backchannel-btn.active {
    background: rgba(245, 158, 11, 0.25) !important;
    border-color: rgba(245, 158, 11, 0.6) !important;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.2);
}

.back-channel-log {
    flex: 1;
    overflow-y: auto;
    padding: 6px 10px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.5;
    min-height: 80px;
}

/* Static non-draggable divider (log/footer boundary) */
.bc-static-divider {
    height: 2px;
    background: var(--amber);
    flex-shrink: 0;
    opacity: 0.4;
}
/* Horizontal resize divider inside back-channel panel */
.bc-h-divider {
    height: 4px;
    background: var(--border);
    cursor: row-resize;
    flex-shrink: 0;
    transition: background 0.2s;
}
.bc-h-divider:hover,
.bc-h-divider.dragging {
    background: var(--amber);
}

/* v3.4: SESSION INJECTION — admin prompt viewer inside Back Channel */
.bc-injection-section {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.bc-injection-title {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--amber);
    padding: 6px 10px 4px;
    flex-shrink: 0;
}
.bc-injection-content {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}
.bc-injection-empty {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-dim);
    padding: 10px;
    text-align: center;
}
.bc-injection-ai-block {
    border-top: 1px solid var(--border);
}
.bc-injection-ai-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    cursor: pointer;
    transition: background 0.15s;
}
.bc-injection-ai-header:hover {
    background: rgba(255,255,255,0.03);
}
.bc-injection-avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    color: #000;
    flex-shrink: 0;
}
.bc-injection-ai-name {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.bc-injection-char-count {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--text-dim);
    margin-left: auto;
}
.bc-injection-chevron {
    font-size: 10px;
    color: var(--text-dim);
    transition: transform 0.2s;
    flex-shrink: 0;
}
.bc-injection-chevron.open {
    transform: rotate(90deg);
}
.bc-injection-ai-content {
    overflow: hidden;
    transition: max-height 0.25s ease;
    max-height: 2000px;
}
.bc-injection-ai-content.collapsed {
    max-height: 0;
}
.bc-injection-prompt {
    font-family: var(--mono);
    font-size: 9px;
    line-height: 1.5;
    color: var(--text-muted);
    padding: 6px 10px 10px;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    background: rgba(0,0,0,0.2);
    border-radius: 0 0 4px 4px;
    max-height: 400px;
    overflow-y: auto;
}

.bc-entry {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 1px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bc-timestamp { color: var(--text-dim); font-size: 11px; }
.bc-ai-name { font-weight: 600; }
.bc-signal-type { color: var(--text-muted); }
.bc-payload { color: var(--text); flex: 1; overflow: hidden; text-overflow: ellipsis; }
.bc-expand-btn {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 12px;
    padding: 0 2px;
    flex-shrink: 0;
}
.bc-expand-btn:hover { color: var(--amber); }
.bc-detail {
    display: none;
    padding: 4px 0 4px 24px;
    font-size: 11px;
    color: var(--text-muted);
    white-space: normal;
    word-break: break-word;
}
.bc-detail.open { display: block; }

/* v5.1: Structured back-channel detail drawer */
.bcd-drawer { padding: 4px 0; }
.bcd-grid {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 2px 8px;
    margin-bottom: 4px;
}
.bcd-label {
    color: var(--text-dim);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.bcd-value {
    color: var(--text);
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.bcd-conf-bar {
    display: inline-block;
    width: 60px;
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: hidden;
}
.bcd-conf-fill {
    display: block;
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}
.bcd-conf-high { background: var(--green, #2ecc71); }
.bcd-conf-mid { background: var(--amber, #f59e0b); }
.bcd-conf-low { background: var(--red, #ef4444); }
.bcd-rationale {
    margin: 4px 0;
    padding: 4px 6px;
    background: rgba(245, 158, 11, 0.06);
    border-left: 2px solid rgba(245, 158, 11, 0.3);
    border-radius: 2px;
}
.bcd-rationale-text {
    color: var(--text);
    font-size: 11px;
    font-style: italic;
    display: block;
    margin-top: 2px;
}
.bcd-raw { margin-top: 4px; }
.bcd-raw summary {
    color: var(--text-dim);
    font-size: 10px;
    cursor: pointer;
    user-select: none;
}
.bcd-raw summary:hover { color: var(--amber); }
.bcd-raw pre {
    margin: 2px 0 0 0;
    padding: 4px;
    background: rgba(0,0,0,0.3);
    border-radius: 2px;
    font-size: 10px;
    color: var(--text-muted);
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 200px;
    overflow-y: auto;
}
.bc-key-footer {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 4px 8px;
    border-top: 1px solid rgba(245, 158, 11, 0.2);
    background: #050506;
    flex-shrink: 0;
}

.bc-key-item {
    font-family: "Courier New", monospace;
    font-size: 8px;
    color: #888;
    display: flex;
    align-items: center;
    gap: 3px;
    letter-spacing: 0.5px;
}

.bc-key-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.bc-key-dot.listening {
    background: #333;
}

.bc-key-dot.preparing {
    background: #f59e0b;
}

.bc-key-dot.ready {
    background: #22c55e;
}

.bc-key-dot.yielding {
    background: #7c3aed;
    opacity: 0.5;
}

.bc-key-dot.challenging {
    background: #ef4444;
}


/* v3.5: Removed .bc-active — back channel is no longer nested in scratchpad */

/* Scratchpad push indicator in messages */
.scratchpad-push-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    color: var(--cyan);
    background: rgba(0,188,212,0.1);
    border: 1px solid rgba(0,188,212,0.2);
    border-radius: 4px;
    padding: 1px 6px;
    margin-top: 4px;
}

/* Make scratchpad-pane position relative for history overlay */
.scratchpad-pane { position: relative; }

/* ===== v1.1: SCRATCHPAD FORMATTING TOOLBAR ===== */

.scratchpad-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 8px;
    background: #1A1A1E;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.sp-tb-btn {
    background: none;
    border: 1px solid transparent;
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: 4px;
    cursor: pointer;
    min-width: 26px;
    text-align: center;
    transition: all 0.15s;
    line-height: 1.2;
}
.sp-tb-btn:hover {
    background: var(--surface-hover);
    color: var(--text);
    border-color: var(--border);
}
.sp-tb-btn.active {
    background: rgba(0,150,136,0.2);
    color: #009688;
    border-color: rgba(0,150,136,0.4);
}

.sp-tb-sep {
    width: 1px;
    height: 18px;
    background: var(--border);
    margin: 0 4px;
    flex-shrink: 0;
}

/* ===== v1.1: SCRATCHPAD EDIT BADGE IN CONVERSATION ===== */

.scratchpad-edit-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    color: #009688;
    background: rgba(0,150,136,0.1);
    border: 1px solid rgba(0,150,136,0.2);
    border-radius: 4px;
    padding: 2px 6px;
    margin-top: 4px;
    cursor: pointer;
}
.scratchpad-edit-badge:hover {
    background: rgba(0,150,136,0.15);
    border-color: rgba(0,150,136,0.3);
}
.scratchpad-edit-badge .edit-icon {
    font-size: 10px;
}

/* Expandable edit details */
.scratchpad-edit-details {
    display: none;
    margin-top: 4px;
    padding: 6px 8px;
    background: rgba(0,150,136,0.05);
    border: 1px solid rgba(0,150,136,0.15);
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-muted);
}
.scratchpad-edit-details.expanded {
    display: block;
}
.scratchpad-edit-details .edit-op {
    color: #009688;
    font-weight: 600;
    text-transform: uppercase;
}
.scratchpad-edit-details .edit-fail {
    color: var(--red);
}

/* ===== v1.1: SCRATCHPAD EDIT HIGHLIGHT ANIMATION ===== */

@keyframes scratchpad-edit-flash {
    0% { background-color: rgba(0,150,136,0.3); }
    100% { background-color: transparent; }
}
.scratchpad-edit-highlight {
    animation: scratchpad-edit-flash 0.8s ease-out;
}

/* ===== v1.1: SCRATCHPAD EDIT CONFIRMATION MODAL ===== */

.scratchpad-edit-confirm {
    max-width: 520px;
    width: 90%;
}
.sp-edit-confirm-summary {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 12px;
    line-height: 1.5;
}
.sp-edit-confirm-diff {
    max-height: 300px;
    overflow-y: auto;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    font-family: var(--mono);
    font-size: 11px;
    line-height: 1.5;
    margin-bottom: 16px;
    white-space: pre-wrap;
    word-break: break-word;
}
.sp-edit-confirm-diff .diff-add {
    color: #2ecc71;
    background: rgba(46,204,113,0.08);
}
.sp-edit-confirm-diff .diff-remove {
    color: var(--red);
    background: rgba(220,53,69,0.08);
}
.sp-edit-confirm-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.sp-edit-btn {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    padding: 6px 18px;
    border-radius: 6px;
    cursor: pointer;
    letter-spacing: 0.5px;
    border: 1px solid;
    transition: all 0.2s;
}
.sp-edit-allow {
    background: rgba(0,150,136,0.15);
    color: #009688;
    border-color: rgba(0,150,136,0.3);
}
.sp-edit-allow:hover {
    background: rgba(0,150,136,0.25);
    border-color: rgba(0,150,136,0.5);
}
.sp-edit-reject {
    background: rgba(220,53,69,0.1);
    color: var(--red);
    border-color: rgba(220,53,69,0.2);
}
.sp-edit-reject:hover {
    background: rgba(220,53,69,0.2);
    border-color: rgba(220,53,69,0.4);
}

/* ===== v3.0.2: SESSION METRICS PANEL ===== */

.metrics-btn {
    background: rgba(11,111,218,0.12);
    color: var(--accent);
    border: 1px solid rgba(11,111,218,0.25);
    font-size: 10px;
    font-weight: 700;
    font-family: var(--mono);
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: all 0.2s;
}
.metrics-btn:hover {
    background: rgba(11,111,218,0.25);
    border-color: rgba(11,111,218,0.5);
    box-shadow: 0 0 8px rgba(11,111,218,0.2);
}

.welcome-metrics-btn {
    margin-top: 16px;
    padding: 6px 16px;
    font-size: 11px;
}

.metrics-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 380px;
    max-width: 90vw;
    background: #111115;
    border-left: 2px solid var(--accent);
    z-index: 95;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    box-shadow: -4px 0 24px rgba(0,0,0,0.5);
}
.metrics-panel.visible {
    transform: translateX(0);
}
.metrics-panel.hidden {
    display: flex !important;
}

.metrics-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    flex-shrink: 0;
}
.metrics-title {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 1px;
}
.metrics-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: -6px -4px;
    padding: 0;
    border-radius: 4px;
    transition: all 0.15s;
}
.metrics-close:hover {
    color: var(--text);
    background: var(--surface-hover);
}

.metrics-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.metrics-loading {
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: 11px;
    text-align: center;
    padding: 40px 0;
}

.metric-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 10px;
}
.metric-label {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    color: var(--text-dim);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.metric-value {
    font-family: var(--mono);
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}
.metric-sub {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Clarity split bar */
.clarity-bar {
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 8px;
    background: var(--border);
}
.clarity-bar-green {
    background: #2ecc71;
    transition: width 0.3s ease;
}
.clarity-bar-red {
    background: #e63946;
    transition: width 0.3s ease;
}

/* Star display */
.metric-stars {
    font-size: 14px;
    letter-spacing: 1px;
}
.metric-stars .star-filled {
    color: #f4c430;
}
.metric-stars .star-empty {
    color: var(--border);
}

/* Trend arrow */
.trend-down { color: #2ecc71; }
.trend-up { color: #e63946; }
.trend-flat { color: var(--text-muted); }

/* Mode breakdown bars */
.mode-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.mode-bar-label {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    color: var(--text-muted);
    width: 90px;
    flex-shrink: 0;
}
.mode-bar-track {
    flex: 1;
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
}
.mode-bar-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 4px;
    transition: width 0.3s ease;
}
.mode-bar-count {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--text-dim);
    width: 24px;
    text-align: right;
    flex-shrink: 0;
}

/* Streak */
.streak-active {
    color: #f4c430;
}
.streak-icon {
    font-size: 14px;
}

/* Metric pairs (side-by-side values) */
.metric-pair {
    display: flex;
    gap: 16px;
    align-items: baseline;
}
.metric-pair-item {
    flex: 1;
}
.metric-pair-label {
    font-family: var(--mono);
    font-size: 8px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.metric-pair-value {
    font-family: var(--mono);
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}

/* ── User Icon Button & Dropdown ──────────────────────────────── */

/* v3.1.2: User Icon Button — blue circle with human silhouette */
.user-icon-wrapper {
    position: relative;
}

.user-icon-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(11,111,218,0.2);
    border: 2px solid rgba(11,111,218,0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    padding: 0;
}
.user-icon-btn:hover {
    background: rgba(11,111,218,0.35);
    border-color: rgba(11,111,218,0.7);
    box-shadow: 0 0 10px rgba(11,111,218,0.3);
}
.user-icon-btn svg {
    width: 14px;
    height: 14px;
}

/* v3.1.2: User Icon Dropdown */
.user-dropdown {
    position: absolute;
    top: 42px;
    right: 0;
    background: #161619;
    border: 1px solid rgba(11,111,218,0.3);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    z-index: 200;
    min-width: 160px;
    overflow: hidden;
}
.user-dropdown.hidden { display: none; }

.user-dropdown-item {
    display: block;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    color: var(--text);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}
.user-dropdown-item:hover {
    background: rgba(11,111,218,0.15);
}
.user-dropdown-item + .user-dropdown-item {
    border-top: 1px solid var(--border);
}
.user-dropdown-logout {
    color: var(--red);
}
.user-dropdown-logout:hover {
    background: rgba(230,57,70,0.12);
}

/* ── Welcome Screen User Icon ─────────────────────────────────── */

.welcome-user-icon-wrapper {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 110;
}
.welcome-right-controls .welcome-user-icon-wrapper {
    position: relative;
    top: auto;
    right: auto;
    z-index: auto;
}

/* Legacy .profile-btn kept for backward compat but hidden */
.profile-btn { display: none; }

/* v3.2.7: Sized to match .mode-btn standard */
.admin-btn {
    background: var(--amber-glow);
    color: var(--amber);
    border: 1px solid rgba(245,158,11,0.25);
    font-size: 9px;
    font-weight: 600;
    font-family: var(--mono);
    padding: 3px 10px;
    border-radius: 5px;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: all 0.2s;
}
.admin-btn:hover {
    background: rgba(245,158,11,0.25);
    border-color: rgba(245,158,11,0.5);
    box-shadow: 0 0 8px rgba(245,158,11,0.2);
}

/* ===== v3.1: PROFILE PANEL (slide-out) ===== */

.profile-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #111115;
    z-index: 96;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    box-shadow: -4px 0 24px rgba(0,0,0,0.5);
}
.profile-panel.visible {
    transform: translateX(0);
}

/* v3.2.20: Session-active warning banner */
.profile-session-warning {
    background: rgba(180, 30, 30, 0.25);
    border-bottom: 1px solid rgba(220, 50, 50, 0.4);
    color: #ef4444;
    text-align: center;
    padding: 6px 16px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

/* Legacy .profile-header — replaced by .profile-panel-header */
.profile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    flex-shrink: 0;
}

/* Profile panel header — spans full width, TRIAD gradient title, centered */
.profile-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    flex-shrink: 0;
}
.profile-panel-header-spacer {
    width: 30px;
}
.profile-panel-title {
    font-family: var(--mono);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 6px;
    background: linear-gradient(135deg, var(--accent), var(--green));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: center;
}
.profile-title {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 1px;
}
.profile-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: -6px -4px;
    padding: 0;
    border-radius: 4px;
    transition: all 0.15s;
}
.profile-close:hover {
    color: var(--text);
    background: var(--surface-hover);
}
/* .profile-close-floating removed — close buttons now inline in headers */

.profile-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.profile-loading {
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: 11px;
    text-align: center;
    padding: 40px 0;
}

.profile-section {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.profile-section:last-child {
    border-bottom: none;
}

.profile-section-title {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.profile-readonly {
    margin-bottom: 10px;
}
.profile-readonly label {
    display: block;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 3px;
}
.profile-readonly span {
    display: block;
    font-size: 13px;
    color: var(--text-muted);
    padding: 6px 0;
}

.profile-field-row {
    display: flex; gap: 10px;
}
.profile-field-row .profile-field { flex: 1; }
.profile-field {
    margin-bottom: 10px;
}
.profile-field label {
    display: block;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.profile-field input {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 10px;
    color: var(--text);
    font-size: 13px;
    font-family: var(--sans);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.profile-field input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

.profile-save-btn {
    width: 100%;
    padding: 8px 16px;
    border: 1px solid rgba(11,111,218,0.3);
    border-radius: 6px;
    background: rgba(11,111,218,0.12);
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    font-family: var(--mono);
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 8px;
}
.profile-save-btn:hover {
    background: rgba(11,111,218,0.25);
    border-color: rgba(11,111,218,0.5);
}

.profile-msg {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--green);
    text-align: center;
    margin-top: 6px;
    min-height: 14px;
}

.profile-logout-btn {
    width: 100%;
    padding: 10px 16px;
    border: 1px solid rgba(230,57,70,0.3);
    border-radius: 6px;
    background: rgba(230,57,70,0.1);
    color: var(--red);
    font-size: 11px;
    font-weight: 700;
    font-family: var(--mono);
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s;
}
.profile-logout-btn:hover {
    background: rgba(230,57,70,0.2);
    border-color: rgba(230,57,70,0.5);
}

/* ===== v3.1.5: Welcome Profile Two-Pane ===== */

.welcome-profile-twopane {
    display: flex;
    width: 100%;
    flex: 1;
    overflow: hidden;
}
.welcome-profile-left {
    flex: 0 0 380px;
    overflow-y: auto;
    padding: 0 20px 20px 20px;
    border-right: 1px solid var(--border);
}
.welcome-profile-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    overflow: hidden;
}
/* .welcome-profile-right-header removed — close button moved to profile-panel-header */
.welcome-profile-right-title {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--teal);
}
.welcome-profile-right-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px 20px;
}

@media (max-width: 700px) {
    .welcome-profile-twopane { flex-direction: column; }
    .welcome-profile-left { flex: none; border-right: none; border-bottom: 1px solid var(--border); }
}

/* ===== v3.1.5: Profile Panel Two-Pane Layout ===== */

.profile-two-pane {
    flex: 1;
    display: flex;
    overflow: hidden;
}
.profile-left-pane {
    flex: 0 0 340px;
    overflow-y: auto;
    padding: 16px;
    border-right: 1px solid var(--border);
}
.profile-right-pane {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: var(--bg);
}

@media (max-width: 700px) {
    .profile-two-pane { flex-direction: column; }
    .profile-left-pane { flex: none; border-right: none; border-bottom: 1px solid var(--border); }
    .profile-right-pane { flex: 1; }
}

/* Right pane sections */
.profile-right-header {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--teal);
    letter-spacing: 1.5px;
    margin-bottom: 14px;
}
.profile-right-empty {
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: 11px;
    text-align: center;
    padding: 28px 0;
}
.profile-right-empty-icon {
    font-size: 28px;
    margin-bottom: 10px;
}

/* Stat chips — v3.2.1: clean style matching admin panel */
.profile-stat-chips {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}
.profile-stat-chip {
    text-align: center;
}
.profile-stat-chip .chip-value {
    display: block;
    font-family: var(--mono);
    font-size: 16px;
    font-weight: 700;
    color: var(--teal);
}
.profile-stat-chip .chip-label {
    display: block;
    font-family: var(--mono);
    font-size: 9px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* 8-dimension grid */
/* Profile Charts (Radar + History Line) */
.profile-graphs-row {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    height: 280px;
}
.profile-graph-container {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.profile-chart-wrap {
    position: relative;
    flex: 1;
    min-height: 0;
}
.chart-no-data {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: 2px;
    text-transform: uppercase;
}
.profile-graph-radar {
    flex: 0 0 280px;
}
.profile-graph-history {
    flex: 1;
}

/* v3.4.1: In-session slide-out panel — keep 2-col charts and 3-col AI personality */
.profile-panel .profile-dim-grid {
    grid-template-columns: repeat(2, 1fr);
}
.profile-graph-toggles {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin-bottom: 8px;
}
.graph-toggle {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-dim);
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}
.graph-toggle:hover {
    border-color: var(--text-muted);
    color: var(--text-muted);
}
.graph-toggle.active {
    border-color: var(--teal);
    color: var(--teal);
}

/* History Dimension Filter Dropdown */
.history-dim-select {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-dim);
    padding: 3px 6px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: auto;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%235a5a66'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 5px center;
    padding-right: 16px;
    transition: all 0.15s;
}
.history-dim-select:hover {
    border-color: var(--text-muted);
    color: var(--text-muted);
}
.history-dim-select:focus {
    border-color: var(--teal);
    color: var(--teal);
    outline: none;
}

/* History Chart Click-Through Popover */
.history-point-popover {
    position: absolute;
    top: 36px;
    right: 8px;
    background: #111115;
    border: 1px solid var(--teal);
    border-radius: 6px;
    padding: 10px 12px;
    max-width: 340px;
    min-width: 240px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 102;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.history-popover-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.history-popover-close {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 16px;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    flex-shrink: 0;
}
.history-popover-close:hover {
    color: var(--text-muted);
}

.profile-dim-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}
.profile-dim-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
}
.profile-dim-card.no-data, .profile-dim-card.not-observed { }
.profile-dim-card.low-confidence { }
.dim-low-conf { color: var(--amber); font-size: 9px; font-weight: 700; letter-spacing: 0.5px; margin-left: 4px; }

/* Anti-Barnum: Building Your Profile banner */
.profile-building-banner {
    background: rgba(0,150,136,0.08);
    border: 1px solid rgba(0,150,136,0.25);
    border-radius: 8px;
    padding: 16px 20px;
    margin: 8px 0 16px;
    text-align: center;
}
.profile-building-icon { font-size: 28px; margin-bottom: 6px; }
.profile-building-title { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--teal); letter-spacing: 1px; margin-bottom: 6px; }
.profile-building-detail { font-size: 11px; color: var(--text-muted); line-height: 1.5; margin-bottom: 10px; }
.profile-building-progress { height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; margin-bottom: 4px; }
.profile-building-progress-fill { height: 100%; background: var(--teal); border-radius: 2px; transition: width 0.3s ease; }
.profile-building-count { font-family: var(--mono); font-size: 10px; color: var(--text-muted); }
.profile-narrative-locked { opacity: 0.5; }
.profile-dim-header {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 6px;
}
.profile-dim-name {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.profile-dim-score {
    font-family: var(--mono);
    font-size: 16px;
    font-weight: 700;
    color: var(--teal);
}
.profile-dim-bar {
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 4px;
}
.profile-dim-bar-fill {
    height: 100%;
    background: var(--teal);
    border-radius: 2px;
    transition: width 0.4s ease;
}
.profile-dim-meta {
    font-family: var(--mono);
    font-size: 8px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.dim-low-conf { color: #f0ad4e; font-size: 10px; cursor: help; }

/* Narrative sections */
.profile-narrative-section {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.profile-narrative-section:last-child { border-bottom: none; }
.profile-narrative-label {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    color: var(--teal);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.profile-narrative-text {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
    white-space: pre-wrap;
}

/* Evidence Bridge metrics (v1.8) */
.evidence-bridge-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 8px;
}
.evidence-bridge-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}
.eb-card-icon {
    font-size: 18px;
    margin-bottom: 4px;
    opacity: 0.7;
}
.eb-card-score {
    font-size: 20px;
    font-weight: 700;
    color: var(--accent);
}
.eb-card-max {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
}
.eb-card-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text);
    margin-top: 4px;
}
.eb-card-meta {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Development Backlog */
.backlog-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 8px;
}
.backlog-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 12px;
}
.backlog-item.backlog-completed {
    opacity: 0.6;
    border-color: #2ecc71;
}
.backlog-item.backlog-stalled {
    border-color: #e74c3c;
}
.backlog-dim {
    font-weight: 600;
    color: var(--text);
}
.backlog-target {
    color: var(--accent);
    font-family: var(--mono);
    font-size: 11px;
}
.backlog-status {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 3px;
    background: rgba(255,255,255,0.05);
    color: var(--text-muted);
    align-self: flex-start;
}
.backlog-source {
    font-size: 10px;
    color: var(--text-muted);
    font-style: italic;
}

/* Coaching Effectiveness Summary */
.coaching-eff-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 8px;
}
.coaching-eff-stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
    text-align: center;
}
.coaching-eff-value {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: var(--accent);
}
.coaching-eff-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-top: 2px;
}
.coaching-eff-targets {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 8px;
    padding: 6px 10px;
    background: var(--surface);
    border-radius: 4px;
}

/* Coalition Performance in Profile */
.profile-coalition-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.profile-coalition-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}
.profile-coalition-name {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.profile-coalition-total {
    font-family: var(--mono);
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
}
.profile-coalition-label {
    font-family: var(--mono);
    font-size: 8px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.profile-coalition-detail {
    font-family: var(--mono);
    font-size: 8px;
    color: var(--text-dim);
}

/* Coaching Mode Selector */
.coaching-mode-group {
    display: flex;
    gap: 8px;
}
.coaching-mode-btn {
    flex: 1;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
.coaching-mode-btn:hover {
    border-color: var(--teal);
    background: var(--surface-hover);
}
.coaching-mode-btn.coaching-mode-active {
    border-color: var(--teal);
    background: rgba(0,128,128,0.12);
    box-shadow: 0 0 0 2px rgba(0,128,128,0.2);
}
.coaching-mode-label {
    display: block;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.coaching-mode-desc {
    display: block;
    font-family: var(--mono);
    font-size: 8px;
    color: var(--text-dim);
}

/* Profile section title teal variant */
.profile-section-title-teal {
    color: var(--teal) !important;
}
.profile-section-subtitle {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--text-dim);
    margin-bottom: 10px;
}
.profile-report-btn {
    width: 100%;
    padding: 8px 16px;
    border: 1px solid rgba(0,128,128,0.3);
    border-radius: 6px;
    background: rgba(0,128,128,0.1);
    color: var(--teal);
    font-size: 11px;
    font-weight: 700;
    font-family: var(--mono);
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s;
}
.profile-report-btn:hover {
    background: rgba(0,128,128,0.2);
    border-color: rgba(0,128,128,0.5);
}

/* ===== v3.1.5: User Metrics Table ===== */

.user-metrics-summary {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.um-stat {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-muted);
}
.um-stat b {
    color: var(--text);
    font-weight: 700;
}
.user-metrics-table-wrap {
    overflow-x: auto;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
.user-metrics-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--mono);
    font-size: 10px;
}
.user-metrics-table th {
    position: sticky;
    top: 0;
    background: var(--surface);
    color: var(--text-dim);
    font-weight: 700;
    font-size: 8px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}
.user-metrics-table th:hover { color: var(--text); }
.user-metrics-table td {
    padding: 5px 8px;
    border-bottom: 1px solid rgba(42,42,50,0.5);
    color: var(--text-muted);
    white-space: nowrap;
}
.user-metrics-table tr:hover td { background: var(--surface-hover); }
.um-deliverable {
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.um-clarity { color: var(--green); font-weight: 700; }
.um-no-clarity { color: var(--red); font-weight: 700; }
.um-unmarked { color: var(--text-dim); }
.um-pips { color: #0b6fda; font-size: 10px; letter-spacing: 1px; }
.um-pips-empty { color: #333; }
.um-generating { color: var(--text-dim); font-size: 9px; animation: pulse 1.5s infinite; }
.um-download { text-decoration: none; font-size: 14px; cursor: pointer; opacity: 0.7; transition: opacity 0.2s; }
.um-download:hover { opacity: 1; }

/* Admin user metrics section — border now handled by .admin-section */
.admin-user-metrics-section {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.admin-user-dropdown {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 10px;
    color: var(--text);
    font-family: var(--mono);
    font-size: 11px;
    margin-bottom: 12px;
    outline: none;
    cursor: pointer;
}
.admin-user-dropdown:focus {
    border-color: var(--amber);
    box-shadow: 0 0 0 2px rgba(245,166,35,0.15);
}
.admin-user-metrics-content {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}
.admin-um-summary {
    margin-bottom: 8px;
}
.admin-dashboard-metrics-section {
    margin-bottom: 0;
}

/* ===== v3.1.5: Harm Check & Calibration Cards ===== */

.harm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}
.harm-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
}
.harm-card.harm-exceeded {
    border-color: rgba(230,57,70,0.5);
    background: rgba(230,57,70,0.05);
}
.harm-card.harm-ok {
    border-color: var(--border);
}
.harm-card-title {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.harm-card-value {
    font-family: var(--mono);
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}
.harm-exceeded .harm-card-value { color: var(--red); }
.harm-card-detail {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--text-dim);
    margin-bottom: 4px;
}
.harm-card-threshold {
    font-family: var(--mono);
    font-size: 8px;
    color: var(--text-dim);
    font-style: italic;
}
.harm-exceeded .harm-card-threshold { color: var(--red); font-weight: 700; font-style: normal; }

/* ===== v3.1.3: ADMIN DASHBOARD (full-screen modal) ===== */

.admin-dashboard {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #111115;
    border-top: 3px solid var(--amber);
    z-index: 9999;
    display: flex;
    flex-direction: column;
}
.admin-dashboard.hidden {
    display: none;
}

/* v3.1.8: Brand lockup bar above admin header */
.admin-dashboard-topbar {
    display: flex;
    align-items: center;
    padding: 14px 24px;
    background: var(--bg);
    flex-shrink: 0;
    -webkit-app-region: drag; /* Electron: admin top bar is drag handle */
}
.admin-dashboard-topbar button,
.admin-dashboard-topbar .user-icon-wrapper,
.admin-dashboard-topbar .user-dropdown {
    -webkit-app-region: no-drag;
}
/* Override absolute centering from base .brand-lockup — use flex centering instead */
.admin-dashboard-topbar .brand-lockup {
    position: relative;
    left: auto;
    transform: none;
    flex: 1;
    justify-content: center;
}
.admin-dashboard-topbar > .user-icon-wrapper {
    position: relative;
    flex-shrink: 0;
}

.admin-dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    flex-shrink: 0;
}
.admin-dashboard-title {
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 700;
    color: var(--amber);
    letter-spacing: 1.5px;
}
.admin-dashboard-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 22px;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: -6px -4px;
    padding: 0;
    border-radius: 4px;
    transition: all 0.15s;
    line-height: 1;
}
.admin-dashboard-close:hover {
    color: var(--text);
    background: var(--surface-hover);
}

.admin-dashboard-body {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.admin-dashboard-left {
    flex: 0 0 60%;
    overflow-y: auto;
    border-right: 1px solid var(--border);
}

.admin-dashboard-right {
    flex: 0 0 40%;
    overflow: hidden;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
}

/* Legacy: admin-dashboard-metrics-title — replaced by admin-section-header in right column */
.admin-dashboard-metrics-title {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--amber);
    letter-spacing: 1px;
    margin-bottom: 14px;
}

/* Right-column sections — each scrolls independently */
.admin-dashboard-right .admin-section {
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.admin-dashboard-right .admin-section:first-child {
    border-top: none;
    /* System Metrics: cap at 50% when expanded, shrink when collapsed */
    max-height: 50%;
    flex-shrink: 1;
}
.admin-dashboard-right .admin-section-content {
    padding: 8px 16px 16px;
    overflow-y: auto;
    min-height: 0;
}
/* v3.2.5: Always-open sections — no collapse toggle */
.admin-section-always-open .admin-section-header {
    cursor: default;
}
.admin-section-always-open .admin-section-header:hover {
    background: transparent;
}
.admin-section-always-open .admin-section-content {
    max-height: none !important;
    padding-top: 8px !important;
    padding-bottom: 16px !important;
}
/* User Metrics fills remaining vertical space */
.admin-section-flex {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.admin-section-flex .admin-section-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
}

/* Legacy admin-panel kept for backward compat */
.admin-panel {
    display: none;
}

.admin-loading {
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: 11px;
    text-align: center;
    padding: 20px 0;
}

/* Admin accordion sections */
.admin-section {
    border-bottom: 1px solid var(--border);
}
.admin-section:last-child {
    border-bottom: none;
}

.admin-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--amber);
    letter-spacing: 1px;
    transition: background 0.15s;
    user-select: none;
}
/* v3.2.5: Sticky section headers in left column */
.admin-dashboard-left .admin-section-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg);
}
.admin-section-header:hover {
    background: var(--surface-hover);
}

.admin-chevron {
    font-size: 12px;
    color: var(--text-dim);
    transition: transform 0.2s;
    display: inline-block;
}
.admin-chevron.open {
    transform: rotate(90deg);
}

.admin-section-content {
    padding: 0 16px 14px;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}
.admin-section-content.collapsed {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
}

/* Allow resize handle to be visible */
#admin-users {
    overflow: visible;
}
#admin-users.collapsed {
    overflow: hidden;
}

/* Admin user rows */
.admin-users-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Header stats inline with section title */
.admin-header-stats {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 400;
    color: var(--text-dim);
    margin-left: 10px;
    letter-spacing: 0.02em;
}

/* Filter bar */
.admin-filter-bar {
    display: flex;
    gap: 4px;
    width: 100%;
    margin-bottom: 4px;
}
.admin-filter-btn {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 0.3px;
}
.admin-filter-btn:hover { color: var(--text); border-color: var(--green); }
.admin-filter-btn.active { background: rgba(0, 200, 120, 0.15); color: var(--green); border-color: rgba(0, 200, 120, 0.4); }
.admin-filter-count {
    font-weight: 400;
    opacity: 0.7;
    margin-left: 2px;
}

/* Resize handle at bottom of user list */
.admin-users-resize-handle {
    height: 12px;
    cursor: ns-resize;
    position: relative;
    margin-top: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.admin-users-resize-handle::before {
    content: "";
    width: 60px;
    height: 3px;
    border-radius: 2px;
    background: var(--border);
    transition: background 0.15s, width 0.15s;
}
.admin-users-resize-handle:hover::before {
    background: var(--green);
    width: 100px;
}

/* v3.2.3: User Management — sort bar, jump nav, height lock */
.admin-users-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.admin-sort-bar {
    display: flex;
    gap: 4px;
}

.admin-sort-btn {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-dim);
    transition: all 0.15s;
    letter-spacing: 0.3px;
}
.admin-sort-btn:hover {
    border-color: var(--text-dim);
    color: var(--text);
}
.admin-sort-btn.active {
    background: rgba(11, 111, 218, 0.15);
    color: #0b6fda;
    border-color: rgba(11, 111, 218, 0.4);
}

.admin-jump-nav {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
}

.admin-jump-letter {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    cursor: pointer;
    color: var(--text-dim);
    transition: all 0.12s;
}
.admin-jump-letter:hover:not(.disabled) {
    background: rgba(11, 111, 218, 0.15);
    color: #0b6fda;
}
.admin-jump-letter.disabled {
    opacity: 0.25;
    pointer-events: none;
    cursor: default;
}

/* v3.2.3: Height-locked scrollable user list — shows ~3 rows */
.admin-users-scroll {
    min-height: 210px;
    max-height: 210px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.admin-users-scroll::-webkit-scrollbar {
    width: 6px;
}
.admin-users-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.admin-users-scroll::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

/* v3.2.3: Session count badge */
.admin-user-sessions {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--text-dim);
    background: rgba(255, 255, 255, 0.05);
    padding: 1px 6px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.admin-user-row {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
}

.admin-user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.admin-user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.admin-user-username {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-dim);
}

.admin-user-meta {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-dim);
    margin-bottom: 6px;
}

.admin-user-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.admin-action-btn {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    letter-spacing: 0.5px;
    border: 1px solid var(--border);
    background: var(--surface-hover);
    color: var(--text-muted);
    transition: all 0.15s;
}
.admin-action-btn:hover {
    border-color: var(--text-dim);
    color: var(--text);
}

.admin-action-btn.approve {
    background: rgba(46,204,113,0.12);
    color: var(--green);
    border-color: rgba(46,204,113,0.3);
}
.admin-action-btn.approve:hover {
    background: rgba(46,204,113,0.25);
    border-color: rgba(46,204,113,0.5);
}

.admin-action-btn.deny {
    background: rgba(230,57,70,0.1);
    color: var(--red);
    border-color: rgba(230,57,70,0.25);
}
.admin-action-btn.deny:hover {
    background: rgba(230,57,70,0.2);
    border-color: rgba(230,57,70,0.5);
}

/* v3.1.2: Status change dropdown */
.admin-status-select {
    background: #161619;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    padding: 4px 6px;
    cursor: pointer;
    letter-spacing: 0.5px;
}
.admin-status-select:hover {
    border-color: rgba(245,158,11,0.5);
}
.admin-status-select:focus {
    outline: none;
    border-color: var(--amber);
}

/* Full-width admin action button */
.admin-action-full-btn {
    width: 100%;
    padding: 8px 16px;
    border: 1px solid rgba(245,158,11,0.3);
    border-radius: 6px;
    background: var(--amber-glow);
    color: var(--amber);
    font-size: 11px;
    font-weight: 700;
    font-family: var(--mono);
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s;
}
.admin-action-full-btn:hover {
    background: rgba(245,158,11,0.25);
    border-color: rgba(245,158,11,0.5);
}

/* Admin toggle row (e.g., Training Wheels) */
.admin-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
    color: var(--text);
}

.admin-toggle-btn {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid rgba(245,158,11,0.3);
    background: var(--amber-glow);
    color: var(--amber);
    letter-spacing: 0.5px;
    transition: all 0.2s;
}
.admin-toggle-btn:hover {
    background: rgba(245,158,11,0.25);
    border-color: rgba(245,158,11,0.5);
}

/* v3.2.17: Orchestrator Settings */
.orch-settings-group {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}
.orch-settings-group:last-child { border-bottom: none; }
.orch-settings-group-label {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    color: var(--text-dim);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.orch-toggle-label {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.3px;
    cursor: help;
}
.admin-toggle-btn.orch-off {
    border-color: var(--border);
    background: var(--surface);
    color: var(--text-dim);
}

/* v3.2.4: Training Wheels Threshold Controls */
.admin-tw-thresholds {
    padding: 8px 12px;
}
.admin-threshold-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
}
.admin-threshold-row label {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-muted);
}
.admin-threshold-input {
    width: 60px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px 6px;
    color: var(--text);
    font-family: var(--mono);
    font-size: 11px;
    text-align: center;
}
.admin-threshold-input:focus {
    outline: none;
    border-color: var(--amber);
    background: rgba(245,158,11,0.05);
}

/* Admin metrics content (reuses metric-card styles from v3.0.2 metrics panel) */
.admin-metrics-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.admin-metrics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* ===== v3.1: STATUS BADGES ===== */

.admin-user-badge {
    display: inline-block;
    font-family: var(--mono);
    font-size: 8px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.badge-admin {
    background: rgba(46,204,113,0.15);
    color: var(--green);
    border: 1px solid rgba(46,204,113,0.3);
}

.badge-user {
    background: rgba(11,111,218,0.15);
    color: var(--accent);
    border: 1px solid rgba(11,111,218,0.3);
}

.badge-applicant {
    background: rgba(244,196,48,0.15);
    color: var(--yellow);
    border: 1px solid rgba(244,196,48,0.3);
}

/* ===== v3.1: ADMIN METRICS CARDS ===== */
.metrics-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
}
.metrics-card-title {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    color: var(--text-dim);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.metrics-card-value {
    font-family: var(--mono);
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}
.metrics-card-sub {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* v3.2.4: Metrics card — smaller value variant for mode breakdown */
.metrics-card-value-sm {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.6;
    padding: 4px 0;
}
.metrics-card-value-sm .mode-stat {
    display: inline-block;
    margin-right: 4px;
}
.metrics-card-unit {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: 4px;
}
.trend-good { color: var(--green); }
.trend-bad { color: var(--red); }
.trend-flat { color: var(--text-muted); }

/* v3.2.4: Metrics filter bar */
.metrics-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 10px;
}
.metrics-filter-btn {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}
.metrics-filter-btn:hover {
    border-color: var(--amber);
    color: var(--text);
}
.metrics-filter-btn.active {
    background: rgba(245,166,35,0.15);
    border-color: var(--amber);
    color: var(--amber);
}
.metrics-filter-custom {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    align-items: center;
}
.metrics-filter-custom label {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}
.metrics-filter-custom input[type="date"] {
    font-family: var(--mono);
    font-size: 10px;
    padding: 3px 6px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
}
/* v3.2.5: Custom range prompt */
.metrics-filter-prompt {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--amber);
    font-style: italic;
    margin-bottom: 8px;
}

/* ===== COST METRICS SECTION ===== */

.admin-cost-metrics-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Two-panel breakdown grid (by model | by feature) */
.cm-breakdown-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 4px;
}
.cm-breakdown-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
}
.cm-panel-title {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    color: var(--text-dim);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* Bar chart visualization */
.cm-bars {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}
.cm-bar-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.cm-bar-label {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--text-muted);
    min-width: 90px;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cm-bar-track {
    flex: 1;
    height: 10px;
    background: var(--bg);
    border-radius: 3px;
    overflow: hidden;
}
.cm-bar-fill {
    height: 100%;
    background: var(--amber);
    border-radius: 3px;
    transition: width 0.4s ease;
}
.cm-bar-fill-feature {
    background: var(--accent);
}
.cm-bar-value {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--text);
    min-width: 45px;
    text-align: right;
}

/* Cost metrics table */
.cm-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--mono);
    font-size: 9px;
}
.cm-table thead th {
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 6px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}
.cm-table tbody td {
    padding: 3px 6px;
    color: var(--text);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.cm-table tbody tr:last-child td {
    border-bottom: none;
}
.cm-cost { text-align: right; font-weight: 600; }
.cm-pct { text-align: right; color: var(--text-muted); }
.cm-calls { text-align: right; color: var(--text-muted); }
.cm-tokens { text-align: right; color: var(--text-muted); font-size: 8px; }
.cm-model-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-feature-name { white-space: nowrap; }
.cm-empty { text-align: center; color: var(--text-muted); padding: 8px 0; }

.admin-error {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--red);
    padding: 12px 0;
    text-align: center;
}

/* ===== v3.1.3: Password Visibility Toggle ===== */
.pw-field-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.pw-field-wrapper input {
    padding-right: 38px;
}
.pw-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    transition: color 0.2s;
}
.pw-toggle:hover {
    color: var(--text-muted);
}
.pw-toggle svg {
    width: 18px;
    height: 18px;
}

/* ===== v1.0-SK: Stateful Knowledge System — Admin Dashboard ===== */

/* Knowledge subsections — nested inside STATEFUL KNOWLEDGE */
.admin-subsection {
    border-top: 1px solid var(--border);
}
.admin-subsection-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    cursor: pointer;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;
    color: var(--teal);
    user-select: none;
}
.admin-subsection-header:hover {
    background: rgba(255,255,255,0.02);
}
.admin-subsection-header .admin-chevron {
    font-size: 10px;
    color: var(--teal);
}

.admin-knowledge-content {
    min-height: 40px;
}

/* --- Dimension Radar / Score Cards --- */
.knowledge-dimensions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.dim-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
}
.dim-card-header {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 6px;
}
.dim-card-name {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.dim-card-score {
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 700;
    color: var(--teal);
}
.dim-card-bar {
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 4px;
}
.dim-card-bar-fill {
    height: 100%;
    border-radius: 2px;
    background: var(--teal);
    transition: width 0.5s ease;
}
.dim-card-meta {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--text-dim);
}
.dim-card.no-data {
    opacity: 0.4;
}
.dim-card.no-data .dim-card-bar-fill {
    width: 0 !important;
}

/* v1.5: Velocity indicators */
.dim-velocity {
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
}
.vel-improving { color: #2ecc71; }
.vel-declining { color: #e74c3c; }
.vel-plateaued { color: var(--text-dim); font-size: 6px; }
.vel-nodata { display: none; }

/* v1.5: Interaction pattern cards */
.pattern-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    margin-top: 8px;
}
.pattern-card-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}
.pattern-card-name {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--teal);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.pattern-card-dims {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--text-dim);
}
.pattern-card-sig {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 6px;
    line-height: 1.4;
}
.pattern-card-override {
    font-size: 11px;
    color: var(--text);
    line-height: 1.4;
}
.pattern-card-override strong {
    color: var(--teal);
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* v1.6: AI Peer Review cards */
.peer-profile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}
.peer-profile-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
}
.peer-profile-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}
.peer-profile-name {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.peer-profile-model {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--text-dim);
}
.peer-profile-stats {
    display: flex;
    gap: 10px;
    font-family: var(--mono);
    font-size: 9px;
    color: var(--text-dim);
    margin-bottom: 10px;
}
.peer-dim-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.peer-dim-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.peer-dim-name {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    width: 85px;
    flex-shrink: 0;
}
.peer-dim-score {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--teal);
    width: 24px;
    text-align: right;
    flex-shrink: 0;
}
.peer-dim-bar {
    flex: 1;
    height: 4px;
    background: var(--bg);
    border-radius: 2px;
    overflow: hidden;
}
.peer-dim-bar-fill {
    height: 100%;
    background: var(--teal);
    border-radius: 2px;
    transition: width 0.3s ease;
}
.peer-dim-row.no-data {
    opacity: 0.35;
}
.peer-profile-section {
    margin-top: 10px;
    border-top: 1px solid var(--border);
    padding-top: 6px;
}
.peer-profile-section.collapsed .peer-profile-narrative,
.peer-profile-section.collapsed .peer-profile-adaptation {
    display: none;
}
.peer-profile-section-label {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.5px;
    color: var(--teal);
    cursor: pointer;
    user-select: none;
    padding: 2px 0;
}
.peer-profile-section-label:hover { opacity: 0.8; }
.section-chevron {
    display: inline-block;
    transition: transform 0.2s;
}
.section-chevron.open {
    transform: rotate(90deg);
}
.peer-profile-narrative {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
    padding-top: 4px;
}
.peer-profile-adaptation {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
    padding-top: 4px;
    white-space: pre-line;
}
.peer-archived-toggle {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-dim);
    cursor: pointer;
    padding: 6px 0;
    user-select: none;
}
.peer-archived-toggle:hover { color: var(--teal); }
.peer-archived-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.peer-archived-list.collapsed { display: none; }
.peer-archived-card {
    display: flex;
    gap: 10px;
    align-items: center;
    font-family: var(--mono);
    font-size: 9px;
    color: var(--text-dim);
    padding: 4px 8px;
    background: var(--surface);
    border-radius: 4px;
}
.peer-archived-name {
    font-weight: 700;
    color: var(--text-muted);
}

/* Profile narrative */
.knowledge-narrative {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 10px;
}
.knowledge-narrative-label {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    color: var(--teal);
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    text-transform: uppercase;
}
.knowledge-narrative-text {
    font-size: 12px;
    color: var(--text);
    line-height: 1.5;
    white-space: pre-wrap;
}

/* Profile meta stats */
.knowledge-profile-meta {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}
.knowledge-meta-stat {
    text-align: center;
}
.knowledge-meta-stat .value {
    font-family: var(--mono);
    font-size: 16px;
    font-weight: 700;
    color: var(--teal);
}
.knowledge-meta-stat .label {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--text-dim);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* --- Session Brief Cards --- */
.brief-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 8px;
}
.brief-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.brief-card-date {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-dim);
}
.brief-card-tokens {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--text-dim);
    background: var(--surface-hover);
    padding: 2px 6px;
    border-radius: 3px;
}
.brief-card-deliverable {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}
.brief-card-text {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.5;
    white-space: pre-wrap;
    max-height: 120px;
    overflow-y: auto;
}
.brief-card-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.brief-tag {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--teal);
    background: var(--teal-glow);
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid rgba(0,150,136,0.2);
}

/* --- GKB Entry Cards --- */
.gkb-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
}
.gkb-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.gkb-card-confidence {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    color: var(--teal);
}
.gkb-card-corroboration {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--text-dim);
}
.gkb-card-content {
    font-size: 12px;
    color: var(--text);
    line-height: 1.5;
    margin-bottom: 6px;
}
.gkb-card-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

/* --- Coalition Performance --- */
.coalition-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.coalition-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}
.coalition-card-name {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}
.coalition-card-stat {
    font-family: var(--mono);
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
}
.coalition-card-label {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--text-dim);
    letter-spacing: 0.5px;
}
.coalition-card-breakdown {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--text-dim);
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
}

/* No-data state */
.knowledge-empty {
    text-align: center;
    padding: 20px 0;
    color: var(--text-dim);
    font-family: var(--mono);
    font-size: 11px;
}
.knowledge-empty-icon {
    font-size: 24px;
    margin-bottom: 6px;
    opacity: 0.5;
}

/* Pipeline status banner */
.knowledge-pipeline-banner {
    margin-top: 6px;
    padding: 6px 10px;
    background: var(--teal-glow);
    border: 1px solid rgba(0,150,136,0.25);
    border-radius: 6px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--teal);
    display: flex;
    align-items: center;
    gap: 8px;
}

.pipeline-spinner {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 2px solid rgba(0,150,136,0.3);
    border-top-color: var(--teal);
    border-radius: 50%;
    animation: pipeline-spin 0.8s linear infinite;
}

@keyframes pipeline-spin {
    to { transform: rotate(360deg); }
}

/* --- v3.1.7: Intelligence Profile Dimension Tooltips --- */
.dim-tooltip-btn {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--text-dim);
    color: var(--text-dim);
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    cursor: pointer;
    margin-left: auto;
    transition: border-color 0.2s, color 0.2s;
}
.dim-tooltip-btn:hover {
    border-color: var(--blue);
    color: var(--blue);
}

.profile-dim-card,
.dim-card {
    position: relative;
}

.dim-tooltip-popup {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: #111115;
    border: 1px solid #0B6FDA;
    border-radius: 6px;
    padding: 10px 12px;
    max-width: 280px;
    z-index: 100;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.dim-tooltip-label {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    color: var(--blue);
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.dim-tooltip-body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ===== Score Change Explainer: Delta Badges ===== */
.dim-delta-badge {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    padding: 1px 4px;
    border-radius: 3px;
    transition: opacity 0.2s;
}
.dim-delta-badge:hover { opacity: 0.8; }
.delta-up { color: #2ecc71; background: rgba(46, 204, 113, 0.12); }
.delta-down { color: #e74c3c; background: rgba(231, 76, 60, 0.12); }
.delta-same { color: var(--text-dim); background: rgba(90, 90, 102, 0.12); }
.delta-not-observed { color: var(--text-dim); opacity: 0.35; background: none; }
.delta-new { color: var(--teal); background: rgba(0, 188, 212, 0.12); }

/* ===== Score Change Explainer: Tooltip Popup ===== */
.delta-tooltip-popup {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: #111115;
    border: 1px solid var(--teal);
    border-radius: 6px;
    padding: 10px 12px;
    max-width: 320px;
    min-width: 220px;
    z-index: 101;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.delta-tooltip-label {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.delta-tooltip-movement {
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px;
}
.delta-tooltip-body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
}
.delta-tooltip-observations {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}
.delta-obs-item {
    border-left: 2px solid var(--border);
    padding-left: 8px;
}
.delta-obs-header {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 2px;
}
.delta-obs-ai {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.delta-obs-signal {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-dim);
}
.delta-obs-content {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}
.delta-obs-evidence { margin-top: 4px; }
.delta-evidence-quote {
    font-size: 10px;
    color: var(--text-dim);
    font-style: italic;
    line-height: 1.4;
    padding-left: 6px;
    border-left: 1px solid var(--border);
    margin-top: 2px;
}
.delta-tooltip-footer {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
}

/* ===== v3.2.3: AI Personality System ===== */

.ai-personality-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.ai-personality-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    min-width: 0;
    overflow: hidden;
}

.ai-personality-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

.ai-personality-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.ai-personality-name {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.3px;
}

/* v3.2.23: AI reset button */
.ai-reset-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 14px;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    padding: 0;
    transition: color 0.2s, border-color 0.2s;
}
.ai-reset-btn:hover {
    color: var(--text);
    border-color: var(--text-dim);
}

/* v3.2.22: AI enable/disable toggle switch */
.ai-enable-toggle {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 18px;
    margin-left: auto;   /* push to right side of header flex */
    flex-shrink: 0;
    cursor: pointer;
}
.ai-enable-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}
.ai-enable-slider {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.12);
    border-radius: 9px;
    transition: background 0.2s;
}
.ai-enable-slider::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 2px;
    width: 14px;
    height: 14px;
    background: #666;
    border-radius: 50%;
    transition: transform 0.2s, background 0.2s;
}
.ai-enable-toggle input:checked + .ai-enable-slider {
    background: rgba(46, 204, 113, 0.3);
}
.ai-enable-toggle input:checked + .ai-enable-slider::before {
    transform: translateX(14px);
    background: #2ecc71;
}

/* v3.2.22: Disabled AI card — dims settings, keeps header interactive */
.ai-card-disabled .ai-personality-settings,
.ai-card-disabled .ai-persona-form,
.ai-card-disabled .ai-mode-toggle {
    opacity: 0.3;
    pointer-events: none;
}

.ai-personality-rename {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-dim);
    padding: 2px 4px;
    border-radius: 3px;
    transition: all 0.12s;
}
.ai-personality-rename:hover {
    color: var(--text);
    background: rgba(255,255,255,0.06);
}

.ai-personality-rename-input {
    font-family: var(--mono);
    font-size: 12px;
    background: #161619;
    color: var(--text);
    border: 1px solid var(--blue);
    border-radius: 4px;
    padding: 3px 6px;
    width: 120px;
}

.ai-personality-settings {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ai-personality-setting {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.ai-personality-setting > label {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: 0.3px;
    white-space: nowrap;
    flex-shrink: 0;
}

.ai-personality-dropdown {
    background: #161619;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 9px;
    padding: 3px 6px;
    cursor: pointer;
    flex: 1;
    max-width: 160px;
}
.ai-personality-dropdown:hover {
    border-color: var(--text-dim);
}

/* ── Domain Expertise Picker ── */
.domain-picker {
    position: relative;
    flex: 1;
    max-width: 160px;
}
.domain-picker-selected {
    background: #161619;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 9px;
    padding: 3px 6px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.domain-picker-selected:hover { border-color: var(--text-dim); }
.domain-picker-arrow { font-size: 7px; margin-left: 4px; opacity: 0.5; }
.domain-picker-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 200px;
    max-height: 260px;
    overflow-y: auto;
    background: #1a1a1f;
    border: 1px solid var(--border);
    border-radius: 4px;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    margin-top: 2px;
}
.domain-category-header {
    font-family: var(--mono);
    font-size: 8px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 8px 2px;
    pointer-events: none;
    border-top: 1px solid var(--border);
}
.domain-category-header:first-child { border-top: none; }
.domain-picker-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}
.domain-option {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--text);
    padding: 4px 8px 4px 14px;
    cursor: pointer;
    position: relative;
}
.domain-option:hover {
    background: rgba(11,111,218,0.15);
    color: var(--blue);
}
.domain-option.selected {
    color: var(--green);
    font-weight: 600;
}
.domain-option.selected::before {
    content: "\2713";
    position: absolute;
    left: 4px;
    font-size: 8px;
}
/* Tooltip on hover — shows definition */
.domain-option[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%);
    background: #0d0d10;
    color: var(--text-dim);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 8px;
    font-weight: 400;
    white-space: nowrap;
    z-index: 1001;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.ai-personality-custom-domain {
    padding-left: 78px;
}
.domain-custom-input-wrap {
    margin-top: 4px;
    flex: 1;
    max-width: 160px;
}
.domain-custom-input-wrap.hidden {
    display: none;
}
.ai-personality-custom-input {
    background: #161619;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 9px;
    padding: 3px 6px;
    width: 100%;
}

/* Toggle buttons (for Coaching Mode, Profanity) */
.ai-personality-toggle-group {
    display: flex;
    gap: 2px;
    background: rgba(255,255,255,0.03);
    border-radius: 4px;
    padding: 1px;
}

.ai-toggle-btn {
    font-family: var(--mono);
    font-size: 8px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 3px;
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-dim);
    transition: all 0.12s;
    letter-spacing: 0.3px;
}
.ai-toggle-btn:hover {
    color: var(--text);
}
.ai-toggle-btn.active {
    background: rgba(11, 111, 218, 0.15);
    color: #0b6fda;
    border-color: rgba(11, 111, 218, 0.3);
}

/* 3-stop slider */
.ai-personality-slider-wrap {
    flex: 1;
}

.ai-slider-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
}

.ai-slider-label {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.12s;
    letter-spacing: 0.3px;
}
.ai-slider-label.active {
    color: #0b6fda;
    font-weight: 700;
}
.ai-slider-label:hover {
    color: var(--text);
}

.ai-personality-slider {
    width: 100%;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border);
    border-radius: 2px;
    outline: none;
}
.ai-personality-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #0b6fda;
    cursor: pointer;
    border: 2px solid #0a0a0c;
}
.ai-personality-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #0b6fda;
    cursor: pointer;
    border: 2px solid #0a0a0c;
}

/* Coaching mode toggle — now uses .ai-toggle-btn */

/* v3.4: 5-tier response style picker */
.response-style-group {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    background: rgba(255,255,255,0.03);
    border-radius: 4px;
    padding: 1px;
}
.response-style-btn {
    font-family: var(--mono);
    font-size: 7.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 4px 6px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.12s;
    flex: 1;
    text-align: center;
    position: relative;
}
.response-style-btn:hover {
    color: var(--text);
    background: rgba(255,255,255,0.04);
}
.response-style-btn.active {
    background: rgba(11, 111, 218, 0.15);
    color: #0b6fda;
    border-color: rgba(11, 111, 218, 0.3);
}
/* Tooltips handled by global data-tooltip system */

/* Save button specific to AI personality */
.ai-personality-save {
    margin-top: 4px;
}

/* ── Persona Mode v1.0 ── */

.ai-mode-toggle {
    display: flex;
    gap: 2px;
    margin: 6px 0 4px 0;
    background: rgba(255,255,255,0.03);
    border-radius: 4px;
    padding: 2px;
}
.ai-mode-btn {
    flex: 1;
    font-family: var(--mono);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 4px 6px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}
.ai-mode-btn:hover {
    color: var(--text);
    background: rgba(255,255,255,0.04);
}
.ai-mode-btn.active {
    background: rgba(11, 111, 218, 0.12);
    color: #4a9eff;
    border-color: rgba(11, 111, 218, 0.3);
}

.ai-persona-warning {
    font-family: var(--mono);
    font-size: 9px;
    color: #c89b3c;
    background: rgba(200, 155, 60, 0.08);
    border: 1px solid rgba(200, 155, 60, 0.15);
    border-radius: 4px;
    padding: 6px 8px;
    margin: 4px 0;
    line-height: 1.4;
}
.ai-persona-warning.hidden {
    display: none;
}

/* Persona Save/Load Library Row */
.ai-persona-library-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 0;
    margin-bottom: 2px;
}
.persona-lib-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    color: var(--text-dim);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    transition: all 0.15s;
}
.persona-lib-btn:hover {
    color: var(--text);
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
}
.persona-lib-btn svg {
    opacity: 0.7;
}
.persona-lib-btn:hover svg {
    opacity: 1;
}
.persona-save-btn.persona-saved-flash {
    color: var(--green);
    border-color: var(--green);
    background: rgba(46, 204, 113, 0.1);
}
.persona-load-wrapper {
    position: relative;
}
.persona-load-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    max-height: 300px;
    overflow-y: auto;
    background: #1a1a1f;
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    z-index: 1000;
    margin-top: 4px;
}
.persona-load-dropdown.hidden {
    display: none;
}
.persona-dropdown-item {
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.1s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.persona-dropdown-item:hover {
    background: rgba(255,255,255,0.06);
}
.persona-dropdown-name {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text);
    font-weight: 600;
}
.persona-dropdown-meta {
    font-family: var(--mono);
    font-size: 8px;
    color: var(--text-dim);
    opacity: 0.6;
}
.persona-dropdown-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.persona-dropdown-trash {
    color: var(--text-dim);
    opacity: 0.3;
    cursor: pointer;
    padding: 2px;
    transition: all 0.15s;
    display: flex;
    align-items: center;
}
.persona-dropdown-trash:hover {
    opacity: 1;
    color: #e05050;
}
.persona-dropdown-section {
    padding: 6px 12px 4px;
    font-family: var(--mono);
    font-size: 8px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    border-top: 1px solid rgba(255,255,255,0.06);
    opacity: 0.5;
}
.persona-dropdown-section:first-child {
    border-top: none;
}
/* Known-for tooltip on persona hover */
.persona-dropdown-item[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%);
    background: #0d0d10;
    color: var(--text-dim);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px 8px;
    font-family: var(--mono);
    font-size: 8px;
    font-weight: 400;
    white-space: nowrap;
    z-index: 1001;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.persona-dropdown-item {
    position: relative;
}
.persona-dropdown-empty,
.persona-dropdown-loading {
    padding: 12px;
    text-align: center;
    font-family: var(--mono);
    font-size: 9px;
    color: var(--text-dim);
}

.ai-persona-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

.ai-persona-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ai-persona-field label {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--text-dim);
    font-weight: 600;
}
.ai-persona-optional {
    font-weight: 400;
    color: var(--text-dim);
    opacity: 0.6;
}

.ai-persona-input {
    font-family: var(--mono);
    font-size: 10px;
    background: #161619;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 5px 7px;
    outline: none;
    transition: border-color 0.15s;
}
.ai-persona-input:focus {
    border-color: #0b6fda;
}
.ai-persona-input::placeholder {
    color: var(--text-dim);
    opacity: 0.5;
}

.ai-persona-type-toggle {
    display: flex;
    gap: 2px;
    background: rgba(255,255,255,0.03);
    border-radius: 4px;
    padding: 2px;
}

.ai-persona-confirmation {
    font-family: var(--mono);
    font-size: 10px;
    color: #2ecc71;
    background: rgba(46, 204, 113, 0.06);
    border: 1px solid rgba(46, 204, 113, 0.15);
    border-radius: 4px;
    padding: 8px;
    margin-top: 4px;
    line-height: 1.5;
    font-style: italic;
    animation: personaFadeIn 0.3s ease-out;
}
.ai-persona-confirmation.hidden {
    display: none;
}

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

.ai-persona-spinner {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--text-dim);
    padding: 6px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ai-persona-spinner.hidden {
    display: none;
}
.spinner-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border: 2px solid rgba(11, 111, 218, 0.3);
    border-top-color: #0b6fda;
    border-radius: 50%;
    animation: spinnerSpin 0.8s linear infinite;
}
@keyframes spinnerSpin {
    to { transform: rotate(360deg); }
}

/* Persona generation banner — prominent, full-width warning */
.persona-generation-banner {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border: 1px solid var(--accent);
    border-radius: 6px;
    padding: 12px 16px;
    margin-top: 10px;
    font-family: var(--mono);
    animation: personaBannerPulse 2s ease-in-out infinite;
}
.persona-generation-banner.hidden {
    display: none;
}
.persona-gen-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--accent);
}
.persona-gen-warning {
    font-size: 11px;
    color: var(--orange, #e67e22);
    margin-top: 6px;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.persona-gen-status {
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 4px;
}
@keyframes personaBannerPulse {
    0%, 100% { border-color: var(--accent); }
    50% { border-color: var(--orange, #e67e22); }
}

/* Admin persona generated fields (visible only to admins) */
.admin-persona-details {
    margin-top: 8px;
    font-family: var(--mono);
}
.admin-persona-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 9px;
    font-weight: 700;
    color: var(--text-dim);
    cursor: pointer;
    padding: 4px 0;
    border-top: 1px solid var(--border);
}
.admin-persona-header:hover {
    color: var(--text);
}
.admin-persona-content {
    font-family: var(--mono);
    overflow: hidden;
    transition: max-height 0.2s;
}
.admin-persona-content.collapsed {
    display: none;
}

/* Pronouns custom input */
.profile-pronouns-custom {
    margin-top: 4px;
    font-family: var(--mono);
    font-size: 12px;
}

/* Profile pronouns dropdown */
#profile-pronouns {
    font-family: var(--mono);
    font-size: 12px;
    background: #161619;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 6px 8px;
    width: 100%;
}

/* v3.2.3: Profile collapsible sections (left pane) — mirrors admin-section pattern */
.profile-collapsible-section {
    border-bottom: 1px solid var(--border);
    padding: 0 !important;
}
.profile-collapsible-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    cursor: pointer;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--amber);
    user-select: none;
    transition: background 0.15s;
}
.profile-collapsible-header:hover {
    background: var(--surface-hover);
}
.profile-chevron {
    font-size: 12px;
    color: var(--text-dim);
    transition: transform 0.2s;
    display: inline-block;
}
.profile-chevron.open {
    transform: rotate(90deg);
}
/* v1.8: Collapsed score badges — visible only when section is collapsed */
.profile-header-badges {
    display: none;
    gap: 6px;
    margin-left: 10px;
    flex-wrap: nowrap;
    overflow: hidden;
}
/* Show badges only when the next sibling content is collapsed */
.profile-right-section-header:has(+ .profile-collapsible-content.collapsed) .profile-header-badges {
    display: inline-flex;
}
.profile-header-badge {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    white-space: nowrap;
    cursor: default;
    position: relative;
    padding: 1px 4px;
    border-radius: 3px;
    background: rgba(255,255,255,0.04);
    transition: background 0.15s;
}
.profile-header-badge:hover {
    background: rgba(255,255,255,0.10);
}
.badge-abbrev {
    opacity: 0.6;
    font-weight: 400;
}
/* v1.8: Profile export button */
.profile-export-btn {
    background: rgba(0,150,136,0.12);
    border: 1px solid rgba(0,150,136,0.25);
    color: #009688;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    letter-spacing: 0.5px;
    margin-left: auto;
    margin-right: 8px;
    flex-shrink: 0;
}
.profile-export-btn:hover {
    background: rgba(0,150,136,0.2);
    border-color: rgba(0,150,136,0.4);
}

/* Privacy label sits immediately left of the EXPORT button. Same typographic
   rhythm as EXPORT (mono / 9px / 600 / 0.5px tracking) but red, no chrome,
   not a button — just a hover-tipped word. The adjacent-sibling rule below
   neutralizes EXPORT's auto left-margin so the two stay grouped on the right
   instead of pushing apart. */
.profile-privacy-label {
    margin-left: auto;
    margin-right: 6px;
    color: var(--red);
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 2px 4px;
    cursor: help;
    flex-shrink: 0;
    user-select: none;
}
.profile-privacy-label + .profile-export-btn {
    margin-left: 0;
}

.profile-collapsible-content {
    padding: 0 16px 14px;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}
.profile-collapsible-content.collapsed {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
}

/* v3.2.3: Profile right-pane collapsible sections */
.profile-right-section {
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
}
.profile-right-section:last-child {
    border-bottom: none;
}
.profile-right-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    cursor: pointer;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--teal);
    user-select: none;
    transition: background 0.15s;
}
.profile-right-section-header:hover {
    background: var(--surface-hover);
}

/* v3.2.3: Account info — footer-style, compact, read-only informational */
.profile-account-info {
    opacity: 0.45;
    margin-top: auto;
    margin-bottom: 4px !important;
    padding: 8px 0 2px !important;
    border-top: 1px solid rgba(255,255,255,0.04);
    border-bottom: none !important;
    transition: opacity 0.2s;
}
.profile-account-info:hover {
    opacity: 0.7;
}
.profile-account-title {
    font-size: 8px !important;
    letter-spacing: 1.5px;
    color: var(--text-dim) !important;
    margin-bottom: 2px !important;
}
.profile-readonly-compact {
    margin-bottom: 0 !important;
}
.profile-readonly-compact span {
    font-size: 9px !important;
    padding: 1px 0 !important;
    line-height: 1.2;
}
.profile-readonly-compact .profile-label {
    font-size: 8px !important;
    margin-bottom: 0 !important;
}
.profile-readonly-compact .profile-value {
    font-size: 9px !important;
}
.profile-readonly-compact .profile-id {
    font-size: 7px !important;
    word-break: break-all;
}

/* ===== CONTEXT UPLOAD (v3.2.10) ===== */
.context-drop-zone {
    border: 1px dashed var(--border);
    border-radius: 6px;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s;
}
.context-drop-zone:hover { border-color: var(--accent); }
.context-drop-text {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--accent);
}
.context-drop-hint {
    font-size: 9px;
    color: var(--text-dim);
    display: block;
    margin-top: 4px;
}
.context-file-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
}
.context-file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 10px;
    font-family: var(--mono);
    padding: 4px 8px;
    background: var(--surface-hover);
    border-radius: 4px;
}
.context-file-remove {
    cursor: pointer;
    color: var(--red);
    font-size: 12px;
    border: none;
    background: none;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: -12px -8px -12px 0;
    padding: 0;
    transition: opacity 0.2s;
}
.context-file-remove:hover { opacity: 0.7; }
.context-upload-progress { margin-top: 6px; }
.context-upload-item {
    display: flex; align-items: center; gap: 8px;
    font-size: 10px; font-family: var(--mono);
    padding: 6px 8px; background: var(--surface-hover); border-radius: 4px;
}
.context-upload-filename { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.context-upload-bar-track { flex: 1; height: 6px; background: var(--surface); border-radius: 3px; overflow: hidden; }
.context-upload-bar-fill { height: 100%; width: 0%; background: var(--accent); border-radius: 3px; transition: width 0.2s ease; }
.context-upload-bar-fill.processing { animation: uploadPulse 1s ease-in-out infinite; }
.context-upload-pct { color: var(--text-dim); min-width: 65px; text-align: right; }
@keyframes uploadPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ===== PAUSE / RESUME (v3.2.10 + Orch v1.2) ===== */
.pause-btn {
    background: none;
    border: none;
    font-size: 14px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    transition: all 0.2s;
    flex-shrink: 0;
}
.pause-btn.running { color: #22c55e; }
.pause-btn.paused  { color: #f59e0b; }
.pause-btn:hover   { background: var(--surface-hover); }

.paused-banner {
    background: rgba(245,158,11,0.15);
    border: 1px solid rgba(245,158,11,0.3);
    color: var(--amber);
    font-family: var(--mono);
    font-size: 10px;
    padding: 6px 20px;
    text-align: center;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

/* Body Language v1.4: Consensus Lock Banner */
.consensus-lock-banner {
    background: rgba(245,158,11,0.12);
    border: 1px solid rgba(245,158,11,0.4);
    border-radius: 6px;
    padding: 14px 18px;
    margin-bottom: 8px;
    text-align: center;
}
.consensus-lock-message {
    font-family: 'JetBrains Mono', var(--mono);
    font-size: 11px;
    color: #f59e0b;
    line-height: 1.5;
    margin-bottom: 12px;
}
.consensus-lock-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}
.consensus-lock-btn {
    font-family: 'JetBrains Mono', var(--mono);
    font-size: 10px;
    padding: 6px 16px;
    border-radius: 4px;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: all 0.2s;
}
.consensus-lock-end {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
}
.consensus-lock-end:hover {
    background: var(--surface-hover);
}
.consensus-lock-challenge {
    background: transparent;
    border: 1px solid #f59e0b;
    color: #f59e0b;
}
.consensus-lock-challenge:hover {
    background: rgba(245,158,11,0.15);
}

/* Growth Engine v1.0: Coaching Activity styles */
.coaching-session-group {
    margin-bottom: 10px;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.coaching-session-header {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    color: var(--teal);
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}
.coaching-log-entry {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 10px;
    padding: 3px 6px;
    border-radius: 3px;
}
.coaching-log-entry.coaching-aborted {
    background: rgba(230,57,70,0.08);
}
.coaching-dim {
    font-weight: 700;
    color: var(--text);
    min-width: 100px;
}
.coaching-mode {
    color: var(--amber);
    font-size: 9px;
    min-width: 50px;
}
.coaching-stat {
    color: var(--text-dim);
    font-size: 9px;
}
.coaching-eff {
    color: var(--teal);
    font-weight: 700;
    margin-left: auto;
}
.coaching-abort-badge {
    background: rgba(230,57,70,0.2);
    color: #e63946;
    font-size: 8px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
    letter-spacing: 0.5px;
}

/* ── v1.7: Presence Asymmetry Panel ─────────────────────────────── */
.presence-btn.active { background: #06b6d4 !important; color: #fff !important; }
.presence-panel { width: 280px; min-width: 200px; max-width: 40%; background: #1a1a2e; border-left: 2px solid #06b6d4; display: flex; flex-direction: column; overflow-y: auto; overflow: hidden; }
.presence-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid #333; }
.presence-panel-title { color: #06b6d4; font-size: 12px; font-weight: 700; letter-spacing: 1px; }
.presence-panel-close { background: none; border: none; color: var(--text-dim); font-size: 14px; cursor: pointer; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; margin: -12px -12px -12px 0; padding: 0; }
.presence-panel-body { padding: 8px 12px; flex: 1; overflow-y: auto; }
.presence-section { margin-bottom: 16px; }
.presence-section-label { color: #06b6d4; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px; }
.presence-section-content { color: #ccc; font-size: 12px; line-height: 1.5; }
.presence-empty { color: #555; font-style: italic; }
.presence-item { padding: 4px 0; border-bottom: 1px solid #222; }
.presence-item-ai { font-weight: 600; }
.presence-item-detail { font-size: 11px; color: #888; font-style: italic; padding: 2px 0 0 0; line-height: 1.3; }
.presence-trend-up { color: #2ecc71; }
.presence-trend-down { color: #e74c3c; }
.presence-trend-steady { color: #888; }
.presence-alert-item { padding: 6px 8px; margin: 4px 0; border-radius: 4px; background: rgba(6,182,212,0.1); border-left: 3px solid #06b6d4; }
.presence-alert-fading { opacity: 0.4; transition: opacity 2s ease; }
.presence-alert-actions { display: flex; gap: 6px; margin-top: 5px; }
.presence-alert-actions button { background: transparent; border: 1px solid #333; color: #888; font-size: 9px; padding: 2px 8px; border-radius: 3px; cursor: pointer; transition: all 0.15s; }
.presence-alert-actions button:hover { border-color: #06b6d4; color: #06b6d4; }
.presence-alert-actions .alert-surface-btn { border-color: rgba(6,182,212,0.4); color: #06b6d4; }
.presence-alert-actions .alert-surface-btn:hover { background: rgba(6,182,212,0.15); }

/* ── v1.9: Context Pane ─────────────────────────────────────────── */
.context-btn.active { background: var(--yellow) !important; color: #1a1a2e !important; }
.context-pane { width: 320px; min-width: 200px; max-width: 40%; background: #1a1a2e; border-left: 2px solid var(--yellow); display: flex; flex-direction: column; overflow: hidden; }
.context-pane-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid #333; }
.context-pane-title { color: var(--yellow); font-size: 12px; font-weight: 700; letter-spacing: 1px; }
.context-pane-close { background: none; border: none; color: var(--text-dim); font-size: 14px; cursor: pointer; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; margin: -12px -12px -12px 0; padding: 0; }
.context-pane-body { padding: 12px; flex: 1; overflow-y: auto; }
.cp-entry-card { background: #222; border: 1px solid #444; border-radius: 6px; padding: 10px 12px; margin-bottom: 8px; position: relative; }
.cp-entry-type { color: var(--yellow); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.cp-entry-title { color: #fff; font-size: 13px; font-weight: 600; margin: 4px 0; }
.cp-entry-body { color: #bbb; font-size: 12px; line-height: 1.4; }
.cp-entry-actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; }
.cp-entry-actions button { background: none; border: none; color: #666; cursor: pointer; font-size: 12px; }
.cp-entry-actions button:hover { color: var(--yellow); }
.context-pane-add-btn { width: 100%; padding: 8px; background: none; border: 1px dashed var(--yellow); color: var(--yellow); border-radius: 4px; cursor: pointer; font-size: 12px; margin-top: 8px; }
.context-pane-form { margin-top: 12px; }
.context-pane-form.hidden { display: none; }
.cp-input { width: 100%; padding: 8px; background: #222; border: 1px solid #444; color: #ccc; border-radius: 4px; margin-bottom: 8px; font-size: 12px; box-sizing: border-box; }
.cp-textarea { min-height: 80px; resize: vertical; font-family: inherit; }
.cp-form-actions { display: flex; gap: 8px; }
.cp-save-btn { padding: 6px 16px; background: var(--yellow); color: #1a1a2e; border: none; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 600; }
.cp-cancel-btn { padding: 6px 16px; background: #444; color: #ccc; border: none; border-radius: 4px; cursor: pointer; font-size: 12px; }

/* v3.3: Session info block in context pane */
.cp-session-info { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.cp-session-field { margin-bottom: 10px; }
.cp-session-field:last-child { margin-bottom: 0; }
.cp-session-label { display: block; font-family: var(--mono); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); margin-bottom: 3px; }
.cp-label-target { color: #1abc9c; }
.cp-label-premise { color: #bb8fce; }
.cp-label-context { color: #6a9ec9; }
.cp-session-value { font-size: 12px; color: var(--text); line-height: 1.4; word-wrap: break-word; white-space: normal; }
.cp-session-file { font-size: 11px; color: var(--text-muted); padding: 1px 0; }

/* ADV toggle removed — DEBATE is now a top-level mode button */

/* ── North Star Editor ──────────────────────────────────────────── */
.north-star-editor { padding: 8px 0; }
.ns-label { display: block; color: #888; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; margin-top: 8px; }
.ns-textarea { width: 100%; min-height: 60px; background: #222; border: 1px solid #444; color: #ccc; border-radius: 4px; padding: 8px; font-size: 12px; resize: vertical; font-family: inherit; box-sizing: border-box; }
.ns-premise-row { display: flex; gap: 4px; margin: 4px 0; }
.ns-premise-input { flex: 1; padding: 6px 8px; background: #222; border: 1px solid #444; color: #ccc; border-radius: 4px; font-size: 12px; }
.ns-premise-remove { background: none; border: none; color: #666; cursor: pointer; font-size: 14px; }
.ns-add-premise { background: none; border: none; color: var(--yellow); cursor: pointer; font-size: 11px; padding: 4px 0; }
.ns-save-btn { width: 100%; padding: 8px; background: #2ecc71; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 12px; margin-top: 12px; font-weight: 600; }

/* ── Global Tooltip System ─────────────────────────────────────── */
.global-tooltip {
    position: fixed;
    z-index: 99999;
    background: #111115;
    border: 1px solid #0B6FDA;
    border-radius: 6px;
    padding: 6px 10px;
    max-width: 360px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    font-family: var(--sans);
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
    pointer-events: none;
}


/* ── Auditor Alerts (v1.9) ────────────────────────────────────────── */

.auditor-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    background: #e74c3c;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    margin-left: 4px;
    padding: 0 4px;
    vertical-align: middle;
}
.auditor-alert-card {
    background: var(--surface, #1a1a2e);
    border: 1px solid var(--border, #333);
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 6px;
    border-left: 3px solid var(--border, #333);
}
.auditor-alert-card.alert-critical { border-left-color: #e74c3c; }
.auditor-alert-card.alert-action-required { border-left-color: #e74c3c; }
.auditor-alert-card.alert-warning { border-left-color: #e67e22; }
.auditor-alert-card.alert-info { border-left-color: #3498db; }
.auditor-alert-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.auditor-alert-type {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text, #e0e0e0);
}
.auditor-alert-severity {
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    background: rgba(255,255,255,0.05);
    color: var(--text-muted, #888);
}
.alert-critical .auditor-alert-severity { background: rgba(231,76,60,0.2); color: #e74c3c; }
.alert-action-required .auditor-alert-severity { background: rgba(231,76,60,0.2); color: #e74c3c; }
.alert-warning .auditor-alert-severity { background: rgba(230,126,34,0.2); color: #e67e22; }
.auditor-alert-headline {
    font-size: 12px;
    font-weight: 600;
    color: var(--text, #e0e0e0);
    margin-bottom: 2px;
}
.auditor-alert-desc {
    font-size: 12px;
    color: var(--text-muted, #888);
    line-height: 1.4;
}
.auditor-alert-time {
    font-size: 10px;
    color: #666;
    margin-top: 4px;
}
.auditor-alert-actions {
    margin-top: 6px;
    text-align: right;
}
.auditor-ack-btn {
    background: transparent;
    border: 1px solid var(--border, #333);
    color: var(--text-muted, #888);
    font-size: 10px;
    padding: 3px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}
.auditor-ack-btn:hover {
    border-color: var(--accent, #0B6FDA);
    color: var(--accent, #0B6FDA);
}
.auditor-ack-all {
    text-align: center;
    padding-top: 4px;
}


/* ── Pulse Check Modal (v1.0) ─────────────────────────────────── */

.pulse-modal {
    background: var(--bg, #0a0a0c);
    border: 1px solid var(--accent, #0B6FDA);
    border-radius: 12px;
    max-width: 680px;
    width: 90vw;
    min-height: 400px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 40px rgba(11,111,218,0.15), 0 0 80px rgba(0,0,0,0.6);
}
.pulse-modal-header {
    padding: 20px 24px 12px;
    border-bottom: 1px solid var(--border, #2a2a32);
}
.pulse-title {
    font-family: var(--mono, monospace);
    font-size: 16px;
    font-weight: 700;
    color: var(--accent, #0B6FDA);
    letter-spacing: 2px;
    margin: 0;
}
.pulse-subtitle {
    font-size: 11px;
    color: var(--text-muted, #8a8a96);
    margin: 4px 0 0;
}
.pulse-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Welcome + Closing screens */
.pulse-welcome-screen,
.pulse-closing-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px 12px;
    min-height: 240px;
}
.pulse-screen-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text, #e8e8ec);
    margin-bottom: 16px;
}
.pulse-screen-text {
    font-size: 13px;
    color: var(--text-muted, #8a8a96);
    line-height: 1.6;
    max-width: 480px;
}
.pulse-screen-text p {
    margin: 6px 0;
}

/* Section + question titles */
.pulse-section-title {
    font-family: var(--mono, monospace);
    font-size: 12px;
    font-weight: 700;
    color: var(--accent, #0B6FDA);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.pulse-section-subtitle {
    font-size: 11px;
    color: var(--text-muted, #8a8a96);
    margin-bottom: 16px;
}

/* Individual question */
.pulse-question {
    margin-bottom: 18px;
}
.pulse-question-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text, #e8e8ec);
    margin-bottom: 8px;
    line-height: 1.4;
}
.pulse-required {
    color: var(--accent, #0B6FDA);
}
.pulse-validation-error {
    border-radius: 6px;
    outline: 1px solid var(--red, #e63946);
    outline-offset: 4px;
}

/* Radio group */
.pulse-radio-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pulse-radio-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    background: var(--surface, #141418);
    border: 1px solid var(--border, #2a2a32);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.pulse-radio-option:hover {
    border-color: var(--text-dim, #5a5a66);
}
.pulse-radio-option.selected {
    border-color: var(--accent, #0B6FDA);
    background: rgba(11,111,218,0.08);
}
.pulse-radio-option input[type="radio"] {
    display: none;
}
.pulse-radio-circle {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--border, #2a2a32);
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.15s;
}
.pulse-radio-option.selected .pulse-radio-circle {
    border-color: var(--accent, #0B6FDA);
}
.pulse-radio-option.selected .pulse-radio-circle::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent, #0B6FDA);
}
.pulse-radio-text {
    font-size: 12px;
    color: var(--text, #e8e8ec);
    flex: 1;
}
.pulse-other-input {
    flex: 1;
    background: var(--bg, #0a0a0c);
    border: 1px solid var(--border, #2a2a32);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    color: var(--text, #e8e8ec);
    font-family: inherit;
}
.pulse-other-input:focus {
    border-color: var(--accent, #0B6FDA);
    outline: none;
}

/* Text input */
.pulse-text-input {
    width: 100%;
    background: var(--surface, #141418);
    border: 1px solid var(--border, #2a2a32);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 12px;
    color: var(--text, #e8e8ec);
    font-family: inherit;
    resize: vertical;
    min-height: 60px;
    line-height: 1.5;
    box-sizing: border-box;
}
.pulse-text-input:focus {
    border-color: var(--accent, #0B6FDA);
    outline: none;
}
.pulse-text-input::placeholder {
    color: var(--text-dim, #5a5a66);
}
.pulse-not-sure {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted, #8a8a96);
    margin-top: 6px;
    cursor: pointer;
}

/* Scale row (1–10 buttons) */
.pulse-scale-row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.pulse-scale-label {
    font-size: 10px;
    color: var(--text-dim, #5a5a66);
    min-width: 60px;
}
.pulse-scale-label:last-child {
    text-align: right;
}
.pulse-scale-btn {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: var(--surface, #141418);
    border: 1px solid var(--border, #2a2a32);
    color: var(--text-muted, #8a8a96);
    font-family: var(--mono, monospace);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}
.pulse-scale-btn:hover {
    border-color: var(--text-dim, #5a5a66);
    color: var(--text, #e8e8ec);
}
.pulse-scale-btn.selected {
    background: var(--accent, #0B6FDA);
    border-color: var(--accent, #0B6FDA);
    color: #fff;
}

/* Checkbox grouped (multi-select) */
.pulse-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pulse-checkbox-category {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-dim, #5a5a66);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 8px;
    margin-bottom: 2px;
}
.pulse-checkbox-category:first-child {
    margin-top: 0;
}
.pulse-checkbox-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 6px;
    background: var(--surface, #141418);
    border: 1px solid var(--border, #2a2a32);
    cursor: pointer;
    font-size: 12px;
    color: var(--text, #e8e8ec);
    transition: border-color 0.15s;
}
.pulse-checkbox-option:hover {
    border-color: var(--text-dim, #5a5a66);
}
.pulse-checkbox-option input[type="checkbox"] {
    accent-color: var(--accent, #0B6FDA);
}
/* v5.13: Clear separator before "None of the above" */
.pulse-none-separator {
    border-top: 1px solid var(--text-dim, #5a5a66);
    margin: 14px 0 6px;
    opacity: 0.4;
}
.pulse-none-option {
    font-style: italic;
    opacity: 0.85;
}

/* Footer: progress bar + buttons */
.pulse-modal-footer {
    padding: 12px 24px 16px;
    border-top: 1px solid var(--border, #2a2a32);
}
.pulse-progress {
    height: 3px;
    background: var(--border, #2a2a32);
    border-radius: 2px;
    margin-bottom: 12px;
    overflow: hidden;
}
.pulse-progress-bar {
    height: 100%;
    background: var(--accent, #0B6FDA);
    border-radius: 2px;
    transition: width 0.3s ease;
    width: 0%;
}
.pulse-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* ── Pulse Admin Section ──────────────────────────────────────── */

.pulse-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    background: #f59e0b;
    color: #000;
    font-size: 9px;
    font-weight: 700;
    font-family: var(--mono, monospace);
    margin-left: 6px;
    padding: 0 4px;
    vertical-align: middle;
}
.pulse-admin-summary {
    font-family: var(--mono, monospace);
    font-size: 11px;
    color: var(--text-muted, #8a8a96);
    margin-bottom: 10px;
}
.pulse-admin-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.pulse-download-btn:disabled {
    opacity: 0.4;
    cursor: default;
}
.pulse-last-download {
    font-family: var(--mono, monospace);
    font-size: 9px;
    color: var(--text-dim, #5a5a66);
}

/* v1.3 §5.12.10: Admin Pulse Preview */
.pulse-preview-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.pulse-preview-btn {
    font-size: 9px !important;
    padding: 4px 10px !important;
    background: transparent !important;
    border: 1px solid var(--border) !important;
    color: var(--text-muted) !important;
}
.pulse-preview-btn:hover {
    border-color: var(--amber) !important;
    color: var(--amber) !important;
}
.pulse-preview-banner {
    background: rgba(245,166,35,0.15);
    border: 1px solid var(--amber);
    color: var(--amber);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
    padding: 6px 12px;
    border-radius: 4px;
    margin-bottom: 8px;
}


/* ── Zoom Control ────────────────────────────────────────────── */
.zoom-control {
    display: flex;
    align-items: center;
    gap: 2px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 14px;
    padding: 3px 8px;
    background: rgba(255, 255, 255, 0.05);
}
.zoom-btn {
    background: transparent;
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, text-shadow 0.15s;
    padding: 0;
    color: #ccc;
}
.zoom-btn:hover {
    color: var(--cyan, #00d4ff);
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.4);
}
.zoom-btn:disabled {
    opacity: 0.25;
    cursor: default;
    color: #666;
    text-shadow: none;
}
.zoom-icon {
    font-size: 14px;
    line-height: 1;
    cursor: default;
    user-select: none;
    margin: 0 1px;
}

/* Zoom levels — applied to <body> so entire viewport scales with no gap */
body.zoom-1 { zoom: 1.15; }
body.zoom-2 { zoom: 1.3;  }
body.zoom-3 { zoom: 1.5;  }

/* ── Bug Report (v5.13) ───────────────────────────────────────── */

/* Bug button — inline in header-right, left of admin/profile */
.bug-report-btn {
    background: transparent;
    border: 1px solid var(--border, #2a2a32);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    font-size: 14px;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    padding: 0;
}
.bug-report-btn:hover {
    border-color: var(--red, #e63946);
    background: var(--red-glow, rgba(230,57,70,0.2));
    box-shadow: 0 0 10px rgba(230,57,70,0.3);
}

/* Bug report modal overlay — must sit above welcome overlay (z-index 100) */
#bug-report-modal {
    z-index: 9999;
}

/* Modal — wider than standard for form content */
.bug-report-modal {
    width: 560px;
    max-width: 95vw;
    max-height: 85vh;
    overflow-y: auto;
}
.bug-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text, #e8e8ec);
    margin-bottom: 6px;
}
.bug-optional {
    font-weight: 400;
    font-size: 11px;
    color: var(--text-dim, #5a5a66);
}
.modal-field {
    margin-bottom: 14px;
}

/* Severity + happened-before radio groups */
.bug-severity-radios {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.bug-radio {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text, #e8e8ec);
    cursor: pointer;
}
.bug-radio input[type="radio"] {
    accent-color: var(--accent, #0B6FDA);
    width: 14px;
    height: 14px;
    cursor: pointer;
}
.severity-critical { color: var(--red, #e63946); font-weight: 600; }
.severity-moderate { color: var(--yellow, #f4c430); font-weight: 600; }
.severity-minor { color: var(--green, #2ecc71); font-weight: 600; }
.bug-severity-desc {
    font-size: 11px;
    color: var(--text-dim, #5a5a66);
    font-weight: 400;
}

/* Textareas */
.bug-textarea {
    width: 100%;
    background: var(--surface, #141418);
    border: 1px solid var(--border, #2a2a32);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 12px;
    color: var(--text, #e8e8ec);
    font-family: inherit;
    resize: vertical;
    line-height: 1.5;
    box-sizing: border-box;
}
.bug-textarea:focus {
    border-color: var(--accent, #0B6FDA);
    outline: none;
}
.bug-textarea::placeholder {
    color: var(--text-dim, #5a5a66);
}

/* Screenshot upload zone */
.bug-screenshot-zone {
    background: var(--bg, #0a0a0c);
    border: 1px dashed var(--border, #2a2a32);
    border-radius: 8px;
    padding: 12px 16px;
    text-align: center;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-muted, #8a8a96);
    font-family: var(--mono, monospace);
    transition: border-color 0.15s, color 0.15s;
}
.bug-screenshot-zone:hover,
.bug-screenshot-zone.drag-over {
    border-color: var(--accent, #0B6FDA);
    color: var(--text, #e8e8ec);
}

/* Inline error message */
.bug-report-error {
    background: var(--red-glow, rgba(230,57,70,0.2));
    border: 1px solid var(--red, #e63946);
    color: var(--red, #e63946);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 12px;
    font-family: var(--mono, monospace);
    margin-bottom: 14px;
    text-align: center;
}

/* Action buttons */
.bug-report-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    justify-content: flex-end;
}

/* Toast notification */
.bug-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--green, #2ecc71);
    color: #000;
    font-family: var(--mono, monospace);
    font-size: 13px;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 8px;
    z-index: 200;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
}
.bug-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}


/* ── Responsive — iPad & Tablet (≤1024px) ────────────────────── */

/* iPad landscape + smaller desktops */
@media (max-width: 1024px) {
    /* Tighten header padding */
    header { padding: 6px 14px; }
    .header-top { gap: 4px; }

    /* Messages: wider bubbles, tighter padding */
    .message-content { max-width: 88%; }
    .message-row { padding: 0 12px; }

    /* Input area: tighter */
    .input-area { padding: 10px 14px; }

    /* Presence & context panes: narrower */
    .presence-panel { width: 220px; min-width: 160px; }
    .context-pane { width: 260px; min-width: 160px; }

    /* Admin dashboard: tighter split */
    .admin-dashboard-left { flex: 0 0 55%; }
    .admin-dashboard-right { flex: 0 0 45%; padding: 12px 14px; }
    .admin-dashboard-header { padding: 10px 16px; }
    .admin-dashboard-topbar { padding: 10px 16px; }

    /* Profile panel: narrower left pane */
    .profile-left-pane { flex: 0 0 280px; padding: 12px; }
    .profile-right-pane { padding: 14px; }

    /* Harm grid: 2 columns instead of 3 */
    .harm-grid { grid-template-columns: 1fr 1fr; }
}

/* iPad portrait + large phones */
@media (max-width: 768px) {
    /* Header: compact */
    header { padding: 4px 10px; }
    .header-top { min-height: 36px; }

    /* Messages: near full-width, smaller avatars */
    .message-content { max-width: 92%; }
    .message-row { padding: 0 8px; }
    .label-icon { width: 26px; height: 26px; font-size: 11px; }
    .avatar { width: 26px; height: 26px; font-size: 12px; }
    .avatar-spacer { width: 26px; }
    .speaker-label { font-size: 10px; }

    /* Input: tighter padding */
    .input-area { padding: 8px 10px; }
    .input-row { gap: 6px; }

    /* Premise banner */
    .premise-banner { padding: 6px 12px; }

    /* Session context bar */
    .session-context-bar { margin: 4px 10px 6px; padding: 6px 10px; }

    /* Presence & context panes: overlay full width on small screens */
    .presence-panel { position: absolute; right: 0; top: 0; bottom: 0; width: 100%; max-width: 100%; z-index: 20; }
    .context-pane { position: absolute; right: 0; top: 0; bottom: 0; width: 100%; max-width: 100%; z-index: 20; }

    /* Admin dashboard: stack left/right into single column */
    .admin-dashboard-body { flex-direction: column; }
    .admin-dashboard-left { flex: none; overflow-y: auto; border-right: none; border-bottom: 1px solid var(--border); max-height: 50vh; }
    .admin-dashboard-right { flex: 1; overflow-y: auto; }
    .admin-dashboard-header { padding: 8px 12px; }
    .admin-dashboard-topbar { padding: 8px 12px; }
    .admin-dashboard-title { font-size: 12px; }

    /* Admin metrics grid: single column */
    .admin-metrics-grid { grid-template-columns: 1fr; }
    .cm-breakdown-grid { grid-template-columns: 1fr; }

    /* Profile panel: stack panes */
    .profile-two-pane { flex-direction: column; }
    .profile-left-pane { flex: none; border-right: none; border-bottom: 1px solid var(--border); max-height: 40vh; }
    .profile-right-pane { flex: 1; }

    /* Welcome profile: already stacks at 700px, fine */

    /* Modals: wider on small screens */
    .modal-content { width: 95vw; }
    .pulse-modal-content { width: 95vw; }

    /* Harm grid: single column */
    .harm-grid { grid-template-columns: 1fr; }

    /* Scratchpad */
    .scratchpad-pane { height: 30%; }
}

/* Small phones (≤480px) */
@media (max-width: 480px) {
    .message-content { max-width: 96%; }
    .message-row { padding: 0 6px; }
    .input-area { padding: 6px 8px; }
    header { padding: 4px 8px; }
    .premise-banner { padding: 4px 8px; gap: 6px; }
    .premise-label { font-size: 9px; }
    .premise-text { font-size: 11px; }
    .session-context-bar { margin: 2px 6px 4px; font-size: 10px; }
}


/* ── Utility Classes ──────────────────────────────────────────── */

.hidden {
    display: none !important;
}

/* ── Bug #7: Pre-flight Participant Confirm Modal ──────────────── */
.modal.preflight-modal {
    width: 90vw;
    max-width: 1300px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    padding: 24px 24px 20px;
}

.preflight-summary {
    text-align: center;
    color: var(--text-dim);
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 18px;
    padding: 0 8px;
}

.preflight-summary strong {
    color: var(--accent);
    font-weight: 600;
}

.preflight-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 4px 12px;
    margin-bottom: 14px;
    /* Hide the embedded "SAVE AI PREFERENCES" button — the modal's own
       Start Session button calls saveAIPersonality on its way out. */
}

.preflight-body .ai-personality-save,
.preflight-body .profile-msg {
    display: none;
}

.preflight-msg {
    text-align: center;
    font-size: 12px;
    min-height: 16px;
    margin-bottom: 10px;
}

.preflight-buttons {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.preflight-btn {
    padding: 12px 28px;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--mono);
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all 0.2s;
}

.preflight-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.preflight-start {
    background: rgba(46,204,113,0.15);
    color: var(--green);
    border: 1px solid rgba(46,204,113,0.3);
}
.preflight-start:hover:not(:disabled) {
    background: rgba(46,204,113,0.25);
    border-color: rgba(46,204,113,0.6);
}

.preflight-cancel {
    background: transparent;
    color: var(--text-dim);
    border: 1px solid var(--border);
}
.preflight-cancel:hover:not(:disabled) {
    background: rgba(255,255,255,0.04);
    color: var(--text);
}

/* Narrow viewports: stack cards vertically (the existing .ai-personality-section
   already handles its own internal layout, but cap modal width sensibly) */
@media (max-width: 900px) {
    .modal.preflight-modal {
        width: 96vw;
        padding: 18px 14px 16px;
    }
    .preflight-buttons {
        flex-direction: column-reverse;
    }
    .preflight-btn {
        width: 100%;
    }
}