:root {
    --color-active:  #22c55e;
    --color-waiting: #eab308;
    --color-blocked: #ef4444;
    --color-idle:    #6b7280;
    --color-review:  #3b82f6;
    --color-error:   #f97316;
    /* #27 state vocabulary — kept in sync with COLORS in app.js */
    --color-question:   #ec4899;
    --color-stuck:      #f59e0b;
    --color-monitoring: #22d3ee;
    --color-auto:       #2dd4bf;

    --bg:       #0f172a;
    --bg-card:  #1e293b;
    --bg-row:   #1e293b;
    --bg-hover: #273548;
    --text:     #e2e8f0;
    --text-dim: #94a3b8;
    --border:   #334155;

    --sidebar-w: 300px;
}

.light-theme {
    --bg:       #f8fafc;
    --bg-card:  #ffffff;
    --bg-row:   #ffffff;
    --bg-hover: #f1f5f9;
    --text:     #1e293b;
    --text-dim: #64748b;
    --border:   #e2e8f0;
}

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

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 13px;
    line-height: 1.5;
}

/* ============================================================
   Login overlay
   ============================================================ */
.login-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 200;
    display: flex;
    justify-content: center;
    align-items: center;
}
.login-overlay.hidden { display: none; }

.login-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 40px 32px;
    width: 360px;
    text-align: center;
}
.login-card h2 { font-size: 20px; margin-bottom: 8px; }
.login-subtitle { color: var(--text-dim); margin-bottom: 24px; }

.login-btn {
    display: block;
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    border: 1px solid var(--border);
    color: var(--text);
    background: var(--bg);
    margin-bottom: 8px;
}
.login-btn:hover { border-color: var(--text-dim); }

.gitlab-btn { background: #fc6d26; color: #fff; border-color: #fc6d26; }
.gitlab-btn:hover { background: #e65a1a; }

.login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
    color: var(--text-dim);
}
.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.local-login-form input {
    display: block;
    width: 100%;
    padding: 8px 12px;
    margin-bottom: 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
}
.local-login-form input:focus {
    outline: none;
    border-color: var(--color-active);
}

.login-error { color: var(--color-blocked); font-size: 12px; margin-top: 8px; }

/* ============================================================
   App shell: sidebar + main
   ============================================================ */
.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    min-height: 100vh;
}

/* Sidebar resize handle — sits on the seam between sidebar and main.
   position:fixed so it spans the viewport height without scrolling with
   the sidebar body. `left` tracks --sidebar-w so it follows live as the
   variable changes during a drag. */
.sidebar-resizer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: calc(var(--sidebar-w) - 3px);
    width: 6px;
    cursor: col-resize;
    z-index: 50;
    background: transparent;
    transition: background 0.12s ease;
}
.sidebar-resizer:hover,
.sidebar-resizer.dragging {
    background: var(--color-active, #4caf50);
    opacity: 0.6;
}
/* While dragging, suppress text selection and force the resize cursor. */
body.sidebar-resizing {
    cursor: col-resize;
    user-select: none;
}

/* ============================================================
   Sidebar
   ============================================================ */
.sidebar {
    background: var(--bg-card);
    border-right: 1px solid var(--border);
    padding-bottom: 32px;
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: sticky;
    top: 0;
    overflow-y: auto;
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}
.sidebar-header h1 { font-size: 15px; font-weight: 700; cursor: pointer; }
.sidebar-header h1:hover { color: var(--color-active); }
.sidebar-controls { display: flex; gap: 6px; }
.sidebar-controls button {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-dim);
    width: 28px; height: 28px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}
.sidebar-controls button:hover { color: var(--text); border-color: var(--text-dim); }

.sidebar-filter {
    display: flex;
    gap: 4px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
}
.sidebar-filter input {
    flex: 1;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg);
    color: var(--text);
    font-family: inherit;
    font-size: 12px;
}
.sidebar-filter input:focus { outline: none; border-color: var(--color-active); }
.sidebar-filter button {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-dim);
    width: 28px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}
.show-idle-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 8px;
    border-bottom: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 11px;
    cursor: pointer;
    user-select: none;
}
.show-idle-row input { cursor: pointer; }

/* Sidebar sections */
.sidebar-section { border-bottom: 1px solid var(--border); }
.sidebar-section-header {
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dim);
    cursor: default;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.toggle-header { cursor: pointer; }
.toggle-header:hover { color: var(--text); }
.toggle-header .section-chevron {
    display: inline-block;
    width: 0.8em;
    color: var(--text-dim, #888);
    font-size: 10px;
    margin-right: 1px;
}

.badge {
    background: var(--border);
    color: var(--text);
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 8px;
    font-weight: 600;
}

.sidebar-list { padding: 0; }
.sidebar-list.collapsed { display: none; }

/* Sidebar session row */
.sidebar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    cursor: pointer;
    font-size: 12px;
    border-left: 3px solid transparent;
}
.sidebar-row:hover { background: var(--bg-hover); }
.sidebar-row.selected { background: var(--bg-hover); border-left-color: var(--color-active); }

/* The colour dot and the since column are gone — the state pill is both (it
   carries the hue AND the dwell). .row-dot still exists for .resume-head and
   .obs-agent, which style it themselves. */
.sidebar-row .row-project { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sidebar-row .row-pin {
    color: var(--text-dim);
    font-size: 11px;
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0;
}
.sidebar-row:hover .row-pin { opacity: 1; }
.sidebar-row .row-pin.pinned { opacity: 1; color: var(--color-waiting); }

/* The auth-watchdog badge (/login, re-auth) is now a .pill — see sessionBadges. */

.sidebar-row .row-delete {
    color: var(--text-dim);
    font-size: 11px;
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0;
    padding-left: 4px;
}
.sidebar-row:hover .row-delete { opacity: 0.6; }
.sidebar-row .row-delete:hover { opacity: 1; color: var(--color-blocked, #ef4444); }

/* Sidebar project tree */
.project-group { padding-left: 14px; }
.project-group-name {
    padding: 4px 0;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.project-group-name:hover { color: var(--color-active); }

/* Hide/unhide affordance — faint until you hover the project group. */
.project-hide-btn {
    background: none;
    border: none;
    padding: 0 2px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.1s;
}
.project-group-name:hover .project-hide-btn { opacity: 0.6; }
.project-hide-btn:hover { opacity: 1 !important; }

/* A project shown only because "Show hidden" is on: grey the NAME and its rows
   (not the whole group), so the unhide button stays at full opacity and clearly
   clickable — a group-wide opacity would dim the button along with everything. */
.project-group.project-hidden .project-group-name > span { opacity: 0.4; }
.project-group.project-hidden .project-group-rows { opacity: 0.4; }
.project-group.project-hidden .project-hide-btn { opacity: 1; }

/* Label takes the free space so the pin + hide buttons group together on the
   right (the header is justify-content: space-between). */
.project-group-name > span { margin-right: auto; }

/* Pin affordance — faint grey until you hover the group; full colour when the
   project is pinned so it's obvious at a glance and always one click to unpin. */
.project-pin-btn {
    background: none;
    border: none;
    padding: 0 2px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    filter: grayscale(1);
    transition: opacity 0.1s;
}
.project-group-name:hover .project-pin-btn { opacity: 0.6; }
.project-pin-btn:hover { opacity: 1 !important; filter: none; }
.project-pin-btn.pinned { opacity: 1; filter: none; }

/* Hidden-projects manager: an always-available unhide list, so projects with
   no live sessions (no sidebar group of their own) can still be brought back. */
.hidden-project-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 3px 0 3px 14px;
    font-size: 12px;
}
.hidden-project-name {
    color: var(--text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hidden-project-unhide {
    background: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: inherit;
    font-size: 11px;
    padding: 1px 6px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.hidden-project-unhide:hover { border-color: var(--color-active); color: var(--color-active); }

/* Sidebar footer */
.sidebar-footer {
    margin-top: auto;
    padding: 10px 14px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--text-dim);
}
.logout-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 3px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
}
.logout-btn:hover { color: var(--color-blocked); border-color: var(--color-blocked); }

/* ============================================================
   Main panel
   ============================================================ */
.main-panel {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-bottom: 36px;
}

.main-content { flex: 1; padding: 16px 20px; }

/* Attention bar */
.attention-bar {
    background: rgba(239, 68, 68, 0.1);
    border-bottom: 1px solid rgba(239, 68, 68, 0.2);
    padding: 8px 20px;
    font-size: 13px;
    color: var(--color-blocked);
    font-weight: 500;
}

/* Summary bar */
.summary-bar {
    display: flex;
    gap: 20px;
    padding: 12px 0;
    font-size: 14px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
}
.summary-item { display: flex; align-items: center; gap: 6px; }

.status-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.status-dot.active  { background: var(--color-active); }
.status-dot.waiting { background: var(--color-waiting); }
.status-dot.blocked { background: var(--color-blocked); }
.status-dot.idle    { background: var(--color-idle); }
.status-dot.review  { background: var(--color-review); }
.status-dot.error   { background: var(--color-error); }
.status-dot.question   { background: var(--color-question); }
.status-dot.stuck      { background: var(--color-stuck); }
.status-dot.monitoring { background: var(--color-monitoring); }
.status-dot.auto       { background: var(--color-auto); }

.summary-count { font-weight: 600; }
.summary-label { color: var(--text-dim); }

/* Pulse animation */
@keyframes pulse-attention {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.pulse { animation: pulse-attention 1.5s ease-in-out infinite; }
.pulse-header { color: var(--color-waiting); }

/* Activity section (overview) */
.activity-section { margin-top: 8px; }
.activity-group { margin-bottom: 16px; }
.activity-group-header {
    font-weight: 600;
    font-size: 13px;
    padding: 4px 0;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
}

.activity-row {
    display: grid;
    grid-template-columns: 20px 1fr 120px 60px 200px;
    gap: 8px;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(51,65,85,0.3);
    cursor: pointer;
}
.activity-row:hover { background: var(--bg-hover); }

.status-icon { font-size: 14px; }
.status-icon.active  { color: var(--color-active); }
.status-icon.waiting { color: var(--color-waiting); }
.status-icon.blocked { color: var(--color-blocked); }
.status-icon.idle    { color: var(--color-idle); }
.status-icon.review  { color: var(--color-review); }
.status-icon.error   { color: var(--color-error); }
.status-icon.question   { color: var(--color-question); }
.status-icon.stuck      { color: var(--color-stuck); }
.status-icon.monitoring { color: var(--color-monitoring); }
.status-icon.auto       { color: var(--color-auto); }

.status-label.active  { color: var(--color-active); }
.status-label.waiting { color: var(--color-waiting); }
.status-label.blocked { color: var(--color-blocked); }
.status-label.idle    { color: var(--color-idle); }
.status-label.review  { color: var(--color-review); }
.status-label.error   { color: var(--color-error); }
.status-label.question   { color: var(--color-question); }
.status-label.stuck      { color: var(--color-stuck); }
.status-label.monitoring { color: var(--color-monitoring); }
.status-label.auto       { color: var(--color-auto); }

.branch { color: var(--text-dim); font-family: inherit; font-size: 12px; }

/* Since column escalation */
.since-normal { color: var(--text); }
.since-amber  { color: var(--color-waiting); }
.since-warn   { color: var(--color-waiting); font-weight: 600; }
.since-urgent { color: var(--color-blocked); font-weight: 600; }

/* Timeline canvas */
.timeline-canvas {
    display: block;
    border-radius: 3px;
    background: rgba(0,0,0,0.2);
}

/* ============================================================
   Session detail
   ============================================================ */
.back-btn {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 13px;
    margin-bottom: 12px;
    padding: 4px 0;
}
.back-btn:hover { color: var(--text); }

#detail-header {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.session-ctrl-btn {
    font-size: 11px;
    padding: 3px 12px;
    border: 1px solid var(--color-active);
    border-radius: 4px;
    background: none;
    color: var(--color-active);
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    margin-left: auto;
}
.session-ctrl-btn:hover { background: rgba(34, 197, 94, 0.1); }
.session-ctrl-btn.session-ctrl-stop {
    border-color: var(--color-blocked);
    color: var(--color-blocked);
}
.session-ctrl-btn.session-ctrl-stop:hover { background: rgba(239, 68, 68, 0.1); }
.session-ctrl-btn.session-ctrl-warn {
    border-color: #f59e0b;
    color: #f59e0b;
}
.session-ctrl-btn.session-ctrl-warn:hover { background: rgba(245, 158, 11, 0.12); }
/* Reserved infrastructure worktree (leading `_`): the action is deliberately
   unavailable, not merely inactive — muted, no hover affordance, cursor says so. */
.session-ctrl-btn.session-ctrl-locked {
    border-color: var(--color-idle, #6b7280);
    color: var(--color-idle, #6b7280);
    cursor: not-allowed;
}
.session-ctrl-btn.session-ctrl-locked:hover { background: none; }

/* Was a 9-cell auto-fill grid of .meta-item tiles. It is now a breadcrumb +
   badge strip + a footnote row, which stack — so block, not grid. */
#detail-meta {
    display: block;
    margin-bottom: 16px;
    font-size: 12px;
}


.placeholder { color: var(--text-dim); font-style: italic; padding: 20px 0; }

/* ============================================================
   Connection bar
   ============================================================ */
.connection-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 6px 20px;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    font-size: 11px;
    color: var(--text-dim);
    display: flex;
    justify-content: space-between;
    z-index: 50;
}
.connection-ok { color: var(--color-active); }
.connection-err { color: var(--color-blocked); }

/* ============================================================
   Empty state
   ============================================================ */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-dim);
}
.empty-state h2 { font-size: 16px; margin-bottom: 12px; color: var(--text); }
.empty-state p { margin-bottom: 8px; }

/* Health items */
.health-item {
    display: flex;
    justify-content: space-between;
    padding: 4px 14px;
    font-size: 12px;
}
.health-label { color: var(--text-dim); }
.health-value { font-weight: 500; }
.health-ok { color: var(--color-active); }
.health-warn { color: var(--color-waiting); }
.health-err { color: var(--color-blocked); }
.health-clickable { cursor: pointer; }
.health-clickable:hover { background: var(--bg-hover); }

/* Health panels (full system health page) */
.health-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px 0;
    margin-bottom: 12px;
}
.health-panel-title {
    font-weight: 600;
    font-size: 13px;
    padding: 0 14px 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}

/* ============================================================
   Output / Activity / Messages panels (Phase B+C)
   ============================================================ */
.output-section { margin-top: 8px; }

.output-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
}
.output-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-dim);
    padding: 6px 16px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
}
.output-tab:hover { color: var(--text); }
.output-tab.active { color: var(--text); border-bottom-color: var(--color-active); }

.output-panel { min-height: 120px; max-height: calc(100vh - 300px); overflow-y: auto; }

/* Conversation tab layout: only the feed scrolls. The live-activity strip,
   prompt/staged banners, reply box, and delivery banner stay pinned at the
   bottom and always visible — no scrolling down to reach the send box, even
   when several banners are showing. (Mirrors #messages-panel below.) */
#conversation-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;            /* the panel itself doesn't scroll */
}
#conversation-panel .conversation-feed {
    flex: 1 1 auto;
    min-height: 80px;            /* keep some feed even with many banners */
    max-height: none;            /* override the fixed 600px so it fills space */
}
#conversation-panel #prompt-banner-area,
#conversation-panel #staged-input-banner,
#conversation-panel #live-activity-strip,
#conversation-panel .reply-area,
#conversation-panel #delivery-status-banner {
    flex: 0 0 auto;              /* always visible — never shrink away */
}
/* A long prompt — especially a multi-question AskUserQuestion form, which has
   no internal height cap — must stay fully scroll-reachable (including its
   answer buttons at the bottom) instead of overflowing the panel and getting
   clipped with no way to scroll to it. Bound the whole prompt area and let it
   scroll as a unit. */
#conversation-panel #prompt-banner-area,
#messages-panel #prompt-banner-area {
    max-height: 60vh;
    overflow-y: auto;
}
/* The strip sat at the top before; just above the reply box it needs no big
   bottom margin. */
#conversation-panel #live-activity-strip { margin: 6px 0 0; }

#messages-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#messages-panel .messages-feed {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}
#messages-panel #prompt-banner-area {
    flex-shrink: 0;
    position: relative;
    z-index: 5;
}
#messages-panel .reply-area {
    flex-shrink: 0;
}

.output-lines {
    font-size: 12px;
    line-height: 1.6;
    max-height: 380px;
    overflow-y: auto;
}
.output-line {
    padding: 1px 8px;
    white-space: pre-wrap;
    word-break: break-all;
    border-bottom: 1px solid rgba(51,65,85,0.15);
}
.output-line:hover { background: var(--bg-hover); }

/* Live activity feed (from SSE hook events) */
.activity-item {
    padding: 4px 8px;
    font-size: 12px;
    line-height: 1.5;
    border-bottom: 1px solid rgba(51,65,85,0.1);
}
.activity-item:hover { background: var(--bg-hover); }
.activity-ts { color: var(--text-muted, #888); font-size: 10px; margin-right: 4px; }
.activity-icon { margin-right: 4px; }
.activity-detail {
    font-size: 11px; margin: 2px 0 0 20px; padding: 3px 6px;
    background: var(--bg); border-radius: 3px;
    white-space: pre-wrap; word-wrap: break-word;
    max-height: 200px; overflow-y: auto;
}
.activity-result { color: var(--text-muted, #999); font-size: 11px; }
.activity-tool-start { border-left: 3px solid var(--color-active); }
.activity-tool-end { border-left: 3px solid var(--color-idle); }
.activity-file { border-left: 3px solid var(--color-review); }
.activity-user { border-left: 3px solid var(--color-waiting); }

/* Parsed activity feed (legacy) */
.activity-entry {
    padding: 3px 8px;
    font-size: 12px;
    border-bottom: 1px solid rgba(51,65,85,0.15);
}
.activity-type { color: var(--color-active); font-weight: 600; }
.activity-tool { color: var(--color-review); }
.activity-detail { color: var(--text-dim); }

/* Messages — chat-style layout */
.messages-feed {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    overflow-y: auto;
}
.message-item {
    padding: 8px 12px;
    font-size: 12px;
    border-radius: 8px;
    max-width: 85%;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.message-item.msg-assistant {
    align-self: flex-start;
    background: var(--bg-hover);
    border: 1px solid var(--border);
}
.message-item.msg-user {
    align-self: flex-end;
    background: color-mix(in srgb, var(--color-active) 20%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-active) 40%, transparent);
}
.message-item.expired { opacity: 0.4; }
.msg-sender { font-weight: 600; font-size: 11px; display: block; margin-bottom: 2px; }
.msg-assistant .msg-sender { color: var(--color-review); }
.msg-user .msg-sender { color: var(--color-active); }
.msg-content { color: var(--text); }
.msg-meta { color: var(--text-dim); font-size: 10px; margin-top: 4px; }

/* Approval requests */
.approval-request {
    align-self: stretch;
    background: color-mix(in srgb, var(--color-blocked) 10%, var(--bg-card));
    border: 1px solid var(--color-blocked);
    border-radius: 8px;
    padding: 10px 12px;
    margin: 4px 0;
}
.approval-header { font-size: 13px; font-weight: 600; color: var(--color-blocked); margin-bottom: 6px; }
.approval-detail {
    font-size: 11px;
    color: var(--text-dim);
    background: var(--bg);
    padding: 6px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
    max-height: 120px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.approval-buttons { display: flex; gap: 8px; }
.approval-btn {
    padding: 6px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
}
.approval-btn.approve { background: var(--color-active); color: #fff; }
.approval-btn.approve:hover { opacity: 0.9; }
.approval-btn.deny { background: var(--color-blocked); color: #fff; }
.approval-btn.deny:hover { opacity: 0.9; }
.msg-processing {
    align-self: flex-start;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--text-dim);
    font-style: italic;
}
.msg-processing .dot-pulse { display: inline-block; animation: dotPulse 1.4s infinite; }
@keyframes dotPulse {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}

/* Reply area */
.reply-area {
    display: flex;
    gap: 6px;
    padding: 8px;
    border-top: 1px solid var(--border);
    margin-top: 8px;
    align-items: flex-end;
}
.reply-input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--border);
    resize: vertical;
    border-radius: 4px;
    background: var(--bg);
    color: var(--text);
    font-family: inherit;
    font-size: 12px;
}
.reply-input:focus { outline: none; border-color: var(--color-active); }
.reply-btn {
    background: var(--color-active);
    color: #fff;
    border: none;
    padding: 6px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
}
.reply-btn:hover { opacity: 0.9; }

/* Remote re-auth card (Phase 3) — shown only when auth_state = needs_login. */
.reauth-card {
    margin: 10px 0;
    border: 1px solid var(--color-blocked);
    border-left: 3px solid var(--color-blocked);
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-blocked) 10%, var(--bg-card));
    padding: 12px 14px;
    font-size: 13px;
}
.reauth-head {
    font-weight: 700;
    color: var(--color-blocked);
    margin-bottom: 8px;
}
.reauth-steps {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    color: var(--text);
}
.reauth-steps li { line-height: 1.5; }
.reauth-hint { color: var(--text-dim); font-size: 11.5px; }
.reauth-login-btn, .reauth-code-btn {
    background: var(--color-blocked);
    color: #fff;
    border: none;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
}
.reauth-login-btn:hover, .reauth-code-btn:hover { opacity: .9; }
.reauth-login-btn:disabled, .reauth-code-btn:disabled { opacity: .55; cursor: default; }
.reauth-login-btn code, .reauth-steps code { background: rgba(0,0,0,.22); padding: 0 4px; border-radius: 3px; font-size: 12px; }
.reauth-url {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    word-break: break-all;
}
.reauth-url a { color: var(--color-review); font-family: var(--mono, monospace); }
.reauth-url.waiting { color: var(--text-dim); font-style: italic; word-break: normal; }
.reauth-copy {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 11px;
    cursor: pointer;
}
.reauth-code-row { margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; }
.reauth-code {
    flex: 1;
    min-width: 180px;
    background: var(--bg-row);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 4px;
    padding: 5px 8px;
    font-family: var(--mono, monospace);
    font-size: 12px;
}
.reauth-code:focus { outline: none; border-color: var(--color-blocked); }
.reauth-status { margin-top: 9px; font-size: 12px; }
.reauth-status.ok { color: var(--color-active); }
.reauth-status.err { color: var(--color-blocked); }
/* Stack the action buttons vertically so the Send / Interrupt pair stays
   compact next to the textarea — matches the rest of the dashboard's
   right-aligned button column on narrow panels. */
.reply-buttons { display: flex; flex-direction: column; gap: 6px; }
.interrupt-btn {
    background: var(--color-blocked, #b8430b);
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.interrupt-btn:hover { opacity: 0.9; }
.interrupt-btn:disabled { opacity: 0.55; cursor: default; }

/* AskUserQuestion relay form (rendered in the prompt banner area when Claude
   invokes AskUserQuestion — we intercept the tool and surface the questions
   here instead of letting the terminal picker open).
   ============================================================ */
.ask-banner .ask-form { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.ask-q {
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 8px 10px;
    margin: 0;
}
.ask-q legend { padding: 0 6px; font-size: 12px; font-weight: 600; }
.ask-q-chip {
    display: inline-block;
    background: var(--color-active);
    color: #fff;
    border-radius: 3px;
    padding: 1px 6px;
    font-size: 10px;
    margin-right: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ask-q-multi { color: var(--text-dim, #888); font-style: italic; font-weight: 400; }
.ask-opts { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.ask-opt {
    display: flex;
    align-items: baseline;
    gap: 6px;
    cursor: pointer;
    padding: 3px 4px;
    border-radius: 3px;
}
.ask-opt:hover { background: var(--bg-elev, rgba(255,255,255,0.04)); }
.ask-opt-label { font-weight: 500; }
.ask-opt-desc { color: var(--text-dim, #888); font-size: 11px; margin-left: 4px; }
.ask-notes {
    margin-top: 6px;
    width: 100%;
    box-sizing: border-box;
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--bg);
    color: var(--text);
    font-family: inherit;
    font-size: 11px;
}
.ask-help { color: var(--text-dim, #888); font-size: 11px; margin-left: 10px; align-self: center; }

/* ============================================================
   Quick actions (Phase D)
   ============================================================ */
.quick-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.action-btn {
    padding: 6px 16px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
}
.action-btn:hover { border-color: var(--color-active); }
.action-btn:disabled { opacity: 0.5; cursor: default; }
.action-btn.action-permission { border-color: var(--color-blocked); color: var(--color-blocked); }
.action-btn.action-permission:hover { background: rgba(239,68,68,0.1); }
.action-sent { color: var(--color-active); font-size: 12px; font-weight: 600; }

/* CI / Deploy panels (Phase D) */
.pipeline-row, .deploy-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    font-size: 12px;
    border-bottom: 1px solid rgba(51,65,85,0.15);
}
.pipeline-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
}
.ci-success { background: rgba(34,197,94,0.15); color: var(--color-active); }
.ci-failed { background: rgba(239,68,68,0.15); color: var(--color-blocked); }
.ci-running { background: rgba(59,130,246,0.15); color: var(--color-review); }
.ci-other { background: rgba(107,114,128,0.15); color: var(--text-dim); }
.pipeline-sha { color: var(--text-dim); font-size: 11px; }
.pipeline-link { color: var(--color-review); text-decoration: none; font-size: 11px; }
.pipeline-link:hover { text-decoration: underline; }
.deploy-name { font-weight: 600; }

/* ============================================================
   Ops panel — Salt actions
   ============================================================ */
.ops-header {
    font-size: 14px;
    font-weight: 600;
    padding: 8px 8px 4px;
}
.ops-minions {
    font-weight: 400;
    font-size: 11px;
    color: var(--text-dim);
}
.ops-actions {
    display: flex;
    gap: 8px;
    padding: 8px;
    flex-wrap: wrap;
}
.ops-action-btn {
    padding: 8px 20px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-transform: capitalize;
}
.ops-action-btn:hover { border-color: var(--color-active); color: var(--color-active); }
.ops-action-btn:disabled { opacity: 0.5; cursor: wait; }
.ops-job-running {
    padding: 12px 8px;
    color: var(--color-review);
    font-style: italic;
}
.ops-job-result {
    padding: 8px;
    margin: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
}
.ops-job-result.ops-success {
    background: rgba(34, 197, 94, 0.1);
    color: var(--color-active);
}
.ops-job-result.ops-failed {
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-blocked);
}
.ops-job-header { font-weight: 600; }
.ops-job-error {
    padding: 8px;
    margin: 4px 8px;
    color: var(--color-blocked);
    font-size: 12px;
}

/* ============================================================
   Terminal prompt banner
   ============================================================ */
.terminal-prompt-banner {
    align-self: stretch;
    background: color-mix(in srgb, var(--color-waiting) 10%, var(--bg-card));
    border: 2px solid var(--color-waiting);
    border-radius: 8px;
    padding: 10px 12px;
    margin: 8px 0;
}
.prompt-banner-header {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-waiting);
    margin-bottom: 6px;
}
.prompt-banner-content {
    font-size: 11px;
    color: var(--text);
    background: var(--bg);
    padding: 8px 10px;
    border-radius: 4px;
    margin-bottom: 8px;
    max-height: 400px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height: 1.5;
}
.prompt-banner-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.prompt-btn {
    padding: 6px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
}
.prompt-btn.prompt-yes { background: var(--color-active); color: #fff; }
.prompt-btn.prompt-yes:hover { opacity: 0.9; }
.prompt-btn.prompt-always { background: var(--color-review); color: #fff; }
.prompt-btn.prompt-always:hover { opacity: 0.9; }
.prompt-btn.prompt-no { background: var(--color-blocked); color: #fff; }
.prompt-btn.prompt-no:hover { opacity: 0.9; }

/* ============================================================
   Slash command autocomplete
   ============================================================ */
.slash-autocomplete {
    position: fixed;
    display: none;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    max-height: 240px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.slash-ac-item {
    display: flex;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 12px;
    align-items: baseline;
}
.slash-ac-item:hover,
.slash-ac-item.selected {
    background: var(--bg-hover);
}
.slash-ac-name {
    font-weight: 600;
    color: var(--color-active);
    white-space: nowrap;
}
.slash-ac-desc {
    color: var(--text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Remote git result panel */
.git-result {
    position: relative;
    margin: 12px 0;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid var(--border, #2a2a2a);
    background: var(--bg-card, #181818);
}
.git-result .git-dismiss {
    position: absolute;
    top: 4px;
    right: 6px;
    border: none;
    background: none;
    color: var(--text-dim, #888);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
}
.git-result .git-dismiss:hover { color: var(--text, #eee); }
.git-result .git-head {
    font-weight: 600;
    margin-bottom: 6px;
    padding-right: 20px;
}
.git-result .git-exit {
    font-weight: 400;
    margin-left: 8px;
    color: var(--text-dim, #888);
    font-size: 11px;
}
.git-result.git-pending { border-color: var(--color-waiting, #d9a800); }
.git-result.git-ok      { border-color: var(--color-active, #4caf50); }
.git-result.git-err     { border-color: var(--color-blocked, #d24); }
.git-result pre {
    margin: 4px 0 0;
    padding: 8px;
    background: var(--bg, #0d0d0d);
    border-radius: 4px;
    font-family: ui-monospace, monospace;
    font-size: 12px;
    line-height: 1.4;
    max-height: 240px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}
.git-result .git-stderr { color: var(--color-blocked, #d24); }

/* Fleet-agent log panel (collapsible) under the agent health card */
.agent-logs-toggle { margin-top: 6px; font-size: 12px; }
.agent-logs-toggle a { color: var(--color-active, #2a8); text-decoration: none; }
.agent-logs {
    margin-top: 6px;
    max-height: 280px;
    overflow-y: auto;
    background: var(--bg-card, #1c1c1c);
    border: 1px solid var(--border, #333);
    border-radius: 4px;
    padding: 6px 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px;
    line-height: 1.4;
}
.agent-log-line { white-space: pre-wrap; word-break: break-word; }
.agent-log-ts { opacity: 0.6; margin-right: 4px; }
.agent-log-lvl { font-weight: 600; margin-right: 6px; }
.agent-log-warning .agent-log-lvl { color: #d6a300; }
.agent-log-error   .agent-log-lvl { color: var(--color-blocked, #d24); }
.agent-log-debug   { opacity: 0.7; }

/* ---- Conversation tab ----------------------------------------------- */
/* Raw-tabs toggle sits at the right of the tab strip */
.raw-toggle {
    margin-left: auto;
    font-size: 12px;
    opacity: 0.7;
    padding: 4px 8px;
}
.raw-toggle label { cursor: pointer; }
.output-tabs { display: flex; align-items: center; gap: 4px; }

.conversation-feed {
    max-height: 600px;
    overflow-y: auto;
    padding: 8px;
    background: var(--bg-card, #1c1c1c);
    border: 1px solid var(--border, #333);
    border-radius: 4px;
}
.conv-entry {
    margin-bottom: 12px;
    padding: 6px 8px;
    border-left: 3px solid transparent;
    border-radius: 2px;
}
.conv-user      { border-left-color: var(--color-active, #2a8); }
.conv-assistant { border-left-color: var(--color-review, #58c); background: rgba(80, 120, 200, 0.06); }
.conv-chat      { border-left-color: #888; }
.conv-tool      { border-left-color: #d6a300; }

/* Assistant card stale-state. The blue "claude reply" card is sourced from
   sessions.last_assistant_message (only updated on Stop hook), so it lags
   whenever Claude is mid-turn or asking via tools. Dim it + add a chip so
   the user reads it as past tense, not current voice. Hover restores full
   opacity in case they want to re-read. */
.conv-assistant-stale {
    opacity: 0.55;
    transition: opacity 200ms ease;
}
.conv-assistant-stale:hover { opacity: 0.95; }

/* Collapsed assistant card — a one-line, clickable strip standing in for the
   full blue card once it's stale. Click expands it back. */
.conv-assistant-collapsed {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    cursor: pointer;
    opacity: 0.75;
}
.conv-assistant-collapsed:hover { opacity: 1; }
.conv-collapsed-preview {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-dim);
    font-style: italic;
}
.conv-assistant-header { cursor: pointer; }
.conv-collapse-hint { color: var(--text-dim); margin-left: 6px; font-size: 11px; }
.conv-stale-chip {
    display: inline-block;
    background: var(--color-blocked, #b8430b);
    color: #fff;
    border-radius: 3px;
    padding: 1px 6px;
    font-size: 10px;
    margin-left: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: help;
}

.conv-header {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 12px;
    margin-bottom: 4px;
    opacity: 0.85;
}
.conv-icon { font-size: 13px; }
.conv-who { font-weight: 600; }
.conv-ts { margin-left: auto; opacity: 0.6; font-variant-numeric: tabular-nums; }
.conv-body {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 13px;
}
.conv-input, .conv-output {
    margin: 4px 0;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    line-height: 1.4;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 360px;
    overflow-y: auto;
}
.conv-input { opacity: 0.75; }
.conv-expand {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--color-active, #2a8);
    text-decoration: none;
    text-align: center;
    padding: 4px;
    border-radius: 2px;
}
.conv-expand:hover { background: rgba(40, 170, 130, 0.12); }

/* Phase C — Claude process inventory under each agent card */
.claude-procs {
    margin: 4px 0 6px;
    padding: 4px 6px;
    background: var(--bg-card, #1c1c1c);
    border: 1px solid var(--border, #333);
    border-radius: 3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    line-height: 1.5;
}
.claude-proc-row { white-space: nowrap; overflow-x: auto; }
.proc-pid  { color: var(--color-active, #2a8); font-weight: 600; }
.proc-rss  { opacity: 0.75; }
.proc-pane { opacity: 0.55; }

/* #31: persistent launcher-broken signal — a sticky warning, not a scrolling log line. */
.launcher-broken {
    margin: 4px 0 6px;
    padding: 5px 7px;
    background: var(--bg-card, #1c1c1c);
    border: 1px solid var(--color-blocked, #c0392b);
    border-left-width: 3px;
    border-radius: 3px;
    color: var(--color-blocked, #e06);
    font-size: 12px;
    font-weight: 600;
}
.launcher-broken-row {
    margin-top: 3px;
    font-weight: 400;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    white-space: nowrap;
    overflow-x: auto;
}
.launcher-broken-wt { color: var(--text, #ddd); }
.launcher-broken-n  { opacity: 0.7; }
.proc-sid  { opacity: 0.55; }

/* Live-activity strip — "what is Claude doing RIGHT NOW" surface. Sits
   above the conversation feed in session-detail, always visible. Color +
   icon encode the state at a glance so on Starlink you can tell whether
   you're looking at a busy session vs an idle one vs an error one without
   reading the text. */
.live-activity-strip {
    padding: 6px 12px;
    margin: 6px 0 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    border-left: 3px solid var(--text-dim, #888);
    background: var(--bg-card, rgba(255,255,255,0.03));
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.live-activity-strip .live-icon { font-size: 14px; line-height: 1; }
.live-activity-strip code,
.live-activity-strip .live-text code { padding: 0; background: transparent; }

.live-activity-strip.live-tool,
.live-activity-strip.live-busy      { border-left-color: var(--color-waiting, #d6a300); background: rgba(214, 163, 0, 0.08); }
.live-activity-strip.live-thinking  { border-left-color: var(--color-review, #58c);    background: rgba(80, 120, 200, 0.08); }
.live-activity-strip.live-blocked   { border-left-color: var(--color-blocked, #b8430b); background: rgba(184, 67, 11, 0.10); }
.live-activity-strip.live-error     { border-left-color: var(--color-error, #f97316);  background: rgba(249, 115, 22, 0.10); }
.live-activity-strip.live-ready     { border-left-color: var(--color-active, #2a8);    background: rgba(40, 170, 130, 0.06); }
.live-activity-strip.live-review    { border-left-color: var(--color-review, #58c);    background: rgba(80, 120, 200, 0.06); }
.live-activity-strip.live-idle      { border-left-color: var(--text-dim, #888);        background: rgba(255,255,255,0.02); opacity: 0.7; }
.live-activity-strip.live-unknown   { border-left-color: var(--text-dim, #888); }

/* Delivery status banner. Sits below the reply area and surfaces the
   lifecycle of the last send: Sending… / Delivered ✓ / ⚠ Not delivered.
   Color-coded so on Starlink (where the strip is the only signal) you can
   tell success from "Claude is busy, your text is still in the box, retry
   when free" at a glance. */
.delivery-status-banner {
    margin: 6px 8px 0;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-family: inherit;
    border-left: 3px solid var(--text-dim, #888);
    background: var(--bg-card, rgba(255,255,255,0.03));
}
.staged-input-banner {
    margin: 6px 8px 0;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    border-left: 3px solid var(--color-review, #58c);
    background: rgba(80, 120, 200, 0.08);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.staged-input-label { color: var(--text-dim, #888); white-space: nowrap; }
.staged-input-text {
    font-family: monospace;
    color: var(--text, #ddd);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.staged-input-load {
    flex: 0 0 auto;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 3px;
    cursor: pointer;
    border: 1px solid var(--color-review, #58c);
    background: transparent;
    color: var(--color-review, #58c);
}
.staged-input-load:hover { background: rgba(80, 120, 200, 0.18); }
.delivery-status-banner.delivery-info    { border-left-color: var(--color-review, #58c);    background: rgba(80, 120, 200, 0.08); }
.delivery-status-banner.delivery-success { border-left-color: var(--color-active, #2a8);    background: rgba(40, 170, 130, 0.10); }
.delivery-status-banner.delivery-warning { border-left-color: var(--color-blocked, #b8430b); background: rgba(184, 67, 11, 0.10); }

/* --- "Where was I?" resume snapshot --- */
.resume-btn {
    width: 100%; margin: 4px 0 2px; padding: 6px 8px;
    background: var(--bg-card); color: var(--text);
    border: 1px solid var(--border); border-radius: 4px;
    cursor: pointer; font-size: 12px; font-weight: 600; text-align: left;
}
.resume-btn:hover { border-color: var(--color-review); color: var(--color-review); }
#resume { padding: 12px; overflow-y: auto; }
.resume-intro { color: var(--text-dim); font-size: 12px; margin-bottom: 12px; }
.resume-group { margin-bottom: 16px; }
.resume-group-head {
    display: flex; align-items: baseline; gap: 8px;
    padding: 2px 2px 6px; margin-bottom: 6px;
    border-bottom: 1px solid var(--border);
}
.resume-group-proj { font-weight: 700; font-size: 14px; }
.resume-group-count { color: var(--text-dim); font-size: 11px; }
.resume-group-since { margin-left: auto; color: var(--text-dim); font-size: 12px; }
.resume-group .resume-card { margin-left: 10px; }
.resume-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-left: 3px solid var(--border); border-radius: 6px;
    padding: 8px 10px; margin-bottom: 8px; cursor: pointer;
}
.resume-card:hover { border-left-color: var(--color-review); background: rgba(80,120,200,0.06); }
.resume-head { display: flex; align-items: center; gap: 8px; }
.resume-head .row-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.resume-machine { color: var(--text-dim); font-size: 12px; }
.resume-state { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.resume-since { margin-left: auto; color: var(--text-dim); font-size: 12px; }
.resume-git { color: var(--text-dim); font-size: 12px; margin: 3px 0; }
.resume-commit { font-size: 12px; color: var(--text-dim); margin: 2px 0; }
/* Layer B synopsis — the maintained LLM gist, the first thing you read. */
.resume-gist {
    margin: 4px 0 8px;
    padding: 7px 9px;
    border-left: 3px solid var(--color-active, #22c55e);
    background: color-mix(in srgb, var(--color-active, #22c55e) 8%, transparent);
    border-radius: 4px;
}
.resume-gist-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 3px; }
.resume-gist-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-active, #22c55e); }
.resume-gist-age { font-size: 10px; color: var(--text-dim); }
.resume-gist-body { font-size: 12.5px; color: var(--text); white-space: pre-wrap; line-height: 1.4; }
.resume-prompt { font-size: 12px; color: var(--text); margin: 3px 0; white-space: pre-wrap; max-height: 3em; overflow: hidden; opacity: .95; }
.resume-reply { font-size: 12px; color: var(--text); white-space: pre-wrap; max-height: 4.5em; overflow: hidden; opacity: .9; }
.resume-noreply { color: var(--text-dim); font-style: italic; }
/* "You asked" / "Last commit" / "Claude" labels — a faint inline tag so the
   synopsis reads as a who-said-what reorient. */
.resume-label {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-dim);
    margin-right: 5px;
    opacity: .8;
}

/* To-do list (in the "Where was I?" panel) */
.todo-box {
    margin-bottom: 16px; padding: 10px;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px;
}
.todo-head { font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.todo-hint { font-weight: 400; font-size: 11px; color: var(--text-dim); margin-left: 6px; }
.todo-add { display: flex; gap: 6px; margin-bottom: 8px; }
.todo-input {
    flex: 1; padding: 5px 8px; border: 1px solid var(--border); border-radius: 4px;
    background: var(--bg); color: var(--text); font-family: inherit; font-size: 12px;
}
.todo-input:focus { outline: none; border-color: var(--color-active); }
.todo-add-btn { padding: 5px 12px; }
.todo-list { list-style: none; margin: 0; padding: 0; }
.todo-item {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 2px; font-size: 13px; border-bottom: 1px solid var(--border);
}
.todo-item:last-child { border-bottom: none; }
.todo-check { flex: none; cursor: pointer; }
.todo-text { flex: 1; white-space: pre-wrap; word-break: break-word; }
.todo-done .todo-text { text-decoration: line-through; color: var(--text-dim); }
.todo-del {
    flex: none; border: none; background: none; color: var(--text-dim);
    font-size: 16px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.todo-del:hover { color: var(--color-blocked); }
.todo-empty { color: var(--text-dim); font-style: italic; font-size: 12px; padding: 4px 2px; }

/* --- Observability plumbing graphs --- */
#observability { padding: 12px; overflow-y: auto; }
.obs-intro { color: var(--text-dim); font-size: 12px; margin-bottom: 12px; }
.obs-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; margin-bottom: 12px; }
.obs-title { font-weight: 600; font-size: 12px; margin-bottom: 8px; }
.obs-stat { font-weight: 400; font-size: 11px; color: var(--text-dim); margin-left: 4px; }
.obs-canvas { display: block; max-width: 100%; border-radius: 3px; background: rgba(0,0,0,0.15); }
.obs-legend { font-size: 11px; color: var(--text-dim); margin-top: 6px; display: flex; gap: 12px; }
.obs-agents { display: flex; flex-wrap: wrap; gap: 8px; }
.obs-agent { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px; font-size: 12px; }
.obs-agent .row-dot { width: 9px; height: 9px; border-radius: 50%; }
.obs-agent-age { color: var(--text-dim); font-size: 11px; }
.obs-noagents { color: var(--text-dim); font-style: italic; }

/* ---------------------------------------------------------------------------
   Docs viewer — committed markdown browser (per-project Docs tab)
   --------------------------------------------------------------------------- */
.docs-layout { display: flex; gap: 0; height: 60vh; min-height: 360px; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.docs-list { width: 250px; flex-shrink: 0; overflow-y: auto; border-right: 1px solid var(--border); padding: 6px; font-size: 12px; }
.docs-reader { flex: 1; overflow-y: auto; padding: 14px 20px; }

.docs-banner { font-size: 11px; color: var(--text-dim); padding: 4px 6px 8px; border-bottom: 1px solid var(--border); margin-bottom: 6px; position: sticky; top: -6px; background: var(--bg); }
.docs-warn { color: var(--color-waiting); }

.docs-file { padding: 4px 6px; border-radius: 3px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.docs-file:hover { background: var(--bg-hover); }
.docs-file.active { background: var(--color-active); color: #fff; }
.docs-file.active .docs-file-dir { color: rgba(255,255,255,0.8); }
.docs-file-dir { color: var(--text-dim); }
.docs-file-name { font-weight: 600; }

.docs-raw { white-space: pre-wrap; font-family: ui-monospace, monospace; font-size: 12px; }
.docs-link-inert { color: var(--text-dim); text-decoration: line-through; cursor: default; }

/* Markdown typography (rendered by marked, sanitized by DOMPurify) */
.markdown-body { font-size: 14px; line-height: 1.6; color: var(--text); }
.markdown-body h1, .markdown-body h2, .markdown-body h3,
.markdown-body h4 { margin: 1.2em 0 0.5em; line-height: 1.25; font-weight: 700; }
.markdown-body h1 { font-size: 1.6em; border-bottom: 1px solid var(--border); padding-bottom: 0.3em; }
.markdown-body h2 { font-size: 1.35em; border-bottom: 1px solid var(--border); padding-bottom: 0.25em; }
.markdown-body h3 { font-size: 1.15em; }
.markdown-body p { margin: 0.6em 0; }
.markdown-body ul, .markdown-body ol { margin: 0.6em 0; padding-left: 1.6em; }
.markdown-body li { margin: 0.2em 0; }
.markdown-body a { color: var(--color-active); text-decoration: none; }
.markdown-body a:hover { text-decoration: underline; }
.markdown-body code { font-family: ui-monospace, monospace; font-size: 0.88em; background: var(--bg-hover); padding: 0.1em 0.35em; border-radius: 3px; }
.markdown-body pre { background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: 10px 12px; overflow-x: auto; }
.markdown-body pre code { background: none; padding: 0; }
.markdown-body blockquote { margin: 0.6em 0; padding: 0.2em 0.9em; border-left: 3px solid var(--border); color: var(--text-dim); }
.markdown-body table { border-collapse: collapse; margin: 0.8em 0; display: block; overflow-x: auto; }
.markdown-body th, .markdown-body td { border: 1px solid var(--border); padding: 5px 9px; text-align: left; }
.markdown-body th { background: var(--bg-hover); }
.markdown-body img { max-width: 100%; }
.markdown-body hr { border: none; border-top: 1px solid var(--border); margin: 1.2em 0; }

/* Docs viewer — expand-to-full-window toggle */
.docs-toolbar { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.docs-expand-btn { background: none; border: 1px solid var(--border); border-radius: 4px; color: inherit; font-size: 12px; padding: 2px 10px; cursor: pointer; }

/* Outbox file delivery (📥 Files tab) */
.files-intro { font-size: 12px; color: var(--text-dim); margin: 4px 0 10px; }
.files-intro code { background: var(--bg-alt, rgba(127,127,127,.12)); padding: 1px 4px; border-radius: 3px; }
.outbox-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 5px; margin-bottom: 6px; }
.outbox-name { flex: 1 1 auto; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.outbox-size { flex-shrink: 0; font-size: 11px; color: var(--text-dim); }
.outbox-dl { flex-shrink: 0; background: none; border: 1px solid var(--color-active, #22c55e); color: var(--color-active, #22c55e); border-radius: 4px; font-size: 12px; padding: 3px 12px; cursor: pointer; }
.outbox-dl:hover:not(:disabled) { background: color-mix(in srgb, var(--color-active, #22c55e) 12%, transparent); }
.outbox-dl:disabled { opacity: .6; cursor: default; }
.outbox-del { flex-shrink: 0; background: none; border: 1px solid var(--color-blocked, #ef4444); color: var(--color-blocked, #ef4444); border-radius: 4px; font-size: 12px; padding: 3px 10px; cursor: pointer; }
.outbox-del:hover:not(:disabled) { background: color-mix(in srgb, var(--color-blocked, #ef4444) 12%, transparent); }
.outbox-del:disabled { opacity: .6; cursor: default; }
.outbox-toolbar { display: flex; gap: 8px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.inbox-send { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.inbox-row { display: flex; align-items: center; gap: 10px; }
.inbox-progress { font-size: 12px; color: var(--text-dim); }
.docs-expand-btn:hover { border-color: var(--color-active); color: var(--color-active); }
#docs-panel.docs-maximized { position: fixed; inset: 0; z-index: 2000; background: var(--bg); padding: 10px 14px; display: flex !important; flex-direction: column; }
#docs-panel.docs-maximized .docs-layout { flex: 1; height: auto; min-height: 0; }
body.docs-noscroll { overflow: hidden; }

/* ---------------------------------------------------------------------------
   GitLab panel — open MRs + issues (per-project tab)
   --------------------------------------------------------------------------- */
.gl-banner { font-size: 11px; color: var(--text-dim); padding: 2px 0 8px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.gl-warn { color: var(--color-waiting); }
.gl-section-title { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); margin: 14px 0 6px; }
.gl-row { padding: 7px 9px; border: 1px solid var(--border); border-radius: 5px; margin-bottom: 6px; background: var(--bg-card); }
.gl-row-other { border-left: 3px solid var(--color-active); }
.gl-row-main { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gl-title { color: var(--text); text-decoration: none; font-weight: 600; font-size: 13px; }
.gl-title:hover { color: var(--color-active); text-decoration: underline; }
.gl-row-meta { font-size: 11px; color: var(--text-dim); margin-top: 3px; }
.gl-author { color: var(--text-dim); }
.gl-by-other { color: var(--color-active); font-weight: 600; }
.gl-branches { font-family: ui-monospace, monospace; }
.gl-badge { font-size: 10px; padding: 1px 6px; border-radius: 3px; font-weight: 600; }
.gl-draft { background: var(--color-waiting); color: #1a1a1a; }
.gl-conflict { background: var(--color-blocked); color: #fff; }
.gl-label { font-size: 10px; padding: 1px 6px; border-radius: 9px; background: var(--bg-hover); color: var(--text-dim); }

/* Worktree issue links / blockers (GitLab tab + resume cards) */
.gl-blockers { margin-bottom: 6px; }
.gl-link-btn {
    font-size: 10px;
    padding: 1px 7px;
    border-radius: 3px;
    border: 1px solid var(--border);
    background: none;
    color: var(--text-dim);
    cursor: pointer;
}
.gl-link-btn:hover { color: var(--color-blocked); border-color: var(--color-blocked); }
.gl-link-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    padding: 4px 0;
}
.gl-link-state { font-size: 10px; padding: 1px 6px; border-radius: 9px; font-weight: 600; }
.gl-link-open { background: var(--color-blocked); color: #fff; }
.gl-link-closed { background: var(--bg-hover); color: var(--text-dim); }
.gl-struck { text-decoration: line-through; opacity: 0.65; }
.gl-unlink-btn {
    margin-left: auto;
    border: none;
    background: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 0 4px;
}
.gl-unlink-btn:hover { color: var(--text); }
.resume-blockers { margin: 4px 0; }
.resume-blocker-row { font-size: 12px; padding: 2px 0; }
.resume-card-blocked { border-left: 3px solid var(--color-blocked); }
.gl-link-add { display: flex; gap: 8px; margin-top: 6px; }
.gl-link-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg);
    color: var(--text);
    font-size: 12px;
}

/* New-worktree form (session detail) */
.worktree-form { border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; margin: 8px 0; background: var(--bg-card); }
.wt-row { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.wt-row label { font-size: 11px; color: var(--text-dim); }
.wt-row input { padding: 5px 8px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--text); font-size: 13px; }
.wt-check { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-bottom: 8px; }
.wt-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wt-hint { font-size: 11px; color: var(--text-dim); }
.wt-hint code { font-family: ui-monospace, monospace; }
.wt-check-danger { align-items: flex-start; color: var(--color-blocked); }
.wt-check-danger input { margin-top: 2px; }
.wt-check-danger .wt-hint { display: block; margin-top: 2px; }

/* Worktree description — one line above the tabs in the session detail view. */
.worktree-desc {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0;
    font-size: 13px;
    color: var(--text);
}
.worktree-desc .wd-icon { flex: none; opacity: 0.8; }
.worktree-desc .wd-text { flex: 1 1 auto; min-width: 0; }
.worktree-desc .wd-edit {
    flex: none;
    border: none;
    background: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 13px;
    padding: 0 4px;
}
.worktree-desc .wd-edit:hover { color: var(--text); }
.worktree-desc .wd-add {
    border: 1px dashed var(--border);
    background: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 4px;
}
.worktree-desc .wd-add:hover { color: var(--text); border-color: var(--text-dim); }
.worktree-desc .wd-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg);
    color: var(--text);
    font-size: 13px;
}

/* Remove-worktree danger button */
.session-ctrl-btn.wt-danger { border-color: var(--color-blocked); color: var(--color-blocked); }
.session-ctrl-btn.wt-danger:hover { background: var(--color-blocked); color: #fff; }

/* Reply-box file attachment chip */
.reply-area.drag-over { outline: 2px dashed var(--color-active); outline-offset: 2px; border-radius: 6px; }
.attach-chip { display: flex; align-items: center; gap: 8px; padding: 5px 8px; margin-bottom: 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); font-size: 12px; }
.attach-thumb { width: 34px; height: 34px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border); }
.attach-icon { font-size: 20px; }
.attach-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
.attach-status { color: var(--text-dim); font-style: italic; }
.attach-status.attach-err { color: var(--color-blocked); font-style: normal; }
.attach-x { margin-left: auto; background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 13px; padding: 0 4px; }
.attach-x:hover { color: var(--color-blocked); }

/* ============================================================
   Badge system
   ------------------------------------------------------------
   Two visual classes, deliberately distinct so a dense row stays
   parseable at a glance:

     .pill  — OUTLINE. A *status*: what this session is doing.
     .tag   — FILLED.  An *identity*: where it lives (machine/project).

   Never style one like the other; the whole point is that "▶ 4m"
   and "dev-ai" can't be confused at 11px.

   Numbers are tabular so a column of pills doesn't jitter as
   digits change on each 10 s poll.
   ============================================================ */
.pill {
    --pill-hue: var(--color-idle);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding: 1px 6px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--pill-hue) 45%, transparent);
    background: color-mix(in srgb, var(--pill-hue) 12%, transparent);
    color: var(--pill-hue);
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.pill.ok      { --pill-hue: var(--color-active); }
.pill.warn    { --pill-hue: var(--color-waiting); }
.pill.bad     { --pill-hue: var(--color-blocked); }
.pill.info    { --pill-hue: var(--color-review); }
.pill.err     { --pill-hue: var(--color-error); }
.pill.dim     { --pill-hue: var(--color-idle); }
.pill.question   { --pill-hue: var(--color-question); }
.pill.stuck      { --pill-hue: var(--color-stuck); }
.pill.monitoring { --pill-hue: var(--color-monitoring); }
.pill.auto       { --pill-hue: var(--color-auto); }

/* Overflow marker — "there are N more badges, hover to read them". Muted by
   design: it must never out-shout the badges it is standing in for. */
.pill.more {
    --pill-hue: var(--text-dim);
    font-weight: 500;
    cursor: default;
}

/* needs_login is the one badge allowed to shout: it is the only state a human
   must physically act on, and a quiet outline pill gets scrolled past. */
.pill.shout {
    background: var(--pill-hue);
    color: #fff;
    border-color: var(--pill-hue);
}

/* The dwell time inside a state pill ("▶ active · 4m"): same hue, lower
   emphasis, so the state reads first and the age second. */
.pill .pill-dwell {
    opacity: 0.75;
    font-weight: 500;
}

/* A horizontal run of pills. Used in the sidebar row and the detail header. */
.badge-strip {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Sidebar rows are 300px wide and the label already eats most of it, so the
   strip there is capped (see renderBadges' `limit`) and must never grow. */
.sidebar-row .badge-strip { gap: 3px; }

/* ---- Detail header: breadcrumb + badges + op-tiles -------------------------
   Replaces the old 9-tile #detail-meta grid, most of which restated the
   sidebar row the user had just clicked. */
.detail-crumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-dim);
    min-width: 0;
}
.detail-crumb .crumb-sep { opacity: 0.4; }
.detail-crumb .crumb-branch {
    color: var(--text);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detail-metabar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.detail-metabar .badge-strip { flex-wrap: wrap; }

/* Reference data that genuinely can't be a badge (a path, a UUID). Kept, but
   demoted to a quiet monospace footnote instead of a pair of card tiles. */
.op-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-size: 10px;
    color: var(--text-dim);
}
.op-tiles .op {
    display: inline-flex;
    gap: 5px;
    min-width: 0;
}
.op-tiles .op-k { text-transform: uppercase; opacity: 0.65; }
.op-tiles .op-v {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 340px;
}

/* ==========================================================================
   Embedded terminal (#29) — read-only P1 overlay. xterm.js mounts in
   #terminal-body; input is disabled (a viewer, not a driver).
   ========================================================================== */
.terminal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 300;
    display: flex;
    justify-content: center;
    align-items: center;
}
.terminal-overlay.hidden { display: none; }

.terminal-window {
    background: #0b0e14;
    border: 1px solid var(--border);
    border-radius: 10px;
    width: min(94vw, 1120px);
    height: min(88vh, 780px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.terminal-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}
.terminal-title {
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 55%;
}
.terminal-mode-toggle {
    font-size: 10px;
    font-weight: 600;
    background: none;
    border-radius: 10px;
    padding: 1px 8px;
    white-space: nowrap;
    cursor: pointer;
    line-height: 1.6;
}
/* Read-only (default): amber — you are watching, not driving. */
.terminal-mode-toggle.is-readonly {
    color: var(--color-waiting, #f59e0b);
    border: 1px solid var(--color-waiting, #f59e0b);
}
/* Input control taken: green — keystrokes drive the live pane. */
.terminal-mode-toggle.is-input {
    color: var(--color-active, #22c55e);
    border: 1px solid var(--color-active, #22c55e);
}
.terminal-mode-toggle:hover { filter: brightness(1.2); }
.terminal-status {
    margin-left: auto;
    color: var(--text-dim);
    font-size: 11px;
    white-space: nowrap;
}
.terminal-close {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-dim);
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 3px 8px;
}
.terminal-close:hover { color: var(--text); border-color: var(--text-dim); }

.terminal-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 6px;
    background: #0b0e14;
}

/* "Terminal" session control — a neutral (blue) accent, distinct from the
   green default / red stop / amber warn controls. */
.session-ctrl-btn.session-ctrl-term {
    border-color: var(--color-review, #3b82f6);
    color: var(--color-review, #3b82f6);
}
.session-ctrl-btn.session-ctrl-term:hover { background: rgba(59, 130, 246, 0.12); }

/* Beacons (#30 P3): what an agent published about itself, on the session detail. */
.beacon {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
    margin: 6px 0;
    padding: 5px 10px;
    background: var(--bg-hover);
    border-left: 3px solid var(--color-monitoring);
    border-radius: 4px;
    font-size: 12px;
}
.beacon-tag {
    font-weight: 600;
    color: var(--color-monitoring);
    white-space: nowrap;
}
.beacon-stage {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: 11px;
    color: var(--text);
}
.beacon-task { color: var(--text); }
.beacon-field {
    color: var(--text-dim);
    max-width: 40ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.beacon-blocked {
    color: var(--color-blocked);
    font-weight: 600;
    white-space: nowrap;
}

/* Notices (#30 P4) — incoming peer notices for the selected session. */
.notices { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.notice {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
    padding: 4px 10px;
    background: var(--bg-hover);
    border-left: 3px solid var(--text-dim);
    border-radius: 4px;
    font-size: 12px;
}
.notice-actionable { border-left-color: var(--color-review); }
.notice-fyi        { border-left-color: var(--color-monitoring); }
.notice-deadletter { border-left-color: var(--color-blocked); background: color-mix(in srgb, var(--color-blocked) 12%, var(--bg-hover)); }
.notice-muted { opacity: .6; }
.notice-kind { font-weight: 700; white-space: nowrap; }
.notice-actionable .notice-kind { color: var(--color-review); }
.notice-fyi .notice-kind        { color: var(--color-monitoring); }
.notice-deadletter .notice-kind { color: var(--color-blocked); }
.notice-from { color: var(--text-dim); white-space: nowrap; }
.notice-content {
    color: var(--text);
    max-width: 48ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Plans (#30 P5) — single-writer plan panel in the sidebar. */
.plan { border-left: 2px solid var(--color-review, #3b82f6); margin: 2px 0; padding-left: 6px; }
.plan-head { display: flex; justify-content: space-between; gap: 6px; cursor: pointer; font-size: 12px; padding: 2px 0; }
.plan-head:hover { color: var(--text, #e6edf3); }
.plan-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-meta { color: var(--text-dim, #7d8590); font-size: 10px; white-space: nowrap; }
.plan-body { white-space: pre-wrap; font-size: 11px; color: var(--text-dim, #7d8590); margin: 2px 0; max-height: 200px; overflow: auto; }
.plan-evidence { font-size: 11px; display: flex; flex-direction: column; gap: 1px; }
.plan-evidence > div { padding: 1px 0; }
.evidence-verified { color: var(--color-active, #22c55e); }
.evidence-unverified { color: var(--text-dim, #7d8590); }