/* Cockpit — Main Stylesheet
   Dark mode default. System font stack. Dense but not cluttered.
   No animations except loading. Work tool, not a showcase. */

:root,
[data-theme="dark"] {
    --bg-primary: #1a1b1e;
    --bg-secondary: #25262b;
    --bg-tertiary: #2c2e33;
    --bg-input: #1e1f23;
    --text-primary: #c1c2c5;
    --text-secondary: #909296;
    --text-bright: #e4e5e9;
    --text-muted: #5c5f66;
    --accent: #4c6ef5;
    --accent-hover: #5c7cfa;
    --accent-dim: #364fc7;
    --green: #40c057;
    --green-dim: #2b8a3e;
    --yellow: #fab005;
    --yellow-dim: #e67700;
    --red: #fa5252;
    --red-dim: #c92a2a;
    --border: #373a40;
    --border-light: #4a4d54;
    --sidebar-w: 240px;
    --topbar-h: 48px;
    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    --radius: 6px;
    --shadow: 0 2px 8px rgba(0,0,0,0.3);

    /* Compatibility aliases — much of the codebase (legacy + new)
       references --card / --bg / --text / --card-hover which were
       never defined here. Aliasing them to the real theme tokens
       fixes both themes at once: components that fell through to
       hardcoded dark fallbacks (and looked black-on-light) now pick
       up the right colour automatically. */
    --bg: var(--bg-primary);
    --card: var(--bg-secondary);
    --card-hover: var(--bg-tertiary);
    --text: var(--text-primary);

    /* Wave 1.a : density chip mode tint.
       The density chip's mode-specific border tint used to read from
       --accent, the same token the active sidebar link uses. The two
       cues collided. This dedicated token decouples the chip tint
       from the navigation accent. Browsers without color-mix support
       fall back to the static hex below (muted blue close to the
       default --accent in dark mode). */
    --density-mode-accent: #5c7cfa;
    --density-mode-accent: color-mix(in oklch, var(--accent) 70%, transparent 30%);
}

[data-theme="light"] {
    --bg-primary: #f5f5f7;
    --bg-secondary: #ffffff;
    --bg-tertiary: #eeeef0;
    --bg-input: #ffffff;
    --text-primary: #3c3c43;
    --text-secondary: #6e6e73;
    --text-bright: #1d1d1f;
    --text-muted: #aeaeb2;
    --accent: #4c6ef5;
    --accent-hover: #3b5bdb;
    --accent-dim: #dbe4ff;
    --green: #2b8a3e;
    --green-dim: #d3f9d8;
    --yellow: #e67700;
    --yellow-dim: #fff3bf;
    --red: #c92a2a;
    --red-dim: #ffe0e0;
    --border: #d1d1d6;
    --border-light: #e5e5ea;
    --shadow: 0 2px 8px rgba(0,0,0,0.08);
    /* Same aliases — light theme picks up its own bg-* / text-*. */
    --bg: var(--bg-primary);
    --card: var(--bg-secondary);
    --card-hover: var(--bg-tertiary);
    --text: var(--text-primary);

    /* Wave 1.a : density chip mode tint, light theme variant. Same
       reasoning as the dark-theme block. */
    --density-mode-accent: #4c6ef5;
    --density-mode-accent: color-mix(in oklch, var(--accent) 70%, transparent 30%);
}

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

body {
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg-primary);
    min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* ---- AUTH SCREENS ---- */

.auth-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
}

.auth-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 40px;
    width: 100%;
    max-width: 400px;
}

.auth-box h1 {
    color: var(--text-bright);
    font-size: 24px;
    margin-bottom: 8px;
}

.auth-box p {
    color: var(--text-secondary);
    margin-bottom: 24px;
}

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

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

.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-bright);
    font-family: var(--font);
    font-size: 14px;
    outline: none;
}

.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: var(--accent);
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 14px;
    font-family: var(--font);
    cursor: pointer;
    width: 100%;
    text-align: center;
}

.btn:hover { background: var(--accent-hover); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-secondary {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    color: var(--text-primary);
}
.btn-secondary:hover { background: var(--border); }

.btn-small {
    padding: 6px 14px;
    font-size: 13px;
    width: auto;
}

.btn-danger { background: var(--red-dim); }
.btn-danger:hover { background: var(--red); }

.error-msg,
.error {
    /* `.error` is used in 40+ spots in admin.html as a synonym for
       error-msg. Aliasing avoids touching every call site. */
    color: var(--red);
    font-size: 13px;
    margin-top: 8px;
}

/* ---- LAYOUT ---- */

.layout {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: var(--sidebar-w);
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 10;
}

.sidebar-brand {
    padding: 14px 20px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-bright);
    border-bottom: 1px solid var(--border);
    letter-spacing: -0.5px;
}

/* Two-column nav so all entries fit on a 720p screen without scroll
   even after we added Decisions / Captures / Users. The grid scales
   nicely to 1 col on narrow viewports (mobile already gets the
   off-canvas drawer via the @media query below). The .active style
   uses a left-edge accent only — switched from border (which only
   half-shows in a grid cell) to box-shadow inset so the indicator
   appears properly inside the cell padding. */
.sidebar-nav {
    flex: 1;
    padding: 6px 4px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    align-content: start;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    color: var(--text-secondary);
    font-size: 13px;
    border-radius: 4px;
    transition: none;
    text-decoration: none;
}

.sidebar-nav a:hover { color: var(--text-bright); background: var(--bg-tertiary); }
.sidebar-nav a.active {
    color: var(--text-bright);
    background: var(--bg-tertiary);
    box-shadow: inset 3px 0 0 var(--accent);
    padding-left: 13px;
}

/* === [Audit Wave 2 / sidebar] === START === ===
   Plain language: the sidebar reshape (audit Wave 2) replaces the flat
   2-column grid with a single column of seven collapsible groups.
   Each group has a header (chevron + label) and a body (Tier-1 + Tier-2
   entries). Tier-2 entries show a 2-px vertical guide line on the left
   so the parent / child relationship reads at a glance, replacing the
   '\21B3' arrow leader from the old design (finding T-05).

   The .is-collapsed state is the single source of truth for whether
   the chevron is rotated and the body is hidden ; toggling it from
   JS (handleSidebarGroupToggle) cascades through the CSS without the
   sidebar needing a re-render. */
.sidebar-nav--grouped {
    /* Override the original 2-column grid : the new structure is a
       vertical stack of group cards, the grid would scramble it. */
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 4px;
}

.sidebar-group {
    display: flex;
    flex-direction: column;
}

.sidebar-group-header {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 6px 10px;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    text-align: left;
    border-radius: 4px;
}
.sidebar-group-header:hover {
    color: var(--text-bright);
    background: var(--bg-tertiary);
}
.sidebar-group-chevron {
    display: inline-block;
    font-size: 10px;
    transition: transform 120ms ease;
    transform: rotate(90deg);
    color: var(--text-muted);
    width: 10px;
    text-align: center;
}
.sidebar-group.is-collapsed .sidebar-group-chevron {
    transform: rotate(0deg);
}
.sidebar-group-label {
    flex: 1;
}
.sidebar-group-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 2px 0 6px;
    overflow: hidden;
    /* CSS-only height transition would need a fixed max-height to
       animate ; the simple show/hide via display is acceptable here
       since the bodies are small lists. */
}
.sidebar-group.is-collapsed .sidebar-group-body {
    display: none;
}

/* Sidebar links inside the new grouped structure.
   Tier-1 = top-level entry ; Tier-2 = sub-entry with the indent +
   guide-line treatment. */
.sidebar-nav--grouped .sidebar-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    color: var(--text-secondary);
    font-size: 13px;
    text-decoration: none;
    border-radius: 4px;
    /* Reset any inline padding-left from the legacy '\21B3' style. */
    position: relative;
}
.sidebar-nav--grouped .sidebar-link:hover {
    color: var(--text-bright);
    background: var(--bg-tertiary);
}
.sidebar-nav--grouped .sidebar-link.is-active {
    color: var(--text-bright);
    background: var(--bg-tertiary);
    box-shadow: inset 3px 0 0 var(--accent);
}
/* Tier-2 chevron + 2-px vertical guide line in the left margin.
   The chevron is the ::before pseudo and the guide line is a
   ::after pseudo so the markup stays clean (Rule G : no markup
   noise for visual chrome). */
.sidebar-nav--grouped .sidebar-link--tier-2 {
    padding-left: 28px;
    font-size: 12px;
    color: var(--text-muted);
}
.sidebar-nav--grouped .sidebar-link--tier-2::before {
    content: '\203A'; /* unicode single right-pointing angle quotation */
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: var(--text-muted);
}
.sidebar-nav--grouped .sidebar-link--tier-2::after {
    content: '';
    position: absolute;
    left: 12px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border);
    border-radius: 1px;
}
.sidebar-nav--grouped .sidebar-link--tier-2:hover {
    color: var(--text-bright);
}
.sidebar-nav--grouped .sidebar-link--tier-2.is-active {
    color: var(--text-bright);
    box-shadow: inset 3px 0 0 var(--accent);
}

/* === [Sidebar follow-up 2026-04-29 evening] === START === ===
   Plain language: a small two-button pill in the sidebar footer
   flips every sidebar label between French and English. The active
   side gets a filled background; the inactive side stays muted.
   The pill is intentionally compact so it does not compete with
   the Sign-out link beside it. */
.sidebar-lang-pill {
    display: inline-flex;
    gap: 0;
    margin-top: 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
    background: var(--bg-tertiary);
}
.sidebar-lang-btn {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 3px 10px;
    cursor: pointer;
}
.sidebar-lang-btn:hover {
    color: var(--text-bright);
}
.sidebar-lang-btn.is-active {
    background: var(--accent, #c96a44);
    color: #fff;
}
/* === [Sidebar follow-up 2026-04-29 evening] === END === === */
/* === [Audit Wave 2 / sidebar] === END === === */

.sidebar-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-muted);
}

.main {
    margin-left: var(--sidebar-w);
    flex: 1;
    min-height: 100vh;
}

.topbar {
    height: var(--topbar-h);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: 5;
}

.topbar-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-bright);
    /* Was flex:1 — title pushed everything to the right.
       Now it shrinks naturally so the search input can claim the
       middle of the topbar. */
    flex: 0 0 auto;
    margin-right: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 30%;
}

/* Topbar global search affordance. Click or `/` opens the existing
   Cmd+K palette. Designed to feel like the centre-of-page search bar
   in tools like Linear/Superhuman: subtle border, kbd hint visible. */
.topbar-search {
    flex: 1 1 auto;
    max-width: 480px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 10px;
    color: var(--text-muted);
    font-size: 13px;
    cursor: text;
    transition: border-color 100ms ease, color 100ms ease;
}
.topbar-search:hover { border-color: var(--accent); color: var(--text-primary); }
.topbar-search-icon { font-size: 12px; opacity: 0.7; }
.topbar-search-text { flex: 1; text-align: left; }
.topbar-search-kbd {
    font-family: var(--mono);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 10px;
    color: var(--text-muted);
}

.topbar-actions {
    /* Visual grouping: a faint divider before the action cluster
       separates "title region" from "tools region". The 6px gap
       between buttons reads as a tight tool palette rather than a
       loose row. Pseudo-element provides the divider line so we
       don't need extra DOM. */
    display: flex;
    gap: 6px;
    align-items: center;
}
.topbar-actions::before {
    content: "";
    width: 1px;
    height: 22px;
    background: var(--border);
    margin-right: 6px;
    opacity: 0.6;
}

.theme-toggle {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 5px 8px;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
}
.theme-toggle:hover { color: var(--text-bright); border-color: var(--border-light); }

.content {
    padding: 24px;
    max-width: 2400px;
}

/* ---- PORTFOLIO VIEW ---- */

.company-group {
    margin-bottom: 32px;
}

.company-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}

.project-row {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: var(--radius);
    cursor: pointer;
    gap: 12px;
}

.project-row:hover { background: var(--bg-tertiary); }

.health-dot {
    /* Bumped from 10x10 → 12x12 + 2px margin so the click target
       is closer to recommended ~24px without changing the visual
       weight too much. Hover ring tells the user it's actionable. */
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    margin: 0 2px;
    transition: box-shadow 100ms ease, transform 100ms ease;
}
.health-dot:hover {
    transform: scale(1.2);
    box-shadow: 0 0 0 3px var(--bg-tertiary);
}

.health-dot.green { background: var(--green); }
.health-dot.yellow { background: var(--yellow); }
.health-dot.red { background: var(--red); }
.health-dot.grey { background: var(--text-muted); }

.project-name {
    font-weight: 500;
    color: var(--text-bright);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-meta {
    color: var(--text-secondary);
    font-size: 13px;
    white-space: nowrap;
}

/* Mobile truncation: ensure project-name ellipsises before the row
   wraps, and push meta fields to the next line first (audit 1.3). */
@media (max-width: 1100px) {
    .project-name { min-width: 120px; }
    .project-meta { order: -1; }
}

.project-type {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

/* ---- PROJECT DETAIL ---- */

.project-header {
    margin-bottom: 24px;
}

.project-header h2 {
    color: var(--text-bright);
    font-size: 22px;
    margin-bottom: 4px;
}

.project-header .meta {
    color: var(--text-secondary);
    font-size: 13px;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

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

.info-card .label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.info-card .value {
    color: var(--text-bright);
    font-size: 15px;
    font-weight: 500;
}

/* ---- TIMELINE ---- */

.timeline-list {
    list-style: none;
}

.timeline-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 12px;
}

.timeline-item:last-child { border-bottom: none; }

.timeline-date {
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
    min-width: 80px;
}

.timeline-content .title {
    color: var(--text-bright);
    font-weight: 500;
}

.timeline-content .narrative {
    color: var(--text-secondary);
    font-size: 13px;
    margin-top: 2px;
}

/* ---- MODALS ---- */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.modal {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px;
    width: 100%;
    max-width: 500px;
    box-shadow: var(--shadow);
}

.modal h2 {
    color: var(--text-bright);
    margin-bottom: 20px;
    font-size: 18px;
}

/* Shared modal title style (audit 5.2). Batch B will migrate existing
   <h3>/<h2> headers in modal bodies to <h2 class="modal-title">. */
.modal-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-bright);
    margin: 0 0 12px 0;
}

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

/* Normalize Cancel/Save pairs so heights match and nothing stretches
   full-width inside modal footers (audit 1.4). Scoped to .modal-actions
   to preserve the global .btn / .btn-small sizes elsewhere. */
.modal-actions .btn,
.modal-actions .btn-small {
    height: 36px;
    padding: 8px 16px;
    width: auto;
}

/* ---- EMPTY STATES ---- */

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}

.empty-state h3 {
    color: var(--text-primary);
    margin-bottom: 8px;
}

/* ---- UTILS ---- */

.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-8 { gap: 8px; }
.gap-16 { gap: 16px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mt-16 { margin-top: 16px; }
.text-muted { color: var(--text-secondary); }
.text-small { font-size: 13px; }

/* ---- TABS ---- */

.tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
}

.tab {
    padding: 10px 20px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

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

/* ---- FORGE CHAT ---- */

.forge-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 220px);
    min-height: 400px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.forge-round-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
#forge-session-history {
    border-bottom: 1px solid var(--border);
    max-height: 200px;
    overflow-y: auto;
    background: var(--bg-secondary);
}

.round-label {
    color: var(--text-bright);
    font-weight: 600;
}

.round-dots {
    display: flex;
    gap: 6px;
}

.round-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    background: var(--bg-primary);
    color: var(--text-muted);
    border: 2px solid var(--border);
}

.round-dot.current {
    border-color: var(--accent);
    color: var(--accent);
}

.round-dot.satisfied {
    background: var(--green-dim);
    border-color: var(--green);
    color: #fff;
}

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

.forge-status {
    color: var(--text-muted);
    font-size: 13px;
    font-style: italic;
    padding: 8px 0;
}

.forge-message {
    max-width: 85%;
}

.forge-message.user {
    align-self: flex-end;
}

.forge-message.assistant {
    align-self: flex-start;
}

.forge-message.system {
    align-self: center;
    color: var(--text-muted);
    font-size: 13px;
    font-style: italic;
    background: var(--bg-tertiary);
    padding: 8px 16px;
    border-radius: var(--radius);
}

.forge-message-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    color: var(--text-muted);
}

.forge-message.user .forge-message-label { text-align: right; }

.forge-message-content {
    padding: 12px 16px;
    border-radius: var(--radius);
    font-size: 14px;
    line-height: 1.6;
}

.forge-message.user .forge-message-content {
    background: var(--accent-dim);
    color: var(--text-bright);
    border-bottom-right-radius: 2px;
    /* Preserve newlines and paragraph breaks the user typed into their answer.
       Without this, multi-line answers collapse into one cramped line — a
       top-3 complaint from real-user testing. */
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.forge-message.assistant .forge-message-content {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-bottom-left-radius: 2px;
}

/* Markdown elements inside forge messages */
.forge-message-content strong { color: var(--text-bright); }
.forge-message-content code {
    background: var(--bg-primary);
    padding: 1px 5px;
    border-radius: 3px;
    font-family: var(--mono);
    font-size: 13px;
}
.forge-message-content pre {
    background: var(--bg-primary);
    padding: 12px;
    border-radius: var(--radius);
    overflow-x: auto;
    margin: 8px 0;
}
.forge-message-content pre code {
    background: none;
    padding: 0;
}

.forge-input-area {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background: var(--bg-tertiary);
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

/* Drag-and-drop highlight: user is dragging files over the input area. */
.forge-input-area.drag-over {
    background: var(--accent-dim);
    box-shadow: inset 0 0 0 2px var(--accent);
}

.forge-attach-btn {
    flex-shrink: 0;
    height: 40px;
    width: 40px;
    padding: 0;
    font-size: 18px;
    line-height: 40px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s ease;
}
.forge-attach-btn:hover { background: var(--bg-secondary); color: var(--text-bright); }
.forge-attach-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Thumbnails + chips above the input area, one per pending attachment. */
.forge-attachments-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 16px;
    border-top: 1px solid var(--border);
    background: var(--bg-tertiary);
}

.forge-attach-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 4px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    max-width: 280px;
}

.forge-attach-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    background: var(--bg-secondary);
    flex-shrink: 0;
}

.forge-attach-thumb.forge-attach-doc {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.forge-attach-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.forge-attach-name {
    font-size: 12px;
    color: var(--text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.forge-attach-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0 4px;
}
.forge-attach-remove:hover { color: var(--color-danger); }

/* Session-wide attachments strip — persists across turns, collapsible.
   Shows 📎 N/20 count + expand-to-see-all list of every file uploaded
   this session. Real-user need: after turn 5 the user needs to see
   "yes, the interviewer still has access to the product photo I uploaded
   on turn 1" — this strip is the visual confirmation. */
.forge-accum-strip {
    flex-direction: column;
    padding: 6px 16px;
    gap: 6px;
    border-top: 1px solid var(--border);
    background: var(--bg-tertiary);
    max-height: 280px;
    overflow: auto;
}
.forge-accum-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.forge-accum-summary {
    font-size: 12px;
    color: var(--text-bright);
    font-weight: 600;
    letter-spacing: 0.2px;
}
.forge-accum-toggle {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: var(--radius);
}
.forge-accum-toggle:hover { color: var(--text-bright); background: var(--bg-primary); }
.forge-accum-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.forge-accum-item {
    padding: 6px 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.forge-accum-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}
.forge-accum-name {
    font-size: 12px;
    color: var(--text-bright);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
}
.forge-accum-meta {
    flex-shrink: 0;
}
.forge-accum-preview {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* Attachment chips shown inline in the user's chat bubble after send. */
.forge-message-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}

.forge-message-attach-chip {
    font-size: 11px;
    padding: 2px 6px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text-muted);
}

.forge-input-area textarea {
    flex: 1;
    padding: 10px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-bright);
    font-family: var(--font);
    font-size: 14px;
    resize: none;
    outline: none;
}

.forge-input-area textarea:focus { border-color: var(--accent); }
.forge-input-area textarea:disabled { opacity: 0.5; }

.forge-input-area .btn {
    width: auto;
    min-width: 80px;
    align-self: flex-end;
}

/* Forge language picker (shown before interview starts) */
.forge-lang-picker {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 48px 24px;
}

/* Assembly button shown when all forge rounds are complete */
.forge-assemble-area {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    margin-top: 8px;
    background: var(--bg-tertiary);
    border-radius: var(--radius);
    border: 1px solid var(--accent-dim);
}

.forge-assemble-area .btn {
    width: auto;
    min-width: 160px;
}

/* ---- DOCUMENT VIEW ---- */

.document-view {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px 40px;
    max-width: 900px;
    line-height: 1.7;
    color: var(--text-primary);
}

.document-view h1 {
    color: var(--text-bright);
    font-size: 24px;
    margin: 32px 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.document-view h1:first-child { margin-top: 0; }

.document-view h2 {
    color: var(--text-bright);
    font-size: 18px;
    margin: 28px 0 12px 0;
}

.document-view h3 {
    color: var(--text-bright);
    font-size: 15px;
    margin: 20px 0 8px 0;
}

.document-view p { margin: 8px 0; }
.document-view hr { border: none; border-top: 1px solid var(--border); margin: 24px 0; }

.document-view ul {
    margin: 8px 0;
    padding-left: 24px;
}

.document-view li { margin: 4px 0; }

.document-view strong { color: var(--text-bright); }

.document-view code {
    background: var(--bg-primary);
    padding: 1px 5px;
    border-radius: 3px;
    font-family: var(--mono);
    font-size: 13px;
}

.document-view pre {
    background: var(--bg-primary);
    padding: 16px;
    border-radius: var(--radius);
    overflow-x: auto;
    margin: 12px 0;
}

.document-view pre code { background: none; padding: 0; }

.document-view table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
}

.document-view table td,
.document-view table th {
    padding: 8px 12px;
    border: 1px solid var(--border);
    text-align: left;
}

.document-view table tr:first-child td {
    font-weight: 600;
    color: var(--text-bright);
    background: var(--bg-tertiary);
}

/* ---- SIDEBAR TOGGLE (mobile) ---- */

.sidebar-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}
.sidebar-toggle:hover { color: var(--text-bright); }

/* ---- RESPONSIVE: iPad Pro (1024px) ---- */

@media (max-width: 1024px) {
    :root, [data-theme="dark"], [data-theme="light"] {
        --sidebar-w: 180px;
    }

    .content { padding: 16px; }

    .info-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 12px;
    }

    .forge-container { height: calc(100vh - 200px); }

    .document-view { padding: 24px; }
}

/* ---- RESPONSIVE: iPhone / small screens (640px) ---- */

@media (max-width: 640px) {
    .sidebar {
        transform: translateX(-100%);
        width: 260px;
        z-index: 50;
    }
    .sidebar.open { transform: translateX(0); }

    .sidebar-toggle { display: block; }

    .main { margin-left: 0; }

    .content { padding: 12px; }

    .topbar { padding: 0 12px; }

    .info-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .project-row { flex-wrap: wrap; gap: 6px; }
    .project-meta { font-size: 12px; }

    .forge-container { height: calc(100vh - 180px); min-height: 300px; }
    .forge-message { max-width: 95%; }
    .forge-input-area { padding: 8px; }

    .document-view { padding: 16px 12px; }

    .modal { padding: 20px; margin: 12px; }
    .modal-overlay { padding: 0; }

    .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tab { padding: 8px 12px; font-size: 13px; white-space: nowrap; }

    .auth-box { padding: 24px; }

    .flex-between { flex-wrap: wrap; gap: 8px; }

    .company-group { margin-bottom: 20px; }
}

/* ---- DESCRIBED SELECTOR ---- */
/* All dropdowns must include descriptions per spec design rule */

.described-select {
    position: relative;
}

.described-select select {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-bright);
    font-family: var(--font);
    font-size: 14px;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 32px;
}
.described-select select:focus { border-color: var(--accent); }

.described-select::after {
    content: '\25BE';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    font-size: 14px;
}

.select-description {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
    line-height: 1.4;
    min-height: 18px;
}

/* ---- FORGE FIELD DIVIDER ---- */
/* Sits between the Instructions and Project description textareas.
   Explains the distinction users repeatedly get wrong. */
.forge-field-divider {
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-left: 3px solid var(--accent);
    padding: 8px 12px;
    margin: 10px 0 14px 0;
    border-radius: 4px;
    line-height: 1.5;
}
.forge-field-divider strong {
    color: var(--text-bright);
}

/* ---- PROJECT TYPE HELP-ME-CHOOSE GUIDE ---- */

.proj-type-guide {
    margin-top: 12px;
    padding: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.type-guide-intro {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 10px;
    line-height: 1.4;
}

.type-guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
}

.type-guide-card {
    padding: 10px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.type-guide-card:hover,
.type-guide-card:focus {
    border-color: var(--accent);
    background: var(--bg-hover, var(--bg-input));
    outline: none;
}

.type-guide-label {
    font-weight: 600;
    color: var(--text-bright);
    font-size: 13px;
    margin-bottom: 4px;
}

.type-guide-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-bottom: 4px;
}

.type-guide-example {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}
.type-guide-example em {
    font-style: normal;
    color: var(--text-secondary);
}

/* ---- KANBAN BOARD ---- */

.kanban-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    min-height: 400px;
}

.kanban-column {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    min-height: 200px;
}

.kanban-column-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    font-weight: 600;
}

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

.kanban-column-title { color: var(--text-bright); }

.kanban-column-count {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 400;
}

.kanban-column-body {
    flex: 1;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 80px;
}

.kanban-column-body.drag-over {
    background: var(--bg-tertiary);
}

.kanban-empty {
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
    padding: 24px 8px;
}

.kanban-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    cursor: pointer;
}

.kanban-card:hover { border-color: var(--border-light); }
.kanban-card[draggable="true"] { cursor: grab; }
.kanban-card[draggable="true"]:active { cursor: grabbing; }

.kanban-card-title {
    color: var(--text-bright);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 4px;
    line-height: 1.3;
}

.kanban-card-meta {
    display: flex;
    gap: 8px;
    font-size: 11px;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.kanban-card-priority { font-weight: 600; }

/* ---- TASK LIST TABLE ---- */

.task-table {
    width: 100%;
    border-collapse: collapse;
}

.task-table th {
    padding: 8px 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}

.task-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

.task-row { cursor: pointer; }
.task-row:hover td { background: var(--bg-tertiary); }

.task-title-cell {
    color: var(--text-bright);
    font-weight: 500;
}

.task-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
}

.task-status-todo { background: var(--bg-tertiary); color: var(--text-secondary); }
.task-status-in_progress { background: var(--accent-dim); color: var(--accent); }
.task-status-waiting { background: var(--yellow-dim); color: var(--yellow); }
.task-status-done { background: var(--green-dim); color: var(--green); }

/* ---- TASK COMMENTS ---- */

.task-comment {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}
.task-comment:last-child { border-bottom: none; }

.task-comment-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
}
.task-comment-author {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-bright);
}
.task-comment-date {
    font-size: 11px;
    color: var(--text-muted);
}
.task-comment-body {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.4;
}

/* ---- BULK ACTION BAR ---- */

.bulk-action-bar {
    /* Sticky at the bottom of the viewport so the actions stay
       reachable even when scrolling a long task list. Float above
       the floating + button by raising z-index above the FAB. */
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--accent-dim);
    border-radius: var(--radius);
    position: sticky;
    bottom: 12px;
    z-index: 50;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
    margin-bottom: 12px;
}

.bulk-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    margin-right: 8px;
}

/* ---- FILE ATTACHMENTS ---- */

.drop-zone {
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    min-height: 60px;
    transition: border-color 0.15s ease, background 0.15s ease,
                box-shadow 0.15s ease;
}
.drop-zone.drag-active {
    border-color: var(--accent);
    background: var(--accent-dim, var(--bg-tertiary));
    color: var(--text-bright);
    box-shadow: 0 0 0 4px rgba(64, 192, 87, 0.10);
}

/* Upload progress chips — render inside .drop-zone while files are
   uploading. One chip per file. The chip stays put until App.showProject
   re-renders the drop zone, at which point the actual attachment row
   takes over (with the "Processing..." absorption pill). */
.upload-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    text-align: left;
}
.upload-chips:empty { display: none; }

.upload-chip {
    flex: 1 1 220px;
    min-width: 220px;
    max-width: 320px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 10px;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.upload-chip-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: baseline;
}
.upload-chip-name {
    color: var(--text-bright);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
}
.upload-chip-size {
    font-size: 11px;
    flex: 0 0 auto;
}
.upload-chip-bar-wrap {
    height: 4px;
    background: var(--bg-tertiary);
    border-radius: 2px;
    overflow: hidden;
}
.upload-chip-bar {
    height: 100%;
    width: 0%;
    background: var(--accent);
    transition: width 0.15s ease;
}
.upload-chip-status {
    font-size: 11px;
    color: var(--text-muted);
}
.upload-chip--parsing .upload-chip-bar {
    /* Indeterminate "parsing" stripe — width 100% but we animate the
       background so the user sees the file isn't done yet. */
    background: linear-gradient(90deg,
        var(--accent) 0%, var(--accent-dim, rgba(64,192,87,0.4)) 50%,
        var(--accent) 100%);
    background-size: 200% 100%;
    animation: upload-chip-stripe 1.2s linear infinite;
}
.upload-chip--parsing .upload-chip-status {
    color: var(--accent);
}
.upload-chip--error {
    border-color: var(--color-danger, #f66);
}
.upload-chip--error .upload-chip-bar {
    background: var(--color-danger, #f66);
    width: 100% !important;
}
.upload-chip--error .upload-chip-status {
    color: var(--color-danger, #f66);
}
@keyframes upload-chip-stripe {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.dna-drop {
    transition: border-color 0.15s, background 0.15s;
}
.dna-drop:hover, .dna-drop:focus {
    border-color: var(--accent);
    color: var(--text);
    outline: none;
}
.dna-drop.drag-active {
    border-color: var(--accent);
    background: var(--bg-tertiary, var(--bg));
    color: var(--text-bright);
}

.attachment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
    text-align: left;
}
.attachment-item {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px;
    min-width: 100px;
    max-width: 160px;
}
.attachment-thumb {
    width: 100%;
    max-height: 100px;
    object-fit: cover;
    border-radius: 3px;
    display: block;
    margin-bottom: 4px;
}
.attachment-file {
    display: block;
    padding: 8px 0;
    word-break: break-all;
}

/* ---- BREADCRUMBS ---- */

.breadcrumbs {
    padding: 6px 24px;
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}
.breadcrumbs a { color: var(--text-secondary); }
.breadcrumbs a:hover { color: var(--text-bright); }
.breadcrumb-sep { margin: 0 6px; color: var(--text-muted); }
.breadcrumb-current { color: var(--text-primary); }

/* ---- COMMAND PALETTE ---- */

.cmd-palette-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 200;
    display: flex;
    justify-content: center;
    padding-top: 15vh;
}
.cmd-palette {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    width: 100%; max-width: 520px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.4);
    overflow: hidden;
    max-height: 400px;
    display: flex; flex-direction: column;
}
.cmd-input {
    width: 100%;
    padding: 14px 18px;
    background: transparent;
    border: none; border-bottom: 1px solid var(--border);
    color: var(--text-bright);
    font-size: 16px; font-family: var(--font);
    outline: none;
}
.cmd-results {
    overflow-y: auto; flex: 1;
    padding: 8px 0;
}
.cmd-section {
    padding: 8px 18px 4px;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--text-muted);
}
.cmd-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 18px;
    cursor: pointer; font-size: 14px;
    color: var(--text-primary);
}
.cmd-item:hover, .cmd-item.selected { background: var(--bg-tertiary); color: var(--text-bright); }
.cmd-icon { font-size: 16px; width: 20px; text-align: center; }
.cmd-name { flex: 1; }
.cmd-meta { font-size: 12px; color: var(--text-muted); }
.cmd-empty { padding: 16px 18px; color: var(--text-muted); text-align: center; }

/* ---- ACTIVITY FEED ---- */

.activity-day-header {
    font-size: 12px; font-weight: 600;
    color: var(--text-muted); text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 0 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}
.activity-item {
    display: flex; align-items: baseline; gap: 12px;
    padding: 6px 0;
    font-size: 13px;
}
.activity-time { color: var(--text-muted); font-size: 12px; min-width: 45px; }
.activity-detail { color: var(--text-primary); flex: 1; }
.activity-tag {
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    padding: 1px 6px;
    border-radius: 3px;
    white-space: nowrap;
}

/* ---- USAGE INDICATOR ---- */

.usage-badge {
    cursor: pointer;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: var(--radius);
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    white-space: nowrap;
}
.usage-badge:hover { border-color: var(--border-light); }

.usage-dropdown {
    position: fixed; top: 48px; right: 16px;
    z-index: 150;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    width: 320px;
}
.usage-bar-track {
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
}
.usage-bar-fill {
    height: 100%;
    border-radius: 4px;
}

/* ---- SHORTCUT HINT ---- */

.shortcut-hint {
    position: fixed; bottom: 16px; right: 16px;
    width: 28px; height: 28px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); font-size: 14px; font-weight: 600;
    cursor: pointer; z-index: 10;
}
.shortcut-hint:hover { color: var(--text-bright); border-color: var(--border-light); }

.shortcut-row {
    font-size: 13px;
    padding: 3px 0;
    color: var(--text-primary);
}
.shortcut-row kbd {
    display: inline-block;
    padding: 1px 6px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 3px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-bright);
    margin-right: 6px;
    min-width: 22px;
    text-align: center;
}

/* ---- TIMESHEET ---- */

.timesheet-table th, .timesheet-table td {
    text-align: center;
    padding: 8px;
    min-width: 60px;
}
.timesheet-project { text-align: left !important; color: var(--text-bright); font-weight: 500; }
.timesheet-total { font-weight: 600; color: var(--text-bright); }
.timesheet-cell { color: var(--text-secondary); }

/* ---- TODAY VIEW ---- */

.today-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
}
.today-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-bright);
    margin-bottom: 12px;
}
.today-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
}
.today-item:last-child { border-bottom: none; }
.today-item-title {
    color: var(--text-bright);
    font-size: 13px;
    cursor: pointer;
}
.today-item-title:hover { color: var(--accent); }
.today-overdue .today-item-title { color: var(--red); }

/* ---- SUGGESTION CARDS (Smart Paste) ---- */

.suggestion-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 12px;
}
.suggestion-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.suggestion-type {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--accent-dim);
    color: var(--accent);
}
.suggestion-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-bright);
}
.suggestion-meta {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--text-muted);
    margin: 6px 0;
}
.suggestion-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}
/* Smart Paste header + per-project filing chips + confirmation tally.
 * Added alongside the Accept all button so Theo sees at a glance where
 * each task will land before clicking a bulk action. */
.smart-paste-header {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 14px;
    margin-bottom: 12px;
}
.smart-paste-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}
.smart-paste-tally {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11.5px;
}
.smart-paste-tally-chip {
    padding: 2px 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-bright);
    font-size: 11.5px;
}
.suggestion-project {
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}
.suggestion-project.is-matched  { color: #10b981; background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.3); }
.suggestion-project.is-fallback { color: #f59e0b; background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.3); }
.suggestion-project.is-missing  { color: #ef4444; background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.3); }
.smart-paste-confirmation {
    margin-top: 16px;
    padding: 12px 14px;
    background: rgba(16,185,129,0.08);
    border-left: 3px solid #10b981;
    border-radius: 4px;
    font-size: 13px;
    color: #34d399;
    line-height: 1.55;
}

/* ---- GANTT CHART ---- */

.gantt-label { cursor: default; }
.gantt-bar { cursor: ew-resize; }
.gantt-bar:hover { opacity: 1 !important; }

/* Kanban responsive: stack on mobile */
@media (max-width: 1024px) {
    .kanban-board { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .kanban-board { grid-template-columns: 1fr; }
    .kanban-column { min-height: 100px; }

    .task-table th:nth-child(n+4),
    .task-table td:nth-child(n+4) { display: none; }
}


/* ---- NOTIFICATION BELL ---- */

.notif-bell {
    position: relative;
    cursor: pointer;
    font-size: 18px;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s;
}
.notif-bell:hover { background: var(--hover); }
.bell-icon { display: inline-block; }
.notif-badge {
    position: absolute;
    top: 0;
    right: 2px;
    background: var(--red);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 8px;
    padding: 0 4px;
}
/* Wave 1.b : the popover anchors to the bell button at runtime via
   inline positioning if needed. The default contract is « top edge
   = topbar bottom + 8 px ; right edge = bell right edge ». We use
   right: 24px as a stable fallback (matches the FAB cluster's right
   inset). The previous fragile fixed offset drifted off-axis whenever the
   action cluster shape changed. */
.notif-dropdown {
    position: fixed;
    top: 56px;
    right: 24px;
    z-index: 1100;
}
.notif-dropdown-inner {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
    width: 380px;
    max-height: 500px;
    overflow: hidden;
}
.notif-dropdown-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: 13px;
    color: var(--text-bright);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.notif-list {
    max-height: 420px;
    overflow-y: auto;
}
.notif-item {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    display: flex;
    gap: 10px;
    transition: background 0.12s;
}
.notif-item:hover { background: var(--hover); }
.notif-item:last-child { border-bottom: none; }
.notif-unread { background: rgba(59,130,246,0.06); }
.notif-icon { font-size: 18px; flex-shrink: 0; margin-top: 2px; }
.notif-content { flex: 1; min-width: 0; }
.notif-title { font-size: 13px; font-weight: 500; color: var(--text-bright); }
.notif-detail { margin-top: 2px; line-height: 1.35; }
.notif-time { margin-top: 3px; }
.notif-empty { padding: 32px 16px; text-align: center; color: var(--text-muted); }


/* ---- PM AGENT PANEL ---- */

.pm-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s;
    color: var(--text);
}
.pm-toggle:hover { background: var(--hover); }

.pm-panel {
    position: fixed;
    right: 0;
    width: 380px;
    height: 80vh;
    max-height: 80vh;
    top: auto;
    bottom: 0;
    background: var(--bg);
    border-left: 1px solid var(--border);
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    z-index: 1050;
    box-shadow: -4px -4px 20px rgba(0,0,0,0.25);
}
/* When PM panel is open, push main content left */
.layout.pm-open .main {
    margin-right: 380px;
}
.pm-panel-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.pm-panel-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-bright);
}
.pm-panel-close {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0 4px;
    line-height: 1;
}
.pm-panel-close:hover { color: var(--text-bright); }

.pm-panel-btn {
    background: none;
    border: 1px solid var(--border);
    font-size: 14px;
    cursor: pointer;
    color: var(--text-muted);
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1;
}
.pm-panel-btn:hover { color: var(--text-bright); border-color: var(--text-muted); }

#pm-conversations-list {
    border-bottom: 1px solid var(--border);
    max-height: 200px;
    overflow-y: auto;
}
.pm-conv-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
}
.pm-conv-item:hover {
    background: var(--bg-secondary);
}

.pm-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pm-bubble {
    max-width: 92%;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.5;
}
.pm-user {
    align-self: flex-end;
    background: var(--accent);
    color: #fff;
}
.pm-assistant {
    align-self: flex-start;
    background: var(--hover);
    color: var(--text);
}
.pm-bubble-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    opacity: 0.7;
}
.pm-bubble-content { word-break: break-word; }
.pm-bubble-content p { margin: 0 0 8px 0; }
.pm-bubble-content p:last-child { margin-bottom: 0; }
.pm-bubble-content ul, .pm-bubble-content ol { margin: 4px 0; padding-left: 18px; }
.pm-bubble-content li { margin-bottom: 2px; }
.pm-bubble-content strong { color: var(--text-bright); }
.pm-bubble-content mark { background: var(--yellow); color: #000; padding: 1px 3px; border-radius: 2px; }

.pm-system-msg {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    padding: 6px 0;
    font-style: italic;
}

.pm-input-area {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 8px;
    align-items: flex-end;
}
.pm-input {
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--text);
    font-size: 13px;
    resize: none;
    font-family: inherit;
}
.pm-input:focus { border-color: var(--accent); outline: none; }
.pm-send-btn {
    padding: 8px 16px;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}
.pm-send-btn:hover { opacity: 0.9; }
.pm-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 640px) {
    .pm-panel { width: 100%; }
}


/* ---- SETTINGS PAGE ---- */

.settings-section {
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}
.settings-section:last-of-type { border-bottom: none; }
.settings-section h3 {
    color: var(--text-bright);
    margin-bottom: 12px;
    font-size: 15px;
}
.settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 640px) {
    .settings-grid { grid-template-columns: 1fr; }
}
.settings-toggles {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text);
}
.toggle-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
}
.toggle-row .text-muted { margin-left: auto; }
.ml-8 { margin-left: 8px; }
.mt-4 { margin-top: 4px; }


/* ---- HEALTH DASHBOARD ---- */

.health-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 1024px) {
    .health-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .health-cards { grid-template-columns: 1fr; }
}
.health-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
}
.health-card-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.health-card-value {
    font-size: 16px;
    font-weight: 600;
}
.health-ok { color: var(--green); }
.health-fail { color: var(--red); }
.health-unknown { color: var(--text-muted); }

/* Usage dashboard — split layout for API spend vs Max-covered.
   The two-row layout makes the distinction unmissable: real metered
   API cost goes on top (billable, prominent border), Max-covered
   informational value goes below (muted, secondary border). The
   explainer banner up top gives a non-coder admin enough context to
   read the numbers without asking. */
.usage-explainer {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    border-left: 3px solid var(--text-muted);
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 16px;
}
.usage-section-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-bright);
    margin: 16px 0 8px;
}
.usage-section-label--secondary {
    color: var(--text-muted);
    margin-top: 24px;
}
.health-cards-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}
/* Billable (real API spend): green-tinted left border so it's visually
   distinguishable from the Max-covered row at a glance. */
.health-card--billable {
    border-left: 3px solid var(--color-success, #4caf50);
}
/* Max-covered (informational): muted left border + slightly lower
   emphasis so the eye reads it as secondary context, not a bill. */
.health-card--covered {
    border-left: 3px solid var(--text-muted);
    opacity: 0.92;
}
.health-card--covered .health-card-value {
    color: var(--text-secondary);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.data-table th {
    text-align: left;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}
.data-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--hover); }

.status-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}
.status-pill.health-ok { background: rgba(34,197,94,0.15); color: var(--green); }
.status-pill.health-fail { background: rgba(239,68,68,0.15); color: var(--red); }
.status-pill.health-unknown { background: rgba(148,163,184,0.15); color: var(--text-muted); }

.text-red { color: var(--red); }
.text-yellow { color: var(--yellow); }
.text-green { color: var(--green); }

/* ---- VIEW AS PREVIEW ---- */
.view-as-banner {
    background: rgba(245,158,11,0.15);
    border: 1px solid var(--yellow);
    border-radius: 8px;
    padding: 10px 16px;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--yellow);
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.view-as-banner strong { color: var(--text-bright); }
.view-as-banner a { color: var(--accent); margin-left: auto; }
.view-as-control select {
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg);
    color: var(--text);
}


/* ---- CALENDAR VIEW ---- */

.cal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 20px;
}
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.cal-head {
    padding: 8px 4px;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--card);
}
.cal-cell {
    min-height: 80px;
    padding: 6px;
    background: var(--bg);
    cursor: pointer;
    transition: background 0.12s;
}
.cal-cell:hover { background: var(--hover); }
.cal-empty { background: var(--card); cursor: default; }
.cal-today { background: rgba(59,130,246,0.08); }
.cal-day-num { font-size: 13px; font-weight: 500; color: var(--text-bright); }
.cal-dots { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.cal-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cal-dot.cal-done { opacity: 0.35; }
.cal-overflow { font-size: 10px; color: var(--text-muted); }
.cal-task-row {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    font-size: 13px;
}
.cal-task-row:hover { color: var(--accent); }
.cal-task-status { font-size: 10px; }
.cal-done-text { text-decoration: line-through; opacity: 0.5; }


/* ---- ORG CHART ---- */

.oc-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    padding: 16px 0;
}
.oc-branch {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.oc-children {
    display: flex;
    gap: 20px;
    padding-top: 20px;
    position: relative;
}
.oc-children::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 20px;
    background: var(--border);
}
.oc-node {
    padding: 12px 16px;
    border: 2px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    min-width: 140px;
    max-width: 220px;
    background: var(--card);
    transition: border-color 0.15s, transform 0.1s;
    /* Nodes used to stretch to fit long roles (e.g. "Directeur
       Logistique / Supply Chain"), which blew the tree layout up
       and pushed siblings off-screen on narrow viewports. Capping
       max-width forces long roles to wrap inside the node instead. */
}
.oc-node:hover { transform: translateY(-2px); }
.oc-node[draggable] { cursor: grab; }
.oc-node.oc-dragging { opacity: 0.4; transform: scale(0.95); }
.oc-node.oc-drop-target {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(76, 110, 245, 0.3);
    transform: scale(1.05);
}
.oc-green { border-color: var(--green); }
.oc-yellow { border-color: var(--yellow); }
.oc-red { border-color: var(--red); }
.oc-grey { border-color: var(--text-muted); }
/* Name row — flex keeps the portal dot + badges aligned. Let the
   name text take the full remaining width instead of shrinking to
   fit (which made "Teddy Mevel" disappear visually behind a long
   role/rank on narrow nodes). */
.oc-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-bright);
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
}
.oc-name-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
    text-align: center;
}
.oc-role {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.25;
    overflow-wrap: break-word;
}
.oc-rank-line {
    margin-top: 6px;
    display: flex;
    justify-content: center;
}
.oc-rank-chip {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    letter-spacing: 0.02em;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--card, #1a1d24);
    border: 1px solid var(--border);
    color: var(--text-muted);
}
.oc-portal-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); display: inline-block; opacity: 0.5; }
.oc-portal-dot.active { background: var(--green); opacity: 1; }
.oc-cycle-warn {
    display: inline-block;
    margin-left: 6px;
    background: rgba(250,82,82,0.18);
    color: var(--red);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 6px;
    border-radius: 8px;
    cursor: help;
    vertical-align: middle;
}
.oc-cycle-banner {
    background: rgba(250,82,82,0.10);
    border: 1px solid rgba(250,82,82,0.35);
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--text-primary);
}
.oc-cycle-detail { margin-top: 4px; color: var(--text-muted); font-size: 12px; }

.oc-legend { display: flex; gap: 16px; flex-wrap: wrap; }
.oc-leg { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-muted); }
.oc-dot { width: 10px; height: 10px; border-radius: 50%; }
.oc-dot.oc-green { background: var(--green); }
.oc-dot.oc-yellow { background: var(--yellow); }
.oc-dot.oc-red { background: var(--red); }
.oc-dot.oc-grey { background: var(--text-muted); }


/* ---- PINNED PROJECTS SIDEBAR ---- */

.sidebar-pinned {
    padding: 0 12px;
}
.sidebar-pinned-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    padding: 12px 4px 4px;
    border-top: 1px solid var(--border);
    margin-top: 8px;
}
.sidebar-pinned-item {
    display: block;
    padding: 4px 8px;
    font-size: 12px;
    color: var(--text);
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.12s;
}
.sidebar-pinned-item:hover { background: var(--hover); color: var(--text-bright); }

/* --- Archived sidebar section ------------------------------------------ */
/* A collapsible section that sits below Pinned and lists every archived
 * project. Collapsed by default so it doesn't distract during daily work;
 * expanded state persists in localStorage. Each row shows the project's
 * name + the date it was archived, right-aligned. */
.sidebar-archived {
    padding: 0 12px;
    margin-top: 4px;
}
.sidebar-archived-header {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 12px 4px 4px;
    border-top: 1px solid var(--border);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    user-select: none;
}
.sidebar-archived-header:hover { color: var(--text-bright); }
.sidebar-archived-caret {
    font-size: 10px;
    width: 12px;
    text-align: center;
}
.sidebar-archived-label { flex: 1; }
.sidebar-archived-count {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    border-radius: 10px;
    padding: 1px 6px;
    font-size: 9px;
    font-weight: 500;
}
.sidebar-archived-body {
    padding-top: 2px;
    max-height: 240px;
    overflow-y: auto;
}
.sidebar-archived-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.12s;
}
.sidebar-archived-item:hover {
    background: var(--hover);
    color: var(--text-bright);
}
.sidebar-archived-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-archived-date {
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.7;
}

/* --- My Shortcuts sidebar section (V1) ----------------------------------- */
/* Sits ABOVE the main nav (most prominent position). Same collapsible
 * chrome as .sidebar-archived — shared caret + label pattern — but rows
 * render bigger because they're first-class actions. Edit mode replaces
 * the clickable anchor with ↑/↓/× buttons. Collapsed state persists in
 * localStorage; default is expanded so new users see the "+ Add shortcut"
 * call-to-action without hunting. */
.sidebar-shortcuts {
    padding: 0 12px;
    margin-top: 4px;
}
.sidebar-shortcuts-header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 4px 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    user-select: none;
}
.sidebar-shortcuts-caret {
    font-size: 10px;
    width: 12px;
    text-align: center;
    cursor: pointer;
}
.sidebar-shortcuts-label { flex: 1; cursor: pointer; }
.sidebar-shortcuts-label:hover,
.sidebar-shortcuts-caret:hover { color: var(--text-bright); }
.sidebar-shortcuts-edit {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
}
.sidebar-shortcuts-edit:hover {
    background: var(--hover);
    color: var(--text-bright);
}
.sidebar-shortcuts-body {
    padding-top: 2px;
}
.sidebar-shortcut-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    font-size: 12px;
    color: var(--text);
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.12s;
    cursor: pointer;
}
.sidebar-shortcut-row:hover {
    background: var(--hover);
    color: var(--text-bright);
}
.sidebar-shortcut-row--edit {
    cursor: default;
    background: rgba(255, 255, 255, 0.02);
}
.sidebar-shortcut-icon {
    flex-shrink: 0;
    width: 18px;
    text-align: center;
    font-size: 14px;
}
.sidebar-shortcut-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-shortcut-btn {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 10px;
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sidebar-shortcut-btn:hover:not(:disabled) {
    background: var(--hover);
    color: var(--text-bright);
}
.sidebar-shortcut-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.sidebar-shortcut-btn--danger:hover:not(:disabled) {
    background: rgba(250, 82, 82, 0.15);
    color: var(--red, #fa5252);
    border-color: rgba(250, 82, 82, 0.4);
}
.sidebar-shortcuts-empty {
    padding: 6px 8px;
}
.sidebar-shortcuts-add {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 5px 8px;
    background: transparent;
    border: 1px dashed var(--border);
    color: var(--text-muted);
    font-size: 11px;
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
    transition: all 0.12s;
}
.sidebar-shortcuts-add:hover {
    background: var(--hover);
    color: var(--text-bright);
    border-color: var(--text-muted);
}

.pin-star {
    cursor: pointer;
    font-size: 16px;
    color: var(--text-muted);
    padding: 0 4px;
    flex-shrink: 0;
    transition: color 0.15s;
}
.pin-star:hover { color: var(--yellow); }
.pin-star.pinned { color: var(--yellow); }


/* ---- TODAY QUICK ACTIONS ---- */

.today-item-top {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}
.today-actions {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}
.btn-tiny {
    padding: 2px 8px;
    font-size: 11px;
    /* line-height:1 prevents emoji glyphs (✕ ⋯) from drifting off the
       baseline in modal headers (audit 1.1). */
    line-height: 1;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--card);
    color: var(--text);
    cursor: pointer;
    transition: background 0.12s;
}
.btn-tiny:hover { background: var(--hover); color: var(--text-bright); }

/* Normalize padding + line-height for icon-only close buttons inside
   modal overlays so ✕ and ⋯ glyphs align across DNA import, transcript
   viewer, comms draft editor, etc. (audit 1.1). Scoped selector so the
   later global .btn-tiny { line-height: 1.4 } doesn't win back. */
.modal-overlay button.btn-tiny {
    padding: 4px 8px;
    line-height: 1;
}
.today-inline-form {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    align-items: center;
}
.today-inline-form input, .today-inline-form select {
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg);
    color: var(--text);
}


/* ---- PERSON COMMS STYLE (edit modal additions) ---- */

.comms-section {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.comms-section h4 {
    color: var(--text-bright);
    margin-bottom: 8px;
    font-size: 13px;
}


/* ---- PAGES EDITOR (Notion-style) ---- */

.page-row {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.12s;
}
.page-row:hover { background: var(--hover); }
.page-title { font-weight: 500; color: var(--text-bright); }

.page-title-input {
    width: 100%;
    font-size: 28px;
    font-weight: 700;
    border: none;
    background: transparent;
    color: var(--text-bright);
    padding: 0;
    margin-bottom: 12px;
    outline: none;
    font-family: inherit;
}
.page-meta { display: flex; align-items: center; }

/* Block wrapper */
.pe-wrapper {
    position: relative;
    margin-bottom: 1px;
}

/* Each block is a contenteditable div */
.pe-block {
    padding: 3px 4px;
    min-height: 1.6em;
    outline: none;
    font-size: 15px;
    color: var(--text);
    line-height: 1.65;
    border-radius: 3px;
    transition: background 0.1s;
    white-space: pre-wrap;
    word-break: break-word;
}
.pe-block:focus { background: rgba(59,130,246,0.04); }
.pe-block:empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted);
    opacity: 0.45;
    pointer-events: none;
    font-style: italic;
}

/* Block type styles */
.pe-heading1 { font-size: 26px; font-weight: 700; color: var(--text-bright); margin-top: 20px; padding-top: 4px; }
.pe-heading2 { font-size: 21px; font-weight: 600; color: var(--text-bright); margin-top: 14px; }
.pe-heading3 { font-size: 17px; font-weight: 600; color: var(--text-bright); margin-top: 10px; }
.pe-text { /* default — no extra styles */ }
.pe-bullet { padding-left: 22px; position: relative; }
/* Bullet marker cycles per indent: • / ◦ / ▪. The CSS var is set
   per block in _createBlockEl based on indent level. Outer ◦ /
   ▪ markers render slightly smaller because their default glyphs
   are smaller in most fonts. */
.pe-bullet::before {
    content: var(--list-bullet, '\2022');
    position: absolute;
    left: 6px;
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1.5;
}
.pe-numbered { padding-left: 30px; position: relative; }
.pe-numbered::before {
    content: var(--list-num, "1. ");
    position: absolute;
    left: 2px;
    top: 0;
    color: var(--text-muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    /* Right-align the marker against the text edge so "1." / "10." /
       "iii." / "abc." all line up nicely instead of dancing around. */
    width: 22px;
    text-align: right;
    padding-right: 4px;
    box-sizing: border-box;
}
.pe-quote { border-left: 3px solid var(--accent); padding-left: 14px; color: var(--text-muted); font-style: italic; }
.pe-code { background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; font-family: 'SF Mono', Menlo, monospace; font-size: 13px; white-space: pre; }
.pe-callout { background: rgba(59,130,246,0.08); border-left: 3px solid var(--accent); padding: 10px 14px; border-radius: 4px; margin: 4px 0; }
.pe-toggle { font-weight: 500; color: var(--text-bright); }

/* Checklist */
.pe-wrapper .pe-checkbox {
    position: absolute;
    left: -24px;
    top: 5px;
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}
.pe-wrapper:has(.pe-checkbox) { margin-left: 28px; }

/* Divider */
.pb-divider { border: none; border-top: 1px solid var(--border); margin: 14px 0; }

/* Floating slash command menu */
.pe-slash-menu {
    position: absolute;
    z-index: 1500;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.35);
    width: 260px;
    max-height: 340px;
    overflow-y: auto;
    padding: 6px;
}
.pe-slash-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.1s;
}
.pe-slash-item:hover { background: var(--hover); }
.pe-slash-selected { background: rgba(59,130,246,0.15) !important; outline: 1px solid rgba(59,130,246,0.3); }
.pe-slash-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    flex-shrink: 0;
}
.pe-slash-info { flex: 1; min-width: 0; }
.pe-slash-label { font-size: 13px; font-weight: 500; color: var(--text-bright); }
.pe-slash-desc { font-size: 11px; color: var(--text-muted); }

/* Drag grip handle */
.pe-grip {
    position: absolute;
    left: -24px;
    top: 4px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--text-muted);
    opacity: 0;
    cursor: grab;
    border-radius: 3px;
    transition: opacity 0.12s;
    user-select: none;
}
.pe-wrapper { position: relative; padding-left: 4px; }
/* Grip baseline opacity bumped 0.5 → 0.7 on wrapper hover so the
   drag affordance reads as obviously interactive, not a faint
   ghost. Full opacity on direct hover unchanged. */
.pe-wrapper:hover > .pe-grip { opacity: 0.7; }
.pe-grip:hover { opacity: 1 !important; background: var(--bg-tertiary); }
.pe-grip:active { cursor: grabbing; }

/* Block selection */
.pe-selected { outline: 2px solid var(--accent); border-radius: 4px; }
.pe-dragging { opacity: 0.4; }
.pe-drop-target { border-top: 2px solid var(--accent); }

/* Editable table */
.pe-table-wrap { margin: 6px 0; }
.pe-table { width: 100%; border-collapse: collapse; }
.pe-table th, .pe-table td {
    border: 1px solid var(--border);
    padding: 5px 10px;
    font-size: 13px;
    outline: none;
    min-width: 60px;
}
.pe-table th { background: var(--card); font-weight: 600; color: var(--text-bright); }
.pe-table td:focus, .pe-table th:focus { background: rgba(59,130,246,0.06); }
.pe-table-add-col {
    cursor: pointer; text-align: center; color: var(--text-muted);
    font-size: 16px; width: 28px; background: transparent !important;
    border: 1px dashed var(--border) !important;
}
.pe-table-add-col:hover { color: var(--accent); }

/* Status bar */
.pe-status-bar {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding: 10px 0;
    margin-top: 24px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-muted);
}
.pe-status-bar a { color: var(--accent); text-decoration: none; }
.pe-status-bar a:hover { text-decoration: underline; }
.pe-status-vis { cursor: pointer; }
.pe-status-vis:hover { color: var(--text-bright); }

/* Cover image */
.pe-cover {
    height: 180px;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    margin-bottom: 16px;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.15s;
}
.pe-cover:hover { opacity: 1; }
.pe-cover-add {
    padding: 12px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    border: 1px dashed var(--border);
    border-radius: 8px;
    margin-bottom: 12px;
    opacity: 0;
    transition: opacity 0.15s;
}
.page-editor:hover .pe-cover-add { opacity: 0.5; }
.pe-cover-add:hover { opacity: 1 !important; }

/* Title row with icon */
.pe-title-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.pe-icon { font-size: 32px; cursor: pointer; line-height: 1; transition: transform 0.1s; }
.pe-icon:hover { transform: scale(1.1); }

/* Properties panel */
.pe-properties { margin-bottom: 16px; }
.pe-props-toggle {
    font-size: 12px; color: var(--text-muted); cursor: pointer;
    padding: 4px 0; user-select: none;
}
.pe-props-toggle:hover { color: var(--text); }
.pe-props-grid {
    display: grid; grid-template-columns: 100px 1fr; gap: 6px 12px;
    padding: 10px 0; font-size: 13px;
}
.pe-prop-label { color: var(--text-muted); font-size: 12px; }
.pe-tags-input {
    border: none; background: transparent; color: var(--text);
    font-size: 13px; padding: 2px 0; outline: none; width: 100%;
    border-bottom: 1px solid transparent;
}
.pe-tags-input:focus { border-bottom-color: var(--border); }

/* Block type indicator */
.pe-type-label {
    position: absolute;
    left: -44px;
    top: 5px;
    font-size: 9px;
    font-weight: 600;
    color: var(--text-muted);
    opacity: 0;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    width: 32px;
    text-align: right;
    pointer-events: none;
    transition: opacity 0.12s;
}
.pe-wrapper:focus-within > .pe-type-label { opacity: 0.5; }

/* Checklist strikethrough when checked */
.pe-wrapper:has(.pe-checkbox:checked) .pe-block {
    text-decoration: line-through;
    opacity: 0.5;
}

.version-row { display: flex; gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }

/* Floating format toolbar */
.pe-format-toolbar {
    position: absolute;
    z-index: 1600;
    display: none;
    align-items: center;
    gap: 2px;
    /* Solid opaque background — was var(--bg) which inherited the
       page transparency, leaving the toolbar see-through over content.
       Using bg-secondary + a subtle backdrop blur for premium feel. */
    background: var(--bg-secondary, #25262b);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px 6px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.3);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.pe-format-toolbar button {
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    padding: 4px 7px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1;
}
.pe-format-toolbar button:hover { background: var(--bg-tertiary); color: var(--text-bright); }
.pe-fmt-sep { width: 1px; height: 16px; background: var(--border); margin: 0 2px; }
/* Inline code styling — Notion-style red accent + monospace + subtle
   background. Chrome's contenteditable preserves the <code> element
   on save so the styling persists in HTML. */
.pe-inline-code {
    background: rgba(135, 131, 120, 0.15);
    color: #eb5757;
    padding: 1px 5px;
    border-radius: 3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, "JetBrains Mono", monospace;
    font-size: 0.86em;
    border: 1px solid rgba(135, 131, 120, 0.18);
}
.pe-link { color: var(--accent); text-decoration: underline; }

/* File/image block styles */
.pe-file-placeholder {
    color: var(--text-muted);
    font-style: italic;
    padding: 8px 12px;
    display: block;
    border: 1px dashed var(--border);
    border-radius: 6px;
    text-align: center;
}
.pe-file-placeholder:hover { border-color: var(--accent); color: var(--text); }
.pe-file-link { color: var(--accent); }
.pe-image-preview {
    max-width: 100%;
    border-radius: 6px;
    margin: 4px 0;
}

/* Slash menu empty state */
.pe-slash-empty {
    padding: 12px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    font-style: italic;
}

/* Unified Notion-style color menu (replaces the two older pickers).
   Two sections: Text + Background. Arrow-key navigable, hover-preview,
   click to apply. */
.pe-color-menu {
    position: fixed;
    z-index: 1700;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    width: 220px;
    max-height: 460px;
    overflow: auto;
    font-family: inherit;
}
.pe-cm-section-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    padding: 6px 8px 2px;
    font-weight: 600;
}
.pe-cm-section { display: flex; flex-direction: column; gap: 1px; margin-bottom: 2px; }
.pe-cm-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary);
    user-select: none;
}
.pe-cm-item.pe-cm-focus,
.pe-cm-item:hover {
    background: var(--bg-tertiary);
}
.pe-cm-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.08);
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
    background: transparent;
    color: var(--text-primary);
    line-height: 1;
}
.pe-cm-label { font-size: 13px; }
/* Highlight span — flat 2px radius, NO horizontal padding. The old
   "padding: 0 1px" produced the stacking-rectangles visual when a
   page had legacy nested .pe-hl spans saved from before the
   strip-then-wrap fix landed. Resetting padding makes legacy data
   render flat too — the new write path also guarantees no nesting. */
.pe-hl { border-radius: 2px; padding: 0; }

/* Specific-people access picker — appears beneath the page
   Properties block when visibility is 'specific'. Notion-style chips
   with inline remove + a search box to add. */
.pe-access-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
}
.pe-access-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}
.pe-access-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 22px;
    margin-bottom: 10px;
}
.pe-access-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(76,110,245,0.18);
    color: var(--text-bright);
    padding: 3px 6px 3px 10px;
    border-radius: 14px;
    font-size: 12px;
    line-height: 1.4;
}
.pe-access-meta { color: var(--text-muted); font-size: 11px; }
.pe-access-remove {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    width: 18px; height: 18px;
    border-radius: 50%;
    line-height: 1;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pe-access-remove:hover { background: rgba(255,255,255,0.1); color: var(--red); }
.pe-access-search { position: relative; }
.pe-access-search input {
    width: 100%;
    padding: 6px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    box-sizing: border-box;
}
.pe-access-search input:focus { outline: none; border-color: var(--accent); }
.pe-access-results {
    margin-top: 4px;
    max-height: 220px;
    overflow: auto;
    background: var(--bg-secondary);
    border-radius: 6px;
}
.pe-access-result {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    cursor: pointer;
    border-radius: 4px;
}
.pe-access-result:hover { background: var(--bg-tertiary); }

/* Real-time collab pill — sits next to the page title showing whether
   the page is in collab mode or fell back to turn-based. */
.pe-collab-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-secondary);
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-left: 8px;
    user-select: none;
    background: var(--bg-tertiary);
}
.pe-collab-pill.pe-collab-off { color: var(--text-muted); }
.pe-collab-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--text-muted);
}
.pe-collab-dot.pe-collab-on {
    background: var(--green, #40c057);
    box-shadow: 0 0 6px rgba(64,192,87,0.6);
    animation: pe-collab-pulse 2.4s ease-in-out infinite;
}
@keyframes pe-collab-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

/* Peer presence ribbon — small avatar circles for every other user
   currently connected to the same page. Hidden when alone. */
.pe-peer-ribbon {
    display: flex;
    gap: -6px;
    padding: 4px 0 8px;
    align-items: center;
}
.pe-peer-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: white;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    margin-right: -6px;
    border: 2px solid var(--bg, #1a1b1e);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    transition: transform 120ms ease;
}
.pe-peer-avatar:hover { transform: translateY(-2px); }

/* Inline peer presence overlays. .pe-wrapper is position:relative so
   absolute children ride along with the block when content reflows.
   pointer-events:none across the board so cursors never steal clicks
   from the editor. */
.pe-wrapper { position: relative; }

/* Last-write-wins guardrail for the per-block-key Y.Map collab model.
   Today block.content is a string field; if two users type in the same
   block at the same second, last save wins. Cursor visibility helps
   but isn't enough — surface a clear warning when the LOCAL user is
   editing a block where a peer also has cursor. The data attribute is
   set in app.js _renderPeerCursors; the :focus-within gate means the
   ribbon only fires when the conflict is real (you and them typing in
   the same place right now). */
.pe-wrapper[data-peer-editing]:focus-within::before {
    content: attr(data-peer-editing) " is editing this block. Last save wins.";
    position: absolute;
    top: -22px;
    left: 0;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 4px;
    padding: 2px 8px;
    z-index: 6;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(245, 158, 11, 0.2);
    animation: pe-peer-cursor-in 180ms ease;
}

/* Block-edge fallback flag (legacy positioning when no precise rect). */
.pe-peer-cursor {
    position: absolute;
    top: 4px;
    right: -4px;
    z-index: 5;
    pointer-events: none;
    color: white;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.92;
    animation: pe-peer-cursor-in 180ms ease;
}
/* Floating variant — position is set inline by JS, override the
   right-edge defaults so it follows the caret. */
.pe-peer-cursor-floating {
    top: auto;
    right: auto;
}
@keyframes pe-peer-cursor-in {
    from { opacity: 0; transform: translateX(4px); }
    to   { opacity: 0.92; transform: translateX(0); }
}

/* Character-precision caret line. Width 2px, full block height,
   gentle blink so the user reads it as a cursor not a styled border. */
.pe-peer-caret {
    position: absolute;
    width: 2px;
    z-index: 6;
    pointer-events: none;
    border-radius: 1px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
    animation: pe-peer-caret-blink 1.1s ease-in-out infinite;
}
@keyframes pe-peer-caret-blink {
    0%, 60%   { opacity: 1; }
    80%, 100% { opacity: 0.45; }
}

/* Selection background — coloured rect over the peer's selected
   text. mix-blend-mode keeps the underlying text legible even when
   the colour is dark. One element per visual line (Range.getClientRects). */
.pe-peer-selection {
    position: absolute;
    z-index: 4;
    pointer-events: none;
    opacity: 0.28;
    border-radius: 2px;
    mix-blend-mode: multiply;
}

/* Collab status toast — pops in the bottom-left when the page
   transitions in/out of real-time mode. Auto-dismisses. */
.pe-collab-toast {
    position: fixed;
    bottom: 70px;
    left: 20px;
    z-index: 10001;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 13px;
    max-width: 360px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.4);
    transition: opacity 800ms ease;
}
.pe-collab-toast--warn { border-left: 3px solid var(--yellow); }
.pe-collab-toast--info { border-left: 3px solid var(--accent); }
.pe-collab-toast-fade { opacity: 0; }

/* Help button next to the page title — opens the keyboard-shortcut
   reference modal so users can discover formatting / commands. */
.pe-help-btn {
    width: 26px; height: 26px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    transition: color 100ms ease, border-color 100ms ease;
}
.pe-help-btn:hover { color: var(--text-bright); border-color: var(--text-secondary); }

/* Tier 2 — two-column layout block. Flex container with two
   editable cells + a thin centred divider. Each cell is plain-text
   contenteditable with placeholder shown when empty. */
.pe-columns-block {
    padding: 0 !important;
    display: flex;
    align-items: stretch;
    gap: 0;
    background: transparent;
}
.pe-columns-block .pe-col {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
    white-space: pre-wrap;
    outline: none;
    border-radius: 4px;
    transition: background 100ms ease;
}
.pe-columns-block .pe-col:focus {
    background: var(--bg-tertiary);
}
.pe-columns-block .pe-col[data-placeholder]:empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted);
    pointer-events: none;
}
.pe-columns-block .pe-col-divider {
    width: 1px;
    background: var(--border);
    margin: 4px 8px;
    flex-shrink: 0;
}

/* Web bookmark block — Notion-style URL card. Two states: empty
   (input + Fetch button) and populated (clickable card). */
.pe-bookmark-block { padding: 0 !important; }
.pe-bm-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px dashed var(--border);
    border-radius: 6px;
    color: var(--text-muted);
}
.pe-bm-input {
    flex: 1;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px 8px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
}
.pe-bm-input:focus { outline: none; border-color: var(--accent); }
.pe-bm-card {
    display: flex;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none !important;
    color: var(--text-primary);
    background: var(--bg-secondary);
    transition: border-color 120ms ease, transform 120ms ease;
}
.pe-bm-card:hover { border-color: var(--text-secondary); transform: translateY(-1px); }
.pe-bm-text {
    flex: 1;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
}
.pe-bm-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-bright);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.pe-bm-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 6px;
}
.pe-bm-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
}
.pe-bm-favicon {
    width: 14px;
    height: 14px;
    object-fit: contain;
}
.pe-bm-image {
    width: 140px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg-tertiary);
}
@media (max-width: 600px) {
    .pe-bm-image { display: none; }
}

/* Block hover menu — opened by clicking or right-clicking the grip
   handle. Notion-style: turn-into / duplicate / color / delete. */
.pe-block-menu {
    position: fixed;
    z-index: 1700;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    width: 220px;
    font-family: inherit;
    display: flex;
    align-items: stretch;
}
.pe-bm-section { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pe-bm-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary);
    user-select: none;
}
.pe-bm-item:hover { background: var(--bg-tertiary); }
.pe-bm-item.pe-bm-danger:hover { background: rgba(220,38,38,0.16); color: var(--red); }
.pe-bm-icon {
    width: 22px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    flex-shrink: 0;
}
.pe-bm-arrow { margin-left: auto; color: var(--text-muted); font-size: 12px; }
.pe-bm-shortcut { margin-left: auto; color: var(--text-muted); font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.pe-bm-sep { height: 1px; background: var(--border); margin: 4px 0; }
.pe-bm-submenu {
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: 4px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    width: 200px;
    flex-direction: column;
}
.pe-bm-sub-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary);
}
.pe-bm-sub-item:hover { background: var(--bg-tertiary); }
.pe-bm-check { margin-left: auto; color: var(--accent); }

/* Toggle block — Notion-style ▸/▾ caret + indented body that can be
   collapsed. Simpler data model than Notion's full child-tree: the
   body is stored as a single HTML blob in block.meta.inner. */
.pe-toggle-block { padding: 0 !important; }
.pe-toggle-head { display: flex; align-items: flex-start; gap: 6px; cursor: text; }
.pe-toggle-caret {
    flex-shrink: 0;
    width: 18px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
    font-size: 10px;
    transition: transform 120ms ease, color 120ms ease;
    border-radius: 3px;
}
.pe-toggle-caret:hover { color: var(--text-primary); background: var(--bg-tertiary); }
.pe-toggle-caret.expanded { transform: rotate(90deg); }
.pe-toggle-caret.collapsed { transform: rotate(0deg); }
.pe-toggle-header {
    flex: 1;
    min-height: 1.4em;
    outline: none;
    font-weight: 500;
}
.pe-toggle-header:empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted);
    pointer-events: none;
}
.pe-toggle-body {
    margin-left: 24px;
    padding: 4px 0 4px 12px;
    border-left: 2px solid var(--border);
    outline: none;
    min-height: 1.4em;
    color: var(--text-primary);
    transition: max-height 160ms ease, opacity 120ms ease, padding 120ms ease;
    overflow: hidden;
}
.pe-toggle-body.collapsed { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; pointer-events: none; }
.pe-toggle-body.expanded { max-height: 2000px; opacity: 1; }
.pe-toggle-body:empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted);
    font-style: italic;
    pointer-events: none;
}

/* Format toolbar button — tighter, squarer, closer to Notion's floating
   toolbar. The grouped-background for Color Trigger makes the "text
   colour + background" affordance obvious at a glance. */
.pe-fmt-btn {
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1;
    min-width: 26px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    transition: background 80ms ease;
}
.pe-fmt-btn:hover { background: var(--bg-tertiary); color: var(--text-bright); }
.pe-color-trigger { padding: 3px 6px 3px 8px; }
.pe-color-trigger-a {
    font-weight: 600;
    border-bottom: 2px solid var(--accent);
    padding-bottom: 1px;
    line-height: 1;
}
.pe-color-trigger-caret { font-size: 9px; color: var(--text-muted); margin-left: 1px; }

/* Conflict warning banner */
.pe-conflict-banner {
    background: rgba(245,158,11,0.15);
    border: 1px solid var(--yellow);
    border-radius: 8px;
    padding: 10px 16px;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--yellow);
}
.pe-editor-toolbar {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    padding: 6px 0;
}
.pe-tb-btn {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-size: 12px;
    padding: 4px 10px;
    cursor: pointer;
    font-family: var(--font);
    transition: background 0.15s;
}
.pe-tb-btn:hover:not(:disabled) {
    background: var(--bg-input);
    color: var(--text-bright);
}
.pe-tb-btn:disabled {
    opacity: 0.4;
    cursor: default;
}


/* ---- LESSONS ---- */

.lesson-row {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 8px;
}
.lesson-text { font-size: 14px; color: var(--text-bright); line-height: 1.5; margin-bottom: 6px; }
.lesson-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lesson-tag {
    background: var(--hover);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}


/* ---- CONTEXT MENUS (ContextMenu module + legacy PersonMenu) ---- */

.ctxmenu, .ctx-menu {
    position: fixed;
    min-width: 200px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
    padding: 4px 0;
    z-index: 3000;
    font-size: 13px;
    color: var(--text-bright);
    user-select: none;
}
.ctxmenu-item, .ctx-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    color: var(--text-bright);
}
.ctxmenu-item:hover, .ctx-item:hover {
    background: var(--bg-secondary);
}
.ctxmenu-item.is-destructive, .ctx-item.ctx-danger {
    color: var(--color-danger, #ef4444);
}
.ctxmenu-item.is-disabled {
    opacity: 0.4;
    cursor: default;
}
.ctxmenu-item.is-disabled:hover {
    background: transparent;
}
.ctxmenu-icon {
    width: 18px;
    display: inline-flex;
    justify-content: center;
    color: var(--text-muted);
}
.ctxmenu-label { flex: 1; }
.ctxmenu-hint {
    font-size: 11px;
    color: var(--text-muted);
}
.ctxmenu-sep, .ctx-sep {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

/* ---- PROJECT OVERVIEW: action row, permission matrix, archive badge ---- */

.project-action-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    margin-bottom: 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.project-action-row select {
    padding: 4px 8px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-bright);
    font-size: 12px;
}
.archived-badge {
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
}

.perm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.perm-table th, .perm-table td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
}
.perm-table th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    font-weight: 600;
}
.perm-role {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.perm-role-owner       { background: rgba(34,197,94,0.18); color: #22c55e; }
.perm-role-contributor { background: rgba(59,130,246,0.18); color: #3b82f6; }
.perm-role-informed    { background: rgba(148,163,184,0.18); color: #94a3b8; }

/* Inline role dropdown on the project permission matrix.
   Styled to look like the read-only badge when at rest, then
   reveal a proper select affordance on hover. */
.perm-role-select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid transparent;
    padding: 2px 22px 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%238b949e' stroke-width='1.5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 6px center;
    transition: border-color 100ms ease, background-color 100ms ease;
}
.perm-role-select:hover,
.perm-role-select:focus {
    border-color: var(--border);
    outline: none;
}
.perm-role-select.perm-role-owner       { background-color: rgba(34,197,94,0.18); color: #22c55e; }
.perm-role-select.perm-role-contributor { background-color: rgba(59,130,246,0.18); color: #3b82f6; }
.perm-role-select.perm-role-informed    { background-color: rgba(148,163,184,0.18); color: #94a3b8; }
.perm-role-select option { background: var(--bg-secondary); color: var(--text-primary); text-transform: none; letter-spacing: normal; font-weight: normal; }
.perm-cap { text-align: center; color: var(--text-secondary); }

/* ---- TASK LIST: filter bar, sortable headers, sub-tasks, timer ---- */

.task-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    padding: 8px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.task-filter-bar input[type="search"] {
    flex: 1;
    padding: 6px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-bright);
    font-size: 13px;
}

.task-th-sortable {
    cursor: pointer;
    user-select: none;
}
.task-th-sortable:hover { color: var(--text-bright); }
.task-th-arrow {
    font-size: 10px;
    color: var(--text-muted);
    margin-left: 4px;
}

/* Kanban card timer button — small circle in the top-right of a card. */
.kanban-card-timer {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kanban-card-timer:hover { background: var(--bg-secondary); color: var(--text-bright); }
.kanban-card-timer.is-running {
    background: var(--accent, #3b82f6);
    color: #fff;
    border-color: var(--accent, #3b82f6);
    animation: timer-pulse 2s ease-in-out infinite;
}
@keyframes timer-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Sub-task progress bar in the edit modal. */
.task-progress-bar {
    height: 6px;
    background: var(--bg-primary);
    border-radius: 3px;
    overflow: hidden;
}
.task-progress-fill {
    height: 100%;
    background: var(--color-success, #22c55e);
    transition: width 0.25s ease;
}

.task-subtask-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.task-subtask-row:last-child { border-bottom: none; }
.task-subtask-row.is-done .task-subtask-title {
    text-decoration: line-through;
    color: var(--text-muted);
}
.task-subtask-title {
    flex: 1;
    cursor: pointer;
    color: var(--text-bright);
}
.task-subtask-title:hover { text-decoration: underline; }

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

/* ---- CLI STATUS BADGE (top bar) ---- */
/* Persistent across all pages — polls /api/cli-tasks/active. Hidden when
   no tasks are in-flight or awaiting dismissal. Click opens a dropdown
   similar in shape to the notifications dropdown. */

.cli-status-badge {
    display: flex;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    border-radius: 14px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
    color: var(--text-bright);
    white-space: nowrap;
    user-select: none;
}
.cli-status-badge.cli-status-running {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.4);
    animation: cli-status-pulse 2s ease-in-out infinite;
}
.cli-status-badge.cli-status-done {
    background: rgba(34, 197, 94, 0.15);
    color: var(--color-success, #22c55e);
    border-color: rgba(34, 197, 94, 0.4);
}
.cli-status-badge.cli-status-failed {
    background: rgba(239, 68, 68, 0.15);
    color: var(--color-danger, #ef4444);
    border-color: rgba(239, 68, 68, 0.4);
}
@keyframes cli-status-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.cli-status-dropdown {
    position: fixed;
    top: 56px;
    right: 220px;
    width: 380px;
    max-height: 460px;
    overflow-y: auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 12px 36px rgba(0,0,0,0.35);
    z-index: 2100;
}
.cli-status-header {
    padding: 10px 14px;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-bright);
    border-bottom: 1px solid var(--border);
}
.cli-status-row {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s ease;
}
.cli-status-row:hover { background: var(--bg-secondary); }
.cli-status-project {
    font-size: 12px;
    color: var(--text-bright);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cli-status-preview {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.cli-status-dismiss {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    padding: 0 4px;
    margin-left: 8px;
}
.cli-status-dismiss:hover { color: var(--color-danger); }
.cli-status-empty {
    padding: 16px;
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
}
.cli-status-footer {
    padding: 8px 14px;
    border-top: 1px solid var(--border);
    text-align: right;
}

/* ---- CLI WORKSPACE TAB ---- */

.cli-workspace {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cli-workspace-header {
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* Flex layout — terminal is the dominant element (flex:1).
   Files panel: 220px fixed. Right side panel (Advisors OR Architect):
   280px fixed when open, 0 when collapsed. History is a dropdown
   anchored to the header button — no longer a permanent column. */
.cli-grid {
    display: flex;
    gap: 12px;
    min-height: calc(100vh - 280px);
    align-items: stretch;
}
.cli-grid > .cli-files-panel {
    flex: 0 0 220px;
    max-width: 220px;
}
.cli-grid > .cli-main-panel {
    flex: 1 1 auto;
    min-width: 0;          /* lets the terminal shrink without overflow */
    display: flex;
    flex-direction: column;
}
.cli-grid > .cli-side-panel {
    flex: 0 0 380px;
    max-width: 380px;
    min-width: 0;
}

/* Column splitters — drag handles between Files | Terminal | Side panel.
   Wired by CLI._initSplitters. The right handle hides when the side
   panel is collapsed (CLI.applySidePanelVisibility toggles .has-side). */
.cli-splitter {
    flex: 0 0 6px;
    align-self: stretch;
    cursor: col-resize;
    background: transparent;
    position: relative;
    user-select: none;
    transition: background 0.15s ease;
}
.cli-splitter::after {
    /* Visible center stripe so the handle is discoverable without
       hover. Subtle in default state, accent-colored on hover/drag. */
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 2px;
    width: 2px;
    background: var(--border);
    border-radius: 1px;
    transition: background 0.15s ease;
}
.cli-splitter:hover::after,
body.cli-resizing .cli-splitter::after {
    background: var(--accent);
}
.cli-splitter:hover {
    background: rgba(64, 192, 87, 0.06);
}
/* Right splitter only renders when the side panel is open. */
.cli-grid:not(.has-side) .cli-splitter--right { display: none; }

/* While resizing, freeze user-select globally and force the col-resize
   cursor so the cursor doesn't flicker when crossing iframes / xterm. */
body.cli-resizing { cursor: col-resize !important; user-select: none; }
body.cli-resizing iframe,
body.cli-resizing .cli-xterm-host,
body.cli-resizing .cli-terminal { pointer-events: none; }

/* Mobile: stack everything */
@media (max-width: 1024px) {
    .cli-grid { flex-direction: column; }
    .cli-grid > .cli-files-panel,
    .cli-grid > .cli-side-panel { flex: 1 1 auto; max-width: none; }
    .cli-splitter { display: none; }
}

/* Conversation tabs strip — sits above the terminal, one tab per
   open conversation in this session. Click switches, right-click closes. */
.cli-conv-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    min-height: 38px;
}
.cli-conv-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
    max-width: 220px;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.cli-conv-tab:hover { background: var(--hover); color: var(--text-bright); }
.cli-conv-tab.is-active {
    background: var(--bg);
    color: var(--text-bright);
    border-color: var(--accent);
}
.cli-conv-tab.is-running { border-left: 3px solid #f59e0b; }
.cli-conv-tab.is-complete { border-left: 3px solid #10b981; }
.cli-conv-tab.is-failed { border-left: 3px solid #ef4444; }
.cli-conv-tab-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 160px;
}
.cli-conv-tab-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    padding: 0 2px;
    line-height: 1;
}
.cli-conv-tab-close:hover { color: var(--color-danger); }
.cli-conv-tab.dragging { opacity: 0.4; }
.cli-conv-tab.drop-target { background: var(--accent-dim); }

/* History dropdown — replaces the permanent history column */
.cli-history-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    width: 360px;
    max-height: 480px;
    overflow-y: auto;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 12px 36px rgba(0,0,0,0.5);
    z-index: 1500;
}
.cli-history-dropdown-header {
    padding: 10px 14px;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-bright);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--bg);
    z-index: 1;
}
.cli-history-dropdown-empty {
    padding: 16px;
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
}

/* ---- Right side panel — shared by Advisors AND Architect ---- */
/* The right column is a flex sibling of the terminal. It hosts either
   the advisor cards (passive, fires after CLI turns) or the Architect
   chat (active strategic collaborator). Toggle in the workspace header
   between the two. Same width either way. Independent scroll. */
.cli-side-panel {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
}
.cli-side-panel-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 6px;
}
.cli-side-panel-tab {
    flex: 1;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 600;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cli-side-panel-tab:hover { color: var(--text-bright); background: var(--hover); }
.cli-side-panel-tab.is-active {
    color: var(--text-bright);
    background: var(--bg);
    border-color: var(--border);
}
.cli-side-panel-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Advisor sidebar — now lives inside the side panel body */
.cli-advisor-sidebar {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cli-advisor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    padding-bottom: 6px;
}
.cli-advisor-hats {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 2px;
    min-height: 0;
}
.cli-advisor-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cli-advisor-card.is-custom {
    border-color: var(--accent);
}
.cli-advisor-card.is-placeholder {
    border-style: dashed;
    opacity: 0.8;
}
.cli-advisor-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-bright);
}
.cli-advisor-name {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 11px;
}
.cli-advisor-budget-pill {
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    background: rgba(148, 163, 184, 0.2);
    color: var(--text-muted);
}
.cli-advisor-budget-pill.warn {
    background: rgba(245, 158, 11, 0.18);
    color: #f59e0b;
}
.cli-advisor-budget-pill.exhausted {
    background: rgba(239, 68, 68, 0.18);
    color: #ef4444;
}
.cli-advisor-msg {
    background: var(--bg-primary);
    border-left: 2px solid var(--accent);
    padding: 6px 8px;
    border-radius: 2px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-primary);
}
.cli-advisor-sev-warning { border-left-color: #f59e0b; }
.cli-advisor-msg-text {
    word-wrap: break-word;
}
.cli-advisor-msg-meta {
    margin-top: 3px;
    font-size: 10px;
}
.cli-advisor-empty {
    font-style: italic;
    padding: 4px 0;
}
.cli-advisor-budget {
    font-size: 11px;
    color: var(--text-muted);
    padding: 4px 0;
    border-top: 1px dashed var(--border);
}
.cli-advisor-ask {
    border-top: 1px solid var(--border);
    padding-top: 8px;
}
.cli-advisor-ask textarea {
    width: 100%;
    padding: 6px 8px;
    font-size: 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-bright);
    font-family: inherit;
    resize: vertical;
    min-height: 44px;
}

/* === WAVE 3 κ advisor panel === */
/* Direct-question panel — stack of expert answers for the last ask. */
.cli-advisor-ask-panel {
    border-top: 1px solid var(--border);
    margin-top: 8px;
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 50vh;
    overflow-y: auto;
}
.cli-advisor-ask-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
    padding-bottom: 4px;
    border-bottom: 1px dashed var(--border);
    font-size: 12px;
}
.cli-advisor-ask-panel-close {
    padding: 0 6px;
    font-size: 14px;
    line-height: 1;
}
.cli-advisor-ask-panel-q {
    font-style: italic;
    padding: 2px 4px;
    word-wrap: break-word;
}
.cli-advisor-ask-panel-error {
    padding: 10px;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 4px;
    font-size: 12px;
}
/* Default: vertical stack. Wider sidebar → two-column polish. */
.cli-advisor-ask-panel-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
@media (min-width: 720px) {
    .cli-advisor-ask-panel-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    /* Error cards stay full-width so their error message is readable. */
    .cli-advisor-ask-panel-grid .cli-advisor-ask-card.is-errored {
        grid-column: 1 / -1;
    }
}
.cli-advisor-ask-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cli-advisor-ask-card.is-sev-warning {
    border-left-color: #f59e0b;
}
.cli-advisor-ask-card.is-errored {
    border-left-color: #6b7280;
    opacity: 0.78;
}
.cli-advisor-ask-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
}
.cli-advisor-ask-card-name {
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-bright);
}
.cli-advisor-ask-card-pill {
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    background: rgba(148, 163, 184, 0.2);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.cli-advisor-ask-card-pill.is-warning {
    background: rgba(245, 158, 11, 0.18);
    color: #f59e0b;
}
.cli-advisor-ask-card-pill.is-info {
    background: rgba(59, 130, 246, 0.18);
    color: #3b82f6;
}
.cli-advisor-ask-card-pill.is-error {
    background: rgba(239, 68, 68, 0.18);
    color: #ef4444;
}
.cli-advisor-ask-card-body {
    font-size: 12px;
    line-height: 1.42;
    color: var(--text-primary);
    word-wrap: break-word;
    white-space: pre-wrap;
}
/* === END WAVE 3 κ advisor panel === */

/* === WAVE 3 λ advisor polish === */
/* Hint strip under the Ask input + @-mention autocomplete dropdown. */
.cli-advisor-ask-wrap {
    position: relative;
}
.cli-advisor-ask-hint {
    margin-top: 4px;
    padding: 4px 6px;
    line-height: 1.4;
    font-size: 11px;
    color: var(--text-muted);
    border-left: 2px solid var(--border);
    background: rgba(148, 163, 184, 0.05);
    border-radius: 0 3px 3px 0;
}
.cli-advisor-ask-hint code {
    padding: 0 3px;
    font-size: 10px;
    border-radius: 3px;
    background: var(--bg-secondary);
    color: var(--text-bright);
}
.cli-advisor-mention-dropdown {
    position: absolute;
    z-index: 100;
    left: 0;
    right: 0;
    bottom: calc(100% + 2px);
    max-height: 260px;
    overflow-y: auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.cli-advisor-mention-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 10px;
    cursor: pointer;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    transition: background 0.08s ease;
}
.cli-advisor-mention-row:last-child {
    border-bottom: none;
}
.cli-advisor-mention-row:hover,
.cli-advisor-mention-row.is-selected {
    background: rgba(59, 130, 246, 0.15);
}
.cli-advisor-mention-name {
    font-family: monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-bright);
}
.cli-advisor-mention-blurb {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.35;
}

/* Pass cards (stance:pass) — visually de-emphasised from real answers:
 * smaller, greyer, no severity pill. Lives inside the pass-expander so it
 * only shows when the user explicitly opens it. */
.cli-advisor-ask-card.is-pass {
    border-left-color: #6b7280;
    opacity: 0.72;
    background: transparent;
}
.cli-advisor-ask-card.is-pass .cli-advisor-ask-card-name {
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.2px;
}
.cli-advisor-ask-card.is-pass .cli-advisor-ask-card-body {
    font-size: 11px;
    line-height: 1.35;
    color: var(--text-muted);
    font-style: italic;
}
.cli-advisor-ask-card-pill.is-pass {
    background: rgba(148, 163, 184, 0.15);
    color: var(--text-muted);
    text-transform: lowercase;
    letter-spacing: 0.2px;
}

/* Pass expander — the "N experts passed — expand to see why" row. */
.cli-advisor-ask-pass-details {
    border-top: 1px dashed var(--border);
    padding-top: 6px;
    margin-top: 2px;
}
.cli-advisor-ask-pass-details[open] {
    padding-bottom: 4px;
}
.cli-advisor-ask-pass-summary {
    cursor: pointer;
    font-size: 11px;
    color: var(--text-muted);
    padding: 4px 6px;
    border-radius: 3px;
    user-select: none;
    list-style: none;
}
.cli-advisor-ask-pass-summary::-webkit-details-marker {
    display: none;
}
.cli-advisor-ask-pass-summary::before {
    content: '\25B8'; /* right-pointing triangle */
    display: inline-block;
    margin-right: 6px;
    transition: transform 0.12s ease;
    font-size: 9px;
    color: var(--text-muted);
}
.cli-advisor-ask-pass-details[open] .cli-advisor-ask-pass-summary::before {
    transform: rotate(90deg);
}
.cli-advisor-ask-pass-summary:hover {
    background: rgba(148, 163, 184, 0.08);
    color: var(--text-bright);
}
.cli-advisor-ask-pass-grid {
    margin-top: 4px;
    gap: 4px;
}

/* All-passed empty state — shown when zero weigh-ins and no errors. */
.cli-advisor-ask-panel-allpass {
    padding: 12px;
    border: 1px dashed var(--border);
    border-radius: 4px;
    background: rgba(148, 163, 184, 0.05);
}
.cli-advisor-ask-panel-allpass code {
    padding: 0 3px;
    font-size: 10px;
    border-radius: 3px;
    background: var(--bg-secondary);
    color: var(--text-bright);
}
/* === END WAVE 3 λ advisor polish === */

/* Visual state for the Advisors toggle button */
.btn.btn-active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.cli-panel-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.cli-files-panel, .cli-main-panel, .cli-history-panel {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cli-dropzone {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 260px;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 8px;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.cli-dropzone.drag-over {
    background: var(--accent-dim);
    border-color: var(--accent);
}
.cli-dropzone-hint {
    text-align: center;
    font-size: 11px;
    color: var(--text-muted);
    padding: 4px 0;
    margin-top: auto;
}

.cli-file-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    cursor: pointer;
    border-radius: 4px;
}
.cli-file-row:hover { background: var(--bg-secondary); }
.cli-file-check { flex-shrink: 0; }
.cli-file-name {
    flex: 1;
    color: var(--text-bright);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cli-file-size { flex-shrink: 0; }

/* Delete button on each attachment row — hidden until hover to keep the
 * panel uncluttered, turns red on hover. Right-click opens the richer
 * context menu (delete/download/preview). */
.cli-file-delete {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.cli-file-row:hover .cli-file-delete { opacity: 0.7; }
.cli-file-delete:hover {
    opacity: 1;
    color: #ef4444;
    background: rgba(239,68,68,0.1);
}
.context-menu.is-cli-attachment button.is-danger { color: #ef4444; }

#cli-instructions {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    color: var(--text-bright);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
}

.cli-output-area {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ---- Terminal-style conversation output ---- */
/* Real-terminal aesthetic: near-black background, monospace 13px,
   line-height 1.5, fills available height. The terminal is wrapped in
   a `.cli-terminal-shell` flex container that holds output + paste
   preview + complexity hint + integrated input row. */
.cli-terminal-shell {
    background: #0a0a0a;
    border: 1px solid #1f1f23;
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 500px;
    overflow: hidden;
    transition: box-shadow 0.15s ease;
}
.cli-terminal-shell.drag-over {
    box-shadow: inset 0 0 0 2px var(--accent);
}
.cli-terminal {
    background: #0a0a0a;
    color: #d4d4d8;
    padding: 14px 16px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.5;
    /* Ensure auto-scroll-to-bottom feels stable */
    scroll-behavior: smooth;
}

.cli-terminal-empty {
    color: #71717a;
    font-style: italic;
    padding: 24px 8px;
    text-align: center;
}

.cli-term-turn {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px dashed rgba(255,255,255,0.08);
}
.cli-term-turn:last-child { border-bottom: none; margin-bottom: 0; }

.cli-term-prompt {
    display: flex;
    gap: 8px;
    align-items: baseline;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.cli-term-prompt-sign {
    color: #10b981;
    font-weight: 700;
    flex-shrink: 0;
}
.cli-term-prompt-text {
    color: #e4e4e7;
    font-weight: 500;
    word-break: break-word;
    flex: 1;
    min-width: 0;
}
.cli-term-status-running {
    color: #f59e0b;
    font-size: 11px;
    animation: cli-status-pulse 2s ease-in-out infinite;
}
.cli-term-status-failed,
.cli-term-status-cancelled,
.cli-term-status-interrupted {
    color: #ef4444;
    font-size: 11px;
}

.cli-term-tool {
    background: rgba(255,255,255,0.04);
    border-left: 2px solid rgba(255,255,255,0.2);
    padding: 3px 8px;
    margin: 4px 0 4px 14px;
    font-size: 11.5px;
    border-radius: 2px;
}
.cli-term-tool.is-ok     { border-left-color: #10b981; }
.cli-term-tool.is-err    { border-left-color: #ef4444; }
.cli-term-tool.is-pending { border-left-color: #f59e0b; }
.cli-term-tool summary {
    cursor: pointer;
    display: flex;
    gap: 8px;
    align-items: center;
    color: #a1a1aa;
    list-style: none;
    user-select: none;
}
.cli-term-tool summary::-webkit-details-marker { display: none; }
.cli-term-tool summary::before {
    content: '▶';
    font-size: 9px;
    color: #71717a;
    width: 10px;
    flex-shrink: 0;
    transition: transform 0.12s ease;
}
.cli-term-tool[open] summary::before { transform: rotate(90deg); }
.cli-term-tool-mark {
    width: 14px;
    flex-shrink: 0;
    text-align: center;
    color: #a1a1aa;
}
.cli-term-tool.is-ok .cli-term-tool-mark  { color: #10b981; }
.cli-term-tool.is-err .cli-term-tool-mark { color: #ef4444; }
.cli-term-tool-name {
    color: #60a5fa;
    font-weight: 600;
    flex-shrink: 0;
}
.cli-term-tool-input {
    color: #a1a1aa;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.cli-term-tool-result {
    color: #d4d4d8;
    margin: 6px 0 2px 22px;
    padding: 6px 10px;
    white-space: pre-wrap;
    word-wrap: break-word;
    background: rgba(0,0,0,0.3);
    border-left: 1px solid rgba(255,255,255,0.1);
    border-radius: 2px;
    max-height: 400px;
    overflow-y: auto;
    font-family: var(--mono);
    font-size: 11.5px;
}
.cli-term-tool-input-full {
    margin: 4px 0 0 22px;
    padding: 4px 8px;
    font-family: var(--mono);
    font-size: 11px;
    color: #94a3b8;
    background: rgba(255,255,255,0.02);
    border-radius: 2px;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 160px;
    overflow-y: auto;
}
.cli-term-tool.is-running {
    border-left-color: #60a5fa;
}
.cli-term-tool.is-running .cli-term-tool-mark {
    color: #60a5fa;
    animation: cli-status-pulse 1.2s ease-in-out infinite;
}

/* Thinking block — dashed purple accent so reasoning stands apart from
 * tool calls + text. Collapsible, default-closed so it doesn't dominate
 * the terminal. Streaming deltas append to the body while is-pending. */
.cli-term-thinking {
    margin: 4px 0 4px 14px;
    padding: 3px 8px;
    background: rgba(139,92,246,0.06);
    border-left: 2px dashed rgba(139,92,246,0.5);
    border-radius: 2px;
    font-size: 11.5px;
}
.cli-term-thinking summary {
    cursor: pointer;
    display: flex;
    gap: 8px;
    align-items: center;
    color: #c4b5fd;
    list-style: none;
    user-select: none;
}
.cli-term-thinking summary::-webkit-details-marker { display: none; }
.cli-term-thinking summary::before {
    content: '\25B6';
    font-size: 9px;
    color: #8b5cf6;
    width: 10px;
    flex-shrink: 0;
    transition: transform 0.12s ease;
}
.cli-term-thinking[open] summary::before { transform: rotate(90deg); }
.cli-term-thinking-mark { flex-shrink: 0; }
.cli-term-thinking-title { color: #c4b5fd; flex-shrink: 0; }
.cli-term-thinking.is-pending .cli-term-thinking-title {
    animation: cli-status-pulse 1.5s ease-in-out infinite;
}
.cli-term-thinking-body {
    color: #ddd6fe;
    margin-top: 6px;
    padding: 6px 10px;
    font-family: var(--mono);
    font-size: 11px;
    font-style: italic;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 320px;
    overflow-y: auto;
    background: rgba(0,0,0,0.2);
    border-radius: 2px;
}

.cli-term-output {
    margin: 6px 0 0 0;
    color: #e4e4e7;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: var(--mono);
    font-size: 12.5px;
}

.cli-term-files-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
.cli-term-file-chip {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    background: rgba(96,165,250,0.12);
    color: #60a5fa;
    border-radius: 3px;
}

/* Legacy output stream (kept for any lingering callers). Terminal above
   is the primary renderer now. */
.cli-output-stream {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px;
    max-height: 360px;
    overflow-y: auto;
    font-size: 12px;
}

/* ---- Files panel (browse entire workdir) ---- */
/* Collapsible section under the terminal. Sections by subdir (outputs,
   inputs, workdir, root). Drop anywhere inside to upload into inputs/. */
.cli-files-browser {
    margin-top: 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.cli-files-browser-summary {
    cursor: pointer;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--text-bright);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    list-style: none;
    user-select: none;
}
.cli-files-browser-summary::-webkit-details-marker { display: none; }
.cli-files-browser-summary::before {
    content: '▶';
    font-size: 10px;
    margin-right: 6px;
    color: var(--text-muted);
    transition: transform 0.12s ease;
}
.cli-files-browser[open] .cli-files-browser-summary::before {
    transform: rotate(90deg);
}
.cli-files-browser-hint {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 400;
}
.cli-files-browser-body {
    padding: 4px 0 8px;
    border-top: 1px dashed var(--border);
    transition: background 0.15s ease;
}
.cli-files-browser-body.drag-over {
    background: var(--accent-dim);
    box-shadow: inset 0 0 0 2px var(--accent);
}

.cli-files-section {
    padding: 4px 0;
}
.cli-files-section-label {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 14px 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cli-files-section-name { color: var(--accent); }
.cli-files-section-desc { font-weight: 400; text-transform: none; letter-spacing: 0; }
.cli-files-section-count { margin-left: auto; font-weight: 400; }

.cli-file-row-browse {
    display: grid;
    grid-template-columns: 20px 1fr auto auto;
    gap: 8px;
    align-items: center;
    padding: 4px 14px;
    font-size: 12.5px;
    border-bottom: 1px solid transparent;
}
.cli-file-row-browse:hover {
    background: var(--bg-secondary);
}
.cli-file-icon {
    flex-shrink: 0;
    text-align: center;
}
.cli-file-row-browse .cli-file-name {
    color: var(--text-bright);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    font-family: var(--mono);
}
.cli-file-meta {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}
.cli-file-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.cli-preview-text {
    background: #0b0d10;
    color: #e4e4e7;
    padding: 12px 14px;
    border-radius: var(--radius);
    max-height: 60vh;
    overflow: auto;
    font-family: var(--mono);
    font-size: 12.5px;
    white-space: pre-wrap;
    word-break: break-word;
}

.cli-prompt-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 12px;
}

/* ---- Integrated terminal input row (inside the shell) ---- */
/* No visible Execute rectangle dominating the terminal — just a textarea
   that feels like typing in a shell, with subtle pill buttons below. */
.cli-input-shell {
    background: #0a0a0a;
    border-top: 1px solid #1f1f23;
    padding: 8px 12px 10px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cli-input-shell textarea {
    width: 100%;
    background: transparent;
    color: #f4f4f5;
    border: none;
    outline: none;
    box-shadow: none;
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.5;
    padding: 4px 0;
    resize: none;
    min-height: 38px;
    max-height: 200px;
}
.cli-input-shell textarea::placeholder { color: #52525b; }
.cli-input-shell .cli-input-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 11px;
    color: #71717a;
}
.cli-input-shell .cli-input-actions .btn-link {
    background: transparent;
    border: 1px solid transparent;
    color: #a1a1aa;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    cursor: pointer;
    line-height: 1.4;
}
.cli-input-shell .cli-input-actions .btn-link:hover {
    background: rgba(255,255,255,0.06);
    color: #e4e4e7;
    border-color: rgba(255,255,255,0.12);
}
.cli-input-shell .cli-input-actions .btn-link.is-primary {
    color: #10b981;
    border-color: rgba(16,185,129,0.3);
}
.cli-input-shell .cli-input-actions .btn-link.is-primary:hover {
    background: rgba(16,185,129,0.12);
    border-color: rgba(16,185,129,0.5);
}
.cli-input-shell .cli-input-spacer { flex: 1; }
.cli-input-shell .cli-input-hint {
    color: #52525b;
    font-size: 10px;
    font-family: var(--mono);
}
.cli-input-shell #cli-status,
.cli-input-shell #cli-pip-status-inline {
    color: #a1a1aa;
    font-size: 11px;
}

/* ---- Pasted-screenshot preview chips ---- */
.cli-paste-preview {
    background: #18181b;
    border-top: 1px solid #1f1f23;
    padding: 6px 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex-shrink: 0;
}
.cli-paste-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    background: rgba(96,165,250,0.12);
    color: #93c5fd;
    border: 1px solid rgba(96,165,250,0.3);
    border-radius: 12px;
    font-size: 11px;
    font-family: var(--mono);
}
.cli-paste-chip-remove {
    background: none;
    border: none;
    color: #93c5fd;
    cursor: pointer;
    font-size: 14px;
    padding: 0 2px;
    line-height: 1;
}
.cli-paste-chip-remove:hover { color: #f87171; }

/* ---- Prompt complexity hint (heuristic, dismissible) ---- */
.cli-complexity-hint {
    background: rgba(245,158,11,0.10);
    border-top: 1px solid rgba(245,158,11,0.3);
    color: #fbbf24;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-shrink: 0;
}
.cli-complexity-hint-body { flex: 1; }
.cli-complexity-hint-body strong { color: #fde68a; }
.cli-complexity-hint-body code {
    background: rgba(0,0,0,0.4);
    padding: 1px 4px;
    border-radius: 2px;
    font-family: var(--mono);
    font-size: 11px;
    color: #fef3c7;
}
.cli-complexity-hint-dismiss {
    background: none;
    border: none;
    color: #fbbf24;
    cursor: pointer;
    font-size: 16px;
    padding: 0 2px;
    line-height: 1;
}
.cli-complexity-hint-dismiss:hover { color: #fde68a; }

/* ---- Staging confirmation line in terminal ---- */
.cli-term-staging {
    color: #10b981;
    padding: 4px 0 8px;
    font-size: 12px;
    border-bottom: 1px dashed rgba(16,185,129,0.3);
    margin-bottom: 12px;
    white-space: pre-wrap;
}
.cli-term-staging.is-ok    { color: #10b981; border-color: rgba(16,185,129,0.3); }
.cli-term-staging.is-empty { color: #94a3b8; border-color: rgba(148,163,184,0.3); }
.cli-term-staging.is-warn  { color: #f59e0b; border-color: rgba(245,158,11,0.4); }
.cli-term-staging.is-error { color: #ef4444; border-color: rgba(239,68,68,0.5); font-weight: 600; }

/* Failure diagnostic panel — appears below a failed turn in the terminal.
 * Red accent, concise header with error_reason, optional max-turns hint,
 * collapsible stderr + stdout tails. Keeps the default view short (one
 * line) with full detail one click away. */
.cli-term-failure {
    margin: 8px 0 4px 14px;
    padding: 10px 12px;
    border-left: 3px solid #ef4444;
    background: rgba(239,68,68,0.08);
    border-radius: 2px;
    font-size: 12px;
    color: #fca5a5;
}
.cli-term-fail-header {
    font-size: 12.5px;
    color: #fee2e2;
    margin-bottom: 6px;
    line-height: 1.45;
}
.cli-term-fail-header strong { color: #fca5a5; }
.cli-term-fail-hint {
    margin: 4px 0 8px 0;
    padding: 5px 8px;
    background: rgba(245,158,11,0.1);
    border-left: 2px solid #f59e0b;
    color: #fcd34d;
    font-size: 11.5px;
    border-radius: 2px;
}
.cli-term-fail-line {
    color: #fca5a5;
    font-size: 11.5px;
    margin: 3px 0;
}
.cli-term-fail-line code {
    background: rgba(0,0,0,0.3);
    padding: 1px 6px;
    border-radius: 2px;
    color: #fde68a;
    font-family: var(--mono);
}
.cli-term-fail-details {
    margin: 6px 0 2px 0;
    color: #fca5a5;
}
.cli-term-fail-details summary {
    cursor: pointer;
    color: #f87171;
    font-size: 11.5px;
    user-select: none;
    padding: 2px 0;
}
.cli-term-fail-details summary::-webkit-details-marker { color: #f87171; }
.cli-term-fail-pre {
    margin: 6px 0 2px 0;
    padding: 8px;
    background: #1c0a0a;
    color: #fecaca;
    font-family: var(--mono);
    font-size: 11.5px;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 240px;
    overflow-y: auto;
    border-radius: 2px;
    border: 1px solid rgba(239,68,68,0.25);
}

/* Always-visible "Produced files" empty state — beats the user wondering
   "did the turn even produce anything?" with no signal at all. */
.cli-output-empty {
    color: var(--text-muted);
    font-size: 12px;
    padding: 8px 0;
    font-style: italic;
}

/* Collapsible "📁 Files in working directory" section beneath produced files. */
.cli-workdir-collapsible {
    margin-top: 12px;
    border-top: 1px dashed var(--border);
    padding-top: 8px;
}
.cli-workdir-collapsible > summary {
    cursor: pointer;
    font-size: 12px;
    color: var(--text-muted);
    padding: 4px 0;
}
.cli-workdir-collapsible > summary:hover {
    color: var(--text);
}
.cli-workdir-collapsible-body {
    padding-top: 8px;
}
.cli-workdir-section {
    margin-bottom: 8px;
}
.cli-workdir-section-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    padding: 4px 0;
}

/* Advisor card on/off toggle — small switch in each card's header. */
.cli-advisor-toggle {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 16px;
    margin-left: 4px;
    cursor: pointer;
}
.cli-advisor-toggle input { opacity: 0; width: 0; height: 0; }
.cli-advisor-toggle-track {
    position: absolute;
    inset: 0;
    background: var(--border);
    border-radius: 8px;
    transition: background 0.15s;
}
.cli-advisor-toggle-track::before {
    content: '';
    position: absolute;
    height: 12px; width: 12px;
    left: 2px; top: 2px;
    background: white;
    border-radius: 50%;
    transition: transform 0.15s;
}
.cli-advisor-toggle input:checked + .cli-advisor-toggle-track {
    background: #10b981;
}
.cli-advisor-toggle input:checked + .cli-advisor-toggle-track::before {
    transform: translateX(12px);
}
.cli-advisor-card.is-off {
    opacity: 0.55;
}
.cli-advisor-card-action {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    padding: 2px 4px;
    margin-left: 2px;
}
.cli-advisor-card-action:hover { color: var(--text); }
.cli-advisor-card.is-placeholder:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent);
}

/* Forge Outputs repository — appears at the top of the Documents tab.
   One row per session showing mode, status, dates + Document/Transcript links. */
.forge-output-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.forge-output-row {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    background: var(--bg-tertiary);
}
.forge-output-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 4px;
}
.forge-output-mode {
    font-weight: 600;
    text-transform: capitalize;
}
.forge-output-status {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--border);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.forge-output-status.is-ok    { background: rgba(16,185,129,0.15); color: #10b981; }
.forge-output-status.is-warn  { background: rgba(245,158,11,0.15); color: #f59e0b; }
.forge-output-status.is-error { background: rgba(239,68,68,0.15); color: #ef4444; }
.forge-output-preview {
    font-size: 12px;
    color: var(--text-muted);
    margin: 4px 0 8px;
    font-style: italic;
}
.forge-output-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* ---- PiP input row (floating window's own terminal input) ---- */
.cli-pip-input-row {
    border-top: 1px solid var(--border);
    background: var(--bg-tertiary);
    padding: 8px 10px;
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-shrink: 0;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.cli-pip-input-row.drag-over {
    background: var(--accent-dim);
    box-shadow: inset 0 0 0 2px var(--accent);
}
.cli-pip-input-row textarea {
    flex: 1;
    padding: 8px 10px;
    font-size: 12.5px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-bright);
    font-family: inherit;
    resize: vertical;
    min-height: 36px;
}
.cli-pip-input-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}
.cli-prompt-row textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    color: var(--text-bright);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
}

.cli-panel-hint {
    padding: 4px 8px 6px;
    line-height: 1.4;
}

.cli-output-text {
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-primary);
    margin: 0;
}

.cli-tool-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: var(--bg-secondary);
    border-left: 2px solid var(--accent);
    margin: 4px 0;
    font-size: 11px;
    font-family: var(--mono);
    color: var(--text-muted);
    word-break: break-all;
}
.cli-tool-name {
    color: var(--accent);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.cli-tool-input {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cli-tool-result { flex-shrink: 0; }

.cli-output-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 10px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
    margin-top: 6px;
    font-size: 13px;
    color: var(--text-bright);
}
.cli-output-file-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.cli-output-file-name {
    font-family: var(--mono);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}
.cli-output-badge {
    flex-shrink: 0;
    font-size: 11px;
    padding: 1px 8px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-weight: 500;
}
.cli-output-badge.is-ok      { color: #10b981; background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.3); }
.cli-output-badge.is-partial { color: #f59e0b; background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.3); }
.cli-output-badge.is-error   { color: #ef4444; background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.3); }
.cli-output-empty-hint {
    flex-basis: 100%;
    font-size: 11.5px;
    color: #f59e0b;
    margin: 2px 0 0 22px;
}
.btn.btn-danger {
    color: #fca5a5;
    border: 1px solid rgba(239,68,68,0.3);
    background: rgba(239,68,68,0.08);
}
.btn.btn-danger:hover {
    color: #fff;
    background: rgba(239,68,68,0.25);
    border-color: #ef4444;
}

.cli-history-panel { max-height: 520px; overflow-y: auto; }
.cli-history-item {
    padding: 8px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s ease;
}
.cli-history-item:hover { background: var(--bg-secondary); }
.cli-history-snippet {
    font-size: 12px;
    color: var(--text-primary);
    line-height: 1.4;
    margin: 4px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ---- The Architect chat panel ---- */
/* Lives inside .cli-side-panel-body when the Architect tab is active.
   Conversational, persistent, copy-to-terminal button on prompts. */
.cli-architect {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cli-architect-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 4px;
}
.cli-architect-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-bright);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cli-architect-msgs {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 2px;
    min-height: 0;
}
.cli-architect-msg {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.45;
}
.cli-architect-msg.is-user {
    background: var(--bg-primary);
    border-color: rgba(96,165,250,0.25);
}
.cli-architect-msg.is-assistant {
    background: var(--bg-secondary);
    border-left: 2px solid var(--accent);
}
.cli-architect-msg-role {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.cli-architect-msg-body {
    color: var(--text-primary);
    white-space: pre-wrap;
    word-wrap: break-word;
}
.cli-architect-msg-body code {
    background: rgba(0,0,0,0.3);
    padding: 1px 4px;
    border-radius: 2px;
    font-family: var(--mono);
    font-size: 11px;
}
.cli-architect-msg-body pre {
    background: #0a0a0a;
    color: #e4e4e7;
    padding: 8px 10px;
    border-radius: 4px;
    overflow-x: auto;
    margin: 6px 0;
    font-family: var(--mono);
    font-size: 11px;
    line-height: 1.4;
}
.cli-architect-msg-actions {
    margin-top: 6px;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.cli-architect-copy-btn {
    background: rgba(16,185,129,0.12);
    border: 1px solid rgba(16,185,129,0.3);
    color: #34d399;
    cursor: pointer;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 12px;
}
.cli-architect-copy-btn:hover {
    background: rgba(16,185,129,0.25);
}
/* Momentary "✓ Pasted" flash — 1.5s after click, then reverts. Signals
 * the user that the DOM write succeeded on HTTP origins where there's
 * no clipboard API feedback to rely on. */
.cli-architect-copy-btn.is-pasted {
    background: rgba(16,185,129,0.4);
    color: #fff;
    border-color: #10b981;
}
/* === WAVE 2 2C Architect grounding === source-citation chips +
 * slide-in source drawer. Chips render inline inside the message body
 * AND in a sources bar under each assistant message. Drawer slides in
 * from the right when a chip is clicked and shows the full indexed
 * chunk(s) for that source. */
.architect-cite-chip {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    margin: 0 2px;
    font-size: 10px;
    font-family: var(--font-mono, monospace);
    background: rgba(99,102,241,0.15);
    border: 1px solid rgba(99,102,241,0.45);
    color: #a5b4fc;
    border-radius: 10px;
    cursor: pointer;
    line-height: 1.3;
    vertical-align: baseline;
}
.architect-cite-chip:hover {
    background: rgba(99,102,241,0.3);
    color: #fff;
}
.architect-cite-chip--outline {
    background: transparent;
    color: #818cf8;
}
.architect-sources-bar {
    margin-top: 8px;
    padding: 6px 8px;
    font-size: 10px;
    border-top: 1px dashed rgba(255,255,255,0.1);
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.architect-sources-label {
    color: var(--text-muted, #94a3b8);
    font-size: 10px;
    margin-right: 4px;
}
.architect-source-drawer {
    position: fixed;
    right: 0;
    top: 0;
    height: 100vh;
    width: 520px;
    max-width: 90vw;
    background: var(--bg-panel, #0f172a);
    border-left: 1px solid var(--border);
    box-shadow: -8px 0 24px rgba(0,0,0,0.35);
    transform: translateX(105%);
    transition: transform 0.2s ease-out;
    z-index: 9999;
    display: flex;
    flex-direction: column;
}
.architect-source-drawer.is-open {
    transform: translateX(0);
}
.architect-source-drawer-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
}
.architect-source-drawer-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
    padding: 0 6px;
}
.architect-source-drawer-body {
    flex: 1;
    overflow: auto;
    padding: 12px 16px;
}
.architect-source-drawer-empty {
    color: var(--text-muted);
    font-style: italic;
}
.architect-source-chunk {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px dashed rgba(255,255,255,0.1);
}
.architect-source-chunk-title {
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 12px;
}
.architect-source-chunk-body {
    white-space: pre-wrap;
    font-size: 11px;
    line-height: 1.5;
    background: rgba(255,255,255,0.02);
    padding: 8px;
    border-radius: 4px;
    max-height: none;
}
/* === END WAVE 2 2C Architect grounding === */
.cli-architect-input {
    border-top: 1px solid var(--border);
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}
.cli-architect-input textarea {
    width: 100%;
    padding: 6px 8px;
    font-size: 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-bright);
    font-family: inherit;
    resize: vertical;
    min-height: 50px;
}
.cli-architect-input-row {
    display: flex;
    gap: 4px;
    align-items: center;
}
.cli-architect-status {
    flex: 1;
    font-size: 11px;
    color: var(--text-muted);
}
.cli-architect-empty {
    padding: 16px 8px;
    color: var(--text-muted);
    font-size: 12px;
    font-style: italic;
    text-align: center;
}

/* ---- Top-bar concurrent CLI conversation tabs ---- */
/* Live next to the CLIStatus badge. One tab per running/recent CLI run.
   Click → open that conversation's PiP. Close → dismiss. */
.cli-tab-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: 50vw;
}
.cli-tab-bar-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 11px;
    color: var(--text-bright);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    max-width: 240px;
    transition: background 0.12s ease;
}
.cli-tab-bar-item:hover { background: var(--hover); }
.cli-tab-bar-item.is-running {
    border-left: 3px solid #f59e0b;
    animation: cli-status-pulse 2s ease-in-out infinite;
}
.cli-tab-bar-item.is-complete { border-left: 3px solid #10b981; }
.cli-tab-bar-item.is-failed { border-left: 3px solid #ef4444; }
.cli-tab-bar-icon { flex-shrink: 0; }
.cli-tab-bar-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}
.cli-tab-bar-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    padding: 0 2px;
    line-height: 1;
    margin-left: 2px;
}
.cli-tab-bar-close:hover { color: var(--color-danger); }

/* ---- OPAQUE DROPDOWNS (global fix for translucency bug) ---- */
/* Every dropdown / popup / floating panel gets an opaque background so
   the text underneath does not bleed through. We override translucent
   `--card` / `--bg-secondary` defaults that some panels relied on. */
.cli-status-dropdown,
.usage-dropdown,
.notif-dropdown-inner,
.cli-history-dropdown,
.api-budget-dropdown,
.cmd-palette,
.pe-slash-menu,
.context-menu,
.popover,
.dropdown-panel,
.pip-bubble {
    background: var(--bg) !important;
    backdrop-filter: none !important;
}
/* Some themes set --card translucent. Force a solid layer here. */
[data-theme="dark"] .cli-status-dropdown,
[data-theme="dark"] .usage-dropdown,
[data-theme="dark"] .notif-dropdown-inner,
[data-theme="dark"] .cli-history-dropdown,
[data-theme="dark"] .cmd-palette,
[data-theme="dark"] .pe-slash-menu,
[data-theme="dark"] .pip-bubble {
    background: #0f1419 !important;
}
[data-theme="light"] .cli-status-dropdown,
[data-theme="light"] .usage-dropdown,
[data-theme="light"] .notif-dropdown-inner,
[data-theme="light"] .cli-history-dropdown,
[data-theme="light"] .cmd-palette,
[data-theme="light"] .pe-slash-menu,
[data-theme="light"] .pip-bubble {
    background: #ffffff !important;
}

/* ---- FLOATING WINDOWS (PiP) ---- */
/* Generic system powering the agent bubbles (PM/Support/Coach) and the
   CLI Workspace pop-out. Drag + resize handled in JS (see PiP module in
   app.js). `resize: both` is NOT used because the default browser grip
   is hard to hit; we render an explicit resize corner instead. */

.pip-bubble {
    position: fixed;
    width: 700px;
    height: 500px;
    background: var(--card);
    border: 2px solid var(--accent);
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0,0,0,0.35);
    display: flex;
    flex-direction: column;
    z-index: 2000;
    overflow: hidden;
    min-width: 500px;
    min-height: 350px;
    max-width: 80vw;
    max-height: 80vh;
}

.pip-bubble.pip-minimized {
    width: 180px !important;
    height: 44px !important;
    min-width: 44px;
    min-height: 44px;
    border-radius: 22px;
    cursor: pointer;
    overflow: hidden;
    background: var(--card);
}
.pip-bubble.pip-minimized .pip-header,
.pip-bubble.pip-minimized .pip-body,
.pip-bubble.pip-minimized .pip-resize {
    display: none;
}
.pip-bubble.pip-minimized .pip-mini-status {
    display: flex !important;
}

.pip-header {
    padding: 8px 12px;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: move;
    user-select: none;
    flex-shrink: 0;
}
.pip-title {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pip-icon { flex-shrink: 0; }

.pip-controls { display: flex; gap: 4px; }
.pip-controls .pip-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.pip-controls .pip-btn:hover { background: rgba(255,255,255,0.35); }

.pip-body {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Resize handle — bottom-right corner, diagonal-striped, grabby cursor. */
.pip-resize {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 16px;
    height: 16px;
    cursor: nwse-resize;
    background:
        linear-gradient(135deg,
            transparent 0%, transparent 50%,
            var(--text-muted) 50%, var(--text-muted) 60%,
            transparent 60%, transparent 70%,
            var(--text-muted) 70%, var(--text-muted) 80%,
            transparent 80%);
    opacity: 0.5;
    border-bottom-right-radius: 10px;
    z-index: 2;
}
.pip-resize:hover { opacity: 1; }

/* Minimized pill: small icon + short status text ("⚙️ Working..."). */
.pip-mini-status {
    display: none;
    align-items: center;
    gap: 6px;
    width: 100%;
    height: 100%;
    padding: 0 10px;
    font-size: 12px;
    color: var(--text-bright);
}
.pip-mini-icon {
    width: 28px;
    height: 28px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    flex-shrink: 0;
}
.pip-mini-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Inside-PiP conventions: messages, input, etc. ---- */
/* Chat-style PiP bodies (PM/Support/Coach agent bubbles) */
.pip-body .pip-messages {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pip-body .pip-msg {
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12px;
    max-width: 85%;
    word-break: break-word;
    line-height: 1.4;
}
.pip-body .pip-user { align-self: flex-end; background: var(--accent); color: #fff; }
.pip-body .pip-assistant { align-self: flex-start; background: var(--hover); }
.pip-body .pip-input-area {
    padding: 8px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.pip-body .pip-input-area input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text);
    font-size: 12px;
}
.pip-body .pip-input-area button {
    padding: 6px 10px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}


/* ---- GHOST TEXT (auto-draft) ---- */

.ghost-text {
    color: var(--text-muted);
    opacity: 0.5;
    font-style: italic;
}
.ghost-text::before { content: ''; }
input.has-ghost::placeholder { color: var(--text-muted); opacity: 0.4; font-style: italic; }


/* ---- AI SYSTEMS PANEL ---- */

.ai-panel {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}
.ai-panel h3 { color: var(--text-bright); margin-bottom: 12px; }
.ai-status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.ai-status-row:last-child { border-bottom: none; }
.ai-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}
.ai-dot-green { background: var(--green); }
.ai-dot-yellow { background: var(--yellow); }
.ai-dot-red { background: var(--red); }
.ai-dot-grey { background: var(--text-muted); }


/* ---- PORTAL ---- */

.portal-layout { min-height: 100vh; }
.portal-nav {
    display: flex; align-items: center; gap: 16px;
    padding: 12px 24px; border-bottom: 1px solid var(--border);
    background: var(--card);
}
.portal-brand { font-weight: 700; font-size: 16px; color: var(--accent); text-decoration: none; }
.portal-nav-links { display: flex; gap: 12px; flex: 1; }
.portal-nav-links a { color: var(--text); text-decoration: none; font-size: 13px; padding: 4px 8px; border-radius: 4px; }
.portal-nav-links a:hover { background: var(--hover); }
.portal-user { font-size: 12px; color: var(--text-muted); }
.portal-user a { color: var(--text-muted); }
.portal-main { max-width: 800px; margin: 0 auto; padding: 24px; }
.portal-title { color: var(--text-bright); margin-bottom: 20px; font-size: 22px; }

.portal-auth { display: flex; justify-content: center; align-items: center; min-height: 80vh; }
.portal-auth-box { width: 320px; padding: 32px; background: var(--card); border-radius: 12px; border: 1px solid var(--border); }
.portal-auth-box h2 { color: var(--text-bright); margin-bottom: 20px; font-size: 18px; }

.portal-section { margin-bottom: 24px; }
.portal-section h3 { color: var(--text-bright); font-size: 15px; margin-bottom: 10px; }
.portal-card-row {
    padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
    margin-bottom: 6px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    cursor: pointer; transition: background 0.12s;
}
.portal-card-row:hover { background: var(--hover); }
.portal-task-title { font-weight: 500; color: var(--text-bright); }
.portal-project-name { font-weight: 500; color: var(--text-bright); flex: 1; }

.portal-tabs { display: flex; gap: 4px; margin-bottom: 16px; }
.portal-tab {
    padding: 6px 14px; border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg); color: var(--text); cursor: pointer; font-size: 13px;
}
.portal-tab:hover { background: var(--hover); }
.portal-tab-content { min-height: 100px; }

@media (max-width: 640px) {
    .portal-nav { flex-wrap: wrap; padding: 10px 16px; }
    .portal-nav-links { order: 3; width: 100%; }
    .portal-main { padding: 16px; }
}

/* Context menu */
.ctx-menu {
    position: fixed;
    z-index: 2000;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    min-width: 180px;
}
.ctx-item {
    padding: 7px 14px;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
}
.ctx-item:hover {
    background: var(--bg-tertiary);
}
.ctx-danger {
    color: var(--red);
}
.ctx-sep {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

/* Person picker modal rows */
.person-pick-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: var(--radius);
    cursor: pointer;
}
.person-pick-row:hover {
    background: var(--bg-tertiary);
}

/* Reports-to column in people list */
.people-mgr-col {
    min-width: 100px;
}
.people-mgr-link {
    color: var(--accent);
    text-decoration: none;
    font-size: 12px;
}
.people-mgr-link:hover { text-decoration: underline; }
.people-mgr-set {
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
}
.people-mgr-set:hover { color: var(--accent); }

/* Inline gear next to the portal-status badge on the People list.
   Click jumps to the user hub for managing reset/invite/disable. */
.people-portal-link {
    color: var(--text-muted);
    cursor: pointer;
    margin-left: 4px;
    font-size: 11px;
}
.people-portal-link:hover { color: var(--accent); }

/* Online indicator — small green dot prefixed to a person's name
   when they have an active portal session. Pulse animation tells
   the eye it's a live state, not a static badge. */
.online-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    margin-right: 6px;
    vertical-align: middle;
    box-shadow: 0 0 0 0 rgba(64, 192, 87, 0.7);
    animation: online-pulse 2s ease-in-out infinite;
}
@keyframes online-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(64, 192, 87, 0.6); }
    70%  { box-shadow: 0 0 0 6px rgba(64, 192, 87, 0); }
    100% { box-shadow: 0 0 0 0 rgba(64, 192, 87, 0); }
}

/* Bridge */
.bridge-hat-filter {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 4px;
    background: transparent;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.2s;
}
.bridge-hat-filter.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.bridge-hat-filter:hover:not(.active) {
    background: var(--bg-secondary);
}
#brainstorm-input {
    min-height: 80px;
    border: 1px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-primary);
    padding: 8px;
    border-radius: 4px;
}
#brainstorm-input:focus {
    outline: none;
    border-color: var(--accent);
}
@media (max-width: 768px) {
    .grid-2 {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   2026-04-16 batch — Company Tab, Properties, Mentions, Trash,
   xterm.js terminal, Add Person modal, attachment X delete.
   ============================================================ */

.company-link {
    color: var(--text-bright);
    text-decoration: none;
}
.company-link:hover { text-decoration: underline; color: var(--accent); }
.company-edit-field {
    outline: none;
    border-radius: 4px;
    padding: 2px 4px;
}
.company-edit-field:focus {
    background: var(--bg-secondary);
    box-shadow: inset 0 0 0 1px var(--accent);
}

.props-card {
    border: 1px solid var(--border);
    background: var(--card, var(--bg-secondary));
    border-radius: 8px;
    padding: 16px;
}
.props-grid {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 8px 16px;
    align-items: center;
}
.props-grid.collapsed { display: none; }
.props-grid label { color: var(--text-muted); font-size: 13px; }
.props-grid input,
.props-grid select {
    padding: 4px 8px;
    border: 1px solid var(--border);
    background: var(--bg, var(--bg-primary));
    color: var(--text, var(--text-primary));
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}
.tag-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.tag-chip {
    background: var(--accent);
    color: #fff;
    padding: 2px 6px;
    border-radius: 12px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.tag-chip button {
    background: rgba(255,255,255,0.3);
    border: none;
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    width: 14px; height: 14px;
    font-size: 10px;
    line-height: 1;
}
.custom-field-row {
    display: grid;
    grid-template-columns: minmax(80px, auto) 1fr auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 4px;
}
.custom-field-add {
    display: flex;
    gap: 6px;
    align-items: center;
}
.custom-field-add input { flex: 1; }

.add-person-results { border: 1px solid var(--border); border-radius: 4px; }
.add-person-result {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
}
.add-person-result:last-child { border-bottom: none; }
.add-person-result:hover { background: var(--bg-secondary); }

.trash-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--border);
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 6px;
    background: var(--card, var(--bg-secondary));
}
.btn-tiny { font-size: 11px; padding: 2px 8px; }
.btn-danger {
    background: var(--color-danger, #b91c1c);
    color: #fff;
    border: none;
}

.tab-bar {
    display: flex;
    gap: 16px;
    border-bottom: 1px solid var(--border);
}
.tab-bar .tab {
    padding: 6px 0;
    margin-bottom: -1px;
    cursor: pointer;
    text-decoration: none;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
}
.tab-bar .tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.attachment-item { position: relative; }
.attachment-delete {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 22px; height: 22px;
    cursor: pointer;
    /* Was opacity: 0 (only visible on hover) — invisible on touch
       devices and easy to miss on desktop. Keep a faint baseline so
       the affordance is always discoverable; brighten to full opacity
       on hover. */
    opacity: 0.45;
    transition: opacity 0.15s;
    line-height: 1;
}
.attachment-item:hover .attachment-delete { opacity: 1; }
.attachment-delete:hover { background: var(--color-danger, #b91c1c); }

/* Generic loading state. Used everywhere we render a "Loading…"
   placeholder while async data fetches. Adds a small spinner before
   the text so the user gets a visual that something is in flight,
   not just stale text. Use as `<div class="loading">Loading…</div>`. */
.loading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 13px;
}
.loading::before {
    content: "";
    width: 12px;
    height: 12px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: loading-spin 700ms linear infinite;
    flex-shrink: 0;
}
@keyframes loading-spin {
    to { transform: rotate(360deg); }
}

/* Used in dozens of places (captures tabs, admin actions, modal footers,
   button rows). Was never actually defined — worked by accident when a
   parent provided display:flex. Adding a proper definition with
   flex-wrap so button groups don't blow up the layout on narrow
   viewports. */
.row-flex {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* Toast container — top-right, stacks downward. Cleared from the
   FAB + shortcut hint (which both live bottom-right). */
.toast-container {
    position: fixed;
    top: 64px;
    right: 20px;
    z-index: 10005;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    max-width: min(420px, calc(100vw - 40px));
}
.toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 10px 14px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    font-size: 13px;
    line-height: 1.4;
    animation: toast-in 200ms ease;
}
.toast-success { border-left-color: var(--green); }
.toast-error   { border-left-color: var(--red); }
.toast-warn    { border-left-color: var(--yellow); }
.toast-icon {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-bright);
    flex-shrink: 0;
}
.toast-success .toast-icon { color: var(--green); }
.toast-error   .toast-icon { color: var(--red); }
.toast-warn    .toast-icon { color: var(--yellow); }
.toast-msg { flex: 1; word-wrap: break-word; }
.toast-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0 4px;
    flex-shrink: 0;
}
.toast-close:hover { color: var(--text-bright); }
.toast-action {
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
    flex-shrink: 0;
}
.toast-action:hover {
    background: var(--accent);
    color: white;
}

/* List navigation cursor (Gmail/Linear style j/k). Painted on the
   row that's currently focused via keyboard. The accent stripe on
   the left makes it readable across light + dark themes. */
.list-nav-row.list-nav-cursor {
    background: var(--bg-tertiary) !important;
    box-shadow: inset 3px 0 0 var(--accent);
}
/* Row kebab — small ⋯ button replacing the silent right-click for
   desktop users + giving touch users an explicit affordance. */
.row-kebab {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 3px;
    /* Raised baseline from 0.4 so the kebab is visible before hover (audit 1.2). */
    opacity: 0.6;
    transition: opacity 100ms ease, color 100ms ease, background 100ms ease;
}
.project-row:hover .row-kebab,
.task-row:hover .row-kebab,
.list-nav-row.list-nav-cursor .row-kebab { opacity: 1; }
.row-kebab:hover { color: var(--text-bright); background: var(--bg-secondary); }

/* Page-editor outline (TOC). Right rail, fixed-position so it stays
   in view while scrolling a long page. Auto-hides on viewports
   narrower than 1100px (where there isn't room beside the editor
   without crowding). */
.pe-outline {
    position: fixed;
    top: calc(var(--topbar-h) + 24px);
    right: 16px;
    width: 220px;
    max-height: calc(100vh - var(--topbar-h) - 60px);
    overflow-y: auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    z-index: 3;
    font-size: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.18);
}
.pe-outline-title {
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    font-size: 10px;
    margin-bottom: 8px;
    font-weight: 600;
}
.pe-outline-link {
    display: block;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 3px 6px;
    border-radius: 3px;
    border-left: 2px solid transparent;
    line-height: 1.3;
    margin-bottom: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pe-outline-link:hover {
    color: var(--text-bright);
    background: var(--bg-tertiary);
    border-left-color: var(--accent);
}
.pe-outline-h1 { font-weight: 600; }
.pe-outline-h2 { padding-left: 16px; }
.pe-outline-h3 { padding-left: 28px; font-size: 11px; }

/* Subtle flash when the outline scrolls to a block — confirms the
   nav happened without being noisy. */
.forge-soft-pace {
    background: rgba(250, 176, 5, 0.12);
    border-left: 3px solid var(--yellow);
    color: var(--text-primary);
    padding: 8px 16px;
    margin: 8px 0;
    border-radius: 0 4px 4px 0;
    font-size: 12px;
    line-height: 1.5;
}

.pe-block-flash {
    animation: pe-block-flash 900ms ease;
}
@keyframes pe-block-flash {
    0% { background: rgba(76, 110, 245, 0.18); }
    100% { background: transparent; }
}

@media (max-width: 1100px) {
    .pe-outline { display: none; }
}
.toast.toast-out {
    animation: toast-out 220ms ease forwards;
}
@keyframes toast-in {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes toast-out {
    to { opacity: 0; transform: translateX(40px); }
}

/* Project detail tabs (Polish round 2). Splits the long scroll into
   Overview / Permissions / Files. Sticky just under the topbar so
   the active tab is always reachable when scrolling deep into a
   pane. Active tab uses the same accent-underline pattern as the
   admin tabs for visual consistency. */
.proj-tabs {
    display: flex;
    gap: 4px;
    margin: 16px 0 20px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: var(--topbar-h);
    background: var(--bg-primary);
    z-index: 4;
}
.proj-tab {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    padding: 10px 18px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 80ms ease, border-color 80ms ease;
}
.proj-tab:hover { color: var(--text-bright); }
.proj-tab.active {
    color: var(--text-bright);
    border-bottom-color: var(--accent);
}
.proj-tab-pane { display: none; }

/* Sub-tabs INSIDE the Forge tab. Splits "Setup & assign" from "My
   interview" so starting a personal interview doesn't kick the
   assignment surface off-screen. Visually lighter than the
   project-level tabs to make the hierarchy obvious. */
.forge-subtabs {
    display: flex;
    gap: 4px;
    margin: 8px 0 16px;
    border-bottom: 1px solid var(--border);
}
.forge-subtab {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    padding: 8px 14px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 80ms ease, border-color 80ms ease;
}
.forge-subtab:hover { color: var(--text-bright); }
.forge-subtab.active {
    color: var(--text-bright);
    border-bottom-color: var(--accent);
}
.forge-subpane { display: none; }
.forge-subpane[data-subtab="setup"] { display: block; }

.mention-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 6px;
    margin: 0 2px;
    border-radius: 12px;
    background: rgba(94, 234, 212, 0.18);
    color: var(--text-bright, var(--text));
    font-size: 0.95em;
    text-decoration: none;
    cursor: pointer;
}
.mention-chip a { color: inherit; text-decoration: none; }
.mention-chip:hover { background: rgba(94, 234, 212, 0.35); }
.pe-mentions-panels {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px dashed var(--border);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.pe-mention-heading {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.pe-mention-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pe-backlinks { display: flex; flex-direction: column; gap: 4px; }
.backlink-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 4px;
    text-decoration: none;
    color: var(--text);
}
.backlink-row:hover { background: var(--bg-secondary); }

.cli-mode-toggle {
    display: flex;
    gap: 4px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--border);
}
.cli-mode-toggle .btn {
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid transparent;
}
.cli-mode-toggle .btn.is-active {
    background: var(--bg-secondary);
    color: var(--text-bright);
    border-color: var(--accent);
}

.cli-xterm-host {
    background: #0a0a0a;
    flex: 1 1 auto;
    min-height: 500px;
    padding: 8px;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: stretch;
}
.cli-xterm-host .xterm { flex: 1 1 auto; height: 100% !important; }
.cli-xterm-host.drag-over { box-shadow: inset 0 0 0 2px var(--accent); }
.cli-pty-fallback {
    color: #fbbf24;
    padding: 12px;
    font-family: monospace;
    font-size: 13px;
}

.card {
    background: var(--card, var(--bg-secondary));
    border: 1px solid var(--border);
    border-radius: 8px;
}
.activity-row {
    display: grid;
    grid-template-columns: 140px 1fr 1fr auto;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border);
}
/* People rows carry one extra column now (inline rank <select>) and
   need to stay readable on narrow viewports, so the grid collapses
   to a flex-wrap below 700px — name first, then the remaining cells
   wrap onto a second line. */
.people-row {
    display: grid;
    grid-template-columns: minmax(140px, 1.4fr) minmax(120px, 1fr) minmax(160px, 1.2fr) minmax(160px, auto) auto;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--border);
}
.people-row > * { min-width: 0; }
.people-row .people-rank-select {
    max-width: 100%;
}
@media (max-width: 720px) {
    .people-row {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 12px;
        align-items: center;
    }
    .people-row .people-name { flex: 1 1 100%; }
    .people-row > span,
    .people-row > select,
    .people-row > button { flex: 0 0 auto; }
}
.activity-row:last-child,
.people-row:last-child { border-bottom: none; }
.activity-list,
.people-list,
.project-list { max-height: 360px; overflow-y: auto; }

/* Phase 7D — daily briefing banner under the home hero. Collapsed by
   default after first reveal; click summary to toggle. */
.home-brief {
    margin: 16px 0;
    background: var(--bg-secondary, #16181c);
    border: 1px solid var(--border, #30363d);
    border-radius: 8px;
    padding: 0;
}
.home-brief > summary {
    cursor: pointer;
    padding: 12px 16px;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    border-radius: 8px;
}
.home-brief > summary::-webkit-details-marker { display: none; }
.home-brief > summary::before {
    content: '▸';
    margin-right: 8px;
    transition: transform 120ms ease;
    color: var(--text-muted, #8b949e);
}
.home-brief[open] > summary::before { transform: rotate(90deg); }
.home-brief .hb-title { flex: 1; }
.home-brief .hb-actions { display: inline-flex; gap: 6px; }
.home-brief .hb-body { padding: 4px 16px 16px; line-height: 1.5; }
.home-brief .hb-h3 { font-size: 16px; margin: 12px 0 6px; }
.home-brief .hb-h4 {
    font-size: 13px;
    text-transform: uppercase;
    color: var(--text-muted, #8b949e);
    letter-spacing: 0.5px;
    margin: 14px 0 6px;
}
.home-brief .hb-ul { margin: 4px 0 8px 18px; padding: 0; }
.home-brief .hb-ul li { margin: 3px 0; }
.home-brief .hb-body p { margin: 6px 0; }

/* Phase 7G — Decision Log panel on project Overview. Compact rows
   so a project with many decisions doesn't overwhelm the page. */
.decision-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 420px;
    overflow-y: auto;
}
.decision-row {
    background: var(--card, #16181c);
    border: 1px solid var(--border, #30363d);
    border-radius: 6px;
    padding: 10px 12px;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}
.decision-row:hover {
    border-color: var(--accent, #4c6ef5);
    background: var(--card-hover, #1c1f24);
}
.decision-row-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.decision-title {
    font-weight: 600;
    color: var(--text-bright, #f0f6fc);
}
.decision-when {
    color: var(--text-muted, #8b949e);
    font-size: 11px;
    white-space: nowrap;
}
.decision-chosen {
    color: var(--green, #56d364);
    font-size: 12px;
    margin-top: 4px;
}
.decision-meta {
    color: var(--text-muted, #8b949e);
    font-size: 11px;
    margin-top: 2px;
}

/* Phase 7G G3 — Universal capture floating (+) button + modal. */
.qc-fab {
    /* Stacked above the "?" shortcut-hint button (which lives at
       bottom:16 right:16, ~28px tall). Pushing this to bottom:60
       leaves an 8-12px visible gap between the two so they read as
       a deliberate column, not an overlap. */
    position: fixed;
    bottom: 60px;
    right: 18px;
    z-index: 9000;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--accent, #4c6ef5);
    color: white;
    font-size: 26px;
    font-weight: 600;
    line-height: 52px;
    text-align: center;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
    transition: transform 120ms ease, box-shadow 120ms ease;
}
.qc-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}
/* Pending-inbox count. Sits at the upper-right of the round FAB,
   tucked just inside the corner so it stays visible even though the
   button has 50% border-radius. White ring keeps contrast with both
   the accent-coloured button AND any page background behind it. */
.qc-fab-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #fa5252;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
    border: 2px solid #ffffff;
    pointer-events: none;
    /* Subtle pulse on entry so the eye catches it the first time. */
    animation: qc-badge-pop 320ms ease;
}
@keyframes qc-badge-pop {
    0%   { transform: scale(0.4); opacity: 0; }
    60%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.qc-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
}
.qc-modal-card {
    background: var(--bg, #0d1117);
    border: 1px solid var(--border, #30363d);
    border-radius: 8px;
    padding: 16px;
    max-width: 560px;
    width: 92%;
    max-height: 80vh;
    overflow: auto;
}
.qc-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border, #30363d);
    margin-bottom: 12px;
}
.qc-tab {
    background: transparent;
    border: none;
    color: var(--text-muted, #8b949e);
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 2px solid transparent;
}
.qc-tab.active {
    color: var(--text-bright, #f0f6fc);
    border-bottom-color: var(--accent, #4c6ef5);
}
.qc-tab:hover { color: var(--text-bright, #f0f6fc); }
.qc-body { min-height: 140px; margin-bottom: 12px; }
.qc-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.qc-inbox-list { display: flex; flex-direction: column; gap: 8px; }
.qc-inbox-row {
    background: var(--card, #16181c);
    border: 1px solid var(--border, #30363d);
    border-radius: 6px;
    padding: 8px 10px;
}
.qc-inbox-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}
.qc-inbox-kind {
    text-transform: uppercase;
    color: var(--text-muted, #8b949e);
    font-size: 10px;
    letter-spacing: 0.5px;
}
.qc-inbox-text { font-size: 12px; color: var(--text, #c9d1d9); white-space: pre-wrap; }
.qc-inbox-actions { margin-top: 6px; text-align: right; }

.qc-toast {
    position: fixed;
    bottom: 130px;
    right: 18px;
    z-index: 10001;
    background: var(--bg-secondary, #16181c);
    color: var(--text-bright, #f0f6fc);
    border: 1px solid var(--border, #30363d);
    padding: 10px 14px;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
    transition: opacity 280ms ease, transform 280ms ease;
}
.qc-toast.out { opacity: 0; transform: translateY(8px); }

/* =============================================================
   Tech Support Agent (#105) — floating help button + side panel.
   Admin + portal share the same classes (portal.html loads this
   file too via portal-styles.css cascading overrides for FR
   wording). Bottom-right corner, stacked above the QuickCapture
   (+) FAB (which sits at bottom:60 right:18, 52px) so the two
   read as a deliberate column. Right:24 keeps it clear of the
   shortcut-hint (?) at right:16. Old position was top-right but
   that overlapped the topbar action buttons (#159).
   ============================================================= */
.support-fab {
    position: fixed;
    bottom: 122px;
    right: 24px;
    z-index: 9001;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bg-secondary, #16181c);
    color: var(--text-bright, #f0f6fc);
    border: 1px solid var(--border, #30363d);
    font-size: 18px;
    font-weight: 700;
    line-height: 36px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.support-fab:hover {
    background: var(--accent, #4c6ef5);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.45);
}

.support-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 96vw;
    z-index: 9002;
    background: var(--bg, #0d1117);
    border-left: 1px solid var(--border, #30363d);
    box-shadow: -6px 0 24px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    animation: support-slide-in 180ms ease;
}
@keyframes support-slide-in {
    from { transform: translateX(100%); opacity: 0.6; }
    to   { transform: translateX(0);    opacity: 1; }
}
.support-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border, #30363d);
}
.support-panel-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-bright, #f0f6fc);
}
.support-panel-close {
    background: transparent;
    border: none;
    color: var(--text-muted, #8b949e);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
}
.support-panel-close:hover { color: var(--text-bright, #f0f6fc); }
.support-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    color: var(--text, #c9d1d9);
    font-size: 13px;
    line-height: 1.5;
}
.support-hint {
    font-size: 12px;
    color: var(--text-muted, #8b949e);
    margin: 0 0 12px;
}
.support-thread { display: flex; flex-direction: column; gap: 10px; }
.support-q, .support-a {
    border-radius: 6px;
    padding: 10px 12px;
}
.support-q {
    background: var(--bg-secondary, #16181c);
    border: 1px solid var(--border, #30363d);
}
.support-a {
    background: var(--card, #16181c);
    border: 1px solid var(--border, #30363d);
    border-left: 3px solid var(--accent, #4c6ef5);
}
.support-q-label, .support-a-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted, #8b949e);
    margin-bottom: 4px;
}
.support-a-body ul, .support-a-body ol { margin: 6px 0 6px 20px; padding: 0; }
.support-a-body li { margin: 2px 0; }
.support-a-body div { margin: 2px 0; }
.support-sources {
    margin-top: 6px;
    padding: 8px 12px;
    background: var(--bg-secondary, #16181c);
    border: 1px dashed var(--border, #30363d);
    border-radius: 6px;
    font-size: 11px;
    color: var(--text-muted, #8b949e);
}
.support-sources-label {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.support-sources ul { margin: 0 0 0 18px; padding: 0; }
.support-sources li { margin: 2px 0; font-family: monospace; }
.support-panel-input {
    border-top: 1px solid var(--border, #30363d);
    padding: 10px 12px 12px;
    background: var(--bg, #0d1117);
}
.support-panel-input textarea {
    width: 100%;
    resize: vertical;
    min-height: 60px;
    background: var(--bg-secondary, #16181c);
    color: var(--text-bright, #f0f6fc);
    border: 1px solid var(--border, #30363d);
    border-radius: 4px;
    padding: 8px 10px;
    font: inherit;
    font-size: 13px;
    box-sizing: border-box;
}
.support-panel-input textarea:focus {
    outline: none;
    border-color: var(--accent, #4c6ef5);
}
.support-panel-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}

/* Full-page Captures view (different from the FAB modal — this is the
   triage surface where Theo turns dropped captures into tasks/etc.). */
.capture-card {
    background: var(--card, #16181c);
    border: 1px solid var(--border, #30363d);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 10px;
}
.capture-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.capture-kind {
    text-transform: uppercase;
    color: var(--text-muted, #8b949e);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    background: rgba(76,110,245,0.15);
    color: #aac0ff;
    padding: 1px 8px;
    border-radius: 8px;
}
.capture-link {
    font-size: 11px;
    color: var(--green, #56d364);
    margin-left: auto;
}
.capture-card-body {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text, #c9d1d9);
    white-space: pre-wrap;
    margin-bottom: 8px;
}
.capture-card-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

/* Project creation kickoff suggestion list. Same row pattern as the
   captures inbox so the visual language stays consistent across the
   "AI suggested some things, pick what you want" flows. */
.kickoff-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color 100ms ease;
}
.kickoff-row:hover { border-color: var(--accent); }
.kickoff-row input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
}
.kickoff-title {
    font-weight: 600;
    color: var(--text-bright);
    font-size: 14px;
}
.kickoff-desc {
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 4px;
}

/* Phase 7G G2 lite — status signals panel on home. */
.home-signals {
    margin: 8px 0 16px;
    background: var(--bg-secondary, #16181c);
    border: 1px solid var(--border, #30363d);
    border-radius: 8px;
}
.home-signals > summary {
    cursor: pointer;
    padding: 10px 14px;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-weight: 600;
    border-radius: 8px;
}
.home-signals > summary::-webkit-details-marker { display: none; }
.home-signals > summary::before {
    content: '▸';
    margin-right: 8px;
    color: var(--text-muted, #8b949e);
    transition: transform 120ms ease;
}
.home-signals[open] > summary::before { transform: rotate(90deg); }
.home-signals .hs-title { flex: 1; }
.home-signals .hs-pills { display: inline-flex; gap: 6px; }
.hs-pill {
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}
.hs-pill-high   { background: rgba(250,82,82,0.18); color: #ff8585; }
.hs-pill-medium { background: rgba(250,176,5,0.18); color: #ffc857; }
.hs-pill-low    { background: rgba(139,148,158,0.18); color: #b1bac4; }
.home-signals .hs-body { padding: 4px 14px 12px; }
.hs-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 6px 8px;
    border-left: 3px solid transparent;
    cursor: pointer;
    border-radius: 4px;
    transition: background 100ms ease;
}
.hs-row:hover { background: var(--card-hover, #1c1f24); }
.hs-row-high   { border-left-color: #fa5252; }
.hs-row-medium { border-left-color: #fab005; }
.hs-row-low    { border-left-color: #8b949e; }
.hs-row-msg { flex: 1; font-size: 13px; }
.hs-row-proj { font-size: 12px; color: var(--text-muted, #8b949e); }
.hs-fix {
    background: rgba(76,110,245,0.15);
    color: #aac0ff;
    border: 1px solid rgba(76,110,245,0.4);
    border-radius: 4px;
    font-size: 11px;
    padding: 3px 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 100ms ease;
}
.hs-fix:hover { background: rgba(76,110,245,0.28); }
.hs-fix:disabled { opacity: 0.5; cursor: default; }


/* ============================================================
   2026-04-18 polish pass — Task #64
   Surgical improvements: no new patterns, just tightening the
   existing ones. Spacing scale = 8/12/16/24px. Cards share a
   consistent border-radius (8px for surface cards, 6px = var(--radius)
   for inline pills + buttons). See docs/coder-manual/03-key-abstractions/
   ui-conventions.md for the full contract.
   ============================================================ */

/* ---- Project Overview card stack ---- */
/* The Overview tab renders Properties + Workspace + DNA + Project
   meetings + Decision Log as a vertical stack of `.props-card`s.
   The card spacing (margin-top:24px) is set inline at the call
   site — not overridden here because inline styles win. What we
   DO unify is border-radius (some calls used the var(--radius)
   default 6px, others left it at .props-card's 8px). Pin to 8px
   so corner curves line up across the whole stack. Border colour
   is already var(--border) everywhere, no fix needed. */
.proj-tab-pane[data-proj-tab="overview"] .props-card {
    border-radius: 8px;
}
/* The card "h3" headings inside the Overview cards were a mix of
   styles (some inline `margin:0`, some default). Force a single
   rhythm: 14/15px font, no top margin, 8px bottom. */
.proj-tab-pane[data-proj-tab="overview"] .props-card > .flex-between > h3 {
    font-size: 15px;
    margin-top: 0;
}

/* ---- Settings cluster headers ---- */
/* Settings page grew to ~12 sections. Group them visually into 4
   clusters using the .settings-cluster-label rule below. Each
   `<h3>` inside a `.settings-section` keeps its weight; the cluster
   label sits ABOVE the first section in each group as a quiet
   uppercase tracking label. Used like:
     <div class="settings-cluster-label">LLM &amp; AI</div>
     <div class="settings-section">…</div>
     <div class="settings-section">…</div>
*/
.settings-cluster-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin: 28px 0 6px;
    padding-bottom: 4px;
    border-bottom: 1px dashed var(--border);
}
.settings-cluster-label:first-child { margin-top: 0; }

/* Settings sections lose their bottom-border when the next sibling
   is a cluster label — the dashed line above the next cluster
   already provides the visual break. Keeps the page from looking
   like a stack of identical horizontal rules. */
.settings-section:has(+ .settings-cluster-label) {
    border-bottom: none;
    padding-bottom: 12px;
}

/* ---- data-table mobile collapse ---- */
/* Worst offender on phones: Audit log + Health/Cron jobs + Backups
   are wide tables that overflow the viewport. The .task-table
   already hides columns ≥4 on narrow screens (line 1850). Mirror
   that pattern for `.data-table`: hide the 4th+ columns on small
   screens but allow horizontal scroll as escape hatch.
   The wrapping <div class="data-table-wrap"> opt-in (added by JS
   at render time) gets a horizontal scroll container so users
   can swipe to the hidden columns instead of losing them entirely. */
.data-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
@media (max-width: 640px) {
    .data-table th,
    .data-table td {
        padding: 6px 8px;
        font-size: 12px;
    }
    /* Inside an opt-in wrap, allow scrolling instead of hiding. */
    .data-table-wrap .data-table { min-width: 600px; }
}

/* Smaller cron job table specifically — fewer columns matter on
   phones so we can hide the rightmost (Detail) column to keep
   the readable ones. Same rule for Audit log Source / Detail. */
@media (max-width: 640px) {
    .data-table th:nth-last-child(1),
    .data-table td:nth-last-child(1) {
        display: none;
    }
}

/* ---- Empty-state helper variants ---- */
/* The base .empty-state rule lives at line 561. Polish-pass adds
   variants for the common "no data" / "panel placeholder" cases
   so we stop using `<p class="text-muted">No data.</p>` and gain
   a structured affordance with a primary action.
   Use as:
     <div class="empty-state empty-state--inline">
       <div class="empty-state-title">Nothing to triage</div>
       <div class="empty-state-hint">Captures land here from email, the FAB, or paste.</div>
       <button class="btn btn-small">Open captures</button>
     </div>
*/
.empty-state--inline {
    padding: 24px 16px;
    background: var(--bg-secondary);
    border: 1px dashed var(--border);
    border-radius: 8px;
    margin: 12px 0;
}
.empty-state-title {
    color: var(--text-bright);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
}
.empty-state-hint {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 12px;
}
.empty-state-hint:last-child { margin-bottom: 0; }

/* ---- Modal close-button standardisation ---- */
/* Every modal needs a discoverable Close affordance in its
   top-right corner. Many existing modals already use this shape;
   the CSS makes them visually consistent (size, hit area, hover
   colour) regardless of whether the markup uses `&times;`, `✕`,
   or `Close`. Modal-x is opt-in via the class. */
.modal-x {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 4px;
    transition: color 100ms ease, background 100ms ease;
}
.modal-x:hover { color: var(--text-bright); background: var(--bg-tertiary); }
/* Position the X correctly inside the existing `.modal` element
   (which is `position: relative` once an X is present). */
.modal:has(.modal-x) { position: relative; }

/* ---- Sidebar polish ---- */
/* The active-state padding-left fix (line 256) keeps the indicator
   visible inside the grid cell. Polish: nudge the icon-vs-label
   gap so they breathe + dial active state slightly brighter. */
.sidebar-nav a {
    transition: background 80ms ease, color 80ms ease;
}
.sidebar-nav a.active {
    /* Slightly brighter background to make active state pop more
       on the dark theme without overwhelming the light theme. */
    background: var(--bg-tertiary);
}
/* On narrow viewports (sidebar collapsed to single column already
   from the existing 1024px breakpoint), space links a touch more
   generously so they're easier to tap. */
@media (max-width: 1024px) {
    .sidebar-nav a { padding: 8px 10px; }
}

/* ---- Button hierarchy: visual difference inside modal footers ---- */
/* Polish: tighten the contrast between primary / secondary inside
   modal action footers so the eye is naturally drawn to the happy
   path. Limited to .modal-actions on purpose — the page-level
   .flex containers already use the tinted btn-secondary on
   purpose; only inside modals does the quieter treatment win. */
.modal-actions .btn-secondary {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-primary);
}
.modal-actions .btn-secondary:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-light);
    color: var(--text-bright);
}

/* ---- Form alignment: labels above inputs (default) ---- */
/* Existing `.form-group label` (line 121) already sets labels
   above inputs. Polish: ensure forms inside `.flex gap-8` containers
   (where two inputs sit side by side, e.g. SMTP Host + Port) keep
   their labels aligned so the inputs line up too. */
.flex.gap-8 > .form-group { margin-bottom: 0; }
.flex.gap-8 > .form-group + .form-group { margin-bottom: 0; }

/* ---- Health page tab strip (lightweight) ---- */
/* The Health page renders Doctor + AI Systems + Cron + Backups +
   Events back-to-back. A full tab redesign is bigger than polish;
   this rule adds a sticky in-page jump-nav so users can land in
   each section without page-scroll fatigue. JSON pulled from
   `<h3>` headings inside the Health view by app.js render.
   Small + unobtrusive at desktop, hidden on mobile (where the
   short scroll is fine). */
.health-jumpnav {
    position: sticky;
    top: var(--topbar-h);
    z-index: 4;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    background: var(--bg-primary);
    padding: 8px 0;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.health-jumpnav a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid transparent;
}
.health-jumpnav a:hover {
    color: var(--text-bright);
    background: var(--bg-tertiary);
    border-color: var(--border);
}
@media (max-width: 640px) {
    .health-jumpnav { display: none; }
}

/* ---- Topbar mobile fixes ---- */
/* The topbar packs many elements (search + bell + CLI status +
   usage + theme + PM toggle). On phones the search input takes
   100% of remaining width — that pushed the action cluster off
   the right edge. Reset behavior: hide the search-text on phones,
   keep the icon, and let the action cluster claim the space. */
@media (max-width: 640px) {
    .topbar-search-text,
    .topbar-search-kbd { display: none; }
    .topbar-search { padding: 6px 8px; max-width: 40px; flex: 0 0 auto; }
    .topbar-title { max-width: 50%; }
}

/* =============================================================
   CHAT (Phase 11) — slide-in right rail + channel pane + threads.
   Shared between admin (Chat module) and portal (PortalTeamChat).
   Uses the existing theme tokens so dark + light both work without
   duplicating colour values.
   ============================================================= */

.chat-toggle {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 4px 10px;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.chat-toggle:hover { background: var(--bg-tertiary); }

.chat-unread-badge {
    background: var(--accent);
    color: #fff;
    border-radius: 10px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 600;
    line-height: 14px;
    min-width: 14px;
    text-align: center;
}

.chat-rail {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 460px;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border);
    z-index: 1300;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 12px rgba(0,0,0,0.15);
}

body.chat-rail-open .main { padding-right: 460px; }

.chat-rail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
}

.chat-rail-title {
    font-weight: 600;
    color: var(--text-bright);
    font-size: 13px;
}

.chat-rail-actions { display: flex; gap: 4px; }

.chat-rail-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: var(--radius);
    padding: 3px 8px;
    cursor: pointer;
    font-size: 12px;
}
.chat-rail-btn:hover { background: var(--bg-tertiary); }

.chat-rail-body {
    display: flex;
    flex: 1;
    min-height: 0;
}

.chat-channel-list {
    width: 200px;
    flex: 0 0 200px;
    border-right: 1px solid var(--border);
    overflow-y: auto;
    padding: 4px 0;
    display: flex;
    flex-direction: column;
}

.chat-channel-group { padding: 6px 0; }

.chat-channel-group-head {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    padding: 4px 10px;
}

.chat-channel-item {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--text-primary);
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    border-left: 2px solid transparent;
}

.chat-channel-item:hover { background: var(--bg-tertiary); }

.chat-channel-item.active {
    background: var(--bg-tertiary);
    border-left-color: var(--accent);
    color: var(--text-bright);
}

.chat-channel-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chat-unread-pip {
    background: var(--accent);
    color: #fff;
    border-radius: 9px;
    padding: 0 5px;
    font-size: 10px;
    font-weight: 600;
}

.chat-presence-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 8px;
    background: var(--text-muted);
}
.chat-presence-dot.online { background: var(--green); }

.chat-pane {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.chat-pane-empty {
    color: var(--text-muted);
    text-align: center;
    padding: 24px;
    font-size: 12px;
}

.chat-pane-header {
    flex: 0 0 auto;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-pane-title strong { color: var(--text-bright); font-size: 13px; }
.chat-pane-sub { color: var(--text-muted); font-size: 11px; margin-left: 6px; }

.chat-header-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 3px 8px;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 11px;
}
.chat-header-btn:hover { background: var(--bg-tertiary); }

.chat-pane-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 8px 10px;
}

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

.chat-message {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 4px 0;
}

.chat-message.deleted { padding-left: 38px; opacity: 0.7; }

.chat-avatar {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
}

.chat-message-body { flex: 1; min-width: 0; }

.chat-message-head {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 2px;
}

.chat-message-head strong { color: var(--text-bright); font-size: 12px; }

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

.chat-edited {
    color: var(--text-muted);
    font-size: 10px;
    font-style: italic;
}

.chat-message-content {
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.chat-message-content a { color: var(--accent); }
.chat-mention { color: var(--accent); font-weight: 600; }

/* Entity-mention pills (mig 266). Each kind picks up its own colour
   via the inline --kind-color custom property the renderer sets:
   person blue, task purple, decision amber, page emerald.
   The chip stays small + readable inside chat lines and back-link rows. */
.chat-entity-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--kind-color, #64748b) 15%, transparent);
    color: var(--kind-color, #64748b);
    font-weight: 600;
    font-size: 0.92em;
    text-decoration: none;
    line-height: 1.4;
    border: 1px solid color-mix(in srgb, var(--kind-color, #64748b) 30%, transparent);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.chat-entity-pill:hover {
    background: color-mix(in srgb, var(--kind-color, #64748b) 28%, transparent);
    color: var(--kind-color, #64748b);
    text-decoration: none;
}
.chat-entity-pill[data-kind="person"]   { --kind-color: #3b82f6; }
.chat-entity-pill[data-kind="task"]     { --kind-color: #8b5cf6; }
.chat-entity-pill[data-kind="decision"] { --kind-color: #f59e0b; }
.chat-entity-pill[data-kind="page"]     { --kind-color: #10b981; }

.chat-inline-code {
    background: var(--bg-tertiary);
    padding: 1px 4px;
    border-radius: 3px;
    font-family: var(--mono);
    font-size: 12px;
}

.chat-code {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px;
    overflow-x: auto;
    margin: 4px 0;
}
.chat-code code { font-family: var(--mono); font-size: 12px; }

.chat-message-actions {
    display: flex;
    gap: 4px;
    margin-top: 2px;
    opacity: 0;
    transition: opacity 0.1s;
}

.chat-message:hover .chat-message-actions { opacity: 1; }

.chat-msg-act {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 10px;
    padding: 0 4px;
}
.chat-msg-act:hover { color: var(--accent); text-decoration: underline; }

.chat-reply-count {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--accent);
    font-size: 11px;
    padding: 1px 8px;
    cursor: pointer;
}
.chat-reply-count:hover { background: var(--bg-tertiary); }

.chat-typing {
    color: var(--text-muted);
    font-size: 11px;
    font-style: italic;
    padding: 0 12px;
    height: 18px;
    flex: 0 0 18px;
}

.chat-input-wrap {
    flex: 0 0 auto;
    border-top: 1px solid var(--border);
    padding: 8px 10px;
    display: flex;
    gap: 6px;
    align-items: flex-end;
}

.chat-input {
    flex: 1;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    padding: 6px 8px;
    font-family: var(--font);
    font-size: 13px;
    resize: vertical;
    min-height: 38px;
    max-height: 160px;
}

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

.chat-input-send {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: 8px 14px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
}
.chat-input-send:hover { background: var(--accent-hover); }

.chat-mention-pop {
    position: absolute;
    bottom: 90px;
    left: 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    z-index: 1310;
    min-width: 280px;
    max-width: 380px;
    max-height: 320px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.chat-mention-pop button {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--text-primary);
    padding: 6px 10px;
    cursor: pointer;
    font-size: 12px;
}
.chat-mention-pop button:hover { background: var(--bg-secondary); }

/* Multi-tab picker (mig 266). Tabs strip + result list with per-kind
   colour swatches. The tab itself keeps a colour bar at the bottom that
   mirrors the kind colour of the entries below. */
.chat-mention-picker-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    background: var(--bg-tertiary);
}
.chat-mention-tab {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 8px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s;
}
.chat-mention-tab:hover { color: var(--text-primary); }
.chat-mention-tab.active {
    color: var(--text-primary);
    border-bottom-color: var(--kind-color, var(--accent));
}
.chat-mention-tab.dimmed { opacity: 0.45; }
.chat-mention-tab-count {
    display: inline-flex;
    min-width: 16px;
    padding: 0 4px;
    height: 14px;
    border-radius: 7px;
    font-size: 10px;
    line-height: 14px;
    background: color-mix(in srgb, var(--kind-color, var(--accent)) 22%, transparent);
    color: var(--kind-color, var(--accent));
    align-items: center;
    justify-content: center;
}
.chat-mention-picker-list {
    overflow-y: auto;
    max-height: 240px;
}
.chat-mention-row {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 8px 12px !important;
    font-size: 12px !important;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.chat-mention-row:last-child { border-bottom: none; }
.chat-mention-row.kb-active,
.chat-mention-row:hover {
    background: color-mix(in srgb, var(--kind-color, var(--accent)) 10%, var(--bg-secondary));
}
.chat-mention-swatch {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--kind-color, var(--accent));
}
.chat-mention-name {
    color: var(--text-primary);
    font-weight: 500;
    flex: 0 0 auto;
}
.chat-mention-hint {
    color: var(--text-muted);
    font-size: 11px;
    margin-left: auto;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 50%;
}
.chat-mention-empty {
    padding: 12px;
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
}

/* Back-link panel (mig 266). Lives below the entity-thread block on
   entity-detail surfaces. Each row condenses author + channel context
   + timestamp into a single click-target. */
.chat-entity-backlinks {
    margin-top: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-secondary);
    overflow: hidden;
}
.chat-entity-backlinks-loading {
    padding: 12px;
}
.chat-entity-backlinks-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border);
}
.chat-entity-backlinks-head strong {
    color: var(--text-primary);
    font-size: 13px;
}
.chat-entity-backlinks-list {
    max-height: 360px;
    overflow-y: auto;
}
.chat-entity-backlink-row {
    display: flex;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
    cursor: pointer;
    transition: background 0.1s;
}
.chat-entity-backlink-row:last-child { border-bottom: none; }
.chat-entity-backlink-row:hover { background: var(--bg-tertiary); }
.chat-entity-backlink-body { flex: 1; min-width: 0; }
.chat-entity-backlink-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 12px;
}
.chat-entity-backlink-head strong { color: var(--text-primary); font-size: 12px; }
.chat-entity-backlink-ctx {
    color: var(--text-muted);
    font-size: 11px;
}
.chat-entity-backlink-content {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.45;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    /* Two-line clamp keeps the panel scannable on busy entities. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.chat-thread-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-thread-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: min(560px, 90vw);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow);
}

.chat-thread-head {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-thread-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-picker-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 360px;
}

.chat-picker-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    padding: 6px 10px;
    border-radius: var(--radius);
    cursor: pointer;
    text-align: left;
    font-size: 13px;
    width: 100%;
}
.chat-picker-row:hover { background: var(--bg-tertiary); }

@media (max-width: 720px) {
    .chat-rail { width: 100vw; }
    body.chat-rail-open .main { padding-right: 0; }
    .chat-rail-body.mobile-show-pane .chat-channel-list { display: none; }
    .chat-rail-body:not(.mobile-show-pane) .chat-pane { display: none; }
    .chat-channel-list { width: 100%; flex: 1; border-right: none; }
    .chat-pane-back-mobile { display: inline-flex !important; }
}


/* =============================================================
 * DECISION LOG -> CHAT SHARE (#119)
 * ============================================================= */

.decision-row-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    gap: 8px;
}
.decision-shared-line {
    color: var(--text-muted);
    font-size: 11px;
}
.decision-shared-link {
    background: transparent;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font-size: 11px;
    padding: 0;
    text-decoration: underline;
}
.decision-shared-link:hover { color: var(--text-bright); }
.decision-row-actions { display: flex; gap: 4px; }
.decision-share-btn { font-size: 10px; }

.decision-share-modal {
    position: fixed;
    inset: 0;
    z-index: 10001;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
}
.decision-share-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 18px 20px;
    max-width: 640px;
    width: 92%;
    max-height: 88vh;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.decision-share-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.decision-share-head h3 { margin: 0; font-size: 16px; color: var(--text-bright); }
.decision-share-meta {
    background: var(--bg-tertiary);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13px;
}
.decision-share-targets {
    display: flex;
    gap: 16px;
    margin: 4px 0 8px 0;
}
.decision-share-targets .radio-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
}
.decision-share-status {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}
.decision-share-textarea {
    width: 100%;
    min-height: 200px;
    background: var(--bg-secondary, var(--bg));
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
}
.decision-share-foot {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}
.decision-share-foot .spacer { flex: 1; }


/* =============================================================
 * CHAT ANNOUNCEMENTS (#119)
 * ============================================================= */

.chat-announcement-bar-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 10px 0 10px;
    flex: 0 0 auto;
}

.chat-announcement-bar {
    background: rgba(187, 128, 9, 0.10);
    border: 1px solid var(--orange, #bb8009);
    border-left-width: 3px;
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.chat-announcement-badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--orange, #bb8009);
}
.chat-announcement-body {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.chat-announcement-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: 2px;
}
.chat-announcement-meta {
    color: var(--text-muted);
    font-size: 10px;
}
.chat-announcement-dismiss {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 10px;
    padding: 1px 8px;
}
.chat-announcement-dismiss:hover {
    color: var(--text-bright);
    border-color: var(--accent);
}

.chat-announce-btn { color: var(--orange, #bb8009); }

.chat-announce-modal {
    position: fixed;
    inset: 0;
    z-index: 10001;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
}
.chat-announce-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 18px 20px;
    max-width: 540px;
    width: 92%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.chat-announce-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.chat-announce-head h3 { margin: 0; font-size: 15px; color: var(--text-bright); }
.chat-announce-textarea {
    width: 100%;
    min-height: 140px;
    background: var(--bg-secondary, var(--bg));
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px;
    font-family: inherit;
    font-size: 13px;
    resize: vertical;
}
.chat-announce-foot {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}
.chat-announce-foot .spacer { flex: 1; }


/* In-thread message kinds: announcement + decision_share. The chronology
 * entry stays in place; the left border + badge make it stand out so a
 * reader scrolling back can spot the structured posts at a glance. */
.chat-message--announcement .chat-message-body {
    border-left: 3px solid var(--orange, #bb8009);
    padding-left: 8px;
    margin-left: -2px;
}
.chat-message--decision-share .chat-message-body {
    border-left: 3px solid var(--accent);
    padding-left: 8px;
    margin-left: -2px;
}
.chat-message-kind {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 2px;
    line-height: 1.4;
}
.chat-message-kind--announcement {
    background: rgba(187, 128, 9, 0.18);
    color: var(--orange, #bb8009);
}
.chat-message-kind--decision-share {
    background: rgba(56, 139, 253, 0.18);
    color: var(--accent);
}

.chat-message-flash {
    animation: chat-flash 1.2s ease-out;
    border-radius: 4px;
}
@keyframes chat-flash {
    0%   { background: rgba(56, 139, 253, 0.30); }
    100% { background: transparent; }
}


/* ============================================================
 * Updates feed (inline, distinct from .chat-rail).
 *
 * Used by UpdatesFeed (admin) + PortalUpdatesFeed (portal). Renders
 * inside project + company pages: pinned section on top, composer
 * below, chronological feed at the bottom. Reuses .chat-message-*
 * shared rules where the markup matches; the .chat-feed-* rules
 * below are the structural shell that differs from the rail.
 * ============================================================ */

.chat-feed {
    background: var(--card, var(--bg-secondary, var(--bg)));
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
}
.chat-feed-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary, var(--bg));
}
.chat-feed-head strong { color: var(--text-bright); font-size: 13px; }
.chat-feed-refresh {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 11px;
    padding: 2px 8px;
    cursor: pointer;
}
.chat-feed-refresh:hover { background: var(--bg-tertiary, var(--bg)); color: var(--text-primary); }

.chat-pinned-section {
    border-bottom: 1px solid var(--border);
    background: rgba(212, 175, 55, 0.06);
    padding: 8px 12px;
}
.chat-pinned-head {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.chat-pinned-head::before {
    content: "\2316"; /* position indicator glyph as a tiny pushpin proxy */
    color: var(--orange, #d4af37);
    font-size: 12px;
}
.chat-pinned-list { display: flex; flex-direction: column; gap: 6px; }

.chat-feed-composer {
    border-bottom: 1px solid var(--border);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--bg-secondary, var(--bg));
    position: relative;
}
.chat-feed-mention-pop {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 12px;
    right: 12px;
    max-height: 280px;
    overflow-y: auto;
    background: var(--bg-tertiary, var(--bg));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow, 0 4px 12px rgba(0,0,0,0.3));
    z-index: 1310;
    padding: 4px 0;
}
.chat-feed-mention-pop .chat-mention-section { padding: 2px 0; }
.chat-feed-mention-pop .chat-mention-section-head {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    padding: 4px 12px 2px;
}
.chat-feed-mention-pop .chat-mention-row {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--text-primary);
    padding: 6px 12px;
    cursor: pointer;
    font-size: 13px;
}
.chat-feed-mention-pop .chat-mention-row:hover {
    background: var(--bg-secondary);
}
.chat-feed-mention-pop .chat-mention-hint {
    color: var(--text-muted);
    font-size: 11px;
    margin-left: 8px;
}
.chat-feed-mention-pop .chat-mention-empty {
    color: var(--text-muted);
    font-size: 12px;
    padding: 10px 12px;
}
.chat-feed-textarea {
    width: 100%;
    background: var(--bg-input, var(--bg));
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 13px;
    resize: vertical;
    box-sizing: border-box;
}
.chat-feed-composer-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.chat-feed-toggle {
    font-size: 11px;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}
.chat-feed-toggle input[type=checkbox] { margin: 0; }

.chat-feed-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    max-height: 60vh;
    overflow: auto;
}

.chat-feed-msg {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 6px 4px;
}
.chat-feed-msg.deleted { padding-left: 38px; opacity: 0.7; }
.chat-feed-msg-body { flex: 1; min-width: 0; }
.chat-feed-msg-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    margin-bottom: 2px;
}
.chat-feed-msg-head strong { color: var(--text-bright); font-size: 12px; }
.chat-feed-msg-actions { display: flex; gap: 6px; margin-top: 4px; }

.chat-feed-msg--pinned { background: rgba(212, 175, 55, 0.04); border-radius: 4px; }
.chat-feed-msg--announcement .chat-feed-msg-body {
    border-left: 3px solid var(--orange, #bb8009);
    padding-left: 8px;
    margin-left: -2px;
}
.chat-feed-msg--decision-share .chat-feed-msg-body {
    border-left: 3px solid var(--accent);
    padding-left: 8px;
    margin-left: -2px;
}

.chat-pin-btn {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 10px;
    padding: 2px 8px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.chat-pin-btn:hover {
    background: rgba(212, 175, 55, 0.12);
    color: var(--orange, #d4af37);
    border-color: var(--orange, #d4af37);
}

.chat-pin-chip {
    background: rgba(212, 175, 55, 0.18);
    color: var(--orange, #d4af37);
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 3px;
    letter-spacing: 0.03em;
}

.proj-tab-badge {
    display: inline-block;
    background: var(--accent, #388bfd);
    color: #fff;
    border-radius: 8px;
    font-size: 9px;
    line-height: 1;
    padding: 2px 5px;
    margin-left: 4px;
    vertical-align: middle;
}

.btn-tiny {
    font-size: 10px;
    padding: 2px 6px;
    line-height: 1.4;
}


/* =============================================================
 * CHAT POLISH (DM bubble, search, header info, scroll-to-bottom,
 *              composer, mobile slide-over, pin glyph, reactions)
 * Phase 12 follow-on: makes the rail feel like a real chat app.
 * ============================================================= */

/* Channel list search bar — sits at the top, sticky.                */
.chat-channel-search {
    flex: 0 0 auto;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
    position: sticky;
    top: 0;
    z-index: 2;
}
.chat-channel-search input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    padding: 5px 8px;
    font-size: 12px;
    font-family: var(--font);
}
.chat-channel-search input:focus {
    outline: none;
    border-color: var(--accent);
}
.chat-channel-search-empty {
    color: var(--text-muted);
    font-size: 11px;
    padding: 12px;
    text-align: center;
    font-style: italic;
}

/* Collapsible group head (caret + label).                           */
.chat-channel-group-head {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px 4px 6px;
    transition: color 0.1s;
}
.chat-channel-group-head:hover { color: var(--text-primary); }
.chat-channel-group-caret {
    display: inline-block;
    width: 10px;
    text-align: center;
    transition: transform 0.15s;
    font-size: 9px;
    color: var(--text-muted);
}
.chat-channel-group.collapsed .chat-channel-group-caret { transform: rotate(-90deg); }
.chat-channel-group.collapsed .chat-channel-rows { display: none; }

/* Channel row polish — taller, avatar + meta line under name.       */
.chat-channel-item {
    padding: 6px 8px 6px 10px;
    align-items: center;
    border-radius: 0;
    line-height: 1.3;
    position: relative;
}
.chat-channel-item-avatar {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 600;
    position: relative;
}
.chat-channel-item-avatar .chat-presence-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 8px;
    height: 8px;
    border: 2px solid var(--bg-secondary);
    border-radius: 50%;
}
.chat-channel-item-glyph {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 5px;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}
.chat-channel-item.active .chat-channel-item-glyph {
    background: var(--accent);
    color: #fff;
}
.chat-channel-item-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.chat-channel-item-row1 {
    display: flex;
    align-items: center;
    gap: 6px;
}
.chat-channel-item-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}
.chat-channel-item.has-unread .chat-channel-item-name {
    font-weight: 600;
    color: var(--text-bright);
}
.chat-channel-item-time {
    font-size: 10px;
    color: var(--text-muted);
    flex: 0 0 auto;
}
.chat-channel-item-preview {
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
    margin-top: 1px;
}
.chat-channel-item-meta {
    font-size: 10px;
    color: var(--text-muted);
    margin-left: 4px;
}
.chat-unread-pip {
    min-width: 18px;
    height: 16px;
    line-height: 16px;
    padding: 0 5px;
    text-align: center;
    border-radius: 8px;
    font-weight: 700;
    font-size: 10px;
}
.chat-channel-item.has-unread .chat-unread-pip {
    background: var(--red, #d4423a);
}

/* DM avatar in row uses color hash; presence dot overlay.            */
.chat-channel-item.dm .chat-presence-dot { background: var(--text-muted); }
.chat-channel-item.dm .chat-presence-dot.online { background: var(--green); }

/* Channel pane header polish — info button + member count chip.     */
.chat-pane-header {
    gap: 8px;
}
.chat-pane-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}
.chat-pane-info-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.chat-pane-info-btn:hover {
    color: var(--text-bright);
    background: var(--bg-tertiary);
    border-color: var(--accent);
}
.chat-pane-info-btn.active {
    background: var(--bg-tertiary);
    color: var(--text-bright);
}
.chat-pane-back-mobile {
    display: none;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: var(--radius);
    padding: 2px 8px;
    font-size: 12px;
    cursor: pointer;
    margin-right: 4px;
}

/* Channel info side-pane — slides in over the message pane.          */
.chat-channel-info {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 280px;
    background: var(--bg);
    border-left: 1px solid var(--border);
    z-index: 5;
    overflow-y: auto;
    padding: 12px 14px;
    box-shadow: -2px 0 8px rgba(0,0,0,0.12);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.chat-channel-info-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.chat-channel-info-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-bright);
}
.chat-channel-info-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.chat-channel-info-label {
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}
.chat-channel-info-desc {
    font-size: 12px;
    color: var(--text-primary);
    line-height: 1.4;
}
.chat-channel-info-members {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.chat-channel-info-member {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-primary);
}
.chat-channel-info-member:hover { background: var(--bg-tertiary); }
.chat-channel-info-member-name { flex: 1; }
.chat-channel-info-member-dm {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 3px;
}
.chat-channel-info-member-dm:hover { color: var(--accent); border-color: var(--accent); }
.chat-channel-info-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
    font-size: 12px;
    color: var(--text-primary);
}
.chat-channel-info-toggle input { cursor: pointer; }

/* Message bubble polish: hover action bar, grouped, pin, edited.   */
.chat-message {
    position: relative;
    padding: 4px 6px 4px 6px;
    border-radius: 4px;
}
.chat-message:hover {
    background: var(--bg-tertiary);
}
.chat-message.grouped {
    padding-top: 0;
    padding-bottom: 1px;
    margin-top: -4px;
}
.chat-message.grouped .chat-message-head { display: none; }
.chat-message.grouped .chat-message-avatar-spacer {
    width: 30px;
    flex: 0 0 30px;
}
.chat-message.grouped .chat-time-inline {
    display: none;
    color: var(--text-muted);
    font-size: 9px;
    position: absolute;
    left: 0;
    top: 4px;
    width: 36px;
    text-align: right;
}
.chat-message.grouped:hover .chat-time-inline { display: block; }

.chat-message-hover-bar {
    position: absolute;
    top: -10px;
    right: 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
    display: none;
    gap: 1px;
    padding: 2px;
    z-index: 3;
}
.chat-message:hover .chat-message-hover-bar { display: flex; }
.chat-message-hover-bar button {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
    line-height: 1.4;
}
.chat-message-hover-bar button:hover {
    background: var(--bg-tertiary);
    color: var(--text-bright);
}
.chat-message-hover-bar .react-on {
    color: var(--accent);
    background: rgba(56, 139, 253, 0.10);
}

.chat-message-actions { display: none; }

/* Pinned ribbon at top of message.                                   */
.chat-message-pin {
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.chat-message-pin-glyph {
    color: var(--orange, #bb8009);
    font-weight: 700;
}

/* Reactions row beneath the bubble.                                  */
.chat-message-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.chat-reaction {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 10px;
    cursor: pointer;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.chat-reaction:hover { border-color: var(--accent); color: var(--text-bright); }
.chat-reaction.mine {
    background: rgba(56, 139, 253, 0.18);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}

/* Thread indicator beneath message — links to thread overlay.       */
.chat-thread-indicator {
    margin-top: 4px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--accent);
    font-size: 11px;
    padding: 2px 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.4;
}
.chat-thread-indicator:hover { background: var(--bg-tertiary); border-color: var(--accent); }
.chat-thread-indicator-meta { color: var(--text-muted); font-size: 10px; }

/* Code block copy button.                                            */
.chat-code-wrap {
    position: relative;
    margin: 4px 0;
}
.chat-code-copy {
    position: absolute;
    top: 4px;
    right: 4px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: 3px;
    padding: 1px 6px;
    font-size: 10px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.1s;
}
.chat-code-wrap:hover .chat-code-copy { opacity: 1; }
.chat-code-copy:hover { color: var(--text-bright); border-color: var(--accent); }

/* Composer polish: auto-grow textarea + attach button + drag drop.  */
.chat-input-wrap {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
}
.chat-input-wrap.drag-over {
    background: rgba(56, 139, 253, 0.10);
    outline: 2px dashed var(--accent);
    outline-offset: -4px;
}
.chat-input {
    min-height: 32px;
    max-height: 200px;
    overflow-y: auto;
    resize: none;
    line-height: 1.4;
}
.chat-input-row {
    display: flex;
    gap: 6px;
    align-items: flex-end;
}
.chat-input-toolbar {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-bottom: 2px;
    flex-wrap: wrap;
}
.chat-input-toolbar-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
}
.chat-input-toolbar-btn:hover { color: var(--text-bright); background: var(--bg-tertiary); }
.chat-input-hint {
    color: var(--text-muted);
    font-size: 10px;
    margin-left: auto;
    font-style: italic;
}
.chat-input-pending {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 4px;
}
.chat-input-pending-chip {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 10px;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.chat-input-pending-chip button {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 0;
}
.chat-input-pending-chip button:hover { color: var(--red, #d4423a); }

/* Mention picker keyboard-nav highlight.                             */
.chat-mention-pop button.kb-active {
    background: var(--bg-secondary);
    color: var(--accent);
}

/* Read receipts line beneath last message.                           */
.chat-read-receipts {
    color: var(--text-muted);
    font-size: 10px;
    padding: 4px 8px 8px 8px;
    font-style: italic;
    text-align: right;
}

/* Floating "scroll to bottom" pill.                                  */
.chat-scroll-bottom-button {
    position: absolute;
    bottom: 92px;
    right: 16px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 16px;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 4;
}
.chat-scroll-bottom-button:hover { background: var(--accent-hover); }
.chat-scroll-bottom-button-arrow { font-size: 12px; }

/* Channel info overlay — needs the chat-pane to be position:relative. */
.chat-pane { position: relative; }

/* "DMs" group accent — subtle left border so DMs feel distinct.     */
.chat-channel-group--dm .chat-channel-item.dm.active {
    border-left-color: var(--green);
}

/* New-channel + new-DM rail buttons get an icon-only treatment when
 * the rail is at narrow widths. Keep them readable on mobile too.   */
.chat-rail-btn { white-space: nowrap; }


/* =============================================================
 * Entity-anchored discussion thread (ADR-027)
 * =============================================================
 *
 * Compact discussion panel embedded in task / decision / page
 * detail views. Distinct from the full chat rail (.chat-rail) —
 * no channel-list sidebar, no info pane, no thread side-pane.
 * Just the message scrollback + composer. Same avatar + bubble
 * primitives so coordination feels uniform across surfaces.
 */
.entity-thread {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
}
.entity-thread-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.entity-thread-count {
    font-weight: 500;
    color: var(--text-primary);
    background: var(--bg-tertiary, var(--bg-input));
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 11px;
    text-transform: none;
    letter-spacing: normal;
}
.entity-thread-messages {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 320px;
    overflow-y: auto;
    padding: 4px 0;
}
.entity-thread-empty,
.entity-thread-loading,
.entity-thread-readonly {
    padding: 12px 4px;
}
.entity-thread-message {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.entity-thread-message.deleted {
    opacity: 0.6;
    padding-left: 38px;
}
.entity-thread-body {
    flex: 1;
    min-width: 0;
}
.entity-thread-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    margin-bottom: 2px;
}
.entity-thread-head .chat-time {
    color: var(--text-muted);
    font-size: 11px;
}
.entity-thread-content {
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-primary);
    word-wrap: break-word;
}
.entity-thread-actions {
    display: flex;
    gap: 6px;
    margin-top: 4px;
    opacity: 0;
    transition: opacity 0.12s ease-out;
}
.entity-thread-message:hover .entity-thread-actions { opacity: 1; }
.entity-thread-act {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
}
.entity-thread-act:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary, var(--bg-input));
}
.entity-thread-composer {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    border-top: 1px solid var(--border);
    padding-top: 8px;
    margin-top: 4px;
}
.entity-thread-input {
    flex: 1;
    padding: 8px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    resize: vertical;
    min-height: 36px;
    box-sizing: border-box;
}
.entity-thread-input:focus {
    outline: none;
    border-color: var(--accent, #7d3cff);
}


/* ===========================================================
   Page inline comments (Google-Docs-style range-anchored notes)
   =========================================================== */

/* Subtle amber wash on the quoted span. Background only (not text
   colour) so dark + light themes both stay legible. The cursor flips
   to a pointer because clicking the span scrolls the matching
   sidebar bubble into view. */
.inline-comment-highlight {
    background: rgba(255, 196, 0, 0.18);
    border-bottom: 2px solid rgba(255, 196, 0, 0.55);
    cursor: pointer;
    border-radius: 1px;
    transition: background 120ms ease;
}
.inline-comment-highlight:hover {
    background: rgba(255, 196, 0, 0.32);
}

/* Floating "Add comment" pill that pops next to a selection. */
.inline-comment-add-btn {
    position: absolute;
    z-index: 10001;
    display: none;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--bg-secondary);
    color: var(--text-bright);
    border: 1px solid var(--border-light, var(--border));
    border-radius: var(--radius);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
}
.inline-comment-add-btn:hover {
    background: var(--bg-tertiary, var(--bg-input));
    border-color: var(--accent, #7d3cff);
}
.inline-comment-add-btn::before {
    content: "(comment)";
    font-size: 10px;
    color: var(--text-secondary);
}

/* Right-rail sidebar. On wide screens it floats to the right of the
   editor; on narrow it stacks below. Fixed width so the editor
   doesn't reflow when comments load. */
.inline-comment-sidebar {
    position: sticky;
    top: 16px;
    width: 320px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 13px;
    box-sizing: border-box;
}
.inline-comment-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}
.inline-comment-sidebar-header h4 {
    font-size: 13px;
    margin: 0;
    color: var(--text-bright);
    font-weight: 600;
}
.inline-comment-toggle-resolved {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 3px 8px;
    color: var(--text-secondary);
    font-size: 11px;
    cursor: pointer;
}
.inline-comment-toggle-resolved:hover {
    color: var(--text-bright);
    border-color: var(--accent, #7d3cff);
}

.inline-comment-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.inline-comment-bubble {
    padding: 10px;
    background: var(--bg-input, var(--bg-secondary));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}
.inline-comment-bubble:hover {
    border-color: var(--accent, #7d3cff);
}
.inline-comment-bubble-pulse {
    animation: pic-pulse 1.5s ease;
}
@keyframes pic-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 196, 0, 0.55); }
    50%  { box-shadow: 0 0 0 8px rgba(255, 196, 0, 0.15); }
    100% { box-shadow: 0 0 0 0 rgba(255, 196, 0, 0);    }
}

.inline-comment-bubble-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.inline-comment-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent, #7d3cff);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    flex-shrink: 0;
}
.inline-comment-avatar-small {
    width: 18px;
    height: 18px;
    font-size: 9px;
}
.inline-comment-author {
    font-weight: 600;
    color: var(--text-bright);
    font-size: 12px;
}
.inline-comment-ts {
    margin-left: auto;
    font-size: 11px;
}
.inline-comment-quote {
    padding: 6px 8px;
    margin-bottom: 6px;
    background: rgba(255, 196, 0, 0.10);
    border-left: 3px solid rgba(255, 196, 0, 0.55);
    border-radius: 3px;
    color: var(--text-secondary);
    font-size: 12px;
    font-style: italic;
    line-height: 1.4;
    max-height: 80px;
    overflow: auto;
}
.inline-comment-content {
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.inline-comment-resolved-meta {
    margin-top: 4px;
    font-size: 11px;
}
.inline-comment-actions {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.inline-comment-action {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 2px 6px;
    color: var(--text-secondary);
    font-size: 11px;
    cursor: pointer;
}
.inline-comment-action:hover {
    color: var(--text-bright);
    border-color: var(--accent, #7d3cff);
}
.inline-comment-action-danger:hover {
    color: var(--red, #ff4d4f);
    border-color: var(--red, #ff4d4f);
}

.inline-comment-replies {
    margin-top: 8px;
    padding-top: 8px;
    padding-left: 10px;
    border-top: 1px dashed var(--border);
    border-left: 2px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.inline-comment-reply {
    padding: 6px 8px;
    background: var(--bg-secondary);
    border-radius: 3px;
    font-size: 12px;
}

.inline-comment-reply-composer {
    margin-top: 6px;
    border-top: 1px dashed var(--border);
    padding-top: 6px;
}
.inline-comment-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 12px;
    resize: vertical;
    min-height: 48px;
}
.inline-comment-textarea:focus {
    outline: none;
    border-color: var(--accent, #7d3cff);
}
.inline-comment-composer {
    padding: 8px;
    background: var(--bg-input, var(--bg-secondary));
    border: 1px dashed var(--accent, #7d3cff);
    border-radius: var(--radius);
}
.inline-comment-composer-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    justify-content: flex-end;
}
.inline-comment-btn-primary {
    background: var(--accent, #7d3cff);
    color: #fff;
    border: 1px solid var(--accent, #7d3cff);
    border-radius: 3px;
    padding: 4px 10px;
    font-size: 11px;
    cursor: pointer;
}
.inline-comment-btn-primary:hover { filter: brightness(1.08); }
.inline-comment-btn-secondary {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 4px 10px;
    font-size: 11px;
    cursor: pointer;
}

.inline-comments-resolved-section {
    margin-top: 14px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}
.inline-comments-resolved-header {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

/* Page-list comment-count badge ((N) suffix on rows with open
   comments). Small, neutral, no emoji. */
.page-comments-badge,
.portal-page-comments-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 0 5px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    background: rgba(255, 196, 0, 0.14);
    border: 1px solid rgba(255, 196, 0, 0.38);
    border-radius: 8px;
}

/* ===========================================================
   Portal page editor (scope-down v1 of admin block editor)
   =========================================================== */

/* Two-column shell: editor body left, comments sidebar right. Falls
   back to a single column on narrow screens (the sidebar stacks
   below). */
.portal-page-shell {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.portal-page-main { flex: 1 1 0; min-width: 0; }
.portal-page-shell > #page-inline-comments-mount { flex: 0 0 auto; }
@media (max-width: 1100px) {
    .portal-page-shell { flex-direction: column; }
    .portal-page-shell > #page-inline-comments-mount { width: 100%; }
    .inline-comment-sidebar { width: 100%; max-height: 480px; position: static; }
}

.portal-page-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.portal-page-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-bright);
    margin: 0;
    outline: none;
    word-wrap: break-word;
    flex: 1 1 auto;
    min-width: 0;
}
.portal-page-title[contenteditable]:empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted, var(--text-secondary));
    font-weight: 400;
}

.portal-page-blocks {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pp-block {
    /* `position: relative` so the hover toolbar (`.pp-block-tools`)
       can park to the left without squeezing the content column. */
    position: relative;
    display: flex;
    gap: 6px;
    align-items: flex-start;
    padding: 2px 0;
    padding-left: 4px;
}
.pp-block-bullet-marker,
.pp-block-num-marker {
    width: 22px;
    flex-shrink: 0;
    text-align: right;
    padding-right: 4px;
    color: var(--text-secondary);
    line-height: 1.55;
    font-variant-numeric: tabular-nums;
}
.pp-block-checkbox {
    margin-top: 5px;
    flex-shrink: 0;
    accent-color: var(--accent);
}
.pp-block-content {
    flex: 1 1 0;
    min-width: 0;
    outline: none;
    color: var(--text-primary);
    line-height: 1.55;
    font-size: 14px;
    word-wrap: break-word;
    padding: 1px 2px;
    border-radius: 3px;
}
.pp-block-content code {
    background: var(--bg-tertiary, var(--bg-input));
    padding: 1px 5px;
    border-radius: 3px;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 12.5px;
}
.pp-block-content a {
    color: var(--accent, #7d3cff);
    text-decoration: underline;
}
.pp-block-content:empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted, var(--text-secondary));
    pointer-events: none;
}
.pp-block-heading1 .pp-block-content { font-size: 26px; font-weight: 700; color: var(--text-bright); margin-top: 12px; }
.pp-block-heading2 .pp-block-content { font-size: 21px; font-weight: 600; color: var(--text-bright); margin-top: 8px; }
.pp-block-heading3 .pp-block-content { font-size: 17px; font-weight: 600; color: var(--text-bright); margin-top: 4px; }
.pp-block-checklist .pp-block-content { padding-top: 1px; }
.pp-block-checklist.pp-checked .pp-block-content {
    text-decoration: line-through;
    color: var(--text-secondary);
}

/* Quote -- left rule + italic body. Same accent rule the admin uses. */
.pp-block-quote {
    padding-left: 0;
}
.pp-block-quote .pp-block-content {
    border-left: 3px solid var(--accent, #7d3cff);
    padding-left: 12px;
    color: var(--text-secondary);
    font-style: italic;
}

/* Code block -- mono, panel background, no inline wrap. */
.pp-block-code .pp-block-content {
    background: var(--card, var(--bg-secondary));
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 13px;
    white-space: pre-wrap;
}

/* Callout -- amber-tinted panel with an info icon. v1 ships a fixed
   icon (no picker); add picker in v2 if real users ask. */
.pp-block-callout {
    background: rgba(255, 196, 0, 0.08);
    border-left: 3px solid #f3a40b;
    border-radius: 4px;
    padding: 8px 12px 8px 8px;
    margin: 4px 0;
}
.pp-callout-icon {
    flex-shrink: 0;
    width: 22px;
    text-align: center;
    color: #f3a40b;
    font-size: 16px;
    line-height: 1.55;
}

/* Divider -- thin horizontal rule that takes the full content width. */
.pp-block-divider {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 12px 0;
    width: 100%;
}
.pp-block.pp-block-divider {
    /* Wrapper for divider blocks needs full width inside the column. */
    padding-left: 4px;
}

/* Toggle -- caret + collapsible body. v1 toggle holds a single HTML
   body in `block.meta.inner`; nested child blocks are out of scope. */
.pp-block-toggle {
    flex-direction: column;
    gap: 0;
    align-items: stretch;
}
.pp-toggle-head {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.pp-toggle-caret {
    flex-shrink: 0;
    width: 18px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--text-muted, var(--text-secondary));
    cursor: pointer;
    border-radius: 3px;
    transition: transform 120ms ease, color 120ms ease, background 120ms ease;
    font-size: 10px;
}
.pp-toggle-caret:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary, var(--bg-input));
}
.pp-toggle-caret.expanded { transform: rotate(90deg); }
.pp-toggle-caret.collapsed { transform: rotate(0deg); }
.pp-toggle-header {
    flex: 1;
    min-height: 1.4em;
    outline: none;
    color: var(--text-bright);
    font-weight: 500;
    line-height: 1.55;
}
.pp-toggle-header:empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted, var(--text-secondary));
    pointer-events: none;
}
.pp-toggle-body {
    margin-left: 24px;
    padding: 4px 0 4px 12px;
    border-left: 2px solid var(--border);
    outline: none;
    color: var(--text-primary);
    transition: max-height 160ms ease, opacity 120ms ease, padding 120ms ease;
    overflow: hidden;
}
.pp-toggle-body.collapsed {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    pointer-events: none;
}
.pp-toggle-body.expanded {
    max-height: 2000px;
    opacity: 1;
}
.pp-toggle-body:empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted, var(--text-secondary));
    font-style: italic;
    pointer-events: none;
}

/* Out-of-scope block stub. Tells the user the block exists but is
   admin-side only on the portal. Keeps layout intact when an admin-
   authored page mixes file / image / task / etc. blocks in. */
.pp-block-unsupported {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 6px 10px;
    background: var(--bg-tertiary, var(--bg-input));
    border: 1px dashed var(--border);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 13px;
    flex: 1;
}
.pp-unsupported-tag {
    background: var(--bg-secondary);
    color: var(--text-bright);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pp-unsupported-summary {
    color: var(--text-primary);
    font-size: 13px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pp-unsupported-hint {
    flex-basis: 100%;
}

/* Hover toolbar -- up / down / delete. Replaces the drag-to-reorder
   handle (punted to v2). The buttons are hidden until the row is
   hovered or focused, so clean pages don't feel busy. */
.pp-block-tools {
    position: absolute;
    left: -68px;
    top: 2px;
    display: flex;
    gap: 2px;
    padding: 2px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    opacity: 0;
    transition: opacity 110ms ease;
    pointer-events: none;
}
.pp-block:hover > .pp-block-tools,
.pp-block:focus-within > .pp-block-tools {
    opacity: 1;
    pointer-events: auto;
}
.pp-tool-btn {
    width: 20px;
    height: 20px;
    border: 0;
    background: transparent;
    color: var(--text-muted, var(--text-secondary));
    cursor: pointer;
    border-radius: 3px;
    font-size: 13px;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pp-tool-btn:hover:not(:disabled) {
    background: var(--bg-tertiary, var(--bg-input));
    color: var(--text-primary);
}
.pp-tool-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.pp-tool-del:hover:not(:disabled) {
    color: var(--red, #d6566c);
}
/* On narrow viewports the toolbar can't fit to the left of the column.
   Flip to inline above the block instead. */
@media (max-width: 720px) {
    .pp-block-tools {
        position: static;
        opacity: 1;
        pointer-events: auto;
        margin-bottom: 4px;
        align-self: flex-start;
        order: -1;
    }
    .pp-block {
        flex-wrap: wrap;
    }
}

/* Save status chip beside the title. "Saving..." (faded), "Saved"
   (green-tinted), error variant (red, click-to-retry). */
.pp-save-chip {
    display: inline-block;
    margin-left: 12px;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-tertiary, var(--bg-input));
    border: 1px solid transparent;
    vertical-align: middle;
    line-height: 1.6;
    user-select: none;
}
.pp-save-chip-saving {
    color: var(--text-secondary);
    background: var(--bg-tertiary, var(--bg-input));
}
.pp-save-chip-saved {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.10);
    border-color: rgba(74, 222, 128, 0.32);
    transition: opacity 380ms ease;
    opacity: 1;
}
/* Fade-out class -- applied ~1.6s after a save completes so the chip
   doesn't sit there forever. The transition above runs the actual
   fade. */
.pp-save-chip-fading {
    opacity: 0;
}
.pp-save-chip-error {
    color: #fff;
    background: var(--red, #d6566c);
    border-color: var(--red, #d6566c);
    cursor: pointer;
}
.pp-save-chip-error:hover {
    filter: brightness(1.1);
}
.pp-save-chip-dirty {
    color: var(--text-muted, var(--text-secondary));
    background: transparent;
    border-color: transparent;
    font-size: 14px;
    line-height: 1;
    padding: 0 6px;
}

/* ---------------------------------------------------------------
   Notion-style page chrome -- breadcrumb, icon, peer ribbon, live
   collab pill, peer carets / selections / name flags. All ported
   from the admin Pages editor (.pe-* classes) and namespaced under
   .pp-* so the two surfaces don't fight each other when the admin
   ever opens a portal page in a debug iframe.
   --------------------------------------------------------------- */

/* Breadcrumb sits above the title row, same spacing as Notion's
   "Back to project" affordance on the admin side. */
.pp-breadcrumb {
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}
.pp-breadcrumb a {
    color: var(--text-secondary);
    text-decoration: none;
}
.pp-breadcrumb a:hover {
    color: var(--text-primary);
    text-decoration: underline;
}

/* Notion-style page icon -- click to (eventually) change. Ships
   read-only in v1 so we don't open the picker scope; tooltip
   tells the user it's a future affordance. */
.pp-icon {
    font-size: 30px;
    line-height: 1;
    user-select: none;
    flex-shrink: 0;
    transition: transform 100ms ease;
}
.pp-icon:hover { transform: scale(1.06); }

/* Page meta row -- "Updated <date>". Sits between the title row and
   the blocks. Matches admin spacing. */
.pp-page-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

/* Live / Solo collab pill. Identical visual to the admin pill so
   the same affordance reads in both surfaces. */
.pp-collab-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-secondary);
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-left: 8px;
    user-select: none;
    background: var(--bg-tertiary);
    flex-shrink: 0;
    align-self: center;
}
.pp-collab-pill.pp-collab-off { color: var(--text-muted, var(--text-secondary)); }
.pp-collab-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--text-muted, var(--text-secondary));
}
.pp-collab-dot.pp-collab-on {
    background: var(--green, #40c057);
    box-shadow: 0 0 6px rgba(64,192,87,0.6);
    animation: pp-collab-pulse 2.4s ease-in-out infinite;
}
@keyframes pp-collab-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

/* Peer presence ribbon -- avatar circles for every other user
   currently editing the page. Empty + hidden when alone. */
.pp-peer-ribbon {
    display: none;
    align-items: center;
    gap: 0;
    margin-left: 8px;
    flex-shrink: 0;
    align-self: center;
}
.pp-peer-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: white;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    margin-right: -6px;
    border: 2px solid var(--bg, var(--bg-primary, #1a1b1e));
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    transition: transform 120ms ease;
}
.pp-peer-avatar:hover { transform: translateY(-2px); }

/* Inline peer presence overlays. .pp-block is position:relative so
   absolute children ride along with the block. pointer-events:none
   across the board so cursors never steal clicks from the editor. */
.pp-peer-cursor {
    position: absolute;
    top: 4px;
    right: -4px;
    z-index: 5;
    pointer-events: none;
    color: white;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.92;
    animation: pp-peer-cursor-in 180ms ease;
}
.pp-peer-cursor-floating {
    top: auto;
    right: auto;
}
@keyframes pp-peer-cursor-in {
    from { opacity: 0; transform: translateX(4px); }
    to   { opacity: 0.92; transform: translateX(0); }
}

/* Character-precision caret line. 2px wide, full block height,
   gentle blink so it reads as a cursor not a styled border. */
.pp-peer-caret {
    position: absolute;
    width: 2px;
    z-index: 6;
    pointer-events: none;
    border-radius: 1px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
    animation: pp-peer-caret-blink 1.1s ease-in-out infinite;
}
@keyframes pp-peer-caret-blink {
    0%, 60%   { opacity: 1; }
    80%, 100% { opacity: 0.45; }
}

/* Selection background -- coloured rect between anchor + focus
   offsets. mix-blend-mode keeps the underlying text legible. */
.pp-peer-selection {
    position: absolute;
    z-index: 4;
    pointer-events: none;
    opacity: 0.28;
    border-radius: 2px;
    mix-blend-mode: multiply;
}

/* Slash menu -- the discoverable block-type picker. Same shape as
   admin (`.pe-slash-menu`); kept in `.pp-` namespace so the admin
   bundle's own menu doesn't accidentally get restyled. */
.pp-slash-menu {
    position: absolute;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light, var(--border));
    border-radius: 8px;
    padding: 4px;
    min-width: 240px;
    max-width: 320px;
    max-height: 360px;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.40);
    z-index: 10001;
}
/* Mobile -- slide up from the bottom of the screen. Easier to tap. */
.pp-slash-menu.pp-slash-mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    width: 100%;
    max-width: none;
    max-height: 60vh;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
    padding: 8px;
}
.pp-slash-label {
    color: var(--text-secondary);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 8px 6px;
}
.pp-slash-empty {
    padding: 10px 12px;
    color: var(--text-muted, var(--text-secondary));
    font-size: 12px;
    font-style: italic;
}
.pp-slash-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    width: 100%;
    background: transparent;
    border: 0;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    border-radius: 4px;
    font-size: 13px;
}
.pp-slash-option:hover,
.pp-slash-selected {
    background: var(--bg-tertiary, var(--bg-input));
    outline: 1px solid rgba(125, 60, 255, 0.28);
}
.pp-slash-icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--card, var(--bg-secondary));
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}
.pp-slash-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.pp-slash-name {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
}
.pp-slash-cmd {
    color: var(--text-muted, var(--text-secondary));
    font-family: 'SF Mono', Menlo, monospace;
    font-size: 11px;
}

/* ========================================================== */
/* Portal rich blocks (2026-04-19 parity wave)                 */
/* file / image / ocr / task / project / person / bookmark /   */
/* columns / table.                                            */
/* ========================================================== */

.pp-block-file,
.pp-block-image,
.pp-block-ocr,
.pp-block-mention,
.pp-block-bookmark,
.pp-block-columns,
.pp-block-table {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.pp-block-columns {
    align-items: stretch;
    gap: 0;
}

.pp-file-placeholder {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-tertiary, var(--bg-input));
    border: 1px dashed var(--border);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 13px;
    text-align: left;
}
.pp-file-placeholder:hover {
    color: var(--text-primary);
    border-color: var(--accent, #7d3cff);
}
.pp-file-icon {
    flex-shrink: 0;
    font-size: 16px;
}
.pp-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--bg-tertiary, var(--bg-input));
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 13px;
}
.pp-file-chip:hover {
    border-color: var(--accent, #7d3cff);
    color: var(--text-bright);
}
.pp-file-name { font-weight: 500; }
.pp-file-size {
    color: var(--text-muted, var(--text-secondary));
    margin-left: 4px;
}
.pp-file-action {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 11px;
    cursor: pointer;
}
.pp-file-action:hover {
    color: var(--text-bright);
    border-color: var(--accent, #7d3cff);
}
.pp-file-action-danger:hover {
    color: var(--red, #d6566c);
    border-color: var(--red, #d6566c);
}

/* Image preview -- thumbnail with max-width so the page doesn't blow
   out horizontally when the user uploads a hi-res asset. */
.pp-image-preview {
    max-width: 100%;
    max-height: 480px;
    border-radius: 6px;
    border: 1px solid var(--border);
    object-fit: contain;
}

/* OCR result -- monospace block so the user sees structure. */
.pp-ocr-result {
    flex: 1 1 0;
    background: var(--card, var(--bg-secondary));
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 12.5px;
    white-space: pre-wrap;
    color: var(--text-primary);
}

/* Mention chip -- task / project / person link. */
.pp-mention-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(125, 60, 255, 0.10);
    color: var(--accent, #7d3cff);
    border: 1px solid rgba(125, 60, 255, 0.28);
    border-radius: 12px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
}
.pp-mention-chip:hover {
    background: rgba(125, 60, 255, 0.18);
    color: var(--text-bright);
}
.pp-mention-icon { font-size: 13px; }

/* Mention picker -- modal-ish overlay anchored on the click. Lightweight
   so the slash-then-pick path stays under one second. */
.pp-mention-picker-overlay {
    position: fixed;
    inset: 0;
    z-index: 10010;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 80px 16px;
}
.pp-mention-picker {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}
.pp-mention-search {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 14px;
}
.pp-mention-results {
    max-height: 320px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pp-mention-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    background: transparent;
    border: 0;
    text-align: left;
    padding: 6px 8px;
    color: var(--text-primary);
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
}
.pp-mention-row:hover {
    background: var(--bg-tertiary, var(--bg-input));
}
.pp-mention-row-name { font-size: 13px; font-weight: 500; }
.pp-mention-row-sub { font-size: 11px; }
.pp-mention-footer {
    display: flex;
    justify-content: flex-end;
}

/* Bookmark card. Mirror the admin .pe-bm-card. */
.pp-bm-card {
    flex: 1 1 0;
    display: flex;
    align-items: stretch;
    gap: 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card, var(--bg-secondary));
    color: var(--text-primary);
    text-decoration: none;
    overflow: hidden;
}
.pp-bm-card:hover {
    border-color: var(--accent, #7d3cff);
}
.pp-bm-text {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.pp-bm-title {
    font-weight: 600;
    color: var(--text-bright);
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.pp-bm-desc {
    color: var(--text-secondary);
    font-size: 12px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.pp-bm-footer {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-muted, var(--text-secondary));
    font-size: 11px;
    margin-top: 2px;
}
.pp-bm-favicon { width: 14px; height: 14px; }
.pp-bm-image {
    width: 120px;
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
}
.pp-bm-empty {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--bg-tertiary, var(--bg-input));
    border: 1px dashed var(--border);
    border-radius: 4px;
}
.pp-bm-input {
    flex: 1 1 0;
    background: transparent;
    border: 0;
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
    min-width: 0;
}

/* Two-column layout. Each column is a stretchy contenteditable. */
.pp-block-columns {
    flex: 1 1 0;
    flex-direction: row;
    gap: 12px;
    align-items: stretch;
}
.pp-col {
    flex: 1 1 0;
    min-width: 0;
    border: 1px dashed var(--border);
    border-radius: 4px;
    padding: 8px 10px;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.55;
    outline: none;
    white-space: pre-wrap;
}
.pp-col:focus {
    border-color: var(--accent, #7d3cff);
    border-style: solid;
}
.pp-col:empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted, var(--text-secondary));
    pointer-events: none;
}
.pp-col-divider {
    width: 1px;
    background: var(--border);
    flex-shrink: 0;
}

/* Editable table. Same shape as admin's .pe-table -- header row +
   add-row / add-column affordances. */
.pp-block-table {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
}
.pp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: var(--text-primary);
}
.pp-table th, .pp-table td {
    border: 1px solid var(--border);
    padding: 6px 8px;
    min-width: 50px;
    text-align: left;
    vertical-align: top;
    outline: none;
}
.pp-table th {
    background: var(--bg-tertiary, var(--bg-input));
    color: var(--text-bright);
    font-weight: 600;
}
.pp-table th:empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted, var(--text-secondary));
    font-weight: 400;
    pointer-events: none;
}
.pp-table-add {
    width: 28px;
    text-align: center;
    color: var(--text-muted, var(--text-secondary));
    cursor: pointer;
    user-select: none;
}
.pp-table-add:hover { color: var(--accent, #7d3cff); }
.pp-table-add-row {
    align-self: flex-start;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 11px;
    cursor: pointer;
}
.pp-table-add-row:hover { color: var(--accent, #7d3cff); border-color: var(--accent, #7d3cff); }

/* Mobile -- stack columns vertically on narrow viewports so the user
   can actually read both halves. */
@media (max-width: 720px) {
    .pp-block-columns { flex-direction: column; }
    .pp-col-divider { display: none; }
    .pp-bm-image { display: none; }
}

/* ========================================================== */
/* Phase 12 — chat thread-intelligence (#150)                   */
/* ========================================================== */

/* "What you missed" catch-up bar at the top of every channel pane. */
.chat-catchup-bar-wrap {
    padding: 6px 8px 0 8px;
}
.chat-catchup-bar {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent, #7d3cff);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13px;
    margin-bottom: 4px;
}
.chat-catchup-bar.collapsed .chat-catchup-body,
.chat-catchup-bar.collapsed .chat-catchup-actions {
    display: none;
}
.chat-catchup-bar.expanded .chat-catchup-body,
.chat-catchup-bar.expanded .chat-catchup-actions {
    display: block;
}
.chat-catchup-head {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.chat-catchup-label {
    font-weight: 600;
    color: var(--text-bright);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.chat-catchup-meta {
    color: var(--text-secondary);
    font-size: 11px;
    flex: 1;
}
.chat-catchup-caret {
    color: var(--text-secondary);
    font-family: monospace;
    transition: transform 0.15s;
}
.chat-catchup-bar.expanded .chat-catchup-caret {
    transform: rotate(180deg);
}
.chat-catchup-body {
    margin-top: 6px;
    padding: 6px 0;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.45;
}
.chat-catchup-body p {
    margin: 4px 0;
}
.chat-catchup-body ul {
    margin: 4px 0 4px 18px;
    padding: 0;
}
.chat-catchup-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}
.chat-catchup-btn {
    background: var(--bg);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
}
.chat-catchup-btn:hover { background: var(--bg-input); }
.chat-catchup-btn.primary {
    background: var(--accent, #7d3cff);
    color: #fff;
    border-color: var(--accent, #7d3cff);
}
.chat-catchup-btn.primary:hover { opacity: 0.9; }

/* Thread status pill on parent messages (open / answered / decided / closed). */
.chat-thread-status-pill {
    display: inline-block;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-left: 6px;
    cursor: default;
    color: var(--text-secondary);
}
.chat-thread-status-pill.clickable { cursor: pointer; }
.chat-thread-status-pill--open {
    background: rgba(120, 120, 120, 0.12);
    color: var(--text-secondary);
    border-color: rgba(120, 120, 120, 0.3);
}
.chat-thread-status-pill--answered {
    background: rgba(56, 122, 255, 0.14);
    color: #2563eb;
    border-color: rgba(56, 122, 255, 0.4);
}
.chat-thread-status-pill--decided {
    background: rgba(34, 175, 100, 0.16);
    color: #15803d;
    border-color: rgba(34, 175, 100, 0.4);
}
.chat-thread-status-pill--closed {
    background: rgba(140, 140, 140, 0.12);
    color: var(--text-secondary);
    border-color: rgba(140, 140, 140, 0.3);
    opacity: 0.75;
}

/* Footer row under a parent: decided link + promote button. */
.chat-message-thread-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    flex-wrap: wrap;
}
.chat-thread-decision-link {
    color: #15803d;
    font-size: 12px;
    text-decoration: none;
    font-weight: 600;
}
.chat-thread-decision-link:hover { text-decoration: underline; }
.chat-promote-decision-btn {
    background: transparent;
    color: var(--text-secondary);
    border: 1px dashed var(--border);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 11px;
    cursor: pointer;
}
.chat-promote-decision-btn:hover {
    color: var(--accent, #7d3cff);
    border-color: var(--accent, #7d3cff);
    border-style: solid;
}

/* Promote-to-decision modal. */
.chat-promote-decision-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
}
.chat-promote-decision-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 18px 22px;
    max-width: 620px;
    width: 92%;
    max-height: 88vh;
    overflow: auto;
}
.chat-promote-decision-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.chat-promote-decision-card header strong {
    font-size: 16px;
    color: var(--text-bright);
}
.chat-promote-decision-body label {
    display: block;
    margin-bottom: 12px;
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.chat-promote-decision-body input,
.chat-promote-decision-body textarea {
    width: 100%;
    margin-top: 4px;
    padding: 8px 10px;
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
    box-sizing: border-box;
}
.chat-promote-decision-body textarea { resize: vertical; }
.chat-promote-decision-card footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 4px;
}
.chat-promote-decision-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 30px 0;
    color: var(--text-secondary);
    font-size: 13px;
    justify-content: center;
}
.chat-promote-decision-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border);
    border-top-color: var(--accent, #7d3cff);
    border-radius: 50%;
    animation: chat-promote-decision-spin 0.8s linear infinite;
}
@keyframes chat-promote-decision-spin {
    to { transform: rotate(360deg); }
}
.chat-promote-decision-error {
    background: rgba(220, 38, 38, 0.12);
    border: 1px solid rgba(220, 38, 38, 0.3);
    color: #b91c1c;
    border-radius: 4px;
    padding: 8px 10px;
    margin-bottom: 10px;
    font-size: 12px;
}
.chat-promote-decision-warning {
    background: rgba(217, 119, 6, 0.12);
    border: 1px solid rgba(217, 119, 6, 0.3);
    color: #b45309;
    border-radius: 4px;
    padding: 8px 10px;
    margin-bottom: 10px;
    font-size: 12px;
}

/* Open-threads queue page. */
.open-thread-row {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.1s;
}
.open-thread-row:hover { background: var(--bg-input); }
.open-thread-row-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.open-thread-channel {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
}
.open-thread-when {
    font-size: 11px;
    color: var(--text-secondary);
    margin-left: auto;
}
.open-thread-author {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 2px;
}
.open-thread-preview {
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.4;
}
.open-thread-meta {
    color: var(--text-secondary);
    font-size: 11px;
    margin-top: 4px;
}

/* =============================================================
 * PROJECT DASHBOARD (2026-04-19)
 * 3-column landing surface for the project + company pages.
 * Replaces the old "Tasks tab as default landing" pattern with
 * My tasks / Activity / Project chat side by side.
 *
 * Desktop (>= 1025px) : 3 columns at 1fr 1.5fr 1.5fr.
 * Tablet (<= 1024px)  : col-1 alone on row 1, col-2 + col-3 row 2.
 * Mobile (<= 720px)   : single column stack.
 * ============================================================= */

.pd-member-strip {
    margin: 4px 0 16px;
    padding: 10px 12px;
    background: var(--card, var(--bg-secondary, var(--bg)));
    border: 1px solid var(--border);
    border-radius: 8px;
}
.pd-member-strip-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: space-between;
}
.pd-member-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    flex: 1;
    min-width: 0;
}
.pd-member-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 4px;
    background: var(--bg-secondary, var(--bg));
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12px;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.12s ease;
}
.pd-member-chip:hover {
    background: var(--hover, rgba(255, 255, 255, 0.04));
}
.pd-member-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent, #4c6ef5);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    flex-shrink: 0;
}
.pd-member-name {
    color: var(--text-bright);
    font-size: 12px;
    line-height: 1;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pd-member-overflow {
    font-size: 11px;
    color: var(--text-muted);
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--bg-secondary, var(--bg));
    border: 1px dashed var(--border);
}
.pd-member-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.project-dashboard {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(280px, 1.5fr) minmax(280px, 1.5fr);
    gap: 14px;
    align-items: stretch;
}
.pd-col {
    background: var(--card, var(--bg-secondary, var(--bg)));
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.pd-col-head {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary, var(--bg));
    color: var(--text-bright);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.pd-col-body {
    padding: 6px 0;
    overflow-y: auto;
    flex: 1 1 auto;
    max-height: 70vh;
    min-height: 220px;
}
/* The chat column hosts an entire chat-feed with its own padding +
   composer; do not double-pad. */
.pd-col-body--chat {
    padding: 0;
    max-height: 70vh;
}
.pd-col-body--chat .chat-feed {
    border: 0;
    border-radius: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.pd-col-body--chat .chat-feed-list {
    max-height: none;
    flex: 1 1 auto;
}

.pd-task-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.12s ease;
}
.pd-task-row:hover {
    background: var(--hover, rgba(255, 255, 255, 0.03));
}
.pd-task-row:last-child {
    border-bottom: 0;
}
.pd-task-title {
    color: var(--text-primary);
    font-size: 13px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pd-task-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.pd-task-project {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pd-task-done {
    margin-left: 4px;
}
.pd-due-chip {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--bg-secondary, var(--bg));
    border: 1px solid var(--border);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.pd-due-chip.due-overdue {
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(220, 38, 38, 0.4);
    color: #f87171;
}
.pd-due-chip.due-soon {
    background: rgba(234, 179, 8, 0.12);
    border-color: rgba(234, 179, 8, 0.4);
    color: #fbbf24;
}
.pd-due-chip.due-ok {
    background: rgba(34, 197, 94, 0.10);
    border-color: rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.pd-activity-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    line-height: 1.4;
}
.pd-activity-row:last-child {
    border-bottom: 0;
}
.pd-activity-time {
    color: var(--text-muted);
    font-size: 11px;
    flex-shrink: 0;
    white-space: nowrap;
}
.pd-activity-actor {
    color: var(--text-bright);
    font-size: 12px;
    font-weight: 500;
    flex-shrink: 0;
}
.pd-activity-detail {
    color: var(--text-primary);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.pd-overview-fold {
    border-top: 1px solid var(--border);
    padding-top: 6px;
}
.pd-overview-fold > summary {
    list-style: none;
    user-select: none;
}
.pd-overview-fold > summary::-webkit-details-marker { display: none; }
.pd-overview-fold > summary::before {
    content: "\25B8";
    margin-right: 8px;
    color: var(--text-muted);
    transition: transform 0.15s ease;
    display: inline-block;
}
.pd-overview-fold[open] > summary::before {
    transform: rotate(90deg);
}

/* Tablet breakpoint: col-1 spans full row, col-2 + col-3 share row 2. */
@media (max-width: 1024px) {
    .project-dashboard {
        grid-template-columns: 1fr 1fr;
    }
    .pd-col-1 {
        grid-column: 1 / -1;
    }
}

/* Mobile breakpoint: single column stack. */
@media (max-width: 720px) {
    .project-dashboard {
        grid-template-columns: 1fr;
    }
    .pd-col-1 {
        grid-column: auto;
    }
    .pd-col-body {
        max-height: 50vh;
    }
    .pd-member-strip-inner {
        flex-direction: column;
        align-items: stretch;
    }
    .pd-member-chips {
        justify-content: flex-start;
    }
    .pd-member-actions {
        justify-content: flex-end;
    }
}

/* =============================================================
   RANKS — per-company ranks card + people-hub rank dropdown
   (2026-04-19)
   ============================================================= */

.rank-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rank-row {
    transition: border-color 0.15s ease;
}

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

.rank-perm-matrix {
    background: var(--bg);
    padding: 8px 10px;
    border-radius: 4px;
}

.rank-perm-cell {
    line-height: 1.4;
}

.rank-pick {
    transition: border-color 0.4s ease;
    cursor: pointer;
}

/* Portal Team-management card. The card already inherits .card so
   most of the visual is shared; this block tightens spacing for
   the team table on small viewports. */
.team-mgmt-card .card {
    padding: 14px;
}

.team-mgmt-card table th,
.team-mgmt-card table td {
    vertical-align: middle;
}

.team-mgmt-card .team-row-rank {
    font-size: 12px;
    padding: 3px 6px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
}

@media (max-width: 720px) {
    .team-mgmt-card table {
        font-size: 12px;
    }
}

/* =============================================================
 * PROJECT PROGRESS CARD (2026-04-19)
 * Composite "where is this project at" card. Sits ABOVE the 3-column
 * dashboard on the project landing (admin + portal). Four subsections:
 *   1. Phase stepper (5 phases: Discovery -> Wrap)
 *   2. Task completion ring + caption
 *   3. 7-day activity sparkline
 *   4. AI status one-liner (bottom)
 * ============================================================= */

.progress-card {
    margin: 4px 0 16px;
    padding: 14px 16px;
    background: var(--card, var(--bg-secondary, var(--bg)));
    border: 1px solid var(--border);
    border-radius: 8px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-rows: auto auto;
    gap: 14px 18px;
    align-items: center;
}
.progress-card-stepper {
    grid-column: 1 / 2;
    grid-row: 1;
    min-width: 0;
}
.progress-card-ring {
    grid-column: 2 / 3;
    grid-row: 1;
}
.progress-card-spark {
    grid-column: 3 / 4;
    grid-row: 1;
}
.progress-card-oneliner {
    grid-column: 1 / -1;
    grid-row: 2;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.45;
    border-top: 1px dashed var(--border);
    padding-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.progress-card-oneliner-text {
    flex: 1;
    min-width: 0;
}
.progress-card-oneliner-meta {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.progress-card .phase-set-mini {
    font-size: 11px;
    color: var(--text-muted);
    padding-left: 6px;
}
.progress-card select.progress-card-phase-select {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 3px 6px;
    color: var(--text-primary);
    font-size: 12px;
}

/* Phase stepper. 5 dots connected by a line; the current dot is filled
   + accent-coloured, completed dots are accent-tinted, future dots are
   muted. The label sits below each dot. */
.phase-stepper {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px;
    width: 100%;
}
.phase-stepper-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
    position: relative;
    cursor: default;
}
.phase-stepper-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--bg);
    z-index: 2;
    flex-shrink: 0;
}
.phase-stepper-step--done .phase-stepper-dot {
    background: var(--accent, #4c6ef5);
    border-color: var(--accent, #4c6ef5);
}
.phase-stepper-step--active .phase-stepper-dot {
    background: var(--accent, #4c6ef5);
    border-color: var(--accent, #4c6ef5);
    box-shadow: 0 0 0 4px rgba(76, 110, 245, 0.18);
}
.phase-stepper-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
    line-height: 1.25;
}
.phase-stepper-step--active .phase-stepper-label {
    color: var(--text-bright);
    font-weight: 600;
}
.phase-stepper-step--done .phase-stepper-label {
    color: var(--text-primary);
}
/* Connector line between steps. Drawn from the centre of one dot to
   the next using a pseudo-element on each step except the last. */
.phase-stepper-step::after {
    content: "";
    position: absolute;
    top: 6px;
    left: calc(50% + 7px);
    right: calc(-50% + 7px);
    height: 2px;
    background: var(--border);
    z-index: 1;
}
.phase-stepper-step--done::after {
    background: var(--accent, #4c6ef5);
}
.phase-stepper-step:last-child::after {
    display: none;
}

/* Task ring -- pure CSS donut via conic-gradient. The percentage label
   sits in the centre of the ring; the caption hangs below. */
.task-ring {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: conic-gradient(
        var(--accent, #4c6ef5) calc(var(--ring-percent, 0) * 1%),
        var(--border) 0
    );
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.task-ring::before {
    content: "";
    position: absolute;
    inset: 6px;
    background: var(--card, var(--bg-secondary, var(--bg)));
    border-radius: 50%;
}
.task-ring-percent {
    position: relative;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-bright);
    z-index: 1;
}
.task-ring-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    text-decoration: none;
}
.task-ring-caption {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
    line-height: 1.2;
}

/* 7-day activity sparkline. Pure CSS bars with var(--bar-h) per bar.
   No SVG, no external lib. Each bar is a flex item; height is set
   inline. The wrapper has a fixed height so bars align bottom. */
.activity-sparkline {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 44px;
    width: 90px;
    padding: 4px 0 0;
}
.activity-sparkline-bar {
    flex: 1;
    min-height: 2px;
    background: var(--accent, #4c6ef5);
    border-radius: 2px 2px 0 0;
    opacity: 0.8;
}
.activity-sparkline-bar.empty {
    background: var(--border);
    opacity: 0.4;
}
.activity-sparkline-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.activity-sparkline-caption {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
}

/* Tablet stack: keep stepper full width on row 1; ring + spark drop
   to a second row beside the one-liner. */
@media (max-width: 720px) {
    .progress-card {
        grid-template-columns: 1fr;
    }
    .progress-card-stepper { grid-column: 1; grid-row: 1; }
    .progress-card-ring    { grid-column: 1; grid-row: 2; justify-self: start; }
    .progress-card-spark   { grid-column: 1; grid-row: 3; justify-self: start; }
    .progress-card-oneliner { grid-row: 4; }
    .phase-stepper-label { font-size: 9px; }
}

/* Inline mini-progress used in the home/list view (per-row tiny ring +
   phase chip). Single 22px circle + a textual chip; no labels. */
.progress-mini {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
}
.progress-mini-ring {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: conic-gradient(
        var(--accent, #4c6ef5) calc(var(--ring-percent, 0) * 1%),
        var(--border) 0
    );
    position: relative;
    flex-shrink: 0;
}
.progress-mini-ring::before {
    content: "";
    position: absolute;
    inset: 3px;
    background: var(--card, var(--bg-secondary, var(--bg)));
    border-radius: 50%;
}
.progress-mini-phase {
    display: inline-block;
    padding: 1px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-primary);
    background: var(--bg-secondary, var(--bg));
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 9px;
    font-weight: 600;
}

/* =============================================================
 * COMPANY INTERNAL NEWS CARD (2026-04-19)
 * Aggregated "what's happening in this company" feed. Same vocabulary
 * across admin + portal. Each row is one click to source; icon is a
 * text label (per WRITING_RULES — no emoji decoration).
 * ============================================================= */

.internal-news-card {
    margin: 4px 0 16px;
    padding: 12px 0 6px;
    background: var(--card, var(--bg-secondary, var(--bg)));
    border: 1px solid var(--border);
    border-radius: 8px;
}
.internal-news-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 14px 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}
.internal-news-card-head h3 {
    margin: 0;
    color: var(--text-bright);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.internal-news-card-empty {
    padding: 18px 14px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.4;
}
.news-rows {
    display: flex;
    flex-direction: column;
}
.news-row {
    display: grid;
    grid-template-columns: 84px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    transition: background 0.12s ease;
    cursor: pointer;
}
.news-row:hover {
    background: var(--hover, rgba(255, 255, 255, 0.03));
}
.news-row:last-child {
    border-bottom: 0;
}
.news-row-kind {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    text-align: center;
    white-space: nowrap;
}
/* Per-kind colour tints. Use CSS vars so the theme can override later
   without re-touching the JS. */
.news-row-kind.kind-announcement {
    border-color: rgba(76, 110, 245, 0.35);
    color: var(--accent, #4c6ef5);
}
.news-row-kind.kind-decision {
    border-color: rgba(34, 197, 94, 0.35);
    color: var(--color-success, #22c55e);
}
.news-row-kind.kind-milestone {
    border-color: rgba(234, 179, 8, 0.45);
    color: #eab308;
}
.news-row-kind.kind-status {
    border-color: rgba(168, 85, 247, 0.35);
    color: #a855f7;
}
.news-row-kind.kind-joined {
    border-color: rgba(20, 184, 166, 0.35);
    color: #14b8a6;
}
.news-row-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.news-row-title {
    color: var(--text-bright);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.news-row-subtitle {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.news-row-when {
    color: var(--text-muted);
    font-size: 11px;
    white-space: nowrap;
}
.internal-news-more {
    text-align: center;
    padding: 10px 14px;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--border);
    width: 100%;
}
.internal-news-more:hover {
    color: var(--accent, #4c6ef5);
}

@media (max-width: 720px) {
    .news-row {
        grid-template-columns: 70px 1fr;
        grid-template-rows: auto auto;
    }
    .news-row-when {
        grid-column: 2;
        grid-row: 2;
    }
}

/* ============================================================
   PROJECT PERMISSIONS MATRIX (2026-04-19)
   ============================================================
   Shared between admin (Permissions sub-tab on the project page)
   and portal (Permissions tab). The matrix uses .perm-matrix as
   the table class, .perm-cell on each toggle cell, and
   .perm-modified-pill for the "this cell differs from the rank
   default" badge. */

.perm-matrix {
    line-height: 1.2;
}

.perm-matrix th.perm-col {
    /* Vertical-text column headers cap so the matrix stays
       compact even with 13+ columns. The rotation is set inline
       so this rule just clamps the dimensions. */
    max-width: 24px;
    min-width: 24px;
    padding: 4px 0 6px;
}

.perm-matrix th.perm-group-head {
    border-right: 1px solid var(--border);
}

.perm-matrix th.perm-group-head:last-child {
    border-right: none;
}

.perm-matrix td.perm-cell {
    vertical-align: middle;
    border-right: 1px dashed transparent;
}

.perm-matrix td.perm-cell input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    margin: 0;
}

.perm-modified-pill {
    /* "mod" badge on cells whose effective value differs from the
       rank default. Subtle accent so the matrix doesn't shout when
       half the cells are overridden. */
    display: inline-block;
    padding: 0 4px;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--accent, #f59e0b);
    background: rgba(245, 158, 11, 0.15);
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.perm-group-label {
    /* Hairline separator under the muted-text group label so the
       Org / Content / Projects / Communications / Admin clusters
       are easy to scan in the rank editor + the read-only matrix. */
    border-bottom: 1px solid var(--border);
    padding-bottom: 2px;
}

/* Person-override row card, shared between admin + portal. Hosts
   one elevated person at a time with a 13-toggle grid + a
   "Remove override" affordance. */
.person-override-row {
    transition: border-color 0.15s ease;
}

.person-override-row:hover {
    border-color: var(--accent, #f59e0b);
}

/* Search-and-pick row in the "Elevate a person" modal. */
.add-person-row:hover {
    background: var(--bg-hover, rgba(255,255,255,0.04));
}

/* Mobile: tighten cell padding so the matrix still fits without
   horizontal scroll on small screens (the wrapper retains
   overflow-x:auto so very dense matrices stay swipeable). */
@media (max-width: 720px) {
    .perm-matrix th.perm-col {
        max-width: 18px;
        min-width: 18px;
        font-size: 9px;
    }
    .perm-matrix td.perm-cell {
        padding: 2px;
    }
}

/* Rank summary line (one-liner under each rank row in the company
   Ranks card). Breaks long permission lists onto multiple lines so
   the row never overflows horizontally. */
.rank-summary {
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* Slightly tighter perm-toggle label so the rank-editor checkbox
   grid fits 4-5 cells per row at typical widths. */
.perm-toggle {
    border-radius: 4px;
    transition: background-color 0.1s ease;
}

.perm-toggle:hover {
    background: var(--bg-hover, rgba(255,255,255,0.04));
}

/* =========================================================
   ARCHITECT-CONTEXT (2026-04-19) -- contextual entry points
   --------------------------------------------------------
   Mirror of the same block in static/portal-styles.css. The
   admin SPA loads styles.css; the portal SPA loads portal-
   styles.css; both use static/architect-context.js. Keep the
   two copies in sync so admin + portal render identically.
   ========================================================= */
.architect-entry-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--border);
    background: var(--bg-secondary, #1a1f29);
    color: var(--text-primary, #c9d1d9);
    border-radius: 6px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.architect-entry-btn:hover {
    background: linear-gradient(90deg, rgba(159,122,234,0.12),
                                       rgba(64,128,255,0.10));
    border-color: var(--accent, #66bbff);
    color: var(--text-bright, #fff);
}
.architect-entry-btn:focus-visible {
    outline: 2px solid var(--accent, #66bbff);
    outline-offset: 2px;
}
.architect-entry-btn-icon {
    font-size: 13px;
    line-height: 1;
    color: #c990ff;
}
.architect-entry-btn-label { font-weight: 500; }
.architect-entry-btn--tiny {
    padding: 3px 7px;
    font-size: 11px;
    gap: 4px;
}
.architect-entry-btn--tiny .architect-entry-btn-icon { font-size: 11px; }
.architect-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 11000;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: architect-fade-in 0.14s ease-out;
}
.architect-side-pane-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 480px;
    max-width: 100vw;
    z-index: 11000;
    pointer-events: none;
}
.architect-side-pane-backdrop > .architect-panel {
    pointer-events: auto;
}
@keyframes architect-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes architect-slide-in {
    from { transform: translateX(20px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
.architect-panel {
    background: var(--bg-secondary, #161b22);
    color: var(--text-primary, #c9d1d9);
    border: 1px solid var(--border, #30363d);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: inherit;
}
.architect-panel--modal {
    width: 720px;
    max-width: 100%;
    height: 70vh;
    max-height: 720px;
    border-radius: 10px;
    animation: architect-fade-in 0.16s ease-out;
}
.architect-panel--side {
    width: 100%;
    height: 100vh;
    border-radius: 0;
    border-right: none;
    border-top: none;
    border-bottom: none;
    border-left: 1px solid var(--border, #30363d);
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.45);
    animation: architect-slide-in 0.18s ease-out;
}
.architect-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border, #30363d);
    background: linear-gradient(90deg, rgba(159,122,234,0.08), transparent);
}
.architect-panel-title-wrap {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    min-width: 0;
}
.architect-panel-icon {
    font-size: 18px;
    line-height: 1.1;
    color: #c990ff;
    margin-top: 2px;
}
.architect-panel-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-bright, #fff);
}
.architect-panel-subtitle {
    font-size: 12px;
    color: var(--text-muted, #8b949e);
    margin-top: 2px;
}
.architect-panel-close {
    background: transparent;
    border: none;
    color: var(--text-muted, #8b949e);
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
    flex-shrink: 0;
}
.architect-panel-close:hover { color: var(--text-bright, #fff); }
.architect-panel-context-chip {
    padding: 8px 18px;
    border-bottom: 1px solid var(--border, #30363d);
    background: rgba(64, 128, 255, 0.04);
    font-size: 12px;
    color: var(--text-secondary, #8b949e);
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.architect-panel-context-chip-label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 10px;
    color: var(--accent, #66bbff);
    font-weight: 600;
    flex-shrink: 0;
}
.architect-panel-context-chip-title {
    color: var(--text-primary, #c9d1d9);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.architect-panel-msgs {
    flex: 1;
    overflow-y: auto;
    padding: 14px 18px;
    background: var(--bg-primary, #0d1117);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.architect-panel-empty {
    color: var(--text-muted, #8b949e);
    font-size: 13px;
    padding: 24px 8px;
    text-align: center;
}
.architect-msg {
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    max-width: 100%;
    word-wrap: break-word;
}
.architect-msg--user {
    background: rgba(64, 128, 255, 0.08);
    border: 1px solid rgba(64, 128, 255, 0.18);
    align-self: flex-end;
    max-width: 88%;
}
.architect-msg--assistant {
    background: var(--bg-secondary, #161b22);
    border: 1px solid var(--border, #30363d);
    align-self: flex-start;
    max-width: 92%;
}
.architect-msg--system {
    background: transparent;
    border: 1px dashed var(--border, #30363d);
    color: var(--text-muted, #8b949e);
    font-size: 11px;
    text-align: center;
    align-self: center;
    padding: 4px 8px;
}
.architect-msg-role {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #8b949e);
    margin-bottom: 4px;
    font-weight: 600;
}
.architect-msg-body { line-height: 1.55; }
.architect-msg-body pre {
    background: var(--bg-primary, #0d1117);
    border: 1px solid var(--border, #30363d);
    padding: 8px 10px;
    border-radius: 4px;
    overflow-x: auto;
    font-size: 12px;
    margin: 6px 0;
}
.architect-msg-body code {
    background: var(--bg-primary, #0d1117);
    border: 1px solid var(--border, #30363d);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 12px;
}
.architect-panel-input {
    padding: 12px 18px;
    border-top: 1px solid var(--border, #30363d);
    background: var(--bg-secondary, #161b22);
}
.architect-panel-input textarea {
    width: 100%;
    min-height: 50px;
    background: var(--bg-input, #0d1117);
    border: 1px solid var(--border, #30363d);
    color: var(--text-primary, #c9d1d9);
    padding: 8px 10px;
    border-radius: 6px;
    resize: vertical;
    font-family: inherit;
    font-size: 13px;
}
.architect-panel-input textarea:focus {
    outline: none;
    border-color: var(--accent, #66bbff);
}
.architect-panel-input-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    gap: 10px;
}
.architect-panel-status {
    font-size: 11px;
    color: var(--text-muted, #8b949e);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.architect-panel-send {
    background: var(--accent, #58a6ff);
    color: #fff;
    border: none;
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    font-weight: 500;
}
.architect-panel-send:hover { background: var(--accent-hover, #79b8ff); }
.architect-panel-send:disabled {
    opacity: 0.5;
    cursor: wait;
}
.architect-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-secondary, #161b22);
    color: var(--text-primary, #c9d1d9);
    border: 1px solid var(--border, #30363d);
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 13px;
    z-index: 12000;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
@media (max-width: 720px) {
    .architect-side-pane-backdrop {
        width: 100vw;
    }
    .architect-panel--modal {
        width: 100%;
        height: 90vh;
    }
}

/* ==========================================================
 * Rendered markdown (LLM output) — canonical styles for the
 * .md-rendered wrapper emitted by renderFullMarkdown().
 * Tight typography sized for in-card + in-chat use; never
 * quite page-title heavy. Uses existing tokens so no new
 * palette is introduced.
 * ========================================================== */
.md-rendered { line-height: 1.55; }
.md-rendered > :first-child { margin-top: 0; }
.md-rendered > :last-child { margin-bottom: 0; }
.md-rendered p { margin: 0 0 8px; }
.md-rendered h1, .md-rendered h2, .md-rendered h3,
.md-rendered h4, .md-rendered h5, .md-rendered h6 {
    color: var(--text-bright);
    margin: 12px 0 6px;
    font-weight: 600;
    line-height: 1.25;
}
.md-rendered h1 { font-size: 1.15rem; }
.md-rendered h2 { font-size: 1.05rem; }
.md-rendered h3 { font-size: 0.98rem; }
.md-rendered h4 { font-size: 0.92rem; }
.md-rendered h5, .md-rendered h6 { font-size: 0.85rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.md-rendered strong { color: var(--text-bright); font-weight: 600; }
.md-rendered em { font-style: italic; }
.md-rendered del { color: var(--text-muted); text-decoration: line-through; }
.md-rendered ul, .md-rendered ol { margin: 4px 0 10px; padding-left: 22px; }
.md-rendered li { margin: 2px 0; }
.md-rendered li > ul, .md-rendered li > ol { margin: 2px 0 2px; }
.md-rendered code {
    font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 0.88em;
    color: var(--text-bright);
}
.md-rendered pre {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    overflow-x: auto;
    margin: 8px 0;
    font-size: 12.5px;
}
.md-rendered pre code {
    background: transparent;
    border: 0;
    padding: 0;
    font-size: inherit;
    color: var(--text-primary);
}
.md-rendered blockquote {
    border-left: 3px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    margin: 8px 0;
    padding: 6px 12px;
    border-radius: 0 4px 4px 0;
}
.md-rendered a { color: var(--accent, #4c6ef5); text-decoration: underline; }
.md-rendered a:hover { color: var(--text-bright); }
.md-rendered hr { border: 0; border-top: 1px solid var(--border); margin: 10px 0; }
.md-rendered table { border-collapse: collapse; margin: 8px 0; font-size: 0.9em; }
.md-rendered td, .md-rendered th { border: 1px solid var(--border); padding: 4px 8px; text-align: left; }
/* Chat-bubble variant: keep headings small so they stay conversational. */
.chat-message-content .md-rendered h1,
.chat-message-content .md-rendered h2,
.chat-message-content .md-rendered h3 { font-size: 0.95rem; margin: 6px 0 2px; }
.chat-h { color: var(--text-bright); font-size: 0.95rem; margin: 6px 0 2px; font-weight: 600; }
.chat-ol, .chat-ul { margin: 2px 0 2px; padding-left: 20px; }
.chat-ol li, .chat-ul li { margin: 1px 0; }

/* Global form-element alignment — radios and checkboxes.
   Default vertical-align is baseline, which renders inputs slightly above
   text midline. Component-scoped rules (.toggle-row, .perm-matrix, etc.)
   remain more specific and continue to override as needed. */
input[type="radio"],
input[type="checkbox"] {
    vertical-align: middle;
    margin: 0;
}
label:has(> input[type="radio"]),
label:has(> input[type="checkbox"]) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.3;
}
input[type="radio"] + label,
input[type="checkbox"] + label {
    vertical-align: middle;
    margin-left: 4px;
}

/* =============================================================
   COST-ESTIMATE TOOLTIP
   -------------------------------------------------------------
   Hover popover attached to AI-triggering buttons. Only renders
   when the next call would go via the metered Anthropic API
   (CLI flat-fee path stays silent). Absolutely positioned so no
   layout shift, pointer-events:none so it never blocks the
   hovered button itself.
   ============================================================= */
.cost-estimate-tip {
    position: absolute;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 10px;
    font-size: 11px;
    z-index: 1400;
    min-width: 200px;
    max-width: 280px;
    box-shadow: var(--shadow);
    pointer-events: none;
}
.cost-estimate-tip-price { font-weight: 600; color: var(--text-bright); }
.cost-estimate-tip-range { color: var(--text-muted); font-size: 10px; margin-top: 2px; }
.cost-estimate-tip-caveat { color: var(--text-muted); font-size: 10px; margin-top: 4px; font-style: italic; }

/* Project page-level drop overlay. Visible while a file is being
   dragged anywhere on the project route. Critical: pointer-events:none
   so the document underneath continues to receive dragover/dragleave/
   drop events that drive its own state. Without this, the overlay
   eats the events and never hides. */
.project-drop-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease;
}
.project-drop-overlay.visible { opacity: 1; }
.project-drop-overlay-card {
    background: var(--bg-tertiary, var(--bg-secondary));
    border: 2px dashed var(--text-bright);
    border-radius: 16px;
    padding: 48px 64px;
    text-align: center;
    min-width: 320px;
}
.project-drop-overlay-icon { font-size: 48px; margin-bottom: 12px; }
.project-drop-overlay-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-bright);
    margin-bottom: 6px;
}
.project-drop-overlay-hint {
    font-size: 13px;
    color: var(--text-muted);
}

/* ===============================================================
   ATTACHMENT ABSORPTION STATUS PILL (2026-04-25)
   ===============================================================
   Each project attachment carries an absorption status (pending /
   extracting / distilling / absorbed / archived / *_failed) that
   the backend updates as files are distilled into project DNA. The
   pill below renders inline in .attachment-item between the filename
   and the size line. Clicking expands a panel with the full markdown
   summary + Re-absorb / Forget actions.
   --------------------------------------------------------------- */

/* Wrapping <details> element. We strip default browser styling so
   the pill itself drives the visual; <details> just gives us free
   open/close state + accessibility. */
.absorption-details {
    margin-top: 4px;
    /* Native <details> renders a triangle marker before <summary>;
       hide it because the pill's icon already signals expandability. */
}
.absorption-details > summary {
    list-style: none;
}
.absorption-details > summary::-webkit-details-marker {
    display: none;
}

/* The pill itself — a small rounded chip with status icon + label.
   Matches the visual weight of existing "kanban-column-count" badges
   so the attachment grid stays balanced. */
.absorption-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.12s ease;
    user-select: none;
    line-height: 1.4;
}
.absorption-pill:hover { background: var(--bg-tertiary); }

.absorption-pill--processing {
    background: var(--bg-secondary);
    color: var(--text-muted);
}
.absorption-pill--absorbed {
    background: rgba(76, 175, 80, 0.15);
    color: var(--green, #4caf50);
}
.absorption-pill--archived {
    background: var(--bg-secondary);
    color: var(--text-muted);
    opacity: 0.7;
}
.absorption-pill--failed-extraction {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}
.absorption-pill--failed-distillation {
    background: rgba(255, 152, 0, 0.15);
    color: #ff9800;
}
.absorption-pill-icon {
    font-size: 11px;
    line-height: 1;
}

/* 2026-04-28 — multi-file DNA Phase 2 role chip. Reuses the
   .absorption-pill base shape so chip language is consistent across
   the row; the modifier classes only flip colour, no new geometry.
   Material = neutral (default chip palette, "this feeds DNA").
   Reference = accent stroke ("don't fold into DNA"). */
.role-pill {
    margin-right: 4px;
    font-weight: 500;
    border: 1px solid var(--border, rgba(0, 0, 0, 0.12));
    background: var(--bg-secondary);
    color: var(--text-muted);
}
.role-pill--material {
    /* Subtle neutral; the chip is informational, not loud. */
    background: var(--bg-secondary);
    color: var(--text-muted);
}
.role-pill--reference {
    /* Accent-stroke variant so the user spots "this isn't fact"
       rows at a glance without introducing a saturated colour. */
    background: transparent;
    color: var(--accent, #6366f1);
    border-color: var(--accent, #6366f1);
}
.role-pill:hover {
    background: var(--bg-tertiary);
}

/* 2026-04-28 — multi-file DNA Phase 3 visual surfaces.
   Three blocks: DNA-sources sub-card rows, Forge-history list, and
   the inline role chip used inside the DNA card's Sources expandable.
   Match the existing card / chip language so the palette stays consistent
   — neutral text, .border, .bg-secondary; no new colors introduced. */

/* Per-slot row inside the DNA-sources sub-card. Three columns: name,
   meta, action. Present rows get the action button on the right;
   missing rows get a hint string in italic. */
.dna-source-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    border-bottom: 1px dashed var(--border, rgba(0, 0, 0, 0.08));
    font-size: 0.78rem;
}
.dna-source-row:last-child { border-bottom: none; }
.dna-source-row-name {
    flex: 1;
    color: var(--text);
    font-family: ui-monospace, Menlo, monospace;
    font-size: 0.75rem;
}
.dna-source-row-meta {
    color: var(--text-muted);
    white-space: nowrap;
}
.dna-source-row-hint {
    color: var(--text-muted);
    font-style: italic;
    flex: 1;
    text-align: right;
}
/* Greyed-out modifier — same shape, dimmer colours so the user can
   see the slot exists but the file doesn't. */
.dna-source-row--missing .dna-source-row-name,
.dna-source-row--missing .dna-source-row-meta {
    opacity: 0.55;
}

/* Forge history list rows. Filename + meta on the left, action
   buttons on the right. Same border-divider treatment as
   dna-source-row for visual rhyme. */
.dna-history-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.dna-history-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border, rgba(0, 0, 0, 0.08));
}
.dna-history-row:last-child { border-bottom: none; }
.dna-history-row-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.dna-history-row-name {
    color: var(--text);
    font-family: ui-monospace, Menlo, monospace;
    font-size: 0.75rem;
    word-break: break-all;
}
.dna-history-row-meta {
    color: var(--text-muted);
    font-size: 0.72rem;
}
.dna-history-row-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* Inline role chip used in the DNA card Sources expandable. Smaller
   than the full role-pill (which lives in the Files panel) since it
   sits inside a dense bullet list. */
.dna-source-role-chip {
    display: inline-block;
    font-size: 0.66rem;
    line-height: 1.3;
    padding: 1px 6px;
    border-radius: 3px;
    margin: 0 4px;
    border: 1px solid var(--border, rgba(0, 0, 0, 0.12));
    color: var(--text-muted);
    background: var(--bg-secondary);
    text-transform: lowercase;
    letter-spacing: 0.02em;
}
.dna-source-role-chip--reference {
    color: var(--accent, #6366f1);
    border-color: var(--accent, #6366f1);
    background: transparent;
}
.dna-source-not-in-dna {
    color: var(--accent, #6366f1);
    font-style: italic;
}

/* Auto-load checkbox row inside the project Properties grid. Aligns
   the checkbox + label so the row reads as a single unit rather than
   two adjacent grid cells. The grid puts the <label> in column 1 and
   our <label class="proj-checkbox-row"> into column 2 — the inner
   row is a flex row so the checkbox + helper text line up. */
.proj-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.proj-checkbox-row input[type="checkbox"] {
    margin: 0;
}

/* Inline spinner used by the processing pill. Pure CSS — no library. */
.absorption-pill-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid var(--text-muted);
    border-top-color: var(--text-bright);
    border-radius: 50%;
    animation: absorption-spin 0.8s linear infinite;
    vertical-align: middle;
}
@keyframes absorption-spin {
    to { transform: rotate(360deg); }
}

/* "Stuck? Try Re-absorb" affordance shown when a pill has been
   in-flight for >60s. Sits below the pill so it doesn't crowd
   the chip itself. */
.absorption-stuck-row {
    margin-top: 4px;
    font-size: 11px;
}
.absorption-stuck-link {
    color: var(--accent, #4caf50);
    text-decoration: underline;
    cursor: pointer;
}

/* When a pill is expanded, the host .attachment-item needs to break
   out of its 160px max-width so the markdown summary actually reads.
   We promote the item to fill the row only while open; collapse goes
   back to the chip size. */
.attachment-item:has(.absorption-details[open]) {
    max-width: 100%;
    flex-basis: 100%;
}

/* Detail panel that appears when the pill is expanded. Holds the
   markdown summary + the Re-absorb / Forget action row. */
.absorption-detail-panel {
    background: var(--bg-secondary);
    border-radius: 6px;
    padding: 12px;
    margin-top: 6px;
    font-size: 12px;
    /* Reset any inherited list-style from the parent <details>. */
    list-style: none;
}
.absorption-detail-body {
    color: var(--text-bright);
    line-height: 1.5;
    /* The markdown helper renders headings/lists/paragraphs; cap
       heading sizes here so a big H2 in summary_md does not break
       the chip-sized panel. */
    overflow-wrap: anywhere;
}
.absorption-detail-body h1,
.absorption-detail-body h2,
.absorption-detail-body h3 {
    font-size: 13px;
    margin: 8px 0 4px;
    color: var(--text-bright);
}
.absorption-detail-body p { margin: 4px 0; }
.absorption-detail-body ul,
.absorption-detail-body ol { margin: 4px 0 4px 18px; padding: 0; }

/* Action row at the bottom of the detail panel. Re-absorb + Forget
   buttons live here. Border-top separates them visually from the
   markdown body. */
.absorption-detail-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    border-top: 1px solid var(--border);
    padding-top: 10px;
}

/* === [Wave 1.a / FAB cluster] === START === ===
   The bottom-right floating-action cluster carries one primary FAB
   plus a small kebab. Z-indices unified : primary 90, kebab 90,
   menu 1100. The previous three-FAB stack (Vite-fait + shortcut hint
   + Settings pill) collapsed into this single shape ; see
   docs/handoff/cockpit-hub-redesign-wave-1a.md for the full reasoning.
   The kebab menu drops upward from the kebab so the primary FAB stays
   the click target the user expects to find at the cursor.
*/
.cockpit-fab-cluster {
    position: fixed;
    right: 24px;
    bottom: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 90;
}

.cockpit-fab-primary {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 24px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    transition: transform 0.12s ease, box-shadow 0.12s ease,
                background 0.12s ease;
    z-index: 90;
}
.cockpit-fab-primary:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
}
.cockpit-fab-primary:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.cockpit-fab-primary:focus-visible {
    outline: 2px solid var(--accent-hover);
    outline-offset: 2px;
}

.cockpit-fab-kebab {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: background 0.12s ease, color 0.12s ease,
                border-color 0.12s ease;
    z-index: 90;
}
.cockpit-fab-kebab:hover {
    background: var(--card-hover);
    color: var(--text-bright);
    border-color: var(--border-light);
}
.cockpit-fab-kebab:focus-visible {
    outline: 2px solid var(--accent-hover);
    outline-offset: 2px;
}

.cockpit-fab-kebab-menu {
    position: fixed;
    right: 24px;
    bottom: 76px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow);
    padding: 6px;
    min-width: 240px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 1100;
}
.cockpit-fab-kebab-menu[hidden] { display: none; }

.cockpit-fab-kebab-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: transparent;
    color: var(--text-primary);
    border: 1px solid transparent;
    border-radius: 6px;
    font-family: var(--font);
    font-size: 13px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.cockpit-fab-kebab-menu-item:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-light);
    color: var(--text-bright);
}
.cockpit-fab-kebab-menu-kbd {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 6px;
}

/* The legacy standalone Settings pill kept its id for back-compat
   ; the bottom-right rendering moved into the kebab menu. The
   class below carries the legacy pill aesthetic for any future
   surface that needs to mount it standalone. */
.cockpit-fab-secondary--settings {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-family: var(--font);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cockpit-fab-secondary--settings:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent-hover);
}

/* The legacy bottom-right `?` shortcut hint markup is gone from
   Layout.page() ; if any cached HTML still includes it, hide it so
   the new kebab is the only shortcut affordance. */
.shortcut-hint { display: none !important; }

@media print {
    .cockpit-fab-cluster { display: none; }
    #admin-hub-link { display: none; }
}
/* === [Wave 1.a / FAB cluster] === END === === */

/* === [Wave 1.b / topbar] === START === ===
   Wave 1.b restructures the top-bar : density chip + breadcrumb on
   the left, search field 480 px max-width centred, bell + identity
   pill on the right. The standalone breadcrumb strip below the
   top-bar (today's `.breadcrumbs` painted between `.topbar` and
   `.content`) is gone ; the breadcrumb now lives inside the top-bar
   itself, between the chip and the search. The .topbar-title <h1>
   element is removed (the breadcrumb's last segment carries the
   page title).
*/
.topbar-breadcrumb-host {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 13px;
}
.breadcrumbs--topbar {
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 360px;
}
.breadcrumbs--topbar a {
    color: var(--text-secondary);
    text-decoration: none;
}
.breadcrumbs--topbar a:hover {
    color: var(--text-bright);
}
.breadcrumbs--topbar .breadcrumb-current {
    color: var(--text-bright);
    font-weight: 600;
}
.breadcrumbs--topbar .breadcrumb-sep {
    margin: 0 6px;
    color: var(--text-muted);
}
.topbar-search {
    /* Override : claim the centre at 480 px max-width. */
    margin: 0 auto;
}
.topbar-actions::before {
    /* Wave 1.b : with only bell + identity pill on the right, the
       extra divider line on .topbar-actions reads as visual noise.
       Hide it. The pill border carries enough separation. */
    display: none;
}
/* === [Wave 1.b / topbar] === END === === */

/* === [Wave 1.b / identity pill] === START === ===
   The identity pill is the user's home in the top-bar far right.
   Carries an avatar (initials), the rank label and an optional
   scope summary, and a kebab that opens the menu. Hover lifts the
   border ; focus rings on every interactive element. The kebab menu
   is a small fly-out anchored to the pill's bottom-right corner.
*/
.cockpit-id-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 4px 4px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 24px;
    color: var(--text-primary);
    cursor: default;
    transition: border-color 120ms ease, transform 120ms ease;
    position: relative;
}
.cockpit-id-pill:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}
.cockpit-id-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    font-family: var(--font);
}
.cockpit-id-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    gap: 1px;
    max-width: 200px;
    overflow: hidden;
}
.cockpit-id-rank {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-bright);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.cockpit-id-scope {
    font-size: 11px;
    color: var(--accent);
    opacity: 0.85;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.cockpit-id-kebab {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cockpit-id-kebab:hover {
    background: var(--bg-secondary);
    color: var(--text-bright);
    border-color: var(--border-light);
}
.cockpit-id-kebab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.cockpit-id-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 240px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    z-index: 1100;
}
.cockpit-id-menu[hidden] {
    display: none;
}
.cockpit-id-menu-section {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    padding: 6px 10px 2px;
}
.cockpit-id-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: transparent;
    color: var(--text-primary);
    border: 1px solid transparent;
    border-radius: 6px;
    font-family: var(--font);
    font-size: 13px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.cockpit-id-menu-item:hover {
    background: var(--bg-tertiary);
    color: var(--text-bright);
    border-color: var(--border-light);
}
.cockpit-id-menu-item.is-disabled,
.cockpit-id-menu-item[disabled] {
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.55;
}
.cockpit-id-menu-item.is-disabled:hover,
.cockpit-id-menu-item[disabled]:hover {
    background: transparent;
    border-color: transparent;
    color: var(--text-muted);
}
.cockpit-id-menu-item--danger {
    color: var(--red, #d54444);
}
.cockpit-id-menu-item--danger:hover {
    background: rgba(213, 68, 68, 0.08);
    color: var(--red, #d54444);
}
.cockpit-id-menu-item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}
/* The Wave 1.c sidebar-footer kebab placeholder. Disabled until
   Wave 1.c lands the full settings menu. */
.sidebar-footer-settings-kebab {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: not-allowed;
    margin-left: 8px;
    opacity: 0.55;
}

/* Sign-out confirmation modal. The previous shape was a single
   inline anchor with no confirmation ; a misclick logged the user
   out. Wave 1.b puts a confirm step in front. */
.cockpit-signout-confirm {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cockpit-signout-confirm-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 24px;
    max-width: 420px;
    width: calc(100% - 48px);
    box-shadow: var(--shadow);
}
.cockpit-signout-confirm-title {
    margin: 0 0 8px;
    font-size: 18px;
    color: var(--text-bright);
}
.cockpit-signout-confirm-body {
    margin: 0 0 18px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.45;
}
.cockpit-signout-confirm-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}
/* === [Wave 1.b / identity pill] === END === === */

/* === [Wave 1.b / mode banner] === START === ===
   Wave 1.b promotes the « Mode direction » banner from the inline
   6 px slim bar to a 36 px full-width band. Reads :
   « Mode direction · <company> · Accès limité à votre société. »
   with a right-aligned « Sortir du mode direction » link.
*/
.cockpit-mode-banner {
    background: var(--accent-wash, rgba(76, 110, 245, 0.12));
    color: var(--text);
    height: 36px;
    padding: 9px 24px;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    z-index: 90;
    border-bottom: 1px solid var(--border);
}
.cockpit-mode-banner-text {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cockpit-mode-banner-exit-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    flex-shrink: 0;
}
.cockpit-mode-banner-exit-link:hover {
    text-decoration: underline;
}
.cockpit-mode-banner-exit-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
}
/* === [Wave 1.b / mode banner] === END === === */

/* === [Wave 1.b / right-edge drawer] === START === ===
   Single drawer for the PM Agent + Discussion stack. Anchors to
   right: 0, top: 48 px (top-bar bottom), bottom: 80 px (FAB safe
   area). Two tabs at the top switch between PM Agent and
   Discussion content panes. z-index 1200 keeps the drawer above
   the FAB cluster but below the command palette (1300) and modals
   (1400).
*/
.cockpit-rail-drawer {
    position: fixed;
    right: 0;
    top: 48px;
    bottom: 80px;
    width: 380px;
    background: var(--bg);
    border-left: 1px solid var(--border);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    z-index: 1200;
}
.cockpit-rail-drawer[hidden] {
    display: none;
}
.cockpit-rail-tabs {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border);
    padding: 0 6px;
}
.cockpit-rail-tab {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 500;
    padding: 12px 14px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.cockpit-rail-tab:hover {
    color: var(--text-bright);
}
.cockpit-rail-tab.is-active {
    color: var(--text-bright);
    border-bottom-color: var(--accent);
}
.cockpit-rail-tab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.cockpit-rail-tabs-spacer {
    flex: 1;
}
.cockpit-rail-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 6px 10px;
}
.cockpit-rail-close:hover {
    color: var(--text-bright);
}
.cockpit-rail-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    min-height: 0;
}
.cockpit-rail-pane {
    flex: 1;
    display: flex;
    min-height: 0;
}
.cockpit-rail-pane[hidden] {
    display: none;
}
/* The PM panel + chat rail keep their own internal layout when
   docked inside the drawer ; we just override the « fixed »
   positioning so they fill the pane. */
.pm-panel--in-rail {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    border-left: none !important;
    border-top: none !important;
    box-shadow: none !important;
    z-index: auto !important;
    display: flex !important;
}
.chat-rail--in-rail {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    border-left: none !important;
    box-shadow: none !important;
    z-index: auto !important;
    display: flex !important;
    flex-direction: column !important;
}
@media (max-width: 1024px) {
    .cockpit-rail-drawer {
        width: 80vw;
    }
}
/* === [Wave 1.b / right-edge drawer] === END === === */

/* === [Wave 1.c / breadcrumb backfill] === START === ===
   Wave 1.c reuses the Wave 1.b breadcrumb host but tightens long-label
   handling : the new Layout.setBreadcrumbs() helper truncates labels
   over 24 characters with a Unicode ellipsis and adds a title attribute
   so the full text is reachable on hover. The CSS below ensures the
   per-segment ellipsis renders even when the host is at its 360 px max
   width and adds a per-segment max-width as a defence against very
   long deal titles. */
.breadcrumbs--topbar a,
.breadcrumbs--topbar .breadcrumb-current {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: bottom;
}
.breadcrumbs--topbar [aria-current="page"] {
    color: var(--text-bright);
    font-weight: 600;
}
/* === [Wave 1.c / breadcrumb backfill] === END === === */

/* === [Wave 1.c / sidebar footer] === START === ===
   Wave 1.c wires the sidebar footer kebab into a real « Réglages
   d'affichage » fly-out with three groups (Thème, Couleur d'accent,
   Densité). The fly-out is positioned by JS (anchored above the
   kebab) ; CSS handles the surface treatment + the eight muted
   editorial accent swatches.
*/
.cockpit-sidebar-footer-signout {
    margin-left: 8px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
}
.cockpit-sidebar-footer-signout:hover {
    color: var(--text-bright);
    background: var(--bg-hover, rgba(255,255,255,0.05));
}
.sidebar-footer-settings-kebab {
    /* Wave 1.c reactivates the kebab the Wave 1.b placeholder reserved.
       Drop the disabled style. */
    opacity: 1;
    cursor: pointer;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 4px 8px;
    color: var(--text-secondary);
    font-size: 14px;
}
.sidebar-footer-settings-kebab:hover {
    color: var(--text-bright);
    border-color: var(--border, rgba(255,255,255,0.1));
}
.cockpit-sidebar-footer-menu {
    position: fixed;
    z-index: 1100;
    min-width: 240px;
    max-width: 280px;
    background: var(--bg-panel, #1a1a1a);
    border: 1px solid var(--border, rgba(255,255,255,0.1));
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    color: var(--text);
    font-size: 13px;
}
.cockpit-sidebar-footer-menu-section {
    margin-bottom: 12px;
}
.cockpit-sidebar-footer-menu-section:last-child {
    margin-bottom: 0;
}
.cockpit-sidebar-footer-menu-title {
    margin: 0 0 6px 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    font-weight: 600;
}
.cockpit-sidebar-footer-menu-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cockpit-sidebar-footer-menu-hint {
    margin: 0;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}
.cockpit-theme-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
}
.cockpit-theme-radio:hover {
    background: var(--bg-hover, rgba(255,255,255,0.05));
}
.cockpit-accent-grid {
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 8px;
}
.cockpit-accent-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: transform 0.1s ease;
}
.cockpit-accent-swatch:hover {
    transform: scale(1.1);
}
.cockpit-accent-swatch.is-active {
    border-color: var(--text-bright, #fff);
    box-shadow: 0 0 0 2px var(--bg-panel, #1a1a1a);
}
/* Theme attribute selectors : the Wave 1.c picker writes
   data-cockpit-theme onto <html>. 'auto' lets the OS preference win ;
   'light' / 'dark' force the palette. The existing Theme module's
   `body.theme-light` / `body.theme-dark` rules stay authoritative for
   the actual palette ; we mirror the user's pick onto <body> so the
   legacy rules apply. */
[data-cockpit-theme="light"] body { /* hint to legacy Theme module */ }
[data-cockpit-theme="dark"] body { /* same */ }
/* === [Wave 1.c / sidebar footer] === END === === */

/* === [Wave 1.c / z-index policy] === START === ===
   Wave 1.c locks the documented z-index policy (key-abstraction
   cockpit-shell.md). Top-bar shell : 100 (Wave 1.b key-abs claimed
   100 but the legacy rule shipped 5 ; we promote it here so the
   policy matches the rendered DOM). Drawer 1200, popover 1100,
   palette 1300, modals 1400, toasts 1500 stay as-is.
*/
.topbar {
    z-index: 100;
}
/* === [Wave 1.c / z-index policy] === END === === */

/* === [Wave 1.c / accessibility] === START === ===
   Wave 1.c adds a uniform `:focus-visible` ring (2 px outline in
   var(--accent) with 2 px offset) on every interactive shell element.
   This is the canonical focus-state for the Cockpit chrome and
   replaces the per-element ad-hoc focus rules that drifted across
   Waves 1.a and 1.b.
*/
.sidebar-toggle:focus-visible,
.cockpit-density-chip:focus-visible,
.breadcrumbs--topbar a:focus-visible,
.topbar-search:focus-visible,
.notif-bell:focus-visible,
.cockpit-id-pill:focus-visible,
.cockpit-id-kebab:focus-visible,
.cockpit-id-menu-item:focus-visible,
.cockpit-fab-primary:focus-visible,
.cockpit-fab-kebab:focus-visible,
.cockpit-fab-kebab-menu-item:focus-visible,
.sidebar-lang-btn:focus-visible,
.sidebar-footer-settings-kebab:focus-visible,
.cockpit-sidebar-footer-signout:focus-visible,
.cockpit-theme-radio:focus-within,
.cockpit-accent-swatch:focus-visible,
.sidebar-group-header:focus-visible,
.sidebar-link:focus-visible,
.cockpit-mode-banner-exit-link:focus-visible,
.cockpit-rail-tab:focus-visible,
.cockpit-rail-close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}
/* === [Wave 1.c / accessibility] === END === === */