/* ==========================================================================
   Amaya design system
   --------------------------------------------------------------------------
   Loaded after style.css AND after each page's inline <style> block, so it is
   the last word on tokens and components without those files having to be torn
   apart. style.css already consumes var(--*) everywhere, so re-pointing the
   tokens re-skins the whole app; the component blocks below then tighten the
   parts the old sheet got wrong — above all the small-screen layout, where the
   sidebar used to sit on top of the content and the content left a dead gutter.
   ========================================================================== */

:root {
    /* ── Surfaces ────────────────────────────────────────────────────────────
       Dark enterprise shell. Three steps only — page, card, raised — so a card
       inside a card still reads as a distinct plane without inventing a fourth
       grey nobody can tell apart from the third. */
    --bg-dark: #14162A;          /* page background (name is legacy): the landing page's navy */
    --bg-deep: #0F1124;
    --surface: #1B1E38;          /* cards */
    --surface-2: #222647;        /* raised rows / inputs */
    --surface-hover: #292E55;
    --surface-inset: #12142A;    /* wells: transcript body, code, table head */
    --card-bg: var(--surface);
    --card-hover: var(--surface-hover);   /* style.css-era name, still consumed */

    /* ── Lines ──────────────────────────────────────────────────────────── */
    --border: #2A2F52;
    --border-strong: #3A4070;
    --card-border: var(--border);
    --border-color: var(--border);
    --border-alpha: rgba(255, 255, 255, 0.07);
    --bg-alpha: rgba(255, 255, 255, 0.04);

    /* ── Polarity ────────────────────────────────────────────────────────────
       Anywhere a rule used to reach for a raw white or black alpha, it reads one
       of these instead. They are the only values that have to flip direction
       between the two themes, so a hover wash or an icon plate written once
       works in both without a `[data-theme]` selector of its own. */
    --overlay-weak: rgba(255, 255, 255, 0.045);   /* row hover */
    --overlay: rgba(255, 255, 255, 0.08);         /* chips on a coloured fill */
    --overlay-strong: rgba(255, 255, 255, 0.16);
    --icon-plate: rgba(0, 0, 0, 0.30);            /* plate behind a tile icon */
    --scrim: rgba(10, 11, 24, 0.78);              /* modal backdrop */
    --scrollbar-thumb: rgba(255, 255, 255, 0.14);

    /* ── Text ───────────────────────────────────────────────────────────── */
    --text: #E9EBF5;
    --text-main: var(--text);
    --text-primary: var(--text);
    --text-muted: #98A0BE;
    --text-secondary: var(--text-muted);
    --text-faint: #838BAA;
    --text-on-brand: #FFFFFF;

    /* ── Brand / accents ─────────────────────────────────────────────────────
       Indigo, the sign-in button's and the landing page's (was violet #7C5CFF
       until 29 September; bluish, not purple, was asked for). `-soft` is a translucent wash rather than a
       flat tint so it layers correctly over both the page and a card. */
    --brand: #6366F1;
    --brand-hover: #818CF8;
    --brand-strong: #4F46E5;
    --brand-soft: rgba(99, 102, 241, 0.16);
    --brand-line: rgba(99, 102, 241, 0.34);
    --brand-glow: rgba(99, 102, 241, 0.30);
    --accent-primary: var(--brand);
    --accent-secondary: var(--brand);
    --accent-blue: #4C8DFF;
    --accent-teal: #16C7A4;

    /* ── Status ─────────────────────────────────────────────────────────── */
    --status-success: #2DD48A;
    --status-success-soft: rgba(45, 212, 138, 0.13);
    --status-success-line: rgba(45, 212, 138, 0.30);
    --status-error: #FF6B6B;
    --status-error-soft: rgba(255, 107, 107, 0.13);
    --status-error-line: rgba(255, 107, 107, 0.30);
    --status-warning: #F5A524;
    --status-warning-soft: rgba(245, 165, 36, 0.13);
    --status-warning-line: rgba(245, 165, 36, 0.30);
    --status-info: var(--accent-blue);
    --status-info-soft: rgba(76, 141, 255, 0.13);
    --status-info-line: rgba(76, 141, 255, 0.30);
    --status-danger: var(--status-error);
    --success: var(--status-success);
    --error: var(--status-error);
    --warning: var(--status-warning);

    /* ── Tonal tiles ─────────────────────────────────────────────────────────
       The four stat-card tones. Each is a translucent wash + a matching hairline
       + an icon colour, so any tile row (dashboard, meetings, security) is one
       token swap away from restyling instead of four gradient literals. */
    --tone-violet-bg: linear-gradient(160deg, rgba(99, 102, 241, 0.16) 0%, rgba(99, 102, 241, 0.03) 100%);
    --tone-violet-line: rgba(99, 102, 241, 0.26);
    --tone-violet-ink: #A5B4FC;
    --tone-blue-bg: linear-gradient(160deg, rgba(76, 141, 255, 0.16) 0%, rgba(76, 141, 255, 0.03) 100%);
    --tone-blue-line: rgba(76, 141, 255, 0.26);
    --tone-blue-ink: #7DAEFF;
    --tone-green-bg: linear-gradient(160deg, rgba(45, 212, 138, 0.15) 0%, rgba(45, 212, 138, 0.03) 100%);
    --tone-green-line: rgba(45, 212, 138, 0.24);
    --tone-green-ink: #4BDDA0;
    --tone-amber-bg: linear-gradient(160deg, rgba(245, 165, 36, 0.16) 0%, rgba(245, 165, 36, 0.03) 100%);
    --tone-amber-line: rgba(245, 165, 36, 0.26);
    --tone-amber-ink: #FFC05C;
    --tone-red-bg: linear-gradient(160deg, rgba(255, 107, 107, 0.15) 0%, rgba(255, 107, 107, 0.03) 100%);
    --tone-red-line: rgba(255, 107, 107, 0.26);
    --tone-red-ink: #FF8F8F;

    /* ── Sidebar ────────────────────────────────────────────────────────────
       Near-black rail, one shade below the page so the shell reads as two
       planes; the active item is a solid brand pill with white ink on it. */
    --sidebar-width: 204px;
    --sidebar-bg: #0F1124;
    --sidebar-text: #8F97B8;
    --sidebar-text-active: #FFFFFF;
    --sidebar-text-faint: #5C6486;
    --sidebar-border: rgba(255, 255, 255, 0.06);
    --sidebar-item-hover: rgba(255, 255, 255, 0.05);
    --sidebar-item-active: var(--brand);
    --sidebar-accent: var(--brand);

    /* ── Radius / shadow / motion ────────────────────────────────────────────
       Shadows are near-black: on a dark ground a "grey" shadow reads as a halo,
       so depth comes from the shadow plus the hairline border, not from tint. */
    --r-sm: 8px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 18px;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.55);
    --shadow-xl: 0 28px 70px rgba(0, 0, 0, 0.65);
    --ease: cubic-bezier(0.4, 0, 0.2, 1);

    /* Content gutter — one knob, so every page breathes the same and shrinks
       together on small screens instead of each guessing its own padding. */
    --gutter: 28px;

    color-scheme: dark;
}

/* ==========================================================================
   Light mode
   --------------------------------------------------------------------------
   Dark is the default: no attribute means dark, so a failed or blocked toggle
   script leaves the app looking the way it shipped rather than half-painted.
   Light is opt-in and lives entirely in this block — it redefines the same
   tokens and adds no new ones, so every component that reads a token follows
   without being touched.

   It is not a mechanical inversion. On white, the depth that came from the
   shadow has to come from the border instead, the translucent brand washes need
   to be lighter to stay readable, and the shadows go from near-black to a
   coloured grey. The sidebar deliberately stays a dark rail in both modes: it
   is the app's fixed chrome and it anchors the page, which is exactly what the
   reference design does.
   ========================================================================== */

:root[data-theme="light"] {
    /* ── Surfaces ───────────────────────────────────────────────────────── */
    --bg-dark: #F6F7FB;          /* page background (name is legacy) */
    --bg-deep: #EDEFF6;
    --surface: #FFFFFF;
    --surface-2: #F7F8FC;
    --surface-hover: #F0F2F8;
    --surface-inset: #F7F8FC;
    --card-bg: var(--surface);
    --card-hover: var(--surface-hover);

    /* ── Lines ──────────────────────────────────────────────────────────── */
    --border: #E3E6EF;
    --border-strong: #CDD2E0;
    --card-border: var(--border);
    --border-color: var(--border);
    --border-alpha: rgba(16, 24, 40, 0.08);
    --bg-alpha: rgba(16, 24, 40, 0.035);

    /* ── Polarity ───────────────────────────────────────────────────────── */
    --overlay-weak: rgba(16, 24, 40, 0.04);
    --overlay: rgba(16, 24, 40, 0.06);
    --overlay-strong: rgba(16, 24, 40, 0.12);
    --icon-plate: #FFFFFF;
    --scrim: rgba(16, 24, 40, 0.45);
    --scrollbar-thumb: rgba(16, 24, 40, 0.20);

    /* ── Text ───────────────────────────────────────────────────────────── */
    --text: #131829;
    --text-main: var(--text);
    --text-primary: var(--text);
    --text-muted: #5B6480;
    --text-secondary: var(--text-muted);
    --text-faint: #8C93AB;
    --text-on-brand: #FFFFFF;

    /* ── Brand / accents ─────────────────────────────────────────────────────
       The sign-in button's indigo, a shade deeper than the dark theme's #6366F1,
       which is tuned to glow on navy and goes washed-out as ink on white. */
    --brand: #4F46E5;
    --brand-hover: #4338CA;
    --brand-strong: #3730A3;
    --brand-soft: rgba(79, 70, 229, 0.09);
    --brand-line: rgba(79, 70, 229, 0.24);
    --brand-glow: rgba(79, 70, 229, 0.22);
    --accent-primary: var(--brand);
    --accent-secondary: var(--brand);
    --accent-blue: #1D6BF3;
    --accent-teal: #0C9C80;

    /* ── Status ─────────────────────────────────────────────────────────── */
    --status-success: #0B8A55;
    --status-success-soft: rgba(11, 138, 85, 0.10);
    --status-success-line: rgba(11, 138, 85, 0.24);
    --status-error: #CE2B2B;
    --status-error-soft: rgba(206, 43, 43, 0.09);
    --status-error-line: rgba(206, 43, 43, 0.22);
    --status-warning: #B26A02;
    --status-warning-soft: rgba(178, 106, 2, 0.10);
    --status-warning-line: rgba(178, 106, 2, 0.24);
    --status-info: var(--accent-blue);
    --status-info-soft: rgba(29, 107, 243, 0.09);
    --status-info-line: rgba(29, 107, 243, 0.22);
    --status-danger: var(--status-error);
    --success: var(--status-success);
    --error: var(--status-error);
    --warning: var(--status-warning);

    /* ── Tonal tiles ────────────────────────────────────────────────────── */
    --tone-violet-bg: linear-gradient(160deg, rgba(79, 70, 229, 0.10) 0%, rgba(79, 70, 229, 0.02) 100%);
    --tone-violet-line: rgba(79, 70, 229, 0.18);
    --tone-violet-ink: #4F46E5;
    --tone-blue-bg: linear-gradient(160deg, rgba(29, 107, 243, 0.10) 0%, rgba(29, 107, 243, 0.02) 100%);
    --tone-blue-line: rgba(29, 107, 243, 0.18);
    --tone-blue-ink: #1D6BF3;
    --tone-green-bg: linear-gradient(160deg, rgba(11, 138, 85, 0.10) 0%, rgba(11, 138, 85, 0.02) 100%);
    --tone-green-line: rgba(11, 138, 85, 0.18);
    --tone-green-ink: #0B8A55;
    --tone-amber-bg: linear-gradient(160deg, rgba(178, 106, 2, 0.11) 0%, rgba(178, 106, 2, 0.02) 100%);
    --tone-amber-line: rgba(178, 106, 2, 0.20);
    --tone-amber-ink: #B26A02;
    --tone-red-bg: linear-gradient(160deg, rgba(206, 43, 43, 0.09) 0%, rgba(206, 43, 43, 0.02) 100%);
    --tone-red-line: rgba(206, 43, 43, 0.18);
    --tone-red-ink: #CE2B2B;

    /* ── Sidebar ─────────────────────────────────────────────────────────────
       Stays dark on purpose. It is fixed chrome rather than content, and a dark
       rail against a light page is what gives the layout its anchor — the same
       thing the reference design does. */
    --sidebar-bg: #14162A;
    --sidebar-text: #A8AECB;
    --sidebar-text-active: #FFFFFF;
    --sidebar-text-faint: #6E7593;
    --sidebar-border: rgba(255, 255, 255, 0.07);
    --sidebar-item-hover: rgba(255, 255, 255, 0.07);
    --sidebar-item-active: var(--brand);
    --sidebar-accent: var(--brand);

    /* ── Shadow ──────────────────────────────────────────────────────────────
       Depth on white comes from a soft coloured grey, not from black. */
    --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.09), 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-md: 0 4px 14px rgba(16, 24, 40, 0.08);
    --shadow-lg: 0 14px 36px rgba(16, 24, 40, 0.12);
    --shadow-xl: 0 28px 64px rgba(16, 24, 40, 0.16);

    color-scheme: light;
}

body {
    background: var(--bg-dark);
    color: var(--text);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Native widgets (scrollbars, date pickers, autofill, select popups) follow
   color-scheme, not our tokens. Declaring it on :root above covers the page;
   these cover form controls that opt out of inheritance. */
input, textarea, select, button { color-scheme: dark; }
:root[data-theme="light"] input,
:root[data-theme="light"] textarea,
:root[data-theme="light"] select,
:root[data-theme="light"] button { color-scheme: light; }

select option {
    background: var(--surface-2);
    color: var(--text);
}

/* Chrome paints autofilled inputs a fixed pale yellow. The huge inset shadow is
   the only way to repaint the field without losing the autofill behaviour. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset;
    caret-color: var(--text);
}

/* ─── App shell ──────────────────────────────────────────────────────────── */

.app-layout {
    display: flex;
    min-height: 100vh;
    background: var(--bg-dark);
}

.main-content {
    flex: 1;
    /* min-width:0 is what stops a wide table from forcing the whole shell to
       overflow and shove itself under the sidebar. */
    min-width: 0;
    margin-left: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    background: var(--bg-dark);
}

.content-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px var(--gutter);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 20;
}

.content-top-bar-left h2,
.content-top-bar-left #welcome-heading {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
}

.content-top-bar-left p {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--text-muted);
}

.content-top-bar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.content-body {
    flex: 1;
    min-width: 0;
    padding: var(--gutter);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ─── Sidebar ────────────────────────────────────────────────────────────── */

.sidebar {
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    border-right: 1px solid var(--sidebar-border);
}

.sidebar-brand {
    padding: 20px 18px;
    border-bottom: 1px solid var(--sidebar-border);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 11px;
}

.sidebar-brand-logo {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--r-md);
}

.sidebar-brand-text h1 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #FFFFFF !important;
}

.sidebar-brand-text p {
    margin: 1px 0 0;
    font-size: 10.5px;
    line-height: 1.3;
    color: var(--sidebar-text) !important;
}

/* The user card at the foot of the rail. */
.sidebar-bottom {
    border-top: 1px solid var(--sidebar-border);
    padding: 12px;
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: background 0.15s var(--ease);
}

.sidebar-user:hover {
    background: var(--sidebar-item-hover);
}

.sidebar-user-avatar {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-md);
    background: var(--brand);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
}

.sidebar-user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-on-brand);
}

.sidebar-user-role {
    font-size: 11px;
    color: var(--sidebar-text);
}

.sidebar-help {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px;
    border-radius: var(--r-md);
    color: var(--sidebar-text);
    font-size: 12.5px;
    cursor: pointer;
    text-decoration: none;
}

.sidebar-help:hover {
    background: var(--sidebar-item-hover);
    color: var(--text-on-brand);
}

.sidebar-nav {
    padding: 14px 12px;
    gap: 2px;
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 9px 11px;
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--sidebar-text);
    font-size: 13.5px;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.sidebar-nav-item:hover {
    background: var(--sidebar-item-hover);
    color: var(--sidebar-text-active);
}

.sidebar-nav-item.active {
    background: var(--sidebar-item-active);
    color: var(--sidebar-text-active);
    font-weight: 600;
    box-shadow: none;
}

/* style.css tints the active icon with --sidebar-accent; on a solid brand
   pill that makes it vanish, so it goes white with the label. */
.sidebar-nav-item.active .sidebar-nav-icon {
    color: var(--sidebar-text-active);
}

.sidebar-nav-icon {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

/* ─── Theme switch ─────────────────────────────────────────────────────────
   Sits at the very bottom of the rail, under Help & Support. Two labelled
   options rather than one flipping icon: a lone sun/moon never tells you
   whether it is showing the mode you are in or the one you would get.

   It lives on the sidebar, which stays dark in both themes, so it reads the
   sidebar tokens rather than the page ones. */

.theme-toggle {
    display: flex;
    gap: 2px;
    margin-top: 10px;
    padding: 3px;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--sidebar-border);
}

.theme-toggle-opt {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 8px;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--sidebar-text);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.theme-toggle-opt svg { width: 13px; height: 13px; flex-shrink: 0; }

.theme-toggle-opt:hover { color: var(--sidebar-text-active); }

.theme-toggle-opt.active {
    background: var(--brand);
    color: var(--text-on-brand);
}

/* On the meeting page there is no rail — the switch is a compact control in the
   top bar, so it takes the page's own surface colours instead. */
.mdx-bar-tools .theme-toggle {
    margin-top: 0;
    background: var(--surface-2);
    border-color: var(--border);
}

.mdx-bar-tools .theme-toggle-opt { color: var(--text-muted); }
.mdx-bar-tools .theme-toggle-opt:hover { color: var(--text); }
.mdx-bar-tools .theme-toggle-opt.active { color: var(--text-on-brand); }

/* The label is the first thing worth dropping when the bar runs out of room —
   the icon still carries the meaning. */
@media (max-width: 900px) {
    .mdx-bar-tools .theme-toggle-opt span { display: none; }
    .mdx-bar-tools .theme-toggle-opt { padding: 6px 10px; }
}

/* "AI" next to Ask Amaya. Pushed to the end of the row so it reads as a property
   of the item rather than part of its name. */
.sidebar-nav-tag {
    margin-left: auto;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--brand-soft);
    border: 1px solid var(--brand-line);
    color: var(--brand-hover);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.sidebar-nav-item.active .sidebar-nav-tag {
    background: var(--overlay-strong);
    border-color: var(--overlay-strong);
    color: var(--sidebar-text-active);
}

.sidebar-nav-label {
    padding: 16px 12px 6px;
    margin: 0;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sidebar-text-faint);
}

.sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
}

/* ─── Dashboard ──────────────────────────────────────────────────────────────
   The header used to carry its whole appearance inline, one !important per
   property, which meant the design system could not reach it at all. It is
   class-driven now and the stat strip reuses the .mtg-stat tiles. */

.history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 16px;
}

.history-heading h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
}

.history-heading .subtitle {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--text-muted);
}

.history-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.history-tool-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 13px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-2);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}

.history-tool-btn:hover {
    background: var(--surface-hover);
    border-color: var(--border-strong);
    color: var(--text);
}

.history-tool-btn svg { opacity: 0.85; flex-shrink: 0; }

.history-search {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 11px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-2);
    transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.history-search:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

.history-search svg { color: var(--text-faint); flex-shrink: 0; }

.history-search input {
    width: 190px;
    max-width: 40vw;
    border: 0;
    outline: none;
    background: none;
    color: var(--text);
    font-family: inherit;
    font-size: 12.5px;
}

.history-search input::placeholder { color: var(--text-faint); }

/* The Quality Audit and Knowledge Base buttons used to sit beside this search and
   squeeze it into a corner. Both are pages of their own in the sidebar; with them
   gone the search takes the row it belongs to, above the list it filters. */
.history-search--wide {
    flex: 1;
    height: 38px;
    padding: 0 14px;
}

.history-search--wide input {
    width: 100%;
    max-width: none;
    font-size: 13.5px;
}

/* Upgrade prompt in the dashboard top bar. Renders only for people who are not
   already on the top plan — see UpgradeCta.tsx. */
.topbar-upgrade {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: var(--r-md);
    background: var(--brand);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: filter 0.15s var(--ease);
}

.topbar-upgrade:hover { filter: brightness(1.08); }

/* ── Edit history (AM-91) ────────────────────────────────────────────────── */

.ver-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.ver-item {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 10px 12px;
    background: var(--surface-2);
}

/* The newest entry is what the meeting currently says. */
.ver-item.current { border-color: var(--brand); background: var(--brand-soft); }

.ver-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.ver-toggle {
    display: flex; align-items: center; gap: 8px;
    background: none; border: 0; padding: 0;
    font: inherit; color: var(--text); cursor: pointer; text-align: left;
}

.ver-field { font-weight: 600; font-size: 13px; }
.ver-no { font-size: 11.5px; color: var(--text-faint); }

.ver-chip {
    font-size: 10.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: var(--brand);
    border: 1px solid var(--brand); border-radius: 999px; padding: 1px 7px;
}

.ver-restore {
    font-size: 11.5px; font-weight: 600;
    background: none; border: 1px solid var(--border); border-radius: var(--r-sm);
    padding: 3px 9px; color: var(--text); cursor: pointer;
}
.ver-restore:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.ver-restore:disabled { opacity: .5; cursor: default; }

.ver-meta { margin-top: 4px; font-size: 11.5px; color: var(--text-muted); }

/* Old versions are shown, never edited — a history you can rewrite records nothing. */
.ver-body {
    margin: 10px 0 0;
    padding: 10px;
    max-height: 340px;
    overflow: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: 12.5px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Folded by default: history sits under the content it belongs to, and most of the
   time the reader wants the content. The summary line says there is one. */
.ver-summary {
    align-self: flex-start;
    background: none;
    border: 0;
    padding: 6px 0;
    font: inherit;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    text-align: left;
}
.ver-summary:hover { color: var(--brand); }
.ver-summary.open { color: var(--text); font-weight: 600; margin-bottom: 6px; }

/* Edit sits with the content it edits, not in the bar above the tab strip. */
.pane-actions { display: flex; justify-content: flex-end; margin-bottom: 8px; }

/* Period switch above the dashboard tiles.
 *
 * A filter, so it looks and sits like one: a single small segmented control tucked
 * against the right edge above the figures it governs. It used to be a row of
 * full-size pills starting at the left margin, which read as page navigation and
 * claimed a band of its own between the greeting and the numbers. */
.dash-stats-head {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 2px;
}

.dash-stats-periods {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-2);
}

.dash-period {
    background: none;
    border: 0;
    border-radius: calc(var(--r-md) - 3px);
    padding: 4px 11px;
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.dash-period:hover { color: var(--text); }
.dash-period.active {
    color: var(--text-on-brand);
    background: var(--brand);
}

.ver-empty { padding: 14px; font-size: 13px; color: var(--text-muted); }
.ver-link { background: none; border: 0; padding: 0; color: var(--brand); cursor: pointer; font: inherit; }

/* The stat strip's value placeholder, so four numbers landing at once do not
   make the whole row jump. */
.mtg-stat-loading {
    display: inline-block;
    width: 46px;
    height: 20px;
    vertical-align: -3px;
}

.dash-stats-zone {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dash-stats-error {
    margin: 0;
    font-size: 12.5px;
    color: var(--status-warning);
}

/* ─── Cards ──────────────────────────────────────────────────────────────── */

.glass-card,
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    backdrop-filter: none;   /* the old glass effect fought the light theme */
}

/* ─── Buttons ────────────────────────────────────────────────────────────── */

.btn-micro,
.action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s var(--ease), color 0.15s var(--ease),
                border-color 0.15s var(--ease);
}

.btn-micro:hover,
.action-btn:hover {
    background: var(--surface-hover);
    border-color: var(--border-strong);
    color: var(--text);
}

.action-btn.delete-btn {
    color: var(--status-error);
}

.action-btn.delete-btn:hover {
    background: var(--status-error-soft);
    border-color: var(--status-error);
}

.btn-primary {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.btn-primary:hover {
    background: var(--brand-hover);
    border-color: var(--brand-hover);
    color: #fff;
}

/* ─── Badges / status ────────────────────────────────────────────────────── */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: capitalize;
    border: 1px solid transparent;
}

.status-badge::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

.status-completed {
    background: var(--status-success-soft);
    color: var(--status-success);
}

.status-processing {
    background: var(--status-info-soft);
    color: var(--brand);
}

.status-failed,
.status-error {
    background: var(--status-error-soft);
    color: var(--status-error);
}

.status-uploaded,
.status-queued {
    background: var(--status-warning-soft);
    color: var(--status-warning);
}

/* Compact status dot for table rows: hover displays tooltip with full status */
.status-badge.status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    min-width: 10px;
    min-height: 10px;
    padding: 0;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    vertical-align: middle;
    position: relative;
    border: none;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.status-badge.status-dot::before {
    display: none !important;
}

.status-badge.status-dot:hover {
    transform: scale(1.4);
}

.status-badge.status-dot.status-completed {
    background-color: var(--status-success, #10b981) !important;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.45);
}

.status-badge.status-dot.status-processing {
    background-color: var(--brand, #6366f1) !important;
    box-shadow: 0 0 6px rgba(99, 102, 241, 0.45);
    animation: status-dot-pulse 1.6s infinite ease-in-out;
}

.status-badge.status-dot.status-uploaded,
.status-badge.status-dot.status-queued {
    background-color: var(--status-warning, #f59e0b) !important;
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.45);
}

.status-badge.status-dot.status-failed,
.status-badge.status-dot.status-error {
    background-color: var(--status-error, #ef4444) !important;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.45);
}

@keyframes status-dot-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.25); opacity: 0.7; }
}

/* ─── Tables ─────────────────────────────────────────────────────────────── */

/* A table can't be made to fit an arbitrarily narrow screen — squeezing it is
   what produced the overlapping columns. Let it keep its natural width and give
   it its own scroller instead, so the page never breaks. */
.table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.modern-table {
    width: 100%;
    min-width: 860px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13.5px;
}

.modern-table thead th {
    position: sticky;
    top: 0;
    padding: 10px 14px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}

.modern-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: middle;
}

.modern-table tbody tr:last-child td {
    border-bottom: 0;
}

.modern-table tbody tr {
    transition: background 0.12s var(--ease);
}

.modern-table tbody tr:hover {
    background: var(--surface-hover);
}

/* ─── Upload (top bar) ───────────────────────────────────────────────────────
   Upload used to be a full-width dashed dropzone that owned the top of the
   dashboard — the biggest element on the page for the rarest action, pushing the
   meeting list below the fold. It is a button in the top bar now. It is still the
   drop target (#drop-zone), so dragging a file onto it works as before. */

.upload-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid var(--brand);
    border-radius: var(--r-md);
    background: var(--brand);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s var(--ease), border-color 0.15s var(--ease),
                box-shadow 0.15s var(--ease);
}

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

/* UploadController toggles .dragover while a file is over the target. */
.upload-btn.dragover {
    background: var(--brand-hover);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.22);
}

.file-info {
    font-size: 12px;
    color: var(--text-muted);
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── History rows ─────────────────────────────────────────────────────────
   The meeting name is a real anchor so middle-click and ⌘-click open a tab, but
   it is not prose: it should read as a row title, not a hyperlink. */

.meeting-name,
.mtg-cell-title,
.detail-back,
.mdx-back {
    text-decoration: none;
}

.meeting-name:hover,
.mtg-cell-title:hover {
    color: var(--brand-hover);
}

/* The row is the way in. Play / download / metadata buttons used to sit in the
   list, which put the meeting's tools outside the meeting; they live in the
   detail view now, and the row just opens it. */
.row-openable {
    cursor: pointer;
}

.row-openable:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}

.meeting-cell {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
    min-width: 0;
}

.meeting-name {
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

.meeting-sub {
    font-size: 11px;
    color: var(--text-muted);
}

/* Delete is the one action about the row rather than the meeting. Keep it quiet
   until the row is hovered so it doesn't compete with the content. */
.row-delete {
    opacity: 0;
    transition: opacity 0.12s var(--ease);
}

.modern-table tbody tr:hover .row-delete,
.row-delete:focus-visible {
    opacity: 1;
}

/* ─── Detail view (meeting review) ───────────────────────────────────────── */

.detail-view {
    box-shadow: var(--shadow-xl);
    background: var(--bg-dark);
}

.detail-topbar {
    display: flex;
    align-items: center;
    padding: 12px var(--gutter) 0;
    background: var(--surface);
    flex-shrink: 0;
}

.detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px var(--gutter) 14px;
    background: var(--surface);
    border-bottom: 0;
    flex-shrink: 0;
}

.detail-headline {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.detail-title {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.detail-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.detail-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-muted);
}

/* Tabs sit under the title, across the whole surface. */
.detail-tabs {
    display: flex;
    gap: 4px;
    padding: 0 var(--gutter);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    flex-shrink: 0;
}

.detail-tabs .modal-tab {
    flex: 0 0 auto;
    min-width: 0;
    padding: 11px 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: none;
    border-bottom: 2px solid transparent;
    transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}

.detail-tabs .modal-tab:hover {
    background: transparent;
    color: var(--text);
    transform: none;
}

.detail-tabs .modal-tab.active {
    background: transparent;
    color: var(--brand);
    border-bottom-color: var(--brand);
    box-shadow: none;
}

.detail-body {
    gap: 18px;
    padding: 18px var(--gutter) var(--gutter);
    background: var(--bg-dark);
}

.detail-main {
    gap: 16px;
    padding: 0;
    border-right: 0;
    overflow-y: auto;
}

.detail-player {
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}

/* Transcript + side panels are cards, like the reference. */
.detail-transcript,
.detail-side .wrapper-tabs > .tab-pane {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: 14px 16px;
}

.detail-transcript {
    overflow-y: visible;
    flex: 0 0 auto;
}

.detail-transcript-head {
    padding: 0 2px;
}

.detail-side {
    padding: 0;
    overflow-y: auto;
}

.detail-side .wrapper-tabs {
    overflow: visible;
    padding: 0;
}

.detail-transcript .speaker-turn {
    border-radius: var(--r-sm);
    padding: 8px 10px !important;
    margin: 2px 0 !important;
}

.speaker-turn-active {
    background: var(--brand-soft) !important;
    box-shadow: inset 0 0 0 1px rgba(79, 70, 229, 0.18);
}

/* ── What each tab shows ────────────────────────────────────────────────────
   Driven off data-tab, set by ModalController. The page used to show the video
   AND the transcript AND the panel on every tab, so the Summary tab carried a
   transcript nobody asked for and the Transcript tab wasted half its width on a
   player. Each tab now shows only what it is about. */

/* Default (Summary): recording + confidence flags on the left, AI panel right.
   No transcript — that's the Transcript tab's job. */
.detail-view .detail-transcript-block {
    display: none;
}

/* Transcript: the transcript, full width. No player, no side panel. */
.detail-view[data-tab="tab-transcript"] .detail-body {
    grid-template-columns: 1fr;
}

.detail-view[data-tab="tab-transcript"] .detail-side,
.detail-view[data-tab="tab-transcript"] .detail-player-slot,
.detail-view[data-tab="tab-transcript"] .detail-flags {
    display: none;
}

.detail-view[data-tab="tab-transcript"] .detail-transcript-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}

/* Action Items / Quality Audit / Metadata: just that panel, full width. */
.detail-view[data-tab="tab-actions"] .detail-body,
.detail-view[data-tab="tab-quality-audit"] .detail-body,
.detail-view[data-tab="tab-metadata"] .detail-body {
    grid-template-columns: 1fr;
}

.detail-view[data-tab="tab-actions"] .detail-main,
.detail-view[data-tab="tab-quality-audit"] .detail-main,
.detail-view[data-tab="tab-metadata"] .detail-main {
    display: none;
}

/* ── Side panel sizing ──────────────────────────────────────────────────────
   The panes inherited fixed heights and inner scrollers from the old modal, so
   the summary card stood at a set height with a dead void under two lines of
   text and its own nested scrollbar. Let the content decide the height and let
   the column scroll. */
/* style.css gives .tab-pane `height: 100%` and .ai-content `flex: 1` +
   `overflow-y: auto`, which stretched the summary card to the full column height
   and gave it a nested scrollbar — two lines of text sitting above a dead void. */
.detail-side .tab-pane,
.detail-side .ai-content,
.detail-side .transcript-box,
.detail-side .summary-box {
    max-height: none !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
}

/* The AI panels — summary, action items, audit, metadata.
   style.css wrapped the content in a tinted slab (background #F2F4F1, a border,
   min-height: 220px), so a three-line summary sat inside a big green-grey box
   inside the white card. The card IS the container; the content just needs to
   read well inside it. */
.detail-side .ai-content,
.detail-side .ai-block {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    color: var(--text) !important;
    font-size: 13.5px;
    line-height: 1.65;
}

/* ── Summary typography ───────────────────────────────────────────────────
   One block for every surface the summary renders on — the meeting page's side
   panel, the dashboard's inline card, exports. The renderer emits .sum-* classes
   and no colours of its own, so spacing is decided here, once. The old markup
   carried its own inline styles AND rode on `white-space: pre-wrap`, which is
   what put a ragged blank line between every bullet. */

.ai-content {
    white-space: normal;
}

/* First block never adds a top margin — otherwise the card's own padding and
   the heading's margin stack into a dead strip above the first line. */
.ai-content > :first-child { margin-top: 0 !important; }
.ai-content > :last-child  { margin-bottom: 0 !important; }

.sum-heading {
    margin: 18px 0 8px;
    padding: 0 0 0 10px;
    border-left: 2px solid var(--brand);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text);
}

.sum-para {
    margin: 0 0 10px;
    color: var(--text);
}

.sum-list {
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.sum-item {
    position: relative;
    padding-left: 18px;
    color: var(--text);
}

/* A drawn dot rather than a list marker: it stays put whether the item wraps to
   one line or five, which the ::marker did not. */
.sum-item::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 0.62em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand);
}

ol.sum-list {
    counter-reset: sum-n;
}

ol.sum-list > .sum-item {
    counter-increment: sum-n;
    padding-left: 26px;
}

ol.sum-list > .sum-item::before {
    content: counter(sum-n);
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand-hover);
    font-size: 10.5px;
    font-weight: 700;
}

.sum-label {
    font-weight: 650;
    color: var(--text);
}

.sum-field {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: baseline;
    margin: 0;
    padding: 8px 0;
    border-bottom: 1px dashed var(--border);
}

.sum-field + .sum-field { margin-top: -1px; }

.sum-field-key {
    flex: 0 0 auto;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-muted);
}

.sum-field-val {
    min-width: 0;
    text-align: right;
    font-weight: 600;
    color: var(--text);
}

.ai-content strong,
.ai-content b {
    font-weight: 700;
    color: var(--text);
}

.ai-content em { color: var(--text-muted); }

/* Any headings the model emits that the renderer passed through verbatim. */
.detail-side .ai-content h1,
.detail-side .ai-content h2,
.detail-side .ai-content h3,
.detail-side .ai-content h4 {
    margin: 16px 0 6px;
    padding: 0;
    background: none;
    border: 0;
    text-align: left;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text) !important;
}

/* The card header already names the panel, so the model's own opening heading
   ("Executive Summary") was printing the same words twice. */
.detail-side .ai-content > :is(h1, h2, h3, h4, .sum-heading):first-child {
    display: none;
}

.detail-side .ai-content p,
.detail-side .ai-content li {
    color: var(--text) !important;
}

.detail-side .ai-content ul:not(.sum-list),
.detail-side .ai-content ol:not(.sum-list) {
    margin: 6px 0;
    padding-left: 18px;
}

.detail-side .ai-content li::marker {
    color: var(--text-faint);
}

.detail-side .ai-content strong {
    font-weight: 700;
    color: var(--text) !important;
}

/* Print: the page ground goes white, so the summary's ink has to go back to
   black or the export prints near-invisible light-on-white text. */
@media print {
    .ai-content,
    .ai-content p,
    .ai-content li,
    .ai-content strong,
    .sum-heading,
    .sum-field-key,
    .sum-field-val {
        color: #000000 !important;
    }
    .sum-item::before { background: #000000 !important; }
}

/* Action-items template switch (Table / Checklist / Narrative). These rules used
   to live in the dashboard's inline <style>, so on any other surface — the
   meeting page above all — the control rendered unstyled. */
.ai-tpl-seg {
    display: inline-flex;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-2);
}

.ai-tpl-seg button {
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 11px;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.ai-tpl-seg button:hover { color: var(--text); }

.ai-tpl-seg button.on {
    background: var(--brand);
    color: var(--text-on-brand);
}

/* Panel header (title + Edit / Re-Summarize) */
.detail-side .tab-pane > h3,
.detail-side .tab-pane > h2 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

/* Confidence flags sit under the player on the Summary tab — same card language
   as everything else, not a tinted slab. */
.detail-flags > * {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--shadow-sm);
}

/* ─── Department switcher ────────────────────────────────────────────────────
   An admin can run more than one department, and each is its own workspace. Only
   rendered when there is an actual choice to make. */

.dept-switcher {
    position: relative;
    display: inline-flex;
}

.dept-switcher-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}

.dept-switcher-btn:hover {
    background: var(--surface-hover);
    border-color: var(--border-strong);
}

.dept-switcher-name {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dept-switcher-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 60;
    min-width: 200px;
    padding: 5px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
}

.dept-switcher-item {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.dept-switcher-item:hover {
    background: var(--surface-hover);
}

.dept-switcher-item.active {
    background: var(--brand-soft);
    color: var(--brand);
    font-weight: 600;
}

/* ─── Share ──────────────────────────────────────────────────────────────── */

.share-root {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.share-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}

/* Who it is shared with, readable without opening the popover. */
.share-avatars {
    display: inline-flex;
    align-items: center;
}

.share-avatars .share-avatar + .share-avatar {
    margin-left: -6px;
}

.share-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid var(--surface);
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 9.5px;
    font-weight: 700;
}

.share-avatar-more {
    background: var(--surface-hover);
    color: var(--text-muted);
}

.share-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    width: 340px;
    max-width: calc(100vw - 32px);
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
}

.share-popover-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
}

.share-popover-head strong {
    font-size: 13.5px;
}

.share-popover-head span {
    font-size: 11.5px;
    color: var(--text-muted);
}

.share-search {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    outline: none;
}

.share-search:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.14);
}

.share-error {
    margin-top: 8px;
    padding: 6px 8px;
    border-radius: var(--r-sm);
    background: var(--status-error-soft);
    color: var(--status-error);
    font-size: 12px;
}

.share-list {
    max-height: 190px;
    overflow-y: auto;
    margin-top: 8px;
}

.share-empty {
    margin: 10px 2px;
    font-size: 12.5px;
    color: var(--text-muted);
}

.share-row {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 7px 6px;
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.share-row:hover:not(:disabled) {
    background: var(--surface-hover);
}

.share-row:disabled {
    cursor: default;
    opacity: 0.65;
}

.share-row-static {
    cursor: default;
}

.share-row-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.share-row-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.share-row-email {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.share-row-action {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--brand);
}

.share-shared {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.share-shared-title {
    margin: 0 0 4px 2px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.share-remove {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
}

.share-remove:hover {
    color: var(--status-error);
}

/* ─── Scrollbars ─────────────────────────────────────────────────────────── */

.custom-scrollbar::-webkit-scrollbar,
.table-scroll::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-thumb,
.table-scroll::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 999px;
}

.custom-scrollbar::-webkit-scrollbar-track,
.table-scroll::-webkit-scrollbar-track {
    background: transparent;
}

/* ==========================================================================
   Responsive
   The old sheet kept the sidebar in flow and the content's left margin at the
   full sidebar width all the way down, so on a narrow screen the two overlapped
   while a dead gutter opened on the right. Below 1024px the sidebar becomes an
   off-canvas drawer (the markup already ships a toggle + overlay) and the
   content reclaims the full width.
   ========================================================================== */

@media (max-width: 1024px) {
    :root {
        --gutter: 18px;
    }

    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.24s var(--ease);
        box-shadow: var(--shadow-xl);
    }

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

    .main-content {
        margin-left: 0;
    }

    .sidebar-toggle {
        display: inline-flex;
    }

    .sidebar-overlay {
        position: fixed;
        inset: 0;
        z-index: 40;
        background: rgba(16, 24, 40, 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s var(--ease);
    }

    .sidebar-overlay.open,
    .sidebar-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }
}

@media (max-width: 768px) {
    :root {
        --gutter: 14px;
    }

    .content-top-bar {
        align-items: flex-start;
        padding: 14px var(--gutter);
    }

    .content-top-bar-right {
        width: 100%;
        justify-content: flex-end;
    }

    .content-top-bar-left h2,
    .content-top-bar-left #welcome-heading {
        font-size: 1.1rem;
    }

    /* The search field used to hold a fixed width and push the user menu off the
       edge; let it take the row it needs instead. */
    .content-top-bar-right input[type="text"],
    .content-top-bar-right input[type="search"] {
        width: 100%;
        min-width: 0;
    }

    .detail-header {
        flex-wrap: wrap;
    }

    .detail-header-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 480px) {
    .detail-view {
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        border: 0;
    }

    .modal-overlay {
        padding: 0;
    }
}

/* ==========================================================================
   Meetings page
   Laid out to the approved design: a four-card stat strip, a left rail that
   launches the bot and owns the integrations, and a right rail that answers
   "what is coming" and "what already ran".
   ========================================================================== */

.mtg-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ─── Stat strip ─────────────────────────────────────────────────────────── */

.mtg-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.mtg-stat {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 22px;
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    background: var(--surface);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.mtg-stat:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
}

.mtg-stat.violet { background: var(--tone-violet-bg); border-color: var(--tone-violet-line); }
.mtg-stat.blue   { background: var(--tone-blue-bg);   border-color: var(--tone-blue-line); }
.mtg-stat.green  { background: var(--tone-green-bg);  border-color: var(--tone-green-line); }
.mtg-stat.amber  { background: var(--tone-amber-bg);  border-color: var(--tone-amber-line); }

.mtg-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: var(--r-md);
    background: var(--icon-plate);
    border: 1px solid var(--border-alpha);
}

.mtg-stat-icon svg {
    width: 20px;
    height: 20px;
}

.mtg-stat.violet .mtg-stat-icon { color: var(--tone-violet-ink); border-color: var(--tone-violet-line); }
.mtg-stat.blue   .mtg-stat-icon { color: var(--tone-blue-ink);   border-color: var(--tone-blue-line); }
.mtg-stat.green  .mtg-stat-icon { color: var(--tone-green-ink);  border-color: var(--tone-green-line); }
.mtg-stat.amber  .mtg-stat-icon { color: var(--tone-amber-ink);  border-color: var(--tone-amber-line); }

.mtg-stat-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 3px;
}

.mtg-stat-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
}

.mtg-stat-value {
    font-size: 26px;
    font-weight: 750;
    line-height: 1.15;
    color: var(--text);
    font-family: 'Outfit', 'Inter', sans-serif;
    letter-spacing: -0.02em;
}

.mtg-stat-foot {
    font-size: 12px;
    color: var(--text-faint);
}

/* ─── Two rails ──────────────────────────────────────────────────────────── */

.mtg-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6.5fr);
    gap: 20px;
    align-items: start;
}

.mtg-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.mtg-card {
    padding: 18px;
}

/* The launcher is the point of the page, so it carries the accent border. */
.mtg-launch {
    border-color: var(--brand-line);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08);
}

.mtg-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.mtg-head-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: var(--r-md);
    background: var(--brand-soft);
    color: var(--brand);
}

.mtg-head-icon svg {
    width: 16px;
    height: 16px;
}

.mtg-card-title {
    margin: 0;
    font-size: 15.5px;
    font-weight: 650;
    color: var(--text);
}

.mtg-card-sub {
    margin: 2px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text-muted);
}

.mtg-quick-title {
    margin-bottom: 14px;
}

.mtg-head-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    min-width: 0;
}

.mtg-ghost-btn {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--brand);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s var(--ease);
}

.mtg-ghost-btn:hover {
    background: var(--brand-soft);
}

.mtg-ghost-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* ─── Launch form ────────────────────────────────────────────────────────── */

.mtg-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mtg-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.mtg-field-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.mtg-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
}

.mtg-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.mtg-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-2);
    color: var(--text);
    color-scheme: dark;
    font-family: inherit;
    font-size: 13.5px;
    transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease), background 0.15s var(--ease);
}

.mtg-input-wrap .mtg-input {
    padding-right: 36px;
}

.mtg-input::placeholder {
    color: var(--text-faint);
}

.mtg-input:focus {
    outline: none;
    background: var(--surface);
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

.mtg-input-icon {
    position: absolute;
    right: 12px;
    display: inline-flex;
    color: var(--text-faint);
    pointer-events: none;
}

.mtg-segment {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2, #f1f5f9);
}

.mtg-segment-btn {
    flex: 1;
    padding: 6px 14px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted, #64748b);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mtg-segment-btn:hover {
    color: var(--text, #0f172a);
}

.mtg-segment-btn.active {
    background: var(--surface, #ffffff);
    color: var(--brand, #4f46e5);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* The one button the page exists for: full width, brand-filled, with the icon. */
.mtg-launch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 13px 16px;
    border: 0;
    border-radius: var(--r-md);
    background: var(--brand);
    color: var(--text-on-brand);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 22px var(--brand-glow);
    transition: background 0.15s var(--ease), transform 0.08s var(--ease);
}

.mtg-launch-btn:hover {
    background: var(--brand-hover);
}

.mtg-launch-btn:active {
    transform: translateY(1px);
}

.mtg-launch-btn:disabled {
    opacity: 0.7;
    cursor: default;
    box-shadow: none;
}

.mtg-supports {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 14px;
    font-size: 11.5px;
    color: var(--text-muted);
}

.mtg-support {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    color: var(--text);
}

.mtg-alert {
    padding: 10px 12px;
    border-radius: var(--r-md);
    font-size: 12.5px;
    line-height: 1.5;
}

.mtg-alert.error {
    background: var(--status-error-soft);
    color: var(--status-error);
}

.mtg-alert.ok {
    background: var(--status-success-soft);
    color: var(--status-success);
}

.mtg-empty {
    margin: 0;
    padding: 26px 8px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-muted);
    text-align: center;
}

/* ─── Plan usage, in Settings ────────────────────────────────────────────── */

.usage-track {
    height: 8px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
    margin: 10px 0 8px;
}

.usage-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #6366f1, #4f46e5);
    transition: width .3s;
}

/* Spent reads differently from nearly spent. A bar that is merely full still
   looks like progress; this one has to look like a stop. */
.usage-fill.spent { background: linear-gradient(90deg, #f97316, #dc2626); }

.usage-line { font-size: 13px; color: var(--text); margin: 0 0 10px; }
.usage-line strong { font-weight: 700; }

.usage-note {
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-muted);
    margin: 0 0 12px;
}
.usage-note.spent { color: #dc2626; }

.sub-locked {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(220, 38, 38, .08);
    border: 1px solid rgba(220, 38, 38, .25);
    font-size: 13px;
    line-height: 1.45;
    color: #b91c1c;
}

/* ─── Who gets the summary email ─────────────────────────────────────────── */

.mtg-radiolist {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.mtg-radio {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.mtg-radio:hover { background: var(--surface-2); }

.mtg-radio:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.mtg-radio input { margin-top: 3px; accent-color: var(--accent); flex-shrink: 0; }

/* Title over explanation, so the four choices can be told apart at a glance
   rather than read end to end. */
.mtg-radio > span { display: flex; flex-direction: column; gap: 2px; }
.mtg-radio strong { font-size: 13.5px; font-weight: 600; color: var(--text); }
.mtg-radio em {
    font-style: normal;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.35;
}

/* ─── Integrations ───────────────────────────────────────────────────────── */

.mtg-integrations {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mtg-integration {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-2);
}

.mtg-integration-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: var(--r-sm);
    background: var(--surface);
    border: 1px solid var(--border);
}

.mtg-integration-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

/* The row reads name → what it does → what you can do about it. The status /
   action chip comes before the description in the markup, which put it in the
   middle of the sentence; `order` moves it to the end without the component
   having to care where it sits. */
.mtg-integration > .mtg-chip,
.mtg-integration > .mtg-integration-x {
    order: 3;
}

.mtg-integration-meta {
    order: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-left: auto;
    min-width: 0;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--text-muted);
    text-align: right;
}

.mtg-integration-meta span {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mtg-integration-x {
    display: inline-flex;
    padding: 4px;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-faint);
    cursor: pointer;
}

.mtg-integration-x:hover {
    color: var(--status-error);
    background: var(--status-error-soft);
}

.mtg-chip {
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.mtg-chip.ok {
    background: var(--status-success-soft);
    color: var(--status-success);
    border-color: var(--status-success-line);
}

.mtg-chip.idle {
    background: var(--surface-hover);
    color: var(--text-muted);
    border-color: var(--border);
}

.mtg-chip.link {
    background: var(--brand-soft);
    color: var(--brand-hover);
    border-color: var(--brand-line);
    cursor: pointer;
}

.mtg-chip.link:hover {
    background: rgba(99, 102, 241, 0.24);
}

.mtg-chip.link:disabled {
    background: var(--surface-hover);
    color: var(--text-faint);
    border-color: var(--border);
    cursor: not-allowed;
}

.mtg-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 14px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-muted);
    text-align: center;
}

.mtg-note svg {
    flex: 0 0 13px;
    color: var(--brand);
}

/* ─── Quick actions ──────────────────────────────────────────────────────── */

.mtg-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
}

.mtg-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 14px 8px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-2);
    color: var(--text);
    font-family: inherit;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}

.mtg-action:hover {
    background: var(--brand-soft);
    border-color: var(--brand-line);
}

.mtg-action svg {
    color: var(--brand);
    margin-bottom: 4px;
}

.mtg-action strong {
    font-size: 12px;
    font-weight: 600;
    color: var(--brand);
}

.mtg-action em {
    font-size: 10.5px;
    font-style: normal;
    color: var(--text-muted);
}

/* ─── Upcoming ───────────────────────────────────────────────────────────── */

.mtg-upcoming {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mtg-upcoming-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-2);
}

.mtg-platform-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: var(--r-md);
    background: var(--surface);
    border: 1px solid var(--border);
}

.mtg-platform-mark.sm {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
}

.mtg-upcoming-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.mtg-upcoming-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mtg-upcoming-platform {
    font-size: 11.5px;
    color: var(--text-muted);
}

.mtg-upcoming-when {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 0 0 auto;
    font-size: 11.5px;
    color: var(--text-muted);
}

.mtg-upcoming-day {
    font-weight: 600;
    color: var(--text);
}

.mtg-join-btn {
    flex: 0 0 auto;
    padding: 6px 16px;
    border: 1px solid var(--brand-line);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--brand);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s var(--ease);
}

.mtg-join-btn:hover {
    background: var(--brand-soft);
}

.mtg-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.mtg-icon-btn:hover {
    background: var(--surface-hover);
    color: var(--text);
}

.mtg-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 12px;
    padding: 8px;
    border: 0;
    background: transparent;
    color: var(--brand);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

/* ─── History ────────────────────────────────────────────────────────────── */

.mtg-search {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-2);
    color: var(--text-faint);
    min-width: 0;
}

.mtg-search input {
    width: 150px;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: 12.5px;
}

.mtg-search input:focus {
    outline: none;
}

.mtg-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.mtg-pill {
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}

.mtg-pill:hover {
    background: var(--surface-hover);
}

.mtg-pill.active {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--text-on-brand);
}

.mtg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.mtg-table th {
    padding: 9px 10px;
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-align: left;
    white-space: nowrap;
}

.mtg-table td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    color: var(--text-muted);
}

.mtg-table tbody tr:last-child td {
    border-bottom: 0;
}

.mtg-table tbody tr:hover {
    background: var(--surface-2);
}

.mtg-cell-title {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mtg-cell-sub {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--text-muted);
}

.mtg-cell-error {
    color: var(--status-error);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "Can take 4-5 min to join" under a meeting whose bot is on its way. */
.mtg-cell-hint {
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
}

/* The line under the Launch button that says how long the bot takes. */
.mtg-launch-note {
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-muted);
    text-align: center;
}

.mtg-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: capitalize;
    white-space: nowrap;
}

.mtg-status.ok {
    background: var(--status-success-soft);
    color: var(--status-success);
    border-color: var(--status-success-line);
}

.mtg-status.warn {
    background: var(--status-warning-soft);
    color: var(--status-warning);
    border-color: var(--status-warning-line);
}

.mtg-status.bad {
    background: var(--status-error-soft);
    color: var(--status-error);
    border-color: var(--status-error-line);
}

.mtg-status.idle {
    background: var(--surface-hover);
    color: var(--text-muted);
    border-color: var(--border);
}

.mtg-spin {
    animation: mtg-spin 1.1s linear infinite;
}

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

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

.mtg-row-actions a {
    text-decoration: none;
}

.mtg-tz {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    margin: 12px 0 0;
    font-size: 11px;
    color: var(--text-faint);
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1400px) {
    .mtg-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 1000px) {
    .mtg-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .mtg-stats {
        grid-template-columns: minmax(0, 1fr);
    }

    .mtg-field-row {
        flex-direction: column;
    }

    .mtg-head-tools {
        width: 100%;
        margin-left: 0;
    }

    .mtg-card-head {
        flex-wrap: wrap;
    }

    .mtg-search input {
        width: 100%;
    }

    .mtg-upcoming-row {
        flex-wrap: wrap;
    }

    .mtg-integration-meta {
        display: none;
    }
}

/* ── Ask Your Conversations (AICA-40) ─────────────────────────────── */
.ask-page { display: flex; gap: var(--gutter); height: calc(100vh - 140px); }
/* Buttons do not inherit the page font by default — without this every
   button-based control renders in the OS UI font instead of Inter. */
.ask-page button, .ask-modal-overlay button { font-family: inherit; }

/* Thread rail — its own card, like the reference. */
.ask-rail { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px;
  padding: 16px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.ask-new-btn { width: 100%; padding: 11px 12px; border-radius: var(--r-md); border: 0;
  background: var(--brand); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background 0.15s var(--ease); }
.ask-new-btn:hover { background: var(--brand-hover); }
.ask-rail-search { display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
.ask-rail-search:focus-within { border-color: var(--brand); background: var(--surface); }
.ask-rail-search svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--text-faint); }
.ask-rail-search input { flex: 1; min-width: 0; border: 0; outline: none; background: none;
  font: inherit; font-size: 13px; color: var(--text); }
.ask-rail-search input::placeholder { color: var(--text-faint); }
.ask-rail-heading { margin: 4px 0 0; font-size: 13px; font-weight: 600; color: var(--text); }
.ask-viewall-btn { display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--surface); font-size: 13.5px;
  font-weight: 600; color: var(--text); cursor: pointer;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease); }
.ask-viewall-btn:hover { background: var(--surface-2); border-color: var(--border-strong); }
.ask-viewall-btn svg { width: 15px; height: 15px; color: var(--text-muted); }
.ask-thread-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.ask-thread-card { position: relative; border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--surface);
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease); }
.ask-thread-card:hover { border-color: var(--border-strong); background: var(--surface-2); }
.ask-thread-card.active { border-color: var(--brand); background: var(--brand-soft); }
.ask-thread-open { display: block; width: 100%; text-align: left; padding: 10px 32px 10px 12px;
  border: 0; background: none; cursor: pointer; }
.ask-thread-title { display: block; font-size: 13.5px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-thread-time { display: block; margin-top: 3px; font-size: 12px; color: var(--text-muted); }
.ask-kebab { width: 24px; height: 24px; display: flex; align-items: center;
  justify-content: center; border: 0; background: none; border-radius: var(--r-sm);
  color: var(--text-faint); cursor: pointer; flex-shrink: 0; }
.ask-kebab:hover { background: var(--surface-hover); color: var(--text); }
.ask-kebab svg { width: 15px; height: 15px; }
.ask-thread-card .ask-kebab { position: absolute; top: 8px; right: 6px; }
.ask-thread-menu { position: absolute; top: 32px; right: 6px; z-index: 5; min-width: 110px;
  padding: 4px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-md); }
.ask-thread-menu button { width: 100%; text-align: left; padding: 7px 10px; border: 0;
  background: none; border-radius: var(--r-sm); font-size: 13px; color: var(--text);
  cursor: pointer; }
.ask-thread-menu button:hover { background: var(--surface-hover); }
.ask-thread-menu button.danger { color: var(--status-error); }
.ask-thread-menu button.danger:hover { background: var(--status-error-soft); }
.ask-rename-input { width: 100%; padding: 2px 6px; border: 1px solid var(--brand);
  border-radius: var(--r-sm); outline: none; background: var(--surface);
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text); }

.ask-main { flex: 1; min-width: 0; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); }
.ask-error { margin: 12px 16px 0; padding: 8px 12px; border-radius: var(--r-md);
  background: var(--status-error-soft); color: var(--status-error); font-size: 13px; }

/* Empty state — illustration, pitch, one-click example questions. */
.ask-empty { flex: 1; display: flex; flex-direction: column; justify-content: center;
  align-items: center; gap: 8px; padding: 24px; color: var(--text-muted); }
.ask-empty-art { width: 180px; height: auto; margin-bottom: 6px; }
.ask-empty h3 { margin: 0; font-size: 21px; font-weight: 700; color: var(--text); }
.ask-empty p { margin: 0 0 14px; font-size: 13.5px; }
.ask-suggestions { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ask-suggestion { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  box-shadow: var(--shadow-xs); font-size: 13px; font-weight: 500; color: var(--brand);
  cursor: pointer; transition: border-color 0.15s var(--ease), background 0.15s var(--ease); }
.ask-suggestion:hover { border-color: var(--brand); background: var(--brand-soft); }
.ask-suggestion svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--brand); }

.ask-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex;
  flex-direction: column; gap: 12px; }
.ask-msg { max-width: 72%; padding: 10px 14px; border-radius: var(--r-lg); font-size: 14px; }
/* The question is a compact brand bubble; the answer is a document. Giving the
   two the same shape was what made a structured reply read as a wall of text. */
.ask-msg-user { align-self: flex-end; background: var(--brand); color: var(--text-on-brand);
  border-bottom-right-radius: 4px; }
.ask-msg-user .ask-msg-body { white-space: pre-wrap; }
.ask-msg-assistant { align-self: flex-start; max-width: 88%; padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--border);
  border-bottom-left-radius: 4px; box-shadow: var(--shadow-sm); }

.ask-msg-from { display: flex; align-items: center; gap: 7px; margin-bottom: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--text-muted); }
.ask-msg-mark { display: grid; place-items: center; width: 20px; height: 20px;
  border-radius: 50%; background: var(--brand-soft); color: var(--brand); }
.ask-msg-mark svg { width: 13px; height: 13px; }

/* ── Answer body ───────────────────────────────────────────────────────────
   Answers come back as light markdown. They used to print as one pre-wrap
   string, so the reader saw the ** and - characters rather than the structure
   they stand for; AnswerBody renders real elements and these lay them out. */
.ask-msg-assistant .ans-body { font-size: 13.8px; line-height: 1.65; color: var(--text); }
.ans-body > :first-child { margin-top: 0; }
.ans-body > :last-child { margin-bottom: 0; }

.ans-heading { margin: 16px 0 8px; font-size: 13.5px; font-weight: 700;
  letter-spacing: -.01em; color: var(--text); }
.ans-para { margin: 0 0 10px; }

.ans-list { margin: 0 0 12px; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 8px; }
.ans-item { position: relative; padding-left: 20px; }
/* Drawn markers, so a wrapped item keeps its bullet aligned to the first line. */
.ans-item::before { content: ""; position: absolute; left: 4px; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--brand); }
ol.ans-list { counter-reset: ans-n; }
ol.ans-list > .ans-item { counter-increment: ans-n; padding-left: 28px; }
ol.ans-list > .ans-item::before { content: counter(ans-n); top: 0; left: 0;
  width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand-hover); font-size: 10.5px; font-weight: 700; }

.ans-body strong { font-weight: 700; color: var(--text); }
.ans-body em { color: var(--text-muted); }
.ans-code { padding: 1px 6px; border-radius: 5px; background: var(--surface-inset);
  border: 1px solid var(--border); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em; }
.ans-quote { margin: 0 0 10px; padding: 8px 0 8px 14px; border-left: 2px solid var(--brand-line);
  color: var(--text-muted); font-style: italic; }

/* Thinking indicator */
.ask-typing { display: flex; align-items: center; gap: 5px; color: var(--text-faint);
  font-size: 13px; }
.ask-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--brand);
  animation: ask-pulse 1.2s var(--ease) infinite; }
.ask-dot:nth-child(2) { animation-delay: .18s; }
.ask-dot:nth-child(3) { animation-delay: .36s; margin-right: 5px; }
@keyframes ask-pulse { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ask-dot { animation: none; opacity: .6; } }

.ask-citations { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.ask-citations-label { margin-right: 2px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); }
.ask-citation-chip { font-size: 12px; padding: 4px 11px; border-radius: 999px;
  background: var(--brand-soft); border: 1px solid var(--brand-line);
  color: var(--brand-hover); text-decoration: none; }
.ask-citation-chip:hover { background: rgba(99, 102, 241, 0.24); }

/* Composer — one bordered pill: sparkle, bare input, brand Send. */
.ask-composer-zone { padding: 12px 16px 10px; border-top: 1px solid var(--border); }
.ask-composer { display: flex; align-items: center; gap: 10px; padding: 5px 5px 5px 14px;
  border: 1.5px solid var(--brand); border-radius: var(--r-lg); background: var(--surface); }
.ask-composer:focus-within { box-shadow: 0 0 0 3px var(--brand-soft); }
.ask-composer-spark { width: 18px; height: 18px; flex-shrink: 0; color: var(--brand); }
.ask-composer input { flex: 1; min-width: 0; padding: 9px 0; border: 0; outline: none;
  background: none; font: inherit; font-size: 14px; color: var(--text); }
.ask-composer input::placeholder { color: var(--text-faint); }
.ask-send-btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px;
  border: 0; border-radius: var(--r-md); background: var(--brand); color: #fff;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background 0.15s var(--ease); }
.ask-send-btn:hover { background: var(--brand-hover); }
.ask-send-btn:disabled { opacity: 0.5; cursor: default; }
.ask-send-btn svg { width: 15px; height: 15px; }
.ask-privacy { display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 9px 0 0; font-size: 12px; color: var(--text-muted); }
.ask-privacy svg { width: 13px; height: 13px; flex-shrink: 0; }

/* View All Conversations modal — full history, searchable, date-bucketed. */
.ask-modal-overlay { position: fixed; inset: 0; z-index: 100; display: flex;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(16, 24, 40, 0.45); }
.ask-modal { display: flex; flex-direction: column; gap: 12px; width: 560px;
  max-width: 100%; max-height: 80vh; padding: 20px; background: var(--surface);
  border-radius: var(--r-xl); box-shadow: var(--shadow-xl); }
.ask-modal-head { display: flex; align-items: center; justify-content: space-between; }
.ask-modal-head h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }
.ask-modal-close { border: 0; background: none; padding: 0 4px; font-size: 22px;
  line-height: 1; color: var(--text-faint); cursor: pointer; }
.ask-modal-close:hover { color: var(--text); }
.ask-modal-search { padding: 9px 12px; border: 1px solid var(--border-strong);
  border-radius: var(--r-md); font: inherit; font-size: 13.5px; color: var(--text);
  outline: none; }
.ask-modal-search:focus { border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft); }
.ask-modal-list { flex: 1; min-height: 120px; overflow-y: auto; }
.ask-modal-bucket { margin: 10px 0 4px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); }
.ask-modal-row { position: relative; display: flex; align-items: center; gap: 4px;
  padding-right: 6px; border-radius: var(--r-md); }
.ask-modal-row:hover { background: var(--surface-hover); }
.ask-modal-open { flex: 1; min-width: 0; display: flex; align-items: baseline;
  justify-content: space-between; gap: 12px; padding: 9px 10px; border: 0;
  background: none; cursor: pointer; text-align: left; }
.ask-modal-title { font-size: 13.5px; font-weight: 500; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-modal-time { flex-shrink: 0; font-size: 12px; color: var(--text-muted); }
.ask-modal-none { margin: 0; padding: 16px 0; font-size: 13.5px; text-align: center;
  color: var(--text-muted); }

@media (max-width: 900px) { .ask-rail { width: 220px; } .ask-msg { max-width: 90%; } }

/* ==========================================================================
   Security Log page
   The record of what the DLP pipeline caught. Built on the meetings page's
   stat-strip + table shape on purpose: an admin arriving from Meetings should
   not have to learn a second layout to read a second list.
   ========================================================================== */

.sec-page { display: flex; flex-direction: column; gap: 20px; }

.sec-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; }
.sec-title { margin: 0; font-size: 17px; font-weight: 650; color: var(--text); }
.sec-sub { margin: 4px 0 0; max-width: 70ch; font-size: 12.5px; line-height: 1.5;
  color: var(--text-muted); }
.sec-head-tools { display: flex; align-items: center; gap: 8px; }

.sec-refresh { padding: 7px 14px; border-radius: var(--r-md); border: 1px solid var(--border);
  background: var(--surface); font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--text-muted); cursor: pointer; }
.sec-refresh:hover:not(:disabled) { background: var(--surface-hover); color: var(--text); }
.sec-refresh:disabled { opacity: .6; cursor: default; }

/* --- Stat strip --- */

.sec-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sec-stat { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px;
  border-radius: var(--r-lg); border: 1px solid var(--border); }
.sec-stat.violet { background: var(--tone-violet-bg); border-color: var(--tone-violet-line); }
.sec-stat.blue   { background: var(--tone-blue-bg);   border-color: var(--tone-blue-line); }
.sec-stat.green  { background: var(--tone-green-bg);  border-color: var(--tone-green-line); }
.sec-stat.amber  { background: var(--tone-amber-bg);  border-color: var(--tone-amber-line); }
.sec-stat-icon { display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: var(--r-md);
  background: var(--icon-plate); border: 1px solid var(--border-alpha); }
.sec-stat-icon svg { width: 17px; height: 17px; }
.sec-stat.violet .sec-stat-icon { color: var(--tone-violet-ink); border-color: var(--tone-violet-line); }
.sec-stat.blue   .sec-stat-icon { color: var(--tone-blue-ink);   border-color: var(--tone-blue-line); }
.sec-stat.green  .sec-stat-icon { color: var(--tone-green-ink);  border-color: var(--tone-green-line); }
.sec-stat.amber  .sec-stat-icon { color: var(--tone-amber-ink);  border-color: var(--tone-amber-line); }
.sec-stat-body { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.sec-stat-label { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.sec-stat-value { font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--text); }
.sec-stat-foot { font-size: 11.5px; color: var(--text-faint); }

/* --- Card + toolbar --- */

.sec-card { padding: 18px; }
.sec-toolbar { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.sec-filters { display: inline-flex; gap: 4px; padding: 3px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--border); }
.sec-filter { padding: 5px 12px; border: 0; border-radius: calc(var(--r-md) - 3px);
  background: transparent; font: inherit; font-size: 12px; font-weight: 600;
  color: var(--text-muted); cursor: pointer; }
.sec-filter:hover { color: var(--text); }
.sec-filter.active { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-xs); }
.sec-toolbar-right { display: flex; align-items: center; gap: 8px; }
.sec-select, .sec-search { height: 32px; padding: 0 10px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surface); font: inherit;
  font-size: 12.5px; color: var(--text); outline: none; }
.sec-search { width: 220px; }
.sec-select:focus, .sec-search:focus { border-color: var(--brand); }

/* --- Table --- */

.sec-table-wrap { overflow-x: auto; }
.sec-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sec-table th { padding: 9px 10px; border-bottom: 1px solid var(--border); font-size: 11px;
  font-weight: 600; color: var(--text-muted); text-align: left; white-space: nowrap; }
.sec-table td { padding: 12px 10px; border-bottom: 1px solid var(--border);
  vertical-align: middle; color: var(--text-muted); }
.sec-table tbody tr:last-child td { border-bottom: 0; }
.sec-row { cursor: pointer; }
.sec-row:hover { background: var(--surface-2); }
.sec-row.open { background: var(--surface-2); }
.sec-cell-title { display: block; font-size: 13px; font-weight: 600; color: var(--text);
  max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec-cell-name { display: block; font-size: 12.5px; font-weight: 600; color: var(--text); }
.sec-cell-sub { display: block; margin-top: 2px; font-size: 11px; color: var(--text-faint); }
.sec-what { display: block; max-width: 340px; line-height: 1.45; }
.sec-what.blocked { color: var(--status-danger); font-weight: 600; }
.sec-when { white-space: nowrap; }

.sec-chip { display: inline-block; padding: 3px 9px; border-radius: 999px;
  border: 1px solid transparent; font-size: 11px; font-weight: 600; white-space: nowrap; }
.sec-chip.ok   { background: var(--status-success-soft); color: var(--status-success); border-color: var(--status-success-line); }
.sec-chip.info { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-line); }
.sec-chip.warn { background: var(--status-warning-soft); color: var(--status-warning); border-color: var(--status-warning-line); }
.sec-chip.bad  { background: var(--status-error-soft); color: var(--status-error); border-color: var(--status-error-line); }
.sec-risk { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 600;
  color: var(--text-faint); white-space: nowrap; }
.sec-risk.warn { color: var(--status-warning); }
.sec-risk.bad  { color: var(--status-error); }

/* --- Expanded row --- */

.sec-detail-row td { padding: 0; background: var(--surface-2); }
.sec-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px; padding: 16px 12px 20px; }
.sec-detail-block h4 { margin: 0 0 10px; font-size: 12px; font-weight: 650;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.sec-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; }
.sec-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px;
  border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  font-size: 12px; font-weight: 500; color: var(--text); }
.sec-tag-count { display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand); font-size: 11px; font-weight: 700; }
.sec-detail-note { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--text-faint); }
.sec-detail-note.blocked { margin-top: 10px; color: var(--status-error); }
.sec-facts { margin: 0; display: flex; flex-direction: column; gap: 7px; }
.sec-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sec-facts dt { font-size: 12px; color: var(--text-muted); }
.sec-facts dd { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--text); text-align: right; }
.sec-detail-link { display: inline-block; margin-top: 12px; font-size: 12.5px;
  font-weight: 600; color: var(--brand); text-decoration: none; }
.sec-detail-link:hover { text-decoration: underline; }

.sec-empty { margin: 0; padding: 30px 8px; font-size: 13px; line-height: 1.55;
  color: var(--text-muted); text-align: center; }
.sec-alert { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r-md);
  background: var(--status-error-soft); border: 1px solid var(--status-error-line); color: var(--status-error); font-size: 12.5px; }

/* Paging back through the log. The feed gains a row per AI call, so the page
   loads the recent stretch and fetches older ones on request. */
.sec-more { display: flex; justify-content: center; padding: 16px 8px 4px; }
.sec-more-btn { padding: 8px 18px; border-radius: var(--r-md); cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  font-size: 12.5px; font-weight: 500; font-family: inherit;
  transition: background 120ms ease, border-color 120ms ease; }
.sec-more-btn:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--border-strong); }
.sec-more-btn:disabled { opacity: 0.6; cursor: default; }

@media (max-width: 1000px) {
  .sec-stats { grid-template-columns: repeat(2, 1fr); }
  .sec-detail { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

@media (max-width: 640px) {
  .sec-stats { grid-template-columns: minmax(0, 1fr); }
  .sec-toolbar-right { width: 100%; }
  .sec-search { flex: 1; width: auto; }
}

/* ==========================================================================
   Plans & Usage
   Subscriptions are sold on the web only, so this page is the whole purchase
   surface. Nothing charges anyone yet — the CTAs go to sales.
   ========================================================================== */

.sub-page { display: flex; flex-direction: column; gap: 20px; }

.sub-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; }
.sub-title { margin: 0; font-size: 17px; font-weight: 650; color: var(--text); }
.sub-sub { margin: 4px 0 0; max-width: 70ch; font-size: 12.5px; line-height: 1.5;
  color: var(--text-muted); }
.sub-section-title { margin: 0 0 14px; font-size: 13px; font-weight: 650; color: var(--text); }

.sub-cycle { display: inline-flex; gap: 4px; padding: 3px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--border); }
.sub-cycle-btn { padding: 6px 14px; border: 0; border-radius: calc(var(--r-md) - 3px);
  background: transparent; font: inherit; font-size: 12px; font-weight: 600;
  color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.sub-cycle-btn:hover { color: var(--text); }
.sub-cycle-btn.active { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-xs); }

.sub-card { padding: 18px; }

/* --- Usage --- */

.sub-usage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* Stacked, one under the other. Two bars side by side are read as a comparison
   between them, when they are the same measure over different spans — and each one
   gets half the width to say how full it is. */
.sub-usage-stack { display: flex; flex-direction: column; gap: 16px; }
.sub-usage-note { margin: 0; font-size: 11.5px; color: var(--text-muted); }
.sub-usage { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.sub-usage-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; font-size: 12.5px; color: var(--text-muted); }
.sub-usage-head strong { font-size: 13px; color: var(--text); white-space: nowrap; }
.sub-usage-track { height: 6px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--border); overflow: hidden; }
.sub-usage-fill { height: 100%; border-radius: 999px; transition: width .3s ease; }
.sub-usage-fill.ok   { background: var(--status-success); }
.sub-usage-fill.warn { background: var(--status-warning); }
.sub-usage-fill.bad  { background: var(--status-error); }

/* --- Plan cards --- */

.sub-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
  align-items: stretch; }
.sub-plan { position: relative; display: flex; flex-direction: column; padding: 20px 18px; }
.sub-plan.recommended { border-color: var(--brand-line); box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.06); }
.sub-plan.current { border-color: var(--status-success); }
.sub-badge { position: absolute; top: -9px; left: 18px; padding: 2px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  background: var(--brand); color: #fff; }
.sub-badge.current { left: auto; right: 18px; background: var(--status-success); }
.sub-plan-name { margin: 4px 0 0; font-size: 16px; font-weight: 650; color: var(--text); }
.sub-plan-tagline { margin: 4px 0 14px; font-size: 12.5px; line-height: 1.45;
  color: var(--text-muted); min-height: 36px; }

.sub-price { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.sub-price-amount { font-size: 25px; font-weight: 700; letter-spacing: -.5px; color: var(--text); }
.sub-price-suffix { font-size: 12px; color: var(--text-muted); }
.sub-price-note { margin: 4px 0 0; font-size: 11.5px; font-weight: 600;
  color: var(--status-success); }

.sub-limits { margin: 16px 0 0; display: flex; flex-direction: column; gap: 6px;
  padding-top: 14px; border-top: 1px solid var(--border); }
.sub-limits > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sub-limits dt { font-size: 12px; color: var(--text-muted); }
.sub-limits dd { margin: 0; font-size: 12.5px; font-weight: 650; color: var(--text); text-align: right; }

.sub-features { margin: 14px 0 0; padding: 0; list-style: none; display: flex;
  flex-direction: column; gap: 7px; }
.sub-features li { position: relative; padding-left: 20px; font-size: 12.5px;
  line-height: 1.45; color: var(--text-muted); }
.sub-features li::before { content: '✓'; position: absolute; left: 0; top: -1px;
  font-weight: 700; color: var(--status-success); }

.sub-cta { margin-top: auto; padding-top: 18px; }
.sub-cta { display: block; margin-top: auto; text-align: center; padding: 10px 14px;
  border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface);
  font-size: 12.5px; font-weight: 650; color: var(--text); text-decoration: none; }
.sub-cta:hover { background: var(--surface-hover); }
.sub-cta.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.sub-cta.primary:hover { filter: brightness(1.06); }
/* A button now (the checkout), styled exactly like the link it replaced. */
button.sub-cta { width: 100%; cursor: pointer; font-family: inherit; }
button.sub-cta:disabled { opacity: .6; cursor: progress; }
/* "Your current plan": a statement, not a control. */
.sub-cta.current { background: transparent; border-style: dashed; color: var(--text-muted); cursor: default; }
.sub-cta.current:hover { background: transparent; }

/* With or without audio & video backup (AM-112). */
.sub-backup { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.sub-backup-note { margin: 0; flex: 1 1 280px; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
.sub-notice { margin: 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--status-success-soft, var(--brand-soft));
  border: 1px solid var(--status-success-line, var(--border)); color: var(--text); font-size: 12.5px; line-height: 1.5; }

/* --- Comparison table --- */

.sub-table-wrap { overflow-x: auto; }
.sub-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sub-table th, .sub-table td { padding: 10px 12px; border-bottom: 1px solid var(--border);
  text-align: left; white-space: nowrap; }
.sub-table thead th { font-size: 11px; font-weight: 650; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .03em; }
.sub-table tbody th { font-weight: 500; color: var(--text-muted); }
.sub-table td { font-weight: 600; color: var(--text); }
.sub-table tbody tr:last-child th, .sub-table tbody tr:last-child td { border-bottom: 0; }
.sub-table .current { background: var(--brand-soft); }

.sub-foot { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-faint); text-align: center; }
.sub-empty { margin: 0; padding: 30px 8px; font-size: 13px; color: var(--text-muted); text-align: center; }
.sub-alert { margin: 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--status-error-soft);
  border: 1px solid var(--status-error-line); color: var(--status-error); font-size: 12.5px; }

@media (max-width: 1200px) { .sub-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .sub-usage-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px)  { .sub-plans { grid-template-columns: minmax(0, 1fr); }
  .sub-plan-tagline { min-height: 0; } }

/* ==========================================================================
   Meeting page  (/meeting?job=<id>)
   --------------------------------------------------------------------------
   The meeting review used to be a modal over the dashboard: no URL, nothing to
   link or bookmark, and a fixed-height dialog that squeezed a full transcript
   into a scroller inside a scroller. It is a page now, laid out as a reading
   column plus a facts rail, with the tab strip deciding what the column holds.

   It carries no sidebar. The page is one meeting and nothing else, so a nav rail
   would only offer ways to leave it while taking width the transcript wants;
   Back is the one navigation it needs and it leads the bar.

   Class-name note: the panel wrapper keeps `detail-side` so the shared AI-panel
   typography above still applies to it. Everything about the LAYOUT is `mdx-`,
   so the modal rules and these never argue over the same declarations.
   ========================================================================== */

/* --- Shell -------------------------------------------------------------- */

.mdx-shell {
    min-height: 100vh;
    background: var(--bg-dark);
    color: var(--text);
}

.mdx-bar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px clamp(16px, 4vw, 40px);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(10px);
}

/* color-mix is recent; without it the bar would fall back to transparent and
   the transcript would scroll through it. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .mdx-bar { background: var(--surface); }
}

.mdx-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 10px;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}

.mdx-back:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.mdx-back svg { flex-shrink: 0; }

/* Centred wordmark: the one reminder of which product this page belongs to,
   now that the rail is gone. */
.mdx-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 auto;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
    text-decoration: none;
}

.mdx-brand-logo {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    object-fit: contain;
}

/* ─── Call Metadata & Form Overlays ────────────────────────────────────────── */

.meta-checklist {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 14px;
}

.meta-check-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 18px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.meta-check-item:hover {
    background: var(--surface-2);
    border-color: rgba(99, 102, 241, 0.35);
}

.meta-check-item input[type="checkbox"] {
    margin-top: 3px;
    width: 17px;
    height: 17px;
    accent-color: var(--brand);
    cursor: pointer;
    flex-shrink: 0;
}

.meta-check-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.meta-key {
    font-size: 13px;
    font-weight: 650;
    color: var(--text);
}

.meta-value {
    font-size: 13.5px;
    color: var(--text-muted);
    line-height: 1.45;
    word-break: break-word;
}

.meta-form-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(4, 6, 12, 0.82);
    backdrop-filter: blur(8px);
}

.meta-form-card {
    width: 100%;
    max-width: 540px;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 28px;
    box-shadow: var(--shadow-xl);
}

.meta-form-card h2 {
    margin: 0 0 4px;
    font-size: 1.25rem;
    font-weight: 750;
    color: var(--text);
}

.meta-form-card .subtitle {
    margin: 0 0 20px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.meta-field {
    margin-bottom: 16px;
}

.meta-field label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
}

.meta-optional-badge {
    font-size: 10.5px;
    color: var(--text-faint);
    text-transform: uppercase;
}

.meta-field input, .meta-field select, .meta-field textarea {
    width: 100%;
    padding: 10px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--text);
    font-family: inherit;
    font-size: 13.5px;
    outline: none;
    transition: border-color 0.15s ease;
}

.meta-field input:focus, .meta-field select:focus, .meta-field textarea:focus {
    border-color: var(--brand);
}

.meta-form-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.mdx-bar-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.mdx-wrap {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: clamp(20px, 3vw, 32px) clamp(16px, 4vw, 40px) 56px;
}

@media (max-width: 720px) {
    /* The wordmark is the first thing worth losing when the bar gets tight �
       Back and the tools both do something. */
    .mdx-brand { display: none; }
    .mdx-bar { gap: 10px; justify-content: space-between; }
}

.mdx-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

/* --- Headline ----------------------------------------------------------- */

.mdx-head { min-width: 0; }

.mdx-title {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--text);
    /* Filenames are long and arbitrary; wrap them rather than let one push the
       tools off the row. */
    overflow-wrap: anywhere;
}

.mdx-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 10px;
}

.mdx-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-muted);
    white-space: nowrap;
}

.mdx-meta svg { width: 13px; height: 13px; flex-shrink: 0; opacity: 0.8; }

.mdx-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 11px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: capitalize;
}

.mdx-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.mdx-status-ok   { background: var(--status-success-soft); color: var(--status-success); border-color: var(--status-success-line); }
.mdx-status-warn { background: var(--status-warning-soft); color: var(--status-warning); border-color: var(--status-warning-line); }
.mdx-status-bad  { background: var(--status-error-soft);   color: var(--status-error);   border-color: var(--status-error-line); }
.mdx-status-idle { background: var(--surface-hover);       color: var(--text-muted);     border-color: var(--border); }

/* --- Tabs --------------------------------------------------------------- */

.mdx-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    border-bottom: 1px solid var(--border);
    padding: 0;
    margin: 0;
    scrollbar-width: none;
}

.mdx-tabs::-webkit-scrollbar { display: none; }

.mdx-tabs .modal-tab {
    flex: 0 0 auto;
    padding: 10px 16px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}

.mdx-tabs .modal-tab:hover { color: var(--text); }

.mdx-tabs .modal-tab.active {
    color: var(--brand-hover);
    border-bottom-color: var(--brand);
    background: none;
}

/* --- Load / pending / failed -------------------------------------------- */

.mdx-state {
    margin: 0;
    padding: 14px 16px;
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-muted);
}

.mdx-state-pending { border-color: var(--status-warning-line); background: var(--status-warning-soft); color: var(--text); }
.mdx-state-error   { border-color: var(--status-error-line);   background: var(--status-error-soft);   color: var(--text); }

.mdx-load-error {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--status-error);
}

/* Until the header lands, hold its space rather than letting the tab strip and
   the body jump up and then back down. */
.mdx-skeleton {
    border-radius: var(--r-sm);
    background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-hover) 50%, var(--surface-2) 100%);
    background-size: 200% 100%;
    animation: mdx-shimmer 1.4s var(--ease) infinite;
}

.mdx-skeleton-title { width: min(420px, 70%); height: 30px; }
.mdx-skeleton-meta  { width: min(320px, 55%); height: 14px; margin-top: 14px; }

@keyframes mdx-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .mdx-skeleton { animation: none; }
}

/* --- Body: reading column + facts rail ---------------------------------- */

.mdx-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px;
    align-items: start;
}

.mdx-main {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.mdx-rail {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    /* The facts stay in view while the transcript scrolls past them — offset by
       the height of the sticky bar above, or they slide under it. */
    position: sticky;
    top: 76px;
}

.mdx-card {
    padding: 18px;
    border-radius: var(--r-xl);
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.mdx-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.mdx-card-title {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
}

.mdx-card-note {
    margin: 12px 0 0;
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--text-faint);
}

/* Confidence */

.mdx-band {
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mdx-band-high   { background: var(--status-success-soft); color: var(--status-success); }
.mdx-band-medium { background: var(--status-warning-soft); color: var(--status-warning); }
.mdx-band-low    { background: var(--status-error-soft);   color: var(--status-error); }

.mdx-conf { display: flex; align-items: center; gap: 12px; }

.mdx-conf-track {
    flex: 1;
    min-width: 0;
    height: 7px;
    border-radius: 999px;
    background: var(--surface-inset);
    border: 1px solid var(--border);
    overflow: hidden;
}

.mdx-conf-fill { height: 100%; border-radius: 999px; transition: width 0.4s var(--ease); }
.mdx-conf-high   { background: var(--status-success); }
.mdx-conf-medium { background: var(--status-warning); }
.mdx-conf-low    { background: var(--status-error); }

.mdx-conf-pct { flex: 0 0 auto; font-size: 15px; font-weight: 700; color: var(--text); }

/* Meeting Details */

.mdx-facts { margin: 0; display: flex; flex-direction: column; }

.mdx-fact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}

.mdx-fact:last-child { border-bottom: 0; padding-bottom: 0; }
.mdx-fact:first-child { padding-top: 0; }

.mdx-fact dt {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}

.mdx-fact dd {
    margin: 0;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    text-align: right;
    overflow-wrap: anywhere;
}

/* --- Panels ------------------------------------------------------------- */

/* The pane IS the card here. The modal put every .ai-block in its own tinted
   slab inside the dialog, which nested three borders deep for two paragraphs. */
.mdx-panels .wrapper-tabs { display: block; height: auto; }

.mdx-panels .tab-pane {
    padding: 20px 22px;
    border-radius: var(--r-xl);
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.mdx-panels .tab-pane:empty { display: none !important; }

/* --- What each tab shows ------------------------------------------------ */

.mdx-page[data-tab="tab-transcript"] .mdx-panels,
.mdx-page[data-tab="tab-transcript"] .detail-flags,
.mdx-page[data-tab="tab-actions"] .detail-transcript-block,
.mdx-page[data-tab="tab-actions"] .detail-player-slot,
.mdx-page[data-tab="tab-actions"] .detail-flags,
.mdx-page[data-tab="tab-quality-audit"] .detail-transcript-block,
.mdx-page[data-tab="tab-quality-audit"] .detail-player-slot,
.mdx-page[data-tab="tab-quality-audit"] .detail-flags,
.mdx-page[data-tab="tab-metadata"] .detail-transcript-block,
.mdx-page[data-tab="tab-metadata"] .detail-player-slot,
.mdx-page[data-tab="tab-metadata"] .detail-flags,
.mdx-page[data-tab="tab-summary"] .detail-transcript-block {
    display: none;
}

/* While the meeting is loading, still processing or failed, the empty shell
   below the message is noise. */
.mdx-page[data-state] .mdx-body { display: none; }

/* --- Player + transcript ------------------------------------------------- */

.mdx-main .detail-player {
    border-radius: var(--r-xl);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg-deep);
}

/* A recording with no playable source renders the frame and nothing in it,
   which reads as a stray rule across the column. */
.mdx-main .detail-player:empty { display: none; }

.mdx-main .detail-player-video { display: block; width: 100%; max-height: 46vh; background: #000; }

.mdx-main .detail-player-state { padding: 22px; font-size: 13px; color: var(--text-muted); }
.mdx-main .detail-player-error { color: var(--status-error); }

.mdx-main .detail-transcript-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 22px;
    border-radius: var(--r-xl);
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.mdx-main .detail-transcript-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.mdx-main .detail-section-title { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--text); }
.mdx-main .detail-hint { font-size: 11.5px; color: var(--text-faint); }

.mdx-main .detail-transcript {
    max-height: none;
    height: auto;
    overflow: visible;
    background: transparent;
    border: 0;
    padding: 0;
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1100px) {
    .mdx-body { grid-template-columns: minmax(0, 1fr); }
    .mdx-rail { position: static; }
}

@media (max-width: 640px) {
    .mdx-title { font-size: 21px; }
    .mdx-panels .tab-pane,
    .mdx-main .detail-transcript-block { padding: 16px; }
}




/* --- Folders ------------------------------------------------------------- */
/* One person's own filing. Two columns on a desk-sized screen: the list of folders
   stays put while the cards on the right change, so moving between folders does not
   move the thing you are clicking. */

.folders-layout {
    display: grid;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.folders-card {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-soft, rgba(128, 128, 160, 0.18));
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 1px 2px rgba(16, 18, 40, 0.04);
}

:root[data-theme="dark"] .folders-card,
html:not([data-theme="light"]) .folders-card {
    background: var(--card-bg, rgba(255, 255, 255, 0.03));
}

.folders-list { position: sticky; top: 16px; }

.folders-list-title {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--brand, #7C5CFF);
}

/* ── Card headers: icon chip, title, actions ─────────────────────────────── */

.folders-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.folders-card-icon {
    flex: none;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--brand-soft, rgba(99, 102, 241, 0.14));
    color: var(--brand, #7C5CFF);
}

.folders-card-icon svg { width: 19px; height: 19px; }

.folders-card-title {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-main);
    overflow-wrap: anywhere;
}

.folders-title-input {
    flex: 1;
    min-width: 140px;
    padding: 7px 10px;
    border-radius: 9px;
    border: 1px solid var(--border-soft, rgba(128, 128, 160, 0.3));
    background: var(--input-bg, transparent);
    color: var(--text-main);
    font: inherit;
    font-size: 17px;
    font-weight: 700;
}

.folders-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.folders-note {
    margin: 12px 0 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.55;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.folders-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 9px;
    border: 1px solid var(--border-soft, rgba(128, 128, 160, 0.3));
    background: transparent;
    color: var(--text-main);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.folders-btn:hover:not(:disabled) {
    background: var(--hover-soft, rgba(128, 128, 160, 0.12));
}

.folders-btn:disabled { opacity: 0.5; cursor: default; }

.folders-btn-icon { display: inline-grid; place-items: center; }
.folders-btn-icon svg { width: 14px; height: 14px; }

.folders-btn--primary {
    background: var(--brand, #7C5CFF);
    border-color: var(--brand, #7C5CFF);
    color: #fff;
}

.folders-btn--primary:hover:not(:disabled) { filter: brightness(1.06); }

.folders-btn--danger { color: #d24b4b; border-color: rgba(210, 75, 75, 0.35); }
.folders-btn--danger:hover:not(:disabled) { background: rgba(210, 75, 75, 0.1); }

/* ── The folder list ─────────────────────────────────────────────────────── */

.folders-new { display: flex; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }

.folders-new input {
    flex: 1;
    min-width: 0;
    padding: 8px 11px;
    border-radius: 9px;
    border: 1px solid var(--border-soft, rgba(128, 128, 160, 0.3));
    background: var(--input-bg, transparent);
    color: var(--text-main);
    font: inherit;
    font-size: 13px;
}

.folders-items { list-style: none; margin: 12px 0 0; padding: 0; }

.folders-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    margin-bottom: 4px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--text-main);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.folders-item:hover { background: var(--hover-soft, rgba(128, 128, 160, 0.1)); }

.folders-item.is-selected {
    background: var(--brand-soft, rgba(99, 102, 241, 0.14));
    border-color: var(--brand-line, rgba(99, 102, 241, 0.32));
}

.folders-item-icon {
    flex: none;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--hover-soft, rgba(128, 128, 160, 0.14));
    color: var(--text-muted);
}

.folders-item.is-selected .folders-item-icon {
    background: var(--brand-soft, rgba(99, 102, 241, 0.14));
    color: var(--brand, #7C5CFF);
}

.folders-item-icon svg { width: 15px; height: 15px; }

.folders-item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.folders-item-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 13.5px;
    overflow-wrap: anywhere;
}

.folders-item-counts { color: var(--text-muted); font-size: 11.5px; }

.folders-badge {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--brand-soft, rgba(99, 102, 241, 0.14));
    color: var(--brand, #7C5CFF);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── The right-hand column ───────────────────────────────────────────────── */

.folders-detail { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.folders-rows { list-style: none; margin: 14px 0 0; padding: 0; }

.folders-rows li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border-soft, rgba(128, 128, 160, 0.14));
    font-size: 13.5px;
}

.folders-rows li:last-child { border-bottom: 0; }

.folders-row-text { min-width: 0; overflow-wrap: anywhere; }

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

/* ── Empty states ────────────────────────────────────────────────────────── */

.folders-empty { text-align: center; padding: 34px 20px; }
.folders-empty--inline { padding: 26px 20px 12px; }

.folders-empty-art {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--brand-soft, rgba(99, 102, 241, 0.14));
    color: var(--brand, #7C5CFF);
}

.folders-empty-art svg { width: 26px; height: 26px; }

.folders-empty h3 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
}

.folders-empty p {
    margin: 0 auto 14px;
    max-width: 46ch;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.6;
}

.folders-empty p:last-child { margin-bottom: 0; }

.folders-error {
    margin: 0;
    padding: 11px 13px;
    border-radius: 10px;
    background: rgba(220, 70, 70, 0.12);
    color: #d24b4b;
    font-size: 13px;
}

/* The picker against a recording in the history list. Sized to sit inside a table row
   without changing its height. */
.folders-picker {
    max-width: 150px;
    padding: 4px 6px;
    border-radius: 6px;
    border: 1px solid var(--border-soft, rgba(128, 128, 160, 0.25));
    background: var(--input-bg, transparent);
    color: var(--text-main);
    font: inherit;
    font-size: 12px;
}

@media (max-width: 900px) {
    .folders-layout { grid-template-columns: minmax(0, 1fr); }
    .folders-list { position: static; }
    .folders-card-title { flex-basis: 100%; order: -1; }
}


/* ─── Collapsible sidebar ────────────────────────────────────────────────────
   The rail narrows to icons only. Everything follows from redefining
   --sidebar-width, because .main-content's margin already reads it — so the page
   beside it widens without anything else being told.

   Only above the mobile breakpoint. Below it the rail is already a drawer that
   slides off-screen entirely, and a half-width drawer would be neither.

   Labels are bare text nodes inside their links, which CSS cannot hide on their
   own, so the item's font-size goes to zero. The icons are sized in px and are
   unaffected. */

@media (min-width: 1025px) {
    :root.sidebar-collapsed { --sidebar-width: 68px; }

    :root.sidebar-collapsed .sidebar-brand { padding: 16px 0; justify-content: center; }
    :root.sidebar-collapsed .sidebar-brand-text,
    :root.sidebar-collapsed .sidebar-nav-label,
    :root.sidebar-collapsed .sidebar-nav-tag,
    :root.sidebar-collapsed .sidebar-user-info,
    :root.sidebar-collapsed .theme-toggle { display: none; }

    :root.sidebar-collapsed .sidebar-nav { padding: 14px 10px; }

    :root.sidebar-collapsed .sidebar-nav-item,
    :root.sidebar-collapsed .sidebar-help {
        justify-content: center;
        gap: 0;
        padding: 10px 0;
        font-size: 0;
    }

    :root.sidebar-collapsed .sidebar-user { justify-content: center; padding: 8px 0; }
    :root.sidebar-collapsed .sidebar-bottom { padding: 10px 6px; }
}

/* The collapse control itself.
 *
 * Fixed to the viewport rather than absolute inside the rail, for two reasons: the
 * rail is itself position:fixed with overflow hidden, so anything absolute inside it
 * that reaches for the edge gets clipped; and the rail scrolls, which would carry the
 * button up and away with the nav. Anchoring off --sidebar-width means it follows the
 * rail's width without being told.
 *
 * Giving .sidebar position:relative to hold it instead is what broke the layout once
 * already: the rule lives in theme.css, which loads after the style.css that makes the
 * rail fixed, so the rail dropped out of the fixed layer into the flow, took up its own
 * width, and left every page shoved sideways by the margin that was still reserved for
 * it. Do not reintroduce it.
 */
.sidebar-collapse {
    position: fixed;
    top: 76px;
    left: calc(var(--sidebar-width) - 11px);
    z-index: 51;
    width: 22px;
    height: 22px;
    display: none;
    place-items: center;
    padding: 0;
    border: 1px solid var(--sidebar-border);
    border-radius: 50%;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    cursor: pointer;
    transition: color 0.15s var(--ease), background 0.15s var(--ease);
}

.sidebar-collapse:hover {
    color: var(--sidebar-text-active);
    background: var(--sidebar-item-hover);
}

.sidebar-collapse svg { width: 13px; height: 13px; }

:root.sidebar-collapsed .sidebar-collapse svg { transform: rotate(180deg); }

@media (min-width: 1025px) {
    .sidebar-collapse { display: grid; }
}


/* ─── History table: keep the last two columns on screen ─────────────────────
   The list grew a Folder column, and with nine columns the two that matter most
   for acting on a row — its state and its delete — were the first to scroll out
   of sight. On a laptop they were off the edge; on anything smaller they were
   never seen at all, and nothing on screen said there was more to the right.

   So they stop scrolling: State and Controls pin to the right edge and the rest
   of the table slides underneath them. They need an opaque background of their
   own, and that background has to follow the row's hover, or the pinned pair
   would stay pale while the row they belong to lights up. */

/* State is the last column now that per-row Delete is gone, and it is the one that
   used to scroll out of sight first. It pins to the right edge and the rest of the
   table slides underneath it. The pinned cell needs an opaque background of its own,
   and that background has to follow the row's hover, or it would stay pale while the
   row it belongs to lights up. */
.history-table th:last-child,
.history-table td:last-child {
    position: sticky;
    right: 0;
    width: 124px;
    min-width: 124px;
    background: var(--surface);
}

.history-table thead th:last-child {
    background: var(--surface-2);
    z-index: 3;
}

.history-table tbody tr:hover td:last-child {
    background: var(--surface-hover);
}

/* A status badge that wraps or clips is worse than no badge: "Complete" and
   "Completed" are different words, and the row was showing the first while meaning
   the second. */
.history-table td:last-child .status-badge { white-space: nowrap; }

/* ── Selecting rows ──────────────────────────────────────────────────────────
   Delete used to be a button on every row, one per line down the whole list, with
   nothing to do the moment you wanted to remove more than one. */

.history-table .history-pick {
    width: 34px;
    min-width: 34px;
    padding-right: 0;
    text-align: center;
}

.history-table .history-pick input {
    width: 15px;
    height: 15px;
    accent-color: var(--brand);
    cursor: pointer;
    vertical-align: middle;
}

.history-selection {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding: 9px 12px;
    border: 1px solid var(--brand-line, rgba(99, 102, 241, 0.32));
    border-radius: var(--r-md);
    background: var(--brand-soft, rgba(99, 102, 241, 0.14));
    font-size: 13px;
    font-weight: 600;
}

.history-selection > span { margin-right: auto; }

/* The meeting name is a row title, not the row. Long ones — a pasted meeting URL
   above all — used to take whatever width they liked and push everything after
   them off the end. */
.history-table .meeting-name { max-width: 210px; }

@media (max-width: 720px) {
    .history-table .meeting-name { max-width: 150px; }
}


/* ─── The meetings search ────────────────────────────────────────────────────
   .history-search--wide already asked to grow, but its parent was sized to its
   own contents, so there was nothing for it to grow into: the field stayed at its
   minimum with the whole middle of the header empty beside it. The tools row is
   what has to take the space first. Capped, because a search field running the
   full width of a wide monitor looks like a mistake rather than a courtesy. */

.history-header .history-tools {
    flex: 1;
    min-width: 0;
    justify-content: flex-end;
}

.history-header .history-search--wide {
    flex: 1;
    min-width: 0;
    max-width: 460px;
}


/* A cited reference document. Same chip as a meeting, without the affordances of a
   link, because there is nothing to open: the file needs a signed-in request that a
   plain anchor cannot make. */
.ask-citation-chip.is-doc {
    cursor: default;
    color: var(--text-muted);
    border-style: dashed;
}

.ask-citation-chip.is-doc:hover {
    color: var(--text-muted);
    background: inherit;
}


/* ─── Upgrade, low in the rail ───────────────────────────────────────────────
   It sat in the dashboard's top bar beside Upload and styled the same, so the two
   read as a pair of equally ordinary actions — and Upload is done a dozen times a
   day while Upgrade is done once. Quieter than a filled button, and on every page
   rather than only the dashboard. */

.sidebar-upgrade {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-bottom: 10px;
    padding: 9px 10px;
    /* Amber rather than the brand purple. Everything else in the rail is the product;
       this is the one thing that is not, and in the brand colour it read as another
       nav item wearing a border. */
    border: 1px solid rgba(245, 176, 65, 0.42);
    border-radius: var(--r-md);
    background: rgba(245, 176, 65, 0.14);
    color: #f3c37a;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.sidebar-upgrade:hover {
    background: #E9A23B;
    border-color: #E9A23B;
    color: #2a1c05;
}

:root.sidebar-collapsed .sidebar-upgrade {
    gap: 0;
    font-size: 0;
    padding: 9px 0;
}


/* The period filter as a dropdown. It was a segmented control of three buttons; as a
   select it takes one control's worth of room and reads as the filter it is. */
.dash-period-select {
    padding: 5px 10px;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}


/* ─── The theme switch ───────────────────────────────────────────────────────
   One control rather than two. A pair of labelled options was unambiguous but took a
   whole row of the rail to say what a switch says in a corner, and read as two things
   you could be on rather than one thing you could flip. The knob's position and
   aria-checked both say which mode you are in, so nothing has to be guessed from an
   icon. */

.theme-switch {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--sidebar-border);
    border-radius: var(--r-md);
    background: transparent;
    color: var(--sidebar-text);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.theme-switch:hover { background: var(--sidebar-item-hover); color: var(--sidebar-text-active); }

/* One mode, one icon.

   This used to show the sun and the moon side by side with a knob sliding
   between them. At 13px, four pixels apart, they read as one smudged glyph
   rather than two states — and the question a reader actually has is "which
   mode am I in", which a single icon answers outright.

   The button already says which mode it is in three other ways: the label next
   to it, aria-checked, and the title. The icon now agrees with them instead of
   showing both answers at once. */
.theme-switch-icons {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: var(--sidebar-item-hover);
}

.theme-switch-icons svg {
    width: 14px;
    height: 14px;
    position: absolute;
    /* Crossfade rather than swap: an icon that vanishes and reappears reads as
       a glitch at this size. */
    opacity: 0;
    transform: scale(0.6) rotate(-45deg);
    transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}

/* Light mode shows the sun (the first svg), dark shows the moon (the second). */
.theme-switch:not(.is-dark) .theme-switch-icons svg:first-of-type,
.theme-switch.is-dark .theme-switch-icons svg:last-of-type {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    color: var(--brand, #7C5CFF);
}

/* The knob is gone: with one icon there is nothing for it to slide between,
   and it was the piece that broke in RTL (a hard `left` plus a translateX that
   both pointed the wrong way when the page mirrored). */
.theme-switch-knob { display: none; }

/* margin-inline-start, not margin-left: in Arabic the label belongs on the
   other side, and `auto` on the physical property pushed it off the wrong
   edge. */
.theme-switch-label { margin-inline-start: auto; }

:root.sidebar-collapsed .theme-switch { justify-content: center; padding: 7px 0; font-size: 0; }
:root.sidebar-collapsed .theme-switch-label { display: none; }

/* ─── Notetaker tabs ─────────────────────────────────────────────────────────
   Four full-height cards in two columns meant the page was always mostly things you
   were not doing. */

.mtg-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
}

.mtg-tab {
    padding: 8px 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--text-muted);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

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

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

.mtg-panels { display: block; }
.mtg-panels .mtg-col { display: flex; flex-direction: column; gap: 16px; }
.mtg-panels .mtg-col[hidden] { display: none; }


/* The way through from Plans & Usage to the ladder. A row rather than a button: it is
   a place to go, not an action, and the page it leads to is the one that asks for a
   decision. */
.sub-upgrade-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid var(--brand-line, rgba(99, 102, 241, 0.32));
    border-radius: var(--r-md);
    background: var(--brand-soft, rgba(99, 102, 241, 0.14));
    color: var(--text);
    text-decoration: none;
}

.sub-upgrade-cta:hover { border-color: var(--brand); }
.sub-upgrade-cta > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.sub-upgrade-sub { color: var(--text-muted); font-size: 12.5px; }
.sub-upgrade-go { margin-left: auto; color: var(--brand); font-size: 18px; }

/* Smaller usage bars. At the old size two of them were the whole card, which made a
   figure anybody reads in a second look like the page's main event. */
.sub-usage-stack { gap: 12px; }
.sub-usage-head { font-size: 12px; }
.sub-usage-head strong { font-size: 12.5px; }
.sub-usage-track { height: 5px; }
.sub-usage-note { font-size: 11px; }


/* ─── Fitting the rail on one screen ─────────────────────────────────────────
   The rail grew an Upgrade link and a Help item and started scrolling, which put a
   scrollbar down the side of the navigation — nav that scrolls is nav you have to
   search. Everything below is about giving back the height rather than hiding items:
   nothing is removed from the list.

   The tagline goes because the brand already says which edition this is; a second
   line repeating it in smaller type is three rows of height for no information. */

.sidebar-brand-text p { display: none; }
.sidebar-brand { padding: 14px 16px; }
.sidebar-brand-logo { width: 34px; height: 34px; }
.sidebar-brand-text h1 { font-size: 1.02rem; }

.sidebar-nav { padding: 10px 10px; gap: 1px; }
.sidebar-nav-item { padding: 7px 10px; font-size: 13px; }
.sidebar-nav-label { margin: 10px 0 3px; }

.sidebar-bottom { padding: 10px; }
.sidebar-user { padding: 6px; }
.sidebar-upgrade { margin-bottom: 8px; padding: 8px 10px; }

/* And with the height back, no scrollbar. If a very short window still cannot fit it,
   the rail scrolls rather than clipping — losing Settings off the bottom of a laptop
   screen would be worse than a scrollbar on a phone-sized one. */
.sidebar { overflow-y: hidden; }

@media (max-height: 680px) {
    .sidebar { overflow-y: auto; }
}

/* ─── Usage bars ─────────────────────────────────────────────────────────────
   A bar the full width of a wide monitor to say "9.12 of 10" is a line across the
   page pretending to be a chart. Capped, and the figure sits with it. */

.sub-usage { max-width: 460px; }


/* ─── Notifications ──────────────────────────────────────────────────────────
   The bell replaces a button that was decoration: an icon with no handler, no count
   and nothing behind it. */

.notif { position: relative; display: inline-flex; }

.notif-btn {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
}

.notif-btn:hover { color: var(--text); }
.notif-btn svg { width: 17px; height: 17px; }

/* The count, not merely a dot: "something happened" and "nine things happened" are
   different amounts of urgency. */
.notif-dot {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #E5484D;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.notif-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 200;
    width: min(360px, calc(100vw - 32px));
    max-height: 70vh;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--r-lg, 12px);
    background: var(--surface);
    box-shadow: var(--shadow-xl);
}

.notif-head {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    font-size: 13.5px;
}

.notif-link {
    border: 0;
    background: none;
    padding: 0;
    color: var(--brand);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

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

.notif-item {
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}

.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: var(--surface-hover); }

/* Unread carries a mark down its edge rather than a different background: a panel of
   coloured rows is harder to read than a panel with a few marked ones. */
.notif-item.unread { box-shadow: inset 2px 0 0 var(--brand); }

.notif-item-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.notif-title { font-size: 13.5px; font-weight: 600; }
.notif-when { color: var(--text-muted); font-size: 11px; white-space: nowrap; }
.notif-body { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text); }
.notif-from { display: block; margin-top: 4px; color: var(--text-muted); font-size: 11px; }
.notif-empty { margin: 0; padding: 22px 14px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* ─── The announcement composer ──────────────────────────────────────────── */

.ann { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }

.ann-card {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    padding: 18px;
}

.ann-title { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.ann-sub { margin: 0 0 14px; color: var(--text-muted); font-size: 13px; }

.ann-field { display: block; margin-bottom: 12px; }
.ann-field > span { display: block; margin-bottom: 5px; font-size: 12.5px; font-weight: 600; }

.ann-field input,
.ann-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--input-bg, transparent);
    color: var(--text-main);
    font: inherit;
    font-size: 13.5px;
    resize: vertical;
}

.ann-buzz { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 14px; }
.ann-buzz input { margin-top: 3px; width: 15px; height: 15px; accent-color: var(--brand); }
.ann-buzz > span { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.ann-buzz-sub { color: var(--text-muted); font-size: 12px; line-height: 1.5; }

.ann-send {
    padding: 9px 18px;
    border: 0;
    border-radius: var(--r-md);
    background: var(--brand);
    color: #fff;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

.ann-send:disabled { opacity: 0.5; cursor: default; }

.ann-error { margin: 0 0 10px; color: #d24b4b; font-size: 13px; }
.ann-note { margin: 0 0 10px; color: var(--status-success, #2e7d5b); font-size: 13px; }
.ann-empty { margin: 0; color: var(--text-muted); font-size: 13px; }

.ann-sent { list-style: none; margin: 0; padding: 0; }
.ann-sent > li { padding: 12px 0; border-bottom: 1px solid var(--border); }
.ann-sent > li:last-child { border-bottom: 0; }

.ann-sent-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.ann-sent-title { font-size: 13.5px; font-weight: 600; }
.ann-sent-meta { color: var(--text-muted); font-size: 11.5px; white-space: nowrap; }
.ann-sent-body { margin: 4px 0 6px; font-size: 12.5px; color: var(--text-muted); }

/* Quiet until you reach for it. Withdrawing an announcement is a rare, deliberate act,
   so it should not compete with the message it sits under. */
.ann-delete {
    border: 0;
    background: none;
    padding: 0;
    color: var(--text-muted);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.ann-delete:hover:not(:disabled) { color: var(--error); }
.ann-delete:disabled { cursor: default; opacity: 0.6; }


/* Offered inside the panel, never on page load: an unprompted permission dialog is the
   one everybody dismisses, and Chrome will not show it again for a long while. */
.notif-enable {
    display: block;
    width: calc(100% - 20px);
    margin: 10px;
    padding: 8px 10px;
    border: 1px dashed var(--brand-line, rgba(99, 102, 241, 0.32));
    border-radius: var(--r-md);
    background: var(--brand-soft, rgba(99, 102, 241, 0.14));
    color: var(--brand);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}


/* Linking WhatsApp: the number proves itself rather than being typed and trusted. */
.wa-link { display: grid; gap: 10px; margin-top: 6px; }
.wa-link-note { margin: 0; font-size: 12px; line-height: 1.55; color: var(--text-muted); }
.wa-link-error { margin: 0; font-size: 12px; color: var(--error); }

.wa-link.is-on {
    padding: 14px 16px;
    border: 1px solid var(--brand-line);
    border-radius: var(--r-md);
    background: var(--brand-soft);
}
.wa-link-main { display: flex; align-items: center; gap: 10px; }
.wa-link-main strong { font-size: 15px; color: var(--text); }
.wa-link-badge {
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--success);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* The message to send, shown big enough to retype if the link did not open. */
.wa-link-code {
    padding: 12px 14px;
    border: 1px dashed var(--brand-line);
    border-radius: var(--r-md);
    background: var(--surface-2);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text);
    text-align: center;
}

.wa-link-unlink, .wa-link-again {
    justify-self: start;
    border: 0;
    background: none;
    padding: 0;
    color: var(--text-muted);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.wa-link-unlink:hover { color: var(--error); }
.wa-link-again:hover { color: var(--brand); }


/* Bulk actions on a ticked set of meetings: send to your own WhatsApp, or share into a
   colleague's account. */
.bulk-sheet {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(8, 10, 20, 0.55);
    backdrop-filter: blur(3px);
}

.bulk-sheet-body {
    width: min(460px, 100%);
    max-height: 86vh;
    overflow-y: auto;
    padding: 22px 22px 18px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.55);
}

.bulk-sheet-body h3 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
}
.bulk-sheet-body h3 span { font-size: 12.5px; font-weight: 500; color: var(--text-muted); }

.bulk-note { margin: 0 0 12px; font-size: 12.5px; line-height: 1.55; color: var(--text-muted); }
.bulk-error { margin: 10px 0 0; font-size: 12.5px; color: var(--error); }
.bulk-ok { margin: 10px 0 0; font-size: 12.5px; color: var(--success); }

.bulk-options, .bulk-people { display: grid; gap: 8px; margin-bottom: 12px; }
.bulk-people { max-height: 240px; overflow-y: auto; }

.bulk-options label, .bulk-people label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
}
.bulk-options label.on, .bulk-people label.on {
    border-color: var(--brand);
    background: var(--brand-soft);
}
.bulk-options label span, .bulk-people label span { display: grid; gap: 2px; }
.bulk-options strong, .bulk-people strong { font-size: 13.5px; font-weight: 650; color: var(--text); }
.bulk-options small, .bulk-people small { font-size: 11.5px; color: var(--text-muted); }

.bulk-check { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text); }

.bulk-input {
    width: 100%;
    margin-top: 9px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
    font-size: 13.5px;
}

.bulk-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }

.bulk-warn {
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid var(--status-warning, #f5a524);
    border-radius: var(--r-md);
    background: rgba(245, 165, 36, 0.10);
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text);
}


/* ==========================================================================
   Arabic Language (RTL) & i18n Styles System
   ========================================================================== */
html[dir="rtl"] {
    direction: rtl;
    text-align: right;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans Arabic', 'Cairo', 'Tajawal', sans-serif;
}

html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

/* ── Sidebar RTL ──────────────────────────────────────────────────────────── */
html[dir="rtl"] .sidebar {
    left: auto;
    right: 0;
    border-right: none;
    border-left: 1px solid var(--sidebar-border);
}

html[dir="rtl"] .main-content {
    margin-left: 0;
    margin-right: var(--sidebar-width);
}

@media (max-width: 991px) {
    html[dir="rtl"] .sidebar {
        transform: translateX(100%);
    }
    html[dir="rtl"] .sidebar.open {
        transform: translateX(0);
    }
    html[dir="rtl"] .main-content {
        margin-right: 0;
    }
}

html[dir="rtl"] .sidebar-nav-item {
    text-align: right;
    gap: 10px;
}

html[dir="rtl"] .sidebar-nav-icon {
    margin-right: 0;
    margin-left: 2px;
}

html[dir="rtl"] .sidebar-nav-tag {
    margin-left: 0;
    margin-right: auto;
}

html[dir="rtl"] .sidebar-user {
    text-align: right;
}

/* The collapse handle sits on the sidebar's inner edge, which moves with the
   sidebar.

   In Arabic the rail is on the right, so the handle belongs just inside the
   right edge -- mirroring the LTR rule, which puts it at
   `left: calc(var(--sidebar-width) - 11px)`. It was pinned to `left: 14px`
   instead: the far left of the SCREEN, detached from the rail entirely, which
   is what it looked like -- a stray button floating in the corner with the
   sidebar nowhere near it. */
html[dir="rtl"] .sidebar-collapse {
    left: auto;
    right: calc(var(--sidebar-width) - 11px);
    /* The chevron points at the rail. It is drawn pointing left, so in a
       right-hand rail it has to be flipped, and flipped back when collapsed so
       it points outward to say "this opens again". */
    transform: rotate(180deg);
}

html[dir="rtl"].sidebar-collapsed .sidebar-collapse {
    transform: rotate(0deg);
}

html[dir="rtl"] .sidebar-bottom {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

html[dir="rtl"] .sidebar-bottom-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

/* ── Top Bar & Header RTL ─────────────────────────────────────────────────── */
html[dir="rtl"] .content-top-bar-left {
    text-align: right;
}

html[dir="rtl"] .content-top-bar-right {
    margin-left: 0;
    margin-right: auto;
    flex-direction: row-reverse;
}

html[dir="rtl"] .user-menu-wrap > div {
    right: auto !important;
    left: 0 !important;
    text-align: right;
}

/* ── Dashboard & Card Layouts RTL ─────────────────────────────────────────── */
html[dir="rtl"] .result-header,
html[dir="rtl"] .pane-header,
html[dir="rtl"] .history-header {
    text-align: right;
}

html[dir="rtl"] .actions-group,
html[dir="rtl"] .history-tools {
    margin-left: 0;
    margin-right: auto;
}

html[dir="rtl"] .result-footer {
    flex-direction: row;
}

html[dir="rtl"] .history-search input {
    padding-right: 36px;
    padding-left: 12px;
    text-align: right;
}

html[dir="rtl"] .history-search svg {
    left: auto;
    right: 12px;
}

/* ── Table & Data Grids RTL ────────────────────────────────────────────────── */
html[dir="rtl"] table th,
html[dir="rtl"] table td {
    text-align: right;
}

html[dir="rtl"] .audio-cell {
    flex-direction: row;
}

html[dir="rtl"] .tag-with-meta {
    flex-direction: row;
}

/* ── Forms & Inputs RTL ───────────────────────────────────────────────────── */
html[dir="rtl"] input[type="text"],
html[dir="rtl"] input[type="search"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    text-align: right;
    direction: rtl;
}

html[dir="rtl"] .meta-form-footer,
html[dir="rtl"] .bulk-actions {
    justify-content: flex-start;
}

/* ── Buttons with Icons RTL ──────────────────────────────────────────────── */
html[dir="rtl"] .btn svg,
html[dir="rtl"] button svg {
    margin-right: 0 !important;
    margin-left: 6px !important;
}

/* ── Ask page RTL ───────────────────────────────────────────────────────── */
html[dir="rtl"] .ask-page,
html[dir="rtl"] .ask-composer,
html[dir="rtl"] .ask-modal-head,
html[dir="rtl"] .ask-modal-open,
html[dir="rtl"] .ask-thread-open,
html[dir="rtl"] .ask-privacy,
html[dir="rtl"] .ask-citations,
html[dir="rtl"] .ask-empty,
html[dir="rtl"] .ask-suggestions {
    direction: rtl;
}

html[dir="rtl"] .ask-thread-open { text-align: right; padding: 10px 12px 10px 32px; }
html[dir="rtl"] .ask-thread-card .ask-kebab { right: auto; left: 6px; }
html[dir="rtl"] .ask-thread-menu { right: auto; left: 6px; }
html[dir="rtl"] .ask-thread-menu button { text-align: right; }
html[dir="rtl"] .ask-composer { padding: 5px 14px 5px 5px; }
html[dir="rtl"] .ask-composer input { text-align: right; direction: rtl; }
html[dir="rtl"] .ask-send-btn { margin-right: 0; }
html[dir="rtl"] .ask-modal-open { text-align: right; }
html[dir="rtl"] .ask-modal-title { text-align: right; }
html[dir="rtl"] .ask-citations-label { margin-right: 0; margin-left: 2px; }
html[dir="rtl"] .ans-item { padding-left: 0; padding-right: 20px; }
html[dir="rtl"] .ans-item::before { left: auto; right: 4px; }
html[dir="rtl"] ol.ans-list > .ans-item { padding-left: 0; padding-right: 28px; }
html[dir="rtl"] ol.ans-list > .ans-item::before { left: auto; right: 0; }
html[dir="rtl"] .ans-quote { border-left: 0; border-right: 2px solid var(--brand-line); padding-left: 0; padding-right: 14px; }

/* ── Billing / Plans RTL ─────────────────────────────────────────────────── */
html[dir="rtl"] .sub-head,
html[dir="rtl"] .sub-usage-head,
html[dir="rtl"] .sub-limits > div,
html[dir="rtl"] .sub-price,
html[dir="rtl"] .sub-features li,
html[dir="rtl"] .sub-table th,
html[dir="rtl"] .sub-table td {
    direction: rtl;
}

html[dir="rtl"] .sub-usage-head { text-align: right; }
html[dir="rtl"] .sub-limits dd { text-align: left; }
html[dir="rtl"] .sub-features li { padding-left: 0; padding-right: 20px; }
html[dir="rtl"] .sub-features li::before { left: auto; right: 0; }
html[dir="rtl"] .sub-table th,
html[dir="rtl"] .sub-table td { text-align: right; }
html[dir="rtl"] .sub-badge { left: auto; right: 18px; }
html[dir="rtl"] .sub-badge.current { left: 18px; right: auto; }

/* ──────────────────────────────────────────────────────────────────────────
   RTL for the surfaces this app has and the reference did not
   --------------------------------------------------------------------------
   The block above came from the pilot and covers the shell — sidebar, top bar,
   Ask, subscription. These are the screens that only exist here: the meeting
   detail view, the history and settings tables, the transcript itself.

   Everything is written against html[dir="rtl"], so a single attribute on <html>
   flips the app and removing it puts it back. No component needs to know.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Meeting detail: the transcript and its side rail swap sides ─────────── */
html[dir="rtl"] .detail-view { direction: rtl; }
html[dir="rtl"] .detail-side { text-align: right; }
html[dir="rtl"] .detail-side .side-row { flex-direction: row-reverse; }

/* A speaker turn reads right to left, and its name chip leads on the right. */
html[dir="rtl"] .speaker-block,
html[dir="rtl"] .speaker-text { text-align: right; direction: rtl; }
html[dir="rtl"] .speaker-head { flex-direction: row-reverse; }
html[dir="rtl"] .speaker-block { border-left: none; border-right: 3px solid var(--brand); padding-left: 0; padding-right: 14px; }

/* Timestamps and the overlap badge stay beside the name, on the other side. */
html[dir="rtl"] .speaker-timestamp,
html[dir="rtl"] .overlap-indicator { margin-left: 0; margin-right: 8px; }

/* ── Tables: headers, cells and the action column all mirror ─────────────── */
html[dir="rtl"] .modern-table th,
html[dir="rtl"] .modern-table td,
html[dir="rtl"] .history-table th,
html[dir="rtl"] .history-table td,
html[dir="rtl"] .admin-table th,
html[dir="rtl"] .admin-table td { text-align: right; }
html[dir="rtl"] .modern-table th:last-child,
html[dir="rtl"] .history-table th:last-child,
html[dir="rtl"] .admin-table th:last-child { text-align: left; }

/* ── Settings: the tab rail, the admin cards, the people list ────────────── */
html[dir="rtl"] .settings-tabs,
html[dir="rtl"] .admin-nav { flex-direction: row-reverse; }
html[dir="rtl"] .admin-card,
html[dir="rtl"] .card-subtitle,
html[dir="rtl"] .version-field > span,
html[dir="rtl"] .version-field small { text-align: right; }
html[dir="rtl"] .person-row { direction: rtl; }
html[dir="rtl"] .person-actions { justify-content: flex-start; }

/* ── Meetings list and its status chips ──────────────────────────────────── */
html[dir="rtl"] .mtg-table th,
html[dir="rtl"] .mtg-table td { text-align: right; }
html[dir="rtl"] .mtg-chip,
html[dir="rtl"] .status-badge { flex-direction: row-reverse; }

/* ── Forms: labels, inputs and their help text ───────────────────────────── */
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select { text-align: right; direction: rtl; }

/* Except the ones that are never right-to-left whatever the interface is.
   An email address, a URL, a meeting link and a phone number are read left to
   right in every language, and mirroring them makes them unreadable and
   un-typeable. */
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="password"],
html[dir="rtl"] input[type="number"] { direction: ltr; text-align: left; }

/* ── Numbers, times and identifiers stay left-to-right ───────────────────── */
/* A duration, a timestamp and a version string are sequences, not sentences. */
html[dir="rtl"] .speaker-timestamp,
html[dir="rtl"] .mono,
html[dir="rtl"] code,
html[dir="rtl"] .masked-key { direction: ltr; unicode-bidi: embed; display: inline-block; }

/* ── Modals and drawers open from the other edge ─────────────────────────── */
html[dir="rtl"] .modal-tab-strip { flex-direction: row-reverse; }
html[dir="rtl"] .modal-close { left: 14px; right: auto; }

/* ── Anything that was nudged with a one-sided margin ────────────────────── */
html[dir="rtl"] .ml-auto { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .mr-auto { margin-right: 0; margin-left: auto; }

/* ── Arabic needs a little more line height to stay legible ──────────────── */
html[dir="rtl"] body,
html[dir="rtl"] .speaker-text,
html[dir="rtl"] .ai-content { line-height: 1.75; }
/* ── The language switch ─────────────────────────────────────────────────── */
.language-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: var(--r-sm, 8px);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-main);
    font-size: 0.78rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    user-select: none;
}
.language-switch:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.language-switch svg { width: 14px; height: 14px; opacity: 0.8; flex: none; }
.language-switch-code {
    font-size: 0.68rem;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--brand-soft, rgba(99, 102, 241, 0.15));
    color: var(--brand, #7C5CFF);
    font-weight: 700;
}
/* The name of a language is always written in that language, so the Arabic
   label needs the Arabic face even while the rest of the page is still English —
   which is exactly the state the button is in before it is pressed. */
.language-switch-name { font-family: 'Inter', 'Noto Sans Arabic', 'Cairo', sans-serif; }


/* ==========================================================================
   The textured night (29 September)
   --------------------------------------------------------------------------
   The landing page and the sign-in panel sit on navy under a still grain and a
   blue glow, the way Sentry's site does in purple. The app now matches:

     - the sidebar carries it in BOTH themes (it is dark in both);
     - in the dark theme the main area carries it too; the light theme's page
       stays light, as before.

   Background layers only: the grain is an SVG noise tile with its opacity
   built in, stacked with radial glows. No pseudo-element and no positioning
   is added, so nothing about the layout can move. Nothing animates.

   Quieter than the landing page's, on purpose. The first version used the
   landing's strength (grain 0.2 / 0.16, glow 0.30 / 0.22, star specks) and in
   the app, which is looked at for hours rather than seconds, it read as matte
   and patchy: bright where the glow sat, gritty everywhere else. The app keeps
   the same character at about a third of the strength, the glow is wider so
   it fades evenly, and the sidebar has no specks.
   ========================================================================== */

.sidebar {
    background-color: var(--sidebar-bg);
    background-image:
        url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
        radial-gradient(640px 520px at 20% -10%, rgba(79, 110, 247, 0.12), transparent 70%);
    background-size: 240px 240px, auto;
    background-repeat: repeat, no-repeat;
}

:root:not([data-theme="light"]) .main-content {
    background-color: var(--bg-dark);
    background-image:
        url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
        radial-gradient(1600px 700px at 55% -20%, rgba(79, 110, 247, 0.09), transparent 70%);
    background-size: 240px 240px, auto;
    background-repeat: repeat, no-repeat;
}

/* ── Moving between pages ─────────────────────────────────────────────────
   Each page is its own document, so a click used to repaint everything,
   rail included. A cross-document view transition keeps the rail and the
   top bar exactly where they are and fades only the content beside them.
   The rail is already painted from its saved copy before the new page's
   first frame (public/sidebar-boot.js), so old and new are the same. */
@view-transition {
  navigation: auto;
}
.sidebar {
  view-transition-name: amaya-sidebar;
}
.content-top-bar {
  view-transition-name: amaya-topbar;
}
::view-transition-group(amaya-sidebar),
::view-transition-group(amaya-topbar),
::view-transition-old(amaya-sidebar),
::view-transition-new(amaya-sidebar),
::view-transition-old(amaya-topbar),
::view-transition-new(amaya-topbar) {
  animation: none;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 140ms;
}
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}