/* ═══════════════════════════════════════════════════════════════════════════
   V4 Layout — 3-Panel Thread-Based UX
   Scoped under .v4-active on #app container
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── V4 Layout Variables ─────────────────────────────────────────────────── */
:root {
    --v4-rail-width: 260px;
    --v4-intel-width: 310px;
    --v4-radius: 12px;
    --v4-radius-sm: 6px;
    --v4-shadow: 0 4px 6px rgba(0,0,0,.07);
    --v4-shadow-lg: 0 10px 25px rgba(0,0,0,.12);
}

/* ── Hide overlay staging area when V4 active ────────────────────────────── */
/* #content-area holds #view-* overlay panes at rest — must stay hidden      */
.v4-active #content-area { display: none; }

/* ── Show V4 layout only when active ─────────────────────────────────────── */
#v4-layout { display: none; }
.v4-active #v4-layout { display: grid; }

/* ═══════════════════════════════════════════════════════════════════════════
   MAIN GRID (Desktop)
   ═══════════════════════════════════════════════════════════════════════════ */
#v4-layout {
    grid-template-columns: var(--v4-rail-width) 1fr var(--v4-intel-width);
    grid-template-rows: 1fr;
    grid-template-areas: "rail canvas intel";
    height: 100vh;
    overflow: hidden;
}

/* Single breakpoint: desktop (>1024px) uses full 3-panel, mobile (≤1024px) uses single column */

/* ═══════════════════════════════════════════════════════════════════════════
   LEFT RAIL — Thread List
   ═══════════════════════════════════════════════════════════════════════════ */
#v4-rail {
    grid-area: rail;
    background: var(--surface-primary);
    border-right: 1px solid var(--color-gray-200);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Brand header */
.v4-rail-brand {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--color-gray-100);
    flex-shrink: 0;
}
.v4-rail-logo {
    width: 28px;
    height: 28px;
    background: transparent;
    border: 2px dashed currentColor;
    box-sizing: border-box;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #243c34;
    font-weight: 700;
    font-size: 13px;
}
.v4-rail-brand-name {
    font-weight: 700;
    font-size: 15px;
    color: var(--color-primary);
    flex: 1;
}
.v4-rail-icon {
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    color: var(--color-gray-400);
    border-radius: var(--v4-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: all .12s;
}
.v4-rail-icon:hover {
    background: var(--color-gray-100);
    color: var(--color-gray-700);
}

/* Thread list header */
.v4-rail-threads-hdr {
    padding: 10px 16px 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.v4-rail-threads-lbl {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-gray-500);
    font-weight: 700;
}
.v4-rail-new-btn {
    padding: 3px 10px;
    border: 1px dashed var(--color-gray-300);
    background: transparent;
    color: var(--color-gray-500);
    border-radius: var(--v4-radius-sm);
    font-size: 12px;
    cursor: pointer;
    transition: all .12s;
    font-family: var(--font-family-base);
}
.v4-rail-new-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-subtle);
}

/* Thread list */
.v4-rail-threads {
    flex: 1;
    overflow-y: auto;
    padding: 4px 8px;
}

/* Individual thread item */
.v4-thread {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-radius: var(--v4-radius-sm);
    cursor: pointer;
    transition: all .12s;
    border: 1px solid transparent;
    margin-bottom: 2px;
}
.v4-thread:hover {
    background: rgba(13,148,136,0.07);
}
.v4-thread.active {
    background: rgba(13,148,136,0.12);
    border-color: rgba(13,148,136,0.25);
}
.v4-thread-icon {
    font-size: 12px;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}
.v4-thread-info {
    flex: 1;
    min-width: 0;
}
.v4-thread-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.v4-thread.active .v4-thread-name {
    color: var(--color-primary);
    font-weight: 600;
}
.v4-thread-meta {
    font-size: 12px;
    color: var(--color-gray-400);
    display: flex;
    gap: 4px;
    align-items: center;
    margin-top: 1px;
}
.v4-thread-dot {
    width: 5px;
    height: 5px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}
.v4-thread-dot.active { background: var(--color-primary); }
.v4-thread-dot.open { background: var(--color-warning); }
.v4-thread-dot.resolved { background: var(--color-success); }
.v4-thread-time {
    font-size: 12px;
    color: var(--color-gray-400);
    flex-shrink: 0;
}

/* Thread "..." context menu button */
.v4-thread-more {
    display: none;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--color-gray-400);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    letter-spacing: 1px;
    transition: all .12s;
    font-family: inherit;
}
.v4-thread:hover .v4-thread-more,
.v4-organ-thread:hover .v4-thread-more,
.v4-council-thread:hover .v4-thread-more {
    display: flex;
}
.v4-thread:hover .v4-thread-time {
    display: none;
}
.v4-thread-more:hover {
    background: var(--color-gray-200, #e5e7eb);
    color: var(--color-gray-700, #374151);
}

/* Thread context menu (absolute, appended to body) */
.v4-thread-context-menu {
    position: fixed;
    z-index: 1000;
    background: #fff;
    border: 1px solid var(--color-gray-200, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    min-width: 150px;
    padding: 4px 0;
}
.v4-tcm-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: transparent;
    font-size: 13px;
    color: var(--color-gray-700, #374151);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background .12s;
}
.v4-tcm-item:hover {
    background: var(--color-gray-50, #f9fafb);
}
.v4-tcm-icon {
    font-size: 14px;
    width: 18px;
    text-align: center;
}
.v4-tcm-danger {
    color: var(--color-error, #ef4444);
}
.v4-tcm-danger:hover {
    background: #fef2f2;
}
.v4-tcm-cancel {
    color: var(--color-gray-500);
}
.v4-tcm-confirm-text {
    padding: 8px 14px 4px;
    font-size: 12px;
    color: var(--color-gray-600);
    font-weight: 500;
}
.v4-tcm-confirm-actions {
    display: flex;
    gap: 4px;
    padding: 2px 8px 6px;
}
.v4-tcm-confirm-actions .v4-tcm-item {
    flex: 1;
    justify-content: center;
    border-radius: 5px;
    padding: 6px 10px;
    font-size: 12px;
}

/* Rename input in modal */
.session-rename-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-gray-200, #e5e7eb);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.session-rename-input:focus {
    border-color: var(--color-primary, #0d7377);
    box-shadow: 0 0 0 3px rgba(13,115,119,.1);
}

/* Dividers and sections */
.v4-rail-divider {
    border-top: 1px solid var(--color-gray-100);
    margin: 8px 16px;
}
.v4-rail-resolved-hdr {
    padding: 4px 16px;
    font-size: 12px;
    color: var(--color-gray-400);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    user-select: none;
}
.v4-rail-resolved-hdr:hover {
    color: var(--color-gray-600);
}
.v4-rail-resolved-list {
    padding: 0 8px 8px;
}
.v4-rail-resolved-list .v4-thread {
    opacity: .7;
}

/* Rail footer links (Marketplace/Studio icons) */
.v4-rail-links {
    padding: 6px 16px;
    border-top: 1px solid var(--color-gray-100);
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.v4-rail-link-btn {
    padding: 5px 10px;
    border: 1px solid var(--color-gray-200);
    background: transparent;
    color: var(--color-gray-500);
    border-radius: var(--v4-radius-sm);
    font-size: 12px;
    cursor: pointer;
    transition: all .12s;
    font-family: var(--font-family-base);
    flex: 1;
    text-align: center;
}
.v4-rail-link-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-subtle);
}

/* Identity footer */
.v4-rail-identity {
    padding: 10px 16px;
    border-top: 1px solid var(--color-gray-100);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.v4-rail-avatar {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-accent));
    color: var(--text-on-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}
.v4-rail-user-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.v4-rail-user-top { display: flex; align-items: center; gap: 6px; }
.v4-rail-user-bottom { display: flex; align-items: center; gap: 6px; }
.v4-rail-uname { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.v4-rail-usub { font-size: 11px; color: var(--color-gray-500); white-space: nowrap; }
.v4-rail-signin-btn,
.v4-rail-signout-btn {
    flex-shrink: 0;
    margin-left: 0;
    padding: 4px 12px;
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    white-space: nowrap;
}
.v4-rail-signin-btn {
    background: var(--color-primary);
    color: var(--text-on-accent);
}
.v4-rail-signin-btn:hover { opacity: 0.9; }
.v4-rail-signout-btn {
    background: transparent;
    color: var(--color-gray-500);
    border: 1px solid var(--color-gray-200);
}
.v4-rail-signout-btn:hover {
    background: var(--color-gray-50);
    color: var(--color-gray-700);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CENTER CANVAS
   ═══════════════════════════════════════════════════════════════════════════ */
#v4-canvas {
    grid-area: canvas;
    display: flex;
    flex-direction: column;
    background: var(--color-gray-100, #f3f4f6);
    overflow: hidden;
}

/* Canvas tab bar */
.v4-canvas-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 16px;
    background: var(--surface-primary);
    border-bottom: 1px solid var(--color-gray-200);
    flex-shrink: 0;
}
.v4-ctab {
    padding: 7px 16px;
    border: none;
    background: transparent;
    border-radius: var(--v4-radius-sm);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-gray-500);
    cursor: pointer;
    transition: all .12s;
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-family-base);
    min-height: 44px;
}
.v4-ctab:hover {
    background: var(--color-gray-50);
    color: var(--color-gray-700);
}
.v4-ctab.active {
    background: var(--color-primary-subtle);
    color: var(--color-primary);
    font-weight: 600;
}
/* Tab groups — visual cluster with subtle separator */
.v4-ctab-group {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 4px;
    margin: 0 2px;
    position: relative;
}
.v4-ctab-group::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 25%;
    bottom: 25%;
    width: 1px;
    background: var(--color-gray-200);
}
.v4-ctab-group:first-of-type::before {
    display: none;
}

/* Button cancel state (guardian/task form toggle) */
.btn-cancel {
    background: transparent !important;
    color: var(--color-gray-500) !important;
    border: 1px solid var(--color-gray-300) !important;
}
.btn-cancel:hover {
    color: var(--color-error) !important;
    border-color: var(--color-error) !important;
}

/* Intelligence subtabs (Monitors / Research within canvas tab) */
.v4-intel-stab {
    padding: 7px 16px;
    border: none;
    background: transparent;
    border-radius: var(--v4-radius-sm);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-gray-500);
    cursor: pointer;
    transition: all .12s;
    font-family: var(--font-family-base);
}
.v4-intel-stab:hover {
    background: var(--color-gray-50);
    color: var(--color-gray-700);
}
.v4-intel-stab.active {
    background: var(--color-primary-subtle);
    color: var(--color-primary);
    font-weight: 600;
}

/* Tab badge (insight count) */
.v4-ctab-badge {
    font-size: 12px;
    background: var(--color-error);
    color: var(--text-on-accent);
    padding: 1px 5px;
    border-radius: var(--radius-full);
    font-weight: 600;
    margin-left: 2px;
}

/* Dev To-Do in nav bar — positioned relative for dropdown */
.v4-dev-todo-wrap { position: relative; }

.v4-ctab-spacer { flex: 1; }
/* ---------------------------------------------------------------
   VITALS BAR — Dot constellation (idle) ↔ DNA double helix (thinking)
   --------------------------------------------------------------- */

.v4-vitals {
    flex: 1;
    position: relative;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* DOT CONSTELLATION — foreground at rest, ghost while thinking */
.v4-vitals-constellation {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    opacity: 1;
    transition: opacity 0.9s ease-in-out;
    pointer-events: none;
}

.v4-vitals.thinking .v4-vitals-constellation {
    opacity: 0.07; /* stays as a faint ghost — no hard disappearance */
}

.v4-dot-line {
    stroke: var(--color-primary);
    stroke-width: 0.6;
    opacity: 0.22;
    animation: v4-dot-line-breathe 5s ease-in-out infinite;
}

.v4-dot-line-long {
    opacity: 0.1;
    stroke-dasharray: 2 3;
    animation-delay: 1.5s;
}

@keyframes v4-dot-line-breathe {
    0%, 100% { opacity: 0.14; }
    50%       { opacity: 0.32; }
}

.v4-dot {
    fill: var(--color-primary);
    opacity: 0.55;
    animation: v4-dot-pulse 3.5s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}

@keyframes v4-dot-pulse {
    0%, 100% { opacity: 0.4;  transform: scale(1);    filter: none; }
    50%       { opacity: 0.85; transform: scale(1.55); filter: drop-shadow(0 0 3px var(--color-primary)); }
}

/* DNA DOUBLE HELIX — ghost at rest, foreground while thinking */
.v4-vitals-dna-wrap {
    position: absolute;
    left: 0; top: 0;
    width: 200%;
    height: 100%;
    opacity: 0.07; /* always running, always faintly visible — no dead-stop lurch */
    pointer-events: none;
    animation: v4-dna-slide 3s linear infinite; /* never paused */
    transition: opacity 0.9s ease-in-out;
}

.v4-vitals.thinking .v4-vitals-dna-wrap {
    opacity: 1;
}

@keyframes v4-dna-slide {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.v4-vitals-dna {
    width: 100%;
    height: 100%;
    display: block;
}

/* Base-pair rungs between the two strands */
.v4-dna-rung {
    stroke: var(--color-primary);
    stroke-width: 0.75;
    stroke-linecap: round;
    opacity: 0.22;
}

/* Strands: A is the "front" helix, B the "back" (lower opacity) */
.v4-dna-strand {
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.v4-dna-strand-a {
    stroke: var(--color-primary);
    opacity: 0.8;
}

.v4-dna-strand-b {
    stroke: var(--color-primary);
    opacity: 0.38;
}

/* ── PARTICLE DRIFT (always-on layer, floats above constellation + DNA) ── */
.v4-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.v4-particle {
    position: absolute;
    width: var(--sz, 2.5px);
    height: var(--sz, 2.5px);
    border-radius: 50%;
    background: var(--color-primary);
    top: var(--py, 14px);
    left: 0;
    animation: v4-particle-drift var(--dur, 10s) linear var(--del, 0s) infinite;
    transition: filter 0.9s ease-in-out;
}

@keyframes v4-particle-drift {
    0%   { transform: translateX(-4px);  opacity: 0; }
    10%  { opacity: var(--opacity-peak, 0.45); }
    85%  { opacity: var(--opacity-peak, 0.45); }
    100% { transform: translateX(900px); opacity: 0; }
}

/* Thinking: particles brighten and glow */
.v4-vitals.thinking .v4-particles {
    --opacity-peak: 0.82;
}
.v4-vitals.thinking .v4-particle {
    filter: drop-shadow(0 0 2px var(--color-primary));
}

/* Upload status bar — mobile fallback only (hidden on desktop via :empty) */
#v4-upload-status {
    flex-shrink: 0;
}
#v4-upload-status:empty { display: none; }

/* Intel panel queue slot — always in DOM, slides in/out via max-height */
#v4-intel-queue {
    flex-shrink: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s cubic-bezier(0.4, 0, 0.2, 1),
                border-bottom-color .2s ease;
    border-bottom: 1px solid transparent;
}
#v4-intel-queue.has-items {
    max-height: 300px;
    border-bottom-color: var(--color-gray-100, #f3f4f6);
}

/* Canvas body (holds all tab views) */
.v4-canvas-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Individual canvas view (tab content) */
.v4-canvas-view {
    display: none;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden; /* prevent implicit overflow-x: auto from overflow-y */
    flex-direction: column;
}
.v4-canvas-view.active {
    display: flex;
}

/* Chat canvas view specifics */
#v4-canvas-chat {
    /* Sessions module renders chat content here */
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEALTH BRIEFING CARD (Cycle 6)
   Renders in chat canvas empty state when no session is selected
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── PSD Briefing ────────────────────────────────────────────────────────── */

.v4-psd-briefing {
    width: 100%;
    max-width: 720px;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 24px 20px 60px;
    animation: v4-hb-fadeIn .3s ease;
}

.v4-psd-kicker {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-primary, #0d9488);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.v4-psd-kicker::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border, #e5e7eb);
}

.v4-psd-rule {
    height: 1px;
    background: var(--color-border, #e5e7eb);
    margin: 22px 0;
}

/* Hero card */
.v4-psd-hero {
    width: 100%;
    box-sizing: border-box;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-left: 3px solid var(--color-primary, #0d9488);
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 24px;
    cursor: pointer;
    transition: box-shadow .2s;
}
.v4-psd-hero:hover { box-shadow: 0 4px 20px rgba(0,0,0,.07); }
.v4-psd-hero-byline { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.v4-psd-hero-chip {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-primary-dark, #0f766e);
    background: var(--color-primary-subtle, #f0fdfa);
    padding: 2px 8px;
    border-radius: 4px;
}
.v4-psd-hero-time { font-size: 11px; color: var(--color-gray-400); }
.v4-psd-hero-headline {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-gray-900, #111827);
    margin-bottom: 8px;
    letter-spacing: -.015em;
}
.v4-psd-hero-body {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--color-gray-600, #374151);
    margin-bottom: 14px;
}
.v4-psd-hero-source { font-size: 11px; color: var(--color-gray-400); margin-bottom: 12px; }
.v4-psd-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: var(--color-primary, #0d9488);
    border: none;
    border-radius: 6px;
    padding: 7px 14px;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s;
}
.v4-psd-hero-cta:hover { background: var(--color-primary-dark, #0f766e); }

/* Status bar */
.v4-psd-status-bar {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-surface, #fff);
}
.v4-psd-status-item {
    flex: 1;
    padding: 11px 12px;
    border-right: 1px solid var(--color-border, #e5e7eb);
    cursor: pointer;
    transition: background .15s;
}
.v4-psd-status-item:last-child { border-right: none; }
.v4-psd-status-item:hover { background: var(--color-bg, #f9fafb); }
.v4-psd-status-number {
    font-size: 20px;
    font-weight: 800;
    color: var(--color-primary, #0d9488);
    letter-spacing: -.03em;
    line-height: 1;
    margin-bottom: 3px;
}
.v4-psd-status-number--muted { color: var(--color-gray-300, #d1d5db); }
.v4-psd-status-number--warn  { color: #f59e0b; }
.v4-psd-status-label { font-size: 10.5px; color: var(--color-gray-500, #6b7280); font-weight: 500; line-height: 1.3; }

/* Starters */
.v4-psd-starters { display: flex; flex-direction: column; gap: 7px; margin-bottom: 10px; }
.v4-psd-starter {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    text-align: left;
    width: 100%;
    font-family: inherit;
}
.v4-psd-starter:hover {
    border-color: var(--color-primary, #0d9488);
    box-shadow: 0 2px 10px rgba(13,148,136,.08);
}
.v4-psd-starter-icon {
    font-size: 15px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-subtle, #f0fdfa);
    border-radius: 7px;
    flex-shrink: 0;
    transition: transform .2s;
}
.v4-psd-starter:hover .v4-psd-starter-icon { transform: scale(1.08); }
.v4-psd-starter-text { font-size: 13.5px; font-weight: 500; color: var(--color-gray-700, #374151); line-height: 1.4; flex: 1; }
.v4-psd-starter-arrow { font-size: 13px; color: var(--color-gray-400); flex-shrink: 0; transition: transform .15s, color .15s; }
.v4-psd-starter:hover .v4-psd-starter-arrow { transform: translateX(3px); color: var(--color-primary, #0d9488); }

/* New conversation button */
.v4-psd-new-convo-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 12px 16px;
    margin-bottom: 4px;
    background: var(--color-primary, #0d9488);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    transition: background .15s;
}
.v4-psd-new-convo-btn:hover { background: var(--color-primary-dark, #0f766e); }

/* Content rows */
.v4-psd-content-row { margin-bottom: 24px; width: 100%; box-sizing: border-box; min-width: 0; }
.v4-psd-row-hdr { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; width: 100%; box-sizing: border-box; flex-wrap: wrap; }
.v4-psd-row-title { font-size: 13.5px; font-weight: 700; color: var(--color-gray-800, #1f2937); }
.v4-psd-row-count { font-size: 11px; color: var(--color-gray-400); font-weight: 500; }
.v4-psd-row-seeall {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-primary, #0d9488);
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
}
.v4-psd-row-seeall:hover { text-decoration: underline; }

/* Horizontal scroll */
.v4-psd-h-scroll { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.v4-psd-h-scroll::-webkit-scrollbar { display: none; }

/* Content card */
.v4-psd-card {
    min-width: 200px;
    max-width: 200px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    padding: 12px 13px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color .15s, box-shadow .15s;
}
.v4-psd-card:hover {
    border-color: var(--color-primary, #0d9488);
    box-shadow: 0 3px 14px rgba(13,148,136,.08);
}
.v4-psd-card-kicker {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-primary, #0d9488);
}
.v4-psd-card-kicker--warn  { color: #f59e0b; }
.v4-psd-card-kicker--alert { color: #ef4444; }
.v4-psd-card-headline { font-size: 12.5px; font-weight: 600; line-height: 1.5; color: var(--color-gray-800, #1f2937); flex: 1; }
.v4-psd-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-primary, #0d9488);
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
    align-self: flex-start;
    transition: gap .15s;
}
.v4-psd-card:hover .v4-psd-card-cta { gap: 6px; }

/* Labs collapsible */
.v4-psd-labs-wrap { }
.v4-psd-labs-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
    width: 100%;
    text-align: left;
    font-family: inherit;
}
.v4-psd-labs-toggle:hover { background: var(--color-bg, #f9fafb); }
.v4-psd-labs-open .v4-psd-labs-toggle { border-radius: 8px 8px 0 0; border-bottom-color: transparent; }
.v4-psd-labs-label { font-size: 13px; font-weight: 700; color: var(--color-gray-800, #1f2937); flex: 1; }
.v4-psd-labs-badge { font-size: 11px; font-weight: 700; background: #fee2e2; color: #b91c1c; padding: 2px 7px; border-radius: 4px; }
.v4-psd-labs-chevron { font-size: 11px; color: var(--color-gray-400); transition: transform .2s; }
.v4-psd-labs-open .v4-psd-labs-chevron { transform: rotate(180deg); }
.v4-psd-labs-body {
    display: none;
    flex-direction: column;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 4px 14px 10px;
}
.v4-psd-labs-open .v4-psd-labs-body { display: flex; }
.v4-psd-lab-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    font-size: 12.5px;
}
.v4-psd-lab-row:last-child { border-bottom: none; }
.v4-psd-lab-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--color-gray-300); }
.v4-psd-lab-dot--high { background: #f59e0b; }
.v4-psd-lab-dot--low  { background: var(--color-primary, #0d9488); }
.v4-psd-lab-name { color: var(--color-gray-700, #374151); font-weight: 500; flex: 1; }
.v4-psd-lab-value { font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 11.5px; color: var(--color-gray-500, #6b7280); }
.v4-psd-lab-flag { font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 3px; }
.v4-psd-lab-flag--high { background: #fef3c7; color: #92400e; }
.v4-psd-lab-flag--low  { background: #f0fdfa; color: #0f766e; }
.v4-psd-lab-ask {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-primary, #0d9488);
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
    flex-shrink: 0;
}
.v4-psd-lab-ask:hover { text-decoration: underline; }

@media (max-width: 768px) {
    /* Briefing and research cards: tighter padding on mobile */
    .v4-psd-briefing        { padding: 14px 12px 48px; }
    .v4-psd-rc-main         { padding: 11px 12px 8px; }
    .v4-psd-rc-detail       { padding: 0 12px 10px; }
    .v4-psd-rc-footer       { padding: 7px 12px 10px; }
}
@media (max-width: 600px) {
    .v4-psd-briefing        { padding: 12px 10px 48px; }
    .v4-psd-hero            { padding: 14px 15px; }
    .v4-psd-hero-headline   { font-size: 16px; }
    .v4-psd-status-item     { padding: 9px 8px; }
    .v4-psd-status-number   { font-size: 17px; }
    .v4-psd-status-label    { font-size: 9.5px; }
    .v4-psd-starter         { padding: 10px 12px; }
    .v4-psd-starter-text    { font-size: 13px; }
    .v4-psd-new-convo-btn   { padding: 11px 14px; font-size: 13px; }
    .v4-psd-card            { min-width: 160px; max-width: 160px; }
}

/* ── PSD Research Cards (Insights + Scientific Articles) ────────────────── */
/* Visually distinct from EMR-based cards (Guardian, Screening, Labs).       */
/* Full-width vertical list, expandable, indigo/sky-blue accent palette.     */

.v4-psd-research-list { display: flex; flex-direction: column; gap: 10px; width: 100%; min-width: 0; }

.v4-psd-rc {
    width: 100%;
    box-sizing: border-box;
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow .15s, border-color .15s;
    position: relative;
}

/* Insight variant — indigo/purple */
.v4-psd-rc--insight {
    background: rgba(99, 102, 241, 0.06);
    border: 1px solid rgba(99, 102, 241, 0.22);
}
.v4-psd-rc--insight:hover { border-color: rgba(99, 102, 241, 0.42); box-shadow: 0 3px 14px rgba(99,102,241,.08); }

/* Article variant — sky blue */
.v4-psd-rc--article {
    background: rgba(14, 165, 233, 0.05);
    border: 1px solid rgba(14, 165, 233, 0.2);
}
.v4-psd-rc--article:hover { border-color: rgba(14, 165, 233, 0.4); box-shadow: 0 3px 14px rgba(14,165,233,.07); }

/* Main always-visible section */
.v4-psd-rc-main { padding: 13px 15px 10px; box-sizing: border-box; width: 100%; }

/* Header row: type chip + badges */
.v4-psd-rc-header {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.v4-psd-rc-type {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 4px;
}
.v4-psd-rc--insight .v4-psd-rc-type { background: rgba(99,102,241,.14); color: #6366f1; }
.v4-psd-rc--article .v4-psd-rc-type { background: rgba(14,165,233,.14); color: #0284c7; }
.v4-psd-rc-badge {
    font-size: 10px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(0,0,0,.05);
    color: var(--color-gray-500, #6b7280);
}

/* Title */
.v4-psd-rc-title {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--color-gray-800, #1f2937);
    margin-bottom: 6px;
}

/* Summary and patient relevance */
.v4-psd-rc-summary {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--color-gray-600, #4b5563);
    margin-bottom: 5px;
}
.v4-psd-rc-relevance {
    font-size: 12px;
    line-height: 1.5;
    color: var(--color-gray-500, #6b7280);
    font-style: italic;
    margin-bottom: 5px;
}

/* Condition pills */
.v4-psd-rc-conditions { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.v4-psd-rc-pill {
    font-size: 10.5px;
    padding: 2px 7px;
    border-radius: 20px;
    background: rgba(0,0,0,.06);
    color: var(--color-gray-600, #4b5563);
}

/* Expand toggle button */
.v4-psd-rc-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 0;
    font-family: inherit;
    color: var(--color-gray-400, #9ca3af);
    margin-top: 3px;
    transition: color .15s;
}
.v4-psd-rc--insight .v4-psd-rc-toggle:hover { color: #6366f1; }
.v4-psd-rc--article .v4-psd-rc-toggle:hover { color: #0284c7; }
.v4-psd-rc-toggle-icon { font-size: 10px; display: inline-block; transition: transform .2s; }

/* Expanded detail panel */
.v4-psd-rc-detail {
    display: none;
    padding: 0 15px 12px;
    box-sizing: border-box;
    width: 100%;
    border-top: 1px solid rgba(0,0,0,.06);
    margin-top: 2px;
}
.v4-psd-rc.expanded .v4-psd-rc-detail { display: block; }
.v4-psd-rc-detail-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-gray-400, #9ca3af);
    margin: 10px 0 6px;
}
.v4-psd-rc-detail p {
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--color-gray-600, #4b5563);
    margin: 0 0 8px;
    white-space: pre-wrap;
}
.v4-psd-rc-citations { display: flex; flex-direction: column; gap: 0; }
.v4-psd-rc-citation {
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--color-gray-500, #6b7280);
    padding: 6px 0;
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.v4-psd-rc-citation:last-child { border-bottom: none; }
.v4-psd-rc-citation a { color: #6366f1; text-decoration: none; }
.v4-psd-rc-citation a:hover { text-decoration: underline; }
.v4-psd-rc-ext-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    color: #0284c7;
    text-decoration: none;
    margin-top: 4px;
}
.v4-psd-rc-ext-link:hover { text-decoration: underline; }

/* Footer */
.v4-psd-rc-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 15px 11px;
    box-sizing: border-box;
    width: 100%;
    border-top: 1px solid rgba(0,0,0,.05);
}
.v4-psd-rc-date { font-size: 11px; color: var(--color-gray-400, #9ca3af); }
.v4-psd-rc-discuss {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    padding: 4px 9px;
    border-radius: 5px;
    transition: background .15s;
}
.v4-psd-rc--insight .v4-psd-rc-discuss { color: #6366f1; }
.v4-psd-rc--insight .v4-psd-rc-discuss:hover { background: rgba(99,102,241,.1); }
.v4-psd-rc--article .v4-psd-rc-discuss { color: #0284c7; }
.v4-psd-rc--article .v4-psd-rc-discuss:hover { background: rgba(2,132,199,.1); }
.v4-psd-rc-discuss:disabled { opacity: .5; cursor: default; }

/* ── /PSD Research Cards ─────────────────────────────────────────────────── */

/* ── /PSD Briefing ───────────────────────────────────────────────────────── */

.v4-health-briefing {
    max-width: 560px;
    margin: 0 auto;
    padding: 16px 16px 32px;
    animation: v4-hb-fadeIn .3s ease;
}

/* New Session button at top of briefing */
.v4-hb-new-session-btn {
    display: block;
    width: 100%;
    padding: 12px 16px;
    margin-bottom: 16px;
    border: 1.5px dashed var(--color-gray-200, #cbd5e1);
    border-radius: 12px;
    background: var(--surface-primary, #fff);
    color: var(--color-primary, #0d9488);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
.v4-hb-new-session-btn:hover {
    border-color: var(--color-primary, #0d9488);
    background: var(--color-primary-subtle, rgba(13,148,136,.06));
}
.v4-hb-new-session-btn:active {
    transform: scale(0.98);
}

/* Footer text inside briefing (scrolls with content) */
.v4-hb-footer {
    text-align: center;
    padding: 20px 12px 8px;
    color: var(--color-gray-400, #94a3b8);
    font-size: 12px;
}
@keyframes v4-hb-fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.v4-health-briefing.v4-hb-dismissing {
    opacity: 0; transform: translateY(-8px); transition: all .25s ease;
}

/* Header */
.v4-hb-header {
    display: flex; align-items: center; gap: 8px;
    padding: 14px 16px 10px;
}
.v4-hb-title {
    font-size: 15px; font-weight: 700; color: var(--color-gray-800); flex: 1;
}
.v4-hb-timestamp {
    font-size: 12px; color: var(--color-gray-400);
}
.v4-hb-refresh, .v4-hb-dismiss {
    background: none; border: none; cursor: pointer;
    font-size: 12px; color: var(--color-gray-400);
    padding: 2px 6px; border-radius: var(--radius-sm);
    font-family: inherit; transition: all .15s;
}
.v4-hb-refresh:hover { color: var(--color-primary); background: var(--color-primary-subtle); }
.v4-hb-dismiss:hover { color: var(--color-error); background: rgba(239,68,68,.06); }

/* Sections (collapsible) — each visually distinct */
.v4-hb-section {
    margin: 8px 12px; border-radius: var(--radius-md);
    border: 1px solid var(--color-gray-200); overflow: hidden;
}
.v4-hb-section-hdr {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px; cursor: pointer; transition: background .15s;
}
.v4-hb-section-hdr:hover { filter: brightness(0.97); }
.v4-hb-section-icon { font-size: 12px; font-weight: 600; flex: 1; }
.v4-hb-section-count {
    font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 10px;
}
.v4-hb-section-toggle {
    font-size: 12px; color: var(--color-gray-400); transition: transform .2s;
}
.v4-hb-section.collapsed .v4-hb-section-toggle { transform: rotate(-90deg); }
.v4-hb-section-body {
    padding: 4px 12px 10px; display: flex; flex-direction: column; gap: 4px;
    background: var(--surface-primary);
}
.v4-hb-section.collapsed .v4-hb-section-body { display: none; }

/* ── Labs section — red/warm theme ── */
.v4-hb-section[data-section="labs"] {
    border-color: rgba(239,68,68,.25);
}
.v4-hb-section[data-section="labs"] .v4-hb-section-hdr {
    background: linear-gradient(135deg, rgba(239,68,68,.06), rgba(251,191,36,.04));
}
.v4-hb-section[data-section="labs"] .v4-hb-section-icon { color: #b91c1c; }
.v4-hb-section[data-section="labs"] .v4-hb-section-count {
    color: var(--color-error); background: rgba(239,68,68,.1);
}

/* Lab items */
.v4-hb-lab-item {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 8px; border-radius: var(--radius-sm);
    background: var(--color-gray-50); font-size: 12px;
}
.v4-hb-lab-dot {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.v4-hb-lab--critical .v4-hb-lab-dot { background: var(--color-error); }
.v4-hb-lab--high .v4-hb-lab-dot { background: var(--color-warning); }
.v4-hb-lab--low .v4-hb-lab-dot { background: var(--color-primary); }
.v4-hb-lab-name { color: var(--color-gray-700); flex: 1; font-weight: 500; }
.v4-hb-lab-value { color: var(--color-gray-600); font-family: var(--font-mono, monospace); font-size: 12px; }
.v4-hb-lab-flag {
    font-size: 12px; font-weight: 600; padding: 1px 5px; border-radius: 3px;
}
.v4-hb-lab--critical .v4-hb-lab-flag { color: var(--text-on-accent); background: var(--color-error); }
.v4-hb-lab--high .v4-hb-lab-flag { color: #92400e; background: #fef3c7; }
.v4-hb-lab--low .v4-hb-lab-flag { color: var(--color-primary); background: var(--color-primary-subtle); }

/* ── Screening section — amber/teal theme ── */
.v4-hb-section[data-section="screening"] {
    border-color: rgba(217,119,6,.25);
}
.v4-hb-section[data-section="screening"] .v4-hb-section-hdr {
    background: linear-gradient(135deg, rgba(251,191,36,.08), rgba(217,119,6,.04));
}
.v4-hb-section[data-section="screening"] .v4-hb-section-icon { color: #92400e; }
.v4-hb-section[data-section="screening"] .v4-hb-section-count {
    color: #92400e; background: #fef3c7;
}

/* Screening items */
.v4-hb-screening-item {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 8px; border-radius: var(--radius-sm);
    background: var(--color-gray-50); font-size: 12px;
}
.v4-hb-screening-pill {
    font-size: 12px; font-weight: 600; padding: 1px 6px; border-radius: 3px; flex-shrink: 0;
}
.v4-hb-screening--overdue .v4-hb-screening-pill { color: var(--text-on-accent); background: var(--color-error); }
.v4-hb-screening--due_soon .v4-hb-screening-pill { color: #92400e; background: #fef3c7; }
.v4-hb-screening--never_done .v4-hb-screening-pill { color: var(--color-primary); background: var(--color-primary-subtle); }
.v4-hb-screening-name { color: var(--color-gray-700); flex: 1; font-weight: 500; }

/* ── Insights section — blue/purple theme ── */
.v4-hb-section[data-section="insights"] {
    border-color: rgba(20,184,166,.25);
}
.v4-hb-section[data-section="insights"] .v4-hb-section-hdr {
    background: linear-gradient(135deg, rgba(20,184,166,.06), rgba(8,145,178,.04));
}
.v4-hb-section[data-section="insights"] .v4-hb-section-icon { color: #0f766e; }
.v4-hb-section[data-section="insights"] .v4-hb-section-count {
    color: #0f766e; background: rgba(20,184,166,.1);
}

/* Insight items */
.v4-hb-insight-item {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 8px; border-radius: var(--radius-sm);
    background: var(--color-gray-50); font-size: 12px;
}
.v4-hb-insight-dot {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.v4-hb-insight-dot.critical { background: var(--color-error); }
.v4-hb-insight-dot.warning { background: var(--color-warning); }
.v4-hb-insight-dot.info { background: #14b8a6; }
.v4-hb-insight-title { color: var(--color-gray-700); flex: 1; font-weight: 500; }
.v4-hb-discuss-btn,
.v4-hb-insight-discuss {
    font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 3px;
    border: 1px solid #14b8a6; background: transparent;
    color: #14b8a6; cursor: pointer; font-family: inherit;
    transition: all .15s; flex-shrink: 0; margin-left: auto;
}
.v4-hb-discuss-btn:hover,
.v4-hb-insight-discuss:hover { background: #14b8a6; color: var(--text-on-accent); }

/* Conversation Starter Cards — 2-column grid filling canvas */
.v4-hb-cards {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    padding: 20px; align-content: start;
    max-width: 100%;
}
.v4-health-briefing {
    display: flex; flex-direction: column;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}
.v4-hb-card {
    display: flex; flex-direction: column; gap: 0;
    padding: 0; border-radius: 16px; cursor: pointer;
    position: relative; overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    outline: none;
}
.v4-hb-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1), 0 2px 6px rgba(0,0,0,0.06);
}
.v4-hb-card:focus-visible {
    outline: 2px solid var(--color-primary, #0d9488);
    outline-offset: 2px;
}
.v4-hb-card:active { transform: translateY(0); }
.v4-hb-card--wide { grid-column: 1 / -1; }

/* Hand-drawn icon */
.v4-hb-card-icon {
    width: 44px; height: 44px; flex-shrink: 0;
    border-radius: 12px; display: flex; align-items: center; justify-content: center;
    padding: 8px; transition: transform .2s ease;
}
.v4-hb-card-icon svg { width: 100%; height: 100%; }
.v4-hb-card:hover .v4-hb-card-icon { transform: scale(1.1) rotate(-3deg); }

/* Card top row — icon + prompt question */
.v4-hb-card-top {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 18px 18px 12px;
}
.v4-hb-card-prompt {
    font-size: 15px; font-weight: 600; line-height: 1.45;
    color: var(--color-gray-800); letter-spacing: -0.01em;
    flex: 1;
}

/* Scrollable detail section �� full width below icon+title */
.v4-hb-card-detail {
    border-top: 1px solid rgba(0,0,0,0.06);
    padding: 10px 18px 20px;
    max-height: 80px; overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.15) transparent;
}
.v4-hb-card-detail::-webkit-scrollbar { width: 4px; }
.v4-hb-card-detail::-webkit-scrollbar-track { background: transparent; }
.v4-hb-card-detail::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 4px; }
.v4-hb-card-detail-label {
    display: block; font-size: 9.5px; font-weight: 700;
    letter-spacing: 0.08em; color: var(--color-gray-400);
    margin-bottom: 4px; text-transform: uppercase;
}
.v4-hb-card-context {
    font-size: 14px; line-height: 1.45; color: var(--color-gray-600);
    display: block;
}

/* Color variants — background, border, icon bg, icon color, hover states */
.v4-hb-card--teal {
    background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
    border: 1px solid rgba(13,148,136,0.2);
}
.v4-hb-card--teal:hover { border-color: rgba(13,148,136,0.45); }
.v4-hb-card--teal .v4-hb-card-icon { background: rgba(13,148,136,0.12); color: #0d7377; }
.v4-hb-card--teal .v4-hb-card-arrow { color: #0d9488; }
.v4-hb-card--teal:hover .v4-hb-card-prompt { color: #0d7377; }

.v4-hb-card--amber {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid rgba(217,169,31,0.2);
}
.v4-hb-card--amber:hover { border-color: rgba(217,169,31,0.45); }
.v4-hb-card--amber .v4-hb-card-icon { background: rgba(217,169,31,0.12); color: #b45309; }
.v4-hb-card--amber .v4-hb-card-arrow { color: #d97706; }
.v4-hb-card--amber:hover .v4-hb-card-prompt { color: #92400e; }

.v4-hb-card--indigo {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    border: 1px solid rgba(99,102,241,0.2);
}
.v4-hb-card--indigo:hover { border-color: rgba(99,102,241,0.45); }
.v4-hb-card--indigo .v4-hb-card-icon { background: rgba(99,102,241,0.12); color: #4338ca; }
.v4-hb-card--indigo .v4-hb-card-arrow { color: #6366f1; }
.v4-hb-card--indigo:hover .v4-hb-card-prompt { color: #3730a3; }

.v4-hb-card--rose {
    background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
    border: 1px solid rgba(244,63,94,0.15);
}
.v4-hb-card--rose:hover { border-color: rgba(244,63,94,0.4); }
.v4-hb-card--rose .v4-hb-card-icon { background: rgba(244,63,94,0.1); color: #be123c; }
.v4-hb-card--rose .v4-hb-card-arrow { color: #f43f5e; }
.v4-hb-card--rose:hover .v4-hb-card-prompt { color: #9f1239; }

.v4-hb-card--slate {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border: 1px solid rgba(100,116,139,0.2);
}
.v4-hb-card--slate:hover { border-color: rgba(100,116,139,0.45); }
.v4-hb-card--slate .v4-hb-card-icon { background: rgba(100,116,139,0.12); color: #475569; }
.v4-hb-card--slate .v4-hb-card-arrow { color: #64748b; }
.v4-hb-card--slate:hover .v4-hb-card-prompt { color: #334155; }

/* Mobile: single column, hide scrollable detail */
@media (max-width: 640px) {
    .v4-hb-cards { grid-template-columns: 1fr; gap: 10px; padding: 12px; }
    .v4-hb-card--wide { grid-column: auto; }
    .v4-hb-card-top { padding: 14px 14px 10px; }
    .v4-hb-card-icon { width: 38px; height: 38px; }
    .v4-hb-card-prompt { font-size: 14px; }
    .v4-hb-card-detail { display: none; }
}

/* Quick stats strip */
.v4-hb-stats {
    display: flex; gap: 6px; padding: 10px 12px;
    flex-wrap: wrap;
}
.v4-hb-stat {
    font-size: 12px; color: var(--color-gray-500); background: var(--color-gray-50);
    padding: 3px 8px; border-radius: 10px;
}

/* Loading skeleton */
/* Loading state — swirling color orbs */
.v4-hb-loading {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 100%; max-width: 1200px; width: 100%; margin: 0 auto;
}
.v4-hb-swirl-container {
    position: relative; width: 200px; height: 200px;
}
.v4-hb-swirl-orb {
    position: absolute; width: 50px; height: 50px; border-radius: 50%;
    filter: blur(14px); opacity: 0.6;
    animation: v4-hb-orbit 6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
    will-change: transform, opacity;
}
.v4-hb-orb--teal {
    background: #14b8a6; top: 50%; left: 50%;
    animation-delay: 0s;
}
.v4-hb-orb--amber {
    background: #f59e0b; top: 50%; left: 50%;
    animation-delay: -1.2s;
}
.v4-hb-orb--indigo {
    background: #6366f1; top: 50%; left: 50%;
    animation-delay: -2.4s;
}
.v4-hb-orb--rose {
    background: #f43f5e; top: 50%; left: 50%;
    animation-delay: -3.6s;
}
.v4-hb-orb--slate {
    background: #64748b; top: 50%; left: 50%;
    animation-delay: -4.8s;
}
@keyframes v4-hb-orbit {
    0%   { transform: translate(-50%, -50%) rotate(0deg)   translateX(0px)  scale(1);   opacity: 0.45; }
    15%  { transform: translate(-50%, -50%) rotate(54deg)  translateX(55px) scale(1.15); opacity: 0.7; }
    35%  { transform: translate(-50%, -50%) rotate(126deg) translateX(50px) scale(0.9);  opacity: 0.55; }
    50%  { transform: translate(-50%, -50%) rotate(180deg) translateX(0px)  scale(1.1);  opacity: 0.65; }
    65%  { transform: translate(-50%, -50%) rotate(234deg) translateX(55px) scale(0.95); opacity: 0.75; }
    85%  { transform: translate(-50%, -50%) rotate(306deg) translateX(50px) scale(1.05); opacity: 0.5; }
    100% { transform: translate(-50%, -50%) rotate(360deg) translateX(0px)  scale(1);   opacity: 0.45; }
}
.v4-hb-swirl-text {
    margin-top: 32px; font-size: 18px; font-weight: 500; color: var(--color-gray-500);
    letter-spacing: 0.01em; text-align: center; max-width: 360px;
    line-height: 1.4; animation: v4-hb-text-pulse 2.5s ease-in-out infinite;
}
@keyframes v4-hb-text-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Card entrance animation — cards start clustered and expand into grid */
.v4-hb-cards--entering .v4-hb-card {
    opacity: 0;
    transform: scale(0.6) translateY(40px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.v4-hb-cards--entering .v4-hb-card:nth-child(1) { transition-delay: 0s; }
.v4-hb-cards--entering .v4-hb-card:nth-child(2) { transition-delay: 0.08s; }
.v4-hb-cards--entering .v4-hb-card:nth-child(3) { transition-delay: 0.16s; }
.v4-hb-cards--entering .v4-hb-card:nth-child(4) { transition-delay: 0.24s; }
.v4-hb-cards--entering .v4-hb-card:nth-child(5) { transition-delay: 0.32s; }
.v4-hb-cards .v4-hb-card {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Empty / no-data state */
.v4-hb-empty {
    text-align: center; padding: 40px 20px; color: var(--color-gray-500); font-size: 13px;
}
.v4-hb-empty-icon { font-size: 28px; margin-bottom: 8px; }
.v4-hb-empty-cta {
    margin-top: 12px; display: inline-block; padding: 6px 14px; border-radius: var(--radius-md);
    background: var(--color-primary); color: var(--text-on-accent); font-size: 12px; font-weight: 600;
    cursor: pointer; border: none; font-family: inherit; transition: opacity .15s;
}
.v4-hb-empty-cta:hover { opacity: .85; }

/* Records/Timeline/Screening/Documents views */
#v4-canvas-records,
#v4-canvas-timeline,
#v4-canvas-screening,
#v4-canvas-documents {
    /* EmrViewer renders into these via renderXInto() */
    padding: 0; /* emrViewer handles its own padding */
}

/* ═══════════════════════════════════════════════════════════════════════════
   RIGHT INTELLIGENCE PANEL
   ═══════════════════════════════════════════════════════════════════════════ */
#v4-intel {
    grid-area: intel;
    background: var(--surface-primary);
    border-left: 1px solid var(--color-gray-200);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0; /* grid child must shrink for inner scroll */
    max-height: 100vh;
}

.v4-intel-header {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-gray-100);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.v4-intel-title {
    font-size: 14px;
    font-weight: 600;
}
.v4-intel-uploads {
    padding: 10px 10px 8px;
    border-bottom: 1px solid var(--color-gray-100);
    background: linear-gradient(180deg, rgba(13,148,136,0.04) 0%, rgba(13,148,136,0.01) 100%);
    flex-shrink: 0;
}
.v4-intel-section-title {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--color-gray-500);
    margin-bottom: 8px;
}
.v4-intel-upload-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.v4-intel-upload-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(13,148,136,0.14);
    border-radius: 12px;
    background: rgba(255,255,255,0.88);
    color: var(--color-gray-800);
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
}
.v4-intel-upload-btn:hover {
    border-color: rgba(13,148,136,0.28);
    background: rgba(13,148,136,0.08);
    transform: translateY(-1px);
}
.v4-intel-upload-btn.active {
    border-color: rgba(13,148,136,0.36);
    background: rgba(13,148,136,0.14);
    box-shadow: inset 0 0 0 1px rgba(13,148,136,0.08);
}
.v4-intel-upload-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(13,148,136,0.12);
    color: var(--color-primary);
    font-size: 15px;
    flex-shrink: 0;
}
.v4-intel-upload-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.v4-intel-upload-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-gray-800);
}
.v4-intel-upload-desc {
    font-size: 12px;
    color: var(--color-gray-500);
}
.v4-intel-badge {
    font-size: 12px;
    background: var(--color-error-light);
    color: var(--color-error);
    padding: 2px 7px;
    border-radius: var(--radius-full);
    font-weight: 600;
}
.v4-intel-gear {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--color-gray-400);
    border-radius: var(--v4-radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: all .12s;
}
.v4-intel-gear:hover {
    background: var(--color-gray-100);
    color: var(--color-gray-700);
}

.v4-intel-body {
    flex: 1;
    min-height: 0; /* allow flex child to shrink for overflow scroll */
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scrollbar-width: thin;
}

.v4-intel-footer {
    padding: 5px 10px;
    font-size: 12px;
    color: var(--color-gray-500);
    text-align: center;
    border-top: 1px solid var(--color-gray-100);
    flex-shrink: 0;
}

/* Intel placeholder (Cycle 1) */
.v4-intel-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 20px;
    color: var(--color-gray-500);
    text-align: center;
    font-size: 12px;
    gap: 8px;
}
.v4-intel-placeholder-icon {
    font-size: 24px;
    opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SPACE PANEL — Right Bar Space Controls
   sp-* prefix
   ═══════════════════════════════════════════════════════════════════════════ */

.sp-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-gray-200, #e2e8f0);
    border-radius: 10px;
}

/* When sp-panel lives inside the session sidebar container, the outer frame
   (session-resources-sidebar) already provides border/radius/background.
   Strip sp-panel's own frame and let sidebar-header go edge-to-edge. */
#sps-sidebar .sp-panel {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
    gap: 0;
}

#sps-sidebar .sp-panel .sidebar-header {
    margin-bottom: 0;
}

#sps-sidebar .sp-panel .sp-name-row,
#sps-sidebar .sp-panel .sp-last-run,
#sps-sidebar .sp-panel .sp-stale-banner,
#sps-sidebar .sp-panel .sp-curation-row,
#sps-sidebar .sp-panel .sp-tag-cloud,
#sps-sidebar .sp-panel .sp-actions,
#sps-sidebar .sp-panel .sp-corpus {
    padding-left: 14px;
    padding-right: 14px;
}

#sps-sidebar .sp-panel .sp-name-row { padding-top: 12px; }
#sps-sidebar .sp-panel .sp-actions  { padding-bottom: 12px; }
#sps-sidebar .sp-panel .sp-corpus   { padding-bottom: 12px; }

.sp-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Space name + icon row (replaces sp-header inside #sps-sidebar) */
.sp-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sp-icon {
    font-size: 20px;
    line-height: 1;
}

.sp-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-gray-800, #1a202c);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-last-run {
    font-size: 11px;
    color: var(--color-gray-500, #718096);
}

.sp-last-run strong {
    color: var(--color-gray-700, #2d3748);
}

/* Stale warning banner */
.sp-stale-banner {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 10px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 7px;
}

.sp-stale-icon {
    font-size: 13px;
    color: #d97706;
    flex-shrink: 0;
    margin-top: 1px;
}

.sp-stale-text {
    font-size: 11px;
    color: #92400e;
    line-height: 1.4;
}

/* Curation stats row */
.sp-curation-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--color-gray-500, #718096);
}

.sp-curation-dot {
    opacity: 0.4;
}

/* Tag cloud */
.sp-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.sp-tag-pill {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.08);
    color: #4f46e5;
    border: 1px solid rgba(99, 102, 241, 0.2);
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Action buttons */
.sp-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 2px;
}

.sp-btn {
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s, background 0.15s;
}

.sp-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sp-btn-primary {
    background: var(--color-indigo-600, #4f46e5);
    color: #fff;
}

.sp-btn-primary:hover:not(:disabled) {
    background: var(--color-indigo-700, #4338ca);
}

.sp-btn-danger {
    background: transparent;
    color: var(--color-red-600, #dc2626);
    border: 1px solid rgba(220, 38, 38, 0.3);
}

.sp-btn-danger:hover:not(:disabled) {
    background: rgba(220, 38, 38, 0.06);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SPACE THREAD CANVAS — Messages, Memory Segments
   ═══════════════════════════════════════════════════════════════════════════ */

/* Thread wrapper */
.v4-space-thread {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Sticky thread header */
.v4-space-thread-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px 12px;
    border-bottom: 1px solid var(--color-gray-200, #e2e8f0);
    flex-shrink: 0;
}

.v4-space-thread-icon { font-size: 22px; line-height: 1; }

.v4-space-thread-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-gray-800, #1a202c);
}

/* Scrollable messages list */
.v4-space-thread-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Loading / empty states */
.v4-space-loading {
    text-align: center;
    color: var(--color-gray-400, #a0aec0);
    font-size: 13px;
    padding: 40px;
}

.v4-space-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 60px 40px;
}

.v4-space-empty-icon  { font-size: 40px; }
.v4-space-empty-title { font-size: 15px; font-weight: 600; color: var(--color-gray-700, #2d3748); }
.v4-space-empty-text  { font-size: 13px; color: var(--color-gray-500, #718096); max-width: 380px; line-height: 1.6; }

/* Individual message bubble */
.v4-space-msg { display: flex; flex-direction: column; gap: 6px; }

.v4-space-msg-user    { align-items: flex-end; }
.v4-space-msg-assistant { align-items: flex-start; }

.v4-space-msg-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--color-gray-400, #a0aec0);
}

.v4-space-msg-content {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.6;
    word-break: break-word;
}

.v4-space-msg-user .v4-space-msg-content {
    background: var(--color-indigo-600, #4f46e5);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.v4-space-msg-assistant .v4-space-msg-content {
    background: var(--color-gray-100, #f7fafc);
    color: var(--color-gray-800, #1a202c);
    border-bottom-left-radius: 4px;
}

/* Phase tag badge */
.v4-space-phase-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.v4-space-phase-ground    { background: rgba(99, 102, 241, 0.12); color: #4338ca; }
.v4-space-phase-synthesize { background: rgba(16, 185, 129, 0.12); color: #059669; }
.v4-space-phase-act       { background: rgba(245, 158, 11, 0.12);  color: #d97706; }

/* ── Memory segment collapsibles ── */
.v4-mem-segments {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 80%;
}

.v4-mem-query {
    font-size: 11px;
    color: var(--color-gray-500, #718096);
    padding: 0 2px 4px;
    font-style: italic;
}

.v4-mem-segment {
    border: 1px solid var(--color-gray-200, #e2e8f0);
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-surface, #fff);
}

.v4-mem-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-gray-700, #2d3748);
    text-align: left;
    transition: background 0.12s;
}

.v4-mem-toggle:hover { background: var(--color-gray-50, #f7fafc); }

.v4-mem-segment.v4-mem-open .v4-mem-toggle {
    background: var(--color-gray-50, #f7fafc);
    border-bottom: 1px solid var(--color-gray-200, #e2e8f0);
}

.v4-mem-ns-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.v4-mem-dot-research  { background: #6366f1; }  /* Indigo — ResearchMemory */
.v4-mem-dot-synthesis { background: #10b981; }  /* Emerald — SynthesisMemory */

.v4-mem-count {
    margin-left: auto;
    font-size: 11px;
    font-weight: 400;
    color: var(--color-gray-400, #a0aec0);
    background: var(--color-gray-100, #f7fafc);
    padding: 1px 6px;
    border-radius: 999px;
}

.v4-mem-chevron { font-size: 12px; color: var(--color-gray-400, #a0aec0); }
.v4-mem-segment.v4-mem-open .v4-mem-chevron { transform: rotate(180deg); }

/* Chunk list inside collapsible */
.v4-mem-body {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.v4-mem-chunk {
    padding: 8px 10px;
    background: var(--color-gray-50, #f7fafc);
    border-radius: 6px;
    border-left: 3px solid var(--color-gray-200, #e2e8f0);
}

.v4-mem-segment[data-ns="research"]  .v4-mem-chunk { border-left-color: #6366f1; }
.v4-mem-segment[data-ns="synthesis"] .v4-mem-chunk { border-left-color: #10b981; }

.v4-mem-chunk-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.v4-mem-tag {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.08);
    color: #4f46e5;
    border: 1px solid rgba(99, 102, 241, 0.2);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v4-mem-score {
    font-size: 10px;
    color: var(--color-gray-400, #a0aec0);
    margin-left: auto;
}

.v4-mem-tier {
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(0,0,0,0.05);
    color: var(--color-gray-500, #718096);
}

.v4-mem-chunk-text {
    font-size: 12px;
    color: var(--color-gray-700, #2d3748);
    line-height: 1.5;
}

.v4-mem-origin {
    font-size: 11px;
    color: var(--color-gray-400, #a0aec0);
    margin-bottom: 4px;
    font-style: italic;
}

.v4-mem-source {
    font-size: 10px;
    color: var(--color-gray-400, #a0aec0);
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Space compose area */
.v4-space-compose {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 16px 12px;
    border-top: 1px solid var(--color-gray-200, #e2e8f0);
    background: #fff;
    flex-shrink: 0;
}

.v4-space-input {
    flex: 1;
    resize: none;
    border: 1px solid var(--color-gray-300, #cbd5e0);
    border-radius: 12px;
    padding: 9px 14px;
    font-size: 13px;
    font-family: inherit;
    line-height: 1.5;
    min-height: 38px;
    max-height: 140px;
    overflow-y: auto;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    background: var(--color-gray-50, #f9fafb);
    color: var(--color-gray-800, #1a202c);
}

.v4-space-input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
    background: #fff;
}

.v4-space-input:disabled { opacity: 0.5; }

.v4-space-send-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #6366f1;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
    line-height: 1;
}

.v4-space-send-btn:hover:not(:disabled) { background: #4f46e5; }
.v4-space-send-btn:disabled { background: #a5b4fc; cursor: not-allowed; }

/* ── Phase 16: Status / curation note chip ──────────────────────────────────── */
.v4-space-msg-status {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    margin: 4px 0;
    background: rgba(99,102,241,0.06);
    border: 1px solid rgba(99,102,241,0.18);
    border-radius: 20px;
    font-size: 11px;
    color: #6366f1;
    align-self: center;
    max-width: 90%;
}
.v4-space-status-icon  { font-size: 12px; flex-shrink: 0; }
.v4-space-status-text  { flex: 1; line-height: 1.4; }
.v4-space-status-time  { color: #a5b4fc; white-space: nowrap; flex-shrink: 0; }

/* ── Phase 16: [view] full response link in SynthesisMemory chunks ─────────── */
.v4-mem-view-btn {
    margin-left: auto;
    padding: 1px 7px;
    font-size: 10px;
    border: 1px solid #10b981;
    border-radius: 10px;
    color: #10b981;
    background: transparent;
    cursor: pointer;
    line-height: 1.4;
    transition: background 0.15s, color 0.15s;
}
.v4-mem-view-btn:hover:not(:disabled) { background: #10b981; color: #fff; }
.v4-mem-view-btn:disabled             { opacity: 0.5; cursor: default; }

.v4-mem-full-response {
    margin-top: 8px;
    padding: 10px 12px;
    background: rgba(16,185,129,0.05);
    border-left: 3px solid #10b981;
    border-radius: 0 6px 6px 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--color-text, #1e293b);
    max-height: 400px;
    overflow-y: auto;
}
.v4-mem-full-body h1,.v4-mem-full-body h2,.v4-mem-full-body h3 {
    font-size: 13px; font-weight: 600; margin: 8px 0 4px;
}
.v4-mem-full-body p    { margin: 0 0 6px; }
.v4-mem-full-body ul,
.v4-mem-full-body ol   { margin: 0 0 6px; padding-left: 18px; }

/* Thinking dots animation */
.v4-space-thinking-dots {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px 14px;
    min-height: 36px;
}

.v4-space-thinking-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #a5b4fc;
    animation: v4-space-dot-pulse 1.4s infinite ease-in-out;
}

.v4-space-thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.v4-space-thinking-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes v4-space-dot-pulse {
    0%, 80%, 100% { transform: scale(0.7); opacity: 0.5; }
    40%           { transform: scale(1);   opacity: 1;   }
}

/* Phase 19: elapsed time on thinking dots */
.v4-space-thinking-dots[data-elapsed]::after {
  content: ' · ' attr(data-elapsed);
  font-size: 0.75rem;
  opacity: 0.6;
  margin-left: 4px;
}

/* ── Space Panel: Corpus Browser (Phase 20) ──────────────────────────────── */
.sp-corpus { margin-top: 12px; }
.sp-corpus-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sp-corpus-title { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7; }
.sp-corpus-count { font-size: 0.7rem; background: rgba(255,255,255,0.12); border-radius: 10px; padding: 1px 7px; }
.sp-corpus-list { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }

/* Each corpus item is a card — clickable if it has a URL */
.sp-corpus-item {
    display: block;
    padding: 8px 10px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.sp-corpus-item[href]:hover {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.22);
    cursor: pointer;
}
.sp-corpus-item:not([href]) { cursor: default; }

/* Row 1: the finding in plain language */
.sp-corpus-item-finding {
    font-size: 0.73rem;
    line-height: 1.45;
    opacity: 0.92;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 4px;
}
/* Row 2: article title / source reference */
.sp-corpus-item-locator {
    font-size: 0.67rem;
    opacity: 0.55;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}
/* Link indicator on the locator row for clickable items */
.sp-corpus-item[href] .sp-corpus-item-locator::after {
    content: ' ↗';
    font-size: 0.62rem;
    opacity: 0.7;
}
.sp-corpus-item-meta { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.sp-corpus-tag { font-size: 0.65rem; background: rgba(255,255,255,0.1); padding: 1px 5px; border-radius: 4px; opacity: 0.75; }
.sp-corpus-rung { font-size: 0.65rem; color: #a78bfa; font-weight: 600; margin-right: 2px; }
.sp-corpus-date { font-size: 0.65rem; opacity: 0.5; margin-left: auto; }
.sp-corpus-empty, .sp-corpus-loading { font-size: 0.75rem; opacity: 0.5; padding: 8px 0; text-align: center; }

/* ── Space Thread: Error State (Phase 22) ────────────────────────────────── */
.v4-space-msg-error {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; margin: 6px 0;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 8px; color: #fca5a5;
  font-size: 0.82rem;
}
.v4-space-error-icon { font-size: 1rem; flex-shrink: 0; }
.v4-space-error-text { line-height: 1.4; }

/* ── Space Thread: Load Earlier Button (Phase 23) ───────────────────────── */
.v4-space-load-earlier {
  display: block; width: 100%; padding: 8px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; color: inherit; font-size: 0.78rem;
  cursor: pointer; margin-bottom: 12px; transition: background 0.15s;
}
.v4-space-load-earlier:hover { background: rgba(255,255,255,0.1); }
.v4-space-load-earlier:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Space Toast Notification (Phase 24) ────────────────────────────────── */
.v4-space-toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 10px;
  background: #1e1e2e; border: 1px solid rgba(255,255,255,0.15);
  color: #e2e8f0; font-size: 0.83rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  animation: v4-toast-in 0.2s ease-out;
}
@keyframes v4-toast-in {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.v4-space-toast-open {
  padding: 3px 10px; border-radius: 6px;
  background: rgba(139,92,246,0.25); border: 1px solid rgba(139,92,246,0.4);
  color: #c4b5fd; font-size: 0.78rem; cursor: pointer;
}
.v4-space-toast-close {
  background: none; border: none; color: inherit; opacity: 0.5;
  cursor: pointer; font-size: 0.9rem; padding: 0 2px;
}

/* Space card in thread rail */
.v4-space-card {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    cursor: pointer;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: all 0.12s;
    position: relative;
}

.v4-space-card:hover {
    background: rgba(99, 102, 241, 0.08);
}

.v4-space-card.active {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.25);
}

.v4-space-card.active .v4-space-name {
    color: #4f46e5;
    font-weight: 600;
}

.v4-space-icon {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

.v4-space-info {
    flex: 1;
    min-width: 0;
}

.v4-space-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-gray-800, #1a202c);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v4-space-status {
    font-size: 11px;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.v4-space-status-unrun {
    color: var(--color-gray-400, #a0aec0);
}

.v4-space-status-ready {
    color: #16a34a;
}

.v4-space-status-stale {
    color: #d97706;
}

/* Stale dot indicator on space card */
.v4-space-stale-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d97706;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE (<1024px)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Mobile top bar — hidden on desktop */
.v4-mob-topbar {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--surface-primary);
    border-bottom: 1px solid var(--color-gray-200);
    flex-shrink: 0;
}
.v4-mob-hamburger {
    width: 32px;
    height: 32px;
    border: 1px solid var(--color-gray-200);
    background: var(--surface-primary);
    border-radius: var(--v4-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--color-gray-600);
    cursor: pointer;
}
.v4-mob-hamburger:hover { background: var(--color-gray-50); }
.v4-mob-thread-name {
    font-size: 14px;
    font-weight: 600;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.v4-mob-title-menu {
    border: none;
    background: transparent;
    color: var(--color-gray-400);
    font-size: 16px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    flex-shrink: 0;
    font-family: inherit;
}
.v4-mob-title-menu:hover {
    background: var(--color-gray-100, #f3f4f6);
    color: var(--color-gray-700);
}
.v4-mob-new-btn {
    padding: 4px 10px;
    border: 1px dashed var(--color-gray-300, #d1d5db);
    background: transparent;
    border-radius: 6px;
    font-size: 12px;
    color: var(--color-gray-500);
    cursor: pointer;
    flex-shrink: 0;
    font-family: inherit;
    transition: all .12s;
}
.v4-mob-new-btn:hover {
    border-color: var(--med-teal, #0d7377);
    color: var(--med-teal, #0d7377);
    background: var(--color-teal-50, #e6f5f5);
}
.v4-mob-intel-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--color-gray-500);
    position: relative;
    cursor: pointer;
}
.v4-mob-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    background: var(--color-error);
    border-radius: var(--radius-full);
    border: 2px solid var(--color-white);
}

/* Mobile bottom nav — hidden on desktop */
.v4-mob-nav {
    display: none;
    background: var(--surface-primary);
    border-top: 1px solid var(--color-gray-200);
    padding: 4px 0 max(4px, env(safe-area-inset-bottom));
    justify-content: space-around;
    align-items: center;
}
.v4-mob-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 16px;
    border: none;
    background: transparent;
    color: var(--color-gray-400);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all .12s;
    border-radius: var(--v4-radius-sm);
    font-family: var(--font-family-base);
    min-height: 44px;
    position: relative;
}
.v4-mob-tab:hover { color: var(--color-gray-600); }
.v4-mob-tab.active {
    color: var(--color-primary);
    font-weight: 600;
    background: rgba(13, 148, 136, 0.07);
}
/* Indicator line at top of active tab */
.v4-mob-tab.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 2px;
    background: var(--color-primary);
    border-radius: 0 0 3px 3px;
}
.v4-mob-tab-icon { font-size: 20px; }

/* Thread drawer overlay */
.v4-mob-drawer-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.4);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
}
.v4-mob-drawer-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

/* Thread drawer */
.v4-mob-drawer {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 85%;
    max-width: 320px;
    background: var(--surface-primary);
    z-index: 101;
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    display: flex;
    flex-direction: column;
    box-shadow: var(--v4-shadow-lg);
}
.v4-mob-drawer.open {
    transform: translateX(0);
}
.v4-mob-drawer-hdr {
    padding: max(12px, env(safe-area-inset-top)) 12px 8px;
    flex-shrink: 0;
    gap: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.v4-mob-drawer-actions {
    padding: 0 12px 12px;
    border-bottom: 1px solid var(--color-gray-100);
    flex-shrink: 0;
}
.v4-mob-new-chat {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 0;
    border-radius: 12px;
    background: var(--color-gray-100);
    color: var(--text-primary);
    font: inherit;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}
.v4-mob-new-chat:hover {
    background: var(--color-gray-200);
}
.v4-mob-new-chat:focus-visible,
.v4-mob-drawer-close:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.v4-mob-drawer-close {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: 0;
    background: transparent;
    border-radius: var(--v4-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
}
.v4-mob-drawer-threads {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px;
}
.v4-mob-drawer-identity {
    padding: 12px 16px;
    border-top: 1px solid var(--color-gray-100);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Mobile data sub-tabs */
.v4-mob-data-tabs {
    display: none;
    padding: 6px 12px;
    background: var(--surface-primary);
    border-bottom: 1px solid var(--color-gray-200);
    gap: 6px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    position: relative;
}
.v4-mob-data-tabs::-webkit-scrollbar { display: none; }
.v4-mob-data-tabs.active {
    display: flex;
}
/* Fade edge hint — indicates more tabs to the right */
.v4-mob-data-tabs-wrap {
    position: relative;
}
.v4-mob-data-tabs-wrap::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 24px;
    background: linear-gradient(to right, transparent, var(--color-white));
    pointer-events: none;
    z-index: 1;
}
.v4-mob-dtab {
    padding: 5px 12px;
    border: none;
    background: var(--color-gray-50);
    border-radius: var(--v4-radius-sm);
    font-size: 12px;
    font-weight: 500;
    color: var(--color-gray-500);
    cursor: pointer;
    font-family: var(--font-family-base);
    flex-shrink: 0;
    white-space: nowrap;
}
.v4-mob-dtab.active {
    background: var(--color-primary-subtle);
    color: var(--color-primary);
    font-weight: 600;
}

/* Mobile intel full-screen view */
#v4-canvas-mobintel {
    padding: 12px;
    gap: 8px;
    flex-direction: column;
}

@media (max-width: 1024px) {
    /* Lock viewport — prevent body/html scroll on mobile */
    html:has(.v4-active), body:has(.v4-active) {
        height: 100vh; height: 100dvh; overflow: hidden;
        position: fixed; width: 100%;
    }
    .v4-active { height: 100%; overflow: hidden; }

    /* Mobile: simple 2-row grid — canvas fills, bottom nav fixed */
    .v4-active #v4-layout {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
        grid-template-areas: "canvas" "mobnav";
        overflow: hidden;
        height: 100vh;
        height: 100dvh;
    }

    /* Hide desktop-only panels */
    #v4-rail { display: none; }
    #v4-intel { display: none; }

    /* Bottom nav: pinned */
    .v4-mob-nav {
        display: flex !important;
        grid-area: mobnav;
        flex-shrink: 0;
    }

    /* Canvas is a flex column: topbar → datatabs → canvas-body */
    #v4-canvas {
        grid-area: canvas;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    .v4-mob-topbar {
        display: flex !important;
        flex-shrink: 0;
    }
    .v4-mob-data-tabs-wrap {
        flex-shrink: 0;
    }
    .v4-canvas-body {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    /* Active canvas view fills remaining space */
    .v4-canvas-view {
        padding: 0;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden; /* must repeat here — mobile block overrides desktop rule */
    }
    /* Chat view: when a session is active, lock scroll (messages scroll internally).
       When no session (health briefing / landing), allow the whole view to scroll. */
    #v4-canvas-chat.active {
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }
    #v4-canvas-chat.active:has(.sessions-container) {
        overflow: hidden;
    }

    /* Hide desktop canvas tabs — replaced by bottom nav */
    .v4-canvas-tabs { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   V4 EXPERIENCE BLOCKS (Bridge, Action, Document, Citation)
   Rendered inside chat messages by _renderV4Blocks()
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Bridge Card ─────────────────────────────────────────────────────────── */
.v4-bridge {
    margin-top: 12px;
    padding: 10px 12px;
    background: linear-gradient(135deg, var(--color-gray-50), #fefce8);
    border: 1px solid var(--color-gray-200);
    border-left: 3px solid var(--color-warning);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all .15s;
}
.v4-bridge:hover {
    border-color: var(--color-primary);
    border-left-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    background: var(--color-primary-subtle);
}
.v4-bridge-icon {
    font-size: 15px;
    flex-shrink: 0;
}
.v4-bridge-content {
    flex: 1;
    min-width: 0;
}
.v4-bridge-hook {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-gray-800);
    line-height: 1.3;
}
.v4-bridge-desc {
    font-size: 12px;
    color: var(--color-gray-500);
    margin-top: 1px;
}
.v4-bridge-arrow {
    font-size: 14px;
    color: var(--color-gray-300);
    flex-shrink: 0;
    transition: all .15s;
}
.v4-bridge:hover .v4-bridge-arrow {
    color: var(--color-primary);
    transform: translateX(3px);
}

/* ── Action Item Inline ──────────────────────────────────────────────────── */
.v4-action-block {
    margin-top: 8px;
    padding: 7px 11px;
    background: var(--surface-primary);
    border: 1px solid var(--color-success);
    border-left: 3px solid var(--color-success);
    border-radius: var(--radius-md);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
}
.v4-action-main {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.v4-action-copy {
    flex: 1;
    min-width: 0;
}
.v4-action-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.v4-action-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    margin-top: 5px;
}
.v4-action-title {
    font-weight: 600;
    color: var(--color-gray-800);
}
.v4-action-timing {
    font-size: 12px;
    color: var(--color-gray-500);
}
.v4-action-detail {
    margin-top: 3px;
    color: var(--color-gray-700);
    line-height: 1.4;
}
.v4-action-label {
    font-weight: 600;
    color: var(--color-gray-800);
}
.v4-action-expando {
    margin-top: 4px;
}
.v4-action-expando-summary {
    cursor: pointer;
    color: var(--color-primary);
    font-weight: 500;
    list-style: none;
}
.v4-action-expando-summary::-webkit-details-marker {
    display: none;
}
.v4-action-expando-summary::before {
    content: '\25B6';
    display: inline-block;
    margin-right: 6px;
    font-size: 10px;
    transition: transform .12s ease;
}
.v4-action-expando[open] .v4-action-expando-summary::before {
    transform: rotate(90deg);
}
.v4-action-expando-body {
    margin-top: 4px;
}
/* Action button group (+ Add and Get Script side by side) */
.v4-action-btns {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}
.v4-action-add {
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    border: none;
    background: var(--color-success);
    color: var(--text-on-accent);
    cursor: pointer;
    font-family: var(--font-family-base);
    transition: all .12s;
    white-space: nowrap;
}
/* "Get Script" trigger button */
.v4-physician-discuss-btn {
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 500;
    border: 1px solid #0f766e;
    background: transparent;
    color: #0f766e;
    cursor: pointer;
    font-family: var(--font-family-base);
    transition: all .12s;
    white-space: nowrap;
}
.v4-physician-discuss-btn:hover { background: #f0fdfa; }
.v4-physician-discuss-btn:disabled { opacity: .5; cursor: default; }
/* Copy-script bar (appended after physician script agent response) */
.v4-copy-script-bar {
    margin-top: 12px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
    border: 1px solid #6ee7b7;
    border-left: 3px solid #0f766e;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.v4-copy-script-bar-label {
    font-size: 12px;
    font-weight: 600;
    color: #0f766e;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.v4-pmid-link {
    color: #0f766e;
    text-decoration: underline;
    text-decoration-style: dotted;
}
.v4-pmid-link:hover {
    color: #0d6460;
    text-decoration-style: solid;
}
.v4-action-add:hover {
    background: #059669;
}
.v4-action-added {
    background: var(--color-gray-200) !important;
    color: var(--color-gray-500) !important;
    cursor: default;
}
.v4-physician-script-block {
    margin-top: 10px;
    padding: 10px 12px;
    background: linear-gradient(135deg, #f8fafc, #f0fdf4);
    border: 1px solid #86efac;
    border-left: 3px solid #0f766e;
    border-radius: var(--radius-md);
}
.v4-physician-script-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.v4-physician-script-title-wrap {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    flex: 1;
}
.v4-physician-script-icon {
    font-size: 15px;
    line-height: 1;
    margin-top: 2px;
}
.v4-physician-script-title-group {
    min-width: 0;
    flex: 1;
}
.v4-physician-script-title {
    font-size: 12px;
    font-weight: 700;
    color: #134e4a;
}
.v4-physician-script-hook {
    margin-top: 2px;
    font-size: 12px;
    color: var(--color-gray-600);
    line-height: 1.4;
}
.v4-physician-script-copy {
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #0f766e;
    background: #0f766e;
    color: #ffffff;
    cursor: pointer;
    font-family: var(--font-family-base);
    flex-shrink: 0;
    transition: background .12s, transform .1s;
}
.v4-physician-script-copy:hover {
    background: #0d6460;
    transform: translateY(-1px);
}
.v4-physician-script-copy:active {
    transform: translateY(0);
}
.v4-physician-script-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.v4-physician-script-chip {
    padding: 2px 8px;
    border-radius: 9999px;
    background: rgba(15, 118, 110, 0.1);
    color: #115e59;
    font-size: 11px;
    font-weight: 600;
}
.v4-physician-script-expando {
    margin-top: 8px;
}
.v4-physician-script-summary {
    cursor: pointer;
    color: var(--color-primary);
    font-weight: 600;
    list-style: none;
}
.v4-physician-script-summary::-webkit-details-marker {
    display: none;
}
.v4-physician-script-summary::before {
    content: '\25B6';
    display: inline-block;
    margin-right: 6px;
    font-size: 10px;
    transition: transform .12s ease;
}
.v4-physician-script-expando[open] .v4-physician-script-summary::before {
    transform: rotate(90deg);
}
.v4-physician-script-expando-body {
    margin-top: 8px;
}
.v4-physician-script-detail {
    margin-top: 4px;
    color: var(--color-gray-700);
    line-height: 1.45;
    font-size: 12px;
}
.v4-physician-script-evidence-list {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.v4-physician-script-evidence-item {
    padding: 8px 10px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(15, 118, 110, 0.14);
}
.v4-physician-script-evidence-title {
    font-weight: 600;
    color: #134e4a;
    line-height: 1.4;
}
.v4-physician-script-evidence-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(19, 78, 74, 0.35);
    text-underline-offset: 2px;
}
.v4-physician-script-evidence-meta {
    margin-top: 4px;
    font-size: 11px;
    color: var(--color-gray-500);
}
.v4-physician-script-evidence-finding,
.v4-physician-script-evidence-relevance {
    margin-top: 5px;
}
.v4-physician-script-label {
    font-weight: 600;
    color: var(--color-gray-800);
}
.v4-physician-script-body {
    margin-top: 8px;
    padding: 10px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(15, 118, 110, 0.18);
    color: var(--color-gray-800);
    line-height: 1.6;
    font-size: 12px;
}

/* ── Document Inline ─────────────────────────────────────────────────────── */
.v4-document-block {
    margin-top: 12px;
    background: var(--surface-primary);
    border: 2px solid var(--color-success);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.v4-document-header {
    padding: 8px 14px;
    background: var(--color-success-light);
    border-bottom: 1px solid #a7f3d0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.v4-document-icon {
    font-size: 12px;
}
.v4-document-title {
    font-size: 12px;
    font-weight: 600;
    color: #065f46;
    flex: 1;
}
.v4-document-actions {
    display: flex;
    gap: 3px;
}
.v4-doc-btn {
    padding: 2px 8px;
    border: 1px solid var(--color-success);
    background: var(--surface-primary);
    color: var(--color-success);
    border-radius: var(--radius-sm);
    font-size: 12px;
    cursor: pointer;
    font-family: var(--font-family-base);
    transition: all .12s;
}
.v4-doc-btn:hover {
    background: var(--color-success);
    color: var(--text-on-accent);
}
.v4-doc-btn-primary {
    background: var(--color-success);
    color: var(--text-on-accent);
}
.v4-document-body {
    padding: 12px 14px;
    font-size: 12px;
    line-height: 1.8;
    max-height: 250px;
    overflow-y: auto;
    color: var(--color-gray-700);
}
.v4-document-body h4 {
    font-size: 12px;
    font-weight: 600;
    margin: 8px 0 2px;
    color: var(--color-gray-800);
}
.v4-document-body p {
    margin: 4px 0;
}

/* ── In Other Words Expandable ───────────────────────────────────────────── */
.v4-iow-block {
    margin-top: 10px;
    border: 1px solid #99f6e4;
    border-left: 3px solid var(--color-primary, #0d9488);
    border-radius: 6px;
    overflow: hidden;
    background: var(--color-white, #fff);
}
.v4-iow-header {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    cursor: pointer;
    user-select: none;
    background: var(--color-primary-subtle, #f0fdfa);
    transition: background .12s;
}
.v4-iow-header:hover {
    background: #ccfbf1;
}
.v4-iow-icon {
    font-size: 12px;
    flex-shrink: 0;
}
.v4-iow-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-primary-dark, #0f766e);
}
.v4-iow-toggle {
    font-size: 10px;
    color: var(--color-primary, #0d9488);
    transition: transform .15s;
}
.v4-iow-block.v4-iow-open .v4-iow-toggle {
    transform: rotate(90deg);
}
.v4-iow-body {
    display: none;
    padding: 10px 14px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--color-gray-700, #374151);
    border-top: 1px solid #99f6e4;
}
.v4-iow-block.v4-iow-open .v4-iow-body {
    display: block;
}
.v4-iow-body p { margin: 4px 0; }
.v4-iow-body strong { color: var(--color-gray-800, #1f2937); }

/* ── Mermaid Diagrams ────────────────────────────────────────────────────── */
.v4-diagrams {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}
.v4-diagram {
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--surface-primary);
}
.v4-diagram-title {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-gray-500);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-200);
}
.v4-diagram-content {
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow-x: auto;
    min-height: 280px;
    background: var(--surface-primary);
}
.v4-diagram-content svg {
    width: auto;
    max-width: none;
    height: auto;
    display: block;
}
.v4-diagram-media {
    padding: 12px;
    background: var(--surface-primary);
    overflow: hidden;
}
.v4-diagram-image-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.v4-diagram-image {
    display: block;
    max-width: 100%;
    width: 100%;
    height: auto;
    object-fit: contain;
}
.v4-patient-diagram .v4-diagram-image {
    width: 100%;
    max-width: 100%;
    max-height: none;
}
.v4-diagram-image-state {
    width: 100%;
}
.v4-diagram-image-state-loading {
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at top, rgba(20, 184, 166, 0.12), transparent 46%),
        linear-gradient(180deg, rgba(248, 250, 252, 0.95), rgba(241, 245, 249, 0.95));
}
.v4-diagram-loading-shell {
    width: min(100%, 540px);
    display: grid;
    justify-items: center;
    gap: 18px;
    padding: 24px 18px;
}
.v4-diagram-loading-orb {
    position: relative;
    width: 78px;
    height: 78px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.96), rgba(191, 219, 254, 0.7) 45%, rgba(20, 184, 166, 0.18));
    box-shadow:
        0 18px 40px rgba(20, 184, 166, 0.18),
        inset 0 0 0 1px rgba(255,255,255,0.85);
    animation: v4-patient-diagram-float 2.8s ease-in-out infinite;
}
.v4-diagram-loading-orb span {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(180deg, #14b8a6, #0f766e);
    opacity: 0.95;
}
.v4-diagram-loading-orb span:nth-child(1) {
    transform: translate(-14px, -6px);
}
.v4-diagram-loading-orb span:nth-child(2) {
    transform: translate(0, 10px);
}
.v4-diagram-loading-orb span:nth-child(3) {
    transform: translate(14px, -6px);
}
.v4-diagram-loading-card {
    width: min(100%, 420px);
    padding: 18px 18px 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
    text-align: center;
}
.v4-diagram-loading-kicker {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0f766e;
    margin-bottom: 14px;
}
.v4-diagram-loading-bars {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}
.v4-diagram-loading-bar {
    display: block;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(45, 212, 191, 0.18), rgba(59, 130, 246, 0.35), rgba(45, 212, 191, 0.18));
    background-size: 200% 100%;
    animation: v4-patient-diagram-shimmer 1.8s linear infinite;
}
.v4-diagram-loading-bar-wide {
    width: 100%;
}
.v4-diagram-loading-bar {
    width: 82%;
    justify-self: center;
}
.v4-diagram-loading-bar-short {
    width: 60%;
}
.v4-diagram-loading-stage {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-gray-500);
    text-transform: capitalize;
}
@keyframes v4-patient-diagram-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@keyframes v4-patient-diagram-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* ── Citation Superscript ────────────────────────────────────────────────── */
.v4-cite {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    background: var(--color-primary-subtle);
    color: var(--color-primary);
    font-size: 8px;
    font-weight: 700;
    border-radius: var(--radius-full);
    cursor: pointer;
    vertical-align: super;
    margin: 0 1px;
    transition: all .12s;
}
.v4-cite:hover {
    background: var(--color-primary);
    color: var(--text-on-accent);
}

/* ── Citation Pill (structured [Category: Name] citations, Cycle 7) ──────── */
.v4-cite-pill {
    display: inline;
    padding: 1px 5px;
    background: var(--color-primary-subtle);
    color: var(--color-primary);
    font-size: 0.85em;
    font-weight: 500;
    border-radius: 3px;
    cursor: pointer;
    transition: all .12s;
    white-space: nowrap;
    text-decoration: none;
}
.v4-cite-pill:hover {
    background: var(--color-primary);
    color: var(--text-on-accent);
}
.v4-cite-pill[data-cite-resolved="false"] {
    background: var(--color-gray-100);
    color: var(--color-gray-500);
    cursor: default;
}

/* ═══════════════════════════════════════════════════════════════════════════
   OVERLAY MODE (Marketplace / Studio / Full Advancements)
   ═══════════════════════════════════════════════════════════════════════════ */
.v4-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--surface-primary);
    z-index: 50;
    display: none;
    flex-direction: column;
    overflow: hidden;
}
.v4-overlay.active {
    display: flex;
}
.v4-overlay-header {
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-gray-200);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.v4-overlay-close {
    width: 32px;
    height: 32px;
    border: 1px solid var(--color-gray-200);
    background: var(--surface-primary);
    border-radius: var(--v4-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    color: var(--color-gray-600);
}
.v4-overlay-close:hover {
    background: var(--color-gray-50);
}
.v4-overlay-title {
    font-size: 16px;
    font-weight: 600;
    flex: 1;
}
.v4-overlay-body {
    flex: 1;
    overflow-y: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Notification Setup & Settings Modals
   ═══════════════════════════════════════════════════════════════════════════ */

.notif-setup-channel {
    border: 1px solid var(--color-gray-200);
    border-radius: var(--v4-radius-sm);
    padding: 12px;
    margin-bottom: 10px;
}
.notif-setup-channel-header {
    display: flex;
    align-items: center;
    gap: 10px;
}
.notif-setup-channel-icon { font-size: 20px; flex-shrink: 0; }
.notif-setup-channel-name { font-weight: 600; font-size: 13px; }
.notif-setup-channel-desc { font-size: 12px; color: var(--color-gray-500); }
.notif-setup-channel-header .btn { margin-left: auto; flex-shrink: 0; }
.notif-setup-status {
    margin-top: 8px;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: var(--v4-radius-sm);
}
.notif-status-success { background: #ecfdf5; color: #065f46; }
.notif-status-error { background: #fef2f2; color: #991b1b; }
.notif-input {
    padding: 6px 10px;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--v4-radius-sm);
    font-size: 13px;
    outline: none;
}
.notif-input:focus { border-color: var(--color-primary); }

/* intl-tel-input integration */
.notif-sms-form .iti { width: 100%; }
.notif-sms-form .iti__tel-input {
    padding: 8px 10px;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--v4-radius-sm);
    font-size: 14px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    height: 36px;
}
.notif-sms-form .iti__tel-input:focus { border-color: var(--color-primary); }
.notif-sms-form .iti__dropdown-content,
.iti__dropdown-content {
    z-index: 10001 !important;
    max-height: 220px !important;
    overflow-y: auto !important;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--v4-radius-sm);
    box-shadow: var(--shadow-lg);
    background: var(--iti-dropdown-bg, white);
    position: absolute !important;
    width: 300px !important;
}
.notif-sms-form .iti__search-input,
.iti__search-input {
    padding: 6px 8px;
    font-size: 13px;
    width: 100%;
    box-sizing: border-box;
}
.notif-sms-form .iti__country-list,
.iti__country-list {
    max-height: 160px !important;
    overflow-y: auto !important;
    list-style: none;
    margin: 0;
    padding: 0;
}
.iti__country {
    padding: 5px 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}
.iti__country:hover {
    background: var(--iti-hover-color, rgba(0,0,0,.05));
}

/* Settings modal */
.notif-settings-section {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-gray-100);
}
.notif-settings-section:last-child { border-bottom: none; }
.notif-settings-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--color-gray-400);
    margin-bottom: 8px;
    text-transform: uppercase;
}
.notif-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
}
.notif-settings-name { font-weight: 500; }
.notif-settings-detail { font-size: 11px; color: var(--color-gray-500); }
.notif-select {
    padding: 4px 8px;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--v4-radius-sm);
    font-size: 12px;
    background: var(--surface-primary);
}
.notif-organ-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 13px;
}
.notif-organ-select {
    padding: 3px 6px;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--v4-radius-sm);
    font-size: 11px;
    background: var(--surface-primary);
}

/* Toggle switch */
.notif-toggle {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}
.notif-toggle input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.notif-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--color-gray-300);
    border-radius: 20px;
    transition: .2s;
}
.notif-toggle-slider::before {
    content: '';
    position: absolute;
    height: 16px; width: 16px;
    left: 2px; bottom: 2px;
    background: white;
    border-radius: 50%;
    transition: .2s;
}
.notif-toggle input:checked + .notif-toggle-slider { background: var(--color-primary); }
.notif-toggle input:checked + .notif-toggle-slider::before { transform: translateX(16px); }
.notif-toggle input:disabled + .notif-toggle-slider { opacity: 0.5; cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════════════════════════
   "Your Organs" Rail Section + Unread Badges
   ═══════════════════════════════════════════════════════════════════════════ */

/* .v4-rail-organs-hdr replaced by .v4-rail-section-hdr */
.v4-organ-thread {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--v4-radius-sm);
    cursor: pointer;
    transition: all .12s;
    border: 1px solid transparent;
    margin-bottom: 2px;
}
.v4-organ-thread:hover { background: rgba(219,39,119,0.07); }
.v4-organ-thread.active {
    background: rgba(219,39,119,0.12);
    border-color: rgba(219,39,119,0.25);
}
.v4-organ-icon { font-size: 16px; flex-shrink: 0; width: 22px; text-align: center; }
.v4-organ-info { flex: 1; min-width: 0; }
.v4-organ-name {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.v4-organ-time {
    font-size: 11px;
    color: var(--color-gray-400);
    flex-shrink: 0;
}
.v4-unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--color-primary);
    color: white;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}
.v4-severity-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.v4-severity-urgent {
    background: #ef4444;
    box-shadow: 0 0 0 2px rgba(239,68,68,0.25);
}
.v4-severity-important {
    background: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245,158,11,0.25);
}

.v4-organs-show-all {
    padding: 4px 12px;
    font-size: 11px;
    color: var(--color-primary);
    cursor: pointer;
    text-align: center;
}
.v4-organs-show-all:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════════
   Rail Sections — Shared header + peek/expand behavior
   ═══════════════════════════════════════════════════════════════════════════ */

.v4-rail-section-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-top: 1px solid var(--color-gray-100);
    border-left: 3px solid transparent;
}
.v4-rail-section-hdr:first-child { border-top: none; }
.v4-rail-section { padding: 0 6px; }

/* Gap between sections */
.v4-rail-section-hdr { margin-top: 6px; }
.v4-rail-section-hdr:first-child { margin-top: 0; }

/* Section color accents — maximally distinct across the color wheel
   New Thoughts  — Amber  60°   (news/discovery, warm gold)
   Your Organs   — Rose  330°   (body/biological, vivid pink-red)
   Council       — Violet 270°  (deliberation, vivid purple)
   Conversations — Teal  174°   (brand primary, cool green-blue)
*/
.v4-rail-section-hdr.v4-section-news-lens { border-left-color: #d97706; background: rgba(217,119,6,0.13); cursor: pointer; }
.v4-rail-section-hdr.v4-section-news-lens > span { color: #92400e; }
/* New Thoughts header action buttons (refresh + collapse) */
.v4-news-hdr-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.v4-news-refresh-btn {
    display: flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 4px; border: none;
    background: transparent; color: #92400e; font-size: 13px;
    cursor: pointer; opacity: 0.6; transition: opacity 0.15s, background 0.15s;
    line-height: 1;
}
.v4-news-refresh-btn:hover:not(:disabled) { opacity: 1; background: rgba(217,119,6,0.18); }
.v4-news-refresh-btn:disabled { opacity: 0.3; cursor: default; }
@keyframes v4-news-refresh-spin { to { transform: rotate(360deg); } }
.v4-news-refresh-spinning { animation: v4-news-refresh-spin 0.9s linear infinite; }
.v4-rail-section-hdr.v4-section-organs { border-left-color: #db2777; background: rgba(219,39,119,0.10); }
.v4-rail-section-hdr.v4-section-organs > span { color: #9d174d; }
.v4-rail-section-hdr.v4-section-council { border-left-color: #9333ea; background: rgba(147,51,234,0.10); }
.v4-rail-section-hdr.v4-section-council > span { color: #6b21a8; }
.v4-rail-section-hdr.v4-section-special-spaces { border-left-color: #6366f1; background: rgba(99,102,241,0.10); }
.v4-rail-section-hdr.v4-section-special-spaces > span { color: #4338ca; }
.v4-rail-section-hdr.v4-section-conversations { border-left-color: var(--color-primary); background: rgba(13,148,136,0.10); }
.v4-rail-section-hdr.v4-section-conversations > span { color: #115e59; }

/* Section body tinted backgrounds */
.v4-news-items { background: linear-gradient(90deg, rgba(217,119,6,0.05) 0%, rgba(217,119,6,0.01) 60%, transparent 100%); border-radius: 0 0 var(--v4-radius-sm) var(--v4-radius-sm); }
#v4-section-organs { background: linear-gradient(90deg, rgba(219,39,119,0.05) 0%, rgba(219,39,119,0.01) 60%, transparent 100%); border-radius: 0 0 var(--v4-radius-sm) var(--v4-radius-sm); }
#v4-section-council { background: linear-gradient(90deg, rgba(147,51,234,0.05) 0%, rgba(147,51,234,0.01) 60%, transparent 100%); border-radius: 0 0 var(--v4-radius-sm) var(--v4-radius-sm); }
#v4-section-special-spaces { background: linear-gradient(90deg, rgba(99,102,241,0.05) 0%, rgba(99,102,241,0.01) 60%, transparent 100%); border-radius: 0 0 var(--v4-radius-sm) var(--v4-radius-sm); }
#v4-section-conversations { background: linear-gradient(90deg, rgba(13,148,136,0.05) 0%, rgba(13,148,136,0.01) 60%, transparent 100%); border-radius: 0 0 var(--v4-radius-sm) var(--v4-radius-sm); }

/* Peek mode: show N items, hide rest until toggled */
.v4-rail-section-peek .v4-peek-hidden { display: none; }
.v4-rail-section-peek.v4-peek-expanded .v4-peek-hidden { display: block; }

/* "Show N more ▾" / "Show less ▴" toggle */
.v4-rail-show-more {
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 500;
    color: var(--color-gray-500);
    cursor: pointer;
    text-align: center;
    border-radius: var(--v4-radius-sm);
    transition: all 0.15s;
    user-select: none;
}
.v4-rail-section-peek:hover .v4-rail-show-more {
    color: var(--color-primary);
    background: var(--color-primary-subtle);
}
.v4-rail-show-more:hover {
    color: var(--color-primary-dark);
    background: var(--color-primary-subtle);
}

/* "+ New" buttons in section headers */
.v4-rail-council-new, .v4-rail-new-conv {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-primary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--v4-radius-sm);
}
.v4-rail-council-new:hover, .v4-rail-new-conv:hover { background: var(--color-primary-subtle); }

/* ═══════════════════════════════════════════════════════════════════════════
   News Lens — Rail Section + Cards + Expanded View
   ═══════════════════════════════════════════════════════════════════════════ */

/* (news-lens section colors defined above in the unified section block) */

/* Compact news card in rail */
.v4-news-card {
    padding: 8px 12px;
    cursor: pointer;
    border-radius: var(--v4-radius-sm);
    transition: background 0.15s;
}
.v4-news-card:hover { background: rgba(217,119,6,0.08); }
.v4-news-card.active { background: rgba(217,119,6,0.12); border-left: 3px solid #d97706; }
.v4-news-card.v4-news-read { opacity: 0.65; }
.v4-news-card.v4-news-discussed { border-left: 3px solid #0d9488; }
.v4-news-card.v4-news-discussed .v4-news-card-title { color: var(--color-gray-500); }
.v4-news-discussed-icon { font-size: 10px; }
.v4-news-card.v4-news-card-loading { opacity: 0.7; pointer-events: none; }
.v4-news-card-more {
    display: none;
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-gray-400);
    font-size: 14px;
    padding: 2px 4px;
    border-radius: 3px;
    line-height: 1;
}
.v4-news-card-more:hover { color: var(--color-gray-700); background: rgba(0,0,0,0.06); }
.v4-news-card:hover .v4-news-card-more { display: block; }
.v4-news-card { position: relative; }
.v4-news-card-status {
    font-size: 10px;
    color: var(--color-primary);
    font-style: italic;
    animation: v4-news-status-pulse 1.5s ease-in-out infinite;
}
@keyframes v4-news-status-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}
.v4-news-card-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-gray-700);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.v4-news-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
}
.v4-news-card-time {
    font-size: 10px;
    color: var(--color-gray-400);
}

/* Relevance badges */
.v4-news-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.v4-news-badge-direct { background: rgba(16,185,129,0.15); color: #047857; }
.v4-news-badge-categorical { background: rgba(59,130,246,0.15); color: #1d4ed8; }
.v4-news-badge-mechanistic { background: rgba(168,85,247,0.15); color: #7c3aed; }
.v4-news-badge-therapeutic { background: rgba(217,119,6,0.15); color: #92400e; }

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 5: New Thoughts — Article Preview + Pinned Article + Progress
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 5A: Article Preview (canvas, no session) ── */
.v5-news-preview {
    max-width: 650px;
    margin: 40px auto;
    padding: 0 20px;
}
.v5-news-preview-card {
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--v4-radius-md, 8px);
    padding: 20px 24px;
}
.v5-news-preview-badge { margin-bottom: 10px; }
.v5-news-preview-title {
    font-size: 19px;
    font-weight: 600;
    color: var(--color-gray-800);
    line-height: 1.3;
    margin: 0 0 12px;
}
.v5-news-preview-lens {
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-gray-700);
    margin: 0 0 12px;
    padding: 10px 14px;
    background: rgba(168,85,247,0.05);
    border-radius: 6px;
    border-left: 3px solid rgba(168,85,247,0.3);
}
.v5-news-preview-snippet {
    font-size: 13px;
    line-height: 1.55;
    color: var(--color-gray-500);
    margin: 0 0 10px;
}
.v5-news-preview-source {
    font-size: 12px;
    color: var(--color-gray-400);
}
.v5-news-preview-source a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}
.v5-news-preview-source a:hover { text-decoration: underline; }

/* Action buttons */
.v5-news-preview-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}
.v5-news-discuss-btn {
    flex: 1;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #0d9488 0%, #0891b2 100%);
    border: none;
    border-radius: var(--v4-radius-md, 8px);
    cursor: pointer;
    transition: all 0.2s;
}
.v5-news-discuss-btn:hover { opacity: 0.9; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(13,148,136,0.25); }
.v5-news-notinterested-btn {
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-gray-500);
    background: none;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--v4-radius-md, 8px);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.v5-news-notinterested-btn:hover { color: var(--color-gray-700); border-color: var(--color-gray-300); background: var(--color-gray-50); }

/* Progress steps */
.v5-news-progress {
    padding: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.v5-news-step-done {
    font-size: 13px;
    color: #047857;
    font-weight: 500;
    line-height: 1.6;
}
.v5-news-step-active {
    font-size: 13px;
    color: var(--color-primary);
    font-weight: 500;
    line-height: 1.6;
    animation: v4-news-status-pulse 1.5s ease-in-out infinite;
}

/* ── 5B: Pinned article block inside session chat ── */
.v5-pinned-article {
    margin: 8px 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(217,119,6,0.05) 0%, rgba(168,85,247,0.03) 100%);
    border: 1px solid rgba(217,119,6,0.15);
    border-radius: var(--v4-radius-md, 8px);
    border-left: 3px solid #d97706;
}
.v5-pinned-article-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-gray-800);
    line-height: 1.3;
    margin: 6px 0 8px;
}
.v5-pinned-article-lens {
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-gray-600);
    margin: 0 0 8px;
    font-style: italic;
}
.v5-pinned-article-footer { font-size: 11px; color: var(--color-gray-400); }
.v5-pinned-article-source { margin-right: 6px; }
.v5-pinned-article-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}
.v5-pinned-article-link:hover { text-decoration: underline; }

/* Section collapse caret button */
.v4-rail-collapse-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    color: inherit;
    opacity: 0.6;
    padding: 0 2px;
    line-height: 1;
    flex-shrink: 0;
    transition: opacity 0.15s;
}
.v4-rail-collapse-btn:hover { opacity: 1; }

/* New Thoughts collapsed state */
.v4-news-items.v4-news-section-collapsed { display: none; }

/* Show-more hover — section-specific accent colors */
#v4-section-organs:hover .v4-rail-show-more,
#v4-section-organs .v4-rail-show-more:hover {
    color: #9d174d;
    background: rgba(219,39,119,0.10);
}
#v4-section-council:hover .v4-rail-show-more,
#v4-section-council .v4-rail-show-more:hover {
    color: #6b21a8;
    background: rgba(147,51,234,0.10);
}
.v4-news-items:hover .v4-rail-show-more,
.v4-news-items .v4-rail-show-more:hover {
    color: #92400e;
    background: rgba(217,119,6,0.10);
}
/* Conversations show-more uses teal (already the default, explicit for clarity) */
#v4-section-conversations:hover .v4-rail-show-more,
#v4-section-conversations .v4-rail-show-more:hover {
    color: #115e59;
    background: rgba(13,148,136,0.10);
}

/* ── News-thought session: article context banner ── */
.v4-news-context-banner {
    margin: 16px;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(217,119,6,0.06) 0%, rgba(168,85,247,0.04) 100%);
    border: 1px solid rgba(217,119,6,0.15);
    border-radius: var(--v4-radius-md, 8px);
}
.v4-news-context-badge { margin-bottom: 8px; }
.v4-news-context-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--color-gray-800);
    line-height: 1.3;
    margin: 0 0 10px;
}
.v4-news-context-lens {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-gray-700);
    margin: 0 0 10px;
    padding: 10px 12px;
    background: rgba(168,85,247,0.06);
    border-radius: 6px;
}
.v4-news-context-snippet {
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-gray-500);
    margin: 0 0 8px;
}
.v4-news-context-source {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-gray-400);
}
.v4-news-context-link {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-primary);
    text-decoration: none;
}
.v4-news-context-link:hover { text-decoration: underline; }
.v4-news-context-footer { margin-bottom: 14px; }
.v4-news-context-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}
.v4-news-context-actions .v4-news-discuss-btn {
    flex: 1;
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #0d9488 0%, #0891b2 100%);
    border: none;
    border-radius: var(--v4-radius-md, 8px);
    cursor: pointer;
    transition: all 0.2s;
}
.v4-news-context-actions .v4-news-discuss-btn:hover { opacity: 0.9; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(13,148,136,0.25); }
.v4-news-context-actions .v4-news-dismiss-btn {
    padding: 11px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-gray-500);
    background: none;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--v4-radius-md, 8px);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.v4-news-context-actions .v4-news-dismiss-btn:hover { color: var(--color-gray-700); border-color: var(--color-gray-300); background: var(--color-gray-50); }

/* ── News-thought session: progress steps in chat ── */
.v4-news-step-status {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.v4-news-step {
    font-size: 13px;
    color: #047857;
    font-weight: 500;
    line-height: 1.6;
}
.v4-news-step-active {
    font-size: 13px;
    color: var(--color-primary);
    font-weight: 500;
    line-height: 1.6;
    animation: v4-news-status-pulse 1.5s ease-in-out infinite;
}

/* Dismiss button — danger style in more menu */
.session-more-danger { color: #dc2626 !important; }
.session-more-danger:hover { background: rgba(220,38,38,0.08) !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   Council Thread Items
   ═══════════════════════════════════════════════════════════════════════════ */

.v4-council-thread {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--v4-radius-sm);
    cursor: pointer;
    transition: all .12s;
    border: 1px solid transparent;
    margin-bottom: 2px;
}
.v4-council-thread:hover { background: rgba(147,51,234,0.07); }
.v4-council-thread.active {
    background: rgba(147,51,234,0.12);
    border-color: rgba(147,51,234,0.25);
}
.v4-council-icon { font-size: 14px; flex-shrink: 0; width: 22px; text-align: center; }
.v4-council-info { flex: 1; min-width: 0; }
.v4-council-name {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.v4-council-time {
    font-size: 11px;
    color: var(--color-gray-400);
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Council Messages — Perspectives (indented), Synthesis (emphasized)
   ═══════════════════════════════════════════════════════════════════════════ */

.session-message-council-perspective {
    margin-left: 24px !important;
    border-left: 3px solid var(--color-gray-200);
    padding-left: 12px;
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
}
.session-message-council-facilitator {
    opacity: 0.85;
    font-size: 13px;
}
.session-message-council-synthesis {
    border-left: 3px solid var(--color-primary);
    padding-left: 12px;
    background: linear-gradient(135deg, var(--color-primary-subtle), transparent);
    border-radius: var(--radius-md);
}

/* Council thinking indicators */
.council-thinking-group {
    margin-left: 24px;
    padding: 8px 0;
}
.council-thinking {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 13px;
    color: var(--color-gray-500);
    border-left: 3px solid var(--color-gray-200);
    margin-bottom: 4px;
    background: var(--color-gray-50);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    animation: council-fade-in 0.3s ease;
}
.council-thinking-icon { font-size: 16px; flex-shrink: 0; }
.council-thinking-name { font-weight: 500; }
.council-thinking-dots {
    display: flex;
    gap: 3px;
    margin-left: auto;
}
.council-thinking-dots span {
    font-size: 10px;
    color: var(--color-gray-400);
    animation: council-dot-pulse 1.4s infinite ease-in-out;
}
.council-thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.council-thinking-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes council-dot-pulse {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1.2); }
}
@keyframes council-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Interim Handoff Messages — compact accordion per specialist phase
   ═══════════════════════════════════════════════════════════════════════════ */

.session-message-interim {
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-left: 3px solid #2dd4bf;
    border-radius: var(--radius-md);
    padding: 10px 14px;
    margin-bottom: 6px;
    max-width: 100%;
}

.session-interim-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.session-interim-icon {
    font-size: 14px;
    flex-shrink: 0;
}

.session-interim-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-gray-700);
}

.session-interim-badge {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #0d9488;
    background: #f0fdfa;
    border: 1px solid #99f6e4;
    border-radius: 10px;
    padding: 1px 7px;
    flex-shrink: 0;
}

.session-interim-duration {
    font-size: 11px;
    font-weight: 600;
    color: #0d9488;
    background: #f0fdfa;
    border-radius: 8px;
    padding: 1px 6px;
    flex-shrink: 0;
}

.session-interim-time {
    font-size: 11px;
    color: var(--color-gray-400);
    margin-left: auto;
    flex-shrink: 0;
}

/* ── Interim start annotation ── */
.session-message-interim-start {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 14px;
    margin-bottom: 3px;
    border-left: 2px solid #99f6e4;
    opacity: 0.75;
}

.session-interim-start-icon {
    font-size: 11px;
    color: #2dd4bf;
    flex-shrink: 0;
}

.session-interim-start-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-gray-600);
}

.session-interim-start-label {
    font-size: 11px;
    color: var(--color-gray-400);
    font-style: italic;
}

.session-interim-start-time {
    font-size: 11px;
    color: var(--color-gray-400);
    margin-left: auto;
    flex-shrink: 0;
}

.session-message-interim-start--interrupted {
    opacity: 0.45;
}
.session-message-interim-start--interrupted .session-interim-start-icon {
    color: var(--color-gray-400);
}

/* ── Status note — quiet informational line, not a chat bubble ───────────── */
.session-status-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 16px;
    margin: 2px 0;
    opacity: 0.55;
}

.session-status-note-text {
    font-size: 11px;
    color: var(--color-gray-500);
    font-style: italic;
    text-align: center;
}

.session-status-note-time {
    font-size: 10px;
    color: var(--color-gray-400);
    flex-shrink: 0;
}

.session-interim-summary {
    font-size: 13px;
    color: var(--color-gray-600);
    margin-top: 7px;
    line-height: 1.55;
}

.session-interim-details {
    margin-top: 8px;
}

.session-interim-details-toggle {
    font-size: 12px;
    color: var(--color-primary);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 5px;
    user-select: none;
    padding: 2px 0;
}

.session-interim-details-toggle::-webkit-details-marker { display: none; }

.session-interim-details-toggle::before {
    content: '▶';
    font-size: 9px;
    transition: transform 0.15s ease;
    display: inline-block;
}

.session-interim-details[open] .session-interim-details-toggle::before {
    transform: rotate(90deg);
}

.session-interim-raw {
    margin-top: 8px;
    padding: 10px 13px;
    background: var(--color-gray-100);
    border-radius: var(--radius-sm);
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-gray-700);
    max-height: 400px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Specialist Interim Group (SIG) — brand-teal tool-call feed
   ═══════════════════════════════════════════════════════════════════════════ */

/* Prelim windows sit slightly inside regular content — smaller font + tighter padding */
.sig-group {
    margin: 4px 16px 10px;   /* indent from chat edges */
    font-size: 12.5px;
}

.sig-group-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 2px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-primary);
    cursor: pointer;
    list-style: none;
    user-select: none;
    width: fit-content;
    border-radius: var(--radius-sm);
    transition: opacity 0.12s;
}
.sig-group-header::-webkit-details-marker { display: none; }
.sig-group-header:hover { opacity: 0.75; }

.sig-group-icon {
    width: 13px; height: 13px;
    color: var(--color-primary);
    flex-shrink: 0;
}

.sig-group-label { flex: 1; }

.sig-group-chevron {
    font-size: 13px;
    color: var(--color-primary);
    transition: transform 0.15s ease;
    display: inline-block;
    line-height: 1;
    opacity: 0.7;
}
.sig-group[open] .sig-group-chevron { transform: rotate(90deg); }

/* Inner body — the mini-segment bordered panel */
.sig-group-body {
    border: 1px solid var(--color-gray-200);
    border-left: 2px solid var(--color-primary-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #f0f4f8;   /* light blue-gray body — distinct from white chat background */
}

/* Individual specialist row */
.sig-row {
    border-bottom: 1px solid var(--color-gray-100);
}
.sig-row:last-child { border-bottom: none; }

.sig-row-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;    /* taller rows */
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background 0.1s;
    background: #dde4ed;   /* noticeably darker than body — the "header" shade */
}
.sig-row-summary::-webkit-details-marker { display: none; }
.sig-row-summary:hover { background: var(--color-primary-subtle); }

.sig-row-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.sig-row-right {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    margin-left: 10px;
}

/* Brand-teal atom/analysis icon */
.sig-row-icon {
    width: 14px; height: 14px;
    color: var(--color-primary);
    flex-shrink: 0;
    opacity: 0.85;
}

.sig-row-name {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--color-gray-700);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

.sig-row-duration {
    font-size: 11px;
    color: var(--color-gray-400);
}

.sig-row-prelim {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-primary);
    background: var(--color-primary-subtle);
    border: 1px solid var(--color-primary-light);
    border-radius: 3px;
    padding: 1px 5px;
    flex-shrink: 0;
}

.sig-row-chevron {
    font-size: 13px;
    color: var(--color-primary);
    opacity: 0.5;
    transition: transform 0.15s ease;
    display: inline-block;
    line-height: 1;
}
.sig-row[open] > .sig-row-summary .sig-row-chevron { transform: rotate(90deg); }

/* Running row */
.sig-row--running {
    padding: 10px 14px;
}
.sig-row--running .sig-row-left { gap: 8px; }

.sig-row-spinner {
    width: 13px; height: 13px;
    border-radius: 50%;
    border: 1.5px dashed var(--color-primary-light);
    flex-shrink: 0;
    animation: sig-spin 1.4s linear infinite;
}

@keyframes sig-spin {
    to { transform: rotate(360deg); }
}

.sig-row-status {
    font-size: 11.5px;
    color: var(--color-primary);
    opacity: 0.65;
    font-style: italic;
}

/* Interrupted row */
.sig-row--interrupted {
    padding: 10px 14px;
    opacity: 0.4;
}
.sig-row-icon--dash {
    font-size: 12px;
    color: var(--color-gray-400);
    width: 14px;
    text-align: center;
}

/* Expanded detail panel — scrollable, matches body background */
.sig-detail {
    border-top: 1px solid var(--color-gray-200);
    background: #f0f4f8;   /* same as sig-group-body — content sits on the light base */
    max-height: 420px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.sig-detail-summary {
    font-size: 12px;
    color: var(--color-gray-700);
    padding: 8px 12px 7px;
    line-height: 1.55;
    border-bottom: 1px solid var(--color-gray-100);
}

.sig-detail-raw {
    font-size: 11.5px;
    color: var(--color-gray-600);
    padding: 8px 12px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Call Trace — toolMemory slots appended inside the specialist group body */
.sig-trace {
    border-top: 1px dashed var(--color-gray-200);
    margin-top: 2px;
}
.sig-trace-summary {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--color-gray-400);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.sig-trace-summary::-webkit-details-marker { display: none; }
.sig-trace-summary:hover { color: var(--color-gray-500); }
.sig-trace-chevron {
    font-size: 10px;
    opacity: 0.6;
    display: inline-block;
    transition: transform 0.15s ease;
    flex-shrink: 0;
}
.sig-trace[open] > .sig-trace-summary .sig-trace-chevron { transform: rotate(90deg); }
.sig-trace-body { padding: 2px 0 4px; }
.sig-trace-placeholder,
.sig-trace-empty {
    padding: 6px 12px;
    font-size: 11px;
    color: var(--color-gray-400);
    font-style: italic;
}
/* Individual tool-call slot row */
.sig-trace-slot { border-bottom: 1px solid var(--color-gray-100); }
.sig-trace-slot:last-child { border-bottom: none; }
.sig-trace-slot-summary {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    cursor: pointer;
    list-style: none;
}
.sig-trace-slot-summary::-webkit-details-marker { display: none; }
.sig-trace-slot-summary:hover { background: var(--color-primary-subtle); }
.sig-trace-slot-name {
    flex: 1;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--color-gray-700);
    font-family: var(--font-mono, ui-monospace, monospace);
}
.sig-trace-slot-kb {
    font-size: 10px;
    color: var(--color-gray-400);
    background: var(--color-gray-100);
    border-radius: 3px;
    padding: 1px 4px;
    flex-shrink: 0;
}
.sig-trace-slot-iter {
    font-size: 10px;
    color: var(--color-gray-400);
    flex-shrink: 0;
}
.sig-trace-slot-chevron {
    font-size: 10px;
    color: var(--color-gray-400);
    opacity: 0.6;
    display: inline-block;
    transition: transform 0.15s ease;
    flex-shrink: 0;
}
.sig-trace-slot[open] > .sig-trace-slot-summary .sig-trace-slot-chevron { transform: rotate(90deg); }
.sig-trace-slot-detail {
    border-top: 1px solid var(--color-gray-100);
    background: var(--surface-secondary, #fafafa);
}
.sig-trace-slot-text {
    padding: 6px 12px 6px 20px;
    font-size: 11px;
    color: var(--color-gray-600);
    line-height: 1.5;
    border-bottom: 1px solid var(--color-gray-100);
}
.sig-trace-slot-raw-toggle {
    display: flex;
    align-items: center;
    padding: 4px 12px 4px 20px;
    font-size: 10.5px;
    color: var(--color-primary);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.sig-trace-slot-raw-toggle::-webkit-details-marker { display: none; }
.sig-trace-slot-raw {
    padding: 6px 12px 8px 20px;
    font-size: 10.5px;
    color: var(--color-gray-600);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 260px;
    overflow-y: auto;
    overscroll-behavior: contain;
    font-family: var(--font-mono, ui-monospace, monospace);
    line-height: 1.45;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Body Sub-tabs — Chat / Timeline / Screenings
   ═══════════════════════════════════════════════════════════════════════════ */

.body-subtab-bar {
    display: flex;
    gap: 2px;
    padding: 0 16px 8px;
    border-bottom: 1px solid var(--color-gray-100);
    background: var(--surface-primary);
}
.body-subtab {
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-gray-500);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
    border-radius: var(--v4-radius-sm) var(--v4-radius-sm) 0 0;
}
.body-subtab:hover {
    color: var(--color-primary);
    background: var(--color-primary-subtle);
}
.body-subtab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: 600;
}
.body-subtab-content {
    display: none;
    flex: 1;
    overflow-y: auto;
}
.body-subtab-content.active {
    display: flex;
    flex-direction: column;
}

/* Make session-detail-view flex column so sub-tab content fills space */
.session-detail-view {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.session-detail-view > .session-main-layout {
    flex: 1;
    overflow: hidden;
}

/* ── Always a Way: Clinical collapsed header + Patient translation card ────── */

/* Collapsed clinical analysis wrapper — sits above the patient card */
.aw-clinical-details {
    margin-bottom: 10px;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    background: var(--color-gray-50);
    overflow: hidden;
}
.aw-clinical-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-gray-500);
    letter-spacing: 0.01em;
}
.aw-clinical-summary::-webkit-details-marker { display: none; }
.aw-clinical-summary:hover { background: var(--color-gray-100); color: var(--color-gray-700); }
.aw-clinical-label { flex: 1; }
.aw-clinical-digest {
    font-size: 11px;
    font-weight: 400;
    color: var(--color-gray-400);
}
.aw-clinical-chevron {
    font-size: 10px;
    opacity: 0.5;
    display: inline-block;
    transition: transform 0.18s ease;
    flex-shrink: 0;
}
.aw-clinical-details[open] > .aw-clinical-summary .aw-clinical-chevron { transform: rotate(90deg); }
.aw-clinical-body {
    padding: 14px 16px;
    border-top: 1px solid var(--color-gray-200);
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-gray-700);
}
.aw-clinical-body h1, .aw-clinical-body h2, .aw-clinical-body h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 14px 0 6px;
    color: var(--color-gray-800);
}

/* Patient translation card — the primary expanded view */
.aw-patient-card {
    border-left: 3px solid var(--color-primary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: #f0faf9;   /* very soft teal tint */
    padding: 16px 18px 14px;
    margin-top: 4px;
}
[data-theme=dark] .aw-patient-card {
    background: rgba(13, 148, 136, 0.07);
    border-left-color: var(--color-primary-light);
}
.aw-patient-header {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 12px;
    opacity: 0.85;
}
.aw-patient-body {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--color-gray-800);
}
.aw-patient-body h1, .aw-patient-body h2, .aw-patient-body h3 {
    font-size: 14.5px;
    font-weight: 600;
    margin: 16px 0 6px;
    color: var(--color-gray-900);
}
.aw-patient-body p { margin: 0 0 10px; }
.aw-patient-body ul, .aw-patient-body ol {
    margin: 6px 0 10px 18px;
    padding: 0;
}
.aw-patient-body li { margin-bottom: 4px; }
[data-theme=dark] .aw-patient-body { color: var(--color-gray-200); }
[data-theme=dark] .aw-patient-header { color: var(--color-primary-light); }

/* AW Action Plan card (§8 NOW/NEXT/FRONTIER) */
.aw-findings-card {
    margin-top: 10px;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    overflow: hidden;
}
[data-theme=dark] .aw-findings-card { border-color: var(--color-gray-700); }
.aw-findings-header {
    padding: 9px 14px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-gray-500);
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-200);
}
[data-theme=dark] .aw-findings-header {
    background: var(--color-gray-800);
    color: var(--color-gray-400);
    border-bottom-color: var(--color-gray-700);
}
.aw-findings-body { padding: 10px 14px 12px; }
.aw-findings-section { margin-bottom: 10px; }
.aw-findings-section:last-child { margin-bottom: 0; }
.aw-findings-section-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.aw-findings-section--now .aw-findings-section-label { color: #dc6b4e; }
.aw-findings-section--next .aw-findings-section-label { color: #5b85c9; }
.aw-findings-section--frontier .aw-findings-section-label { color: #8b6bbf; }
.aw-findings-item {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--color-gray-700);
    padding: 4px 0 4px 12px;
    border-left: 2px solid var(--color-gray-200);
    margin-bottom: 4px;
}
.aw-findings-item:last-child { margin-bottom: 0; }
.aw-findings-section--now .aw-findings-item { border-left-color: #f0a090; }
.aw-findings-section--next .aw-findings-item { border-left-color: #90aadc; }
.aw-findings-section--frontier .aw-findings-item { border-left-color: #b090d8; }
[data-theme=dark] .aw-findings-item { color: var(--color-gray-300); }

/* AW Follow-on prompt chips (§9) */
.aw-prompts-section {
    margin-top: 10px;
    padding: 10px 0 2px;
}
.aw-prompts-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-gray-400);
    margin-bottom: 8px;
}
.aw-prompts-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.aw-prompt-chip {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid var(--color-primary);
    background: transparent;
    color: var(--color-primary);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    line-height: 1.3;
    text-align: left;
    transition: background 0.15s ease, color 0.15s ease;
}
.aw-prompt-chip:hover {
    background: var(--color-primary);
    color: #fff;
}
[data-theme=dark] .aw-prompt-chip {
    border-color: var(--color-primary-light);
    color: var(--color-primary-light);
}
[data-theme=dark] .aw-prompt-chip:hover {
    background: var(--color-primary-light);
    color: var(--color-gray-900);
}

/* Council creation modal */
.council-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--v4-radius-sm);
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    outline: none;
}
.council-input:focus { border-color: var(--color-primary); }

/* ── Auth Splash Overlay ──────────────────────────────────────────────────── */
.auth-splash {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--v4-bg, #f8fafc);
}
.auth-splash[hidden] { display: none !important; }

.auth-splash-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 40px;
    background: var(--v4-surface, #ffffff);
    border: 1px solid var(--v4-border, #e2e8f0);
    border-radius: 20px;
    box-shadow: 0 8px 40px rgba(0,0,0,.10);
    max-width: 380px;
    width: 90%;
    text-align: center;
}

.auth-splash-logo {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: transparent;
    border: 2px dashed currentColor;
    box-sizing: border-box;
    color: #243c34;
    font-size: 26px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.auth-splash-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--v4-text, #0f172a);
    letter-spacing: -0.3px;
}

.auth-splash-subtitle {
    margin: 0;
    font-size: 14px;
    color: var(--v4-muted, #64748b);
    line-height: 1.5;
}

.auth-splash-signin-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 11px 24px;
    background: #fff;
    border: 1px solid #dadce0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #3c4043;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
    font-family: inherit;
}
.auth-splash-signin-btn:hover {
    background: #f8f9fa;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.auth-splash-signin-btn:active { background: #f0f0f0; }

.auth-splash-disclaimer {
    margin: 4px 0 0;
    font-size: 11px;
    color: var(--v4-muted, #94a3b8);
}

@media (prefers-color-scheme: dark) {
    .auth-splash { background: var(--v4-bg, #0f172a); }
    .auth-splash-card {
        background: var(--v4-surface, #1e293b);
        border-color: var(--v4-border, #334155);
    }
    .auth-splash-signin-btn {
        background: #1e293b;
        border-color: #475569;
        color: #e2e8f0;
    }
    .auth-splash-signin-btn:hover { background: #273549; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AW Coupling Diagram — inline card + zoom modal
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Inline card ─────────────────────────────────────────────────────────── */
.aw-coupling-card {
    margin: 10px 0 6px;
    border: 1px solid var(--v4-border, #e2e8f0);
    border-radius: 10px;
    overflow: hidden;
    background: var(--v4-surface, #fff);
}

.aw-coupling-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 12px;
    border-bottom: 1px solid var(--v4-border, #e2e8f0);
    background: var(--color-gray-50, #f8fafc);
}

.aw-coupling-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--v4-muted, #64748b);
}

.aw-coupling-zoom-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--v4-border, #e2e8f0);
    border-radius: 6px;
    background: transparent;
    color: var(--v4-muted, #64748b);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.aw-coupling-zoom-btn:hover {
    background: var(--color-primary, #14b8a6);
    color: #fff;
    border-color: var(--color-primary, #14b8a6);
}

/* Compact thumbnail — enough to read the gestalt shape, not individual labels */
.aw-coupling-preview {
    padding: 12px 16px;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: 220px;
}

/* Force the SVG to fill available width inline.
   _processDiagrams sets svgEl.style.width='auto' which collapses inside block containers;
   !important wins over that inline style for coupling cards only. */
.aw-coupling-preview .v4-diagram-content {
    width: 100%;
}
.aw-coupling-preview .v4-diagram-content svg {
    width: 100% !important;
    height: auto;
    max-width: none !important;
    display: block;
}

.aw-coupling-legend {
    padding: 5px 12px;
    font-size: 10.5px;
    line-height: 1.5;
    color: var(--v4-muted, #94a3b8);
    border-top: 1px solid var(--v4-border, #e2e8f0);
    background: var(--color-gray-50, #f8fafc);
}

/* ── Modal overlay ───────────────────────────────────────────────────────── */
.aw-coupling-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.52);
    z-index: 9100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity 0.18s ease;
}
.aw-coupling-modal-overlay--open {
    opacity: 1;
}

.aw-coupling-modal {
    background: var(--v4-surface, #fff);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
    width: min(880px, 100%);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    transform: scale(0.97);
    transition: transform 0.18s ease;
}
.aw-coupling-modal-overlay--open .aw-coupling-modal {
    transform: scale(1);
}

.aw-coupling-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    border-bottom: 1px solid var(--v4-border, #e2e8f0);
    flex-shrink: 0;
}

.aw-coupling-modal-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--v4-text, #1e293b);
}

.aw-coupling-modal-close {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: var(--v4-muted, #64748b);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    padding: 0;
}
.aw-coupling-modal-close:hover { background: var(--color-gray-100, #f1f5f9); }

.aw-coupling-modal-body {
    flex: 1;
    overflow: auto;
    padding: 28px 32px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.aw-coupling-modal-body svg {
    width: 100%;
    height: auto;
    max-width: 100%;
}

.aw-coupling-modal-legend {
    padding: 10px 20px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--v4-muted, #64748b);
    border-top: 1px solid var(--v4-border, #e2e8f0);
    background: var(--color-gray-50, #f8fafc);
    border-radius: 0 0 14px 14px;
    flex-shrink: 0;
}

/* ── Edge-list fallback (when Mermaid SVG render fails) ─────────────────── */
.aw-coupling-edge-list {
    list-style: none;
    margin: 0;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.aw-coupling-edge-list li {
    font-size: 14px;
    line-height: 1.5;
    color: var(--v4-text, #0f172a);
    padding: 8px 12px;
    background: var(--color-gray-50, #f8fafc);
    border-radius: 8px;
    border-left: 3px solid var(--v4-teal, #0d9488);
}
.aw-coupling-no-data {
    padding: 20px;
    text-align: center;
    color: var(--v4-muted, #64748b);
    font-size: 13px;
}

/* ── Dark mode ───────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    .aw-coupling-card {
        background: var(--v4-surface, #1e293b);
        border-color: var(--v4-border, #334155);
    }
    .aw-coupling-header,
    .aw-coupling-legend {
        background: rgba(255, 255, 255, 0.04);
        border-color: var(--v4-border, #334155);
    }
    .aw-coupling-modal {
        background: var(--v4-surface, #1e293b);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    }
    .aw-coupling-modal-header { border-color: var(--v4-border, #334155); }
    .aw-coupling-modal-title  { color: #e2e8f0; }
    .aw-coupling-modal-close:hover { background: rgba(255,255,255,0.08); }
    .aw-coupling-modal-legend {
        background: rgba(255, 255, 255, 0.04);
        border-color: var(--v4-border, #334155);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SPACES — Latency Warning Banner
   ─────────────────────────────────────────────────────────────────────────
   Persistent amber banner under the space header. Warns users that deep
   analysis spaces can take several minutes to respond.
   ═══════════════════════════════════════════════════════════════════════════ */

.sps-latency-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: #92400e;
    color: #fef3c7;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    flex-shrink: 0;
}

.sps-latency-icon {
    font-size: 14px;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SPACES — GROUND Memory Collapsible (Phase 25)
   ─────────────────────────────────────────────────────────────────────────
   Rendered inside sps-messages for every phase:'ground' assistant message.
   Color scheme: indigo (~240°) — distinct from interim group (primary/blue)
   and specialist rows. Default collapsed.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Indigo palette tokens */
:root {
    --sps-gm-accent:        #6366f1;   /* indigo-500 */
    --sps-gm-accent-light:  #c7d2fe;   /* indigo-200 */
    --sps-gm-accent-subtle: #eef2ff;   /* indigo-50  */
    --sps-gm-accent-mid:    #818cf8;   /* indigo-400 */
}

/* Outer <details> wrapper */
.sps-gm-group {
    margin: 4px 16px 10px;
    font-size: 12.5px;
    border-radius: 6px;
    /* overflow:hidden must NOT be set on <details> — Chrome collapses its height to 0
       when a new BFC is created on <details>, excluding <summary> from height contribution.
       Clipping is handled by .sps-gm-body instead. */
}

/* <summary> — click target */
.sps-gm-header {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    background: var(--sps-gm-accent-subtle);
    border: 1px solid var(--sps-gm-accent-light);
    border-radius: 6px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    font-weight: 500;
    color: var(--sps-gm-accent);
    transition: background 0.12s;
}
.sps-gm-header::-webkit-details-marker { display: none; }
.sps-gm-header:hover { background: #e0e7ff; } /* indigo-100 */
.sps-gm-group[open] .sps-gm-header {
    border-radius: 6px 6px 0 0;
    border-bottom-color: transparent;
}

/* Icon — the SVG circle-plus */
.sps-gm-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--sps-gm-accent);
}

.sps-gm-label { flex: 1; }

.sps-gm-chevron {
    font-size: 14px;
    color: var(--sps-gm-accent);
    display: inline-block;
    transition: transform 0.15s ease;
}
.sps-gm-group[open] .sps-gm-chevron { transform: rotate(90deg); }

/* Body panel */
.sps-gm-body {
    border: 1px solid var(--sps-gm-accent-light);
    border-top: none;
    border-radius: 0 0 6px 6px;
    overflow: hidden;
    background: #fafbff;
    padding-bottom: 4px;
}

/* Section (ResearchMemory / SynthesisMemory) */
.sps-gm-section { border-top: 1px solid #e8ecff; }
.sps-gm-section:first-child { border-top: none; }

.sps-gm-section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px 5px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sps-gm-accent);
    background: #f0f4ff;
}

.sps-gm-section-icon { font-size: 12px; }

.sps-gm-section-count {
    margin-left: auto;
    background: var(--sps-gm-accent-light);
    color: var(--sps-gm-accent);
    border-radius: 10px;
    padding: 0 7px;
    font-size: 10px;
    font-weight: 700;
}

/* Individual chunk card */
.sps-gm-chunk {
    padding: 8px 14px 7px;
    border-top: 1px solid #eceeff;
    font-size: 12px;
}
.sps-gm-chunk:first-of-type { border-top: none; }

.sps-gm-chunk-title {
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 2px;
    line-height: 1.4;
}

.sps-gm-chunk-meta,
.sps-gm-chunk-from {
    color: #718096;
    font-size: 11px;
    margin-bottom: 2px;
}

.sps-gm-chunk-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 3px 0;
}

.sps-gm-tag {
    background: var(--sps-gm-accent-subtle);
    color: var(--sps-gm-accent);
    border: 1px solid var(--sps-gm-accent-light);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 10.5px;
    font-weight: 500;
}

.sps-gm-chunk-memory {
    color: var(--sps-gm-accent-mid);
    font-size: 11px;
    margin-bottom: 2px;
}

.sps-gm-chunk-score {
    color: #a0aec0;
    font-size: 10.5px;
    margin-bottom: 2px;
}

.sps-gm-chunk-excerpt {
    color: #4a5568;
    font-size: 11.5px;
    line-height: 1.5;
    font-style: italic;
    margin-top: 3px;
    border-left: 2px solid var(--sps-gm-accent-light);
    padding-left: 8px;
}

.sps-gm-view-link {
    display: inline-block;
    margin-top: 4px;
    font-size: 11px;
    color: var(--sps-gm-accent);
    text-decoration: none;
    font-weight: 500;
}
.sps-gm-view-link:hover { text-decoration: underline; }

/* Empty corpus note (first run) */
.sps-gm-empty {
    margin: 4px 16px 10px;
    padding: 7px 12px;
    font-size: 12px;
    color: #a0aec0;
    display: flex;
    align-items: center;
    gap: 7px;
    background: #f7f8fc;
    border: 1px solid #e8ecff;
    border-radius: 6px;
}
.sps-gm-empty-icon { font-size: 14px; opacity: 0.6; }

/* Dark mode */
[data-theme="dark"] {
    --sps-gm-accent:        #818cf8;
    --sps-gm-accent-light:  #3730a3;
    --sps-gm-accent-subtle: #1e1b4b;
    --sps-gm-accent-mid:    #a5b4fc;
}
[data-theme="dark"] .sps-gm-header         { background: #1e1b4b; border-color: #3730a3; }
[data-theme="dark"] .sps-gm-header:hover   { background: #2e27a3; }
[data-theme="dark"] .sps-gm-body           { background: #0f0e1a; border-color: #3730a3; }
[data-theme="dark"] .sps-gm-section        { border-color: #2d2b60; }
[data-theme="dark"] .sps-gm-section-header { background: #17153b; color: #a5b4fc; }
[data-theme="dark"] .sps-gm-section-count  { background: #3730a3; color: #c7d2fe; }
[data-theme="dark"] .sps-gm-chunk          { border-color: #252350; }
[data-theme="dark"] .sps-gm-chunk-title    { color: #e2e8f0; }
[data-theme="dark"] .sps-gm-chunk-meta,
[data-theme="dark"] .sps-gm-chunk-from     { color: #94a3b8; }
[data-theme="dark"] .sps-gm-chunk-excerpt  { color: #94a3b8; border-color: #3730a3; }
[data-theme="dark"] .sps-gm-tag            { background: #1e1b4b; color: #a5b4fc; border-color: #3730a3; }
[data-theme="dark"] .sps-gm-empty          { background: #0f0e1a; border-color: #3730a3; color: #64748b; }

/* Flash highlight when "view full response" scrolls to a prior message */
@keyframes sps-gm-flash {
    0%   { background: #e0e7ff; }
    100% { background: transparent; }
}
.sps-gm-highlight {
    animation: sps-gm-flash 2s ease-out forwards;
    border-radius: 6px;
}

/* Phase 26 — Memory attribution badge */
.sps-memory-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 6px 0 2px 12px;
    padding: 3px 10px;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    color: #4f46e5;
    letter-spacing: 0.01em;
}
@media (prefers-color-scheme: dark) {
    .sps-memory-badge {
        background: rgba(99, 102, 241, 0.15);
        border-color: rgba(99, 102, 241, 0.35);
        color: #a5b4fc;
    }
}

/* Sidebar reading and keyboard focus */
.v4-rail-icon-svg { width: 20px; height: 20px; display: block; }
.v4-thread-icon, .v4-organ-icon, .v4-council-icon, .v4-space-icon { width: 22px; flex-shrink: 0; color: #376b68; }
.v4-thread-name, .v4-council-name, .v4-news-card-title {
    font-size: 14px; line-height: 1.4; white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.v4-thread:focus .v4-thread-name, .v4-council-thread:focus .v4-council-name,
.v4-news-card:focus .v4-news-card-title { -webkit-line-clamp: unset; }
.v4-organ-name, .v4-space-name { font-size: 14px; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; }
.v4-thread-meta, .v4-organ-time, .v4-council-time, .v4-news-card-time,
.v4-space-status, .v4-rail-show-more { font-size: 12px; color: #52616b; opacity: 1; }
.v4-news-card.v4-news-read { opacity: 1; }
.v4-news-card.v4-news-read .v4-news-card-title { font-weight: 400; }
.v4-unread-badge, .v4-news-badge { font-size: 11px; }
.v4-feature-description { display: block; font-size: 12px; line-height: 1.4; font-weight: 400; text-transform: none; letter-spacing: normal; color: #52616b; margin-top: 3px; }
.v4-news-description { padding: 8px 10px 0; }
.v4-news-feed-status { padding: 8px 10px; font-size: 12px; line-height: 1.5; color: #52616b; }
.v4-news-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 1; border: 0; background: none; color: #92400e; font: inherit; text-transform: inherit; cursor: pointer; padding: 6px 0; text-align: left; }
.v4-news-refresh-btn { min-width: 28px; min-height: 28px; opacity: 1; }
.v4-news-items { background: linear-gradient(90deg, rgba(217,119,6,.05), transparent); }
.v4-news-items .v4-news-card-more { display: block; }
.v4-news-card-title { padding-right: 18px; }
.v4-news-toggle:focus-visible, .v4-news-refresh-btn:focus-visible,
.v4-thread:focus-visible, .v4-organ-thread:focus-visible, .v4-council-thread:focus-visible,
.v4-news-card:focus-visible, .v4-space-card:focus-visible { outline: 2px solid #0d9488; outline-offset: 2px; }
.v4-thread:focus-within .v4-thread-more, .v4-council-thread:focus-within .v4-thread-more { opacity: 1; }
.v4-rail-council-new { flex-shrink: 0; white-space: nowrap; }

/* Descriptions float outside the scrolling rail, without adding row height. */
.v4-rail-tooltip {
    position: fixed; z-index: 10000; max-width: min(280px, calc(100vw - 16px));
    padding: 10px 12px; border-radius: 8px; background: #203b3a; color: #fff;
    font-size: 13px; line-height: 1.5; box-shadow: 0 4px 16px rgba(0,0,0,.18);
    overflow-wrap: anywhere;
}
.v4-rail-tooltip[hidden] { display: none; }
[data-rail-tooltip]:focus-visible { outline: 2px solid #0d9488; outline-offset: 2px; }

/* Keep the outlined brand readable in the app’s dark theme. */
:root[data-theme="dark"] .v4-rail-logo,
:root[data-theme="dark"] .auth-splash-logo { color: #d7e4d5; }

/* Toast notifications are disabled across the app. */
#toast-container, .toast { display: none !important; }
