/* ================================================
   LAMP — Patent Research Workstation
   ================================================ */

@layer reset, base, layout, components, utilities;

/* --- Tokens --- */
:root {
    /* Single knob for the entire UI font scale — every `font-size: Nrem`
     * resolves against this. Defaults: 18px floor on small viewports
     * (13" MBP @ 1440px CSS gets 18px → all rem-based sizes scale
     * accordingly), up to 22px on 1920px+. Adjust this clamp to retune
     * the whole UI in one line. */
    font-size: clamp(18px, 1.2vw, 22px);

    --font-sans: 'DM Sans', system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', 'SF Mono', monospace;

    --bg-base:       #18171a;
    --bg-surface:    #1e1d21;
    --bg-elevated:   #252428;
    --bg-hover:      #2a2930;
    --bg-input:      #1a191d;

    --border:        #2c2b30;
    --border-focus:  #4a4850;

    --text:          #cdc9d4;
    --text-muted:    #78748a;
    --text-dim:      #4e4a5a;

    --accent:        #c8943e;
    --accent-hover:  #daa54e;

    --msg-user-bg:   #1c2218;
    --msg-user-bar:  #5a9a54;
    --msg-ai-bg:     #1a1c24;
    --msg-ai-bar:    #5872a8;

    --patent-bg:     #201e18;
    --patent-bar:    #a88a44;

    --status-info:   #5872a8;

    --error:         #c75450;

    /* Triage verdict palette — used by the patent list V1 cards, the
       kanban columns (Phase 2), the V4 compare footer, and the V5 popup
       BigBtn buttons. Match `docs/design-system/better-ux/sources/colors_and_type.css`
       so design and code agree on hexes. */
    --triage-keep:   #5a9a54;
    --triage-maybe:  #c8943e;
    --triage-reject: #c75450;

    --topbar-h:      clamp(36px, 2.6vw, 50px);
    --taskbar-h:     clamp(27px, 1.91vw, 37px);
    --chat-max-w:    clamp(960px, 65vw, 1400px);

    --sessions-width: clamp(180px, 13vw, 260px);
    --files-pct:     25%;
    --log-height:    clamp(180px, 13vw, 260px);

    --ease:          cubic-bezier(0.4, 0, 0.2, 1);
    --duration:      0.3s;
}

/* --- Reset --- */
@layer reset {
    *, *::before, *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    dialog {
        margin: auto;
    }
}

/* --- Utilities --- */
@layer utilities {
    .hidden { display: none !important; }
}

/* --- Base --- */
body {
    background: var(--bg-base);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: clamp(0.75rem, 0.78vw, 1rem);
    line-height: 1.5;
    overflow: hidden;
    height: 100vh;
}

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


/* ================================================
   LANDING
   ================================================ */

.landing-body {
    overflow: auto;
    height: auto;
}

.landing {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    position: relative;
}

/* Always-on subtle radial gold glow centered behind the lamp side. Larger
 * and slightly off-center to match the OG image's atmospheric pool of light.
 * The hover-illumination on the lamp itself adds its own brighter glow on top. */
.landing::before {
    content: '';
    position: absolute;
    pointer-events: none;
    width: clamp(520px, 65vw, 1100px);
    height: clamp(520px, 65vw, 1100px);
    top: 50%;
    left: 30%;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        circle at center,
        rgba(240, 195, 106, 0.18) 0%,
        rgba(200, 148, 62, 0.09) 30%,
        rgba(200, 148, 62, 0.03) 55%,
        transparent 75%
    );
    z-index: 0;
}

.landing > * { position: relative; z-index: 1; }

/* --- Hero group: side-by-side at desktop (lamp left, text right), stacks
 *     to centered column at narrow viewports. Mirrors the OG image layout. */
.landing-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(420px, 1.4fr);
    align-items: center;
    gap: clamp(24px, 5vw, 80px);
    width: min(1280px, 92vw);
    margin: 0 auto;
}

.landing-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 12px;
}

@media (max-width: 760px) {
    .landing-hero {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .landing-text {
        align-items: center;
        text-align: center;
    }
}

.landing-title {
    font-family: var(--font-mono);
    font-size: clamp(4.5rem, 11vw, 10rem);
    font-weight: 500;
    color: var(--text);
    letter-spacing: -2px;
    margin: 0;
    line-height: 0.95;
    text-shadow: 0 0 40px rgba(200, 148, 62, 0.18);
    transition: text-shadow 0.6s ease;
}

.tagline {
    color: var(--accent);
    font-size: clamp(1.125rem, 2.4vw, 2.25rem);
    font-weight: 500;
    margin: 0;
    line-height: 1.2;
    transition: opacity 0.4s ease, text-shadow 0.6s ease;
}

/* Sub-feature line — quiet, just a breadcrumb of capabilities so the
 * landing isn't 186 words flat. Mirrors the OG image's bottom row. */
.landing-features {
    color: var(--text-muted);
    font-size: clamp(0.8125rem, 1.4vw, 1.375rem);
    margin: 6px 0 24px;
    max-width: 640px;
    line-height: 1.45;
    opacity: 0.72;
    transition: opacity 0.4s ease;
}

.landing-actions { display: flex; gap: 12px; align-items: center; }

/* --- Lamp SVG: lit gold by default, bulb dark (matches OG) --- */
.lamp-hero {
    width: 100%;
    height: auto;
    max-width: clamp(280px, 32vw, 460px);
    margin: 0 0 0 auto;
    /* Let the radial glow spill past the viewBox (top-right) without clipping. */
    overflow: visible;
    color: var(--accent);
    filter: drop-shadow(0 0 32px rgba(200, 148, 62, 0.22));
    transition: color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 760px) {
    .lamp-hero { margin: 0 auto; }
}

.lamp-glow,
.lamp-bulb {
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Hover Login or Register: bulb pops, glow blooms, everything intensifies --- */
.landing:has(.landing-actions .btn:hover) .lamp-hero {
    filter: drop-shadow(0 0 56px rgba(240, 195, 106, 0.6))
            drop-shadow(0 0 24px rgba(200, 148, 62, 0.4));
}

.landing:has(.landing-actions .btn:hover) .lamp-glow,
.landing:has(.landing-actions .btn:hover) .lamp-bulb {
    opacity: 1;
}

.landing:has(.landing-actions .btn:hover) .landing-title {
    text-shadow: 0 0 60px rgba(200, 148, 62, 0.4),
                 0 0 120px rgba(200, 148, 62, 0.18);
}

.landing:has(.landing-actions .btn:hover) .tagline {
    text-shadow: 0 0 36px rgba(200, 148, 62, 0.35);
}

.landing:has(.landing-actions .btn:hover) .landing-features {
    opacity: 0.9;
}

.btn {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    padding: 9px 24px;
    border-radius: 4px;
    font-family: var(--font-sans);
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
    font-weight: 500;
    transition: background var(--duration) var(--ease);
}

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

.btn-secondary {
    display: inline-block;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 8px 23px;
    border-radius: 4px;
    font-family: var(--font-sans);
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
    font-weight: 500;
    cursor: pointer;
}

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

/* --- Brand watermark — bottom-right of the hero, matches the OG image's
 *     `matgen.ai` corner mark. Plain text, gold, low-opacity so it reads as
 *     a watermark, not navigation. */
.landing-brand {
    position: absolute;
    bottom: 24px;
    right: 28px;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: clamp(0.8125rem, 1.05vw, 1.0625rem);
    letter-spacing: 0.02em;
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.landing:has(.landing-actions .btn:hover) .landing-brand {
    opacity: 0.85;
}

/* --- Scroll hint arrow --- */
.landing-scroll-hint {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--text-dim);
    font-size: 1.25rem;
    animation: landing-bounce 2s ease-in-out infinite;
    background: transparent;
    border: none;
    padding: 4px 8px;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
}

.landing-scroll-hint:hover {
    color: var(--text);
}

.landing-scroll-hint:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

@keyframes landing-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.4; }
    50% { transform: translateX(-50%) translateY(6px); opacity: 0.8; }
}

/* --- Cursor halo on the landing hero: a soft warm-gold radial that fades
 *     into the existing dark page. Single layer, no transition (var changes
 *     trigger gradient interpolation = full-viewport repaints stacking up
 *     and freezing the browser). The cursor is tied 1:1 to the gradient
 *     center; the long, smooth falloff hides the lack of easing. */
.landing { --mx: 30%; --my: 50%; }

.landing::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
        circle 720px at var(--mx) var(--my),
        rgba(240, 195, 106, 0.12) 0%,
        rgba(200, 148, 62, 0.05) 35%,
        transparent 75%);
    z-index: 2;
}

@media (hover: none) {
    .landing::after { display: none; }
}


/* ================================================
   PRICING
   ================================================ */

/* --- Pricing section with illumination --- */
.pricing-section {
    max-width: clamp(480px, 50vw, 780px);
    margin: 0 auto;
    padding: 80px 24px 60px;
    text-align: center;
    position: relative;
}

.pricing-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 140%;
    height: 100%;
    background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(200, 148, 62, 0.06) 0%, transparent 80%);
    pointer-events: none;
}

.pricing-heading {
    font-family: var(--font-mono);
    font-size: clamp(1.25rem, 2.17vw, 2rem);
    font-weight: 500;
    color: var(--text);
    letter-spacing: -1px;
    margin-bottom: 8px;
    text-shadow: 0 0 60px rgba(200, 148, 62, 0.15);
}

.pricing-sub {
    color: var(--text-muted);
    font-size: clamp(0.6875rem, 1.04vw, 1rem);
    margin-bottom: 48px;
}

/* --- Unified pricing panel --- */
.pricing-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: clamp(18px, 2.17vw, 36px) clamp(22px, 2.6vw, 42px);
    text-align: left;
    margin-bottom: 40px;
}

.panel-price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 20px 0 24px;
    border-bottom: 1px solid var(--border);
}

.panel-price-amount {
    font-family: var(--font-mono);
    font-size: clamp(1.5625rem, 2.6vw, 2.6875rem);
    font-weight: 500;
    color: var(--text);
    letter-spacing: -1px;
    line-height: 1;
}

.pricing-mo {
    font-size: clamp(0.6875rem, 1.04vw, 1rem);
    font-weight: 400;
    color: var(--text-muted);
    letter-spacing: 0;
}

.panel-price-annual {
    font-size: clamp(0.6875rem, 1.04vw, 1rem);
    color: var(--text-dim);
}

/* --- Panel sections --- */
.panel-section {
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
}

.panel-section-label {
    font-family: var(--font-mono);
    font-size: clamp(0.5625rem, 0.78vw, 0.75rem);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-dim);
    margin-bottom: 12px;
}

/* --- Feature list --- */
.panel-features {
    list-style: none;
    columns: 2;
    column-gap: 32px;
}

.panel-features li {
    position: relative;
    padding: 3px 0 3px 16px;
    font-size: clamp(0.6875rem, 0.96vw, 0.875rem);
    color: var(--text-muted);
    line-height: 1.6;
    break-inside: avoid;
}

.panel-features li::before {
    content: '>';
    position: absolute;
    left: 0;
    font-family: var(--font-mono);
    font-size: clamp(0.5625rem, 0.78vw, 0.75rem);
    color: var(--accent);
}

.panel-overage {
    font-style: italic;
    opacity: 0.7;
}

/* --- CTA --- */
.pricing-cta {
    text-align: center;
    padding: 10px 24px;
    font-size: clamp(0.6875rem, 0.96vw, 0.875rem);
}

/* --- Calculator fields --- */
.calc-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.calc-label {
    font-size: clamp(0.6875rem, 0.96vw, 0.875rem);
    color: var(--text-muted);
}

.calc-input {
    width: clamp(70px, 8vw, 120px);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: clamp(0.6875rem, 0.96vw, 0.875rem);
    padding: 5px 8px;
    text-align: right;
    -moz-appearance: textfield;
}

.calc-input::-webkit-inner-spin-button,
.calc-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.calc-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 1px rgba(200, 148, 62, 0.15);
}

.calc-input-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 3px;
}

.calc-input-stepper .calc-input {
    border: none;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    border-radius: 0;
    width: clamp(60px, 7vw, 100px);
}

.calc-input-stepper .calc-input:focus {
    box-shadow: none;
}

.calc-input-stepper button {
    background: var(--bg-elevated);
    border: none;
    color: var(--text-dim);
    font-size: clamp(0.6875rem, 0.96vw, 0.875rem);
    width: 28px;
    height: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
}

.calc-input-stepper button:hover {
    color: var(--accent);
    background: var(--bg-hover);
}

/* --- Report rows --- */
.calc-report {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.calc-report-name {
    font-size: clamp(0.6875rem, 0.96vw, 0.875rem);
    color: var(--text-muted);
}

.calc-report-cost {
    font-family: var(--font-mono);
    font-size: clamp(0.5625rem, 0.78vw, 0.75rem);
    color: var(--accent);
    min-width: 13ch;
    text-align: right;
}

.calc-model-note {
    font-size: clamp(0.625rem, 0.83vw, 0.75rem);
    color: var(--text-dim);
    margin: 6px 0 0;
}

.calc-tier {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: var(--bg-input) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%234e4a5a'/%3E%3C/svg%3E") no-repeat right 6px center;
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: clamp(0.5625rem, 0.78vw, 0.75rem);
    padding: 4px 20px 4px 8px;
    cursor: pointer;
}

.calc-tier:focus {
    outline: none;
    border-color: var(--border-focus);
}

.calc-tier option {
    background: var(--bg-elevated);
    color: var(--text-muted);
}

.calc-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 3px;
}

.calc-stepper button {
    background: var(--bg-elevated);
    border: none;
    color: var(--text-dim);
    font-size: clamp(0.6875rem, 0.96vw, 0.875rem);
    width: 24px;
    height: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.calc-stepper button:hover {
    color: var(--accent);
    background: var(--bg-hover);
}

.calc-qty {
    font-family: var(--font-mono);
    font-size: clamp(0.6875rem, 0.96vw, 0.875rem);
    color: var(--text);
    width: 22px;
    text-align: center;
    background: var(--bg-input);
    height: 24px;
    line-height: 24px;
}

/* --- Total section --- */
.panel-total {
    padding-top: 20px;
}

.calc-line {
    display: flex;
    justify-content: space-between;
    font-size: clamp(0.6875rem, 0.96vw, 0.875rem);
    color: var(--text-muted);
    margin-bottom: 4px;
}

.calc-line span:last-child {
    font-family: var(--font-mono);
    color: var(--text);
}

.calc-divider {
    border-top: 1px solid var(--border);
    margin: 8px 0;
}

.calc-total-line {
    font-size: clamp(0.6875rem, 1.04vw, 1rem);
    font-weight: 500;
    margin-bottom: 0;
}

.calc-total-line span:last-child {
    color: var(--accent);
    font-size: clamp(0.875rem, 1.57vw, 1.3125rem);
    font-weight: 500;
}

.calc-idle {
    font-size: clamp(0.6875rem, 0.96vw, 0.875rem);
    color: var(--text-dim);
    text-align: center;
    margin-top: 12px;
}

.panel-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
}

.panel-actions .pricing-cta {
    flex: 0 0 auto;
    min-width: 140px;
}

.calc-reset {
    display: block;
    margin: 0 auto 12px;
    background: none;
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text-dim);
    font-family: var(--font-sans);
    font-size: clamp(0.5625rem, 0.78vw, 0.75rem);
    padding: 4px 10px;
    cursor: pointer;
}

.calc-reset:hover {
    color: var(--text-muted);
    border-color: var(--border-focus);
}

/* --- Plan toggle --- */
.calc-plan-toggle {
    display: flex;
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.calc-plan-btn {
    flex: 1;
    background: var(--bg-input);
    border: none;
    border-right: 1px solid var(--border);
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: clamp(0.6875rem, 0.96vw, 0.875rem);
    font-weight: 500;
    padding: 9px 0;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: background var(--duration) var(--ease), color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.calc-plan-btn:last-child {
    border-right: none;
}

.calc-plan-btn:hover {
    color: var(--text-muted);
    background: var(--bg-hover);
}

.calc-plan-btn.calc-plan-active {
    background: var(--bg-elevated);
    color: var(--accent);
    box-shadow: inset 0 -2px 0 var(--accent), 0 0 12px rgba(200, 148, 62, 0.1);
}

.calc-free {
    font-family: var(--font-mono);
    font-size: clamp(0.5625rem, 0.78vw, 0.75rem);
    color: var(--text-dim);
}

/* --- Enterprise --- */
.pricing-enterprise {
    margin-bottom: 32px;
}

.pricing-enterprise-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 24px 28px;
    text-align: left;
    box-shadow: 0 0 0 1px rgba(200, 148, 62, 0.06);
}

.pricing-enterprise h3 {
    font-family: var(--font-mono);
    font-size: clamp(0.6875rem, 1.04vw, 1rem);
    font-weight: 500;
    color: var(--text);
    margin-bottom: 4px;
}

.pricing-enterprise p {
    font-size: clamp(0.6875rem, 0.96vw, 0.875rem);
    color: var(--text-muted);
}

.pricing-enterprise .pricing-cta {
    width: auto;
    flex-shrink: 0;
    margin-left: 24px;
}

.pricing-disclaimer {
    font-size: clamp(0.5625rem, 0.78vw, 0.75rem);
    color: var(--text-dim);
}


/* ================================================
   AUTH
   ================================================ */

body:has(.auth-page) { overflow: auto; height: auto; min-height: 100vh; }

.auth-page {
    max-width: 300px;
    margin: clamp(32px, 12vh, 140px) auto;
    padding-bottom: 32px;
}

.auth-page h1 {
    font-family: var(--font-mono);
    font-size: clamp(0.875rem, 0.96vw, 1.125rem);
    font-weight: 500;
    margin-bottom: 20px;
    color: var(--text);
    letter-spacing: -0.5px;
}

.auth-page input {
    width: 100%;
    background: var(--bg-input);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 9px 12px;
    font-family: var(--font-mono);
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
    margin-bottom: 10px;
    transition: border-color var(--duration) var(--ease);
}

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

.auth-page button {
    width: 100%;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 9px;
    font-family: var(--font-sans);
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
    font-weight: 500;
    cursor: pointer;
    margin-top: 4px;
    transition: background var(--duration) var(--ease);
}

.auth-page button:hover { background: var(--accent-hover); }

.error { color: var(--error); font-size: clamp(0.6875rem, 0.74vw, 0.875rem); margin-bottom: 12px; }
.success { color: #4caf50; font-size: clamp(0.6875rem, 0.74vw, 0.875rem); margin-bottom: 12px; }

.magic-link-url {
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
    font-weight: 500;
    text-decoration: none;
}
.magic-link-url:hover { text-decoration: underline; }

.auth-link { margin-top: 16px; color: var(--text-muted); font-size: clamp(0.6875rem, 0.74vw, 0.875rem); }
.auth-link a { color: var(--accent); text-decoration: none; }
.auth-link a:hover { text-decoration: underline; }

.waitlist-message { color: var(--text-muted); font-size: clamp(0.75rem, 0.83vw, 1rem); margin-bottom: 20px; line-height: 1.5; }
.waitlist-disclaimer { color: var(--text-muted); font-size: clamp(0.5625rem, 0.6vw, 0.75rem); margin-top: 20px; line-height: 1.5; opacity: 0.8; }

/* --- Profile page V2 (settings-app sidebar layout) --- */
body:has(.pf-page) { overflow: auto; height: auto; }

/* Auth pages share .auth-back; lives here for historical reasons */
.auth-back {
    font-family: var(--font-mono);
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
    color: var(--text-muted);
    text-decoration: none;
    display: inline-block;
    margin-bottom: 12px;
}
.auth-back:hover { color: var(--accent); }

/* === Page layout === */
.pf-page {
    display: flex;
    min-height: 100vh;
    max-width: 1100px;
    margin: 0 auto;
    background: var(--bg-base);
}

/* === Sidebar === */
.pf-sidebar {
    width: 220px;
    flex-shrink: 0;
    background: var(--bg-surface);
    border-right: 1px solid var(--border);
    padding: 24px 0;
    display: flex;
    flex-direction: column;
}

.pf-sidebar-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}

.pf-sidebar-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent);
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.pf-sidebar-meta { min-width: 0; }

.pf-sidebar-name {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-sidebar-plan {
    font-family: var(--font-sans);
    font-size: 0.625rem;
    color: var(--text-dim);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.pf-plan-price {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.625rem;
}

/* === Plan badge === */
.pf-plan-badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border-radius: 3px;
    text-transform: uppercase;
    border: 1px solid transparent;
}
.pf-plan-trial {
    background: rgba(200, 148, 62, 0.15);
    color: var(--accent);
    border-color: rgba(200, 148, 62, 0.4);
}
.pf-plan-pro {
    background: rgba(200, 148, 62, 0.18);
    color: var(--accent);
    border-color: rgba(200, 148, 62, 0.4);
}
.pf-plan-bundle {
    background: rgba(90, 154, 84, 0.15);
    color: var(--triage-keep);
    border-color: rgba(90, 154, 84, 0.4);
}

/* === Sidebar nav === */
.pf-nav {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.pf-nav-link {
    display: block;
    padding: 8px 18px;
    background: transparent;
    border-left: 2px solid transparent;
    color: var(--text-muted);
    text-decoration: none;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    transition: background var(--duration), color var(--duration), border-color var(--duration);
}

.pf-nav-link:hover {
    background: var(--bg-elevated);
    color: var(--text);
}

.pf-nav-link[aria-current="page"] {
    background: var(--bg-elevated);
    border-left-color: var(--accent);
    color: var(--text);
}

.pf-back {
    margin: 16px 18px 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--border);
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    color: var(--text-muted);
    text-decoration: none;
}

.pf-back:hover { color: var(--accent); }

/* === Main panel === */
.pf-main {
    flex: 1;
    overflow: auto;
    padding: 32px 40px;
    min-width: 0;
}

.pf-flash {
    font-family: var(--font-sans);
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
    padding: 8px 12px;
    border-radius: 4px;
    margin-bottom: 16px;
}

.pf-panel {
    max-width: 720px;
}

.pf-panel-header {
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.pf-panel-header h1 {
    font-family: var(--font-mono);
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--text);
    margin: 0;
    letter-spacing: -0.3px;
    text-transform: lowercase;
}

.pf-panel-header p {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--text-dim);
    margin: 6px 0 0;
}

/* === Editable field rows (<details>) === */
.pf-field {
    border-bottom: 1px solid var(--border);
}

.pf-field:last-of-type { border-bottom: none; }

.pf-field summary {
    list-style: none;
    cursor: pointer;
    transition: color var(--duration);
}
.pf-field summary::-webkit-details-marker { display: none; }
.pf-field summary::marker { content: ""; }
.pf-field summary:hover .pf-edit { color: var(--accent); }

.pf-field-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
}

.pf-field-label {
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    flex-shrink: 0;
    min-width: 130px;
}

.pf-field-value {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--text);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-edit {
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    color: var(--text-dim);
    flex-shrink: 0;
    transition: color var(--duration);
}

.pf-field-readonly { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; }

.pf-field-disabled .pf-field-value { color: var(--text-dim); }

.pf-field-edit {
    padding: 8px 0 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pf-form-row label {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.625rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 6px;
}

.pf-form-row input,
.pf-form-row select {
    width: 100%;
    padding: 7px 10px;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    background: var(--bg-elevated);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    box-sizing: border-box;
    transition: border-color var(--duration);
}

.pf-form-row input:focus,
.pf-form-row select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 1px rgba(200, 148, 62, 0.15);
}

.pf-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* === Buttons === */
.pf-btn-primary {
    background: var(--accent);
    color: #000;
    border: none;
    padding: 7px 14px;
    border-radius: 3px;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
.pf-btn-primary:hover { filter: brightness(1.1); }

.pf-btn-secondary {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 7px 14px;
    border-radius: 3px;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    cursor: pointer;
}
.pf-btn-secondary:hover { color: var(--text); border-color: var(--text-muted); }

.pf-btn-danger {
    background: rgba(199, 84, 80, 0.08);
    border: 1px solid rgba(199, 84, 80, 0.4);
    color: var(--triage-reject);
    padding: 7px 14px;
    border-radius: 3px;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 500;
    cursor: pointer;
}
.pf-btn-danger:hover { background: rgba(199, 84, 80, 0.15); }

.pf-btn-link {
    color: var(--accent);
    text-decoration: none;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
}
.pf-btn-link:hover { text-decoration: underline; }

/* === Cards === */
.pf-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.pf-card-body { flex: 1; }

.pf-card-title {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--text);
    margin-bottom: 4px;
}

.pf-card-note {
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    color: var(--text-dim);
    margin: 0;
}

.pf-plan-card-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.pf-plan-card-meta {
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    color: var(--text-muted);
}

.pf-billing-card { padding: 14px 16px; }
.pf-billing-method { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text); }
.pf-payment-icon { vertical-align: -2px; opacity: 0.7; flex-shrink: 0; }

.pf-danger-card { border-color: rgba(199, 84, 80, 0.4); }
.pf-danger-title { color: var(--triage-reject); }

.pf-upgrade-prompt { margin-top: 16px; }

/* === Meters (Plan & usage) === */
.pf-meters {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.pf-meter {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pf-meter-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.pf-meter-label {
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 500;
}

.pf-meter-count {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--text);
}

.pf-meter-used { color: var(--accent); }
.pf-meter-tone-warn { color: #c8943e; }
.pf-meter-tone-danger { color: var(--triage-reject); }

.pf-meter-divider { color: var(--text-dim); font-size: 0.6875rem; }

.pf-meter-track {
    height: 6px;
    background: var(--bg-elevated);
    border-radius: 2px;
    overflow: hidden;
}

.pf-meter-bar {
    height: 100%;
    background: var(--accent);
    transition: width 0.4s;
}
.pf-meter-bar.pf-meter-tone-warn { background: #c8943e; }
.pf-meter-bar.pf-meter-tone-danger { background: var(--triage-reject); }

.pf-meter-no-bar { gap: 0; }

/* === Tables === */
.pf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
    margin-bottom: 8px;
}

.pf-table th {
    font-family: var(--font-sans);
    font-weight: 500;
    text-align: left;
    padding: 10px 12px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-size: 0.625rem;
    border-bottom: 1px solid var(--border);
}

.pf-table td {
    font-family: var(--font-mono);
    padding: 12px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}

.pf-table tr:last-child td { border-bottom: none; }

.pf-invoices-table td:first-child { color: var(--text); }

.pf-invoice-row { cursor: pointer; transition: background var(--duration); }
.pf-invoice-row:hover { background: var(--bg-elevated); }

/* === Status pills (invoices) === */
.pf-status-pill {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    padding: 1px 7px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.pf-status-paid { background: rgba(90, 154, 84, 0.12); color: var(--triage-keep); }
.pf-status-pending,
.pf-status-refund { background: rgba(200, 148, 62, 0.12); color: var(--accent); }
.pf-status-failed { background: rgba(199, 84, 80, 0.12); color: var(--triage-reject); }

/* === Credit ledger details === */
.pf-credit-ledger { display: block; padding: 0; }
.pf-credit-ledger > summary {
    list-style: none;
    cursor: pointer;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.pf-credit-ledger > summary::-webkit-details-marker { display: none; }
.pf-credit-ledger > summary::marker { content: ""; }
.pf-credit-ledger > summary::after {
    content: "▾";
    color: var(--text-dim);
    font-size: 0.6875rem;
    transition: transform var(--duration);
}
.pf-credit-ledger[open] > summary::after { transform: rotate(180deg); }
.pf-credit-ledger > .pf-card-note,
.pf-credit-ledger > .pf-table,
.pf-credit-ledger > .pf-empty { padding: 0 16px 16px; }
.pf-credit-ledger > .pf-table { width: calc(100% - 32px); }

.pf-empty {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: 12px 0;
}

/* === POST swap response container & messages === */
.pf-section-msg {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 12px 16px;
    margin: 8px 0;
}

.pf-section-msg h2 {
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 0 0 8px;
}

.pf-msg {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    padding: 8px 12px;
    border-radius: 4px;
}

.pf-msg-error {
    background: rgba(199, 84, 80, 0.1);
    color: var(--triage-reject);
}

.pf-msg-success {
    background: rgba(90, 154, 84, 0.1);
    color: var(--triage-keep);
}

.pf-retry-link {
    margin-left: 6px;
    color: inherit;
    text-decoration: underline;
}

.pf-export-status {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    margin-top: 8px;
    color: var(--text-muted);
}
.pf-export-error { color: var(--triage-reject); }

.pf-delete-error {
    color: var(--triage-reject);
    font-size: 0.75rem;
    margin-top: 8px;
}

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

/* Invoice detail modal — content reuses these classes */
.invoice-detail {
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
    margin-bottom: 16px;
}

.invoice-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    color: var(--text);
}

.invoice-detail-label {
    color: var(--text-muted);
}

.invoice-detail-total {
    font-weight: 600;
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
}

.invoice-detail-divider {
    border-top: 1px solid var(--border);
    margin: 6px 0;
}

.btn-danger {
    background: #dc2626;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 6px 14px;
    font-family: var(--font-sans);
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
    font-weight: 500;
    cursor: pointer;
}

.btn-danger:hover {
    background: #b91c1c;
}

.delete-dialog {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-surface);
    color: var(--text);
    padding: 24px;
    max-width: 400px;
    margin: auto;
}

.delete-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.delete-dialog h2 {
    font-family: var(--font-sans);
    font-size: clamp(0.75rem, 0.83vw, 1rem);
    font-weight: 600;
    margin: 0 0 8px 0;
}

.delete-dialog p {
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
    color: var(--text-muted);
    margin: 0 0 16px 0;
    line-height: 1.5;
}

.delete-form-field {
    margin-bottom: 16px;
}

.delete-form-field label {
    display: block;
    font-size: clamp(0.5625rem, 0.6vw, 0.75rem);
    color: var(--text-muted);
    margin-bottom: 4px;
}

.delete-form-field input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg);
    color: var(--text);
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
    font-family: var(--font-sans);
    box-sizing: border-box;
}

.delete-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.btn-cancel {
    background: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 6px 14px;
    font-family: var(--font-sans);
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
    color: var(--text-muted);
    cursor: pointer;
}

.btn-cancel:hover {
    background: var(--bg-elevated);
}


/* ================================================
   SHELL
   ================================================ */

.shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    position: relative;
}



/* --- Offline banner --- */
.offline-banner {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 16px;
    background: color-mix(in srgb, var(--accent) 20%, var(--bg-surface));
    border-bottom: 1px solid var(--accent);
    color: var(--accent);
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
    font-weight: 500;
    letter-spacing: 0.3px;
    min-height: clamp(25px, 1.74vw, 34px);

    .shell.is-offline & {
        display: flex;
    }
}

.offline-banner svg {
    flex-shrink: 0;
    opacity: 0.8;
}

.offline-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    font-size: clamp(0.75rem, 0.78vw, 1rem);
    font-style: italic;
}

.welcome-message {
    ul {
        margin: 8px 0 4px;
        padding-left: 20px;
    }
    li {
        margin-bottom: 4px;
    }
    .welcome-try {
        margin-top: 8px;
        font-style: italic;
        color: var(--text-muted);
    }
}

.search-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--surface-alt, #f0f4f8);
    border-left: 3px solid var(--accent, #3b82f6);
    font-size: clamp(0.6875rem, 0.68vw, 0.8125rem);
    color: var(--text-secondary);
}

.search-hint-close {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    font-size: clamp(0.75rem, 0.83vw, 1rem);
    color: var(--text-muted);
    padding: 0 4px;
}

/* Offline: dim compose form */
.shell.is-offline .chat-compose {
    opacity: 0.4;
    pointer-events: none;
}

.shell.is-offline .topbar-credits {
    opacity: 0.3;
    pointer-events: none;
}


/* ================================================
   WORKSPACE — progressive layout
   ================================================ */

.workspace {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
    position: relative;
}

/* --- Sessions pane --- */
.pane-sessions {
    flex: 0 0 0px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    border-right: 1px solid transparent;
    opacity: 0;
    background: var(--bg-surface);
    transition:
        flex-basis var(--duration) var(--ease),
        opacity 0.2s ease,
        border-color var(--duration) var(--ease);
}

.workspace.has-sessions .pane-sessions {
    flex: 0 0 var(--sessions-width);
    opacity: 1;
    border-right-color: var(--border);
}

.pane-sessions .pane-inner {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.pane-head-actions {
    display: flex;
    gap: 2px;
}

.pane-action {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    transition: color var(--duration), background var(--duration);
}

.pane-action:hover {
    color: var(--text);
    background: var(--bg-hover);
}

/* Session items */
.session-list {
    padding: 6px 8px;
}

.session-item {
    display: block;
    padding: clamp(7px, 0.48vw, 10px) clamp(11px, 0.74vw, 14px);
    margin-bottom: 2px;
    border-radius: 4px;
    font-family: var(--font-sans);
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
    color: var(--text-muted);
    text-decoration: none;
    cursor: pointer;
    border-left: 2px solid transparent;
    transition: background var(--duration), color var(--duration), border-color var(--duration);
}

.session-item:hover {
    background: var(--bg-hover);
    color: var(--text);
}

.session-item.active {
    background: var(--bg-elevated);
    color: var(--text);
    border-left-color: var(--accent);
}

.session-menu {
    position: fixed;
    inset: unset;
    margin: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 0;
    min-width: 120px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);

    & button {
        display: block;
        width: 100%;
        padding: clamp(5px, 0.35vw, 7px) clamp(11px, 0.74vw, 14px);
        border: none;
        background: none;
        color: var(--text);
        font-family: var(--font-sans);
        font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
        text-align: left;
        cursor: pointer;

        &:hover {
            background: var(--bg-hover);
        }
    }
}

.session-item-input {
    width: 100%;
    padding: clamp(5px, 0.35vw, 7px) clamp(9px, 0.6vw, 12px);
    margin: 0;
    border: 1px solid var(--accent);
    border-radius: 3px;
    background: var(--bg-base);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
    outline: none;
}

/* Session reports */
.session-reports {
    padding: 0 0 0 clamp(13px, 0.87vw, 18px);
}

.session-report-entry {
    display: flex;
    align-items: center;
    gap: clamp(4px, 0.26vw, 5px);
    padding: clamp(3px, 0.18vw, 4px) clamp(7px, 0.48vw, 11px);
    cursor: pointer;
    border-radius: 3px;
    border-left: 2px solid transparent;
    font-size: clamp(0.5625rem, 0.61vw, 0.6875rem);
    color: var(--text-muted);
    transition: background var(--duration), color var(--duration), border-color var(--duration);

    &:hover {
        background: var(--bg-hover);
        color: var(--text);
        border-left-color: var(--status-info);
    }

    &:hover .session-report-delete {
        opacity: 1;
    }

    &.active {
        background: var(--bg-hover);
        color: var(--text);
        border-left-color: var(--status-info);
    }
}

/* Blueish label (`--status-info`) marks analysis reports apart from
   sessions in the sidebar — sessions use the amber accent when active,
   reports use blue regardless of state. */
.session-report-label {
    font-weight: 500;
    color: var(--status-info);
    white-space: nowrap;
}

.session-report-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
}

.session-report-delete {
    flex-shrink: 0;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
    line-height: 1;
    padding: 0 2px;
    opacity: 0;
    transition: opacity var(--duration), color var(--duration);

    &:hover {
        color: var(--error, #e55);
    }
}

/* --- Chat pane --- */
.pane-chat {
    flex: 1 1 100%;
    display: flex;
    justify-content: center;
    min-width: 0;
    transition: flex-basis var(--duration) var(--ease);
}

.pane-chat .pane-inner {
    width: 100%;
    max-width: var(--chat-max-w);
    display: flex;
    flex-direction: column;
    min-height: 0;
    transition: max-width var(--duration) var(--ease);
}

/* --- Files pane --- */
.pane-files {
    flex: 0 0 0%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    border-left: 1px solid transparent;
    opacity: 0;
    transition:
        flex-basis var(--duration) var(--ease),
        opacity 0.2s ease,
        border-color var(--duration) var(--ease);
}

.pane-files .pane-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    container-type: inline-size;
    container-name: patents-panel;
}

/* Compact patent cards when panel is narrow */
@container patents-panel (max-width: 250px) {
    .patent-item .patent-meta {
        display: none;
    }
    .patent-item {
        padding: 4px 28px 4px 8px;
    }
}

/* --- Split: chat + files --- */
.workspace.has-files .pane-chat {
    flex: 1 1 auto;
}

.workspace.has-files .pane-chat .pane-inner {
    max-width: none;
}

.workspace.has-files .pane-files {
    flex: 0 0 var(--files-pct);
    opacity: 1;
    border-left-color: var(--border);
}

/* --- Three-pane: sessions + chat + files --- */
.workspace.has-sessions .pane-chat {
    flex: 1 1 auto;
}


/* --- Panel chevron toggles (persistent) --- */
.panel-chevron {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid var(--accent);
    background: var(--bg-surface);
    color: var(--accent);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 12;
    transition: left var(--duration) var(--ease), right var(--duration) var(--ease),
                width 0.2s var(--ease), height 0.2s var(--ease),
                margin-top 0.2s var(--ease),
                background 0.15s, color 0.15s, border-color 0.15s;
}

.panel-chevron:hover {
    background: var(--accent);
    color: #fff;
    width: 44px;
    height: 44px;
    box-shadow: 0 0 8px rgba(88, 114, 168, 0.35);
}

.panel-chevron svg {
    display: block;
    transition: transform var(--duration) var(--ease);
}

/* Left: vertically centered, straddling sessions boundary */
.chevron-left {
    top: 50%;
    margin-top: -20px;
    left: -20px;
    justify-content: flex-end;
    padding-right: 6px;
}

.workspace.has-sessions .chevron-left {
    width: 24px;
    height: 24px;
    margin-top: -12px;
    left: calc(var(--sessions-width) - 12px);
    border-color: var(--border);
    color: var(--text-dim);
    justify-content: center;
    padding-right: 0;
}
.workspace.has-sessions .chevron-left svg { transform: rotate(180deg); }
.workspace.has-sessions .chevron-left:hover {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

/* Right: vertically centered, straddling files boundary */
.chevron-right {
    top: 50%;
    margin-top: -20px;
    right: -20px;
    justify-content: flex-start;
    padding-left: 6px;
}

.workspace.has-files .chevron-right {
    width: 24px;
    height: 24px;
    margin-top: -12px;
    right: calc(var(--files-pct) - 12px);
    border-color: var(--border);
    color: var(--text-dim);
    justify-content: center;
    padding-left: 0;
}
.workspace.has-files .chevron-right svg { transform: rotate(180deg); }
.workspace.has-files .chevron-right:hover {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

/* --- Resize handles --- */
.resize-handle {
    position: absolute;
    z-index: 11;
    background: transparent;
    transition: background 0.15s;
}

.resize-handle:hover,
.resize-handle.active {
    background: var(--accent);
}

.resize-handle-v {
    top: 0;
    bottom: 0;
    width: 4px;
    cursor: col-resize;
}

.resize-handle-h {
    left: 0;
    right: 0;
    height: 4px;
    cursor: row-resize;
}

#resize-sessions { right: -2px; }
#resize-files { left: -2px; }
#resize-log { top: -2px; }

/* Disable transitions during resize drag */
.resizing,
.resizing .pane-sessions,
.resizing .pane-files,
.resizing .pane-chat,
.resizing .pane-log,
.resizing .panel-chevron {
    transition: none !important;
}

.resizing { user-select: none; }


/* --- Pane head (for files pane) --- */
.pane-head {
    height: clamp(31px, 2.09vw, 41px);
    min-height: clamp(31px, 2.09vw, 41px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(11px, 0.74vw, 14px);
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
}

.pane-title {
    font-size: clamp(0.5625rem, 0.61vw, 0.6875rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
}

/* V1 patents pane-head adornments. Title on the left, "X loaded · Y kept"
   rollup right next to it (mono small dim text), and the Triage takeover
   trigger pinned to the far right so it's reachable without scrolling
   through the chip rows. */
.pane-files .pane-head { gap: 10px; }
.pane-files .pane-title { flex-shrink: 0; }
.patent-rollup {
    flex: 1;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: clamp(0.5625rem, 0.6vw, 0.6875rem);
    color: var(--text-dim);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.patent-rollup span { color: var(--text-muted); }

/* Subject-brief prereqs strip — Issue 19, step 1 of research.
   Visual borrowed from the v5 Queue ribbon
   (`docs/design-system/better-ux/sources/app/patents-v5.html` lines
   124–148). Sits between #chat-outcome and #compose-form — the
   compose flex column gives it natural placement just atop the
   input area. Hidden by default; brief-prereqs.js reveals it when
   the brief is incomplete. → docs/adr/subject-brief-intake.md. */
.prereqs-strip {
    /* Card-style frame matching `.compose-body` below so the BRIEF
       label + bars sit inside a visible container instead of
       floating on the void. Horizontal margin matches
       `.chat-compose`'s padding so this card and compose-body align
       at the same left + right edges. Top margin breathes the card
       off chat-scroll above. */
    margin: 8px clamp(18px, 1.22vw, 25px) 0;
    padding: 8px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: auto;
    background: var(--bg-surface);
    flex-shrink: 0;
}
.prereqs-strip[hidden] { display: none; }
.prereqs-strip-label {
    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dim);
    margin-right: 4px;
    flex-shrink: 0;
}
.prereqs-strip-bar {
    width: 8px;
    height: 28px;
    border-radius: 2px;
    flex-shrink: 0;
    cursor: pointer;
    background: var(--triage-reject);
    opacity: 0.55;
    border: none;
    padding: 0;
    transition: box-shadow 0.15s var(--ease), opacity 0.15s var(--ease);
}
.prereqs-strip-bar[data-state="filled"] {
    background: var(--triage-keep);
    opacity: 1;
}
.prereqs-strip-bar[data-state="partial"] {
    background: var(--triage-maybe);
    opacity: 1;
}
.prereqs-strip-bar[data-state="optional-empty"] {
    background: var(--bg-elevated);
    opacity: 1;
}
.prereqs-strip-bar.is-focus {
    box-shadow: 0 0 0 2px var(--accent);
}
.prereqs-strip-spacer { flex: 1 1 0; }
.prereqs-strip-counter {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-dim);
    flex-shrink: 0;
}

/* Bar-click popover: shows the field title + whatever the model captured
   for that field (or "Not yet captured." when empty). Replaces the old
   "dump a prompt into the textarea" UX. */
.prereqs-bar-popover {
    z-index: 9999;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
    color: var(--text-bright);
    font-size: 12px;
    line-height: 1.4;
}
.prereqs-bar-popover-title {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    margin-bottom: 6px;
}
.prereqs-bar-popover-body {
    color: var(--text-bright);
    white-space: pre-wrap;
    word-break: break-word;
}
.prereqs-bar-popover-body.prereqs-bar-popover-empty {
    color: var(--text-dim);
    font-style: italic;
}

/* "?" footer button — opens the shortcuts cheatsheet (Issue 14). Sized
   to match adjacent <kbd> hints so the row reads as one continuous
   strip. */
.kbd-help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-left: 4px;
    cursor: pointer;
    transition: color var(--duration), border-color var(--duration);
}
.kbd-help-btn:hover { color: var(--accent); border-color: var(--accent); }

/* Shortcuts cheatsheet dialog. */
dialog.shortcuts-modal {
    margin: auto;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 18px 22px 14px;
    min-width: 480px;
    max-width: 760px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    color: var(--text);
    animation: modal-in 0.15s var(--ease);
}
dialog.shortcuts-modal::backdrop {
    background: rgba(0, 0, 0, 0.55);
    animation: modal-fade 0.15s ease;
}
.shortcuts-modal-title {
    font-family: var(--font-sans);
    font-size: clamp(14px, 0.95vw, 18px);
    font-weight: 600;
    margin: 0 0 14px;
    color: var(--text);
}
.shortcuts-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px 28px;
}
.shortcuts-modal-section {
    font-family: var(--font-sans);
    font-size: clamp(10px, 0.7vw, 12px);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin: 0 0 8px;
    font-weight: 600;
}
.shortcuts-modal-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 12px;
    margin: 0;
}
.shortcuts-modal-list dt {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
}
.shortcuts-modal-list dt kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text);
}
.shortcuts-modal-kbd-sep {
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    padding: 0 1px;
}
.shortcuts-modal-list dd {
    margin: 0;
    color: var(--text-muted);
    font-size: clamp(11px, 0.74vw, 13px);
    align-self: center;
}
.shortcuts-modal-close {
    margin-top: 16px;
    background: var(--bg-hover);
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 6px 18px;
    cursor: pointer;
    font-family: inherit;
    font-size: clamp(11px, 0.74vw, 13px);
}
.shortcuts-modal-close:hover { color: var(--text); }


/* ================================================
   CHAT
   ================================================ */

.chat-scroll {
    flex: 1;
    overflow-y: auto;
    padding: clamp(22px, 1.48vw, 30px) clamp(18px, 1.22vw, 25px);
    min-height: 0;
}

.rag-badge {
    font-size: clamp(0.5625rem, 0.6vw, 0.75rem);
    padding: 0.15em 0.6em;
    text-align: center;
    color: var(--text-muted, #888);
    &:empty { display: none; }
}
.rag-active { color: var(--accent, #4a9eff); }
.rag-indexing { color: var(--warning, #e6a817); }

.chat-compose {
    display: flex;
    flex-direction: column;
    padding: clamp(9px, 0.6vw, 12px) clamp(18px, 1.22vw, 25px) clamp(13px, 0.87vw, 18px);
    border-top: 1px solid var(--border);
}

/* When the BRIEF strip is visible, IT provides the separator line
   above the compose area. Drop chat-compose's border-top so the two
   don't stack misaligned (the strip's border is indented via its
   horizontal margin; chat-compose's would span the full pane width). */
.prereqs-strip:not([hidden]) ~ .chat-compose {
    border-top: none;
}

/* File chips — one per accumulated file. Wraps so 10 files tile cleanly
   above the compose area instead of overflowing. */
.compose-file-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.compose-file-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: var(--font-sans);
    font-size: clamp(0.5625rem, 0.61vw, 0.6875rem);
    color: var(--text-muted);
    max-width: 100%;
}

.compose-file-chip .file-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 28ch;
}

.compose-file-chip svg { color: var(--accent); flex-shrink: 0; }

.file-chip-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    padding: 2px;
    border-radius: 3px;
    transition: color 0.15s ease, background 0.15s ease;
}

.file-chip-remove:hover { color: var(--error); background: rgba(199, 84, 80, 0.1); }

/* Compose body (textarea + actions row) */
.compose-body {
    display: flex;
    flex-direction: column;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: border-color var(--duration) var(--ease);
}

.compose-body:focus-within {
    border-color: var(--accent);
}

.chat-compose textarea {
    flex: 1;
    background: transparent;
    color: var(--text);
    border: none;
    padding: clamp(9px, 0.6vw, 12px) clamp(13px, 0.87vw, 18px) clamp(4px, 0.26vw, 5px);
    font-family: var(--font-mono);
    font-size: clamp(0.75rem, 0.83vw, 1rem);
    line-height: 1.5;
    /* 3 lines of room by default so the box doesn't look like a postcard
       slot on first load. autoResize() then grows up to 10 lines (see
       COMPOSE_MAX_ROWS) as the user types. */
    min-height: calc(1.5em * 3);
    resize: none;
    overflow-y: hidden;
    box-sizing: border-box;
}

.chat-compose textarea:focus {
    outline: none;
}

.chat-compose textarea::placeholder {
    color: var(--text-dim);
}

/* Actions row (attach + send, bottom-right) */
.compose-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    padding: 4px 8px 6px;
}

.compose-disclaimer {
    margin: clamp(6px, 0.4vw, 8px) 0 0;
    font-family: var(--font-mono);
    font-size: clamp(0.5625rem, 0.6vw, 0.6875rem);
    line-height: 1.4;
    color: var(--text-dim);
    text-align: center;
}

.compose-attach {
    width: clamp(25px, 1.74vw, 34px);
    height: clamp(25px, 1.74vw, 34px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    border-radius: 5px;
    transition: color 0.15s ease, background 0.15s ease;
}

.compose-attach:hover { color: var(--text-muted); background: var(--bg-hover); }

.chat-send {
    width: clamp(25px, 1.74vw, 34px);
    height: clamp(25px, 1.74vw, 34px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--duration) var(--ease);
}

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

/* --- Model Selector --- */
.compose-model-btn {
    display: flex;
    align-items: center;
    gap: 3px;
    height: clamp(22px, 1.5vw, 28px);
    padding: 0 clamp(6px, 0.4vw, 10px);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: clamp(0.625rem, 0.69vw, 0.8125rem);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, color 0.15s;
}
.compose-model-btn:hover {
    border-color: var(--accent);
    color: var(--text-muted);
}
.compose-model-btn svg {
    flex-shrink: 0;
}
.model-dropdown {
    position: fixed;
    margin: 0;
    inset: auto;
    padding: 4px 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    min-width: 160px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 999;
}
.model-dropdown-item {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: clamp(5px, 0.35vw, 8px) clamp(10px, 0.7vw, 14px);
    background: none;
    border: none;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: clamp(0.6875rem, 0.76vw, 0.875rem);
    text-align: left;
    cursor: pointer;
    transition: background 0.1s;
}
.model-dropdown-item:hover {
    background: var(--bg-hover);
}
.model-dropdown-item.active {
    color: var(--accent);
}
.model-dropdown-item:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.model-feature-badge {
    font-size: clamp(0.5rem, 0.55vw, 0.625rem);
    padding: 1px 5px;
    border-radius: 8px;
    background: var(--bg-hover);
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.compose-model-btn.locked {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
.model-cost-badge {
    font-size: clamp(0.5rem, 0.55vw, 0.625rem);
    padding: 1px 5px;
    border-radius: 8px;
    background: var(--accent);
    color: var(--bg);
    font-weight: 600;
    letter-spacing: 0.03em;
}

/* --- Effort Selector --- */
.effort-selector {
    display: flex;
    gap: clamp(8px, 1vw, 16px);
    align-self: flex-start;
    padding: clamp(2px, 0.3vw, 4px) clamp(4px, 0.5vw, 8px);
}
.effort-selector.hidden { display: none; }
.effort-btn {
    padding: clamp(2px, 0.3vw, 4px) 0;
    font-size: clamp(0.5625rem, 0.6vw, 0.6875rem);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-dim);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.effort-btn:hover {
    color: var(--text);
}
.effort-btn.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* --- Messages --- */
.message {
    padding: clamp(9px, 0.6vw, 12px) clamp(13px, 0.87vw, 18px);
    margin-bottom: clamp(7px, 0.48vw, 10px);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: clamp(0.75rem, 0.83vw, 1rem);
    line-height: 1.5;
    border-left: 2px solid transparent;
    animation: msg-in 0.2s ease;

    a {
        color: var(--text-muted);
        text-decoration: underline;
        transition: color var(--duration);
    }
    a:hover {
        color: var(--text);
    }
}

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

.user-message {
    background: var(--msg-user-bg);
    border-left-color: var(--msg-user-bar);
}

.assistant-message {
    background: var(--msg-ai-bg);
    border-left-color: var(--msg-ai-bar);
}

.message > strong {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
    font-size: clamp(0.5625rem, 0.6vw, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.user-message > strong { color: var(--msg-user-bar); }
.assistant-message > strong { color: var(--msg-ai-bar); }

.system-message {
    background: transparent;
    border-left-color: var(--border);
    color: var(--text-dim);
    font-style: italic;
    font-size: clamp(0.6875rem, 0.73vw, 0.875rem);
    opacity: 0.8;
}

/* --- KAME oracle preview (cheap-model draft, hidden when smart finishes) ---
   The `#oracle-{rid}` span sits before `#response-{rid}` (.final-response)
   inside `.translatable`. CSS `:has()` hides the oracle once the smart
   response is non-empty AND the message is no longer streaming
   (`data-streaming` is removed from `.assistant-message` by app-lifecycle
   on stream-done; we match `:not([data-streaming="1"])` so the absent-or-
   "0" cases both hide).
   With Phase C's prefill+minimal-edit upgrade, the smart model often emits
   a SHORT correction rather than a full reply; hiding only on `done` (not
   on first-token) keeps the long oracle visible alongside the incremental
   correction so the user can see what changed.
   → docs/wiki/concepts/sgr.md (Phase 3 KAME tandem + Phase C prefill) */
.oracle-preview {
    display: block;
    opacity: 0.55;
    font-style: italic;
    font-size: 0.95em;
    border-left: 2px solid var(--border-light, rgba(127, 127, 127, 0.3));
    padding-left: 0.5em;
    margin-bottom: 0.4em;
}
.assistant-message:not([data-streaming="1"]) .translatable:has(.final-response:not(:empty)) .oracle-preview {
    display: none;
}

/* --- Markdown in assistant messages --- */
.assistant-message .translatable {
    h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-sans);
        font-weight: 600;
        color: var(--text);
        margin: 0.8em 0 0.3em;
        line-height: 1.3;
    }
    h1 { font-size: 1.3em; }
    h2 { font-size: 1.15em; }
    h3 { font-size: 1.05em; }
    h4, h5, h6 { font-size: 1em; }

    p { margin: 0.4em 0; }

    ul, ol {
        margin: 0.4em 0;
        padding-left: 1.5em;
    }
    li { margin: 0.15em 0; }

    hr {
        border: none;
        border-top: 1px solid var(--border);
        margin: 0.8em 0;
    }

    code {
        background: rgba(255, 255, 255, 0.06);
        padding: 0.15em 0.35em;
        border-radius: 3px;
        font-size: 0.9em;
    }

    pre {
        background: rgba(0, 0, 0, 0.3);
        padding: 0.6em 0.8em;
        border-radius: 4px;
        overflow-x: auto;
        margin: 0.5em 0;

        code {
            background: none;
            padding: 0;
        }
    }

    table {
        border-collapse: collapse;
        margin: 0.5em 0;
        font-size: 0.9em;

        th, td {
            border: 1px solid var(--border);
            padding: 0.3em 0.6em;
            text-align: left;
        }
        th {
            background: rgba(255, 255, 255, 0.04);
            font-weight: 600;
        }
    }

    blockquote {
        border-left: 2px solid var(--accent);
        margin: 0.5em 0;
        padding: 0.2em 0.8em;
        color: var(--text-muted);
    }
}

/* --- Queued request indicator --- */

.queued {
    color: var(--text-muted, #888);
    font-style: italic;
    animation: queued-pulse 2s ease-in-out infinite;
}

@keyframes queued-pulse {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1; }
}

/* --- Generating indicator spinner --- */

.generating-indicator {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.generating-spinner {
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    border: 2px solid var(--text-muted, #888);
    border-top-color: transparent;
    border-radius: 50%;
    animation: generating-spin 0.8s linear infinite;
    flex-shrink: 0;
}

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

/* --- Message context menu --- */

.message {
    position: relative;

    &:hover .msg-menu-btn,
    &:hover .msg-edit-btn,
    &:hover .msg-feedback {
        opacity: 1;
    }
}

.msg-edit-btn {
    position: absolute;
    top: 6px;
    right: 36px;
    width: 24px;
    height: 24px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-elevated);
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s var(--ease), background 0.15s var(--ease);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 2;
}

.msg-edit-btn:hover {
    background: var(--bg-hover);
    color: var(--text);
}

.msg-menu-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-elevated);
    color: var(--text-muted);
    font-size: clamp(0.75rem, 0.83vw, 1rem);
    font-weight: bold;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s var(--ease), background 0.15s var(--ease);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    z-index: 2;
    letter-spacing: 1px;

    &:hover {
        background: var(--bg-hover);
        color: var(--text);
    }
}

.msg-feedback {
    position: absolute;
    top: 6px;
    right: 34px;
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s var(--ease);
    z-index: 2;
}

.feedback-btn {
    width: 24px;
    height: 24px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-elevated);
    cursor: pointer;
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s var(--ease), border-color 0.15s var(--ease);

    &:hover {
        background: var(--bg-hover);
        border-color: var(--text-muted);
    }

    &.feedback-active {
        background: var(--accent);
        border-color: var(--accent);
        color: #18171a;
        opacity: 1;
    }
}

/* Keep feedback visible when a vote is cast */
.message:has(.feedback-active) .msg-feedback {
    opacity: 1;
}

.msg-menu {
    position: absolute;
    top: 28px;
    right: 6px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 0;
    z-index: 20;
    min-width: 150px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.msg-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: clamp(5px, 0.35vw, 7px) clamp(11px, 0.74vw, 14px);
    border: none;
    background: none;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
    text-align: left;
    cursor: pointer;

    &:hover {
        background: var(--bg-hover);
    }

    & .submenu-arrow {
        font-size: clamp(0.875rem, 0.96vw, 1.125rem);
        color: var(--text-muted);
        margin-left: 8px;
    }
}

.msg-submenu {
    position: absolute;
    top: 0;
    right: calc(100% - 4px);
    padding-right: 4px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 0;
    z-index: 21;
    min-width: 130px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);

    & button {
        display: block;
        width: 100%;
        padding: 5px 12px;
        border: none;
        background: none;
        color: var(--text);
        font-family: var(--font-sans);
        font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
        text-align: left;
        cursor: pointer;

        &:hover {
            background: var(--bg-hover);
        }
    }
}

.translated-indicator {
    display: inline-block;
    font-size: clamp(0.5625rem, 0.6vw, 0.75rem);
    color: var(--accent);
    margin-left: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: middle;
}

.translatable {
    position: relative;
}


/* ================================================
   FILES / PATENTS
   ================================================ */

.file-list {
    flex: 1;
    padding: 8px 10px;
    min-height: 0;
}

.patent-header {
    padding: 8px 12px;
    color: var(--text-muted);
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
}



/* ================================================
   PATENT TOOLBAR (search + filter)
   ================================================ */

.patent-toolbar {
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 0.3vw, 7px);
    padding: clamp(5px, 0.35vw, 9px) clamp(9px, 0.6vw, 12px);
    border-bottom: 1px solid var(--border);
    background: var(--bg-surface);
    flex-shrink: 0;
}

.patent-search {
    flex: 1;
    background: var(--bg-input);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: clamp(4px, 0.3vw, 7px) clamp(7px, 0.48vw, 11px);
    font-family: var(--font-mono);
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
    min-width: 0;
    transition: border-color var(--duration) var(--ease);
}

.patent-search:focus { outline: none; border-color: var(--accent); }
.patent-search::placeholder { color: var(--text-dim); }

/* Search row hosts the input + a permanent "Select all visible"
   affordance. Selection-driven .patent-actions hides until ≥1 card
   is selected, but users need to be able to start a selection
   from zero — the catch-22 the user reported. */
.patent-search-row {
    display: flex;
    align-items: center;
    gap: clamp(4px, 0.3vw, 7px);
    min-width: 0;
}
.patent-search-row .patent-search { flex: 1; }
.patent-select-all-toolbar {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: clamp(3px, 0.25vw, 5px) clamp(6px, 0.4vw, 9px);
    font-size: clamp(0.625rem, 0.7vw, 0.75rem);
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.patent-select-all-toolbar:hover { color: var(--text); border-color: var(--accent); }

.patent-filters {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.patent-filter {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: 1px solid transparent;
    color: var(--text-dim);
    font-family: var(--font-sans);
    font-size: clamp(0.5625rem, 0.6vw, 0.75rem);
    font-weight: 500;
    padding: clamp(3px, 0.18vw, 4px) clamp(6px, 0.44vw, 9px);
    border-radius: 3px;
    cursor: pointer;
    transition: color var(--duration), background var(--duration), border-color var(--duration);
}

.patent-filter:hover { color: var(--text-muted); background: var(--bg-hover); }

.patent-filter.active {
    color: var(--text);
    background: var(--bg-elevated);
    border-color: var(--border);
}

.filter-count {
    font-family: var(--font-mono);
    font-size: clamp(0.5rem, 0.57vw, 0.6875rem);
    opacity: 0.7;
}

/* --- Status dots --- */
.status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.dot-keep { background: #5a9a54; }
.dot-reject { background: #c75450; }
.dot-none { background: var(--text-dim); opacity: 0.5; }


/* ================================================
   PATENT ITEM — enhanced with status
   ================================================ */

.patent-item {
    /* V1: padding 7px 11px 7px 10px (3px-rail + 7px = 10px effective left).
       Right side has no permanent status btn anymore — the eye-btn floats
       absolutely at top: 6px / right: 6px so cards stay tight. */
    padding: 7px 11px 7px 10px;
    margin: 2px 6px;
    background: var(--patent-bg);
    border-radius: 3px;
    border-left: 3px solid var(--patent-bar);
    color: var(--text);
    cursor: pointer;
    transition: background var(--duration), border-color var(--duration), opacity var(--duration);
    animation: msg-in 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 3px;
    position: relative;

    &:hover {
        background: var(--bg-hover);

        & .patent-view-btn { opacity: 1; }
    }

    /* Pipeline status left border — yellow while in-flight, green once
       EPO enrichment succeeded (regardless of downstream chunk/embed
       progress), red on failure. */
    &[data-status="pending"]  { border-left-color: #b8942a; }
    &[data-status="enriched"] { border-left-color: #2d7a3a; }
    &[data-status="chunked"]  { border-left-color: #2d7a3a; }
    &[data-status="embedded"] { border-left-color: #2d7a3a; }
    &[data-status="failed"]   { border-left-color: #a04040; }

    &.patent-pending {
        border-left-color: var(--text-dim);
        opacity: 0.7;

        & .patent-title {
            color: var(--text-muted);
            font-style: italic;
        }
    }

    & .patent-id {
        font-family: var(--font-mono);
        font-size: clamp(0.5625rem, 0.61vw, 0.6875rem);
        color: var(--text-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.4;
    }

    & .patent-title {
        font-family: var(--font-sans);
        font-size: 0.75rem;
        color: var(--text);
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* First line of the abstract under title. Small, muted, single-line
       clamp — adds signal without inflating card height. When the span is
       empty (pending / failed patents without an abstract yet) it just
       collapses to nothing so the card still fits `ROW_HEIGHT`. */
    & .patent-abstract {
        font-family: var(--font-sans);
        font-size: clamp(0.625rem, 0.67vw, 0.75rem);
        color: var(--text-muted);
        line-height: 1.4;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    & .patent-abstract:empty {
        display: none;
    }

    & .patent-meta {
        font-family: var(--font-sans);
        font-size: clamp(0.5625rem, 0.6vw, 0.75rem);
        color: var(--text-dim);
        line-height: 1.4;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* V1 cards have no eye icon — the whole card is clickable to select.
       We keep the eye icon (legacy popup affordance) but tuck it in the
       top-right corner instead of the old mid-right slot, where the
       absolute-positioned button used to overlap the meta-row K/M/R
       verdict-group and intercept its clicks. The button is sized just
       to its 12px svg so the bounding box stays small. */
    & .patent-view-btn {
        width: 16px;
        height: 16px;
        border: none;
        background: none;
        cursor: pointer;
        position: absolute;
        top: 6px;
        right: 6px;
        color: var(--text-muted);
        opacity: 0;
        transition: opacity var(--duration), color var(--duration);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;

        &:hover { color: var(--accent); }
        & svg { width: 12px; height: 12px; }
    }
    &:hover .patent-view-btn,
    &.focused .patent-view-btn,
    &.selected .patent-view-btn,
    & .patent-view-btn[aria-pressed="true"] { opacity: 1; }

    /* Eye button stays lit + accent-colored while its preview is open
       (aria-pressed="true"), so the user can re-click the same eye to
       toggle the preview closed without moving the mouse to the
       preview's titlebar X. */
    & .patent-view-btn[aria-pressed="true"] { color: var(--accent); }

    & .patent-status-btn {
        width: clamp(16px, 1.13vw, 21px);
        height: clamp(16px, 1.13vw, 21px);
        border-radius: 50%;
        border: 1.5px solid var(--border);
        background: none;
        cursor: pointer;
        flex-shrink: 0;
        position: absolute;
        top: 50%;
        right: clamp(5px, 0.35vw, 9px);
        transform: translateY(-50%);
        transition: border-color var(--duration), background var(--duration);

        &:hover { border-color: var(--text-muted); }
    }

    /* Status: keep (green) */
    &[data-status="keep"] {
        border-left-color: #5a9a54;

        & .patent-status-btn {
            border-color: #5a9a54;
            background: #5a9a54;

            &::after {
                content: '';
                position: absolute;
                top: 50%; left: 50%;
                width: 5px; height: 9px;
                border: solid #fff;
                border-width: 0 2px 2px 0;
                transform: translate(-50%, -60%) rotate(45deg);
            }
        }
    }

    /* Status: reject (red) */
    &[data-status="reject"] {
        border-left-color: #c75450;
        opacity: 0.55;

        & .patent-status-btn {
            border-color: #c75450;
            background: #c75450;

            &::before,
            &::after {
                content: '';
                position: absolute;
                top: 50%; left: 50%;
                width: 9px; height: 2px;
                background: #fff;
                border-radius: 1px;
            }

            &::before {
                transform: translate(-50%, -50%) rotate(45deg);
            }

            &::after {
                transform: translate(-50%, -50%) rotate(-45deg);
            }
        }
    }

    /* V1 selected: amber 2px rail (overrides verdict color) + lifted bg.
       The accent rail signals "active row" without competing with the
       verdict-color rails. No prepended checkbox — V1 keeps cards minimal;
       multi-select is communicated by the active K/M/R group + an explicit
       count in the patent-actions bar. */
    /* Selected reads as the blue --status-info, never the gold --accent
       (which conflicted with pipeline-pending yellow and triage-maybe
       amber — both close enough to gold that "selected" was invisible).
       Apps/backend CLAUDE.md "Patent card contract: selected cards use
       --status-info blue." */
    &.selected {
        background: rgba(88, 114, 168, 0.12);
        border-left: 3px solid var(--status-info);
    }

    /* EPO relevance category badge (X/Y/A) — shown inline after patent-id */
    & .patent-relevance {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-mono);
        font-size: clamp(0.5rem, 0.52vw, 0.625rem);
        font-weight: 700;
        line-height: 1;
        min-width: clamp(14px, 0.96vw, 18px);
        height: clamp(14px, 0.96vw, 18px);
        border-radius: 3px;
        margin-left: clamp(4px, 0.28vw, 6px);
        vertical-align: middle;
        text-transform: uppercase;
    }

    & .relevance-x {
        background: #c7354520;
        color: #e05252;
        border: 1px solid #c7354540;
    }

    & .relevance-y {
        background: #c8943e20;
        color: #c8943e;
        border: 1px solid #c8943e40;
    }

    & .relevance-a {
        background: #4a90d920;
        color: #5a9ad9;
        border: 1px solid #4a90d940;
    }

    & .relevance-d {
        background: rgba(128,128,128,0.12);
        color: #888;
        border: 1px solid rgba(128,128,128,0.25);
    }

    & .relevance-p {
        background: rgba(138,100,180,0.12);
        color: #9a78b8;
        border: 1px solid rgba(138,100,180,0.25);
    }

    & .relevance-e {
        background: rgba(200,130,60,0.12);
        color: #c8823c;
        border: 1px solid rgba(200,130,60,0.25);
    }

    & .relevance-other {
        background: var(--bg-hover);
        color: var(--text-muted);
        border: 1px solid var(--border);
    }

    /* Highlight in list */
    &.highlighted {
        background: rgba(200, 148, 62, 0.12);
        border-left-color: var(--accent);
    }

    /* Keyboard focus — set by patent-keyboard.js as the user navigates
       j/k. Distinct from .selected (multi-select) and .highlighted
       (chat patent-ref hover). Subtle accent ring keeps the visual
       calm next to the existing rail-color cues. */
    &.focused {
        box-shadow: inset 0 0 0 1px rgba(200, 148, 62, 0.55);
    }

    &.pulse {
        animation: patent-pulse 1.5s ease;
    }

    /* === V1 list layout (Phase 1) ============================================
       Card now uses two flex rows:
         .patent-id-row   = verdict-dot · id · relevance-badge
         .patent-meta-row = meta text · verdict K/M/R buttons (selected only)
       The verdict dot color is driven by the card's data-status (which
       already carries the triage value when category != 'none' — see
       vsRenderNow). The maybe rule below mirrors the existing keep/reject
       border-left-color treatment; the old `.patent-status-btn` blocks above
       are now dead code (the button is gone) but left in place to keep the
       diff small — phase 2 cleanup will remove them.                              */

    & .patent-id-row {
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        line-height: 1.4;
    }
    & .patent-id-row .patent-id { flex: 1; min-width: 0; }

    & .patent-verdict-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: transparent;
        box-shadow: inset 0 0 0 1px var(--text-dim);
        flex-shrink: 0;
        transition: background var(--duration), box-shadow var(--duration);
    }

    & .patent-meta-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        min-width: 0;
    }
    & .patent-meta-row .patent-meta { flex: 1; min-width: 0; }

    /* V1 spec: K/M/R buttons are always visible on the selected card AND
       on hover for others. opacity (not display) keeps the layout stable
       so meta text doesn't jump position when the buttons fade in. */
    & .patent-verdict-group {
        display: inline-flex;
        gap: 3px;
        flex-shrink: 0;
        opacity: 0;
        transition: opacity var(--duration);
    }
    &:hover .patent-verdict-group,
    &.selected .patent-verdict-group,
    &.focused .patent-verdict-group { opacity: 1; }
    /* Buttons that already carry a verdict stay visible regardless of hover
       so the user can see the current state at a glance. */
    & .patent-verdict-group:has(.patent-verdict-btn.active) { opacity: 1; }

    & .patent-verdict-btn {
        height: 18px;
        min-width: 18px;
        padding: 0 5px;
        background: transparent;
        border: 1px solid var(--border);
        color: var(--text-dim);
        font-family: var(--font-mono);
        font-size: 0.5625rem;
        font-weight: 600;
        letter-spacing: 0.3px;
        border-radius: 3px;
        cursor: pointer;
        line-height: 1;
        transition: background var(--duration), border-color var(--duration), color var(--duration);
    }
    & .patent-verdict-btn:hover { color: var(--text-muted); border-color: var(--text-dim); }

    & .patent-verdict-btn[data-verdict="keep"].active {
        background: rgba(90, 154, 84, 0.13);
        border-color: rgba(90, 154, 84, 0.5);
        color: var(--triage-keep);
    }
    & .patent-verdict-btn[data-verdict="maybe"].active {
        background: rgba(200, 148, 62, 0.13);
        border-color: rgba(200, 148, 62, 0.5);
        color: var(--triage-maybe);
    }
    & .patent-verdict-btn[data-verdict="reject"].active {
        background: rgba(199, 84, 80, 0.13);
        border-color: rgba(199, 84, 80, 0.5);
        color: var(--triage-reject);
    }

    /* Triage 'maybe': amber left rail, matches the V1 + V2 funnel palette.
       Pairs with the existing keep (#5a9a54) and reject (#c75450) rules. */
    &[data-status="maybe"] { border-left-color: var(--triage-maybe); }

    /* Verdict-dot color follows the card's triage value. Border-only for
       'none' (transparent fill + dim ring) so undecided still reads as such. */
    &[data-status="keep"]   .patent-verdict-dot { background: var(--triage-keep);   box-shadow: inset 0 0 0 1px var(--triage-keep); }
    &[data-status="maybe"]  .patent-verdict-dot { background: var(--triage-maybe);  box-shadow: inset 0 0 0 1px var(--triage-maybe); }
    &[data-status="reject"] .patent-verdict-dot { background: var(--triage-reject); box-shadow: inset 0 0 0 1px var(--triage-reject); }

    /* Selected wins over every pipeline / triage data-status hue. The
       upstream `&.selected` block at the top of `.patent-item` shares
       specificity (0,2,0) with `&[data-status="…"]` rules, and the
       triage `maybe` rule appears LATER in source — without this
       trailing override, selecting an in-flight (pending) or
       maybe-triaged card kept the gold/amber rail and "selected" was
       invisible. Repeating the selector at the end of the nested
       block puts source-order on selected's side without resorting to
       !important. */
    &.selected {
        border-left-color: var(--status-info);
    }
}

/* Patent action bar (selection + actions in one row) */
.patent-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(5px, 0.35vw, 9px);
    padding: clamp(3px, 0.18vw, 5px) 2px;
    flex-shrink: 0;
    flex-wrap: wrap;
    font-family: var(--font-sans);
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);

    & #selection-count {
        color: var(--accent);
        font-weight: 500;
    }

    & .patent-actions-sep {
        color: var(--border);
    }

    & .patent-actions-sep-destructive {
        display: inline-block;
        width: 1px;
        height: 18px;
        background: var(--border);
        margin: 0 clamp(3px, 0.2vw, 6px);
        flex-shrink: 0;
    }
}

.patent-compare-btn {
    background: rgba(200, 148, 62, 0.12);
    border: 1px solid rgba(200, 148, 62, 0.3);
    color: var(--accent);
    font-family: var(--font-sans);
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
    font-weight: 500;
    padding: clamp(3px, 0.18vw, 5px) clamp(9px, 0.6vw, 12px);
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.patent-compare-btn:hover {
    background: rgba(200, 148, 62, 0.2);
    border-color: var(--accent);
}

.patent-download-btn {
    background: rgba(200, 148, 62, 0.12);
    border: 1px solid rgba(200, 148, 62, 0.3);
    color: var(--accent);
    font-family: var(--font-sans);
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
    font-weight: 500;
    padding: clamp(3px, 0.18vw, 5px) clamp(9px, 0.6vw, 12px);
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.patent-download-btn:hover {
    background: rgba(200, 148, 62, 0.2);
    border-color: var(--accent);
}

.patent-clear-sel-btn {
    background: none;
    border: none;
    color: var(--text-dim);
    font-family: var(--font-sans);
    font-size: clamp(0.875rem, 0.96vw, 1.125rem);
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    transition: color 0.15s;
}

.patent-clear-sel-btn:hover {
    color: var(--text-muted);
}

/* --- Patent funnel bar --- */
.patent-funnel {
    display: flex;
    align-items: center;
    gap: clamp(5px, 0.35vw, 9px);
    padding: clamp(3px, 0.18vw, 5px) 0;
    font-family: var(--font-sans);
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
    color: var(--text-dim);
    flex-shrink: 0;
    width: 100%;
    justify-content: center;
}

/* V1 pill chip — used by both verdict and rel chip rows. Replaces the old
   arrow-funnel styling. Inactive: transparent bg + hairline border + muted
   text. Active: tinted bg + colored border + colored text per data-tone. */
.funnel-stage {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 8px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.funnel-stage:hover { background: rgba(200, 148, 62, 0.08); color: var(--text); }
.funnel-stage.active[data-tone="all"]    { background: rgba(200, 148, 62, 0.12); border-color: rgba(200, 148, 62, 0.6); color: var(--accent); }
.funnel-stage.active[data-tone="keep"]   { background: rgba(90, 154, 84, 0.12);  border-color: rgba(90, 154, 84, 0.6);  color: var(--triage-keep); }
.funnel-stage.active[data-tone="maybe"]  { background: rgba(200, 148, 62, 0.12); border-color: rgba(200, 148, 62, 0.6); color: var(--triage-maybe); }
.funnel-stage.active[data-tone="reject"] { background: rgba(199, 84, 80, 0.12);  border-color: rgba(199, 84, 80, 0.6);  color: var(--triage-reject); }
.funnel-stage.active[data-tone="x"]      { background: rgba(199, 53, 69, 0.12);  border-color: rgba(199, 53, 69, 0.6);  color: #e05252; }
.funnel-stage.active[data-tone="y"]      { background: rgba(200, 148, 62, 0.12); border-color: rgba(200, 148, 62, 0.6); color: var(--triage-maybe); }
.funnel-stage.active[data-tone="a"]      { background: rgba(74, 144, 217, 0.12); border-color: rgba(74, 144, 217, 0.6); color: #5a9ad9; }

.funnel-count {
    font-family: var(--font-mono);
    font-weight: 600;
    opacity: 0.65;
    color: inherit;
}

/* Legacy: the arrow-based funnel had `→` separators between stages. The V1
   pill layout drops them entirely; hide rather than remove so older
   templates / mid-deploy renders don't break. */
.funnel-arrow { display: none; }

/* Layout for the patent toolbar. The verdict chips wrap if the pane is
   below ~360px; the rel row stays a single line because it has fewer chips. */
.patent-funnel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 0;
}

/* Wrapper that keeps a verdict chip and its (optional, count > 0) ✓
   bulk-select button on the same line. The select button is hidden by
   default (.hidden via applyFilterCounts) and shows when the chip's
   count > 0 — clicks bypass the chip's setFunnelFilter to call
   selectFunnelGroup directly. Lives outside the chip because nested
   <button> elements are invalid HTML. */
.funnel-stage-pair {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.patent-rel-chips {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
}
.rel-chips-label {
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    color: var(--text-dim);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-right: 2px;
}

.funnel-select-btn {
    margin-left: clamp(4px, 0.3vw, 6px);
    padding: 0 clamp(4px, 0.3vw, 6px);
    font-size: clamp(0.5625rem, 0.6vw, 0.6875rem);
    line-height: 1.4;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.funnel-select-btn:hover {
    background: rgba(88, 114, 168, 0.15);
    color: var(--status-info);
    border-color: var(--status-info);
}

/* --- Patent sort + assignee filter dropdowns --- */
.patent-sort,
.patent-assignee-filter {
    background: var(--bg-input);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: clamp(4px, 0.26vw, 5px) clamp(5px, 0.35vw, 7px);
    font-family: var(--font-sans);
    font-size: clamp(0.5625rem, 0.6vw, 0.75rem);
    cursor: pointer;
    flex-shrink: 0;
    max-width: 130px;
    transition: border-color var(--duration) var(--ease);
}

.patent-sort:focus,
.patent-assignee-filter:focus {
    outline: none;
    border-color: var(--accent);
}

.patent-sort option,
.patent-assignee-filter option {
    background: var(--bg-elevated);
    color: var(--text);
}

/* --- Batch categorize buttons --- */
.patent-batch-btn {
    font-family: var(--font-sans);
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
    font-weight: 500;
    padding: clamp(3px, 0.18vw, 5px) clamp(9px, 0.6vw, 12px);
    border-radius: 3px;
    cursor: pointer;
    border: 1px solid;
    transition: background 0.15s, border-color 0.15s;
}

.patent-batch-btn:not(.batch-keep):not(.batch-reject):not(.batch-delete) {
    background: rgba(140, 140, 140, 0.12);
    border-color: rgba(140, 140, 140, 0.3);
    color: #8c8c8c;
}

.patent-batch-btn:not(.batch-keep):not(.batch-reject):not(.batch-delete):hover {
    background: rgba(140, 140, 140, 0.2);
    border-color: #8c8c8c;
}

.batch-keep {
    background: rgba(90, 154, 84, 0.12);
    border-color: rgba(90, 154, 84, 0.3);
    color: #5a9a54;
}

.batch-keep:hover {
    background: rgba(90, 154, 84, 0.2);
    border-color: #5a9a54;
}

.batch-reject {
    background: rgba(199, 84, 80, 0.12);
    border-color: rgba(199, 84, 80, 0.3);
    color: #c75450;
}

.batch-reject:hover {
    background: rgba(199, 84, 80, 0.2);
    border-color: #c75450;
}

.batch-delete {
    background: rgba(199, 84, 80, 0.12);
    border-color: rgba(199, 84, 80, 0.3);
    color: #c75450;
}

.batch-delete:hover {
    background: rgba(199, 84, 80, 0.2);
    border-color: #c75450;
}

/* --- Patent refs in chat (clickable links) --- */
.patent-ref {
    color: var(--accent);
    cursor: pointer;
    border-bottom: 1px dashed rgba(200, 148, 62, 0.4);
    padding: 0 1px;
    border-radius: 1px;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.patent-ref:hover {
    color: var(--accent-hover);
    background: rgba(200, 148, 62, 0.1);
    border-bottom-color: var(--accent-hover);
}

@keyframes patent-pulse {
    0%   { background: rgba(200, 148, 62, 0.12); }
    25%  { background: rgba(200, 148, 62, 0.28); }
    50%  { background: rgba(200, 148, 62, 0.12); }
    75%  { background: rgba(200, 148, 62, 0.22); }
    100% { background: rgba(200, 148, 62, 0.12); }
}

/* --- Bulk action bar on messages --- */
.patent-msg-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.patent-action-btn {
    background: rgba(200, 148, 62, 0.08);
    border: 1px solid rgba(200, 148, 62, 0.2);
    color: var(--accent);
    font-family: var(--font-sans);
    font-size: clamp(0.5625rem, 0.61vw, 0.6875rem);
    font-weight: 500;
    padding: clamp(3px, 0.18vw, 4px) clamp(9px, 0.6vw, 12px);
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.patent-action-btn:hover {
    background: rgba(200, 148, 62, 0.15);
    border-color: var(--accent);
}


/* ================================================
   PREVIEW WINDOWS (floating, OS-style)
   ================================================ */

#preview-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 100;
}

/* ================================================
   COMPARISON MODE
   ================================================ */

.compare-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.compare-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-surface);
    flex-shrink: 0;
}

.compare-title {
    font-family: var(--font-sans);
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.compare-exit {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: clamp(0.5625rem, 0.61vw, 0.6875rem);
    padding: clamp(4px, 0.26vw, 5px) clamp(11px, 0.74vw, 14px);
    border-radius: 3px;
    cursor: pointer;
    transition: color var(--duration), background var(--duration);
}

.compare-exit:hover {
    color: var(--text);
    background: var(--bg-hover);
}

.translate-dropdown {
    position: relative;
}

.translate-submenu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 0;
    min-width: 120px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    z-index: 200;

    & button {
        display: block;
        width: 100%;
        padding: clamp(5px, 0.35vw, 7px) clamp(11px, 0.74vw, 14px);
        border: none;
        background: none;
        color: var(--text);
        font-family: var(--font-sans);
        font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
        text-align: left;
        cursor: pointer;
        white-space: nowrap;

        &:hover {
            background: var(--bg-hover);
        }
    }
}

.compare-panels {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
}

.compare-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-right: 1px solid var(--border);
}

.compare-panel:last-child {
    border-right: none;
}

.compare-panel-head {
    padding: clamp(7px, 0.48vw, 10px) clamp(13px, 0.87vw, 18px);
    font-family: var(--font-mono);
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
    font-weight: 500;
    color: var(--accent);
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.compare-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    min-height: 0;
}

/* Compare panels render the body HTML from lamp-preview._buildBodyHtml(),
   which normally lives inside the preview's Shadow DOM where the button /
   label / actions styles are scoped. The compare view places the same
   HTML outside the shadow, so these rules re-declare what the preview
   shadow provides — enough to make Translate / Copy render as styled
   icon-buttons instead of default OS chrome. */
.compare-panel-body .preview-section-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    margin-top: 6px;
}

.compare-panel-body .preview-section-translate-wrap { position: relative; }

.compare-panel-body .preview-section-btn {
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: none;
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: clamp(0.5625rem, 0.6vw, 0.75rem);
    cursor: pointer;
    transition: background var(--duration), color var(--duration);
}
.compare-panel-body .preview-section-btn:hover { background: var(--bg-hover); color: var(--text); }
.compare-panel-body .preview-section-btn:disabled { opacity: 0.5; cursor: default; }
.compare-panel-body .preview-section-btn .submenu-arrow {
    font-size: clamp(0.875rem, 0.96vw, 1.125rem);
    margin-left: 4px;
}

.compare-panel-body .preview-lang-picker {
    position: absolute;
    bottom: calc(100% + 4px);
    right: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 0;
    z-index: 100;
    min-width: 120px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.compare-panel-body .preview-lang-picker button {
    display: block;
    width: 100%;
    padding: 4px 12px;
    border: none;
    background: none;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
    text-align: left;
    cursor: pointer;
}
.compare-panel-body .preview-lang-picker button:hover { background: var(--bg-hover); }

/* In compare mode, chat pane fills all available space */
.workspace.has-compare .pane-chat {
    flex-basis: 100%;
}

.workspace.has-compare .pane-chat .pane-inner {
    max-width: none;
}


/* ================================================
   LOG PANEL (bottom)
   ================================================ */

.pane-log {
    flex: 0 0 0px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    border-top: 1px solid transparent;
    opacity: 0;
    background: var(--bg-surface);
    transition:
        flex-basis var(--duration) var(--ease),
        opacity 0.2s ease,
        border-color var(--duration) var(--ease);
}

.shell.has-log .pane-log {
    flex: 0 1 var(--log-height);
    opacity: 1;
    border-top-color: var(--border);
}

.pane-log .pane-inner {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.log-scroll {
    padding: clamp(9px, 0.6vw, 12px) clamp(13px, 0.87vw, 18px);
    font-family: var(--font-mono);
    font-size: clamp(0.5625rem, 0.61vw, 0.6875rem);
    line-height: 1.6;
    color: var(--text-muted);
}

.log-placeholder {
    color: var(--text-dim);
    font-style: italic;
}

#log-list:has(.log-think, .log-entry) .log-placeholder {
    display: none;
}

.log-entry {
    white-space: pre-wrap;
    word-break: break-word;
}

.log-think {
    color: var(--text-dim);
    font-style: italic;
    white-space: pre-wrap;
    word-break: break-word;
}



/* ================================================
   DISCLAIMER
   ================================================ */

.disclaimer-banner {
    padding: 10px 16px;
    margin: 0 0 16px 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    font-size: clamp(0.5625rem, 0.6vw, 0.75rem);
    color: var(--text-muted);
    line-height: 1.5;
}

.legal-disclaimer {
    text-align: center;
    font-size: clamp(0.5625rem, 0.6vw, 0.75rem);
    color: var(--text-dim);
    margin-top: 8px;
}

.landing-footer {
    padding: 24px 16px 36px;
    border-top: 1px solid var(--border);
    background: var(--bg-base);
}

.landing-footer-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    font-size: clamp(0.6875rem, 0.78vw, 0.8125rem);
    font-family: var(--font-mono);
}

.landing-footer-nav a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--duration) var(--ease);
}

.landing-footer-nav a:hover,
.landing-footer-nav a:focus-visible {
    color: var(--text);
}

.landing-footer-nav a + a {
    border-left: 1px solid var(--border);
    padding-left: 24px;
}





/* ================================================
   NOVELTY ANALYSIS MODE
   ================================================ */

/* Analysis view */
.analysis-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
}

.analysis-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-surface);
    flex-shrink: 0;
}

/* Heartbeat line under the already-rendered sections — shows "Generating
   section… (N chars)" while a slow section is still streaming. Removed on
   `done`. Muted so it doesn't compete with real section text. */
.analysis-progress {
    padding: 10px 20px;
    color: var(--text-muted);
    font-family: var(--font-mono, monospace);
    font-size: 0.8125rem;
    font-style: italic;
    opacity: 0.85;
}

.analysis-section {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

/* ─── Analysis content (.ac-*) — server-rendered from per-section
   schema payloads in apps/worker/templates/sections/. The LLM no
   longer emits raw HTML; these rules style what the Handlebars
   templates produce. Class selectors only — no inline styles. ─── */

.ac-section { color: var(--text); }

/* Degraded-section banner — prepended above an analysis section when
 * the deterministic verifier returned Fail on every retry attempt. We
 * still publish the section (the model did the work; refunding would
 * be wrong), but the user must know the content is suspect. Issue
 * codes ride on `data-issues` for future programmatic handling. */
.ac-section-degraded {
    margin: 0 0 12px;
    padding: 10px 14px;
    border: 1px solid var(--triage-reject);
    border-left: 3px solid var(--triage-reject);
    background: rgba(199, 84, 80, 0.08);
    color: var(--text);
    border-radius: 4px;
}

.ac-section-degraded strong {
    color: var(--triage-reject);
}

.ac-section-degraded-issues {
    margin: 6px 0 0 18px;
    padding: 0;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.ac-heading {
    color: var(--text);
    margin: 0 0 8px;
}
.ac-heading-h2 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.ac-heading-h3 {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin: 16px 0 8px;
}

.ac-paragraph {
    color: var(--text);
    line-height: 1.55;
    margin: 0 0 10px;
}
.ac-paragraph-note {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.75rem;
}

.ac-bullet-list,
.ac-ordered-list {
    color: var(--text);
    padding-left: 22px;
    margin: 8px 0;
}
.ac-list-item { margin: 4px 0; }
.ac-gap-list {
    list-style: none;
    padding: 0;
    margin: 8px 0;
}
.ac-gap {
    display: block;
    padding: 8px 12px;
    margin: 6px 0;
    border-left: 3px solid var(--border);
    background: var(--surface-elevated);
    border-radius: 4px;
}
.ac-gap-minor { border-left-color: var(--text-muted, var(--border)); }
.ac-gap-blocking { border-left-color: var(--status-warning, #d97706); }
.ac-gap-element {
    display: block;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}
.ac-gap-action {
    display: block;
    font-size: 0.8125rem;
    color: var(--text-muted, var(--text));
}
.ac-cell-list {
    list-style: disc;
    padding-left: 18px;
    margin: 0;
}
.ac-query-list { font-size: 0.75rem; }

.ac-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 0.75rem;
}
.ac-table th,
.ac-table td {
    padding: 8px 10px;
    border: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
    color: var(--text);
}
.ac-table thead th,
.ac-table th {
    background: var(--bg-elevated);
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.6875rem;
}
.ac-table tbody tr:nth-child(odd) td {
    background: var(--bg-surface);
}
.ac-table-cell-strong { font-weight: 600; color: var(--text); }
.ac-cell-muted { color: var(--text-dim); }

.ac-classification-list {
    list-style: none;
    padding-left: 0;
    margin: 8px 0;
    display: grid;
    gap: 4px;
}
.ac-classification-code {
    display: flex;
    gap: 8px;
    align-items: baseline;
    padding: 4px 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 4px;
}
.ac-classification-code-id {
    font-family: ui-monospace, SFMono-Regular, monospace;
    color: var(--accent);
    font-size: 0.6875rem;
    flex-shrink: 0;
}
.ac-classification-code-desc {
    color: var(--text);
    font-size: 0.75rem;
}

.ac-patent-ref {
    font-family: ui-monospace, SFMono-Regular, monospace;
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px dotted var(--accent);
    font-size: 0.75rem;
}
.ac-patent-ref:hover {
    color: var(--accent-hover);
    border-bottom-color: var(--accent-hover);
}
.ac-patent-ref-excerpt {
    color: var(--text-muted);
    font-style: italic;
}

.ac-category-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    background: var(--bg-elevated);
    color: var(--text);
    border: 1px solid var(--border);
}
.ac-category-X { color: var(--error); border-color: var(--error); }
.ac-category-Y { color: var(--accent); border-color: var(--accent); }
.ac-category-A { color: var(--text-muted); }
.ac-category-D { color: var(--status-info); border-color: var(--status-info); }
.ac-category-P { color: var(--msg-user-bar); border-color: var(--msg-user-bar); }
.ac-category-E { color: var(--msg-ai-bar); border-color: var(--msg-ai-bar); }

.ac-status-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--bg-elevated);
    color: var(--text);
    border: 1px solid var(--border);
}
.ac-status-novel,
.ac-status-inventive,
.ac-status-patentable {
    color: var(--msg-user-bar);
    border-color: var(--msg-user-bar);
}
.ac-status-anticipated,
.ac-status-lacks_novelty,
.ac-status-obvious,
.ac-status-not_patentable {
    color: var(--error);
    border-color: var(--error);
}
.ac-status-borderline,
.ac-status-amend {
    color: var(--accent);
    border-color: var(--accent);
}

.ac-claim-tree {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 12px;
    margin: 8px 0;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.75rem;
    overflow-x: auto;
}
.ac-claim-tree-patent { margin-bottom: 8px; }
.ac-claim-tree-patent:last-child { margin-bottom: 0; }
.ac-claim-tree-patent-id {
    color: var(--accent);
    font-weight: 600;
}
.ac-claim-tree-list {
    margin: 4px 0 0;
    padding-left: 16px;
    list-style: none;
}

.ac-inline-strong { font-weight: 600; color: var(--text); }
.ac-inline-em { font-style: italic; color: var(--text-muted); }
.ac-inline-code,
.ac-inline-patent-ref {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.92em;
}
.ac-inline-code {
    background: var(--bg-elevated);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0 4px;
}
/* Inline patent refs (rendered inside RichText prose) match the
 * standalone .ac-patent-ref styling: accent color, dotted underline,
 * no default-browser blue. */
.ac-inline-patent-ref {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px dotted var(--accent);
}
.ac-inline-patent-ref:hover {
    color: var(--accent-hover);
    border-bottom-color: var(--accent-hover);
}

.analysis-section-title {
    font-size: clamp(0.5625rem, 0.6vw, 0.75rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.analysis-invention {
    background: var(--bg-elevated);
    border-left: 3px solid var(--accent);
    padding: 12px 16px;
    font-family: var(--font-mono);
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
    color: var(--text);
    line-height: 1.6;
    border-radius: 0 4px 4px 0;
}

/* Difference matrix table */
.analysis-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
}

.analysis-matrix th {
    font-weight: 500;
    text-align: left;
    padding: 8px 12px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: clamp(0.5625rem, 0.6vw, 0.75rem);
    position: sticky;
    top: 0;
}

.analysis-matrix td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
}

.analysis-matrix tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.02);
}

.analysis-matrix .matrix-check {
    color: #5a9a54;
    font-weight: bold;
    text-align: center;
}

.analysis-matrix .matrix-empty {
    color: var(--text-dim);
    text-align: center;
}

.analysis-matrix .analogue-id {
    font-family: var(--font-mono);
    color: var(--accent);
    font-size: clamp(0.5625rem, 0.6vw, 0.75rem);
    white-space: nowrap;
}

.analysis-matrix .diff-header {
    font-size: clamp(0.5625rem, 0.6vw, 0.75rem);
    max-width: 120px;
}

/* Formula recommendation */
.analysis-formula {
    background: rgba(90, 154, 84, 0.08);
    border: 1px solid rgba(90, 154, 84, 0.2);
    border-radius: 6px;
    padding: 14px 18px;
}

.analysis-formula-title {
    color: #5a9a54;
    font-weight: 600;
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
    margin-bottom: 6px;
}

.analysis-formula-text {
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
    color: var(--text);
    line-height: 1.5;
}

.analysis-formula-diff {
    display: inline-block;
    background: rgba(90, 154, 84, 0.15);
    padding: 2px 8px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: clamp(0.5625rem, 0.6vw, 0.75rem);
    margin: 2px;
}

/* Technical result */
.analysis-tech-result {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 14px 18px;
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
    line-height: 1.6;
    color: var(--text);
}

/* Inventive step checklist */
.analysis-check-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
    color: var(--text);
}

.analysis-check-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.5625rem, 0.6vw, 0.75rem);
}

.analysis-check-pass {
    background: rgba(90, 154, 84, 0.2);
    color: #5a9a54;
}

.analysis-check-fail {
    background: rgba(199, 84, 80, 0.2);
    color: #c75450;
}

/* Analyze button in selection bar — amber/warm tint to distinguish from Compare */
/* --- Analyze dropdown --- */
.analyze-dropdown-wrap {
    position: relative;
}

.patent-analyze-trigger {
    background: rgba(218, 165, 78, 0.15);
    border: 1px solid rgba(218, 165, 78, 0.35);
    color: var(--accent-hover);
    font-family: var(--font-sans);
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
    font-weight: 500;
    padding: clamp(3px, 0.18vw, 5px) clamp(9px, 0.6vw, 12px);
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.patent-analyze-trigger:hover {
    background: rgba(218, 165, 78, 0.25);
    border-color: var(--accent-hover);
}

.analyze-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 20;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 0;
    min-width: clamp(140px, 10vw, 180px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.analyze-dropdown-item {
    display: block;
    width: 100%;
    padding: clamp(5px, 0.35vw, 9px) clamp(11px, 0.74vw, 14px);
    border: none;
    background: none;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
    text-align: left;
    cursor: pointer;
    transition: background var(--duration);

    &:hover {
        background: var(--bg-hover);
    }
}


/* In analysis mode, chat pane fills all available space */
.workspace.has-analysis .pane-chat {
    flex-basis: 100%;
}

/* …unless the sessions panel is also open. has-analysis's flex-basis:100%
   fights .has-sessions's pane-sessions for the row, leaving pane-chat
   wider than its visible space and intercepting pointer events on
   .session-report-entry clicks inside pane-sessions. `flex-basis: auto`
   lets flexbox distribute the remaining width after pane-sessions
   takes its fixed allotment. */
.workspace.has-analysis.has-sessions .pane-chat {
    flex-basis: auto;
}

.workspace.has-analysis .pane-chat .pane-inner {
    max-width: none;
}

/* Claim chart */
.claim-element { font-family: var(--font-mono); font-size: clamp(0.6875rem, 0.74vw, 0.875rem); color: var(--text); line-height: 1.5; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.claim-mapping { padding: 10px 12px; font-size: clamp(0.6875rem, 0.74vw, 0.875rem); line-height: 1.5; border-bottom: 1px solid var(--border); }
.claim-match { color: #5a9a54; }
.claim-partial { color: #b8942a; }
.claim-nomatch { color: var(--text-dim); }
.claim-coverage { font-family: var(--font-mono); font-size: clamp(0.6875rem, 0.74vw, 0.875rem); color: var(--accent); font-weight: 500; }

/* FTO risk badges */
.risk-badge { display: inline-block; padding: 2px 10px; border-radius: 3px; font-size: clamp(0.5625rem, 0.6vw, 0.75rem); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.risk-high { background: rgba(199,84,80,0.15); color: #c75450; border: 1px solid rgba(199,84,80,0.3); }
.risk-medium { background: rgba(184,148,42,0.15); color: #b8942a; border: 1px solid rgba(184,148,42,0.3); }
.risk-low { background: rgba(90,154,84,0.15); color: #5a9a54; border: 1px solid rgba(90,154,84,0.3); }
.risk-group { margin-bottom: 16px; }
.risk-group-title { font-size: clamp(0.6875rem, 0.74vw, 0.875rem); font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.risk-patent { padding: 8px 12px; background: var(--bg-elevated); border-radius: 4px; margin-bottom: 6px; font-size: clamp(0.6875rem, 0.74vw, 0.875rem); }
.risk-patent-id { font-family: var(--font-mono); color: var(--accent); font-size: clamp(0.5625rem, 0.6vw, 0.75rem); }
.risk-patent-title { color: var(--text-muted); font-size: clamp(0.5625rem, 0.6vw, 0.75rem); }
.risk-claims { font-size: clamp(0.5625rem, 0.6vw, 0.75rem); color: var(--text-dim); margin-top: 4px; }
.risk-summary { font-size: clamp(0.6875rem, 0.74vw, 0.875rem); color: var(--text); padding: 10px 14px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 6px; }

/* EPO document relevance category badges */
.epo-cat { display: inline-flex; align-items: center; justify-content: center; min-width: clamp(18px, 1.2vw, 24px); height: clamp(18px, 1.2vw, 24px); padding: 0 4px; border-radius: 3px; font-size: clamp(0.5625rem, 0.6vw, 0.75rem); font-weight: 700; font-family: var(--font-mono); letter-spacing: 0.5px; }
.epo-cat-x { background: rgba(199,84,80,0.15); color: #c75450; border: 1px solid rgba(199,84,80,0.3); }
.epo-cat-y { background: rgba(184,148,42,0.15); color: #b8942a; border: 1px solid rgba(184,148,42,0.3); }
.epo-cat-a { background: rgba(90,154,84,0.15); color: #5a9a54; border: 1px solid rgba(90,154,84,0.3); }
.epo-cat-d { background: rgba(128,128,128,0.15); color: #888; border: 1px solid rgba(128,128,128,0.3); }
.epo-cat-p { background: rgba(138,100,180,0.15); color: #9a78b8; border: 1px solid rgba(138,100,180,0.3); }
.epo-cat-e { background: rgba(200,130,60,0.15); color: #c8823c; border: 1px solid rgba(200,130,60,0.3); }

/* Invalidity */
.invalidity-claim { margin-bottom: 14px; }
.invalidity-claim-header { font-family: var(--font-mono); font-size: clamp(0.6875rem, 0.74vw, 0.875rem); color: var(--text); font-weight: 500; margin-bottom: 6px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.invalidity-entry { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0 4px 16px; font-size: clamp(0.6875rem, 0.74vw, 0.875rem); }
.anticipation-full { color: #5a9a54; }
.anticipation-partial { color: #b8942a; }
.anticipation-none { color: var(--text-dim); }

/* Landscape */
.landscape-bar-container { margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.landscape-bar-label { font-size: clamp(0.5625rem, 0.6vw, 0.75rem); color: var(--text); min-width: 100px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.landscape-bar { height: 16px; background: var(--accent); border-radius: 2px; transition: width 0.3s ease; min-width: 2px; }
.landscape-bar-count { font-family: var(--font-mono); font-size: clamp(0.5625rem, 0.6vw, 0.75rem); color: var(--text-muted); min-width: 20px; }
.landscape-cluster { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: clamp(0.6875rem, 0.74vw, 0.875rem); }
.landscape-cluster-code { font-family: var(--font-mono); color: var(--accent); font-size: clamp(0.5625rem, 0.6vw, 0.75rem); font-weight: 500; min-width: 40px; }
.landscape-cluster-count { font-family: var(--font-mono); font-size: clamp(0.5625rem, 0.6vw, 0.75rem); color: var(--text-muted); }
.landscape-trends { font-size: clamp(0.6875rem, 0.74vw, 0.875rem); line-height: 1.6; color: var(--text); padding: 12px 16px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 6px; }



.usage-dropdown-credits {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    margin-top: 4px;
    font-size: clamp(0.5625rem, 0.61vw, 0.6875rem);
    color: var(--text-muted);
}

.usage-dropdown-credits-value {
    font-family: var(--font-mono);
    font-size: clamp(0.75rem, 0.83vw, 1rem);
    font-weight: 600;
    color: var(--text);
}

.usage-dropdown-buy {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 6px 0;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-family: var(--font-sans);
    font-size: clamp(0.5625rem, 0.61vw, 0.6875rem);
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: background var(--duration);
}

.usage-dropdown-buy:hover {
    background: var(--accent-hover);
}

/* Credit pack radio rows in buy modal */
.credit-pack {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: border-color var(--duration), background var(--duration);
}

.credit-pack:hover {
    border-color: var(--border-focus);
    background: var(--bg-hover);
}

.credit-pack.credit-pack-selected {
    border-color: var(--accent);
    background: rgba(200, 148, 62, 0.06);
}

.credit-pack input[type="radio"] {
    accent-color: var(--accent);
    margin: 0;
}

.credit-pack-info {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.credit-pack-label {
    font-size: clamp(0.75rem, 0.83vw, 1rem);
    font-weight: 500;
    color: var(--text);
}

.credit-pack-price {
    font-family: var(--font-mono);
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
    color: var(--text-muted);
}

/* Buy modal payment actions */
.buy-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.buy-payment-buttons {
    display: flex;
    gap: 8px;
}

.buy-payment-buttons .modal-btn {
    flex: 1;
}

.buy-btn-stripe {
    background: #635bff;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--duration);
}

.buy-btn-stripe:hover {
    background: #4f46e5;
}

.modal-btn-paypal {
    background: #0070ba;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--duration);
}

.modal-btn-paypal:hover {
    background: #005ea6;
}




/* Analysis confirmation in modal */
.modal-cost {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0 10px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
}

.modal-cost-label {
    font-family: var(--font-sans);
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}

.cost-calc {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    font-family: var(--font-mono);
}

.cost-line {
    font-size: clamp(0.8125rem, 0.9vw, 1rem);
    font-weight: 500;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.2px;
    line-height: 1.25;
}

.cost-op {
    font-size: clamp(0.6875rem, 0.75vw, 0.8125rem);
    color: var(--text-dim);
    line-height: 1;
    margin: 0;
}

.cost-line.cost-total {
    margin-top: 3px;
    padding: 4px clamp(20px, 3vw, 44px) 0;
    border-top: 1px solid var(--border);
    color: var(--accent);
    font-size: clamp(1rem, 1.15vw, 1.3125rem);
    font-weight: 500;
    min-width: clamp(60px, 10vw, 120px);
    text-align: center;
    line-height: 1.2;
}

.modal-balance {
    font-size: clamp(0.5625rem, 0.61vw, 0.6875rem);
    color: var(--text-dim);
    text-align: right;
    margin-top: -4px;
    margin-bottom: 10px;
}

/* Subject-brief intake checklist inside the analysis-modal. Hidden
   when all prereqs are met; visible with the missing-items list when
   not. → docs/adr/subject-brief-intake.md.
   Each item gets a small `--triage-reject`-coloured vertical bar
   marker so the modal's list visually echoes the `.prereqs-strip`
   bars in the compose toolbar — same 5 items, same red "missing"
   vocabulary, just displayed as text here vs visual bars there. */
.modal-prereqs {
    margin-top: 2px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    text-align: left;
    margin-bottom: 14px;
}
.modal-prereqs-label {
    font-family: var(--font-sans);
    font-size: clamp(11px, 0.74vw, 14px);
    color: var(--text-muted);
    line-height: 1.45;
    margin-bottom: 8px;
}
.modal-prereqs-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.modal-prereqs-item {
    position: relative;
    padding-left: 12px;
    color: var(--text-muted);
    font-size: clamp(11px, 0.74vw, 13px);
    line-height: 1.4;
}
.modal-prereqs-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.3em;
    width: 3px;
    height: 0.95em;
    background: var(--triage-reject);
    opacity: 0.7;
    border-radius: 1px;
}

/* Accent confirm button (for buy/analysis, not destructive) */
.modal-btn-accent {
    background: var(--accent);
    color: #fff;

    &:hover {
        background: var(--accent-hover);
    }
}

/* ─── Background-jobs tray (issue #14) ────────────────────────────────── */

.topbar-jobs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    margin-right: 8px;
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: clamp(0.625rem, 0.7vw, 0.75rem);
    position: relative;
}

.topbar-jobs:hover {
    background: var(--bg-elevated);
    border-color: var(--accent);
}

.topbar-jobs svg {
    flex: 0 0 auto;
}

.topbar-jobs-unread {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--status-info, #5872a8);
    position: absolute;
    top: 2px;
    right: 2px;
}

.jobs-dropdown {
    position: fixed;
    inset: auto;
    margin: 0;
    padding: 0;
    min-width: 320px;
    max-width: 420px;
    max-height: 400px;
    overflow-y: auto;
    background: var(--bg-elevated);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 999;
    font-family: var(--font-sans);
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
}

.jobs-dropdown-header {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: clamp(0.5625rem, 0.6vw, 0.6875rem);
}

.jobs-dropdown-empty {
    padding: 16px 14px;
    color: var(--text-dim);
    text-align: center;
}

.job-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}

.job-row:last-child {
    border-bottom: none;
}

.job-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

.job-row-main {
    flex: 1 1 auto;
    min-width: 0;
}

.job-row-title {
    color: var(--text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.job-row-meta {
    color: var(--text-muted);
    font-size: clamp(0.625rem, 0.68vw, 0.75rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.job-row-progress {
    display: flex;
    gap: 3px;
    margin: 4px 0 2px;
}

.progress-square {
    display: inline-block;
    width: clamp(8px, 0.55vw, 10px);
    height: clamp(8px, 0.55vw, 10px);
    border: 1px solid var(--border);
    border-radius: 2px;
    background: transparent;
    transition: background 0.2s, border-color 0.2s;
}

.progress-square.filled {
    background: #5a9a54;
    border-color: #5a9a54;
}

.job-row-eta {
    color: var(--text-muted);
    font-size: clamp(0.625rem, 0.63vw, 0.6875rem);
    font-style: italic;
}

.job-row-patents {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: clamp(0.5625rem, 0.6vw, 0.6875rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─── Queries panel (issue 10c) ───────────────────────────────────────── */

.topbar-queries {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    margin-right: 8px;
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: clamp(0.625rem, 0.7vw, 0.75rem);
}

.topbar-queries:hover {
    background: var(--bg-elevated);
    border-color: var(--accent);
}

.topbar-queries svg {
    flex: 0 0 auto;
}

/* Wiki topbar button — link, not popover-trigger; navigates to the
 * session's /wiki/sessions/{id}/view page. Only rendered when the user
 * has the `wiki` feature granted (template gate via `has_wiki_feature`). */
.topbar-wiki {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    margin-right: 8px;
    color: var(--text);
    text-decoration: none;
    border: 1px solid var(--border);
    border-radius: 4px;
}

.topbar-wiki:hover {
    background: var(--bg-elevated);
    border-color: var(--accent);
    color: var(--accent);
}

.topbar-wiki svg {
    flex: 0 0 auto;
}

.queries-dropdown {
    position: fixed;
    inset: auto;
    margin: 0;
    padding: 0;
    min-width: 360px;
    max-width: 520px;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--bg-elevated);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 999;
    font-family: var(--font-sans);
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
}

.queries-dropdown-header {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: clamp(0.5625rem, 0.6vw, 0.6875rem);
    position: sticky;
    top: 0;
    background: var(--bg-elevated);
}

.queries-dropdown-empty {
    padding: 16px 14px;
    color: var(--text-dim);
    text-align: center;
}

.queries-row {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.queries-row-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.queries-row-label {
    flex: 1 1 auto;
    color: var(--text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.queries-row-badge {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.6875rem;
}

.queries-row-badge.ok {
    background: rgba(90, 154, 84, 0.18);
    color: #5a9a54;
}

.queries-row-badge.err {
    background: rgba(199, 84, 80, 0.18);
    color: #c75450;
}

.queries-row-cql {
    margin: 0;
    padding: 8px 10px;
    font-family: var(--font-mono);
    font-size: clamp(0.625rem, 0.65vw, 0.75rem);
    color: var(--text-muted);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 140px;
    overflow-y: auto;
}

.queries-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.queries-meta-results {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: clamp(0.5625rem, 0.6vw, 0.6875rem);
    margin-right: 6px;
}

/* Failed-query reason. Shown inline under the CQL block when the row's
   ✗ badge fires (CQL pre-flight error or EPO HTTP error). Keeps the
   row from looking blank — the screenshot in Issue 17 had a red ✗ with
   nothing else, and the user thought the panel was broken. */
.queries-meta-error {
    color: var(--error, #c75450);
    font-family: var(--font-mono);
    font-size: clamp(0.5625rem, 0.6vw, 0.6875rem);
    margin-right: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.queries-meta-chip {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 6px;
    font-family: var(--font-mono);
    font-size: clamp(0.5625rem, 0.6vw, 0.6875rem);
    color: var(--text-muted);
}

.queries-row-copy {
    align-self: flex-end;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text-muted);
    font-size: clamp(0.5625rem, 0.6vw, 0.6875rem);
    padding: 2px 8px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.queries-row-copy:hover {
    background: var(--bg-hover);
    color: var(--text);
}

/* Stop-mode swap for the chat send button. The existing paper-plane SVG
   is hidden and a CSS-drawn square stop glyph is overlaid via ::before.
   Color shifts to a muted red so it reads as a destructive action. */
.chat-send.stop-mode {
    background: rgba(199, 84, 80, 0.14);
    border-color: rgba(199, 84, 80, 0.35);
    position: relative;
}

.chat-send.stop-mode svg {
    visibility: hidden;
}

.chat-send.stop-mode::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(9px, 0.6vw, 11px);
    height: clamp(9px, 0.6vw, 11px);
    background: #c75450;
    border-radius: 1px;
    transform: translate(-50%, -50%);
}

.job-row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.job-row-actions .job-open,
.job-row-actions .job-cancel {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px 8px;
    font-family: var(--font-mono);
    font-size: clamp(0.5625rem, 0.6vw, 0.6875rem);
    cursor: pointer;
    text-decoration: none;
}

.job-row-actions .job-open:hover {
    border-color: var(--status-info, #5872a8);
    color: var(--text);
}

.job-row-actions .job-cancel:hover {
    border-color: var(--status-error, #a04040);
    color: var(--text);
}

/* ================================================================
   Kanban takeover (V2)
   ================================================================
   The shell takes over the chat pane; the right-side patents pane is
   redundant when the kanban shows the same data laid out as columns,
   so workspace.has-kanban hides it. Column tones match the verdict
   palette (--triage-keep / --triage-maybe / --triage-reject).               */

.workspace.has-kanban .pane-files,
.workspace.has-kanban .panel-patents,
.workspace.has-kanban #pane-files {
    /* Same hide pattern panel-system uses for has-compare/has-analysis:
       collapse to zero flex with opacity 0 so resize handles stop firing. */
    flex: 0 0 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

.workspace.has-kanban .compose-disclaimer,
.workspace.has-kanban .chat-compose,
.workspace.has-kanban #rag-badge {
    display: none;
}

.kanban-shell {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-base);
}

.kanban-header {
    height: 44px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.kanban-title {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.3px;
}

.kanban-counts {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-muted);
}
.kanban-count-arrow { color: var(--text-dim); }
.kanban-count-pill { display: inline-flex; align-items: center; gap: 4px; }
.kanban-count-pill-inbox  span:first-child { color: var(--triage-maybe); }
.kanban-count-pill-keep   span:first-child { color: var(--triage-keep); }
.kanban-count-pill-maybe  span:first-child { color: var(--triage-maybe); }
.kanban-count-pill-reject span:first-child { color: var(--triage-reject); }

.kanban-back-btn {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 4px 10px;
    border-radius: 3px;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    cursor: pointer;
    transition: background var(--duration), color var(--duration);
}
.kanban-back-btn:hover { background: var(--bg-hover); color: var(--text); }

.kanban-columns {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
}

.kanban-column {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--border);
    background: var(--bg-base);
}
.kanban-column:last-child { border-right: none; }

.kanban-column-head {
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.kanban-column-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.kanban-column-dot-inbox  { background: var(--triage-maybe); opacity: 0.55; }
.kanban-column-dot-keep   { background: var(--triage-keep); }
.kanban-column-dot-maybe  { background: var(--triage-maybe); }
.kanban-column-dot-reject { background: var(--triage-reject); }

.kanban-column-title {
    flex: 1;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text);
}

.kanban-column-count {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-dim);
}

.kanban-column-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kanban-column-body.kanban-drop-target {
    background: rgba(200, 148, 62, 0.06);
    box-shadow: inset 0 0 0 2px rgba(200, 148, 62, 0.4);
}

/* Phase 2 keyboard: 1/2/3/4 focuses a column. Subtle accent rail on the
   column head so the user can see which column the next verdict (or
   row-level shortcut) targets. */
.kanban-column.kanban-column-focused .kanban-column-head {
    box-shadow: inset 0 -1px 0 var(--accent);
}

.k-card {
    padding: 10px 12px;
    border-radius: 3px;
    border-left: 3px solid var(--text-dim);
    background: rgba(200, 148, 62, 0.04);
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: grab;
    transition: transform 0.12s, box-shadow 0.12s, opacity 0.12s;
    user-select: none;
}
.k-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.k-card.k-card-dragging { opacity: 0.5; cursor: grabbing; }

/* Keyboard focus halo. j/k moves the focused card within a column;
   h/l hops columns. Focused card gets a subtle outline + slight pop
   so the user can see where the next Shift+K/M/R verdict will land. */
.k-card.k-card-focused {
    outline: 2px solid var(--status-info);
    outline-offset: -2px;
    box-shadow: 0 2px 10px rgba(88, 114, 168, 0.35);
}
.kanban-column.kanban-column-focused {
    box-shadow: inset 0 0 0 1px var(--status-info);
}

.kanban-column[data-bucket="keep"]   .k-card { border-left-color: var(--triage-keep);   background: rgba(90, 154, 84, 0.06); }
.kanban-column[data-bucket="maybe"]  .k-card { border-left-color: var(--triage-maybe);  background: rgba(200, 148, 62, 0.05); }
.kanban-column[data-bucket="reject"] .k-card { border-left-color: var(--triage-reject); background: rgba(199, 84, 80, 0.05); opacity: 0.85; }

.k-card-head {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.k-card-handle {
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    line-height: 1;
    user-select: none;
}
.k-card-id {
    flex: 1;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 0.6562rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.k-card-title {
    font-family: var(--font-sans);
    font-size: 0.7812rem;
    color: var(--text);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.k-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: 1px;
    min-width: 0;
}

.k-card-meta {
    flex: 1;
    min-width: 0;
    font-family: var(--font-sans);
    font-size: 0.6562rem;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.k-card-verdict-group {
    display: inline-flex;
    gap: 3px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity var(--duration);
}
.k-card:hover .k-card-verdict-group { opacity: 1; }

.k-card-verdict-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    cursor: pointer;
    line-height: 1;
    transition: border-color var(--duration), color var(--duration), background var(--duration);
}
.k-card-verdict-btn[data-verdict="keep"]:hover {
    border-color: rgba(90, 154, 84, 0.5);
    color: var(--triage-keep);
}
.k-card-verdict-btn[data-verdict="maybe"]:hover {
    border-color: rgba(200, 148, 62, 0.5);
    color: var(--triage-maybe);
}
.k-card-verdict-btn[data-verdict="reject"]:hover {
    border-color: rgba(199, 84, 80, 0.5);
    color: var(--triage-reject);
}

.k-card-undecide-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    padding: 2px 6px;
    border-radius: 3px;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color var(--duration), color var(--duration);
}
.k-card-undecide-btn:hover {
    border-color: var(--text-muted);
    color: var(--text-muted);
}

.kanban-footer {
    border-top: 1px solid var(--border);
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    color: var(--text-dim);
    flex-shrink: 0;
}
.kanban-kbd-hints kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    font-weight: 500;
    color: var(--text-muted);
    margin: 0 1px;
}
.kanban-hint-meta { margin-left: auto; }

/* Patents-toolbar Triage trigger button (in patents pane). */
.patent-triage-btn {
    background: rgba(200, 148, 62, 0.12);
    border: 1px solid rgba(200, 148, 62, 0.3);
    color: var(--accent);
    font-family: var(--font-sans);
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
    font-weight: 500;
    padding: clamp(3px, 0.18vw, 5px) clamp(9px, 0.6vw, 12px);
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.patent-triage-btn:hover {
    background: rgba(200, 148, 62, 0.2);
    border-color: var(--accent);
}
/* Selection-count badge inside the Triage button (Issue 13). Hidden
   when no selection; small accent pill when ≥1. */
.patent-triage-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
    border-radius: 8px;
    background: var(--status-info);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1;
}
.patent-triage-badge[hidden] { display: none; }

/* Slim contextual bar at the bottom of the patents pane — visible
   only when ≥1 patent is selected. Hosts the two list-view actions
   (Compare, Analyze). Bulk Keep/Reject/Delete/CSV live in the kanban
   toolbar. */
.patent-list-actions {
    display: flex;
    align-items: center;
    gap: clamp(5px, 0.35vw, 9px);
    padding: clamp(5px, 0.35vw, 8px) clamp(9px, 0.6vw, 12px);
    background: var(--bg-elevated);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    font-family: var(--font-sans);
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
}
.patent-list-actions[hidden] { display: none; }
.patent-list-actions-count { color: var(--accent); font-weight: 500; }
.patent-list-actions-spacer { flex: 1; }

/* Kanban toolbar — Issue 13. Sits between .kanban-header and
   .kanban-columns. Three sub-flex regions: REL chips left, action
   buttons middle/right, bulk-actions row (hidden until selection >0). */
.kanban-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 14px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-base);
    flex-shrink: 0;
}
.kanban-toolbar-rel {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.kanban-toolbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}
.kanban-toolbar-bulk {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding-top: 6px;
    border-top: 1px dashed var(--border);
    font-family: var(--font-sans);
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
}
.kanban-toolbar-bulk[hidden] { display: none; }
.kanban-toolbar-bulk #kanban-bulk-sel-count {
    color: var(--accent);
    font-weight: 500;
    margin-right: 4px;
}

/* ================================================================
   V4 Compare pinboard
   ================================================================
   Workspace.has-compare flips the chat pane into a 280px left-list +
   horizontally-scrolling pinboard layout. Patents pane (right side)
   is hidden — the left list inside the pinboard is the patent picker. */

.workspace.has-compare .pane-files,
.workspace.has-compare #pane-files {
    flex: 0 0 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

.compare-view.compare-pinboard {
    flex: 1;
    min-height: 0;
    display: flex;
    background: var(--bg-base);
}

.compare-list {
    width: 280px;
    flex-shrink: 0;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.compare-list-toolbar {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}
.compare-list-toolbar .patent-search {
    height: 26px;
}
.compare-list-chips {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
}
.compare-list-body {
    flex: 1;
    overflow: auto;
    padding: 4px 0;
}

.compare-list-row {
    display: grid;
    grid-template-columns: 8px 1fr auto auto;
    grid-template-rows: auto auto;
    column-gap: 6px;
    align-items: center;
    padding: 6px 10px;
    margin: 2px 6px;
    border-radius: 3px;
    border-left: 3px solid var(--text-dim);
    cursor: pointer;
    transition: background var(--duration);
}
.compare-list-row:hover { background: rgba(200, 148, 62, 0.06); }
.compare-list-row.compare-list-row-pinned {
    background: rgba(88, 114, 168, 0.08);
    border-left-color: var(--status-info);
}
.compare-list-row[data-category="keep"]   { border-left-color: var(--triage-keep); }
.compare-list-row[data-category="maybe"]  { border-left-color: var(--triage-maybe); }
.compare-list-row[data-category="reject"] { border-left-color: var(--triage-reject); opacity: 0.7; }
.compare-list-row .patent-verdict-dot { grid-column: 1; grid-row: 1; }
.compare-list-row .compare-list-id {
    grid-column: 2; grid-row: 1;
    font-family: var(--font-mono);
    font-size: 0.6562rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.compare-list-row .patent-relevance { grid-column: 3; grid-row: 1; }
.compare-list-row .compare-list-pin {
    grid-column: 4; grid-row: 1;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0 4px;
    line-height: 1;
    transition: color var(--duration);
}
.compare-list-row .compare-list-pin:hover { color: var(--accent); }
.compare-list-row.compare-list-row-pinned .compare-list-pin { color: var(--status-info); }
.compare-list-row .compare-list-pin-disabled {
    color: var(--text-dim) !important;
    cursor: not-allowed;
}
.compare-list-row .compare-list-title {
    grid-column: 2 / span 3; grid-row: 2;
    font-size: 0.7188rem;
    color: var(--text);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compare-pinboard-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.compare-pinboard-toolbar {
    height: 38px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.compare-pinboard-label {
    font-family: var(--font-sans);
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}
.compare-pinboard-count {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-dim);
}
.compare-toolbar-btn,
.compare-exit {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 4px 10px;
    border-radius: 3px;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    cursor: pointer;
    transition: background var(--duration), color var(--duration);
}
.compare-toolbar-btn:hover,
.compare-exit:hover { background: var(--bg-hover); color: var(--text); }

.compare-pinboard-columns {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: auto;
}

.compare-pinboard-col {
    width: 320px;
    flex-shrink: 0;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.compare-col-head {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: rgba(88, 114, 168, 0.04);
    flex-shrink: 0;
}
.compare-col-head-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.compare-col-pin-icon {
    color: var(--status-info);
    font-size: 0.625rem;
    line-height: 1;
}
.compare-col-id {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.compare-col-unpin {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 0.875rem;
    padding: 0;
    line-height: 1;
    transition: color var(--duration);
}
.compare-col-unpin:hover { color: var(--accent); }
.compare-col-title {
    font-family: var(--font-sans);
    font-size: 0.7812rem;
    color: var(--text);
    line-height: 1.35;
}
.compare-col-meta {
    font-family: var(--font-sans);
    font-size: 0.6562rem;
    color: var(--text-dim);
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.compare-col-country {
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    color: var(--text-dim);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 1px 4px;
    letter-spacing: 0.5px;
}

.compare-col-body {
    flex: 1;
    overflow: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.compare-col-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
}
.compare-col-section-label {
    font-family: var(--font-sans);
    font-size: 0.5625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dim);
}

/* Translate-actions chrome inside compare-pinboard columns. The floating
   popup ships its own shadow-DOM CSS for the same classes — these rules
   are the light-DOM equivalent so the buttons render correctly when the
   columns sit in the live document tree. */
.compare-col-section .preview-section-actions {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}
.compare-col-section .preview-section-translate-wrap {
    position: relative;
    display: inline-block;
}
.compare-col-section .preview-section-btn {
    font-family: var(--font-sans);
    font-size: 0.625rem;
    color: var(--text);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 2px 6px;
    cursor: pointer;
}
.compare-col-section .preview-section-btn:hover {
    background: var(--bg-hover, var(--bg-surface));
}
.compare-col-section .preview-section-btn .submenu-arrow {
    color: var(--text-dim);
    margin-left: 2px;
}
.compare-col-section .preview-lang-picker {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    z-index: 10;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    min-width: 80px;
}
.compare-col-section .preview-lang-picker button {
    font-family: var(--font-sans);
    font-size: 0.625rem;
    text-align: left;
    background: none;
    border: 0;
    color: var(--text);
    padding: 4px 8px;
    cursor: pointer;
}
.compare-col-section .preview-lang-picker button:hover {
    background: var(--bg-hover, var(--bg-surface));
}

.compare-col-fig {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.compare-col-fig-svg {
    width: 70%;
    height: 70%;
    display: block;
}

.compare-col-abstract {
    font-family: var(--font-sans);
    font-size: 0.7188rem;
    color: var(--text);
    line-height: 1.5;
}

.compare-col-claim {
    font-family: var(--font-mono);
    font-size: 0.6562rem;
    color: var(--text-muted);
    line-height: 1.55;
    padding: 8px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 3px;
    margin: 0;
    white-space: pre-wrap;
    overflow-x: auto;
}

.compare-col-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.compare-col-tag {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 6px;
}
.compare-col-tag-add {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    color: var(--text-dim);
    border: 1px dashed var(--border);
    border-radius: 3px;
    padding: 1px 6px;
    background: none;
    cursor: pointer;
}
.compare-col-tag-add:disabled { cursor: not-allowed; }

.compare-col-score {
    display: flex;
    align-items: center;
    gap: 8px;
}
.compare-col-score-num {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--text);
    min-width: 36px;
}
.compare-col-score-num-empty { color: var(--text-dim); }
.compare-col-score-num-hot { color: var(--accent); }
.compare-col-score-bar {
    flex: 1;
    height: 4px;
    background: var(--bg-elevated);
    border-radius: 2px;
    overflow: hidden;
}
.compare-col-score-bar-fill {
    height: 100%;
    background: var(--status-info);
    transition: width var(--duration);
}
.compare-col-score-bar-fill-hot {
    background: var(--accent);
}

.compare-col-foot {
    padding: 10px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: center;
    background: var(--bg-surface);
    flex-shrink: 0;
}

.compare-col-verdict-group {
    display: inline-flex;
    gap: 6px;
}
.compare-col-verdict-btn {
    height: 24px;
    padding: 0 10px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    border-radius: 3px;
    cursor: pointer;
    transition: background var(--duration), color var(--duration), border-color var(--duration);
}
.compare-col-verdict-btn:hover {
    color: var(--verdict-color);
    border-color: var(--verdict-color);
}
.compare-col-verdict-btn.active {
    background: color-mix(in srgb, var(--verdict-color) 18%, transparent);
    border-color: color-mix(in srgb, var(--verdict-color) 60%, transparent);
    color: var(--verdict-color);
}

.compare-pinboard-slot {
    width: 320px;
    flex-shrink: 0;
    border-left: 1px dashed var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
}
.compare-pinboard-slot-inner {
    text-align: center;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
}
.compare-pinboard-slot-plus {
    font-size: 1.5rem;
    opacity: 0.5;
    margin-bottom: 4px;
}

.compare-pinboard-drawer {
    border-top: 1px solid var(--border);
    background: var(--bg-surface);
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.compare-drawer-icon { color: var(--text-muted); font-size: 0.875rem; }
.compare-drawer-label {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-muted);
}
.compare-drawer-expand {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.6875rem;
    font-family: var(--font-sans);
}
.compare-drawer-expand:hover { color: var(--accent); }

/* ================================================================
   Command palette (V5 ⌘K)
   ================================================================
   Native <dialog> overlay. .command-palette is the dialog backdrop
   itself; .command-palette-card is the inner pill. Light-dismiss on
   backdrop click is wired in command-palette.js (clicking outside the
   card closes the palette). Esc / arrow-nav / Enter handled by the
   input's keydown listener.                                              */

dialog.command-palette {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    inset: 0;
    align-items: flex-start;
    justify-content: center;
}
dialog.command-palette[open] { display: flex; padding-top: 80px; }
dialog.command-palette::backdrop {
    background: rgba(0, 0, 0, 0.55);
}
.command-palette-card {
    width: 520px;
    max-width: calc(100vw - 32px);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.command-palette-input-wrap {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}
.command-palette-input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    padding: 0;
}
.command-palette-input::placeholder { color: var(--text-dim); }
.command-palette-list {
    max-height: 360px;
    overflow: auto;
}
.command-palette-section-header {
    padding: 6px 14px;
    font-family: var(--font-sans);
    font-size: 0.5625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dim);
    border-top: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.02);
}
.command-palette-section-header:first-child { border-top: none; }
.command-palette-row {
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    border-bottom: 1px solid rgba(44, 43, 48, 0.5);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text);
}
.command-palette-row:last-child { border-bottom: none; }
.command-palette-row:hover,
.command-palette-row.command-palette-row-selected {
    background: rgba(200, 148, 62, 0.08);
}
.command-palette-row-cmd { color: var(--accent); }
.command-palette-row-patent .command-palette-row-id {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-muted);
    min-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.command-palette-row-patent .command-palette-row-title {
    flex: 1;
    min-width: 0;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.command-palette-empty {
    padding: 24px 14px;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-align: center;
}
.command-palette-footer {
    padding: 6px 14px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    color: var(--text-dim);
}
.command-palette-hint { display: inline-flex; align-items: center; gap: 4px; }
.command-palette-hint kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    font-weight: 500;
    color: var(--text-muted);
}
.command-palette .patent-verdict-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--text-dim);
    flex-shrink: 0;
}
.command-palette .patent-verdict-dot[data-verdict="keep"]   { background: var(--triage-keep);   box-shadow: inset 0 0 0 1px var(--triage-keep); }
.command-palette .patent-verdict-dot[data-verdict="maybe"]  { background: var(--triage-maybe);  box-shadow: inset 0 0 0 1px var(--triage-maybe); }
.command-palette .patent-verdict-dot[data-verdict="reject"] { background: var(--triage-reject); box-shadow: inset 0 0 0 1px var(--triage-reject); }


/* ================================================================
   WHAT'S NEW + ALL RELEASES
   Standalone SEO landing pages (whats-new.hbs, releases.hbs,
   release-detail.hbs). Body needs to scroll — overrides the
   default `overflow: hidden` set on body for the app shell.
   ================================================================ */

body.releases-body {
    overflow: auto;
    height: auto;
    min-height: 100vh;
}

.releases-page {
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(32px, 6vw, 80px) clamp(20px, 4vw, 32px) 80px;
}

.releases-back {
    font-family: var(--font-mono);
    font-size: clamp(0.6875rem, 0.74vw, 0.875rem);
    margin-bottom: 32px;
}
.releases-back a {
    color: var(--text-muted);
    text-decoration: none;
}
.releases-back a:hover { color: var(--accent); }

.releases-page h1 {
    font-family: var(--font-sans);
    font-size: clamp(1.5rem, 2.4vw, 2.25rem);
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.releases-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.releases-item {
    padding: 24px 0;
    border-bottom: 1px solid var(--border);
}
.releases-item:last-child { border-bottom: none; }

.releases-item article > header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

.releases-item h2 {
    font-family: var(--font-sans);
    font-size: clamp(1rem, 1.2vw, 1.25rem);
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
}
.releases-item h2 a {
    color: var(--text);
    text-decoration: none;
}
.releases-item h2 a:hover {
    color: var(--accent);
}

.releases-item time {
    font-family: var(--font-mono);
    font-size: clamp(0.625rem, 0.7vw, 0.75rem);
    color: var(--text-dim);
    letter-spacing: 0.04em;
}

.releases-summary {
    font-size: clamp(0.8125rem, 0.85vw, 0.9375rem);
    color: var(--text-muted);
    line-height: 1.6;
    margin: 8px 0 0;
}

.releases-item > article > p:last-child {
    margin-top: 12px;
    font-family: var(--font-mono);
    font-size: clamp(0.6875rem, 0.74vw, 0.8125rem);
}
.releases-item > article > p:last-child a {
    color: var(--accent);
    text-decoration: none;
}
.releases-item > article > p:last-child a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

.releases-see-all {
    margin-top: 40px;
    font-family: var(--font-mono);
    font-size: clamp(0.75rem, 0.8vw, 0.875rem);
}
.releases-see-all a {
    color: var(--accent);
    text-decoration: none;
}
.releases-see-all a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

.releases-empty {
    color: var(--text-muted);
    font-style: italic;
    padding: 24px 0;
}

/* --- Release detail (prose) --- */

.release-detail > article > header {
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.release-detail h1 {
    margin-bottom: 8px;
    padding-bottom: 0;
    border-bottom: none;
}
.release-detail time {
    font-family: var(--font-mono);
    font-size: clamp(0.6875rem, 0.74vw, 0.8125rem);
    color: var(--text-dim);
    letter-spacing: 0.04em;
}

.release-body {
    font-size: clamp(0.875rem, 0.92vw, 1rem);
    line-height: 1.7;
    color: var(--text);
    overflow-wrap: break-word;
}
.release-body > :first-child { margin-top: 0; }
.release-body > :last-child { margin-bottom: 0; }

.release-body h2 {
    font-family: var(--font-sans);
    font-size: clamp(1.125rem, 1.4vw, 1.4rem);
    font-weight: 600;
    color: var(--text);
    margin: 32px 0 12px;
    letter-spacing: -0.005em;
}
.release-body h3 {
    font-family: var(--font-sans);
    font-size: clamp(1rem, 1.15vw, 1.15rem);
    font-weight: 600;
    color: var(--text);
    margin: 24px 0 8px;
}
.release-body h4,
.release-body h5,
.release-body h6 {
    font-family: var(--font-sans);
    font-size: clamp(0.9375rem, 1vw, 1.0625rem);
    font-weight: 600;
    color: var(--text);
    margin: 20px 0 6px;
}

.release-body p {
    margin: 0 0 16px;
    color: var(--text);
}

.release-body ul,
.release-body ol {
    margin: 0 0 16px;
    padding-left: 1.5rem;
    color: var(--text);
}
.release-body li {
    margin-bottom: 6px;
}
.release-body li::marker {
    color: var(--text-dim);
}

.release-body a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.release-body a:hover {
    color: var(--accent-hover);
    border-bottom-color: var(--accent-hover);
}

.release-body code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    background: var(--bg-elevated);
    color: var(--text);
    padding: 1px 6px;
    border: 1px solid var(--border);
    border-radius: 3px;
}

.release-body pre {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 12px 16px;
    margin: 0 0 16px;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: clamp(0.75rem, 0.82vw, 0.875rem);
    line-height: 1.6;
}
.release-body pre code {
    background: none;
    border: none;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
    color: var(--text);
}

.release-body blockquote {
    border-left: 3px solid var(--accent);
    padding: 4px 0 4px 16px;
    margin: 0 0 16px;
    color: var(--text-muted);
    font-style: italic;
}

.release-body hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 32px 0;
}

.release-body img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 8px 0;
}

.release-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 16px;
    font-size: clamp(0.8125rem, 0.85vw, 0.9375rem);
}
.release-body th,
.release-body td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.release-body th {
    font-weight: 600;
    color: var(--text);
    background: var(--bg-surface);
}
.release-body td {
    color: var(--text-muted);
}

@media (max-width: 600px) {
    .releases-page {
        padding: 24px 16px 64px;
    }
    .releases-item article > header {
        gap: 2px;
    }
}

/* lamp-annotate popover — selection-bound chat continuation over
   analysis sections. → docs/adr/section-regen-and-annotations.md.
   `position: fixed` so viewport coords from getBoundingClientRect
   work without scroll-offset math — analysis-view lives inside a
   panel with its own overflow:auto, so document scroll is 0 even
   when the section is scrolled inside the panel. */
.lamp-annotate-popover {
    position: fixed;
    z-index: 600;
    width: 320px;
    padding: 8px;
    background: var(--bg-surface);
    border: 1px solid var(--accent);
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.lamp-annotate-popover[hidden] { display: none; }
.lamp-annotate-input {
    width: 100%;
    box-sizing: border-box;
    padding: 6px;
    background: var(--bg-elevated);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 2px;
    font-family: inherit;
    font-size: 0.8125rem;
    resize: vertical;
}
.lamp-annotate-submit {
    align-self: flex-end;
    padding: 4px 12px;
    background: var(--accent);
    color: var(--bg);
    border: none;
    border-radius: 2px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--duration);
}
.lamp-annotate-submit:hover { background: var(--accent-hover); }