/* CommunicationTrove. Harbor-ink navy anchors the page (sidebar, sent messages, brand); teal is the signal for anything that needs you. */
@font-face{font-family:"Atkinson Hyperlegible Next";src:url("fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}

:root{
  --ink:#0f2a4a;--ink-hover:rgba(255,255,255,.08);--ink-on:rgba(255,255,255,.14);--ink-text:#d3e2f2;--ink-muted:#8eaed0;--ink-link:#8fe3d8;
  --teal:#14b8a6;
  --bg:#eef2f6;--panel:#fff;--text:#16263a;--muted:#566a80;--line:#dbe3ec;
  --accent:#0f766e;--on-accent:#fff;--accent-soft:#d9f0ed;
  --sel:#e4f3f1;--hover:#f5f8fb;--chip:#e6ecf3;
  --out:#0f2a4a;--out-text:#fff;--out-muted:rgba(255,255,255,.72);--in:#fff;
  --err:#b42318;--warn-bg:#fff3dc;--warn-text:#6b4200;
  --radius:10px;
  --font:"Atkinson Hyperlegible Next",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --ink:#081524;--ink-text:#cddff2;--ink-muted:#86a6c9;
  --bg:#0a1422;--panel:#0f1d2f;--text:#e3ecf6;--muted:#93a7bd;--line:#1e3249;
  --accent:#2dd4bf;--on-accent:#04211d;--accent-soft:#12383a;
  --sel:#123240;--hover:#132539;--chip:#192b41;
  --out:#0e5370;--in:#14263b;
  --err:#ff8c7e;--warn-bg:#3a2d10;--warn-text:#f5d48a;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:15px/1.45 var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
.hidden{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* =====================================================================================================
   DESIGN SYSTEM. Everything on screen is built from these tokens. Change a token, not a one-off value.
   Colors by role, a type scale, spacing, radii, shadows, and ONE set of buttons (below).
   ===================================================================================================== */
:root{
  /* type scale (Atkinson Hyperlegible Next only) */
  --fs-1:12.5px;  /* meta: times, captions, tags */
  --fs-2:13.5px;  /* secondary text, chips, small buttons */
  --fs-3:15px;    /* body, list rows, buttons */
  --fs-4:17px;    /* panel headings */
  --fs-5:20px;    /* page and conversation titles */
  --fs-6:24px;    /* sign-in title */
  --fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;
  /* space, shape, controls */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;
  --r-sm:8px;--r-md:10px;--r-lg:16px;--r-pill:999px;
  --ctl:40px;--ctl-sm:34px;            /* height of a button or field: normal and compact */
  /* status colors (text on a soft tint of the same hue) */
  --ok:#15803d;--ok-soft:#16a34a22;
  --info:#1d4fd7;--info-soft:#3b82f629;
  --accent-strong:#0b5f58;             /* primary button when pressed or hovered */
}
@media (prefers-color-scheme:dark){:root{
  --ok:#86efac;--info:#93b4ff;
  --accent-strong:#5eead4;
}}
@media (max-width:860px){:root{--ctl:44px;--ctl-sm:40px}}   /* bigger touch targets on phones */

/* Typography: headings and body come from the scale, so every screen reads the same. */
h1,h2,h3,h4{font-weight:var(--fw-bold);letter-spacing:-.01em;line-height:1.25}
h1{font-size:var(--fs-6)}h2{font-size:var(--fs-5)}h3{font-size:var(--fs-4)}h4{font-size:var(--fs-2);font-weight:var(--fw-semibold)}
body{font-size:var(--fs-3);font-feature-settings:"zero" 0}
.muted{font-size:var(--fs-2)}

/* ---- BUTTONS: one family, five roles ------------------------------------------------------------------
   button            Primary. The one main action on a screen (Send, Save, Book it, Connect).
   button.mute       Secondary. Supporting actions (Saved replies, Contact, Mark as unread). Soft pill.
   button.link       Tertiary. Text only, for light actions (Edit, Cancel, Keep it).
   button.icon       Icon only. Toolbar and close buttons. Always give it an aria-label.
   button.danger     Destructive. Red. Only where the app asks "are you sure" first.
   .chip             Filter or choice (Unread, Inbox). aria-pressed or .on marks the chosen one.
   Add .sm for a compact version. All of them share the same focus ring, hover, pressed and disabled looks. */
button{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:var(--ctl);padding:0 var(--sp-4);
  border:0;border-radius:var(--r-md);cursor:pointer;
  background:var(--accent);color:var(--on-accent);
  font-size:var(--fs-3);font-weight:var(--fw-semibold);line-height:1;
  box-shadow:0 1px 2px rgba(15,42,74,.18);
  transition:background .12s,box-shadow .12s,color .12s,filter .12s;
}
button:hover{filter:brightness(1.08)}
button:active{transform:translateY(.5px);box-shadow:none}
button:disabled,button[aria-disabled="true"]{opacity:.5;cursor:default;filter:none;transform:none}
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button.sm{min-height:var(--ctl-sm);padding:0 var(--sp-3);font-size:var(--fs-2)}

button.mute{background:var(--chip);color:var(--text);border-radius:var(--r-pill);padding:0 14px;min-height:var(--ctl-sm);font-size:var(--fs-2);font-weight:var(--fw-medium);box-shadow:none;margin-left:0}
button.mute:hover{filter:none;background:color-mix(in srgb,var(--chip) 78%,var(--text))}

button.link{background:none;color:var(--accent);padding:6px 0;min-height:0;text-align:left;font-weight:var(--fw-medium);box-shadow:none;justify-content:flex-start}
button.link:hover{text-decoration:underline;filter:none}

button.icon{background:none;color:var(--muted);padding:0;width:var(--ctl);min-height:var(--ctl);border-radius:var(--r-md);font-size:var(--fs-4);font-weight:var(--fw-regular);box-shadow:none}
button.icon:hover{background:var(--chip);color:var(--text);filter:none}
button.icon[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}

button.danger{background:var(--err);color:#fff}
.chip{display:inline-flex;align-items:center;min-height:30px;background:var(--chip);color:var(--text);padding:0 13px;border-radius:var(--r-pill);font-size:var(--fs-2);font-weight:var(--fw-medium);box-shadow:none}
.chip.on,.chip[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.chip:hover{filter:none;background:color-mix(in srgb,var(--chip) 78%,var(--text))}
.chip.on:hover{background:var(--accent);filter:brightness(1.08)}
.tab,.rd,.tagchip .x,.x,.act,.attchip .x{box-shadow:none}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);margin:4px 0}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 28%,transparent)}
::placeholder{color:var(--muted);opacity:.85}
.err{color:var(--err);margin:6px 0}
.muted{color:var(--muted);font-size:var(--fs-2)}
a{color:var(--accent)}

/* ---- sign in: a navy brand panel and the form, side by side (stacked on phones) ---- */
.login{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);min-height:100vh;background:var(--bg)}
.login-brand{background:var(--ink);color:#fff;box-shadow:inset -1px 0 0 rgba(255,255,255,.07);padding:56px clamp(28px,5vw,72px);display:flex;flex-direction:column;justify-content:center;gap:0}
.login .mark{display:block;width:56px;height:56px;border-radius:14px;margin:0 0 22px;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.login-brand h1{margin:0 0 8px;font-size:var(--fs-6);color:#fff}
.login .tagline{margin:0 0 34px;color:var(--ink-text);font-size:var(--fs-4);max-width:26ch}
.login-points{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.login-points li{display:flex;gap:12px;align-items:center;color:var(--ink-text)}
.login-points .ico{color:var(--ink-link)}
.login-panel{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:40px 24px;gap:22px;background:var(--bg)}
.login form{width:min(400px,100%);background:var(--panel);padding:34px 32px 28px;border-radius:var(--r-lg);box-shadow:var(--sh2);border:1px solid var(--line)}
.login form h2{margin:0 0 4px;font-size:var(--fs-5)}
.login form>p.muted{margin:0 0 18px}
.login label{display:block;margin:14px 0 2px;font-size:var(--fs-2);font-weight:var(--fw-semibold)}
.login input{margin:4px 0 0;min-height:var(--ctl)}
.login button#loginBtn,.login button#fgBtn,.login button#rsBtn{width:100%;margin-top:22px;min-height:46px;font-size:var(--fs-3)}
.login #loginBack,.login #forgotLink,.login #fgBack,.login #rsBack{margin-top:8px;padding-left:0}
.login form>p[role=status]{margin:12px 0 0}
.login form>p[role=status]:empty{display:none}
.login-foot{display:flex;gap:18px;margin:0;font-size:var(--fs-2)}
.login-foot a{color:var(--muted);text-decoration:none}
.login-foot a:hover{color:var(--text);text-decoration:underline}
@media (max-width:860px){
  .login{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .login-brand{padding:28px 24px 26px;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:6px 16px}
  .login .mark{width:44px;height:44px;margin:0}
  .login-brand h1{font-size:var(--fs-4);margin:0}
  .login .tagline{flex-basis:100%;margin:6px 0 0;font-size:var(--fs-2);max-width:none}
  .login-points{display:none}
  .login-panel{justify-content:flex-start;padding:26px 16px 32px}
  .login form{padding:26px 22px 22px}
}

/* ---- frame ---- */
.app{display:grid;grid-template-columns:236px 372px 1fr;height:100vh}
aside{background:var(--ink);color:var(--ink-text);padding:18px 12px 14px;display:flex;flex-direction:column;gap:2px;overflow:auto}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:var(--fs-4);letter-spacing:-.01em;color:#fff;margin:0 6px 18px}
.brand img{width:34px;height:34px;border-radius:9px;flex:none}
nav a{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:9px;cursor:pointer;color:var(--ink-text);position:relative;line-height:1.3}
nav a:hover{background:var(--ink-hover)}
nav a.on{background:var(--ink-on);color:#fff;font-weight:600}
nav a.on::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:var(--teal)}
nav a .lbl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
nav h4{margin:18px 12px 4px;font-size:var(--fs-2);font-weight:600;color:var(--ink-muted)}
aside button.link{color:var(--ink-link);padding:8px 12px}
aside button.link#settingsBtn{margin-top:auto}

/* ---- conversation list ---- */
#list{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0;overflow:hidden}
.bar{display:flex;align-items:center;gap:4px;padding:12px 12px 10px;background:var(--panel)}
.bar input{margin:0;background:var(--bg);border-color:transparent}
.bar input:focus-visible{background:var(--panel)}
.notice{padding:9px 14px;background:var(--warn-bg);color:var(--warn-text);font-size:var(--fs-2)}
#items{list-style:none;margin:0;padding:0;overflow:auto;flex:1}
#items li{display:flex;gap:12px;align-items:flex-start;padding:13px 16px 13px 14px;border-bottom:1px solid var(--line);cursor:pointer;background:var(--panel);position:relative}
#items li:hover{background:var(--hover)}
#items li.on{background:var(--sel)}
#items li.unread{box-shadow:inset 4px 0 0 var(--teal)}
#items li.unread .nm>span:first-child{font-weight:700}
#items li.unread .nm span:last-child{color:var(--accent);font-weight:600}
#items li.resolved{opacity:.55}
.av{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:var(--fs-2);font-weight:700;letter-spacing:.01em;margin-top:1px;background:hsl(var(--h,210) 55% 90%);color:hsl(var(--h,210) 45% 26%)}
.sn .tag.acct{max-width:12em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.tag.hued{background:hsl(var(--h) 60% 45% / .16);color:hsl(var(--h) 60% 34%)}
.rb{flex:1;min-width:0}
.nm{display:flex;justify-content:space-between;gap:8px;line-height:1.3}
.nm>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.nm span:last-child{color:var(--muted);font-size:var(--fs-1);white-space:nowrap;font-variant-numeric:tabular-nums}
.rd{border:0;background:transparent;color:var(--accent);cursor:pointer;font-size:16px;line-height:1;padding:0;min-height:26px;min-width:26px;display:inline-grid;place-items:center;vertical-align:middle;border-radius:50%}
.rd:hover{filter:none;background:var(--accent-soft)}
.sn{color:var(--muted);font-size:var(--fs-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.sn.wrap{white-space:normal;overflow:visible}
.tag{display:inline-block;font-size:var(--fs-1);font-weight:600;background:var(--chip);padding:1px 8px;border-radius:999px;margin-right:6px;color:var(--muted);line-height:1.5}
.overdue{color:var(--err)!important}
#items li.section{display:block;background:var(--bg);color:var(--muted);font-size:var(--fs-2);font-weight:600;padding:9px 16px;cursor:default;box-shadow:none}
#items li.more{display:block;cursor:pointer;text-align:center;color:var(--accent);font-weight:600}
#items li.noav{display:block}

.filters{display:flex;gap:6px;flex-wrap:wrap;padding:2px 12px 10px;border-bottom:1px solid var(--line);background:var(--panel)}
.filters:empty{display:none}
.tag.ch-sms{background:#14b8a626;color:#0b6b62}
.tag.ch-email{background:var(--info-soft);color:var(--info)}
.tag.ch-whatsapp{background:var(--ok-soft);color:var(--ok)}
.tag.ch-facebook,.tag.ch-instagram{background:#a855f726;color:#7e22ce}
.tag.ch-call{background:#f59e0b2e;color:#8f4a00}
.tag.ch-discord{background:#5865f226;color:#3c47c0}
@media (prefers-color-scheme:dark){
  .av{background:hsl(var(--h,210) 32% 25%);color:hsl(var(--h,210) 75% 88%)}
  .tag.hued{background:hsl(var(--h) 55% 60% / .2);color:hsl(var(--h) 85% 78%)}
  .tag.ch-discord{color:#aab3ff}.tag.ch-sms{color:#5eead4}.tag.ch-facebook,.tag.ch-instagram{color:#d8b4fe}.tag.ch-call{color:#fbbf24}
  .tag.owner{color:#7dd3fc}.tag.st-in_progress{color:#fbbf24}
}

/* ---- conversation ---- */
#detail{display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--bg)}
.empty{margin:auto;color:var(--muted);text-align:center;max-width:260px;line-height:1.5}
.empty::before{content:"";display:block;width:64px;height:64px;margin:0 auto 16px;border-radius:16px;background:url(site/logo.svg) center/contain no-repeat}
#thread{display:flex;flex-direction:column;height:100%}
#thread header{display:flex;gap:8px 10px;align-items:center;flex-wrap:wrap;padding:14px 22px;border-bottom:1px solid var(--line);background:var(--panel)}
#thread header>div{flex:1 1 220px;min-width:0}
#thread header .mute,#thread header .link{flex:none;white-space:nowrap;margin-left:0}
#thread header #addTask,#thread header .push{margin-left:auto}
#thread h2{margin:0;font-size:var(--fs-5);letter-spacing:-.01em;line-height:1.25}
#tSub{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:2px}
#msgs>*,.chat-msgs>*{flex-shrink:0}   /* a long message scrolls the conversation instead of being squeezed to fit it */
#msgs{flex:1;overflow:auto;padding:20px 22px;display:flex;flex-direction:column;gap:10px}
.m{max-width:min(78%,640px);padding:10px 14px;border-radius:16px 16px 16px 5px;background:var(--in);border:1px solid var(--line);white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5}
.m.out{align-self:flex-end;background:var(--out);border-color:transparent;color:var(--out-text);border-radius:16px 16px 5px 16px}
.m a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.m.out a{color:#bdf3ec}
.m.html{align-self:stretch;max-width:min(100%,860px);padding:0;overflow:hidden;border-radius:14px;background:#fff;color:#202124}
.m.html .meta{margin:0;padding:10px 16px;background:var(--in);border-bottom:1px solid var(--line)}
.m.html .attachments{margin:0;padding:10px 16px}
.imgbar{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:8px 16px;background:var(--chip);color:var(--muted);font-size:var(--fs-2)}
.imgbar button.link{padding:0;min-height:0}
iframe.mail{display:block;width:100%;height:240px;border:0;background:#fff}
.m .meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:var(--fs-1);color:var(--muted);margin-bottom:5px;font-variant-numeric:tabular-nums}
.m.out .meta{color:var(--out-muted)}
.m.out .tag{background:rgba(255,255,255,.18);color:#fff}
.m .txt{white-space:pre-wrap}
.m textarea{margin:0 0 6px}
.m.sched,.m.out.sched{border:1.5px dashed var(--teal);background:transparent;color:var(--text)}
.m.out.sched .meta{color:var(--muted)}
.m.out.sched .tag{background:var(--chip);color:var(--muted)}
.daysep{display:flex;align-items:center;gap:14px;margin:8px 0 2px;color:var(--muted);font-size:var(--fs-1)}
.daysep::before,.daysep::after{content:"";flex:1;height:1px;background:var(--line)}
.daysep span{background:none;padding:0}
.acts{display:flex;gap:12px;margin-top:6px}
.act{background:none;color:var(--muted);padding:2px 0;min-height:0;font-size:var(--fs-1);font-weight:500}
.m.out .act{color:var(--out-muted)}
.act:hover{color:var(--accent);filter:none}
.m.out .act:hover{color:#fff}
.warn{background:var(--warn-bg);color:var(--warn-text);font-size:var(--fs-2);padding:8px 12px;border-radius:var(--radius);margin:4px 0}

/* ---- reply box ---- */
#replyForm{padding:14px 22px 16px;border-top:1px solid var(--line);background:var(--panel)}
#replyTarget{margin:0 0 6px}
#replyText{display:block;min-height:88px;margin:6px 0 10px;resize:vertical;border-radius:12px;padding:12px 14px;line-height:1.5}
#replyForm .tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#replyForm .tools select{width:auto;margin:0;padding:7px 10px;font-weight:500}
#replyForm .tools #sendBtn{margin-left:auto;padding:10px 26px}
#replyForm .tools .mute{margin-left:0}
#laterRow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#laterRow .check{padding:0;font-size:var(--fs-2)}
#laterRow input[type=datetime-local]{width:auto;margin:0;padding:6px 8px}
#replyErr{display:block}
.muted-dot{font-size:var(--fs-1);margin-left:4px}
.attachrow{display:flex;gap:8px;align-items:center}
.attachlist{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 8px}
.attchip{display:inline-flex;gap:6px;align-items:center;background:var(--chip);border-radius:999px;padding:3px 6px 3px 12px;font-size:var(--fs-2)}
.attchip .x{background:none;color:var(--muted);min-height:0;padding:0 6px;font-size:var(--fs-2)}
.attachments{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.thumb{display:block;max-width:240px;max-height:200px;border-radius:10px;border:1px solid var(--line);background:var(--panel)}
.filechip{display:inline-block;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:6px 10px;font-size:var(--fs-2);color:var(--accent);text-decoration:none;overflow-wrap:anywhere}

.assignbar{display:flex;gap:14px;flex-wrap:wrap;padding:9px 22px;border-bottom:1px solid var(--line);background:var(--panel);align-items:center}
.assignbar label{display:flex;gap:8px;align-items:center;font-size:var(--fs-2);color:var(--muted)}
.assignbar select{width:auto;margin:0;padding:6px 8px}
.tag.owner{background:#0ea5e922;color:#0369a1;font-weight:600}
.tag.st-in_progress{background:#f59e0b2e;color:#8f4a00}
.tag.st-resolved{background:var(--ok-soft);color:var(--ok)}
.linkcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;margin:4px 0 6px;display:flex;flex-direction:column;gap:6px;color:var(--text)}
.lc-title{font-weight:700}
.lc-open{align-self:flex-start;padding:6px 14px;min-height:36px;font-size:var(--fs-2)}

/* ---- tasks, chat, panels ---- */
.task-actions{display:flex;gap:8px;padding:18px 0}
.task-panel{overflow:auto;height:100%;padding:22px;min-width:0;background:var(--panel)}
.task-panel h2{margin:0 0 4px;font-size:var(--fs-5);letter-spacing:-.01em}
.task-panel label{display:block;margin:10px 0 4px;font-weight:500}
.task-panel .results{list-style:none;margin:6px 0;padding:0;max-height:240px;overflow:auto;border:1px solid var(--line);border-radius:var(--radius)}
.task-panel .results:empty{display:none}
.task-panel .results li{padding:9px 12px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.task-panel .results li .link{text-align:left;white-space:normal}
.pre{white-space:pre-wrap}
.badge{background:var(--teal);color:#04211d;border-radius:999px;font-size:var(--fs-1);font-weight:700;padding:1px 8px;align-self:center}
.chat-panel{display:flex;flex-direction:column;height:100%}
.chat-head{display:flex;gap:10px;align-items:center;padding:14px 22px;border-bottom:1px solid var(--line);background:var(--panel)}
.chat-head h2{margin:0;font-size:var(--fs-5);letter-spacing:-.01em}
.chat-msgs{flex:1;overflow:auto;padding:20px 22px;display:flex;flex-direction:column;gap:10px}
.chat-form{padding:14px 22px;border-top:1px solid var(--line);background:var(--panel)}
.convrow{padding:11px 12px;border:1px solid var(--line);border-radius:var(--radius);margin:6px 0;cursor:pointer;background:var(--panel)}
.convrow:hover{background:var(--hover)}
mark{background:#fde04766;color:inherit;border-radius:3px;padding:0 2px}

/* ---- dialogs and settings ---- */
dialog{border:0;border-radius:18px;background:var(--panel);color:var(--text);width:min(520px,92vw);padding:26px 26px 20px;box-shadow:0 24px 70px rgba(8,21,36,.4)}
dialog::backdrop{background:rgba(8,21,36,.55)}
dialog h2{margin:0 0 12px;font-size:var(--fs-5);letter-spacing:-.01em}
dialog h3{margin:26px 0 8px;padding-top:18px;border-top:1px solid var(--line);font-size:var(--fs-3)}
dialog ul{list-style:none;padding:0;margin:8px 0}
dialog li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
dialog li:last-child{border-bottom:0}
dialog .gm{padding:8px 0 10px;border-bottom:1px solid var(--line)}
dialog .gm + button{margin-top:14px}
dialog .gmhead{display:flex;justify-content:space-between;align-items:center;gap:12px}
dialog .gmhead strong{overflow-wrap:anywhere}
dialog h4.dsrv{margin:14px 0 4px;font-size:var(--fs-3)}
dialog summary{cursor:pointer;color:var(--accent);font-weight:500}
.check{display:flex;gap:10px;align-items:center;padding:7px 0}
.check input,#shareRow input{width:auto;margin:0;accent-color:var(--accent)}
#shareRow{display:flex;gap:10px;align-items:center;margin:8px 0}
#addAccount button:not(.link),#addUser button:not(.link),#pwForm button:not(.link){margin-top:8px}
dialog button.link+button.link,.setsec button.link+button.link{margin-left:16px}
.snooze{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.quiet{display:flex;gap:8px;align-items:center}
.quiet input{width:auto}
.tpllist{max-height:45vh;overflow:auto;margin:8px 0}
.tplrow{border:1px solid var(--line);border-radius:var(--radius);margin:6px 0;background:var(--panel)}
.tplrow.off{opacity:.6}
.tplmain{padding:11px 12px;cursor:pointer}
.tpltitle{font-weight:700;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.tplrow .acts{padding:0 12px 9px}
#tplDlg details{margin:10px 0}
.addr{display:block;word-break:break-all;user-select:all;background:var(--chip);padding:8px 10px;border-radius:var(--radius);font-size:var(--fs-2);margin:4px 0}
.qr{display:block;width:220px;height:220px;margin:6px 0;background:#fff;padding:4px;border-radius:10px}
.key{display:block;font-size:var(--fs-3);letter-spacing:.06em;margin:4px 0 10px;word-break:break-all;user-select:all}
.codes{background:var(--chip);padding:12px 14px;border-radius:var(--radius);font-size:var(--fs-3);user-select:all}
.mobile-only{display:none}
.backdrop{display:none}
.tabs{display:none}

/* the message at the bottom after Archive, Move to Trash and similar */
#toast{position:fixed;left:50%;width:max-content;bottom:26px;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:18px;max-width:min(92vw,460px);padding:11px 14px 11px 18px;border-radius:12px;background:#0f2a4a;color:#fff;box-shadow:0 10px 30px rgba(8,21,36,.35);animation:toast-in .16s ease-out}
#toast.bad{background:#7a1d14}
#toast button{background:none;color:#8fe3d8;padding:4px 8px;min-height:0;font-weight:700;border-radius:8px}
#toast button:hover{background:rgba(255,255,255,.12);filter:none}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-color-scheme:dark){#toast{background:#1b3f63}#toast.bad{background:#8a2b20}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

@media (max-width:860px){
 html,body{height:100%;overscroll-behavior:none}
 .app{display:block;height:100dvh}
 /* 16px inputs stop iOS from zooming in on focus; 44px targets are easy to tap */
 input,select,textarea{font-size:16px;padding:12px}
 button{min-height:44px}
 button.icon{min-width:44px}
 button.link{min-height:44px;padding:10px 0}
 nav a{padding:12px 12px}
 .chip{min-height:36px;padding:6px 14px}
 #list{height:100dvh;padding-bottom:calc(64px + env(safe-area-inset-bottom))}
 #list .bar{padding-top:calc(12px + env(safe-area-inset-top))}
 #items li{padding:14px 16px 14px 14px}
 .av{width:42px;height:42px}
 .sn{font-size:var(--fs-3)}
 aside{position:fixed;top:0;bottom:0;left:0;width:min(310px,84vw);z-index:30;transform:translateX(-100%);transition:transform .2s;padding-top:calc(18px + env(safe-area-inset-top));padding-bottom:calc(16px + env(safe-area-inset-bottom))}
 body.menu aside{transform:none;box-shadow:0 0 30px rgba(0,0,0,.35)}
 body.menu .backdrop{display:block;position:fixed;inset:0;background:rgba(8,21,36,.5);z-index:25}
 #detail{position:fixed;inset:0;height:100dvh;z-index:20;transform:translateX(100%);transition:transform .2s;background:var(--bg)}
 body.open #detail{transform:none}
 #thread header,.chat-head{padding:calc(12px + env(safe-area-inset-top)) 14px 12px}
 #thread header .mute{min-height:34px;padding:5px 11px;font-size:var(--fs-1)}
 #thread header .link{min-height:34px;padding:5px 0;font-size:var(--fs-2)}
 #thread header #addTask,#thread header .push{margin-left:0}
 #msgs,.chat-msgs{padding:14px 12px}
 .m{max-width:90%}
 #replyForm,.chat-form{padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
 #replyText{min-height:56px;margin:4px 0 8px}
 #replyForm .tools #sendBtn{padding:10px 22px}
 .task-panel{padding:calc(16px + env(safe-area-inset-top)) 16px 16px}
 #toast{bottom:calc(76px + env(safe-area-inset-bottom))}
 body.open #toast{bottom:calc(18px + env(safe-area-inset-bottom))}
 .tabs{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:10;background:var(--panel);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
 body.open .tabs{display:none}
 .tab{flex:1;background:none;color:var(--muted);border-radius:0;min-height:56px;font-size:var(--fs-1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;position:relative;font-weight:500}
 .tab.on{color:var(--accent);font-weight:700}
 .tab .badge{position:absolute;top:6px;left:calc(50% + 10px)}
 .mobile-only{display:inline-block}
 .tabs.mobile-only{display:flex}
 body.open .tabs.mobile-only{display:none}
 dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;margin:0;overflow:auto;padding:calc(18px + env(safe-area-inset-top)) 18px 24px}
 .login form{padding:26px 22px}
}
@media (display-mode: standalone){ body{user-select:none;-webkit-user-select:none} .m,.sn,textarea,input{user-select:text;-webkit-user-select:text} }

/* choosing several conversations at once */
button.icon[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.bulk{display:grid;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--sel)}
.bulktop{display:flex;align-items:center;gap:14px}
.bulktop strong{margin-right:auto}
.bulktop .done{font-weight:600}
.bulkacts{display:flex;gap:6px;flex-wrap:wrap}
.bulk button.mute{margin-left:0;padding:5px 9px;min-height:32px;font-size:var(--fs-1);background:var(--panel)}
.bulk button.link{padding:0;min-height:0}
#items li .pick{flex:none;width:20px;height:20px;margin:10px 0 0;accent-color:var(--accent);cursor:pointer}
#items li.picked{background:var(--sel)}
select.morefolder{width:auto;margin:0;padding:4px 10px;border:0;cursor:pointer;appearance:auto}
select.morefolder.on{background:var(--accent);color:var(--on-accent)}
@media (max-width:860px){ #items li .pick{width:24px;height:24px;margin-top:9px} .bulk button.mute{min-height:40px} }

select.showpick{width:auto;margin:0;padding:4px 10px;background:var(--accent);color:var(--on-accent);appearance:auto;border:0;cursor:pointer;font:inherit;font-size:var(--fs-2);font-weight:500}
select.showpick:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.gmopts{margin:8px 0 2px}
.gmrow{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:6px 0}
.gmopts label.sig{display:block;font-weight:500;margin:10px 0 4px}
.gmopts textarea{width:100%;resize:vertical}
.gmopts .link{padding-left:0;padding-right:0}
.gmopts .gmrow button.mute{margin-left:0}
dialog .gmopts .gmrow button.link+button.link{margin-left:0}

.cpart{margin:18px 0 6px;padding-top:4px;border-top:1px solid var(--line)}
.cpart h3{margin:10px 0 6px}
.cpart input,.cpart textarea,.cpart select{width:100%;max-width:520px}
.tagrow{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 10px}
.tagchip{display:inline-flex;align-items:center;gap:4px;background:var(--chip);color:var(--text);border-radius:999px;padding:3px 4px 3px 12px;font-size:var(--fs-2);font-weight:500}
.tagchip .x{background:none;color:var(--muted);padding:0 8px;min-height:24px;font-size:18px;line-height:1;border-radius:999px}
.tagchip .x:hover{color:var(--text);filter:none;background:color-mix(in srgb,var(--chip) 70%,var(--text))}
.cpart .gmrow input{max-width:260px}
.cpart .gmrow button.mute{margin-left:0}

/* The contact rail: beside the conversation on wide screens, a sheet over it on narrower ones */
@media (min-width:861px){#detail{position:relative}}   /* on phones #detail is already positioned */
.rail{position:absolute;top:0;right:0;bottom:0;width:min(340px,100%);z-index:5;overflow:auto;padding:16px 18px 24px;background:var(--panel);border-left:1px solid var(--line);box-shadow:-8px 0 24px rgba(15,42,74,.08)}
@media (prefers-color-scheme:dark){.rail{box-shadow:-8px 0 24px rgba(0,0,0,.35)}}
@media (min-width:1500px){.rail{box-shadow:none}#detail.railopen #thread{margin-right:340px;height:100%}}
.railhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.railhead h3{margin:0;font-size:var(--fs-4);letter-spacing:-.01em;overflow-wrap:anywhere}
.rail h4,.railbody h4{margin:18px 0 6px;font-size:var(--fs-2);font-weight:600;color:var(--muted)}
.rail input,.rail select,.railbody input,.railbody select{width:100%;margin:0 0 8px}
.rail .tagrow input.tagin,.railbody .tagrow input.tagin{width:110px;margin:0;padding:4px 10px;min-height:30px;font-size:var(--fs-2)}
.cinfo{margin:2px 0 0}
.cline{overflow-wrap:anywhere;line-height:1.5}
.crow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crow input[type=date],.crow select{flex:1 1 130px;width:auto}
.appt{padding:4px 0}
.appt+.appt{border-top:1px solid var(--line)}
.rail details{margin-top:6px;color:var(--muted)}
.rail summary{cursor:pointer;font-size:var(--fs-2)}
.railbody{max-width:360px}
@media (max-width:860px){.rail{width:100%;border-left:0;box-shadow:none;padding-top:calc(16px + env(safe-area-inset-top))}}

.book{margin:8px 0 0}
.book summary{cursor:pointer;font-weight:600;color:var(--accent);padding:4px 0}
.book[open] summary{margin-bottom:8px}
.slots{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 10px}
.slots .chip{padding:5px 11px;font-size:var(--fs-2)}
.book .check{margin:6px 0 10px;font-size:var(--fs-2)}
.rail input[type=checkbox],.railbody input[type=checkbox]{width:auto;margin:0 8px 0 0;flex:none}
.rail .check,.railbody .check{display:flex;align-items:center;gap:0;text-align:left}

.apptline{display:flex;justify-content:space-between;align-items:center;gap:10px}
.apptline .link{padding:2px 0;flex:none}
.struck{text-decoration:line-through;color:var(--muted)}
.appt .check{margin:6px 0}

/* =====================================================================================================
   Polish pass: depth, icons, calmer type. Navy anchors, teal signals, light shadows give the layers.
   ===================================================================================================== */
:root{
  --sh1:0 1px 2px rgba(15,42,74,.07),0 1px 1px rgba(15,42,74,.04);
  --sh2:0 8px 24px -6px rgba(15,42,74,.16),0 2px 6px rgba(15,42,74,.06);
  --teal-wash:#e9f7f5;
  --r-lg:16px;
}
@media (prefers-color-scheme:dark){:root{
  --sh1:0 1px 2px rgba(0,0,0,.35);
  --sh2:0 10px 28px -6px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.3);
  --teal-wash:#10353a;
}}
.ico{flex:none;display:block}

/* sidebar */
aside{padding:20px 12px 14px;gap:1px}
.brand{margin:0 8px 22px;font-size:var(--fs-4)}
.brand img{box-shadow:0 2px 8px rgba(0,0,0,.28)}
nav a{gap:11px;justify-content:flex-start;padding:9px 12px;border-radius:10px;color:var(--ink-text);font-size:var(--fs-3);transition:background .12s}
nav a .ico{opacity:.72}
nav a:hover .ico{opacity:1}
nav a .lbl{flex:1}
nav a.on{background:rgba(255,255,255,.11);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
nav a.on .ico{color:var(--ink-link);opacity:1}
nav a.on::before{left:-12px;top:9px;bottom:9px}
nav h4{margin:20px 12px 5px;font-size:var(--fs-1);letter-spacing:.01em;color:var(--ink-muted)}
aside button.link{display:flex;justify-content:flex-start;gap:11px;border-radius:10px;padding:9px 12px;color:var(--ink-link)}
aside button.link:hover{background:var(--ink-hover);text-decoration:none}

/* the list */
.bar{padding:14px 12px 10px;gap:6px}
.bar input{padding:10px 12px 10px 40px;border-radius:12px;background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8ea3' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 13px 50%/18px no-repeat}
.filters{padding:2px 12px 12px}
#items li{gap:13px;padding:14px 16px 14px 14px;border-bottom:1px solid color-mix(in srgb,var(--line) 65%,transparent)}
#items li:hover{background:var(--hover)}
#items li.on{background:var(--sel);box-shadow:inset 3px 0 0 var(--accent)}
#items li.unread{box-shadow:none}
#items li.unread.on{box-shadow:inset 3px 0 0 var(--accent)}
#items li.unread .nm>span:first-child::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--teal);margin-right:8px;vertical-align:1px;box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 22%,transparent)}
.av{width:42px;height:42px;font-size:var(--fs-3);box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 12%,transparent)}
.nm{font-size:var(--fs-3)}
.sn{margin-top:4px}

/* the conversation */
#detail{background:var(--bg)}
#thread header{padding:14px 22px;box-shadow:var(--sh1);position:relative;z-index:2;border-bottom:0}
#thread h2{font-size:var(--fs-5);font-weight:700}
#thread header button.mute,#thread header button.link{gap:6px}
#thread header #addTask{color:var(--accent);font-weight:600}
.m{box-shadow:var(--sh1);padding:11px 15px;border-radius:18px 18px 18px 6px}
.m.out{border-radius:18px 18px 6px 18px;box-shadow:0 2px 10px -2px rgba(15,42,74,.28)}
.m .meta{font-size:var(--fs-1)}
.daysep{margin:10px 0 4px}
.daysep span{background:var(--bg);padding:3px 12px;border-radius:999px;border:1px solid var(--line);font-size:var(--fs-1)}
.daysep::before,.daysep::after{background:color-mix(in srgb,var(--line) 70%,transparent)}
#msgs{padding:22px 24px;gap:11px}

/* the reply box: one raised panel */
#replyForm{margin:0 18px 16px;padding:12px 14px 12px;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh2);background:var(--panel)}
#replyForm:focus-within{border-color:color-mix(in srgb,var(--teal) 70%,var(--line));box-shadow:var(--sh2),0 0 0 3px color-mix(in srgb,var(--teal) 20%,transparent)}
#replyText{border:0;background:transparent;box-shadow:none!important;padding:4px 2px;margin:4px 0 8px;min-height:72px;border-radius:0}
#replyText:focus-visible{box-shadow:none}
#replyForm .tools{padding-top:8px;border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
#replyForm .tools #sendBtn{padding:9px 22px;border-radius:999px;box-shadow:0 4px 12px -2px color-mix(in srgb,var(--accent) 55%,transparent)}
#replyForm .tools select{border-radius:999px;background:var(--chip);border-color:transparent}
#replyTarget{margin:0 0 2px}

/* empty state */
.empty{max-width:300px;font-size:var(--fs-3)}
.empty::before{width:72px;height:72px;border-radius:20px;margin-bottom:18px;box-shadow:var(--sh2)}

/* side panels */
.task-panel{padding:26px 28px}
.task-panel h2{font-size:var(--fs-5);font-weight:700}
.rail{box-shadow:var(--sh2)}
.cpart{border-top-color:color-mix(in srgb,var(--line) 70%,transparent)}
.convrow,.linkcard,.appt{border-radius:12px}
dialog{border-radius:18px;box-shadow:var(--sh2)}

/* phone */
@media (max-width:860px){
  .tabs{box-shadow:0 -6px 20px -8px rgba(15,42,74,.22);border-top:0}
  .tab{gap:3px;font-size:var(--fs-1)}
  .tab.on{color:var(--accent)}
  .tab.on .ico{stroke-width:2.2}
  #replyForm{margin:0 10px 10px}
}

@media (max-width:860px){
  #thread header .blabel{display:none}
  #thread header button.mute{padding:7px 11px}
}

.meline{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px}
.meline select{width:auto;max-width:100%;margin:0;min-height:var(--ctl-sm);padding:4px 10px;font-size:var(--fs-2)}

details.why{margin-top:12px;color:var(--muted)}
details.why summary{cursor:pointer;font-size:var(--fs-2)}

/* ==== MAILBOX: Gmail gets the whole width, and an open email gets the whole screen ==== */
.rowstar,.racts{display:none}
.rowstar.starred,.rowstar.starred[aria-pressed="true"]{background:transparent;color:var(--warn-text)}
.rowstar.starred svg{fill:currentColor}
.tag.lbl{background:var(--sel);color:var(--accent-strong)}
.mm{border-bottom:1px solid var(--line);padding:16px 0}
.mm:last-of-type{border-bottom:0}
.mh{display:flex;gap:12px;align-items:flex-start}
.mh{cursor:pointer}
.mh:hover .mn strong{color:var(--accent)}
.mh:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-sm)}
.mw{flex:1;min-width:0}
.mn{line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt{font-size:var(--fs-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mm .peek{display:none}
.mm.folded .peek{display:block}
.mm.folded .toline,.mm.folded .macts,.mm.folded .mbody{display:none}
.md{font-size:var(--fs-1);white-space:nowrap;font-variant-numeric:tabular-nums;padding-top:2px}
.macts{display:flex;gap:2px;margin:-6px -6px 0 0}
.mbody{padding:12px 0 0 52px}
.mtext{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6;font-size:var(--fs-3)}
.mbody iframe.mail{border-radius:var(--r-md)}
.mbody .imgbar{border-radius:var(--r-md) var(--r-md) 0 0;padding:8px 14px}
.mbody .attachments{margin-top:14px}
.modes{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.modes .chip{gap:6px}
.addr{display:grid;gap:6px;margin-bottom:8px}
.arow{display:flex;align-items:center;gap:8px}
.arow label{flex:none;width:2.6rem;margin:0;color:var(--muted);font-size:var(--fs-2)}
.arow input{flex:1;min-width:0;margin:0}
.ccrow{display:grid;grid-template-columns:auto 1fr;gap:6px 8px;align-items:center;margin:6px 0}
.ccrow label{margin:0;color:var(--muted);font-size:var(--fs-2)}
.ccrow input{margin:0}
.linkdlg label{display:block;margin:14px 0 4px;font-weight:var(--fw-medium)}
.linkdlg input{margin:0}
.dlgacts{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.labellist{display:grid;gap:8px;margin-top:10px;max-height:50vh;overflow:auto}
.labeldlg .check{margin:0}
#thread header .tlabel{display:none}
#thread header button.starred{color:var(--warn-text)}
#thread header button.starred svg{fill:currentColor}
#thread header button.starred[aria-pressed="true"]{background:var(--chip)}
@media (min-width:861px){
  body.mailbox .app{grid-template-columns:236px minmax(0,1fr)}
  body.mailbox #detail{display:none}
  body.mailbox.open #detail{display:flex}
  body.mailbox.open #list{display:none}
  body.mailbox #closeDetail{display:inline-grid}
  body.mailbox #selectBtn,body.mailbox #bulk .done{display:none}
  body.mailbox #list{border-right:0}
  body.mailbox .bar{padding:14px 20px 10px}
  body.mailbox .bar input{max-width:560px}
  body.mailbox .filters{padding:2px 20px 12px}
  body.mailbox #bulk{padding-inline:20px}
  /* a row: tick, star, sender, subject and the start of the message, time */
  body.mailbox #items li{align-items:center;gap:8px;padding:0 20px 0 12px;min-height:48px}
  body.mailbox #items li .av{display:none}
  body.mailbox #items li .pick{margin:0}
  body.mailbox .rowstar{display:inline-grid;color:var(--muted);flex:none}
  body.mailbox .rowstar:hover{color:var(--warn-text)}
  body.mailbox #items li .rb{display:grid;grid-template-columns:minmax(150px,240px) minmax(0,1fr) auto;column-gap:20px;align-items:center;padding:12px 0}
  body.mailbox #items li .nm{display:contents}
  body.mailbox #items li .nm>span:first-child{grid-column:1;grid-row:1}
  body.mailbox #items li .nm>span:last-child{grid-column:3;grid-row:1}
  body.mailbox #items li .racts{grid-column:3;grid-row:1;justify-content:flex-end;gap:0}
  body.mailbox #items li:hover .racts{display:flex}
  body.mailbox #items li:hover .nm>span:last-child{visibility:hidden}
  body.mailbox #items li .sn{grid-column:2;grid-row:1;margin:0;display:flex;gap:6px;align-items:center;font-size:var(--fs-3)}
  body.mailbox #items li .sn .tag{margin:0;flex:none}
  body.mailbox #items li .subj{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
  body.mailbox #items li .snip{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
  body.mailbox #items li.unread .subj{font-weight:var(--fw-bold)}
  /* the open email: a toolbar, the subject, then one readable column */
  body.mailbox #thread header{padding:10px max(20px,calc((100% - 60rem) / 2)) 12px;gap:6px 8px}
  body.mailbox #thread header>div{order:3;flex:1 1 100%;margin-top:6px}
  body.mailbox #thread h2{font-size:var(--fs-6);line-height:1.25}
  body.mailbox #thread header .tlabel{display:inline}
  body.mailbox #msgs{padding:4px max(20px,calc((100% - 60rem) / 2)) 24px;gap:0}
  body.mailbox #replyForm{padding:14px max(20px,calc((100% - 60rem) / 2)) 16px}
  body.mailbox #replyText{min-height:8rem}
  body.mailbox .task-panel{max-width:60rem;margin-inline:auto;width:100%}
}
@media (max-width:860px){
  .mbody{padding-left:0}
  .mh .av{width:34px;height:34px}
  .macts{display:none}
  .arow label{width:2.2rem}
}

/* ---- message editor (email): one bordered field with a slim toolbar on top ---- */
.rte{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);display:flex;flex-direction:column;min-width:0}
.rte:focus-within{outline:2px solid var(--accent);outline-offset:1px}
.rte-bar{display:flex;align-items:center;gap:2px;padding:4px 6px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.rte-bar button.icon{min-width:34px;min-height:34px}
.rte-sep{width:1px;height:18px;background:var(--line);margin:0 6px}
.rte-field{min-height:5.5rem;max-height:50vh;overflow:auto;padding:12px 14px;line-height:1.55;font-size:var(--fs-3);overflow-wrap:anywhere;outline:0}
.rte-field[data-empty]::before{content:attr(data-placeholder);color:var(--muted);float:left;height:0;pointer-events:none}
.rte-field a{color:var(--accent);text-decoration:underline}
.rte-field ul,.rte-field ol{margin:.3em 0;padding-left:1.6em}
.rte-field blockquote{margin:.3em 0;padding-left:1em;border-left:3px solid var(--line)}
#mailEditor{margin:4px 0 8px}
@media (min-width:861px){body.mailbox .rte-field{min-height:8rem}}

.rte-field img{max-width:100%;max-height:260px;width:auto;height:auto;border-radius:var(--r-sm);vertical-align:bottom}
.rte-field img:focus,.rte-field img.sel{outline:2px solid var(--accent)}
#neLater{margin-right:8px}
.task-panel .row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#replyForm .tools #draftNote{font-size:var(--fs-1)}

/* ---- minimized reply box: just the row of ways to answer ---- */
.mailbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.mailbar .modes{margin:0}
#replyForm.min .mailbar{margin-bottom:0}
#replyForm.min>:not(#mailBar){display:none!important}
#replyForm.min{padding-top:8px;padding-bottom:8px}
@media (min-width:861px){body.mailbox #replyForm.min{padding-top:8px;padding-bottom:8px}}

.mfold{margin:-6px -6px 0 0;color:var(--muted)}
.mless{margin-top:10px;gap:6px}
.mm.folded .mless{display:none}

/* ---- notes and tasks inside a contact record: plain rows with hairlines ---- */
.cnote,.ctask{padding:10px 0;border-bottom:1px solid var(--line)}
.cnotes>.cnote:last-child,.ctasks>.ctask:last-child{border-bottom:0}
.ntext{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5;font-size:var(--fs-3)}
.ntext a{color:var(--accent);text-decoration:underline}
.nmeta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px;font-size:var(--fs-1)}
.nmeta .link{padding:0;min-height:0}
.cnote textarea{margin:0 0 6px}
.ctask{display:flex;align-items:flex-start;gap:10px}
.ctask input[type=checkbox]{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--accent)}
.ctask .ttext{flex:1;min-width:0;font-size:var(--fs-1)}
.ctask .ttitle{font-size:var(--fs-3);line-height:1.4;overflow-wrap:anywhere;color:var(--text)}
.ctask.done .ttitle{text-decoration:line-through;color:var(--muted)}
.ctask button.icon{margin:-4px -6px 0 0;color:var(--muted)}
.ctask button.icon:hover{color:var(--err)}

/* ---- picking a time, and the messages inside a contact record ---- */
.whenbox,#filters .whenrow{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.whenbox{margin:0 0 8px}
.whenrow{display:flex;gap:10px 14px;flex-wrap:wrap;align-items:flex-end;width:100%;margin-top:4px}
.whenfield{display:grid;gap:3px;font-size:var(--fs-1);color:var(--muted)}
.whenfield input{margin:0;min-width:0}
.cmsgs{margin-top:6px}
.cmsg{padding:10px 0;border-bottom:1px solid var(--line)}
.cmsgs>.cmsg:last-child{border-bottom:0}
.cmeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--fs-1)}
.cmeta .link{padding:0;min-height:0}
.cbody{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5;font-size:var(--fs-3);margin:4px 0}
.cbody.clamp{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.cbody a{color:var(--accent);text-decoration:underline}
.cmsg.out .cmeta strong{color:var(--accent-strong)}

/* ==== APPOINTMENTS: a list by day, and a month calendar that gets the whole width ==== */
.struck{text-decoration:line-through;color:var(--muted)}
.tag.ap-confirmed{background:var(--info-soft);color:var(--info)}
.tag.ap-showed{background:var(--ok-soft);color:var(--ok)}
.tag.ap-cancelled,.tag.ap-noshow{background:color-mix(in srgb,var(--err) 14%,transparent);color:var(--err)}
.monthnav{align-items:center}
.monthname{min-width:9.5em;text-align:center;font-size:var(--fs-3)}
.apwhen{font-size:var(--fs-4);margin:8px 0}
.apline{margin:4px 0}
#items li.calwrap{display:block;padding:0;border:0;cursor:default;background:var(--panel)}
.calgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--line)}
.calwd{padding:8px 10px;font-size:var(--fs-1);color:var(--muted);font-weight:var(--fw-medium);border-bottom:1px solid var(--line)}
.calcell{min-height:112px;padding:6px 6px 8px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:3px;min-width:0}
.calcell:nth-child(7n+7){border-right:0}
.calcell.out{background:var(--bg)}
.calcell.out .calnum{color:var(--muted)}
.calnum{align-self:flex-start;min-width:28px;min-height:28px;padding:0 6px;border-radius:var(--r-pill);font-weight:var(--fw-medium);color:var(--text);text-decoration:none;display:inline-grid;place-items:center}
.calnum.today{background:var(--accent);color:var(--on-accent)}
.calev{display:flex;gap:4px;justify-content:flex-start;width:100%;min-height:24px;padding:0 8px;font-size:var(--fs-1);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left;border-radius:var(--r-sm)}
.calev .evt{font-weight:var(--fw-bold);flex:none}
.calmore{align-self:flex-start;padding:0 4px;min-height:0}
.caldots{display:none}
@media (min-width:861px){
  body.wide .app{grid-template-columns:236px minmax(0,1fr)}
  body.wide #detail{display:none}
  body.wide.open #detail{display:flex}
  body.wide.open #list{display:none}
  body.wide #list{border-right:0}
  body.wide .task-panel .mobile-only{display:inline-block}
  body.wide #selectBtn{display:none}
  body.wide .bar{padding:14px 20px 10px}
  body.wide .bar input{max-width:560px}
  body.wide .filters{padding:2px 20px 12px}
}
@media (max-width:860px){
  .calcell{min-height:64px;padding:4px 2px;align-items:center}
  .calwd{padding:6px 2px;text-align:center}
  .calev,.calmore{display:none}
  .caldots{display:inline-block;font-size:var(--fs-1);color:var(--accent);font-weight:var(--fw-bold)}
}
button.link.calnum{color:var(--text);min-height:28px}
button.link.calnum.today{color:var(--on-accent)}
.calcell.out button.link.calnum{color:var(--muted)}
.task-actions .confirm{display:grid;gap:10px;width:100%;max-width:34rem}
.task-actions .confirm .check{margin:0}


/* ---- SETTINGS PAGE: a full page over the app, one section at a time ---- */
.settings{grid-column:2/-1;height:100vh;background:var(--bg);color:var(--text);overflow:auto;display:flex;flex-direction:column;min-width:0}
@media (min-width:861px){.sethead button.icon{display:none}}
body.settingsview #list,body.settingsview #detail{display:none}
body.settingsview .tabs{display:none}
.settings.hidden{display:none}
.sethead{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-5);background:var(--panel);box-shadow:0 1px 0 var(--line)}
.sethead h1{margin:0;font-size:var(--fs-5);letter-spacing:-.01em}
.sethead .muted{margin-right:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sethead button.icon{flex:none;width:var(--ctl);height:var(--ctl);border-radius:50%;display:grid;place-items:center;font-size:var(--fs-4)}
.setbody{display:grid;grid-template-columns:13rem minmax(0,44rem);gap:var(--sp-6);justify-content:start;padding:var(--sp-6) var(--sp-5) 80px;width:100%;box-sizing:border-box}
.setnav{position:sticky;top:calc(var(--ctl) + 2 * var(--sp-3) + var(--sp-6));align-self:start;display:flex;flex-direction:column;gap:2px}
.setlink{display:flex;align-items:center;justify-content:flex-start;background:none;border:0;border-radius:var(--r-md);text-align:left;padding:0 var(--sp-3);min-height:var(--ctl);font:inherit;font-size:var(--fs-3);color:var(--text);cursor:pointer;box-shadow:none;box-sizing:border-box}
.setlink:hover{background:var(--hover)}
.setlink.on{background:var(--sel);font-weight:var(--fw-semi,600);box-shadow:inset 3px 0 0 var(--teal)}
.setlink:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.setsec h2{margin:0 0 4px;font-size:var(--fs-5);letter-spacing:-.01em}
.setsec .lede{margin:0 0 var(--sp-4);color:var(--muted)}
.setsec h3{margin:26px 0 8px;padding-top:18px;border-top:1px solid var(--line);font-size:var(--fs-3)}
.setsec h2 + .lede + h3{margin-top:12px;border-top:0;padding-top:0}
.setsec ul{list-style:none;padding:0;margin:8px 0}
.setsec li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.setsec li:last-child{border-bottom:0}
.setsec .gm{padding:8px 0 10px;border-bottom:1px solid var(--line)}
.setsec .gm + button{margin-top:14px}
.setsec .gmhead{display:flex;justify-content:space-between;align-items:center;gap:12px}
.setsec .gmhead strong{overflow-wrap:anywhere}
.setsec h4.dsrv{margin:14px 0 4px;font-size:var(--fs-3)}
.setsec summary{cursor:pointer;color:var(--accent);font-weight:500}
.setsec .gmopts .gmrow button.link+button.link{margin-left:0}
@media (max-width:860px){
 .settings{position:fixed;inset:0;z-index:30;height:100dvh}
 .sethead{padding:calc(var(--sp-2) + env(safe-area-inset-top)) var(--sp-2) var(--sp-2) var(--sp-4)}
 .setbody{display:block;padding:0 var(--sp-4) calc(40px + env(safe-area-inset-bottom))}
 .setnav{position:sticky;top:calc(var(--ctl) + 2 * var(--sp-2) + env(safe-area-inset-top));z-index:1;flex-direction:row;overflow-x:auto;gap:var(--sp-2);margin:0 calc(-1 * var(--sp-4)) var(--sp-4);padding:var(--sp-2) var(--sp-4);background:var(--bg);box-shadow:0 1px 0 var(--line);scrollbar-width:none}
 .setlink{flex:none;justify-content:center;border-radius:var(--r-pill);background:var(--chip);white-space:nowrap}
 .setlink.on{background:var(--accent);color:var(--on-accent);box-shadow:none}
}
.setsec li .tag{margin-left:8px}
#apStatus{width:auto;min-width:11rem;margin:4px 0 6px}