/* Fynex Command (reviewer dashboard) v6.23.0.
   Self-contained: it does not use tokens.css. shadcn-style tokens, light only, phone first.
   Layout contract: candidate messages LEFT, Maya and staff RIGHT; one pane at a time under 768px. */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter-latin.woff2) format("woff2")}

/* ============================== tokens ============================== */
:root{
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --bg:hsl(150 14% 97%);
  --surface:hsl(0 0% 100%);
  --fg:hsl(160 22% 9%);
  --muted:hsl(150 12% 95%);
  --muted-fg:hsl(155 8% 38%);
  --border:hsl(150 10% 89%);
  --input:hsl(150 8% 80%);
  --ring:hsl(162 82% 28%);
  --primary:hsl(162 82% 24%);
  --primary-hover:hsl(162 82% 19%);
  --primary-fg:hsl(0 0% 100%);
  --primary-soft:hsl(150 42% 94%);
  --primary-soft-border:hsl(150 30% 82%);
  --danger:hsl(4 72% 42%);
  --danger-soft:hsl(4 90% 96%);
  --danger-border:hsl(4 70% 85%);
  --amber:hsl(30 90% 26%);
  --amber-soft:hsl(42 100% 94%);
  --amber-border:hsl(40 70% 74%);
  --blue:hsl(217 72% 36%);
  --blue-soft:hsl(217 90% 96%);
  --blue-border:hsl(217 70% 86%);
  --wa:hsl(142 64% 32%); --tg:hsl(204 76% 42%); --em:hsl(222 14% 46%); --web:hsl(155 6% 52%);
  --radius:10px;
  --shadow-sm:0 1px 2px rgba(16,24,20,.06);
  --shadow-md:0 6px 24px rgba(16,24,20,.10);
  --shadow-lg:0 16px 48px rgba(16,24,20,.20);
  --shadow-pop:0 12px 32px -6px rgba(16,24,20,.22),0 0 0 1px hsl(150 10% 89%);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --dur-instant:80ms;
  --dur-fast:140ms;
  --dur-med:220ms;
  --dur-slow:340ms;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
[hidden]{display:none!important}
html,body{height:100%}
body{font:14px/1.45 var(--font);background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0;touch-action:manipulation}
a{color:inherit;text-decoration:none;touch-action:manipulation}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:6px}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:hsl(150 8% 80%);border-radius:99px;border:2px solid transparent;background-clip:content-box}
.muted{color:var(--muted-fg)}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ic{width:18px;height:18px;flex:none}
.ic.fill{fill:currentColor}
.ic.sm{width:15px;height:15px}

/* ============================== sign-in ============================== */
.auth-gate{min-height:100dvh;display:grid;place-items:center;padding:20px;background:var(--bg)}
.auth-card{width:min(360px,100%);display:grid;gap:14px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:26px 22px;box-shadow:var(--shadow-pop)}
.auth-card .logo{justify-self:center;width:42px;height:42px;font-size:19px;border-radius:12px}
.auth-card h1{font-size:20px;font-weight:700;letter-spacing:-.02em;text-align:center}
.auth-card p{text-align:center;margin-top:-8px}
.auth-err{color:var(--danger);background:var(--danger-soft);border:1px solid var(--danger-border);padding:9px 12px;border-radius:9px;font-size:13px}

/* ============================== app shell ============================== */
#app{height:100dvh;display:flex;flex-direction:column;min-height:0}
/* Once shared/viewport.js has measured the visible area, the shell, the sign-in screen and
   every sheet become exactly that area. iOS Safari does not shrink the layout viewport when
   the keyboard opens, so without this the top bar slides away and the composer, or a sheet's
   buttons, end up under the keyboard. Where the browser resizes the layout itself (Android
   Chrome) the two agree and nothing visibly changes. */
html.has-vv #app{position:fixed;left:0;right:0;top:var(--vvt);height:var(--vvh)}
html.has-vv .auth-gate{position:fixed;left:0;right:0;top:var(--vvt);height:var(--vvh);min-height:0;display:flex;overflow-y:auto}
html.has-vv .auth-card{margin:auto}
html.has-vv .overlay{bottom:auto;top:var(--vvt);height:var(--vvh)}
html.has-vv .sheet,html.has-vv .sheet.wide{max-height:calc(var(--vvh) * .9)}
.topbar{flex:none;height:52px;display:flex;align-items:center;gap:10px;padding:0 16px;background:var(--surface);border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;letter-spacing:-.01em;white-space:nowrap}
.logo{width:28px;height:28px;border-radius:8px;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px}
.topnav{display:flex;gap:2px;margin-left:8px}
.navlink{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:8px;color:var(--muted-fg);font-weight:500}
.navlink:hover{background:var(--muted);color:var(--fg)}
.navlink[aria-current=page]{background:var(--muted);color:var(--fg)}
.topbar .grow{flex:1}
.live{font-size:12px;color:var(--muted-fg);white-space:nowrap}
.live.bad{color:var(--danger);font-weight:600}
@media (max-width:400px){.live:not(.bad){display:none}}
.badge-n{min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--primary);color:#fff;font-size:11px;font-weight:700;display:inline-grid;place-items:center}
#main{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
.bottomnav{display:none}

/* ============================== primitives ============================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 14px;border-radius:var(--radius);border:1px solid var(--input);background:var(--surface);font-weight:500;white-space:nowrap;box-shadow:var(--shadow-sm);transition:background .12s,border-color .12s}
.btn:hover{background:var(--muted)}
.btn:active{transform:translateY(.5px)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--primary-fg)}
.btn.primary:hover{background:var(--primary-hover)}
.btn.destructive{background:var(--danger);border-color:var(--danger);color:#fff}
.btn.destructive:hover{background:hsl(4 72% 36%)}
.btn.ghost{border-color:transparent;background:transparent;box-shadow:none}
.btn.ghost:hover{background:var(--muted)}
.btn.icon{width:36px;padding:0}
.btn.sm{height:30px;padding:0 10px;font-size:13px}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn.on{color:hsl(40 90% 36%)}
.btn.spin .ic{animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.badge{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:99px;border:1px solid transparent;font-size:12px;font-weight:500;white-space:nowrap}
.badge.neutral{background:var(--muted);color:var(--muted-fg);border-color:var(--border)}
.badge.green{background:var(--primary-soft);color:var(--primary);border-color:var(--primary-soft-border)}
.badge.blue{background:var(--blue-soft);color:var(--blue);border-color:var(--blue-border)}
.badge.amber{background:var(--amber-soft);color:var(--amber);border-color:var(--amber-border)}
.badge.red{background:var(--danger-soft);color:var(--danger);border-color:var(--danger-border)}

.input,.select,textarea.input{width:100%;height:40px;border:1px solid var(--input);border-radius:var(--radius);padding:0 12px;background:var(--surface);box-shadow:var(--shadow-sm)}
.select{appearance:none;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23586360' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.input:focus,.select:focus,textarea:focus{outline:2px solid var(--ring);outline-offset:0;border-color:var(--ring)}
.field{display:grid;gap:6px;font-weight:500;font-size:13px}
.field small{font-weight:400;color:var(--muted-fg)}

.switch{position:relative;width:44px;height:26px;border-radius:99px;background:hsl(150 6% 58%);flex:none;transition:background .15s}
.switch span{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .15s}
.switch[aria-checked=true]{background:var(--primary)}
.switch[aria-checked=true] span{transform:translateX(18px)}
.switch::after{content:"";position:absolute;inset:-10px -4px}

.avatar{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;flex:none;font-weight:600;font-size:13px}
.avatar .dot{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;border:2px solid var(--surface)}
.avatar.lg{width:36px;height:36px;font-size:12px}
.av0{background:hsl(150 45% 91%);color:hsl(160 60% 20%)}
.av1{background:hsl(200 60% 92%);color:hsl(205 60% 24%)}
.av2{background:hsl(30 80% 90%);color:hsl(25 70% 25%)}
.av3{background:hsl(340 60% 93%);color:hsl(340 55% 28%)}
.av4{background:hsl(48 80% 88%);color:hsl(40 70% 22%)}
.av5{background:hsl(172 45% 89%);color:hsl(175 60% 20%)}
.chdot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none}
.banner{display:flex;gap:10px;align-items:center;padding:10px 14px;font-size:13px;background:var(--amber-soft);color:var(--amber);border-bottom:1px solid var(--amber-border)}
.banner.err{background:var(--danger-soft);color:var(--danger);border-color:var(--danger-border)}
.banner .grow{flex:1;min-width:0}

/* ============================== inbox layout ============================== */
.inbox{flex:1;min-height:0;display:grid;grid-template-columns:minmax(320px,390px) minmax(0,1fr)}
.pane{min-height:0;min-width:0;display:flex;flex-direction:column;background:var(--surface)}
.pane-list{border-right:1px solid var(--border)}
.list-head{flex:none;display:grid;gap:10px;padding:14px 14px 10px;border-bottom:1px solid var(--border)}
.list-title{display:flex;align-items:baseline;gap:8px}
.list-title h1{font-size:18px;font-weight:700;letter-spacing:-.015em}
.search-row{display:flex;gap:8px}
.search{position:relative;flex:1;min-width:0}
.search .ic{position:absolute;left:11px;top:11px;color:var(--muted-fg);pointer-events:none}
.search .input{padding-left:36px;-webkit-appearance:none}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -14px;padding:0 14px 0 14px;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
.chips.end{-webkit-mask-image:none;mask-image:none}
.chips::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:99px;border:1px solid var(--border);background:var(--surface);font-weight:500;color:var(--fg);white-space:nowrap;flex:none}
.chip:hover{background:var(--muted)}
.chip .n{color:var(--muted-fg);font-weight:500}
.chip[aria-pressed=true]{background:var(--fg);border-color:var(--fg);color:#fff}
.chip[aria-pressed=true] .n{color:hsl(150 10% 80%)}
.list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.lead{display:flex;gap:12px;padding:12px 14px;border-bottom:1px solid var(--border);position:relative}
.lead:hover{background:var(--muted)}
.lead[aria-current=true]{background:var(--muted)}
.lead[aria-current=true]::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--primary)}
.lbody{flex:1;min-width:0;display:grid;gap:3px}
.row1,.row2,.row3{display:flex;align-items:center;gap:8px;min-width:0}
.row1 .name{font-weight:600;flex:1;min-width:0}
.lead.unread .name{font-weight:700}
.row1 time{font-size:12px;color:var(--muted-fg);flex:none}
.row2 .snip{flex:1;min-width:0;color:var(--muted-fg)}
.lead.unread .snip{color:var(--fg)}
.unread-n{min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--primary);color:#fff;font-size:12px;font-weight:600;display:grid;place-items:center;flex:none}
.row3{margin-top:3px;font-size:12px;color:var(--muted-fg);flex-wrap:wrap;row-gap:4px}
.row3 .chn,.row3 .dn{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.row3 .chn i{width:7px;height:7px;border-radius:50%}
.row3 .dn{margin-left:auto}
.row3 .dn .ic{width:13px;height:13px}
.star-mini{color:hsl(40 90% 44%);width:13px;height:13px;flex:none}
.empty{flex:1;display:grid;place-content:center;justify-items:center;gap:10px;text-align:center;padding:32px;color:var(--muted-fg)}
.empty .ic{width:30px;height:30px;opacity:.6}
.empty h2{color:var(--fg);font-size:15px;font-weight:600}

/* ---- detail ---- */
.pane-detail{background:var(--bg)}
#detailWrap{flex:1;min-height:0;display:flex;flex-direction:column}
.dhead{flex:none;display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--surface);border-bottom:1px solid var(--border)}
.dhead .ttl{flex:1;min-width:0}
.dhead h1{font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.dhead p{font-size:12.5px;color:var(--muted-fg)}
.back{display:none}
.summary{flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--surface);border-bottom:1px solid var(--border)}
.cell{display:grid;gap:3px;align-content:start;padding:9px 14px;text-align:left;min-width:0;border-right:1px solid var(--border)}
.cell:last-child{border-right:0}
button.cell:hover{background:var(--muted)}
.cell .lbl{font-size:12px;color:var(--muted-fg)}
.cell .val{font-weight:600;display:flex;align-items:center;gap:7px;min-width:0}
.cell .badge{max-width:100%}
.cell .badge .ic{width:13px;height:13px;margin-right:-3px}
.cell .val.wrap{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;line-height:1.3}
.mini{display:block;height:5px;border-radius:99px;background:var(--muted);overflow:hidden;flex:1;min-width:30px;max-width:70px}
.mini i{display:block;height:100%;background:var(--primary);border-radius:99px}
.mini.warn i{background:hsl(30 90% 45%)}
.tabbar{flex:none;padding:10px 14px;background:var(--surface);border-bottom:1px solid var(--border)}
.tabs{display:inline-flex;gap:2px;padding:3px;background:var(--muted);border-radius:var(--radius)}
.tab{height:30px;padding:0 14px;border-radius:7px;font-weight:500;color:var(--muted-fg)}
.tab:hover{color:var(--fg)}
.tab[aria-selected=true]{background:var(--surface);color:var(--fg);box-shadow:var(--shadow-sm)}
.dbody{flex:1;min-height:0;display:flex;flex-direction:column}
.thread{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 14px;display:flex;flex-direction:column;gap:12px}
.scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px;display:grid;gap:14px;align-content:start}

/* ---- messages: candidate LEFT, Maya/staff RIGHT ---- */
.msg{display:flex;flex-direction:column;gap:4px;max-width:min(78%,540px)}
.msg.in{align-self:flex-start;align-items:flex-start}
.msg.out{align-self:flex-end;align-items:flex-end}
.bubble{padding:9px 13px;border-radius:16px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.45}
.msg.in .bubble{background:var(--surface);border:1px solid var(--border);border-bottom-left-radius:5px}
.msg.out .bubble{background:var(--primary-soft);border:1px solid var(--primary-soft-border);border-bottom-right-radius:5px}
.msg.staff .bubble,.msg.note .bubble{background:var(--amber-soft);border:1px dashed var(--amber-border)}
.msg.prompt .bubble{background:var(--blue-soft);border:1px dashed var(--blue-border)}
.msg.flag-hidden{opacity:.55}
.meta{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted-fg);min-height:24px}
.meta .ic{width:13px;height:13px}
.meta .chdot{width:7px;height:7px}
.meta .gold{color:hsl(40 90% 44%)}
.msg-more{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;color:var(--muted-fg);opacity:.55;transition:opacity .12s}
.msg:hover .msg-more,.msg:focus-within .msg-more,.msg-more:focus-visible{opacity:1}
.msg-more:hover{background:var(--muted);color:var(--fg)}
.sys{align-self:center;font-size:12.5px;color:var(--muted-fg);text-align:center;max-width:88%}
.hidden-note{align-self:center;font-size:12.5px;color:var(--muted-fg)}
.hidden-note button{color:var(--primary);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.typing{align-self:flex-end;font-size:13px;color:var(--muted-fg);padding:8px 12px;border-radius:16px;background:var(--primary-soft);border:1px solid var(--primary-soft-border)}

/* ---- composer ---- */
.composer{flex:none;display:grid;gap:8px;padding:10px 12px calc(10px + var(--safe-b));background:var(--surface);border-top:1px solid var(--border)}
.send-pill{justify-self:start;display:inline-flex;align-items:center;gap:7px;max-width:100%;height:30px;padding:0 10px 0 8px;border-radius:99px;border:1px solid var(--border);background:var(--muted);font-size:12.5px;font-weight:500;color:var(--fg)}
.send-pill:hover{border-color:var(--input)}
.send-pill .ic{width:14px;height:14px;color:var(--muted-fg)}
.composer-row{display:flex;gap:8px;align-items:flex-end}
.composer textarea{flex:1;min-height:40px;max-height:140px;resize:none;overflow-y:hidden;border:1px solid var(--input);border-radius:var(--radius);padding:9px 12px;background:var(--surface);line-height:1.4;box-shadow:var(--shadow-sm)}
.composer textarea.scrolls{overflow-y:auto}
.composer .btn.icon{width:40px;height:40px;flex:none}

/* ---- docs / lists / blocks ---- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-sm)}
.card.pad{padding:14px}
.block h2,.sec-head h2{font-size:13px;font-weight:600;color:var(--muted-fg);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.rows{display:grid}
.rowitem{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--border);width:100%;text-align:left;min-height:56px}
.rowitem:last-child{border-bottom:0}
button.rowitem:hover{background:var(--muted)}
.rowitem .ricon{width:34px;height:34px;border-radius:9px;background:var(--muted);display:grid;place-items:center;color:var(--muted-fg);flex:none}
.rowitem .rmain{flex:1;min-width:0;display:grid}
.rowitem .rmain b{font-weight:600}
.rowitem .rmain small{color:var(--muted-fg);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rowitem .chev{color:var(--muted-fg);width:16px;height:16px}
.rowitem .btn{flex:none}
.rowitem.um{flex-wrap:wrap}
.rowitem.um .rmain{flex:1 1 220px}
.rowitem.um .rmain small{white-space:normal}
.page-in > .banner{border:1px solid var(--amber-border);border-radius:12px;align-items:flex-start;line-height:1.45}
.page-in > .banner.err{border-color:var(--danger-border)}
.progress-card{display:grid;gap:10px}
.bar{height:8px;border-radius:99px;background:var(--muted);overflow:hidden}
.bar i{display:block;height:100%;background:var(--primary);border-radius:99px}
.kv{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px 12px}
.kv dt{color:var(--muted-fg)}.kv dd{font-weight:500;overflow-wrap:anywhere}
.ck{display:flex;gap:10px;align-items:flex-start;padding:7px 0}
.ck .st{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex:none;margin-top:1px}
.ck .st .ic{width:12px;height:12px}
.ck .st.ok{background:var(--primary);color:#fff}
.ck .st.no{background:var(--muted);color:var(--muted-fg);border:1px solid var(--border)}
.ck .st.bad{background:var(--danger);color:#fff}
.timeline{display:grid}
.tl{display:grid;grid-template-columns:12px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.tl:last-child{border-bottom:0}
.tl i{width:9px;height:9px;border-radius:50%;margin-top:6px;background:var(--primary)}
.tl i.warn{background:hsl(30 90% 45%)}.tl i.bad{background:var(--danger)}.tl i.info{background:hsl(210 30% 60%)}
.tl b{font-weight:600}.tl p{color:var(--muted-fg);font-size:13px;overflow-wrap:anywhere}.tl time{font-size:12px;color:var(--muted-fg)}
.issue{background:var(--danger-soft);border:1px solid var(--danger-border);border-radius:10px;padding:10px 12px;display:flex;gap:10px;align-items:center;justify-content:space-between;color:hsl(4 60% 28%)}
.issue span{min-width:0;overflow-wrap:anywhere}

/* ---- pages (channels/settings) ---- */
.page{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.page-in{width:min(760px,100%);margin:0 auto;padding:22px 16px 32px;display:grid;gap:22px}
.page h1{font-size:22px;font-weight:700;letter-spacing:-.02em}
.page .lead-p{color:var(--muted-fg);margin-top:2px}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.sec-head h2{margin:0}
.ch-head{display:flex;align-items:center;gap:12px;padding:14px}
.ch-head .grow{flex:1;min-width:0}
.ch-head b{font-weight:600;display:block}
.chdot.lgdot{width:10px;height:10px}
details.cfg{border-top:1px solid var(--border)}
details.cfg summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:11px 14px;font-weight:500;min-height:44px}
details.cfg summary::-webkit-details-marker{display:none}
details.cfg summary .ic{transition:transform .15s;color:var(--muted-fg)}
details.cfg[open] summary .ic{transform:rotate(180deg)}
.cfg-body{display:grid;gap:10px;padding:2px 14px 14px}
.cfg-body code{font:12.5px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--muted);padding:1px 6px;border-radius:5px;overflow-wrap:anywhere}
.reqrow{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:30px}
.reqrow .ck{padding:0}
.setrow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 14px;border-bottom:1px solid var(--border);min-height:56px}
.setrow:last-child{border-bottom:0}
.setrow b{font-weight:600;display:block}.setrow small{color:var(--muted-fg)}
.setrow > div:first-child{min-width:0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.acct{display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px;align-items:center;border-bottom:1px solid var(--border)}
.acct:last-child{border-bottom:0}
.acct .who{display:flex;align-items:center;gap:10px;width:100%}
.acct .who b{font-weight:600}
.pillbtn{display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:0 6px 0 10px;border-radius:99px;border:1px solid var(--border);background:var(--muted);font-size:13px;max-width:100%}
.pillbtn .pilltxt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pillbtn .chdot{flex:none}
.pillbtn .x{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:var(--muted-fg);flex:none}
.pillbtn .x:hover{background:var(--danger-soft);color:var(--danger)}

/* ---- channels cards + add-account wizard (overflow-proof) ---- */
.hint,.lead-p,.muted,.sheet-head p{overflow-wrap:break-word}
.page code,.sheet-body code,.toast code{font:12.5px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--muted);padding:1px 6px;border-radius:5px;overflow-wrap:anywhere}
.ch-actions{display:flex;flex-wrap:wrap;gap:8px;padding:0 14px 12px}
.ch-body{display:grid;gap:8px;padding:0 14px 14px}
.ch-body .hint{margin:0}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.sheet-foot{flex-wrap:wrap}
.wiz-steps{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.wiz-step{display:inline-flex;align-items:center;gap:6px;color:var(--muted-fg);font-size:13px;min-width:0}
.wiz-step i{width:20px;height:20px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--muted);font-style:normal;font-size:12px;font-weight:650}
.wiz-step.now{color:var(--fg);font-weight:600}
.wiz-step.now i{background:var(--primary);color:#fff}
.wiz-step.done i{background:var(--primary-soft);color:var(--primary)}
.wiz-how{margin:0 0 2px 18px;display:grid;gap:5px;overflow-wrap:break-word}
.wiz-links{display:flex;flex-wrap:wrap;gap:8px}
.wiz-fields{display:grid;gap:12px}
.wiz-err{color:var(--danger);background:var(--danger-soft);border-radius:9px;padding:10px 12px;overflow-wrap:anywhere}
.wiz-done{display:grid;gap:4px;justify-items:start;background:var(--primary-soft);border-radius:11px;padding:14px;overflow-wrap:anywhere}
.wiz-done .ic{color:var(--primary);width:22px;height:22px}
@media (max-width:767px){
  .ch-actions .btn{flex:1 1 auto}
  .sheet-foot .btn{flex:1 1 auto}
  .wiz-step{font-size:12.5px}
}

/* ---- overlays ---- */
.overlay{position:fixed;inset:0;z-index:50;background:rgba(10,18,14,.45);display:flex;align-items:center;justify-content:center;padding:16px;animation:fade .14s ease-out}
.sheet{background:var(--surface);border-radius:14px;box-shadow:var(--shadow-pop);width:min(440px,100%);max-height:86dvh;display:flex;flex-direction:column;overflow:hidden;outline:none}
.sheet.wide{width:min(520px,100%)}
.grab{display:none;width:38px;height:4px;border-radius:99px;background:var(--input);margin:8px auto 0}
.sheet-head{padding:16px 18px 6px}
.sheet-head h2{font-size:16px;font-weight:650;letter-spacing:-.01em;overflow-wrap:anywhere}
.sheet-head p{color:var(--muted-fg);margin-top:3px}
.sheet-body{overflow-y:auto;overscroll-behavior:contain;padding:8px 18px 14px;display:grid;gap:12px;align-content:start}
.sheet-body.flush{padding:6px 8px 10px;gap:2px}
.sheet-foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px 14px;border-top:1px solid var(--border)}
.mi{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:0 10px;border-radius:7px;text-align:left}
.mi:hover,.mi:focus-visible{background:var(--muted)}
.mi.danger{color:var(--danger)}
.mi .ic{color:var(--muted-fg)}.mi.danger .ic{color:var(--danger)}
.mi .mi-check{margin-left:auto;color:var(--primary)}
.mi small{display:block;color:var(--muted-fg);font-size:12.5px}
.mi .mt{display:grid;flex:1;min-width:0}
.mi.sel{background:var(--primary-soft)}
.msep{height:1px;background:var(--border);margin:4px -4px}
.pop{position:fixed;z-index:60;min-width:200px;max-width:280px;background:var(--surface);border-radius:10px;box-shadow:var(--shadow-pop);padding:4px;animation:fade .1s}
.tip{position:fixed;z-index:90;background:var(--fg);color:#fff;font-size:12px;line-height:1.35;padding:5px 9px;border-radius:7px;pointer-events:none;max-width:240px}
.toasts{position:fixed;z-index:95;right:16px;top:64px;display:grid;gap:8px;pointer-events:none;width:min(360px,calc(100vw - 32px))}
.toast{display:flex;gap:10px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:11px 14px;box-shadow:var(--shadow-pop);animation:rise .18s ease-out}
.toast .ic{color:var(--primary)}
.toast.err .ic{color:var(--danger)}
.docview{min-height:120px;border-radius:10px;border:1px solid var(--border);background:var(--muted);display:grid;place-items:center;overflow:hidden;color:var(--muted-fg);text-align:center;padding:0}
.docview img{max-width:100%;max-height:50dvh;display:block;object-fit:contain}
.docview iframe{width:100%;height:50dvh;border:0;background:#fff;display:block}
.docview .none{display:grid;gap:6px;justify-items:center;padding:20px}
.ver-body{gap:18px}
.ver-entry h3,.ver-entry h4{display:flex;align-items:baseline;gap:10px;font-size:15px;font-weight:650}
.ver-entry h4{font-size:14px;color:var(--muted-fg)}
.vnum{font-weight:700}
.ver-date{font-size:12px;font-weight:400;color:var(--muted-fg)}
.ver-entry ul{margin:6px 0 0 18px;display:grid;gap:4px}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes up{from{transform:translateY(40px);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============================== touch / tablet ============================== */
@media (hover:none){
  .msg-more{opacity:.8}
}
@media (max-height:700px){
  .dhead{padding-top:6px;padding-bottom:6px}
  .cell{padding-top:6px;padding-bottom:6px}
  .tabbar{padding-top:6px;padding-bottom:6px}
  .thread{padding-top:10px;padding-bottom:10px}
}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:3px;background:var(--muted);border-radius:var(--radius)}
.seg button{min-height:34px;border-radius:7px;font-weight:500;color:var(--muted-fg);padding:0 6px}
.seg button[aria-pressed=true]{background:var(--surface);color:var(--fg);box-shadow:var(--shadow-sm)}
.hint{color:var(--muted-fg);font-size:13px;margin-top:-4px}
@media (pointer:coarse){
  .btn{height:44px}.btn.sm{height:38px}.btn.icon{width:44px}
  .pillbtn .x{width:34px;height:34px}.pillbtn{padding-right:2px}
  .seg button{min-height:42px}
  .chip{height:38px}
  .tab{height:36px}
  .mi{min-height:48px}
  .navlink{height:44px}
  .msg-more{width:36px;height:36px}
  .send-pill{height:36px}
  .rowitem{min-height:60px}
}

/* ============================== phone ==============================
   "Phone" is narrow OR a phone on its side (short, landscape, under 950px wide). A phone
   on its side used to get the desktop two-column layout in about 340px of height, which
   left the message thread almost nothing. Keep this query in step with isMobile() in
   assets/js/crm/dashboard.js. */
@media (max-width:767px),(max-height:500px) and (max-width:950px) and (orientation:landscape){
  .input,.select,textarea.input,.composer textarea{font-size:16px}
  .topbar{height:52px;padding:0 calc(14px + var(--safe-r)) 0 calc(14px + var(--safe-l));padding-top:var(--safe-t);box-sizing:content-box}
  .topnav,.topbar .desk{display:none}
  .bottomnav{display:grid;grid-template-columns:repeat(4,1fr);flex:none;background:var(--surface);border-top:1px solid var(--border);padding-bottom:var(--safe-b)}
  .bnav{display:grid;justify-items:center;align-content:center;gap:2px;height:58px;color:var(--muted-fg);font-size:12px;font-weight:500;position:relative}
  .bnav[aria-current=page]{color:var(--primary)}
  .bnav .ic{width:22px;height:22px}
  .bnav .badge-n{position:absolute;top:6px;left:calc(50% + 6px);background:var(--danger)}
  .inbox{grid-template-columns:1fr}
  .inbox[data-pane=list] .pane-detail{display:none}
  .inbox[data-pane=detail] .pane-list{display:none}
  .pane-list{border-right:0}
  #app[data-pane=detail] .topbar,#app[data-pane=detail] .bottomnav{display:none}
  .back{display:inline-flex}
  .dhead{padding-top:calc(8px + var(--safe-t))}
  .summary{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr)}
  .cell{padding:8px 10px}
  .tabbar{padding:8px 12px}
  .tabs{display:grid;grid-template-columns:repeat(4,1fr);width:100%}
  .tab{padding:0 4px}
  .msg{max-width:86%}
  .page-in{padding:16px 14px 24px}
  .kv{grid-template-columns:96px minmax(0,1fr)}
  .toasts{right:12px;left:12px;top:calc(var(--safe-t) + 10px);width:auto}
  .overlay{align-items:flex-end;padding:0}
  .sheet,.sheet.wide{width:100%;border-radius:18px 18px 0 0;padding-bottom:var(--safe-b);animation:up .2s ease-out;max-height:88dvh}
  .grab{display:block}
}
@media (min-width:768px) and (max-width:1023px) and (min-height:501px){
  .inbox{grid-template-columns:minmax(290px,330px) minmax(0,1fr)}
  .summary .cell{padding:8px 10px}
  .live:not(.bad){display:none}
}

/* ============================== SOTA motion + polish (mobile-first) =====
   Self-contained: mirrors tokens.css names so this file works standalone.
   transform + opacity only for show/hide. Existing classes untouched above. */
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.96) translateY(4px)}to{opacity:1;transform:none}}
@keyframes toastIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes typingBounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes badgePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
/* spin / fade / rise / up are defined above and kept for compat */

/* ---- GPU-only show/hide: sheets, menus, toasts, tips ---- */
.overlay{animation:fade var(--dur-fast) var(--ease-out)}
.sheet{animation:popIn var(--dur-med) var(--ease-out);will-change:transform,opacity}
.pop{animation:popIn var(--dur-fast) var(--ease-out);will-change:transform,opacity;transform-origin:top right}
.toast{animation:toastIn var(--dur-med) var(--ease-out);will-change:transform,opacity}
.tip{animation:popIn var(--dur-fast) var(--ease-out);will-change:transform,opacity}
.mi{transition:background var(--dur-instant) var(--ease-out)}
.msg-more{transition:opacity var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.lead,.rowitem,.chip,.tab,.btn,.bnav{transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),opacity var(--dur-fast) var(--ease-out)}
/* Only a message that just arrived animates (dashboard.js marks it .fresh). The thread is
   rebuilt on every refresh, and animating all of it each time made a phone flicker every poll. */
.thread .msg.fresh{animation:fadeUp var(--dur-med) var(--ease-out) both}
.typing span{animation:typingBounce 1.1s ease-in-out infinite}

/* ---- Staggered list-item entrance (capped at ~8 items) ---- */
.list .lead{animation:fadeUp var(--dur-med) var(--ease-out) both;will-change:transform,opacity}
.list .lead:nth-child(1){animation-delay:0ms}
.list .lead:nth-child(2){animation-delay:30ms}
.list .lead:nth-child(3){animation-delay:60ms}
.list .lead:nth-child(4){animation-delay:90ms}
.list .lead:nth-child(5){animation-delay:120ms}
.list .lead:nth-child(6){animation-delay:150ms}
.list .lead:nth-child(7){animation-delay:180ms}
.list .lead:nth-child(n+8){animation-delay:210ms}

/* ---- Unread badges stay still: a badge that pulses forever is motion nobody can pause (WCAG 2.2.2) ---- */

/* ---- Safe-area insets: bottom nav + composer + sheets + toasts ---- */
.bottomnav{padding-left:var(--safe-l);padding-right:var(--safe-r)}
.composer{padding-left:calc(12px + var(--safe-l));padding-right:calc(12px + var(--safe-r))}
.sheet-foot,.sheet-head,.sheet-body{padding-left:calc(18px + var(--safe-l));padding-right:calc(18px + var(--safe-r))}
.toasts{padding-left:var(--safe-l);padding-right:var(--safe-r)}

/* ---- Coarse-pointer touch targets: >=44px, larger tap areas ---- */
@media (pointer:coarse){
  .btn{height:44px}
  .btn.sm{min-height:44px;height:44px}
  .btn.icon{width:44px;height:44px;position:relative}
  .chip{height:44px}
  .tab{height:44px}
  .mi{min-height:48px}
  .navlink{min-height:44px}
  .msg-more{width:44px;height:44px;min-width:44px;min-height:44px;position:relative}
  .send-pill{min-height:44px;height:44px}
  .pillbtn{min-height:44px}
  .pillbtn .x{width:44px;height:44px}
  .rowitem{min-height:64px}
  .bnav{min-height:58px}
  /* expanded invisible tap area for small icon glyphs */
  .btn.icon::after,.msg-more::after{content:"";position:absolute;inset:-6px}
  .star-mini{width:18px;height:18px}
}

/* ---- Reduced motion: hard stop on every keyframe + transition ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .list .lead,.thread .msg,.sheet,.pop,.toast,.tip,.unread-n,.bnav .badge-n,.typing span{animation-name:none !important}
}

/* ---- Skeleton placeholders and .enter helper (used by dashboard.js) ---- */
.skeleton,.sk-line,.sk-avatar{position:relative;overflow:hidden;background:hsl(150 12% 93%);pointer-events:none;user-select:none}
.skeleton{border-radius:8px}
.skeleton::after,.sk-line::after,.sk-avatar::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.8) 50%,transparent 80%);background-size:200% 100%;animation:shimmer 1.4s linear infinite;transform:translateZ(0)}
.sk-line{height:12px;border-radius:99px}
.sk-avatar{width:40px;height:40px;border-radius:50%;flex:none}
.sk-row{display:flex;gap:12px;align-items:center;padding:12px 14px}
.enter{animation:fadeUp var(--dur-med) var(--ease-out) both;will-change:transform,opacity}
@media (prefers-reduced-motion:reduce){
  .skeleton::after,.sk-line::after,.sk-avatar::after,.enter{animation-name:none !important}
  .enter{transition:none !important}
}

/* ---- Bridge pass 2 (dashboard.js view transitions, badge bump, pending) ---- */
.view-enter{opacity:0;transform:translateY(10px)}
.view-enter-active{opacity:1;transform:none;transition:opacity var(--dur-med) var(--ease-out),transform var(--dur-med) var(--ease-out);will-change:transform,opacity}
.bump{animation:badgePulse .45s var(--ease-out)}
.msg.pending{opacity:.75}
.msg.pending .bubble{position:relative;overflow:hidden}
.msg.pending .bubble::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);background-size:200% 100%;animation:shimmer 1.4s linear infinite;pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .view-enter-active{transition:none !important}
  .bump,.msg.pending .bubble::after{animation-name:none !important}
}

/* ---- v7.6 polish: sliders at least 24px tall, steadier numbers, balanced headings ---- */
input[type=range]{height:24px;min-height:24px;margin:0}
h1,h2,h3{text-wrap:balance}
.lead-p{text-wrap:pretty}
time,.badge-n,.unread-n,.dn,.mtile b{font-variant-numeric:tabular-nums}
@media (pointer:coarse){input[type=range]{height:32px;min-height:32px}}

/* ---- Settings control room (v6.33.0): flow strip, metric tiles, stages ---- */
.flowbar{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.fstep{flex:1 1 150px;display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--border);border-radius:14px;padding:12px 13px;min-width:0}
.fstep.warn{border-color:hsl(38 90% 55%)}
.fnum{flex:none;width:24px;height:24px;border-radius:50%;background:var(--primary);color:#fff;font-weight:700;font-size:12.5px;display:grid;place-items:center;margin-top:1px}
.fmain{min-width:0}
.fmain b{display:block;font-size:13.5px}
.fmain small{display:block;color:var(--muted-fg);font-size:12px;overflow-wrap:anywhere}
.farrow{align-self:center;color:var(--muted-fg);font-weight:700}
.mtiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 18px}
@media (max-width:560px){.mtiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mtile{background:#fff;border:1px solid var(--border);border-radius:14px;padding:12px 13px;min-width:0}
.mtile.warn{border-color:hsl(38 90% 55%)}
.mtile small{display:block;color:var(--muted-fg);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em}
.mtile b{display:block;font-size:19px;margin:3px 0 2px;overflow-wrap:anywhere}
.mtile span{display:block;color:var(--muted-fg);font-size:12px;overflow-wrap:anywhere}
.stage{margin-bottom:12px;padding:0}
.stage-head{display:flex;gap:10px;align-items:flex-start;padding:14px 14px 6px;flex-wrap:wrap}
.stage-chip{margin-left:auto;flex:none;background:hsl(150 30% 94%);border:1px solid var(--border);border-radius:99px;padding:4px 10px;font-size:12px;color:var(--fg);max-width:100%;overflow-wrap:anywhere}
.stage-fields{padding:0 0 4px}
.util-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin-top:16px;align-items:start}
.util-t{display:block;font-size:13px;margin-bottom:6px}
@media (max-width:560px){ .farrow{display:none} .fstep{flex:1 1 100%} }

/* ---- Logs page (v6.34.0) ---- */
.logfilters{display:grid;gap:8px;margin:0 0 12px}
.logfrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.logfrow .grow{flex:1}
.logcard{padding:0;overflow:hidden}
.logrow{display:flex;gap:11px;align-items:flex-start;padding:11px 14px;border-bottom:1px solid var(--border)}
.logrow:last-child{border-bottom:0}
.logdot{flex:none;width:9px;height:9px;border-radius:50%;margin-top:5px;background:hsl(160 45% 55%)}
.logrow.lvl-warn .logdot{background:hsl(38 92% 50%)}
.logrow.lvl-error .logdot{background:hsl(4 72% 52%)}
.logmain{flex:1;min-width:0}
.logmsg{font-size:13.5px;overflow-wrap:anywhere}
.logmeta{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted-fg);font-size:12px;margin-top:2px}
.logkind{font-weight:650;color:var(--fg)}
.log-lead{color:var(--primary);font-weight:600;text-decoration:none}
.loglvl{flex:none;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-fg);border:1px solid var(--border);border-radius:99px;padding:2px 8px}
.logrow.lvl-warn .loglvl{color:hsl(32 80% 32%);border-color:hsl(38 90% 60%)}
.logrow.lvl-error .loglvl{color:hsl(4 65% 38%);border-color:hsl(4 80% 70%)}

/* ============================== v7.7 mobile overhaul ==============================
   Last in the file on purpose: these win ties against the earlier rules. */

/* Settings number box (was an inline 86x34 style, too small to hit on a phone) */
.num-input{width:86px;height:40px;flex:none}

/* Logs: the kind chips scroll sideways in one line instead of wrapping into a wall of pills */
.logfrow.kinds{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0 -14px;padding:0 14px}
.logfrow.kinds::-webkit-scrollbar{display:none}
.logfrow.kinds .chip{flex:none}
@media (min-width:768px){.logfrow.kinds{flex-wrap:wrap;overflow:visible;margin:0;padding:0}}

/* Keyboard open on a phone: the summary strip, the tabs and the banners are not needed while
   typing, and they would leave the thread a sliver. They come back when the keyboard closes. */
@media (max-width:767px),(max-height:500px) and (max-width:950px) and (orientation:landscape){
  html.kb-open .summary,html.kb-open .tabbar,html.kb-open #dNote,html.kb-open .bottomnav{display:none}
  html.kb-open .composer{padding-bottom:10px}
  html.kb-open .sheet{padding-bottom:0}
}

/* A phone on its side (not a portrait phone with the keyboard up: that is under 560px wide).
   Navigation moves into the top bar as icons; every spare pixel of height goes to content. */
@media (max-height:500px) and (min-width:560px) and (max-width:950px) and (orientation:landscape){
  .topbar{height:44px;gap:6px}
  .topnav{display:flex;margin-left:2px}
  .bottomnav{display:none}
  .live:not(.bad){display:none}
  .list-head{padding:8px 12px 6px;gap:6px}
  .chips{margin:0 -12px;padding:0 12px}
  .list-title{display:none}
  .dhead{padding-top:6px;padding-bottom:6px}
  .dhead p{display:none}
  .summary .cell{display:flex;align-items:center;gap:6px;padding:4px 10px;min-height:44px}
  .summary .cell .val.wrap{-webkit-line-clamp:1}
  .tabbar{padding:4px 12px}
  /* the send-options pill and the text box share one row instead of stacking */
  .composer{display:flex;align-items:flex-end;gap:8px;padding-top:6px;padding-bottom:calc(6px + var(--safe-b))}
  .composer .send-pill{flex:none;max-width:36%}
  .composer .composer-row{flex:1;min-width:0}
  .thread{padding:8px 12px}
  .page-in{padding:12px 14px 18px}
  .empty{padding:16px}
  .sheet,.sheet.wide{width:min(520px,100%);border-radius:14px;animation:popIn var(--dur-med) var(--ease-out)}
  .overlay{align-items:center;padding:8px calc(8px + var(--safe-r)) 8px calc(8px + var(--safe-l))}
  .grab{display:none}
}

/* Icon-only top nav where the labels do not fit: a tablet in portrait (768-899px, where brand,
   four labelled links, refresh, version and Lock together are wider than the screen) and a
   phone on its side. The words stay in the accessible name, with the unread badge. */
@media (min-width:768px) and (max-width:899px),(max-height:500px) and (min-width:560px) and (max-width:950px) and (orientation:landscape){
  .topnav .navlink{gap:0;padding:0 12px}
  .topnav .navlink .nl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .topnav .navlink .ic{width:20px;height:20px}
  .topnav .navlink .badge-n{margin-left:4px}
}

/* Touch targets: nothing the thumb must hit is under 44px. These come after the earlier
   coarse-pointer blocks because some of the 40px cases were more specific than those. */
@media (pointer:coarse){
  .composer .btn.icon{width:44px;height:44px}
  .composer textarea{min-height:44px}
  .input,.select,textarea.input,.num-input{height:44px}
  /* 16px or iOS zooms the page when a field is focused. This was only set under 768px, so an iPad in portrait zoomed. */
  .input,.select,textarea.input,.composer textarea{font-size:16px}
  .seg button{min-height:44px}
  .chip{min-width:44px;justify-content:center}
  .brand{min-height:44px}
  input[type=range]{height:44px;min-height:44px}
  .hidden-note button{display:inline-block;padding:14px 6px;margin:-14px -6px}
  .log-lead{display:inline-block;padding:14px 6px;margin:-14px -6px}
}
/* A crowded top bar (a tablet in portrait) shrank the refresh button to 20px wide. */
.btn.icon{flex:none}