/* HERE mail — one stylesheet. The app and the component lab at /lab both read this
   file, so a component cannot look different in the two places.

   The language is Chester's, taken from wonder.hereandmore.com/chester: paper-white
   ground, a serif for anything read at length, sans for the chrome, hairlines instead
   of boxes, one 10px radius, and colour held back to small accents. Mail is mostly
   other people's prose — the serif is not decoration here, it is the reading. */

:root{
  --bg:#ffffff; --soft:#fafafa; --soft-2:#f5f5f5; --card:#fafafa;
  --ink:#171717; --ink-2:#262626; --body:#737373; --muted:#858585;   /* 3.69:1 on white; #a3a3a3 was 2.52 */
  --line:#e5e5e5; --line-2:#d4d4d4;

  --d-orange:#fb923c; --d-sky:#38bdf8; --d-rose:#fb7185; --d-lime:#a3e635;
  --d-purple:#c084fc; --d-fuchsia:#e879f9; --d-teal:#2dd4bf; --d-amber:#fbbf24;
  --tint:#38bdf8; --tint-wash:rgba(56,189,248,.09);

  --radius:10px; --radius-lg:14px; --radius-pill:999px;
  --ease:cubic-bezier(.22,1,.36,1); --ease-out:cubic-bezier(.16,1,.3,1);

  /* The reading face. Chester reads in an old-style serif; this is the same
     temperament without the serifs — humanist sans, drawn from the same
     Renaissance letterforms, so it keeps the warmth and the modulated stroke.
     Optima leads on character, Seravek and Avenir Next carry the screen, and
     Gill Sans / Segoe UI catch everything else. */
  --read:Optima,Seravek,"Avenir Next",Avenir,"Gill Sans","Gill Sans MT",
    "Segoe UI",system-ui,sans-serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --serif:var(--read);   /* anything still asking for the old name */

  /* aliases so markup written against the dark language keeps working */
  --dim:var(--ink-2); --faint:var(--muted); --edge:var(--line); --edge-hi:var(--line-2);
  --panel:rgba(255,255,255,.9); --hover:var(--soft-2); --disp:var(--serif);
  --tint-hi:#0284c7; --ember:#ea580c; --mine:var(--soft-2); --theirs:var(--bg);
  --eo:var(--ease);

  /* Elevation. In light this is a cast shadow; in dark a shadow is invisible, so
     the same tokens lift the surface with a brighter hairline instead. Callers
     name the role, never the colour. */
  --elev-1:0 1px 2px rgba(0,0,0,.04);
  --elev-card:0 1px 2px rgba(0,0,0,.03),0 12px 32px -20px rgba(0,0,0,.16);
  --elev-chip:0 2px 8px rgba(0,0,0,.06);
  --elev-pop:0 24px 60px -18px rgba(0,0,0,.28);
  --elev-side:-18px 0 40px -30px rgba(0,0,0,.3);

  /* The halo is quartz. On a dark ground that is crystal white; on a white
     ground white on white is nothing, so light reads the same crystal from
     its shadow side — cool, silvered, still unmistakably the same stone. */
  --halo:#8fa8cc;
  --halo-glow:rgba(126,155,200,.55);
  --halo-inner:rgba(126,155,200,.28);
}


/* ── the other end of the same scale ─────────────────────────────────────────
   Chester's tokens are a neutral grey ramp. Dark mode is not an inversion of the
   design, it is that ramp read from the other end — so the hairlines stay
   hairlines, the serif still carries the prose, and the accents are unchanged
   because they were chosen to sit in the middle. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0e0e0e; --soft:#161616; --soft-2:#1e1e1e; --card:#161616;
    --ink:#f5f5f5; --ink-2:#e5e5e5; --body:#a3a3a3; --muted:#737373;
    --line:#262626; --line-2:#3a3a3a;
    --tint-wash:rgba(56,189,248,.12);
    --panel:rgba(20,20,20,.92);
      --elev-1:0 1px 2px rgba(0,0,0,.5);
    --elev-card:0 0 0 1px rgba(255,255,255,.045),0 16px 40px -24px rgba(0,0,0,.9);
    --elev-chip:0 2px 10px rgba(0,0,0,.55);
    --elev-pop:0 0 0 1px rgba(255,255,255,.06),0 30px 70px -20px rgba(0,0,0,.95);
    --elev-side:-24px 0 50px -32px rgba(0,0,0,.9);
    --halo:#eef3fa;
    --halo-glow:rgba(226,236,250,.72);
    --halo-inner:rgba(226,236,250,.34);
  }
}
:root[data-theme="dark"]{
  --bg:#0e0e0e; --soft:#161616; --soft-2:#1e1e1e; --card:#161616;
  --ink:#f5f5f5; --ink-2:#e5e5e5; --body:#a3a3a3; --muted:#737373;
  --line:#262626; --line-2:#3a3a3a;
  --tint-wash:rgba(56,189,248,.12);
  --panel:rgba(20,20,20,.92);
  --elev-1:0 1px 2px rgba(0,0,0,.5);
  --elev-card:0 0 0 1px rgba(255,255,255,.045),0 16px 40px -24px rgba(0,0,0,.9);
  --elev-chip:0 2px 10px rgba(0,0,0,.55);
  --elev-pop:0 0 0 1px rgba(255,255,255,.06),0 30px 70px -20px rgba(0,0,0,.95);
  --elev-side:-24px 0 50px -32px rgba(0,0,0,.9);
  --halo:#eef3fa;
  --halo-glow:rgba(226,236,250,.72);
  --halo-inner:rgba(226,236,250,.34);
}
:root[data-theme="light"]{
  --bg:#ffffff; --soft:#fafafa; --soft-2:#f5f5f5; --card:#fafafa;
  --ink:#171717; --ink-2:#262626; --body:#737373; --muted:#858585;   /* 3.69:1 on white; #a3a3a3 was 2.52 */
  --line:#e5e5e5; --line-2:#d4d4d4;
  --tint-wash:rgba(56,189,248,.09);
  --panel:rgba(255,255,255,.9);
  --halo:#8fa8cc;
  --halo-glow:rgba(126,155,200,.55);
  --halo-inner:rgba(126,155,200,.28);
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%}
body{background:var(--bg);color:var(--body);font:400 15px/1.62 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow:hidden}
button,input,textarea,select{font:inherit;color:inherit;background:none;border:none;outline:none}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--tint);outline-offset:2px;border-radius:6px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}
.aurora{display:none}   /* the dark world's atmosphere has no place on paper */

/* ── sign in ────────────────────────────────────────────────────────────── */
#gate{position:fixed;inset:0;display:grid;place-items:center;padding:24px;z-index:30;background:var(--bg)}
.card{width:min(412px,100%);background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:32px 30px 26px;
  box-shadow:var(--elev-card)}
.mark{display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:26px}
.orb{position:relative;width:120px;height:120px}
.orb canvas{position:absolute;inset:0;width:100%;height:100%}
.wordmark{font:600 14px/1 var(--sans);color:var(--ink)}
.wordmark em{font-style:normal;color:var(--muted);font-weight:400}

.deck{margin-bottom:26px}
.slides{position:relative;min-height:184px}
.slide{position:absolute;inset:0;opacity:0;transform:translateY(10px);
  transition:opacity .01s linear,transform .01s linear;pointer-events:none}
.slide.on{opacity:1;transform:none;pointer-events:auto;
  transition:opacity .5s var(--ease) .06s,transform .5s var(--ease) .06s}
.slide h2{font:500 23px/1.32 var(--read);letter-spacing:-.006em;color:var(--ink);margin-bottom:10px;text-wrap:balance}
.slide p{font:400 16.5px/1.58 var(--read);color:var(--body);text-wrap:pretty}
.dots{display:flex;gap:7px;justify-content:center;margin-top:8px}
.dots button{width:6px;height:6px;border-radius:50%;background:var(--line-2);padding:0;
  transition:background .3s var(--ease),width .3s var(--ease)}
.dots button[aria-selected=true]{background:var(--ink);width:18px;border-radius:var(--radius-pill)}

.btn{width:100%;background:var(--ink);color:var(--bg);border-radius:var(--radius);padding:13px;
  font:500 15px/1 var(--sans);transition:opacity .2s,transform .12s var(--ease)}
.btn:hover{opacity:.88}
.btn:active{transform:scale(.985)}
.btn[disabled]{opacity:.4;cursor:default}
.btn.jem{display:flex;align-items:center;justify-content:center;gap:10px}
.jemmark{width:18px;height:18px;display:block;flex:none;line-height:0;color:var(--bg)}
/* the crystal takes its colour from here, so it reads on any ground */
.jemmark svg{width:100%;height:100%;display:block}
.err{color:var(--d-rose);font-size:13.5px;margin-top:14px;min-height:1.2em;text-align:center}

/* ── shell ──────────────────────────────────────────────────────────────── */
/* `1fr` is shorthand for `minmax(auto,1fr)`, and that `auto` floor is the
   widest item's min-content — here the header's, at 645px. Every pane
   inherited the floor, so the shell overflowed the window and no ellipsis
   could ever engage. minmax(0,…) lets the tracks actually shrink. */
#app{display:none;height:100%;
  grid-template-columns:210px 352px minmax(0,1fr);
  grid-template-rows:56px minmax(0,1fr)}
#app.on{display:grid}
header{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:0 16px;min-width:0;
  border-bottom:1px solid var(--line);background:var(--panel);
  backdrop-filter:saturate(1.6) blur(14px)}
.brand{font:600 14px/1 var(--sans);color:var(--ink);flex:0 0 auto;white-space:nowrap}
.brand em{font-style:normal;color:var(--muted);font-weight:400}
header .grow{flex:1}
.kbtn{display:flex;align-items:center;gap:9px;color:var(--body);font-size:13px;
  flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;
  padding:6px 12px;border-radius:var(--radius);border:1px solid var(--line);
  background:var(--soft);transition:border-color .2s,color .2s}
.kbtn:hover{color:var(--ink);border-color:var(--line-2)}
.kbd{font:500 10.5px/1 var(--mono);color:var(--muted);border:1px solid var(--line);
  border-radius:5px;padding:3px 5px;background:var(--bg)}
.ghost{display:inline-flex;align-items:center;color:var(--body);font-size:13px;
  flex:0 0 auto;white-space:nowrap;
  padding:6px 12px;border-radius:var(--radius);border:1px solid transparent;
  transition:background .18s,color .18s,border-color .18s}
.ghost:hover{color:var(--ink);background:var(--soft-2)}
.ghost.on{color:var(--ink);border-color:var(--line-2);background:var(--soft)}
.shortcutopen{width:30px;height:30px;justify-content:center;padding:0;font:600 12px/1 var(--mono);
  border-color:var(--line)}
.flame{width:15px;height:15px;object-fit:contain;display:inline-block;
  vertical-align:-3px;margin-right:7px}
.sidehead .flame{width:18px;height:18px;margin-right:2px}
.live{display:inline-flex;align-items:center;gap:6px;font:400 11px/1 var(--mono);color:var(--muted)}
.live i{width:6px;height:6px;border-radius:50%;background:var(--line-2);display:block}
.live.on i{background:var(--d-teal);box-shadow:0 0 0 3px rgba(45,212,191,.16)}

/* ── folders ────────────────────────────────────────────────────────────── */
nav{border-right:1px solid var(--line);overflow-y:auto;padding:14px 10px;background:var(--soft);min-width:0}
nav button{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;
  text-align:left;padding:7px 11px;border-radius:8px;color:var(--body);font-size:14px;
  transition:background .15s,color .15s}
nav button:hover{background:var(--soft-2);color:var(--ink)}
nav button[aria-current=true]{background:var(--bg);color:var(--ink);font-weight:500;
  box-shadow:var(--elev-1)}
nav .n{font:500 11.5px/1 var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.navlabel{font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);padding:14px 11px 8px}
.quota{margin:16px 11px 4px;font:400 11px/1.5 var(--mono);color:var(--muted)}
.quota .bar{height:3px;border-radius:2px;background:var(--line);margin-top:6px;overflow:hidden}
.quota .bar i{display:block;height:100%;background:var(--ink-2)}

/* ── conversation list ──────────────────────────────────────────────────── */
#list{border-right:1px solid var(--line);overflow-y:auto;background:var(--bg);min-width:0}
.listbar{position:sticky;top:0;z-index:4;min-height:43px;
  padding:8px 10px 7px 14px;border-bottom:1px solid var(--line);background:var(--panel);
  backdrop-filter:saturate(1.6) blur(14px)}
.listbar.selecting{display:flex;align-items:center;gap:5px}
.listcontext{display:flex;align-items:center;gap:8px;min-width:0}
.listbar .listtitle{min-width:0;font:500 11px/1 var(--mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.listcount{font:400 10.5px/1 var(--mono);color:var(--muted);white-space:nowrap;margin-left:auto}
.listbar button{padding:6px 8px;border-radius:7px;color:var(--body);font-size:11.5px;white-space:nowrap}
.listbar button:hover{background:var(--soft-2);color:var(--ink)}
.listbar button.danger:hover{color:var(--d-rose)}
.listbar .bulkclear{font-size:11.5px;line-height:1;padding:6px 7px}
.listbar .clearsearch{padding:3px 6px;color:var(--muted);font-size:10.5px}
.listfilters{display:flex;align-items:center;gap:3px;margin-top:5px;overflow-x:auto;
  scrollbar-width:none}
.listfilters::-webkit-scrollbar{display:none}
.listfilters button{padding:4px 7px;border:1px solid transparent}
.listfilters button[aria-pressed=true]{background:var(--bg);border-color:var(--line);
  color:var(--ink);box-shadow:var(--elev-1)}
.listfilters .selectall{margin-left:auto}
.listmore{display:block;width:calc(100% - 28px);margin:14px;padding:10px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--soft);color:var(--body);font-size:12.5px}
.listmore:hover{border-color:var(--line-2);color:var(--ink)}
.listmore[disabled]{opacity:.5}
.row{display:block;width:100%;text-align:left;position:relative;
  border-bottom:1px solid var(--line);transition:background .15s}
.row:hover{background:var(--soft)}
.rowopen{display:block;width:100%;text-align:left;padding:13px 18px;color:inherit}
.rowopen:focus-visible{outline:2px solid var(--tint);outline-offset:-2px;border-radius:0}
.row.cursor:not(.open){background:var(--soft)}
.row.selected{background:var(--tint-wash)}
.row.open{background:var(--tint-wash)}
.row.open::before{content:"";position:absolute;left:0;top:0;bottom:0;
  width:2px;background:var(--tint)}
.row .top{display:flex;gap:10px;align-items:baseline;margin-bottom:2px}
.row .who{display:block;font:500 14px/1.3 var(--sans);color:var(--ink-2);flex:1;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.row .when{display:block;font:400 11.5px/1 var(--mono);color:var(--muted);white-space:nowrap}
.row .subj{display:block;font:400 14.8px/1.4 var(--read);color:var(--ink);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.row .prev{display:block;font:400 13px/1.45 var(--sans);color:var(--body);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.row.unread .who{font-weight:600;color:var(--ink)}
.row.unread .who::before{content:"";display:inline-block;width:6px;height:6px;
  border-radius:50%;background:var(--tint);margin-right:7px;vertical-align:middle}
.row.unread .subj{font-weight:500}
.count{font:500 10.5px/1 var(--mono);color:var(--body);background:var(--soft-2);
  border-radius:var(--radius-pill);padding:3px 7px;margin-left:7px}
.row .star{color:var(--muted);font-style:normal;font-size:11px;margin-left:6px}
.row .star.on{color:var(--d-amber)}
.row .pick{position:absolute;left:7px;top:9px;display:none;width:22px;height:22px;
  align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--line-2);
  background:var(--bg);color:transparent;font-size:12px;z-index:2}
.row:hover .pick,.row.selected .pick,.row:focus-within .pick{display:flex}
.row.selected .pick{display:flex;background:var(--ink);border-color:var(--ink);color:var(--bg)}
.rowacts{position:absolute;right:12px;top:10px;display:none;gap:4px;background:var(--bg);
  border:1px solid var(--line);border-radius:8px;padding:3px;
  box-shadow:var(--elev-chip)}
.row:hover .rowacts,.row:focus-within .rowacts{display:flex}
.rowacts button{width:27px;height:27px;border-radius:6px;color:var(--body);font-size:12px;
  display:grid;place-items:center}
.rowacts button:hover{background:var(--soft-2);color:var(--ink)}

/* ── the chain ──────────────────────────────────────────────────────────── */
#thread{display:flex;flex-direction:column;overflow:hidden;background:var(--bg)}
.thead{padding:20px 30px 14px;border-bottom:1px solid var(--line);display:flex;
  align-items:flex-start;gap:14px}
.thead .tgrow{flex:1;min-width:0}
.thead h2{font:500 22px/1.3 var(--read);letter-spacing:-.006em;color:var(--ink);text-wrap:balance}
.thead .people{color:var(--muted);font-size:12.5px;margin-top:5px}
.tacts{display:flex;gap:4px;flex:none}
.tacts button{padding:6px 10px;border-radius:8px;color:var(--body);font-size:12.5px;
  border:1px solid var(--line);transition:background .18s,color .18s}
.tacts button:hover{background:var(--soft-2);color:var(--ink)}
.tacts button.on{color:var(--d-amber);border-color:var(--d-amber)}
.insightbar{display:flex;align-items:center;gap:5px;padding:8px 30px;border-bottom:1px solid var(--line);
  background:var(--soft);overflow-x:auto;scrollbar-width:none}
.insightbar::-webkit-scrollbar{display:none}
.insightlabel{display:inline-flex;align-items:center;gap:7px;margin-right:auto;min-width:max-content;
  font:500 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.insightlabel img{width:13px;height:13px}
.insightbar button{min-width:max-content;padding:5px 9px;border:1px solid var(--line);
  border-radius:var(--radius-pill);background:var(--bg);color:var(--body);font-size:11.5px}
.insightbar button:hover{border-color:var(--line-2);color:var(--ink)}
#chain{flex:1;overflow-y:auto;padding:22px 30px 10px;display:flex;flex-direction:column;gap:0}
.msg{display:block;padding:18px 0;border-bottom:1px solid var(--line)}
.msg:last-child{border-bottom:none}
.msg .meta{display:flex;align-items:baseline;gap:10px;margin-bottom:9px}
.msg .meta .nm{font:500 13.5px/1 var(--sans);color:var(--ink)}
.msg .meta .at{font:400 11.5px/1 var(--mono);color:var(--muted)}
.msg.mine .meta .nm::after{content:"you";font:400 10px/1 var(--mono);color:var(--muted);
  margin-left:8px;border:1px solid var(--line);border-radius:4px;padding:2px 5px}
.bubble{font:400 16.5px/1.68 var(--read);letter-spacing:.002em;color:var(--ink-2);white-space:pre-wrap;
  word-wrap:break-word;max-width:68ch}
.msg.mine .bubble{color:var(--body)}
.bubble iframe{width:100%;min-height:340px;border:0;background:#fff;/* sender HTML assumes paper */border-radius:var(--radius)}
.remotecontent{display:flex;align-items:center;gap:10px;margin-top:8px;padding:8px 10px;
  border:1px solid var(--line);border-radius:8px;background:var(--soft);
  color:var(--muted);font:400 11.5px/1.4 var(--mono)}
.remotecontent span{flex:1}
.remotecontent button{flex:none;padding:5px 8px;border:1px solid var(--line-2);
  border-radius:7px;background:var(--bg);color:var(--body);font:500 11px/1 var(--sans)}
.remotecontent button:hover{color:var(--ink)}
.atts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.att{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);
  border-radius:8px;padding:7px 11px;font-size:12.5px;color:var(--body);background:var(--soft);
  transition:border-color .18s,color .18s;text-decoration:none}
.att:hover{border-color:var(--line-2);color:var(--ink)}
.att .sz{font:400 11px/1 var(--mono);color:var(--muted)}
.reply{border-top:1px solid var(--line);padding:14px 30px 18px;background:var(--soft)}
.replychoice{display:flex;align-items:center;gap:4px;margin-bottom:8px;min-width:0}
.replychoice button{padding:5px 8px;border-radius:7px;color:var(--muted);
  font-size:11.5px;border:1px solid transparent}
.replychoice button:hover{color:var(--ink);background:var(--soft-2)}
.replychoice button[aria-pressed=true]{color:var(--ink);border-color:var(--line-2);
  background:var(--bg)}
.replychoice #replyto{margin-left:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--muted);font:400 10.5px/1 var(--mono)}
.replyrow{display:flex;gap:10px;align-items:flex-end}
.reply textarea{flex:1;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius);padding:12px 14px;font:400 15.5px/1.6 var(--read);
  resize:none;max-height:200px;color:var(--ink)}
.reply textarea:focus{border-color:var(--line-2)}
.send{background:var(--ink);color:var(--bg);border-radius:var(--radius);padding:11px 20px;
  font:500 14px/1 var(--sans);transition:opacity .2s}
.send:hover{opacity:.88}
.send[disabled]{opacity:.35;cursor:default}
.replytools{display:flex;gap:6px;align-items:center;margin-top:9px;flex-wrap:wrap}
.tool{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--body);
  padding:5px 9px;border-radius:8px;border:1px solid transparent}
.tool:hover{background:var(--soft-2);color:var(--ink)}
.pending{display:flex;flex-wrap:wrap;gap:6px;width:100%}
.replystate{margin-left:auto;color:var(--muted);font:400 11px/1.3 var(--mono)}
.replystate.error{color:var(--d-rose)}
.empty{display:grid;place-items:center;height:100%;color:var(--muted);font:400 15.5px/1.6 var(--read);
  text-align:center;padding:24px}

/* ── compose ───────────────────────────────────────────────────────────── */
#compose{width:min(720px,calc(100vw - 36px));height:min(680px,calc(100dvh - 88px));
  max-width:none;max-height:none;inset:auto 22px 22px auto;margin:0;padding:0;
  color:var(--body);background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--elev-pop);overflow:hidden}
#compose[open]{display:block}
#compose::backdrop{background:rgba(23,23,23,.18);backdrop-filter:blur(2px)}
.composebox{height:100%;min-width:0;display:grid;grid-template-rows:auto auto minmax(180px,1fr) auto auto}
.composehead{display:flex;align-items:center;gap:14px;padding:14px 16px 12px 20px;
  border-bottom:1px solid var(--line);background:var(--soft)}
.composehead>div:first-child{min-width:0}
.composehead h2{font:500 20px/1.1 var(--read);color:var(--ink)}
.composeeyebrow{display:block;font:500 9px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.composestate{margin-left:auto;font:400 11px/1 var(--mono);color:var(--muted);white-space:nowrap}
.composestate.error{color:var(--d-rose)}
.composestate.saved{color:var(--d-teal)}
.iconbtn{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;
  color:var(--body);font-size:23px;line-height:1}
.iconbtn:hover{background:var(--soft-2);color:var(--ink)}
.composefields{padding:4px 20px 0;border-bottom:1px solid var(--line)}
.addressline{display:flex;align-items:center;gap:12px;min-width:0;border-bottom:1px solid var(--line)}
.addressline:last-child,.subjectline{border-bottom:0}
.addressline label{width:52px;flex:none;font:500 10.5px/1 var(--mono);
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.addressline input{flex:1;min-width:0;padding:11px 0;color:var(--ink);font-size:14.5px}
.addressline input::placeholder,#cbody::placeholder{color:var(--muted)}
.fieldtoggle{flex:none;color:var(--muted);font-size:12px;padding:6px 0 6px 8px}
.fieldtoggle:hover{color:var(--ink)}
#cbody{width:100%;height:100%;min-height:0;padding:22px 24px;resize:none;
  color:var(--ink-2);background:var(--bg);font:400 16.5px/1.65 var(--read)}
.composeattachments{display:flex;gap:7px;flex-wrap:wrap;padding:0 20px}
.composeattachments:not(:empty){padding-top:10px}
.composeattachments .att{cursor:pointer}
.composefoot{display:flex;align-items:center;gap:12px;padding:12px 16px 14px 20px;
  border-top:1px solid var(--line);background:var(--soft)}
.composeleft{display:flex;align-items:center;gap:4px}
.composeerror{flex:1;min-width:0;color:var(--d-rose);font-size:12px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
.tool.danger{color:var(--muted)}
.tool.danger.armed{color:var(--d-rose);border-color:var(--d-rose)}

#toasts{position:fixed;right:22px;bottom:22px;z-index:70;display:flex;
  flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none}
.toast{display:flex;align-items:center;gap:14px;max-width:min(440px,calc(100vw - 32px));
  padding:11px 14px;border:1px solid var(--line-2);border-radius:var(--radius);
  background:var(--ink);color:var(--bg);box-shadow:var(--elev-pop);
  font:500 13px/1.3 var(--sans);pointer-events:auto}
.toast button{color:var(--d-sky);font-weight:600}

/* ── snooze ────────────────────────────────────────────────────────────── */
#snooze{width:min(420px,calc(100vw - 32px));max-width:none;padding:0;color:var(--body);
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--elev-pop);margin:auto}
#snooze::backdrop{background:rgba(23,23,23,.18);backdrop-filter:blur(2px)}
.snoozebox{padding:0 20px 18px}
.snoozehead{display:flex;align-items:center;gap:12px;padding:17px 0 14px}
.snoozehead>div{flex:1}
.snoozehead h2{font:500 20px/1.2 var(--read);color:var(--ink)}
.snoozechoices{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.snoozechoices button{display:flex;align-items:center;gap:14px;width:100%;padding:12px 3px;
  border-bottom:1px solid var(--line);text-align:left;color:var(--ink-2)}
.snoozechoices button:last-child{border-bottom:0}
.snoozechoices button:hover{color:var(--ink)}
.snoozechoices button span{flex:1}
.snoozechoices time{font:400 11px/1 var(--mono);color:var(--muted)}
.snoozecustom{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end;padding-top:15px}
.snoozecustom label{grid-column:1/-1;font:500 10px/1 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.snoozecustom input{min-width:0;border:1px solid var(--line);border-radius:var(--radius);
  padding:10px 11px;color:var(--ink);background:var(--soft)}

/* ── keyboard map ───────────────────────────────────────────────────────── */
#shortcuts{width:min(520px,calc(100vw - 32px));max-width:none;padding:0;color:var(--body);
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--elev-pop);margin:auto}
#shortcuts::backdrop{background:rgba(23,23,23,.18);backdrop-filter:blur(2px)}
.shortcutbox{padding:0 20px 18px}
.shortcutgrid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.shortcutgrid>span{display:flex;align-items:center;min-height:39px;border-bottom:1px solid var(--line)}
.shortcutgrid>span:nth-last-child(-n+2){border-bottom:0}
.shortcutgrid .keys{justify-content:flex-end;gap:5px}
.shortcutgrid kbd{min-width:25px;padding:5px 7px;text-align:center;border:1px solid var(--line-2);
  border-radius:6px;background:var(--soft);color:var(--ink);box-shadow:0 1px 0 var(--line-2);
  font:500 10.5px/1 var(--mono)}

/* ── spotlight ──────────────────────────────────────────────────────────── */
#spot{position:fixed;inset:0;z-index:40;display:none;padding:12vh 20px 20px;
  background:rgba(23,23,23,.22);backdrop-filter:blur(3px)}
#spot.on{display:block}
.spotbox{max-width:620px;margin:0 auto;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--elev-pop)}
.spotbox input{width:100%;padding:17px 20px;font:400 17px/1.3 var(--sans);color:var(--ink);
  border-bottom:1px solid var(--line)}
.spotbox input::placeholder{color:var(--muted)}
#spotlist{max-height:52vh;overflow-y:auto}
.hit{display:flex;gap:12px;align-items:baseline;width:100%;text-align:left;padding:10px 20px;
  color:var(--body);font-size:14px;transition:background .12s}
.hit:hover,.hit.sel{background:var(--soft-2);color:var(--ink)}
.hit .k{font:500 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);min-width:56px}
.hit .t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spotfoot{padding:9px 20px;border-top:1px solid var(--line);color:var(--muted);
  font:400 11.5px/1 var(--mono);display:flex;gap:16px}

/* ── side panel ─────────────────────────────────────────────────────────── */
#side{position:fixed;top:56px;right:0;bottom:0;width:min(430px,94vw);z-index:20;
  background:var(--bg);border-left:1px solid var(--line);transform:translateX(100%);
  visibility:hidden;transition:transform .32s var(--ease-out),visibility 0s linear .32s;
  display:flex;flex-direction:column;
  box-shadow:var(--elev-side)}
#side.on{transform:none;visibility:visible;transition:transform .32s var(--ease-out)}
.sidehead{display:flex;align-items:center;gap:10px;padding:15px 20px;border-bottom:1px solid var(--line)}
.sidehead strong{flex:1;font:500 13px/1 var(--sans);color:var(--ink)}
.sidebody{flex:1;overflow-y:auto;padding:20px}
.sect{font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px}
.sect.later{margin-top:28px}
.chip{display:inline-block;font-size:13px;color:var(--body);border:1px solid var(--line);
  border-radius:var(--radius-pill);padding:6px 13px;margin:0 6px 8px 0;
  transition:border-color .2s,color .2s,background .2s}
.chip:hover{border-color:var(--line-2);color:var(--ink);background:var(--soft)}
.answer{font:400 16px/1.66 var(--read);color:var(--ink-2);white-space:pre-wrap;
  margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.threadfacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--line);
  margin-bottom:20px}
.threadfact{background:var(--soft);padding:11px 12px;min-width:0}
.threadfact b{display:block;font:500 16px/1.2 var(--read);color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.threadfact span{display:block;margin-top:4px;font:400 9.5px/1 var(--mono);
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.insightcard{border:1px solid var(--line);border-radius:var(--radius);padding:14px 15px;
  margin-top:11px;background:var(--soft)}
.insightcard .insightkind{font:500 9.5px/1 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.insightcard .insighttext{font:400 15.5px/1.62 var(--read);color:var(--ink-2);
  white-space:pre-wrap}
.insightcard.thinking .insighttext{color:var(--muted)}
.insightcard .chip{margin-top:11px;margin-bottom:0;background:var(--bg)}
.askrow{display:flex;gap:8px;padding:13px 20px;border-top:1px solid var(--line);background:var(--soft)}
.askrow input{flex:1;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius-pill);padding:10px 15px;font-size:14px;color:var(--ink)}
.askrow input:focus{border-color:var(--line-2)}
.cred{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);
  padding:13px 15px;margin-bottom:10px}
.credrow{display:flex;align-items:center;gap:10px}
.credrow .name{flex:1;min-width:0}
.credrow .tool{flex:none}
.credrow .tool.armed{color:var(--d-rose);border-color:var(--d-rose)}
.cred code{font:400 12.5px/1.5 var(--mono);color:var(--ink);word-break:break-all;
  display:block;margin-top:7px}
.cred .name{font-size:13.5px;color:var(--ink-2)}
.small{color:var(--muted);font-size:12.5px;line-height:1.62;margin-top:12px}
.small.error{color:var(--d-rose);min-height:1.4em}
.devicecreate{border:1px solid var(--line);border-radius:var(--radius);padding:14px 14px 7px;
  margin:4px 0 12px;background:var(--soft)}
.deviceactions{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.devicecreate .field{margin-bottom:7px}
.field{display:block;margin-bottom:14px}
.field span{display:block;font:500 11px/1 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.field input,.field textarea,.field select{width:100%;background:var(--bg);
  border:1px solid var(--line);border-radius:var(--radius);padding:10px 13px;
  font-size:14.5px;color:var(--ink)}
.field textarea{min-height:88px;resize:vertical;font-family:var(--read);line-height:1.6}
.rule{border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;
  margin-bottom:10px;background:var(--soft)}
.rule .hd{display:flex;gap:8px;align-items:baseline;margin-bottom:6px}
.rule .hd b{font:500 13.5px/1 var(--sans);color:var(--ink);flex:1}
.rule .hd .st{font:400 10.5px/1 var(--mono);color:var(--muted)}
.rule pre{font:400 11.5px/1.55 var(--mono);color:var(--body);white-space:pre-wrap;
  max-height:130px;overflow:auto}

/* The back control exists only in the one-pane layout; the override that
   reveals it lives in the media query below, so this base rule must come
   FIRST — same specificity means source order decides. */
.tback{display:none;align-items:center;gap:5px;flex:0 0 auto;margin-right:10px;
  color:var(--body);font-size:13px;padding:6px 10px;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--soft);white-space:nowrap;
  transition:color .18s,border-color .18s}
.tback:hover{color:var(--ink);border-color:var(--line-2)}

@media (max-width:1040px){
  /* One pane at a time. The list used to be pinned to 34vh with an empty
     "Pick a conversation" holding the other two thirds of the screen — so the
     list was cramped and most of the window said nothing. Now the list owns the
     window until you open something, and the conversation owns it after. */
  #app.on{grid-template-columns:minmax(0,1fr);grid-template-rows:56px minmax(0,1fr)}
  nav{display:none}
  #list,#thread{grid-row:2;grid-column:1;border-right:none;max-height:none}
  #app.on:not(.reading) #thread{display:none}
  #app.on.reading #list{display:none}
  .tback{display:inline-flex}
  .thead,#chain,.reply,.insightbar{padding-left:18px;padding-right:18px}
  .rowopen{padding-left:38px}
  .row .pick{display:flex;color:transparent}
  .row.selected .pick{color:var(--bg)}
}


/* Narrow: the bar sheds words before it sheds controls. The ⌘K chip carries the
   search affordance once its label is gone, and the live dot carries the state. */
@media (max-width:860px){
  .kbtn .klabel{display:none}
  .kbtn{gap:0;padding:6px 9px}
  .live span{display:none}
}
@media (max-width:620px){
  header{gap:7px;padding:0 11px}
  .ghost{padding:6px 9px}
  .thead{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;
    gap:10px 12px}
  .thead .tgrow{grid-column:2;grid-row:1}
  .thead .tback{grid-column:1;grid-row:1;margin-right:0}
  .thead .tacts{grid-column:1/-1;grid-row:2;justify-content:flex-end;width:100%}
  #compose{inset:0;width:100vw;height:100dvh;border:0;border-radius:0}
  .composehead{padding-left:16px}
  .composefields{padding-left:16px;padding-right:16px}
  #cbody{padding:18px 18px}
  .composefoot{padding:10px 12px;flex-wrap:wrap}
  .composeerror{order:3;flex-basis:100%;text-align:left}
  .replychoice{overflow-x:auto;scrollbar-width:none}
  .replychoice::-webkit-scrollbar{display:none}
  #toasts{right:16px;bottom:16px}
}
/* Last resort — scroll the bar instead of stretching the page. */
@media (max-width:540px){
  header{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
  header::-webkit-scrollbar{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── the theme toggle ───────────────────────────────────────────────────────*/
.themebtn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:var(--radius);border:1px solid var(--line);color:var(--body);
  background:var(--soft);transition:color .18s,border-color .18s}
.themebtn:hover{color:var(--ink);border-color:var(--line-2)}
.themebtn svg{width:15px;height:15px;display:block}