/* ===========================================================================
   Chicon — design system
   Modern, flat, professional (Outlook/Gmail-straight). A single calm-indigo accent;
   gradient reserved for the brand mark only; flat shadows (no glow).
   Entry (landing / auth) = flat solid dark. App = clean light with subtle chrome.
   =========================================================================== */

:root {
    /* Spacing — 8px grid */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

    /* Brand — calm indigo, single flat accent (no violet/cyan). */
    --accent:        #4f46e5;
    --accent-hover:  #4338ca;
    --accent-2:      #6366f1;
    --accent-3:      #818cf8;
    /* Accent used as TEXT on a tinted selection (folder/msg active). Brightened in
       dark so it clears AA against the indigo-tinted selected surface. */
    --accent-text:   #4f46e5;
    /* --grad is now a SOLID accent fill: every `background: var(--grad)` renders flat. */
    --grad:          #4f46e5;
    /* --grad-vivid is reserved for the BRAND MARK ONLY — a subtle single-hue indigo duotone. */
    --grad-vivid:    linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    /* --glow is now a flat neutral shadow (no colored glow anywhere). */
    --glow:          var(--shadow-md);

    /* App surfaces — LIGHT theme. Cool neutral greys (Outlook-refined): professional,
       low-saturation, crisp. Dark overrides further down. */
    --bg-base:     #f3f4f6;
    --bg-panel:    #fafafb;
    --bg-content:  #ffffff;
    --bg-hover:    #eef0f3;
    --bg-selected: #eaecfb;
    --bg-muted:    #f1f2f5;

    /* Text — near-black primary, neutral greys (no blue cast). */
    --text-primary:   #14151a;
    --text-secondary: #4b4f59;
    --text-muted:     #6d7280;   /* WCAG AA (~4.8:1 on white, 4.4:1 on canvas) */

    /* Lines — crisp hairlines. */
    --border:        #e5e6ea;
    --border-strong: #d4d6dd;

    /* Rail (themed: light grey in light, near-black in dark). */
    --bg-rail:          #f0f2f6;
    --bg-rail-hover:    #e4e7ee;
    --text-on-rail:     #4a505c;
    --text-on-rail-dim: #6b7280;

    /* Always-dark glass context used by the landing/auth surfaces. */
    --ink:          #0a0b12;
    --ink-2:        #0e1018;
    --on-dark:      #eef0f8;
    --on-dark-dim:  #a6abbd;
    --glass:        rgba(255, 255, 255, .06);
    --glass-strong: rgba(20, 22, 34, .55);
    --glass-border: rgba(255, 255, 255, .12);

    --danger:    #ff5470;
    /* Error text on the very light --error-bg banners: the bright --danger fails AA as
       small text on a near-white tint, so error COPY uses this deeper red (~5:1 on
       --error-bg / white). --danger stays bright for fills, icons and accents. */
    --danger-text: #c4193b;
    --green:     #19c37d;
    --error-bg:  #fdecee;

    /* Geometry */
    --rail-w:    68px;
    --panel-w:   344px;
    --topbar-h:  56px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --radius-2xl: 30px;

    /* Controls — ONE height for action buttons, ONE for inputs (clean/spacious, Proton/Gmail).
       The component kit + migrations reference these so the whole app stays in lockstep. */
    --btn-h:    38px;
    --input-h:  40px;

    /* Type scale — headings/body reference these for a consistent rhythm. */
    --type-h1:   22px;
    --type-h2:   15px;
    --type-h3:   13px;
    --type-body: 14px;
    --type-sm:   12px;
    --type-xs:   11px;

    /* Overlay stacking order (low → high): menus < side panels < modals < alerts/toasts. */
    --z-menu:      100;
    --z-sidepanel: 200;
    --z-modal:     300;
    --z-alert:     400;

    /* The one accent focus ring (use everywhere a focused control needs a glow). */
    --focus-ring: 0 0 0 3px rgba(79, 70, 229, .14);

    /* Shadows — tighter, more contained (pro/enterprise, not floaty). */
    --shadow-sm: 0 1px 2px rgba(16,22,32,.05);
    --shadow-md: 0 4px 16px rgba(16,22,32,.10), 0 1px 3px rgba(16,22,32,.06);
    --shadow-lg: 0 24px 60px rgba(8,10,20,.45);

    --transition: .16s cubic-bezier(.4, 0, .2, 1);
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;

    /* Scrollbar thumb (light). Themed override in the dark block. */
    --scrollbar:       #cfd3de;
    --scrollbar-hover: #b6bbca;

    /* Hint native form controls / UA scrollbars to the active theme. */
    color-scheme: light;

    /* Max readable width on ultra-wide displays. */
    --content-max: 1680px;
}

/* ----------------------------------------------- DARK THEME OVERRIDES ----- */
[data-theme="dark"] {
    /* True deep dark — near-black canvas with crisp, low-noise elevation steps
       (Linear/Vercel-style), not a mid-grey duotone. Each surface is a clear,
       small step lighter so panes read as distinct without washing out. */
    --bg-base:     #0a0b0e;   /* app canvas / behind everything */
    --bg-panel:    #101216;   /* sidebars, lists */
    --bg-content:  #15171c;   /* main content surface */
    --bg-hover:    #1c1f25;
    --bg-selected: #1f2740;   /* subtle indigo-tinted selection */
    --bg-muted:    #16181d;

    --text-primary:   #f4f5f7;
    --text-secondary: #b2b8c2;
    --text-muted:     #828997;   /* WCAG AA (~5.1:1 on content, 5.6:1 on canvas) */

    --border:        #20232a;   /* hairline, just visible on #15171c */
    --border-strong: #2c3038;

    --bg-rail:          #070809;
    --bg-rail-hover:    rgba(255, 255, 255, .055);
    --text-on-rail:     #cdd2db;
    --text-on-rail-dim: #767d8c;

    --error-bg: rgba(255, 84, 112, .14);
    /* On the dark translucent error tint, a lighter red reads better than the deep one. */
    --danger-text: #ff8a9d;
    --accent-text: #a5b4fc;   /* indigo-300: clears AA on the dark indigo-tinted selection */

    /* Dark elevation shadows — the light --shadow-* values are nearly invisible on
       a near-black canvas, so deepen them. */
    --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
    --shadow-md: 0 6px 20px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.5);
    --shadow-lg: 0 28px 70px rgba(0,0,0,.7);

    /* Scrollbar thumb (dark). */
    --scrollbar:       #2a2e37;
    --scrollbar-hover: #3a3f4a;

    color-scheme: dark;
}

* { box-sizing: border-box; }

/* ----------------------------------------------------- accessibility ----- */
/* Visible keyboard focus everywhere. Pointer focus stays clean via :focus-visible.
   Components already drawing their own focus rings (inputs with box-shadow) keep
   them; this is the global baseline for buttons / links / list rows. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
/* Inputs/selects that show an accent border+ring on focus don't also need the outline. */
.search input:focus-visible,
.field input:focus-visible,
.auth-card input:focus-visible,
.compose-text:focus-visible,
.rule-val:focus-visible,
.select:focus-visible,
.pgp-pass:focus-visible,
.cmdk-input:focus-visible { outline: none; }

/* Skip-to-content link — visually hidden until focused. */
.skip-link {
    position: fixed; top: var(--sp-2); left: var(--sp-2); z-index: 1000;
    transform: translateY(-150%);
    padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-sm);
    background: var(--accent); color: #fff; font-weight: 600; font-size: 13px;
    box-shadow: var(--shadow-md); transition: transform var(--transition);
}
.skip-link:focus { transform: translateY(0); }

/* Respect reduced-motion: kill splash breathing, shimmer and incidental enter
   animations; keep instantaneous state changes usable. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .auth-shell::before { animation: none; }
}

html, body {
    margin: 0; height: 100%;
    font-family: var(--font);
    font-size: 14px;
    color: var(--text-primary);
    background: var(--bg-base);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

#app { height: 100%; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
a { color: var(--accent); text-decoration: none; }
button { font-family: inherit; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); background-clip: content-box; }
/* Firefox */
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; }

/* ---------------------------------------------------------- buttons --- */
/* Flat, solid primary — Fluent / Outlook-style. The landing CTA keeps the
   gradient + glow via the .lg override below. */
.btn-primary {
    height: var(--btn-h); padding: 0 var(--sp-4);
    border: none; border-radius: var(--radius-sm);
    background: var(--accent); color: #fff; font-size: 13px; font-weight: 600;
    cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
    box-shadow: var(--shadow-sm);
    transition: background var(--transition), box-shadow var(--transition);
}
.btn-primary:hover { background: var(--accent-hover); box-shadow: var(--shadow-md); }
.btn-primary:active { box-shadow: none; }
.btn-primary:disabled { opacity: .55; cursor: default; box-shadow: none; }
.btn-primary svg { width: 16px; height: 16px; }

.btn-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 38px; padding: 0 var(--sp-4); font-weight: 600; font-size: 13px;
    border: 1px solid var(--glass-border); border-radius: var(--radius-md);
    background: var(--glass); color: #fff; cursor: pointer; text-decoration: none;
    backdrop-filter: blur(12px); transition: background var(--transition), transform var(--transition);
}
.btn-ghost:hover { background: rgba(255,255,255,.14); transform: translateY(-1px); }

.btn-primary.lg, .btn-ghost.lg { height: 52px; padding: 0 var(--sp-8); font-size: 16px; border-radius: var(--radius-lg); }
/* Landing CTA — keep the gradient + glow for "pop". */
.btn-primary.lg { background: var(--accent); box-shadow: var(--shadow-md); transition: background var(--transition), box-shadow var(--transition); }
.btn-primary.lg:hover { background: var(--accent-hover); box-shadow: var(--shadow-md); }

/* =============================================================== shell === */
.app-shell { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }
.app-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.app-body { flex: 1; display: flex; min-height: 0; overflow: hidden; }

/* =============================================================== rail === */
/* Left vertical icon rail (Teams / JetBrains style): primary navigation, settings
   and the account live here. Collapses to icon-only (--rail-w) or expands to a
   labelled column (--rail-w-expanded). On phones it becomes a bottom tab bar. */
:root { --rail-w-expanded: 210px; }

.rail {
    flex: 0 0 var(--rail-w); width: var(--rail-w);
    display: flex; flex-direction: column; align-items: stretch;
    background: var(--bg-rail);
    border-right: 1px solid var(--border);
    padding: var(--sp-2) var(--sp-2) var(--sp-3);
    gap: var(--sp-1); z-index: 11;
    /* Clear the notch / rounded corners when standalone with viewport-fit=cover. */
    padding-left: calc(var(--sp-2) + env(safe-area-inset-left));
    transition: width var(--transition), flex-basis var(--transition);
}
.app-shell.rail-expanded .rail { flex-basis: var(--rail-w-expanded); width: var(--rail-w-expanded); }

/* Rail top = the MENU/BURGER toggle only (the brand moved to the content topbar), so the
   top-left corner is the menu affordance people instinctively reach for (Teams-style). */
.rail-top {
    display: flex; align-items: center; justify-content: center;
    height: 44px; flex: 0 0 auto; margin-bottom: var(--sp-1);
}
.app-shell.rail-expanded .rail-top { justify-content: flex-start; padding-left: 4px; }

.rail-burger {
    flex: 0 0 auto; width: 40px; height: 40px;
    border: none; background: transparent; border-radius: var(--radius-md);
    color: var(--text-on-rail); display: grid; place-items: center; cursor: pointer;
    transition: var(--transition);
}
.rail-burger:hover { background: var(--bg-rail-hover); }
.rail-burger svg { width: 22px; height: 22px; }

.rail-nav { display: flex; flex-direction: column; gap: 2px; }
.rail-spacer { flex: 1 1 auto; }

/* Rail buttons: icon-over-label when collapsed, icon-beside-label when expanded. */
.rail-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; width: 100%; min-height: 52px; padding: var(--sp-2) 2px;
    border: none; background: transparent; border-radius: var(--radius-md);
    color: var(--text-on-rail-dim); cursor: pointer; font-family: inherit;
    position: relative; transition: var(--transition);
}
.rail-btn:hover { background: var(--bg-rail-hover); color: var(--text-on-rail); }
.rail-btn svg { width: 22px; height: 22px; flex: 0 0 auto; }
/* Collapsed rail = icons only. The text label appears only when the rail is expanded
   (or on the phone bottom bar, re-shown in the responsive block). Tooltips (title=)
   still surface the name when collapsed. */
.rail-label { font-size: 11px; font-weight: 600; line-height: 1.1; white-space: nowrap; display: none; }
.app-shell.rail-expanded .rail-label { display: inline; }

/* Active section: accent tint + a vertical accent bar on the leading edge. */
.rail-btn.active { color: var(--accent-text); background: var(--bg-selected); }
.rail-btn.active::before {
    content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
    border-radius: 0 2px 2px 0; background: var(--accent);
}
.rail-btn.active svg { color: var(--accent); }

/* Expanded layout: horizontal rows with labels beside the icon. */
.app-shell.rail-expanded .rail-btn {
    flex-direction: row; justify-content: flex-start; gap: var(--sp-3);
    min-height: 42px; padding: var(--sp-2) var(--sp-3);
}
.app-shell.rail-expanded .rail-label { font-size: 13.5px; }

/* Account button at the bottom of the rail. */
.rail-account { position: relative; margin-top: var(--sp-1); }
.rail-account-btn {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    width: 100%; padding: var(--sp-2) 2px; border: none; background: transparent;
    border-radius: var(--radius-md); color: var(--text-on-rail); cursor: pointer;
    font-family: inherit; transition: var(--transition);
}
.rail-account-btn:hover { background: var(--bg-rail-hover); }
.rail-account-btn .avatar { width: 30px; height: 30px; font-size: 12px; background: var(--grad); }
.rail-account-name {
    font-size: 11px; font-weight: 600; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: none;
}
.app-shell.rail-expanded .rail-account-btn { flex-direction: row; justify-content: flex-start; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); }
.app-shell.rail-expanded .rail-account-name { display: inline; }

/* Account dropdown popped UP from the rail (above the avatar, anchored left).
   Compound selector (.user-dropdown.rail-dropdown) so these win over the base
   .user-dropdown { right:0; top:... } regardless of source order. */
.user-dropdown.rail-dropdown {
    right: auto; left: 0; top: auto; bottom: calc(100% + 8px);
}

/* topbar — solid, subtly elevated chrome */
.topbar {
    height: var(--topbar-h); flex-shrink: 0;
    background: var(--bg-content);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 0 rgba(16,22,32,.02);
    display: flex; align-items: center; gap: var(--sp-5);
    /* Pad past the notch / rounded corners when running standalone with viewport-fit=cover. */
    padding: 0 calc(var(--sp-5) + env(safe-area-inset-right)) 0 calc(var(--sp-5) + env(safe-area-inset-left));
    z-index: 10;
}
/* Brand (mark + wordmark) now lives at the top-left of the content header; the rail's
   top-left is the menu toggle. The section name follows after a hairline divider. */
.topbar-lead { display: flex; align-items: center; gap: var(--sp-3); flex: 0 0 auto; min-width: 0; }
.topbar-brand-mark {
    flex: 0 0 auto; width: 28px; height: 28px; border-radius: 7px;
    background: var(--grad-vivid); color: #fff; font-size: 15px; font-weight: 800;
    display: grid; place-items: center;
}
.topbar-brand-word {
    font-weight: 700; font-size: 16px; letter-spacing: -0.02em;
    color: var(--text-primary); white-space: nowrap;
}
.topbar-section {
    font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
    color: var(--text-secondary); white-space: nowrap;
    padding-left: var(--sp-3); border-left: 1px solid var(--border);
}
/* Phones: keep just the mark + section to save header width. */
@media (max-width: 560px) { .topbar-brand-word { display: none; } }
.search { flex: 1; max-width: 560px; margin: 0 auto; position: relative; display: flex; align-items: center; }
.search svg { position: absolute; left: 12px; width: 15px; height: 15px; color: var(--text-muted); }
.search input {
    width: 100%; height: var(--input-h); padding: 0 36px 0 34px;
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-muted);
    font-size: 13.5px; outline: none; transition: var(--transition);
    color: var(--text-primary);
}
.search input::placeholder { color: var(--text-muted); }
/* We render our own clear (×) button, so hide the UA one that type="search" adds. */
.search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search input:hover { border-color: var(--border-strong); }
.search input:focus { border-color: var(--accent); background: var(--bg-content); box-shadow: var(--focus-ring); }
.topbar-actions { display: flex; align-items: center; gap: var(--sp-2); min-width: 120px; justify-content: flex-end; }
.icon-btn {
    width: 38px; height: 38px; border: none; background: transparent; border-radius: var(--radius-md);
    color: var(--text-secondary); display: grid; place-items: center; cursor: pointer; transition: var(--transition);
}
.icon-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn.danger { color: var(--danger); }
.icon-btn.danger:hover { background: var(--error-bg); color: var(--danger); }
.topbar-user { font-size: 13px; color: var(--text-secondary); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }

/* ----------------------------------------------------------- panels --- */
.panel { width: var(--panel-w); flex-shrink: 0; background: var(--bg-panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; }
.panel-head { height: 52px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--sp-5); border-bottom: 1px solid var(--border); }
.panel-head h2 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.panel-scroll { flex: 1; overflow-y: auto; min-height: 0; }

/* Full-width content surface (Calendar/Files/Settings) — same chrome family as .panel
   (reuses .panel-head / .panel-scroll), but stretches to fill instead of a fixed sidebar width.
   Migration target to replace the divergent .view-stub / .set containers. */
.full-pane { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--bg-content); }

.mail-view { flex: 1; display: flex; min-width: 0; }
/* Settings two-pane wrapper (section nav + content). Side-by-side on desktop,
   restacked on phones in the responsive block below. */
.settings-page { flex: 1; display: flex; min-width: 0; }
.folder-pane { width: 224px; flex-shrink: 0; background: var(--bg-panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; }
.compose-wrap { padding: var(--sp-4); }
.compose-wrap .btn-primary { width: 100%; justify-content: center; height: 42px; }

.folders { padding: var(--sp-3); }
.folder { position: relative; display: flex; align-items: center; gap: var(--sp-3); padding: 8px var(--sp-3); border-radius: var(--radius-sm); color: var(--text-secondary); cursor: pointer; font-size: 13px; font-weight: 500; transition: var(--transition); }
.folder:hover { background: var(--bg-hover); }
.folder.active { background: var(--bg-selected); color: var(--accent-text); font-weight: 600; }
.folder.active::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 0 2px 2px 0; background: var(--accent); }
.folder svg { width: 16px; height: 16px; flex-shrink: 0; }
.folder .folder-icon { color: var(--text-muted); }
.folder.active .folder-icon { color: var(--accent); }
/* G2: the normalized label takes the remaining width; the star + count sit on the right. */
.folder .folder-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
.folder .count { font-size: 11.5px; color: var(--text-muted); font-weight: 600; flex: 0 0 auto; }
.folder.active .count { color: var(--accent-text); }

/* G1: favorite star — hidden until the row is hovered/focused, always visible once pinned. */
.folder .fav-star { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 22px; height: 22px; padding: 0; margin: 0 -4px 0 0; background: none; border: none; border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer; opacity: 0; transition: var(--transition); }
.folder .fav-star svg { width: 14px; height: 14px; }
.folder:hover .fav-star, .folder:focus-within .fav-star, .folder .fav-star.on, .folder .fav-star:focus-visible { opacity: 1; }
.folder .fav-star:hover { background: var(--bg-hover); color: var(--text-primary); }
.folder .fav-star.on { color: var(--accent); }

/* G1: pinned "Favorites" group — echoes .acct-group; the header carries a small star identity. */
.fav-group .acct-group-head .fav-group-icon { width: 13px; height: 13px; flex: 0 0 auto; color: var(--accent); }
/* Compact origin cue: a small account-initial badge shown ONLY when the same folder label is
   favorited from 2+ mailboxes (full address on hover). Keeps the favorite row uncrowded. [G5] */
.fav-group .fav-acct-chip { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 16px; height: 16px; border-radius: var(--radius-pill, 999px); background: var(--bg-muted); color: var(--text-muted); font-size: 10px; font-weight: 600; line-height: 1; }
.folder-section { padding: var(--sp-4) var(--sp-3) var(--sp-1); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }

/* Fixed, uniform row height: a row's dimensions must NEVER change between read/unread/active/
   selected states (only color/weight do), so clicking a message can't shift the list. box-sizing
   keeps the border inside the height; align-content centers the two text rows in the fixed box. */
.msg { display: grid; grid-template-columns: auto auto 1fr auto; grid-template-rows: auto auto; gap: 2px var(--sp-3); height: 62px; box-sizing: border-box; align-content: center; padding: 0 var(--sp-5); border-bottom: 1px solid var(--border); cursor: pointer; transition: background var(--transition); position: relative; overflow: hidden; }
.msg:hover { background: var(--bg-hover); }
.msg.active { background: var(--bg-selected); }
.msg.active::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 0 2px 2px 0; background: var(--accent); }
.msg-dot { grid-column: 1; grid-row: 1 / span 2; width: 8px; height: 8px; border-radius: 50%; align-self: center; background: transparent; }
.msg.unread .msg-dot { background: var(--accent); }
.msg-avatar { grid-column: 2; grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 50%; align-self: center; display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 14px; user-select: none; }
.msg-from { grid-column: 3; grid-row: 1; font-weight: 500; font-size: 13px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg.unread .msg-from { font-weight: 700; color: var(--text-primary); }
.msg-time { grid-column: 4; grid-row: 1; font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.msg-subject { grid-column: 3 / span 2; grid-row: 2; font-size: 13px; line-height: 1.35; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-clip { width: 12px; height: 12px; color: var(--text-muted); vertical-align: -2px; margin-right: 4px; }
.msg.unread .msg-subject { font-weight: 600; color: var(--text-primary); }

/* reader */
.reader { flex: 1; background: var(--bg-content); display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.reader-head { padding: var(--sp-8) var(--sp-10) var(--sp-5); border-bottom: 1px solid var(--border); }
.reader-subject { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: var(--sp-5); display: flex; align-items: center; gap: var(--sp-3); }
.reader-meta { display: flex; align-items: center; gap: var(--sp-3); }
.avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 16px; background: var(--grad); }
.reader-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.reader-from { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-to { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-date { margin-left: auto; align-self: flex-start; flex-shrink: 0; padding-left: var(--sp-3); font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.reader-body { flex: 1; overflow-y: auto; padding: var(--sp-8) var(--sp-10); line-height: 1.7; color: var(--text-secondary); font-size: 15px; }
.reader-body p { margin: 0 0 var(--sp-4); }
/* On ultra-wide displays cap the reading measure so lines don't stretch to an
   unreadable length; the padding keeps it off the gutter on normal screens. */
@media (min-width: 1500px) {
    .reader-body > * { max-width: 920px; }
}
.kv { display: grid; grid-template-columns: 130px 1fr; gap: var(--sp-2) var(--sp-4); margin: 0 0 var(--sp-6); }
.kv dt { color: var(--text-muted); font-size: 13px; }
.kv dd { margin: 0; font-weight: 600; color: var(--text-primary); }

/* connected-account rows (settings) */
.acct-list { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-4) 0 var(--sp-5); }
.acct-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-content); }
.acct-meta { min-width: 0; flex: 1; }
.acct-name { font-weight: 600; font-size: 13px; }
.acct-sub { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar.sm { width: 34px; height: 34px; font-size: 13px; }

/* light-context forms (settings) */
.form-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-5); background: var(--bg-panel); margin-top: var(--sp-3); animation: card-in .22s ease-out; }
@keyframes card-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.acct-row { animation: row-in .2s ease-out; }
@keyframes row-in { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: translateY(0); } }
.form-title { font-size: 14px; font-weight: 700; margin: 0 0 var(--sp-3); color: var(--text-primary); }
.provider-hint {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--accent); text-decoration: none;
    align-self: flex-start; padding: 2px 0;
    transition: color var(--transition);
}
.provider-hint:hover { color: var(--accent-hover); text-decoration: underline; }
.provider-hint svg { width: 11px; height: 11px; }
.provider-hint-text { font-size: 11px; color: var(--text-muted); margin: 0; }
.oauth-connect { display: inline-flex; align-items: center; gap: var(--sp-3); }
.oauth-ok { font-size: 12px; color: var(--green); font-weight: 600; }

/* SSO-first provider chooser */
.provider-tiles { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-3) 0; }
.provider-tile {
    display: flex; flex-direction: column; gap: 2px;
    text-align: left; padding: var(--sp-3) var(--sp-4);
    background: var(--bg-content); border: 1px solid var(--border);
    border-radius: var(--radius-md); cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
.provider-tile:hover { border-color: var(--accent); background: var(--bg-hover); }
.provider-tile-title { font-weight: 600; color: var(--text-primary); }
.provider-tile-sub { font-size: 12px; color: var(--text-muted); }
.form-grid { display: flex; flex-direction: column; gap: var(--sp-3); }
.field { display: flex; flex-direction: column; gap: 5px; }
.field > span { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.field input {
    height: var(--input-h); padding: 0 var(--sp-3); border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm); font-size: 14px; outline: none;
    background: var(--bg-content); color: var(--text-primary); transition: var(--transition);
}
.field input:hover { border-color: var(--text-muted); }
.field input:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }
.field-row { display: flex; gap: var(--sp-3); }
.field-row .field { flex: 1; }
.field.port { flex: 0 0 92px; }
.check { display: flex; align-items: center; gap: var(--sp-2); font-size: 13px; color: var(--text-secondary); }
.form-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-4); }
.form-error { background: var(--error-bg); color: var(--danger-text); border: 1px solid rgba(255,84,112,.28); border-radius: var(--radius-md); padding: var(--sp-2) var(--sp-3); font-size: 13px; margin-top: var(--sp-3); }
/* Inline load-failure banner used by Calendar/Contacts (pages add their own margin). */
.banner-error { background: var(--error-bg); color: var(--danger-text); border: 1px solid rgba(255,84,112,.28); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4); font-size: 13px; }

/* ---- component kit: unified alert + chip (migration targets) ---- */
/* One alert primitive (inline or banner). .form-error/.auth-error/.banner-error stay as aliases
   until each surface migrates to <Alert>. */
.alert { border: 1px solid transparent; border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4); font-size: var(--type-h3); line-height: 1.45; }
.alert-error   { background: var(--error-bg); color: var(--danger-text); border-color: rgba(255,84,112,.28); }
.alert-success { background: rgba(25,195,125,.12); color: var(--green); border-color: rgba(25,195,125,.30); }
.alert-info    { background: var(--bg-muted); color: var(--text-secondary); border-color: var(--border); }

/* One chip/badge primitive. Modifiers replace .acct-chip/.all-inboxes-badge/.pill/.attach-chip over time. */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: var(--type-xs); font-weight: 600; background: var(--bg-muted); color: var(--text-secondary); white-space: nowrap; }
.chip-accent  { background: var(--accent); color: #fff; }
.chip-success { background: rgba(25,195,125,.14); color: var(--green); }
.chip .chip-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }

/* Settings: a readable, centered content column instead of full-bleed stretch across
   the whole detail pane. Section intro paragraphs read as muted descriptions. */
.settings-content { max-width: 660px; margin: 0 auto; }
.settings-content > p { font-size: 13.5px; line-height: 1.6; color: var(--text-muted); margin: 0 0 var(--sp-5); }
.settings-content > p:first-child { margin-top: 0; }
.btn-secondary {
    height: var(--btn-h); padding: 0 var(--sp-4); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    background: var(--bg-content); color: var(--text-secondary); font-weight: 600; font-size: 13px; cursor: pointer; transition: var(--transition);
}
.btn-secondary:hover { background: var(--bg-hover); }
/* Compact button for inline/row contexts (in-place rename/create, dense toolbars). */
.btn-sm { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 var(--sp-3); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-content); color: var(--text-secondary); font-size: var(--type-sm); font-weight: 600; cursor: pointer; transition: var(--transition); }
.btn-sm:hover { background: var(--bg-hover); }
.btn-sm.primary { background: var(--accent); color: #fff; border-color: transparent; }
.btn-sm.primary:hover { background: var(--accent-hover); }
.btn-sm svg { width: 14px; height: 14px; }

/* mail folder pane — account groups */
.pane-empty { padding: var(--sp-5); text-align: center; color: var(--text-muted); display: flex; flex-direction: column; gap: var(--sp-4); align-items: center; }
.acct-group { margin-bottom: var(--sp-2); padding: 0 var(--sp-2); }
.acct-group-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-2) var(--sp-1); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.acct-group-head > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-group-head .chev { width: 13px; height: 13px; flex: 0 0 auto; color: var(--text-muted); transition: transform var(--transition); }
.acct-group-head .chev.open { transform: rotate(90deg); }
.acct-group-head.clickable { cursor: pointer; border-radius: var(--radius-sm); transition: var(--transition); }
.acct-group-head.clickable:hover { background: var(--bg-hover); }
.acct-group-head.on { color: var(--accent); }
/* Persistent "this mailbox's sign-in expired" badge — stays visible while you browse other
   mailboxes (it doesn't clear on navigation), and clicks straight through to reconnect. */
.acct-reauth { margin-left: auto; flex: 0 0 auto; padding: 2px 8px; border: 0; border-radius: 999px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; line-height: 1.5; cursor: pointer; transition: var(--transition); }
.acct-reauth:hover { filter: brightness(1.06); }

/* ---- Graph view (correspondence graph) ---- */
.graph-view { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.graph-head { display: flex; align-items: baseline; gap: 12px; }
.graph-title { font-size: 15px; font-weight: 700; margin: 0; }
.graph-sub { font-size: 12px; color: var(--text-muted); }
.graph-refresh { margin-left: auto; }
.graph-canvas { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: var(--sp-3); overflow: hidden; }
.graph-svg { width: 100%; height: 100%; }
.graph-msg { display: inline-flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 14px; }
.graph-node circle { transition: r var(--transition); cursor: default; }
.graph-label { font-size: 11px; fill: var(--text-secondary); font-family: var(--font); pointer-events: none; }
.folder.muted { color: var(--text-muted); cursor: default; display: flex; align-items: center; }

/* Folder-tree load failure (timeout / dead token): a message + a retry/reconnect affordance, so the
   tree never sits on a perpetual "Loading folders…" spinner. */
.folder-error { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); }
.folder-error-msg { color: var(--text-muted); font-size: 12px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; }
.folder-retry { align-self: flex-start; font-size: 12px; font-weight: 600; color: var(--accent); background: none; border: none; padding: 2px 0; cursor: pointer; }
.folder-retry:hover { text-decoration: underline; }

/* F1: conversation threading — the panel-head toggle + the grouped list rows. Reuses the .msg row
   geometry; a thread head carries a chevron + count badge, children are indented. */
.thread-toggle { margin-left: var(--sp-2); display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; font-size: 12px; font-weight: 600; color: var(--text-muted); background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition); }
.thread-toggle svg { width: 14px; height: 14px; }
.thread-toggle:hover { color: var(--text-secondary); border-color: var(--border-strong); }
.thread-toggle.on { color: var(--accent); border-color: var(--accent); background: rgba(79, 70, 229,.08); }
.thread-chev { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: none; background: none; color: var(--text-muted); cursor: pointer; flex: 0 0 auto; }
.thread-chev svg { width: 14px; height: 14px; transition: transform var(--transition); }
.thread-chev.open svg { transform: rotate(90deg); }
.thread-count { flex: 0 0 auto; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--text-secondary); background: var(--surface-2, rgba(127,127,127,.14)); border-radius: 9px; }
.msg.thread-child { padding-left: var(--sp-8); background: var(--surface-sunken, rgba(127,127,127,.04)); }

/* compose */
.compose-body { flex: 1; overflow-y: auto; padding: var(--sp-5) var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-3); }
.compose-text { min-height: 240px; resize: vertical; padding: var(--sp-3); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-family: inherit; font-size: 14px; outline: none; transition: var(--transition); }
.compose-text:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79, 70, 229,.12); }
.compose-ok { color: var(--green); font-size: 13px; font-weight: 600; }

/* ---- compose: end-to-end encryption bar --------------------------------- */
.enc-bar {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border);
    border-radius: var(--radius-sm); background: var(--bg-muted);
    transition: var(--transition);
}
.enc-bar.on { border-color: var(--accent); background: var(--bg-selected); }
.enc-lock { width: 18px; height: 18px; flex: 0 0 auto; color: var(--text-muted); }
.enc-bar.on .enc-lock { color: var(--accent); }
.enc-text { display: flex; flex-direction: column; min-width: 0; }
.enc-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.enc-sub { font-size: 11.5px; color: var(--text-muted); }
.enc-bar.on .enc-sub { color: var(--accent); }
/* toggle switch (reuses the rule-switch pattern) */
.enc-toggle { position: relative; display: inline-flex; flex: 0 0 auto; width: 38px; height: 22px; cursor: pointer; }
.enc-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.enc-switch { position: absolute; inset: 0; border-radius: 999px; background: var(--border-strong); transition: var(--transition); }
.enc-switch::before { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: var(--transition); box-shadow: var(--shadow-sm); }
.enc-toggle input:checked + .enc-switch { background: var(--accent); }
.enc-toggle input:checked + .enc-switch::before { transform: translateX(16px); }
.enc-toggle input:disabled + .enc-switch { opacity: .5; cursor: default; }

/* ---- reader: PGP decrypt card + decrypted banner ------------------------ */
.pgp-card {
    margin: var(--sp-2) 0 var(--sp-5); padding: var(--sp-5);
    border: 1px solid var(--border-strong); border-radius: var(--radius-md);
    background: var(--bg-muted); max-width: 520px;
}
.pgp-card-head { display: flex; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.pgp-card-head svg { width: 28px; height: 28px; flex: 0 0 auto; color: var(--accent); }
.pgp-card-title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.pgp-card-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.pgp-unlock { display: flex; gap: var(--sp-2); }
.pgp-pass {
    flex: 1; height: 36px; padding: 0 var(--sp-3); border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm); font-size: 14px; outline: none;
    background: var(--bg-content); color: var(--text-primary); transition: var(--transition);
}
.pgp-pass:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }
.pgp-banner {
    display: flex; align-items: center; gap: var(--sp-2);
    margin: 0 0 var(--sp-4); padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm); background: rgba(25,195,125,.10);
    color: var(--green); font-size: 12.5px; font-weight: 600;
}
.pgp-banner svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* ------------------------------------------- password field with eye toggle ----- */
.pwd-field { position: relative; display: block; }
.pwd-field > input { width: 100%; padding-right: 42px; }
.pwd-toggle {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 30px; height: 30px; border: none; background: transparent;
    color: var(--text-muted); cursor: pointer; border-radius: var(--radius-sm);
    display: grid; place-items: center; padding: 0;
    transition: var(--transition);
}
.pwd-toggle:hover { color: var(--text-primary); background: var(--bg-hover); }
.pwd-toggle svg { width: 16px; height: 16px; }
/* On the dark glass auth card the toggle is light-on-dark. */
.auth-card .pwd-toggle { color: rgba(255,255,255,.55); }
.auth-card .pwd-toggle:hover { color: #fff; background: rgba(255,255,255,.10); }
/* Inline "Caps Lock is on" warning that appears below the field while typing. */
.pwd-caps {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--danger-text, var(--danger));
}
.pwd-caps svg { width: 13px; height: 13px; }
.auth-card .pwd-caps { color: #ffb3bf; }

/* ------------------------------------------- spinner (CSS-only) ----- */
/* Lives on the compositor, so it keeps spinning even when WASM blocks on Argon2. */
.spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin .8s linear infinite;
    vertical-align: -2px;
    margin-right: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------- skeleton loading rows ----- */
.skel-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--border); }
.skel-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sk { background: linear-gradient(90deg, var(--bg-hover) 25%, var(--bg-muted) 37%, var(--bg-hover) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: 6px; }
.sk-avatar { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; }
.sk-line { height: 10px; }
.sk-line.short { width: 42%; height: 9px; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ------------------------------------------------ attachment chips ----- */
.attach-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-3) var(--sp-10); border-bottom: 1px solid var(--border); }
.attach-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 260px; padding: 5px 10px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--bg-muted); font-size: 12px; color: var(--text-secondary); cursor: pointer; transition: border-color .12s ease, color .12s ease, background .12s ease; }
.attach-chip:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: var(--bg-surface); }
.attach-chip:hover:not(:disabled) svg { color: var(--accent); }
.attach-chip:active:not(:disabled) { transform: translateY(1px); }
.attach-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.attach-chip:disabled { cursor: default; opacity: .65; }
.attach-chip svg { width: 13px; height: 13px; flex: 0 0 auto; color: var(--text-muted); }
.attach-chip svg.spin { animation: spin .8s linear infinite; }
.attach-chip .attach-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-chip .attach-size { flex: 0 0 auto; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------ undo toast ----- */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 200; display: flex; align-items: center; gap: var(--sp-4); padding: 10px 12px 10px 18px; border-radius: 999px; background: #1b1e27; color: #eef0f8; border: 1px solid rgba(255,255,255,.12); box-shadow: var(--shadow-md); font-size: 13px; animation: toast-in .2s ease-out; }
.toast-undo { border: none; background: transparent; color: var(--accent-3); font-weight: 700; font-size: 13px; cursor: pointer; padding: 4px 10px; border-radius: 999px; }
.toast-undo:hover { background: rgba(255,255,255,.08); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ------------------------------------------- user menu (top-right) ----- */
.user-menu { position: relative; }
.user-trigger {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: 4px 10px 4px 4px;
    background: transparent; border: 1px solid transparent;
    border-radius: 999px; cursor: pointer; color: var(--text-primary);
    transition: var(--transition); font-family: inherit;
}
.user-trigger:hover { background: var(--bg-hover); border-color: var(--border); }
.user-trigger .avatar { width: 30px; height: 30px; font-size: 12px; background: var(--grad); }
.user-trigger .name { font-size: 13px; font-weight: 600; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-trigger .chev { width: 14px; height: 14px; color: var(--text-muted); }

.user-backdrop { position: fixed; inset: 0; background: transparent; z-index: 20; }
.user-dropdown {
    position: absolute; right: 0; top: calc(100% + 8px);
    min-width: 280px;
    background: var(--bg-content);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--sp-2);
    z-index: 30;
}
.user-header { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); }
.user-header .avatar { width: 40px; height: 40px; font-size: 16px; background: var(--grad); flex-shrink: 0; }
/* min-width:0 lets the flex child shrink so long usernames/emails truncate
   instead of forcing the dropdown wider than the screen on phones. */
.user-header > div { min-width: 0; }
.user-header .name { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-header .sub { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Email row doubles as a one-tap "copy email" affordance. Looks like the static
   sub text until hovered, then reveals a copy icon; flashes a green check on success. */
.sub-copy {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
    border: none; background: transparent; padding: 2px 6px; margin-left: -6px;
    border-radius: var(--radius-sm); cursor: pointer; font: inherit;
    transition: var(--transition);
}
.sub-copy .sub-copy-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-copy:hover { background: var(--bg-hover); color: var(--text-secondary); }
.sub-copy-icon { width: 13px; height: 13px; flex: 0 0 auto; opacity: 0; transition: opacity var(--transition); }
.sub-copy:hover .sub-copy-icon { opacity: .7; }
/* The success check stays visible (and green) regardless of hover. */
.sub-copy[title="Copied!"] .sub-copy-icon,
.sub-copy[aria-label="Email address copied"] .sub-copy-icon { opacity: 1; color: var(--green); }
.menu-divider { height: 1px; background: var(--border); margin: 4px 0; }
.menu-item {
    display: flex; align-items: center; gap: var(--sp-3); width: 100%;
    padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-md);
    background: transparent; border: none; cursor: pointer;
    color: var(--text-primary); font: inherit; font-size: 13px; font-weight: 500;
    text-align: left; transition: var(--transition);
}
.menu-item:hover { background: var(--bg-hover); }
.menu-item svg { width: 16px; height: 16px; color: var(--text-secondary); flex-shrink: 0; }
/* The label is small text, so use the AA-contrast --danger-text (bright --danger
   on the panel bg fails ~2.7:1). The icon stays bright --danger as a non-text accent. */
.menu-item.danger { color: var(--danger-text); }
.menu-item.danger svg { color: var(--danger); }
/* Destructive item gets the danger-tinted hover used by every other .danger control
   (icon-btn / ctx-item / tool-btn), not the neutral grey from .menu-item:hover. */
.menu-item.danger:hover { background: var(--error-bg); color: var(--danger-text); }

/* Keyboard key cap — a small, tasteful <kbd> used in shortcut hints (palette footer,
   tooltips, empty states). Uses theme tokens so it reads in both light and dark. */
kbd, .kbd {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    font-family: var(--font); font-size: 11px; font-weight: 600; line-height: 1;
    color: var(--text-secondary); background: var(--bg-muted);
    border: 1px solid var(--border-strong); border-bottom-width: 2px;
    border-radius: 5px; white-space: nowrap;
}

/* Shortcut hint inside an account-menu row: pushed to the right, rendered as quiet
   grey text (native-app-menu style) rather than a heavy key cap. */
.menu-kbd {
    margin-left: auto;
    border: none; background: transparent; padding: 0;
    min-width: 0; height: auto;
    color: var(--text-muted); font-size: 11px; font-weight: 600; letter-spacing: .02em;
}

.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.pill-enc { background: rgba(25,195,125,.12); color: var(--green); }
.pill svg { width: 12px; height: 12px; }

.empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); color: var(--text-muted); text-align: center; padding: var(--sp-8); }
.empty svg { width: 52px; height: 52px; opacity: .4; }
.empty h3 { color: var(--text-secondary); font-weight: 600; }

/* ------------------------------------------------ mail actions / menus -- */
/* Inline "Clear search" beside the folder title. */

/* Hover-reveal quick actions on a message row; they sit over the row's right edge. */
/* Swipe-to-act reveal layers are a TOUCH affordance only; the (pointer: coarse) block lays them
   out as backdrops. Hide on desktop — otherwise the bare inline <svg> renders at its 300×150
   default (the "huge trash icon"). */
.swipe-back { display: none; }

.msg-actions { position: absolute; right: var(--sp-2); top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 4px; padding-left: var(--sp-6); background: linear-gradient(90deg, transparent, var(--bg-hover) 30%); opacity: 0; pointer-events: none; transition: opacity var(--transition); }
.msg:hover .msg-actions, .msg.busy .msg-actions { opacity: 1; pointer-events: auto; }
.msg.active .msg-actions { background: linear-gradient(90deg, transparent, var(--bg-selected) 30%); }
/* Flat, quiet icon buttons — no chrome at rest, a soft rounded tint on hover (Apple Mail / Outlook). */
.msg-act { width: 30px; height: 30px; border: none; background: transparent; color: var(--text-muted); border-radius: var(--radius-md); display: grid; place-items: center; cursor: pointer; transition: background var(--transition), color var(--transition); }
.msg-act:hover { background: var(--bg-content); color: var(--text-primary); }
.msg-act.danger:hover { background: var(--error-bg); color: var(--danger); }
.msg-act svg { width: 17px; height: 17px; stroke-width: 1.9; }
.msg-actions .spinner { margin: 0; border-color: rgba(0,0,0,.18); border-right-color: transparent; }
.msg.busy { opacity: .6; }

/* Reader action toolbar (archive / unread / delete) above the message header. */
.reader-toolbar { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-6); border-bottom: 1px solid var(--border); }
.tool-btn { display: inline-flex; align-items: center; gap: var(--sp-2); height: var(--btn-h); padding: 0 var(--sp-3); border: 1px solid var(--border); background: var(--bg-content); color: var(--text-secondary); border-radius: var(--radius-md); cursor: pointer; font-size: 13px; font-weight: 500; transition: var(--transition); }
.tool-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.tool-btn.danger:hover { background: var(--error-bg); color: var(--danger); border-color: var(--danger); }
.tool-btn svg { width: 16px; height: 16px; }

/* Phone-only "Back" affordances — hidden on desktop, where all panes are always
   visible. Shown by the phone (<=640px) media block below. .reader-back returns
   the reader to the message list; .list-back returns the list to accounts/folders. */
.reader-back { display: none; margin-right: auto; }
.list-back { display: none; padding: 0; width: 32px; }

/* Right-click context menu on a message row. */
.ctx-menu { position: fixed; z-index: 100; min-width: 180px; background: var(--bg-content); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: var(--sp-1); }
.ctx-item { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); width: 100%; text-align: left; border: none; background: transparent; color: var(--text-primary); font-size: 13px; padding: 8px var(--sp-3); border-radius: var(--radius-sm); cursor: pointer; }
.ctx-item:hover { background: var(--bg-hover); }
.ctx-item.sub { padding-left: var(--sp-5); color: var(--text-secondary); }
/* Right-aligned keyboard-shortcut hint inside a context-menu item. */
.ctx-kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; color: var(--text-muted); flex: 0 0 auto; }
/* Small menu text: use the AA-contrast --danger-text (see .menu-item.danger). */
.ctx-item.danger { color: var(--danger-text); }
.ctx-item.danger:hover { background: var(--error-bg); }
.ctx-sub { max-height: 220px; overflow-y: auto; }
.ctx-sep { height: 1px; background: var(--border); margin: var(--sp-1) 0; }

/* Clear (×) button inside the topbar search box. */
.search-clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border: none; background: transparent; color: var(--text-muted); border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.search-clear:hover { background: var(--bg-hover); color: var(--text-primary); }
.search-clear svg { width: 14px; height: 14px; }

/* ⌘K discoverability hint pinned to the right of the topbar search box. Purely
   decorative (pointer-events:none) — the real shortcut is the global hotkey. */
.search-kbd {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    pointer-events: none; height: 20px; font-size: 10.5px; letter-spacing: .02em;
    color: var(--text-muted); background: var(--bg-content);
}
.search input:focus ~ .search-kbd { opacity: 0; }
/* No room for the hint on the narrow phone search. */
@media (max-width: 640px) { .search-kbd { display: none; } }

/* ------------------------------------------------------------- rules -- */
.select { height: 36px; padding: 0 30px 0 var(--sp-3); border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--bg-content) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239095a3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 10px center;
  color: var(--text-primary); font-size: 13px; font-family: inherit; outline: none; cursor: pointer; appearance: none; -webkit-appearance: none; transition: var(--transition); }
.select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79, 70, 229,.18); }
/* "When sender contains […]" / "Then move to […]" condition rows */
.rule-when { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.rule-kw { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); width: 42px; }
.rule-val { flex: 1; min-width: 140px; height: 36px; padding: 0 var(--sp-3); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); font-size: 13px; outline: none; background: var(--bg-content); color: var(--text-primary); transition: var(--transition); }
.rule-val:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79, 70, 229,.18); }
/* toggle switch on each rule row */
.rule-toggle { position: relative; display: inline-flex; flex: 0 0 auto; width: 38px; height: 22px; cursor: pointer; }
.rule-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.rule-switch { position: absolute; inset: 0; border-radius: 999px; background: var(--border-strong); transition: var(--transition); }
.rule-switch::before { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: var(--transition); box-shadow: var(--shadow-sm); }
.rule-toggle input:checked + .rule-switch { background: var(--green); }
.rule-toggle input:checked + .rule-switch::before { transform: translateX(16px); }

.view-stub { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cal-grid { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); margin: var(--sp-5); border-radius: var(--radius-lg); overflow: hidden; }
.cal-cell { background: var(--bg-content); padding: var(--sp-3); font-size: 12px; color: var(--text-secondary); overflow: hidden; }
.cal-cell .d { font-weight: 700; color: var(--text-primary); }
.cal-event { margin-top: 5px; font-size: 11px; padding: 3px 8px; border-radius: var(--radius-sm); background: var(--bg-selected); color: var(--accent-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); padding: 0 var(--sp-5); }
.cal-dow span { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); padding: var(--sp-2) 0; }
.contact { display: flex; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-5); border-bottom: 1px solid var(--border); cursor: pointer; transition: var(--transition); }
.contact:hover { background: var(--bg-hover); }
.contact .avatar { width: 36px; height: 36px; font-size: 14px; }
.contact-name { font-weight: 600; font-size: 13px; }
.contact-email { font-size: 12px; color: var(--text-muted); }

/* ===================================================== entry surfaces === */
/* flat solid entry surface, shared by landing + auth */
.auth-shell {
    position: relative; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    padding: var(--sp-8); overflow-x: hidden; overflow-y: auto;
    background: var(--ink); /* flat solid entry surface (aurora spotlights removed) */
}
/* Center the page content (card / landing / legal) vertically when it's short; the auto
   margins collapse and the shell scrolls when content is tall. The footer then sits at the
   bottom, BELOW the card — not beside it. */
.auth-shell > :first-child { margin-block: auto; }
.auth-shell > .legal-footer { margin-block: 0; }
/* Entry surfaces are a flat solid (var(--ink)) now — the animated aurora "spotlights"
   and dot texture were removed for a unified, straight look (Outlook/Gmail-like). */
.auth-shell > * { position: relative; z-index: 1; }

.auth-brand { display: inline-flex; align-items: center; gap: var(--sp-3); color: #fff; font-weight: 700; font-size: 19px; text-decoration: none; margin-bottom: var(--sp-6); letter-spacing: -0.02em; }
.auth-brand .mark { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--grad-vivid); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 20px; box-shadow: var(--glow); }
.auth-brand.big { font-size: 26px; margin-bottom: var(--sp-8); }
.auth-brand.big .mark { width: 56px; height: 56px; font-size: 28px; border-radius: var(--radius-lg); }

/* glass card (login / signup) */
.auth-card {
    width: 100%; max-width: 420px; color: var(--on-dark);
    background: var(--glass-strong);
    backdrop-filter: blur(40px) saturate(160%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-2xl);
    padding: var(--sp-10);
    box-shadow: var(--shadow-lg);
}
.auth-card h1 { font-size: 26px; font-weight: 700; margin-bottom: var(--sp-2); color: #fff; letter-spacing: -0.03em; }
.auth-sub { color: var(--on-dark-dim); font-size: 14px; margin: 0 0 var(--sp-8); line-height: 1.55; }
.auth-field { display: block; margin-bottom: var(--sp-5); }
.auth-field > span { display: block; font-size: 13px; font-weight: 600; margin-bottom: var(--sp-2); color: var(--on-dark); }
.auth-card input {
    width: 100%; height: 46px; padding: 0 var(--sp-4);
    border: 1px solid var(--glass-border); border-radius: var(--radius-md);
    font-size: 15px; outline: none; color: #fff;
    background: rgba(255,255,255,.05); transition: var(--transition);
}
.auth-card input::placeholder { color: rgba(255,255,255,.35); }
.auth-card input:focus { border-color: var(--accent); background: rgba(255,255,255,.09); box-shadow: 0 0 0 4px rgba(79, 70, 229,.22); }
.validation-message { display: block; color: var(--danger-text); font-size: 12px; margin-top: var(--sp-1); }
/* On the always-dark glass auth card the deep light-theme --danger-text is too dim;
   the bright --danger reads well against the dark backdrop. */
.auth-card .validation-message { color: var(--danger); }
.auth-error { background: rgba(255,84,112,.14); color: #ffb3c0; border: 1px solid rgba(255,84,112,.3); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4); font-size: 13px; margin-bottom: var(--sp-5); }
.auth-submit { width: 100%; height: 48px; font-size: 15px; margin-top: var(--sp-2); justify-content: center; }
.auth-submit:disabled { opacity: .55; cursor: default; transform: none; box-shadow: var(--glow); }
.auth-alt { text-align: center; font-size: 14px; color: var(--on-dark-dim); margin: var(--sp-6) 0 0; }
.auth-alt a { color: #fff; font-weight: 600; }
.auth-consent { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: 12.5px; line-height: 1.5; color: var(--on-dark-dim); margin-bottom: var(--sp-4); cursor: pointer; }
.auth-consent input[type="checkbox"] { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; accent-color: var(--accent); cursor: pointer; }
.auth-consent a { color: #fff; font-weight: 600; }

/* split auth: value-prop aside + form card (the CTA now lives on login/signup) */
.auth-split {
    width: 100%; max-width: 1040px; display: grid; grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(var(--sp-10), 6vw, var(--sp-16)); align-items: center;
}
.auth-split .auth-card { max-width: 440px; margin: 0; }
/* the aside carries the brand on desktop; hide the card's own brand to avoid duplication */
@media (min-width: 901px) { .auth-split > .auth-card > .auth-brand { display: none; } }

.auth-aside { color: var(--on-dark); max-width: 480px; }
.auth-aside .auth-brand { margin-bottom: var(--sp-8); }
.auth-hero-title {
    font-size: clamp(30px, 3.4vw, 46px); font-weight: 700; line-height: 1.06; letter-spacing: -0.035em;
    margin: 0 0 var(--sp-5); color: #fff;
    background: linear-gradient(180deg, #ffffff 30%, #b9c0e8 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.auth-hero-title .accent {
    background: var(--grad-vivid); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.auth-hero-lead { color: var(--on-dark-dim); font-size: clamp(15px, 1.4vw, 17px); line-height: 1.6; margin: 0 0 var(--sp-8); max-width: 440px; }
.auth-hero-points { list-style: none; margin: 0 0 var(--sp-8); padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.auth-hero-points li { display: flex; align-items: flex-start; gap: var(--sp-3); color: var(--on-dark-dim); font-size: 14px; line-height: 1.5; }
.auth-hero-points strong { color: #fff; font-weight: 600; }
.auth-hero-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--radius-md); background: var(--grad); display: grid; place-items: center; box-shadow: var(--glow); }
.auth-hero-ic svg { width: 17px; height: 17px; color: #fff; }
.auth-hero-foot { font-size: 13px; color: var(--on-dark-dim); margin: 0; }
.auth-hero-foot a { color: #fff; font-weight: 600; }

@media (max-width: 900px) {
    .auth-split { grid-template-columns: 1fr; max-width: 420px; }
    .auth-aside { display: none; }
}

/* loading splash */
.loading-splash { position: fixed; inset: 0; display: grid; place-items: center; background: var(--ink); }
.loading-splash .mark { width: 64px; height: 64px; border-radius: var(--radius-lg); background: var(--grad-vivid); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 30px; box-shadow: var(--glow); animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.92); opacity: .7; } }

/* Shown only when JavaScript is disabled (the WASM app can't boot). Sits over the
   breathing splash so the user gets a clear explanation instead of a frozen mark. */
.noscript-msg { position: fixed; inset: 0; z-index: 1001; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); text-align: center; padding: var(--sp-8);
   background: var(--ink); color: var(--on-dark); font-family: var(--font); }
.noscript-msg strong { font-size: 18px; font-weight: 700; }
.noscript-msg span { max-width: 380px; font-size: 14px; line-height: 1.55; color: var(--on-dark-dim); }

/* Fixed dark-on-yellow regardless of theme: the banner background is always the
   light warning yellow, so it must NOT inherit the (light) dark-theme page text. */
#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: #fff4ce; color: #14151a; border-top: 1px solid #f0d98c; padding: var(--sp-3) var(--sp-4); box-shadow: var(--shadow-md); z-index: 1000; }
#blazor-error-ui .reload { margin-left: var(--sp-3); color: #14151a; }
#blazor-error-ui .dismiss { cursor: pointer; float: right; padding: 0 6px; margin: -2px -2px 0 var(--sp-3); border-radius: var(--radius-sm); line-height: 1.4; }
#blazor-error-ui .dismiss:hover { background: rgba(0,0,0,.07); }
#blazor-error-ui .dismiss:focus-visible { outline: 2px solid #14151a; outline-offset: 1px; }

/* ===== Unified inbox + keyboard nav (appended) ===================================== */

/* "All Inboxes" entry — pinned at the top of the mail sidebar, above per-account groups.
   Styled to echo .acct-group-head but with an accent identity of its own. */
.all-inboxes {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-2);
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--text-primary);
    font-weight: 600;
    border: 1px solid transparent;
    transition: var(--transition);
}
.all-inboxes:hover { background: var(--bg-hover); }
.all-inboxes.on {
    background: var(--bg-selected);
    border-color: var(--border-strong);
    color: var(--accent-text);
}
.all-inboxes-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--accent);
}
.all-inboxes-label { flex: 1 1 auto; }
.all-inboxes-badge {
    flex: 0 0 auto;
    min-width: 18px;
    height: 18px;
    padding: 0 var(--sp-1);
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
/* Lock glyph on the All Inboxes entry when Unified Inbox isn't unlocked. */
.all-inboxes-lock { flex: 0 0 auto; width: 14px; height: 14px; color: var(--text-muted); }

/* Per-row account chip in the unified list: a small colored-dot pill identifying the
   source mailbox. Colored per-account via an inline AvatarColor(account.Id) on the dot. */
.acct-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    max-width: 140px;
    padding: 2px var(--sp-2);
    border-radius: 999px;
    background: var(--bg-muted);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
}
.acct-chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.acct-chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Keyboard-selection highlight on a message row (j/k cursor). Distinct accent ring that
   coexists with .unread and .active without fighting them. */
.panel-scroll:focus { outline: none; }
.msg.kbd-cursor {
    background: var(--bg-selected);
    box-shadow: inset 2px 0 0 0 var(--accent);
}
.msg.kbd-cursor.active { box-shadow: inset 3px 0 0 0 var(--accent); }

/* ===========================================================================
   RESPONSIVE — tablet (<=900px) and phone (<=640px)
   Additive only: these blocks adapt the desktop shell for small screens and
   never affect wide viewports. The two-pane (.panel + .reader) and three-pane
   (.folder-pane + .panel + .reader) layouts stack vertically so the user
   scrolls list -> taps -> reads, with the whole body scrolling on phones.
   =========================================================================== */

/* ----------------------------------------------- tablet (<=900px) ----- */
@media (max-width: 900px) {
    :root {
        --panel-w: 300px;
        --topbar-h: 54px;
    }

    /* Tighten topbar spacing so the section title + search fit. */
    .topbar { gap: var(--sp-3); padding: 0 var(--sp-3); }
    .search { max-width: none; margin: 0; }

    /* Narrower mail account pane. */
    .folder-pane { width: 196px; }

    /* Shrink the heaviest reader padding. */
    .reader-head { padding: var(--sp-5) var(--sp-6) var(--sp-4); }
    .reader-body { padding: var(--sp-5) var(--sp-6); }
    .reader-subject { font-size: 21px; }
    .attach-row { padding: var(--sp-3) var(--sp-6); }
}

/* ------------------------------------------------- phone (<=640px) ----- */
@media (max-width: 640px) {
    :root {
        --topbar-h: 52px;
        /* Height of the fixed bottom tab bar (~58px content + safe-area inset). Used
           to pad scrolling views and to subtract from the full-height pane math. */
        --bottom-bar-h: calc(58px + env(safe-area-inset-bottom));
    }

    .app-shell { height: 100dvh; }

    /* --- Phone mail: single-pane master-detail. ---------------------------
       Unlike other views, Mail shows EXACTLY ONE of its three panes at a time
       on phones — accounts/folders, the message list, or the reader — each
       filling the viewport below the topbar and scrolling internally (no nested
       capped regions, no whole-page scroll). The visible pane is chosen by the
       `m-folders` / `m-list` / `m-reader` class on .mail-view (set from the
       Razor view-state); the other two are display:none. Selecting a folder
       advances folders→list, opening a message advances list→reader, and the
       Back buttons reverse each step. Desktop (>640px) keeps all three panes
       side-by-side and never sees these rules. */

    /* The mail body itself does not scroll — only the active pane does. Other
       views still want the column to scroll, so scope the no-scroll to mail. */
    .app-body:has(.mail-view) { overflow: hidden; }

    .mail-view {
        flex-direction: column;
        min-height: 0;
        /* Fit between the topbar and the fixed bottom tab bar. */
        height: calc(100dvh - var(--topbar-h) - var(--bottom-bar-h));
    }

    /* Each pane fills the mail viewport and owns its own scroll region. */
    .mail-view > .folder-pane,
    .mail-view > .panel,
    .mail-view > .reader {
        width: 100%;
        flex: 1 1 auto;
        min-height: 0;
        height: 100%;
        border-right: none;
        border-bottom: none;
    }

    /* The accounts/folders and message-list panes scroll inside their bodies. */
    .folder-pane .panel-scroll,
    .panel .panel-scroll { overflow-y: auto; min-height: 0; }

    /* Reader keeps its own inner scroll (reader-body) — leave overflow hidden. */
    .reader { overflow: hidden; }

    /* Show only the pane matching the current view-state; hide the rest. The
       reader markup is a sibling of .mail-view's panes (one of several reader
       states), so target it directly. */
    .mail-view.m-folders > .panel,
    .mail-view.m-folders > .reader { display: none; }

    .mail-view.m-list > .folder-pane,
    .mail-view.m-list > .reader { display: none; }

    .mail-view.m-reader > .folder-pane,
    .mail-view.m-reader > .panel { display: none; }

    /* Reveal the phone Back controls (hidden on desktop): the reader's back to
       the list, and the list header's back to accounts/folders. */
    .reader-back { display: inline-flex; }
    .list-back { display: inline-flex; }

    /* Compact reader chrome. */
    .reader-head { padding: var(--sp-4) var(--sp-4) var(--sp-3); }
    .reader-body { padding: var(--sp-4); font-size: 14px; }
    .reader-subject { font-size: 18px; margin-bottom: var(--sp-3); }
    .reader-toolbar { padding: var(--sp-2) var(--sp-3); flex-wrap: wrap; }
    .attach-row { padding: var(--sp-3) var(--sp-4); }
    .reader-date { margin-left: 0; }

    /* Topbar: tighten spacing; the section title carries the brand-mark on phones
       (added below) so users still see a Gratin identity. */
    .topbar { gap: var(--sp-2); padding: 0 var(--sp-3); }
    .search input { padding: 0 34px 0 32px; font-size: 13px; }
    .user-dropdown { min-width: 240px; }

    /* --- Rail -> bottom tab bar (Teams mobile). -----------------------------
       The left rail becomes a fixed bottom bar of equal-width tabs. The account
       avatar is added to the topbar (right side) so the account/menu stays
       reachable without stealing a tab slot. */
    .rail {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto;
        width: auto; flex-basis: auto; height: auto; z-index: 60;
        flex-direction: row; align-items: stretch; gap: 0;
        padding: 4px 0 calc(4px + env(safe-area-inset-bottom));
        border-right: none; border-top: 1px solid var(--border);
        background: var(--bg-rail);
        box-shadow: 0 -2px 12px rgba(8,10,20,.12);
    }
    /* The expand state is meaningless as a bottom bar — force the compact layout. */
    .app-shell.rail-expanded .rail { flex-basis: auto; width: auto; }

    /* Brand, explorer toggle and spacer don't belong in the bottom bar. */
    .rail-top, .rail-spacer { display: none; }

    /* The account avatar is lifted OUT of the bottom bar to the top-right corner
       (fixed) so it overlays the topbar and stays reachable as a tappable avatar;
       its dropdown then opens below it. */
    .rail-account {
        position: fixed; top: 0; right: var(--sp-3); bottom: auto; left: auto;
        height: var(--topbar-h); display: flex; align-items: center; margin: 0;
        z-index: 70;
    }
    .rail-account-btn { flex-direction: row; padding: 3px; }

    /* The nav group (Mail/Calendar/People) fills the bar as equal tabs. Settings is no
       longer a tab — it lives in the account popover (top-right avatar). */
    .rail-nav { flex: 1 1 0; flex-direction: row; gap: 0; }
    .rail-nav .rail-btn { flex: 1 1 0; }

    .rail-btn {
        flex-direction: column; min-height: 0; gap: 2px; padding: 6px 2px;
        border-radius: var(--radius-sm);
    }
    .rail-btn svg { width: 22px; height: 22px; }
    /* Bottom-tab labels are always shown (icon-over-label tabs), unlike the collapsed
       desktop rail which is icon-only. */
    .rail-label { font-size: 10px; display: inline; }
    /* Bottom-tab active indicator: drop the side bar, tint icon+label only. */
    .rail-btn.active { background: transparent; }
    .rail-btn.active::before { display: none; }
    /* Force compact (icon-over-label) tabs even if the expanded class is set. */
    .app-shell.rail-expanded .rail-btn { flex-direction: column; min-height: 0; padding: 6px 2px; gap: 2px; }
    .app-shell.rail-expanded .rail-label { font-size: 10px; }

    /* Reserve room on the right of the topbar for the fixed account avatar so the
       search box doesn't slide under it. */
    .topbar { padding-right: 52px; }

    /* The account dropdown anchors below the fixed top-right avatar, not above it. */
    .user-dropdown.rail-dropdown { left: auto; right: 0; bottom: auto; top: calc(100% + 6px); }

    /* Keep page content clear of the fixed bottom bar. Views that scroll the whole
       column (calendar/contacts/compose) get bottom padding; the full-height
       single-pane views (mail, settings) instead subtract the bar from their own
       100dvh height math (above). */
    .app-body { padding-bottom: var(--bottom-bar-h); }
    .app-body:has(.mail-view), .app-body:has(.settings-page) { padding-bottom: 0; }

    /* Comfortable tap targets. */
    .folder { padding: 10px var(--sp-3); }
    .msg-act { width: 36px; height: 36px; }
    .menu-item { padding: 10px var(--sp-3); }
    .tool-btn { height: 36px; }

    /* Hover-only quick actions don't work on touch — keep them visible. */
    .msg-actions {
        opacity: 1; pointer-events: auto;
        position: static; transform: none;
        background: none; padding-left: 0;
    }
    .msg.active .msg-actions { background: none; }

    /* Compose: trim wide horizontal padding. */
    .compose-body { padding: var(--sp-4); }

    /* Calendar: keep 7 columns but shrink cells/typography so it fits. */
    .cal-grid { margin: var(--sp-3); grid-auto-rows: minmax(56px, 1fr); }
    .cal-cell { padding: var(--sp-1); font-size: 11px; }
    .cal-event { padding: 2px 5px; font-size: 10px; }
    .cal-dow { padding: 0 var(--sp-3); }
    .cal-dow span { font-size: 10px; }

    /* Auth/landing: comfortable full-width on phones. */
    .auth-shell { padding: var(--sp-5); }
    .auth-card { padding: var(--sp-6); border-radius: var(--radius-xl); }

    /* --- Phone Settings: stack the section nav above the content. ----------
       Desktop is a 300px nav + content side-by-side; on phones that squeezes
       the content to nothing, so the nav becomes a horizontal scrollable strip
       of section "chips" at the top and the content fills the rest. */
    .settings-page { flex-direction: column; height: calc(100dvh - var(--topbar-h) - var(--bottom-bar-h)); }
    .settings-page > .panel {
        width: 100%;
        flex: 0 0 auto;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .settings-page > .panel > .panel-head { display: none; }   /* redundant with the section title in the reader head */
    .settings-page .panel-scroll.folders {
        display: flex;
        flex-direction: row;
        gap: var(--sp-2);
        overflow-x: auto;
        overflow-y: hidden;
        padding: var(--sp-2) var(--sp-3);
        -webkit-overflow-scrolling: touch;
    }
    .settings-page .folders .folder {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: var(--sp-2) var(--sp-3);
        border: 1px solid var(--border);
        border-radius: 999px;
    }
    /* Chip selection (override the desktop accent-bar treatment for the strip). */
    .settings-page .folders .folder.active {
        background: var(--bg-selected);
        border-color: var(--border-strong);
        color: var(--accent-text);
        box-shadow: none;
    }
    .settings-page > .reader { flex: 1 1 auto; min-height: 0; width: 100%; }
}

/* Background-save failure toast (MainLayout). Fixed, auto-dismissing, danger-bordered. */
.save-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    max-width: 90vw;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-md);
    background: var(--bg-panel);
    border: 1px solid var(--danger);
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
    font-size: 0.85rem;
}
.save-toast-close {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1;
    padding: 2px;
}
.save-toast-close:hover { color: var(--text-primary); }