/* ============================================================
   MailSparc — FieldSparc design tokens (light default / slate dark)
   ============================================================ */
:root{
  --ink-850:#ffffff; --ink-800:#ffffff; --ink-750:#f6f8f9; --ink-700:#eef1f3; --ink-600:#dde3e6;
  --line:#e1e7ea; --line-soft:#edf1f3;
  --text:#17222c; --text-dim:#4c5a66; --text-mute:#7c8994;
  --teal-400:#0da183; --teal-500:#0b8f74; --teal-600:#09775f;
  --teal-glow:rgba(11,143,116,.16);
  --amber-400:#ec8410; --amber-500:#d9730a; --amber-600:#c26307;
  --amber-glow:rgba(217,115,10,.22);
  --bg:var(--ink-850); --surface:var(--ink-800); --surface-2:var(--ink-750);
  --primary:var(--teal-500); --accent:var(--amber-500); --on-accent:#ffffff;
  --unread-bg:#ffffff; --read-bg:#f4f7f8; --hover-ring:rgba(18,28,38,.10);
  --font-display:"Space Grotesk",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --r-sm:4px; --r-md:6px; --r-lg:10px; --r-pill:999px;
  --shadow-1:0 1px 2px rgba(18,28,38,.05), 0 10px 28px -18px rgba(18,28,38,.16);
  --shadow-2:0 2px 6px rgba(18,28,38,.06), 0 24px 56px -30px rgba(18,28,38,.24);
  --ease:cubic-bezier(.22,.61,.36,1); --dur:.22s;
  --mesh:radial-gradient(circle at 1px 1px, rgba(23,34,44,.05) 1px, transparent 0) 0 0/26px 26px;
}
[data-theme="dark"]{
  --ink-850:#0c1526; --ink-800:#111c31; --ink-750:#17233c; --ink-700:#1d2a47; --ink-600:#3b4e79;
  --line:#2c3d5e; --line-soft:#243351;
  --text:#eef2fb; --text-dim:#b0bdd8; --text-mute:#7d8dad;
  --teal-500:#0da183; --teal-600:#0b8f74;
  --unread-bg:#17233c; --read-bg:#101b30; --hover-ring:rgba(0,0,0,.45);
  --shadow-1:0 1px 2px rgba(0,0,0,.35), 0 10px 28px -18px rgba(0,0,0,.5);
  --shadow-2:0 2px 6px rgba(0,0,0,.4), 0 24px 56px -30px rgba(0,0,0,.6);
  --mesh:radial-gradient(circle at 1px 1px, rgba(175,192,224,.06) 1px, transparent 0) 0 0/26px 26px;
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font:400 .9rem/1.5 var(--font-body);color:var(--text);background:var(--ink-750)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:var(--text)}
.hidden{display:none!important}
[hidden]{display:none!important}
b{color:var(--teal-500);font-weight:600}

/* ============ login ============ */
.login{height:100%;display:flex;align-items:center;justify-content:center;background:var(--ink-750);background-image:var(--mesh)}
.login-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-2);padding:3rem 2.75rem 2.25rem;width:min(400px,92vw);text-align:center}
.login-word{font:600 2rem/1 var(--font-display);letter-spacing:-.02em;margin-top:1rem}
.login-sub{font:600 .62rem/1 var(--font-body);letter-spacing:.22em;text-transform:uppercase;color:var(--text-mute);margin:.5rem 0 2rem}
.login-card form{display:flex;flex-direction:column;gap:1rem;text-align:left}
.login-card label{font:600 .72rem/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);display:flex;flex-direction:column;gap:.4rem}
.login-card input{border:1px solid var(--line);border-radius:var(--r-md);padding:.65rem .8rem;background:var(--ink-750);font-size:.95rem}
.login-card input:focus{outline:2px solid var(--teal-500);outline-offset:-1px}
.login-err{color:#c0392b;font-size:.85rem}
.login-foot{margin-top:1.5rem;color:var(--text-mute);font-size:.78rem}
.btn-accent{background:var(--accent);color:var(--on-accent);font-weight:600;border-radius:var(--r-md);
  padding:.7rem 1.4rem;transition:background var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.btn-accent:hover{background:var(--amber-400);box-shadow:0 10px 30px -14px var(--amber-glow)}
.btn-ghost{border:1px solid var(--line);border-radius:var(--r-md);padding:.65rem 1.2rem;color:var(--text-dim)}
.btn-ghost:hover{background:var(--ink-750)}
[data-theme="dark"] .btn-ghost:hover{background:var(--ink-700)}

/* ============ app grid ============ */
.app{height:100%;display:grid;grid-template:auto 1fr / auto 1fr;grid-template-areas:"top top" "rail main"}
.topbar{grid-area:top;display:flex;align-items:center;gap:.75rem;padding:.5rem 1rem;
  background:var(--surface);border-bottom:1px solid var(--line);position:relative;z-index:30}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--text)}
.brand-word{font:600 1.25rem/1 var(--font-display);letter-spacing:-.02em}
.icon-btn{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:1.05rem;color:var(--text-dim);transition:background var(--dur) var(--ease)}
.icon-btn:hover{background:var(--ink-700)}
.icon-btn.sm{width:26px;height:26px;font-size:.85rem}
.search{flex:1;max-width:720px;display:flex;align-items:center;gap:.5rem;background:var(--ink-750);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:0 .5rem 0 1rem;height:44px;
  transition:box-shadow var(--dur) var(--ease)}
.search:focus-within{box-shadow:var(--shadow-1);background:var(--surface)}
.search-ico{color:var(--text-mute);font-size:1.2rem}
.search input{flex:1;border:0;background:none;outline:none;font-size:.95rem}
.top-right{display:flex;align-items:center;gap:.25rem;margin-left:auto;position:relative}
.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#1fd3b4,#ff9e2c);
  color:#fff;font-weight:600;font-size:.9rem;display:inline-flex;align-items:center;justify-content:center}

/* menus */
.menu{position:absolute;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-2);min-width:200px;z-index:100;overflow:hidden}
#accountMenu{top:48px;right:0}
.menu-head{padding:.7rem 1rem;font-size:.78rem;color:var(--text-mute);border-bottom:1px solid var(--line-soft)}
.menu-item{display:block;width:100%;text-align:left;padding:.6rem 1rem;font-size:.88rem}
.menu-item:hover{background:var(--ink-750)}
[data-theme="dark"] .menu-item:hover{background:var(--ink-700)}

/* ============ rail ============ */
.rail{grid-area:rail;width:232px;padding:.9rem .6rem 1rem;overflow-y:auto;background:var(--ink-750);
  display:flex;flex-direction:column;transition:margin var(--dur) var(--ease)}
[data-theme="dark"] .rail{background:var(--ink-850)}
.rail.collapsed{margin-left:-232px}
.compose-btn{display:flex;align-items:center;gap:.6rem;background:var(--accent);color:var(--on-accent);
  font-weight:600;font-size:.95rem;border-radius:var(--r-pill);padding:.85rem 1.4rem;margin:0 .4rem 1rem;
  box-shadow:0 10px 30px -14px var(--amber-glow);transition:transform var(--dur) var(--ease),background var(--dur) var(--ease)}
.compose-btn:hover{background:var(--amber-400);transform:translateY(-1px)}
.folders{display:flex;flex-direction:column;gap:1px}
.folder{display:flex;align-items:center;gap:.7rem;padding:.42rem .9rem;border-radius:0 var(--r-pill) var(--r-pill) 0;
  font-size:.88rem;color:var(--text-dim);cursor:pointer;user-select:none}
.folder:hover{background:var(--ink-700)}
.folder.active{background:var(--teal-glow);color:var(--teal-600);font-weight:600}
[data-theme="dark"] .folder.active{color:var(--teal-400)}
.folder .f-ico{width:18px;text-align:center;font-size:.95rem}
.folder .f-count{margin-left:auto;font-size:.72rem;font-weight:600}
.rail-labels-head{display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem .9rem .35rem;font:600 .68rem/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute)}
.rail-foot{margin-top:auto;padding:1.25rem .9rem 0;font-size:.68rem;color:var(--text-mute)}

/* ============ main / toolbar ============ */
.content{grid-area:main;background:var(--surface);border-left:1px solid var(--line);
  display:flex;flex-direction:column;overflow:hidden;border-top-left-radius:var(--r-lg)}
#listView,#threadView{display:flex;flex-direction:column;flex:1;min-height:0}
.toolbar{display:flex;align-items:center;gap:.15rem;padding:.4rem .8rem;border-bottom:1px solid var(--line-soft);min-height:48px}
.tool-btn{width:34px;height:34px;border-radius:var(--r-sm);display:inline-flex;align-items:center;justify-content:center;
  font-size:.95rem;color:var(--text-dim)}
.tool-btn:hover{background:var(--ink-700)}
.tool-sep{width:1px;height:20px;background:var(--line);margin:0 .4rem}
.spacer{flex:1}
.pageinfo{font-size:.75rem;color:var(--text-mute);margin-right:.25rem}
.bulk{display:flex;align-items:center;gap:.15rem}

/* checkbox */
.cb{position:relative;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.cb input{position:absolute;opacity:0;inset:0;cursor:pointer}
.cb span{width:16px;height:16px;border:2px solid var(--text-mute);border-radius:3px;display:block;transition:all .12s var(--ease)}
.cb input:checked+span{background:var(--teal-500);border-color:var(--teal-500);
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M6.5 11.2 3.3 8l1.1-1.1 2.1 2.1 5-5L12.6 5z"/></svg>')}

/* ============ thread list ============ */
.thread-list{flex:1;overflow-y:auto}
.row{display:flex;align-items:center;gap:.1rem;padding:0 .8rem 0 .5rem;height:44px;cursor:pointer;
  border-bottom:1px solid var(--line-soft);background:var(--read-bg);position:relative}
.row.unread{background:var(--unread-bg)}
.row:hover{box-shadow:inset 0 -1px 0 var(--hover-ring), inset 0 1px 0 var(--hover-ring), var(--shadow-1);z-index:1}
.row.selected{background:var(--teal-glow)}
.row.cursor::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--teal-500)}
.star{width:30px;height:34px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-mute);font-size:1rem}
.star.on{color:var(--amber-400)}
.star:hover{color:var(--amber-500)}
.row-from{width:190px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:.85rem;color:var(--text-dim);padding-right:.6rem}
.row.unread .row-from{font-weight:600;color:var(--text)}
.row-count{color:var(--text-mute);font-weight:400;font-size:.75rem}
.row-main{flex:1;min-width:0;display:flex;align-items:baseline;gap:.45rem;overflow:hidden;font-size:.85rem}
.row-subj{color:var(--text-dim);white-space:nowrap;overflow:hidden;flex-shrink:0;max-width:60%}
.row.unread .row-subj{font-weight:600;color:var(--text)}
.row-snip{color:var(--text-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-attach{color:var(--text-mute);font-size:.85rem}
.row-date{width:74px;text-align:right;font-size:.73rem;color:var(--text-mute);flex-shrink:0}
.row.unread .row-date{font-weight:600;color:var(--text)}
.row-hover{display:none;position:absolute;right:.5rem;top:0;bottom:0;align-items:center;gap:.1rem;
  background:inherit;padding-left:.5rem}
.row:hover .row-hover{display:flex}
.row:hover .row-date{visibility:hidden}
.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;color:var(--text-mute)}

/* ============ conversation ============ */
.thread-scroll{flex:1;overflow-y:auto;padding:1.25rem 2rem 3rem}
.thread-subject{font:600 1.35rem/1.3 var(--font-display);letter-spacing:-.01em;margin:0 0 1rem .5rem;text-wrap:balance}
.msg{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);margin-bottom:.75rem;box-shadow:var(--shadow-1)}
[data-theme="dark"] .msg{background:var(--ink-750)}
.msg-head{display:flex;align-items:center;gap:.8rem;padding:.8rem 1rem;cursor:pointer;user-select:none}
.msg-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#1fd3b4,#0b8f74);
  color:#fff;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.msg-who{flex:1;min-width:0}
.msg-from{font-weight:600;font-size:.9rem}
.msg-from small{font-weight:400;color:var(--text-mute)}
.msg-to{font-size:.75rem;color:var(--text-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-date{font-size:.75rem;color:var(--text-mute);white-space:nowrap}
.msg-collapsed .msg-snip{font-size:.82rem;color:var(--text-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-body{padding:0 1rem 1rem 3.9rem}
.msg-body iframe{width:100%;border:0;display:block;background:#fff;border-radius:var(--r-sm)}
[data-theme="dark"] .msg-body iframe{background:#fff}
.remote-bar{margin:0 0 .6rem;padding:.45rem .8rem;font-size:.78rem;color:var(--text-dim);
  background:var(--ink-750);border:1px solid var(--line);border-radius:var(--r-sm);display:flex;gap:.8rem;align-items:center}
.remote-bar button{color:var(--teal-500);font-weight:600}
.atts{display:flex;flex-wrap:wrap;gap:.5rem;padding:.75rem 1rem .25rem 3.9rem}
.att{display:flex;align-items:center;gap:.5rem;border:1px solid var(--line);border-radius:var(--r-md);
  padding:.45rem .7rem;font-size:.8rem;color:var(--text-dim);text-decoration:none;max-width:240px}
.att:hover{background:var(--ink-750);box-shadow:var(--shadow-1)}
.att .a-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.att .a-size{color:var(--text-mute);flex-shrink:0}
.msg-actions{display:flex;gap:.25rem;padding:.5rem 1rem .9rem 3.9rem}
.qr-btn{border:1px solid var(--line);border-radius:var(--r-pill);padding:.55rem 1.2rem;font-size:.85rem;
  font-weight:600;color:var(--text-dim)}
.qr-btn:hover{background:var(--ink-750);color:var(--teal-600)}
.quick-reply{display:flex;gap:.6rem;padding:.75rem .5rem}

/* ============ compose ============ */
#composeDock{position:fixed;right:16px;bottom:0;display:flex;align-items:flex-end;gap:12px;z-index:200}
.compose{width:min(560px,94vw);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:var(--shadow-2);display:flex;flex-direction:column;
  max-height:min(640px,86vh)}
.compose.minimized{width:260px}
.compose.minimized .c-body{display:none}
.c-title{display:flex;align-items:center;background:#0f1d28;color:#eef3f6;border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:.55rem .9rem;font-size:.85rem;font-weight:600;cursor:pointer;gap:.5rem}
.c-title .spacer{flex:1}
.c-title button{color:#9fb2bf;width:24px;height:24px;border-radius:4px}
.c-title button:hover{background:#152736;color:#fff}
.c-body{display:flex;flex-direction:column;min-height:0}
.c-row{display:flex;align-items:center;gap:.4rem;border-bottom:1px solid var(--line-soft);padding:.3rem .9rem;min-height:40px;flex-wrap:wrap}
.c-row label{font-size:.8rem;color:var(--text-mute);flex-shrink:0}
.c-row input{flex:1;border:0;outline:none;background:none;font-size:.88rem;min-width:120px}
.c-cc-toggle{font-size:.78rem;color:var(--text-mute);cursor:pointer}
.c-cc-toggle:hover{color:var(--teal-500)}
.chip{display:inline-flex;align-items:center;gap:.35rem;background:var(--ink-750);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:.15rem .3rem .15rem .7rem;font-size:.8rem}
.chip button{color:var(--text-mute);width:18px;height:18px;border-radius:50%;font-size:.7rem}
.chip button:hover{background:var(--ink-600);color:var(--text)}
.chip.bad{border-color:#c0392b;color:#c0392b}
.c-editor{flex:1;min-height:180px;overflow-y:auto;padding:.9rem 1rem;outline:none;font-size:.9rem;line-height:1.6}
.c-editor:empty::before{content:attr(data-ph);color:var(--text-mute)}
.c-atts{display:flex;flex-wrap:wrap;gap:.4rem;padding:0 .9rem .4rem}
.c-tools{display:flex;align-items:center;gap:.1rem;border-top:1px solid var(--line-soft);padding:.5rem .75rem}
.fmt-btn{width:30px;height:30px;border-radius:var(--r-sm);color:var(--text-dim);font-size:.85rem}
.fmt-btn:hover{background:var(--ink-700)}
.send-btn{background:var(--accent);color:var(--on-accent);font-weight:600;border-radius:var(--r-pill);
  padding:.55rem 1.5rem;margin-right:.6rem}
.send-btn:hover{background:var(--amber-400)}
.send-btn:disabled{opacity:.5;cursor:default}
.c-drop{outline:2px dashed var(--teal-500);outline-offset:-6px}

/* autocomplete */
.ac{position:absolute;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-2);z-index:300;max-height:220px;overflow-y:auto;min-width:280px}
.ac-item{padding:.5rem .9rem;font-size:.85rem;cursor:pointer;display:flex;flex-direction:column}
.ac-item small{color:var(--text-mute)}
.ac-item.sel,.ac-item:hover{background:var(--teal-glow)}

/* ============ overlays / modals ============ */
.overlay{position:fixed;inset:0;background:rgba(15,29,40,.45);z-index:400;display:flex;align-items:center;justify-content:center}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-2);
  width:min(480px,92vw);padding:1.75rem;display:flex;flex-direction:column;gap:1rem;max-height:88vh;overflow-y:auto}
.modal h2{font:600 1.25rem/1.2 var(--font-display)}
.modal label{display:flex;flex-direction:column;gap:.4rem;font:600 .72rem/1 var(--font-body);
  letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim)}
.modal input,.modal textarea,.modal select{border:1px solid var(--line);border-radius:var(--r-md);
  padding:.6rem .75rem;background:var(--ink-750);font-size:.9rem;font-family:var(--font-body)}
.modal-foot{display:flex;justify-content:flex-end;gap:.6rem;margin-top:.5rem}
.modal.help{width:min(560px,92vw)}
.keys{display:grid;grid-template-columns:1fr 1fr;gap:.55rem .5rem;font-size:.85rem;color:var(--text-dim)}
kbd{background:var(--ink-750);border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;
  padding:.1rem .45rem;font:600 .75rem/1.3 var(--font-body);color:var(--text)}

/* ============ snackbar ============ */
.snackbar{position:fixed;left:24px;bottom:24px;background:#0f1d28;color:#eef3f6;border-radius:var(--r-md);
  box-shadow:var(--shadow-2);padding:.8rem 1.1rem;display:flex;align-items:center;gap:1.25rem;z-index:500;
  font-size:.88rem;animation:snack-in .25s var(--ease)}
.snackbar button{color:#3ce6c8;font-weight:600}
.snackbar #snackClose{color:#9fb2bf}
@keyframes snack-in{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}

/* ============ mobile layer ============
   Auto-switches on small screens and coarse-pointer (touch/high-DPI) devices. */
.fab{display:none}
.rail-scrim{position:fixed;inset:0;background:rgba(15,29,40,.45);z-index:55}

@media (max-width:768px), ((pointer:coarse) and (max-width:1024px)){
  /* --- shell: drawer instead of rail --- */
  .app{grid-template:auto 1fr / 1fr;grid-template-areas:"top" "main"}
  .rail{position:fixed;top:0;left:0;bottom:0;z-index:60;width:min(300px,84vw);margin:0;
    background:var(--surface);box-shadow:var(--shadow-2);padding-top:1.25rem;
    transform:translateX(-105%);transition:transform .25s var(--ease)}
  .rail.open{transform:none}
  .rail.collapsed{margin:0}
  .content{border-left:0;border-radius:0}
  .brand-word{font-size:1.1rem}

  /* --- top bar --- */
  html,body{overflow-x:hidden}
  .topbar{gap:.4rem;padding:.45rem .6rem}
  .search{height:40px;min-width:0}
  .search input{min-width:0;width:100%}
  #themeBtn,#helpBtn{display:none}

  /* --- toolbar --- */
  .toolbar{position:sticky;top:0;background:var(--surface);z-index:5}
  .pageinfo{display:none}
  .cb.master{display:none}

  /* --- thread rows: two-line touch cards --- */
  .row{display:grid;height:auto;min-height:72px;padding:.55rem .9rem .6rem .2rem;align-items:center;
    grid-template-columns:44px 1fr auto;
    grid-template-areas:"star from date" "star main main";
    touch-action:pan-y;will-change:transform}
  .row .cb{display:none}
  .row-hover{display:none!important}
  .row:hover .row-date{visibility:visible}
  .star{grid-area:star;width:44px;height:44px;font-size:1.25rem}
  .row-from{grid-area:from;width:auto;min-width:0;font-size:.95rem;padding-right:.5rem;overflow:hidden;text-overflow:ellipsis}
  .row-date{grid-area:date;width:auto;flex-shrink:0}
  .row-main{grid-area:main;display:block;min-width:0;overflow:hidden;font-size:.87rem;line-height:1.35}
  .row-subj{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .row-snip{display:block;overflow:hidden;text-overflow:ellipsis}
  .row-attach{float:right}

  /* --- conversation: full-bleed --- */
  .thread-scroll{padding:.9rem .6rem 5rem}
  .thread-subject{font-size:1.15rem;margin-left:.25rem}
  .msg-body,.msg-actions,.atts{padding-left:1rem}
  .msg-head{padding:.7rem .75rem}
  .quick-reply{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--line-soft);
    padding:.6rem;margin:0 -0.6rem}
  .qr-btn{flex:1;text-align:center;padding:.7rem .5rem}

  /* --- compose: full-screen sheet --- */
  #composeDock{left:0;right:0;bottom:0}
  .compose,.compose.minimized{width:100vw;max-height:100dvh;height:100dvh;border-radius:0;border:0}
  .compose.minimized{height:auto}
  .c-title{border-radius:0;padding:.8rem 1rem}
  .c-editor{min-height:40dvh}
  .c-tools{padding-bottom:max(.5rem, env(safe-area-inset-bottom))}

  /* --- compose FAB --- */
  .fab{display:flex;position:fixed;right:18px;bottom:22px;z-index:45;width:56px;height:56px;
    border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:1.5rem;
    align-items:center;justify-content:center;box-shadow:0 10px 30px -8px var(--amber-glow)}
  .fab:active{background:var(--amber-400)}
  #composeBtn{display:none}

  /* --- overlays --- */
  .modal{width:100vw;height:100dvh;max-height:100dvh;border-radius:0}
  .snackbar{left:12px;right:12px;bottom:90px;justify-content:space-between}
}