/* ============================================================================
   CSS — sections:
     1) Base / reset & CSS Variables
     2) Top bar
     3) Bot picker
     4) Mobile tabs
     5) Response grid + column anatomy
     6) Thinking block
     7) Similarity / disagreement
     8) Action row + debate + synthesis
     9) Setup modal
    10) Animations & Toasts
    11) Mobile breakpoint (<=768px)
   ============================================================================ */

/* 1) Base / reset & CSS Variables */
:root {
    --bg: #0f1115;
    --surface: #161a22;
    --surface-hover: #1c2029;
    --border: #232831;
    --text-main: #e7e7e7;
    --text-muted: #888888;
    --topbar-bg: rgba(20, 23, 29, 0.95);
    --shadow-color: rgba(0, 0, 0, 0.4);
    --input-bg: #1c2029;
    --user-bubble-bg: #2a2d3a;   /* Phase 10.1 — distinct user-prompt bubble (blue-tinted dark) */
    --code-bg: #0e1117;
    --error-bg: #2a1414;
    --error-border: #5a2020;
    --warning-bg: #1f2330;
    --warning-border: #f0b13a;

    --brand-oai: #e7e7e7;
    --brand-ant: #D97757;
    --brand-gem: #4285F4;
    --brand-ds:  #4974b8;
    --brand-xai: #7B3FF2;
    --brand-oai: #e7e7e7;
    --brand-ant: #D97757;
    --brand-gem: #4285F4;
    --brand-ds:  #4974b8;
    --brand-xai: #7B3FF2;

    /* Phase 5 — new tokens. Defined here so both themes inherit (the light
       block overrides only theme-divergent values like --brand-oai). */
    --error-text:   #d04040;   /* error text colour (matches existing inline #d04040) */
    --accent-green: #2e9e5b;   /* "free / no commitment" accent for the sample CTA */
    --accent-share: #38BDF8;   /* social/outward blue-cyan; distinct from --brand-gem #4285F4 */
    --narrate-male:   #6ea3dd;  /* Phase 11.1.1 — voice-picker gender accents (dark set) */
    --narrate-female: #d78fb5;

    /* Phase 7.8 — per-category memory tints. Faint group bg + a more-saturated head
       bar per hue; cards stay on --surface so their state cues still read on top of
       the tint. Pinned = gold (matches the ★ pin colour). Dark set. */
    --mem-cat-expertise-bg:   #13201e;  --mem-cat-expertise-head:   #1b3330;
    --mem-cat-preferences-bg: #1b1726;  --mem-cat-preferences-head: #2a2240;
    --mem-cat-context-bg:     #131b2a;  --mem-cat-context-head:     #1c2b45;
    --mem-cat-opinions-bg:    #221c12;  --mem-cat-opinions-head:    #3a2e16;
    --mem-cat-personal-bg:    #13201a;  --mem-cat-personal-head:    #1c3327;
    --mem-cat-general-bg:     #181b22;  --mem-cat-general-head:     #232833;
    --mem-cat-pinned-bg:      #221d10;  --mem-cat-pinned-head:      #3a3116;
}

:root[data-theme="light"] {
    --bg: #f4f6f9;
    --surface: #ffffff;
    --surface-hover: #f1f5f9;
    --border: #e2e8f0;
    --text-main: #1a202c;
    --text-muted: #64748b;
    --topbar-bg: rgba(255, 255, 255, 0.95);
    --shadow-color: rgba(0, 0, 0, 0.08);
    --input-bg: #ffffff;
    --user-bubble-bg: #e8eaf2;   /* Phase 10.1 — distinct user-prompt bubble (cool light) */
    --code-bg: #f8fafc;
    --error-bg: #fef2f2;
    --error-border: #fecaca;
    --warning-bg: #fffbeb;
    --warning-border: #fbbf24;
    --brand-oai: #212121;
    --narrate-male:   #3b78c2;  /* Phase 11.1.1 — voice-picker gender accents (light set) */
    --narrate-female: #c05a8e;

    /* Phase 7.8 — per-category memory tints (light set; own lighter/desaturated values). */
    --mem-cat-expertise-bg:   #ecfbf8;  --mem-cat-expertise-head:   #d6f3ec;
    --mem-cat-preferences-bg: #f3effc;  --mem-cat-preferences-head: #e6dcf7;
    --mem-cat-context-bg:     #eef4fe;  --mem-cat-context-head:     #dde8fb;
    --mem-cat-opinions-bg:    #fdf6e7;  --mem-cat-opinions-head:    #f8e9c7;
    --mem-cat-personal-bg:    #ecf8f0;  --mem-cat-personal-head:    #d7eede;
    --mem-cat-general-bg:     #f3f5f8;  --mem-cat-general-head:     #e6eaf0;
    --mem-cat-pinned-bg:      #fdf6e3;  --mem-cat-pinned-head:      #f8ebc2;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
    height: 100%;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--text-main);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    transition: background 0.2s, color 0.2s;
}
button, input, textarea, select {
    font-family: inherit; font-size: inherit; color: inherit;
}
button { cursor: pointer; background: none; border: none; }
a { color: var(--brand-gem); text-decoration: none; }
a:hover { text-decoration: underline; }

/* 2) Top bar */
.topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 200;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 20px;
    background: var(--topbar-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 12px var(--shadow-color);
}
.topbar .brand { 
    font-weight: 800; font-size: 18px; letter-spacing: -0.2px; white-space: nowrap; 
    display: flex; align-items: center;
}
.topbar .brand-link { color: inherit; text-decoration: none; cursor: pointer; }
.topbar .brand-link:hover { color: inherit; text-decoration: none; }
.topbar .prompt-wrap { 
    flex: 1; display: flex; align-items: center; gap: 10px; justify-content: center;
}
/* Voice — wrapper so the mic/HD buttons anchor to the textarea's corner.
   Reused for the topbar prompt and the follow-up input. max-width is
   topbar-only (the follow-up box is narrower). padding-right is set per
   context with enough specificity to beat the base textarea paddings; the
   wrapper only ever exists when a mic is present. */
.prompt-textarea-wrap {
    position: relative;
    flex: 1;
    display: flex;
}
.topbar .prompt-textarea-wrap { max-width: 520px; }
.topbar .prompt-textarea-wrap > textarea,
.followup-inputwrap .prompt-textarea-wrap > textarea { padding-right: 76px; }

.mic-btn,
.mic-hd-btn {
    position: absolute;
    bottom: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: background 0.2s, color 0.2s;
}
.mic-btn {
    right: 8px;
    width: 30px; height: 30px;
    padding: 5px;
    font-size: 13px; font-weight: 600;
    color: var(--text-muted);
}
.mic-btn svg { width: 100%; height: 100%; }
.mic-btn:hover { color: var(--text-main); background: var(--surface-hover); }
.mic-btn.recording {
    color: var(--error-text);
    animation: mic-pulse 1.2s ease-in-out infinite;
}
.mic-hd-btn {
    right: 38px;
    height: 30px;
    padding: 0 6px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
    color: var(--text-muted);
}
.mic-hd-btn:hover { color: var(--text-main); background: var(--surface-hover); }
.mic-hd-btn.active { color: var(--accent-share); }
.mic-hd-btn:disabled { cursor: default; opacity: 0.85; }
@keyframes mic-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

/* Phase 14.7 — breathing recording indicator. Scale + glow ride a second
   animation so the shipped opacity pulse stays intact as the reduced-motion
   baseline (the OS "reduce motion" setting drives the media query — no site
   toggle). transform on the absolutely-positioned button is layout-inert —
   the textarea's dimensions cannot shift. Glow uses the color-mix pattern;
   no new tokens, no hex, no !important. Both animations share the 1.2 s
   period so scale/glow peak exactly when opacity dips — one coherent breath. */
@media (prefers-reduced-motion: no-preference) {
    .mic-btn.recording {
        animation: mic-pulse 1.2s ease-in-out infinite,
                   mic-breathe 1.2s ease-in-out infinite;
    }
    @keyframes mic-breathe {
        0%, 100% { transform: scale(1);   box-shadow: 0 0 0 0 transparent; }
        50%      { transform: scale(1.1); box-shadow: 0 0 10px 2px color-mix(in srgb, var(--error-text) 45%, transparent); }
    }
}

/* Voice — sample-tier teaser: visible mic, not usable, hover/focus chip. */
.mic-btn.mic-teaser { color: var(--text-muted); opacity: 0.65; cursor: help; }
.mic-btn.mic-teaser:hover { background: transparent; color: var(--text-muted); }
/* Phase 13.6 — the teaser's private ::after hover chip is GONE: it and the
   site-wide data-tip instant engine both consumed the same data-tip attribute,
   stacking two tooltips on hover. The engine owns [data-tip] alone now. */
.topbar textarea {
    flex: 1; width: 100%; max-width: 520px;
    min-height: 42px; max-height: 200px;
    padding: 10px 14px; resize: none;
    background: var(--input-bg); border: 1px solid var(--border); border-radius: 8px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.topbar textarea:focus { 
    outline: none; border-color: var(--brand-gem); 
    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.15);
}
.btn-primary {
    background: var(--brand-gem); color: #fff;
    padding: 10px 18px; border-radius: 8px; font-weight: 600;
    white-space: nowrap; transition: transform 0.2s, background 0.2s;
    flex-shrink: 0;
}
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn-primary:disabled { background: var(--border); color: var(--text-muted); cursor: not-allowed; transform: none; filter: none; }
.cost-display { 
    color: var(--text-muted); font-size: 13px; white-space: nowrap; font-weight: 500;
    align-self: center; flex-shrink: 0;
}
#session-cost-display {
    color: var(--text-muted); font-size: 13px; white-space: nowrap;
    font-weight: 500; cursor: pointer; user-select: none;
    width: auto; height: auto; border-radius: 0; background: transparent;
    border: none; padding: 0; line-height: 1.5;
}
#session-cost-display:hover { color: var(--text-main); background: transparent; }
.info-wrap.show #session-cost-display { background: transparent; color: var(--text-main); border: none; }
#session-cost-wrap { align-self: center; flex-shrink: 0; }
.session-cost-line { display: block; margin-bottom: 4px; }
.session-cost-total { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); font-weight: 700; color: var(--text-main); }
.session-cost-disclaimer { display: block; margin-top: 8px; font-size: 11px; font-style: italic; color: var(--text-muted); }
.icon-btn {
    color: var(--text-muted); padding: 8px; font-size: 16px; border-radius: 6px; 
    transition: background 0.2s, color 0.2s; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.icon-btn:hover { color: var(--text-main); background: var(--surface-hover); }
/* Phase 12.3.2 — generic greyed state for topbar icon buttons on read-only
   share pages (currently the incognito toggle; #global-search-btn keeps its
   own ID-scoped .is-disabled rule). Class-based rather than :disabled — the
   buttons keep pointer events so their explanatory tooltips still fire. */
.icon-btn.is-disabled,
.icon-btn.is-disabled:hover { opacity: 0.35; cursor: not-allowed; color: var(--text-muted); background: transparent; }

/* 1b) Stack multiple synthesis cards with breathing room */
.synthesis-output + .synthesis-output { margin-top: 14px; }

/* 1c) Bot picker lock — disables clicks while any stream is active */
.bot-picker.is-locked {
    pointer-events: none;
    opacity: 0.55;
    filter: saturate(0.7);
    transition: opacity 0.2s, filter 0.2s;
}

/* 1c-2) Phase 8.5 — bot-picker loading window (restoring saved selection).
   Flat, muted, non-interactive; intentionally NO saturate() so it reads
   differently from the streaming lock above. */
.bot-picker.is-loading {
    pointer-events: none;
    opacity: 0.6;
    transition: opacity 0.2s;
}
.bot-picker.is-loading .bot-btn {
    cursor: default;
    box-shadow: none;
}

/* 1d) History modal (dedicated styles; reuses theme tokens) */
.history-modal {
    position: fixed; inset: 0; z-index: 250;
    background: rgba(0,0,0,0.55);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 60px 16px 16px; overflow-y: auto;
}
.history-modal .panel {
    background: var(--surface); color: var(--text-main);
    border: 1px solid var(--border); border-radius: 12px;
    width: 100%; max-width: 760px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.45);
    display: flex; flex-direction: column; max-height: calc(100vh - 76px);
}
.history-modal .panel-head {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.history-modal .panel-head h2 {
    margin: 0; font-size: 16px; font-weight: 700; flex: 1;
}
.history-modal .quota-pill {
    font-size: 11px; padding: 3px 8px; border-radius: 10px;
    background: var(--surface-hover); color: var(--text-muted);
    border: 1px solid var(--border);
}
.history-modal .quota-pill.full {
    background: var(--warning-bg); color: var(--text-main);
    border-color: var(--warning-border);
}
.history-modal .close-btn {
    background: none; border: none; color: var(--text-muted);
    font-size: 22px; cursor: pointer; padding: 0 4px;
    line-height: 1;
}
.history-modal .close-btn:hover { color: var(--text-main); }
.history-modal .search-row {
    padding: 12px 18px; border-bottom: 1px solid var(--border);
}
.history-modal .search-row input {
    width: 100%; padding: 8px 12px; font-size: 13px;
    background: var(--input-bg); color: var(--text-main);
    border: 1px solid var(--border); border-radius: 6px;
    font-family: inherit;
}
.history-modal .list {
    overflow-y: auto; flex: 1;
}
.history-modal .empty {
    padding: 30px 18px; text-align: center; color: var(--text-muted);
    font-size: 13px;
}
.history-modal .item {
    padding: 12px 18px; border-bottom: 1px solid var(--border);
    cursor: pointer; transition: background 0.15s;
    display: flex; flex-direction: column; gap: 6px;
}
.history-modal .item:hover { background: var(--surface-hover); }
.history-modal .item:last-child { border-bottom: none; }
.history-modal .item-title-row {
    display: flex; align-items: center; gap: 10px;
}
.history-modal .item-title {
    font-weight: 600; font-size: 14px; flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.history-modal .item-time {
    font-size: 11px; color: var(--text-muted); flex-shrink: 0;
}
.history-modal .item-preview {
    font-size: 12px; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
    -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
.history-modal .item-meta {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-size: 11px; color: var(--text-muted);
}
.history-modal .item-meta .model-logos { display: inline-flex; gap: 3px; }
.history-modal .item-meta .model-logos img {
    width: 16px; height: 16px; border-radius: 3px;
    background: var(--surface); padding: 1px;
    border: 1px solid var(--border);
}
.history-modal .item-meta .tag {
    padding: 1px 6px; border-radius: 8px;
    background: var(--surface-hover); border: 1px solid var(--border);
}
.history-modal .item-actions {
    display: flex; gap: 8px; margin-top: 4px;
}
.history-modal .item-actions button {
    background: none; border: 1px solid var(--border);
    color: var(--text-muted); font-size: 11px; padding: 3px 10px;
    border-radius: 4px; cursor: pointer; font-family: inherit;
}
.history-modal .item-actions button:hover {
    color: var(--text-main); background: var(--surface-hover);
}
.history-modal .item-actions button.danger:hover {
    color: #ff6b6b; border-color: #ff6b6b;
}

/* ── Phase 5.75 — condensed Sessions rows + pin / overflow / tooltip / pagination ──
   Scoped to .item[data-session-id] so Shared Links rows (no data-session-id,
   still using .item-title-row/.item-meta/.item-actions above) are unaffected. */
.history-modal .item[data-session-id] {
    min-height: 50px; height: auto;
    padding: 8px 18px; gap: 4px;
    cursor: default;
}
.history-modal .item[data-session-id] .item-title { cursor: pointer; }
.history-modal .item[data-session-id] .item-title:hover { text-decoration: underline; }
.history-modal .item-row1 {
    display: flex; align-items: center; gap: 8px;
    width: 100%; min-width: 0;
}
.history-modal .model-logos {
    display: inline-flex; gap: 3px; flex-shrink: 0;
}
.history-modal .model-logos img {
    width: 16px; height: 16px; border-radius: 3px;
    background: var(--surface); padding: 1px;
    border: 1px solid var(--border);
}

.btn-pin {
    background: none; border: none; cursor: pointer;
    font-size: 14px; padding: 0 2px; line-height: 1;
    flex-shrink: 0; color: var(--text-muted);
    transition: color 0.15s;
}
.btn-pin.is-pinned { color: var(--warning-border); }
.btn-pin:hover { color: var(--text-main); }

.btn-overflow {
    background: none; border: none; cursor: pointer;
    font-size: 16px; padding: 0 4px; line-height: 1;
    flex-shrink: 0; color: var(--text-muted);
    opacity: 0.55; transition: opacity 0.15s, color 0.15s;
    font-family: inherit;
}
.history-modal .item:hover .btn-overflow { opacity: 1; }
.btn-overflow:hover { color: var(--text-main); }

.history-overflow-menu {
    position: fixed; z-index: 300;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    min-width: 140px; padding: 4px 0; display: none;
}
.history-overflow-menu.open { display: block; }
.history-overflow-menu button {
    display: block; width: 100%; text-align: left;
    background: none; border: none; padding: 8px 16px;
    font-size: 13px; color: var(--text-main); cursor: pointer;
    font-family: inherit;
}
.history-overflow-menu button:hover { background: var(--surface-hover); }
.history-overflow-menu button.danger:hover { color: #ff6b6b; }

.history-tooltip {
    position: fixed; z-index: 400; pointer-events: none; display: none;
    max-width: 360px; background: var(--surface);
    border: 1px solid var(--border); border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
    padding: 8px 12px; font-size: 12px; line-height: 1.5;
    color: var(--text-main); word-wrap: break-word;
}
.history-tooltip.visible { display: block; }

.history-pagination {
    display: flex; align-items: center; justify-content: center;
    gap: 12px; padding: 10px 18px;
    border-top: 1px solid var(--border); flex-shrink: 0;
}
.history-pagination button {
    background: none; border: 1px solid var(--border);
    color: var(--text-muted); font-size: 12px; padding: 4px 12px;
    border-radius: 4px; cursor: pointer; font-family: inherit;
}
.history-pagination button:hover:not(:disabled) {
    color: var(--text-main); background: var(--surface-hover);
}
.history-pagination button:disabled { opacity: 0.35; cursor: not-allowed; }
.history-pagination .page-info { font-size: 12px; color: var(--text-muted); }

.history-section-label {
    font-size: 11px; font-weight: 600; color: var(--text-muted);
    padding: 6px 18px 4px;
    text-transform: uppercase; letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border);
}

/* 2a) Auth widget (top bar, right side) */
.auth-widget {
    display: none; align-items: center; gap: 8px;
    font-size: 13px; color: var(--text-muted); flex-shrink: 0;
}
.auth-widget .email {
    max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--text-main);
}
.auth-widget .tier-badge {
    padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700;
    letter-spacing: 0.2px; text-transform: uppercase;
    background: var(--surface-hover); color: var(--text-main);
    border: 1px solid var(--border);
}
.auth-widget .tier-badge.paid {
    background: var(--brand-gem); color: #fff; border-color: var(--brand-gem);
}
.auth-widget .tier-badge.free {
    background: var(--surface-hover); color: var(--text-main);
}
.auth-widget .tier-badge.sample {
    background: var(--warning-bg); color: var(--text-main);
    border-color: var(--warning-border);
}
.auth-widget a.signin-link {
    color: var(--brand-gem); text-decoration: none; font-weight: 600;
    background: none; border: none; cursor: pointer; padding: 0; font-size: 13px;
    font-family: inherit;
}
.auth-widget a.signin-link:hover { text-decoration: underline; }

/* 3) Bot picker */
.bot-picker {
    display: flex; gap: 14px; padding: 16px 20px; justify-content: center;
    background: var(--bg); border-bottom: 1px solid var(--border);
    overflow-x: auto;
}
.bot-btn {
    width: 82px; height: 76px; flex-shrink: 0;
    border-radius: 12px; border: 2px solid transparent;
    background: var(--surface); box-shadow: 0 2px 8px var(--shadow-color);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    font-weight: 600; font-size: 12px; color: var(--text-muted);
}
.bot-btn:hover { transform: translateY(-3px); background: var(--surface-hover); box-shadow: 0 6px 14px var(--shadow-color); }
.bot-btn .svg-icon { margin-bottom: 6px; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; }
.bot-btn .svg-icon img {
    width: 32px; height: 32px; object-fit: contain;
    filter: grayscale(100%) opacity(35%);
    transition: filter 0.2s ease; display: block;
}
.bot-btn { opacity: 0.55; border-width: 2px; }
.bot-btn.selected { opacity: 1; }
.bot-btn.selected .svg-icon img { filter: none; }
.bot-btn.selected { color: var(--text-main); background: var(--surface); }
.bot-btn.selected[data-bot="openai"]    { border-color: var(--brand-oai); background: color-mix(in srgb, var(--brand-oai) 6%, var(--surface)); }
.bot-btn.selected[data-bot="anthropic"] { border-color: var(--brand-ant); background: color-mix(in srgb, var(--brand-ant) 8%, var(--surface)); }
.bot-btn.selected[data-bot="gemini"]    { border-color: var(--brand-gem); background: color-mix(in srgb, var(--brand-gem) 8%, var(--surface)); }
.bot-btn.selected[data-bot="deepseek"]  { border-color: var(--brand-ds);  background: color-mix(in srgb, var(--brand-ds) 8%, var(--surface)); }
.bot-btn.selected[data-bot="xai"]       { border-color: var(--brand-xai); background: color-mix(in srgb, var(--brand-xai) 8%, var(--surface)); }
/* Tier-locked bots: visibly inert, hint at upgrade path on click */
.bot-btn.tier-locked {
    opacity: 0.4; cursor: not-allowed;
    background: var(--surface);
}
.bot-btn.tier-locked:hover {
    transform: none; box-shadow: 0 2px 8px var(--shadow-color);
    background: var(--surface);
}
.bot-btn.tier-locked .svg-icon img { filter: grayscale(100%) opacity(40%); }
.bot-btn.tier-locked::after {
    content: '🔒'; position: absolute; top: 4px; right: 6px; font-size: 10px;
}
.bot-btn { position: relative; }

/* 4) Mobile tabs */
.mobile-tabs { display: none; }

/* 5) Response grid + column anatomy */
.grid-wrap { padding: 20px; }
.response-grid {
    display: flex; gap: 20px;
    width: 100%;
}
.bot-col {
    flex: var(--col-w, 1) 1 0%;   /* Phase 13.7 — drag-resize weight; JS writes --col-w inline. .col-collapsed's
                                     flex still wins: flex itself is never set inline, so class specificity decides. */
    background: var(--surface); border-radius: 12px;
    display: flex; flex-direction: column; min-height: 220px;
    box-shadow: 0 4px 16px var(--shadow-color);
    position: relative;
    animation: smoothPopIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transition: min-width 0.25s ease, max-width 0.25s ease, flex 0.25s ease, flex-grow 0.25s ease, flex-basis 0.25s ease;
    min-width: 200px; max-width: 100%;   /* Phase 13 (B) — usability floor; below this, header controls stop being tappable. Collapsed strips (44px) override via .col-collapsed's own min/max. */
    container-type: inline-size;         /* Phase 13 (B) — column is a container query context; shedding tiers below key off ITS width, not the viewport */
}
.bot-col:has(.copy-split-btn.menu-open) { overflow: visible; }
.bot-col:has(.col-cost-chip:hover) { overflow: visible; z-index: 100; }
.bot-col:has(.model-dd.open) { overflow: visible; z-index: 100; }
.bot-col:has(.botcfg-dd:hover), .bot-col:has(.botcfg-dd:focus-within) { overflow: visible; z-index: 100; }
.bot-col[data-bot="openai"]    { order: 1; }
.bot-col[data-bot="anthropic"] { order: 2; }
.bot-col[data-bot="gemini"]    { order: 3; }
.bot-col[data-bot="deepseek"]  { order: 4; }
.bot-col[data-bot="xai"]       { order: 5; }

/* Phase 11.1b — side brand borders live on the column's sections (not on
   .bot-col), so the rounded, sticky .col-head caps them at the top. When the
   header pins on scroll the lines now round into its top curve instead of
   running straight up past it. Collapsed columns are excluded (handled by the
   collapsed strip's own brand top). */
.bot-col > div {
    border-left: 2px solid var(--col-brand-color, transparent);
    border-right: 2px solid var(--col-brand-color, transparent);
}
.bot-col.compare-selected { box-shadow: 0 0 0 2px var(--text-main); }
.bot-col[data-bot="openai"].compare-selected    { box-shadow: 0 0 0 2px var(--brand-oai); }
.bot-col[data-bot="anthropic"].compare-selected { box-shadow: 0 0 0 2px var(--brand-ant); }
.bot-col[data-bot="gemini"].compare-selected    { box-shadow: 0 0 0 2px var(--brand-gem); }
.bot-col[data-bot="deepseek"].compare-selected  { box-shadow: 0 0 0 2px var(--brand-ds); }
.bot-col[data-bot="xai"].compare-selected       { box-shadow: 0 0 0 2px var(--brand-xai); }

.col-head {
    padding: 12px 16px; display: flex; justify-content: space-between; align-items: center;
    gap: 8px; border-bottom: 1px solid var(--border);
    position: sticky; top: var(--topbar-h, 66px); z-index: 10; background: var(--surface); min-height: 0; border-radius: 12px 12px 0 0;
}

/* Fix for scrolling column borders poking past the rounded sticky header */
.col-head::before,
.col-head::after,
.bot-col.col-collapsed > div::before,
.bot-col.col-collapsed > div::after {
    content: "";
    position: absolute;
    top: -2px;
    width: 12px;
    height: 12px;
    background: transparent;
    pointer-events: none;
    z-index: 1; /* Sits over the scrolling borders */
}

.col-head::before,
.bot-col.col-collapsed > div::before {
    left: -2px;
    border-top-left-radius: 12px;
    box-shadow: -2px -2px 0 2px var(--bg);
}

.col-head::after,
.bot-col.col-collapsed > div::after {
    right: -2px;
    border-top-right-radius: 12px;
    box-shadow: 2px -2px 0 2px var(--bg);
}

.bot-col[data-bot="openai"]    .col-head { border-top: 2px solid var(--brand-oai); }
.bot-col[data-bot="anthropic"] .col-head { border-top: 2px solid var(--brand-ant); }
.bot-col[data-bot="gemini"]    .col-head { border-top: 2px solid var(--brand-gem); }
.bot-col[data-bot="deepseek"]  .col-head { border-top: 2px solid var(--brand-ds); }
.bot-col[data-bot="xai"]       .col-head { border-top: 2px solid var(--brand-xai); }
.col-head .name { font-weight: 700; font-size: 14px; letter-spacing: -0.2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* Phase 13 (A1) */
.col-head .col-head-left { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.col-head .col-head-right { display: flex; align-items: center; gap: 8px; min-width: 0; }   /* Phase 13 (A1) — right group may shrink; without this its min-content width overflows the flex line and overlaps the name/gear */
.col-head .model-select {
    background: var(--input-bg); border: 1px solid var(--border); padding: 4px 8px; border-radius: 6px;
    color: var(--text-main); font-size: 12px; max-width: 100%; min-width: 0; cursor: pointer; transition: border-color 0.2s;   /* Phase 13 (A1) — read-only pages keep the native select; text may clip without ellipsis (accepted) */
}
.col-collapse-btn {
    color: var(--text-muted); font-size: 16px; line-height: 1; padding: 4px 8px;
    border-radius: 6px; transition: background 0.2s, color 0.2s, transform 0.25s ease;
    display: inline-flex; align-items: center; justify-content: center;
}
.col-collapse-btn:hover { background: var(--surface-hover); color: var(--text-main); }

/* Horizontal collapse */
.bot-col.col-collapsed {
    min-width: 44px;
    max-width: 44px;
    flex: 0 0 44px;
    overflow: visible;
    cursor: pointer;
    /* Keep left/right/bottom borders on the parent container */
    border-left: 2px solid var(--col-brand-color, transparent);
    border-right: 2px solid var(--col-brand-color, transparent);
    border-bottom: 4px solid var(--col-brand-color, transparent);
    border-top: none;
    border-radius: 0 0 12px 12px;
    background: var(--surface); /* Base background */
}
/* Make the inner content sticky so the top cap scrolls with viewport */
.bot-col.col-collapsed > div {
    position: sticky;
    top: 0;
    border: none !important;
    border-top: 2px solid var(--col-brand-color, transparent) !important;
    border-radius: 12px 12px 0 0;
    background: inherit; /* Seamlessly inherits the parent's hover states */
    z-index: 2;
    min-height: 44px; /* Ensures a solid cap even if inner text is short */
}
.bot-col.col-collapsed:hover {
    background: var(--surface-hover);
}
.col-collapsed-strip {
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
    gap: 8px;
}
.bot-col[data-bot="openai"]    .col-collapsed-strip { border-top: 2px solid var(--brand-oai); }
.bot-col[data-bot="anthropic"] .col-collapsed-strip { border-top: 2px solid var(--brand-ant); }
.bot-col[data-bot="gemini"]    .col-collapsed-strip { border-top: 2px solid var(--brand-gem); }
.bot-col[data-bot="deepseek"]  .col-collapsed-strip { border-top: 2px solid var(--brand-ds); }
.bot-col[data-bot="xai"]       .col-collapsed-strip { border-top: 2px solid var(--brand-xai); }
.bot-col.col-collapsed .col-collapsed-strip { display: flex; position: sticky; top: var(--topbar-h, 66px); z-index: 10; border-radius: 12px 12px 0 0; }
.bot-col.col-collapsed .col-head,
.bot-col.col-collapsed .col-body,
.bot-col.col-collapsed .col-footer,
.bot-col.col-collapsed .col-followup-root,
.bot-col.col-collapsed .col-debate-root { 
    display: none; 
}
.col-collapsed-name {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════
   Phase 13.7 — drag-resizable columns
   One handle per gap = the BOUNDARY between two expanded columns. Dragging it
   right grows the left column (right side cascade-shrinks nearest-first to the
   200px floor); dragging left grows the right column (left side cascades). The
   handle rides its column's right edge: right:-17px + width:14px centers it in
   the 20px grid gap (occupying +3..+17px, clear of both 2px brand borders).
   z-index 11 clears the sticky .col-head (z-10) so the strip stays grabbable
   beside the pinned header. Hidden on: collapsed columns, the last expanded
   column (no boundary to its right), focus mode, mobile. Affordance is the
   col-resize cursor + a 2px center line that appears on hover/drag. */
.col-resize-handle {
    position: absolute; top: 0; bottom: 0; right: -17px; width: 14px;
    cursor: col-resize; z-index: 11; touch-action: none;
    background: transparent;
}
/* Phase 13.7.1 — the handle is a DIRECT CHILD div of .bot-col, so Phase
   11.1b's `.bot-col > div` rule (0,1,1) was painting the brand side-borders
   on it — two 2px vertical lines floating in every gap. The bare
   .col-resize-handle selector (0,1,0) loses that fight; this (0,2,1) wins. */
.bot-col > .col-resize-handle { border-left: 0; border-right: 0; }
.col-resize-handle::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 6px; width: 2px;
    border-radius: 1px; background: transparent; transition: background 0.15s ease;
}
.col-resize-handle:hover::after    { background: var(--border); }
.col-resize-handle.is-active::after { background: var(--text-muted); }
.bot-col.col-collapsed .col-resize-handle,
.col-resize-handle.handle-hidden { display: none; }
@media (max-width: 768px) { .col-resize-handle { display: none; } }

/* Drag state: the 250ms flex transition fights every pointermove — kill it for
   the drag's duration; keep the col-resize cursor and no text selection
   everywhere the pointer wanders. Instant tooltips are suppressed while
   dragging (the readout chip is the live feedback; a pc-tip on top is noise). */
.response-grid.is-resizing .bot-col { transition: none; }
body.pc-col-dragging { cursor: col-resize; user-select: none; -webkit-user-select: none; }
body.pc-col-dragging .pc-tip.is-visible { opacity: 0; }

/* Transient width readout during drag — body-mounted + fixed, so it contributes
   nothing to scrollable overflow (the 13.4.2 lesson). Shows both widths at the
   boundary: "left · right". */
.col-resize-readout {
    position: fixed; z-index: 300; pointer-events: none;
    background: var(--surface); color: var(--text-main);
    border: 1px solid var(--border); border-radius: 6px;
    padding: 2px 8px; font-size: 12px;
    font-family: 'SF Mono', 'Fira Code', 'Menlo', monospace;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 4px 16px var(--shadow-color);
    transform: translate(-50%, -130%);
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes borderPulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }

.col-spinner {
    display: none;
    width: 13px; height: 13px;
    border: 2px solid transparent;
    border-top-color: var(--col-brand-color, #888);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    flex-shrink: 0;
}
.bot-col.is-loading .col-spinner,
.col-debate-section.is-loading .col-spinner,
.synthesis-output.is-loading .col-spinner { display: inline-block; }

.col-timer {
    font-family: 'SF Mono', 'Fira Code', 'Menlo', monospace;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    color: var(--text-muted);
    min-width: 7ch;
    text-align: right;
    opacity: 0;
    transition: opacity 0.3s ease;
    flex-shrink: 0;
}
/* Initial idle state: hide the empty per-bot timer so the cost estimate sits
   flush-right in the exact slot the timer fills once "Ask All" runs (the JS
   hides the chip while streaming, so the two never collide). */
.col-head .col-timer:empty { display: none; }

/* Phase 11.5 — per-bot web search toggle (col-head, between the model picker and
   the cost chip). ON = brand-coloured ring + heavier stroke (the ring is a
   shape cue, so state never relies on colour alone); OFF = grey outline glyph.
   Disabled keeps pointer events so the tooltip / toast can explain why. */
.search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.search-toggle:hover { color: var(--text-main); border-color: var(--text-muted); }
.search-toggle.is-on {
    color: var(--col-brand-color, var(--text-main));
    border-color: var(--col-brand-color, var(--text-main));
    outline: 2px solid var(--col-brand-color, var(--text-main));
    outline-offset: 1px;
}
.search-toggle.is-on svg { stroke-width: 3.25; }
.search-toggle.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.search-toggle.is-disabled:hover { color: var(--text-muted); border-color: var(--border); }

/* ── Phase 12.3 — global search toggle (topbar master 🔍) ────────────────────────
   One click arms/disarms web search for every eligible selected bot.
   Three states: OFF = muted (base .icon-btn look) · MIXED = muted + green
   corner dot (some bots on) · ON = green icon, tinted fill, inset ring (all
   eligible bots on). color-mix() keeps the tint derived from --accent-green
   (no duplicated hex; baseline-supported in all evergreen browsers). */
#global-search-btn {
    position: relative;
    padding: 5px;                        /* 12.3.1 — 26px glyph + 5px pad = 36px, same height as neighbors */
    border: 1px solid var(--border);     /* reads as a control, not a floating glyph (per-bot pill language) */
}
#global-search-btn:hover { border-color: var(--text-muted); }
#global-search-btn svg { display: block; width: 28px; height: 28px; }   /* CSS overrides the inline 20px attrs — no index.php redeploy */
#global-search-btn.is-on {
    color: var(--accent-green);
    background: color-mix(in srgb, var(--accent-green) 14%, transparent);
    border-color: var(--accent-green);
    box-shadow: inset 0 0 0 0.5px var(--accent-green);   /* thickens the 1px border to ~1.5px, no layout shift */
}
#global-search-btn.is-on:hover { filter: brightness(1.12); }
#global-search-btn .gsx-dot {
    display: none; position: absolute; top: 5px; right: 5px;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent-green);
    box-shadow: 0 0 0 2px var(--bg);
}
#global-search-btn.is-mixed .gsx-dot { display: block; }
#global-search-btn.is-disabled { opacity: 0.35; cursor: not-allowed; }
#global-search-btn.is-disabled:hover { color: var(--text-muted); background: transparent; border-color: var(--border); }

/* Per-bot 🔍 confirmation blink — two pulses (0.45s × 2), green = switched
   on, red = switched off. box-shadow is otherwise unused on .search-toggle,
   so the pulse never fights the persistent .is-on outline; app.js removes
   the class on animationend, returning the pill to its natural state. */
@keyframes search-blink-on {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    50%      { box-shadow: 0 0 0 3px var(--accent-green); }
}
@keyframes search-blink-off {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    50%      { box-shadow: 0 0 0 3px var(--error-text); }
}
.search-toggle.blink-on  { animation: search-blink-on  0.45s ease-in-out 2; }
.search-toggle.blink-off { animation: search-blink-off 0.45s ease-in-out 2; }

/* Phase 11.5 — search-activity badge (sits just left of the per-bot timer). */
.search-badge {
    font-size: 11px;
    color: var(--text-muted);
    cursor: help;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Phase 11.8 — Web Search settings section: per-bot default checkboxes. */
.settings-search-bots {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin: 6px 0 4px;
}
.settings-search-bot {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--text-main);
    cursor: pointer;
    user-select: none;
}
.settings-search-bot input[type="checkbox"] {
    cursor: pointer;
    accent-color: var(--bot-color, var(--text-main));
}
.settings-search-bot-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bot-color, var(--text-muted));
    flex-shrink: 0;
}

/* Phase 11.8 — synthesis-bar search opt-in (session-scoped checkbox). */
.synth-search-opt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-main);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.synth-search-opt input[type="checkbox"] { cursor: pointer; }
.synth-search-opt.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.synth-search-opt.is-disabled input[type="checkbox"] { cursor: not-allowed; }

@keyframes shimmer-sweep {
    0% { background-position: 250% center; }
    100% { background-position: -250% center; }
}

.col-timer.shimmer-winner {
    background: linear-gradient(
        90deg,
        #4ade80 0%,
        #fbbf24 25%,
        #4ade80 50%,
        #fbbf24 75%,
        #4ade80 100%
    );
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer-sweep 1.8s ease-in-out forwards;
}

.col-timer.winner-solid {
    color: #4ade80;
    -webkit-text-fill-color: #4ade80;
}

.bot-col.is-loading,
.col-debate-section.is-loading,
.synthesis-output.is-loading { animation: borderPulse 1.2s ease-in-out infinite; }

.response-section { position: relative; }
.copy-btn {
    position: absolute; top: 8px; right: 8px;
    opacity: 0; transition: opacity 0.2s, color 0.2s, border-color 0.2s;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 6px; padding: 3px 8px; font-size: 11px;
    cursor: pointer; color: var(--text-muted);
    font-weight: 600; z-index: 2;
}
.response-section:hover .copy-btn { opacity: 1; }
.copy-btn:focus { opacity: 1; outline: none; }
.copy-btn:hover { color: var(--text-main); }
.copy-btn.copied { color: #2ea043; border-color: #2ea043; opacity: 1; }

/* Phase 10.1 — per-code-block copy button. Anchored to each rendered <pre>.
   Markdown block styling is .col-body-scoped, so the other containers need
   their own position:relative for the absolute button to anchor correctly. */
.col-body pre, .col-debate-body pre, .synthesis-output pre, .followup-resp-text pre { position: relative; }
.copy-code-bar { position: sticky; top: 6px; height: 0; text-align: right; z-index: 2; pointer-events: none; }
.copy-code-btn {
    pointer-events: auto; margin-right: 6px;
    opacity: 0; transition: opacity 0.15s, color 0.15s, background 0.15s, border-color 0.15s;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 600;
    cursor: pointer; color: var(--text-muted);
}
.code-block-wrap:hover .copy-code-btn, .copy-code-btn:focus { opacity: 1; outline: none; }
.copy-code-btn:hover { color: var(--text-main); background: var(--surface-hover); }
.copy-code-btn.copied { color: var(--accent-green); border-color: var(--accent-green); opacity: 1; }

.col-body {
    padding: 16px 16px 16px 20px; overflow-y: auto; max-height: 65vh;
    white-space: pre-wrap; word-wrap: break-word; font-size: 14px; line-height: 1.7; cursor: default;
}
.col-body.empty { color: var(--text-muted); font-style: italic; cursor: default; }
.col-body .cursor-blink::after {
    content: "▊"; opacity: 0.6; animation: blink 1s steps(2, start) infinite;
}

/* 6) Thinking block */
.thinking-block {
    margin-bottom: 16px; background: var(--input-bg); border: 1px solid var(--border); border-radius: 8px;
    padding: 10px 14px; font-size: 13px; transition: all 0.2s;
}
.thinking-block summary {
    cursor: pointer; user-select: none; color: var(--text-muted); font-weight: 600;
    list-style: none; display: flex; align-items: center; justify-content: space-between;
}
.thinking-block summary::-webkit-details-marker { display: none; }
.thinking-block summary::after { content: "▾"; opacity: 0.6; transition: transform 0.2s; }
.thinking-block[open] summary::after { transform: rotate(180deg); }
.thinking-content {
    margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border);
    color: var(--text-muted); font-style: italic; white-space: pre-wrap; max-height: 200px; overflow-y: auto; line-height: 1.6;
}

/* 7) Similarity / disagreement */
.col-footer {
    padding: 12px 16px; border-top: 1px solid var(--border);
    border-bottom: 4px solid var(--col-brand-color, transparent); border-radius: 0 0 12px 12px;
    display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--bg);
}
.debate-toggle {
    display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted);
    cursor: pointer; user-select: none; font-weight: 500;
}
.debate-toggle input { accent-color: var(--brand-gem); width: 14px; height: 14px; }
.sim-badge {
    padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 700;
    background: var(--surface-hover); color: var(--text-muted); animation: fadeIn 0.3s ease;
}
.sim-badge.high { background: rgba(46,160,67,0.15);  color: #2ea043; }
.sim-badge.mid  { background: rgba(240,177,58,0.15); color: #d6981e; }
.sim-badge.low  { background: rgba(208,64,64,0.15);  color: #c93b3b; }
.sim-badge.group { background: rgba(66,133,244,0.15); color: var(--brand-gem); }

.error-state {
    margin: 10px 0; padding: 14px; background: var(--error-bg); border: 1px solid var(--error-border); border-radius: 8px;
    color: #cc4444; font-size: 13px;
}
.error-state .retry {
    margin-top: 10px; padding: 6px 14px; background: var(--surface); border: 1px solid var(--error-border); border-radius: 6px; color: inherit; font-size: 12px; font-weight: 600;
}
.error-state .retry:hover { background: var(--error-border); color: #fff; }

.disagreement {
    display: inline-flex; align-items: center; gap: 12px; margin: 0 20px; padding: 10px 20px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 30px;
    box-shadow: 0 4px 16px var(--shadow-color); animation: fadeIn 0.5s ease;
}
.disagreement-stack { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 20px; }
.disagreement-stack .disagreement { margin: 0; }
.disagreement .dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.disagreement.green  .dot { background: #2ea043; box-shadow: 0 0 8px rgba(46,160,67,0.6); }
.disagreement.yellow .dot { background: #f0b13a; box-shadow: 0 0 8px rgba(240,177,58,0.6); }
.disagreement.red    .dot { background: #d04040; box-shadow: 0 0 8px rgba(208,64,64,0.6); }
.disagreement .label { font-weight: 700; font-size: 14px; }
.disagreement .explain { color: var(--text-muted); font-size: 13px; }

/* 8) Action row + debate + synthesis */
.action-row { padding: 24px 20px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.synth-row { justify-content: center; }
.btn-debate, .btn-synth {
    color: #fff; padding: 12px 24px; border-radius: 8px; font-weight: 700; font-size: 14px;
    transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
}
.btn-debate { background: var(--brand-ant); box-shadow: 0 4px 12px rgba(217, 119, 87, 0.3); }
.btn-debate:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 6px 16px rgba(217, 119, 87, 0.4); }
.btn-debate:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; filter: grayscale(1); }

.btn-synth { background: var(--brand-ds); box-shadow: 0 4px 12px rgba(73, 116, 184, 0.3); }
.btn-synth:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 6px 16px rgba(73, 116, 184, 0.4); }
.btn-synth:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

.cost-inline { color: var(--text-muted); font-size: 13px; font-weight: 500; }

.synthesis-output {
    position: relative;
    margin: 8px auto 40px; max-width: max(60vw, 720px); padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--brand-ds);
    border-radius: 12px; box-shadow: 0 4px 20px var(--shadow-color); line-height: 1.7; font-size: 14px;
}
.synthesis-output:hover .copy-btn { opacity: 1; }
.syn-header {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 6px; padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}
.syn-logo {
    width: 20px; height: 20px; object-fit: contain; flex-shrink: 0;
}
.syn-label {
    font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase;
    font-weight: 800; color: var(--col-brand-color, var(--brand-ds));
    margin-bottom: 0;
}

/* 9) Setup modal */
.modal-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center;
    z-index: 100; padding: 20px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.modal {
    background: var(--surface); border-radius: 16px; max-width: 560px; width: 100%; padding: 32px;
    border: 1px solid var(--border); box-shadow: 0 8px 32px var(--shadow-color); max-height: 90vh; overflow-y: auto;
}
.modal h2 { margin-bottom: 12px; font-size: 24px; letter-spacing: -0.3px; }
.modal .lede, .keys-tab .lede { color: var(--text-muted); margin-bottom: 24px; font-size: 14px; line-height: 1.6; }
.modal .key-input, .keys-tab .key-input { margin-bottom: 16px; }
.modal .key-input label, .keys-tab .key-input label {
    display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; color: var(--text-main); margin-bottom: 6px;
}
.modal .key-input input, .keys-tab .key-input input {
    width: 100%; padding: 10px 12px; background: var(--input-bg); border: 1px solid var(--border); border-radius: 8px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; color: var(--text-main);
}
.modal .key-input input:focus, .keys-tab .key-input input:focus { outline: none; border-color: var(--brand-gem); }

/* ─── Sync API keys section (inside settings modal) ───────────────────── */
.sync-section {
    background: color-mix(in srgb, var(--brand-gem) 6%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--brand-gem) 25%, var(--border));
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 22px;
}
.sync-toggle-row {
    display: flex; align-items: flex-start; gap: 12px;
    cursor: pointer;
}
.sync-toggle-row input[type="checkbox"] {
    width: 18px; height: 18px; margin-top: 2px;
    accent-color: var(--brand-gem);
    flex-shrink: 0;
}
.sync-toggle-label {
    display: flex; flex-direction: column; gap: 2px;
}
.sync-toggle-label strong { font-size: 14px; color: var(--text-main); }
.sync-toggle-sub {
    font-size: 11px; color: var(--text-muted);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.sync-details {
    margin-top: 10px;
    border-top: 1px solid color-mix(in srgb, var(--brand-gem) 18%, var(--border));
    padding-top: 10px;
}
.sync-details summary {
    cursor: pointer;
    font-size: 12px;
    color: var(--text-muted);
    user-select: none;
}
.sync-details summary:hover { color: var(--text-main); }
.sync-pros-cons { margin-top: 8px; font-size: 12px; color: var(--text-main); line-height: 1.6; }
.sync-pros-cons strong { color: var(--text-main); }
.sync-pros-cons ul { margin: 4px 0 12px 18px; padding: 0; }
.sync-pros-cons li { margin: 3px 0; color: var(--text-muted); }
.sync-pros-cons li strong { color: var(--text-main); }
.sync-pros-cons code {
    background: var(--code-bg); padding: 1px 5px; border-radius: 3px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px;
    border: 1px solid var(--border);
}

.modal .modal-actions, .keys-tab .modal-actions {
    display: flex; gap: 12px; margin-top: 24px; align-items: center; flex-wrap: wrap; justify-content: space-between;
}
.btn-secondary {
    padding: 10px 18px; border-radius: 8px; font-weight: 600; background: var(--input-bg); border: 1px solid var(--border); color: var(--text-main);
    font-size: 14px; transition: background 0.2s;
}
.btn-secondary:hover { background: var(--surface-hover); }
.free-info { font-size: 13px; color: var(--text-muted); }

/* 10) Animations & Toasts */
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes tooltipFadeIn { from { opacity: 0; transform: translateX(-50%) translateY(4px); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes blink  { 0%, 49% { opacity: 0.6; } 50%, 100% { opacity: 0; } }
@keyframes smoothPopIn { 0% { opacity: 0; transform: translateY(20px) scale(0.96); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes mdFadeIn { from { opacity: 0.4; } to { opacity: 1; } }
@keyframes errorShake {
    0%, 100% { transform: translateX(0); border-color: var(--error-border); color: #d04040; }
    20%, 60% { transform: translateX(-4px); border-color: #d04040; color: #d04040; }
    40%, 80% { transform: translateX(4px); border-color: #d04040; color: #d04040; }
}
.error-shake { animation: errorShake 0.4s ease forwards !important; }
.error-shake img { filter: grayscale(0%) sepia(1) hue-rotate(-50deg) saturate(5) !important; }
@keyframes gearGlow {
    0%, 100% { background: transparent; box-shadow: none; color: var(--text-muted); }
    30%, 70% { background: var(--brand-gem); color: #fff; box-shadow: 0 0 15px var(--brand-gem); }
}
.gear-glow { animation: gearGlow 1.5s ease; }

.error-toast {
    position: absolute; background: var(--error-bg); color: #d04040; border: 1px solid var(--error-border);
    padding: 8px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; pointer-events: none;
    z-index: 100; box-shadow: 0 4px 12px rgba(0,0,0,0.15); animation: toastFade 2.5s forwards; white-space: nowrap;
}
/* Phase 12.4 — success variant (showToast kind='success'): same structure, green
   semantics. color-mix keeps the tint derived from --accent-green (blessed
   pattern from the 12.3 master 🔍) — no new hex tokens; works in both themes. */
.error-toast.is-success {
    background: color-mix(in srgb, var(--accent-green) 12%, var(--surface));
    color: var(--accent-green);
    border-color: var(--accent-green);
}
@keyframes toastFade {
    0% { opacity: 0; transform: translateY(5px) translateX(-50%); }
    10%, 80% { opacity: 1; transform: translateY(0) translateX(-50%); }
    100% { opacity: 0; transform: translateY(-5px) translateX(-50%); }
}

.info-wrap { position: relative; display: inline-block; }
.info-btn {
    width: 26px; height: 26px; border-radius: 50%; background: var(--surface-hover); color: var(--text-muted);
    font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); transition: background 0.2s, color 0.2s, border-color 0.2s; line-height: 1;
}
.info-btn:hover { background: var(--border); color: var(--text-main); border-color: var(--text-muted); }
.info-wrap.show .info-btn { background: var(--brand-gem); color: #fff; border-color: var(--brand-gem); }
.info-tooltip {
    display: none; position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
    width: 340px; max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; padding: 16px 18px; box-shadow: 0 8px 28px var(--shadow-color); z-index: 60;
    font-size: 13px; line-height: 1.55; color: var(--text-main); text-align: left; font-weight: 400; white-space: normal;
}
.info-wrap.show .info-tooltip { display: block; animation: tooltipFadeIn 0.2s ease forwards; }
.info-tooltip .info-title { display: block; margin-bottom: 8px; font-weight: 700; font-size: 14px; color: var(--text-main); }
.info-tooltip p { margin-bottom: 0; }

/* ─── Server stats footer ─────────────────────────────────────────────── */
.stat-footer {
    margin: 28px auto 14px;
    padding: 6px 16px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 11px;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    width: max-content;
    max-width: calc(100vw - 32px);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
.stat-footer .stat-sep { opacity: 0.45; }
.stat-footer .stat {
    position: relative;
    cursor: help;
    padding: 1px 2px;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    white-space: nowrap;
}
.stat-footer .stat .label { color: var(--text-muted); }
.stat-footer .stat .val { font-weight: 600; color: var(--text-main); }
.stat-footer .stat .val.green  { color: #4caf50; }
.stat-footer .stat .val.yellow { color: #ff9800; }
.stat-footer .stat .val.red    { color: #f44336; }
.stat-footer .stat-tip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    max-width: calc(100vw - 32px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: 0 8px 28px var(--shadow-color);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-main);
    z-index: 70;
    text-align: left;
    white-space: normal;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.stat-footer .stat:hover .stat-tip,
.stat-footer .stat:focus-within .stat-tip { opacity: 1; }
.stat-footer .stat-tip .tip-title {
    display: flex; align-items: center; gap: 6px;
    font-weight: 700; font-size: 13px; margin-bottom: 6px;
}
.stat-footer .stat-tip ul {
    margin: 6px 0 0 16px; padding: 0; font-size: 11px; color: var(--text-muted);
}
.stat-footer .stat-tip li { margin: 2px 0; }
.stat-footer .stat-tip .swatch {
    display: inline-block; width: 10px; height: 10px; border-radius: 50%;
    margin-left: 4px; vertical-align: middle;
}

@media (max-width: 480px) {
    .stat-footer { font-size: 10px; gap: 6px; padding: 5px 12px; }
}

/* Subtle indicator when session save fails silently — easy to ignore unless
 * you're debugging, but loud enough to notice. */
body[data-save-failed]::before {
    content: "⚠ Session save failed (status: " attr(data-save-failed) ") — see DevTools console";
    position: fixed;
    bottom: 12px;
    right: 12px;
    background: var(--error-bg);
    color: var(--text-main);
    border: 1px solid var(--error-border);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    z-index: 9999;
    box-shadow: 0 4px 12px var(--shadow-color);
    max-width: 360px;
}

.response-text { white-space: pre-wrap; }
.response-text.md-rendered { white-space: normal; animation: mdFadeIn 0.3s ease; }

/* 12) Markdown rendering overrides */
.col-body p { margin-bottom: 12px; }
.col-body p:last-child { margin-bottom: 0; }
.col-body h1,.col-body h2,.col-body h3,.col-body h4 { margin: 16px 0 8px; font-weight: 700; line-height: 1.3; color: var(--text-main); }
.col-body h1 { font-size: 18px; } .col-body h2 { font-size: 16px; } .col-body h3 { font-size: 15px; }
.col-body ul,.col-body ol { margin: 8px 0 12px 20px; }
.col-body li { margin-bottom: 4px; }
.col-body code { background: var(--code-bg); padding: 2px 6px; border-radius: 4px; font-family: ui-monospace,"SF Mono",Menlo,monospace; font-size: 13px; color: #e2a0ff; border: 1px solid var(--border); }
.col-body pre { background: var(--code-bg); padding: 14px 16px; border-radius: 8px; overflow-x: auto; margin: 12px 0; border: 1px solid var(--border); }
.col-body pre code { background: none; padding: 0; color: inherit; border: none; }
.col-body strong { color: var(--text-main); font-weight: 700; }
.col-body em { color: var(--text-muted); }
.col-body blockquote { border-left: 4px solid var(--border); padding-left: 12px; color: var(--text-muted); margin: 12px 0; font-style: italic; }
.col-body hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
.col-body table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 13px; }
.col-body th,.col-body td { border: 1px solid var(--border); padding: 8px 10px; }
.col-body th { background: var(--surface-hover); font-weight: 700; text-align: left; }

/* Phase 10.1.1 — extend markdown styling to debate / synthesis / follow-up containers.
   (.col-body rules above are left untouched so the initial columns stay byte-identical.) */
.col-debate-body p, .synthesis-output p, .followup-resp-text p { margin-bottom: 12px; }
.col-debate-body p:last-child, .synthesis-output p:last-child, .followup-resp-text p:last-child { margin-bottom: 0; }
.col-debate-body h1, .col-debate-body h2, .col-debate-body h3, .col-debate-body h4,
.synthesis-output h1, .synthesis-output h2, .synthesis-output h3, .synthesis-output h4,
.followup-resp-text h1, .followup-resp-text h2, .followup-resp-text h3, .followup-resp-text h4 { margin: 16px 0 8px; font-weight: 700; line-height: 1.3; color: var(--text-main); }
.col-debate-body h1, .synthesis-output h1, .followup-resp-text h1 { font-size: 18px; }
.col-debate-body h2, .synthesis-output h2, .followup-resp-text h2 { font-size: 16px; }
.col-debate-body h3, .synthesis-output h3, .followup-resp-text h3 { font-size: 15px; }
.col-debate-body ul, .col-debate-body ol, .synthesis-output ul, .synthesis-output ol, .followup-resp-text ul, .followup-resp-text ol { margin: 8px 0 12px 20px; }
.col-debate-body li, .synthesis-output li, .followup-resp-text li { margin-bottom: 4px; }
.col-debate-body code, .synthesis-output code, .followup-resp-text code { background: var(--code-bg); padding: 2px 6px; border-radius: 4px; font-family: ui-monospace,"SF Mono",Menlo,monospace; font-size: 13px; color: #e2a0ff; border: 1px solid var(--border); }
.col-debate-body pre, .synthesis-output pre, .followup-resp-text pre { background: var(--code-bg); padding: 14px 16px; border-radius: 8px; overflow-x: auto; margin: 12px 0; border: 1px solid var(--border); }
.col-debate-body pre code, .synthesis-output pre code, .followup-resp-text pre code { background: none; padding: 0; color: inherit; border: none; }
.col-debate-body strong, .synthesis-output strong, .followup-resp-text strong { color: var(--text-main); font-weight: 700; }
.col-debate-body em, .synthesis-output em, .followup-resp-text em { color: var(--text-muted); }
.col-debate-body blockquote, .synthesis-output blockquote, .followup-resp-text blockquote { border-left: 4px solid var(--border); padding-left: 12px; color: var(--text-muted); margin: 12px 0; font-style: italic; }
.col-debate-body hr, .synthesis-output hr, .followup-resp-text hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
.col-debate-body table, .synthesis-output table, .followup-resp-text table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 13px; }
.col-debate-body th, .col-debate-body td, .synthesis-output th, .synthesis-output td, .followup-resp-text th, .followup-resp-text td { border: 1px solid var(--border); padding: 8px 10px; }
.col-debate-body th, .synthesis-output th, .followup-resp-text th { background: var(--surface-hover); font-weight: 700; text-align: left; }

/* Phase 10.1.2 — frame around each code block. A zero-height sticky bar holds the copy
   button so it stays pinned to the top-right of the visible code as the column scrolls,
   instead of scrolling out of reach. Code keeps horizontal scroll but full height, so the
   column is the single scroll container the sticky bar rides. */
.code-block-wrap { position: relative; margin: 12px 0; }
.code-block-wrap pre { margin: 0; }

/* 13) Inline debate section */
.col-debate-section { border-top: 2px dashed var(--border); background: var(--surface); }
.col-debate-divider {
    padding: 10px 16px; border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center; background: var(--bg);
}
.col-debate-divider span {
    font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); font-weight: 800;
}
.debate-tabs { display: flex; gap: 6px; }
.debate-tab {
    background: var(--input-bg); border: 1px solid var(--border); color: var(--text-muted);
    padding: 2px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; cursor: pointer;
    transition: all 0.2s;
}
.debate-tab:hover { background: var(--surface-hover); color: var(--text-main); }
.debate-tab.active { background: var(--surface-hover); border-color: var(--brand-gem); color: var(--text-main); }

.col-debate-body { padding: 16px 16px 16px 20px; font-size: 14px; line-height: 1.7; max-height: 65vh; overflow-y: auto; }

/* Autoscroll indicator */
.autoscroll-indicator {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    cursor: pointer;
    z-index: 1000;
    transition: opacity 0.3s;
}
.autoscroll-indicator .scroll-stop-icon {
    width: 10px; height: 10px;
    background: var(--text-muted);
    border-radius: 2px;
    flex-shrink: 0;
}

/* 11) Mobile (<= 768px) Overrides */
@media (max-width: 768px) {
    .topbar { flex-wrap: wrap; gap: 10px; padding: 12px 16px; }
    .topbar .prompt-wrap { order: 3; flex-basis: 100%; max-width: none; flex-wrap: wrap; }
    .topbar textarea { flex: 1 1 100%; max-width: none; }
    .topbar .prompt-textarea-wrap { flex: 1 1 100%; max-width: none; }
    .auth-widget { font-size: 12px; gap: 6px; }
    .auth-widget .email { max-width: 110px; }
    .auth-widget .tier-badge { padding: 1px 6px; font-size: 10px; }
    .bot-picker { padding: 12px 16px; gap: 10px; justify-content: flex-start; }
    .bot-btn { width: 70px; height: 64px; font-size: 11px; }
    .bot-btn .svg-icon { transform: scale(0.85); margin-bottom: 2px; }
    .mobile-tabs { display: flex; overflow-x: auto; background: var(--topbar-bg); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; }
    .mobile-tab { padding: 12px 16px; white-space: nowrap; border-bottom: 3px solid transparent; color: var(--text-muted); font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 8px; }
    .mobile-tab.active { color: var(--text-main); }
    .mobile-tab[data-bot="openai"].active { border-bottom-color: var(--brand-oai); }
    .mobile-tab[data-bot="anthropic"].active { border-bottom-color: var(--brand-ant); }
    .mobile-tab[data-bot="gemini"].active { border-bottom-color: var(--brand-gem); }
    .mobile-tab[data-bot="deepseek"].active { border-bottom-color: var(--brand-ds); }
    .mobile-tab[data-bot="xai"].active { border-bottom-color: var(--brand-xai); }
    .grid-wrap { padding: 0; }
    .response-grid { display: block; gap: 0; }
    .bot-col { display: none; border-radius: 0; min-height: 70vh; box-shadow: none; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 4px solid transparent; border-right: 4px solid transparent; }
    .bot-col > div { border-left: 0; border-right: 0; }
    .col-footer { border-bottom: 0; }
    .bot-col.mobile-active { display: flex; animation: smoothPopIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
    .col-body { max-height: none; }
    .col-head { position: static; top: auto; z-index: auto; }
    .disagreement { margin: 16px 16px 0; display: flex; }
    .disagreement-stack { padding: 0 16px; align-items: stretch; }
    .disagreement-stack .disagreement { margin: 0; }
}

/* ─── Phase 3: Shareable Links & Read-Only View ───────────────────────── */
.ro-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(66, 133, 244, 0.15); color: var(--brand-gem);
    padding: 6px 10px; border-radius: 6px; font-size: 12px; font-weight: 700;
    white-space: nowrap; border: 1px solid rgba(66, 133, 244, 0.3);
}
.btn-fork {
    background: var(--brand-gem); color: #fff; border: none; padding: 8px 16px; border-radius: 8px; 
    font-weight: 600; font-size: 13px; cursor: pointer; transition: transform 0.2s, filter 0.2s;
    white-space: nowrap; flex-shrink: 0;
}
.btn-fork:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn-fork:disabled { opacity: 0.6; cursor: not-allowed; transform: none; filter: none; }

.history-tabs { display: flex; gap: 20px; padding: 0 18px; border-bottom: 1px solid var(--border); background: var(--surface); }
.history-tab { padding: 14px 0; font-weight: 600; font-size: 14px; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; }
.history-tab:hover { color: var(--text-main); }
.history-tab.active { color: var(--text-main); border-bottom-color: var(--brand-gem); }

.share-inline-form {
    margin-top: 10px; padding: 14px; background: var(--surface-hover); 
    border: 1px solid var(--border); border-radius: 8px; display: none;
}
.share-inline-form.active { display: block; animation: fadeIn 0.2s ease; }
.share-inline-form .row { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.share-inline-form select { padding: 6px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text-main); font-size: 13px; outline: none; }
.share-link-result { display: flex; gap: 8px; margin-top: 10px; }
.share-link-result input { flex: 1; padding: 8px 12px; font-size: 13px; border-radius: 6px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text-main); font-family: ui-monospace, monospace; }

.centered-msg-card {
    max-width: 440px; margin: 120px auto; padding: 40px 30px; background: var(--surface); 
    border: 1px solid var(--border); border-radius: 16px; text-align: center; box-shadow: 0 12px 40px var(--shadow-color);
}
.centered-msg-card h2 { margin-bottom: 12px; font-size: 20px; }
.centered-msg-card p { color: var(--text-muted); margin-bottom: 24px; line-height: 1.6; }

/* Lifetime badge mirrors the Pro (paid) badge styling. */
.auth-widget .tier-badge.lifetime {
    background: var(--brand-gem); color: #fff; border-color: var(--brand-gem);
}

/* ── Phase 4: account / plan modal ─────────────────────────────────────────── */
/* The tier badge is the single entry point — make it read as clickable. */
.tier-badge.tier-badge-clickable { cursor: pointer; transition: filter 0.15s, transform 0.15s; }
.tier-badge.tier-badge-clickable:hover { filter: brightness(1.08); transform: translateY(-1px); }
.tier-badge.tier-badge-clickable:focus-visible { outline: 2px solid var(--brand-gem); outline-offset: 2px; }

/* Reuses the shared .modal-backdrop / .modal shell; these are the extras. */
.account-modal { position: relative; max-width: 480px; }
.account-close {
    position: absolute; top: 14px; right: 16px;
    background: none; border: none; color: var(--text-muted);
    font-size: 22px; line-height: 1; cursor: pointer;
    padding: 2px 6px; border-radius: 6px;
}
.account-close:hover { background: var(--surface-hover); color: var(--text-main); }

.account-title { font-size: 22px; letter-spacing: -0.3px; margin-bottom: 18px; padding-right: 28px; }
.account-body { color: var(--text-muted); font-size: 14px; line-height: 1.6; margin-bottom: 20px; }

.account-benefits { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.account-benefits li { position: relative; padding-left: 26px; font-size: 14px; color: var(--text-main); line-height: 1.5; }
.account-benefits li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--brand-gem); font-weight: 700; }
.benefit-note { color: var(--text-muted); font-weight: 400; }

.account-plan { font-size: 14px; font-weight: 700; color: var(--text-main); margin-bottom: 18px; }

.account-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.account-buy { display: inline-flex; align-items: baseline; gap: 6px; }
.account-buy:disabled { opacity: 0.6; cursor: not-allowed; }
.account-price { font-weight: 700; font-size: 12px; opacity: 0.9; }

.account-fineprint { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin: 0; }

/* ───────── Phase 7.9 — Profile modal (Overview + API Keys tabs) ───────── */
/* Username/email in the auth widget is now a button-like entry point. */
.auth-widget #profile-entry { cursor: pointer; border-radius: 6px; transition: color 0.15s; }
.auth-widget #profile-entry:hover { color: var(--brand-gem); }
.auth-widget #profile-entry:focus-visible { outline: 2px solid var(--brand-gem); outline-offset: 2px; }

/* First-Ask / "API key required" cue — reuses gearGlow on the profile entry. */
.profile-entry-glow { animation: gearGlow 1.5s ease infinite; border-radius: 8px; }

/* Profile Overview tab */
.profile-overview { padding: 18px; display: flex; flex-direction: column; gap: 22px; }
.profile-identity { display: flex; align-items: center; gap: 14px; }
.profile-avatar {
    width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 700; letter-spacing: 0.5px;
    /* background + text color generated per-user in JS (hsl, no hex) — see renderOverviewTab() */
}
.profile-identity-text { flex: 1; min-width: 0; }
.profile-email { font-weight: 600; font-size: 14px; color: var(--text-main); word-break: break-all; }
.profile-plan-label { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.profile-signout { margin: 0; flex-shrink: 0; }
.profile-signout .signout-btn {
    color: var(--brand-gem); background: none; border: 1px solid var(--border);
    cursor: pointer; padding: 6px 12px; font-size: 13px; font-weight: 600;
    font-family: inherit; border-radius: 6px; transition: background 0.15s;
}
.profile-signout .signout-btn:hover { background: var(--surface-hover); }
.profile-section { border-top: 1px solid var(--border); padding-top: 20px; }
.profile-section .account-title { font-size: 18px; margin-bottom: 14px; padding-right: 0; }

/* API Keys tab */
.keys-tab { padding: 18px; }
.keys-tab .lede { margin-top: 0; }

/* ── Phase 5: ask-button pulse, onboarding modal, contact/feedback modal ───── */

/* 1) Ask All button pulse — fires when ?prompt= prefills the box. Modelled on
   gearGlow; 3 cycles then stops. #ask-btn is already --brand-gem, so we pulse
   the glow only. */
@keyframes askBtnPulse {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    50%      { box-shadow: 0 0 16px 2px var(--brand-gem); }
}
.ask-btn-glow  { animation: askBtnPulse 1.2s ease infinite; }   /* glows until hover/click */

/* 2) Onboarding ("About PolyCog") modal — reuses .modal-backdrop / .modal. */
.onboarding-modal { position: relative; }
.onboarding-close {
    position: absolute; top: 14px; right: 16px;
    background: none; border: none; color: var(--text-muted);
    font-size: 22px; line-height: 1; cursor: pointer;
    padding: 2px 6px; border-radius: 6px;
}
.onboarding-close:hover { background: var(--surface-hover); color: var(--text-main); }

.onboarding-logos { display: flex; gap: 14px; align-items: center; justify-content: center; margin-bottom: 16px; }
.onboarding-logos img { width: 24px; height: 24px; }

.onboarding-modal h1 { font-size: 22px; letter-spacing: -0.3px; margin: 4px 0 12px; }
.onboarding-lead { color: var(--text-muted); font-size: 14px; line-height: 1.6; margin-bottom: 14px; }

.onboarding-points { margin: 0 0 4px; padding-left: 20px; }
.onboarding-points li { margin: 7px 0; font-size: 14px; color: var(--text-main); line-height: 1.5; }

.onboarding-hr { border: none; border-top: 1px solid var(--border); margin: 20px 0; }

.onboarding-subhead { font-size: 15px; font-weight: 700; color: var(--text-main); margin: 0 0 8px; }
.onboarding-keys-blurb { color: var(--text-muted); font-size: 13px; line-height: 1.6; margin: 0 0 8px; }

.onboarding-api-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 4px; }
.onboarding-api-btn {
    padding: 10px 12px; border-radius: 8px; font-weight: 600; font-size: 13px;
    background: var(--input-bg); border: 1px solid var(--border); color: var(--text-main);
    transition: background 0.2s, border-color 0.2s; text-align: center;
}
.onboarding-api-btn:hover { background: var(--surface-hover); border-color: var(--brand-gem); }

/* Collapsible "What exactly is an API key?" — suppress the native marker so the
   manual ▸ glyph in the summary text is the only disclosure indicator. */
.onboarding-details { margin: 6px 0 2px; }
.onboarding-details summary {
    cursor: pointer; font-size: 13px; color: var(--text-muted); user-select: none; list-style: none;
}
.onboarding-details summary::-webkit-details-marker { display: none; }
.onboarding-details summary::marker { content: ''; }
.onboarding-details summary:hover { color: var(--text-main); }
.onboarding-details p { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin-top: 8px; }

.onboarding-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.onboarding-footer label { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-muted); cursor: pointer; }
/* Phase 13.6 — all three CTAs share one right-aligned group (no orphaned
   Let's Go row); wraps as a whole on narrow widths. */
.onboarding-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.onboarding-sample-btn {
    background: var(--accent-green); color: #fff;
    padding: 10px 18px; border-radius: 8px; font-weight: 600; font-size: 14px;
    border: none; white-space: nowrap; cursor: pointer;
    transition: transform 0.2s, filter 0.2s;
}
.onboarding-sample-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }

/* 3) Contact / Feedback modal — reuses .modal-backdrop / .modal, and the
   existing .history-tab label styling. Only the tab container is new. */
.contact-modal { position: relative; }
.contact-close {
    position: absolute; top: 14px; right: 16px;
    background: none; border: none; color: var(--text-muted);
    font-size: 22px; line-height: 1; cursor: pointer;
    padding: 2px 6px; border-radius: 6px;
}
.contact-close:hover { background: var(--surface-hover); color: var(--text-main); }

.contact-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }

.contact-form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.contact-form-group label { font-size: 13px; font-weight: 600; color: var(--text-main); }
.contact-form-group input,
.contact-form-group select,
.contact-form-group textarea {
    width: 100%; padding: 10px 12px; background: var(--input-bg);
    border: 1px solid var(--border); border-radius: 8px; color: var(--text-main);
    font-size: 14px; font-family: inherit;
}
.contact-form-group textarea { resize: vertical; min-height: 120px; }
.contact-form-group input:focus,
.contact-form-group select:focus,
.contact-form-group textarea:focus { outline: none; border-color: var(--brand-gem); }

.contact-note { font-size: 12px; color: var(--text-muted); margin: -6px 0 14px; line-height: 1.5; }
.contact-note a { color: var(--brand-gem); }

.contact-inline-error { font-size: 13px; color: var(--error-text); font-weight: 600; margin-top: 10px; }

.contact-success { text-align: center; padding: 24px 8px; }
.contact-success h3 { font-size: 18px; margin-bottom: 16px; color: var(--text-main); }

/* ── Phase 6: sample → login conversion modal (reuses .modal shell) ────────── */
.convert-modal { position: relative; max-width: 460px; }
.convert-close {
    position: absolute; top: 14px; right: 16px;
    background: none; border: none; color: var(--text-muted);
    font-size: 22px; line-height: 1; cursor: pointer;
    padding: 2px 6px; border-radius: 6px;
}
.convert-close:hover { background: var(--surface-hover); color: var(--text-main); }
.convert-modal .account-fineprint a { color: var(--brand-gem); }

/* ── Phase 6: header share button glow + bottom toast ──────────────────────── */
@keyframes shareGlow {
    0%, 100% { box-shadow: none; color: var(--text-muted); }
    30%, 70% { box-shadow: 0 0 14px var(--accent-share); color: var(--accent-share); }
}
.share-glow { animation: shareGlow 1.8s ease 3; }
.share-btn-locked { cursor: not-allowed; opacity: 0.55; }

.bottom-toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 1000;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent-share);
    border-radius: 6px; padding: 12px 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    display: flex; align-items: center; gap: 12px; font-size: 13px;
    color: var(--text-main); white-space: nowrap; animation: slideUpToast 0.25s ease;
}
@keyframes slideUpToast {
    from { transform: translateX(-50%) translateY(16px); opacity: 0; }
    to   { transform: translateX(-50%) translateY(0);    opacity: 1; }
}

.share-manage-modal { position: relative; max-width: 480px; }
.share-manage-close {
    position: absolute; top: 14px; right: 16px;
    background: none; border: none; color: var(--text-muted);
    font-size: 22px; line-height: 1; cursor: pointer;
    padding: 2px 6px; border-radius: 6px;
}
.share-manage-close:hover { background: var(--surface-hover); color: var(--text-main); }
.share-manage-modal .btn-revoke.danger {
    background: var(--input-bg); border: 1px solid var(--error-border);
    color: var(--error-text); padding: 10px 18px; border-radius: 8px;
    font-weight: 600; font-size: 14px;
}
.share-manage-modal .btn-revoke.danger:hover { background: var(--error-bg); }

/* ── Phase 6.5: split copy button, bottom action bar, export modal, toast ──── */

/* Split copy button. NOTE: position is absolute (spec said relative) so the
   button floats top-right of the response box and reveals on hover, matching
   the old .copy-btn behavior; absolute still anchors the dropdown below it. */
.copy-split-btn {
    position: absolute;
    top: 8px; right: 8px;
    display: inline-flex;
    align-items: stretch;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 3;
}
.response-section:hover .copy-split-btn,
.synthesis-output:hover .copy-split-btn,
.followup-resp:hover .copy-split-btn,
.copy-split-btn:focus-within,
.copy-split-btn.menu-open { opacity: 1; overflow: visible; }

.copy-main-btn {
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-right: none;
    border-radius: 6px 0 0 6px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
}
.copy-main-btn:hover, .copy-main-btn.copied { color: var(--text-main); background: var(--surface-hover); }
.copy-chevron-btn {
    padding: 3px 6px;
    font-size: 10px;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0 6px 6px 0;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}
.copy-chevron-btn:hover { color: var(--text-main); background: var(--surface-hover); }
.copy-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px var(--shadow-color);
    z-index: 60;
    min-width: 210px;
    overflow: hidden;
    align-self: flex-start;
    height: auto;
    white-space: normal;
}
.copy-dropdown[hidden] { display: none; }
.copy-opt {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.12s;
    position: relative;
}
.copy-opt:hover { background: var(--surface-hover); }
.copy-opt + .copy-opt { border-top: 1px solid var(--border); }
.copy-opt-tip {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.4;
    white-space: normal;
}

/* Bottom action bar */
#bottom-action-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
    margin: 16px auto 8px;
    padding: 0;
}
.bottom-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    transition: color 0.15s, transform 0.15s;
    padding: 8px;
    border-radius: 10px;
}
.bottom-action-btn:hover { color: var(--text-main); transform: translateY(-2px); }
.bottom-action-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}
.bottom-action-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Export modal */
.export-modal { position: relative; max-width: 460px; }
.export-close {
    position: absolute; top: 14px; right: 16px;
    background: none; border: none; color: var(--text-muted);
    font-size: 22px; line-height: 1; cursor: pointer;
    padding: 2px 6px; border-radius: 6px;
}
.export-close:hover { background: var(--surface-hover); color: var(--text-main); }
.export-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}
.export-opt-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    text-align: left;
    padding: 14px 16px;
    background: var(--surface-hover);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    color: var(--text-main);
}
.export-opt-btn:hover { border-color: var(--brand-gem); background: var(--surface); }
.export-opt-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.export-opt-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    color: var(--text-muted);
    transition: color 0.15s;
}
.export-opt-icon svg { width: 26px; height: 26px; display: block; }
.export-opt-btn:hover .export-opt-icon { color: var(--brand-gem); }
.export-opt-text { display: block; min-width: 0; }
.export-opt-title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 4px;
}
.export-opt-desc {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Toast notification */
.toast-notification {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    box-shadow: 0 4px 16px var(--shadow-color);
    z-index: 200;
    pointer-events: none;
    animation: toastIn 0.2s ease, toastOut 0.3s ease 1.7s forwards;
}
@keyframes toastIn  { from { opacity: 0; transform: translateX(-50%) translateY(8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; } }
/* ════════════════════════════════════════════════════════════════════════════
 * Phase 7 — Memory system + Incognito  (append to end of style.css)
 * Variables only — no hardcoded hex. Reuses --surface/--surface-hover/--border/
 * --text-main/--text-muted/--warning-*/--accent-green/--accent-share/--bg.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ─── Memory Tab shell ─────────────────────────────────────────────────────── */
.memory-tab-content { padding: 4px 2px 8px; }

.memory-info { position: relative; display: inline-flex; align-items: center; cursor: help; }
.memory-info-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%;
    border: 1px solid var(--border); color: var(--text-muted);
    font-size: 10px; font-weight: 700; line-height: 1;
}
.memory-info:hover .memory-info-icon,
.memory-info:focus-within .memory-info-icon { color: var(--text-main); border-color: var(--text-muted); }
.memory-info-tip {
    position: absolute; top: calc(100% + 8px); left: 0;
    width: 280px; max-width: calc(100vw - 32px);
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    padding: 12px 14px; box-shadow: 0 8px 28px var(--shadow-color);
    font-size: 12px; line-height: 1.5; color: var(--text-main);
    z-index: 70; text-align: left; white-space: normal;
    opacity: 0; pointer-events: none; transition: opacity 0.15s ease;
}
.memory-info:hover .memory-info-tip,
.memory-info:focus-within .memory-info-tip { opacity: 1; }
.memory-info-tip .tip-title { display: block; font-weight: 700; font-size: 13px; margin-bottom: 6px; color: var(--text-main); }
.memory-toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 10px 12px; margin-bottom: 12px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
}
.memory-switch { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; color: var(--text-main); }
.memory-switch input { width: 16px; height: 16px; accent-color: var(--accent-green); }
.memory-switch-state { font-size: 12px; font-weight: 700; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; }
.memory-switch-state.on  { color: var(--accent-green); background: var(--surface-hover); }
.memory-switch-state.off { color: var(--text-muted);   background: var(--surface-hover); }

.memory-toggle-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.memory-usage { width: 180px; flex-shrink: 0; text-align: right; }
#memory-count-label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.memory-progress-bar { height: 8px; background: var(--surface-hover); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.memory-progress-fill { height: 100%; background: var(--accent-share); transition: width .25s ease; }

/* ─── Extract-from-recent panel ────────────────────────────────────────────── */
.memory-extract-panel { margin-bottom: 14px; }
.memory-extract-toggle {
    width: 100%; text-align: left; cursor: pointer;
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    color: var(--text-main); font-size: 13px; padding: 9px 12px;
}
.memory-extract-toggle:hover { background: var(--surface-hover); }
.memory-extract-body { display: flex; align-items: center; gap: 10px; padding: 10px 4px 2px; }
/* [hidden] must beat the display:flex above (equal specificity → later rule wins).
   Phase 7.7 — without this the idle body (and its placeholder) leaked an empty gap. */
.memory-extract-body[hidden] { display: none; }
.memory-extract-status { flex: 1; font-size: 12px; color: var(--text-muted); }
.memory-extract-sub { font-size: 11px; color: var(--text-muted); margin: 6px 2px 0; line-height: 1.4; }

/* Phase 7.9.9 — Import from another AI panel (mirrors .memory-extract-* patterns). */
.memory-import-panel { margin-bottom: 14px; }
.memory-import-toggle {
    width: 100%; text-align: left; cursor: pointer;
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    color: var(--text-main); font-size: 13px; padding: 9px 12px;
}
.memory-import-toggle:hover { background: var(--surface-hover); }
.memory-import-body { padding: 12px 4px 2px; }
.memory-import-body[hidden] { display: none; }

.memory-import-providers {
    display: flex; justify-content: center; flex-wrap: wrap;
    gap: 18px; padding: 4px 0 10px;
}
.memory-import-provider {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    background: none; border: none; cursor: pointer; padding: 4px 6px;
    border-radius: 8px; transition: transform 0.12s ease, opacity 0.12s ease;
}
.memory-import-provider:hover { transform: translateY(-2px); opacity: 0.85; }
.memory-import-provider img { width: 36px; height: 36px; display: block; object-fit: contain; }
.memory-import-provider-label { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.memory-import-provider.copied { transform: none; opacity: 1; }
.memory-import-provider.copied .memory-import-provider-label { color: var(--accent-green); }

.memory-import-how-toggle {
    background: none; border: none; cursor: pointer; padding: 2px 0;
    color: var(--text-muted); font-size: 12px; text-decoration: underline;
}
.memory-import-how-toggle:hover { color: var(--text-main); }
.memory-import-how { padding: 6px 0 2px 14px; }
.memory-import-how[hidden] { display: none; }
.memory-import-steps {
    margin: 0 0 8px; padding-left: 18px; font-size: 12px;
    color: var(--text-muted); line-height: 1.6;
}
.memory-import-steps li { margin: 2px 0; }
.memory-import-tip { font-size: 11px; color: var(--text-muted); line-height: 1.5; }

.memory-import-textarea {
    width: 100%; min-height: 110px; margin-top: 10px; resize: vertical;
    background: var(--input-bg); border: 1px solid var(--border); border-radius: 8px;
    color: var(--text-main); font-size: 13px; line-height: 1.5; padding: 10px 12px;
    font-family: inherit;
}
.memory-import-textarea:focus { outline: none; border-color: var(--text-muted); }

.memory-import-counter-row { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.memory-import-counter { font-size: 11px; color: var(--text-muted); }
.memory-import-clear {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); font-size: 12px; padding: 2px 4px;
}
.memory-import-clear:hover { color: var(--text-main); }

.memory-import-warn { font-size: 12px; margin-top: 6px; line-height: 1.4; }
.memory-import-warn[hidden] { display: none; }
.memory-import-warn.soft  { color: var(--warning-border); }
.memory-import-warn.error { color: var(--error-text); }

.memory-import-nokey { font-size: 12px; color: var(--warning-border); margin-top: 8px; line-height: 1.4; }

.memory-import-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.memory-import-info { color: var(--text-muted); font-size: 14px; cursor: default; line-height: 1; }

.memory-import-status { font-size: 12px; color: var(--text-muted); margin-top: 8px; line-height: 1.4; }
.memory-import-status[hidden] { display: none; }
.memory-import-status.error { color: var(--error-text); }

.memory-notes { margin-top: 14px; }
.memory-notes > summary {
    cursor: pointer; list-style: none; user-select: none;
    font-size: 12px; color: var(--text-muted); padding: 6px 2px;
}
.memory-notes > summary::-webkit-details-marker { display: none; }
.memory-notes > summary:hover { color: var(--text-main); }
.memory-notes[open] > summary { margin-bottom: 6px; }

/* ─── Category groups + cards ──────────────────────────────────────────────── */
/* Phase 7.8 — each category (and the Pinned pseudo-group) is a tinted, rounded
   .memory-group: a faint bg on the wrapper and a more-saturated bar on the head.
   Cards keep background:var(--surface) (below) so their per-state cues still read
   on top of the tint. Hexes live only in the :root token defs above. */
.memory-group {
    background: var(--surface);
    border: 1px solid var(--border); border-radius: 12px;
    margin: 12px 0; padding: 0 10px 2px; overflow: clip;
}
.memory-groups > .memory-group:first-child { margin-top: 6px; }

.memory-cat-head {
    margin: 0 -10px; padding: 9px 12px;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--text-main);
    border-bottom: 1px solid var(--border);
}
.memory-cat-toggle {
    display: inline-flex; align-items: center; gap: 7px; min-width: 0;
    cursor: pointer; user-select: none; border-radius: 6px; outline-offset: 2px;
}
.memory-cat-toggle:focus-visible { outline: 2px solid var(--accent-share); }
.memory-cat-chevron {
    display: inline-block; font-size: 10px; line-height: 1; color: var(--text-muted);
    transition: transform 0.2s ease;
}
.memory-cat-toggle[aria-expanded="true"] .memory-cat-chevron { transform: rotate(90deg); }

.memory-group-body { transition: height 0.27s ease; }
.memory-group-body.collapsed { height: 0; overflow: hidden; }
.memory-group-body > .memory-card:first-child,
.memory-group-body > .memory-add-editor:first-child { margin-top: 10px; }
.memory-group-body > .memory-card:last-child { margin-bottom: 2px; }

/* per-category tint mapping (data-cat → tokens) */
.memory-group[data-cat="expertise"]   { background: var(--mem-cat-expertise-bg); }
.memory-group[data-cat="expertise"]   .memory-cat-head { background: var(--mem-cat-expertise-head); }
.memory-group[data-cat="preferences"] { background: var(--mem-cat-preferences-bg); }
.memory-group[data-cat="preferences"] .memory-cat-head { background: var(--mem-cat-preferences-head); }
.memory-group[data-cat="context"]     { background: var(--mem-cat-context-bg); }
.memory-group[data-cat="context"]     .memory-cat-head { background: var(--mem-cat-context-head); }
.memory-group[data-cat="opinions"]    { background: var(--mem-cat-opinions-bg); }
.memory-group[data-cat="opinions"]    .memory-cat-head { background: var(--mem-cat-opinions-head); }
.memory-group[data-cat="personal"]    { background: var(--mem-cat-personal-bg); }
.memory-group[data-cat="personal"]    .memory-cat-head { background: var(--mem-cat-personal-head); }
.memory-group[data-cat="general"]     { background: var(--mem-cat-general-bg); }
.memory-group[data-cat="general"]     .memory-cat-head { background: var(--mem-cat-general-head); }
.memory-group[data-cat="pinned"]      { background: var(--mem-cat-pinned-bg); }
.memory-group[data-cat="pinned"]      .memory-cat-head { background: var(--mem-cat-pinned-head); }

@media (prefers-reduced-motion: reduce) {
    .memory-group-body { transition: none; }
    .memory-cat-chevron { transition: none; }
}
.memory-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    padding: 10px 12px; margin-bottom: 8px;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.memory-card:hover { box-shadow: 0 2px 12px var(--shadow-color); border-color: var(--text-muted); }
.memory-card.editing { border-color: var(--accent-share); }
.memory-card-text { font-size: 14px; color: var(--text-main); line-height: 1.45; cursor: text; }
.memory-edit-textarea {
    width: 100%; box-sizing: border-box; resize: vertical; min-height: 60px;
    background: var(--input-bg); border: 1px solid var(--border); border-radius: 6px;
    color: var(--text-main); font: inherit; padding: 8px;
}
.memory-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.memory-cat-select {
    background: var(--input-bg); border: 1px solid var(--border); border-radius: 6px;
    color: var(--text-main); font-size: 12px; padding: 4px 6px;
}

/* tag chips */
.memory-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 120px; }
.memory-tag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10px; color: var(--text-muted);
    background: var(--surface-hover); border: none; border-radius: 999px;
    padding: 2px 7px;
}
.memory-tag-remove { cursor: pointer; font-weight: 700; line-height: 1; color: var(--text-muted); }
.memory-tag-remove:hover { color: var(--error-text); }
.memory-tag-add {
    width: 64px; font-size: 11px; padding: 2px 6px;
    background: var(--input-bg); border: 1px dashed var(--border); border-radius: 999px; color: var(--text-main);
}

/* card buttons */
.memory-pin-btn, .memory-delete-btn, .memory-reembed-btn {
    cursor: pointer; border: 1px solid var(--border); border-radius: 6px;
    background: var(--surface); color: var(--text-muted); font-size: 13px; line-height: 1;
    padding: 4px 8px;
}
.memory-pin-btn:hover, .memory-delete-btn:hover, .memory-reembed-btn:hover { background: var(--surface-hover); color: var(--text-main); }
.memory-pin-btn.pinned { color: var(--warning-border); border-color: var(--warning-border); }
.memory-pin-btn:disabled { opacity: .4; cursor: not-allowed; }
.memory-delete-btn:hover { color: var(--error-text); border-color: var(--error-border); }
.memory-reembed-btn { color: var(--warning-border); border-color: var(--warning-border); font-size: 11px; }

.memory-edit-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
/* [hidden] must beat the display:flex above (equal specificity → later rule wins). */
.memory-edit-actions[hidden] { display: none; }
.memory-char-count { flex: 1; font-size: 11px; color: var(--text-muted); }
.btn-ghost {
    cursor: pointer; background: transparent; border: 1px solid var(--border); border-radius: 6px;
    color: var(--text-muted); font-size: 13px; padding: 6px 12px;
}
.btn-ghost:hover { background: var(--surface-hover); color: var(--text-main); }

.memory-delete-all {
    display: block; width: fit-content; margin: 16px auto 6px; cursor: pointer;
    background: var(--error-bg); border: 1px solid var(--error-border); border-radius: 8px;
    color: var(--error-text); font-size: 13px; padding: 9px 16px;
}

.memory-disclaimer {
    font-size: 11px; line-height: 1.5; border-radius: 8px; padding: 10px 12px; margin-top: 10px;
}
.memory-disclaimer.warn { background: var(--warning-bg); border: 1px solid var(--warning-border); color: var(--text-main); }
.memory-disclaimer.lock { background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); }

/* ─── Preview modal ────────────────────────────────────────────────────────── */
.memory-preview-modal { max-width: 620px; width: 92vw; }
/* Phase 7.9.9 — the preview modal can be spawned from inside the Profile modal
   (.history-modal, z-index 250); its shared .modal-backdrop sits at z-index 100,
   so without this it renders BEHIND the open Profile modal. ID beats the class. */
#memory-preview-backdrop { z-index: 260; }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.modal-head h2 { margin: 0; font-size: 18px; color: var(--text-main); }
.modal-sub { font-size: 13px; color: var(--text-muted); margin: 4px 0 12px; }
.memory-preview-list { max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.memory-preview-item {
    display: flex; gap: 10px; padding: 10px; align-items: flex-start;
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
}
.memory-preview-item.over-cap { opacity: .5; }
.memory-preview-item.saving { opacity: .65; }
.memory-preview-item.saved  { border-color: var(--accent-green); }
.memory-preview-item.failed { border-color: var(--error-border); }
.memory-preview-item.saved .mp-check,
.memory-preview-item.failed .mp-check,
.memory-preview-item.saving .mp-check { visibility: hidden; }
.memory-preview-item .mp-check { margin-top: 6px; width: 16px; height: 16px; accent-color: var(--accent-green); }
.mp-body { flex: 1; }
.mp-text {
    width: 100%; box-sizing: border-box; resize: vertical; min-height: 46px;
    background: var(--input-bg); border: 1px solid var(--border); border-radius: 6px;
    color: var(--text-main); font: inherit; font-size: 13px; padding: 6px 8px;
}
.mp-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.mp-cat { background: var(--input-bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text-main); font-size: 12px; padding: 3px 6px; }
.mp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.memory-preview-progress { font-size: 12px; color: var(--text-muted); margin-top: 10px; text-align: right; }

/* ─── Phase 7.6 — dedup flag in preview modal ──────────────────────────────── */
.memory-preview-item.flagged { border-color: var(--warning-border); }
.mp-similar {
    margin-top: 8px; padding: 8px 10px; border-radius: 6px;
    background: var(--warning-bg); border: 1px solid var(--warning-border);
    font-size: 12px; line-height: 1.45;
}
.mp-similar-warn { color: var(--text-main); font-weight: 600; }
.mp-similar-existing { color: var(--text-muted); margin-top: 4px; }
.mp-similar-choice { display: flex; gap: 14px; margin-top: 8px; }
.mp-similar-choice label {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; color: var(--text-main); cursor: pointer; font-weight: 500;
}
.mp-similar-choice input[type="radio"] { accent-color: var(--accent-share); }

/* ─── Phase 7.6 — pinned-budget gauge (Memory tab) ─────────────────────────── */
.memory-pinned-gauge { margin: 4px 0 14px; }
.memory-pinned-gauge-label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.memory-pinned-gauge-bar {
    height: 6px; background: var(--surface-hover);
    border: 1px solid var(--border); border-radius: 999px; overflow: hidden;
}
.memory-pinned-gauge-fill { height: 100%; background: var(--warning-border); transition: width .25s ease; }
.memory-pinned-gauge.over .memory-pinned-gauge-fill { background: var(--error-text); }
.memory-pinned-gauge.over .memory-pinned-gauge-label { color: var(--error-text); }

/* ─── Phase 7.6 — memory provenance line on card ───────────────────────────── */
.memory-card-source { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* ─── Phase 7.7 — per-category manual add ──────────────────────────────────── */
.memory-cat-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.memory-cat-head-label { display: inline-block; }
.memory-empty-hint { font-size: 13px; color: var(--text-muted); margin: 6px 2px 14px; line-height: 1.5; }
.memory-add-btn {
    cursor: pointer; border: 1px solid var(--border); border-radius: 6px;
    background: var(--surface); color: var(--text-muted);
    font-size: 11px; font-weight: 600; line-height: 1; padding: 4px 9px;
    text-transform: none; letter-spacing: 0;
}
.memory-add-btn:hover { background: var(--surface-hover); color: var(--text-main); }
.memory-add-editor {
    display: block; margin: 0 0 10px;
    background: var(--surface); border: 1px solid var(--accent-share); border-radius: 10px;
    padding: 10px 12px;
}
/* [hidden] must beat the display:block above (equal specificity → later rule wins). */
.memory-add-editor[hidden] { display: none; }
.memory-add-text {
    width: 100%; box-sizing: border-box; resize: vertical; min-height: 60px;
    background: var(--input-bg); border: 1px solid var(--border); border-radius: 6px;
    color: var(--text-main); font: inherit; font-size: 14px; padding: 8px;
}
.memory-add-hint { font-size: 11px; color: var(--text-muted); margin-top: 6px; line-height: 1.4; }
.memory-add-hint[hidden] { display: none; }
.memory-add-tags { margin-top: 8px; }
.memory-add-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.memory-add-count { flex: 1; }
.memory-add-error {
    margin-top: 8px; font-size: 12px; line-height: 1.45; border-radius: 6px; padding: 8px 10px;
    background: var(--warning-bg); border: 1px solid var(--warning-border); color: var(--text-main);
}
.memory-add-error[hidden] { display: none; }

/* ─── Phase 7.7 — pinned conflict review marker (card) ─────────────────────── */
.memory-card-conflict { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* ─── Phase 7.6 — injection transparency readout (debate view) ─────────────── */
.mem-readout { margin: 10px 0 0; text-align: center; }
.mem-readout-synth { margin: 0 0 10px; }
.mem-readout-badge {
    position: relative; display: inline-flex; align-items: center; gap: 6px;
    cursor: default; padding: 3px 10px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--border);
    font-size: 12px; color: var(--text-muted);
}
.mem-readout-badge:hover, .mem-readout-badge:focus-within { color: var(--text-main); border-color: var(--text-muted); }
.mem-readout-count { font-weight: 600; }
.mem-readout-tip {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    max-width: calc(100vw - 32px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: 0 8px 28px var(--shadow-color);
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-main);
    z-index: 70;
    text-align: left;
    white-space: normal;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.mem-readout-badge:hover .mem-readout-tip,
.mem-readout-badge:focus-within .mem-readout-tip { opacity: 1; pointer-events: auto; }
.mem-readout-tip .tip-title { display: block; font-weight: 700; font-size: 13px; margin-bottom: 6px; color: var(--text-main); }
.mem-readout-list { margin: 0; padding: 0 0 0 2px; list-style: none; }
.mem-readout-list li { margin: 4px 0; color: var(--text-main); }
.mem-readout-kind { font-weight: 600; color: var(--text-muted); }
.mem-readout-tok { color: var(--text-muted); font-size: 11px; }

/* ─── Phase 7.7 — memory readout as a top-bar brain badge ──────────────────── */
.mem-topbar-badge {
    position: relative; flex: 0 0 auto; align-self: center;
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 8px;
    color: var(--text-muted); cursor: default;
}
.mem-topbar-badge:hover, .mem-topbar-badge:focus-visible { color: var(--text-main); outline: none; }
.mem-topbar-icon { width: 19px; height: 19px; display: block; }
.mem-topbar-count {
    position: absolute; top: -3px; right: -4px;
    min-width: 15px; height: 15px; padding: 0 3px; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; line-height: 1;
    color: var(--surface); background: var(--text-main);
    border: 1.5px solid var(--surface); border-radius: 999px;
}
/* Open downward, right-aligned to the badge (it sits near the topbar's right edge,
   so the centered base positioning would clip off-screen). */
.mem-topbar-tip { left: auto; right: 0; transform: none; }
.mem-topbar-badge:hover .mem-topbar-tip,
.mem-topbar-badge:focus-within .mem-topbar-tip { opacity: 1; pointer-events: auto; }

/* ─── Sync button (bottom action bar) ──────────────────────────────────────── */

#memory-sync-btn.disabled { opacity: .4; cursor: not-allowed; }
#memory-sync-btn.loading { opacity: .6; pointer-events: none; }
#memory-sync-btn.loading::after {
    content: ''; display: inline-block; width: 12px; height: 12px; margin-left: 6px;
    border: 2px solid var(--text-muted); border-top-color: transparent; border-radius: 50%;
    animation: memSpin .7s linear infinite; vertical-align: middle;
}
@keyframes memSpin { to { transform: rotate(360deg); } }
.memory-sync-error {
    position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 6px;
    white-space: nowrap; font-size: 12px; color: var(--error-text);
    background: var(--error-bg); border: 1px solid var(--error-border); border-radius: 6px; padding: 4px 8px;
}

/* ─── Incognito ────────────────────────────────────────────────────────────── */
#incognito-btn.active { background: var(--text-main); color: var(--bg); }
#topbar.incognito-active { background: var(--surface-hover); transition: background .2s ease; }
#topbar.incognito-active .prompt-wrap > #prompt,
#topbar.incognito-active .prompt-wrap > #global-search-btn,
#topbar.incognito-active .prompt-wrap > #ask-btn,
#topbar.incognito-active .prompt-wrap > .cost-display-wrap,
#topbar.incognito-active .prompt-wrap > #session-cost-wrap {
    filter: grayscale(0.9);
    opacity: 0.8;
    transition: filter .2s ease, opacity .2s ease;
}
/* Voice — when the textarea is wrapped for the mic it is no longer a direct
   child of .prompt-wrap, so the > #prompt selector above can't reach it. Dim
   the wrapper as a unit instead (covers textarea + mic + HD). */
#topbar.incognito-active .prompt-wrap > .prompt-textarea-wrap {
    filter: grayscale(0.9);
    opacity: 0.8;
    transition: filter .2s ease, opacity .2s ease;
}

/* ==========================================================================
 * Phase 10 — Follow-up threading
 * ========================================================================== */
/* In-column threaded turns */
.col-followup-root { display: flex; flex-direction: column; flex: 1 1 auto; }
.followup-block { border-top: 1px solid var(--border); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.followup-block.is-skipped { align-items: center; justify-content: center; }
/* User prompt: right-aligned chat bubble, clearly distinct from the AI reply */
.followup-pill { position: relative; align-self: flex-end; max-width: 85%; background: var(--user-bubble-bg); border: 1px solid var(--border); border-radius: 14px 14px 4px 14px; padding: 8px 12px; }
.followup-pill-label { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 2px; text-align: right; }
.followup-pill-text { color: var(--text-main); white-space: pre-wrap; word-wrap: break-word; }
.followup-resp { position: relative; }
.followup-resp-text { color: var(--text-main); }
.followup-gap { width: 100%; font-size: 12px; color: var(--text-muted); background: var(--input-bg); border: 1px dashed var(--border); border-radius: 8px; padding: 8px 10px; text-align: center; }

/* Phase 10.1 — plain-text copy on the user prompt pill (bottom-right to clear the label) */
.followup-pill-copy {
    position: absolute; bottom: 4px; right: 8px;
    opacity: 0; transition: opacity 0.15s, color 0.15s, background 0.15s, border-color 0.15s;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 6px; padding: 2px 7px; font-size: 11px; font-weight: 600;
    cursor: pointer; color: var(--text-muted);
}
.followup-pill:hover .followup-pill-copy, .followup-pill-copy:focus { opacity: 1; outline: none; }
.followup-pill-copy:hover { color: var(--text-main); background: var(--surface-hover); }
.followup-pill-copy.copied { color: var(--accent-green); border-color: var(--accent-green); opacity: 1; }

/* Phase 10.1 — follow-up response breathing/loading state + spinner.
   (.followup-resp-spinner also carries .col-spinner, so size/animation/hidden-base are inherited.) */
.followup-resp.is-loading { animation: borderPulse 1.2s ease-in-out infinite; }
.followup-resp.is-loading .followup-resp-spinner { display: inline-block; }

/* Phase 10.1 — per-turn follow-up timer (bottom-right; opacity/transition/color inherited from .col-timer) */
.followup-resp-timer { display: block; text-align: right; font-size: 11px; margin-top: 6px; }

/* The follow-up input zone: full-width elbow connectors + centered icons + centered box */
#followup-root { position: relative; margin-top: 0; padding-top: 128px; }
.followup-connectors { position: absolute; top: -60px; left: 0; width: 100%; height: 188px; overflow: visible; z-index: 0; pointer-events: none; }
.followup-line { fill: none; stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; opacity: 0.95; pointer-events: none; transition: opacity .15s; }
.followup-line.is-dim { opacity: 0.16; }
.followup-hit { fill: none; stroke: transparent; stroke-width: 18; pointer-events: stroke; cursor: pointer; }

/* Icons sit ABOVE the box, with their bottom ~15% tucked behind it (z below the box) */
.followup-iconbar { position: absolute; top: 94px; left: 0; width: 100%; display: flex; justify-content: center; gap: 18px; z-index: 1; }
.followup-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--surface); border: 4px solid var(--fu-brand, var(--border)); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: opacity .15s, filter .15s; }
.followup-icon img { width: 24px; height: 24px; }
.followup-icon.is-deselected { opacity: 0.35; filter: grayscale(1); }

.followup-box { max-width: 620px; margin: 0 auto; position: relative; z-index: 2; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px 14px 12px; box-shadow: 0 4px 16px var(--shadow-color); }
.followup-iconbar-tools { display: flex; justify-content: flex-end; gap: 12px; margin-bottom: 8px; }
.followup-linkbtn { background: none; border: none; color: var(--text-muted); font-size: 12px; cursor: pointer; padding: 2px 4px; }
.followup-linkbtn:hover { color: var(--text-main); text-decoration: underline; }
.followup-inputwrap { display: flex; gap: 8px; align-items: stretch; }
.followup-input { flex: 1; resize: vertical; min-height: 44px; background: var(--input-bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px; color: var(--text-main); font: inherit; }
.followup-input-static { display: flex; align-items: center; color: var(--text-muted); cursor: not-allowed; }
.followup-submit { align-self: stretch; padding: 0 18px; border: none; border-radius: 8px; background: var(--accent-share); color: var(--bg); font-weight: 600; cursor: pointer; }
.followup-submit:disabled { opacity: 0.45; cursor: not-allowed; }
.followup-hint { min-height: 16px; font-size: 12px; color: var(--text-muted); padding: 4px 2px 0; }
.followup-threadnote { font-size: 11px; color: var(--text-muted); padding: 2px 2px 0; }
.followup-warn { font-size: 12px; color: var(--warning-border); background: var(--warning-bg); border: 1px solid var(--warning-border); border-radius: 8px; padding: 6px 10px; margin-top: 6px; }

#followup-root.is-locked .followup-box { opacity: 0.6; }
.followup-nudge { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; text-align: center; color: var(--text-main); }
.followup-nudge-link { color: var(--accent-share); font-weight: 600; text-decoration: none; }
.followup-nudge-link:hover { text-decoration: underline; }

/* Limit the height of response boxes and add internal scrollbars */
.col-body, 
.col-debate-body, 
.followup-resp {
    max-height: 60vh; /* Caps the height at 60% of your screen height */
    overflow-y: auto; /* Adds a scrollbar only when the text is too long */
    scrollbar-width: thin; /* Firefox support */
}

/* Style the scrollbars to match PolyCog's dark theme (Chrome/Edge/Safari) */
.col-body::-webkit-scrollbar, 
.col-debate-body::-webkit-scrollbar, 
.followup-resp::-webkit-scrollbar {
    width: 6px;
}
.col-body::-webkit-scrollbar-thumb, 
.col-debate-body::-webkit-scrollbar-thumb, 
.followup-resp::-webkit-scrollbar-thumb {
    background-color: var(--border);
    border-radius: 4px;
}

/* ─── Phase 10.4.5 — Cost visibility ──────────────────────────────────────── */

/* Tier colour tokens */
:root {
    --cost-tier-1: #4caf50;
    --cost-tier-2: #ff9800;
    --cost-tier-3: #f44336;
    --cost-tier-peak: #ff9800;
}
[data-theme="dark"] {
    --cost-tier-1: #66bb6a;
    --cost-tier-2: #ffa726;
    --cost-tier-3: #ef5350;
    --cost-tier-peak: #ffa726;
}

/* Model select — tier border tint */
.model-select.tier-1 { border-color: var(--cost-tier-1); }
.model-select.tier-2 { border-color: var(--cost-tier-2); }
.model-select.tier-3 { border-color: var(--cost-tier-3); }
.mini-select.tier-1  { border-color: var(--cost-tier-1); }
.mini-select.tier-2  { border-color: var(--cost-tier-2); }
.mini-select.tier-3  { border-color: var(--cost-tier-3); }

/* ─── Phase 11.1 — Custom model dropdown ──────────────────────────────────────
   Replaces the native popup so the price glyphs right-align and colour-code by
   tier in every browser (Firefox included). The native <select> is kept in the
   DOM, transparent and overlaying the trigger, as the source of truth. */
.model-dd { position: relative; display: inline-flex; max-width: 100%; min-width: 88px; flex: 0 1 auto; }   /* Phase 13 (A1) — shrinkable, floored so the trigger stays tappable */
.model-dd > .model-select {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; pointer-events: none; margin: 0;
}
.model-dd-trigger {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--input-bg); border: 1px solid var(--border); border-radius: 6px;
    padding: 4px 8px; color: var(--text-main); font: inherit; font-size: 12px;
    max-width: 100%; min-width: 0; cursor: pointer; transition: border-color 0.2s;   /* Phase 13 (A1) */
}
.model-dd-trigger.tier-1 { border-color: var(--cost-tier-1); }
.model-dd-trigger.tier-2 { border-color: var(--cost-tier-2); }
.model-dd-trigger.tier-3 { border-color: var(--cost-tier-3); }
.model-dd-trigger .model-dd-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }   /* Phase 13 (A1) */
.model-dd-trigger .model-dd-price { font-weight: 700; flex: none; }
.model-dd-caret { flex: none; opacity: 0.6; margin-left: 2px; }

.model-dd-list {
    position: absolute; top: calc(100% + 4px); right: 0; left: auto;
    min-width: 100%; width: max-content; max-width: 280px;
    margin: 0; padding: 4px; list-style: none;
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 8px 24px var(--shadow-color);
    max-height: 260px; overflow-y: auto; z-index: 300;
}
.model-dd-list [role="option"] {
    display: flex; align-items: center; gap: 16px;
    padding: 6px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap;
}
.model-dd-list [role="option"]:hover,
.model-dd-list [role="option"]:focus { background: var(--surface-hover); outline: none; }
.model-dd-list [role="option"].is-selected { background: var(--surface-hover); }
.model-dd-list [role="option"].is-selected .model-dd-name { font-weight: 700; }
.model-dd-list [role="option"] .model-dd-price { margin-left: auto; font-weight: 700; }
.model-dd-price.tier-1 { color: var(--cost-tier-1); }
.model-dd-price.tier-2 { color: var(--cost-tier-2); }
.model-dd-price.tier-3 { color: var(--cost-tier-3); }

/* Per-bot column cost chip */
.col-cost-chip {
    position: relative;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: help;
    white-space: nowrap;
    padding: 1px 3px;
}
.col-cost-chip.tier-1 { color: var(--cost-tier-1); }
.col-cost-chip.tier-2 { color: var(--cost-tier-2); }
.col-cost-chip.tier-3 { color: var(--cost-tier-3); }
.col-cost-chip .col-cost-tip {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    left: auto;
    transform: none;
    width: 260px;
    max-width: calc(100vw - 32px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 13px;
    box-shadow: 0 8px 28px var(--shadow-color);
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-main);
    font-weight: 400;
    white-space: normal;
    text-align: left;
    z-index: 80;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.col-cost-chip:hover .col-cost-tip,
.col-cost-chip:focus-within .col-cost-tip { opacity: 1; }

/* Topbar aggregate cost tooltip */
.cost-display-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: help;
}
.cost-display-wrap .cost-display-tip {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    max-width: calc(100vw - 32px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: 0 8px 28px var(--shadow-color);
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-main);
    font-weight: 400;
    white-space: normal;
    text-align: left;
    z-index: 300;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.cost-display-wrap:hover .cost-display-tip,
.cost-display-wrap:focus-within .cost-display-tip { opacity: 1; }

/* Follow-up cost: per-bot row under the icons + running total under Send */
.fu-cost-row { display: flex; justify-content: center; gap: 18px; margin-bottom: 10px; }
/* Cell width (40px) and row gap (18px) must match .followup-icon width and
   .followup-iconbar gap so each estimate sits directly under its logo. */
.fu-cost-cell { flex: 0 0 40px; text-align: center; font-size: 10px; line-height: 1.2; color: var(--text-muted); white-space: nowrap; }
.fu-cost-cell.is-peak { color: var(--cost-tier-peak); font-weight: 600; }
.fu-cost-cell.is-off { opacity: 0.35; }
.followup-cost {
    font-size: 12px;
    color: var(--text-muted);
    padding: 4px 2px 0;
    min-height: 18px;
    line-height: 1.4;
    text-align: right;
}
.followup-cost-seg { white-space: nowrap; }
.followup-cost-seg.is-peak { color: var(--cost-tier-peak); font-weight: 600; }

/* Debate / synthesis cost-inline hover wrapper */
.cost-hoverable {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: help;
}
.cost-hoverable .cost-tip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    max-width: calc(100vw - 32px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 13px;
    box-shadow: 0 8px 28px var(--shadow-color);
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-main);
    font-weight: 400;
    white-space: normal;
    text-align: left;
    z-index: 80;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.cost-hoverable:hover .cost-tip,
.cost-hoverable:focus-within .cost-tip { opacity: 1; }

/* ─── Phase 10.6 — Usage & Savings tab ────────────────────────────────────── */
.savings-tab-content { padding: 4px 16px 16px; }
.savings-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    margin: 18px 0 8px;
}
.savings-section-title:first-child { margin-top: 4px; }

/* Period toggle (This month / This year / All time) */
.savings-period-toggle {
    display: inline-flex;
    gap: 2px;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 14px;
}
.savings-period-btn {
    background: none;
    border: none;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.savings-period-btn.active {
    background: var(--surface-hover);
    color: var(--text-main);
}

/* Savings stat card (replaces the old headline / neutral text) */
.savings-stat-card {
    background: color-mix(in srgb, var(--accent-green) 8%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent-green) 25%, var(--border));
    border-radius: 10px;
    padding: 14px 16px;
    margin: 0 0 14px;
}
.savings-card-amount {
    font-size: 26px;
    font-weight: 700;
    color: var(--accent-green);
    letter-spacing: -0.5px;
    line-height: 1.1;
}
.savings-card-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 3px;
}
.savings-stat-card.neutral {
    background: var(--surface-hover);
    border-color: var(--border);
}
.savings-stat-card.neutral .savings-card-amount { color: var(--text-main); }

/* Comparison table */
.savings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 10px;
}
.savings-table th {
    text-align: left;
    font-weight: 600;
    color: var(--text-muted);
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
}
.savings-table th:nth-child(n+2) { text-align: right; }
.savings-table td {
    padding: 7px 8px;
    border-bottom: 1px solid var(--border);
    color: var(--text-main);
}
.savings-table tr:last-child td { border-bottom: none; }
.savings-table .sv-prov { font-weight: 500; }
.savings-table .sv-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.savings-table .sv-neg { color: var(--error-text); }
.savings-table .sv-deepseek {
    color: var(--text-muted);
    font-style: italic;
}

/* Token tooltip on the API-spend cell (mirrors .cost-hoverable .cost-tip) */
.sv-spend-cell {
    position: relative;
    display: inline-block;
    cursor: help;
}
.sv-tok-tip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 11px;
    line-height: 1.6;
    color: var(--text-muted);
    white-space: normal;
    text-align: left;
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    box-shadow: 0 6px 20px var(--shadow-color);
}
.sv-spend-cell:hover .sv-tok-tip { opacity: 1; }

.savings-disclaimer,
.savings-tracking-note {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-top: 6px;
}
.savings-tracking-note { margin-top: 14px; }
.savings-empty {
    color: var(--text-muted);
    text-align: center;
    padding: 32px 16px;
    font-size: 14px;
}

/* Costliest sessions list */
.savings-top-sessions { margin-bottom: 4px; }
.savings-top-session-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
}
.savings-top-session-item:last-child { border-bottom: none; }
.savings-top-session-link {
    font-size: 13px;
    color: var(--brand-gem);
    text-decoration: none;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.savings-top-session-link:hover { text-decoration: underline; }
.savings-top-session-cost {
    font-size: 12px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Overview tab — usage & savings mini-summary */
.overview-spend-grid {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 12px 0 8px;
}
.overview-spend-stat {
    flex: 1;
    min-width: 80px;
    background: var(--surface-hover);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
}
.overview-spend-val {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -0.3px;
}
.overview-spend-val.green { color: var(--accent-green); }
.overview-spend-lbl {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 3px;
}
.overview-spend-link {
    font-size: 12px;
    color: var(--brand-gem);
    text-decoration: none;
    display: inline-block;
    margin-top: 10px;
}
.overview-spend-link:hover { text-decoration: underline; }

/* ==========================================================================
   Phase 11.1 — TTS narration. Speaker split-button mirrors the Copy
   split-button (same absolute hover-reveal, same dropdown chrome). Sits just
   left of Copy: Copy occupies right 8px + ~68px, so 84px clears it with a
   small gap ("Copied!" flash may momentarily close the gap — cosmetic only).
   .is-active keeps the button visible without hover while loading/playing.
   ========================================================================== */
.narrate-split-btn {
    position: absolute;
    top: 8px; right: 84px;
    display: inline-flex;
    align-items: stretch;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 3;
}
.response-section:hover .narrate-split-btn,
.synthesis-output:hover .narrate-split-btn,
.followup-resp:hover .narrate-split-btn,
.narrate-split-btn:focus-within,
.narrate-split-btn.is-active,
.narrate-split-btn.menu-open { opacity: 1; overflow: visible; }
.bot-col:has(.narrate-split-btn.menu-open) { overflow: visible; }

.narrate-main-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 7px;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-right: none;
    border-radius: 6px 0 0 6px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}
.narrate-main-btn svg { width: 13px; height: 13px; display: block; }
.narrate-main-btn:hover { color: var(--text-main); background: var(--surface-hover); }
.narrate-main-btn[data-state="loading"] { color: var(--text-main); }
.narrate-main-btn[data-state="playing"] { color: var(--col-brand-color, var(--text-main)); }
.narrate-main-btn[data-state="other-active"] { opacity: 0.55; }   /* another slot is narrating — dimmed but clickable */
.narrate-spin { animation: spin 0.8s linear infinite; }           /* reuses the existing @keyframes spin */

/* Tier teaser (sample/free): single disabled button, no chevron/dropdown. */
.narrate-btn--disabled,
.narrate-btn--disabled:hover {
    opacity: 0.4;
    cursor: not-allowed;
    color: var(--text-muted);
    background: var(--surface);
    border-right: 1px solid var(--border);
    border-radius: 6px;
}

.narrate-chevron-btn {
    padding: 3px 6px;
    font-size: 10px;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0 6px 6px 0;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}
.narrate-chevron-btn:hover { color: var(--text-main); background: var(--surface-hover); }

.narrate-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px var(--shadow-color);
    z-index: 60;
    min-width: 230px;
    overflow: hidden;
    align-self: flex-start;
    height: auto;
    white-space: normal;
}
.narrate-dropdown[hidden] { display: none; }
.narrate-opt {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 58px 8px 11px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-main);
    background: transparent;
    border: none;
    border-left: 3px solid transparent;   /* gender accent slot — keeps rows aligned */
    cursor: pointer;
    transition: background 0.12s;
    position: relative;
}
.narrate-opt--male   { border-left-color: var(--narrate-male); }
.narrate-opt--female { border-left-color: var(--narrate-female); }
.narrate-opt-name { display: block; font-weight: 600; }
.narrate-opt-desc {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.4;
}
.narrate-opt-play {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border);
    color: var(--text-muted);
    background: var(--surface);
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}
.narrate-opt-play:hover { color: var(--text-main); background: var(--surface-hover); }
.narrate-opt-play.is-playing { color: var(--col-brand-color, var(--text-main)); }
.narrate-opt-play svg { width: 10px; height: 10px; display: block; }

.narrate-opt:hover { background: var(--surface-hover); }
.narrate-opt + .narrate-opt { border-top: 1px solid var(--border); }
.narrate-opt.selected { color: var(--col-brand-color, var(--text-main)); }
.narrate-opt.selected::after {
    content: '✓';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

/* ─── Phase 11.4 — Settings tab ────────────────────────────────────────────── */
.settings-tab-content { display: flex; flex-direction: column; gap: 20px; padding: 4px 2px 12px; }
.settings-section { border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; background: var(--surface); }
.settings-section-title { margin: 0 0 4px; font-size: 15px; color: var(--text-main); }
.settings-section-sub { font-size: 12px; color: var(--text-muted); margin-bottom: 14px; line-height: 1.5; }
.settings-section--locked { opacity: .7; }
.settings-section--locked .settings-section-sub { margin-bottom: 0; }

.settings-row { margin-bottom: 16px; }
.settings-row:last-child { margin-bottom: 0; }
.settings-row-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.settings-label { font-size: 13px; font-weight: 600; color: var(--text-main); }
.settings-value { font-size: 12px; font-weight: 600; color: var(--accent-share); }
.settings-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; line-height: 1.5; }
.settings-error { color: var(--warning-border); }

/* Sliders + default-position tick. The tick track is inset by the ~9px thumb
   radius so a linear percent lines up with the thumb's real travel; verified
   against Firefox's default range metrics (house rule: Firefox first). */
.settings-slider-wrap { position: relative; padding-bottom: 10px; }
.settings-slider { width: 100%; accent-color: var(--accent-share); cursor: pointer; margin: 0; }
.settings-tick-track { position: absolute; left: 9px; right: 9px; bottom: 0; height: 8px; pointer-events: none; }
.settings-tick { position: absolute; bottom: 0; width: 2px; height: 8px; background: var(--text-muted); transform: translateX(-50%); border-radius: 1px; opacity: .8; }

.settings-toggle-row { display: flex; align-items: center; gap: 10px; }
.settings-row-disabled { opacity: .45; pointer-events: none; }

/* Per-bot voice assignment rows */
.settings-voice-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.settings-voice-logo { width: 20px; height: 20px; flex-shrink: 0; }
.settings-voice-bot { width: 90px; flex-shrink: 0; font-size: 13px; color: var(--text-main); }
.settings-voice-select { flex: 1; min-width: 0; background: var(--input-bg); color: var(--text-main); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font-size: 12px; }
/* position/transform reset is load-bearing: these buttons share .narrate-opt-play
   (for the play/stop icon machinery), whose base rule absolutely-positions it for
   dropdown rows — without the reset the settings buttons leave the flex flow. */
.settings-voice-preview { position: static; transform: none; flex-shrink: 0; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border); border-radius: 6px; color: var(--text-muted); cursor: pointer; padding: 0; }
.settings-voice-preview:hover { color: var(--text-main); background: var(--surface-hover); }
.settings-voice-preview svg { width: 12px; height: 12px; }
.settings-voice-preview.is-playing { color: var(--accent-share); }

/* Custom voice manager + ElevenLabs import list */
.settings-custom-head { font-size: 13px; font-weight: 600; color: var(--text-main); margin: 16px 0 6px; padding-top: 14px; border-top: 1px solid var(--border); }
.settings-custom-voice { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.settings-custom-name { flex: 1; min-width: 0; background: var(--input-bg); color: var(--text-main); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font-size: 12px; }
.settings-custom-remove { flex-shrink: 0; width: 26px; height: 26px; background: transparent; border: 1px solid var(--border); border-radius: 6px; color: var(--text-muted); cursor: pointer; font-size: 12px; line-height: 1; }
.settings-custom-remove:hover { color: var(--text-main); background: var(--surface-hover); }

.settings-import-btn { margin-top: 8px; }
.settings-import-list { margin-top: 10px; border: 1px solid var(--border); border-radius: 8px; max-height: 240px; overflow-y: auto; }
.settings-import-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.settings-import-item:last-child { border-bottom: none; }
.settings-import-name { flex: 1; min-width: 0; font-size: 12px; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-import-cat { flex-shrink: 0; font-size: 10px; color: var(--text-muted); text-transform: capitalize; }
.settings-import-add { flex-shrink: 0; background: var(--surface-hover); color: var(--text-main); border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; font-size: 11px; cursor: pointer; }
.settings-import-add:hover:not(:disabled) { background: var(--input-bg); }
.settings-import-add:disabled { color: var(--text-muted); cursor: default; }

/* Verify & Add by voice ID */
.settings-addbyid { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.settings-addbyid input { flex: 1; min-width: 0; background: var(--input-bg); color: var(--text-main); border: 1px solid var(--border); border-radius: 6px; padding: 7px 10px; font-size: 12px; }
.settings-addbyid button { flex-shrink: 0; white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════════════════════
   Phase 12 — Per-bot response configuration: column-header gear with a
   superimposed count badge, an anchored settings popover (not a modal), the
   shared config form, the Settings-tab Bot Configuration section, and the
   prompt-bar Presets control.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Gear + superimposed count. The badge overlaps the gear's top-right corner,
   mirroring the topbar memory badge; red fill keeps the active count obvious. */
.botcfg-dd { position: relative; display: inline-flex; flex-shrink: 0; }
.botcfg-gear {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; padding: 0;
    background: transparent; border: none; border-radius: 6px;
    color: var(--text-muted); cursor: pointer; transition: color 0.15s, background 0.15s;
}
.botcfg-gear:hover { color: var(--text-main); background: var(--surface-hover); }
.botcfg-gear.is-active { color: var(--text-main); }
.botcfg-gear[aria-expanded="true"] { color: var(--text-main); background: var(--surface-hover); }
.botcfg-badge {
    position: absolute; top: -5px; right: -6px;
    min-width: 15px; height: 15px; padding: 0 3px; box-sizing: border-box;
    display: none; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; line-height: 1;
    color: #fff; background: #e5484d;
    border: 1.5px solid var(--surface); border-radius: 999px;
    pointer-events: none;
}

/* Instant hover tooltip listing the applied (non-default) settings. Mirrors the
   topbar memory readout: pure CSS opacity, no OS-title delay. Anchored to the
   gear wrapper and left-aligned so it never runs off the left edge. */
.botcfg-tip {
    position: absolute; top: calc(100% + 8px); left: 0;
    width: max-content; min-width: 170px; max-width: min(280px, calc(100vw - 32px));
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    padding: 10px 12px; box-shadow: 0 8px 28px var(--shadow-color);
    font-size: 12px; line-height: 1.5; color: var(--text-main);
    text-align: left; white-space: normal; z-index: 90;
    opacity: 0; pointer-events: none; transition: opacity 0.12s ease;
}
.botcfg-dd:hover .botcfg-tip,
.botcfg-dd:focus-within .botcfg-tip { opacity: 1; }
.botcfg-tip .tip-title { display: block; font-weight: 700; font-size: 12px; margin-bottom: 6px; color: var(--text-main); }
.botcfg-tip-list { margin: 0; padding: 0; list-style: none; }
.botcfg-tip-list li { margin: 3px 0; }
.botcfg-tip-key { color: var(--text-muted); }

/* ── Phase 12.2 — per-response provenance meta strip ─────────────────────────
   Muted one-line record at the foot of every response: snapshot gear + count
   (only when gear settings were applied at dispatch time) and "model · time".
   The gear here is a historical record, NOT a control — no click target, no
   accent color — and it renders for every viewer tier (share pages included).
   Tooltips ride the body-mounted data-tip engine, so they never clip inside
   the scrolling response bodies (a .botcfg-tip here would). */
.meta-strip {
    display: flex; align-items: center; gap: 8px;
    margin-top: 10px; padding-top: 6px;
    border-top: 1px dashed var(--border);
    font-size: 11px; line-height: 1.4; color: var(--text-muted);
    user-select: none;
}
.meta-gear-wrap {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; flex-shrink: 0; opacity: 0.8; transition: opacity 0.12s;
}
.meta-gear-wrap:hover, .meta-gear-wrap:focus-visible { opacity: 1; }
.meta-gear-badge {
    position: absolute; top: -5px; right: -6px;
    min-width: 13px; height: 13px; padding: 0 3px; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 700; line-height: 1;
    color: var(--text-muted); background: var(--surface);
    border: 1px solid var(--border); border-radius: 999px;
    pointer-events: none;
}
.meta-strip-text { cursor: default; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Instant tooltip engine (data-tip). Body-mounted, fixed, never clipped; dark
   solid bubble that inverts sensibly per theme (uses --text-main as the fill). */
.pc-tip {
    position: fixed; z-index: 500;
    max-width: 240px; padding: 7px 10px;
    background: var(--text-main); color: var(--surface);
    border-radius: 7px; font-size: 11.5px; line-height: 1.45;
    box-shadow: 0 6px 20px var(--shadow-color);
    white-space: pre-line; text-align: left;   /* Phase 12.2 — meta-strip tips are multi-line; existing single-line tips render identically */
    opacity: 0; pointer-events: none; transition: opacity 0.08s ease;
}
.pc-tip.is-visible { opacity: 1; }

/* Collapsible form section (Style constraints) — chevron rotates when open. */
/* Style-constraints collapsible — boxed like .bcf-preview so it clearly reads
   as clickable (Phase 12.1.1 polish): bordered card on the input background,
   accent border on hover, row hover fill, rotating chevron. */
.bcf-collapse { border: 1px solid var(--border); border-radius: 9px; background: var(--input-bg); padding: 0; margin: 0; transition: border-color 0.12s; }
.bcf-collapse:hover { border-color: color-mix(in srgb, var(--bcf-a) 45%, var(--border)); }
.bcf-collapse-summary {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    cursor: pointer; user-select: none; list-style: none; padding: 8px 10px;
    border-radius: 8px; transition: background 0.12s;
}
.bcf-collapse-summary:hover { background: var(--surface-hover); }
.bcf-collapse-summary::-webkit-details-marker { display: none; }
.bcf-collapse-summary .bcf-label { margin: 0; }
.bcf-collapse-summary:hover .bcf-label { color: var(--text-main); }
.bcf-chevron { color: var(--text-muted); font-size: 11px; line-height: 1; transition: transform 0.15s ease; }
.bcf-collapse[open] .bcf-chevron { transform: rotate(180deg); }
.bcf-collapse[open] .bcf-collapse-summary { border-bottom: 1px solid var(--border); border-radius: 8px 8px 0 0; }
.bcf-collapse-body { margin-top: 0; padding: 10px 10px 11px; }

/* ── Anchored settings popover (body-mounted, fixed, JS-positioned) ──────────
   Phase 12.1 visual refresh: icon cards, expertise track, toggle switches, a
   per-bot accent (--bcf-accent — set inline from BOTS[p].color; falls back to
   the neutral green), and the genie open/close animation whose transform-origin
   is pinned to the gear by openBotcfgPopover(). On-accent content uses
   var(--bg), never #fff: --brand-oai is near-white in dark theme and near-black
   in light, so the bg inversion stays legible for every brand in both themes. */
#botcfg-pop-root { position: fixed; inset: 0; z-index: 400; pointer-events: none; }
.botcfg-panel {
    position: fixed; width: 380px; max-width: calc(100vw - 16px);
    max-height: min(78vh, 680px); display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: 0 14px 40px var(--shadow-color); overflow: hidden;
    pointer-events: auto; will-change: transform, opacity;
    opacity: 0; transform: scale(0.25);
    transition: opacity 0.13s ease-out, transform 0.13s cubic-bezier(0.2, 0.85, 0.3, 1.04);
}
.botcfg-panel.is-open { opacity: 1; transform: scale(1); }
/* Pre-open frame + the closing animation must never intercept clicks. */
.botcfg-panel:not(.is-open) { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
    .botcfg-panel { transition: none; }
}
.botcfg-panel-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 11px 14px; flex-shrink: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--bcf-accent, var(--accent-green)) 30%, var(--border));
    background: color-mix(in srgb, var(--bcf-accent, var(--accent-green)) 5%, var(--surface));
}
.botcfg-panel-title { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text-main); }
.botcfg-panel-dot {
    width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0;
    box-shadow: 0 0 7px color-mix(in srgb, var(--bcf-accent, var(--accent-green)) 65%, transparent);
}
.botcfg-panel-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; padding: 0; flex-shrink: 0;
    background: transparent; border: none; border-radius: 6px;
    color: var(--text-muted); cursor: pointer; transition: color 0.15s, background 0.15s;
}
.botcfg-panel-close:hover { color: var(--text-main); background: var(--surface-hover); }
.botcfg-panel-body { padding: 13px 14px 14px; overflow-y: auto; }

/* ── Shared config form (popover + Settings tab) ──────────────────────────────
   --bcf-a: the local accent shorthand every control tints from. The popover
   and the Settings-tab mount both set --bcf-accent inline per bot. */
.bcf-form { --bcf-a: var(--bcf-accent, var(--accent-green)); display: flex; flex-direction: column; gap: 14px; }
.bcf-row { display: flex; flex-direction: column; gap: 7px; }
.bcf-label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--text-muted);
}
.bcf-label svg { width: 13px; height: 13px; flex-shrink: 0; opacity: 0.85; }
.bcf-hint { font-size: 11px; color: var(--text-muted); line-height: 1.4; }

/* Base reset — every option control is either an icon card or a track stop. */
.bcf-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.bcf-pill { font-family: inherit; background: none; border: none; padding: 0; margin: 0; color: var(--text-muted); }
.bcf-pill-ic { display: inline-flex; }

/* Icon cards (Position / Detail level / Output format). */
.bcf-cards { display: grid; gap: 6px; }
.bcf-cards-3 { grid-template-columns: repeat(3, 1fr); }
.bcf-cards-2 { grid-template-columns: repeat(2, 1fr); }
.bcf-cards-4 { grid-template-columns: repeat(4, 1fr); }
.bcf-cards-5 { grid-template-columns: repeat(5, 1fr); }
.bcf-cards .bcf-pill {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 5px;
    padding: 9px 4px 7px; border-radius: 10px; text-align: center;
    background: var(--input-bg); border: 1px solid var(--border);
    font-size: 10.5px; line-height: 1.25; cursor: pointer;
    transition: color 0.12s, border-color 0.12s, background 0.12s, box-shadow 0.12s, transform 0.12s;
}
.bcf-cards .bcf-pill:hover {
    color: var(--text-main);
    border-color: color-mix(in srgb, var(--bcf-a) 45%, var(--border));
    box-shadow: 0 3px 10px var(--shadow-color); transform: translateY(-1px);
}
.bcf-cards .bcf-pill.is-active {
    color: var(--text-main);
    background: color-mix(in srgb, var(--bcf-a) 12%, var(--surface));
    border-color: var(--bcf-a);
    box-shadow: inset 0 0 0 1px var(--bcf-a);
}
.bcf-cards .bcf-pill-ic svg { width: 22px; height: 22px; }
.bcf-cards .bcf-pill.is-active .bcf-pill-ic { color: var(--bcf-a); }
.bcf-cards-5 .bcf-pill { padding: 8px 2px 6px; font-size: 9.5px; }
.bcf-cards-5 .bcf-pill-ic svg { width: 19px; height: 19px; }
.bcf-cards-4 .bcf-pill { padding: 8px 3px 6px; font-size: 9.5px; }
.bcf-cards-4 .bcf-pill-ic svg { width: 28px; height: 28px; }
/* Position row — hero cards: the large illustrated tiles from the mockup. */
.bcf-cards-hero .bcf-pill { padding: 12px 4px 9px; gap: 7px; border-radius: 12px; }
.bcf-cards-hero .bcf-pill-ic svg { width: 42px; height: 42px; }

/* Expertise track — three large illustrated stops on a connecting line
   (Phase 12.1.1: mockup-scale). The line fills up to the active stop: sibling
   stops AFTER .is-active (and their left segments) mute via grayscale, so
   everything up to and including the selection reads as "filled". */
.bcf-track { display: flex; padding-top: 4px; }
.bcf-track .bcf-pill {
    flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 0 2px; font-size: 11px; line-height: 1.25; text-align: center; cursor: pointer;
    transition: color 0.12s;
}
.bcf-track .bcf-pill::before {
    content: ""; position: absolute; top: 21px; right: 50%; width: 100%; height: 3px; border-radius: 2px;
    background: color-mix(in srgb, var(--bcf-a) 55%, var(--border)); z-index: 0;
    transition: background 0.12s;
}
.bcf-track .bcf-pill:first-child::before { display: none; }
.bcf-track .bcf-pill-ic {
    position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 999px; box-sizing: border-box;
    background: var(--input-bg);
    border: 1.5px solid color-mix(in srgb, var(--bcf-a) 45%, var(--border));
    transition: border-color 0.12s, background 0.12s, box-shadow 0.12s, transform 0.12s, filter 0.12s, opacity 0.12s;
}
.bcf-track .bcf-pill-ic svg { width: 28px; height: 28px; }
.bcf-track .bcf-pill:hover { color: var(--text-main); }
.bcf-track .bcf-pill:hover .bcf-pill-ic { box-shadow: 0 2px 8px var(--shadow-color); border-color: var(--bcf-a); transform: scale(1.05); }
.bcf-track .bcf-pill.is-active { color: var(--text-main); font-weight: 600; }
.bcf-track .bcf-pill.is-active .bcf-pill-ic {
    border-color: var(--bcf-a);
    background: color-mix(in srgb, var(--bcf-a) 10%, var(--input-bg));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bcf-a) 22%, transparent);
    transform: scale(1.1);
}
.bcf-track .bcf-pill.is-active ~ .bcf-pill .bcf-pill-ic {
    filter: grayscale(0.85); opacity: 0.55; border-color: var(--border);
}
.bcf-track .bcf-pill.is-active ~ .bcf-pill::before { background: var(--border); }

/* Text inputs + selects — accent focus glow. */
.bcf-text {
    background: var(--input-bg); color: var(--text-main);
    border: 1px solid var(--border); border-radius: 8px;
    padding: 7px 10px; font-size: 12px; width: 100%; box-sizing: border-box;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.bcf-text:focus {
    outline: none; border-color: var(--bcf-a);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bcf-a) 18%, transparent);
}
.bcf-select {
    background: var(--input-bg); color: var(--text-main);
    border: 1px solid var(--border); border-radius: 8px;
    padding: 7px 10px; font-size: 12px; max-width: 100%; cursor: pointer;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.bcf-select:focus {
    outline: none; border-color: var(--bcf-a);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bcf-a) 18%, transparent);
}

/* Reliability / Style rows — real checkboxes rendered as sliding switches.
   The input stays in the DOM (wireBotcfgForm's onchange contract) but is
   visually replaced by the adjacent .bcf-switch. */
.bcf-checks { display: flex; flex-direction: column; gap: 9px; }
.bcf-checks label {
    position: relative; display: flex; align-items: center; gap: 9px;
    font-size: 12px; color: var(--text-main); cursor: pointer;
}
.bcf-checks input[type="checkbox"] {
    position: absolute; opacity: 0; width: 34px; height: 20px; margin: 0; cursor: pointer;
}
.bcf-switch {
    flex-shrink: 0; width: 34px; height: 20px; border-radius: 999px;
    background: var(--border); position: relative; transition: background 0.15s ease;
}
.bcf-switch::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
    border-radius: 999px; background: var(--surface);
    box-shadow: 0 1px 3px var(--shadow-color);
    transition: transform 0.15s ease;
}
.bcf-checks label:hover .bcf-switch { background: color-mix(in srgb, var(--bcf-a) 25%, var(--border)); }
.bcf-checks input:checked + .bcf-switch { background: var(--bcf-a); }
.bcf-checks input:checked + .bcf-switch::after { transform: translateX(14px); background: var(--bg); }
.bcf-checks input:focus-visible + .bcf-switch { outline: 2px solid var(--bcf-a); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .bcf-switch, .bcf-switch::after { transition: none; }
}
/* Indent under the 34px switch + 9px gap so inline inputs align with text. */
.bcf-inline { margin-left: 43px; width: calc(100% - 43px); box-sizing: border-box; }

/* Preview + actions. */
.bcf-preview {
    border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; background: var(--input-bg);
}
.bcf-preview summary { font-size: 11.5px; color: var(--text-muted); cursor: pointer; user-select: none; list-style: none; }
.bcf-preview summary::-webkit-details-marker { display: none; }
.bcf-preview summary::before { content: "▸ "; }
.bcf-preview[open] summary::before { content: "▾ "; }
.bcf-preview-text {
    margin: 8px 0 0; padding: 0; font-size: 11px; line-height: 1.5;
    color: var(--text-main); background: transparent;
    white-space: pre-wrap; word-break: break-word;
}
.bcf-actions {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    margin-top: 2px; padding-top: 12px; border-top: 1px solid var(--border);
}
.bcf-actions .bcf-apply-all { margin-left: auto; }
.bcf-clear, .bcf-clear-all {
    background: transparent; border: 1px solid transparent; border-radius: 8px;
    padding: 5px 8px; font-size: 12px; color: var(--text-muted); cursor: pointer;
    transition: color 0.12s, background 0.12s;
}
.bcf-clear:hover { color: var(--text-main); background: var(--surface-hover); }
.bcf-clear-all { color: #e5484d; }
.bcf-clear-all:hover { color: #e5484d; background: rgba(229, 72, 77, 0.10); }
.bcf-apply-all {
    background: var(--input-bg); border: 1px solid var(--border); border-radius: 8px;
    padding: 5px 11px; font-size: 12px; color: var(--text-main); cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}
.bcf-apply-all:hover { border-color: color-mix(in srgb, var(--bcf-a) 45%, var(--border)); background: var(--surface-hover); }

/* ── Settings tab: bot selector pills + preset manager ────────────────────── */
.bcf-bot-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.bcf-bot-pill {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--input-bg); color: var(--text-muted);
    border: 1px solid var(--border); border-radius: 999px;
    padding: 5px 12px; font-size: 12px; cursor: pointer; transition: color 0.12s, border-color 0.12s;
}
.bcf-bot-pill:hover { color: var(--text-main); border-color: var(--text-muted); }
.bcf-bot-pill.is-active {
    color: var(--text-main);
    border-color: var(--bot-color, var(--accent-green));
    box-shadow: inset 0 0 0 1px var(--bot-color, var(--accent-green));
}
.bcf-bot-pill-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 15px; height: 15px; padding: 0 3px;
    font-size: 9.5px; font-weight: 700; line-height: 1;
    color: #fff; background: #e5484d; border-radius: 999px;
}
.bcf-preset-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.bcf-preset-name {
    flex: 1; min-width: 0; font-size: 12px; color: var(--text-main);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bcf-preset-save { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.bcf-preset-save input {
    flex: 1; min-width: 0; background: var(--input-bg); color: var(--text-main);
    border: 1px solid var(--border); border-radius: 7px; padding: 7px 10px; font-size: 12px;
}
.bcf-preset-save input:focus { outline: none; border-color: var(--accent-green); }
.bcf-preset-save button { flex-shrink: 0; white-space: nowrap; }

/* ── Prompt-bar Presets control ─────────────────────────────────────────
   Phase 14.7 — renders when ≥1 preset exists OR when any bot's gear config
   deviates from defaults ("dirty"). Dirty adds an amber corner dot (same
   corner-dot language as #global-search-btn .gsx-dot, but --warning-border
   amber because the state is an invitation, not an active feature). The
   whole control genies in on first mount; the dot pulses twice, then rests. */
.presets-ctl { position: relative; display: inline-flex; flex-shrink: 0;
    animation: presets-pop-in 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes presets-pop-in {
    0%   { transform: scale(0.4); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}
.presets-btn { display: inline-flex; align-items: center; gap: 2px; position: relative; }
.presets-btn-caret { font-size: 9px; line-height: 1; }
.presets-btn.is-dirty { color: var(--text-main); }   /* lift from muted — it wants attention */
.presets-dirty-dot {
    display: none; position: absolute; top: 3px; right: 3px;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--warning-border);
    box-shadow: 0 0 0 2px var(--bg);
}
.presets-btn.is-dirty .presets-dirty-dot {
    display: block;
    animation: presets-dot-pulse 0.9s ease-in-out 2;
}
@keyframes presets-dot-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.55); }
}
/* Dirty-state dropdown extras: explanatory hint line + emphasized save row. */
.presets-dd-hint {
    padding: 8px 10px 7px; font-size: 11px; line-height: 1.45;
    color: var(--text-muted); cursor: help; white-space: normal;
    border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.presets-opt-save.is-primary {
    color: var(--accent-green); font-style: normal; font-weight: 600;
}
.presets-dropdown {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 260;
    min-width: 200px; max-width: 300px; max-height: 320px; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; box-shadow: 0 8px 24px var(--shadow-color); padding: 4px;
}
.presets-opt {
    display: block; width: 100%; text-align: left;
    background: transparent; border: none; border-radius: 6px;
    padding: 8px 10px; font-size: 12px; color: var(--text-main); cursor: pointer;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.presets-opt:hover { background: var(--surface-hover); }
.presets-opt-save { color: var(--text-muted); font-style: italic; }
.presets-dropdown-sep { height: 1px; background: var(--border); margin: 4px 6px; }

/* ==========================================================================
 * Phase 12.5a — text-file attachments (paperclip + chip row)
 * The chip row is a full-width flex line INSIDE the topbar so the Phase 11.1
 * ResizeObserver self-heals --topbar-h; flex-wrap on .topbar only ever fires
 * for #attach-chips (flex-basis:100%) — every other child still shrinks.
 * ========================================================================== */
.topbar { flex-wrap: wrap; }
.attach-chips {
    flex-basis: 100%;
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    padding-top: 2px;
}
.attach-chips[hidden] { display: none; }
.attach-chip {
    display: inline-flex; align-items: center; gap: 6px;
    max-width: 260px;
    padding: 3px 9px;
    font-size: 12px; line-height: 1.4;
    color: var(--text-main);
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.attach-chip .chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-chip .chip-size { color: var(--text-muted); flex-shrink: 0; }
.attach-chip .chip-x {
    flex-shrink: 0; border: none; background: none; cursor: pointer;
    color: var(--text-muted); font-size: 14px; line-height: 1; padding: 0 2px;
}
.attach-chip .chip-x:hover { color: var(--text-main); }
.attach-chip.is-locked { opacity: 0.75; }
#prompt.attach-dragover { border-color: var(--brand-gem); }
#attach-btn.is-disabled,
#attach-btn.is-disabled:hover { opacity: 0.35; cursor: not-allowed; color: var(--text-muted); background: transparent; }

/* Phase 12.5b — image chips */
.attach-chip .chip-thumb {
    width: 22px; height: 22px; flex-shrink: 0;
    object-fit: cover; border-radius: 4px;
    border: 1px solid var(--border);
}
.attach-chip .chip-kind { flex-shrink: 0; font-size: 13px; line-height: 1; }

/* Phase 12.5b.1 — click-to-view chips */
.attach-chip.is-viewable { cursor: pointer; }
.attach-chip.is-viewable:hover { border-color: var(--brand-gem); }

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 13 (B) — per-column progressive shedding
   Each .bot-col is a container (container-type on the base block above), so
   these tiers fire per column: a collapsed neighbour can push one column wide
   while another sits in the narrow tier on the same screen. Wide columns are
   pixel-identical to pre-Phase-13 — nothing below fires above 330px.
   Thresholds tuned in phase13_B_preview.html (Variant A chosen). Escape
   hatches (.model-dd list, cost tip, body-mounted gear panel) verified under
   containment in the preview on Chrome + Firefox; Safari pass pending (run
   phase13_B_preview.html on the MacBook before calling this tier final).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tier: MEDIUM (≤330px) — informational passengers shed. Timer and cost chip
   are read-only info (chip is pre-ask-only anyway; totals live in the topbar
   tracker). Controls never shed — that is the Phase 13 invariant. */
@container (max-width: 330px) {
    .col-timer     { display: none; }
    .col-cost-chip { display: none; }
}

/* Tier: NARROW (≤240px) — header wraps to two rows (Variant A: the right
   group drops as one unit). With the 200px floor this tier spans 200–240px —
   the last-resort net. Sticky header simply pins at its two-row height. */
@container (max-width: 240px) {
    .col-head { flex-wrap: wrap; row-gap: 8px; }
    .col-head .col-head-left  { flex: 1 1 100%; }
    .col-head .col-head-right { flex: 1 1 100%; justify-content: flex-end; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 13 (D + F) — maximize/restore button + whole-header collapse target
   ═══════════════════════════════════════════════════════════════════════════ */

/* D — the maximize/restore control. Global button reset supplies background/
   border/cursor; stroke SVGs ride currentColor (both glyphs stroke-form per
   the ≥13px legibility rule — the restore squares are outlines, not fills). */
.col-maximize-btn {
    color: var(--text-muted); padding: 4px 6px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: background 0.2s, color 0.2s;
}
.col-maximize-btn:hover { background: var(--surface-hover); color: var(--text-main); }
.col-maximize-btn[aria-pressed="true"] { color: var(--text-main); }
@media (max-width: 768px) { .col-maximize-btn { display: none; } }   /* mobile tabs already show one column */

/* F — desktop-only affordance: the header's dead zones collapse the column;
   pointer cursor signals it and the chevron lights on header hover so the
   click's effect is announced with iconography the user already knows.
   Interactive children keep their own cursors (the chip re-asserts help). */
@media (min-width: 769px) {
    .col-head { cursor: pointer; }
    .col-head:hover .col-collapse-btn { background: var(--surface-hover); color: var(--text-main); }
}
.col-cost-chip { cursor: help; }

/* Screen-reader-only live region (Phase 13 D — layout-change announcements). */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 13 (wave 4) — mobile: minimized topbar + follow-up lines hidden
   Everything here is fenced ≤768px; desktop is untouched. The .topbar-pill
   element is DOM-built by app.js (ensureTopbarPill) and exists on every
   viewport — this base rule keeps it invisible everywhere except the
   minimized mobile bar.
   ═══════════════════════════════════════════════════════════════════════════ */
.topbar-pill { display: none; }

@media (max-width: 768px) {
    /* Minimized bar: brand + pill (+ the small share/theme icons). The
       Phase 11.1 --topbar-h ResizeObserver re-pads the body automatically. */
    .topbar.topbar-min .prompt-wrap,
    .topbar.topbar-min .auth-widget,
    .topbar.topbar-min #help-btn,
    .topbar.topbar-min #contact-btn,
    .topbar.topbar-min .attach-chips { display: none; }
    .topbar .topbar-pill:not([hidden]) {   /* Phase 13.4.1 — JS owns visibility; the pill shows in min AND expanded states (it is the toggle) */
        display: inline-flex; align-items: center; gap: 8px;
        flex: 1 1 auto; min-width: 0;
        background: var(--input-bg); border: 1px solid var(--border);
        border-radius: 999px; padding: 6px 12px;
        font-size: 12px; color: var(--text-muted); text-align: left;
    }
    .topbar-pill .pill-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
    .topbar-pill .pill-edit { flex: none; margin-left: auto; opacity: 0.7; }

    /* Follow-up connector lines: geometry is meaningless in single-column tab
       mode (drawFollowupConnectors also early-returns there). The icon row
       keeps its own click handlers, so select/deselect works untouched. */
    .followup-connectors { display: none; }
}

/* ─── Phase 13.4.2 — mobile: anchored rich tooltips go viewport-fixed ────────
   Both tips are absolutely positioned, centered ON THEIR ANCHOR at a fixed
   280px width; max-width caps size but not position, so an anchor near the
   right edge pushes the (even invisible — opacity:0 still occupies layout)
   tip past the viewport. The stat-tip sits in normal flow, so it widened the
   whole document by ~29px on phones — the "blank gutter" bug. Fixed-position
   boxes contribute nothing to scrollable overflow and viewport-centering
   cannot escape the viewport; show/hide mechanics (opacity) are untouched.
   Desktop keeps the anchored geometry. */
@media (max-width: 768px) {
    .stat-footer .stat-tip {
        position: fixed; left: 50%; transform: translateX(-50%);
        top: auto; bottom: 16px; z-index: 500;
    }
    .cost-display-wrap .cost-display-tip {
        position: fixed; left: 50%; transform: translateX(-50%);
        top: calc(var(--topbar-h, 64px) + 8px); bottom: auto; z-index: 500;
    }
}

/* ─── Phase 13.5 — adaptive header identity (name → brand-ring icon) ─────────
   Wide column: the bot NAME renders exactly as before (desktop pixel-identical;
   the icon is display:none). ≤520px container width — just above where names
   start truncating — the name yields to a 24px logo in a brand-colored ring
   (the follow-up iconbar's established visual language), with the name on an
   instant data-tip. Threshold tunable like the other tiers. Ring color rides
   an inline border-color per bot (columnHTML). */
.col-bot-icon {
    display: none; width: 24px; height: 24px; border-radius: 50%;
    border: 2px solid var(--border); background: var(--surface);
    align-items: center; justify-content: center; flex: none;
}
.col-bot-icon img { width: 14px; height: 14px; display: block; }
@container (max-width: 520px) {
    .col-bot-icon { display: inline-flex; }
    .col-head .name { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Phase 13.6 — session-list flags · legal footer · legal modal · savings total
   ══════════════════════════════════════════════════════════════════════════ */

/* Session-list row indicators: ✦ synthesis flag + paperclip with count chip. */
.history-modal .item-flags { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.history-modal .flag-synth {
    font-size: 12px; line-height: 1;
    color: var(--accent-green);
}
.history-modal .flag-attach { position: relative; display: inline-flex; color: var(--text-muted); }
.history-modal .flag-attach svg { width: 13px; height: 13px; display: block; }
.history-modal .flag-attach .flag-count {
    position: absolute; top: -6px; right: -8px;
    min-width: 13px; height: 13px; padding: 0 3px; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 700; line-height: 1;
    color: var(--surface); background: var(--text-muted);
    border-radius: 999px;
}

/* Always-present legal footer — deliberately independent of #stat-footer,
   which hides itself whenever stats.php is unreachable. */
.legal-footer {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 10px 16px 16px; text-align: center;
    font-size: 12px; color: var(--text-muted);
}
.legal-footer .lf-line { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
.legal-footer .lf-sep { opacity: 0.5; }
.legal-footer a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.legal-footer a:hover { color: var(--text-main); }
.legal-footer .lf-tm { font-size: 11px; opacity: 0.75; max-width: 640px; }

/* Privacy / Terms modal — reuses .modal-backdrop / .modal chrome. */
.legal-modal { position: relative; max-width: 640px; width: min(640px, 92vw); max-height: 82vh; overflow-y: auto; }
.legal-updated { font-size: 12px; color: var(--text-muted); margin: 2px 0 12px; }
.legal-modal h3 { font-size: 14px; font-weight: 700; margin: 16px 0 6px; color: var(--text-main); }
.legal-modal p, .legal-modal li { font-size: 13px; line-height: 1.55; color: var(--text-main); }
.legal-modal ul { padding-left: 20px; margin: 6px 0; }
.legal-modal li { margin-bottom: 4px; }
.legal-close {
    position: absolute; top: 14px; right: 16px;
    background: none; border: none; color: var(--text-muted);
    font-size: 22px; line-height: 1; cursor: pointer;
    padding: 2px 6px; border-radius: 6px;
}
.legal-close:hover { background: var(--surface-hover); color: var(--text-main); }

/* Savings table totals row (tfoot follows tbody; column sums as displayed). */
.savings-table tfoot td {
    border-top: 2px solid var(--border);
    border-bottom: none;
    font-weight: 700;
}

/* ============================================================================
   Phase 14 — site-wide announcement banner + Admin link
   Fixed BOTTOM strip (cookie-banner pattern). z-index 300 sits above the
   fixed .topbar (200) by convention, but at bottom they never overlap.
   ============================================================================ */
.polycog-announce {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-top: 2px solid var(--accent);
    font-size: 14px;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.25);
}
.polycog-announce.warning {
    border-top-color: var(--warning, #d9a441);
}
.polycog-announce-text {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}
.polycog-announce-x {
    flex: none;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
}
.polycog-announce-x:hover {
    color: var(--text-primary);
}
/* Admin link in the Profile Overview identity row — reuses .signout-btn
   visuals; this modifier only adds spacing and kills anchor underlining. */
.admin-panel-link {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    margin-right: 8px;
}

/* ==========================================================================
 * Phase 14.5 — follow-up attachments + profile storage meter
 * ========================================================================== */
/* Follow-up composer chips reuse the .attach-chips look wholesale; only the
   container spacing differs inside the follow-up box. */
.fu-attach-chips { padding: 2px 0 6px; }
/* Paperclip sits between the textarea and Send; the inputwrap stretches its
   children (align-items: stretch), so pin the button to a compact square. */
.followup-inputwrap .fu-attach-btn { align-self: center; flex-shrink: 0; }
/* Turn-pill attachment names — their own muted line under the pill text. */
.followup-pill-atts {
    display: block;
    color: var(--text-muted); font-size: 11px; margin-top: 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Profile storage meter (renders only at ≥75% of quota). */
.storage-meter-line { font-size: 13px; color: var(--text-main); margin: 4px 0 6px; }
.storage-meter {
    height: 6px; border-radius: 3px; overflow: hidden;
    background: color-mix(in srgb, var(--text-muted) 18%, var(--surface));
    border: 1px solid var(--border);
}
.storage-meter-fill { height: 100%; background: var(--accent-green); }
.storage-meter.is-critical .storage-meter-fill { background: var(--warning-border); }
.storage-meter-upgrade { font-size: 12px; color: var(--text-muted); margin-top: 6px; }

/* Phase 14.5.1 — clickable attachment names on the follow-up pill. Dotted
   underline signals “opens the original” without reading as a nav link. */
.followup-pill-att.is-viewable {
    cursor: pointer;
    text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px;
}
.followup-pill-att.is-viewable:hover { color: var(--text-main); }

/* ══════════════════════════════════════════════════════════════════════════════
   Phase 14.6 — Files tab (attachment manager)
   ══════════════════════════════════════════════════════════════════════════════ */

/* Eight tabs post-rename (Profile · Chats · Shares · Files · Memory · Settings
   · Savings · Keys): let the strip wrap instead of overflowing at narrow
   widths. Appended override — same specificity, later in the cascade wins. */
.history-tabs { flex-wrap: wrap; column-gap: 18px; row-gap: 0; }

.files-meter { padding: 14px 4px 12px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.files-meter-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 600; color: var(--text-main); margin-bottom: 7px; }
.files-meter-count { color: var(--text-muted); font-weight: 500; }
.files-meter .memory-progress-fill { background: var(--accent-share); }
.files-meter.files-meter-warn .memory-progress-fill { background: var(--warning-border); }
.files-meter.files-meter-danger .memory-progress-fill { background: var(--error-text); }
.files-meter-hint { font-size: 12px; color: var(--text-muted); margin-top: 8px; }

.files-sort { display: flex; gap: 6px; margin: 0 4px 10px; }
.files-sort button {
    font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text-muted); cursor: pointer;
}
.files-sort button:hover { color: var(--text-main); }
.files-sort button.active { color: var(--text-main); border-color: var(--brand-gem); }

.files-kind { display: inline-flex; width: 14px; height: 14px; margin-right: 8px; color: var(--text-muted); flex: 0 0 auto; align-self: center; }
.files-kind svg { width: 14px; height: 14px; }
.files-name { color: var(--text-main); text-decoration: none; }
.files-name:hover { text-decoration: underline; }
.files-badge { color: var(--text-muted); font-style: italic; }
.files-refs-toggle { cursor: pointer; color: var(--accent-share); }
.files-refs-toggle:hover { text-decoration: underline; }
.files-refs { display: none; margin: 6px 0 2px; padding-left: 22px; }
.files-refs.open { display: block; }
.files-ref-link { display: block; font-size: 13px; color: var(--text-main); cursor: pointer; padding: 2px 0; }
.files-ref-link:hover { color: var(--brand-gem); text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════════════
   Phase 15 — Auto-suggest memories: toast, parked glow, Memory-tab auto row
   ══════════════════════════════════════════════════════════════════════════════ */

/* Suggestion toast — bottom-RIGHT on purpose: the bottom-center slot belongs to
   .bottom-toast (session-saved notices) and the two must never collide. Passive:
   no focus steal; slides in from the right, slides back out on park/ignore. */
.memory-suggest-toast {
    position: fixed; bottom: 24px; right: 24px; z-index: 1000;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent-green);
    border-radius: 8px; padding: 12px 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    display: flex; align-items: center; gap: 10px; font-size: 13px;
    color: var(--text-main);
    max-width: min(380px, calc(100vw - 48px));
    animation: mstSlideIn .25s ease;
}
.memory-suggest-toast.leaving { animation: mstSlideOut .25s ease forwards; }
@keyframes mstSlideIn  { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mstSlideOut { from { transform: none; opacity: 1; } to { transform: translateX(24px); opacity: 0; } }
.memory-suggest-toast .mst-icon { font-size: 16px; flex-shrink: 0; }
.memory-suggest-toast .mst-msg  { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.memory-suggest-toast .mst-review,
.memory-suggest-toast .mst-ignore { flex-shrink: 0; }
.memory-suggest-toast .mst-ignore { color: var(--text-muted); }

/* Parked suggestions — 🧠 sync-button glow. Same pulse family as gearGlow, but
   its own keyframes so the two cues can diverge later without coupling. */
#memory-sync-btn.has-suggestions { animation: memSuggestGlow 1.6s ease infinite; border-radius: 8px; }
@keyframes memSuggestGlow {
    0%, 100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--accent-green) 55%, transparent); }
    50%      { box-shadow: 0 0 0 3px var(--accent-green); }
}

/* Memory tab — auto-suggest row, visually subordinate to the master toggle row
   above it (negative top margin tucks it under the master's 12px gap). */
.memory-auto-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; margin: -6px 0 12px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
}
.memory-auto-row .memory-switch-state { margin-left: auto; }
.memory-switch.disabled { opacity: .5; cursor: not-allowed; }
.memory-switch.disabled input { cursor: not-allowed; }