/* TingMail — iOS-native look: SF font, system colors, automatic dark mode, frosted bars, inset grouped lists. */
:root{--bg:#F2F2F7;--card:#fff;--card2:#F2F2F7;--label:#000;--label2:rgba(60,60,67,.6);--label3:rgba(60,60,67,.3);--sep:rgba(60,60,67,.29);--fill:rgba(120,120,128,.12);--fill2:rgba(120,120,128,.2);
  --tint:#007AFF;--red:#FF3B30;--green:#34C759;--orange:#FF9500;--yellow:#FFCC00;--purple:#AF52DE;--indigo:#5856D6;--bar:rgba(249,249,249,.78);--sel:#E5F0FF;--shadow:0 8px 30px rgba(0,0,0,.12);color-scheme:light}
html.dk{--bg:#000;--card:#1C1C1E;--card2:#2C2C2E;--label:#fff;--label2:rgba(235,235,245,.6);--label3:rgba(235,235,245,.3);--sep:rgba(84,84,88,.6);--fill:rgba(120,120,128,.24);--fill2:rgba(120,120,128,.36);
  --tint:#0A84FF;--red:#FF453A;--green:#30D158;--orange:#FF9F0A;--yellow:#FFD60A;--purple:#BF5AF2;--indigo:#5E5CE6;--bar:rgba(28,28,30,.72);--sel:#0A2A4D;--shadow:0 8px 30px rgba(0,0,0,.6);color-scheme:dark}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html{background:var(--bg)}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,"Helvetica Neue",sans-serif;background:var(--bg);color:var(--label);padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);-webkit-font-smoothing:antialiased;letter-spacing:-.01em}
button{font:inherit;border:0;background:none;color:inherit;cursor:pointer;min-height:32px}
i[data-i]{display:inline-flex;width:1em;height:1em;vertical-align:-.14em}i[data-i] svg{width:100%;height:100%}
.link{color:var(--tint);font-weight:500;font-size:15px}.link.red,.red{color:var(--red)}
/* Large title + collapsing nav */
.topnav{position:fixed;top:0;left:0;right:0;z-index:12;height:calc(44px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 8px 0 16px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  background:var(--bar);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:.5px solid var(--sep);opacity:0;pointer-events:none;transition:opacity .2s}
.topnav b{font-size:17px;font-weight:600}.tn-r{justify-self:end;display:flex;gap:2px}.ibtn{width:44px;height:44px;color:var(--tint);font-size:22px;display:flex;align-items:center;justify-content:center}
.collapsed .topnav{opacity:1;pointer-events:auto}
.ttl{display:flex;justify-content:space-between;align-items:center;padding:8px 16px 4px;gap:10px;transition:opacity .2s}.collapsed .ttl{opacity:0}
.ttl h1{font-size:34px;font-weight:700;letter-spacing:.01em;line-height:41px}
.ttl .ic{display:flex;align-items:center;gap:16px}
.brief{display:flex;align-items:center;gap:5px;color:var(--tint);font-size:17px;height:44px}.brief i{font-size:20px;color:var(--orange)}
.gear{width:44px;height:44px;font-size:32px;display:flex;align-items:center;justify-content:center;color:var(--tint)}
/* Segmented control */
.seg{margin:8px 16px;display:flex;background:var(--fill);border-radius:9px;padding:2px;font-size:13px;font-weight:500;overflow-x:auto;scrollbar-width:none}
.seg button{flex:1;text-align:center;padding:6px 8px;border-radius:7px;white-space:nowrap;min-height:28px;transition:background .2s}.seg .on{background:var(--card);box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);font-weight:600}
html.dk .seg .on{background:#636366}
.flt{margin:2px 20px 4px;font-size:13px;color:var(--label2);display:flex;align-items:center;gap:6px}.flt #hiddenBtn{font-size:13px;min-height:30px;margin-left:auto;font-weight:600}
.sec{margin:18px 20px 6px;font-size:13px;font-weight:400;color:var(--label2);letter-spacing:.02em}
.list{margin:0 16px;background:var(--card);border-radius:12px;overflow:hidden}.list:empty::after{content:"Nothing here";display:block;padding:14px 16px;color:var(--label3);font-size:15px}
.it{display:flex;gap:10px;padding:11px 16px 11px 12px;align-items:flex-start;cursor:pointer;background:var(--card);min-height:64px}
.dot{width:9px;height:9px;border-radius:50%;margin-top:6px;flex:none;background:transparent}.dot.u{background:var(--tint)}
.body{flex:1;min-width:0}
.nm{font-weight:600;font-size:16px;display:flex;gap:6px;align-items:center}.tm{margin-left:auto;font-size:14px;color:var(--label2);font-weight:400}
.sm{font-size:15px;color:var(--label2);margin-top:2px;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ex{font-size:13px;margin-top:6px;color:var(--tint);display:flex;gap:10px;flex-wrap:wrap;align-items:center}.ex button{font-size:13px;color:var(--tint);min-height:28px}
.tag{font-size:11px;font-weight:600;padding:2px 7px;border-radius:6px;letter-spacing:.02em}.tag.work{background:rgba(255,149,0,.15);color:var(--orange)}.tag.personal{background:rgba(0,122,255,.13);color:var(--tint)}.tag.rs{background:var(--fill);color:var(--label2)}
.it.playing,.sw .it.playing{background:var(--sel)}
.sw{position:relative;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.sw+.sw .it::before{content:"";position:absolute;top:0;left:31px;right:0;border-top:.5px solid var(--sep)}
.sw .it{position:relative;will-change:transform;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.swbg{position:absolute;inset:0;display:flex;align-items:center;padding:0 22px;background:var(--fill2);color:#fff;font-weight:600;font-size:15px;transition:background .15s}
.swlab{display:flex;align-items:center;gap:7px;white-space:nowrap;transition:transform .15s}.swlab i{font-size:20px}.swbg.armed .swlab{transform:scale(1.06)}
.draft{margin:12px 16px 0;background:var(--card);border-radius:12px;padding:12px 14px;font-size:15px;border:1.5px dashed var(--tint)}
.dh{display:flex;justify-content:space-between;align-items:center}
.s{background:var(--tint);color:#fff;padding:6px 16px;border-radius:999px;font-weight:600;font-size:15px}
.draft textarea{width:100%;margin-top:8px;border:0;background:var(--fill);color:var(--label);border-radius:10px;padding:10px;font:inherit;font-size:16px}
.qr{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.qr button{background:var(--fill);border-radius:999px;padding:5px 12px;font-size:14px}
.drow{display:flex;gap:16px;margin-top:8px}
.hiddenlist{margin:12px 20px;font-size:13px;color:var(--label2)}
.err{margin:6px 20px;font-size:13px;color:var(--red)}
/* Panes (push navigation) */
.pane{position:fixed;inset:0;background:var(--bg);z-index:15;overflow:auto;-webkit-overflow-scrolling:touch;padding-top:env(safe-area-inset-top);animation:push .28s cubic-bezier(.2,.8,.2,1)}
@keyframes push{from{transform:translateX(30%);opacity:.4}to{transform:none;opacity:1}}
.pnav{position:sticky;top:0;z-index:2;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:44px;padding:0 8px;background:var(--bar);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:.5px solid var(--sep)}
.pnav b{font-size:17px;font-weight:600;max-width:52vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pnav>:last-child{justify-self:end;padding-right:8px}
.back{display:flex;align-items:center;gap:2px;color:var(--tint);font-size:17px;height:44px;justify-self:start}.back i{font-size:22px}
.hc{font-size:13px;color:var(--label2)}
.hsub{margin:10px 20px;font-size:13px;color:var(--label2)}.empty{padding:16px;color:var(--label3);font-size:15px}
/* Message (HTML) view */
.mhead{display:flex;gap:12px;padding:14px 16px;align-items:flex-start}.mh{min-width:0;flex:1}.mfrom{font-weight:600;font-size:16px}.msub{font-size:20px;font-weight:700;margin-top:2px;line-height:1.25}.mdate{font-size:13px;color:var(--label2);margin-top:3px}
.imgbar{margin:0 16px 8px;padding:8px 12px;border-radius:10px;background:var(--fill);font-size:13px;color:var(--label2);display:flex;justify-content:space-between;align-items:center}.imgbar .link{font-size:14px;font-weight:600;min-height:32px}
.mframe{display:block;width:calc(100% - 16px);margin:0 8px;border:0;border-radius:12px;background:#fff;min-height:200px}
.mtext{margin:0 16px;padding:14px 16px;background:var(--card);border-radius:12px;white-space:pre-wrap;font-size:16px;line-height:1.45;word-wrap:break-word}
/* Search */
.search{margin:10px 16px;display:flex;align-items:center;gap:6px;background:var(--fill);border-radius:10px;padding:0 10px;color:var(--label2)}.search input{flex:1;border:0;background:none;font:inherit;font-size:17px;padding:8px 0;color:var(--label);outline:0}
/* Inset grouped lists */
.grp-h{margin:22px 32px 6px;font-size:13px;color:var(--label2);text-transform:uppercase;letter-spacing:.02em}
.grp{margin:0 16px;background:var(--card);border-radius:12px;overflow:hidden}
.grp .row,.sheetin .row{display:flex;justify-content:space-between;align-items:center;min-height:44px;padding:6px 16px;gap:10px;position:relative;font-size:17px}
.grp .row+.row::before,.sheetin .grp .row+.row::before{content:"";position:absolute;top:0;left:16px;right:0;border-top:.5px solid var(--sep)}
.row small{color:var(--label2);font-size:13px}.row .val{color:var(--label2)}
.grp .opt,.sheetin .opt{display:flex;align-items:center;width:100%;text-align:left;min-height:44px;padding:0 16px;font-size:17px;color:var(--tint);text-decoration:none;position:relative}
.grp>*+.opt::before{content:"";position:absolute;top:0;left:16px;right:0;border-top:.5px solid var(--sep)}.opt.chev::after{content:"›";margin-left:auto;color:var(--label3);font-size:22px}
.plain{flex:1;border:0;background:none;font:inherit;font-size:17px;color:var(--label);outline:0;min-width:0}
select,.sheetin input:not([type=checkbox]){font:inherit;font-size:16px;color:var(--label2);background:transparent;border:0;outline:0;text-align:right;max-width:60%}
/* iOS switch */
.switch{position:relative;width:51px;height:31px;flex:none}.switch input{position:absolute;inset:0;opacity:0;margin:0;z-index:1;cursor:pointer}
.switch span{position:absolute;inset:0;border-radius:999px;background:var(--fill2);transition:background .25s}.switch span::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.15),0 3px 1px rgba(0,0,0,.06);transition:transform .25s cubic-bezier(.3,.7,.4,1)}
.switch input:checked+span{background:var(--green)}.switch input:checked+span::after{transform:translateX(20px)}
.segc{display:flex;background:var(--fill);border-radius:9px;padding:2px;font-size:13px}.segc button{padding:4px 12px;border-radius:7px;min-height:28px}.segc .on{background:var(--card);box-shadow:0 3px 8px rgba(0,0,0,.12);font-weight:600}
html.dk .segc .on{background:#636366}
/* Sheet modal with grabber */
.sheet{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:40;display:flex;align-items:flex-end;animation:fade .2s}
.sheetin{background:var(--bg);width:100%;border-radius:14px 14px 0 0;padding:6px 0 calc(24px + env(safe-area-inset-bottom));max-height:92vh;overflow:auto;animation:up .3s cubic-bezier(.2,.8,.2,1)}
.sheetin::before{content:"";display:block;width:36px;height:5px;border-radius:3px;background:var(--label3);margin:0 auto 8px}
.sheetin h3{margin:18px 32px 6px;font-size:13px;font-weight:400;color:var(--label2);text-transform:uppercase}
.sheetin p{margin:8px 20px;font-size:15px}.sheetin>.opt{background:var(--card);margin:0 16px;width:calc(100% - 32px)}.sheetin>.opt:first-of-type{border-radius:12px 12px 0 0}.sheetin>.opt:last-child{border-radius:0 0 12px 12px}
.sheetin>.opt+.opt::before{content:"";position:absolute;top:0;left:16px;right:0;border-top:.5px solid var(--sep)}
.sheetin .ttlx{font-size:20px;font-weight:700;margin:6px 20px 4px}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}@keyframes fade{from{opacity:0}}
/* Player: frosted */
.caption{position:fixed;left:10px;right:10px;bottom:calc(170px + env(safe-area-inset-bottom));background:var(--card);border-radius:14px;padding:10px 14px;font-size:16px;line-height:1.45;box-shadow:var(--shadow);max-height:28vh;overflow:auto;z-index:17}
.caption .w.on{background:rgba(255,204,0,.45);border-radius:3px}
.player{position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));z-index:18;background:var(--bar);-webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);border:.5px solid var(--sep);border-radius:22px;padding:10px 12px 6px;box-shadow:var(--shadow)}
.pr{display:flex;align-items:center;gap:10px}.pi{flex:1;min-width:0}.pt{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps{font-size:12px;color:var(--label2);display:flex;align-items:center;gap:4px}
.chip{min-height:24px;padding:1px 9px;border-radius:999px;background:var(--fill);color:var(--label);font-size:12px;font-weight:600}
.art{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,#FF6B6B,#FFB86B);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}.art.sm{width:40px;height:40px;border-radius:50%;font-size:15px}
.hf{background:var(--green);color:#fff;font-weight:700;font-size:12px;padding:0 12px;border-radius:999px;min-height:30px}
.bar{height:3px;background:var(--fill2);border-radius:2px;margin:8px 0 2px}.bar i{display:block;width:0;height:100%;background:var(--label);border-radius:2px;transition:width .2s}
.cs{display:flex;justify-content:space-between;align-items:center;font-size:22px}.cs>button{width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--label);border-radius:50%;transition:transform .1s,background .15s}.cs>button:active{transform:scale(.9);background:var(--fill)}
.cs .pl{width:50px;height:50px;background:var(--label);color:var(--bg);font-size:22px}
/* Driving mode (always dark) */
.hands{position:fixed;inset:0;background:#000;color:#fff;padding:calc(14px + env(safe-area-inset-top)) 18px calc(14px + env(safe-area-inset-bottom));display:flex;flex-direction:column;z-index:20}
.htop{display:flex;justify-content:space-between;font-size:14px;color:#aaa}.live{color:#30D158;font-weight:700}
.hands h2{font-size:34px;font-weight:700;margin-top:14px}
.hmeta{color:#aaa;font-size:15px;margin-top:6px}
.htext{font-size:24px;line-height:1.35;margin-top:16px;flex:1;overflow:auto}.htext .w.on{color:#30D158}
.wave{height:30px;display:flex;gap:4px;align-items:center;margin:8px 0}.wave i{width:4px;background:#30D158;border-radius:2px;height:8px;transition:height .15s}
.hgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.btn{border-radius:26px;height:min(22vh,180px);font-size:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;touch-action:manipulation;position:relative;z-index:1;transition:transform .1s}.btn:active{transform:scale(.97)}.btn b{font-size:30px}
.btn.a{background:#30D158;color:#06260f}.btn.s{background:#2C2C2E;color:#fff}.btn.r{background:#0A84FF;color:#fff}.btn.y{background:#FF9F0A;color:#2a1600}
.hvoice{display:flex;align-items:center;gap:12px;margin-top:10px}.hmic{width:52px;height:52px;border-radius:50%;background:#2C2C2E;font-size:24px;flex:none;color:#fff}
.hlisten{font-size:15px;font-weight:600}.hlisten.on{color:#30D158}.hlisten.on::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:#30D158;margin-right:6px;animation:pulse 1s infinite}.hlisten.paused{color:#aaa}.hlisten.err{color:#FF9F0A}.hlisten.off,.hlisten.na{color:#888}
.hheard{font-size:13px;color:#ccc;margin-top:2px;max-height:2.6em;overflow:hidden}
@keyframes pulse{50%{opacity:.25}}
.hfoot{display:flex;justify-content:space-between;color:#888;font-size:13px;margin-top:12px;gap:10px}.hfoot .link{color:#0A84FF}
/* Toasts */
.toast{position:fixed;left:16px;right:16px;bottom:calc(150px + env(safe-area-inset-bottom));background:rgba(44,44,46,.94);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:#fff;border-radius:14px;padding:6px 8px 6px 16px;display:flex;justify-content:space-between;align-items:center;gap:10px;z-index:30;font-size:15px;animation:up .25s}
.toast button{color:#FFD60A;font-weight:700;min-height:40px;padding:0 8px}
.handsOn .toast{bottom:auto;top:calc(10px + env(safe-area-inset-top))}.handsOn .caption,.handsOn .flash{display:none}
.flash{position:fixed;top:40%;left:50%;transform:translate(-50%,-50%);background:rgba(44,44,46,.9);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:#fff;padding:18px 28px;border-radius:16px;font-size:20px;font-weight:700;z-index:50;pointer-events:none;animation:fade .2s}
.info{position:fixed;left:16px;right:16px;top:calc(8px + env(safe-area-inset-top));background:var(--tint);color:#fff;border-radius:14px;padding:12px 14px;z-index:50;font-size:15px;pointer-events:none;text-align:center;animation:fade .2s}.info.err{background:var(--red)}
.signin{padding:80px 28px;text-align:center}.signin h1{font-size:40px;font-weight:800}.signin p{color:var(--label2);margin:12px 0}
.gbtn{display:inline-block;margin-top:20px;background:var(--tint);color:#fff;padding:14px 26px;border-radius:14px;font-weight:600;text-decoration:none}.fine{font-size:12px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ===================== v4: Gmail-style layout ===================== */
.collapsed .ttl{opacity:1}
.topbar{position:sticky;top:0;z-index:12;padding:calc(6px + env(safe-area-inset-top)) 8px 6px;margin-top:calc(-1 * env(safe-area-inset-top));background:var(--bar);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:.5px solid transparent;transition:border-color .2s}
.collapsed .topbar{border-bottom-color:var(--sep)}
.sbar{display:flex;align-items:center;gap:4px}.sbar .gear{font-size:30px}
.search.top{flex:1;margin:0;height:40px;border-radius:12px}.search.top input{font-size:17px;min-width:0}.qx{font-size:22px;color:var(--label2);width:32px}
.ttl{padding:6px 16px 2px}.ttl h1{font-size:34px}
.list .it{gap:12px;padding:10px 14px 10px 14px}
.av{width:40px;height:40px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:17px;background:#8E8E93}
.it .nm{font-weight:500;font-size:15px}.it.unread .nm,.it.unread .sj{font-weight:700}.it .who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.it .nm i{font-size:13px;color:var(--label2);flex:none}
.it.unread .tm{color:var(--label);font-weight:600}
.sj{font-size:15px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sn{display:flex;align-items:flex-start;gap:8px}.sn span{flex:1;min-width:0;font-size:14px;color:var(--label2);line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.starb{width:36px;height:36px;min-height:36px;margin:-6px -8px -6px 0;font-size:20px;color:var(--label3);display:flex;align-items:center;justify-content:center;flex:none}.starb.on{color:#F5B400}
.sw+.sw .it::before{left:66px}
/* Drawer */
.drawer{position:fixed;inset:0;z-index:35;background:rgba(0,0,0,0);transition:background .22s}.drawer.open{background:rgba(0,0,0,.35)}
.dpanel{position:absolute;top:0;bottom:0;left:0;width:min(84vw,320px);background:var(--bg);padding:calc(10px + env(safe-area-inset-top)) 8px calc(16px + env(safe-area-inset-bottom));overflow:auto;transform:translateX(-102%);transition:transform .25s cubic-bezier(.2,.8,.2,1);box-shadow:var(--shadow)}
.drawer.open .dpanel{transform:none}
.dtitle{font-size:22px;font-weight:700;padding:8px 14px 12px}
.ditem{display:flex;align-items:center;gap:14px;width:100%;min-height:46px;padding:0 14px;border-radius:999px;font-size:16px;color:var(--label);text-decoration:none;text-align:left}.ditem i{font-size:21px;color:var(--label2)}
.ditem span:not(.cnt):not(.dav){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ditem.on{background:var(--sel);font-weight:600}.ditem.on i{color:var(--tint)}
.ditem.acc{font-size:14px}.dav{width:24px;height:24px;border-radius:50%;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.cnt{font-size:13px;color:var(--label2);font-weight:600}.dsep{height:.5px;background:var(--sep);margin:8px 14px}
/* Message view */
.pr2{display:flex;justify-self:end}
.msgv .msub{font-size:22px;font-weight:700;line-height:1.25;padding:14px 16px 4px;margin:0}
.msgv .mhead{align-items:center;padding:8px 16px 12px}.mfrom{font-size:15px}.mfrom span{color:var(--label2);font-size:13px;font-weight:400}.mto{font-size:13px;color:var(--label2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.msgv .mdate{margin:0;align-self:flex-start;font-size:13px;color:var(--label2)}
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:16;display:none;transform:translateZ(0);justify-content:space-around;padding:4.5px 8px calc(4.5px + env(safe-area-inset-bottom));background:var(--bar);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-top:.5px solid var(--sep)}
.mbar button{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:72px;min-height:44px;justify-content:center;color:var(--tint);font-size:11px;font-weight:500}.mbar i{font-size:23px}
.mbar .mplay{color:#fff;background:var(--tint);border-radius:14px;padding:4px 14px}
/* Mini + expanded player */
.mini{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:18;width:56px;height:56px;border-radius:50%;background:var(--tint);color:#fff;font-size:26px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,122,255,.4);animation:fade .2s}
.mini.on i{animation:pulse 1.2s infinite}
body:has(#msgView:not([hidden])) .mini{bottom:calc(84px + env(safe-area-inset-bottom))}
.player{padding:4px 14px 10px;animation:up .28s cubic-bezier(.2,.8,.2,1);bottom:calc(8px + env(safe-area-inset-bottom))}
.pgrab{width:36px;height:5px;border-radius:3px;background:var(--label3);margin:2px auto 8px;cursor:pointer}
.player .cs{margin-top:4px}.player .cs .chip{min-width:52px;min-height:32px}
.prow{display:flex;justify-content:space-around;margin-top:8px;border-top:.5px solid var(--sep);padding-top:6px}.prow button{display:flex;flex-direction:column;align-items:center;font-size:11px;color:var(--label2);min-width:60px;min-height:44px;justify-content:center;gap:2px}.prow i{font-size:20px;color:var(--label)}
body:has(#msgView:not([hidden])) .player{bottom:calc(76px + env(safe-area-inset-bottom))}
.caption{bottom:calc(240px + env(safe-area-inset-bottom))}
/* Sheets */
.ssub{margin:2px 20px 10px!important;color:var(--label2);font-size:13px!important}
.sgrp{margin:0 16px;background:var(--card);border-radius:12px;overflow:hidden}
.sgrp .opt{gap:12px;color:var(--label);background:none;margin:0!important;width:100%!important;border-radius:0!important}.sgrp .opt i{font-size:21px;color:var(--tint)}.sgrp .opt.red,.sgrp .opt.red i{color:var(--red)}
.sgrp .opt+.opt::before{content:"";position:absolute;top:0;left:52px;right:0;border-top:.5px solid var(--sep)}
.sgrp .opt .val{margin-left:auto;color:var(--label2);font-size:15px}.sgrp .opt.cur{font-weight:600}.sgrp .opt.cur i{margin-left:auto}
input[type=datetime-local]{flex:1;font:inherit;font-size:16px;color:var(--label);background:var(--fill);border:0;border-radius:8px;padding:8px;text-align:left!important;max-width:none!important}
.sigrow textarea{width:100%;font:inherit;font-size:14px;color:var(--label);background:var(--fill);border:0;border-radius:8px;padding:8px;resize:vertical}
/* Compose */
.compose{background:var(--card)}
.sendbtn{justify-self:end;width:44px;height:44px;color:var(--tint);font-size:24px;display:flex;align-items:center;justify-content:center}
.cf{display:flex;align-items:center;gap:8px;min-height:46px;padding:0 16px;border-bottom:.5px solid var(--sep)}.cf label{color:var(--label2);font-size:15px;width:56px;flex:none}
.cf input,.cf select{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:16px;color:var(--label);outline:0;text-align:left;max-width:none}.link.sm{font-size:13px}
.cbody{display:block;width:100%;min-height:180px;border:0;outline:0;background:none;color:var(--label);font:inherit;font-size:17px;line-height:1.45;padding:14px 16px;resize:vertical}
.csig{padding:0 16px 10px;color:var(--label2);font-size:15px;line-height:1.4}.sigdash{opacity:.7}
.catts{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px}.att{display:inline-flex;align-items:center;gap:6px;background:var(--fill);border-radius:10px;padding:6px 4px 6px 10px;font-size:14px;max-width:100%}.att button{min-height:28px;width:28px;font-size:18px;color:var(--label2)}
.ctools{display:flex;gap:10px;padding:12px 16px;border-bottom:.5px solid var(--sep)}.tool{display:flex;align-items:center;gap:6px;background:var(--fill);border-radius:999px;padding:0 14px;min-height:40px;font-size:15px;color:var(--tint);cursor:pointer}.tool.on{background:var(--red);color:#fff}
.qhead{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;color:var(--label2);font-size:14px}
.mframe.quote{width:calc(100% - 32px);margin:0 16px;border:.5px solid var(--sep)}
body:has(#compose:not([hidden])) #player,body:has(#compose:not([hidden])) #mini,body:has(#compose:not([hidden])) .caption{display:none!important}

/* ---------------- v5 ---------------- */
.pnav .pr2{display:flex;gap:0}.pnav .pr2 .ibtn{width:38px}
#mvSpeak{color:var(--tint)}
.edge{position:fixed;left:0;top:0;bottom:0;width:24px;z-index:17;touch-action:none}
.msgv.swiping{transition:none}.msgv.swipeback{transition:transform .22s ease-out}
.player .cs{gap:2px}.player .cs .skip{width:40px;height:40px;font-size:24px;color:var(--label)}.skip i[data-i]{width:1.1em;height:1.1em}
.speedmenu{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:60;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:14px;background:var(--card2);border-radius:18px;box-shadow:0 10px 40px rgba(0,0,0,.28)}.speedmenu[hidden]{display:none}.speedmenu .smttl{grid-column:1/-1;text-align:center;font-weight:600;font-size:15px;color:var(--label2);padding-bottom:4px}.speedmenu button{background:var(--card);border-radius:12px;min-height:48px;font-size:17px;font-weight:600}.speedmenu button.on{background:var(--tint);color:#fff}
#speedBtn.lp{transform:scale(.92);background:var(--fill2)}
.matts{margin:12px 8px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.acard{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:12px;padding:8px 10px;min-height:56px;text-align:left;width:100%;position:relative;overflow:hidden}
.acard .aic{width:36px;height:40px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex:none;background:var(--label2)}
.acard .aic.pdf{background:#E5252A}.acard .aic.doc{background:#2B579A}.acard .aic.xls{background:#217346}.acard .aic.zip{background:#8E8E93}.acard .aic.img{background:var(--purple)}
.acard img.thumb{width:44px;height:44px;border-radius:8px;object-fit:cover;flex:none;background:var(--fill)}
.acard .an{flex:1;min-width:0}.acard .an b{display:block;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.acard .an small{font-size:12px;color:var(--label2)}
.acard .aact{display:flex;gap:2px}.acard .aact a{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--tint);text-decoration:none;font-size:16px}.acard .aact svg{width:20px;height:20px}.acard .aact button{width:32px;height:32px;min-height:32px;border-radius:16px;color:var(--tint);font-size:16px}
.viewer{position:fixed;inset:0;z-index:60;background:#000;display:flex;flex-direction:column}
.vbar{display:flex;justify-content:space-between;align-items:center;height:calc(44px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 16px 0;color:#fff;font-size:15px}.vbar span{max-width:55vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vstage{flex:1;overflow:hidden;display:flex;align-items:center;justify-content:center;touch-action:none}.vstage img{max-width:100%;max-height:100%;transform-origin:0 0;will-change:transform;user-select:none;-webkit-user-drag:none}
.ptr{height:0;overflow:hidden;display:flex;justify-content:center;align-items:center;position:relative;pointer-events:none;transition:height .2s}
.ptr i{width:26px;height:26px;border-radius:50%;border:2.5px solid var(--label3);border-top-color:var(--tint);opacity:.5;flex:none}
.ptr.pull i{opacity:1;border-color:var(--tint)}.ptr.busy i{opacity:1;border-color:var(--label3);border-top-color:var(--tint);animation:spin .8s linear infinite}
#lists{transition:transform .2s}#lists.pulling{transition:none}
@keyframes spin{to{transform:rotate(360deg)}}
/* settings */
details.sigsec{border-top:.5px solid var(--sep)}details.sigsec>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:0 16px;font-size:17px;cursor:pointer}
details.sigsec>summary::-webkit-details-marker{display:none}details.sigsec>summary::after{content:"›";color:var(--label3);font-size:22px;transition:transform .2s}details.sigsec[open]>summary::after{transform:rotate(90deg)}
.sigtools{display:flex;gap:6px;padding:0 12px 6px;flex-wrap:wrap}.sigtools button{min-height:30px;padding:0 10px;border-radius:8px;background:var(--fill);font-size:14px;color:var(--label)}.sigtools button.on{background:var(--tint);color:#fff}
.sigEd{margin:0 12px 12px;min-height:72px;max-height:30vh;overflow:auto;padding:10px 12px;border-radius:10px;background:var(--card2);font-size:15px;line-height:1.4;outline:0;transition:min-height .2s,max-height .2s;color:var(--label);-webkit-user-select:text;user-select:text}
.sigEd:focus,.sigEd.big{min-height:50vh;max-height:50vh;box-shadow:0 0 0 2px var(--tint)}.sigEd img{max-width:100%;height:auto}
textarea.sigRaw{display:block;width:calc(100% - 24px);margin:0 12px 12px;min-height:50vh;font:13px ui-monospace,Menlo,monospace;border-radius:10px;border:0;padding:10px;background:var(--card2);color:var(--label)}
.segc.undo button{min-width:38px}
.btnFill{display:flex;align-items:center;justify-content:center;gap:8px;width:calc(100% - 32px);margin:22px 16px 0;min-height:50px;border-radius:12px;background:var(--tint);color:#fff;font-size:17px;font-weight:600;transition:transform .08s,filter .08s}
.btnFill:active,.btnFill.pressed{transform:scale(.97);filter:brightness(.85)}.btnFill .spin{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .7s linear infinite;display:none}.btnFill.busy .spin{display:inline-block}
.cmpsig{white-space:normal}.cmpsig img{max-width:100%;height:auto}

/* v5.1 */
.ttl .brand{display:flex;align-items:center;gap:10px;min-width:0}.ttl .logo{width:34px;height:34px;border-radius:8px;flex:none;display:block}
.tool.pending{background:var(--fill);color:var(--red);box-shadow:inset 0 0 0 1.5px var(--red)}
.sendarch{padding:10px 16px 0}.sabtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;border-radius:12px;background:var(--fill);color:var(--tint);font-size:16px;font-weight:600}
#aftseg button{font-size:12px;padding:0 8px}

/* v5.2 */
.chainbtn{display:flex;align-items:center;gap:10px;margin:6px 16px 4px;padding:6px 12px;border-radius:999px;background:var(--fill);color:var(--label2);font-size:14px}.chainbtn .dots{font-weight:800;letter-spacing:1px;color:var(--label)}
.ttl .tblk{display:flex;flex-direction:column;min-width:0}.ttl .fsub{font-size:13px;color:var(--label2);line-height:16px;margin-top:-2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ttl .fsub:empty{display:none}

/* ---- v5.3 ---- */
.chipbar{padding:6px 12px 2px 16px;gap:8px}.chipbar .brief{flex:none}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;flex:1;min-width:0;padding:2px 0}.chips::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:17px;background:var(--fill,rgba(120,120,128,.12));color:var(--label);font-size:15px;font-weight:600;white-space:nowrap;border:0}
.chip.on{background:var(--tint);color:#fff}
.ccnt{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--tint);color:#fff;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.chip.on .ccnt{background:rgba(255,255,255,.28)}
.acsub{font-size:12.5px;color:var(--label2);padding:0 16px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.dtitle{padding:10px 14px 14px}.dlogo{height:34px;width:auto;display:block}
.sn span{-webkit-line-clamp:var(--plines,2);line-clamp:var(--plines,2)}
body.noav .it .av{display:none}
.fabc{position:fixed;right:16px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:18;height:56px;padding:0 20px 0 16px;border-radius:18px;border:0;background:var(--card,#fff);color:var(--label);display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;box-shadow:0 4px 16px rgba(0,0,0,.18),0 1px 3px rgba(0,0,0,.12)}
.fabc i,.fabc svg{width:22px;height:22px}
html.dk .fabc{background:#2c2c2e;color:#fff}
.viewer.pdfv{background:var(--bg,#f2f2f7)}.viewer.pdfv .vbar{color:var(--label)}
.vpdf{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y pinch-zoom;padding:8px;display:flex;flex-direction:column;align-items:center;gap:8px}
.vstage{position:relative}.vpage{background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.2);flex:none}.vload{color:var(--label2);margin-top:40px}
/* v5.3: compose fields — iOS Safari clipped the first glyph of the From <select>; same left inset + descender room for From/To/Cc/Bcc/Subject */
.cf input,.cf select{margin:0;text-indent:0;padding:9px 4px;line-height:22px;min-height:40px;box-sizing:border-box;-webkit-appearance:none;appearance:none;border-radius:0}
.cf select{padding-right:22px;overflow:visible;text-overflow:ellipsis;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238e8e93' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 4px center/11px 8px}
.cf input::-webkit-calendar-picker-indicator{display:none!important;opacity:0}
/* v5.5: sheets/panes never chain scroll to the page behind (iOS freeze fix) */
html.modal,html.modal body{overflow:hidden;overscroll-behavior:none}
.sheet{overscroll-behavior:contain}
.sheetin,.pane{overscroll-behavior-y:contain;will-change:transform}
.sheetin .ttlx{padding-top:4px}
/* v5.5: sun (Briefing) + gear in the top bar; chips fit at 390px */
.tbr{display:flex;align-items:center;gap:12px;flex:none}
.sbar .sunb{width:44px;height:44px;justify-content:center;padding:0;font-size:26px}.sbar .sunb i{font-size:26px}
.sbar .gear{width:44px;height:44px}
.chipbar{padding:6px 10px 2px}
.chips{gap:6px}
.chip{height:32px;padding:0 10px;font-size:14px;gap:5px}
.cmpacts{justify-self:end;display:flex;align-items:center;gap:6px}.cmpacts>span{display:flex}.cmpacts>span[hidden]{display:none}.sabtn2{font-size:25px}
.chips{gap:5px}
.chip{padding:0 9px;font-size:13.5px;gap:4px;letter-spacing:-.1px}
.chip .ccnt{min-width:16px;height:17px;padding:0 4px;font-size:11px;border-radius:9px}
.chipbar{padding:6px 8px 2px}
.chips{gap:4px}
.chip{padding:0 7px;font-size:13px;gap:3px;letter-spacing:-.2px}
.chip .ccnt{min-width:15px;padding:0 3px}
.chip{padding:0 6px;font-size:12.5px}
/* v5.5: let search shrink so sun + gear fit at 390px */
.sbar>:not(.tbr):not(#menuBtn){min-width:0;flex:1 1 auto}.sbar{overflow:hidden}
/* ---- v5.6 ---- */
/* header: sun glyph moved ~halfway toward the gear. Tap targets stay 44×44 and touch edge-to-edge (no overlap):
   button gap 12px → 0, and the glyphs are nudged inside their own boxes toward each other (sun +9px, gear −5px).
   Glyph centre distance 56px → 30px. */
.tbr{gap:0}
.sbar .sunb i{transform:translateX(7px)}
.sbar .gear svg{transform:translateX(-3px)}
/* bigger close / back targets (≥44pt, larger glyph) */
.back{min-width:44px;min-height:44px;font-size:18px}.back i{font-size:30px}
.xback{padding-right:8px}
#vClose{min-height:44px;min-width:44px;font-size:18px}
.xbtn{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:32px;flex:none}
.hx{background:#2C2C2E;color:#fff;margin-left:auto}.hx i{font-size:32px}
.htop{display:flex;align-items:center;gap:10px}
/* driving mode: 5 big buttons, Pause spans the row */
.btn.p{grid-column:1/-1;height:min(13vh,110px);background:#3A3A3C;color:#fff;flex-direction:row;gap:14px}.btn.p.resume{background:#30D158;color:#06260f}
.hmic.on{background:#30D158;color:#06260f}
/* drawer: per-account include check */
.drow{display:flex;align-items:center}.drow .ditem{flex:1;min-width:0}.drow.off .ditem{opacity:.5}
.dchk{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;position:relative}
.dchk::after{content:"";width:24px;height:24px;border-radius:7px;border:2px solid var(--label3);box-sizing:border-box;position:absolute}
.dchk.on::after{background:var(--tint);border-color:var(--tint)}.dchk i{position:relative;z-index:1;color:#fff;font-size:18px}
.hgrid .btn:not(.p){height:min(17vh,150px)}

/* v5.6.1: pinned message bar (outside .pane); content padding so nothing hides behind it */
body:has(#msgView:not([hidden])) .mbar{display:flex}
body:has(.pane:not(#msgView):not([hidden])) .mbar{display:none}
#msgView{padding-bottom:calc(60px + env(safe-area-inset-bottom))}
/* ---- v5.7: compact audio panel + bottom bar, no extra bottom gap, teleprompter driving mode ---- */
:root{--sab:max(2px,calc(env(safe-area-inset-bottom) - 18px))}
body{padding-bottom:0}
.mbar{padding:1px 8px var(--sab)}.mbar button{min-height:40px;gap:0;font-size:10px}.mbar i{font-size:20px}
#msgView{padding-bottom:calc(46px + var(--sab))}
body.pOpen #msgView{padding-bottom:calc(46px + 150px + var(--sab))}
body:has(#msgView:not([hidden])) .player{bottom:calc(46px + var(--sab))}
body:has(#msgView:not([hidden])) .mini{bottom:calc(56px + var(--sab))}
.player{padding:2px 12px 4px;border-radius:18px}
.player .pgrab{margin:2px auto 4px}
.player .pr .av{width:30px;height:30px;font-size:12px}.player .pt{font-size:14px}.player .ps{font-size:11px}
.player .bar{margin:4px 0 2px}
.player .cs{margin-top:0}.player .cs>button{width:40px;height:40px}.player .cs .pl{width:44px;height:44px}
.player .cs .chip{min-height:30px}
.prow{margin-top:2px;padding-top:2px}.prow button{min-height:38px;font-size:10px;gap:0}.prow i{font-size:18px}
.hands h2{font-size:28px;margin-top:8px}
.htele{--lh:34px;height:calc(5 * var(--lh));overflow:hidden;margin-top:10px;flex:none;position:relative;
  -webkit-mask-image:linear-gradient(transparent 0,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(transparent 0,#000 22%,#000 78%,transparent 100%)}
.htele .htext{font-size:24px;line-height:var(--lh);margin:0;padding:calc(2 * var(--lh)) 0;overflow:visible;flex:none;color:#8e8e93}
.htele .htext .w.on{color:#fff;background:rgba(48,209,88,.35);border-radius:6px;box-shadow:0 0 0 3px rgba(48,209,88,.35)}
.hands .wave{margin:6px 0}
.hrow3{display:grid;grid-template-columns:1fr 1.6fr 1fr;gap:10px;margin-bottom:10px}
.hrow3 .btn{height:min(12vh,96px);font-size:30px}.hrow3 .btn b{font-size:18px}
.hrow3 .btn.p{grid-column:auto;height:min(12vh,96px);flex-direction:column;gap:2px}.hrow3 .btn.p b{font-size:22px}
.hgrid{gap:10px}.hgrid .btn,.hgrid .btn:not(.p){height:min(13vh,110px);font-size:32px}.hgrid .btn b{font-size:20px}
.hands{padding-bottom:calc(8px + var(--sab))}

/* ---- v5.8: theme (html.dk set by JS: Light / Dark / Auto 7pm–7am / System), text size (--fs, 7 steps), accounts toggle, pop-up menus ---- */
:root{--fs:1}
.list .it .nm{font-size:calc(15px * var(--fs))}.it .nm i{font-size:calc(13px * var(--fs))}.tm{font-size:calc(14px * var(--fs))}
.sj{font-size:calc(15px * var(--fs))}.sn span{font-size:calc(14px * var(--fs))}
.list .av{width:calc(40px * min(var(--fs),1.2));height:calc(40px * min(var(--fs),1.2));font-size:calc(17px * min(var(--fs),1.2))}
.it .tag{font-size:calc(11px * min(var(--fs),1.2))}.ex,.ex button{font-size:calc(13px * var(--fs))}
.msgv .msub{font-size:calc(22px * var(--fs))}.mfrom{font-size:calc(15px * var(--fs))}.mfrom span,.mto,.msgv .mdate{font-size:calc(13px * var(--fs))}
.mtext{font-size:calc(16px * var(--fs))}.caption{font-size:calc(16px * min(var(--fs),1.25))}
.chainbtn{font-size:calc(14px * min(var(--fs),1.25))}
.msgv .mhead{flex-wrap:wrap}.msgv .mh{min-width:55%}
/* drawer: collapsible Accounts header */
.dacch{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:0 14px;border-radius:12px;color:var(--label2);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;text-align:left}
.dacch i{font-size:16px;transition:transform .2s}.dacch[aria-expanded=false] i{transform:rotate(-90deg)}.dacch small{margin-left:auto;font-weight:500}.dacch:active{background:var(--fill)}
/* pop-up menus (speed, language) */
.popm{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:60;max-width:420px;margin:0 auto;background:var(--card);color:var(--label);border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,.35);border:.5px solid var(--sep);overflow:hidden;display:flex;flex-direction:column;max-height:min(62vh,520px);animation:up .2s cubic-bezier(.2,.8,.2,1)}
.popm .pmttl{padding:12px 16px 8px;font-size:13px;font-weight:600;color:var(--label2);text-align:center;border-bottom:.5px solid var(--sep);flex:none}
.popm .pmlist{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.popm button{display:flex;align-items:center;width:100%;min-height:44px;padding:0 16px;font-size:17px;text-align:left;position:relative}
.popm button+button::before{content:"";position:absolute;top:0;left:16px;right:0;border-top:.5px solid var(--sep)}
.popm button span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.popm button small{color:var(--label2);font-size:13px;margin-left:4px}
.popm button.on{color:var(--tint);font-weight:600}.popm button i{color:var(--tint);font-size:20px;flex:none}
.popm button:active{background:var(--fill)}
.pmsep{padding:14px 16px 6px;font-size:12px;font-weight:600;color:var(--label2);text-transform:uppercase;background:var(--card2)}
/* settings: languages + text size */
.langlist{max-height:46vh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.langgrp .lrow{font-size:16px}.langgrp .row+.row::before{content:"";position:absolute;top:0;left:16px;right:0;border-top:.5px solid var(--sep)}
.langgrp #langQ{text-align:left;max-width:none;color:var(--label)}
.starfav{width:44px;height:44px;font-size:24px;color:var(--label3);flex:none}.starfav.on{color:#F5B400}
.fsz{display:flex;align-items:center;gap:6px}.fsz button{width:40px;height:34px;min-height:34px;border-radius:9px;background:var(--fill);font-weight:600;color:var(--label)}.fsz button:first-child{font-size:13px}.fsz button:last-child{font-size:20px}.fsz span{min-width:58px;text-align:center;font-size:14px;color:var(--label2)}
#thseg button{padding:4px 9px}
/* dark: email frames keep a white page; inputs/selects inherit */
html.dk .mframe{background:#fff}html.dk select option{background:#1C1C1E;color:#fff}
/* v5.9: 5-button message bar (Reply · Reply all · Archive · Delete · Forward), ~44px, readable labels */
.mbar{justify-content:space-between;padding-left:4px;padding-right:4px}.mbar button{flex:1 1 0;min-width:0;min-height:42px;font-size:11px;gap:1px}.mbar button span{white-space:nowrap}.mbar i{font-size:21px}
/* v5.9: opaque underlay during next/previous slides so the list never flashes */
.mvunder{position:fixed;inset:0;z-index:15;background:var(--bg)}
/* v5.9: unified language picker */
.langpick .lpq{padding:8px 12px;border-bottom:.5px solid var(--sep);flex:none}.langpick .lpq input{width:100%;height:36px;border-radius:10px;border:0;padding:0 12px;background:var(--fill);color:var(--label);font-size:16px}
.langpick .lprow{display:flex;align-items:center;position:relative}.langpick .lprow+.lprow::before{content:"";position:absolute;top:0;left:16px;right:0;border-top:.5px solid var(--sep)}
.langpick .lprow button[data-pv]{flex:1;min-width:0}.langpick .lprow button+button::before{display:none}.langpick .starsp{width:44px;flex:none}.langpick .starfav{padding:0;justify-content:center;width:48px}
.langpick .lpnone{padding:12px 16px;color:var(--label2);font-size:14px}
/* ---- v5.10: shorter audio panel, pinned under-bar stack ---- */
.player .pgrab{width:auto;height:18px;margin:0 -12px;background:none;display:flex;align-items:center;justify-content:center;cursor:grab;touch-action:none}
.player .pgrab i{display:block;width:36px;height:5px;border-radius:3px;background:var(--label3)}
.player{padding:0 12px 4px}
.player .pr .av{width:28px;height:28px}.player .pdrive{width:36px;height:36px;font-size:20px;color:var(--tint)}
.player .bar{margin:3px 0 1px}
.player .cs>button{width:38px;height:38px}.player .cs .pl{width:42px;height:42px}
/* the action bar is a body-level fixed element (outside #msgView): scrolling, edge swipes and pull-down never move it */
#mbar{transform:none!important;transition:none!important}
body:has(#msgView:not([hidden])) .player{left:0;right:0;bottom:var(--mbh,46px)!important;border-radius:16px 16px 0 0;border-bottom:none;animation:none;z-index:17}
body.pOpen #msgView{padding-bottom:calc(var(--mbh,46px) + var(--ph,120px) + 24px)}
/* v5.10 PDF reader: text layer (pdf.js 4.10 rules) + read-along highlight; audio panel floats above the viewer */
.vpw{position:relative;flex:none;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.2)}.vpw .vpage{box-shadow:none;display:block}
.textLayer{position:absolute;text-align:initial;inset:0;overflow:clip;opacity:1;line-height:1;-webkit-text-size-adjust:none;text-size-adjust:none;forced-color-adjust:none;transform-origin:0 0;z-index:0}
.textLayer :is(span,br){color:transparent;position:absolute;white-space:pre;cursor:text;transform-origin:0% 0%}
.textLayer > :not(.markedContent),.textLayer .markedContent span:not(.markedContent){z-index:1}
.textLayer span.markedContent{top:0;height:0}
.textLayer ::selection{background:rgba(0,122,255,.25)}
::highlight(tmpc){background-color:rgba(255,204,0,.22)}
::highlight(tmpw){background-color:rgba(255,190,0,.6)}
.vnote{background:var(--card,#fff);color:var(--label);border-radius:12px;padding:12px 14px;max-width:560px;font-size:15px;box-shadow:0 1px 3px rgba(0,0,0,.12)}
body:has(#viewer.pdfv:not([hidden])) .player{z-index:61;left:0;right:0;bottom:0!important;border-radius:16px 16px 0 0;padding-bottom:calc(4px + var(--sab,0px))}
body.pOpen #viewer.pdfv .vpdf{padding-bottom:calc(var(--ph,120px) + 24px)}
body:has(#viewer:not([hidden])) #mini{display:none!important}

/* ---- v5.11 ---- */
/* Inbox / Priority / Not Urgent / Snoozed: equal shares of the row on any width, text follows Text size (capped 1.2x), count in a corner bubble */
.chipbar{padding:8px 6px 4px}
.chips{gap:6px;overflow:visible;padding:7px 4px 2px}
.chips .chip{position:relative;flex:1 1 0;min-width:0;justify-content:center;text-align:center;height:auto;min-height:44px;padding:4px 6px;border-radius:14px;
  font-size:calc(16px * min(var(--fs), 1.2));line-height:1.1;letter-spacing:-.2px;white-space:normal;overflow:visible;gap:0}
.chips .chip .ccnt{position:absolute;top:-7px;right:-3px;min-width:20px;height:20px;font-size:12px;padding:0 5px;border-radius:10px;box-shadow:0 0 0 2px var(--bg,#f2f2f7)}
.chips .chip.on .ccnt{background:#ff3b30}
/* driving-mode button: solid front-view car, 26px, nudged up 4px */
.player .pdrive{font-size:26px}.player .pdrive svg{transform:translateY(-4px)}

/* v5.12: per-account profile icons */
.pav{width:30px;height:30px;border-radius:50%;color:#fff;font-size:15px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none;line-height:1;box-shadow:0 0 0 2px var(--bg)}
.pav.lg{width:36px;height:36px;font-size:17px}
.pstack{display:inline-flex;align-items:center;width:auto;height:auto;background:none!important;box-shadow:none}
.pstack .pav{width:22px;height:22px;font-size:11px}.pstack .pav+.pav{margin-left:-9px}
.sbar .gear.acct svg{transform:none}
.cfic{display:flex}.cfic .pav{width:26px;height:26px;font-size:13px}
.picons .prow{padding:10px 14px;border-bottom:.5px solid var(--sep)}.picons .prow:last-child{border-bottom:0}
.prt{display:flex;align-items:center;gap:10px}.pem{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
.plet{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--label2)}.plet input{width:2.2em;text-align:center;font:inherit;font-size:16px;font-weight:700;padding:4px;border:1px solid var(--sep);border-radius:8px;background:var(--fill);color:var(--label)}
.pcols{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;padding-left:46px}
.pcol{width:26px;height:26px;border-radius:50%;flex:none;box-shadow:0 0 0 2px var(--bg)}.pcol.on{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--tint)}
.dav{box-shadow:none}
/* v5.12: compact drawer */
.dpanel .dtitle{padding-bottom:2px}.dpanel .dlogo{height:28px}
.ditem{min-height:38px;gap:12px;padding:0 12px;font-size:15px}.ditem i{font-size:19px}
.ditem.acc{min-height:32px;font-size:13.5px}.drow{margin-top:0}.drow .dchk{width:36px;height:32px}.dchk::after{width:20px;height:20px;border-radius:6px}.dchk i{font-size:15px}
.dav{width:22px;height:22px;font-size:11px}
.dacch{min-height:28px;padding:0 12px;font-size:12px}
.dsep{margin:4px 12px}
.picons .prow{display:block!important;min-height:0!important}
.picons .prt{display:flex!important;flex-direction:row!important;align-items:center}
.picons .pcols{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;gap:8px}
.picons .pcol{width:26px!important;height:26px!important;min-width:0!important;min-height:0!important;padding:0!important;margin:0!important;border:0!important;border-radius:50%!important;flex:none!important}
.picons .plet input{width:2.2em!important;min-width:0!important;max-width:2.2em!important;flex:none!important;height:auto;min-height:0!important}
.chips .chip{white-space:nowrap;padding-left:3px;padding-right:3px}

/* v5.12b: account picker popover */
.accpop{position:fixed;inset:0;z-index:45;background:rgba(0,0,0,.18)}
.appanel{position:absolute;top:calc(52px + env(safe-area-inset-top));right:8px;width:min(92vw,340px);background:var(--bg2,var(--bg));border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.25);padding:4px 0;overflow:hidden}
.aprow{display:flex;align-items:center}.apit{flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:40px;padding:0 12px;font-size:14.5px;color:var(--label);text-align:left}
.apit span:not(.pav){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.apit.on{font-weight:600}.apit>i{color:var(--tint);font-size:18px}
.apit .pav{width:26px;height:26px;font-size:13px;box-shadow:none}.apit .pstack .pav{width:20px;height:20px;font-size:10px;box-shadow:0 0 0 1.5px var(--bg)}
.aprow .dchk{width:40px;height:40px}.apsep{height:.5px;background:var(--sep);margin:2px 12px}
/* v5.12b: tab labels fit */
.chips .chip{font-size:calc(14.5px*min(var(--fs,1),1.2))}
.chips.n5 .chip{font-size:calc(13px*min(var(--fs,1),1.2));padding-left:2px;padding-right:2px;border-radius:12px}
/* v5.12b: Letter input visible */
.picons .plet input{border:1.5px solid var(--label3)!important;background:var(--fill)!important;border-radius:8px!important;color:var(--label)!important;height:32px!important;padding:0!important;font-size:16px!important;font-weight:700!important;text-align:center!important}
/* v5.12c: shorter tabs, tighter vertical spacing */
.chips{padding:6px 4px 0}
.chips .chip{min-height:34px;padding-top:2px;padding-bottom:2px;border-radius:11px}
.chips.n5 .chip{border-radius:10px}
#folderSub{margin-top:3px;margin-bottom:0}
/* v5.12c: hamburger logo +10%, 4px above All Inboxes */
.dpanel .dlogo{height:30.8px}
.dpanel .dtitle+.ditem{margin-top:4px}
.ttl.chipbar{padding-top:2px;padding-bottom:0}
.acsub{padding-bottom:0}
/* v5.12: tab labels never overflow at any width/Text size (font capped by viewport width) */
.chips .chip{font-size:min(calc(14.5px*min(var(--fs,1),1.2)),3.9vw)}
.chips.n5 .chip{font-size:min(calc(13px*min(var(--fs,1),1.2)),2.9vw)}
/* v5.13 preview */
.sbar .gear.acct>.pav{width:34px;height:34px;font-size:16px}
.sbar .gear.acct .pstack .pav{width:32px;height:32px;font-size:15px}
.pstack{display:inline-flex}.pstack .pav{position:relative}.pstack .pav+.pav{margin-left:-29px}
.pstack .pav:nth-child(1){z-index:3}.pstack .pav:nth-child(2){z-index:2}.pstack .pav:nth-child(3){z-index:1}
.apit .pstack .pav+.pav{margin-left:-17px}
.sbar .sunb i{transform:translateX(3px)}
.dpanel{width:min(70vw,280px)}
.dpanel .dtitle{padding-left:10px}
.picons .prt{width:100%;gap:10px;padding:2px 0;min-height:44px;text-align:left;color:var(--label);font-size:15px}
.picons .prt .pem{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picons .prt>i:last-child{color:var(--label3);font-size:16px;transition:transform .2s}
.picons .prow.open .prt>i:last-child{transform:rotate(90deg)}
.picons .pbody{display:none;padding:6px 0 4px 46px}
.picons .prow.open .pbody{display:block}
.picons .pbody .plet{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:14px;color:var(--label2)}
.sbar .gear.acct>.pstack{width:auto;height:auto;background:none;box-shadow:none}
.apmg>i:last-child,.picons .prt>i:last-child{transform:rotate(180deg)}
.picons .prow.open .prt>i:last-child{transform:rotate(-90deg)}
.apmg>i:last-child{color:var(--label3);font-size:15px}
.picons .pbody .pcols{gap:6px!important;flex-wrap:nowrap!important}.picons .pbody .pcol{width:min(26px,6vw)!important;height:min(26px,6vw)!important}
/* v5.13: list preview + Settings text in primary color (light: black, dark: primary light) */
#lists .it .sn>span{color:var(--label)}
#sheetIn:has(#rulesOpen) :is(h3,small:not(.val),span.val,.row span,select,option,.plet,label){color:var(--label)}
.dpanel{width:min(60.5vw,242px)}

/* v5.14 preview: shared reader + recent list */
body.sharing #mbar,body.sharing #msgView .pnav .pr2{display:none!important}
.shlist .shr{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 16px;min-height:56px;border-top:.5px solid var(--sep);background:none;color:var(--label)}
.shlist .shr:first-child{border-top:0}.shlist .shrt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.shlist .shrt b{font-weight:600;font-size:16px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.shlist .shrt small{color:var(--label2);font-size:13px}.shlist .shr>i{width:14px;color:var(--label3);transform:rotate(180deg)}
/* v5.14 preview: Manage accounts – letter box at the left of the colour row, no label */
.picons .pbody .prow2{display:flex;align-items:center;gap:min(10px,2.4vw);width:100%;min-width:0}
.picons .pbody .prow2 .pcols{flex:1 1 auto;min-width:0;gap:min(6px,1.3vw)!important;flex-wrap:nowrap!important;justify-content:space-between;padding:0!important;margin:0!important}
.picons .pbody .prow2 .pcol{width:min(26px,5.4vw)!important;height:min(26px,5.4vw)!important;flex:0 0 auto!important}
.picons .pbody .pletin{flex:none;box-sizing:border-box;width:clamp(32px,8vw,34px)!important;height:clamp(32px,8vw,34px)!important;padding:0!important;text-align:center;font:inherit;font-size:16px!important;font-weight:700;border:1.5px solid var(--label3);border-radius:8px;background:var(--fill);color:var(--label)}
/* v5.14 preview: signature status flush left under the account email */
details.sigsec>summary{display:grid!important;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-content:center;row-gap:1px;justify-content:stretch!important;padding:8px 16px!important;text-align:left}
details.sigsec>summary>span{grid-column:1;grid-row:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
details.sigsec>summary>small{grid-column:1;grid-row:2;justify-self:start;text-align:left;margin:0!important;padding:0!important;font-size:13px;color:var(--label2)}
details.sigsec>summary::after{grid-column:2;grid-row:1/span 2;align-self:center}
/* ===== v5.14 ===== */
.sbtn{display:block;width:calc(100% - 32px);margin:12px 16px 0;min-height:48px;border:0;border-radius:12px;background:var(--tint);color:#fff;font-size:17px;font-weight:600}
.sbtn.red{background:var(--red)}.sbtn.ghost{background:var(--fill);color:var(--label)}.sbtn:disabled{opacity:.4}
.sbtn.sm{display:inline-block;width:auto;margin:0;min-height:34px;padding:0 14px;font-size:15px;flex:none}
.sgrp .opt.on{font-weight:600}.sgrp .opt.on i{margin-left:auto}
.qmic{flex:none;width:34px;height:34px;border:0;background:none;color:var(--label2);font-size:19px;display:inline-flex;align-items:center;justify-content:center;border-radius:17px}
.qmic.live{color:#fff;background:var(--red);animation:tmpulse 1s infinite}
@keyframes tmpulse{50%{opacity:.6}}
.qread{display:flex;align-items:center;gap:8px;margin:8px 16px 0;min-height:40px;padding:0 14px;border:0;border-radius:20px;background:var(--fill);color:var(--tint);font-size:15px;font-weight:600}
.mvx{margin:10px 16px 4px}.mvx:empty{display:none}
.mvx .mvcal,.mvx .sugg{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chipx{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-height:36px;padding:6px 14px;border:1px solid var(--sep);border-radius:18px;background:var(--card);color:var(--tint);font-size:15px;text-align:left;line-height:1.25}
.chipx.cal{color:var(--label)}.chipx.cal i{color:var(--red)}
.sgl{color:var(--label2);font-size:14px}
.tag.nr{background:rgba(255,149,0,.16);color:#c76a00;font-size:11px;font-weight:700;padding:1px 7px;border-radius:6px;margin-left:6px}
.nudges .ex{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.nudges .ex .sn{color:var(--label2);margin-right:auto}
.tapstart{position:fixed;inset:0;z-index:999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;background:rgba(0,0,0,.72);backdrop-filter:blur(8px)}
.tsbtn{display:flex;flex-direction:column;align-items:center;gap:10px;width:min(80vw,320px);padding:28px 20px;border:0;border-radius:24px;background:var(--tint);color:#fff}
.tsbtn i{font-size:56px}.tsbtn b{font-size:24px}.tsbtn small{font-size:14px;opacity:.85}.tapstart .tsx{color:#fff;font-size:17px}
.row.sch{align-items:flex-start;gap:8px}.row.sch small{display:block;color:var(--label2)}.schb{display:flex;gap:12px;flex:none}.red{color:var(--red)}
.row.snd{gap:12px;align-items:flex-start}.row.snd input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--tint)}.row.snd small{display:block;color:var(--label2)}.row.snd .cnt{display:inline;color:var(--label2)}.row.snd.dim{opacity:.5}
.sndl{max-height:56vh;overflow:auto}.sndbar{display:flex;gap:10px;margin:0 16px}.sndbar .sbtn{margin:12px 0 0;width:auto;flex:1}
#cmpNudge.on{color:var(--tint)}
#shKey .val{margin-left:12px}
.ctools{flex-wrap:wrap;gap:8px}.ctools .tool{white-space:nowrap;padding:0 12px;font-size:clamp(13px,3.4vw,15px)}
.row.snd,.row.sch{justify-content:flex-start;text-align:left}.row.snd>span,.row.sch>span:first-child{flex:1;min-width:0;text-align:left;overflow-wrap:anywhere}