:root{--brand:#3390ec;--active:#3390ec;--brand-d:#2481cc;--brand-soft:#e8f2fd;--ink:#000;--muted:#707579;--bg:#f4f4f5;--panel:#fff;--line:#e4e4e7;--chat:#a8c890;--in:#fff;--out1:#eeffde;--out2:#eeffde;--on-out:#000;--out-meta:#4fae4e;--out-soft:rgba(79,174,78,.14);--green:#4fae4e;--hover:#f4f4f5;--wall:radial-gradient(circle at 12% 18%,#dbddbb 0,transparent 55%),radial-gradient(circle at 88% 22%,#6ba587 0,transparent 55%),radial-gradient(circle at 80% 85%,#d5d88d 0,transparent 55%),radial-gradient(circle at 18% 88%,#88b884 0,transparent 55%),#a8c890;--pattern:#000;--pattern-o:.07;--shadow:0 4px 18px rgba(0,0,0,.12);--r:12px;--font:'Roboto',-apple-system,'Segoe UI',system-ui,sans-serif;--ease:cubic-bezier(.2,.8,.3,1);--tail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='17'%3E%3Cpath d='M11 0v17H3c-2 0-3-2-2-3 4-4 10-6 10-14z'/%3E%3C/svg%3E")}
:root[data-theme=dark]{--brand:#5eb5f7;--active:#2b5278;--brand-d:#4a9fe0;--brand-soft:#2b5278;--ink:#f5f5f5;--muted:#6d7f8f;--bg:#242f3d;--panel:#17212b;--line:#101921;--chat:#0e1621;--in:#182533;--out1:#2b5278;--out2:#2b5278;--on-out:#fff;--out-meta:#7da8d3;--out-soft:rgba(255,255,255,.12);--hover:#202b36;--wall:#0e1621;--pattern:#6ab3f3;--pattern-o:.035;--shadow:0 4px 18px rgba(0,0,0,.45)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--brand:#5eb5f7;--active:#2b5278;--brand-d:#4a9fe0;--brand-soft:#2b5278;--ink:#f5f5f5;--muted:#6d7f8f;--bg:#242f3d;--panel:#17212b;--line:#101921;--chat:#0e1621;--in:#182533;--out1:#2b5278;--out2:#2b5278;--on-out:#fff;--out-meta:#7da8d3;--out-soft:rgba(255,255,255,.12);--hover:#202b36;--wall:#0e1621;--pattern:#6ab3f3;--pattern-o:.035;--shadow:0 4px 18px rgba(0,0,0,.45)}}
/* custom scrollbars: thin brand-tinted thumb, no arrows, transparent track */
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-button{display:none}::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--muted) 45%,transparent);border-radius:999px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--muted) 75%,transparent);background-clip:padding-box}
@supports not selector(::-webkit-scrollbar){*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--muted) 45%,transparent) transparent}}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{font:400 15px/1.45 var(--font);background:var(--bg);color:var(--ink);overflow:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
img{max-width:100%}
.ms{font-family:'Material Symbols Rounded';font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24;-webkit-font-smoothing:antialiased;user-select:none}
.muted{color:var(--muted)}.mono{font-family:ui-monospace,Consolas,monospace;font-size:13px;word-break:break-all}.hint{color:var(--muted);font-size:13px}.err{color:#e0431f;font-size:14px;min-height:0}.err:empty{display:none}
.only-mobile{display:none}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}

/* ---- buttons ---- */
.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--muted);flex:none;transition:background .2s,transform .25s var(--ease)}
.icon-btn:hover{background:var(--hover)}.icon-btn:active{transform:scale(.9)}.icon-btn svg,.icon-btn img{width:22px;height:22px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 22px;border-radius:10px;font-weight:500;font-size:15px;white-space:nowrap;transition:transform .25s var(--ease),background .2s,box-shadow .2s}
.btn:hover{transform:translateY(-1px)}.btn:active{transform:scale(.97)}.btn[disabled]{opacity:.5;pointer-events:none}
.btn.filled{background:var(--brand);color:#fff;box-shadow:none}.btn.filled:hover{background:var(--brand-d)}
.btn.tonal{background:var(--brand-soft);color:var(--brand)}
:root[data-theme=dark] .btn.tonal{color:#fff}
.btn.outlined{border:2px solid var(--line);color:var(--ink)}.btn.text{color:var(--brand)}
.btn.outlined-light{border:2px solid rgba(255,255,255,.4);color:#fff}
.btn.sm{height:36px;padding:0 16px;font-size:14px}.btn.lg{height:54px;padding:0 30px;font-size:17px}
.btn svg{width:18px;height:18px}.btn .ms{font-size:20px}
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:999px;background:var(--brand-soft);color:var(--brand-d);font-weight:700;font-size:13px}.chip.green{background:rgba(79,174,78,.16);color:#3a9a39}.chip.sm{height:20px;padding:0 8px;font-size:11px}
.bot-badge{display:inline-block;padding:1px 5px;border-radius:5px;background:var(--brand-soft);color:var(--brand);font-size:10px;font-weight:700;letter-spacing:.5px;vertical-align:middle}
.av{display:inline-grid;place-items:center;border-radius:50%;color:#fff;font-weight:500;object-fit:cover;flex:none;background:var(--brand)}
.av.saved{width:54px;height:54px;background:linear-gradient(#72d5fd,#2a9ef1)}.av.saved .ms{font-size:28px}
.field{display:grid;gap:6px;font-size:13px;font-weight:700;color:var(--muted)}
.field input,.field textarea,.field select{padding:13px 16px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-weight:500;font-size:15px;width:100%;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--brand)}.field small{font-weight:500}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.col{display:grid;gap:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;display:grid;gap:12px;margin-bottom:14px}
.code,pre.code{background:var(--ink);color:#e8eef3;border-radius:10px;padding:14px;font:12.5px/1.55 ui-monospace,Consolas,monospace;overflow:auto;white-space:pre;max-height:340px}
:root[data-theme=dark] .code{background:#0e1621}
.empty{display:grid;justify-items:center;gap:8px;text-align:center;padding:40px 20px;color:var(--muted)}.empty h3{color:var(--ink);font-size:20px}.empty.small{padding:20px}
.snackbar{position:fixed;left:50%;bottom:30px;transform:translate(-50%,140%);background:rgba(0,0,0,.78);color:#fff;padding:12px 20px;border-radius:10px;font-weight:600;z-index:100;transition:transform .4s var(--ease);max-width:90vw;visibility:hidden;opacity:0;transition:transform .3s var(--ease),opacity .2s,visibility 0s .3s}.snackbar.show{transform:translate(-50%,0);visibility:visible;opacity:1;transition:transform .3s var(--ease),opacity .2s}

/* ---- dialog ---- */
.dialog{margin:auto;border:0;border-radius:14px;padding:0;background:var(--panel);color:var(--ink);width:min(440px,94vw);max-height:90dvh;box-shadow:var(--shadow);overflow:auto}.dialog.wide{width:min(620px,96vw)}
.dialog::backdrop{background:rgba(0,0,0,.35)}
.dlg{padding:22px;display:grid;gap:14px}.dlg-head{display:flex;align-items:center;justify-content:space-between}.h2,.dlg-head h2{font-size:20px;font-weight:500}
.dlg-actions{display:flex;justify-content:flex-end;gap:8px}
.menu-list{display:grid;gap:4px}.menu-list button{display:flex;align-items:center;gap:14px;padding:14px;border-radius:10px;font-weight:500;text-align:left}.menu-list button:hover{background:var(--hover)}
.dialog.viewer-d{background:transparent;box-shadow:none;width:96vw;max-width:96vw;overflow:visible}.viewer{display:grid;justify-items:center}.viewer img{max-height:88dvh;border-radius:14px}.viewer .icon-btn{position:fixed;top:14px;right:14px;background:rgba(0,0,0,.5);color:#fff}

/* ---- app shell ---- */
#landing{display:none;height:100%;overflow:auto}
body[data-mode=landing] #landing{display:block}body[data-mode=landing] #shell,body[data-mode=landing] #drawer,body[data-mode=landing] #scrim{display:none}
#shell{display:grid;grid-template-columns:400px minmax(0,1fr);height:100dvh}
#side{display:flex;flex-direction:column;background:var(--panel);border-right:1px solid var(--line);min-height:0;position:relative}
.side-head{display:flex;align-items:center;gap:8px;padding:10px 12px}
.search{flex:1;display:flex;align-items:center;gap:8px;height:42px;padding:0 14px;border-radius:22px;background:var(--bg);border:2px solid transparent;color:var(--muted)}.search:focus-within{border-color:var(--brand);background:var(--panel)}
.search input{flex:1;border:0;background:none;outline:none;min-width:0;color:var(--ink)}.search.big{height:52px;margin-bottom:14px;background:var(--panel);border-color:var(--line)}
.tabs{display:flex;gap:0;padding:0 8px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}.tabs button{flex:none;padding:12px 14px 10px;border-radius:10px 10px 0 0;font-weight:500;position:relative;font-size:14px;color:var(--muted);display:flex;gap:6px;align-items:center}
.tabs button:hover{background:var(--hover)}.tabs button.on{color:var(--brand)}.tabs button.on::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--brand)}.tabs button i{font-style:normal;background:var(--muted);color:#fff;border-radius:10px;min-width:18px;height:18px;font-size:11px;display:grid;place-items:center;padding:0 5px}
#list{flex:1;overflow:auto;padding:6px 8px 90px}
.ci{display:flex;gap:10px;align-items:center;padding:9px;border-radius:12px;transition:background .15s}.ci:hover{background:var(--hover)}.ci.active{background:var(--active);color:#fff}
.ci-main{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:3px}.ci-top,.ci-bot{min-width:0}.ci-top,.ci-bot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ci-top b{font-size:16px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.ci-top time{font-size:12px;color:var(--muted);flex:none}
.prev{color:var(--muted);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ci.active .prev,.ci.active time{color:rgba(255,255,255,.85)}
.badge{font-style:normal;flex:none;min-width:22px;height:22px;border-radius:11px;background:var(--green);color:#fff;font-size:12px;font-weight:500;display:grid;place-items:center;padding:0 6px}.ci.active .badge{background:#fff;color:var(--brand)}
.list-sep{padding:14px 12px 6px;font-size:14px;font-weight:500;color:var(--muted)}
.list-empty{padding:40px 20px;text-align:center;color:var(--muted)}.list-empty a{color:var(--brand);font-weight:700}
.anon{display:grid;justify-items:center;gap:8px;text-align:center;padding:24px 20px 6px}.anon p{color:var(--muted);font-size:14px}
.fab{position:absolute;right:20px;bottom:20px;width:56px;height:56px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.25);transition:background .2s}.fab:hover{background:var(--brand-d)}
#pane{min-width:0;min-height:0;height:100dvh;overflow:auto;background:var(--wall);position:relative;outline:none}
.welcome{height:100%;display:grid;place-items:center}

/* ---- pages ---- */
.page{max-width:720px;margin:0 auto;padding:18px 18px 60px;background:var(--bg);min-height:100%}
.page-head{display:flex;align-items:center;gap:10px;margin-bottom:16px}.page-head h1{font-size:22px;font-weight:500}.page-head p{color:var(--muted);font-size:14px}
.row-card{display:flex;align-items:center;gap:14px;padding:12px;border-radius:12px;background:var(--panel);border:1px solid var(--line);margin-bottom:8px;transition:background .15s}.row-card:hover{background:var(--hover)}
.rc-main{flex:1;min-width:0;display:grid;gap:2px}.rc-main small{color:var(--muted)}.rc-about{color:var(--muted);font-size:13.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.coin-card{display:grid;gap:10px;padding:16px;border-radius:12px;background:var(--brand-soft);border:1px solid var(--line)}.coin-card.wide{margin-bottom:12px}
.mrow{display:flex;align-items:center;gap:12px;padding:8px 6px;border-radius:10px}.mrow:hover{background:var(--hover)}.mrow small{display:block;color:var(--muted)}
.prof{display:grid;justify-items:center;gap:10px;padding:30px 0}.prof h2{font-size:26px}

/* ---- chat ---- */
.chat{display:flex;flex-direction:column;height:100dvh;background:var(--wall);position:relative}
.chat::before{content:"";position:absolute;inset:0;opacity:var(--pattern-o);pointer-events:none;background:var(--pattern);-webkit-mask-image:var(--doodle);mask-image:var(--doodle);--doodle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='20' cy='22' r='8'/%3E%3Cpath d='M70 18l10 14M82 18L68 32'/%3E%3Cpath d='M20 80c6-8 14-8 20 0'/%3E%3Cpath d='M78 84a10 10 0 1 0 20 0 10 10 0 1 0-20 0'/%3E%3C/g%3E%3C/svg%3E")}
.chat-head{display:flex;align-items:center;gap:6px;padding:6px 12px;min-height:56px;background:var(--panel);box-shadow:0 1px 3px rgba(0,0,0,.08);z-index:2}
.head-main{display:flex;align-items:center;gap:12px;flex:1;min-width:0;text-align:left;border-radius:14px;padding:2px 6px}.head-main:hover{background:transparent}
.head-text{display:grid;min-width:0}.head-text b{font-size:16px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sub{font-size:13px;color:var(--muted)}
.scroller{flex:1;overflow:auto;padding:12px 14px;position:relative;z-index:1;scroll-behavior:auto}
.msgs{display:flex;flex-direction:column;max-width:728px;margin:0 auto;gap:2px}
.day{display:grid;place-items:center;margin:14px 0 8px}.day span{background:rgba(0,0,0,.22);color:#fff;padding:3px 10px;border-radius:999px;font-size:14px;font-weight:500}
.unread-line{margin:10px -14px;padding:4px;text-align:center;background:var(--panel);color:var(--muted);font-size:14px;font-weight:500;opacity:.92}
.msg{display:flex;align-items:flex-end;gap:8px;position:relative;margin-top:2px;padding-right:46px}.msg.first{margin-top:8px}.msg.mine{justify-content:flex-end;padding-right:0;padding-left:46px}
.msg.sys{justify-content:center;padding:0}.msg.sys span{font-size:13px;color:#fff;background:rgba(0,0,0,.22);border-radius:999px;padding:2px 10px}
.av-slot{width:34px;flex:none;align-self:flex-end}
.bub{background:var(--in);padding:6px 9px 6px 10px;border-radius:15px;max-width:min(480px,100%);box-shadow:0 1px 2px rgba(16,35,47,.15);position:relative;min-width:60px;font-size:15.5px;animation:pop .2s var(--ease)}
.msg.last .bub::after{content:"";position:absolute;bottom:0;width:11px;height:17px;background:inherit;-webkit-mask:var(--tail) no-repeat;mask:var(--tail) no-repeat}
.msg.last:not(.mine) .bub{border-bottom-left-radius:0}.msg.last:not(.mine) .bub::after{left:-10px}
.msg.last.mine .bub{border-bottom-right-radius:0}.msg.last.mine .bub::after{right:-10px;transform:scaleX(-1)}
.msg.stick .bub::after{display:none}
@keyframes pop{from{transform:translateY(6px);opacity:0}}
.msg:not(.last):not(.mine) .bub{border-bottom-left-radius:6px}.msg:not(.first):not(.mine) .bub{border-top-left-radius:6px}
.msg.mine .bub{background:var(--out1);color:var(--on-out)}.msg.mine .meta,.msg.mine .tick{color:var(--out-meta);opacity:1}.msg.mine:not(.last) .bub{border-bottom-right-radius:6px}.msg.mine:not(.first) .bub{border-top-right-radius:6px}
.msg.stick .bub{background:none;box-shadow:none;padding:2px}.msg.stick .meta{position:static;display:block;text-align:right;color:var(--muted)}
.sticker{display:block;border-radius:18px}
.who{display:block;font-weight:500;font-size:14.5px;margin-bottom:1px}
.pic{display:block;margin:-2px -5px 4px -6px}.pic img{display:block;border-radius:12px;width:100%;max-height:420px;object-fit:cover}
.txt{white-space:normal;overflow-wrap:anywhere}.txt a{text-decoration:none;color:var(--brand)}.msg.mine .txt a{color:var(--out-meta)}
.meta{float:right;margin:8px 0 -4px 10px;font-size:12px;color:var(--muted);display:inline-flex;gap:3px;align-items:center;white-space:nowrap}
.tick{font-size:16px!important}
.quote{display:grid;text-align:left;border-left:3px solid var(--brand);background:color-mix(in srgb,var(--brand) 10%,transparent);color:inherit;padding:4px 10px;border-radius:8px;margin-bottom:5px;width:100%;font-size:13.5px}.quote b{color:var(--brand);font-weight:500}.quote span{opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg.mine .quote{border-left-color:var(--out-meta);background:var(--out-soft)}.msg.mine .quote b{color:var(--out-meta)}
.rxs{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;clear:both}
.rx{display:inline-flex;gap:4px;align-items:center;padding:2px 8px 2px 6px;border-radius:999px;background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand);font-size:14px}.rx b{font-size:13px;font-weight:500}.rx.mine{background:var(--brand);color:#fff}
.msg.mine .rx{background:var(--out-soft);color:var(--out-meta)}.msg.mine .rx.mine{background:var(--out-meta);color:var(--out1)}
.tools{display:none;position:absolute;top:-14px;right:0;gap:2px;background:var(--panel);border-radius:999px;box-shadow:var(--shadow);padding:2px 4px;z-index:3}.msg.mine .tools{right:auto;left:0}
.msg:hover .tools,.msg.sel .tools{display:flex}.tools button{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;color:var(--muted)}.tools button:hover{background:var(--hover);color:var(--brand)}.tools .ms{font-size:19px}
.rxmenu{position:absolute;top:-52px;left:44px;display:flex;gap:2px;background:var(--panel);border-radius:999px;padding:5px 8px;box-shadow:var(--shadow);z-index:5;animation:pop .2s var(--ease)}.rxmenu button{font-size:22px;padding:2px 4px;border-radius:50%;transition:transform .15s}.rxmenu button:hover{transform:scale(1.3)}
.msg.flash .bub{animation:flash 1.2s}@keyframes flash{30%{box-shadow:0 0 0 4px var(--brand)}}
.jump{position:absolute;right:18px;bottom:84px;z-index:4;width:46px;height:46px;border-radius:50%;background:var(--panel);box-shadow:var(--shadow);display:grid;place-items:center;color:var(--brand)}.jump b{position:absolute;top:-6px;right:-4px;background:var(--brand);color:#fff;border-radius:10px;font-size:11px;min-width:20px;height:20px;display:grid;place-items:center;padding:0 5px}.jump b:empty{display:none}
#composer{position:relative;z-index:3;background:transparent}
.compose{display:flex;align-items:flex-end;gap:8px;padding:6px 14px 14px;max-width:756px;margin:0 auto}
.inputwrap{flex:1;display:flex;align-items:flex-end;background:var(--panel);border-radius:16px 16px 0 16px;box-shadow:0 1px 2px rgba(16,35,47,.15);padding:0 4px 0 12px;position:relative}.inputwrap::after{content:"";position:absolute;right:-10px;bottom:0;width:11px;height:17px;background:var(--panel);transform:scaleX(-1);-webkit-mask:var(--tail) no-repeat;mask:var(--tail) no-repeat}.compose>#attach{background:var(--panel);width:54px;height:54px;color:var(--muted);box-shadow:0 1px 2px rgba(16,35,47,.15)}
.inputwrap textarea{flex:1;border:0;background:none;outline:none;resize:none;padding:11px 0;max-height:160px;line-height:1.4;color:var(--ink);min-width:0}
.send{width:54px;height:54px;border-radius:50%;background:var(--panel);color:var(--brand);display:grid;place-items:center;flex:none;margin-left:6px;box-shadow:0 1px 2px rgba(16,35,47,.15);transition:transform .2s var(--ease),background .2s}.send:hover{background:var(--brand);color:#fff}.send:active{transform:scale(.9)}
.bar{display:flex;align-items:center;gap:10px;padding:6px 14px;max-width:600px;margin:0 auto;background:var(--panel);border-radius:12px 12px 0 0;color:var(--brand)}.bar-text{flex:1;min-width:0;display:grid;font-size:13.5px}.bar-text b{color:var(--brand)}.bar-text span{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar[hidden]{display:none}
.join-bar{display:flex;justify-content:center;align-items:center;gap:8px;padding:8px 14px 16px}.join-bar .btn{min-width:min(420px,100%);height:52px;border-radius:14px;background:var(--panel);color:var(--brand);text-transform:uppercase;letter-spacing:.3px;box-shadow:0 1px 2px rgba(16,35,47,.15)}.join-bar .btn:hover{background:var(--hover)}.join-bar.muted{background:var(--panel);margin:0 auto 16px;max-width:420px;border-radius:14px;padding:14px}.join-bar.muted{color:var(--muted)}
.panel{height:260px;max-width:728px;margin:0 auto 12px;border-radius:12px;box-shadow:var(--shadow);overflow:auto;padding:6px 10px 10px;background:var(--panel)}.panel[hidden]{display:none}
.tabs2{display:flex;gap:6px;padding:4px 0 8px;position:sticky;top:0;background:var(--panel)}.tabs2 button{padding:6px 14px;border-radius:999px;font-weight:700;color:var(--muted)}.tabs2 button.on{background:var(--brand-soft);color:var(--brand)}
.grid-emoji{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:2px}.grid-emoji button{font-size:26px;padding:6px;border-radius:12px}.grid-emoji button:hover{background:var(--hover)}
.grid-stk{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}.grid-stk button{border-radius:14px;padding:4px}.grid-stk button:hover{background:var(--hover)}.grid-stk img{width:100%;display:block}
.stage{background:var(--bg);border-radius:18px;min-height:150px;display:grid;place-items:center;padding:8px;overflow:hidden}.canvas-wrap canvas{max-width:100%;max-height:44dvh;border-radius:12px;display:block}
.drop{display:grid;justify-items:center;gap:4px;padding:28px;border:2px dashed var(--line);border-radius:18px;width:100%;color:var(--muted)}.drop .ms{font-size:40px;color:var(--brand)}.drop b{color:var(--ink)}
.tpls{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px}.tpl{flex:none;width:74px;height:74px;border-radius:14px;overflow:hidden;border:3px solid transparent}.tpl img{width:100%;height:100%;object-fit:cover;display:block}.tpl:hover{border-color:var(--brand)}
.info-top{display:flex;align-items:center;gap:16px}.info-top h3{font-size:20px;font-weight:500}.about{color:var(--ink);opacity:.85}.sect{font-size:15px;font-weight:500;color:var(--brand);margin-top:4px}.mlist{display:grid;gap:2px;max-height:240px;overflow:auto}

/* ---- drawer ---- */
#scrim{position:fixed;inset:0;background:rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .25s;z-index:60}
#drawer{position:fixed;top:0;bottom:0;left:0;width:min(320px,86vw);background:var(--panel);transform:translateX(-102%);transition:transform .32s var(--ease);z-index:61;display:flex;flex-direction:column;box-shadow:var(--shadow);overflow:auto}
body.drawer-open #scrim{opacity:1;pointer-events:auto}body.drawer-open #drawer{transform:none}
.dr-top{display:grid;gap:4px;justify-items:start;padding:22px 20px 14px;background:#419fd9;color:#fff}:root[data-theme=dark] .dr-top{background:#232e3c}.dr-top small{opacity:.85}.dr-top b{font-size:16px;font-weight:500}
.dr-top .btn.filled{background:#fff;color:var(--brand);box-shadow:none}
.dr-nav{display:grid;padding:8px;flex:1}.dr-nav a,.dr-nav button{display:flex;align-items:center;gap:22px;padding:11px 14px;border-radius:10px;font-weight:500;text-align:left;color:var(--ink)}.dr-nav a:hover,.dr-nav button:hover{background:var(--hover)}.dr-nav .ms{color:var(--muted)}
.dr-foot{display:flex;gap:6px;padding:12px 16px;border-top:1px solid var(--line)}

/* ---- landing ---- */
.land{background:radial-gradient(1200px 600px at 80% -10%,#d7ecfd 0,transparent 60%),var(--panel);min-height:100%;color:var(--ink)}
:root[data-theme=dark] .land{background:radial-gradient(1200px 600px at 80% -10%,#1d3a57 0,transparent 60%),var(--chat)}
.l-nav{display:flex;align-items:center;gap:20px;padding:16px clamp(16px,5vw,64px);max-width:1280px;margin:0 auto}
.l-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:22px;letter-spacing:-.5px;color:var(--ink)}.l-nav nav{display:flex;gap:6px;margin-left:12px}.l-nav nav a{padding:8px 14px;border-radius:999px;font-weight:600;color:var(--muted)}.l-nav nav a:hover{background:var(--hover);color:var(--brand)}
.l-actions{margin-left:auto;display:flex;align-items:center;gap:6px}
.l-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;max-width:1280px;margin:0 auto;padding:30px clamp(16px,5vw,64px) 70px}
.l-pill{display:inline-block;background:var(--brand-soft);color:var(--brand);font-weight:500;font-size:13px;padding:6px 14px;border-radius:999px;letter-spacing:.3px}.l-pill.dark{background:rgba(255,255,255,.16);color:#fff}
.l-copy h1{font-size:clamp(42px,6.4vw,84px);line-height:1;letter-spacing:-2px;font-weight:700;margin:16px 0}.l-copy h1 em{font-style:normal;color:var(--brand)}
.l-copy p{font-size:clamp(17px,2vw,21px);color:var(--muted);max-width:34em}
.l-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.l-stats{display:flex;gap:28px;margin-top:30px;color:var(--muted)}.l-stats b{color:var(--ink);font-size:24px;font-weight:700;margin-right:4px}
.l-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1280px;margin:0 auto;padding:0 clamp(16px,5vw,64px) 60px}
.l-grid article{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;display:grid;gap:8px;align-content:start;transition:transform .25s var(--ease),box-shadow .25s}.l-grid article:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.l-grid i{width:52px;height:52px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-size:28px}.l-grid h3{font-size:19px;font-weight:500}.l-grid p{color:var(--muted)}
.l-coin{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;max-width:1180px;margin:0 auto 60px;padding:44px clamp(20px,4vw,56px);border-radius:24px;background:linear-gradient(135deg,#37b3f0,#1d82c4);color:#fff;width:calc(100% - 2 * clamp(16px,5vw,64px))}
.l-coin h2{font-size:clamp(40px,6vw,72px);font-weight:700;letter-spacing:-2px;margin:10px 0 4px}.l-coin p{opacity:.9}.l-coin .btn.filled{background:#fff;color:var(--brand)}
.ca-box{background:rgba(0,0,0,.24);border-radius:24px;padding:20px;display:grid;gap:10px}.ca-box small{font-weight:800;letter-spacing:2px;opacity:.8}.ca-box code{font:600 15px/1.4 ui-monospace,Consolas,monospace;word-break:break-all}.ca-box .btn{justify-self:start}
.l-foot{display:flex;gap:20px;justify-content:center;padding:24px;color:var(--muted);font-weight:600}.l-foot span{font-weight:700;color:var(--brand)}

/* ---- landing phone: the real chat styles in a straight phone frame ---- */
.phone{width:min(360px,100%);margin:0 auto;border-radius:46px;background:var(--wall);border:11px solid #0b0d10;box-shadow:0 0 0 1px #2a2f36,0 40px 80px rgba(16,35,47,.28);overflow:hidden;display:grid;grid-template-rows:auto 1fr auto;height:710px;position:relative}
.phone-head{display:flex;align-items:center;gap:10px;padding:14px 12px 10px;background:var(--panel);box-shadow:0 1px 3px rgba(0,0,0,.08);position:relative;z-index:2}.phone-head>.ms{color:var(--muted);font-size:22px}.phone-head .head-text{flex:1}.phone-head b{font-size:15px;font-weight:500}
.phone-chat{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:10px 10px 4px}
.phone-chat::before{content:"";position:absolute;inset:0;opacity:var(--pattern-o);background:var(--pattern);-webkit-mask-image:var(--doodle);mask-image:var(--doodle);--doodle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='20' cy='22' r='8'/%3E%3Cpath d='M70 18l10 14M82 18L68 32'/%3E%3Cpath d='M20 80c6-8 14-8 20 0'/%3E%3Cpath d='M78 84a10 10 0 1 0 20 0 10 10 0 1 0-20 0'/%3E%3C/g%3E%3C/svg%3E")}
.phone .msgs{position:relative;z-index:1;width:100%}.phone .msg.first{margin-top:6px}.phone .msg{padding-right:28px}.phone .msg.mine{padding-left:40px;padding-right:0}.phone .bub{font-size:14.5px;animation:none}
.phone .pic img{max-height:none;width:210px;height:auto}.phone .bub{max-width:240px}.phone .msg.mine .bub{max-width:220px}.phone .sticker{width:112px}.phone .av-slot{width:34px}
.lm{opacity:0;transform:translateY(12px);transition:opacity .35s ease,transform .35s ease}.lm.on{opacity:1;transform:none}
.phone-in{display:flex;align-items:center;gap:8px;padding:6px 10px 14px;position:relative;z-index:1}.phone-in>.ms{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:var(--panel);color:var(--muted);box-shadow:0 1px 2px rgba(16,35,47,.15)}
.pi-box{flex:1;display:flex;justify-content:space-between;align-items:center;height:42px;padding:0 12px;border-radius:14px;background:var(--panel);color:var(--muted);box-shadow:0 1px 2px rgba(16,35,47,.15)}
.pi-send{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:var(--brand);color:#fff}.pi-send .ms{font-size:20px}

/* ---- mobile ---- */
@media(max-width:860px){
  #shell{display:block}#side,#pane{height:100dvh;width:100%}
  body[data-view=pane] #side{display:none}body[data-view=list] #pane{display:none}
  .only-mobile{display:inline-grid}.msg{padding-right:20px}.msg.mine{padding-left:20px}
  .l-hero{grid-template-columns:1fr}.phone{height:690px}.l-grid{grid-template-columns:1fr}.l-coin{grid-template-columns:1fr}.l-nav nav{display:none}.l-nav{gap:8px}.l-actions{gap:0}.l-actions .btn{padding:0 14px}.l-brand{font-size:19px;min-width:0}
  .page{padding-top:10px}.tools{display:none!important}.msg.sel .tools{display:flex!important}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}

/* ---- profile, photos, info rows ---- */
.av-edit{position:relative;display:inline-grid;place-items:center;border-radius:50%;cursor:pointer;flex:none}
.av-edit .cam{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.35);color:#fff;opacity:0;transition:opacity .2s}
.av-edit .cam .ms{font-size:34px}.av-edit:hover .cam,.av-edit:focus-within .cam{opacity:1}
.av-edit.big .cam{opacity:.0}.av-edit.big:hover .cam{opacity:1}
.av-edit.busy .cam{opacity:1}.av-edit.busy .cam .ms{display:none}.av-edit.busy .cam::after{content:"";width:36px;height:36px;border-radius:50%;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pick-photo{display:grid;place-items:center;padding:4px 0 6px}
.prof-card{justify-items:center;text-align:center;gap:8px;padding:28px 20px}.prof-card h2{font-size:22px;font-weight:500}
.at-input{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;background:var(--panel);padding-left:14px}.at-input b{color:var(--muted);font-weight:500}.at-input:focus-within{border-color:var(--brand)}
.field .at-input input{border:0;padding-left:4px}.field .at-input input:focus{outline:none}
.field input:focus,.field textarea:focus{border-color:var(--brand)}
.info-rows{gap:0;padding:8px}.info-rows>div,.info-rows>button,.link-row{display:flex;align-items:center;gap:22px;padding:10px 12px;border-radius:10px;text-align:left;width:100%}
.info-rows>button:hover,.link-row:hover{background:var(--hover)}.info-rows .ms,.link-row .ms{color:var(--muted)}
.info-rows b,.link-row b{display:block;font-weight:400;overflow-wrap:anywhere}.info-rows small,.link-row small{display:block;color:var(--muted);font-size:13.5px}
.link-row b{color:var(--brand)}
button.mrow{width:100%;text-align:left;gap:22px}.mrow .ms{color:var(--muted)}.mrow b{font-weight:400}.mrow.danger,.mrow.danger .ms{color:#e53935}
.locked{display:grid;justify-items:center;gap:6px;text-align:center;margin:12vh auto 0;max-width:340px;background:var(--panel);border-radius:16px;padding:26px 22px;box-shadow:var(--shadow)}.locked h3{font-size:20px;font-weight:500}
.dr-top small{display:block}.dr-top a{border-radius:50%}

.msg.pending .bub{opacity:.85}.msg.pending .tick{animation:tick-spin 2s linear infinite}@keyframes tick-spin{to{transform:rotate(360deg)}}
.inputwrap{min-height:54px}.inputwrap textarea{padding:16px 0 15px;font-size:15.5px}.inputwrap .icon-btn{margin-bottom:5px}

/* ---- loading feedback ---- */
#topbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:300;background:var(--brand);transform-origin:left;transform:scaleX(0);opacity:0;pointer-events:none;transition:opacity .25s}
body.loading #topbar{opacity:1;animation:topbar 2.4s cubic-bezier(.1,.7,.2,1) forwards}@keyframes topbar{from{transform:scaleX(.08)}to{transform:scaleX(.9)}}
.sk{background:linear-gradient(90deg,var(--hover) 25%,color-mix(in srgb,var(--hover) 35%,var(--panel)) 50%,var(--hover) 75%) 0 0/200% 100%;animation:shim 1.1s linear infinite}
.sk-line{display:block;height:12px;border-radius:6px;margin:5px 0}@keyframes shim{to{background-position:-200% 0}}
.sk-bub{height:40px;min-width:110px;animation:sk-pulse .9s ease-in-out infinite alternate}@keyframes sk-pulse{from{opacity:.4}to{opacity:.85}}
.btn.busy,button.busy{position:relative;pointer-events:none}
.btn.busy{color:transparent!important}.btn.busy>*{visibility:hidden}
.btn.busy::after{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;border:2.5px solid color-mix(in srgb,var(--brand) 30%,transparent);border-top-color:var(--brand);animation:spin .7s linear infinite}
.btn.filled.busy::after{border-color:rgba(255,255,255,.35);border-top-color:#fff}
.icon-btn.busy,.mrow.busy,.menu-list button.busy{opacity:.55}
.ci{transition:background .12s}.ci:active{background:var(--hover)}