/* ============================================================
   FOREST THEME — a mail app set in the woods.
   Light mode: a sunlit clearing (sage paper, fern greens, pollen-gold motes).
   Dark mode (the star): forest at night — moonlit sky, mossy chrome, and a
   swarm of fireflies (#forest, near the bottom of this file) that drifts
   across the ENTIRE page on top of every surface, nav to open email.
   ============================================================ */
:root {
    --paper: #f2f5ee;
    --card: #fbfcf8;
    --card-2: #ffffff;        /* a step above --card */
    --ink: #1c2b20;
    --muted: #54685a;
    --faint: #6e8274;
    --line: #d9e1d4;
    --accent: #2f7d4f;         /* fern green */
    --accent-soft: #e3f0e5;
    --danger: #b4432e;
    --unread: #a8790a;         /* firefly gold, daylight-legible */
    --on-accent: #ffffff;      /* text color used on top of --accent fills */
    --scrim: rgba(16,28,20,.4);
    --toast-bg: #0f1f14;       /* fixed — the toast is a dark chip in both themes */
    --toast-fg: #ffffff;
    --apple: #d6402c;          /* fixed — nav-tree apples, same red in both themes */
    --radius: 12px;
    --radius-sm: 8px;
    --radius-full: 999px;
    --shadow-sm: 0 1px 2px rgba(20,35,25,.06), 0 1px 1px rgba(20,35,25,.04);
    --shadow-lg: 0 24px 48px -16px rgba(20,35,25,.28), 0 4px 12px rgba(20,35,25,.08);
    --ease: 150ms cubic-bezier(.2,.7,.3,1);
    --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
    --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    /* Glass surfaces: translucent panel fills that let the forest scene
       show through a backdrop-filter blur. --glass-strong is for surfaces that
       need more opacity behind text-dense content (modals, login). */
    --glass: rgba(251,252,248,.55);
    --glass-strong: rgba(251,252,248,.85);
    --glass-line: rgba(28,43,32,.10);
    --glow-accent: 0 4px 24px -6px rgba(47,125,79,.30);
    --flair: #a8790a;   /* firefly gold — motes, brand gradient, unread */
    --bark: #5c4429;    /* nav-tree trunk/branches */
    --ambient: radial-gradient(620px 520px at 80% -6%, rgba(255,236,170,.42), transparent 60%),
               linear-gradient(180deg, #eef3e8, #f2f5ee);
  }

  /* Dark palette — WCAG AA+ checked (body text ~15-16:1, secondary ~8:1,
     tertiary ~7:1, borders ~3.3:1 against panel). Follows system by default;
     [data-theme] attribute (set by the nav toggle) overrides it either way. */
  @media (prefers-color-scheme: dark) {
    :root {
      --paper: #070d09;
      --card: #101a13;
      --card-2: #16221a;      /* a step lighter than --card */
      --ink: #e9f2e9;
      --muted: #a9bfa9;
      --faint: #96ab9a;
      --line: #5f7263;
      --accent: #6fd18f;       /* moonlit moss */
      --accent-soft: #12291a;
      --danger: #ff8a70;
      --unread: #ffd968;       /* firefly gold */
      --on-accent: #08150c;
      --scrim: rgba(0,0,0,.6);
      --shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 1px 1px rgba(0,0,0,.25);
      --shadow-lg: 0 24px 48px -16px rgba(0,0,0,.6), 0 4px 16px rgba(0,0,0,.4);
      --glass: rgba(13,22,16,.5);
      --glass-strong: rgba(16,26,19,.85);
      --glass-line: rgba(214,255,214,.08);
      --glow-accent: 0 4px 28px -6px rgba(111,209,143,.45);
      --flair: #ffd968;
      --bark: #7a5c37;    /* nav-tree trunk/branches, lightened for dark bg */
      --ambient: radial-gradient(circle 90px at 82% 9%, rgba(240,248,235,.34) 0%, rgba(240,248,235,.15) 55%, transparent 100%),
                 radial-gradient(560px 480px at 82% 9%, rgba(190,220,190,.10), transparent 65%),
                 linear-gradient(180deg, #0c1710 0%, #070d09 55%, #040a06 100%);
    }
  }
  :root[data-theme="dark"] {
    --paper: #070d09;
    --card: #101a13;
    --card-2: #16221a;
    --ink: #e9f2e9;
    --muted: #a9bfa9;
    --faint: #96ab9a;
    --line: #5f7263;
    --accent: #6fd18f;
    --accent-soft: #12291a;
    --danger: #ff8a70;
    --unread: #ffd968;
    --on-accent: #08150c;
    --scrim: rgba(0,0,0,.6);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 1px 1px rgba(0,0,0,.25);
    --shadow-lg: 0 24px 48px -16px rgba(0,0,0,.6), 0 4px 16px rgba(0,0,0,.4);
    --glass: rgba(13,22,16,.5);
    --glass-strong: rgba(16,26,19,.85);
    --glass-line: rgba(214,255,214,.08);
    --glow-accent: 0 4px 28px -6px rgba(111,209,143,.45);
    --flair: #ffd968;
    --bark: #7a5c37;    /* nav-tree trunk/branches, lightened for dark bg */
    --ambient: radial-gradient(circle 90px at 82% 9%, rgba(240,248,235,.34) 0%, rgba(240,248,235,.15) 55%, transparent 100%),
               radial-gradient(560px 480px at 82% 9%, rgba(190,220,190,.10), transparent 65%),
               linear-gradient(180deg, #0c1710 0%, #070d09 55%, #040a06 100%);
  }
  :root[data-theme="light"] {
    --paper: #f2f5ee;
    --card: #fbfcf8;
    --card-2: #ffffff;
    --ink: #1c2b20;
    --muted: #54685a;
    --faint: #6e8274;
    --line: #d9e1d4;
    --accent: #2f7d4f;
    --accent-soft: #e3f0e5;
    --danger: #b4432e;
    --unread: #a8790a;
    --on-accent: #ffffff;
    --scrim: rgba(16,28,20,.4);
    --shadow-sm: 0 1px 2px rgba(20,35,25,.06), 0 1px 1px rgba(20,35,25,.04);
    --shadow-lg: 0 24px 48px -16px rgba(20,35,25,.28), 0 4px 12px rgba(20,35,25,.08);
    --glass: rgba(251,252,248,.55);
    --glass-strong: rgba(251,252,248,.85);
    --glass-line: rgba(28,43,32,.10);
    --glow-accent: 0 4px 24px -6px rgba(47,125,79,.30);
    --flair: #a8790a;
    --bark: #5c4429;    /* nav-tree trunk/branches */
    --ambient: radial-gradient(620px 520px at 80% -6%, rgba(255,236,170,.42), transparent 60%),
               linear-gradient(180deg, #eef3e8, #f2f5ee);
  }
  * { box-sizing: border-box; }
  html, body { height: 100%; margin: 0; overflow: hidden; }
  body {
    font-family: var(--sans);
    color: var(--ink);
    background: var(--ambient);
    background-attachment: fixed;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  /* ---------- forest scene: fireflies ----------
     A full-viewport layer painted ON TOP of the app (nav, list, and an open
     email alike) — not tucked behind the glass panels, which is where a
     previous version hid them into invisibility. mix-blend-mode: screen on
     each firefly means they only ever brighten what's under them (a glowing
     mote over dark chrome) and barely register over white/bright text, so
     they don't smear legibility. pointer-events: none throughout so nothing
     underneath is unclickable. */
  #forest { position: fixed; inset: 0; z-index: 45; pointer-events: none; }
  #forest i {
    position: absolute; width: 7px; height: 7px; border-radius: 50%;
    background: var(--flair); opacity: 0; mix-blend-mode: screen;
    box-shadow: 0 0 10px 3px color-mix(in srgb, var(--flair) 85%, transparent),
                0 0 28px 10px color-mix(in srgb, var(--flair) 45%, transparent);
    animation: ff-drift-a 20s ease-in-out infinite, ff-blink 8s ease-in-out infinite;
  }
  /* three wander paths, spanning most of the viewport; each firefly mixes a
     path with its own timing so the swarm never visibly repeats */
  @keyframes ff-drift-a { 0%,100% { translate: 0 0; } 25% { translate: 90px -70px; } 50% { translate: -40px -140px; } 75% { translate: -110px -50px; } }
  @keyframes ff-drift-b { 0%,100% { translate: 0 0; } 30% { translate: -85px -95px; } 60% { translate: 60px -160px; } 80% { translate: 110px -40px; } }
  @keyframes ff-drift-c { 0%,100% { translate: 0 0; } 20% { translate: 55px 60px; } 55% { translate: -70px 115px; } 75% { translate: -125px 30px; } }
  @keyframes ff-blink { 0%, 42%, 100% { opacity: 0; } 6%, 10% { opacity: 1; } 8% { opacity: .4; } 14%, 30% { opacity: .95; } 36% { opacity: .2; } }
  #forest i:nth-of-type(1)  { left: 6%;  top: 78%; animation-duration: 19s, 7s; }
  #forest i:nth-of-type(2)  { left: 13%; top: 22%; animation-name: ff-drift-b, ff-blink; animation-duration: 26s, 9.5s; animation-delay: -4s, 1.2s; width: 5px; height: 5px; }
  #forest i:nth-of-type(3)  { left: 21%; top: 55%; animation-name: ff-drift-c, ff-blink; animation-duration: 22s, 8.2s; animation-delay: -9s, 2.8s; }
  #forest i:nth-of-type(4)  { left: 29%; top: 12%; animation-duration: 28s, 11s; animation-delay: -14s, .6s; width: 8px; height: 8px; }
  #forest i:nth-of-type(5)  { left: 37%; top: 66%; animation-name: ff-drift-b, ff-blink; animation-duration: 17s, 6.4s; animation-delay: -2s, 3.4s; width: 5px; height: 5px; }
  #forest i:nth-of-type(6)  { left: 45%; top: 30%; animation-name: ff-drift-c, ff-blink; animation-duration: 30s, 12s; animation-delay: -21s, 1.8s; }
  #forest i:nth-of-type(7)  { left: 53%; top: 85%; animation-duration: 24s, 9s; animation-delay: -7s, 4.6s; }
  #forest i:nth-of-type(8)  { left: 61%; top: 18%; animation-name: ff-drift-b, ff-blink; animation-duration: 21s, 7.7s; animation-delay: -12s, .3s; width: 8px; height: 8px; }
  #forest i:nth-of-type(9)  { left: 69%; top: 58%; animation-name: ff-drift-c, ff-blink; animation-duration: 27s, 10.3s; animation-delay: -18s, 2.2s; width: 5px; height: 5px; }
  #forest i:nth-of-type(10) { left: 77%; top: 26%; animation-duration: 18s, 6.9s; animation-delay: -5s, 5.1s; }
  #forest i:nth-of-type(11) { left: 85%; top: 72%; animation-name: ff-drift-b, ff-blink; animation-duration: 25s, 8.8s; animation-delay: -16s, 3.9s; }
  #forest i:nth-of-type(12) { left: 92%; top: 40%; animation-name: ff-drift-c, ff-blink; animation-duration: 23s, 10s; animation-delay: -10s, 1.5s; width: 5px; height: 5px; }
  #forest i:nth-of-type(13) { left: 8%;  top: 40%; animation-name: ff-drift-c, ff-blink; animation-duration: 29s, 11.4s; animation-delay: -6s, 2.5s; width: 6px; height: 6px; }
  #forest i:nth-of-type(14) { left: 58%; top: 48%; animation-name: ff-drift-a, ff-blink; animation-duration: 20s, 7.9s; animation-delay: -13s, 4s; }
  #forest i:nth-of-type(15) { left: 95%; top: 88%; animation-name: ff-drift-b, ff-blink; animation-duration: 24s, 9.1s; animation-delay: -8s, 1s; width: 5px; height: 5px; }
  @media (prefers-reduced-motion: reduce) {
    #forest i { animation: none; opacity: .5; }
  }
  button { font-family: inherit; color: inherit; cursor: pointer; }
  .mono { font-family: var(--mono); }

  /* ---------- login ---------- */
  /* transparent so the forest scene shows behind the login card */
  #login {
    position: fixed; inset: 0; display: grid; place-items: center;
  }
  .login-card {
    width: min(360px, 90vw); background: var(--glass-strong);
    -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3);
    border: 1px solid var(--glass-line); border-radius: var(--radius);
    padding: 32px 28px; box-shadow: var(--shadow-lg), var(--glow-accent);
  }
  .login-logo { width: 36px; height: 36px; border-radius: var(--radius-sm); margin-bottom: 12px; display: block; }
  .login-card h1 { font-size: 18px; margin: 0 0 4px; letter-spacing: -0.01em; }
  .login-card p { margin: 0 0 20px; color: var(--muted); font-size: 13px; }
  .field { display: block; width: 100%; padding: 10px 12px; font-size: 14px;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink);
    transition: border-color var(--ease), box-shadow var(--ease); }
  .field:focus { outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft), 0 0 16px -4px color-mix(in srgb, var(--accent) 55%, transparent); }
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: 1px solid var(--line); background: var(--card); color: var(--ink);
    padding: 9px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500;
    box-shadow: var(--shadow-sm); transition: border-color var(--ease), background-color var(--ease), transform var(--ease), box-shadow var(--ease); }
  .btn:hover { border-color: var(--faint); background: var(--paper); }
  .btn:active { transform: translateY(1px); }
  .icon-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px; }
  .icon-btn svg { display: block; }
  .icon-btn.spin svg { animation: spin .6s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .btn-primary { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 85%, white), var(--accent));
    color: var(--on-accent); border-color: var(--accent); box-shadow: var(--shadow-sm), var(--glow-accent); }
  .btn-primary:hover { filter: brightness(1.08); }
  .btn-block { width: 100%; margin-top: 14px; }
  .compose-btn { width: 100%; margin: 2px 0 16px; font-size: 13.5px; padding: 10px 14px; }
  .err { color: var(--danger); font-size: 13px; margin-top: 10px; min-height: 18px; }

  /* ---------- app shell ---------- */
  #app { display: none; height: 100vh; grid-template-columns: 220px 360px 1fr; }
  #app.app-visible { display: grid; }

  /* min-height:0 overrides the grid/flex default of min-height:auto — without
     it, a tall email (or long list) grows this column past 100vh instead of
     scrolling inside it. */
  .col-nav { border-right: 1px solid var(--glass-line); padding: 16px 12px; display: flex; flex-direction: column; gap: 2px;
    background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25);
    overflow-y: auto; min-height: 0; position: relative; }
  /* A single illustrated tree rooted at the sidebar floor, growing up behind
     the Settings/Theme/Sign-out row. Decorative only — out of flow so it
     never pushes nav items around, and non-interactive so clicks pass
     through.
     Painted the "CSS art" way (à la Lynn Fisher / Robleto's Divtober pieces):
     no SVG shapes, just dozens of radial/linear-gradient "brush strokes"
     stacked on one element's background, each a soft-edged ellipse or an
     angled color-stripe, positioned/sized by hand. Gradients listed first
     paint on top, so the stack below reads front-to-back as: warm highlight
     blobs, mid-tone mass, dark shadow blobs, branches, trunk, roots. Soft
     radial edges (color fading out by the gradient's own interpolation,
     no hard stop) are what make it read as painted rather than iconographic. */
  .nav-tree {
    --tt-hi: color-mix(in srgb, var(--accent) 55%, var(--flair));
    --tt-shadow: color-mix(in srgb, var(--accent) 45%, black);
    /* position:fixed (not absolute) and a DOM position outside .col-nav —
       .col-nav has backdrop-filter, which creates its own containing block
       and would otherwise trap a fixed child inside the sidebar's box
       instead of the true viewport. left:30px centers the 160px tree under
       the 220px desktop sidebar (mobile repositions it, see below). */
    position: fixed; left: 30px; right: auto; top: auto; bottom: 4px; transform-origin: 50% 100%;
    width: 160px; height: 300px; pointer-events: none; opacity: .68; z-index: 2;
    animation: tree-sway 7s ease-in-out infinite;
    background:
      /* — apples: small solid-red blobs sitting on the foliage, drawn on
         top of everything else in the stack — */
      radial-gradient(ellipse, var(--apple) 55%, transparent 100%) 65px 21px / 10px 10px no-repeat,
      radial-gradient(ellipse, var(--apple) 55%, transparent 100%) 56px 52px / 12px 12px no-repeat,
      radial-gradient(ellipse, var(--apple) 55%, transparent 100%) 98px 48px / 12px 12px no-repeat,
      radial-gradient(ellipse, var(--apple) 55%, transparent 100%) 76px 60px / 12px 12px no-repeat,
      radial-gradient(ellipse, var(--apple) 55%, transparent 100%) 11px 69px / 10px 10px no-repeat,
      radial-gradient(ellipse, var(--apple) 55%, transparent 100%) 30px 86px / 12px 12px no-repeat,
      radial-gradient(ellipse, var(--apple) 55%, transparent 100%) 141px 69px / 10px 10px no-repeat,
      radial-gradient(ellipse, var(--apple) 55%, transparent 100%) 122px 86px / 12px 12px no-repeat,
      /* — top lobe: highlight, mid, shadow — */
      radial-gradient(ellipse, var(--tt-hi) 55%, transparent 100%) 56px 4px / 40px 34px no-repeat,
      radial-gradient(ellipse, var(--tt-hi) 55%, transparent 100%) 38px 22px / 28px 24px no-repeat,
      radial-gradient(ellipse, var(--accent) 60%, transparent 100%) 46px 18px / 64px 56px no-repeat,
      radial-gradient(ellipse, var(--accent) 60%, transparent 100%) 78px 10px / 56px 50px no-repeat,
      radial-gradient(ellipse, var(--accent) 60%, transparent 100%) 34px 30px / 50px 46px no-repeat,
      radial-gradient(ellipse, var(--tt-shadow) 60%, transparent 100%) 58px 46px / 70px 56px no-repeat,
      /* — left lobe — */
      radial-gradient(ellipse, var(--tt-hi) 55%, transparent 100%) 20px 46px / 32px 28px no-repeat,
      radial-gradient(ellipse, var(--accent) 60%, transparent 100%) 10px 60px / 50px 46px no-repeat,
      radial-gradient(ellipse, var(--accent) 60%, transparent 100%) 34px 70px / 46px 42px no-repeat,
      radial-gradient(ellipse, var(--tt-shadow) 60%, transparent 100%) 18px 84px / 56px 48px no-repeat,
      /* — right lobe — */
      radial-gradient(ellipse, var(--tt-hi) 55%, transparent 100%) 100px 48px / 30px 26px no-repeat,
      radial-gradient(ellipse, var(--accent) 60%, transparent 100%) 104px 58px / 48px 44px no-repeat,
      radial-gradient(ellipse, var(--accent) 60%, transparent 100%) 84px 70px / 44px 40px no-repeat,
      radial-gradient(ellipse, var(--tt-shadow) 60%, transparent 100%) 96px 84px / 54px 46px no-repeat,
      /* — branches (angled color stripes) — */
      linear-gradient(35deg, transparent 5px, var(--bark) 5px, var(--bark) 11px, transparent 11px) 10px 40px / 60px 60px no-repeat,
      linear-gradient(-35deg, transparent 5px, var(--bark) 5px, var(--bark) 11px, transparent 11px) 90px 40px / 60px 60px no-repeat,
      /* — trunk: taper stripe right under the canopy, then a long straight
         stripe carrying the extra height down to the roots — */
      linear-gradient(90deg, transparent 72px, var(--bark) 72px, var(--bark) 88px, transparent 88px) 0 90px / 160px 60px no-repeat,
      linear-gradient(90deg, transparent 66px, var(--bark) 66px, var(--bark) 94px, transparent 94px) 0 140px / 160px 160px no-repeat,
      /* — root flare into the sidebar floor — */
      linear-gradient(60deg, transparent 3px, var(--bark) 3px, var(--bark) 7px, transparent 7px) 40px 282px / 30px 20px no-repeat,
      linear-gradient(-60deg, transparent 3px, var(--bark) 3px, var(--bark) 7px, transparent 7px) 95px 282px / 30px 20px no-repeat;
  }
  @keyframes tree-sway {
    0%, 100% { transform: rotate(-1.1deg); }
    50%      { transform: rotate(1.1deg); }
  }
  @media (prefers-reduced-motion: reduce) { .nav-tree { animation: none; } }
  .brand { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 10px 14px; display: flex; align-items: center; gap: 8px;
    background: linear-gradient(90deg, var(--accent), var(--flair)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .brand-logo { width: 18px; height: 18px; border-radius: 4px; }
  .nav-item { display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 10px; border-radius: var(--radius-sm); color: var(--ink); border: none; background: none; width: 100%; text-align: left; font-size: 13.5px;
    transition: background-color var(--ease), color var(--ease); }
  .nav-item:hover { background: color-mix(in srgb, var(--paper) 55%, transparent); }
  .nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 14px -6px color-mix(in srgb, var(--accent) 60%, transparent); }
  .nav-item .count { font-family: var(--mono); font-size: 11px; color: var(--faint); }
  .nav-item.active .count { color: var(--accent); }
  .nav-section { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); padding: 16px 10px 6px; }
  .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
  .nav-spacer { flex: 1; }

  /* ---------- list column ---------- */
  .col-list { border-right: 1px solid var(--glass-line); display: flex; flex-direction: column; min-width: 0; min-height: 0;
    background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25); }
  .toolbar-group { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .toolbar-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .search { flex: 1; min-width: 120px; }
  .seg { display: inline-flex; align-items: center; gap: 2px; background: color-mix(in srgb, var(--paper) 60%, transparent);
    border: 1px solid var(--glass-line); border-radius: var(--radius-full); padding: 3px; flex: none; }
  .seg button { border: none; background: transparent; padding: 6px 11px; border-radius: var(--radius-full); font-size: 12px; font-weight: 500; color: var(--muted);
    transition: background-color var(--ease), color var(--ease), box-shadow var(--ease); }
  .seg button.on { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-sm), 0 0 12px -4px color-mix(in srgb, var(--accent) 70%, transparent); font-weight: 600; }
  .seg .icon-btn { padding: 6px 9px; color: var(--muted); }
  .seg .icon-btn.on, .seg button.on.icon-btn { color: var(--on-accent); }
  .list { overflow-y: auto; flex: 1; }
  .row { display: block; width: 100%; text-align: left; border: none; background: none;
    padding: 12px 14px; border-bottom: 1px solid var(--line); border-left: 3px solid transparent;
    transition: background-color var(--ease), border-color var(--ease); }
  .row:hover { background: color-mix(in srgb, var(--paper) 55%, transparent); }
  .row.sel { background: var(--accent-soft); border-left-color: var(--accent);
    box-shadow: inset 0 0 18px -12px color-mix(in srgb, var(--accent) 70%, transparent); }
  .row-top { display: flex; align-items: center; gap: 8px; }
  .row-from { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
  /* unread marker = a resting firefly */
  .row.unread .row-from::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--unread);
    box-shadow: 0 0 8px color-mix(in srgb, var(--unread) 80%, transparent); margin-right: 7px; vertical-align: middle;
    animation: ff-pulse 3.2s ease-in-out infinite; }
  @keyframes ff-pulse {
    0%, 100% { box-shadow: 0 0 4px 1px color-mix(in srgb, var(--unread) 45%, transparent); }
    50%      { box-shadow: 0 0 10px 3px color-mix(in srgb, var(--unread) 85%, transparent); }
  }
  @media (prefers-reduced-motion: reduce) { .row.unread .row-from::before { animation: none; } }
  .row:not(.unread) .row-from { font-weight: 500; color: var(--muted); }
  .row-time { font-family: var(--mono); font-size: 11px; color: var(--faint); white-space: nowrap; }
  .row-subject { font-size: 13px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .row-preview { font-size: 12.5px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tags { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; }
  .tag { font-family: var(--mono); font-size: 10px; padding: 2px 6px; border-radius: 4px;
    border: 1px solid var(--tag-color, var(--line)); color: var(--tag-color, var(--muted)); }
  .empty { padding: 48px 20px; text-align: center; color: var(--faint); font-size: 13px; }

  /* ---------- reading column ---------- */
  .col-read { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
  .read-bar { display: flex; align-items: center; gap: 8px; padding: 12px; border-bottom: 1px solid var(--glass-line); flex-wrap: wrap;
    background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25);
    border-radius: 0 0 var(--radius) var(--radius); }
  .read-meta-bar { background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25);
    border-bottom: 1px solid var(--glass-line); border-radius: 0 0 var(--radius) var(--radius);
    padding: 16px 28px 20px; }
  .read-body { overflow-y: auto; flex: 1; padding: 24px 28px; }
  .read-subject { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 12px; }
  .read-meta { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-bottom: 4px; }
  .read-meta b { color: var(--ink); font-weight: 600; }
  .read-frame { width: 100%; border: none; margin-top: 18px; min-height: 300px; background: transparent; color-scheme: light dark; }
  .read-text { margin-top: 18px; white-space: pre-wrap; font-size: 14px; }
  .back { display: none; }
  @media (max-width: 900px) {
    .back { display: inline-flex; }
    #app.app-visible { display: flex; flex-direction: column; }
    #app.reading .col-list, #app.reading .col-nav { display: none; }
    #app:not(.reading) .col-read { display: none; }

    /* Nav becomes a short, independently-scrollable drawer on phones: brand,
       compose, and the three primary views (All mail / Trash / Sent) fit in
       its capped height with no scrolling needed; Filters/Folders/Settings
       sit below that and are reached by scrolling the drawer itself, rather
       than pushing the message list off the bottom of the screen. */
    .col-nav { flex: 0 0 auto; max-height: 214px; }
    .col-list, .col-read { flex: 1 1 auto; min-height: 0; }

    /* The decorative tree becomes a small fixed overlay pinned to the
       bottom-right corner instead of a large centered block competing for
       the nav's now-limited height. */
    .nav-tree {
      position: fixed; left: auto; right: 8px; bottom: 8px; top: auto;
      width: 84px; height: 158px; opacity: .5; z-index: 1;
      animation-name: tree-sway-corner;
    }
    @keyframes tree-sway-corner {
      0%, 100% { transform: rotate(-1.1deg); }
      50%      { transform: rotate(1.1deg); }
    }
  }
  .placeholder { flex: 1; display: grid; place-items: center; color: var(--faint); font-size: 13px; }

  /* ---------- modals ---------- */
  .overlay { position: fixed; inset: 0; background: var(--scrim); display: none; place-items: center; z-index: 50; padding: 16px;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .overlay.show { display: grid; }
  .modal { width: min(620px, 96vw); max-height: 92vh; overflow-y: auto;
    background: var(--glass-strong); -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3);
    border-radius: var(--radius); border: 1px solid var(--glass-line); padding: 20px; box-shadow: var(--shadow-lg); }
  .overlay.show .modal { animation: modal-pop .18s cubic-bezier(.2,.7,.3,1); }
  @keyframes modal-pop { from { opacity: 0; transform: translateY(8px) scale(.985); } }
  @media (prefers-reduced-motion: reduce) { .overlay.show .modal { animation: none; } }
  .modal h2 { font-size: 15px; margin: 0 0 16px; }
  .modal label, .modal .field-label { display: block; font-size: 12px; color: var(--muted); margin: 12px 0 4px; }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; padding: 0; margin: -1px; }
  .color-swatch-btn { flex: 0 0 56px; padding: 4px; height: 40px; }
  .color-swatch-preview { display: block; width: 100%; height: 100%; border-radius: var(--radius-sm); border: 1px solid var(--line); }
  .color-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; margin-top: 8px; padding: 8px;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); max-height: 220px; overflow-y: auto; }
  .color-grid button { width: 100%; aspect-ratio: 1; border-radius: 3px; border: 1px solid rgba(0,0,0,.15); padding: 0; }
  .color-grid button:hover { transform: scale(1.15); box-shadow: var(--shadow-sm); }
  .color-grid button[aria-selected="true"] { outline: 2px solid var(--accent); outline-offset: 1px; }
  textarea.field { min-height: 160px; resize: vertical; font-family: var(--sans); }
  .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
  .row-inline { display: flex; gap: 8px; }
  .row-inline > * { flex: 1; }
  select.field { appearance: auto; }
  .rule-item { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
  .rule-item .mono { font-size: 12px; color: var(--muted); flex: 1; }
  .rule-list-scroll { margin-top: 8px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--card); max-height: 220px; overflow-y: auto; }
  .rule-list-scroll .rule-item:last-child { border-bottom: none; }

  /* Labels / Folders pickers — kept visually uniform (same list chrome, row spacing,
     font) even though one is a multi-select (checkboxes) and the other single-select
     (radios), since to the user they're the same kind of "pick from a list" action. */
  .modal .picker-hint { color: var(--muted); font-size: 12px; margin: 0 0 8px; }
  .modal .picker-list { display: flex; flex-direction: column; gap: 2px; margin-top: 0; padding: 6px;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper);
    max-height: 280px; overflow-y: auto; }
  .modal .picker-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; margin: 0;
    border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 400; color: var(--ink);
    cursor: pointer; transition: background var(--ease); }
  .modal .picker-row:hover { background: var(--accent-soft); }
  .modal .picker-row input[type="checkbox"], .modal .picker-row input[type="radio"] {
    accent-color: var(--accent); width: 15px; height: 15px; flex: none; margin: 0; }
  .modal .picker-empty { font-size: 12.5px; color: var(--faint); padding: 8px 10px; }
  .link { background: none; border: none; color: var(--accent); font-size: 12px; padding: 0; }
  .toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(6px); background: var(--toast-bg); color: var(--toast-fg);
    padding: 10px 16px; border-radius: var(--radius-sm); font-size: 13px; opacity: 0;
    border: 1px solid rgba(255,255,255,.12); box-shadow: var(--shadow-lg), var(--glow-accent);
    transition: opacity var(--ease), transform var(--ease); z-index: 60; pointer-events: none; }
  .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

  /* ---------- scrollbars ---------- */
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 45%, transparent);
    border-radius: var(--radius-full); border: 3px solid transparent; background-clip: padding-box; }
  ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--accent) 75%, transparent);
    border: 3px solid transparent; background-clip: padding-box; }