/* Layout: classic three-pane desktop mail client — folder tree | sortable message table | reading pane; collapses to list → message on phones */
:root{
  --bg:#ffffff; --panel:#f7f8fa; --line:#e4e7eb; --line-strong:#d3d8de;
  --fg:#1f2328; --muted:#6a737d; --faint:#9aa3ad;
  --accent:#1572c6; --accent-soft:#e3effa; --hover:#f1f6fc; --sel:#d6e7f8;
  --new:#f39a1e; --new-fg:#ffffff; --flag:#d93025; --brand-red:#e3131b;
  --shadow:0 10px 32px rgba(20,40,70,.18);
  --font:"Segoe UI","Noto Sans",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"Cascadia Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#1c1f24; --panel:#22262c; --line:#2f343b; --line-strong:#3b4149;
  --fg:#e6e8eb; --muted:#9aa3ad; --faint:#6c757f;
  --accent:#5aa6ee; --accent-soft:#1f3550; --hover:#262c34; --sel:#203a57;
  --new:#f39a1e; --new-fg:#1c1f24; --flag:#ff6b5e; --brand-red:#ff3b42;
  --shadow:0 10px 32px rgba(0,0,0,.5); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#1c1f24; --panel:#22262c; --line:#2f343b; --line-strong:#3b4149;
  --fg:#e6e8eb; --muted:#9aa3ad; --faint:#6c757f;
  --accent:#5aa6ee; --accent-soft:#1f3550; --hover:#262c34; --sel:#203a57;
  --new:#f39a1e; --new-fg:#1c1f24; --flag:#ff6b5e; --brand-red:#ff3b42;
  --shadow:0 10px 32px rgba(0,0,0,.5); color-scheme:dark}

html,body{height:100%}
html{overflow:hidden}
body{margin:0}
img{max-width:100%}
.app{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--fg);font:13px/1.4 var(--font);overflow:hidden}
*{box-sizing:border-box}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input,select,textarea{font:inherit;color:inherit}
svg.i{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

.app{height:100%;display:grid;grid-template-rows:auto auto 1fr;min-width:0}

/* Top bar */
.top{display:flex;align-items:center;gap:12px;padding-block:6px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.iconbtn{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:4px;color:var(--muted)}
.iconbtn:hover{background:var(--hover);color:var(--fg)}
.search{flex:1;max-width:400px;margin-inline:auto;display:flex;align-items:center;gap:8px;height:30px;padding:0 12px;border:1px solid var(--line-strong);border-radius:15px;color:var(--muted);background:var(--bg)}
.search input{flex:1;min-width:0;border:0;background:none;outline:0;color:var(--fg)}
.search input::placeholder{color:var(--faint);font-style:italic}
.top .acct{font-size:12px;color:var(--muted);white-space:nowrap}

/* Toolbar */
.toolbar{display:flex;align-items:center;gap:4px;padding-block:6px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.toolbar::-webkit-scrollbar{display:none}
.btn-new{display:flex;align-items:center;gap:6px;height:30px;padding:0 14px;border-radius:3px;background:var(--new);color:var(--new-fg);font-weight:600;flex:none}
.btn-new:hover{filter:brightness(1.05)}
.tb{display:flex;align-items:center;gap:6px;height:30px;padding:0 9px;border-radius:3px;white-space:nowrap;flex:none}
.tb:hover:not(:disabled){background:var(--hover)}
.tb:disabled{opacity:.4;cursor:default}
.tb .caret{width:10px;height:10px;opacity:.7}
.tb-sep{width:1px;height:20px;background:var(--line);margin:0 6px;flex:none}
.tb-spacer{flex:1;min-width:12px}
.spin svg{animation:spin .8s linear}
@keyframes spin{to{transform:rotate(360deg)}}

/* Main panes */
.main{display:grid;grid-template-columns:232px minmax(0,1fr) minmax(320px,40%);min-height:0}
.app.nav-collapsed .main{grid-template-columns:0 minmax(0,1fr) minmax(320px,40%)}

/* Sidebar */
.side{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;overflow:hidden;background:var(--bg)}
.side h2{font-size:15px;font-weight:600;margin:0;padding:12px 16px 8px}
.tree{flex:1;overflow-y:auto;padding-bottom:12px}
.node{display:flex;align-items:center;gap:8px;width:100%;height:24px;padding:0 12px 0 16px;text-align:left;color:var(--fg);white-space:nowrap}
.node:hover{background:var(--hover)}
.node.active{background:var(--sel)}
.node .label{flex:1;overflow:hidden;text-overflow:ellipsis}
.node .count{font-size:11px;color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums}
.node.group{color:var(--muted);font-weight:600;font-size:12.5px;height:26px;margin-top:4px}
.node.group .chev{transition:transform .15s}
.node.group.closed .chev{transform:rotate(-90deg)}
.node.child{padding-left:38px}
.node.child svg.i{color:var(--muted)}
.node .dot{width:12px;height:12px;border-radius:50%;flex:none}
.sidenav{display:flex;justify-content:space-around;border-top:1px solid var(--line);padding:6px 8px}
.sidenav .iconbtn.on{color:var(--accent);background:var(--accent-soft)}

/* List */
.list{display:flex;flex-direction:column;min-height:0;container-type:inline-size;border-right:1px solid var(--line)}
.listhead{display:flex;align-items:flex-end;gap:4px;padding:0 16px;border-bottom:1px solid var(--line)}
.tab{padding:10px 18px 9px;border-bottom:2px solid transparent;color:var(--fg)}
.tab.on{color:var(--accent);border-bottom-color:var(--accent)}
.tab .n{font-size:11px;color:var(--muted);margin-left:4px}
.listhead .info{margin-left:auto;padding-bottom:10px;color:var(--faint);font-size:12px;white-space:nowrap}

.cols,.row{display:grid;grid-template-columns:22px 22px 26px minmax(120px,210px) minmax(0,1fr) 22px 104px 70px 120px 44px;align-items:center;column-gap:6px;padding:0 10px 0 16px}
.cols{height:28px;border-bottom:1px solid var(--line);color:var(--muted);font-size:12px}
.cols .h{display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden;border-left:1px solid var(--line);padding-left:6px;height:16px}
.cols .h.sortable{cursor:pointer}
.cols .h.sortable:hover{color:var(--fg)}
.cols .h.num{justify-content:flex-end;padding-right:4px}
.cols .h.first{border-left:0}
.rows{flex:1;overflow-y:auto;outline:0}
.row{height:32px;cursor:default;border-bottom:1px solid transparent;position:relative}
.row:nth-child(even){background:color-mix(in srgb,var(--panel) 55%,transparent)}
.row:hover{background:var(--hover)}
.row.sel{background:var(--sel)}
.row .c{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.row .num{text-align:right;font-variant-numeric:tabular-nums;color:var(--fg)}
.row.unread .from,.row.unread .subj{font-weight:700}
.row.unread::before{content:"";position:absolute;left:4px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--accent)}
.row .st{color:var(--faint);display:grid;place-items:center}
.row .st.flagged{color:var(--flag)}
.row .attach{color:var(--muted);display:grid;place-items:center}
.row .folder{color:var(--muted)}
.row .quick{display:flex;gap:2px;opacity:0;justify-content:flex-end}
.row:hover .quick,.row.sel .quick{opacity:1}
.row .quick button{width:20px;height:20px;display:grid;place-items:center;border-radius:3px;color:var(--muted)}
.row .quick button:hover{background:var(--bg);color:var(--fg)}
.row .quick button.on{color:var(--flag)}
.av{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:9.5px;font-weight:700;letter-spacing:.02em;flex:none}
.preview{display:none}
.empty{padding:48px 24px;text-align:center;color:var(--muted)}
.empty strong{display:block;color:var(--fg);font-size:14px;margin-bottom:4px}

@container (max-width: 640px){
  .cols{display:none}
  .row{grid-template-columns:34px minmax(0,1fr) auto;grid-template-areas:"av from time" "av subj meta" "av prev meta";height:auto;padding-block:8px;row-gap:1px;border-bottom:1px solid var(--line)}
  .row:nth-child(even){background:transparent}
  .row:hover{background:var(--hover)}
  .row.sel{background:var(--sel)}
  .row .st,.row .num.size,.row .folder,.row .quick,.row .attach{display:none}
  .row .avc{grid-area:av;align-self:start;padding-top:2px}
  .row .av{width:28px;height:28px;font-size:11px}
  .row .from{grid-area:from}
  .row .subj{grid-area:subj}
  .row .time{grid-area:time;color:var(--muted);font-size:12px}
  .row .meta{grid-area:meta;display:flex;gap:4px;justify-content:flex-end;align-self:start;color:var(--muted)}
  .row .preview{grid-area:prev;display:block;color:var(--muted);font-size:12px}
}
.row .meta{display:none}
@container (min-width: 641px) and (max-width: 900px){
  .cols,.row{grid-template-columns:22px 22px 26px minmax(110px,180px) minmax(0,1fr) 22px 86px 64px 44px}
  .cols>:nth-child(9),.row .folder{display:none}
}
@container (max-width: 640px){.row .meta{display:flex}.row .meta .fl{color:var(--flag)}}

/* Reading pane */
.read{display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--bg)}
.read-top{display:flex;align-items:center;gap:8px;padding:10px max(16px,env(safe-area-inset-right,0px)) 10px 16px;border-bottom:1px solid var(--line);min-height:44px}
.read-top h1{flex:1;min-width:0;margin:0;font-size:15px;font-weight:600;text-wrap:balance;overflow-wrap:anywhere}
.read-top .back{display:none}
.read-scroll{flex:1;overflow-y:auto;padding:16px max(16px,env(safe-area-inset-right,0px)) 32px 16px}
.mhead{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:start}
.mhead .av{width:48px;height:48px;font-size:17px}
.mhead .who{color:var(--accent);font-weight:600;font-size:13.5px}
.mhead .to{color:var(--muted);font-size:12px;margin-top:2px;overflow-wrap:anywhere}
.mhead .to b{color:var(--accent);font-weight:400}
.mhead .when{text-align:right;font-size:12px;color:var(--muted);display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.chip{display:inline-block;border:1px solid var(--line-strong);border-radius:3px;padding:1px 6px;font-size:11.5px;color:var(--fg)}
.mhead .acts{display:flex;gap:2px}
.attachments{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0 60px}
.att{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:4px;padding:6px 10px;max-width:100%}
.att .ext{font:600 10px/1 var(--mono);color:#fff;background:var(--accent);border-radius:2px;padding:3px 4px;text-transform:uppercase}
.att .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att .sz{color:var(--muted);font-size:11.5px}
.mbody{margin-top:20px;font-size:14px;line-height:1.55;max-width:72ch;overflow-wrap:anywhere}
.mbody p{margin:0 0 12px}
.mbody .q{border-top:1px solid var(--line);margin-top:20px;padding-top:12px;color:var(--muted)}
.mbody .q b{color:var(--fg)}
.sig{margin-top:18px;font-size:13.5px;line-height:1.5}
.sig img{display:block;width:180px;margin:10px 0}
.sig .dark-logo{filter:none}
:root[data-theme="dark"] .sig img{background:#fff;padding:4px 6px;border-radius:2px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .sig img{background:#fff;padding:4px 6px;border-radius:2px}}
.sig .red{color:var(--brand-red)}
.ext-banner{border-left:4px solid var(--new);background:color-mix(in srgb,var(--new) 12%,var(--bg));padding:8px 12px;font-size:12.5px;margin-bottom:16px}
.read-empty{flex:1;display:grid;place-items:center;color:var(--muted);text-align:center;padding:24px}
.read-empty svg{width:56px;height:56px;stroke-width:1;color:var(--faint);margin:0 auto 8px;display:block}

/* Menus */
.menu{position:fixed;z-index:70;min-width:200px;background:var(--bg);border:1px solid var(--line-strong);border-radius:4px;box-shadow:var(--shadow);padding:4px 0}
.menu button{display:flex;align-items:center;gap:10px;width:100%;padding:7px 14px;text-align:left}
.menu button:hover{background:var(--hover)}

/* Compose */
.scrim{position:fixed;inset:0;background:rgba(10,20,35,.35);z-index:50;display:grid;place-items:center;padding:24px}
.compose{width:min(1180px,100%);height:min(900px,100%);background:var(--bg);border:1px solid var(--line-strong);border-radius:4px;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}
.c-title{position:relative;display:flex;align-items:center;justify-content:center;height:36px;padding:0 16px;color:var(--muted);font-size:14px}
.c-title span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100% - 80px)}
.c-title .iconbtn{position:absolute;right:max(8px,env(safe-area-inset-right,0px))}
.c-head{padding:4px 16px 14px;display:flex;flex-direction:column;gap:6px;border-bottom:1px solid var(--line)}
.c-sendrow{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.split{display:flex;flex:none}
.btn-send{display:flex;align-items:center;gap:7px;height:32px;padding:0 16px;border-radius:3px 0 0 3px;background:var(--new);color:var(--new-fg);font-weight:500}
.btn-send.caretbtn{border-radius:0 3px 3px 0;padding:0 7px;border-left:1px solid rgba(255,255,255,.35)}
.btn-send:hover{filter:brightness(1.05)}
.caret{width:11px;height:11px}
.fromsel{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:4px 6px;border-radius:3px;min-width:0;text-align:left;overflow-wrap:anywhere}
.fromsel:hover{background:var(--hover)}
.fromsel .dot{width:12px;height:12px;border-radius:50%;flex:none}
.c-field{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:0}
.c-field label{color:var(--muted);font-size:12.5px}
.inwrap{display:flex;align-items:center;border:1px solid var(--line-strong);border-radius:3px;height:28px;padding:0 6px;min-width:0;background:var(--bg)}
.inwrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.inwrap input{flex:1;min-width:0;border:0;outline:0;background:none;height:100%}
.inwrap input.err::placeholder{color:var(--flag)}
.ccbtn{color:var(--accent);font-size:12px;white-space:nowrap;padding-left:8px}
.c-fmt{display:flex;align-items:center;gap:2px;padding:6px 12px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.c-fmt::-webkit-scrollbar{display:none}
.fb{display:flex;align-items:center;gap:3px;height:30px;padding:0 7px;border-radius:3px;flex:none}
.fb:hover{background:var(--hover)}
.fb svg.i:not(.caret){width:18px;height:18px}
.fsep{width:1px;height:22px;background:var(--line);margin:0 6px;flex:none}
.prio-badge{margin-left:8px;color:var(--flag);font-size:12px;font-weight:600;white-space:nowrap}
.c-atts{display:flex;flex-wrap:wrap;gap:8px;padding:8px 16px;border-bottom:1px solid var(--line)}
.c-body{flex:1;overflow-y:auto;padding:12px 16px 32px;outline:0;font-size:13.5px;line-height:1.5;overflow-wrap:anywhere}
.c-body p{margin:0}
.c-body .sig{margin-top:12px}
.c-body .q{margin-top:24px;border-top:1px solid var(--line);padding-top:12px}
@media (max-width:860px){
  .scrim{padding:0;place-items:stretch}
  .compose{width:100%;height:100%;border:0;border-radius:0;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
  .c-sendrow{margin-bottom:8px;gap:8px}
  .fromsel{font-size:12px}
  .c-field{grid-template-columns:52px minmax(0,1fr)}
  .inwrap{height:34px}
  .inwrap input{font-size:16px}
  .c-body{font-size:16px}
}
.mbody .q{color:var(--fg)}
.siglink{color:#8a4b8f;text-decoration:underline}
mark.mention{background:color-mix(in srgb,#f2c94c 45%,var(--bg));color:var(--fg);padding:0 3px;border-radius:2px}
.mhead .to b{font-weight:400}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:9px 16px;border-radius:4px;box-shadow:var(--shadow);z-index:60;max-width:calc(100% - 32px);display:flex;gap:14px;align-items:center}
.toast button{color:var(--accent-soft);font-weight:600;text-decoration:underline}

/* Responsive */
@media (max-width: 1100px){ .tb .lbl{display:none} .top .acct{display:none} }
@media (max-width: 860px){
  .main,.app.nav-collapsed .main{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;z-index:30;top:0;bottom:0;left:0;width:min(280px,85vw);transform:translateX(-100%);visibility:hidden;transition:transform .2s,visibility 0s .2s;box-shadow:var(--shadow);padding-top:env(safe-area-inset-top,0px);padding-left:env(safe-area-inset-left,0px)}
  .app.nav-open .side{transform:none;visibility:visible;transition:transform .2s}
  .app.nav-open .navscrim{display:block}
  .read{position:fixed;inset:0;z-index:20;transform:translateX(100%);visibility:hidden;transition:transform .2s,visibility 0s .2s;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
  .app.reading .read{transform:none;visibility:visible;transition:transform .2s}
  .read-top .back{display:inline-grid}
  .list{border-right:0}
  .tb-sep{display:none}
  .toolbar [data-act]{display:none}
  .listhead .info{display:none}
}
.navscrim{display:none;position:fixed;inset:0;z-index:25;background:rgba(10,20,35,.3)}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* ===== additions for the live client ===== */
.demo-chip{font-size:11px;font-weight:600;color:var(--new);border:1px solid var(--new);border-radius:10px;padding:1px 8px;white-space:nowrap}
.loadbar{position:relative;height:2px;overflow:hidden}
.loadbar.on::after{content:"";position:absolute;inset:0;width:30%;background:var(--accent);animation:lb 1s linear infinite}
@keyframes lb{from{transform:translateX(-100%)}to{transform:translateX(340%)}}
.more{display:flex;justify-content:center;padding:12px}
.more button{color:var(--accent);padding:6px 12px;border-radius:3px}
.more button:hover{background:var(--hover)}
.node.signin{color:var(--accent)}
.node.err .label{color:var(--flag)}
.node .sub{font-size:11px;color:var(--muted)}
.row .imp{color:var(--flag);font-weight:700}
.welcome{margin:48px auto;max-width:440px;padding:0 16px;text-align:center}
.welcome h2{font-size:20px;font-weight:600;margin:0 0 8px;text-wrap:balance}
.welcome p{color:var(--muted);margin:0 0 20px}
.welcome .presets{display:flex;flex-direction:column;gap:8px;margin-top:20px;text-align:left}
.btn-primary{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 18px;border-radius:3px;background:var(--accent);color:#fff;font-weight:600}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:3px;border:1px solid var(--line-strong)}
.btn-ghost:hover{background:var(--hover)}
.btn-danger{color:var(--flag)}
.mailframe{display:block;width:100%;border:0;min-height:120px;background:#fff;border-radius:2px;color-scheme:light}
.imgbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:6px 10px;margin-bottom:12px}
.imgbar button{color:var(--accent)}
.read-loading{padding:24px 16px;color:var(--muted)}
.att{cursor:pointer;background:var(--bg)}
.att:hover{background:var(--hover)}
.draftbar{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:8px 10px;background:var(--accent-soft);border-radius:3px;font-size:12.5px}
/* autocomplete */
.inwrap{position:relative}
.ac{position:absolute;left:-1px;right:-1px;top:calc(100% + 2px);z-index:5;background:var(--bg);border:1px solid var(--line-strong);border-radius:3px;box-shadow:var(--shadow);max-height:280px;overflow-y:auto;padding:4px 0}
.ac button{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:10px;align-items:center;width:100%;padding:6px 10px;text-align:left}
.ac button.on,.ac button:hover{background:var(--sel)}
.ac .av{grid-row:span 2;width:28px;height:28px;font-size:11px}
.ac .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac .e{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac .hint{padding:6px 12px;color:var(--muted);font-size:12px}
/* modal */
.modal{width:min(560px,100%);max-height:min(720px,100%);background:var(--bg);border-radius:6px;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}
.modal header{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line)}
.modal header h3{margin:0;font-size:15px;font-weight:600;flex:1}
.modal .mbody2{padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}
.modal footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}
.mblist{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:4px}
.mbitem{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border-top:1px solid var(--line)}
.mbitem:first-child{border-top:0}
.mbitem .dot{width:12px;height:12px;border-radius:50%}
.mbitem .e{overflow-wrap:anywhere}
.mbitem .s{font-size:12px;color:var(--muted)}
.mbitem .s.ok{color:#2f8a3a}
.mbitem .acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.fieldset{display:flex;flex-direction:column;gap:8px}
.fieldset h4{margin:0;font-size:13px;font-weight:600}
.fieldset .rowf{display:flex;gap:8px;flex-wrap:wrap}
.fieldset input,.fieldset select{height:32px;border:1px solid var(--line-strong);border-radius:3px;padding:0 8px;background:var(--bg);min-width:0;flex:1 1 180px}
.fieldset p{margin:0;color:var(--muted);font-size:12px}
.progress{font-size:12px;color:var(--muted);margin-left:8px}
.btn-send:disabled{opacity:.6;cursor:default}

/* swipe gestures */
.rows{position:relative}
.row{touch-action:pan-y}
.row.swiping{background:var(--bg)!important;z-index:1;box-shadow:0 0 0 1px var(--line)}
.swipe-bg{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:0 20px;color:#fff;font-weight:600;font-size:13px;background:var(--line);z-index:0;transition:background .12s}
.swipe-bg span{display:flex;align-items:center;gap:8px;opacity:0}
.swipe-bg svg.i{width:20px;height:20px}
.swipe-bg.del{background:color-mix(in srgb,var(--flag) 55%,var(--bg))}
.swipe-bg.read{background:color-mix(in srgb,var(--accent) 55%,var(--bg))}
.swipe-bg.del .sw-del,.swipe-bg.read .sw-read{opacity:1}
.swipe-bg.del.armed{background:var(--flag)}
.swipe-bg.read.armed{background:var(--accent)}
.ac .hint+.hint{display:none}

/* sender logos */
.av{position:relative;overflow:hidden}
.av img.logo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;padding:12%;box-sizing:border-box;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}

/* search scope */
.search select{border:0;border-left:1px solid var(--line);background:none;color:var(--muted);font-size:12px;padding:0 2px 0 8px;height:20px;cursor:pointer;max-width:42%;flex:none}
.search select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.search select option{background:var(--bg);color:var(--fg)}
.linkbtn{color:var(--accent);text-decoration:underline;margin-left:4px}
@media (max-width:480px){.search select{font-size:11px;padding-left:6px}}
.search{min-width:0;flex:1 1 auto}
.search input{min-width:40px}
@media (max-width:480px){.top{gap:8px}.search{padding:0 8px}.search select{max-width:96px}}
@media (max-width:480px){.demo-chip{display:none}}
.app{grid-template-columns:minmax(0,1fr)}
.top,.toolbar{min-width:0}

/* meeting card */
:root{--ok:#2f8a3a;--maybe:#b7791f}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--ok:#5cc46a;--maybe:#e0a43a}}
:root[data-theme="dark"]{--ok:#5cc46a;--maybe:#e0a43a}
.subj-ic{width:14px;height:14px;vertical-align:-2px;margin-right:5px;color:var(--muted)}
.meeting{margin:18px 0 4px;border:1px solid var(--line-strong);border-radius:4px;overflow:hidden;max-width:760px;background:var(--bg)}
.mt-head{padding:12px 16px;background:var(--panel);border-bottom:1px solid var(--line);font-size:14px;line-height:1.45}
.meeting.no .mt-head{border-left:4px solid var(--flag)}
.meeting.ok .mt-head{border-left:4px solid var(--ok)}
.meeting.maybe .mt-head{border-left:4px solid var(--maybe)}
.meeting.info .mt-head{border-left:4px solid var(--accent)}
.mt-body{padding:14px 16px 16px}
.mt-title{margin:0;font-size:17px;font-weight:600;text-wrap:balance;overflow-wrap:anywhere}
.mt-when{margin-top:4px;font-size:14px;font-variant-numeric:tabular-nums;padding-bottom:12px;border-bottom:1px solid var(--line)}
.mt-when.muted{color:var(--muted);font-size:12.5px}
.mt-rows{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.mt-row{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start;font-size:14px;overflow-wrap:anywhere}
.mt-row>svg.i{width:18px;height:18px;color:var(--muted);margin-top:1px}
.mt-mail{color:var(--accent)}
.mt-people{display:flex;flex-wrap:wrap;gap:6px}
.mt-person{display:inline-flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:3px 8px;font-size:13px;max-width:100%;overflow-wrap:anywhere}
.mt-st{display:inline-grid;place-items:center}
.mt-st svg.i{width:16px;height:16px}
.mt-st.ok{color:var(--ok)}.mt-st.maybe{color:var(--maybe)}.mt-st.no{color:var(--flag)}.mt-st.org{color:var(--muted)}
.mt-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.mt-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border:1px solid var(--line-strong);border-radius:3px;background:var(--bg)}
.mt-btn:hover{background:var(--hover)}
.mt-btn.ok svg{color:var(--ok)}.mt-btn.maybe svg{color:var(--maybe)}.mt-btn.no svg{color:var(--flag)}
.mt-btn.on{background:var(--accent-soft);border-color:var(--accent);font-weight:600}

/* "An:" prefix: hidden in sent views on the table layout (column says "An"), kept on the phone card layout */
.to-pre{color:var(--muted)}
.card-head{display:none}
@container (max-width: 640px){.card-head{display:block;padding:5px 16px 5px 56px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line)}}

/* ===== settings ===== */
.top #btnSettings{flex:none}
.modal.settings{width:min(900px,100%);height:min(720px,100%);max-height:none}
.modal.settings header h3{display:flex;align-items:center;gap:8px}
.set-wrap{flex:1;display:grid;grid-template-columns:190px minmax(0,1fr);min-height:0}
.set-nav{display:flex;flex-direction:column;gap:2px;padding:10px 8px;border-right:1px solid var(--line);background:var(--panel)}
.set-nav button{display:flex;align-items:center;gap:10px;height:34px;padding:0 12px;border-radius:4px;text-align:left;color:var(--fg)}
.set-nav button:hover{background:var(--hover)}
.set-nav button.on{background:var(--sel);font-weight:600}
.set-main{overflow-y:auto;padding:4px 20px 20px;min-width:0}
.set-sec{padding:16px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.set-sec h4{margin:0;font-size:14px;font-weight:600}
.set-hint{margin:-4px 0 0;color:var(--muted);font-size:12.5px;max-width:65ch}
.set-grid{display:flex;flex-wrap:wrap;gap:12px 18px}
.set-grid label,.sig-name,.acc-label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.set-main select,.set-main input[type=text],.set-main input[type=email]{height:32px;border:1px solid var(--line-strong);border-radius:3px;padding:0 8px;background:var(--bg);color:var(--fg);min-width:0;font-size:13px}
.set-main input[type=color]{width:44px;height:32px;padding:2px;border:1px solid var(--line-strong);border-radius:3px;background:var(--bg);cursor:pointer}
.set-reset{padding:14px 0 4px}
.set-sync{flex:1;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);min-width:0}
.set-sync svg.i{width:14px;height:14px}
.modal.settings footer{align-items:center}
.font-preview{border:1px dashed var(--line-strong);border-radius:4px;padding:12px 14px;background:#fff;color:#000;max-width:560px}
/* accounts */
.acc-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:4px}
.acc-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;border-top:1px solid var(--line)}
.acc-row:first-child{border-top:0}
.acc-mail{font-weight:600;overflow-wrap:anywhere}
.acc-sub{font-size:12px;color:var(--muted)}
.acc-sub.ok{color:var(--ok,#2f8a3a)}
.acc-label{margin-top:6px;max-width:220px}
.acc-acts{display:flex;gap:4px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.acc-acts .iconbtn:disabled{opacity:.3;cursor:default}
/* signatures */
.sig-layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px}
.sig-list{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:4px;padding:4px;align-self:start}
.sig-item{text-align:left;padding:7px 10px;border-radius:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sig-item:hover{background:var(--hover)}
.sig-item.on{background:var(--sel);font-weight:600}
.sig-new{margin-top:4px;justify-content:center}
.sig-edit{display:flex;flex-direction:column;gap:8px;min-width:0}
.sig-tools{display:flex;align-items:center;gap:2px;flex-wrap:wrap;border:1px solid var(--line);border-bottom:0;border-radius:4px 4px 0 0;padding:4px 6px;background:var(--panel);margin-bottom:-8px}
.sig-tools .fb span{font-size:12px}
.sig-tools .tb-spacer{flex:1}
.sig-editor{min-height:220px;max-height:360px;overflow:auto;border:1px solid var(--line-strong);border-radius:0 0 4px 4px;padding:12px;background:#fff;color:#000;outline:0;overflow-wrap:anywhere}
.sig-editor:focus{border-color:var(--accent)}
.sig-editor img{max-width:100%}
.sig-map{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);gap:8px 12px;align-items:center}
.sm-h{font-size:12px;color:var(--muted);font-weight:600}
.sm-who{overflow-wrap:anywhere}
/* design */
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip-opt input{position:absolute;opacity:0;pointer-events:none}
.chip-opt span{display:inline-flex;align-items:center;height:32px;padding:0 14px;border:1px solid var(--line-strong);border-radius:16px;cursor:pointer}
.chip-opt input:checked+span{background:var(--sel);border-color:var(--accent);font-weight:600}
.chip-opt input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.swatches{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.swatch{width:30px;height:30px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.swatch.on{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--c)}
.swatch-custom{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-left:6px}
.toggle{display:flex;align-items:center;gap:10px;cursor:pointer}
.toggle input{width:18px;height:18px;accent-color:var(--accent)}
.toggle.off{color:var(--muted);cursor:default}
/* density & preview options */
.app.dense .row{height:26px}
@container (max-width: 640px){.app.dense .row{height:auto;padding-block:4px;row-gap:0}.app.dense .row .av{width:24px;height:24px;font-size:10px}.app.dense .row .preview{display:none}}
.app.no-preview .row .preview{display:none!important}
@media (max-width:700px){
  .modal.settings{height:100%;border-radius:0}
  .set-wrap{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .set-nav{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:6px 8px}
  .set-nav button{flex:none}
  .set-main{padding:0 16px 16px}
  .sig-layout{grid-template-columns:minmax(0,1fr)}
  .sig-list{flex-direction:row;flex-wrap:wrap}
  .sig-map{grid-template-columns:minmax(0,1fr)}
  .sig-map .sm-h{display:none}
  .sm-who{font-weight:600;margin-top:8px}
  .acc-row{grid-template-columns:auto minmax(0,1fr)}
  .acc-acts{grid-column:1/-1;justify-content:flex-start}
}

.imgbar a{color:var(--accent)}
.imgbar span{color:var(--muted)}
.inline-imgs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.inline-imgs img{max-height:120px;max-width:min(100%,320px);border:1px solid var(--line);border-radius:3px;background:#fff}

/* message in its own window / full-size overlay */
.app.solo .side,.app.solo .list,.app.solo .navscrim{display:none}
.app.solo .main,.app.solo.nav-collapsed .main{grid-template-columns:minmax(0,1fr)}
.app.solo .read{position:static;transform:none;visibility:visible}
.app.solo-window .top .search,.app.solo-window #btnNav,.app.solo-window #btnRefresh,.app.solo-window .btn-new,.app.solo-window .acct,.app.solo-window .demo-chip{display:none}
.app.solo .read-top .back{display:none}
.app.solo .read-scroll{padding-inline:max(16px,calc((100% - 1000px)/2))}
.app.solo:not(.solo-window) .read{position:fixed;inset:0;z-index:35;padding-top:env(safe-area-inset-top,0px)}
.app.solo:not(.solo-window) .read-top{padding-top:12px}
.app.solo-window .top{display:none}
.app.solo-window .toolbar{justify-content:center}
.app.solo-window .toolbar .tb .lbl{display:inline}
.app.solo-window .tb-sep:first-of-type{display:none}
button.demo-chip{background:none;cursor:pointer;font-family:inherit}
button.demo-chip:hover{background:color-mix(in srgb,var(--new) 12%,var(--bg))}
.set-hint code{font-family:var(--mono);font-size:12px;background:var(--panel);padding:1px 4px;border-radius:3px;overflow-wrap:anywhere}