[hidden]{display:none!important}
:root{--bar:#075e54;--bg:#efeae2;--me:#d9fdd3;--them:#fff;--ink:#111b21;--sub:#667781;--btn:#027eb5;--green:#00a884;--red:#d71920;
 --sheet:#fff;--line:#e9edef;--chip:#fff;--chipline:#d1d7db;--input:#fff;--composer:#f0f2f5;--sys:#ffeecd;--sysink:#54656f;--owner:#fff;--ownerline:#25d366;--dots:rgba(0,0,0,.035)}
@media (prefers-color-scheme:dark){:root{--bar:#202c33;--bg:#0b141a;--me:#005c4b;--them:#202c33;--ink:#e9edef;--sub:#8696a0;--btn:#53bdeb;
 --sheet:#111b21;--line:#2a3942;--chip:#202c33;--chipline:#2a3942;--input:#2a3942;--composer:#202c33;--sys:#182229;--sysink:#ffd279;--owner:#111b21;--dots:rgba(255,255,255,.03)}}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#d1d7db;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink)}
@media (prefers-color-scheme:dark){html,body{background:#0a1014}}
.app{position:relative;max-width:520px;height:100dvh;margin:0 auto;display:flex;flex-direction:column;background:var(--bg);box-shadow:0 0 30px rgba(0,0,0,.15);overflow:hidden}
header{background:var(--bar);color:#fff;display:flex;align-items:center;gap:10px;padding:8px 10px;padding-top:max(8px,env(safe-area-inset-top))}
header .av{width:42px;height:42px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none}
header .av img{width:56px;height:40px;object-fit:contain}
header .who{flex:1;min-width:0}header b{display:block;font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
header small{font-size:12.5px;opacity:.85}
.tick{display:inline-block;width:15px;height:15px;border-radius:50%;background:#25d366;color:#fff;font-size:10px;line-height:15px;text-align:center;margin-left:3px;vertical-align:1px}
.hbtn{background:none;border:1px solid rgba(255,255,255,.45);color:#fff;border-radius:16px;padding:5px 9px;font-size:12px;cursor:pointer;text-decoration:none;white-space:nowrap}
.banner{background:#fff8c5;color:#5c4a00;font-size:12.5px;padding:6px 12px;border-bottom:1px solid #ecdf8f;display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:center;text-align:center}
.banner a{color:#5c4a00;font-weight:600}.banner .bl{display:flex;gap:12px}
#log{flex:1;overflow-y:auto;padding:10px 10px 6px;background-color:var(--bg);background-image:radial-gradient(var(--dots) 1px,transparent 1px);background-size:18px 18px;scroll-behavior:smooth}
.day{text-align:center;margin:4px 0 10px}.day span{background:var(--them);color:var(--sub);font-size:12px;padding:5px 10px;border-radius:8px;box-shadow:0 1px .5px rgba(0,0,0,.13)}
.sys{background:var(--sys);color:var(--sysink);font-size:12.5px;text-align:center;border-radius:8px;padding:8px 12px;margin:0 14px 10px;box-shadow:0 1px .5px rgba(0,0,0,.13)}
.sys a{color:var(--btn)}
.wrap{display:flex;flex-direction:column;max-width:85%;margin:2px 0}.wrap.me{margin-left:auto;align-items:flex-end}
.m{padding:6px 8px 7px 9px;border-radius:8px;font-size:14.5px;line-height:1.38;white-space:pre-wrap;word-wrap:break-word;position:relative;box-shadow:0 1px .5px rgba(0,0,0,.13);min-width:80px}
.them .m{background:var(--them);border-top-left-radius:0}.me .m{background:var(--me);border-top-right-radius:0}
.m .hd{font-weight:600;margin-bottom:2px}.m .ft{color:var(--sub);font-size:12.5px;margin-top:3px}
.m time{float:right;font-size:11px;color:var(--sub);margin:7px 0 -5px 10px}.me .m time::after{content:" ✓✓";color:#53bdeb}
.m img.pic{display:block;max-width:100%;width:300px;border-radius:6px;margin:-2px -4px 4px}
.m a{color:var(--btn)}
.acts{display:flex;flex-direction:column;gap:2px;margin-top:2px;width:100%}
.acts button,.acts a{display:flex;align-items:center;justify-content:center;gap:6px;background:var(--them);border:none;color:var(--btn);font-size:14.5px;padding:10px;border-radius:8px;cursor:pointer;box-shadow:0 1px .5px rgba(0,0,0,.13);text-decoration:none;font-family:inherit}
.acts button:disabled{color:var(--sub);cursor:default}
.inbtn{display:flex;align-items:center;justify-content:center;gap:6px;border-top:1px solid var(--line);margin:8px -8px -7px -9px;padding:9px;color:var(--btn);font-size:14.5px;cursor:pointer;background:none;border-left:0;border-right:0;border-bottom:0;width:calc(100% + 17px);font-family:inherit}
.typing{font-size:13px;color:var(--sub);background:var(--them);display:inline-block;padding:7px 12px;border-radius:8px;margin:3px 0}
.voice{display:flex;align-items:center;gap:8px;min-width:200px}.voice .play{font-size:18px}.voice .wave{flex:1;height:18px;background:repeating-linear-gradient(90deg,var(--sub) 0 2px,transparent 2px 5px);opacity:.55;border-radius:2px}
.transcript{font-size:12.5px;color:var(--sub);font-style:italic;margin-top:4px}
.cartb{display:flex;gap:10px;align-items:center}.cartb .ci{font-size:26px}.cartb b{display:block}
.loc{width:260px}.loc img{width:100%;border-radius:6px;display:block}
/* the account holder's phone (demo) */
.owner{margin:8px 6px;border:2px solid var(--ownerline);border-radius:14px;background:var(--owner);padding:8px;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.owner .oh{font-size:12px;color:var(--sub);margin:0 2px 6px;line-height:1.35}.owner .oh b{color:var(--ink)}
.owner .wrap{max-width:100%}.owner .m{background:var(--bg)}
.notice{background:var(--sys);color:var(--sysink);border-radius:8px;padding:8px 12px;margin:6px 18px;font-size:13px;text-align:center;white-space:pre-wrap}
/* composer */
.tips{display:flex;gap:6px;overflow-x:auto;padding:6px 8px 2px;background:var(--bg);scrollbar-width:none}
.tips button{flex:none;background:var(--chip);border:1px solid var(--chipline);border-radius:16px;padding:6px 11px;font-size:13px;color:var(--ink);cursor:pointer}
form{display:flex;gap:6px;padding:6px 8px;padding-bottom:max(8px,env(safe-area-inset-bottom));background:var(--bg);align-items:flex-end}
.field{flex:1;display:flex;align-items:flex-end;background:var(--input);border-radius:24px;padding:0 6px;min-height:48px;box-shadow:0 1px .5px rgba(0,0,0,.08)}
textarea{flex:1;resize:none;border:none;background:transparent;color:var(--ink);padding:11px 6px;font:inherit;font-size:15px;max-height:120px;outline:none}
.ic{background:none;border:none;color:#54656f;width:38px;height:48px;cursor:pointer;flex:none;padding:0;display:flex;align-items:center;justify-content:center}
@media (prefers-color-scheme:dark){.ic{color:#8696a0}}
.go{width:48px;height:48px;border-radius:50%;border:none;background:#1daa61;color:#fff;cursor:pointer;flex:none;display:flex;align-items:center;justify-content:center;padding:0}
form.empty #go{display:none}form:not(.empty) #mic{display:none}
.rec{display:flex;align-items:center;gap:10px;padding:6px 8px;padding-bottom:max(6px,env(safe-area-inset-bottom));background:var(--composer)}
.rec .dot{width:10px;height:10px;border-radius:50%;background:#e53935;animation:blink 1s infinite}@keyframes blink{50%{opacity:.2}}
.rec #recx{background:none;border:none;font-size:20px;cursor:pointer}.rectext{flex:1;color:var(--sub);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* sheets: list messages, forms, catalogue, location */
.scrim{position:absolute;inset:0;background:rgba(0,0,0,.4);z-index:5}
.sheet{position:absolute;left:0;right:0;bottom:0;max-height:88%;background:var(--sheet);border-radius:16px 16px 0 0;z-index:6;display:flex;flex-direction:column;animation:up .18s ease-out}
.sheet.full{top:0;max-height:none;border-radius:0}
@keyframes up{from{transform:translateY(30px);opacity:.5}}
.sh{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}.sh b{flex:1;font-size:16px;text-align:center}
.sh button{background:none;border:none;font-size:20px;color:var(--sub);cursor:pointer;width:32px}
.sb{overflow-y:auto;padding:4px 0 12px;flex:1}
.sec{padding:12px 16px 4px;color:var(--green);font-size:13.5px;font-weight:600}
.row{display:flex;align-items:center;gap:12px;padding:11px 16px;cursor:pointer;border:none;background:none;width:100%;text-align:left;color:var(--ink);font:inherit}
.row:hover{background:rgba(0,0,0,.04)}.row .rt{flex:1;min-width:0}.row .rt span{display:block;color:var(--sub);font-size:13px;margin-top:1px}
.row .radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--sub);flex:none}
.sf{padding:10px 14px 14px;border-top:1px solid var(--line)}
.pri{width:100%;background:var(--green);color:#fff;border:none;border-radius:24px;padding:13px;font:inherit;font-weight:600;font-size:15px;cursor:pointer}
.pri:disabled{opacity:.5}
.formb{padding:12px 16px}.formb p{color:var(--sub);font-size:14px;margin:0 0 6px}
.formb label{display:block;font-size:13px;color:var(--sub);margin:14px 0 4px}
.formb input,.formb select{width:100%;font:inherit;font-size:15px;color:var(--ink);background:transparent;border:none;border-bottom:2px solid var(--line);padding:8px 2px;outline:none;border-radius:0}
.formb input:focus,.formb select:focus{border-bottom-color:var(--green)}
.formb .err{color:#e53935;font-size:13px;min-height:18px;margin-top:8px}
.meta{font-size:12px;color:var(--sub);text-align:center;padding:6px 16px 0}
.prod{display:flex;gap:12px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line)}
.prod .ph{width:64px;height:64px;border-radius:8px;background:#f2f4f5;flex:none;display:flex;align-items:center;justify-content:center;font-size:28px;overflow:hidden}
.prod .ph img{width:100%;height:100%;object-fit:contain;background:#fff}
.prod .pt{flex:1;min-width:0}.prod .pt b{display:block;font-weight:500;font-size:14.5px}.prod .pt span{color:var(--sub);font-size:13px}.prod .pt .pr{color:var(--ink);font-size:14px;margin-top:2px;display:block}
.step{display:flex;align-items:center;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.step button{width:34px;height:32px;border:none;background:none;color:var(--green);font-size:18px;cursor:pointer}.step span{min-width:24px;text-align:center;font-weight:600}
.add{border:1px solid var(--green);color:var(--green);background:none;border-radius:18px;padding:6px 14px;font:inherit;cursor:pointer}
.cartline{display:flex;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line)}.cartline span{flex:1}
.tot{display:flex;justify-content:space-between;padding:12px 16px;font-weight:600}
.locopt{display:flex;gap:12px;align-items:center;padding:14px 16px;cursor:pointer;border:none;background:none;width:100%;text-align:left;font:inherit;color:var(--ink);border-bottom:1px solid var(--line)}
.locopt .li{width:40px;height:40px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;flex:none}
.search{margin:10px 16px;display:flex;gap:6px}.search input{flex:1;font:inherit;padding:10px 12px;border-radius:20px;border:1px solid var(--line);background:var(--input);color:var(--ink)}
.search button{border:none;background:var(--green);color:#fff;border-radius:20px;padding:0 14px;font:inherit;cursor:pointer}
.howb{padding:14px 18px;font-size:14.5px;line-height:1.5}.howb li{margin:6px 0}
.toast{position:absolute;left:50%;bottom:90px;transform:translateX(-50%);background:#333;color:#fff;padding:9px 14px;border-radius:18px;font-size:13px;z-index:9;max-width:90%}
@media (max-width:380px){.hbtn{padding:4px 7px;font-size:11px}header .av{width:36px;height:36px}}
.muted{color:var(--sub)}.blk{display:block;font-size:13px}.sh .pad{width:32px}
.prefill{background:var(--sys);color:var(--sysink);border-radius:8px;padding:8px 10px;font-size:13px;margin-bottom:4px}
.maplink{display:block;text-decoration:none;position:relative}.mapcap{position:absolute;left:6px;bottom:10px;background:rgba(255,255,255,.92);color:#027eb5;font-size:12.5px;padding:3px 8px;border-radius:12px}
.pick{padding:8px 16px 20px}.pickintro{color:var(--sub);font-size:14.5px;margin:6px 2px 14px}
.pickopt{display:flex;gap:14px;align-items:center;width:100%;text-align:left;font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:12px;cursor:pointer}
.pickopt:hover{border-color:var(--green)}.pickopt .pi{font-size:30px}.pickopt b{display:block;font-size:16px;margin-bottom:2px}.pickopt .rt span{color:var(--sub);font-size:13.5px}
textarea{padding:13px 4px;min-width:0;width:100%}
.field{min-width:0}form{max-width:100%}
.emo{position:absolute;left:10px;right:10px;bottom:70px;background:var(--sheet);border-radius:14px;box-shadow:0 4px 20px rgba(0,0,0,.18);padding:8px;display:grid;grid-template-columns:repeat(8,1fr);gap:2px;z-index:7}
.emo button{font-size:24px;background:none;border:none;padding:6px;cursor:pointer;border-radius:8px}.emo button:hover{background:var(--bg)}
.scanb{position:relative;flex:1;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden}
.scanb video{width:100%;height:100%;object-fit:cover}
.scanframe{position:absolute;left:12%;right:12%;top:38%;height:22%;border:3px solid rgba(255,255,255,.9);border-radius:14px;box-shadow:0 0 0 2000px rgba(0,0,0,.35)}
.scanframe span{position:absolute;left:6%;right:6%;top:50%;height:2px;background:#ff3b30;animation:scanl 1.6s ease-in-out infinite}
@keyframes scanl{0%,100%{transform:translateY(-30px)}50%{transform:translateY(30px)}}
.scanst{position:absolute;left:16px;right:16px;bottom:16px;color:#fff;text-align:center;font-size:14.5px;text-shadow:0 1px 3px #000}
.scanf{display:flex;flex-direction:column;gap:8px;align-items:center}.sec2{background:var(--bg);color:var(--ink)}.scanlink{color:var(--btn);font-size:13px}
.sheet.full .sb.scanb{padding:0}
.bbtn{display:inline-flex;align-items:center;font:inherit;font-size:12.5px;font-weight:600;color:#5c4a00;background:#fff;border:1px solid #d9c56a;border-radius:16px;padding:4px 12px;cursor:pointer;text-decoration:none}
.bbtn:hover{background:#fffbe6}.banner .bl{gap:8px}.pickhint{color:var(--sub);font-size:12.5px;margin:4px 2px 0;line-height:1.45}
header .hbtn{flex:none;font:inherit;font-size:12px;font-weight:600;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.45);border-radius:16px;padding:6px 10px;cursor:pointer;text-decoration:none;white-space:nowrap}
header .hbtn:hover{background:rgba(255,255,255,.25)}header{gap:8px}
@media (max-width:400px){header .hbtn{font-size:11.5px;padding:5px 8px}header b{font-size:15px}header .av{width:38px;height:38px}}
@media (max-width:370px){header .hbtn{font-size:11px;padding:4px 7px}header .tick{display:none}header{gap:6px;padding-left:8px;padding-right:8px}}
/* Oct 29: fit any phone, including large system text sizes: nothing may make the page wider than the screen */
html,body{width:100%;overflow:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
.app{width:100%;max-width:520px}
header{min-width:0}
header .hbtn{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (max-width:340px){header .who small{display:none}header .hbtn{padding:4px 6px;font-size:10.5px}header b{font-size:14px}}