:root{color-scheme:dark;--bg:#0a0a0f;--surface:#14141c;--card:#1c1c28;--line:#ffffff10;--fg:#f5f1ff;--muted:#9591a6;--accent:#a78bfa;--purple:#8b5cf6;--shadow:0 20px 70px #0005;font-family:Inter,Manrope,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:16px;background:var(--bg);color:var(--fg)}:root[data-theme=light]{color-scheme:light;--bg:#f6f4fc;--surface:#fff;--card:#eeeaf9;--line:#25164415;--fg:#20162e;--muted:#736882;--shadow:0 20px 70px #38226912}@media(prefers-color-scheme:light){:root[data-theme=system]{color-scheme:light;--bg:#f6f4fc;--surface:#fff;--card:#eeeaf9;--line:#25164415;--fg:#20162e;--muted:#736882;--shadow:0 20px 70px #38226912}}*{box-sizing:border-box}body{margin:0;overscroll-behavior:none}button,input,textarea,select{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button{border:1px solid var(--line);border-radius:15px;padding:11px 15px;background:var(--card);color:var(--fg);cursor:pointer;transition:transform .16s,background .16s,opacity .16s}button:hover{background:color-mix(in srgb,var(--card),var(--purple) 16%)}button:active:not(:disabled){transform:scale(.96)}button:disabled{opacity:.48;cursor:wait}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}input,textarea,select{border:1px solid var(--line);background:var(--bg);color:var(--fg);padding:13px 15px;border-radius:16px;min-width:0;width:100%;outline:none}input:focus,textarea:focus,select:focus{border-color:var(--purple);box-shadow:0 0 0 3px #8b5cf617}input[type=checkbox]{width:auto}input[type=range]{padding:8px}a{color:var(--accent);overflow-wrap:anywhere}h1,h2,h3,p{margin:0}small,.muted{color:var(--muted)}label{display:grid;gap:8px;font-size:.85rem;color:var(--muted)}form{display:grid;gap:16px}form.busy:after{content:"";height:3px;background:linear-gradient(90deg,transparent,var(--purple),transparent);animation:shimmer 1s infinite}header{display:flex;align-items:center;gap:12px}header h1,header h2{flex:1;letter-spacing:.08em}.primary,.send{background:linear-gradient(135deg,#8b5cf6,#a855f7);color:#fff;box-shadow:0 5px 24px #8b5cf62a;border:none}.danger{color:#fb7185}.icon{padding:9px;min-width:42px;min-height:42px;border:0;background:transparent;font-size:1.3rem}.brand{display:grid;place-items:center;font-size:3.5rem;font-weight:800;color:#fff;background:linear-gradient(135deg,#8b5cf6,#a855f7);width:86px;height:86px;border-radius:27px;box-shadow:0 0 70px #8b5cf647;animation:welcome .65s both}.auth-page{min-height:100dvh;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at 60% 10%,#8b5cf622,transparent 60%)}.auth-card{max-width:410px;width:100%;display:grid;gap:23px;padding:32px;border:1px solid var(--line);border-radius:28px;background:var(--surface);box-shadow:var(--shadow)}.auth-card h1{letter-spacing:.25em}.auth-card p{font-size:.85rem;line-height:1.6}.auth-links{display:flex;flex-wrap:wrap;gap:6px}.auth-links button{font-size:.75rem;background:transparent;padding:8px}.tag{font-size:.6rem;letter-spacing:.1em;color:var(--accent);border:1px solid #8b5cf655;border-radius:6px;padding:3px 6px}.shell{height:100dvh;display:grid;grid-template-columns:350px minmax(0,1fr);max-width:1500px;margin:auto;overflow:hidden}.sidebar{display:flex;flex-direction:column;gap:16px;min-height:0;background:var(--surface);border-right:1px solid var(--line);padding:calc(18px + env(safe-area-inset-top)) 14px 12px}.sidebar>header{padding:0 6px}.sidebar h1{font-size:1.35rem}.tabs{display:flex;gap:6px}.tabs button{flex:1;background:transparent;font-size:.8rem;padding:9px}.tabs button:first-child{background:#8b5cf620;color:var(--accent)}.chat-list{overflow:auto;flex:1;min-height:0;contain:layout style}.chat-row{border:0;display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:transparent;padding:14px 10px;margin-bottom:4px;border-radius:20px}.chat-row.selected{background:linear-gradient(100deg,#8b5cf62a,#a855f710)}.chat-copy{display:grid;gap:6px;min-width:0;flex:1}.chat-copy strong{font-size:.91rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.chat-copy small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.78rem}.avatar{flex:none;border-radius:50%;width:48px;height:48px;display:grid;place-items:center;background:linear-gradient(135deg,#8b5cf6,#4c2d85);font-weight:700;color:#fff;overflow:hidden}.avatar img{width:100%;height:100%;object-fit:cover}.unread{border-radius:20px;background:var(--purple);padding:4px 7px;color:#fff;font-size:.7rem}.connection{font-size:.7rem;text-align:center}.stories{display:flex;gap:12px;overflow:auto;padding:2px 2px 10px;flex:none;scrollbar-width:none}.story{display:flex;flex-direction:column;align-items:center;gap:7px;padding:0;background:none;border:0;min-width:60px;max-width:74px}.story .avatar{outline:2px solid #a855f7;outline-offset:3px}.story.seen .avatar{outline-color:var(--muted)}.story small{width:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.65rem}.story.create{font-size:.7rem;justify-content:center;border:1px dashed #8b5cf666;min-height:70px;border-radius:20px;color:var(--accent)}.room{display:flex;flex-direction:column;min-height:0;background:radial-gradient(ellipse at 50% 10%,#8b5cf608,transparent 70%)}.room-head{padding:calc(12px + env(safe-area-inset-top)) 20px 12px;border-bottom:1px solid var(--line);background:var(--surface);z-index:1}.identity{background:none;border:0;padding:0;display:grid;grid-template-columns:42px 1fr;column-gap:12px;text-align:left;margin-right:auto}.identity .avatar{grid-row:span 2;width:42px;height:42px}.identity strong{align-self:end;font-size:.9rem}.typing{font-size:.7rem;align-self:start}.typing.active{color:var(--accent);animation:breathe 1s infinite alternate}.back{display:none}.timeline{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:20px clamp(12px,3vw,46px);overflow-anchor:auto}.message{display:flex;padding:3px 0;contain:layout style}.message.mine{justify-content:flex-end}.bubble{background:var(--card);max-width:min(80%,490px);min-width:85px;border-radius:20px 20px 20px 5px;padding:11px 14px;position:relative;border:1px solid var(--line)}.mine .bubble{background:linear-gradient(125deg,#663bb9,#8245cb);color:#fff;border-radius:20px 20px 5px}.bubble p{line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;font-size:.92rem;padding-right:12px}.bubble img{width:100%;max-height:330px;object-fit:cover;border-radius:12px;display:block;cursor:zoom-in}.bubble video{width:100%;max-height:360px;border-radius:12px}.bubble audio{max-width:100%;width:260px}.bubble blockquote{margin:0 0 8px;padding:7px 9px;border-left:3px solid #d5b8ff;background:#ffffff0c;border-radius:5px;font-size:.75rem;max-height:70px;overflow:hidden}.meta{display:block;text-align:right;font-size:.6rem;padding:6px 0 0;opacity:.7;color:inherit}.message-menu{position:absolute;right:4px;top:1px;padding:0 5px;border:0;background:transparent;opacity:.55}.pending{opacity:.65}.failed .bubble{border-color:#fb7185}.reactions{display:flex;gap:4px;flex-wrap:wrap}.reactions button{font-size:.7rem;padding:4px 7px;border-radius:10px}.older{display:block;margin:0 auto 14px;font-size:.7rem;border:0;background:transparent;color:var(--muted)}.composer{display:flex;position:relative;align-items:flex-end;gap:8px;padding:12px 20px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--surface);flex:none}.composer textarea{resize:none;max-height:120px;flex:1;padding:13px 15px}.composer .send{width:46px;height:46px;border-radius:16px;font-size:1.2rem;flex:none}.reply-context{position:absolute;bottom:100%;left:0;right:0;background:var(--surface);border-left:3px solid var(--purple);display:flex;align-items:center;font-size:.78rem}.reply-context:not(:empty){padding:8px 18px}.reply-context span{flex:1;overflow:hidden;max-height:44px}.recording{color:#fb7185!important;animation:breathe .7s infinite alternate}.empty{margin:auto;padding:40px;color:var(--muted);text-align:center;font-size:.85rem}.skeleton{color:var(--muted);padding:32px;animation:breathe 1s infinite alternate}dialog{color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow);width:min(94vw,520px);max-height:88dvh;padding:24px;overflow:auto}dialog[open]{animation:sheet .24s cubic-bezier(.2,.8,.2,1)}dialog::backdrop{background:#0009;backdrop-filter:blur(8px)}dialog header{margin-bottom:22px}dialog h2{font-size:1.05rem;letter-spacing:0}dialog>div,dialog form{display:grid;gap:14px}dialog input,dialog select{margin:4px 0}#toast{position:fixed;top:calc(18px + env(safe-area-inset-top));left:50%;max-width:min(90vw,420px);width:max-content;transform:translate(-50%,-24px);background:var(--card);color:var(--fg);padding:15px 22px;border:1px solid #8b5cf655;border-radius:20px;box-shadow:var(--shadow);opacity:0;pointer-events:none;z-index:100;transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .2s}#toast.visible{opacity:1;transform:translate(-50%)}progress{width:100%;accent-color:var(--purple)}.action-grid{display:grid;gap:10px}.card{padding:16px;background:var(--card);border-radius:18px;display:grid;gap:8px}.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.stats strong{font-size:1.5rem;color:var(--accent)}.story-view img,.story-view video,.full-image{width:100%;max-height:60dvh;object-fit:contain;border-radius:18px}.plus-card{text-align:center;background:radial-gradient(ellipse at center,#8b5cf622,transparent)}.gem{font-size:4rem;animation:float 3s ease-in-out infinite}.call-screen{position:relative}.call-screen video{width:100%;max-height:40dvh;background:#000;border-radius:18px}.call-screen .local-video{position:absolute;width:85px;right:12px;top:60px}.incoming-call{padding:25px;border-radius:24px;box-shadow:0 0 #8b5cf64a;animation:ring 2s infinite}.speed{font-size:.65rem;padding:4px}.auth-card,.room-head{isolation:isolate}@keyframes welcome{0%{transform:translateY(15px) scale(.88);opacity:0}to{transform:none;opacity:1}}@keyframes sheet{0%{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}}@keyframes shimmer{0%{background-position:-200px 0}to{background-position:200px 0}}@keyframes breathe{0%{opacity:.45}to{opacity:1}}@keyframes float{50%{transform:translateY(-7px) rotate(4deg)}}@keyframes ring{70%{box-shadow:0 0 0 18px transparent}to{box-shadow:0 0 0 0 transparent}}@media(max-width:720px){.shell{display:block}.sidebar{height:100%}.room{display:none;height:100%}.in-room .sidebar{display:none}.in-room .room{display:flex;animation:sheet .2s ease-out}.room-head{padding-left:8px;padding-right:8px;gap:4px}.back{display:block}.room-head .icon{min-width:36px}.composer{padding-left:8px;padding-right:8px;gap:2px}.composer .icon{min-width:34px;padding:6px}.emoji{display:none}.bubble{max-width:86%}.timeline{padding:12px}.auth-card{padding:25px}.sidebar{padding-bottom:calc(12px + env(safe-area-inset-bottom))}dialog{padding:20px}.identity strong{max-width:160px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}.call-screen,.incoming-call{display:grid;justify-items:center;gap:16px;text-align:center;padding:10px 0}.call-pulse{width:104px;height:104px;border-radius:50%;display:grid;place-items:center;font-size:2.4rem;font-weight:700;color:#fff;background:linear-gradient(135deg,#8b5cf6,#a855f7);animation:ring 1.8s infinite;box-shadow:0 0 #8b5cf66b}.call-screen.video .call-pulse{display:none}#call-state{font-variant-numeric:tabular-nums;color:var(--muted)}.call-screen video.remote-video{width:100%;max-height:52dvh;background:#000;border-radius:20px;object-fit:cover}.call-screen:not(.video) video.remote-video{height:0;width:0;position:absolute;opacity:0}.call-screen .local-video{position:absolute;width:92px;right:14px;top:14px;border-radius:14px;border:2px solid #ffffff40;transform:scaleX(-1)}.call-controls{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}.round{border-radius:999px;min-width:92px;padding:14px 18px}.round.off{background:#fb718530;color:#fb7185}.round.hangup{background:#e11d48;color:#fff;border:0}.round.accept{background:#16a34a;color:#fff;border:0}
