:root{/* Kairos online palette: deep teal primary, cream background, sage secondary. Change colors here only. */
  --teal:#1F5F5B;--teal-dark:#174744;--teal-tint:#E6F0EE;--teal-tint-2:#D3E4E1;
  --sage:#4F6F55;--sage-tint:#E4ECE5;--orange:#E07A3F;
  --bg:#FAF7F0;--card:#FFFFFF;--ink:#1B2B2A;--muted:#4D5E5C;--line:#D5E2DF;--on-teal:#FFFFFF;--on-teal-muted:#D6E8E5;
  --danger-bg:#F8DCDC;--danger:#8A1C1C;--shadow:#0000001a;--scrim:#00000070;
  --brown:var(--teal);--accent:var(--teal);--ok:var(--sage)}
/* Scrolling: the page uses natural document scrolling (momentum on iOS). No fixed body, no scroll/touch handlers. */
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}html.lock{overflow:hidden}
*{box-sizing:border-box}body{margin:0;font:16px/1.35 -apple-system,system-ui,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink);padding-bottom:90px}
.top{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--brown);color:var(--on-teal)}
.brand{font-weight:800;font-size:19px}.brand small{display:block;font-weight:400;font-size:13px;opacity:.8}
.cartbtn{background:var(--card);color:var(--teal);border:0;border-radius:20px;padding:8px 14px;font-weight:700;font-size:15px}.cartbtn b{background:var(--teal);color:var(--on-teal);border-radius:10px;padding:0 7px;margin-left:4px}
.tabs{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x pan-y;padding:12px 16px;position:sticky;top:var(--toph,58px);background:var(--bg);z-index:4;scrollbar-width:none}
.tabs button{flex:none;border:1px solid var(--line);background:var(--card);border-radius:18px;padding:7px 13px;font-size:14px;color:var(--ink)}.tabs button.on{background:var(--brown);color:var(--on-teal);border-color:var(--brown)}
h2{font-size:18px;margin:18px 16px 8px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 16px}
.card{background:var(--card);border-radius:14px;overflow:hidden;box-shadow:0 1px 3px var(--shadow);border:0;padding:0;text-align:left;color:inherit;font:inherit}
.card img,.card .ph{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--teal-tint)}
.card .ph{display:flex;align-items:center;justify-content:center;font-size:34px}
.card .t{padding:8px 10px 10px}.card .n{font-weight:700;font-size:15px}.card .p{color:var(--muted);font-size:14px}
.card.out{opacity:.45}.badge{font-size:13px;background:var(--teal-tint);border-radius:6px;padding:1px 6px;margin-left:4px}
.bar{position:fixed;left:0;right:0;bottom:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:#fffffff2;border-top:1px solid var(--line);z-index:6}
.btn{width:100%;border:0;border-radius:14px;padding:15px;font-size:17px;font-weight:800;background:var(--accent);color:var(--on-teal)}.btn:hover,.mini.fill:hover{background:var(--teal-dark)}.cartbtn:hover{background:var(--teal-tint)}.btn:active,.mini.fill:active{background:var(--teal-dark)}.btn:disabled{opacity:.5}
.btn.sec{background:var(--card);color:var(--brown);border:2px solid var(--brown)}.btn.dark{background:var(--brown)}
.sheet{position:fixed;inset:0;background:var(--scrim);z-index:10;display:flex;align-items:flex-end;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent;padding-top:env(safe-area-inset-top)}.sheet.hidden{display:none}
.panel{cursor:auto;position:relative;transition:transform .15s ease-out;background:var(--card);width:100%;max-height:92vh;max-height:92dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;border-radius:20px 20px 0 0;padding:0 0 100px}
.panel img{width:100%;max-height:220px;object-fit:cover}.panel .in{padding:14px 16px}
.panel h3{margin:4px 0 2px;font-size:22px}.grab{position:sticky;top:0;z-index:3;height:52px;display:flex;align-items:center;justify-content:center;background:var(--card);border-radius:20px 20px 0 0;touch-action:none;cursor:grab}
.handle{width:44px;height:5px;border-radius:3px;background:var(--line)}
.x{position:absolute;right:10px;top:4px;width:44px;height:44px;border:0;border-radius:50%;background:var(--teal-tint);color:var(--teal-dark);font-size:22px;font-weight:700;line-height:44px;padding:0;cursor:pointer;touch-action:manipulation}
.grp{margin:16px 0 4px;font-weight:800}.grp small{font-weight:400;color:var(--muted)}
.opt{display:flex;justify-content:space-between;align-items:center;padding:11px 12px;border:1px solid var(--line);border-radius:12px;margin:6px 0}
.opt.on{border-color:var(--accent);background:var(--teal-tint)}.opt.dis{opacity:.4}
.qty{display:flex;align-items:center;gap:14px;margin:16px 0}.qty button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--card);font-size:20px}
.sec-box{background:var(--card);border-radius:14px;margin:12px 16px;padding:14px;box-shadow:0 1px 3px var(--shadow)}
.sec-box h4{margin:0 0 8px;font-size:16px}
.line{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}.line:last-child{border:0}.line small{display:block;color:var(--muted)}
input,select,textarea{width:100%;font:inherit;padding:12px;border:1px solid var(--line);border-radius:10px;margin:4px 0 8px;background:var(--card)}
.tips{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tip{border:2px solid var(--line);background:var(--card);border-radius:12px;padding:10px 4px;text-align:center;color:var(--ink)}.tip b{display:block;font-size:22px}.tip small{font-size:13px;color:var(--muted)}
.tip.on{border-color:var(--teal);background:var(--teal-tint);color:var(--teal-dark)}.tip.on small{color:var(--teal-dark)}
.rw{background:linear-gradient(135deg,var(--teal-dark),var(--teal));color:var(--on-teal)}.rw h4{color:var(--on-teal)}
.rw .btn{background:var(--accent)}.beans{font-size:30px;font-weight:900}
.small{font-size:13px;color:var(--muted);line-height:1.35}.rw .small{color:var(--on-teal-muted)}
.check{font-size:13px;margin:6px 0 2px;text-align:center}
.reward{display:flex;justify-content:space-between;align-items:center;padding:10px;border-radius:10px;background:#ffffff1a;margin:6px 0}
.reward button{border:0;border-radius:10px;padding:8px 12px;font-weight:700;background:var(--card);color:var(--brown)}.reward button:disabled{opacity:.4}.reward.on{outline:2px solid var(--on-teal)}
.tot{font-weight:800;font-size:18px}.disc{color:var(--ok)}
#card-container{min-height:90px}.mockcard{border:1px solid var(--line);border-radius:10px;padding:14px;color:var(--muted);display:flex;justify-content:space-between}
.toast{position:fixed;left:16px;right:16px;bottom:100px;background:var(--ink);color:var(--on-teal);padding:12px 14px;border-radius:12px;z-index:20}.toast.hidden{display:none}
.done{text-align:center;padding:30px 20px}.done .big{font-size:60px}
.demo{background:var(--teal-tint);color:var(--teal-dark);font-size:13px;text-align:center;padding:4px}
.hdr{display:flex;gap:8px;align-items:center}.acctbtn{background:#ffffff22;color:var(--on-teal);border:0;border-radius:50%;width:38px;height:38px;font-size:18px}
.row{display:flex;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x pan-y;padding:0 16px 4px;scrollbar-width:none}.row .card{flex:0 0 140px}.why{display:inline-block;font-size:13px;background:var(--teal-tint);color:var(--teal-dark);border-radius:6px;padding:1px 6px;margin-top:3px}
.sub{margin:-4px 16px 8px;font-size:13px;color:var(--muted)}.new{background:var(--ok);color:var(--on-teal)}
.notice{background:var(--teal-tint);color:var(--teal-dark);border-left:4px solid var(--teal);border-radius:12px;margin:12px 16px;padding:10px 12px;font-size:14px}
.chip{display:inline-block;font-size:13px;border-radius:10px;padding:2px 8px;background:var(--teal-tint);color:var(--ink)}.chip.ready{background:var(--sage-tint);color:#3E5A44}.chip.in_progress{background:var(--teal-tint);color:var(--teal-dark)}.chip.canceled{background:var(--danger-bg);color:var(--danger)}
.hist{padding:10px 0;border-bottom:1px solid var(--line)}.hist:last-child{border:0}.hist .acts{display:flex;gap:8px;margin-top:8px}
.mini{border:1px solid var(--brown);background:var(--card);color:var(--brown);border-radius:10px;padding:7px 12px;font-weight:700;font-size:14px}.mini.fill{background:var(--accent);border-color:var(--accent);color:var(--on-teal)}
.savedcard{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;margin:6px 0}.savedcard.on{border-color:var(--accent);background:var(--teal-tint)}.savedcard .grow{flex:1}
.savedcard input{width:auto;margin:0}.cb{display:flex;gap:10px;align-items:flex-start;font-size:14px;margin-top:10px}.cb input{width:22px;height:22px;margin:0;flex:none}
.steps{display:flex;justify-content:space-between;margin:18px 4px 6px;position:relative}.steps:before{content:'';position:absolute;top:15px;left:12%;right:12%;height:4px;background:var(--line)}
.step{position:relative;flex:1;text-align:center;font-size:13px;color:var(--muted)}.step i{display:block;margin:0 auto 6px;width:34px;height:34px;border-radius:50%;background:var(--card);border:3px solid var(--line);font-style:normal;line-height:28px;font-weight:800}
.step.fin i{background:var(--ok);border-color:var(--ok);color:var(--on-teal)}.step.cur i{background:var(--accent);border-color:var(--accent);color:var(--on-teal)}.step.cur{color:var(--ink);font-weight:800}
.bigst{font-size:26px;font-weight:900;text-align:center;margin:8px 0 2px}
.tip.notip{display:block;width:100%;margin-top:8px;padding:12px 4px}.tip.notip b{font-size:18px}
#custom b{font-size:18px;line-height:26px}
.li{display:flex;gap:10px;align-items:center;min-width:0}.th{width:44px;height:44px;flex:0 0 44px;border-radius:10px;object-fit:cover;background:var(--line)}
.th.ph0{background:linear-gradient(135deg,var(--teal-tint),var(--teal-tint-2))}.thumbs{display:flex;gap:6px;margin:6px 0}.th.sm{width:36px;height:36px;flex-basis:36px;border-radius:8px}

a{color:var(--teal)}a:hover{color:var(--teal-dark)}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px}.top :focus-visible,.rw :focus-visible{outline-color:var(--on-teal)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--teal);border-color:var(--teal)}
input[type=checkbox],input[type=radio]{accent-color:var(--teal)}
.rw .btn{background:var(--card);color:var(--teal)}.reward button{color:var(--teal)}

/* Cart: Keep shopping (secondary teal outline) */
.carthead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px 0}.carthead h2{margin:0;font-size:22px}
.btn.keep{width:auto;padding:10px 14px;font-size:15px;min-height:44px;color:var(--teal);border-color:var(--teal)}
.bar.two{display:flex;gap:10px}.bar.two .keep{flex:0 0 auto}.bar.two #toPay{flex:1}
.sec-box.empty{text-align:center}.sec-box.empty .btn{margin-top:14px}

/* Loyalty sign-in strip under the header (menu) */
.loyal{background:var(--teal-tint);padding:10px 16px 6px}.btn.loyalbtn{min-height:44px;padding:11px;font-size:16px;background:var(--teal);color:var(--on-teal)}
.demo-line{font-size:13px;color:var(--muted);text-align:center;margin-top:5px}

/* Signed-in last order: compact one-line pill, tap to reorder */
.lo-wrap{padding:10px 16px 0}.lo-wrap:empty{display:none}
.lastorder{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:5px 6px 5px 6px;background:var(--card);border:1px solid var(--teal-tint);border-radius:999px;font:inherit;font-size:14px;color:inherit;text-align:left;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.lastorder img{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:none;background:var(--line)}
.lastorder .lo-txt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:4px}
.lastorder .lo-txt small{color:var(--muted);font-size:12px;margin-right:2px}
.lastorder .lo-go{flex:none;background:var(--teal-dark);color:#fff;border-radius:999px;padding:6px 12px;font-size:13px}

/* Sticky rewards bar: second row of the sticky header, so it never covers the header or cart */
.top{flex-wrap:wrap}#rwbar{flex:0 0 calc(100% + 32px);margin:10px -16px -12px}
.rwbar{display:block;width:100%;min-height:44px;border:0;background:var(--sage-tint);color:var(--sage);padding:8px 16px 9px;text-align:left;font:600 14px/1.3 inherit;font-family:inherit}
.rwbar.ready{background:var(--sage);color:#fff}.rwbar.out{background:var(--teal-tint);color:var(--teal-dark)}
.rwprog{display:block;height:5px;border-radius:3px;background:rgba(79,111,85,.22);margin-top:6px;overflow:hidden}.rwbar.ready .rwprog{background:rgba(255,255,255,.3)}
.rwprog i{display:block;height:100%;background:var(--teal);border-radius:3px}.rwbar.ready .rwprog i{background:#fff}
#app h2[id^="c-"]{scroll-margin-top:calc(var(--toph,58px) + 64px)}
/* Task C: clear the Netlify badge (bottom-right, ~60px), 44px tap targets, min 13px text, add-to-cart confirmation */
body{padding-bottom:calc(160px + env(safe-area-inset-bottom))}
.bar{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
.panel{padding-bottom:calc(60px + env(safe-area-inset-bottom))}
.toast{bottom:calc(150px + env(safe-area-inset-bottom))}
.tabs button,.cartbtn,.reward button,.mini{min-height:44px}
.acctbtn{width:44px;height:44px}.qty button{width:44px;height:44px}
a.tap{display:inline-flex;align-items:center;min-height:44px;padding:0 6px}
.badge,.why,.demo-line{font-size:13px}
.addconf{position:fixed;left:12px;right:12px;bottom:calc(150px + env(safe-area-inset-bottom));z-index:21;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 24px #0003;padding:10px 12px;max-width:520px;margin:0 auto}
.addconf.hidden{display:none}.ac-top{display:flex;justify-content:space-between;align-items:center;color:var(--teal-dark)}
.ac-x{border:0;background:none;font-size:18px;min-width:44px;min-height:44px;color:var(--muted)}
.ac-sug{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);padding-top:8px}
.ac-sug img,.ac-ph{width:48px;height:48px;border-radius:10px;object-fit:cover;flex:none;display:flex;align-items:center;justify-content:center;background:var(--teal-tint)}
.ac-n{flex:1;font-weight:700;font-size:15px}.ac-n small{display:block;font-weight:500;color:var(--muted);font-size:13px}
.ac-add{min-height:44px;border:0;border-radius:12px;padding:0 14px;font-weight:800;background:var(--accent);color:var(--on-teal)}

.step{display:inline-flex;align-items:center;gap:6px;margin:6px 0}.step button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--card);font-size:20px;color:inherit}.step button:disabled{opacity:.35}.step b{min-width:22px;text-align:center}
.ac-qty{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px}.ac-qty .step{margin:0}
.incart{display:inline-block;margin-top:4px;font-size:12px;font-weight:600;color:var(--teal)}

.upgrid{grid-template-columns:repeat(2,1fr);margin:12px 0 0;padding:0}.upgrid .card img{height:220px;max-height:none}.upadd{margin-top:6px;font-weight:700;color:var(--teal);min-height:40px}.freeb{color:var(--teal)}

/* Kiosk-style checkout (mirrors App.tsx: cart panel rows, black tip screen, sage pill pay button). */
:root{--k-sage:#4F6F55;--k-ink:#2F3A33;--k-muted:#6B746D;--k-line:#E8E2D6;--k-dark:#3A3A3C}
.korder h4,.ktip h4{font-size:22px;font-weight:600;color:var(--k-ink)}
.kline{align-items:center;border-bottom:1px solid var(--k-line)}.kline b{font-size:18px;font-weight:600;color:var(--k-ink)}.kline small{color:var(--k-muted);font-size:15px}
.kprice{display:block;color:var(--k-muted);font-size:16px;margin-top:2px}.kctl{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}.kctl .step button{border-radius:50%;width:44px;height:44px;border:1px solid var(--k-line);background:#fff;font-size:22px}
.ksub{font-size:22px;border:0}.ksub b{font-weight:700}
.ktip{background:#000;color:#fff;border:0;border-radius:20px;padding:22px 18px}.ktip h4{color:#fff;font-weight:800;font-size:24px;margin:18px 0 6px}
.khero{font-size:56px;font-weight:900;letter-spacing:-1.5px;line-height:1.05}.ksubl{color:#aaa;font-size:16px;margin-top:4px}.krw{color:#ddd;font-size:15px;margin-top:6px}
.ktip .tips{display:flex;flex-direction:column;gap:10px}.ktip .tip,.ktip .tip.notip{width:100%;min-height:64px;border:0;border-radius:16px;background:var(--k-dark);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0}
.ktip .tip.notip{margin-top:10px}.ktip .tip b{font-size:24px;font-weight:800;color:inherit}.ktip .tip small{font-size:15px;color:#C7C7CC}
.ktip .tip.on{background:#fff;color:#000;box-shadow:none}.ktip .tip.on small{color:var(--k-dark)}.ktip .small{color:#aaa}
.kbar .btn:not(.sec){background:var(--k-sage);border-radius:999px;min-height:60px;font-size:18px;font-weight:800}.kbar .btn.sec{border-radius:999px;border-color:var(--k-sage);color:var(--k-sage)}

/* Lunch-only items before 10:30 pickup */
.card.later{opacity:.55;filter:grayscale(.6)}.lunchnote{font-size:13px;font-weight:700;color:var(--muted);margin-top:2px}.notice.lunchn{margin:8px 0}
.notiplink{display:block;margin:6px auto 0;min-height:44px;min-width:120px;padding:10px 16px;background:none;border:0;font-size:15px;color:#F2F2F7;font-weight:500;text-decoration:underline;text-underline-offset:2px;cursor:pointer}.notiplink[aria-pressed=true]{color:#F2F2F7}.notiplink:focus-visible{outline:2px solid #8a8a8e;outline-offset:2px;border-radius:8px}

.crew{display:flex;align-items:center;gap:8px;font-size:14px;opacity:.9;margin:-2px 0 10px;min-height:40px}
.crew .faces{display:flex}.crew .face{width:28px;height:28px;border-radius:50%;object-fit:cover;border:2px solid #000;margin-left:-6px;flex:none}
.crew .face:first-child{margin-left:0}.crew .ini{display:inline-flex;align-items:center;justify-content:center;background:#c8a27a;color:#3b2414;font-weight:700;font-size:13px}
.crew .teamph{width:100%;border-radius:10px;margin-bottom:6px;display:block}

.phonein{background:#fff;border:1px solid #d9e3dd;border-radius:14px;padding:12px 14px;margin:10px 0;display:flex;flex-direction:column;gap:8px}
.phonein.ok{flex-direction:row;align-items:center;justify-content:space-between;background:#eef6f1}
.phonein .row2{display:flex;gap:8px}.phonein input{flex:1;font-size:17px;padding:10px 12px;border:1px solid #c9d3cd;border-radius:10px;min-width:0}
.phonein .btn.sm{width:auto;padding:10px 16px;font-size:15px;margin:0}.linkbtn{background:none;border:0;color:#2c5a46;text-decoration:underline;font-size:14px;padding:4px 0;cursor:pointer;text-align:left}

.wallets{display:flex;flex-direction:column;gap:10px;margin-bottom:6px}.wallets:empty{display:none}
.applepay{-webkit-appearance:-apple-pay-button;-apple-pay-button-type:plain;-apple-pay-button-style:black;height:48px;width:100%;border-radius:10px;cursor:pointer}
#google-pay-button{min-height:48px}

.vslot{width:100%;background:#1c1c1c;display:flex;justify-content:center}.vwrap{position:relative;height:min(55vh,460px);aspect-ratio:9/16;max-width:100%;background:#1c1c1c;overflow:hidden}
.vwrap video{width:100%;height:100%;object-fit:contain;display:block;background:#1c1c1c}
.vsnd{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.6);color:#fff;border:0;border-radius:16px;padding:6px 10px;font-size:13px}

.need{outline:2px solid #c62828!important;outline-offset:2px;border-radius:10px}.needmsg{color:#c62828;font-size:14px;font-weight:600;margin:6px 2px 10px}
.picks{margin:4px 0 8px}.picks h2{margin-top:8px}
.usual{display:flex;align-items:center;gap:12px;background:#fff7ec;border:1px solid #ecd9bf;border-radius:14px;padding:12px;margin:6px 0 10px}
.usual .ph{font-size:28px}.usual .ut{flex:1;min-width:0}.usual .ut b{display:block;font-size:16px}
.notyou{margin:6px 2px 0}.notyou .linkbtn{font-size:14px}
.usual .btn{width:auto!important;flex:none;white-space:nowrap;padding:10px 14px}
/* likes + comments */
.soc{display:flex;gap:10px;align-items:center;font-size:12px;color:#8a7f76;margin:4px 0 2px}
.soc span{display:inline-flex;align-items:center;gap:3px}.soc svg{width:13px;height:13px}.soc .on{color:#ff2d55}
.media{position:relative}.media.none{height:0}.media.none .rail{top:12px;bottom:auto;right:56px;flex-direction:row}
.media.none .rb{color:#5a4a3f;text-shadow:none;filter:none}
.rail{position:absolute;right:10px;bottom:18px;display:flex;flex-direction:column;gap:14px;z-index:3}
.rb{background:none;border:0;padding:0;color:#fff;display:flex;flex-direction:column;align-items:center;gap:2px;font:600 12px/1 system-ui,sans-serif;text-shadow:0 1px 3px rgba(0,0,0,.6);filter:drop-shadow(0 1px 3px rgba(0,0,0,.45));cursor:pointer}
.rb svg{width:34px;height:34px}.rb.pop svg{animation:hpop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes hpop{0%{transform:scale(1)}35%{transform:scale(1.35)}100%{transform:scale(1)}}
#csheet{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,0);pointer-events:none;transition:background .2s}
#csheet.open{background:rgba(0,0,0,.35);pointer-events:auto}
.cpanel{position:absolute;left:0;right:0;bottom:0;max-height:70vh;display:flex;flex-direction:column;background:#fff;border-radius:16px 16px 0 0;transform:translateY(100%);transition:transform .25s ease}
#csheet.open .cpanel{transform:none}
.chead{display:flex;justify-content:center;align-items:center;padding:14px;border-bottom:1px solid #eee;position:relative}.chead .x{position:absolute;right:10px;top:8px;background:none;border:0;font-size:18px}
.clist{overflow:auto;padding:6px 16px;flex:1}.cempty{padding:24px 0;text-align:center}
.cm{padding:10px 0;border-bottom:1px solid #f3efea}.cwho{display:flex;align-items:center;gap:6px;font-size:13px}.cwho .small{margin-left:auto}
.plat{width:16px;height:16px;flex:none}.cbody{font-size:14px;margin-top:3px;word-wrap:break-word}
.cin{display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid #eee;align-items:center}
.cin input{flex:1;min-width:0;padding:10px 12px;border:1px solid #ddd;border-radius:20px;font-size:16px}.cin .btn{width:auto!important;flex:none;padding:9px 14px}
.cin.signin span{flex:1}