/* === CSS Variables === */
:root {
    --bg-primary: #1a1a2e;
    --bg-secondary: #16213e;
    --bg-card: #1e2a45;
    --bg-input: #0f1729;
    --text-primary: #e0e0e0;
    --text-secondary: #a0a0a0;
    --accent: #4fc3f7;
    --accent-hover: #39a8db;
    --success: #66bb6a;
    --warning: #ffa726;
    --error: #ef5350;
    --border: #2a3a55;
    --sidebar-width: 300px;
    --header-height: 52px;
    --tab-height: 44px;
    --chat-input-height: 60px;
    --radius: 6px;
    --radius-lg: 10px;

    /* status colors */
    --status-idle: #66bb6a;
    --status-working: #4fc3f7;
    --status-error: #ef5350;
    --status-offline: #757575;
    --status-spawning: #ffa726;
}

/* === Reset & Base === */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    overflow: hidden;
    overflow-x: hidden;
    max-width: 100vw;
}

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

/* === Scrollbars === */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* === Header === */
#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 12px;
    z-index: 100;
}

.header-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--accent);
    white-space: nowrap;
}

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

.connection-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--status-offline);
    display: inline-block;
    flex-shrink: 0;
}

.connection-dot.connected {
    background: var(--status-idle);
}

.connection-dot.reconnecting {
    background: var(--status-spawning);
    animation: pulse 1.5s infinite;
}

.user-info {
    font-size: 12px;
    color: var(--text-secondary);
}

.btn-logout {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--border);
    font-size: 11px;
    padding: 3px 10px;
}

.btn-logout:hover {
    color: var(--error);
    border-color: var(--error);
}

/* === Hamburger === */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
}

.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 1px;
    transition: transform 0.2s, opacity 0.2s;
}

.hamburger.active span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
    opacity: 0;
}
.hamburger.active span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* === Layout === */
#app {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    overflow: hidden;
}

/* === Sidebar === */
.sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}

.sidebar-header h2 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* === Sidebar Sections === */
.sidebar-section {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar-section:first-child {
    flex: 1;
    min-height: 0;
}

.sidebar-system {
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

/* === System Section Collapse === */
.sidebar-header-toggle {
    cursor: pointer;
    user-select: none;
}

.collapse-chevron {
    font-size: 10px;
    color: var(--text-secondary);
    transition: transform 0.2s ease;
}

.sidebar-system.collapsed .collapse-chevron {
    transform: rotate(-90deg);
}

.sidebar-system .system-nav {
    overflow: hidden;
    max-height: 1000px;
    transition: max-height 0.25s ease, opacity 0.2s ease, visibility 0s;
    opacity: 1;
    visibility: visible;
}

/* Opacity+max-height alone leave the rows in the tab order, and the
   nav items became focusable in this plan. On mobile this section defaults to
   collapsed, so without visibility:hidden a keyboard user tabs through seven
   invisible rows and Enter navigates blind. Delayed to the end of the collapse
   so the animation still plays; instant on the way back open. */
.sidebar-system.collapsed .system-nav {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease, visibility 0s linear 0.25s;
}

/* === System Nav === */
.system-nav {
    padding: 8px;
}

.system-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius);
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 14px;
    transition: background 0.15s;
}

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

.system-nav-item.selected {
    background: rgba(79,195,247,0.1);
    color: var(--accent);
    box-shadow: inset 3px 0 0 var(--accent);
}

/* Projects + AgentTaskBoardAdmin. The row reuses .system-nav-item so a group header sits at
   the same visual weight as Plans and Activity — only the chevron is added. */
.system-nav-group-row {
    gap: 8px;
    user-select: none;
}

/* The Projects group only. Its chevron is a sibling of the row rather than a child
   (index.html explains why), so it needs to overlay the row without being laid
   out by it. A single-column grid with both placed in cell 1/1 does that: the
   row still spans the full width so its hover and selected backgrounds are
   unbroken, and the chevron centres against the row's ACTUAL height instead of
   an absolute offset guessed from an assumed one. The first attempt hardcoded
   top:7px against a row assumed to be 38px tall; it is 41px, so the chevron sat
   7.5px high and 6px left of the AgentTaskBoardAdmin chevron — visible, and the kind of
   drift that returns the moment any padding changes. */
.system-nav-group-float {
    display: grid;
    grid-template-columns: 1fr;
}

.system-nav-group-float > .group-chevron-float {
    grid-area: 1 / 1;
    align-self: center;
    justify-self: start;
    /* Only the horizontal offset is a number, and it is the one that lines this
       chevron's box up with the in-flow AgentTaskBoardAdmin chevron's (12px row padding
       less its 6px negative left margin). */
    margin: 0 0 0 6px;
    /* position + z-index so the chevron paints above the row, which shares the
       cell and comes later in DOM order. */
    position: relative;
    z-index: 1;
}

.system-nav-group-float > .system-nav-group-row {
    grid-area: 1 / 1;
}

.system-nav-group-float > .projects-tree {
    grid-area: 2 / 1;
}

/* The Projects row has no in-flow chevron, so it pads out to the same text origin
   the ::before placeholder gives Plans and Activity (12px padding + 24px box
   - 4px - 6px margins + 8px gap). */
.system-nav-group-row-float {
    padding-left: 34px;
}

.group-chevron {
    font-size: 10px;
    color: var(--text-secondary);
    opacity: 0.7;
    transition: transform 0.2s ease;
    line-height: 1;
    /* Real hit area. On the Projects row a miss is destructive rather than merely
       annoying: the tap falls through to the row, which navigates to the registry
       admin AND closes the sidebar on mobile. A 10px glyph is nowhere near a
       thumb-sized target, so give the chevron a 24px box and pull the row's
       padding back by the overhang so the label does not shift. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: -6px -4px -6px -6px;
    flex-shrink: 0;
}

.system-nav-group.collapsed .group-chevron {
    transform: rotate(-90deg);
}

.group-chevron:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-radius: 2px;
}

.system-nav-group .group-children {
    overflow: hidden;
    /* Headroom only; the binding cap is .sidebar-system .system-nav above. Kept
       near the real content height anyway — a wildly oversized max-height spends
       most of the transition off-screen and the collapse looks like it stalls. */
    max-height: 1200px;
    opacity: 1;
    /* Deliberately NOT `visibility: visible`. visibility is inherited, and a
       descendant that re-declares `visible` un-hides itself from a hidden
       ancestor — which would defeat .sidebar-system.collapsed .system-nav and
       leave every nested row focusable while the whole section is closed
       (the mobile default). Inheriting is what makes that rule reach in here. */
    transition: max-height 0.25s ease, opacity 0.2s ease, visibility 0s;
}

/* visibility keeps collapsed children out of the tab order — see the note on
   .sidebar-system.collapsed .system-nav above. */
.system-nav-group.collapsed .group-children {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease, visibility 0s linear 0.25s;
}

/* Children of AgentTaskBoardAdmin sit one level below a top-level group, the same depth as
   an app header (Host/Studio) under Projects — NOT the same as an app's leaves, which
   are two levels down. Measured: this lands them on the app-header text edge. */
.system-nav-nested {
    padding-left: 32px;
    font-size: 13px;
}

/* Plans and Activity carry no chevron, so without a placeholder their labels sit
   12px left of Projects and AgentTaskBoardAdmin and the four top-level rows stop lining up.
   The child combinator matches only those two: group rows and nested items are
   both wrapped a level deeper. */
.system-nav > .system-nav-item {
    gap: 8px;
}

.system-nav > .system-nav-item::before {
    content: '';
    /* Matches .group-chevron's box minus its negative margins, so Plans and
       Activity line up with Projects and AgentTaskBoardAdmin. */
    width: 24px;
    margin: 0 -4px 0 -6px;
    flex-shrink: 0;
}

.projects-tree {
    padding: 0 0 0 12px;
}

.system-app-group {
    margin: 2px 0;
}

.system-app-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius);
    transition: background 0.15s;
}

.system-app-header:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}

.system-app-header .app-chevron {
    font-size: 10px;
    opacity: 0.7;
}

.system-nav-sub {
    display: flex;
    align-items: center;
    padding: 5px 10px 5px 26px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius);
    transition: background 0.15s;
}

.system-nav-sub:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}

.system-nav-sub.selected {
    background: rgba(79,195,247,0.1);
    color: var(--accent);
    box-shadow: inset 3px 0 0 var(--accent);
}

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

.agent-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

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

.agent-card.selected {
    border-color: var(--accent);
    background: #1a3050;
    box-shadow: inset 3px 0 0 var(--accent);
}

.agent-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.agent-card-name {
    font-weight: 600;
    font-size: 14px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agent-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: var(--text-secondary);
}

/* === Agent Card Status Row === */
.agent-status-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.agent-status-label {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Context occupancy. Never had a rule — on the card three unstyled
   stats sat together and read as a group, so the gap was invisible. It is now
   the only stat on the card and also sits in the agent header next to the
   styled status label, where unstyled would read as a bug.
   Tabular figures so the number doesn't jitter as it ticks up each turn. */
.agent-stats {
    font-size: 12px;
    color: var(--text-secondary);
}

.agent-stats-context {
    font-variant-numeric: tabular-nums;
}

.agent-model {
    font-size: 13px;
    color: var(--text-secondary);
}

/* The live session's model/effort disagrees with the configured value —
   for a spawned agent that is the anomaly signal (a degraded start included). */
.agent-model-diverged {
    color: var(--warning, #e5a50a);
    font-weight: 600;
}

/* === Status Dot === */
.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.status-dot.idle { background: var(--status-idle); }
.status-dot.working {
    background: var(--status-working);
    animation: pulse 1.5s infinite;
}
.status-dot.error { background: var(--status-error); }
.status-dot.offline { background: var(--status-offline); }
.status-dot.spawning {
    background: var(--status-spawning);
    animation: pulse 1.5s infinite;
}

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

/* === Badge === */
.badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.badge-model {
    background: #2a3a55;
    color: var(--accent);
}

.badge-agent-type {
    margin-left: 4px;
    font-size: 9px;
}

.badge-type-planning { background: #7c3aed; color: #fff; }
.badge-type-review { background: #0891b2; color: #fff; }
.badge-type-development { background: #059669; color: #fff; }
.badge-type-orchestrator { background: #dc2626; color: #fff; }
.badge-type-action { background: #d97706; color: #fff; }
.badge-type-infrastructure { background: #6366f1; color: #fff; }
.badge-type-infra { background: #6366f1; color: #fff; }

/* Plan assigned agent labels */
.plan-agent-label { font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 600; background: rgba(79,195,247,0.15); color: var(--accent); }
.plan-pr-link { font-size: 12px; color: var(--accent); text-decoration: none; }
.plan-pr-link:hover { text-decoration: underline; }

/* A PR-less plan's deliverable, and the legacy freeform prUrl values that
   are not links. Both are plain text on purpose — nothing here is clickable. */
.badge-deliverable { font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 600; background: #3f3f46; color: #e4e4e7; text-transform: uppercase; letter-spacing: 0.03em; }
.plan-pr-note { font-size: 12px; color: var(--text-secondary); font-style: italic; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.agent-meta-row { font-size: 11px; color: var(--text-secondary); padding: 1px 0 1px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-meta-icon { margin-right: 4px; font-size: 10px; }

/* === Main Panel === */
.main-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
}

.empty-state {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 16px;
}

.agent-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* === Agent Header === */
.agent-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
    flex-shrink: 0;
    z-index: 10;
}

.btn-back {
    display: none;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
}

.agent-header-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.agent-header-name {
    font-weight: 600;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agent-header-actions {
    display: flex;
    gap: 8px;
}

/* === Tabs === */
.tab-bar {
    display: flex;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-shrink: 0;
}

.tab-bar::-webkit-scrollbar {
    display: none;
}

.tab {
    padding: 10px 18px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}

.tab:hover {
    color: var(--text-primary);
}

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

/* === Tab Content === */
.tab-content {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.tab-pane {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tab-pane.hidden {
    display: none;
}

/* === System Views === */
.system-view {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.system-view.hidden {
    display: none !important;
}

.system-view-header {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
    flex-shrink: 0;
}

.system-view-header h2 {
    font-size: 16px;
    font-weight: 600;
    flex: 1;
}

.system-view-header .btn {
    margin-left: 8px;
    font-size: 16px;
    padding: 2px 8px;
}

.agent-plan-progress {
    background: var(--accent);
    color: #fff;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    margin-left: 4px;
}

/* === Agent Filter Bar === */
.agent-filter-bar {
    display: flex;
    gap: 4px;
    padding: 4px 12px 8px;
}

/* === Chat === */
.chat-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-secondary);
    font-style: italic;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-msg {
    max-width: 85%;
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 15px;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.chat-msg.user {
    align-self: flex-end;
    background: var(--accent);
    color: #fff;
    border-bottom-right-radius: 3px;
}

.chat-msg.agent {
    align-self: flex-start;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-bottom-left-radius: 3px;
}

.chat-msg.system {
    align-self: center;
    background: none;
    color: var(--text-secondary);
    font-size: 13px;
    font-style: italic;
    max-width: 90%;
    text-align: center;
}

.chat-msg .msg-meta {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.chat-msg.user .msg-meta {
    color: rgba(255, 255, 255, 0.7);
}

.chat-msg code {
    background: rgba(0, 0, 0, 0.3);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 12px;
}

.chat-msg pre {
    background: rgba(0, 0, 0, 0.3);
    padding: 10px;
    border-radius: var(--radius);
    overflow-x: auto;
    margin: 6px 0;
    font-size: 12px;
    line-height: 1.4;
}

.chat-msg pre code {
    background: none;
    padding: 0;
}

.chat-image-thumb {
    display: block;
    max-width: 300px;
    max-height: 250px;
    border-radius: var(--radius);
    margin-top: 8px;
    cursor: pointer;
    transition: opacity 0.15s;
}

.chat-image-thumb:hover {
    opacity: 0.85;
}

.image-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.image-overlay.visible {
    display: flex;
}

.image-overlay img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--radius);
    cursor: default;
}

.chat-input-area {
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    background: var(--bg-secondary);
    min-width: 0;
}

.chat-input {
    flex: 1;
    min-width: 0;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    padding: 10px 12px;
    resize: none;
    outline: none;
    min-height: 40px;
    max-height: 120px;
}

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

.btn-send {
    align-self: flex-end;
}

/* === Filter Bar === */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
    flex-wrap: wrap;
}

.filter-bar-spread {
    justify-content: space-between;
}
.filter-bar-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.filter-group {
    display: flex;
    gap: 2px;
}
.filter-group.filter-group-spaced {
    gap: 8px;
}

.filter-btn {
    padding: 5px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

.filter-btn:hover {
    color: var(--text-primary);
}

.filter-btn.active {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
}

.filter-select {
    padding: 5px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 12px;
    outline: none;
}

.filter-select:focus {
    border-color: var(--accent);
}

.filter-select-sm {
    width: 100%;
    padding: 6px 10px;
    font-size: 13px;
}

/* Plan lookup by number. Narrow — it takes "723.4", not a search phrase. */
#plan-lookup {
    width: 130px;
}

.plan-lookup-msg {
    font-size: 12px;
    color: var(--error);
    white-space: nowrap;
}

/* === Report List === */
.report-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
}

.report-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color 0.15s;
}

.report-card:hover {
    border-color: var(--accent);
}
#plan-list .report-card {
    cursor: pointer;
}

.report-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.report-card-title {
    font-weight: 600;
    font-size: 14px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-card-body {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
    display: none;
}

.report-card.expanded .report-card-body {
    display: block;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.badge-plan-status { font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.badge-plan-status.backlog { background: #4b5563; color: #fff; }
.badge-plan-status.planning { background: #7c3aed; color: #fff; }
.badge-plan-status.review { background: #0891b2; color: #fff; }
.badge-plan-status.ready { background: #059669; color: #fff; }
.badge-plan-status.development { background: #d97706; color: #fff; }
.badge-plan-status.codereview { background: #0ea5e9; color: #fff; }
.badge-plan-status.completed { background: #6b7280; color: #fff; }
.badge-plan-status.cancelled { background: #dc2626; color: #fff; }

.plan-checklist { list-style: none; padding: 0; margin: 8px 0 0 0; }
.plan-checklist li { padding: 4px 0; color: var(--text-secondary); font-size: 13px; }
.plan-checklist li.checked { text-decoration: line-through; opacity: 0.6; }
.plan-checklist li::before { content: '☐ '; }
.plan-checklist li.checked::before { content: '☑ '; }
.plan-meta { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.plan-meta span { margin-right: 12px; }
.plan-progress { font-size: 11px; color: var(--text-secondary); margin-left: 8px; }
.badge-app { font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 600; background: #374151; color: #d1d5db; }

/* Plan detail view */
.plan-detail { padding: 20px; }
.plan-detail-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.plan-detail-title { font-size: 20px; font-weight: 600; color: var(--text-primary); flex: 1; min-width: 200px; }
.plan-detail-back { background: none; border: 1px solid var(--border); color: var(--text-secondary); padding: 6px 12px; border-radius: var(--radius); cursor: pointer; font-size: 13px; font-family: inherit; }
.plan-detail-back:hover { color: var(--text-primary); border-color: var(--text-secondary); }
.plan-detail-meta { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; font-size: 13px; color: var(--text-secondary); }
.plan-detail-meta span { display: flex; align-items: center; gap: 4px; }
/* The burn row. Sits under the meta line so a ticket's cost is on the ticket.
   The three states are visually distinct on purpose — "not attributed" must never be mistaken
   for "cost nothing", which is why it is muted and italic rather than a number. */
.plan-detail-burn { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; padding: 8px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; }
.plan-detail-burn .plan-burn-label { font-weight: 600; color: var(--text-secondary); text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px; }
.plan-burn-loading { color: var(--text-secondary); font-style: italic; }
.plan-burn-measured .plan-burn-total { color: var(--text-primary); font-weight: 600; font-size: 15px; }
.plan-burn-measured .plan-burn-stat { color: var(--text-secondary); }
.plan-burn-measured .plan-burn-sub { color: var(--accent); }
.plan-burn-measured .plan-burn-agents { color: var(--text-secondary); margin-left: auto; }
.plan-burn-measured .plan-burn-window { color: var(--text-secondary); font-size: 11px; opacity: 0.75; width: 100%; }
/* Not a number, and styled so it cannot be read as one. */
.plan-burn-unattributed { border-style: dashed; }
.plan-burn-unattributed .plan-burn-none { color: var(--text-secondary); font-style: italic; }
.plan-burn-unattributed .plan-burn-why { color: var(--text-secondary); font-size: 11px; opacity: 0.8; }
.plan-burn-unknown { border-style: dashed; color: var(--text-secondary); font-style: italic; }
.plan-detail-description { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; color: var(--text-primary); font-size: 14px; line-height: 1.6; }
.plan-detail-status { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.plan-detail-status select { padding: 5px 10px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-primary); font-family: inherit; font-size: 13px; }
.plan-detail-checklist { list-style: none; padding: 0; margin: 0; }
.plan-detail-checklist li { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--text-primary); }
.plan-detail-checklist li:last-child { border-bottom: none; }
.plan-detail-checklist li.checked { color: var(--text-secondary); text-decoration: line-through; opacity: 0.7; }
.plan-detail-checklist input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); }
.plan-detail-checklist .checked-by { font-size: 11px; color: var(--text-secondary); margin-left: auto; }
.btn-delete-checklist-item { background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: var(--radius); opacity: 0; transition: opacity 0.15s, color 0.15s; }
.plan-detail-checklist li:hover .btn-delete-checklist-item { opacity: 1; }
.plan-detail-checklist li:focus-within .btn-delete-checklist-item { opacity: 1; }
@media (hover: none) { .btn-delete-checklist-item { opacity: 0.6; } }
.btn-delete-checklist-item:hover { color: #ef4444; background: rgba(239,68,68,0.1); }
/* Checklist item type badges */
.badge-item-type { font-size: 10px; padding: 1px 6px; border-radius: 8px; font-weight: 600; white-space: nowrap; }
.badge-task { background: #1e3a5f; color: #60a5fa; }
.badge-fix { background: #5f1e1e; color: #f87171; }
.badge-validation { background: #1e4d3a; color: #34d399; }
.checklist-type-select { font-size: 11px; padding: 1px 4px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-secondary); margin-left: auto; opacity: 0; transition: opacity 0.15s; cursor: pointer; }
.plan-detail-checklist li:hover .checklist-type-select,
.plan-detail-checklist li:focus-within .checklist-type-select { opacity: 1; }
@media (hover: none) { .checklist-type-select { opacity: 1; } }
/* fastTrack toggle */
.fasttrack-toggle { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-secondary); cursor: pointer; user-select: none; }
.fasttrack-toggle input { accent-color: var(--accent); cursor: pointer; }
/* Deliverable type, sat alongside the status control the gate fires on */
.deliverable-select { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-secondary); user-select: none; }
/* merge approval button */
.btn-approved { background: #065f46 !important; color: #34d399 !important; border-color: #34d399 !important; }
.plan-detail-section { margin-bottom: 16px; }
.plan-detail-section h3 { font-size: 14px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }

/* Plan hierarchy */
.plan-chevron { cursor: pointer; font-size: 10px; color: var(--text-secondary); transition: transform 0.15s; display: inline-block; margin-right: 4px; user-select: none; }
.plan-chevron.expanded { transform: rotate(90deg); }
.plan-chevron:hover { color: var(--text-primary); }
.plan-sub-progress { font-size: 11px; color: var(--accent); background: rgba(79,195,247,0.12); padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.plan-depth-1 { border-left: 3px solid rgba(79,195,247,0.3) !important; }
.plan-depth-2 { border-left: 3px solid rgba(79,195,247,0.15) !important; }
.plan-detail-breadcrumb { margin-bottom: 12px; font-size: 13px; color: var(--text-secondary); }
.plan-breadcrumb-link { color: var(--accent); text-decoration: none; cursor: pointer; }
.plan-breadcrumb-link:hover { text-decoration: underline; }
.plan-breadcrumb-sep { margin: 0 4px; color: var(--text-secondary); }
.plan-sub-plans-list { display: flex; flex-direction: column; gap: 4px; }
.plan-sub-plan-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: border-color 0.15s; }
.plan-sub-plan-row:hover { border-color: var(--accent); }
.plan-sub-plan-name { font-size: 13px; color: var(--text-primary); flex: 1; }

/* Plan attachments */
.plan-attachments { display: flex; flex-direction: column; gap: 4px; }
.plan-attachment-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); }
.plan-attachment-thumb-link { display: block; flex-shrink: 0; line-height: 0; }
.plan-attachment-thumb { display: block; max-width: 96px; max-height: 96px; object-fit: contain; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-input); }
.plan-attachment-glyph { font-size: 18px; line-height: 1; flex-shrink: 0; }
.plan-attachment-name { flex: 1; min-width: 0; font-size: 13px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.plan-attachment-name { color: var(--accent); text-decoration: none; }
a.plan-attachment-name:hover { text-decoration: underline; }
.plan-attachment-meta { font-size: 11px; color: var(--text-secondary); white-space: nowrap; }
.btn-delete-attachment { background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: var(--radius); opacity: 0; transition: opacity 0.15s, color 0.15s; }
.plan-attachment-row:hover .btn-delete-attachment,
.plan-attachment-row:focus-within .btn-delete-attachment { opacity: 1; }
@media (hover: none) { .btn-delete-attachment { opacity: 0.6; } }
.btn-delete-attachment:hover { color: #ef4444; background: rgba(239,68,68,0.1); }
.plan-attachment-add { display: flex; align-items: center; margin-top: 4px; }

/* === Config Form === */
.config-form {
    padding: 20px 16px;
    overflow-y: auto;
    flex: 1;
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Agent-class hint. Reads as ordinary help text while the class is
   unchanged, and turns warning-coloured the moment the select differs from the
   agent's stored class — so a class change is visible before Save, not after. */
.form-hint {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-secondary);
    text-transform: none;
    letter-spacing: normal;
}

.form-hint-warn {
    color: var(--warning);
    font-weight: 600;
}

/* Checkbox rows opt out of the uppercase block-label styling above. */
.form-group-check label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
    cursor: pointer;
}

.form-group-check input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--accent, #4a9eff);
}

.form-input {
    width: 100%;
    padding: 9px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    outline: none;
}

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

/* === Config Actions === */
.config-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

/* === Buttons === */
.btn {
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.btn:hover {
    border-color: var(--text-secondary);
}

.btn-sm {
    padding: 5px 12px;
    font-size: 12px;
}

.btn-accent {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
    font-weight: 600;
}

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

/* === Modal === */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal.hidden {
    display: none;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
}

.modal-content {
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    width: 90%;
    max-width: 400px;
}

.modal-content h3 {
    margin-bottom: 16px;
    font-size: 18px;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

/* === Utility === */
.hidden {
    display: none !important;
}

/* === Login Page === */
.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
}

.login-container {
    width: 100%;
    max-width: 400px;
    padding: 20px;
}

.login-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px 32px;
    text-align: center;
}

.login-title {
    font-size: 28px;
    color: var(--accent);
    margin-bottom: 8px;
}

.login-subtitle {
    color: var(--text-secondary);
    margin-bottom: 28px;
    font-size: 14px;
}

.login-error {
    background: rgba(239, 83, 80, 0.15);
    border: 1px solid var(--error);
    color: var(--error);
    border-radius: var(--radius);
    padding: 10px;
    margin-bottom: 16px;
    font-size: 13px;
}

.google-btn-wrapper {
    display: flex;
    justify-content: center;
}

.login-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 14px;
}

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

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

/* === Sidebar Overlay (mobile) === */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 49;
}

.sidebar-overlay.visible {
    display: block;
}

/* === Toast Notifications === */
#toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toast {
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 14px;
    color: #fff;
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.3s, transform 0.3s;
    max-width: 350px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.toast.show {
    opacity: 1;
    transform: translateX(0);
}

.toast-info { background: #1565c0; }
.toast-success { background: #2e7d32; }
.toast-error { background: #c62828; }
.toast-warning { background: #e65100; }

/* === Mobile Responsive ===
   Width alone is the wrong mobile signal: phones are 850-930px wide in landscape,
   so max-width:768px stops matching on rotation and drops the mobile layout. The
   second branch keeps landscape phones mobile (coarse pointer + short viewport)
   without catching desktop windows, whose pointers are fine. Must stay in lockstep
   with mobileQuery in js/agents.js. */
@media (max-width: 768px), ((pointer: coarse) and (max-height: 500px)) {
    .hamburger {
        display: flex;
    }

    .sidebar {
        position: fixed;
        top: var(--header-height);
        left: 0;
        bottom: 0;
        z-index: 50;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        width: 85%;
        max-width: 340px;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .btn-back {
        display: block;
    }

    .chat-msg {
        max-width: 90%;
    }

    .tab {
        padding: 10px 14px;
        font-size: 12px;
    }

    .filter-bar {
        padding: 8px 12px;
        gap: 6px;
    }

    .filter-btn {
        padding: 5px 8px;
        font-size: 11px;
    }

    .chat-input-area {
        padding: 8px 12px;
        gap: 6px;
    }

    .chat-input {
        font-size: 16px; /* prevents iOS auto-zoom on focus */
    }

    .btn-send {
        flex-shrink: 0;
        padding: 8px 12px;
    }

    .report-list {
        padding: 10px 12px;
    }

    .config-form {
        padding: 16px 12px;
    }
}

/* === Stats === */
.stats-cards {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    flex-wrap: wrap;
}

.stats-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
    min-width: 100px;
    text-align: center;
}

.stats-card-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--accent);
}

.stats-card-label {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-top: 4px;
}

/* Combo cards (Base / Cache) pack two numbers side-by-side and add a
 * category sublabel without growing the cards row height. Values use the
 * full 24px so the big numbers align horizontally with single-value cards
 * across the row; the sublabel is compressed vertically and dimmed so it
 * doesn't push the card taller. */
.stats-card-combo {
    min-width: 180px;
    padding: 12px 14px 4px;
}
.stats-card-combo-row {
    display: flex;
    gap: 18px;
    justify-content: center;
}
.stats-card-combo-cell {
    text-align: center;
}
.stats-card-combo .stats-card-label {
    margin-top: 2px;
}
.stats-card-sublabel {
    font-size: 9px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 1px;
    opacity: 0.5;
    text-align: center;
}

.stats-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 20px 20px;
    max-width: calc(100% - 40px);
}

.stats-table th,
.stats-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

.stats-table th {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
}

/* Stats date picker */
.stats-date-picker {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.stats-date-input {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 4px 8px;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 12px;
}

.stats-date-separator {
    color: var(--text-secondary);
    margin: 0 4px;
}

.stats-range-label {
    color: var(--text-secondary);
    font-size: 12px;
}

/* Stats history graph */
.stats-history-container {
    padding: 16px;
    border-top: 1px solid var(--border);
}

.stats-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.stats-history-header h3 {
    font-size: 14px;
    color: var(--text-primary);
}

.stats-history-totals {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: var(--text-secondary);
}

.stats-history-total {
    display: flex;
    align-items: center;
    gap: 4px;
}

.stats-history-scroll {
    overflow-x: auto;
    background: var(--bg-secondary);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    padding: 8px;
}

.stats-history-svg {
    display: block;
    min-width: 100%;
}

/* === Activity: scroll wrapper === */
.stats-scroll {
    flex: 1;
    /* Both axes so the 11-column table (incl. Cache Hit %) can scroll
       horizontally on narrow viewports. */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.stats-expander {
    display: inline-block;
    width: 1em;
    color: var(--text-secondary);
    user-select: none;
    transition: transform 0.15s;
}

/* Subagent drill-in — expandable from an activity row.
   Subagents have no agent key, so they can never be a row in the main table; this is
   the panel that opens underneath one. */
.subagent-toggle {
    cursor: pointer;
    font-size: 10px;
    vertical-align: middle;
}

.subagent-toggle:hover {
    color: var(--accent);
}

.subagent-toggle.expanded {
    transform: rotate(90deg);
}

.subagent-detail-row > td {
    padding: 0;
    background: var(--bg-secondary);
}

.subagent-panel {
    padding: 12px 16px 14px 34px;
}

.subagent-loading {
    color: var(--text-secondary);
    font-size: 12px;
    padding: 4px 0;
}

.subagent-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.subagent-table th {
    text-align: left;
    font-weight: 500;
    color: var(--text-secondary);
    padding: 4px 8px;
    border-bottom: 1px solid var(--border);
}

.subagent-table td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--border);
}

.subagent-table th:not(:first-child),
.subagent-table td:not(:first-child) {
    text-align: right;
    white-space: nowrap;
}

.subagent-name {
    max-width: 420px;
}

.subagent-type {
    display: inline-block;
    padding: 1px 6px;
    margin-right: 8px;
    border-radius: 3px;
    background: var(--bg-tertiary, var(--bg-primary));
    color: var(--text-secondary);
    font-size: 11px;
}

.subagent-desc {
    display: inline-block;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* The parent line and the total exist so the arithmetic is visible: the row above plus
   every part listed here equals the total. A breakdown that does not add up to its row
   looks authoritative while being unverifiable. */
.subagent-parent-row td {
    color: var(--text-secondary);
}

.subagent-subtotal-row td,
.subagent-total-row td {
    border-top: 1px solid var(--border);
    border-bottom: none;
}

.subagent-total-row td {
    font-weight: 600;
}

.subagent-notice {
    font-size: 12px;
    color: var(--text-secondary);
    padding: 6px 8px;
    margin-bottom: 8px;
    border-left: 2px solid var(--border);
    background: var(--bg-primary);
}

.subagent-notice:last-child {
    margin-bottom: 0;
}

/* A hook-sourced turn cannot see subagents, and a missing breakdown is not a zero.
   Both are warnings rather than quiet greys so they are not read as "none". */
.subagent-notice-warn {
    border-left-color: var(--warning);
}

.subagent-notice-error {
    border-left-color: var(--error);
    color: var(--error);
}

.subagent-notice-muted {
    border-left-color: var(--border);
}

/* Activity graph — metric / breakdown pill toggles */
.stats-graph-controls {
    display: flex;
    gap: 12px;
    padding: 8px 12px 0;
    flex-wrap: wrap;
}

.stats-metric-toggle,
.stats-breakdown-toggle {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.stats-metric-toggle[hidden],
.stats-breakdown-toggle[hidden] {
    display: none;
}

.stats-metric-toggle button,
.stats-breakdown-toggle button {
    background: transparent;
    color: var(--text-secondary);
    border: none;
    padding: 4px 12px;
    font-size: 12px;
    cursor: pointer;
    border-right: 1px solid var(--border);
}

.stats-metric-toggle button:last-child,
.stats-breakdown-toggle button:last-child {
    border-right: none;
}

.stats-metric-toggle button:hover,
.stats-breakdown-toggle button:hover {
    background: var(--bg-secondary);
}

.stats-metric-toggle button:focus-visible,
.stats-breakdown-toggle button:focus-visible {
    /* box-shadow (not outline) so the ring isn't clipped by the
       parent container's overflow: hidden. */
    outline: none;
    box-shadow: inset 0 0 0 2px var(--accent);
}

.stats-metric-toggle button.active,
.stats-breakdown-toggle button.active {
    background: var(--accent);
    color: var(--bg-primary);
    font-weight: 600;
}

.stats-metric-toggle button.active:focus-visible,
.stats-breakdown-toggle button.active:focus-visible {
    /* The inactive focus ring uses var(--accent) inset, which would be
       invisible against the active background (also var(--accent)). Swap to
       a bg-primary inset so keyboard focus stays visible on the active pill. */
    outline: none;
    box-shadow: inset 0 0 0 2px var(--bg-primary);
}

/* Windows high-contrast / forced-colors ignores box-shadow, so fall back to
   a system-painted outline that respects the user's forced palette. */
@media (forced-colors: active) {
    .stats-metric-toggle button:focus-visible,
    .stats-breakdown-toggle button:focus-visible,
    .stats-metric-toggle button.active:focus-visible,
    .stats-breakdown-toggle button.active:focus-visible {
        outline: 2px solid CanvasText;
        outline-offset: 2px;
        box-shadow: none;
    }
}

/* Cron scheduler - last run & history */
.cron-last-run {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.cron-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.cron-card.builtin {
    border-left: 3px solid var(--text-secondary);
    cursor: default;
}

.cron-card.builtin:hover {
    border-color: var(--border);
    border-left-color: var(--text-secondary);
}

.cron-status-badge.ok {
    background: rgba(46, 160, 67, 0.15);
    color: #3fb950;
}

.cron-status-badge.fail {
    background: rgba(248, 81, 73, 0.15);
    color: #f85149;
}

.cron-history-panel {
    border-top: 1px solid var(--border);
    padding: 8px 12px;
    max-height: 300px;
    overflow-y: auto;
}

.cron-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.cron-history-table th,
.cron-history-table td {
    padding: 4px 8px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.cron-history-table th {
    color: var(--text-secondary);
    font-weight: 600;
}

/* Projects admin view */
.projects-modules { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 4px; align-items: center; }
.projects-module-tag { display: inline-flex; align-items: center; gap: 4px; background: #374151; color: #d1d5db; padding: 3px 10px; border-radius: 12px; font-size: 12px; }
.projects-module-remove { background: none; border: none; color: #9ca3af; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 0 0 2px; }
.projects-module-remove:hover { color: #ef4444; }
.projects-add-module-btn { background: none; border: 1px dashed #4b5563; color: #9ca3af; padding: 3px 10px; border-radius: 12px; font-size: 12px; cursor: pointer; }
.projects-add-module-btn:hover { border-color: #6b7280; color: #d1d5db; }
.projects-delete-btn { background: none; border: none; color: #9ca3af; cursor: pointer; font-size: 16px; padding: 0 4px; margin-left: auto; }
.projects-delete-btn:hover { color: #ef4444; }

/* Rendered-markdown elements (specs, plan descriptions, chat) */
.md-h { margin: 14px 0 6px; line-height: 1.3; }
h1.md-h { font-size: 1.35rem; }
h2.md-h { font-size: 1.15rem; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
h3.md-h { font-size: 1rem; }
h4.md-h, h5.md-h, h6.md-h { font-size: 0.9rem; color: var(--text-secondary); }
.md-hr { border: none; border-top: 1px solid var(--border); margin: 12px 0; }
.md-table { border-collapse: collapse; margin: 8px 0; font-size: 0.85rem; max-width: 100%; display: block; overflow-x: auto; }
.md-table th, .md-table td { padding: 4px 10px; text-align: left; border: 1px solid var(--border); vertical-align: top; }
.md-table th { color: var(--text-secondary); font-weight: 600; background: var(--bg-card); }
.md-list { margin: 6px 0 6px 22px; }
.md-list li { margin: 3px 0; }
.md-quote { border-left: 3px solid var(--border); margin: 8px 0; padding: 4px 12px; color: var(--text-secondary); }
.md-pre { background: rgba(0, 0, 0, 0.3); padding: 10px; border-radius: var(--radius); overflow-x: auto; margin: 8px 0; font-size: 12px; line-height: 1.4; }
.md-pre code { background: none; padding: 0; }

/* === Plan revision history + shaping log === */
.plan-fork-origin { color: var(--accent); cursor: pointer; font-size: 12px; }
.plan-fork-origin:hover { text-decoration: underline; }

.plan-log-add { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.plan-log-add select, .plan-log-add input[type="text"] { background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius); padding: 5px 8px; font-size: 12px; }
.plan-log-add input[type="text"] { flex: 1; min-width: 220px; }

.plan-open-questions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.plan-open-questions-label { color: var(--warning); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.open-question-chip { background: rgba(255, 167, 38, 0.12); border: 1px solid var(--warning); color: var(--warning); border-radius: 10px; padding: 2px 10px; font-size: 11px; }

.plan-history-body { display: flex; flex-direction: column; gap: 6px; }
.plan-history-empty { color: var(--text-secondary); font-size: 12px; padding: 8px 0; }
.plan-history-row { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); padding: 7px 10px; }
.plan-history-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; }
.plan-history-rev { font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.plan-history-summary { color: var(--text-primary); flex: 1; min-width: 160px; }
.plan-history-actor { color: var(--accent); font-size: 11px; }
.plan-history-time { color: var(--text-secondary); font-size: 11px; white-space: nowrap; }

.plan-changekind { font-size: 9px; padding: 1px 7px; border-radius: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.plan-changekind.create { background: #059669; color: #fff; }
.plan-changekind.fields { background: #4b5563; color: #fff; }
.plan-changekind.status { background: #7c3aed; color: #fff; }
.plan-changekind.checklist { background: #0891b2; color: #fff; }
.plan-changekind.log { background: #d97706; color: #fff; }

.plan-changekind.fork { background: #ab47bc; color: #fff; }
/* A reparent is the one change that moves a ticket's identity — it needs a
   pill like every other kind, and a distinct one from fork, which it is often confused
   with. Teal-blue, adjacent to fork's purple without reading as the same event. */
.plan-changekind.reparent { background: #0284c7; color: #fff; }
.plan-changekind.delete { background: #dc2626; color: #fff; }

.plan-log-entries { list-style: none; margin: 6px 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.plan-log-entry { display: flex; gap: 8px; align-items: baseline; font-size: 12px; flex-wrap: wrap; }
.plan-log-text { color: var(--text-primary); flex: 1; min-width: 180px; }
.plan-log-actor { color: var(--text-secondary); font-size: 11px; }
.plan-log-extra { color: var(--text-secondary); font-size: 11px; }
.plan-log-extra.open { color: var(--warning); font-weight: 600; }
.plan-log-linked { color: var(--accent); }

.plan-log-type { font-size: 9px; padding: 1px 7px; border-radius: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.plan-log-type.question { background: rgba(255, 167, 38, 0.18); color: var(--warning); }
.plan-log-type.answer { background: rgba(102, 187, 106, 0.18); color: var(--success); }
.plan-log-type.decision { background: rgba(79, 195, 247, 0.18); color: var(--accent); }
.plan-log-type.deferral { background: rgba(171, 71, 188, 0.2); color: #ce93d8; }
.plan-log-type.note { background: rgba(160, 160, 160, 0.15); color: var(--text-secondary); }
/* */
.plan-log-type.correction { background: rgba(239, 83, 80, 0.18); color: #ef9a9a; }
.plan-log-type.evidence { background: rgba(38, 198, 218, 0.18); color: #80deea; }
.plan-log-type.reclassification { background: rgba(255, 167, 38, 0.16); color: #ffcc80; }
/* Deliberately quieter than a type badge — it annotates the badge beside it. */
.plan-log-retyped { background: none; border: 1px dashed var(--border); color: var(--text-secondary); font-size: 10px; opacity: 0.8; }

.btn-rev-diff { background: none; border: 1px solid var(--border); color: var(--text-secondary); border-radius: var(--radius); padding: 1px 8px; font-size: 11px; cursor: pointer; }
.btn-rev-diff:hover { color: var(--accent); border-color: var(--accent); }
.plan-history-diff { margin-top: 6px; padding: 6px 8px; background: rgba(0, 0, 0, 0.25); border-radius: var(--radius); font-size: 11px; display: flex; flex-direction: column; gap: 3px; }
.rev-diff-field { line-height: 1.5; overflow-wrap: break-word; }
.rev-diff-name { color: var(--accent); font-weight: 600; margin-right: 4px; }
.rev-diff-from { color: var(--error); text-decoration: line-through; }
.rev-diff-to { color: var(--success); }

/* === Review Findings === */
.findings-select, .findings-search {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 12px;
    padding: 4px 8px;
}
.findings-search { flex: 1; min-width: 160px; }
.findings-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 12px;
    color: var(--text-secondary);
}
.findings-stat b { color: var(--text-primary); }
.findings-stat.severity-critical b { color: var(--error); }
.findings-stat.severity-major b { color: var(--warning); }
.findings-stat-sep { border-left: 1px solid var(--border); align-self: stretch; }
.findings-clusters-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 6px 0 4px;
}
.findings-cluster-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 4px;
    font-size: 12px;
    cursor: pointer;
}
.findings-cluster-row:hover { border-color: var(--accent); }
.findings-cluster-count { color: var(--accent); font-weight: 600; min-width: 24px; }
.findings-cluster-pattern { flex: 1; overflow-wrap: anywhere; }
.findings-cluster-cats { color: var(--text-secondary); font-size: 11px; }
.findings-row {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 10px;
    margin-bottom: 6px;
    font-size: 12px;
}
.findings-row.compact { background: none; padding: 6px 8px; }
.findings-row-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.badge.finding-severity { background: var(--text-secondary); color: #000; }
.badge.finding-severity.critical { background: var(--error); }
.badge.finding-severity.major { background: var(--warning); }
.badge.finding-severity.minor { background: var(--text-secondary); }
.badge.finding-category { background: var(--bg-input); color: var(--accent); }
.findings-lens, .findings-plan { color: var(--text-secondary); }
.findings-outcome.fixed { color: var(--success); }
.findings-outcome.skipped { color: var(--warning); }
.findings-outcome.no_change_needed { color: var(--text-secondary); }
.findings-outcome.open { color: var(--error); font-weight: 600; }
.findings-meta { margin-left: auto; color: var(--text-secondary); font-size: 11px; }
.findings-anchor { color: var(--accent); font-size: 11px; overflow-wrap: anywhere; margin-bottom: 3px; }
.findings-summary-text { line-height: 1.5; overflow-wrap: anywhere; }
.findings-pattern { color: var(--text-secondary); font-style: italic; font-size: 11px; margin-top: 3px; overflow-wrap: anywhere; }
.findings-empty { color: var(--text-secondary); padding: 12px 4px; font-size: 12px; }

/* === Dashboard additions: header version, agent filter chips, owner, key box === */
.server-version { font-size: 11px; font-weight: 400; color: var(--text-secondary); margin-left: 4px; }
.agent-filter-bar { flex-direction: column; align-items: stretch; }
.filter-group.filter-group-wrap { flex-wrap: wrap; gap: 4px; }
.agent-filter-bar .filter-btn { padding: 2px 8px; font-size: 11px; }
.agent-owner { font-size: 11px; color: var(--text-secondary); margin-left: 8px; }
.agent-header-actions .btn { margin-left: 6px; }
.key-box { font-size: 12px; word-break: break-all; resize: none; }
.form-input-mono { font-size: 12px; }
.form-hint.form-hint-warn { margin-bottom: 10px; }

/* === Tables for configs, instances, work, users, identities === */
.section-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin: 14px 0 6px;
}
.data-table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th,
.data-table td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.data-table th { color: var(--text-secondary); font-weight: 600; font-size: 11px; text-transform: uppercase; white-space: nowrap; }
.data-table code { font-size: 12px; color: var(--accent); }
.cell-sub { font-size: 11px; color: var(--text-secondary); overflow-wrap: anywhere; }
.cell-actions { white-space: nowrap; text-align: right; }
.cell-actions .btn + .btn { margin-left: 4px; }
.empty-note { padding: 16px; color: var(--text-secondary); font-size: 13px; }
.status-badge { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.badge-on { background: rgba(102, 187, 106, 0.15); color: var(--success); }
.badge-off { background: rgba(117, 117, 117, 0.2); color: var(--text-secondary); }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-bottom: 12px; }
.inline-form .form-input { flex: 1 1 180px; width: auto; }
.inline-form textarea.form-input { flex-basis: 100%; }
.stats-rollups { padding: 0 20px 20px; }
.stats-rollups .stats-table { margin: 0 0 16px; max-width: 100%; }

/* === Cloud config dialog === */
.modal-content.modal-content-wide { max-width: 760px; max-height: 90vh; overflow-y: auto; }
.form-row { display: flex; flex-wrap: wrap; gap: 12px; }
.form-row .form-group { flex: 1 1 180px; }

/* === Global chat === */
.global-chat { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* Destructive actions: delete, revoke, stop, disable */
.btn-danger { color: var(--error); border-color: rgba(239, 83, 80, 0.5); }
.btn-danger:hover { background: rgba(239, 83, 80, 0.12); border-color: var(--error); }