@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Saira+Stencil&display=swap');

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

[x-cloak] { display: none !important; }

:root {
    color-scheme: light;

    /* ---- canonical (mockup) tokens — verbatim from Admin Facelift.dc.html:373 ---- */
    --font-ui: 'IBM Plex Sans', system-ui, sans-serif;
    --font-display: 'IBM Plex Sans', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
    --bg: #f3f4f6;
    --surface: #ffffff;
    --surface-2: #f7f8fa;
    --surface-3: #eef0f3;
    --border: #e4e6ec;
    --border-strong: #d0d3dc;
    --text: #14131c;
    --muted: #605d70;
    --faint: #9a97a8;
    --accent: #6f47b2;
    --accent-weak: #efe9fb;
    --accent-strong: #4c2190;
    --on-accent: #ffffff;
    --ok: #0e7a53;
    --ok-weak: #dcf3e9;
    --warn: #8a5a06;
    --warn-weak: #f7ecd4;
    --danger: #b42318;
    --danger-weak: #fbe7e4;
    --pad: 16px;
    --pad-sm: 12px;
    --gap: 12px;
    --ctrl-h: 38px;
    --shadow: 0 1px 0 rgba(20,19,28,.04), 0 1px 2px rgba(20,19,28,.06);
    --btn-bg: #1c1a29;
    --btn-fg: #ffffff;
    --radius: 6px;

    /* ---- back-compat aliases (keep the existing 4.7k-line stylesheet working unchanged) ---- */
    --primary: var(--accent);
    --primary-hover: var(--accent-strong);
    --primary-light: var(--accent-weak);
    --primary-subtle: var(--accent-weak);
    --card-bg: var(--surface);
    --bg-secondary: var(--surface-2);
    --text-muted: var(--muted);
    --text-faint: var(--faint);
    --border-light: var(--border);
    --success: var(--ok);
    --warning: var(--warn);
    --secondary: #06b6d4;   /* kept; effectively dead — G-5 */

    /* ---- Phase 3: complete semantic families (info + pink) + code/backdrop surfaces ---- */
    --info: #2563eb;   --info-weak: #dbeafe;
    --pink: #be185d;   --pink-weak: #fdf2f8;
    --code-bg: #1e293b; --code-fg: #e2e8f0;
    --backdrop: rgba(20,19,28,.5);

    /* ---- phantom tokens referenced elsewhere but never defined ---- */
    --bg-subtle: var(--surface-2);
    --bg-alt: var(--surface-2);
    --surface-subtle: var(--surface-2);
    --font-body: var(--font-ui);

    /* ---- re-valued radius scale (tighter, per mockup) ---- */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --radius-xl: 14px;

    /* ---- shadow scale (softer; --shadow-sm points at the new base) ---- */
    --shadow-sm: var(--shadow);
    --shadow-md: 0 4px 12px rgba(20,19,28,.08);
    --shadow-lg: 0 8px 28px rgba(20,19,28,.12);
    --shadow-xl: 0 20px 50px rgba(20,19,28,.16);

    --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --deploy-accent: #10b981;
    --deploy-accent-hover: #059669;
    --deploy-accent-light: #d1fae5;
}

[data-theme="dark"] {
    color-scheme: dark;
    --bg: #191a22;
    --surface: #24252f;
    --surface-2: #1e1f28;
    --surface-3: #2c2e3a;
    --border: #363845;
    --border-strong: #474a5a;
    --text: #e9e8f0;
    --muted: #a0a0b2;
    --faint: #6f7182;
    --accent: #a78bfa;
    --accent-weak: rgba(167,139,250,.18);
    --accent-strong: #bda4fc;
    --on-accent: #191a22;
    --ok: #4cc38a;
    --ok-weak: rgba(76,195,138,.16);
    --warn: #e0a340;
    --warn-weak: rgba(224,163,64,.16);
    --danger: #f0796b;
    --danger-weak: rgba(240,121,107,.16);
    --shadow: 0 1px 0 rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.25);
    --shadow-sm: var(--shadow);
    --shadow-md: 0 4px 12px rgba(0,0,0,.35);
    --shadow-lg: 0 8px 28px rgba(0,0,0,.45);
    --shadow-xl: 0 20px 50px rgba(0,0,0,.55);
    --btn-bg: #e9e8f0;
    --btn-fg: #191a22;
    --secondary: #22d3ee;   /* keep the aliases coherent in dark */
    --info: #60a5fa;   --info-weak: rgba(96,165,250,.16);
    --pink: #f472b6;   --pink-weak: rgba(244,114,182,.16);
    --code-bg: #0f1015; --code-fg: #e9e8f0;
    --backdrop: rgba(0,0,0,.6);
}

html {
    background: var(--bg);
}

body {
    font-family: var(--font-ui);
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    transition: background .25s, color .25s;
}

.container {
    max-width: 90%;
    margin: 0 auto;
    padding: 0 20px;
}

/* =====================
   Auth Pages — Split Layout
   ===================== */
.auth-container {
    min-height: 100vh;
    display: flex;
}

.auth-hero {
    flex: 1;
    /* Fixed brand gradient — stays saturated violet in both themes so the white hero text keeps contrast. */
    background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 55%, #9333ea 100%);
    padding: 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.auth-hero::before {
    content: '';
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    bottom: -140px;
    left: -100px;
}

.auth-hero::after {
    content: '';
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    top: -70px;
    right: -70px;
}

.auth-hero-dot {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
}

.auth-hero-brand {
    color: white;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 56px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.auth-hero-brand svg {
    width: 32px;
    height: 32px;
    opacity: 0.95;
}

.auth-hero-tagline {
    color: white;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.03em;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.auth-hero-sub {
    color: rgba(255,255,255,0.72);
    font-size: 16px;
    margin-bottom: 52px;
    line-height: 1.65;
    position: relative;
    z-index: 1;
    max-width: 380px;
}

.auth-hero-features {
    list-style: none;
    position: relative;
    z-index: 1;
}

.auth-hero-features li {
    color: rgba(255,255,255,0.9);
    padding: 9px 0;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 15px;
    font-weight: 500;
}

.auth-hero-features li .feat-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.auth-hero-features li .feat-icon svg {
    width: 14px;
    height: 14px;
    stroke: white;
}

.auth-form-panel {
    width: 500px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
    background: var(--card-bg);
}

.auth-card {
    width: 100%;
    max-width: 400px;
}

.auth-card h1 {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.025em;
    margin-bottom: 8px;
    color: var(--text);
}

.auth-card > p {
    color: var(--text-muted);
    margin-bottom: 32px;
    font-size: 15px;
}

.auth-link-text {
    text-align: center;
    margin-top: 24px;
    color: var(--text-muted);
    font-size: 14px;
}

.auth-link-text a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

.auth-link-text a:hover {
    text-decoration: underline;
}

/* =====================
   Forms
   ===================== */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 8px;
}

/* Override label for checkboxes — keep normal case */
.form-group label:has(input[type="checkbox"]) {
    text-transform: none;
    letter-spacing: normal;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* Phase 3b — brand-tint native checkboxes/radios (more specific rules like .header-toggle override) */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--accent);
}

.form-group input:not([type="checkbox"]),
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-family: inherit;
    color: var(--text);
    background: var(--card-bg);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.form-group input:not([type="checkbox"]):focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-subtle);
}

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

.form-group small {
    display: block;
    font-size: 12px;
    color: var(--text-faint);
    margin-top: 6px;
}

.form-error {
    color: var(--danger);
    font-size: 13px;
    margin-top: 6px;
}

/* ── Canonical form controls (PR 87 item 2) ───────────────────────────────────────────
   .form-input / .form-select / .form-textarea / .form-label are the classes for a control
   that sits OUTSIDE a .form-group. Two dashboard pages had been using them for a release with
   no rule behind any of them — the passphrase field and the members quick-add rendered as
   170-px browser defaults with 1 px of padding — so this is the ONE definition. Inside a
   .form-group the older `.form-group input:not([type="checkbox"])` rule is more specific and
   still wins, on purpose: every modal keeps its look, and these apply only where that rule
   cannot reach. A class name is not a style: grep this sheet before using a `.form-*` class
   (CLAUDE.md gotcha #37). Tokens only — every one has a dark-theme override. */
.form-input,
.form-select,
.form-textarea {
    display: block;
    width: 100%;
    height: var(--ctrl-h);
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    line-height: calc(var(--ctrl-h) - 2px);
    box-sizing: border-box;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--faint); }
.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-weak);
}
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled { opacity: .6; cursor: not-allowed; }
.form-select { padding-right: 28px; cursor: pointer; }
/* A textarea needs its height back. `textarea.form-input` covers a page that reached for the
   input class on a textarea before the sibling existed. */
.form-textarea,
textarea.form-input {
    height: auto;
    min-height: 96px;
    padding: 10px 12px;
    line-height: 1.45;
    resize: vertical;
}
.form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
}

/* An input with an inset control at its right edge (the passphrase eye): the two share ONE
   border, so the button is borderless and sits inside the field's padding. */
.input-group { position: relative; }
.input-group .form-input { padding-right: 42px; }
.input-group .input-group__btn {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
}

/* A square icon button (the intake editor's reorder / remove, the passphrase eye). Promoted
   verbatim from leads.html's inline sheet (PR 86) the moment a second page needed it, so the
   two cannot drift. Disabled reads as a dimmed control, not grey text on a grey button. */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--muted);
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.btn-icon svg { width: 15px; height: 15px; }
.btn-icon:hover:not(:disabled) { background: var(--surface-3); color: var(--text); border-color: var(--border-strong); }
.btn-icon:disabled { opacity: 0.35; cursor: not-allowed; }
.btn-icon:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn-icon--danger:hover:not(:disabled) { background: var(--danger-weak); border-color: var(--danger); color: var(--danger); }

/* Compose-broadcast "When to send" option rows.
   The global `.form-group input:not([type="checkbox"])` rule stretches radios to
   width:100% with padding/border (it only excludes checkboxes), which centered the
   glyph and shoved the label to wrap on the right. Scope these radios back to a
   clean clickable option-row layout. */
.bcast-radio-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}
.bcast-radio {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    transition: border-color var(--transition), background var(--transition);
}
.bcast-radio:hover {
    border-color: var(--primary);
    background: var(--primary-subtle);
}
.bcast-radio input[type="radio"] {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border: 0;
    accent-color: var(--primary);
    cursor: pointer;
}
/* Highlight the selected row. */
.bcast-radio:has(input[type="radio"]:checked) {
    border-color: var(--primary);
    background: var(--primary-subtle);
}

/* =====================
   Buttons
   ===================== */
.btn {
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: all var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: 0.01em;
    font-family: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.btn-primary {
    background: var(--btn-bg);
    color: var(--btn-fg);
    border-color: var(--btn-bg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.btn-primary:hover {
    background: var(--btn-bg);
    border-color: var(--btn-bg);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

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

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

.btn-danger {
    background: transparent;
    color: var(--danger);
    border-color: var(--danger);
}

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

.btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border-color: transparent;
}

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

.btn-bw {
    background: var(--btn-bg);
    color: var(--btn-fg);
    border-color: var(--btn-bg);
}

.btn-bw:hover {
    background: var(--btn-bg);
    border-color: var(--btn-bg);
    transform: translateY(-1px);
    filter: brightness(0.92);
}

.btn-block {
    width: 100%;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

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

/* =====================
   Navigation
   ===================== */
.nav {
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
    border-top: 3px solid var(--primary);
    padding: 13px 0;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-brand {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.015em;
}

.nav-brand svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.brand-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: -0.02em;
    font-family: "Saira Stencil", sans-serif;
}

.nav-links {
    display: flex;
    gap: 24px;
}

.nav-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: color var(--transition);
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--primary);
}

/* Cross-page Help Desk awaiting badge (feature 30) — a small pill on the nav link. */
.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--danger, #ef4444);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
}

.nav-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Pinned active widget chip (FABLE 8) — a rounded pill inside .nav-user, just left
   of the theme toggle. The pin icon + name link to widget-edit, the ✕ un-pins.
   Admin/moderator only. Token-only so it tracks light/dark. */
.nav-pin-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 5px 0 11px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    max-width: 240px;
    transition: border-color var(--transition), background var(--transition);
}
.nav-pin-chip:hover {
    border-color: var(--accent);
    background: var(--surface-3, var(--surface-2));
}
.nav-pin-chip__icon {
    flex: 0 0 auto;
    color: var(--accent);
}
.nav-pin-chip__name {
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav-pin-chip__name:hover {
    color: var(--accent);
}
.nav-pin-chip__clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: none;
    padding: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: color var(--transition), background var(--transition);
}
.nav-pin-chip__clear:hover {
    color: var(--danger);
    background: var(--danger-weak, transparent);
}
@media (max-width: 900px) {
    .nav-pin-chip { max-width: 160px; }
    .nav-pin-chip__name { max-width: 96px; }
}

/* Nav Theme Toggle (Phase 2) */
.nav-theme-toggle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.nav-theme-toggle:hover {
    background: var(--surface-3);
    color: var(--accent);
    border-color: var(--border-strong);
}

/* Nav Avatar */
.nav-avatar-wrapper {
    position: relative;
}

.nav-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
    text-transform: uppercase;
    letter-spacing: 0;
}

.nav-avatar:hover {
    background: var(--primary-hover);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.nav-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 220px;
    z-index: 200;
    overflow: hidden;
    animation: fadeInDown 0.15s ease;
}

.nav-dropdown-email {
    padding: 13px 16px;
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
    background: var(--bg-secondary);
    word-break: break-all;
    line-height: 1.4;
}

/* Single divider sits between the identity row and the action rows
   (UX Session 5 / L-08). Inter-action dividers were removed so the
   one separator reads as identity-vs-actions, not a grid line. */
.nav-dropdown-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 4px 0;
}

.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background var(--transition);
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    font-family: inherit;
}

.nav-dropdown-item:hover {
    background: var(--bg-secondary);
}

.nav-dropdown-item.danger {
    color: var(--danger);
}

.nav-dropdown-item.danger:hover {
    background: var(--danger-weak);
}

.nav-dropdown-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.7;
}

/* =====================
   Cards
   ===================== */
.card {
    background: var(--card-bg);
    border-radius: var(--radius-md);    
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-light);
}

.card-header h2,
.card-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
}

/* Card body — was previously unstyled, so card content sat flush against the
   card edges everywhere .card > .card-body is used (Sandbox / Leads / Help Desk).
   Inline padding still overrides where a card needs a tighter/looser body. */
.card-body {
    padding: 24px;
}

/* Shared "page picker" card — the identical title + dropdown + hint block at the
   top of Sandbox / Tools / Help Desk / Leads. Keeps those pages consistent. */
.picker-card {
    margin-bottom: 24px;
}
.picker-card .widget-combobox {
    max-width: 560px;
}
.picker-card .picker-hint {
    margin-top: 12px;
    margin-bottom: 0;
}

/* =====================
   Page Header
   ===================== */
.page-header {
    padding: 32px 0;
}

.page-header h1 {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.025em;
    margin-bottom: 6px;
    font-family: "Saira Stencil", sans-serif;    
}

.page-header p {
    color: var(--text-muted);
    font-size: 15px;
}

/* Page header row — name + isActive toggle side by side (RD-we-16) */
.page-header-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.page-header-row h1 {
    margin: 0;
}

/* isActive header toggle (RD-we-16) */
.header-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1.5px solid var(--border);
    background: var(--bg-secondary, var(--bg));
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.header-toggle input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--success);
    cursor: pointer;
    flex-shrink: 0;
}
.header-toggle--active {
    border-color: var(--success);
    background: var(--ok-weak);
    color: var(--ok);
}

/* Page header hot buttons — Preview Embed / Preview Widget shortcuts */
.page-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}
.page-header-actions .btn {
    padding: 9px 16px;
    font-size: 13.5px;
    line-height: 1.2;
    gap: 7px;
    letter-spacing: -0.005em;
}
.page-header-actions .btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Tinted primary — light purple bg, primary text. Pairs with solid .btn-primary
   as a secondary action that still belongs to the brand. */
.btn-primary-tinted {
    background: var(--primary-subtle);
    color: var(--primary);
    border-color: var(--primary-light);
}
.btn-primary-tinted:hover , .btn-primary-widget:hover {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary-hover);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.btn-primary-widget {
    background: var(--accent-strong);
    color: var(--btn-fg);
    border-color: var(--btn-bg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* =====================
   Widget Grid & Cards
   ===================== */
.widget-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
    margin-top: 8px;
}

.widget-card {
    background: var(--card-bg);
    border-radius: var(--radius-md);
    padding: 22px 22px 20px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    transition: all var(--transition);
    cursor: pointer;
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
}

.widget-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--border-strong);
}

.widget-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.widget-card-title {
  
    align-items: center;
    gap: 10px;
   
    min-width: 0;
}

.widget-card-title h3 {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: "Saira Stencil", sans-serif;
}

.widget-card-meta-row {
   
    align-items: center;
    gap: 8px;
  
}

.widget-color-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.widget-card p {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 14px;
    line-height: 1.55;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.widget-meta {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: var(--text-faint);
    font-weight: 500;
    align-items: center;
}

.widget-doc-badge {
    background: var(--bg-secondary);
    padding: 2px 8px;
    border-radius: 20px;
    color: var(--text-muted);
    font-size: 12px;
}

.widget-status {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.widget-status.active {
    background: var(--ok-weak);
    color: var(--ok);
}

.widget-status.inactive {
    background: var(--danger-weak);
    color: var(--danger);
}

/* PR 87 item 7 — a private widget (passphrase or email list) carries a lock beside its tier. */
.widget-lock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent-weak);
    color: var(--accent);
    flex-shrink: 0;
}

.widget-lock svg {
    width: 13px;
    height: 13px;
}

/* Widget overflow menu */
.widget-overflow-wrapper {
    position: relative;
}

.widget-overflow-btn {
    font-size: 17px;
    line-height: 1;
    padding: 3px 8px;
    color: var(--text-faint);
    border-radius: var(--radius-sm);
}

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

.widget-overflow-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    /* L-05: menu now has 4 items including "Copy Embed Code". Bump the
       min-width so the longest label sits on one line at 14px. */
    min-width: 180px;
    z-index: 50;
    overflow: hidden;
    animation: fadeInDown 0.15s ease;
}

/* L-05 fix: when a card's overflow menu is open, lift the card above its
   siblings. Without this, the next .widget-card in the grid (rendered later
   in DOM order, z-index auto) paints over the menu's absolute children
   because .widget-card has position: relative with no z-index of its own. */
.widget-card.menu-open {
    z-index: 10;
}

.widget-overflow-menu button {
    display: block;
    width: 100%;
    padding: 10px 16px;
    text-align: left;
    background: none;
    border: none;
    font-size: 14px;
    font-family: inherit;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    transition: background var(--transition);
    white-space: nowrap;
}

.widget-overflow-menu button:hover {
    background: var(--bg-secondary);
}

/* UX Session 2 — L-05: menu now has Edit / Preview / Copy / Delete.
   Default colour is neutral; only the destructive item is red. */
.widget-overflow-menu button.danger {
    color: var(--danger);
}

.widget-overflow-menu button.danger:hover {
    background: var(--danger-weak);
}

.widget-overflow-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

/* =====================
   Documents List
   ===================== */
.doc-list {
    margin-top: 16px;
}

.doc-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
    background: var(--card-bg);
    transition: box-shadow var(--transition);
    gap: 12px;
}

.doc-item:hover {
    box-shadow: var(--shadow-sm);
}

.doc-item:last-child {
    margin-bottom: 0;
}

.doc-info h4 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 3px;
    color: var(--text);
}

.doc-info p {
    font-size: 13px;
    color: var(--text-muted);
}

.doc-status {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.doc-status.pending {
    background: var(--warn-weak);
    color: var(--warn);
}

.doc-status.processing {
    background: var(--info-weak);
    color: var(--info);
}

.doc-status.completed {
    background: var(--ok-weak);
    color: var(--ok);
}

.doc-status.failed {
    background: var(--danger-weak);
    color: var(--danger);
}

/* =====================
   Empty State
   ===================== */
.empty-state {
    text-align: center;
    padding: 72px 24px;
    color: var(--text-muted);
}

.empty-state svg {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    opacity: 0.3;
    display: block;
}

.empty-state h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text);
    letter-spacing: -0.01em;
}

.empty-state p {
    font-size: 15px;
    color: var(--text-muted);
    max-width: 320px;
    margin: 0 auto;
}

/* =====================
   Embed Code
   ===================== */
.embed-code {
    background: var(--code-bg);
    color: var(--code-fg);
    padding: 16px 20px;
    border-radius: var(--radius-sm);
    font-family: 'Monaco', 'Menlo', 'Cascadia Code', monospace;
    font-size: 13px;
    overflow-x: auto;
    margin-top: 12px;
    line-height: 1.65;
}

/* =====================
   Alerts
   ===================== */
.alert {
    padding: 13px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 500;
}

.alert-success {
    background: var(--ok-weak);
    color: var(--ok);
}

.alert-error {
    background: var(--danger-weak);
    color: var(--danger);
}

.alert-info {
    background: var(--info-weak);
    color: var(--info);
}

.alert-warning {
    background: var(--warn-weak);
    color: var(--warn);
}

/* =====================
   Panel error banner (Phase Redesign-A — RD-cross-02)
   Inline, panel-scoped failure surface. Replaces transient 5-second toasts
   for non-trivial errors (couldn't load, couldn't fetch) where the user may
   be scrolling another panel and miss the toast. Retry + Dismiss live inside
   the banner.
   ===================== */
.panel-error {
    background: var(--danger-weak);
    border: 1px solid var(--danger);
    border-left: 4px solid var(--danger);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.panel-error-message {
    margin: 0;
    color: var(--danger);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
}

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

/* Phase Redesign-A — RD-cross-04 empty-state CTA spacing.
   The pre-existing `.empty-state` block (above) and its descendant rules
   (`.empty-state svg/h3/p`) are the canonical shape. Empty-states with a
   CTA button add `.empty-state-action` to the button for spacing — the
   only new class introduced in Phase Redesign-A; everything else reuses
   the existing rules. Kept token-friendly for a future RD-cross-05 pass. */
.empty-state-action {
    margin-top: 20px;
}

/* =====================
   Modals
   ===================== */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--backdrop);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1000;
    animation: fadeIn 0.2s ease;
}

/* The shared ConfirmModal is chrome that can be summoned from inside a
   page-level modal (e.g. Transfer Widget → confirm). It sits earlier in the
   DOM than those modals, so at equal z-index it would paint behind them and
   appear "frozen". Force it above any page modal. */
[x-data="confirmModal"] .modal-backdrop {
    z-index: 1100;
}

.modal {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: 28px;
    width: 100%;
    max-width: 550px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
    animation: slideUp 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-top: 4px solid var(--primary);
}

.modal h2 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 20px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.modal-header h3 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
}

.modal-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

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

.modal-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

/* Feature 6 — explicit-close form modals (Class A). The × button anchors to
   .modal; backdrop click / Escape trigger a one-shot nudge instead of closing. */
.modal { position: relative; }             /* anchor for the × (verify no regression) */
.modal-close-x {
    position: absolute; top: 12px; right: 12px;
    width: 32px; height: 32px; border: none; border-radius: var(--radius-sm);
    background: transparent; color: var(--muted);
    font-size: 22px; line-height: 1; cursor: pointer;
}
.modal-close-x:hover { background: var(--surface-2); color: var(--text); }
.modal-close-x:focus-visible { outline: 2px solid var(--accent); }
@keyframes modal-nudge {
    0% { transform: scale(1); } 35% { transform: scale(1.015); }
    70% { transform: scale(0.997); } 100% { transform: scale(1); }
}
.modal--nudge { animation: modal-nudge 0.25s ease; }
@media (prefers-reduced-motion: reduce) { .modal--nudge { animation: none; } }

/* Feature 7 — collapsible sections inside form modals (progressive disclosure).
   Page-generic; reusable if other modals adopt the pattern. Tokens only. */
.modal-section { border-top: 1px solid var(--border); }
.modal-section-header {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 12px 2px;
    background: transparent; border: none; cursor: pointer;
    font: inherit; text-align: left; color: var(--text);
}
.modal-section-header:hover { color: var(--accent); }
.modal-section-header:focus-visible {
    outline: 2px solid var(--accent); border-radius: var(--radius-sm);
}
.modal-section-chevron {
    flex: none; width: 0; height: 0;
    border-left: 5px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform 0.15s ease;
}
.modal-section-chevron--open { transform: rotate(90deg); }
.modal-section-label { font-weight: 700; }
.modal-section-badge {
    margin-left: auto;
    background: var(--surface-2); color: var(--muted);
    font-size: 12px; font-weight: 600;
    padding: 2px 8px; border-radius: var(--radius-sm);
}
.modal-section-body {
    margin-left: 4px; padding: 2px 0 10px 14px;
    border-left: 2px solid var(--border);
}
@media (prefers-reduced-motion: reduce) { .modal-section-chevron { transition: none; } }

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =====================
   Spinner & Loading
   ===================== */
.hidden {
    display: none !important;
}

.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    display: inline-block;
    vertical-align: middle;
}

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

/* Skeleton loaders */
.skeleton {
    background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--surface-3) 50%, var(--bg-secondary) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-card {
    height: 160px;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}

.skeleton-line {
    height: 14px;
    margin-bottom: 10px;
}

.skeleton-line.short {
    width: 55%;
}

/* =====================
   Widget Edit — Sidebar Layout
   ===================== */
/* Phase Redesign-E (Item 1) — IA scaffolding. The flat 9-tab sidebar collapses
   into 4 top-tabs + a contextual sub-tab strip. Vertical layout: top-tabs row,
   sub-tabs row, then the tab content panel. */
.widget-edit-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    min-height: 620px;
}

.top-tabs {
    display: flex;
    gap: 4px;
    
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-light);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.top-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
    font-family: inherit;
    white-space: nowrap;
}

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

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

.sub-tabs {
    display: flex;
    gap: 2px;
    padding: 10px 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.sub-tab {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    font-family: inherit;
    white-space: nowrap;
}

.sub-tab:hover {
    background: var(--border-light);
    color: var(--text);
}

.sub-tab--active {
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 600;
}

.edit-content {
    padding: 32px 10px;
    overflow: auto;
    min-width: 0;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Settings panel — own save scope (RD-we-05) */
.settings-panel {
    margin-top: 28px;
    padding: 20px 24px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--bg-secondary, var(--bg));
}
.settings-panel__header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}
.settings-panel__header strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}
.settings-panel__header small {
    color: var(--text-muted);
    font-size: 12px;
}
.settings-panel--apikey {
    border-color: var(--border);
}

/* Phase Redesign-E (Item 2) — Settings restructured into 5 named sections.
   Each section is a vertical stack: H4 title, then form-groups. Sections are
   separated by a top border (drop the first one's). */
.settings-section {
    padding-top: 24px;
    margin-top: 24px;
    border-top: 1px solid var(--border-light);
}

.settings-section__title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin: 0 0 16px;
}
.settings-section--plan {
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1.5px solid var(--border);
}
.settings-section--plan .settings-panel--apikey {
    margin-top: 20px;
}

/* Danger Zone — UX-fix-03 / M-02. Replaces the older inline
   .settings-section__danger-action pattern which floated the Delete Widget
   button off the bottom of Plan & access with no visual boundary. */
.settings-section--danger {
    border: 1px solid var(--danger);
    border-radius: 8px;
    padding: 20px;
    margin-top: 32px;
    background: var(--danger-weak);
}
.settings-section__title--danger {
    color: var(--danger);
    margin-bottom: 12px;
}
.danger-zone-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.danger-zone-label {
    font-weight: 600;
    color: var(--text);
    margin: 0 0 4px;
}
.danger-zone-desc {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}

/* Phase Redesign-E (Item 3) — "Moved" hint banner. Used at the top of the
   Embed Code sub-tab to tell users the voice + response toggles have moved
   to Behaviour > Response. Informational, not an alert (nothing is wrong). */
.moved-hint {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 16px;
    margin-bottom: 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text);
    line-height: 1.55;
}
.moved-hint svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--primary);
    margin-top: 1px;
}
.moved-hint strong {
    color: var(--text);
}
.moved-hint a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}
.moved-hint a:hover {
    text-decoration: underline;
}

/* Phase Redesign-E (Item 4) — page-level action bar that hosts the
   "+ Add Knowledge" button when the user is on any Knowledge sub-tab. */
.knowledge-action-bar {
    display: flex;
    justify-content: flex-end;
    padding: 8px 8px;
    background: var(--bg);
    border-bottom: 1px solid var(--border-light);
}

/* Phase Redesign-E (Item 4) — Add Knowledge modal source-type chip strip.
   Four equal-width chips that select between file / text / url / crawl. */
.ak-type-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 20px;
}
.ak-type-chip {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card-bg);
    cursor: pointer;
    text-align: left;
    transition: all var(--transition);
    font-size: 13px;
    line-height: 1.35;
}
.ak-type-chip input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.ak-type-chip:hover {
    border-color: var(--primary);
    background: var(--bg-secondary);
}
.ak-type-chip strong {
    color: var(--text);
    font-weight: 600;
}
.ak-type-chip small {
    color: var(--text-muted);
    font-size: 12px;
}
.ak-type-chip--active {
    border-color: var(--primary);
    background: var(--primary-light);
}
.ak-type-chip--active strong {
    color: var(--primary);
}

/* Phase Redesign-E (Item 5) — Data Source two-step wizard step indicator. */
.ds-wizard-steps {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0 4px;
    font-size: 13px;
    color: var(--text-muted);
}
.ds-wizard-step {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ds-wizard-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--border-light);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}
.ds-wizard-step--active {
    color: var(--primary);
    font-weight: 600;
}
.ds-wizard-step--active .ds-wizard-step-num {
    background: var(--primary);
    color: #fff;
}
.ds-wizard-step--done .ds-wizard-step-num {
    background: var(--success, #16a34a);
    color: #fff;
}
.ds-wizard-step-sep {
    color: var(--text-faint);
    font-weight: 400;
}

/* Phase Redesign-E (Item 6) — Sessions sub-tab inside Analytics. Lists chat
   sessions for the widget; clicking a row drills into messages with an
   Inspect button per assistant turn (reuses .msg-inspect-btn). */
.sessions-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}
.sessions-header h3 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
}
.sessions-meta {
    color: var(--text-muted);
    font-size: 13px;
}
.sessions-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}
.sessions-table thead th {
    text-align: left;
    padding: 12px 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border);
}
.sessions-table tbody td {
    padding: 12px 8px;
    border-bottom: 1px solid var(--border-light);
    font-size: 13px;
    color: var(--text);
}
.sessions-row {
    cursor: pointer;
    transition: background var(--transition);
}
.sessions-row:hover {
    background: var(--bg-secondary);
}
.sessions-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--text-muted);
}
.sessions-breadcrumb a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}
.sessions-breadcrumb a:hover {
    text-decoration: underline;
}
.sessions-breadcrumb__sep {
    color: var(--text-faint);
}

/* Message bubbles inside the drilled-into Sessions view. */
.messages-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}
.message-bubble {
    padding: 11px 15px;
    border-radius: 12px;
    border: 1px solid var(--border-light);
    background: var(--card-bg);
    box-shadow: var(--shadow);
}
/* Visitor — left side, primary tint */
.message-bubble--user {
    background: var(--primary-light);
    border-color: var(--primary);
    margin-right: 60px;
    border-bottom-left-radius: 4px;
}
.message-bubble--user .message-bubble__role { color: var(--primary); }
/* AI assistant — right side, neutral */
.message-bubble--assistant {
    background: var(--bg-secondary);
    margin-left: 60px;
    border-bottom-right-radius: 4px;
}
/* Human operator (Support) — right side, green; mirrors the visitor-facing SUPPORT bubble */
.message-bubble--operator {
    background: var(--ok-weak);
    border-color: var(--ok);
    color: var(--ok);
    margin-left: 60px;
    border-bottom-right-radius: 4px;
}
.message-bubble--operator .message-bubble__role { color: var(--ok); }
.message-bubble--operator .message-bubble__content { color: var(--ok); }
/* Automated system note — centered, muted, no card */
.message-bubble--system {
    align-self: center;
    max-width: 90%;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 2px 0;
    text-align: center;
}
.message-bubble--system .message-bubble__head { justify-content: center; margin-bottom: 1px; }
.message-bubble--system .message-bubble__time { flex: 0 0 auto; }
.message-bubble--system .message-bubble__content {
    font-size: 12.5px;
    font-style: italic;
    color: var(--text-faint);
}
.message-bubble__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    font-size: 12px;
}
.message-bubble__role {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--text-muted);
}
.message-bubble__time {
    color: var(--text-faint);
    flex: 1;
}
.message-bubble__content {
    font-size: 14px;
    color: var(--text);
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}
/* The Inspect button reuses .msg-inspect-btn styles defined elsewhere
   (Phase Redesign-B). No additional rule needed here. */

/* Pagination page label — reused inside Sessions sub-tab pagination footer. */
.pagination-page-label {
    color: var(--text-muted);
    font-size: 13px;
    padding: 0 4px;
}

/* =====================
   Responsive
   ===================== */
@media (max-width: 1024px) {
    .auth-hero {
        padding: 48px;
    }

    .auth-form-panel {
        width: 440px;
        padding: 40px 32px;
    }
}

@media (max-width: 900px) {
    .widget-edit-card {
        min-height: auto;
    }

    .top-tabs {
       
    }

    .top-tab {
        padding: 8px 12px;
        font-size: 13px;
    }

    .sub-tabs {
        padding: 8px 12px;
    }

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

    .edit-content {
        padding: 20px 10px;
    }
}

@media (max-width: 768px) {
    .auth-hero {
        display: none;
    }

    .auth-form-panel {
        width: 100%;
        padding: 40px 24px;
    }

    .nav-links {
        display: none;
    }

    .widget-grid {
        grid-template-columns: 1fr;
    }

    .modal {
        max-width: 100%;
    }

    .page-header h1 {
        font-size: 24px;
    }

    .modal-actions {
        flex-direction: column;
    }
}

/* =====================
   Admin Panel (Phase 14)
   ===================== */

.admin-layout {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 20px;
    align-items: start;
    margin-top: 24px;
}

.admin-users-panel,
.admin-detail-panel {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.admin-panel-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 12px;
    align-items: center;
}

.admin-panel-header input {
    flex: 1;
    padding: 8px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    outline: none;
    transition: border-color var(--transition);
}

.admin-panel-header input:focus {
    border-color: var(--primary);
}

.admin-user-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 12px;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: background var(--transition);
    font-size: 14px;
}

.admin-user-row:hover { background: var(--bg-secondary); }
.admin-user-row.selected { background: var(--primary-subtle); border-left: 3px solid var(--primary); }
.admin-user-row:last-child { border-bottom: none; }

.admin-user-email {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tier-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tier-lite     { background: var(--surface-3); color: var(--muted); }
.tier-pro      { background: var(--info-weak); color: var(--info); }
.tier-plus     { background: var(--accent-weak); color: var(--accent); }
.tier-business { background: var(--warn-weak); color: var(--warn); }
.tier-custom   { background: var(--pink-weak); color: var(--pink); }

.role-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.role-admin { background: var(--primary-light); color: var(--primary); }
.role-user  { background: var(--bg-secondary); color: var(--text-muted); }

/* Detail panel */
.admin-detail-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    color: var(--text-faint);
    font-size: 14px;
}

.admin-detail-header {
    padding: 20px 24px 0;
    border-bottom: 1px solid var(--border);
}

.admin-detail-tabs {
    display: flex;
    gap: 4px;
    margin-top: 16px;
}

.admin-tab {
    padding: 8px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition);
}

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

.admin-panel-content {
    padding: 20px 24px;
}

.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.admin-stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    box-shadow: var(--shadow-sm);
}

.admin-stat-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.admin-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
}

/* Telemetry accordion */
.telemetry-toggle {
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    margin-top: 4px;
    display: inline-block;
}

.telemetry-toggle:hover { color: var(--primary); }

.telemetry-detail {
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
}

.msg-bubble {
    margin-bottom: 16px;
    max-width: 85%;
}

.msg-bubble.user { margin-left: auto; }

.msg-role-chip {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 4px;
}

.msg-content {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
}

.msg-bubble.user .msg-content {
    background: var(--primary-subtle);
    color: var(--text);
}

/* Pagination */
.pagination-row {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 12px 20px;
    border-top: 1px solid var(--border-light);
}

.page-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card-bg);
    font-size: 13px;
    cursor: pointer;
    transition: all var(--transition);
}

.page-btn:hover { border-color: var(--primary); color: var(--primary); }
.page-btn.active { background: var(--primary); color: white; border-color: var(--primary); }

/* RD-admin-03 — pagination range label + jump-to-page input (Phase Redesign-B).
   Token-friendly class names so a future RD-cross-05 design-token migration
   can re-style without renaming. */
.pagination-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--text-muted);
}
.pagination-range { font-size: 12px; color: var(--text-faint); }
.pagination-controls { display: inline-flex; align-items: center; gap: 8px; }
.pagination-jump {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 12px;
}
.pagination-jump label { margin: 0; font-weight: 400; color: var(--text-muted); }
.pagination-jump input[type="number"] {
    width: 56px;
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card-bg);
    font-size: 13px;
    text-align: center;
    color: var(--text);
}
.pagination-jump input[type="number"]:focus {
    outline: none;
    border-color: var(--primary);
}
.pagination-jump-total { color: var(--text-faint); }

/* RD-admin-01 — drill-down breadcrumb (Phase Redesign-B). BEM-style classes
   so a future RD-cross-05 design-token migration can re-style without
   renaming. */
.admin-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 8px 0 12px;
    font-size: 13px;
    line-height: 1.4;
}
.admin-breadcrumb__segment { display: inline-flex; align-items: center; gap: 6px; }
.admin-breadcrumb__btn {
    background: none;
    border: none;
    padding: 2px 4px;
    margin: 0;
    color: var(--primary);
    font: inherit;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--transition), color var(--transition);
}
.admin-breadcrumb__btn:hover { background: var(--primary-subtle); }
.admin-breadcrumb__btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}
.admin-breadcrumb__btn--current,
.admin-breadcrumb__btn[disabled] {
    color: var(--text);
    background: none;
    cursor: default;
    font-weight: 500;
}
.admin-breadcrumb__btn--current:hover,
.admin-breadcrumb__btn[disabled]:hover { background: none; }
.admin-breadcrumb__sep {
    color: var(--text-faint);
    user-select: none;
}

/* RD-admin-08 — per-turn pipeline trace side drawer (Phase Redesign-B).
   Desktop-first; not optimised for mobile (out of scope for this phase). */
.trace-panel-backdrop {
    position: fixed;
    inset: 0;
    background: var(--backdrop);
    backdrop-filter: blur(2px);
    z-index: 1100;
}
.trace-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 520px;
    max-width: 100vw;
    background: var(--card-bg, #fff);
    border-left: 1px solid var(--border);
    box-shadow: -4px 0 16px rgba(15, 23, 42, 0.08);
    z-index: 1101;
    display: flex;
    flex-direction: column;
}
.trace-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.trace-panel__title { margin: 0; font-size: 16px; font-weight: 600; color: var(--text); }
.trace-panel__meta {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-muted);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.trace-panel__sep { color: var(--text-faint); }
.trace-panel__close {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}
.trace-panel__close:hover { background: var(--bg-secondary); color: var(--text); }
.trace-panel__body {
    overflow-y: auto;
    padding: 16px 20px;
    flex: 1 1 auto;
}
.trace-panel__loading {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 14px;
}

.trace-section { margin-bottom: 22px; }
.trace-section__title {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.trace-section__quote {
    margin: 0;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text);
    white-space: pre-wrap;
}
.trace-section__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    font-size: 13px;
}
.trace-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 16px;
    margin-bottom: 12px;
}
.trace-grid > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}
.trace-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.trace-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}
.trace-faint { color: var(--text-faint); }

.trace-empty {
    margin: 6px 0;
    color: var(--text-faint);
    font-size: 12px;
    font-style: italic;
}

.trace-callout {
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    line-height: 1.45;
}
.trace-callout--warn {
    background: var(--warn-weak);
    color: var(--warn);
}

.trace-stage {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin-bottom: 10px;
}
.trace-stage__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.trace-stage__name {
    font-weight: 600;
    text-transform: capitalize;
    color: var(--text);
}
.trace-stage__count { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }

.trace-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.trace-table th {
    text-align: left;
    padding: 6px 8px;
    color: var(--text-muted);
    font-weight: 500;
    border-bottom: 1px solid var(--border-light);
}
.trace-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-light);
    vertical-align: top;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}
.trace-row--fitted { background: var(--ok-weak); }
.trace-chunk-id { font-weight: 500; }
.trace-chunk-preview {
    color: var(--text-muted);
    font-family: var(--font-body, inherit);
    font-size: 11px;
    margin-top: 2px;
    line-height: 1.35;
    white-space: normal;
}
.trace-fitted-badge { color: var(--ok); font-weight: 700; }

.trace-expander {
    margin-top: 8px;
    background: none;
    border: none;
    font-size: 12px;
    color: var(--primary);
    cursor: pointer;
    padding: 4px 0;
}
.trace-expander:hover { text-decoration: underline; }

.trace-toggle {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 2px 8px;
    font-size: 11px;
    color: var(--text-muted);
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
}
.trace-toggle:hover { color: var(--primary); border-color: var(--primary); }

.trace-pre {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 320px;
    overflow-y: auto;
    margin: 0;
}

.trace-skill {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    margin-bottom: 8px;
}
.trace-skill__head {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 6px;
}
.trace-skill__name { font-weight: 600; color: var(--text); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.trace-skill__dur { color: var(--text-muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }

/* Inspect button on assistant messages — RD-admin-08 (Phase Redesign-B). */
.msg-inspect-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 3px 8px;
    font-size: 11px;
    color: var(--text-muted);
    cursor: pointer;
    margin-top: 6px;
    transition: color var(--transition), border-color var(--transition);
}
.msg-inspect-btn:hover {
    color: var(--primary);
    border-color: var(--primary);
}
.msg-inspect-btn svg { width: 12px; height: 12px; }

@media (max-width: 900px) {
    .admin-layout { grid-template-columns: 1fr; }
    .admin-stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =====================
   Subscription UI (Phase 15)
   ===================== */

/* Nav usage pill */
.nav-usage-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 12px;
}

.nav-tier-badge {
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.nav-usage-bar-wrap {
    width: 60px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
}

.nav-usage-bar {
    height: 100%;
    border-radius: 2px;
    transition: width 0.4s ease;
}

.nav-usage-text {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Subscription page */
.sub-hero-card {
    /* Fixed brand gradient — stays saturated so the white text keeps contrast in both themes. */
    background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 100%);
    color: white;
    border-radius: var(--radius-xl);
    padding: 40px 48px;
    display: flex;
    align-items: center;
    gap: 32px;
    margin-bottom: 32px;
}

.sub-tier-name {
    font-size: 32px;
    font-weight: 700;
    flex: 1;
}

.sub-period {
    font-size: 14px;
    opacity: 0.8;
}

.sub-section {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}

.sub-section h2 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
}

.usage-meters { display: flex; flex-direction: column; gap: 16px; }

.usage-meter-label {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 6px;
}

/* =====================
   Help Icons & Tooltips
   ===================== */
.help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--border);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    font-style: normal;
    cursor: default;
    position: relative;
    vertical-align: middle;
    margin-left: 5px;
    flex-shrink: 0;
    user-select: none;
    transition: background var(--transition), color var(--transition);
}
.help-icon:hover { background: var(--primary); color: var(--on-accent); }

.help-icon::before {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    /* Anchor to the icon and grow rightward (not centered) so the tooltip
       never extends left past the card edge, where an overflow:hidden/auto
       ancestor (.widget-edit-card / .edit-content) would clip it. Icons near
       the right edge opt into right-anchoring with the .tip-left modifier. */
    left: 0;
    transform: none;
    background: var(--code-bg);
    color: var(--code-fg);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    white-space: pre-wrap;
    max-width: 280px;
    min-width: 160px;
    width: max-content;
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 9999;
    text-align: left;
}
.help-icon::after {
    content: '';
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--code-bg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 9999;
}
.help-icon:hover::before,
.help-icon:hover::after { opacity: 1; }

/* When tooltip would overflow on the left, align right */
.help-icon.tip-left::before { left: auto; right: 0; transform: none; }
.help-icon.tip-left::after  { left: auto; right: 6px; transform: none; }

/* Field label row — keeps label + icon inline without wrapping */
.label-row {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 6px;
}
.label-row label {
    margin-bottom: 0;
}

/* =====================
   Tab Intro Banners
   ===================== */
.tab-intro {
    position: relative;     /* anchor for .banner-dismiss (UX Session 5 / L-01) */
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--primary-subtle);
    border: 1px solid var(--accent-weak);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    padding-right: 36px;    /* reserve room for the dismiss button */
    margin-bottom: 22px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
}
.tab-intro svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    color: var(--primary);
}
.tab-intro strong { color: var(--text); }
.tab-intro p { margin: 0; }
.tab-intro p + p { margin-top: 4px; }

/* Dismissible info banner button (UX Session 5 / L-01). State persists per-tab
   in localStorage via the tab factory's initBanner/dismissBanner methods. */
.banner-dismiss {
    position: absolute;
    top: 8px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 18px;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.15s, color 0.15s;
}
.banner-dismiss:hover {
    background: var(--surface-3);
    color: var(--text);
}
.banner-dismiss:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

/* =====================
   Embed Tab Cards
   ===================== */
.gw-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    margin-bottom: 16px;
}

.gw-card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.gw-card-header svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    color: var(--primary);
}

.gw-card-header strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
}

.gw-card-header p {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

.gw-action-row {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    justify-content: flex-end;
}

.gw-check-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.gw-check-row:last-child {
    margin-bottom: 0;
}

.gw-check-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 2px;
}

.gw-check-row label {
    margin: 0;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.5;
}

/* PR 80 item 3c — a sub-option of the checkbox above it: indented behind a rule, and dimmed while its
   parent is off. Deliberately NOT .feature-gate-row--locked, which means "not on your plan" — this row
   is available on every tier, it just has no effect until the parent is on. */
.gw-check-row--sub {
    margin-left: 4px;
    padding-left: 14px;
    border-left: 2px solid var(--border);
}

.gw-check-row--sub.gw-check-row--inactive {
    opacity: 0.55;
}

.gw-check-row--sub.gw-check-row--inactive label,
.gw-check-row--sub.gw-check-row--inactive input[type="checkbox"] {
    cursor: not-allowed;
}

/* UX-fix-03 / M-05+M-06 — two-line toggle pattern. <strong>Label</strong>
   on top, then <p class="check-description"> with the description block
   capped at a comfortable reading width so long copy (voice-input, voice-
   output) does not stretch edge-to-edge of the card. */
.gw-check-row .check-description {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted);
    max-width: 600px;
}

/* UX-fix-03 / L-02 — auto-resize textareas. The Settings tab Description
   field starts at 2 rows; in browsers that support `field-sizing: content`
   (Chrome 123+, Edge 123+) the textarea grows with content. Older browsers
   fall back to manual resize via the standard `resize: vertical` handle. */
.form-textarea--autoresize {
    min-height: 60px;
    resize: vertical;
    field-sizing: content;
}

/* UX Session 2 — M-04: green conflicted with .widget-status.active. Reserve
   green exclusively for the Active status indicator; use neutral blue here. */
.gw-scope-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--info);
    background: var(--info-weak);
    border: 1px solid var(--info);
    border-radius: 20px;
    padding: 1px 8px;
    vertical-align: middle;
    margin-left: 6px;
    white-space: nowrap;
}

/* =====================
   Prompt Template Picker
   ===================== */
.template-picker {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.template-picker span {
    font-size: 12px;
    color: var(--text-faint);
    font-weight: 500;
}
.template-chip {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 99px;
    border: 1.5px solid var(--border);
    background: var(--card-bg);
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition), background var(--transition);
    white-space: nowrap;
}
.template-chip:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-subtle);
}

.usage-bar-track {
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.usage-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--primary);
}

.usage-reset-note {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 8px;
}

/* Limits table */
.limits-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.limits-table tr { border-bottom: 1px solid var(--border-light); }
.limits-table tr:last-child { border-bottom: none; }
.limits-table td { padding: 10px 4px; }
.limits-table td:first-child { color: var(--text-muted); }
.limits-table td:last-child { font-weight: 600; text-align: right; }
.limits-check { color: var(--success); font-size: 16px; }
.limits-cross { color: var(--text-faint); font-size: 16px; }

/* Tier comparison table */
.tier-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    text-align: center;
}

.tier-compare-table th {
    padding: 12px 16px;
    font-weight: 700;
    border-bottom: 2px solid var(--border);
}

.tier-compare-table th.current-tier {
    background: var(--primary-subtle);
    color: var(--primary);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.tier-compare-table td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-muted);
}

.tier-compare-table td:first-child { text-align: left; font-weight: 500; color: var(--text); }
.tier-compare-table .current-tier { background: var(--primary-subtle); }

/* Feature lock badge */
.feature-lock-badge {
    display: inline-block;
    margin-left: 8px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: 10px;
    vertical-align: middle;
}

@media (max-width: 768px) {
    .sub-hero-card { flex-direction: column; padding: 24px; }
    .tier-compare-table { font-size: 12px; }
}

/* =====================
   Analytics Dashboard (Phase 16)
   ===================== */

.analytics-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.analytics-header h2 {
    font-size: 20px;
    font-weight: 700;
}

.analytics-range-btns {
    display: flex;
    gap: 4px;
    background: var(--bg-secondary);
    padding: 4px;
    border-radius: var(--radius-sm);
}

.range-btn {
    padding: 5px 12px;
    background: none;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition);
}

.range-btn:hover { color: var(--text); }
.range-btn.active { background: var(--card-bg); color: var(--primary); box-shadow: var(--shadow-sm); }

.analytics-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.analytics-stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition);
}

.analytics-stat-card:hover { box-shadow: var(--shadow-md); }

.analytics-stat-icon { font-size: 24px; margin-bottom: 8px; }

.analytics-stat-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
    margin-bottom: 6px;
}

/* Session 04 (M-13) — KPI card label contrast. The previous treatment
   combined `--text-muted` on white card-bg with `text-transform: uppercase`,
   which dropped the labels below WCAG AA. Switching to `--text` and dropping
   uppercase brings them to a clear, readable rest state. */
.analytics-stat-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.02em;
}

.analytics-chart-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}

.analytics-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.analytics-chart-header h3 { font-size: 15px; font-weight: 700; }

/* Caps the rendered chart height. Chart.js sizes the canvas to fill its
   positioned container when `maintainAspectRatio: false`, so the wrap's
   fixed height becomes the chart height regardless of viewport width. */
.analytics-chart-canvas-wrap {
    position: relative;
    height: 280px;
    width: 100%;
}

.analytics-chart-canvas-wrap canvas {
    max-height: 100%;
    width: 100% !important;
    height: 100% !important;
}

.analytics-secondary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 4px;
}

.analytics-secondary-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: 16px 18px;
}

.analytics-secondary-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}

.analytics-secondary-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}

.analytics-secondary-desc {
    font-size: 12px;
    color: var(--text-muted);
}

/* Locked state */
.analytics-locked {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 360px;
}

.analytics-locked-inner {
    text-align: center;
    max-width: 340px;
}

.analytics-locked-inner h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 16px 0 8px;
}

.analytics-locked-inner p {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .analytics-stat-grid,
    .analytics-secondary-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =====================
   Admin Widget Filters
   ===================== */
#admin-widget-filters {
    display: flex;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    margin-bottom: 20px;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

#admin-widget-filters #filter-search {
    flex: 1;
    min-width: 180px;
    padding: 8px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    background: var(--card-bg);
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}

#admin-widget-filters #filter-search:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-subtle);
}

#admin-widget-filters #filter-search::placeholder {
    color: var(--text-faint);
}

#admin-widget-filters select {
    padding: 8px 32px 8px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    background: var(--card-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition);
}

#admin-widget-filters select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-subtle);
}

@media (max-width: 640px) {
    #admin-widget-filters { flex-direction: column; align-items: stretch; }
    #admin-widget-filters #filter-search,
    #admin-widget-filters select { width: 100%; }
}

/* ----------------------------------------------------------------------
   Phase Redesign-D — RAG Settings tab: defaults helper + typed threshold
   inputs (RD-we-07 / RD-we-08).
   ---------------------------------------------------------------------- */

.form-helper-text {
    margin: 6px 0 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

.threshold-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

/* Higher-specificity selectors required to override
   `.form-group input:not([type="checkbox"]) { width: 100% }`
   (specificity 0,2,1). Anchored on three classes (0,3,0) to win
   cleanly without !important. — Phase D Bug 3 fix (Cowork QA). */
.form-group .threshold-row input[type="range"] {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    margin: 0;
}

.form-group .threshold-row .threshold-number {
    flex: 0 0 82px;
    width: 82px;
    min-width: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.threshold-scale {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ----------------------------------------------------------------------
   Phase Redesign-D — RAG Settings → Test in Sandbox deep-link
   (RD-we-10 / RD-sandbox-06).
   ---------------------------------------------------------------------- */

.rag-settings-tab .form-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

/* ----------------------------------------------------------------------
   Phase Redesign-D — Sandbox suppression callouts (RD-sandbox-01).
   Single-line muted box explaining why a results grid came back empty
   (threshold too strict / query too short / empty knowledge / no match).
   Tone is informational, not alarming.
   ---------------------------------------------------------------------- */

.suppression-callout {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: 6px;
    background: var(--surface-subtle, #f8fafc);
    color: var(--text);
    font-size: 13px;
}

.suppression-callout-message {
    margin: 0;
    color: var(--text);
}

.suppression-callout .near-misses {
    margin: 10px 0 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.suppression-callout .near-misses li {
    display: grid;
    grid-template-columns: 64px 1fr 2fr;
    align-items: baseline;
    gap: 12px;
    font-size: 12px;
    color: var(--text-muted);
}

.suppression-callout .near-misses .near-miss-score {
    font-variant-numeric: tabular-nums;
    color: var(--text);
    font-weight: 600;
}

.suppression-callout .near-misses .near-miss-source {
    font-weight: 500;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.suppression-callout .near-misses .near-miss-preview {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ----------------------------------------------------------------------
   Phase Redesign-D — Analytics Funnel (RD-we-09 / PC-04).
   Five-segment vertical funnel chart, hand-rolled SVG (no Chart.js needed).
   Lite-tier shows a blurred sample-data teaser; Pro+ shows real data.
   Each segment is a clickable button that navigates to admin's filtered
   sessions view via Phase B URL state.
   ---------------------------------------------------------------------- */

.funnel-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    position: relative;
}

.funnel-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 18px;
}

.funnel-card-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}

.funnel-card-header .funnel-subtitle {
    font-size: 13px;
    color: var(--text-muted);
}

.funnel-chart {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.funnel-segment {
    display: grid;
    grid-template-columns: 1fr 80px 90px;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 4px 12px;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card-bg);
    padding: 12px 14px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: var(--text);
    transition: background-color var(--transition), border-color var(--transition);
}

.funnel-segment:hover:not(:disabled),
.funnel-segment:focus-visible:not(:disabled) {
    background: var(--primary-subtle);
    border-color: var(--primary);
    outline: none;
}

/* Disabled = "Total messages" segment. Keeps the layout/colors of a
   normal segment but removes every click affordance: no pointer cursor,
   no hover/focus highlight. */
.funnel-segment:disabled {
    cursor: default;
}

.funnel-segment-bar-wrap {
    position: relative;
    height: 32px;
    background: var(--surface-3);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 0 10px;
}

.funnel-segment-bar {
    position: absolute;
    inset: 0 auto 0 0;
    /* Fixed violet — the white funnel label sits on this fill in both themes. */
    background: linear-gradient(90deg, #7c3aed, #6d28d9);
    border-radius: 6px;
    transition: width var(--transition);
}

.funnel-segment-label {
    position: relative;
    z-index: 1;
    font-size: 13px;
    font-weight: 600;
    color: white;
    /* Keep the label legible even when the bar fill is short and the label
       sits over the light track instead of the purple gradient. */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.funnel-segment-count {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.funnel-segment-desc {
    grid-column: 1 / -1;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text);
    margin-top: 2px;
}

.funnel-segment-pct {
    font-size: 12px;
    color: var(--text-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.funnel-empty {
    text-align: center;
    padding: 32px;
    color: var(--text-muted);
    font-size: 13px;
}

/* Session 04 (M-14) — zero-value funnel state. Previously zero bars rendered
   at 0% width on the same gradient track as non-zero bars, which read as
   "disabled" rather than "no data". A dashed outline + italic label gives
   zero buckets a distinct, clearly-empty visual treatment. */
.funnel-segment-bar--zero {
    background: transparent;
    border: 2px dashed var(--border-strong);
    inset: 0;
    width: auto !important;
    border-radius: 6px;
}

.funnel-segment--zero .funnel-segment-label {
    color: var(--text-muted);
    font-style: italic;
    text-shadow: none;
}

.funnel-segment--zero .funnel-segment-bar-wrap {
    background: transparent;
}

/* Session 04 (M-15) — explanatory note rendered beneath the funnel when the
   first two stages are equal (every retrieved-something == total-messages).
   Without this, two identical full-width bars read as a rendering bug. */
.funnel-full-note {
    font-size: 12px;
    color: var(--text-muted);
    margin: 4px 4px 0;
    padding-left: 8px;
    border-left: 3px solid var(--primary);
    font-style: italic;
}

/* Session 04 (M-17) — "Hide empty sessions" checkbox row above the sessions
   table. Inline label + checkbox, muted but readable. */
.sessions-toggle-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--text);
}

.sessions-toggle-row input[type="checkbox"] {
    cursor: pointer;
}

.funnel-teaser {
    position: relative;
}

.funnel-teaser .funnel-blur {
    filter: blur(4px);
    opacity: 0.55;
    pointer-events: none;
    user-select: none;
}

.funnel-teaser-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
}

.funnel-teaser-overlay .funnel-teaser-badge {
    display: inline-block;
    background: var(--text);
    color: white;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 12px;
}

.funnel-teaser-overlay h4 {
    margin: 0 0 6px 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}

.funnel-teaser-overlay p {
    margin: 0 0 14px 0;
    font-size: 13px;
    color: var(--text-muted);
    max-width: 420px;
}

/* FABLE 5 — cross-link under the Suppressed funnel segment → Unanswered report. */
.funnel-crosslink {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 0;
    background: none;
    border: none;
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}
.funnel-crosslink:hover { text-decoration: underline; }

/* FABLE 5 — Analytics > Unanswered report list. */
.unanswered-headline {
    margin: 4px 0 14px;
    font-size: 13px;
    color: var(--text-muted);
}
.unanswered-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.unanswered-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.unanswered-row-main {
    min-width: 0;
    flex: 1;
}
.unanswered-question {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    word-break: break-word;
}
.unanswered-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
}
.unanswered-meta-sep { color: var(--border-strong); }
.unanswered-count-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--accent-weak);
    color: var(--accent-strong);
    font-weight: 700;
}
.unanswered-reason {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
}
.unanswered-reason--no-results {
    background: var(--danger-weak);
    color: var(--danger);
}
.unanswered-reason--suppressed {
    background: var(--warn-weak);
    color: var(--warn);
}
.unanswered-actions {
    display: flex;
    flex-shrink: 0;
    gap: 8px;
}
/* PR3 — dismiss state: toolbar toggle + muted dismissed rows. */
.unanswered-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}
.unanswered-row--dismissed {
    opacity: 0.6;
    background: var(--surface-2);
}

/* ----------------------------------------------------------------------
   Phase Redesign-D — Admin sessions filter chip (drives the funnel
   drill-in target panel — admin.html?admin.filter=<key>).
   ---------------------------------------------------------------------- */

.admin-sessions-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--primary-subtle);
    border: 1px solid var(--primary);
    color: var(--primary);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.admin-sessions-filter-chip button {
    background: transparent;
    border: none;
    color: var(--primary);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
}

/* ─────────────────────────────────────────────────────────────────────
   Platform Phase 6A — Tier-limit UI primitives.

   Three classes used across Data Sources / Websites / Events / RAG
   Settings tabs to surface plan ceilings consistently:

     .tier-limit-label   — small "N / Max" chip next to a section heading.
     .tier-limit-banner  — full-width amber callout shown when at the cap.
     .ds-status-info     — amber colour for the "Imported X of Y" /
                            "Skipped: ..." notes WA-3 writes to lastError.
                            Sits next to the existing .ds-status-error
                            (red) — the row template applies both and
                            `.ds-status-info` overrides via cascade order.
   ───────────────────────────────────────────────────────────────────── */
.tier-limit-label {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.tier-limit-banner {
    background: var(--warn-weak);
    border: 1px solid var(--warn);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 0.85rem;
    color: var(--warn);
    margin-bottom: 16px;
}

/* Neutral informational callout (Phase 40) — blue, distinct from the amber
   .tier-limit-banner which reads as a warning. */
.info-banner {
    background: var(--info-weak);
    border: 1px solid var(--info);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 0.85rem;
    color: var(--info);
    margin-bottom: 16px;
}

.ds-status-error {
    color: var(--danger);
    font-size: 12px;
    margin-top: 4px;
}

.ds-status-info {
    color: var(--warn);
}

/* ─────────────────────────────────────────────────────────────────────
   Platform Phase 6B — Response-tab feature-gate primitives.

   Applied to the four .gw-check-row blocks (voice input / voice output /
   cite source links / show images) when the widget's resolved tier does
   not allow that feature.

     .feature-gate-row--locked  — dims the whole row, blocks click/hover
                                   on the label area, lets the native
                                   :disabled cursor render on the input
                                   itself so the "not allowed" affordance
                                   is unmistakable.
     .feature-upgrade-nudge      — small muted "Not available on your
                                   current plan." line shown below the
                                   label of a locked row.
   ───────────────────────────────────────────────────────────────────── */
.feature-gate-row--locked {
    opacity: 0.55;
    pointer-events: none;
    user-select: none;
}

.feature-gate-row--locked input[type="checkbox"] {
    cursor: not-allowed;
    pointer-events: auto;
}

.feature-upgrade-nudge {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Web Push (feature 13) — Notifications > Subscribers stat blocks. */
.push-stats-grid {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.push-stat {
    flex: 1;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    background: var(--bg-subtle, #f8fafc);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
}
.push-stat__value { font-size: 1.8rem; font-weight: 700; color: var(--text, #0f172a); }
.push-stat__label { font-size: 0.82rem; color: var(--text-muted, #64748b); }
.push-platforms { margin-top: 16px; }
.push-platforms strong { display: block; font-size: 0.85rem; margin-bottom: 8px; }
.push-platform-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--border, #e2e8f0);
    font-size: 0.9rem;
}

/* Knowledge Inspector — resizable grid columns (drag the right edge of a header) */
.kb-grid th { position: relative; }
.col-resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    touch-action: none;
}
.col-resizer:hover,
.col-resizer:active {
    background: var(--primary, #6366f1);
    opacity: 0.4;
}

/* Documents tab — search + bulk-delete toolbar */
.doc-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.doc-search {
    flex: 1 1 240px;
    min-width: 200px;
    padding: 9px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card-bg);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.doc-search:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-subtle);
}
.doc-selectall {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    transition: color 0.15s ease;
}
.doc-selectall:hover {
    color: var(--text);
}
/* Brand-tinted checkboxes for the select-all and each row */
.doc-selectall input[type="checkbox"],
.doc-item > input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--primary);
}
/* Selection action bar (only rendered while something is selected) */
.doc-bulkbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 10px 14px;
    background: var(--primary-subtle);
    border: 1px solid var(--primary-light);
    border-radius: var(--radius-sm);
    animation: docBulkbarIn 0.15s ease;
}
@keyframes docBulkbarIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.doc-bulkbar__count {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
    white-space: nowrap;
}
/* Subtle highlight on a selected row */
.doc-item:has(> input[type="checkbox"]:checked) {
    border-color: var(--primary);
    background: var(--primary-subtle);
}

/* Document Images — per-row bound-image thumbnail + edit-modal preview */
.doc-thumb-link {
    flex-shrink: 0;
    margin-right: 14px;
    display: inline-flex;
    line-height: 0;
}
.doc-thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: var(--radius-sm, 8px);
    border: 1px solid var(--border-light, #e2e8f0);
    background: var(--bg-secondary, #f1f5f9);
    display: block;
}
.doc-image-preview {
    margin-top: 10px;
    text-align: center;
}
.doc-image-preview img {
    max-width: 100%;
    max-height: 220px;
    border-radius: var(--radius-sm, 8px);
    border: 1px solid var(--border-light, #e2e8f0);
    display: inline-block;
}

/* Multimedia KB (PR4) — the asset-row editor in the Add/Edit Multimedia modal.
   URL input grows; a compact type <select> + caption input; reorder/remove icon
   buttons; a full-width "detected: …" Auto hint underneath. */
.media-asset-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px;
    margin-bottom: 8px;
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: var(--radius-sm, 8px);
    background: var(--bg-secondary, #f8fafc);
}
/* Higher-specificity to override .form-group input:not([type="checkbox"]) { width:100% }. */
.form-group .media-asset-row .media-asset-url {
    flex: 1 1 220px;
    width: auto;
    min-width: 0;
}
.form-group .media-asset-row .media-asset-type {
    flex: 0 0 112px;
    width: 112px;
    min-width: 0;
}
.form-group .media-asset-row .media-asset-caption {
    flex: 1 1 140px;
    width: auto;
    min-width: 0;
}
.media-asset-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}
.media-asset-hint {
    flex: 1 1 100%;
    font-size: 12px;
    color: var(--text-muted, #64748b);
    margin: 2px 0 0 2px;
}
.media-asset-hint.media-hint--warn {
    color: var(--warning, #b45309);
}
.media-type-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: var(--bg-secondary, #f1f5f9);
    color: var(--text-muted, #475569);
    border: 1px solid var(--border-light, #e2e8f0);
}

/* Multimedia tab — "bound media" (rider) asset grid. */
.bound-media-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}
.bound-media-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: 8px;
    background: var(--bg-secondary, #f8fafc);
    max-width: 100%;
}
.bound-media-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.bound-media-url,
.bound-media-caption {
    font-size: 12px;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bound-media-caption {
    color: var(--text-muted, #64748b);
}
.bound-media-del {
    flex: 0 0 auto;
    line-height: 1;
}

/* Session Replay-lite (FABLE 4 PR2) — compact read-only cards under each assistant message on the
   Analytics → Sessions transcript. Media reuses the .bound-media-grid family above. Token-friendly
   (Admin Facelift palette) so it works in light + dark. */
.replay-blocks {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border-light, #e2e8f0);
}
.replay-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.replay-media-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}
.replay-place-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    width: 100%;
}
.replay-source-chip {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    text-decoration: none;
    background: var(--bg-secondary, #f1f5f9);
    color: var(--text-muted, #605d70);
    border: 1px solid var(--border-light, #e2e8f0);
}
a.replay-source-chip:hover {
    background: var(--border-light, #e2e8f0);
    color: var(--text, #14131c);
}
.replay-booking-summary {
    font-size: 13px;
    font-weight: 600;
    color: var(--text, #14131c);
    width: 100%;
}
.replay-slot-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
}
/* Inert on purpose — a <span>, never a <button>. Nothing on this page books for the visitor. */
.replay-slot-chip--static {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 6px;
    font-size: 12px;
    background: var(--bg-secondary, #f8fafc);
    color: var(--text-muted, #64748b);
    border: 1px solid var(--border-light, #e2e8f0);
    cursor: default;
}
/* FABLE 15 PR 40.8 — voice call cards on the Analytics session view (play + vendor transcript +
   the vendor's call summary). Tokens only, so light and dark both work. */
.voice-call-cards { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.voice-call-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    padding: 12px 14px;
}
.voice-call-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.voice-call-title { font-size: 13px; font-weight: 500; }
.voice-call-time { font-size: 12px; color: var(--text-muted); }
.voice-call-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); margin-bottom: 3px; }
.voice-call-summary { margin-top: 8px; font-size: 13px; line-height: 1.5; }
.voice-call-failure {
    margin-top: 8px;
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.5;
    border-radius: 6px;
    background: var(--warn-weak);
    color: var(--warn);
}
.voice-call-failure .voice-call-label { color: var(--warn); }
/* PR4 (Doc Angelakis #4) — vendor-summary caveat + the real booking state from widget_bookings. */
.voice-call-caveat { display: block; margin-top: 4px; font-size: 11px; font-style: italic; color: var(--text-muted); }
.voice-call-booking { margin-top: 8px; font-size: 13px; line-height: 1.5; }
.voice-call-booking-yes { color: var(--ok, var(--text)); font-weight: 600; }
.voice-call-nobooking { color: var(--text-muted); }
.voice-call-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.voice-call-unavailable { margin-top: 8px; font-size: 12px; color: var(--text-muted); font-style: italic; }
.voice-call-audio { width: 100%; margin-top: 10px; }
.voice-call-transcript {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    max-height: 320px;
    overflow-y: auto;
}
.voice-call-turn { display: flex; gap: 8px; padding: 4px 0; line-height: 1.5; }
.voice-call-turn-role { flex: 0 0 56px; font-size: 11px; font-weight: 600; color: var(--text-muted); padding-top: 2px; }
.voice-call-turn-text { flex: 1; white-space: pre-wrap; }

.replay-lead-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 12px 0;
    padding: 12px 14px;
    border: 1px solid var(--accent-weak, #ddd6fe);
    border-radius: 10px;
    background: var(--surface-2, #faf9ff);
}
.replay-lead-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.replay-lead-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.replay-lead-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: var(--accent, #7c3aed);
    color: var(--on-accent, #ffffff);
}
.replay-lead-time {
    font-size: 12px;
    color: var(--text-muted, #64748b);
}
.replay-lead-fields {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 13px;
    color: var(--text-muted, #605d70);
}
.replay-lead-consent {
    font-size: 12px;
    color: var(--ok, #16a34a);
    font-weight: 600;
}

/* Multimedia tab — 3rd-layer inner tabs (Standalone | Attached to knowledge).
   Segmented pill row modelled on .helpdesk-mode-toggle; sits inside the sub-tab
   content, visually distinct from the Layer-2 .sub-tabs strip above. */
.media-inner-tabs {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    margin-bottom: 20px;
    border-radius: 999px;
    background: var(--bg-secondary, #f1f5f9);
    border: 1px solid var(--border, #e2e8f0);
}
.media-inner-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}
.media-inner-tab:hover { color: var(--text, #1e293b); }
.media-inner-tab--active {
    background: var(--surface, #ffffff);
    color: var(--primary, #6366f1);
    box-shadow: var(--shadow-sm);
}
.media-inner-tab-count {
    display: inline-block;
    min-width: 18px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    background: var(--border-light, #e2e8f0);
    color: var(--text-muted, #475569);
}
.media-inner-tab--active .media-inner-tab-count {
    background: var(--primary-light, #e0e7ff);
    color: var(--primary, #6366f1);
}

/* "Copy AI config prompt" callout (Settings tab). Prompt text + logic live in
   their own standalone files; this is presentation only. */
.ai-config-prompt {
    margin: 0 0 24px;
    padding: 16px;
    background: var(--primary-light, var(--accent-weak));
    border: 1px solid var(--primary-light, var(--accent-weak));
    border-radius: var(--radius-md, 12px);
}
.ai-config-prompt__copy {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: space-between;
}
.ai-config-prompt__text {
    margin: 0;
    flex: 1 1 320px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text, #1e293b);
}
.ai-config-prompt__btn {
    flex: 0 0 auto;
    white-space: nowrap;
}
.ai-config-prompt__btn.is-copied {
    background: var(--ok);
    border-color: var(--ok);
    color: var(--on-accent);
}
.ai-config-prompt__btn.is-error {
    background: var(--danger);
    border-color: var(--danger);
    color: var(--on-accent);
}

/* ───────────────────────────────────────────────────────────────
   Cowork audit strip — admin/mod-only, under the widget header.
   Copies a full-config audit prompt (js/widget-edit/cowork-audit-prompt.js;
   prose in assets/cowork-audit-prompt*.txt).
   ─────────────────────────────────────────────────────────────── */
.cowork-audit {
    margin: 16px 0 0;
}
.cowork-audit__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--surface-2, var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
}
.cowork-audit__text {
    flex: 1 1 340px;
    min-width: 240px;
}
.cowork-audit__text strong {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 2px;
}
.cowork-audit__desc {
    margin: 0 0 8px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-muted);
    max-width: 640px;
}
.cowork-audit__check {
    margin-bottom: 0;
}
.cowork-audit__check label {
    font-size: 13px;
}
.cowork-audit__hint {
    color: var(--text-muted);
}
.cowork-audit__btn {
    flex: 0 0 auto;
    white-space: nowrap;
}
.cowork-audit__btn.is-copied {
    background: var(--ok);
    border-color: var(--ok);
    color: var(--on-accent);
}
.cowork-audit__btn.is-error {
    background: var(--danger);
    border-color: var(--danger);
    color: var(--on-accent);
}

/* ───────────────────────────────────────────────────────────────
   Crawl-setup prompt row — sits under the Start URL field in the
   Add/Edit Website modals. Copies a prompt that makes Claude browse
   the site and recommend every crawl setting (js/widget-edit/websites-tab.js;
   prose in assets/crawl-setup-prompt{,-nocode}.txt).
   ─────────────────────────────────────────────────────────────── */
.crawl-setup-prompt-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 8px;
}
.crawl-setup-prompt-row__check {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
}
.crawl-setup-prompt-row .form-helper-text {
    flex-basis: 100%;
    margin: 0;
}

/* ───────────────────────────────────────────────────────────────
   Widget combobox — shared searchable dropdown (search + list at once).
   Used by the widget pickers on sandbox.html and tools.html.
   Behaviour lives in js/widget-combobox.js (WidgetCombobox mixin).
   ─────────────────────────────────────────────────────────────── */
/* Capped so the picker reads the same on every host page regardless of its
   container (sandbox embeds it in a full-width card; tools places it bare). */
.widget-combobox { position: relative; max-width: 480px; }
.widget-combobox-input {
    width: 100%;
    padding: 10px 38px 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
    background: var(--surface);
    color: var(--text, #1e293b);
}
.widget-combobox-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-subtle, var(--accent-weak));
}
.widget-combobox-caret {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    pointer-events: none;
}
/* In-input clear (✕) — swaps in for the caret when there's text. */
.widget-combobox-clear {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: none;
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.widget-combobox-clear:hover {
    background: var(--border-light, #f1f5f9);
    color: var(--text, #1e293b);
}
.widget-combobox-clear svg { width: 15px; height: 15px; }
.widget-combobox-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    max-height: 340px;
    overflow-y: auto;
    z-index: 30;
    padding: 4px;
}
.widget-combobox-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: 6px;
    padding: 9px 12px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    color: var(--text, #1e293b);
}
.widget-combobox-option:hover,
.widget-combobox-option.active { background: var(--primary-subtle, var(--accent-weak)); }
.widget-combobox-option-name { font-weight: 500; }
.widget-combobox-option-sub {
    color: var(--text-muted);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.widget-combobox-badge {
    margin-left: auto;
    background: var(--accent-weak);
    color: var(--accent);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.widget-combobox-empty,
.widget-combobox-more { padding: 10px 12px; color: var(--text-muted); font-size: 13px; }

/* ───────────────────────────────────────────────────────────────
   Page welcome callout — empty-state guidance shown before a selection.
   Used by sandbox.html and tools.html.
   ─────────────────────────────────────────────────────────────── */
.page-welcome {
    text-align: center;
    max-width: 480px;
    margin: 32px auto 8px;
    color: var(--text, #1e293b);
}
.page-welcome__icon {
    color: var(--text-muted);
    margin-bottom: 12px;
    display: flex;
    justify-content: center;
}
.page-welcome h3 {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
    color: var(--text, #1e293b);
}
.page-welcome p {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0 0 16px;
    line-height: 1.6;
}
.page-welcome__hints {
    text-align: left;
    display: inline-block;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.8;
    padding-left: 20px;
    margin: 0;
}

/* ── Human handoff (feature 14) — Analytics > Handoff operator inbox ───────── */
.handoff-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 6px;
}
.handoff-badge--awaiting { background: var(--warn-weak); color: var(--warn); }
.handoff-badge--live { background: var(--primary-subtle, var(--accent-weak)); color: var(--primary, #6366f1); }

.handoff-layout {
    display: grid;
    grid-template-columns: minmax(220px, 320px) 1fr;
    gap: 18px;
    align-items: start;
}
@media (max-width: 760px) {
    .handoff-layout { grid-template-columns: 1fr; }
}

.handoff-queue {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.handoff-queue-item {
    text-align: left;
    width: 100%;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-left: 3px solid var(--border, #e2e8f0);
    border-radius: var(--radius-md, 8px);
    padding: 10px 12px;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.handoff-queue-item:hover { background: var(--bg-subtle, #f8fafc); }
.handoff-queue-item--awaiting { border-left-color: var(--warn); }
/* Aging awaiting request (≥ 5 min) — louder amber so it can't be missed (feature 24). */
.handoff-queue-item--stale {
    border-left-color: var(--warn);
    background: var(--warn-weak);
}
.handoff-queue-item--stale:hover { background: var(--warn-weak); }
.handoff-queue-item--selected {
    border-color: var(--primary, #6366f1);
    border-left-color: var(--primary, #6366f1);
    background: var(--primary-subtle, var(--accent-weak));
}
.handoff-queue-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.handoff-queue-visitor { font-weight: 600; font-size: 13px; color: var(--text, #1e293b); }
.handoff-queue-preview {
    font-size: 12px;
    color: var(--text-muted, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Captured lead contact under the queue-row visitor label (Lead Capture PR4) — muted, one line. */
.handoff-queue-contact {
    font-size: 11px;
    color: var(--text-muted, #64748b);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.handoff-queue-time { font-size: 11px; color: var(--text-faint, #94a3b8); margin-top: 4px; }
/* "waiting Nm" label on awaiting rows — subtle by default, amber once the row is stale. */
.handoff-wait {
    display: inline-block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-faint, #94a3b8);
}
.handoff-queue-item--stale .handoff-wait { color: var(--warn); }
/* "Handled by X · Telegram" — who's on a live conversation (feature 26). */
.handoff-handled-by {
    font-size: 11px;
    font-weight: 600;
    color: var(--primary, #6366f1);
    margin-top: 4px;
}

/* Visitor context strip in the conversation header (feature 28). */
.handoff-context {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border-light, #eef1f5);
    font-size: 12px;
    color: var(--text-muted, #64748b);
}
.handoff-context-sep { color: var(--text-faint, #94a3b8); }
.handoff-context-from { color: var(--text-faint, #94a3b8); }
.handoff-context-origin {
    color: var(--primary, #6366f1);
    text-decoration: none;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}
.handoff-context-origin:hover { text-decoration: underline; }

/* PR 88 (PR 83 §7) — the signed-in member on a session: "🔒 email". ONE definition shared by the
   Leads page, the Help Desk and Analytics → Sessions, so the three surfaces read alike. The email is
   visitor-supplied, so every consumer binds it with x-text. It truncates rather than wraps — a long
   address must never push a row's other columns off-screen. */
.member-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    min-width: 0;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--accent-weak);
    color: var(--accent-strong);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    vertical-align: middle;
    cursor: default;
}
.member-badge__email {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Analytics → Sessions: a second line under the visitor label instead of a new column, so the
   table keeps its width on narrow screens. */
.sessions-member { display: flex; width: fit-content; margin-top: 4px; max-width: 260px; }

/* Queue toolbar (feature 24) — search + awaiting-only filter above the queue list. */
.handoff-queue-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.handoff-queue-search {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 10px;
    font-size: 13px;
    font-family: inherit;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius-sm, 6px);
    color: var(--text, #1e293b);
    transition: border-color .15s, box-shadow .15s;
}
.handoff-queue-search:focus {
    outline: none;
    border-color: var(--primary, #6366f1);
    box-shadow: 0 0 0 3px var(--primary-subtle, var(--accent-weak));
}
.handoff-queue-awaiting-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-muted, #64748b);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}
.handoff-queue-awaiting-toggle input { cursor: pointer; }
.handoff-kbd-hint {
    font-size: 11px;
    color: var(--text-faint, #94a3b8);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 3px;
    flex-wrap: wrap;
}
.handoff-kbd-hint kbd {
    font-family: inherit;
    font-size: 10px;
    line-height: 1;
    padding: 2px 5px;
    background: var(--bg-subtle, #f1f5f9);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 4px;
    color: var(--text-muted, #64748b);
}

.handoff-pill {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.handoff-pill--awaiting { background: var(--warn-weak); color: var(--warn); }
.handoff-pill--live { background: var(--primary-subtle, var(--accent-weak)); color: var(--primary, #6366f1); }

.handoff-convo {
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius-md, 8px);
    min-height: 360px;
    display: flex;
    flex-direction: column;
}
.handoff-convo-empty {
    margin: auto;
    color: var(--text-muted, #64748b);
}
.handoff-convo-inner { display: flex; flex-direction: column; height: 100%; }
.handoff-convo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border, #e2e8f0);
}
.handoff-convo-header strong { font-size: 14px; margin-right: 8px; }
.handoff-convo-actions { display: inline-flex; gap: 8px; }

.handoff-summary {
    margin: 12px 14px 0;
    background: var(--bg-subtle, #f8fafc);
    border: 1px solid var(--border-light, #eef1f5);
    border-radius: var(--radius-sm, 6px);
    overflow: hidden;
    text-align: left;
}
.handoff-summary-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: transparent;
    border: 0;
    padding: 8px 12px;
    cursor: pointer;
    text-align: left;
}
.handoff-summary-toggle:hover { background: var(--accent-weak); }
.handoff-summary--collapsed .handoff-summary-toggle { opacity: .85; }
.handoff-summary-label {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 10px;
    color: var(--text-faint, #94a3b8);
}
.handoff-summary-chevron {
    font-size: 11px;
    font-weight: 600;
    color: var(--primary, #6366f1);
    white-space: nowrap;
}
.handoff-summary-body {
    padding: 2px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.handoff-summary-block { text-align: left; }
.handoff-summary-sub {
    display: block;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 10px;
    color: var(--text-faint, #94a3b8);
    margin-bottom: 3px;
}
.handoff-summary-text {
    display: block;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-muted, #475569);
    white-space: pre-line;
    word-break: break-word;
}
.handoff-summary-block--lastq .handoff-summary-text {
    font-style: italic;
    color: var(--text, #1e293b);
}

.handoff-thread {
    flex: 1 1 auto;
    overflow-y: auto;
    max-height: 420px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.handoff-msg { max-width: 78%; }
.handoff-msg-meta { font-size: 11px; color: var(--text-faint, #94a3b8); margin-bottom: 3px; }
.handoff-msg-body {
    padding: 8px 12px;
    border-radius: var(--radius-md, 10px);
    font-size: 14px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.handoff-msg--visitor { align-self: flex-start; }
.handoff-msg--visitor .handoff-msg-body { background: var(--bg-subtle, #f1f5f9); color: var(--text, #1e293b); }
.handoff-msg--assistant { align-self: flex-start; }
.handoff-msg--assistant .handoff-msg-body { background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.handoff-msg--operator { align-self: flex-end; text-align: right; }
.handoff-msg--operator .handoff-msg-body { background: var(--primary); color: var(--on-accent); text-align: left; }
.handoff-msg--system {
    align-self: center;
    max-width: 100%;
    text-align: center;
}
.handoff-msg--system .handoff-msg-body {
    background: transparent;
    color: var(--text-faint, #94a3b8);
    font-size: 12px;
    font-style: italic;
    padding: 2px 0;
}

.handoff-composer {
    display: flex;
    gap: 10px;
    align-items: stretch;
    padding: 12px 14px;
    border-top: 1px solid var(--border, #e2e8f0);
    background: var(--card-bg, #fff);
}
.handoff-composer-input {
    position: relative;
    flex: 1 1 auto;
    display: flex;
}
.handoff-composer textarea {
    flex: 1 1 auto;
    resize: vertical;
    min-height: 48px;
    max-height: 180px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    padding: 12px 84px 12px 14px;     /* room for the voice controls in the corner */
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius-md, 10px);
    color: var(--text, #1e293b);
    transition: border-color .15s, box-shadow .15s;
}
.handoff-composer textarea:focus {
    outline: none;
    border-color: var(--primary, #6366f1);
    box-shadow: 0 0 0 3px var(--primary-subtle, var(--accent-weak));
}
.handoff-composer textarea:disabled { background: var(--bg-subtle, #f8fafc); }

/* Voice controls anchored to the bottom-right of the textarea. */
.handoff-composer-voice {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.handoff-voicelang {
    height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    border: 1px solid var(--border, #e2e8f0);
    background: var(--card-bg, #fff);
    color: var(--text-muted, #64748b);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.handoff-voicelang:hover {
    background: var(--primary-subtle, var(--accent-weak));
    color: var(--primary, #6366f1);
    border-color: var(--primary, #6366f1);
}
.handoff-mic {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-subtle, #f1f5f9);
    border: 1px solid var(--border, #e2e8f0);
    color: var(--text-muted, #64748b);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.handoff-mic:hover {
    background: var(--primary-subtle, var(--accent-weak));
    color: var(--primary, #6366f1);
    border-color: var(--primary, #6366f1);
}
.handoff-mic--on,
.handoff-mic--on:hover {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
    animation: handoff-mic-pulse 1.4s ease-out infinite;
}
@keyframes handoff-mic-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45); }
    70%  { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
.handoff-send {
    align-self: stretch;
    min-width: 88px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.handoff-composer-hint {
    font-size: 11px;
    color: var(--text-muted, #64748b);
    margin: 6px 14px 12px;
}

/* PR 40.6 — voice session: no usable composer (a typed reply never reaches a phone caller). A read-only
   note replaces it, showing the callback number. Theme tokens only. */
.handoff-composer-voice-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 14px 14px;
    padding: 10px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 6px);
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.45;
}
.handoff-voice-note-icon { flex: 0 0 auto; font-size: 16px; line-height: 1.3; }
.handoff-voice-note-body strong { color: var(--text); }
.handoff-voice-note-number { color: var(--text); font-weight: 600; white-space: nowrap; }

/* Barge-in notice (feature 26) — a teammate is already handling this conversation. */
.handoff-barge-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 14px 4px;
    padding: 8px 12px;
    background: var(--warn-weak);
    border: 1px solid var(--warn);
    border-radius: var(--radius-sm, 6px);
    color: var(--warn);
    font-size: 13px;
    line-height: 1.4;
}
.handoff-barge-notice svg { flex: 0 0 auto; }

/* Saved replies / canned responses (feature 27) — picker above the composer + manager modal. */
.handoff-canned {
    position: relative;
    margin: 0 14px 2px;
}
.handoff-canned-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid var(--border, #e2e8f0);
    background: var(--card-bg, #fff);
    color: var(--text-muted, #64748b);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.handoff-canned-btn:hover,
.handoff-canned-btn--open {
    border-color: var(--primary, #6366f1);
    color: var(--primary, #6366f1);
    background: var(--primary-subtle, var(--accent-weak));
}
.handoff-canned-picker {
    position: absolute;
    left: 0;
    bottom: calc(100% + 6px);      /* opens upward, above the button + composer */
    z-index: 20;
    width: min(360px, 90vw);
    max-height: 280px;
    overflow-y: auto;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-lg);
    padding: 4px;
}
.handoff-canned-empty {
    padding: 12px;
    font-size: 13px;
    color: var(--text-muted, #64748b);
    text-align: center;
}
.handoff-canned-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: 0;
    background: transparent;
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
}
.handoff-canned-item.active,
.handoff-canned-item:hover { background: var(--primary-subtle, var(--accent-weak)); }
.handoff-canned-item-title {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text, #1e293b);
}
.handoff-canned-item-body {
    display: block;
    font-size: 12px;
    color: var(--text-muted, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.handoff-canned-footer {
    border-top: 1px solid var(--border-light, #eef1f5);
    margin-top: 4px;
    padding-top: 4px;
}
.handoff-canned-manage {
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: 0;
    background: transparent;
    border-radius: var(--radius-sm, 6px);
    font-size: 12px;
    font-weight: 600;
    color: var(--primary, #6366f1);
    cursor: pointer;
}
.handoff-canned-manage:hover { background: var(--primary-subtle, var(--accent-weak)); }

/* Manager modal */
.canned-manage-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 260px;
    overflow-y: auto;
    margin-bottom: 16px;
}
.canned-manage-empty {
    color: var(--text-muted, #64748b);
    font-size: 13px;
    text-align: center;
    padding: 16px 0;
    margin: 0;
}
.canned-manage-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius-sm, 6px);
}
.canned-manage-row-main { flex: 1 1 auto; min-width: 0; }
.canned-manage-row-title { font-size: 13px; font-weight: 600; color: var(--text, #1e293b); }
.canned-manage-row-body {
    font-size: 12px;
    color: var(--text-muted, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.canned-manage-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}
.canned-icon-btn {
    width: 26px;
    height: 26px;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--border, #e2e8f0);
    background: var(--card-bg, #fff);
    color: var(--text-muted, #64748b);
    cursor: pointer;
    line-height: 1;
}
.canned-icon-btn:hover:not(:disabled) { border-color: var(--primary, #6366f1); color: var(--primary, #6366f1); }
.canned-icon-btn:disabled { opacity: .4; cursor: default; }
.canned-text-btn {
    padding: 3px 8px;
    border-radius: var(--radius-sm, 6px);
    border: 0;
    background: transparent;
    color: var(--text-muted, #64748b);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.canned-text-btn:hover { color: var(--primary, #6366f1); }
.canned-text-btn--danger:hover { color: var(--danger); }
.canned-manage-form {
    border-top: 1px solid var(--border, #e2e8f0);
    padding-top: 14px;
}
.canned-manage-form h3 { font-size: 14px; margin: 0 0 10px; }
.canned-manage-input,
.canned-manage-textarea {
    width: 100%;
    font-family: inherit;
    font-size: 13px;
    padding: 8px 10px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius-sm, 6px);
    color: var(--text, #1e293b);
    margin-bottom: 8px;
    box-sizing: border-box;
}
.canned-manage-textarea { resize: vertical; line-height: 1.45; }
.canned-manage-input:focus,
.canned-manage-textarea:focus {
    outline: none;
    border-color: var(--primary, #6366f1);
    box-shadow: 0 0 0 3px var(--primary-subtle, var(--accent-weak));
}
.canned-manage-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Operator alerting controls (feature 25) — sound toggle + notification opt-in. */
.helpdesk-alert-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}
.helpdesk-sound-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid var(--primary, #6366f1);
    background: var(--primary-subtle, var(--accent-weak));
    color: var(--primary, #6366f1);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.helpdesk-sound-toggle:hover { background: var(--accent-weak); }
.helpdesk-sound-toggle--muted {
    background: var(--bg-subtle, #f1f5f9);
    border-color: var(--border, #e2e8f0);
    color: var(--text-muted, #64748b);
}
.helpdesk-sound-toggle--muted:hover { background: var(--surface-3); }
.helpdesk-alert-hint {
    font-size: 12px;
    color: var(--text-muted, #64748b);
}
/* Operator web push toggle (feature 31) — mirrors the sound toggle pill. */
.helpdesk-push-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid var(--border, #e2e8f0);
    background: var(--bg-subtle, #f1f5f9);
    color: var(--text-muted, #64748b);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.helpdesk-push-toggle:hover { background: var(--surface-3); }
.helpdesk-push-toggle:disabled { opacity: 0.6; cursor: default; }
.helpdesk-push-toggle--on {
    border-color: var(--primary, #6366f1);
    background: var(--primary-subtle, var(--accent-weak));
    color: var(--primary, #6366f1);
}
.helpdesk-push-toggle--on:hover { background: var(--accent-weak); }

/* Inbox mode toggle (feature 29) — segmented "This widget" / "All my widgets". */
.helpdesk-mode-toggle {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    margin-bottom: 16px;
    border-radius: 999px;
    background: var(--bg-subtle, #f1f5f9);
    border: 1px solid var(--border, #e2e8f0);
}
.helpdesk-mode-btn {
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s;
}
.helpdesk-mode-btn:hover { color: var(--text, #1e293b); }
.helpdesk-mode-btn--active {
    background: var(--surface, #ffffff);
    color: var(--primary, #6366f1);
    box-shadow: var(--shadow);
}

/* Per-row / header widget tag (feature 29) — which widget an aggregate row belongs to. */
.handoff-queue-widget {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, #64748b);
}
.handoff-queue-widget svg { flex: 0 0 auto; opacity: 0.75; }
/* FABLE 15 PR 39 — voice-call marker: the phone is the human channel, Help Desk is a record surface. */
.handoff-queue-voice {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--warn, #b45309);
}
.handoff-convo-widget {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    background: var(--bg-subtle, #f1f5f9);
    color: var(--text-muted, #64748b);
    vertical-align: middle;
}

/* ── In-product help drawer (feature 20) ─────────────────────────────────────
   Slide-in right-side panel for authored setup docs. Mirrors the trace-panel
   drawer shell; .help-section/.help-step/.help-callout style the authored body. */
.help-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: var(--backdrop);
    backdrop-filter: blur(2px);
    z-index: 1100;
}
.help-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 520px;
    max-width: 100vw;
    background: var(--card-bg, #fff);
    border-left: 1px solid var(--border);
    box-shadow: -4px 0 16px rgba(15, 23, 42, 0.08);
    z-index: 1101;
    display: flex;
    flex-direction: column;
}
@media (max-width: 640px) { .help-drawer { width: 100vw; } }
.help-drawer__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.help-drawer__title { margin: 0; font-size: 16px; font-weight: 600; color: var(--text); }
.help-drawer__close {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}
.help-drawer__close:hover { background: var(--bg-secondary); color: var(--text); }
.help-drawer__body {
    overflow-y: auto;
    padding: 16px 20px 32px;
    flex: 1 1 auto;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
}
.help-section { margin-bottom: 22px; }
.help-section h3 { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--text); }
.help-section p { margin: 0 0 10px; color: var(--text-muted); }
.help-section code {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12.5px;
    background: var(--bg-secondary, #f1f5f9);
    border-radius: 4px;
    padding: 1px 5px;
    color: var(--text);
}
.help-step { margin: 0 0 12px; padding-left: 20px; color: var(--text-muted); }
.help-step li { margin: 0 0 6px; }
.help-troubleshoot { list-style: none; margin: 0; padding: 0; }
.help-troubleshoot li {
    margin: 0 0 10px;
    padding-left: 14px;
    border-left: 2px solid var(--border);
    color: var(--text-muted);
}
.help-callout {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    background: var(--bg-subtle, #f8fafc);
    border: 1px solid var(--border, #e2e8f0);
    color: var(--text);
}
.help-callout--warn { background: var(--warn-weak); border-color: var(--warn); }
.help-callout--danger { background: var(--danger-weak); border-color: var(--danger); }
/* "Setup guide" affordance — a pill that reads clearly as a clickable help link,
   used in the Tools human_handoff header + the Integrations tab-intro. */
.help-trigger-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--primary-subtle, var(--accent-weak));
    color: var(--primary, #6366f1);
    border: 1px solid var(--primary, #6366f1);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    padding: 5px 12px;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}
.help-trigger-btn::before { content: "📖"; font-size: 13px; line-height: 1; }
.help-trigger-btn:hover { background: var(--primary); color: var(--on-accent); box-shadow: var(--shadow-md); }
.help-trigger-btn:focus-visible { outline: 2px solid var(--primary, #6366f1); outline-offset: 2px; }

/* Phase 3b (G-12) — respect reduced-motion: drop the theme-switch fade + hover-lift transforms. */
@media (prefers-reduced-motion: reduce) {
    body { transition: none; }
    .widget-card:hover,
    .btn-primary:hover,
    .btn-primary-tinted:hover { transform: none; }
}

/* FABLE 18 (PR 02) — EU AI Act Art. 50 Compliance card + Inspector panel status line. */
.compliance-status {
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.85rem;
    line-height: 1.45;
    margin-bottom: 8px;
}
.compliance-status--on  { background: var(--ok-weak); border: 1px solid var(--ok); color: var(--text); }
.compliance-status--off { background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); }
.compliance-status--danger { background: var(--danger-weak); border: 1px solid var(--danger); color: var(--text); }

/* ----------------------------------------------------------------------
   PR 66 — "this affects phone calls" markers.

   PR 48 item 9 established the visual family page-locally in tools.html as
   .tools-voice-subsection. Two pages now need it to look IDENTICAL (Tools →
   the 📞 booking sub-section, Leads → Voice call leads), so it is promoted
   here. If the tints drift the family stops reading as "this is voice" and
   the whole point is lost. Theme tokens only — light + dark both derive.

   Three pieces:
     .voice-scoped-section — a whole block that is voice-ONLY.
     .voice-marker         — 📞 inline before a label: this setting changes
                             voice behaviour (the setting itself is shared).
     .voice-note           — a one-line caption saying WHAT it does on a call.
                             Only where the effect is not simply "the same
                             thing, on the phone"; --warn where it surprises.
   ---------------------------------------------------------------------- */

.voice-scoped-section {
    margin-top: 16px;
    padding: 14px 16px;
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--accent-weak);
}
/* h4 only — that is what Tools uses, and it is the reference. The Leads page's
   sections are PEERS of each other (h3, 15px), so shrinking one to a sub-heading
   would read as de-emphasis rather than a highlight; leads.html keeps its size and
   takes only the accent colour. */
.voice-scoped-section > h4 {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.voice-marker {
    font-size: 12px;
    line-height: 1;
    margin-right: 2px;
    /* The glyph carries the meaning; the title attribute carries it for anyone
       who cannot read the glyph. Never the only signal — every marked row that
       could surprise also gets a .voice-note. */
}

.voice-note {
    display: block;
    margin: 2px 0 10px 26px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
}
.voice-note--warn { color: var(--warn); font-weight: 500; }

/* A note attached to a section heading (Leads) rather than a checkbox row —
   no checkbox to indent past. */
.voice-note--section { margin-left: 0; }

/* PR 66 item 4 — the Sessions channel segmented control. Reuses the analytics
   range-button look (.analytics-range-btns / .range-btn); the only difference is
   that it must hug its content instead of stretching the panel width. Declared
   after .analytics-range-btns so this display wins on equal specificity. */
.sessions-channel-btns {
    display: inline-flex;
    margin-bottom: 14px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Access tab (PR 86)
   The PR 83 access policy, moved out of the bottom of Configure → Settings into
   its own sub-tab. Tokens only — no literals, so the theme toggle carries it for
   free and there are no new dark-mode rules to keep in sync.
   Scoped to #tab-access so nothing here can leak into another tab.
   ───────────────────────────────────────────────────────────────────────────── */

/* ---- 2a: status strip — what the door is enforcing right now ---- */
#tab-access .access-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    padding: 12px 16px;
    margin-bottom: 18px;
}
#tab-access .access-status__main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
#tab-access .access-status__line {
    margin: 0;
    font-size: 13px;
    color: var(--muted);
}
#tab-access .access-status__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* The pill carries its meaning as text, never as colour alone (§4). */
#tab-access .access-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-3);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}
#tab-access .access-pill--passphrase,
#tab-access .access-pill--email {
    background: var(--accent-weak);
    border-color: var(--accent);
    color: var(--accent-strong);
}

/* ---- 2b: policy chooser ---- */
#tab-access .policy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
    margin-bottom: 16px;
}
@media (max-width: 900px) {
    #tab-access .policy-grid { grid-template-columns: 1fr; }
}

#tab-access .policy-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: border-color var(--transition), background-color var(--transition);
}
#tab-access .policy-card:hover { border-color: var(--border-strong); }

/* The radio stays a real radio — visually hidden but focusable, so keyboard and
   screen-reader behaviour are the browser's, not ours. Never display:none it. */
#tab-access .policy-card__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}
#tab-access .policy-card:has(.policy-card__input:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

#tab-access .policy-card--selected {
    border-color: var(--accent);
    background: var(--accent-weak);
}
#tab-access .policy-card--disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

#tab-access .policy-card__check {
    position: absolute;
    top: 12px;
    right: 12px;
    display: none;
    color: var(--accent);
}
#tab-access .policy-card__check svg { width: 16px; height: 16px; }
#tab-access .policy-card--selected .policy-card__check { display: block; }

#tab-access .policy-card__icon { color: var(--accent); line-height: 0; }
#tab-access .policy-card__icon svg { width: 22px; height: 22px; }

#tab-access .policy-card__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}
#tab-access .policy-card__desc {
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
}
#tab-access .policy-card__tag {
    margin-top: auto;
    padding-top: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--faint);
}

/* ---- Callouts: a consequence with an icon, not a grey sentence ---- */
#tab-access .access-callout {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text);
}
#tab-access .access-callout svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    color: var(--muted);
}
#tab-access .access-callout strong { display: block; margin-bottom: 2px; }
#tab-access .access-callout p { margin: 0; color: var(--muted); }
#tab-access .access-callout p + p { margin-top: 4px; }

#tab-access .access-callout--warn {
    background: var(--warn-weak);
    border-color: var(--warn);
}
#tab-access .access-callout--warn svg,
#tab-access .access-callout--warn strong { color: var(--warn); }

#tab-access .access-callout--info {
    background: var(--info-weak);
    border-color: var(--info);
}
#tab-access .access-callout--info svg { color: var(--info); }

/* ---- 2c: the policy detail panel ---- */
#tab-access .access-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    padding: 16px 18px;
    margin-bottom: 18px;
}
/* .form-label is the shared rule now (PR 87 item 2) — no per-tab override. */
#tab-access .access-panel__lead {
    margin: 0;
    font-size: 13px;
    color: var(--muted);
}
#tab-access .access-panel__hint {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--muted);
}
#tab-access .access-panel > .access-callout:first-child { margin-top: 0; }

/* Passphrase field + its show/hide eye: the shared .input-group + .btn-icon (PR 87 item 2). */

/* ---- 2d: members panel ---- */
#tab-access .members-panel { margin-top: 16px; }
#tab-access .members-panel__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
#tab-access .members-panel__head strong { font-size: 14px; color: var(--text); }
#tab-access .members-panel__manage { margin-left: auto; }
/* The count beside the heading. Its own class rather than .leads-count-badge, which
   lives only in leads.html's inline sheet and would be unstyled here. */
#tab-access .members-panel__count {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--surface-3);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}

/* One aligned control group — the checkbox is a boxed control at the same height
   as its neighbours, so nothing floats orphaned at the end of the row. */
#tab-access .members-quickadd {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--gap);
    margin-bottom: 12px;
}
#tab-access .members-quickadd .form-input { height: var(--ctrl-h); }
#tab-access .members-quickadd__email { flex: 2 1 220px; min-width: 0; }
#tab-access .members-quickadd__name  { flex: 1 1 150px; min-width: 0; }
#tab-access .members-quickadd__invite {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--ctrl-h);
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}
#tab-access .members-quickadd__invite input { margin: 0; }
#tab-access .members-quickadd__add { height: var(--ctrl-h); }

#tab-access .members-list {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    overflow: hidden;
}
#tab-access .member-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}
#tab-access .member-row:last-child { border-bottom: none; }
#tab-access .member-row__avatar {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-weak);
    color: var(--accent-strong);
    font-size: 12px;
    font-weight: 700;
}
#tab-access .member-row__who { min-width: 0; flex: 1; }
#tab-access .member-row__email {
    display: block;
    font-size: 13px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#tab-access .member-row__meta {
    display: block;
    font-size: 12px;
    color: var(--muted);
}
#tab-access .member-row__meta > span { margin-right: 4px; }

#tab-access .member-pill {
    flex-shrink: 0;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-3);
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}
#tab-access .member-pill--active,
#tab-access .member-pill--no_expiry { background: var(--ok-weak);     color: var(--ok);     border-color: var(--ok); }
#tab-access .member-pill--expiring  { background: var(--warn-weak);   color: var(--warn);   border-color: var(--warn); }
#tab-access .member-pill--expired   { background: var(--danger-weak); color: var(--danger); border-color: var(--danger); }
#tab-access .member-pill--blocked   { background: var(--surface-3);   color: var(--text);   border-color: var(--border-strong); }

#tab-access .members-list__more {
    margin: 0;
    padding: 9px 12px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
    font-size: 12px;
    color: var(--muted);
}

#tab-access .members-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 26px 16px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    text-align: center;
}
#tab-access .members-empty svg { width: 26px; height: 26px; color: var(--faint); }
#tab-access .members-empty strong { font-size: 14px; color: var(--text); }
#tab-access .members-empty p { margin: 0; font-size: 13px; color: var(--muted); }

/* ---- 2e: save bar ---- */
#tab-access .access-savebar {
    position: sticky;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 12px 0;
    background: var(--bg);
    border-top: 1px solid var(--border);
}
#tab-access .access-savebar__hint { font-size: 12px; color: var(--muted); }