/* KBZ Big Brother Viewer — Dark Surveillance Theme */

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

:root {
    --bg-primary: #1a1a2e;
    --bg-secondary: #16213e;
    --bg-card: #0f3460;
    --accent: #e94560;
    --accent-dim: #c23152;
    --text-primary: #eee;
    --text-secondary: #999;
    --text-muted: #666;
    --success: #4ecca3;
    --warning: #f0c040;
    --border: #2a2a4a;
    --radius: 8px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
}

/* Header */
.header {
    background: var(--bg-secondary);
    border-bottom: 2px solid var(--accent);
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
}
.header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.hamburger-btn {
    display: none; /* shown on mobile via media query */
    background: none; border: none; color: var(--text-secondary);
    cursor: pointer; padding: 4px; border-radius: 4px;
    flex-shrink: 0;
}
.hamburger-btn:hover { color: var(--text-primary); background: var(--bg-card); }

/* Back-to-home link inside the viewer chrome. Compact arrow that
   doesn't compete with the brand mark; opens the marketing landing. */
.header-home-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 6px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 500;
    flex-shrink: 0;
    transition: background .15s, color .15s;
}
.header-home-link:hover {
    background: var(--bg-card);
    color: var(--accent);
}

.header-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.header-community-name {
    color: var(--text-primary);
    font-weight: 400;
    margin-left: 8px;
    font-size: 1rem;
}

.header-stats {
    display: flex;
    gap: 20px;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.header-stat {
    display: flex;
    align-items: center;
    gap: 6px;
}

.header-stat .label {
    color: var(--text-secondary);
}

.header-stat .value {
    color: var(--text-primary);
    font-weight: 600;
}

.header-stat select {
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.78rem;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s;
}
.header-stat select:hover {
    border-color: var(--accent);
}
.header-stat select:focus {
    border-color: var(--accent);
}

/* Tab Navigation */
.tab-nav {
    display: flex;
    align-items: stretch;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    padding: 0 16px;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
    scroll-snap-type: x proximity;
}
.tab-nav::-webkit-scrollbar { display: none; }

.tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 14px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    white-space: nowrap;
    scroll-snap-align: center;
    line-height: 1;
}

.tab-btn .tab-icon {
    font-size: 1rem;
    line-height: 1;
}

.tab-btn:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,0.03);
}

.tab-btn.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* Visual separator between tab groups. Subtle vertical divider that
   doesn't compete with the active-tab underline; provides at-a-glance
   structure without adding labeled section headings. */
.tab-group-sep {
    width: 1px;
    align-self: center;
    height: 18px;
    background: var(--border);
    margin: 0 6px;
    opacity: 0.7;
    flex-shrink: 0;
}

.refresh-btn {
    padding: 4px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}
.refresh-btn:hover:not(:disabled) {
    color: var(--text-primary);
    border-color: var(--accent);
}
.refresh-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* App Body — sidebar + content flex layout */
.app-body {
    display: flex;
    max-width: 1400px;
    margin: 0 auto;
}

.app-body .main-content {
    flex: 1;
    min-width: 0;
}

/* Action Sidebar */
.action-sidebar {
    width: 180px;
    min-width: 180px;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    padding: 12px 0;
    min-height: calc(100vh - 100px);
    position: sticky;
    top: 50px;
    align-self: flex-start;
}

.action-sidebar-title {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 12px 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}

.action-sidebar-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s, color 0.15s;
    border-left: 3px solid transparent;
}

.action-sidebar-item:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}

.action-sidebar-item.active {
    background: var(--bg-card);
    color: var(--accent);
    border-left-color: var(--accent);
    font-weight: 600;
}

.action-sidebar-icon {
    font-size: 0.75rem;
}

.action-sidebar-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sidebar overlay (mobile) */
.sidebar-overlay {
    display: none;
}

/* Action Breadcrumb */
.action-breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    padding: 6px 24px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}
.action-breadcrumb-item {
    color: var(--accent);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s;
}
.action-breadcrumb-item:hover {
    text-decoration: underline;
}
.action-breadcrumb-item.current {
    color: var(--text-primary);
    font-weight: 600;
    cursor: default;
}
.action-breadcrumb-item.current:hover {
    text-decoration: none;
}
.action-breadcrumb-sep {
    color: var(--text-muted);
    margin: 0 2px;
}

/* Main content */
.main-content {
    padding: 20px 24px;
}

/* Dashboard Grid — overview on top, proposal board below, both full width. */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

/* Cards */
.card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
}

.card-title {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

/* Overview Section */
.overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.overview-stat {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 12px;
    text-align: center;
}

.overview-stat .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
}

.overview-stat .stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Pulse Progress Bar */
.pulse-bar {
    background: var(--bg-card);
    border-radius: 20px;
    height: 24px;
    overflow: hidden;
    position: relative;
    margin: 8px 0;
}

.pulse-bar-fill {
    background: linear-gradient(90deg, var(--accent-dim), var(--accent));
    height: 100%;
    border-radius: 20px;
    transition: width 0.5s ease;
    min-width: 2px;
}

.pulse-bar-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Activity Feed */
.activity-feed {
    max-height: 500px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.event-item {
    display: flex;
    gap: 10px;
    padding: 8px 10px;
    background: var(--bg-card);
    border-radius: 6px;
    font-size: 0.85rem;
    align-items: flex-start;
    animation: fadeIn 0.3s ease;
    transition: background 0.15s;
}
.event-item.clickable {
    cursor: pointer;
}
.event-item.clickable:hover {
    background: var(--bg-secondary);
}

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

.event-time {
    color: var(--text-muted);
    font-size: 0.75rem;
    white-space: nowrap;
    min-width: 50px;
}

.event-agent {
    font-weight: 600;
    white-space: nowrap;
    min-width: 60px;
}

.event-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
}

.badge-create_proposal { background: #1b5e20; color: #a5d6a7; }
.badge-support_proposal { background: #0d47a1; color: #90caf9; }
.badge-support_pulse { background: #4a148c; color: #ce93d8; }
.badge-comment { background: #e65100; color: #ffcc80; }
.badge-reply_comment { background: #bf360c; color: #ffab91; }
.badge-vote_comment { background: #006064; color: #80deea; }
.badge-do_nothing { background: #37474f; color: #90a4ae; }
.badge-error { background: #b71c1c; color: #ef9a9a; }
.badge-send_chat { background: #1565c0; color: #bbdefb; }
.badge-unknown { background: #4e342e; color: #ffccbc; }
.badge-edit_artifact { background: #6a1b9a; color: #e1bee7; }
.badge-create_artifact { background: #283593; color: #c5cae9; }

/* Time-gap separator between bursts of activity. Sits as a centered
   chip across the feed width; visually clusters events that happened
   within the same ~30s window so the eye sees "rounds" naturally. */
.event-time-gap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 0;
    color: var(--text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.event-time-gap::before,
.event-time-gap::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
    opacity: 0.5;
}
.event-time-gap span {
    background: var(--bg-card);
    padding: 2px 12px;
    border-radius: 100px;
    border: 1px solid var(--border);
}

.event-details {
    color: var(--text-secondary);
    flex: 1;
    line-height: 1.4;
}

.event-reason {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 2px;
}

/* Proposal Board */
.proposal-columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

.proposal-column-title {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}

/* ── Proposal card (redesigned — parity with landing mock + app) ────
 * Translated to the viewer's deep-blue surveillance palette.
 * Structure mirrors app/style.css .proposal-card so zooming into a
 * proposal in the sim feels visually identical to seeing it in the
 * app: type chip, status pill, author avatar+name, title+body,
 * support bar with threshold tick, footer.
 */
.proposal-card {
    background: var(--bg-card);
    border: 1px solid rgba(78, 204, 163, 0.12);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 10px;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    position: relative;
}
.proposal-card.clickable { cursor: pointer; }
.proposal-card.clickable:hover {
    border-color: var(--accent);
    transform: translateX(2px);
}
.proposal-card.accepted { border-left-color: var(--success); }
.proposal-card.rejected { border-left-color: #f44336; }
.proposal-card.ready-to-pass {
    border-left-color: var(--warning);
    background: linear-gradient(180deg, rgba(240,192,64,0.08), var(--bg-card) 60%);
    box-shadow: inset 0 0 0 1px rgba(240, 192, 64, 0.18);
}

.proposal-card .pc-head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.5rem;
}
.proposal-card .pc-type {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
    color: var(--warning); text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 0.3rem;
}
.proposal-card .pc-status {
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em;
    padding: 0.22em 0.6em; border-radius: 4px; white-space: nowrap;
    text-transform: uppercase;
}
.pc-status.outthere { color: var(--warning); background: rgba(240,192,64,.12); border:1px solid rgba(240,192,64,.35); }
.pc-status.ontheair { color: var(--success); background: rgba(78,204,163,.12); border:1px solid rgba(78,204,163,.35); }
.pc-status.accepted { color: var(--success); background: rgba(78,204,163,.15); border:1px solid rgba(78,204,163,.45); }
.pc-status.rejected { color: #f44336; background: rgba(244,67,54,.1); border:1px solid rgba(244,67,54,.35); }
.pc-status.draft,
.pc-status.canceled { color: var(--text-muted); background: rgba(255,255,255,.04); border:1px solid var(--border); }

.proposal-card .pc-author {
    display: flex; align-items: center; gap: 0.4rem;
    margin-bottom: 0.35rem;
}
.pc-avatar {
    width: 22px; height: 22px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--warning));
    color: #fff; font-size: 0.7rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pc-author-name { color: #eee; font-weight: 600; font-size: 0.8rem; }
.pc-author-meta { color: var(--text-muted); font-size: 0.72rem; }

.proposal-card .pc-title {
    color: #f3f3f3; font-size: 0.92rem; font-weight: 600;
    margin: 0.3rem 0 0.3rem; line-height: 1.35;
}
/* Pitch preview on the card body — truncated rationale. Slightly muted
 * compared to the title so the title still leads visually. */
.proposal-card .pc-body {
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.45;
    margin: 0 0 0.55rem;
    white-space: pre-wrap;
}

.pc-support { margin: 0.6rem 0 0.2rem; }
.pc-support-labels {
    display: flex; justify-content: space-between;
    font-size: 0.72rem; color: var(--text-secondary);
    margin-bottom: 0.3rem;
}
.pc-support-labels strong { color: var(--success); font-weight: 700; }
.pc-support-track {
    position: relative; height: 6px; border-radius: 3px;
    background: rgba(255,255,255,0.06); overflow: visible;
}
.pc-support-fill {
    height: 100%; border-radius: 3px;
    background: linear-gradient(90deg, var(--success), var(--warning));
    box-shadow: 0 0 6px rgba(78,204,163,.4);
    transition: width 0.6s cubic-bezier(.2,.7,.3,1);
}
.pc-threshold-tick {
    position: absolute; top: -3px;
    width: 2px; height: 12px;
    background: #fff; opacity: 0.35;
}

.proposal-card .pc-footer {
    margin-top: 0.55rem; padding-top: 0.45rem;
    border-top: 1px dashed rgba(255,255,255,.08);
    display: flex; justify-content: space-between; align-items: center;
    gap: 0.6rem; flex-wrap: wrap;
    font-size: 0.72rem; color: var(--text-muted);
}
.ready-badge {
    color: var(--warning);
    font-weight: 700;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.2em 0.5em;
    border-radius: 3px;
    background: rgba(240,192,64,.12);
    border: 1px solid rgba(240,192,64,.35);
}

/* Legacy classes kept for any stragglers / chart tooltips */
.proposal-type { font-size: 0.7rem; font-weight: 600; color: var(--warning); text-transform: uppercase; }
.proposal-text { font-size: 0.85rem; margin: 4px 0; line-height: 1.3; }
.proposal-meta { font-size: 0.75rem; color: var(--text-muted); display: flex; gap: 10px; }

/* Agent Grid */
.agent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.agent-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.agent-card:hover {
    border-color: var(--accent);
}

.agent-card.expanded {
    grid-column: 1 / -1;
}

.agent-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

/* Initial-monogram avatar — colored disc with the agent's first
   letter. Color is driven by the agent-color-N class added to the
   div itself; both background and letter color are baked into the
   class so contrast is always strong (light bg → dark letter, dark
   bg → light letter). Drops to 36px on phones. */
.agent-avatar {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1;
    color: #fff;
    background: var(--bg-card);
    box-shadow: 0 0 0 2px var(--bg-secondary), 0 2px 6px rgba(0,0,0,0.18);
    /* When a color class is also on the avatar div, override both. */
}
.agent-avatar.agent-color-0 { background: #e94560; color: #fff; }
.agent-avatar.agent-color-1 { background: #4ecca3; color: #0a3a2a; }
.agent-avatar.agent-color-2 { background: #f0c040; color: #3a2a08; }
.agent-avatar.agent-color-3 { background: #90caf9; color: #0a2840; }
.agent-avatar.agent-color-4 { background: #ce93d8; color: #2a0a40; }
.agent-avatar.agent-color-5 { background: #ffab91; color: #401408; }

.agent-identity {
    flex: 1;
    min-width: 0;
}

.agent-name {
    font-size: 1.1rem;
    font-weight: 700;
}

.agent-role {
    font-size: 0.78rem;
    color: var(--accent);
    margin-top: 1px;
}

.agent-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.agent-actions-count {
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--bg-card);
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.agent-background {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 8px 0;
    line-height: 1.4;
}

.agent-detail-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 16px;
    margin-top: 12px;
}

/* Radar Chart Container */
.radar-container {
    width: 280px;
    height: 280px;
}

/* Action History */
.action-list {
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.action-item {
    background: var(--bg-card);
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 0.8rem;
}

.action-item .action-type {
    font-weight: 600;
    color: var(--accent);
}

.action-item .action-detail {
    color: var(--text-secondary);
    margin-top: 2px;
}

.action-item .action-time {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* Interview Tab */
.interview-container {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 16px;
    min-height: 500px;
}

.agent-selector {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.agent-select-btn {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
}

.agent-select-btn:hover {
    border-color: var(--accent);
}

.agent-select-btn.selected {
    border-color: var(--accent);
    background: var(--bg-secondary);
}

.agent-select-btn .name {
    font-weight: 600;
}

.agent-select-btn .role {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.chat-area {
    display: flex;
    flex-direction: column;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: var(--bg-card);
    border-radius: var(--radius);
    margin-bottom: 12px;
    min-height: 300px;
}

.chat-bubble {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.5;
}

.chat-bubble.question {
    align-self: flex-end;
    background: var(--accent);
    color: white;
    border-bottom-right-radius: 4px;
}

.chat-bubble.answer {
    align-self: flex-start;
    background: var(--bg-secondary);
    border-bottom-left-radius: 4px;
}

.chat-bubble .bubble-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.chat-bubble.answer .bubble-label {
    color: var(--accent);
}

.chat-input-row {
    display: flex;
    gap: 8px;
}

.chat-input {
    flex: 1;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 14px;
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
}

.chat-input:focus {
    border-color: var(--accent);
}

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

.send-btn {
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.2s;
}

.send-btn:hover {
    background: var(--accent-dim);
}

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

/* Timeline */
/* ── Timeline filter bar ─────────────────────────────── */
.timeline-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.timeline-filter-input {
    flex: 1;
    min-width: 140px;
    padding: 5px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 0.85rem;
}
.timeline-filter-input:focus {
    outline: none;
    border-color: var(--accent);
}

.timeline-filter-select {
    padding: 5px 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
}
.timeline-filter-select:focus {
    outline: none;
    border-color: var(--accent);
}

.timeline-filter-clear {
    padding: 4px 10px;
    background: transparent;
    border: 1px solid var(--danger, #e05);
    border-radius: var(--radius);
    color: var(--danger, #e05);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s;
}
.timeline-filter-clear:hover {
    background: rgba(238, 0, 85, 0.1);
}

.timeline-filter-count {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.timeline {
    position: relative;
    padding-left: 30px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border);
}

.timeline-item {
    position: relative;
    margin-bottom: 16px;
    padding: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -24px;
    top: 16px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
}

.timeline-item.done::before {
    background: var(--success);
}

.timeline-item.next::before {
    background: var(--warning);
    animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 4px var(--warning); }
    50% { box-shadow: 0 0 12px var(--warning); }
}

.timeline-marker {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}

.pulse-marker {
    background: var(--warning);
    color: var(--bg-primary);
}

.proposal-marker {
    background: var(--accent);
    color: white;
}

.timeline-event {
    padding: 6px 10px;
}

.timeline-event-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.timeline-event-detail {
    font-size: 0.8rem;
    color: var(--text-secondary);
    flex: 1;
}

.timeline-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.timeline-meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.timeline-proposals {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-size: 0.8rem;
}

.timeline-proposal {
    padding: 4px 0;
    display: flex;
    gap: 8px;
    align-items: center;
}

.timeline-proposal .status-icon {
    font-size: 0.75rem;
}

/* Loading spinner */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--text-muted);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

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

.loading-center {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--text-secondary);
    gap: 10px;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Run round button */
.run-round-btn {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--accent);
    border-radius: 6px;
    padding: 6px 14px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s;
}

.run-round-btn:hover {
    background: var(--accent);
}

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

.run-round-btn.paused {
    background: var(--success);
    border-color: var(--success);
    color: var(--bg-primary);
}

.run-round-btn.restart-btn {
    border-color: var(--warning, #f0c040);
    color: var(--warning, #f0c040);
}
.run-round-btn.restart-btn:hover {
    background: var(--warning, #f0c040);
    color: var(--bg-primary);
}

/* Agent color coding */
.agent-color-0 { color: #e94560; }
.agent-color-1 { color: #4ecca3; }
.agent-color-2 { color: #f0c040; }
.agent-color-3 { color: #90caf9; }
.agent-color-4 { color: #ce93d8; }
.agent-color-5 { color: #ffab91; }

/* ═══════════════════════════════════════════════════════
   VARIABLES WIDGET — inline on dashboard
   ═══════════════════════════════════════════════════════ */

.vars-widget {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.vars-widget-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.vars-widget-title {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    flex: 1;
}

.vars-widget-action {
    font-size: 0.72rem;
    color: var(--accent);
    cursor: pointer;
    transition: opacity 0.2s;
}

.vars-widget-action:hover {
    opacity: 0.75;
}

.vars-inline-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 4px;
}

.var-inline-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    background: var(--bg-card);
    border-radius: 4px;
    font-size: 0.78rem;
    border: 1px solid transparent;
    transition: border-color 0.15s;
}

.var-inline-item.clickable:hover {
    border-color: var(--warning);
    cursor: pointer;
}

.var-inline-name {
    color: var(--text-secondary);
    font-size: 0.72rem;
}

.var-inline-value {
    color: var(--warning);
    font-weight: 700;
    font-family: monospace;
    font-size: 0.78rem;
}

/* ═══════════════════════════════════════════════════════
   DETAIL PANEL — Sliding overlay with breadcrumb nav
   ═══════════════════════════════════════════════════════ */

.detail-panel-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 200;
    animation: fadeIn 0.2s ease;
}

.detail-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 60vw;
    max-width: 900px;
    min-width: 400px;
    height: 100vh;
    background: var(--bg-primary);
    border-left: 2px solid var(--accent);
    z-index: 201;
    display: flex;
    flex-direction: column;
    animation: slideIn 0.25s ease;
    overflow: hidden;
}

@keyframes slideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.detail-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.detail-close-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 1.4rem;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.detail-close-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.detail-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

/* Breadcrumbs */
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    flex: 1;
    overflow-x: auto;
}

.breadcrumb-sep {
    color: var(--text-muted);
    margin: 0 4px;
}

.breadcrumb-item {
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.2s;
    white-space: nowrap;
}

.breadcrumb-item:hover {
    color: var(--accent);
}

.breadcrumb-item.current {
    color: var(--text-primary);
    font-weight: 600;
    cursor: default;
}

/* Entity Link (inline clickable) */
.entity-link {
    color: var(--accent);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s;
    font-weight: 500;
}

.entity-link:hover {
    color: #ff6b81;
    text-decoration: underline;
}

/* Clickable elements */
.clickable {
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.clickable:hover {
    border-color: var(--accent);
}

.proposal-card.clickable:hover {
    background: rgba(233, 69, 96, 0.1);
}

.overview-stat.clickable:hover {
    background: rgba(233, 69, 96, 0.15);
}

/* Detail View common styles */
.detail-view {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.detail-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
}

.detail-section-title {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

.detail-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.detail-meta {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.detail-text-block {
    background: var(--bg-card);
    border-radius: 6px;
    padding: 12px;
    font-size: 0.9rem;
    line-height: 1.6;
    white-space: pre-wrap;
}

/* Proposal pitch / description — prominent section */
.proposal-pitch-section {
    background: rgba(233, 69, 96, 0.06);
    border-radius: 8px;
    padding: 12px;
    border: 1px solid rgba(233, 69, 96, 0.15);
}
.proposal-pitch-text {
    font-size: 1rem;
    line-height: 1.6;
    white-space: pre-wrap;
    color: var(--text-primary);
}

/* Proposal details grid */
.proposal-details-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    font-size: 0.8rem;
}
.proposal-detail-label {
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
    align-self: center;
}
.proposal-detail-value {
    color: var(--text-secondary);
}
.proposal-detail-value.mono {
    font-family: "SF Mono", "Fira Code", monospace;
    font-size: 0.75rem;
    word-break: break-all;
}

.detail-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

/* Status badges */
.detail-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.detail-type-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--bg-card);
    color: var(--accent);
    text-transform: uppercase;
}

.status-accepted { background: #1b5e20; color: #a5d6a7; }
.status-rejected { background: #b71c1c; color: #ef9a9a; }
.status-ontheair { background: #4a148c; color: #ce93d8; }
.status-outthere { background: #0d47a1; color: #90caf9; }

.mini-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    background: var(--bg-card);
    color: var(--text-secondary);
}

/* Detail list items */
.detail-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-list-item {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    background: var(--bg-card);
    border-radius: 6px;
    font-size: 0.85rem;
    border: 1px solid transparent;
}

.detail-list-item.clickable:hover {
    border-color: var(--accent);
    background: rgba(233, 69, 96, 0.08);
}

.detail-list-text {
    flex: 1;
    color: var(--text-secondary);
}

.detail-list-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Comment Thread */
.comment-thread {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.comment-node {
    background: var(--bg-card);
    border-radius: 6px;
    padding: 10px;
    border-left: 2px solid var(--border);
}

.comment-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    font-size: 0.8rem;
}

.comment-score {
    color: var(--success);
    font-size: 0.75rem;
    font-weight: 600;
}

.comment-time {
    color: var(--text-muted);
    font-size: 0.7rem;
}

.comment-text {
    font-size: 0.85rem;
    color: var(--text-primary);
    line-height: 1.5;
    margin-bottom: 6px;
}

/* HN-style comment thread */
.hn-comment-thread {
    display: flex;
    flex-direction: column;
}

.hn-comment {
    /* no gap — nesting handled by padding */
}

.hn-comment-indent {
    display: flex;
    gap: 0;
}

.hn-comment-bar {
    width: 0;
    flex-shrink: 0;
    border-left: 2px solid var(--border);
    margin-right: 10px;
    min-height: 100%;
    cursor: pointer;
    transition: border-color 0.15s;
}
.hn-comment-bar:hover {
    border-left-color: var(--accent) !important;
}

.hn-comment-body {
    flex: 1;
    padding: 6px 0 10px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.hn-comment-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
    font-size: 0.78rem;
}

.hn-comment-author {
    font-weight: 600;
}

.hn-comment-time {
    color: var(--text-muted);
    font-size: 0.7rem;
}

.hn-comment-score {
    color: var(--success);
    font-size: 0.7rem;
    font-weight: 600;
}

.hn-comment-text {
    font-size: 0.85rem;
    color: var(--text-primary);
    line-height: 1.5;
}

/* Supporter chips */
.supporter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.supporter-chip {
    display: inline-block;
    padding: 3px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    transition: border-color 0.15s;
}

.supporter-chip.clickable:hover {
    border-color: var(--accent);
}

/* Member detail - agent info grid */
.member-agent-info {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 16px;
    align-items: start;
}

/* Variables Panel */
.var-group {
    margin-bottom: 16px;
}

.var-group-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.var-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 6px;
}

.var-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: var(--bg-card);
    border-radius: 4px;
    font-size: 0.8rem;
    border: 1px solid transparent;
    transition: border-color 0.15s;
}

.var-item.clickable:hover {
    border-color: var(--warning);
    cursor: pointer;
}

.var-item.clickable:hover .var-name {
    color: var(--text-primary);
}

.var-item.clickable:hover .var-value {
    color: var(--warning);
}

.var-name {
    color: var(--text-secondary);
}

.var-value {
    color: var(--text-primary);
    font-weight: 600;
    font-family: monospace;
}

/* Member chips grid */
.member-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.member-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--bg-card);
    border-radius: 20px;
    font-size: 0.8rem;
    border: 1px solid transparent;
}

.member-chip.clickable:hover {
    border-color: var(--accent);
}

.member-name {
    font-weight: 600;
}

.member-seniority {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* Mini view button on agent cards */
.mini-view-btn {
    background: none;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.mini-view-btn:hover {
    background: var(--accent);
    color: white;
}

/* Statements Tab */
.statements-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.statement-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    border-left: 3px solid var(--success);
    transition: all 0.2s;
}

.statement-item.clickable:hover {
    border-color: var(--accent);
    background: rgba(233, 69, 96, 0.08);
}

.statement-item.removed {
    border-left-color: var(--text-muted);
    opacity: 0.6;
}

.statement-text {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 6px;
}

.statement-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Action Tree */
.action-tree {
    padding: 8px 0;
}

.tree-root {
    font-weight: 700;
    font-size: 1rem;
    padding: 8px 12px;
    background: var(--bg-card);
    border-radius: var(--radius);
    margin-bottom: 8px;
    border: 1px solid transparent;
}

.tree-root.clickable:hover {
    border-color: var(--accent);
}

.tree-node {
    margin-top: 6px;
}

.tree-node-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--bg-card);
    border-radius: 6px;
    font-size: 0.85rem;
}

.tree-expand {
    width: 20px;
    text-align: center;
    cursor: pointer;
    color: var(--text-muted);
    font-family: monospace;
    font-weight: 700;
    user-select: none;
}

.tree-expand:hover {
    color: var(--accent);
}

.tree-node-name {
    font-weight: 600;
}

.tree-node-name.clickable:hover {
    color: var(--accent);
}

.tree-children {
    border-left: 2px solid var(--border);
    margin-left: 10px;
    padding-left: 8px;
}

.tree-node-info {
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: 4px 10px;
}

/* ── Responsive ──────────────────────────── */
@media (max-width: 1024px) {
    .proposal-columns {
        grid-template-columns: 1fr;
    }
    .interview-container {
        grid-template-columns: 1fr;
    }
    .agent-detail-grid {
        grid-template-columns: 1fr;
    }
    .detail-panel {
        width: 85vw;
    }
    .member-agent-info {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    /* Header — compact, no overflow */
    .header {
        padding: 8px 10px;
        gap: 6px;
        flex-wrap: nowrap;
    }
    .header-left { gap: 6px; flex: 1 1 auto; min-width: 0; }
    .hamburger-btn { display: flex; }
    .header-title {
        font-size: 1rem;
        letter-spacing: 0.5px;
        min-width: 0;
        flex: 1 1 auto;
    }
    .header-community-name { display: none; }
    .header-stats { gap: 6px; font-size: 0.72rem; flex-shrink: 0; align-items: center; }
    /* On phones the only stats we keep are Round + Members, plus controls.
       Hide LLM switcher and the long stat tail to keep one row. */
    .header-stat-events, .header-stat-latency { display: none; }
    .header-stats > .header-stat:nth-of-type(n+3) { display: none; } /* keep first 2 stats */
    .header-stats select { display: none; } /* LLM switcher off on phone */

    /* Sidebar — off-screen drawer */
    .action-sidebar {
        position: fixed;
        left: -260px;
        top: 0;
        width: 240px;
        height: 100vh;
        z-index: 150;
        transition: left 0.3s ease;
        border-right: 1px solid var(--border);
        box-shadow: none;
        min-height: 100vh;
    }
    .action-sidebar.open {
        left: 0;
        box-shadow: 4px 0 20px rgba(0,0,0,.4);
    }
    .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.45);
        z-index: 149;
    }

    /* Tabs — horizontal scroll. Right-edge fade-mask hints there's more
     * (audit P1: without it, mobile visitors miss Pulses / Metrics / Relations
     * entirely because the strip cuts off silently). */
    .tab-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 8px;
        scrollbar-width: none;
        mask-image: linear-gradient(to right, black 0, black calc(100% - 28px), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 28px), transparent 100%);
    }
    .tab-nav::-webkit-scrollbar { display: none; }
    .tab-btn {
        padding: 8px 14px;
        font-size: 0.8rem;
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* Breadcrumb — scroll */
    .action-breadcrumb {
        overflow-x: auto;
        white-space: nowrap;
        font-size: 0.78rem;
        padding: 5px 12px;
        scrollbar-width: none;
    }
    .action-breadcrumb::-webkit-scrollbar { display: none; }

    /* Content — tighter padding */
    .main-content {
        padding: 10px;
    }

    /* Grids — single column */
    .dashboard-grid { grid-template-columns: 1fr; }
    .proposal-columns { grid-template-columns: 1fr; }
    .agent-grid { grid-template-columns: 1fr; }
    .interview-container { grid-template-columns: 1fr; }
    .agent-detail-grid { grid-template-columns: 1fr; }

    /* Detail panel — full screen */
    .detail-panel {
        width: 100vw;
        min-width: unset;
    }

    /* News ticker — smaller */
    .news-ticker {
        font-size: 0.7rem;
        height: 28px;
    }
    .news-ticker-label {
        font-size: 0.6rem;
        padding: 2px 8px;
        margin-right: 8px;
    }

    /* Cards — tighter */
    .card { padding: 12px; }
    .card-title { font-size: 1rem; }
}

/* Community Title Banner */
.community-title-banner {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 12px;
}

.community-title-banner.action {
    background: linear-gradient(135deg, var(--accent-dim), #3a1c71);
}

.community-title-banner.root {
    background: var(--bg-card);
    border: 1px solid var(--border);
}

.community-title-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    opacity: 0.6;
    margin-bottom: 2px;
    letter-spacing: 1px;
}

.community-title-name {
    font-size: 1.3rem;
    font-weight: 700;
}

/* Results Sub-headers */
.results-sub {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}

.results-sub.accepted {
    color: var(--success);
}

.results-sub.rejected {
    color: var(--accent);
}

/* Pulse History Tab */
.pulse-history-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
    background: var(--bg-secondary);
}

.pulse-history-card:hover {
    border-color: var(--text-muted);
}

.pulse-proposal-item {
    padding: 6px 10px;
    margin-bottom: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    font-size: 0.85rem;
}

.pulse-proposal-item.accepted {
    background: rgba(78, 204, 163, 0.1);
    border-left: 3px solid var(--success);
}

.pulse-proposal-item.rejected {
    background: rgba(233, 69, 96, 0.1);
    border-left: 3px solid var(--accent);
}

/* ── Chat Tab ──────────────────────────────────────── */

.chat-tab {
    padding: 16px;
    max-width: 800px;
}

.chat-messages {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.chat-message {
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius);
    border-left: 3px solid var(--border);
}

.chat-message:hover {
    border-left-color: var(--accent);
}

.chat-message-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 0.8rem;
}

.chat-author {
    font-weight: 600;
}

.chat-time {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.chat-score {
    color: var(--success);
    font-size: 0.75rem;
    font-weight: 600;
}

.chat-text {
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.4;
    white-space: pre-wrap;
}

/* Big Brother compose box */
.chat-scope-badge {
    font-size: 0.75rem;
    color: var(--accent);
    background: rgba(99, 179, 237, 0.12);
    border: 1px solid rgba(99, 179, 237, 0.3);
    border-radius: 10px;
    padding: 1px 8px;
    font-weight: 500;
}

.bb-compose {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
}

.bb-compose-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.bb-compose-input {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
    outline: none;
    transition: border-color 0.15s;
}
.bb-compose-input:focus {
    border-color: var(--accent);
}
.bb-compose-input::placeholder {
    color: var(--text-muted);
}

.bb-compose-btn {
    align-self: flex-end;
    padding: 6px 18px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}
.bb-compose-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.bb-compose-btn:not(:disabled):hover {
    opacity: 0.85;
}

/* Big Brother messages in the feed */
.bb-message {
    border-left-color: var(--accent) !important;
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-secondary));
}

.bb-message-author {
    color: var(--accent) !important;
    font-weight: 700;
}

/* ── News Ticker ──────────────────────────────── */
.news-ticker {
    display: flex;
    align-items: center;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    height: 32px;
    overflow: hidden;
    font-size: 0.78rem;
    position: sticky;
    top: 0;
    z-index: 90;
}
.news-ticker-label {
    flex-shrink: 0;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    padding: 2px 10px;
    margin-right: 12px;
    border-radius: 2px;
    animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.news-ticker-track {
    flex: 1;
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
}
.news-ticker-scroll {
    display: flex;
    gap: 1.5rem;
    white-space: nowrap;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.news-ticker-item {
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}
.news-ticker-item::before {
    content: "•";
    margin-right: 6px;
    color: var(--text-muted);
}
.news-ticker-item.news-accept {
    color: var(--success);
}
.news-ticker-item.news-accept::before {
    content: "✓";
    color: var(--success);
}
.news-ticker-item.news-reject {
    color: #f88;
}
.news-ticker-item.news-reject::before {
    content: "✗";
    color: #f88;
}
.news-ticker-item.news-pulse {
    color: var(--accent);
    font-weight: 600;
}
.news-ticker-item.news-pulse::before {
    content: "⚡";
}
.news-ticker-item.news-clickable {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}
.news-ticker-item.news-clickable:hover {
    color: var(--text-primary);
    text-decoration-style: solid;
}
.news-ticker-item.news-empty {
    color: var(--text-muted);
    font-style: italic;
}
.news-ticker-item.news-empty::before {
    content: "";
}

/* ── EditArtifact / Artifact preview diff view ── */
.edit-diff-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
@media (max-width: 900px) {
    .edit-diff-grid { grid-template-columns: 1fr; }
}
.edit-diff-pre {
    border-radius: 6px;
    padding: 0.6rem 0.7rem;
    font-size: 0.8rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 480px;
    overflow: auto;
    color: #e8e8ee;
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.edit-diff-current {
    background: rgba(233,69,96,0.06);
    border: 1px solid rgba(233,69,96,0.22);
}
.edit-diff-proposed {
    background: rgba(78,204,163,0.06);
    border: 1px solid rgba(78,204,163,0.25);
}

/* ── Memory highlights (member zoom) ─── */
.memory-highlights { display: flex; flex-direction: column; gap: 14px; }
.memory-group {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 10px 12px;
}
.memory-group-title {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.7;
    margin-bottom: 8px;
}
.memory-list { display: flex; flex-direction: column; gap: 6px; }
.memory-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.88rem;
    line-height: 1.45;
    padding: 6px 8px;
    border-radius: 5px;
    background: rgba(0,0,0,0.18);
    border-left: 2px solid rgba(233,69,96,0.45);
}
.memory-importance {
    color: #f4c95d;
    font-size: 0.72rem;
    flex-shrink: 0;
    letter-spacing: -1px;
    padding-top: 2px;
}
.memory-content { flex: 1; }
.memory-cat {
    font-size: 0.7rem;
    opacity: 0.55;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    align-self: center;
}

/* ── Header logo + control buttons ─── */
.header-logo {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 6px rgba(233,69,96,0.4));
}
.header-controls {
    display: flex;
    gap: 6px;
    margin-left: 8px;
    padding-left: 12px;
    border-left: 1px solid var(--border);
}
.header-ctrl-btn {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 5px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.header-ctrl-btn:hover {
    background: var(--surface);
    border-color: var(--accent);
    color: var(--accent);
}
.header-ctrl-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.header-ctrl-btn.paused {
    background: rgba(240,192,64,0.15);
    border-color: var(--warning, #f0c040);
    color: var(--warning, #f0c040);
}
.header-ctrl-btn.restart {
    border-color: rgba(233,69,96,0.4);
    color: #ff8aa0;
}
.header-ctrl-btn.restart:hover {
    background: rgba(233,69,96,0.15);
    border-color: var(--accent);
    color: var(--accent);
}
@media (max-width: 768px) {
    .header-ctrl-btn { padding: 4px 7px; font-size: 0.7rem; line-height: 1; }
    .header-controls { padding-left: 6px; margin-left: 2px; gap: 4px; border-left-color: rgba(255,255,255,0.08); }
    .header-logo { width: 24px; height: 24px; filter: drop-shadow(0 0 4px rgba(233,69,96,0.4)); }
}

/* ── Phone (very narrow) ── */
@media (max-width: 480px) {
    .header { padding: 6px 8px; }
    .header-title { font-size: 0.9rem; letter-spacing: 0; }
    /* Hide ALL header stats on tiny screens — only logo+title+controls remain */
    .header-stats > .header-stat { display: none; }
    .header-controls { padding-left: 4px; }
    /* Icon-only control buttons on narrow phones */
    .header-ctrl-btn .ctrl-label { display: none; }
    .header-ctrl-btn { padding: 6px 8px; font-size: 0.95rem; }
    .header-ctrl-btn .ctrl-icon { display: inline-block; line-height: 1; }
    .main-content { padding: 8px; }
    .card { padding: 10px; border-radius: 6px; }
    .card-title { font-size: 0.92rem; }

    /* Activity feed: tighter rows */
    .activity-feed { max-height: none; }
    .event-item {
        flex-wrap: wrap;
        font-size: 0.78rem;
        padding: 6px 8px;
        gap: 6px;
    }
    .event-time { min-width: 42px; font-size: 0.68rem; }
    .event-agent { min-width: 0; }
    .event-details { flex-basis: 100%; font-size: 0.78rem; }

    /* Detail panel — full screen, larger touch targets */
    .detail-panel { width: 100vw; }
    .detail-back-btn, .detail-close-btn { padding: 8px 12px; font-size: 0.95rem; }

    /* Tabs slightly tighter */
    .tab-btn { padding: 8px 10px; font-size: 0.78rem; gap: 5px; }
    .tab-btn .tab-label { font-size: 0.78rem; }
    .tab-btn .tab-icon { font-size: 0.95rem; }
    .tab-group-sep { margin: 0 4px; }

    /* Agent avatar shrinks slightly to keep the card header tidy */
    .agent-avatar { width: 36px; height: 36px; font-size: 1rem; }
    .agent-header { gap: 9px; }

    /* News ticker — keep compact */
    .news-ticker { font-size: 0.66rem; height: 26px; }

    /* Timeline filter bar wraps */
    .timeline-filter-bar { flex-wrap: wrap; gap: 6px; }
    .timeline-filter-input,
    .timeline-filter-select { flex: 1 1 100%; min-width: 0; }
    .timeline-filter-clear, .timeline-filter-count { flex: 0 0 auto; }

    /* Proposal cards / overview grids stay one-column */
    .overview-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .stat-value { font-size: 1.2rem; }
    .stat-label { font-size: 0.7rem; }

    /* HN comment indent: cap depth padding so deep threads don't push off-screen */
    .hn-comment-indent { padding-left: 0 !important; }
    .hn-comment-nested .hn-comment-indent { padding-left: 12px !important; }

    /* iOS / notched-Android safe-area padding so the bottom of the
       app (last activity event, last proposal card) doesn't sit
       behind the home indicator or browser chrome. */
    .main-content { padding-bottom: max(8px, env(safe-area-inset-bottom)); }

    /* Larger tap targets — anything clickable should hit the 40px+
       baseline so a thumb can land it. The mini-view button on
       agent cards used to be tiny; bump it. */
    .mini-view-btn,
    .header-ctrl-btn { min-height: 36px; }

    /* Agent card on phone: header-actions wrap to a second row when
       the card is narrow so the avatar + identity + eagerness + count +
       button don't squeeze each other. The wrap is achieved by
       allowing the header to flex-wrap; identity stays on row 1
       (it has flex:1) and the action chip + button push to row 2. */
    .agent-header { flex-wrap: wrap; }
    .agent-header-actions { margin-left: auto; }
    .agent-avatar { box-shadow: 0 0 0 1px var(--bg-secondary), 0 1px 3px rgba(0,0,0,0.18); }

    /* Detail-panel close-button: bigger tap area; sit clear of any
       browser chrome by leaving room at the top. */
    .detail-back-btn, .detail-close-btn {
        min-height: 40px;
        min-width: 40px;
    }

    /* Tables (per-agent stats, proposals-by-type) — already wrapped
       in overflowX:auto, but make sure the scroll signal is visible
       to users via a subtle gradient mask hint. */
    table { font-size: 0.82rem; }

    /* EditArtifact diff: smaller font + scroll naturally */
    .edit-diff-pre { font-size: 0.72rem; max-height: 320px; }
}

/* Flash highlight when scrolling to a specific comment from the news ticker */
.hn-comment.hn-comment-flash > .hn-comment-indent > .hn-comment-body {
    animation: commentFlash 2.4s ease-out;
    border-radius: 6px;
}
@keyframes commentFlash {
    0%   { background: rgba(233,69,96,0.35); box-shadow: 0 0 0 2px rgba(233,69,96,0.55); }
    60%  { background: rgba(233,69,96,0.15); box-shadow: 0 0 0 2px rgba(233,69,96,0.25); }
    100% { background: transparent;          box-shadow: 0 0 0 2px transparent; }
}

/* ── Respect prefers-reduced-motion ──
 * Visitors with vestibular concerns (or who've turned it on via OS settings)
 * should not see livePulse / pulse-glow / shimmer infinite loops. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── New-event flash on activity feed rows ──
 * Audit P0: live events arrive with no signal. Apply this class for ~1.6s
 * to newly-streamed rows for a subtle accent wash. */
@keyframes feedRowFlash {
    0%   { background: rgba(233, 69, 96, 0.15); }
    100% { background: transparent; }
}
.feed-row-new { animation: feedRowFlash 1.6s ease-out forwards; }