/* ══════════════════════════════════════════════════════════════════════
   hymail-v11.css — v1.1 design standard
   Extracted from hymail.html inline <style> + color tokens applied
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   hyMail — Apple Intelligence Edition v3 — 2026-07-05
   Palette: Graphite · Apple Liquid Glass · Apple Blue
   ═══════════════════════════════════════════════════════════════════════ */
/* ─ Override legacy green tokens from tokens.css / ios-glass.css ─ */
:root, html {
  /* Replace old green bg tokens with new graphite palette */
  --bg-deep:         var(--bg-deep) !important;
  --bg-surface:      var(--bg-surface) !important;
  --bg-card:         var(--bg-card) !important;
  --bg-card-hover:   var(--bg-surface) !important;
  --bg-input:        rgba(255,255,255,.06) !important;
  /* Glass variables */
  --glass-bg:        rgba(255,255,255,.08) !important;
  --glass-bg-light:  rgba(255,255,255,.05) !important;
  --glass-bg-heavy:  rgba(255,255,255,.10) !important;
  --glass-blur:       48px !important;
  --glass-blur-heavy: 56px !important;
  --glass-saturate:   300% !important;
  --glass-border:     rgba(255,255,255,.18) !important;
  --glass-border-light: rgba(255,255,255,.12) !important;
  --glass-inset-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important;
  --glass-shadow: 0 8px 40px rgba(0,0,0,.40) !important;
  --glass-shadow-lg: 0 16px 56px rgba(0,0,0,.50) !important;
}
/* ─ Neutralize ios-glass.css wildcard [class*="sidebar"] rule ─
   ios-glass.css §13 applies background+backdrop-filter to every element
   that has "sidebar" anywhere in the class name. This resets all of them.
   The sidebar container keeps its own background via .mail-sidebar below. */
body.glass-page [class*="sidebar"],
body.glass-page .sidebar-nav-item,
body.glass-page .sidebar-nav-icon,
body.glass-page .sidebar-header,
body.glass-page .sidebar-logo,
body.glass-page .sidebar-close-btn,
body.glass-page .sidebar-compose-btn,
body.glass-page .sidebar-divider,
body.glass-page .sidebar-nav-badge,
body.glass-page .sidebar-acct,
body.glass-page .sidebar-nav {
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: transparent !important;
}
/* Restore the sidebar container itself — solid, matches app theme */
body.glass-page .mail-sidebar,
.mail-sidebar.hy-drawer,
.mail-sidebar.hy-drawer--left,
.mail-sidebar {
  background: var(--bg-surface) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: transparent !important;
  border-right: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 4px 0 40px rgba(0,0,0,.60), inset -1px 0 0 rgba(255,255,255,.10) !important;
}

/* §1 — iOS System Design Tokens (Apple HIG Dark Mode) ───────────────── */
/* True iOS Dark Mode system colors — identical to UIKit systemBackground etc. */
:root {
  /* ── iOS System Backgrounds ── */
  --ios-bg:            #000000;   /* systemBackground (dark) */
  --ios-bg2:           #1C1C1E;   /* secondarySystemBackground (dark) */
  --ios-bg3:           #2C2C2E;   /* tertiarySystemBackground (dark) */
  --ios-grouped:       #000000;   /* systemGroupedBackground (dark) */
  --ios-grouped2:      #1C1C1E;   /* secondarySystemGroupedBackground (dark) */
  --ios-grouped3:      #2C2C2E;   /* tertiarySystemGroupedBackground (dark) */

  /* ── iOS Labels ── */
  --ios-label:         #FFFFFF;
  --ios-label2:        rgba(235,235,245,0.60);   /* secondaryLabel */
  --ios-label3:        rgba(235,235,245,0.30);   /* tertiaryLabel */
  --ios-label4:        rgba(235,235,245,0.18);   /* quaternaryLabel */

  /* ── iOS Fills ── */
  --ios-fill:          rgba(120,120,128,0.36);   /* systemFill */
  --ios-fill2:         rgba(120,120,128,0.32);   /* secondarySystemFill */
  --ios-fill3:         rgba(118,118,128,0.24);   /* tertiarySystemFill */
  --ios-fill4:         rgba(118,118,128,0.18);   /* quaternarySystemFill */

  /* ── iOS Separators ── */
  --ios-sep:           rgba(84,84,88,0.65);      /* separator */
  --ios-sep-opaque:    #38383A;                  /* opaqueSeparator */

  /* ── iOS System Colors ── */
  --ios-blue:          #0A84FF;
  --ios-red:           #FF453A;
  --ios-green:         #32D74B;
  --ios-orange:        #FF9F0A;
  --ios-yellow:        #FFD60A;
  --ios-purple:        #BF5AF2;
  --ios-pink:          #FF375F;
  --ios-teal:          #40CBE0;
  --ios-indigo:        #5E5CE6;

  /* ── iOS Navigation ── */
  --ios-nav-h:         44px;   /* HIG: compact navigation bar height */
  --ios-tab-h:         49px;   /* HIG: tab bar height (without safe area) */
  --ios-large-title:   34px;   /* HIG: large title font size */
  --ios-title:         17px;   /* HIG: nav bar title font size */

  /* ── iOS Typography (Apple HIG scale) ── */
  --ios-font: -apple-system, 'SF Pro Text', 'SF Pro Display',
              BlinkMacSystemFont, 'Helvetica Neue', system-ui, sans-serif;

  /* ── iOS Glass (frosted bars) ── */
  --ios-blur:          saturate(180%) blur(20px);
  --ios-nav-bg:        color-mix(in srgb, var(--bg-surface) 94%, transparent);      /* nav/tab bar glass */
  --ios-nav-border:    var(--ios-sep);

  /* ── iOS Motion ── */
  --spring:            cubic-bezier(.175,.885,.32,1.275);
  --spring-fast:       cubic-bezier(.22,.68,0,1.2);
  --ease-ios:          cubic-bezier(.2,0,0,1);
  --ease-push:         cubic-bezier(.2,.8,.2,1);
  --ease-sheet:        cubic-bezier(.33,1,.68,1);

  /* ── iOS Radii (HIG: lists use 10px inset group, sheets use 13px) ── */
  --r-list:    10px;   /* inset grouped list container */
  --r-sheet:   13px;   /* bottom sheets */
  --r-pill:    9999px;

  /* ── Swipe actions (iOS Mail colors) ── */
  --swipe-archive: #32D74B;
  --swipe-delete:  #FF453A;
  --swipe-snooze:  #FF9F0A;
  --swipe-flag:    #0A84FF;

  /* ── Legacy compat (keeps JS-generated markup working) ── */
  --hy-bg:       var(--ios-bg);
  --hy-card:     var(--ios-bg2);
  --hy-surface:  var(--ios-bg3);
  --hy-blue:     var(--ios-blue);
  --hy-blue-dim: rgba(10,132,255,.15);
  --hy-blue-glow: rgba(10,132,255,.30);
  --hy-red:      var(--ios-red);
  --hy-orange:   var(--ios-orange);
  --hy-success:  var(--ios-green);
  --hy-purple:   var(--ios-purple);
  --hy-text:     var(--ios-label);
  --hy-text-sec: var(--ios-label2);
  --hy-text-ter: var(--ios-label3);
  --hy-text-qua: var(--ios-label4);
  --hy-border:   var(--ios-sep);
  --hy-border-md: rgba(84,84,88,0.80);
  --hy-border-hi: rgba(84,84,88,1);
  --hy-inset:    inset 0 .5px 0 rgba(255,255,255,.12);
  --hy-inset-hi: inset 0 .5px 0 rgba(255,255,255,.18);
  --hy-shadow-sm: 0 1px 4px rgba(0,0,0,.30);
  --hy-shadow:    0 2px 12px rgba(0,0,0,.40);
  --hy-shadow-lg: 0 4px 24px rgba(0,0,0,.50);
  --hy-shadow-xl: 0 8px 40px rgba(0,0,0,.60);
  --hy-font:     var(--ios-font);
  --hy-glass:    var(--ios-nav-bg);
  --hy-glass-lt: color-mix(in srgb, var(--bg-surface) 85%, transparent);
  --hy-glass-hvy: color-mix(in srgb, var(--bg-surface) 96%, transparent);
  --blur:        var(--ios-blur);
  --blur-hvy:    saturate(200%) blur(30px);

  /* ── Legacy color compat ── */
  --mail-blue:    var(--ios-blue);
  --mail-red:     var(--ios-red);
  --mail-orange:  var(--ios-orange);
  --mail-green:   var(--ios-green);
  --mail-purple:  var(--ios-purple);
  --mail-pink:    var(--ios-pink);
  --mail-gray:    var(--ios-label2);
  --mail-gray-t:  var(--ios-label3);
  --mail-bg:      var(--ios-bg);
  --mail-surface: var(--ios-bg3);
  --mail-card:    var(--ios-bg2);
  --mail-card-h:  var(--ios-bg3);
  --mail-card-solid: var(--ios-bg2);
  --mail-border:  var(--ios-sep);
  --mail-frost:   var(--ios-nav-bg);
  --mail-font:    var(--ios-font);
  --ios-fill-tertiary: var(--ios-fill3);
  --accent:       var(--ios-blue);
  --accent-dim:   rgba(10,132,255,.15);
  --accent-glow:  rgba(10,132,255,.30);
  --accent-text:  #FFFFFF;
  --bg-deep:      var(--ios-bg);
  --bg-input:     var(--ios-fill3);
  --border-focus: rgba(10,132,255,.6);
  --nav-h:        var(--ios-nav-h);
  --r-sm: 10px; --r-md: 13px; --r-lg: 16px; --r-xl: 20px;
  --sp-xs: 8px; --sp-sm: 12px; --sp-md: 16px; --sp-lg: 24px; --sp-xl: 32px;
}

/* §2 — Reset & Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%; overflow: hidden;
  background: var(--ios-bg);
  color: var(--ios-label);
  font-family: var(--ios-font);
  font-size: 17px;   /* iOS body default */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: none;  /* prevent iOS auto-scaling */
}
button { font-family: var(--ios-font); cursor: pointer; -webkit-tap-highlight-color: transparent; }
input, select, textarea { font-family: var(--ios-font); color: var(--ios-label); background: none; border: none; outline: none; }

/* §3 — App Shell ───────────────────────────────────────────────── */
.mail-app {
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh;
  padding-top: env(safe-area-inset-top);
  background: var(--ios-bg);
}
.mail-body { flex: 1; overflow: hidden; position: relative; }

/* §4 — Navigation Bar (HIG: 44pt compact) ────────────────────── */
.mail-header {
  display: flex; align-items: center; gap: 4px;
  padding: 0 8px; flex-shrink: 0;
  height: var(--ios-nav-h);
  background: var(--ios-nav-bg);
  -webkit-backdrop-filter: var(--ios-blur);
  backdrop-filter: var(--ios-blur);
  border-bottom: .5px solid var(--ios-sep);
  z-index: 50;
}
.mail-header-center {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; min-width: 0; cursor: pointer;
}
.mail-header-title {
  font-size: 17px; font-weight: 600; letter-spacing: -0.41px;
  color: var(--ios-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 4px;
}
.mail-header-title .hdr-chevron { font-size: 10px; color: var(--ios-label3); transition: transform .2s var(--ease-ios); }
.mail-header-subtitle { display: none; }  /* @domain removed — shown in acct-switcher card below */
.mail-header-btn {
  background: none; border: none; color: var(--ios-blue);
  font-size: 17px; font-weight: 400;
  padding: 0; width: 44px; height: 44px; min-width: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 22px; transition: opacity .15s;
}
.mail-header-btn:active { opacity: .5; }
.mail-header-btn .badge-dot { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--ios-red); border: 1.5px solid var(--ios-bg); }

/* §5 — Standard iOS Tab Bar (HIG: 49pt) ─────────────────────── */
.mail-tab-bar {
  display: flex; align-items: flex-end; justify-content: space-around;
  flex-shrink: 0; z-index: 50; position: relative;
  height: calc(var(--ios-tab-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--ios-nav-bg);
  -webkit-backdrop-filter: var(--ios-blur);
  backdrop-filter: var(--ios-blur);
  border-top: .5px solid var(--ios-sep);
}
.dock-glass { display: none; }   /* VisionOS dock disabled — use standard iOS */
.mail-tab {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  padding: 8px 4px 0;
  background: none; border: none;
  color: var(--ios-label3);
  height: var(--ios-tab-h);
  position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: color .15s;
}
.mail-tab .tab-icon {
  width: 25px; height: 25px; display: flex; align-items: center; justify-content: center;
  transition: transform .15s var(--spring-fast);
}
.mail-tab .tab-icon svg { display: block; }
.mail-tab .tab-icon iconify-icon { font-size: 24px; }
.mail-tab .tab-label {
  font-size: 10px; font-weight: 500; letter-spacing: 0.12px;
  opacity: 1; line-height: 1; white-space: nowrap;
}
.mail-tab.active { color: var(--ios-blue); }
.mail-tab.active .tab-icon { transform: scale(1.04); }
.mail-tab .tab-badge {
  position: absolute; top: 4px; right: calc(50% - 22px);
  background: var(--ios-red); color: #fff;
  font-size: 11px; font-weight: 600;
  padding: 0 5px; border-radius: 9px;
  min-width: 18px; height: 18px; text-align: center;
  display: none; line-height: 18px; border: 1.5px solid var(--ios-bg);
}
.mail-tab:active .tab-icon { transform: scale(.92); }

/* §6 — Panes ───────────────────────────────────────────────── */
.mail-pane {
  display: none; position: absolute; inset: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--ios-bg);
}
.mail-pane.active { display: flex; flex-direction: column; }
.mail-pane-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mail-pane-pad { padding: 0 16px 24px; }

/* §7 — iOS Segmented Control ──────────────────────────────── */
/* sticky below account switcher so it doesn't scroll away */
.mail-segment {
  display: flex; background: var(--ios-fill3);
  border-radius: 9px; padding: 2px; gap: 2px;
  margin: 8px 16px; border: none; flex-shrink: 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  height: 32px; -webkit-backdrop-filter: none;
}
.mail-segment::-webkit-scrollbar { display: none; }
.mail-seg-btn {
  flex: 0 0 auto; padding: 0 12px; border-radius: 7px;
  font-size: 13px; font-weight: 500; letter-spacing: -0.08px;
  color: var(--ios-label2);
  background: transparent; border: none; cursor: pointer;
  font-family: var(--ios-font); min-height: 28px;
  transition: all .2s var(--ease-ios); white-space: nowrap;
}
.mail-seg-btn.active {
  background: var(--ios-bg2); color: var(--ios-label);
  box-shadow: 0 1px 3px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.1);
}
.mail-seg-btn:active { transform: scale(.97); opacity: .85; }
#inbox-segment { display: none; }

/* §8 — Account Switcher ────────────────────────────────── */
/* sticky: stays pinned below the nav bar while email list scrolls beneath */
.acct-switcher {
  padding: 0 16px 8px; flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 20;          /* above email list rows (z:0) */
  background: var(--ios-bg);  /* opaque so rows don't bleed through */
}
.acct-current {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 10px;
  background: var(--ios-bg2);
  cursor: pointer; min-height: 56px;
  transition: opacity .15s;
}
.acct-current:active { opacity: .7; }
.acct-current-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; flex-shrink: 0;
  background: rgba(10,132,255,.15); color: var(--ios-blue);
  position: relative; overflow: hidden;
}
.acct-current-info { flex: 1; min-width: 0; }
.acct-current-name { font-size: 17px; font-weight: 600; letter-spacing: -0.41px; color: var(--ios-label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-current-email { font-size: 13px; color: var(--ios-label2); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-current-badge { background: var(--ios-red); color: #fff; font-size: 12px; font-weight: 600; padding: 0 6px; border-radius: 9px; min-width: 20px; height: 20px; text-align: center; line-height: 20px; flex-shrink: 0; }
.acct-current-chevron { font-size: 12px; color: var(--ios-label3); flex-shrink: 0; transition: transform .25s var(--ease-ios); }
.acct-current.open .acct-current-chevron { transform: rotate(180deg); }
.acct-dropdown {
  max-height: 0; overflow: hidden;
  transition: max-height .3s var(--ease-ios);
  margin: 0 16px 4px; border-radius: 10px;
  position: sticky; top: calc(60px + 8px);  /* below account switcher */
  z-index: 19;   /* just under switcher */
  background: var(--ios-bg);   /* isolates from scroll content */
}
.acct-dropdown.open { max-height: min(55vh,360px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.acct-dropdown-inner {
  background: var(--ios-bg2);
  border-radius: 10px; padding: 4px 0;
  box-shadow: 0 8px 32px rgba(0,0,0,.55);
}
.acct-group-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ios-label3); padding: 10px 16px 4px; }
.acct-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; cursor: pointer; transition: background .12s; }
.acct-item:active { background: var(--ios-fill3); }
.acct-item.active { background: rgba(10,132,255,.12); }
.acct-item-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; background: rgba(10,132,255,.15); color: var(--ios-blue); position: relative; overflow: hidden; }
.acct-item-info { flex: 1; min-width: 0; }
.acct-item-label { font-size: 17px; font-weight: 400; letter-spacing: -0.41px; color: var(--ios-label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-item.active .acct-item-label { color: var(--ios-blue); font-weight: 500; }
.acct-item-sub { font-size: 13px; color: var(--ios-label2); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-item-badge { background: var(--ios-blue); color: #fff; font-size: 11px; font-weight: 600; padding: 0 6px; border-radius: 8px; min-width: 18px; height: 18px; text-align: center; line-height: 18px; flex-shrink: 0; }
.acct-item-check { color: var(--ios-blue); font-size: 17px; flex-shrink: 0; display: none; }
.acct-item.active .acct-item-check { display: block; }
.account-pills { display: none; }
.triage-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 9999px; font-size: 10px; font-weight: 600; flex-shrink: 0; }
.triage-email { background: rgba(10,132,255,.15); color: var(--ios-blue); }
.triage-ticket { background: rgba(255,149,0,.15); color: var(--ios-orange); }
.triage-notification { background: var(--ios-fill3); color: var(--ios-label3); }
.store-inbox-label { display: flex; align-items: center; gap: 6px; padding: 6px 16px 3px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ios-blue); }

/* §9 — Search Bar (iOS native style) ─────────────────────── */
.mail-search { padding: 8px 16px; position: sticky; top: 0; z-index: 5; background: var(--ios-bg); flex-shrink: 0; }
.mail-search-inner { position: relative; display: flex; align-items: center; gap: 8px; }
.mail-search input {
  width: 100%; padding: 8px 28px; border-radius: 10px;
  font-size: 17px; font-family: var(--ios-font);
  background: var(--ios-fill3);
  color: var(--ios-label); height: 36px;
  -webkit-appearance: none; appearance: none;
  transition: background .15s;
}
.mail-search input:focus { background: var(--ios-fill2); }
.mail-search input::placeholder { color: var(--ios-label3); }
.mail-search-icon { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: 15px; pointer-events: none; color: var(--ios-label3); }
.mail-search-cancel { font-size: 17px; color: var(--ios-blue); font-weight: 400; background: none; border: none; cursor: pointer; white-space: nowrap; padding: 4px 0; min-height: 36px; display: none; align-items: center; }
.mail-search-cancel.show { display: flex; }

/* §10 — Email List (Native iOS Mail style) ──────────────── */
/* iOS Mail uses inset grouped list: rows in a rounded group with hairline separators */
.mail-list {
  display: flex; flex-direction: column;
  padding: 0 0 calc(var(--ios-tab-h) + env(safe-area-inset-bottom) + 16px);
  gap: 0;
}
/* Inset group container — like iOS Settings inset grouped table */
.mail-item-wrapper {
  position: relative; overflow: hidden;
  background: var(--ios-bg2);
  border-bottom: .5px solid var(--ios-sep);
}
.mail-item-wrapper:first-child { border-radius: 10px 10px 0 0; margin-top: 8px; }
.mail-item-wrapper:last-child { border-radius: 0 0 10px 10px; border-bottom: none; margin-bottom: 8px; }
.mail-item-wrapper:only-child { border-radius: 10px; margin: 8px 0; border-bottom: none; }
/* Swipe actions */
.mail-item-actions-left, .mail-item-actions-right { position: absolute; top: 0; bottom: 0; display: flex; align-items: stretch; }
.mail-item-actions-left { left: 0; }
.mail-item-actions-right { right: 0; }
.mail-swipe-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 74px; color: #fff; font-size: 13px; font-weight: 600; gap: 4px; }
.mail-swipe-btn svg { width: 22px; height: 22px; }
.swipe-delete  { background: var(--swipe-delete); }
.swipe-flag    { background: var(--swipe-flag); }
.swipe-archive { background: var(--swipe-archive); }
.swipe-snooze  { background: var(--swipe-snooze); }
/* Swipe actions are touch-only — hide them on mouse/pointer devices so they
   can’t bleed through the card when :active makes the background transparent. */
@media (hover: hover) and (pointer: fine) {
  .mail-item-actions-left, .mail-item-actions-right { display: none; }
}

/* Email row — HIG: minimum 44pt touch target, standard body text */
.mail-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px; cursor: pointer;
  background: var(--ios-bg2); position: relative;
  transition: background .12s;
  -webkit-user-select: none; user-select: none;
  min-height: 44px;
}
/* Keep the card fully opaque on press — var(--ios-fill3) is rgba(…,0.24) which
   lets the absolute-positioned swipe buttons bleed through on desktop. Use a
   solid inset shadow for the pressed highlight instead. */
.mail-item:active { background: var(--ios-bg2); box-shadow: inset 0 0 0 9999px rgba(0,0,0,0.07); }

/* Unread state: blue dot indicator + slightly heavier text */
.mail-item-unread { background: var(--ios-bg2); }
.mail-item-unread .mail-item-sender { font-weight: 600; color: var(--ios-label); }

/* Avatar: 40pt circle (matches iOS Mail) */
.mail-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(10,132,255,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 600; flex-shrink: 0;
  color: var(--ios-blue); position: relative; overflow: hidden;
  margin-top: 1px;
}
.mail-avatar-badge { position: absolute; bottom: -2px; right: -2px; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--ios-bg2); }

/* Row content */
.mail-item-content { flex: 1; min-width: 0; }
.mail-item-row { display: flex; align-items: baseline; gap: 6px; }
.mail-item-sender { font-size: 17px; font-weight: 400; letter-spacing: -0.41px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ios-label); }
.mail-item-unread .mail-item-sender { font-weight: 600; }
.mail-item-date { font-size: 15px; color: var(--ios-label2); flex-shrink: 0; font-weight: 400; }
.mail-item-chevron { color: var(--ios-sep); font-size: 11px; flex-shrink: 0; }
.mail-item-subject { font-size: 15px; letter-spacing: -0.24px; color: var(--ios-label); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-item-unread .mail-item-subject { font-weight: 400; }
.mail-item-preview { font-size: 15px; letter-spacing: -0.24px; color: var(--ios-label2); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-item-ai-summary { font-size: 12px; color: var(--ios-purple); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: italic; }
.mail-item-meta { display: flex; gap: 5px; margin-top: 3px; flex-wrap: wrap; align-items: center; }

/* Thread count badge */
.thread-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ios-fill3); font-size: 11px; font-weight: 600; color: var(--ios-label2); }

/* Triage badges */
.triage-high   { background: rgba(255,69,58,.12); color: var(--ios-red); }
.triage-medium { background: rgba(255,149,0,.12); color: var(--ios-orange); }
.triage-low    { background: rgba(10,132,255,.12); color: var(--ios-blue); }
.triage-newsletter { background: rgba(191,90,242,.10); color: var(--ios-purple); }
.triage-transactional { background: rgba(50,215,75,.10); color: var(--ios-green); }

/* Unread indicator — iOS Mail style: solid blue dot left of row */
.mail-unread-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ios-blue); flex-shrink: 0;
  margin-top: 6px; align-self: flex-start;
}

/* Sidebar list wrapper: add horizontal margin for inset effect */
.mail-list { margin: 0 16px; }

/* §11 — Pull to Refresh ────────────────────────────────── */
.pull-indicator { text-align: center; padding: 0; overflow: hidden; height: 0; transition: height .3s var(--ease-ios); color: var(--ios-label2); font-size: 13px; font-weight: 400; display: flex; align-items: center; justify-content: center; }
.pull-indicator.pulling, .pull-indicator.refreshing { height: 44px; }
.pull-spinner { width: 20px; height: 20px; border: 2px solid var(--ios-sep-opaque); border-top-color: var(--ios-blue); border-radius: 50%; margin-right: 8px; }
.pull-spinner.spinning { animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* §12 — Email Detail ─────────────────────────────────── */
.mail-detail {
  position: fixed; inset: 0; z-index: 100;
  background: var(--ios-bg); transform: translateX(100%);
  transition: transform .35s var(--ease-push);
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top);
}
.mail-detail.open { transform: translateX(0); }
.mail-detail-header {
  display: flex; align-items: center; gap: 4px; padding: 0 8px;
  border-bottom: .5px solid var(--ios-sep);
  background: var(--ios-nav-bg); -webkit-backdrop-filter: var(--ios-blur); backdrop-filter: var(--ios-blur);
  flex-shrink: 0; height: var(--ios-nav-h);
}
.mail-detail-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mail-detail-actions {
  display: flex; justify-content: space-around; align-items: center;
  padding: 6px 8px;
  border-top: .5px solid var(--ios-sep);
  background: var(--ios-nav-bg); -webkit-backdrop-filter: var(--ios-blur); backdrop-filter: var(--ios-blur);
  padding-bottom: calc(6px + env(safe-area-inset-bottom));
  flex-shrink: 0; gap: 2px;
}
.mail-detail-actions button {
  background: none; border: none; color: var(--ios-blue); font-size: 24px;
  width: 44px; height: 44px; border-radius: 22px; cursor: pointer; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  transition: opacity .15s;
}
.mail-detail-actions button:active { opacity: .5; }
.mail-detail-actions button span { font-size: 9px; font-weight: 500; color: var(--ios-label2); white-space: nowrap; }

/* Thread messages */
.thread-message { padding: 16px; border-bottom: .5px solid var(--ios-sep); }
.thread-msg-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.thread-msg-avatar { width: 40px; height: 40px; border-radius: 50%; background: rgba(10,132,255,.15); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; flex-shrink: 0; color: var(--ios-blue); position: relative; overflow: hidden; }
.thread-msg-info { flex: 1; min-width: 0; }
.thread-msg-sender { font-size: 15px; font-weight: 600; letter-spacing: -0.24px; color: var(--ios-label); }
.thread-msg-meta { font-size: 13px; color: var(--ios-label2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-msg-body { font-size: 17px; line-height: 1.47; letter-spacing: -0.41px; color: var(--ios-label); padding: 14px; background: var(--ios-bg2); border-radius: 10px; overflow-wrap: break-word; word-break: break-word; }
.thread-msg-body img { max-width: 100%; height: auto; border-radius: 8px; }
.email-html-iframe { width: 100%; border: none; border-radius: 10px; display: block; background: #fff; min-height: 80px; overflow: hidden; }

/* §13 — Attachments ─────────────────────────────────── */
.att-section { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.att-section-title { font-size: 13px; font-weight: 600; color: var(--ios-label2); letter-spacing: -0.08px; text-transform: uppercase; font-size: 12px; }
.att-img-card { border-radius: 10px; overflow: hidden; background: var(--ios-bg2); cursor: pointer; }
.att-img-card img { width: 100%; max-height: 300px; object-fit: contain; background: #1a1a1a; display: block; }
.att-img-caption { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 13px; }
.att-img-caption-name { flex: 1; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ios-label); }
.att-img-expand { width: 28px; height: 28px; border-radius: 8px; background: var(--ios-fill3); border: none; color: var(--ios-label); display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; flex-shrink: 0; }
.att-file-chip { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--ios-bg2); text-decoration: none; color: inherit; transition: opacity .12s; }
.att-file-chip:active { opacity: .7; }
.att-file-icon { font-size: 22px; flex-shrink: 0; }
.att-file-name { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ios-label); }
.att-file-size { font-size: 13px; color: var(--ios-label2); flex-shrink: 0; }
.att-file-action { padding: 5px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; background: rgba(10,132,255,.15); color: var(--ios-blue); flex-shrink: 0; text-decoration: none; }
#att-lightbox { position: fixed; inset: 0; z-index: 900; background: rgba(0,0,0,.95); display: none; flex-direction: column; align-items: center; justify-content: center; }
#att-lightbox.open { display: flex; }
#att-lightbox-img { max-width: 96vw; max-height: 84vh; object-fit: contain; border-radius: 10px; }
#att-lightbox-bar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: 16px; background: linear-gradient(to bottom, rgba(0,0,0,.7), transparent); }
#att-lightbox-name { flex: 1; font-size: 15px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-lb-btn { padding: 7px 14px; border-radius: 9px; border: none; background: rgba(255,255,255,.18); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; flex-shrink: 0; }
/* Media (video/audio) attachment cards */
.att-media-card { border-radius: 10px; background: var(--ios-bg2); overflow: hidden; }
.att-media-header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: .5px solid var(--ios-sep); }
.att-media-player { width: 100%; display: block; max-height: 220px; }

/* §14 — AI Side Panel ──────────────────────────────── */
.ai-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 340px; max-width: 90vw; background: var(--ios-bg); border-left: .5px solid var(--ios-sep); transform: translateX(100%); transition: transform .35s var(--ease-ios); display: flex; flex-direction: column; z-index: 150; padding-top: env(safe-area-inset-top); }
.ai-panel.open { transform: translateX(0); }
.ai-panel-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 149; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.ai-panel-backdrop.open { opacity: 1; visibility: visible; }
.ai-panel-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: .5px solid var(--ios-sep); flex-shrink: 0; }
.ai-panel-header h3 { flex: 1; font-size: 17px; font-weight: 600; letter-spacing: -0.41px; color: var(--ios-label); }
.ai-panel-chips { display: flex; gap: 6px; padding: 10px 16px; flex-wrap: wrap; flex-shrink: 0; }
.ai-chip { padding: 6px 14px; border-radius: 9999px; font-size: 15px; font-weight: 400; background: rgba(10,132,255,.12); color: var(--ios-blue); border: none; cursor: pointer; transition: opacity .15s; }
.ai-chip:active { opacity: .7; }
.ai-panel-messages { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; -webkit-overflow-scrolling: touch; }
.ai-msg { max-width: 88%; padding: 10px 14px; border-radius: 18px; font-size: 17px; letter-spacing: -0.41px; line-height: 1.47; }
.ai-msg-user { align-self: flex-end; background: var(--ios-blue); color: #fff; border-bottom-right-radius: 4px; }
.ai-msg-ai { align-self: flex-start; background: var(--ios-bg2); color: var(--ios-label); border-bottom-left-radius: 4px; }
.ai-msg-loading { align-self: flex-start; background: var(--ios-bg2); padding: 12px 16px; border-radius: 18px; border-bottom-left-radius: 4px; }
.ai-msg-loading .dots span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ios-label2); margin: 0 2px; animation: blink 1.4s infinite both; }
.ai-msg-loading .dots span:nth-child(2) { animation-delay: .2s; }
.ai-msg-loading .dots span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,80%,100%{opacity:.2} 40%{opacity:1} }
.ai-panel-input { display: flex; gap: 8px; padding: 10px 16px; border-top: .5px solid var(--ios-sep); flex-shrink: 0; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
.ai-panel-input input { flex: 1; padding: 8px 14px; border-radius: 20px; font-size: 17px; background: var(--ios-fill3); color: var(--ios-label); }
.ai-panel-input button { width: 36px; height: 36px; border-radius: 50%; background: var(--ios-blue); color: #fff; border: none; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.sentiment-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 9999px; font-size: 12px; font-weight: 600; }
.sentiment-positive { background: rgba(50,215,75,.12); color: var(--ios-green); }
.sentiment-neutral  { background: var(--ios-fill3); color: var(--ios-label2); }
.sentiment-negative { background: rgba(255,69,58,.12); color: var(--ios-red); }

/* §15 — Compose (iOS Mail style) ─────────────────────── */
.mail-compose {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  top: env(safe-area-inset-top); background: var(--ios-bg);
  transform: translateY(100%); transition: transform .4s var(--ease-sheet);
  display: flex; flex-direction: column; border-radius: 0;
}
.mail-compose.open { transform: translateY(0); }
.compose-header {
  display: flex; align-items: center; gap: 4px; padding: 0 8px;
  border-bottom: .5px solid var(--ios-sep); background: var(--ios-nav-bg);
  -webkit-backdrop-filter: var(--ios-blur); backdrop-filter: var(--ios-blur);
  flex-shrink: 0; height: var(--ios-nav-h); flex-direction: column;
}
.compose-header::before { content: ''; display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--ios-fill); margin: 6px auto 0; flex-shrink: 0; }
.compose-header-row { display: flex; align-items: center; gap: 4px; width: 100%; min-height: 38px; }
.compose-sender-card { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: .5px solid var(--ios-sep); flex-shrink: 0; min-height: 48px; }
.compose-sender-avatar { width: 36px; height: 36px; border-radius: 50%; font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: rgba(10,132,255,.15); color: var(--ios-blue); position: relative; overflow: hidden; }
.compose-sender-info { flex: 1; min-width: 0; }
.compose-sender-sublabel { font-size: 12px; color: var(--ios-label3); font-weight: 400; letter-spacing: .02em; text-transform: uppercase; font-size: 11px; margin-bottom: 1px; }
.compose-sender-select { background: none; border: none; color: var(--ios-label); font-weight: 400; font-size: 15px; font-family: var(--ios-font); cursor: pointer; outline: none; width: 100%; padding: 0; -webkit-appearance: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compose-sender-hint { display: none; }
.compose-sender-reply { display: none; }
.compose-store-nudge { font-size: 13px; color: var(--ios-blue); padding: 6px 16px; border-bottom: .5px solid var(--ios-sep); flex-shrink: 0; display: none; }
.compose-store-nudge.visible { display: block; }
.compose-fields { padding: 0; flex-shrink: 0; }
.compose-field { display: flex; align-items: center; gap: 0; padding: 0 16px; border-bottom: .5px solid var(--ios-sep); min-height: 44px; }
.compose-label { font-size: 17px; color: var(--ios-label2); min-width: 70px; font-weight: 400; letter-spacing: -0.41px; flex-shrink: 0; }
.compose-input { flex: 1; background: none; border: none; color: var(--ios-label); font-size: 17px; letter-spacing: -0.41px; font-family: var(--ios-font); outline: none; min-width: 0; align-self: stretch; min-height: 44px; }
.compose-input::placeholder { color: var(--ios-label3); }
.compose-body-wrap { flex: 1; overflow-y: auto; padding: 12px 16px 0; }
.compose-body-editor { min-height: 200px; outline: none; font-size: 17px; letter-spacing: -0.41px; line-height: 1.47; color: var(--ios-label); font-family: var(--ios-font); }
.compose-body-editor:empty::before { content: attr(data-ph); color: var(--ios-label3); }
.compose-sig { margin-top: 20px; padding-top: 14px; border-top: .5px solid var(--ios-sep); font-size: 15px; color: var(--ios-label2); line-height: 1.47; }
.compose-toolbar { display: flex; gap: 0; padding: 4px 8px; border-top: .5px solid var(--ios-sep); background: var(--ios-nav-bg); -webkit-backdrop-filter: var(--ios-blur); backdrop-filter: var(--ios-blur); flex-shrink: 0; padding-bottom: calc(4px + env(safe-area-inset-bottom)); overflow-x: auto; flex-wrap: nowrap; }
.compose-toolbar::-webkit-scrollbar { display: none; }
.compose-tool-btn { background: none; border: none; color: var(--ios-blue); font-size: 15px; padding: 8px 12px; min-height: 40px; cursor: pointer; flex-shrink: 0; font-family: var(--ios-font); font-weight: 400; white-space: nowrap; border-radius: 8px; transition: opacity .15s; }
.compose-tool-btn:active { opacity: .5; background: var(--ios-fill3); }
.compose-tool-btn.ai-btn { color: var(--ios-purple); }
.contact-autocomplete { position: absolute; left: 0; right: 0; top: 100%; background: var(--ios-bg2); border-radius: 10px; max-height: 180px; overflow-y: auto; z-index: 130; box-shadow: 0 4px 24px rgba(0,0,0,.40); display: none; }
.contact-autocomplete.show { display: block; }
.contact-option { padding: 12px 16px; font-size: 17px; cursor: pointer; border-bottom: .5px solid var(--ios-sep); color: var(--ios-label); transition: background .12s; }
.contact-option:last-child { border-bottom: none; }
.contact-option:active { background: var(--ios-fill3); }

/* Brand toggle in compose */
#c-brand-toggle:checked + .m-toggle-track { background: var(--ios-blue) !important; }
#c-brand-toggle:checked + .m-toggle-track::after { transform: translateX(20px); }

/* §16 — Settings (iOS native table look) ─────────────── */
.m-section-title { font-size: 13px; font-weight: 400; text-transform: uppercase; letter-spacing: .06em; color: var(--ios-label2); padding: 28px 16px 6px; }
.m-section-sub { font-size: 13px; color: var(--ios-label2); padding: 4px 16px 14px; line-height: 1.4; }
.m-form-group { background: var(--ios-bg2); border-radius: 10px; overflow: hidden; margin: 0 16px 16px; }
.m-form-row { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; min-height: 44px; gap: 12px; border-bottom: .5px solid var(--ios-sep); }
.m-form-row:last-child { border-bottom: none; }
.m-form-label { font-size: 17px; font-weight: 400; letter-spacing: -0.41px; flex-shrink: 0; color: var(--ios-label); }
.m-form-value { font-size: 17px; color: var(--ios-label2); text-align: right; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.41px; }
.m-form-row input, .m-form-row select { background: none; border: none; color: var(--ios-label2); font-size: 17px; letter-spacing: -0.41px; font-family: var(--ios-font); text-align: right; flex: 1; min-width: 0; outline: none; }
.m-form-row select { -webkit-appearance: none; cursor: pointer; }
.m-form-row .chevron { color: var(--ios-label3); font-size: 11px; margin-left: 4px; }
.m-form-row.tappable { cursor: pointer; }
.m-form-row.tappable:active { background: var(--ios-fill3); }
.m-toggle { position: relative; display: inline-block; width: 51px; height: 31px; flex-shrink: 0; }
.m-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.m-toggle-track { position: absolute; inset: 0; background: rgba(120,120,128,.32); border-radius: 31px; cursor: pointer; transition: background .2s; }
.m-toggle-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; background: #fff; border-radius: 50%; box-shadow: 0 3px 8px rgba(0,0,0,.15); transition: transform .2s; }
.m-toggle input:checked + .m-toggle-track { background: var(--ios-blue); }
.m-toggle input:checked + .m-toggle-track::after { transform: translateX(20px); }

/* §17 — Buttons (iOS native) ────────────────────────── */
.m-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 20px; border-radius: 14px; font-size: 17px; font-weight: 600; letter-spacing: -0.41px; font-family: var(--ios-font); border: none; cursor: pointer; min-height: 50px; -webkit-tap-highlight-color: transparent; transition: opacity .15s; }
.m-btn:active { opacity: .7; }
.m-btn-primary { background: var(--ios-blue); color: #fff; }
.m-btn-secondary { background: var(--ios-fill3); color: var(--ios-label); }
.m-btn-danger { background: rgba(255,69,58,.12); color: var(--ios-red); }
.m-btn-blue { background: rgba(10,132,255,.12); color: var(--ios-blue); }
.m-btn-purple { background: rgba(191,90,242,.12); color: var(--ios-purple); }
.m-btn-full { width: 100%; }
.m-btn-sm { padding: 8px 16px; font-size: 15px; border-radius: 10px; min-height: 36px; }
.m-btn-xs { padding: 5px 10px; font-size: 13px; border-radius: 8px; min-height: 30px; }
.m-pill { display: inline-flex; align-items: center; gap: 3px; padding: 3px 10px; border-radius: 9999px; font-size: 13px; font-weight: 600; }
.m-pill-ok { background: rgba(50,215,75,.12); color: var(--ios-green); }
.m-pill-warn { background: rgba(255,149,0,.12); color: var(--ios-orange); }
.m-pill-fail { background: rgba(255,69,58,.12); color: var(--ios-red); }
.m-pill-info { background: rgba(10,132,255,.12); color: var(--ios-blue); }
.m-pill-purple { background: rgba(191,90,242,.12); color: var(--ios-purple); }

/* §18 — Empty States ───────────────────────────────── */
.mail-empty { text-align: center; color: var(--ios-label2); padding: 60px 24px; font-size: 17px; letter-spacing: -0.41px; }
.mail-empty-icon { font-size: 52px; margin-bottom: 12px; opacity: .4; }
.mail-empty-sub { font-size: 15px; opacity: .6; margin-top: 8px; line-height: 1.4; letter-spacing: -0.24px; }
.m-loading { text-align: center; padding: 44px; color: var(--ios-label2); font-size: 15px; }
.m-loading::after { content: ''; display: block; width: 22px; height: 22px; border: 2px solid var(--ios-fill); border-top-color: var(--ios-blue); border-radius: 50%; animation: spin .8s linear infinite; margin: 12px auto 0; }

/* §19 — Toast ────────────────────────────────────── */
#m-toast { position: fixed; bottom: calc(env(safe-area-inset-bottom) + var(--ios-tab-h) + 12px); left: 50%; transform: translateX(-50%) translateY(8px) scale(.95); padding: 10px 20px; border-radius: 14px; font-size: 15px; font-weight: 600; z-index: 999; opacity: 0; transition: opacity .3s var(--ease-ios), transform .3s var(--spring); pointer-events: none; max-width: 90%; text-align: center; background: var(--ios-bg2); box-shadow: 0 4px 24px rgba(0,0,0,.40); }
#m-toast.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
#m-toast.ok { color: var(--ios-green); }
#m-toast.err { color: var(--ios-red); }

/* §20 — Account Cards ──────────────────────────── */
.account-card { background: var(--ios-bg2); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; transition: opacity .15s; cursor: pointer; }
.account-card:active { opacity: .7; }
.account-status { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-connected { background: var(--ios-green); }
.status-syncing { background: var(--ios-orange); animation: pulse 1.5s infinite; }
.status-error { background: var(--ios-red); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.dns-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* §21 — Search ─────────────────────────────────── */
.search-results { padding: 0; }
.search-highlight { background: rgba(10,132,255,.2); border-radius: 2px; padding: 0 2px; color: var(--ios-blue); }
.search-ai-section { margin: 12px 16px; padding: 14px; background: var(--ios-bg2); border-radius: 10px; }
.search-ai-section h4 { font-size: 15px; font-weight: 600; color: var(--ios-purple); margin-bottom: 8px; }
.search-ai-section p { font-size: 15px; line-height: 1.47; letter-spacing: -0.24px; color: var(--ios-label); }

/* §22 — Signatures & Templates ─────────────────── */
.sig-preview { padding: 12px; background: var(--ios-bg2); border-radius: 10px; font-size: 15px; line-height: 1.47; color: var(--ios-label2); margin-top: 8px; max-height: 120px; overflow-y: auto; }
.template-card { background: var(--ios-bg2); border-radius: 10px; padding: 14px; cursor: pointer; transition: opacity .15s; }
.template-card:active { opacity: .7; }
.rep-card { background: var(--ios-bg2); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; }
.rep-metric { display: flex; flex-direction: column; align-items: center; min-width: 60px; }
.rep-metric-value { font-size: 22px; font-weight: 700; color: var(--ios-label); }
.rep-metric-label { font-size: 12px; color: var(--ios-label2); margin-top: 2px; }

/* §23 — AI Write Sheet ─────────────────────────── */
.ai-write-sheet { position: fixed; left: 0; right: 0; bottom: 0; background: var(--ios-bg2); border-radius: 13px 13px 0 0; padding: 20px 16px; z-index: 140; transform: translateY(100%); transition: transform .4s var(--ease-sheet); padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
.ai-write-sheet.open { transform: translateY(0); }
.ai-write-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 139; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.ai-write-backdrop.open { opacity: 1; visibility: visible; }
.ai-write-sheet h4 { font-size: 17px; font-weight: 600; letter-spacing: -0.41px; margin-bottom: 12px; color: var(--ios-label); }
.ai-write-sheet textarea { width: 100%; height: 100px; padding: 12px; border-radius: 10px; background: var(--ios-fill3); color: var(--ios-label); font-size: 17px; letter-spacing: -0.41px; font-family: var(--ios-font); resize: none; border: none; outline: none; }

/* §24 — Action Sheets (iOS native) ─────────────── */
.action-sheet-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 200; display: flex; align-items: flex-end; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.action-sheet-overlay.open { opacity: 1; visibility: visible; }
.action-sheet { width: calc(100% - 16px); max-width: 400px; margin-bottom: calc(8px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; transform: translateY(100%); transition: transform .3s var(--ease-ios); }
.action-sheet-overlay.open .action-sheet { transform: translateY(0); }
.action-sheet-group { background: color-mix(in srgb, var(--bg-surface) 94%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-radius: 13px; overflow: hidden; }
.action-sheet-btn { display: block; width: 100%; padding: 18px 16px; text-align: center; font-size: 20px; font-family: var(--ios-font); font-weight: 400; color: var(--ios-blue); background: transparent; border: none; border-bottom: .5px solid var(--ios-sep); cursor: pointer; min-height: 57px; transition: background .12s; }
.action-sheet-btn:last-child { border-bottom: none; }
.action-sheet-btn:active { background: rgba(120,120,128,.18); }
.action-sheet-btn.destructive { color: var(--ios-red); }
.action-sheet-cancel { background: color-mix(in srgb, var(--bg-surface) 94%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-radius: 13px; }
.action-sheet-cancel .action-sheet-btn { font-weight: 600; color: var(--ios-blue); }

/* §25 — Sidebar Drawer ─────────────────────────── */
.mail-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 300;
  width: 272px; max-width: 84vw; flex-shrink: 0; transform: translateX(-100%);
  transition: transform .28s var(--ease-ios);
  background: var(--bg-surface) !important;
  border-right: .5px solid var(--ios-sep);
  box-shadow: 4px 0 40px rgba(0,0,0,.60);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; padding-top: env(safe-area-inset-top);
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.mail-sidebar.drawer-open { transform: translateX(0); }
.mail-drawer-overlay { position: fixed; inset: 0; z-index: 290; background: rgba(0,0,0,.4); opacity: 0; visibility: hidden; transition: opacity .26s var(--ease-ios); }
.mail-drawer-overlay.open { opacity: 1; visibility: visible; }
.sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 16px 12px; flex-shrink: 0; }
.sidebar-logo { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; letter-spacing: -0.41px; color: var(--ios-label); }
.sidebar-close-btn { background: var(--ios-fill3); border: none; color: var(--ios-label2); width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity .15s; flex-shrink: 0; }
.sidebar-close-btn:active { opacity: .6; }
.sidebar-acct { flex-shrink: 0; }
.sidebar-nav { padding: 4px 8px; }
.sidebar-nav-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; cursor: pointer; font-size: 17px; font-weight: 400; letter-spacing: -0.41px; color: var(--ios-label); border-radius: 10px; margin-bottom: 2px; min-height: 44px; transition: background .12s; }
.sidebar-nav-item:active { background: var(--ios-fill3); }
.sidebar-nav-item.active { background: rgba(10,132,255,.12); color: var(--ios-blue); font-weight: 600; }
.sidebar-nav-icon { display: flex; align-items: center; justify-content: center; width: 24px; flex-shrink: 0; color: var(--ios-blue); }
.sidebar-nav-item.active .sidebar-nav-icon { color: var(--ios-blue); }
.sidebar-nav-badge { margin-left: auto; font-size: 15px; font-weight: 400; color: var(--ios-label2); min-width: 20px; text-align: right; }
.sidebar-divider { height: .5px; background: var(--ios-sep); margin: 6px 16px; flex-shrink: 0; }
.sidebar-compose-btn { margin: 12px; padding: 13px; border-radius: 14px; font-size: 17px; font-weight: 600; letter-spacing: -0.41px; cursor: pointer; background: var(--ios-blue); color: #fff; border: none; display: flex; align-items: center; justify-content: center; gap: 8px; transition: opacity .15s; }
.sidebar-compose-btn:active { opacity: .8; }
.mail-reading-pane { display: none; flex-direction: column; background: var(--ios-bg); min-width: 380px; }
.reading-pane-empty { flex: 1; display: flex; align-items: center; justify-content: center; }
.reading-pane-empty-inner { text-align: center; padding: 40px 24px; color: var(--ios-label2); }
.reading-pane-empty-icon { font-size: 56px; margin-bottom: 16px; opacity: .3; }
.reading-pane-empty-title { font-size: 22px; font-weight: 700; letter-spacing: -0.45px; margin-bottom: 8px; color: var(--ios-label); }
.reading-pane-empty-sub { font-size: 15px; line-height: 1.4; max-width: 280px; letter-spacing: -0.24px; }

/* §26 — Profile Menu & Boxes ────────────────────── */
.mail-profile-btn { width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer; background: var(--ios-blue); color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: opacity .15s; position: relative; overflow: hidden; }
.mail-profile-btn:active { opacity: .7; }
.mail-profile-overlay, .mail-boxes-overlay { position: fixed; inset: 0; z-index: 340; background: rgba(0,0,0,.4); opacity: 0; visibility: hidden; transition: opacity .2s; }
.mail-profile-overlay.open, .mail-boxes-overlay.open { opacity: 1; visibility: visible; }
.mail-profile-menu { position: fixed; top: calc(var(--ios-nav-h) + env(safe-area-inset-top) + 4px); right: 8px; z-index: 350; width: 300px; max-width: 92vw; max-height: 76vh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px; background: color-mix(in srgb, var(--bg-surface) 96%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-radius: 13px; box-shadow: 0 16px 48px rgba(0,0,0,.55); transform: translateY(-8px) scale(.97); opacity: 0; visibility: hidden; transition: opacity .18s var(--ease-ios), transform .18s var(--ease-ios); }
.mail-profile-menu.open { opacity: 1; visibility: visible; transform: none; }
.mp-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 12px; }
.mp-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; background: rgba(10,132,255,.15); color: var(--ios-blue); position: relative; overflow: hidden; }
.mp-head-info { min-width: 0; }
.mp-head-name { font-size: 15px; font-weight: 600; letter-spacing: -0.24px; color: var(--ios-label); }
.mp-head-sub { font-size: 13px; color: var(--ios-label2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-item, .mp-company { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; cursor: pointer; color: var(--ios-label); font-size: 15px; transition: background .12s; }
.mp-item:active, .mp-company:active { background: var(--ios-fill3); }
.mp-item.active, .mp-company.active { background: rgba(10,132,255,.12); color: var(--ios-blue); }
.mp-item .mp-sub { margin-left: auto; font-size: 13px; color: var(--ios-label2); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-divider { height: .5px; background: var(--ios-sep); margin: 4px 4px; }
.mp-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ios-label3); padding: 4px 10px; }
.mp-co-badge { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; background: rgba(10,132,255,.15); color: var(--ios-blue); position: relative; overflow: hidden; }
.mp-co-info { flex: 1; min-width: 0; }
.mp-co-name { font-size: 15px; font-weight: 500; letter-spacing: -0.24px; color: var(--ios-label); }
.mp-co-sub { font-size: 12px; color: var(--ios-label2); }
.mail-boxes-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 350; width: 300px; max-width: 88vw; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 2px; padding: calc(env(safe-area-inset-top) + 12px) 12px 16px; background: color-mix(in srgb, var(--bg-surface) 96%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-left: .5px solid var(--ios-sep); box-shadow: -4px 0 40px rgba(0,0,0,.45); transform: translateX(100%); transition: transform .26s var(--ease-ios); }
.mail-boxes-panel.open { transform: none; }
.mbx-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px; }
.mbx-title { flex: 1; font-size: 17px; font-weight: 700; letter-spacing: -0.41px; color: var(--ios-label); }
.mbx-close { background: none; border: none; color: var(--ios-label2); cursor: pointer; display: flex; padding: 6px; }
.mbx-sub { font-size: 13px; color: var(--ios-label2); padding: 0 4px 8px; }
.mbx-item { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: 10px; cursor: pointer; transition: background .12s; }
.mbx-item:active { background: var(--ios-fill3); }
.mbx-item.active { background: rgba(10,132,255,.12); }
.mbx-avatar { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; background: rgba(10,132,255,.15); color: var(--ios-blue); position: relative; overflow: hidden; }
.mbx-info { flex: 1; min-width: 0; }
.mbx-name { font-size: 15px; font-weight: 500; letter-spacing: -0.24px; color: var(--ios-label); }
.mbx-pin { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ios-blue); border: .5px solid currentColor; border-radius: 4px; padding: 0 4px; margin-left: 4px; }
.mbx-meta { font-size: 13px; color: var(--ios-label2); }
.mbx-empty { padding: 16px 8px; color: var(--ios-label2); font-size: 15px; text-align: center; }
.mbx-foot { margin-top: auto; padding-top: 10px; }
.mbx-connect { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px; border-radius: 10px; border: .5px dashed var(--ios-sep); background: none; color: var(--ios-blue); font-size: 15px; font-weight: 600; cursor: pointer; font-family: var(--ios-font); transition: opacity .15s; }
.mbx-connect:active { opacity: .7; }

/* §27 — Floating Compose FAB (iOS style) ────────── */
.compose-fab {
  position: fixed; right: 16px;
  bottom: calc(env(safe-area-inset-bottom) + var(--ios-tab-h) + 16px);
  width: 50px; height: 50px; border-radius: 25px;
  background: var(--ios-blue); border: none; cursor: pointer; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(10,132,255,.40);
  transition: transform .15s var(--spring); -webkit-tap-highlight-color: transparent;
}
.compose-fab:active { transform: scale(.9); }
.compose-fab svg, .compose-fab iconify-icon { font-size: 22px; color: #fff; }

/* §28 — Batch Select ────────────────────────────── */
.batch-action-bar { display: none; align-items: center; gap: 8px; padding: 8px 14px; background: var(--ios-nav-bg); border-bottom: .5px solid var(--ios-sep); -webkit-backdrop-filter: var(--ios-blur); backdrop-filter: var(--ios-blur); flex-shrink: 0; z-index: 5; flex-wrap: wrap; }
.batch-action-bar.visible { display: flex; }
.batch-count { font-size: 15px; font-weight: 600; flex: 1; color: var(--ios-blue); }
.mail-item-check-wrap { display: none; align-items: center; justify-content: center; width: 28px; flex-shrink: 0; }
.select-mode .mail-item-check-wrap { display: flex; }
.select-mode .mail-unread-dot { display: none; }
.mail-item-checkbox { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--ios-sep); background: var(--ios-fill4); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: all .15s; }
.mail-item-checkbox.checked { background: var(--ios-blue); border-color: var(--ios-blue); color: #fff; font-size: 13px; font-weight: 800; }
.load-more-btn { display: block; width: calc(100% - 32px); margin: 8px 16px 16px; padding: 12px; text-align: center; border-radius: 10px; background: var(--ios-bg2); color: var(--ios-blue); font-size: 17px; font-weight: 400; letter-spacing: -0.41px; cursor: pointer; font-family: var(--ios-font); transition: opacity .15s; border: none; }
.load-more-btn:active { opacity: .6; }

/* §29 — Skeletons ──────────────────────────────── */
.skeleton { background: linear-gradient(90deg, var(--ios-bg2) 25%, var(--ios-bg3) 50%, var(--ios-bg2) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 6px; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.skeleton-line { height: 13px; margin-bottom: 8px; }
.skeleton-line.short { width: 60%; }
.skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; }

/* §30 — AI Suggestion Overlay ──────────────────── */
.ai-suggest-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 160; display: flex; align-items: flex-end; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.ai-suggest-overlay.open { opacity: 1; visibility: visible; }
.ai-suggest-card { width: calc(100% - 32px); max-width: 520px; margin-bottom: calc(16px + env(safe-area-inset-bottom)); background: var(--ios-bg2); border-radius: 13px; padding: 20px; max-height: 60vh; overflow-y: auto; box-shadow: 0 8px 40px rgba(0,0,0,.50); transform: translateY(100%); transition: transform .4s var(--ease-sheet); }
.ai-suggest-overlay.open .ai-suggest-card { transform: translateY(0); }
.ai-suggest-card h4 { font-size: 17px; font-weight: 600; letter-spacing: -0.41px; color: var(--ios-label); margin-bottom: 12px; }
.ai-suggest-body { font-size: 17px; letter-spacing: -0.41px; line-height: 1.47; color: var(--ios-label); padding: 14px; background: var(--ios-bg3); border-radius: 10px; margin-bottom: 14px; max-height: 35vh; overflow-y: auto; white-space: pre-wrap; }
.template-picker-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 155; display: flex; align-items: flex-end; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.template-picker-overlay.open { opacity: 1; visibility: visible; }
.template-picker { width: calc(100% - 32px); max-width: 520px; margin-bottom: calc(16px + env(safe-area-inset-bottom)); background: var(--ios-bg2); border-radius: 13px; padding: 20px; max-height: 70vh; overflow-y: auto; box-shadow: 0 8px 40px rgba(0,0,0,.50); transform: translateY(100%); transition: transform .4s var(--ease-sheet); }
.template-picker-overlay.open .template-picker { transform: translateY(0); }
.template-picker h4 { font-size: 17px; font-weight: 600; letter-spacing: -0.41px; color: var(--ios-label); margin-bottom: 14px; }
.tpl-item { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--ios-bg3); border-radius: 10px; margin-bottom: 8px; cursor: pointer; transition: opacity .15s; }
.tpl-item:active { opacity: .7; }
.tpl-item-icon { font-size: 22px; flex-shrink: 0; }
.tpl-item-info { flex: 1; min-width: 0; }
.tpl-item-name { font-size: 17px; font-weight: 500; letter-spacing: -0.41px; color: var(--ios-label); }
.tpl-item-desc { font-size: 13px; color: var(--ios-label2); margin-top: 2px; }
.auto-rule-card { background: var(--ios-bg2); border-radius: 10px; padding: 14px; margin-bottom: 10px; }
.auto-rule-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.auto-rule-label { font-size: 12px; font-weight: 600; color: var(--ios-label2); text-transform: uppercase; letter-spacing: .04em; }
.auto-rule-value { font-size: 15px; font-weight: 400; letter-spacing: -0.24px; color: var(--ios-label); }
.auto-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 9999px; font-size: 10px; font-weight: 700; background: rgba(191,90,242,.12); color: var(--ios-purple); margin-left: 4px; }

/* §31 — Animations ─────────────────────────────── */
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.animate-in { animation: fadeIn .28s var(--ease-ios) forwards; }
.mail-list .mail-item-wrapper { animation: fadeIn .25s var(--ease-ios) both; }

/* §32 — Brand logos ─────────────────────────────── */
.acct-current-avatar, .acct-item-avatar, .mail-avatar, .mp-avatar, .mp-co-badge,
.mbx-avatar, .mail-profile-btn, .compose-sender-avatar, .thread-msg-avatar { position: relative; overflow: hidden; }
.av-logo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--ios-bg2); border-radius: inherit; display: block; }
.mp-co-badge > .av-logo, .mbx-avatar > .av-logo, .acct-item-avatar > .av-logo { object-fit: contain; }

/* §33 — Desktop layout ──────────────────────────── */
@media (min-width: 1024px) {
  .mail-app { flex-direction: row; }
  .mail-sidebar { display: flex; position: relative; transform: none; box-shadow: none; max-width: none; width: 260px; z-index: auto; padding-top: 0; border-right: .5px solid var(--ios-sep); }
  .mail-drawer-overlay { display: none !important; }
  .mail-header { display: none; }
  .mail-tab-bar { display: none; }
  .compose-fab { display: none; }
  .mail-body { display: flex; flex-direction: row; flex: 1; overflow: hidden; position: relative; }
  #pane-inbox { flex: 1; min-width: 320px; max-width: 440px; position: relative; border-right: .5px solid var(--ios-sep); display: flex !important; flex-direction: column; }
  .acct-switcher { display: none; }
  .acct-dropdown { display: none; position: fixed; top: 56px; left: 260px; z-index: 200; width: 300px; margin: 0; border-radius: 13px; box-shadow: 0 8px 40px rgba(0,0,0,.50); }
  .acct-dropdown.open { display: block !important; max-height: 70vh; overflow-y: auto; }
  .mail-reading-pane { display: flex; flex: 1; position: relative; }
  .mail-detail { display: none !important; }
  #reading-pane-detail { flex-direction: column; background: var(--ios-bg); }
  .mail-compose { max-width: 600px; width: 90%; border-radius: 13px; left: 50%; top: 50%; max-height: 90vh; box-shadow: 0 16px 56px rgba(0,0,0,.60); }
  .mail-compose.open { transform: translate(-50%, -50%); }
  .mail-compose:not(.open) { transform: translate(-50%, 100%); }
  #pane-search, #pane-compose, #pane-accounts, #pane-settings, #pane-massmail { position: absolute; inset: 0; z-index: 2; }
  #pane-search:not(.active), #pane-compose:not(.active), #pane-accounts:not(.active), #pane-settings:not(.active), #pane-massmail:not(.active) { display: none !important; }
  .ai-panel { width: 380px; }
  .mail-profile-menu { left: 268px; right: auto; top: 56px; }
  .mail-list { margin: 0 12px; }
}
@media (min-width: 1440px) {
  .mail-sidebar { width: 280px; }
  #pane-inbox { max-width: 480px; }
}

/* §34 — Mobile Layout: iPhone 16 (393pt) / 16 Pro Max & 17 Pro Max (440pt) ── */
@media (max-width: 1023px) {

  /* ── Navigation bar: taller + bigger icons on phone ── */
  .mail-header {
    height: 52px;              /* slightly taller than HIG compact for phone comfort */
    padding: 0 4px 0 6px;
    gap: 2px;
  }
  /* Header icon buttons: large, thumb-friendly */
  .mail-header-btn {
    width: 50px;
    height: 50px;
    min-width: 50px;
    font-size: 17px;
  }
  /* Larger SVG icons inside header buttons */
  .mail-header-btn svg { width: 30px !important; height: 30px !important; }
  /* Nav title: bigger and bolder on phone */
  .mail-header-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.5px;
  }
  /* Profile avatar: slightly bigger */
  .mail-profile-btn { width: 36px; height: 36px; font-size: 15px; }

  /* ── Category strip: much larger and easier to read on phone ── */
  .mail-segment {
    margin: 8px 16px;         /* more space above/below */
    height: 44px;             /* taller — previously 36px */
    min-height: 44px;
    border-radius: 10px;
    padding: 3px;             /* slightly more padding around the pills */
    gap: 3px;
  }
  /* Category pill buttons: bigger text, taller touch target */
  .mail-seg-btn {
    min-height: 38px;         /* was 32px */
    font-size: 15px;          /* was 14px */
    font-weight: 500;
    padding: 0 16px;          /* was 14px */
    border-radius: 8px;
  }
  /* Active pill: more visible */
  .mail-seg-btn.active {
    box-shadow: 0 2px 6px rgba(0,0,0,.30), 0 1px 2px rgba(0,0,0,.12);
  }

  /* ── Email list ── */
  .mail-list {
    margin: 0;
    padding-bottom: calc(var(--ios-tab-h) + env(safe-area-inset-bottom) + 24px);
  }
  .mail-item {
    padding: 14px 16px;
    min-height: 72px;
    align-items: flex-start;
  }
  .mail-avatar { width: 44px; height: 44px; font-size: 17px; margin-top: 0; }
  .mail-item-subject { margin-top: 3px; }
  .mail-item-preview { margin-top: 2px; }
  .mail-item-meta    { margin-top: 4px; }

  /* ── Inset group corners ── */
  .mail-item-wrapper:first-child { border-radius: 10px 10px 0 0; margin-top: 6px; }
  .mail-item-wrapper:last-child  { border-radius: 0 0 10px 10px; margin-bottom: 6px; }
  .mail-item-wrapper:only-child  { border-radius: 10px; margin: 6px 0; }

  /* ── Account switcher ── */
  .acct-current { min-height: 60px; border-radius: 12px; }
  .acct-switcher { padding: 8px 16px; }

  /* ── Search bar ── */
  .mail-search { padding: 8px 16px; }
  .mail-search input { height: 40px; font-size: 17px; }

  /* ── Scroll container fills height ── */
  .mail-pane-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; }
  .mail-pane.active { display: flex; flex-direction: column; height: 100%; overflow: hidden; }

  /* Overflow guards */
  .mail-boxes-panel:not(.open), .mail-detail:not(.open), .ai-panel:not(.open),
  .mail-profile-menu:not(.open), .ai-write-sheet:not(.open),
  .ai-panel-backdrop:not(.open), .action-sheet-overlay:not(.open),
  .mail-drawer-overlay:not(.open) { visibility: hidden; }
  .compose-toolbar { overflow-x: auto !important; flex-wrap: nowrap !important; }
  #inbox-categories, #inbox-segment { flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
}

/* iPhone 16 Pro Max & iPhone 17 Pro Max (428-460pt, taller screens) */
@media (min-width: 428px) and (max-width: 460px) {
  .mail-item { padding: 14px 20px; }
  .acct-current { padding: 14px 20px; }
  .acct-switcher { padding: 8px 20px; }
  .mail-search { padding: 8px 20px; }
  .mail-segment { margin: 8px 20px; }
  .mail-avatar { width: 46px; height: 46px; }
  /* Even larger header on biggest phones */
  .mail-header { height: 56px; }
  .mail-header-btn { width: 52px; height: 52px; min-width: 52px; }
  .mail-header-btn svg { width: 32px !important; height: 32px !important; }
  .mail-seg-btn { font-size: 16px; padding: 0 18px; min-height: 40px; }
  .mail-segment { height: 46px; min-height: 46px; }
}

/* iPhone 16/17 standard (390-427pt) */
@media (min-width: 390px) and (max-width: 427px) {
  .mail-item { padding: 13px 16px; }
  .mail-tab { padding: 8px 4px 0; }
}

/* iPhone SE / small (<=380pt) */
@media (max-width: 380px) {
  .mail-tab .tab-label { display: none; }
  .mail-item { padding: 12px 14px; }
  .mail-avatar { width: 38px; height: 38px; }
  .mail-seg-btn { font-size: 14px; padding: 0 12px; }
  .mail-segment { height: 40px; min-height: 40px; }
  /* Slightly smaller icons on SE but still readable */
  .mail-header-btn { width: 46px; height: 46px; min-width: 46px; }
  .mail-header-btn svg { width: 28px !important; height: 28px !important; }
}

/* §35 — Glass sidebar override (fight ios-glass.css) ─ */
body.glass-page [class*="sidebar"],
body.glass-page .sidebar-nav-item, body.glass-page .sidebar-nav-icon,
body.glass-page .sidebar-header, body.glass-page .sidebar-logo,
body.glass-page .sidebar-close-btn, body.glass-page .sidebar-compose-btn,
body.glass-page .sidebar-divider, body.glass-page .sidebar-nav-badge, body.glass-page .sidebar-acct, body.glass-page .sidebar-nav {
  background: none !important; backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important; border-color: transparent !important;
}
body.glass-page .mail-sidebar, .mail-sidebar.hy-drawer, .mail-sidebar.hy-drawer--left, .mail-sidebar {
  background: var(--bg-surface) !important; backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important; border-color: transparent !important;
  border-right: .5px solid rgba(84,84,88,.65) !important;
  box-shadow: 4px 0 40px rgba(0,0,0,.60) !important;
}

/* §36 — Light Mode Overrides (all light themes: Beach Day, ChatGPT, Clean Light…) ─ */
html[data-mode="light"] {
  /* iOS system backgrounds → iOS Light Mode */
  --ios-bg:          #F2F2F7 !important;
  --ios-bg2:         #FFFFFF !important;
  --ios-bg3:         #F2F2F7 !important;
  --ios-grouped:     #F2F2F7 !important;
  --ios-grouped2:    #FFFFFF !important;
  --ios-grouped3:    #F2F2F7 !important;
  /* iOS labels → dark text */
  --ios-label:       #000000 !important;
  --ios-label2:      rgba(60,60,67,0.60) !important;
  --ios-label3:      rgba(60,60,67,0.30) !important;
  --ios-label4:      rgba(60,60,67,0.18) !important;
  /* iOS fills → light fills */
  --ios-fill:        rgba(120,120,128,0.20) !important;
  --ios-fill2:       rgba(120,120,128,0.16) !important;
  --ios-fill3:       rgba(118,118,128,0.12) !important;
  --ios-fill4:       rgba(118,118,128,0.08) !important;
  --ios-fill-tertiary: rgba(118,118,128,0.12) !important;
  /* iOS separators → light */
  --ios-sep:         rgba(60,60,67,0.29) !important;
  --ios-sep-opaque:  #C6C6C8 !important;
  /* iOS nav bar glass → light frosted */
  --ios-nav-bg:      rgba(242,242,247,0.94) !important;
  /* iOS system accent colors → light variants */
  --ios-blue:        #007AFF !important;
  --ios-red:         #FF3B30 !important;
  --ios-green:       #34C759 !important;
  --ios-orange:      #FF9500 !important;
  --ios-yellow:      #FFCC00 !important;
  --ios-purple:      #AF52DE !important;
  --ios-pink:        #FF2D55 !important;
  --ios-teal:        #5AC8FA !important;
  --ios-indigo:      #5856D6 !important;
  /* Accent shortcuts */
  --accent:          #007AFF !important;
  --accent-dim:      rgba(0,122,255,0.12) !important;
  --accent-glow:     rgba(0,122,255,0.22) !important;
  --accent-text:     #FFFFFF !important;
  /* Input border focus */
  --border-focus:    rgba(0,122,255,0.50) !important;
  /* Glass overrides → light frosted glass */
  --glass-bg:        rgba(255,255,255,0.72) !important;
  --glass-bg-light:  rgba(255,255,255,0.52) !important;
  --glass-bg-heavy:  rgba(255,255,255,0.90) !important;
  --glass-border:    rgba(0,0,0,0.10) !important;
  --glass-border-light: rgba(0,0,0,0.06) !important;
  --glass-inset-shadow: inset 0 1px 0 rgba(255,255,255,0.80) !important;
  --glass-shadow:    0 8px 40px rgba(0,0,0,0.10) !important;
  --glass-shadow-lg: 0 16px 56px rgba(0,0,0,0.14) !important;
  /* Legacy bg tokens */
  --bg-deep:         #F2F2F7 !important;
  --bg-surface:      #FFFFFF !important;
  --bg-card:         #FFFFFF !important;
  --bg-card-hover:   #F5F5F5 !important;
  --bg-input:        rgba(0,0,0,0.04) !important;
  /* Legacy mail- compat tokens */
  --mail-bg:         #F2F2F7 !important;
  --mail-surface:    #F2F2F7 !important;
  --mail-card:       #FFFFFF !important;
  --mail-card-h:     #F5F5F5 !important;
  --mail-card-solid: #FFFFFF !important;
  --mail-border:     rgba(60,60,67,0.29) !important;
  --mail-frost:      rgba(242,242,247,0.94) !important;
  --mail-gray:       rgba(60,60,67,0.60) !important;
  --mail-gray-t:     rgba(60,60,67,0.30) !important;
  /* Swipe action colors don't need to change */
}
/* Light mode: body and root containers */
html[data-mode="light"] body,
html[data-mode="light"] .mail-app,
html[data-mode="light"] .mail-pane,
html[data-mode="light"] .mail-detail {
  background: var(--ios-bg) !important;
  color: var(--ios-label) !important;
}
/* Light mode: sidebar solid background (fights hardcoded #1A1C23) */
html[data-mode="light"] .mail-sidebar,
html[data-mode="light"] .mail-sidebar.hy-drawer,
html[data-mode="light"] .mail-sidebar.hy-drawer--left,
html[data-mode="light"] body.glass-page .mail-sidebar {
  background: #FFFFFF !important;
  border-right: .5px solid rgba(60,60,67,0.18) !important;
  box-shadow: 4px 0 20px rgba(0,0,0,0.08), inset -1px 0 0 rgba(0,0,0,0.06) !important;
}
/* Light mode: sidebar nav items inherit label color */
html[data-mode="light"] body.glass-page [class*="sidebar"],
html[data-mode="light"] body.glass-page .sidebar-nav-item,
html[data-mode="light"] body.glass-page .sidebar-nav-icon,
html[data-mode="light"] body.glass-page .sidebar-header,
html[data-mode="light"] body.glass-page .sidebar-logo,
html[data-mode="light"] body.glass-page .sidebar-close-btn,
html[data-mode="light"] body.glass-page .sidebar-compose-btn,
html[data-mode="light"] body.glass-page .sidebar-divider,
html[data-mode="light"] body.glass-page .sidebar-nav-badge,
html[data-mode="light"] body.glass-page .sidebar-acct,
html[data-mode="light"] body.glass-page .sidebar-nav {
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: transparent !important;
}
html[data-mode="light"] .sidebar-logo,
html[data-mode="light"] .sidebar-nav-item { color: var(--ios-label) !important; }
html[data-mode="light"] .sidebar-nav-item:active { background: rgba(0,0,0,0.05) !important; }
html[data-mode="light"] .sidebar-nav-item.active { background: rgba(0,122,255,0.10) !important; }
html[data-mode="light"] .sidebar-divider { background: rgba(60,60,67,0.18) !important; }
/* Light mode: email list rows */
html[data-mode="light"] .mail-item,
html[data-mode="light"] .mail-item-unread { background: var(--ios-bg2) !important; }
html[data-mode="light"] .mail-item:active { background: var(--ios-fill3) !important; }
html[data-mode="light"] .mail-item-wrapper { background: var(--ios-bg2) !important; border-bottom-color: var(--ios-sep) !important; }
/* Light mode: account switcher & dropdown */
html[data-mode="light"] .acct-current,
html[data-mode="light"] .acct-dropdown-inner { background: var(--ios-bg2) !important; }
html[data-mode="light"] .acct-switcher,
html[data-mode="light"] .acct-dropdown { background: var(--ios-bg) !important; }
/* Light mode: nav bars */
html[data-mode="light"] .mail-header,
html[data-mode="light"] .mail-tab-bar { background: var(--ios-nav-bg) !important; border-color: var(--ios-sep) !important; }
/* Light mode: action sheet glass → use light blur */
html[data-mode="light"] .action-sheet-group,
html[data-mode="light"] .action-sheet-cancel { background: rgba(242,242,247,0.92) !important; }
/* Light mode: compose window */
html[data-mode="light"] .mail-compose,
html[data-mode="light"] .compose-header { background: var(--ios-bg) !important; }
/* Light mode: search bar */
html[data-mode="light"] .mail-search { background: var(--ios-bg) !important; }
/* Light mode: segmented control */
html[data-mode="light"] .mail-segment { background: var(--ios-fill3) !important; }
/* Light mode: mail detail panel */
html[data-mode="light"] .mail-detail { background: var(--ios-bg) !important; }
html[data-mode="light"] .mail-detail-header,
html[data-mode="light"] .mail-detail-actions { background: var(--ios-nav-bg) !important; }
html[data-mode="light"] .thread-msg-body { background: var(--ios-bg2) !important; }
/* Light mode: profile + boxes panels */
html[data-mode="light"] .mail-profile-menu,
html[data-mode="light"] .mail-boxes-panel { background: rgba(242,242,247,0.96) !important; }

/* ── Beach Day (beach + summer-beach) extra palette overrides ── */
html[data-theme="beach"][data-mode="light"],
html[data-theme="summer-beach"][data-mode="light"] {
  --ios-bg:       #fdf5e6 !important;
  --ios-bg2:      #fffaf0 !important;
  --ios-bg3:      #f5e6cc !important;
  --ios-label:    #3e2723 !important;
  --ios-label2:   rgba(62,39,35,0.62) !important;
  --ios-label3:   rgba(62,39,35,0.38) !important;
  --ios-label4:   rgba(62,39,35,0.20) !important;
  --ios-sep:      rgba(160,120,70,0.28) !important;
  --ios-sep-opaque: rgba(160,120,70,0.45) !important;
  --ios-nav-bg:   rgba(253,245,230,0.96) !important;
  --ios-fill:     rgba(160,120,70,0.18) !important;
  --ios-fill2:    rgba(160,120,70,0.14) !important;
  --ios-fill3:    rgba(160,120,70,0.10) !important;
  --ios-fill4:    rgba(160,120,70,0.06) !important;
  --mail-bg:      #fdf5e6 !important;
  --mail-card:    #fffaf0 !important;
  --mail-card-h:  #f5e6cc !important;
  --mail-card-solid: #fffaf0 !important;
  --mail-border:  rgba(160,120,70,0.28) !important;
  --mail-frost:   rgba(253,245,230,0.96) !important;
  --mail-gray:    rgba(62,39,35,0.62) !important;
  --mail-gray-t:  rgba(62,39,35,0.38) !important;
  --bg-deep:      #f5e6cc !important;
  --bg-surface:   #fffaf0 !important;
  --bg-card:      rgba(255,250,240,0.95) !important;
  --bg-card-hover: #edd8aa !important;
}
html[data-theme="beach"][data-mode="light"] { --ios-blue: #c4843a !important; --accent: #c4843a !important; }
html[data-theme="summer-beach"][data-mode="light"] { --ios-blue: #00838f !important; --accent: #00838f !important; }
html[data-theme="beach"][data-mode="light"] .mail-sidebar,
html[data-theme="summer-beach"][data-mode="light"] .mail-sidebar,
html[data-theme="beach"][data-mode="light"] body.glass-page .mail-sidebar,
html[data-theme="summer-beach"][data-mode="light"] body.glass-page .mail-sidebar {
  background: #fffaf0 !important;
  border-right: .5px solid rgba(160,120,70,0.20) !important;
  box-shadow: 4px 0 20px rgba(62,39,35,0.08) !important;
}