:root{--teal:#0d7d6c;--teal-dark:#0a5f53;--teal-light:#e3f2ee;--teal-pale:#f0faf7;--ink:#23272a;--ink-soft:#5b6367;--ink-faint:#9aa3a7;--bg:#f6f3ee;--card:#fff;--bubble-in:#fff;--bubble-out:#d7f0e8;--hairline:#e7e2d9;--amber:#b7791f;--amber-bg:#fdf3e0;--red:#c0392b;--red-bg:#fbeae7;--green:#1e8e5a;--green-bg:#e6f4ec;--gray:#8a9296;--gray-bg:#eef0f1;--radius:14px;--nav-h:64px;--shadow:0 8px 28px #14282424}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%}body{color:var(--ink);overscroll-behavior-y:none;background:#e9e4da;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}#root{justify-content:center;min-height:100dvh;display:flex}.app-frame{background:var(--bg);flex-direction:column;width:100%;max-width:480px;min-height:100dvh;display:flex;position:relative;box-shadow:0 0 40px #1428241f}.hdr{z-index:30;background:var(--teal);color:#fff;padding:calc(10px + env(safe-area-inset-top)) 14px 10px;align-items:center;gap:10px;display:flex;position:sticky;top:0}.hdr .ttl{letter-spacing:.2px;flex:1;min-width:0;font-size:19px;font-weight:700}.hdr .sub{opacity:.85;white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.hdr button.iconbtn{color:#fff;cursor:pointer;background:0 0;border:0;border-radius:10px;padding:6px;font-size:22px}.hdr .brand{align-items:center;gap:9px;display:flex}.hdr .brand img{border-radius:8px;width:32px;height:32px}.chat-hdr{z-index:30;background:var(--teal-dark);color:#fff;padding:calc(8px + env(safe-area-inset-top)) 8px 8px;align-items:center;gap:4px;display:flex;position:sticky;top:0}.chat-hdr .who{text-align:left;color:#fff;cursor:pointer;background:0 0;border:0;border-radius:10px;flex:1;align-items:center;gap:10px;min-width:0;padding:4px;display:flex}.chat-hdr .nm{white-space:nowrap;text-overflow:ellipsis;font-size:16.5px;font-weight:700;overflow:hidden}.chat-hdr .st{opacity:.85;font-size:12px}.bnav{z-index:30;height:calc(var(--nav-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--card);border-top:1px solid var(--hairline);display:flex;position:sticky;bottom:0}.bnav a{color:var(--ink-faint);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:3px;font-size:10.5px;font-weight:600;text-decoration:none;display:flex}.bnav a svg{width:24px;height:24px}.bnav a.active{color:var(--teal)}.bnav a.active svg{stroke:var(--teal)}.content{-webkit-overflow-scrolling:touch;flex-direction:column;flex:1;min-height:0;display:flex;overflow-y:auto}.row{background:var(--card);border-bottom:1px solid var(--hairline);text-align:left;width:100%;font:inherit;color:inherit;cursor:pointer;border-top:0;border-left:0;border-right:0;align-items:center;gap:12px;padding:11px 14px;display:flex}.row .main{flex:1;min-width:0}.row .t1{align-items:center;gap:6px;font-size:16px;font-weight:650;display:flex}.row .t2{color:var(--ink-soft);white-space:nowrap;text-overflow:ellipsis;margin-top:2px;font-size:13.5px;overflow:hidden}.row .side{flex-direction:column;align-items:flex-end;gap:4px;display:flex}.row .ts{color:var(--ink-faint);font-size:11.5px}.unread{background:var(--teal);color:#fff;border-radius:10px;justify-content:center;align-items:center;min-width:20px;height:20px;padding:0 6px;font-size:11.5px;font-weight:700;display:inline-flex}.avatar{color:#fff;border-radius:50%;flex:none;justify-content:center;align-items:center;width:50px;height:50px;font-size:19px;font-weight:700;display:flex}.avatar.sm{width:38px;height:38px;font-size:15px}.elly-badge{background:var(--teal);color:#fff;letter-spacing:.4px;border-radius:8px;padding:2px 7px;font-size:10px;font-weight:800}.pin-ic{color:var(--ink-faint);font-size:13px}.chipbar{gap:8px;padding:10px 14px 4px;display:flex}.chip{border:1px solid var(--hairline);background:var(--card);color:var(--ink-soft);cursor:pointer;border-radius:18px;padding:7px 14px;font-size:13.5px;font-weight:600}.chip.on{background:var(--teal);border-color:var(--teal);color:#fff}.searchbar{padding:8px 14px 10px}.searchbar input{border:1px solid var(--hairline);background:var(--card);border-radius:22px;outline:none;width:100%;padding:10px 16px;font-size:14.5px}.searchbar input:focus{border-color:var(--teal)}.btn{background:var(--teal);color:#fff;cursor:pointer;border:0;border-radius:12px;justify-content:center;align-items:center;gap:8px;width:100%;padding:13px 18px;font-size:15.5px;font-weight:700;display:inline-flex}.btn:disabled{opacity:.55;cursor:default}.btn.secondary{background:var(--card);color:var(--teal);border:1.5px solid var(--teal)}.btn.danger{background:var(--red)}.btn.ghost{color:var(--teal);background:0 0;width:auto;padding:8px 12px}.btn.sm{border-radius:10px;width:auto;padding:9px 14px;font-size:14px}.field{margin:12px 0}.field label{color:var(--ink-soft);margin-bottom:6px;font-size:13px;font-weight:700;display:block}.field input,.field select,.field textarea{border:1.5px solid var(--hairline);background:var(--card);border-radius:12px;outline:none;width:100%;padding:12px 14px;font-family:inherit;font-size:15.5px}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--teal)}.field .hint{color:var(--ink-faint);margin-top:5px;font-size:12.5px}.card{background:var(--card);border-radius:var(--radius);margin:12px 14px;padding:14px;box-shadow:0 1px 3px #1428240f}.card h3{margin:0 0 8px;font-size:15.5px}.card p{color:var(--ink-soft);margin:6px 0;font-size:14px;line-height:1.5}.banner{border-radius:12px;margin:12px 14px;padding:11px 13px;font-size:13px;font-weight:600;line-height:1.45}.banner.demo{background:var(--amber-bg);color:#7a5200;border:1px dashed var(--amber)}.banner.info{background:var(--teal-light);color:var(--teal-dark)}.banner.warn{background:var(--red-bg);color:var(--red)}.scrim{z-index:80;background:#141c1a80;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.sheet{background:var(--bg);width:100%;max-width:480px;max-height:88dvh;padding:10px 16px calc(20px + env(safe-area-inset-bottom));border-radius:20px 20px 0 0;animation:.22s ease-out rise;overflow-y:auto}.sheet.centered{border-radius:20px;align-self:center;margin:0 18px}@keyframes rise{0%{opacity:.6;transform:translateY(24px)}to{opacity:1;transform:none}}.grab{background:#d8d2c6;border-radius:3px;width:44px;height:5px;margin:6px auto 12px}.sheet h2{margin:4px 0 10px;font-size:18px}.opt{border:0;border-bottom:1px solid var(--hairline);width:100%;font:inherit;cursor:pointer;text-align:left;color:var(--ink);background:0 0;align-items:center;gap:12px;padding:14px 6px;font-size:15.5px;display:flex}.opt .e{text-align:center;width:30px;font-size:20px}.opt.danger{color:var(--red)}.toasts{bottom:calc(var(--nav-h) + 18px);z-index:120;pointer-events:none;flex-direction:column;align-items:center;gap:8px;display:flex;position:fixed;left:0;right:0}.toast{color:#fff;text-align:center;max-width:90%;box-shadow:var(--shadow);background:#2b3230;border-radius:24px;padding:11px 18px;font-size:13.5px;font-weight:600;animation:.2s ease-out rise}.toast.ok{background:var(--teal-dark)}.toast.err{background:var(--red)}.chat-scroll{flex-direction:column;flex:1;gap:2px;padding:12px 10px 8px;display:flex;overflow-y:auto}.daydiv{color:var(--ink-soft);background:#e8e2d6;border-radius:10px;align-self:center;margin:10px 0 6px;padding:5px 12px;font-size:11.5px;font-weight:600}.msgrow{margin:1px 0;display:flex}.msgrow.me{justify-content:flex-end}.msgrow.them{justify-content:flex-start}.bubble{word-wrap:break-word;overflow-wrap:anywhere;border-radius:12px;max-width:78%;padding:8px 10px 6px;font-size:15px;line-height:1.42;position:relative}.msgrow.me .bubble{background:var(--bubble-out);border-top-right-radius:3px}.msgrow.them .bubble{background:var(--bubble-in);border-top-left-radius:3px;box-shadow:0 1px 1px #00000012}.bubble .sender{color:var(--teal-dark);margin-bottom:2px;font-size:12.5px;font-weight:800}.bubble .meta{color:var(--ink-faint);float:right;justify-content:flex-end;align-items:center;gap:4px;margin-top:3px;margin-left:8px;font-size:10.5px;display:flex}.ticks{letter-spacing:-2px;color:var(--ink-faint);font-size:13px}.ticks.read{color:#2fa4e0}.bubble a{color:var(--teal-dark)}.reacts{gap:4px;margin-top:4px;display:flex}.react{border:1px solid var(--hairline);background:#ffffffbf;border-radius:12px;padding:1px 7px;font-size:13px}.replyctx{border-left:3px solid var(--teal);color:var(--ink-soft);background:#0d7d6c14;border-radius:6px;margin-bottom:6px;padding:5px 8px;font-size:12.5px}.replyctx b{color:var(--teal-dark);font-size:12px;display:block}.attimg{border-radius:8px;max-width:100%;margin-bottom:4px;display:block}.attfile{background:#0000000d;border-radius:8px;align-items:center;gap:10px;margin-bottom:4px;padding:9px 10px;font-size:13.5px;display:flex}.voice{align-items:center;gap:8px;min-width:200px;display:flex}.voice audio{width:100%;max-width:220px;height:34px}.typing{color:var(--teal-light);font-size:12.5px;font-style:italic}.pinbar{background:var(--amber-bg);color:#6d4c00;cursor:pointer;border-bottom:1px solid #ecd9ae;align-items:center;gap:8px;padding:8px 14px;font-size:13px;display:flex}.composer{padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--hairline);align-items:flex-end;gap:8px;display:flex;position:sticky;bottom:0}.composer .cbox{background:var(--card);border:1px solid var(--hairline);border-radius:24px;flex:1;align-items:center;padding:4px 6px 4px 14px;display:flex}.composer textarea{resize:none;font:inherit;background:0 0;border:0;outline:none;flex:1;max-height:120px;padding:8px 0;font-size:15px}.cbtn{cursor:pointer;color:var(--ink-soft);background:0 0;border:0;padding:7px;font-size:23px}.sendbtn{background:var(--teal);color:#fff;cursor:pointer;border:0;border-radius:50%;flex:none;justify-content:center;align-items:center;width:46px;height:46px;font-size:20px;display:flex}.sendbtn.rec{background:var(--red);animation:1.2s infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.65}}.replybar{background:var(--card);border-top:1px solid var(--hairline);align-items:center;gap:10px;padding:8px 12px;font-size:13px;display:flex}.emojibar{background:var(--card);border-top:1px solid var(--hairline);gap:6px;padding:10px 14px;display:flex;overflow-x:auto}.emojibar button{cursor:pointer;background:0 0;border:0;padding:4px;font-size:26px}.search-overlay{z-index:40;background:var(--bg);flex-direction:column;display:flex;position:absolute;inset:0}.fab{right:18px;bottom:calc(var(--nav-h) + 20px);background:var(--teal);color:#fff;cursor:pointer;width:58px;height:58px;box-shadow:var(--shadow);z-index:20;border:0;border-radius:50%;justify-content:center;align-items:center;font-size:30px;display:flex;position:absolute}.kv{border-bottom:1px solid var(--hairline);justify-content:space-between;gap:10px;padding:8px 0;font-size:14px;display:flex}.kv:last-child{border-bottom:0}.kv .k{color:var(--ink-soft)}.kv .v{text-align:right;font-weight:650}.badge{letter-spacing:.4px;border-radius:9px;padding:3px 9px;font-size:10.5px;font-weight:800}.badge.green{background:var(--green-bg);color:var(--green)}.badge.amber{background:var(--amber-bg);color:var(--amber)}.badge.red{background:var(--red-bg);color:var(--red)}.badge.gray{background:var(--gray-bg);color:var(--gray)}.badge.teal{background:var(--teal-light);color:var(--teal-dark)}.progress{background:var(--gray-bg);border-radius:4px;height:8px;margin-top:6px;overflow:hidden}.progress i{background:var(--teal);border-radius:4px;height:100%;display:block}.toggle{flex:none;width:46px;height:27px;position:relative}.toggle input{opacity:0;cursor:pointer;z-index:2;width:100%;height:100%;margin:0;position:absolute}.toggle .tr{background:#cfd6d9;border-radius:14px;transition:all .2s;position:absolute;inset:0}.toggle .th{background:#fff;border-radius:50%;width:21px;height:21px;transition:all .2s;position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #00000040}.toggle input:checked~.tr{background:var(--teal)}.toggle input:checked~.th{left:22px}.statgrid{grid-template-columns:1fr 1fr;gap:10px;margin:12px 14px;display:grid}.stat{background:var(--card);border-radius:var(--radius);padding:14px}.stat .n{color:var(--teal-dark);font-size:24px;font-weight:800}.stat .l{color:var(--ink-soft);margin-top:2px;font-size:12px}table.admin{border-collapse:collapse;width:100%;font-size:12.5px}table.admin th,table.admin td{text-align:left;border-bottom:1px solid var(--hairline);vertical-align:top;padding:8px 6px}table.admin th{color:var(--ink-soft);text-transform:uppercase;letter-spacing:.4px;font-size:11px}.tabs{gap:6px;padding:10px 14px 2px;display:flex;overflow-x:auto}.tabs button{border:1px solid var(--hairline);background:var(--card);white-space:nowrap;cursor:pointer;color:var(--ink-soft);border-radius:16px;padding:7px 13px;font-size:13px;font-weight:600}.tabs button.on{background:var(--teal-dark);color:#fff;border-color:var(--teal-dark)}.media-grid{grid-template-columns:repeat(3,1fr);gap:6px;padding:0 14px;display:grid}.media-grid img,.media-grid .mfile{aspect-ratio:1;object-fit:cover;background:var(--gray-bg);width:100%;color:var(--ink-soft);text-align:center;border-radius:8px;justify-content:center;align-items:center;padding:4px;font-size:11px;display:flex}.empty{text-align:center;color:var(--ink-faint);padding:48px 24px}.empty .big{margin-bottom:10px;font-size:44px}.spin{text-align:center;color:var(--ink-faint);padding:40px}.secttl{color:var(--ink-faint);text-transform:uppercase;letter-spacing:.6px;padding:16px 14px 4px;font-size:12.5px;font-weight:800}.linklike{color:var(--teal-dark);cursor:pointer;font-weight:700;font-size:inherit;background:0 0;border:0;padding:0;text-decoration:underline}.onboard{background:var(--bg);flex-direction:column;min-height:100dvh;padding:28px 22px;display:flex}.onboard .logo{border-radius:20px;width:76px;height:76px;margin-bottom:18px}.onboard h1{margin:0 0 6px;font-size:26px}.onboard p.lead{color:var(--ink-soft);margin:0 0 8px;font-size:15px;line-height:1.55}.steps{gap:6px;margin:18px 0 4px;display:flex}.steps i{background:var(--hairline);border-radius:2px;flex:1;height:4px}.steps i.on{background:var(--teal)}.demobox{border:2px dashed var(--amber);text-align:center;background:#fff8e6;border-radius:12px;margin:14px 0;padding:14px}.demobox .code{letter-spacing:6px;color:var(--teal-dark);margin-top:6px;font-size:30px;font-weight:800}
