@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Unbounded:wght@600;700&display=swap');
:root{--bg:#0b0d12;--panel:#12151c;--panel2:#171b24;--text:#f5f4ef;--muted:#8c93a3;--line:#282d38;--accent:#ff6b35;--accent2:#a4ff57;--bubble:#242936;--mine:#ff6b35;--mineText:#160b07;--shadow:0 30px 80px #0008;color-scheme:dark;font-family:Manrope,system-ui,sans-serif}
:root[data-theme=light]{--bg:#eeeae1;--panel:#faf8f3;--panel2:#fff;--text:#1c1b1a;--muted:#77736e;--line:#ddd8cf;--accent:#145cff;--accent2:#ff5733;--bubble:#e8e3d9;--mine:#145cff;--mineText:#fff;--shadow:0 30px 80px #554d3d26;color-scheme:light}
:root[data-theme=violet]{--bg:#100b1d;--panel:#171026;--panel2:#201532;--text:#fbf7ff;--muted:#a99aba;--line:#38284d;--accent:#b264ff;--accent2:#ffda4a;--bubble:#302244;--mine:#b264ff;--mineText:#170b20}
:root[data-theme=forest]{--bg:#07130f;--panel:#0c1c16;--panel2:#11271e;--text:#f0f8f2;--muted:#89a397;--line:#244236;--accent:#3ce0a0;--accent2:#f6c756;--bubble:#1a382c;--mine:#3ce0a0;--mineText:#04130d}
[hidden]{display:none!important}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);min-height:100dvh;overflow:hidden}button,input,textarea{font:inherit}button{cursor:pointer;color:inherit}.auth-shell{min-height:100dvh;display:grid;grid-template-columns:1.1fr .9fr}.brand-stage{position:relative;padding:8vh 8vw;overflow:hidden;display:flex;flex-direction:column;justify-content:center;background:radial-gradient(circle at 18% 30%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 30%),var(--bg)}.brand-stage:after{content:"";position:absolute;width:42vw;height:42vw;border:1px solid color-mix(in srgb,var(--accent2) 28%,transparent);border-radius:50%;right:-20vw;bottom:-25vw}.brand-mark,.mini-mark{display:grid;place-items:center;background:var(--accent);color:#17100d;font-family:Unbounded;font-weight:700}.brand-mark{width:72px;height:72px;border-radius:22px;font-size:36px;margin-bottom:32px;box-shadow:16px 16px 0 color-mix(in srgb,var(--accent2) 85%,transparent)}.eyebrow{text-transform:uppercase;letter-spacing:.2em;font-size:12px;color:var(--accent2);font-weight:800}.brand-stage h1{font-family:Unbounded;margin:6px 0 24px;font-size:clamp(48px,7vw,108px);letter-spacing:-.07em}.brand-stage h1 span,.side-head strong span{color:var(--accent)}.brand-copy{max-width:550px;font-size:clamp(17px,2vw,23px);line-height:1.55;color:var(--muted)}.art-lines{position:absolute;right:8%;top:12%;display:flex;gap:16px;transform:rotate(22deg)}.art-lines i{display:block;width:7px;height:150px;background:var(--accent);border-radius:8px}.art-lines i:nth-child(2){height:90px;background:var(--accent2)}.art-lines i:nth-child(3){height:42px}.auth-panel{display:grid;place-items:center;padding:30px;background:var(--panel)}.auth-card{width:min(430px,100%)}.tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:34px}.tab{flex:1;border:0;background:none;padding:18px;color:var(--muted);font-weight:700;border-bottom:2px solid transparent}.tab.active{color:var(--text);border-color:var(--accent)}form label{display:block;color:var(--muted);font-size:14px;font-weight:600;margin-bottom:18px}input,textarea{display:block;width:100%;margin-top:8px;border:1px solid var(--line);background:var(--panel2);color:var(--text);padding:15px 16px;border-radius:14px;outline:none;transition:.2s}input:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}.primary,.secondary{border:0;border-radius:14px;padding:15px 20px;font-weight:800}.primary{width:100%;display:flex;justify-content:space-between;background:var(--accent);color:var(--mineText)}.secondary{background:var(--panel2);border:1px solid var(--line)}.secure-note{margin-top:24px;text-align:center;color:var(--muted);font-size:12px}.secure-note span{color:var(--accent2)}
.app-shell{height:100dvh;display:grid;grid-template-columns:340px minmax(0,1fr);background:var(--bg)}.sidebar{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;z-index:10}.side-head{height:72px;padding:0 22px;display:flex;align-items:center;gap:13px;border-bottom:1px solid var(--line)}.mini-mark{width:36px;height:36px;border-radius:11px}.side-head strong{font-family:Unbounded;font-size:18px}.profile{padding:20px 22px;display:flex;align-items:center;gap:12px}.profile>div:nth-child(2){min-width:0;flex:1}.profile strong,.profile small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile small{color:var(--accent2);font-size:12px;margin-top:2px}.avatar{width:42px;height:42px;flex:0 0 auto;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#111;font-weight:900}.avatar.big{width:48px;height:48px}.icon-btn{border:0;background:transparent;width:40px;height:40px;border-radius:12px;font-size:20px}.icon-btn:hover{background:var(--panel2)}.search{margin:0 16px 18px;position:relative}.search span{position:absolute;left:14px;top:11px;color:var(--muted);font-size:22px}.search input{margin:0;padding:12px 12px 12px 42px;background:var(--bg)}.section-title{padding:0 22px 10px;display:flex;justify-content:space-between;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-weight:800}.contacts{overflow:auto;flex:1;padding:0 9px}.contact{width:100%;border:0;background:transparent;display:flex;gap:12px;align-items:center;text-align:left;padding:11px 13px;border-radius:16px}.contact:hover,.contact.active{background:var(--panel2)}.contact-copy{min-width:0;flex:1}.contact-row{display:flex;justify-content:space-between;gap:8px}.contact strong{font-size:14px}.contact small{color:var(--muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.presence{width:10px;height:10px;border-radius:50%;background:#58606d;border:2px solid var(--panel)}.presence.online{background:var(--accent2)}.side-bottom{padding:12px;border-top:1px solid var(--line)}.invite-action,.flat-btn{border:0;width:100%;background:transparent;border-radius:14px;display:flex;align-items:center;gap:12px;padding:10px;text-align:left}.invite-action:hover,.flat-btn:hover{background:var(--panel2)}.invite-action>span{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--accent);color:var(--mineText);font-size:24px}.invite-action strong,.invite-action small{display:block}.invite-action small{color:var(--muted);font-size:11px}.flat-btn{color:var(--muted);font-size:13px}.flat-btn.danger{color:#ff6b6b}.chat{min-width:0;display:flex;flex-direction:column;background:radial-gradient(circle at 80% 0,color-mix(in srgb,var(--accent) 8%,transparent),transparent 30%),var(--bg)}.chat-head{height:72px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 24px;gap:13px}.peer{flex:1}.peer strong,.peer small{display:block}.peer small{font-size:12px;color:var(--muted)}.empty-chat{margin:auto;text-align:center;padding:20px;color:var(--muted)}.empty-chat h2{color:var(--text);margin:28px 0 8px;font-family:Unbounded;font-size:22px}.empty-orbit{width:130px;height:130px;margin:auto;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;position:relative}.empty-orbit:after{content:"";width:18px;height:18px;border-radius:50%;background:var(--accent2);position:absolute;top:4px;right:17px;box-shadow:0 0 24px var(--accent2)}.empty-orbit span{font-family:Unbounded;font-size:52px;color:var(--accent)}.message-area{min-height:0;display:flex;flex-direction:column;flex:1}.messages{flex:1;overflow:auto;padding:30px max(24px,7vw);display:flex;flex-direction:column;gap:8px}.message{max-width:min(560px,78%);padding:11px 15px 8px;background:var(--bubble);border-radius:6px 18px 18px 18px;align-self:flex-start;line-height:1.42;overflow-wrap:anywhere}.message.mine{align-self:flex-end;background:var(--mine);color:var(--mineText);border-radius:18px 6px 18px 18px}.message time{display:block;text-align:right;font-size:10px;opacity:.62;margin-top:5px}.composer{display:flex;align-items:flex-end;gap:10px;padding:14px max(18px,7vw) max(14px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:color-mix(in srgb,var(--panel) 82%,transparent)}.composer textarea{resize:none;margin:0;min-height:48px;max-height:130px}.compose-btn,.send-btn{border:0;flex:0 0 auto;width:48px;height:48px;border-radius:15px;background:var(--panel2);font-size:22px}.send-btn{background:var(--accent);color:var(--mineText)}.emoji-panel{position:absolute;left:calc(340px + 7vw);bottom:82px;width:300px;padding:12px;border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow);border-radius:18px;display:grid;grid-template-columns:repeat(7,1fr);z-index:5}.emoji-panel button{border:0;background:transparent;font-size:22px;padding:7px;border-radius:8px}.emoji-panel button:hover{background:var(--panel2)}.drawer{position:fixed;right:0;top:0;height:100%;width:min(390px,90vw);background:var(--panel);z-index:30;box-shadow:var(--shadow);padding:28px;transform:translateX(105%);transition:.3s}.drawer.open{transform:none}.drawer-head{display:flex;justify-content:space-between;align-items:flex-start}.drawer small{color:var(--accent2);text-transform:uppercase;letter-spacing:.15em}.drawer h2{font-family:Unbounded;margin:5px 0}.drawer p{color:var(--muted)}.theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}.theme-card{border:1px solid var(--line);border-radius:16px;padding:10px;background:var(--panel2);text-align:left}.theme-card i{display:block;height:76px;border-radius:11px;margin-bottom:10px;background:linear-gradient(135deg,#0b0d12 55%,#ff6b35 56%,#a4ff57)}.theme-card.light i{background:linear-gradient(135deg,#eeeae1 55%,#145cff 56%,#ff5733)}.theme-card.violet i{background:linear-gradient(135deg,#100b1d 55%,#b264ff 56%,#ffda4a)}.theme-card.forest i{background:linear-gradient(135deg,#07130f 55%,#3ce0a0 56%,#f6c756)}.backdrop{position:fixed;inset:0;background:#0008;z-index:20;opacity:0;pointer-events:none;transition:.2s}.backdrop.open{opacity:1;pointer-events:auto}.toast{position:fixed;left:50%;top:20px;transform:translate(-50%,-90px);background:var(--text);color:var(--bg);padding:12px 18px;border-radius:13px;z-index:100;box-shadow:var(--shadow);transition:.25s;font-weight:700}.toast.show{transform:translate(-50%,0)}dialog{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:26px;padding:34px;width:min(480px,calc(100% - 30px));text-align:center;box-shadow:var(--shadow)}dialog::backdrop{background:#050609c9;backdrop-filter:blur(8px)}.dialog-x{position:absolute;right:14px;top:14px;border:0;background:transparent;font-size:24px}.dialog-icon{margin:auto;width:64px;height:64px;display:grid;place-items:center;border-radius:20px;background:var(--accent);color:var(--mineText);font-size:30px}.invite-code{font-family:Unbounded;letter-spacing:.12em;font-size:28px;padding:19px;background:var(--bg);border:1px dashed var(--accent);border-radius:16px;margin:25px 0}.dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.dialog-actions .primary{display:block}.mobile-only{display:none}
.password-wrap{display:block;position:relative}.password-wrap input{padding-right:102px;position:relative;z-index:1}.password-toggle{position:absolute;z-index:2;right:8px;top:15px;height:38px;padding:0 10px;border:0;border-radius:9px;background:var(--bg);color:var(--muted);font-size:12px;font-weight:700}.password-toggle:hover{color:var(--text)}.secure-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent2);margin-right:5px}.dialog-actions button{white-space:nowrap;font-size:14px}.dialog-actions button:disabled{opacity:.7;cursor:wait}
html,body{height:100%;overscroll-behavior:none}.app-shell{height:var(--app-height,100dvh);max-height:var(--app-height,100dvh);overflow:hidden}.chat{height:100%;min-height:0;overflow:hidden}.chat-head{flex:0 0 72px}.message-area{min-height:0;overflow:hidden}.messages{min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.composer{flex:0 0 auto;position:relative;z-index:2}
@media(max-width:760px){body{overflow:hidden}.auth-shell{display:block;overflow:auto}.brand-stage{min-height:34dvh;padding:38px 28px}.brand-mark{width:48px;height:48px;border-radius:15px;font-size:24px;margin-bottom:18px;box-shadow:9px 9px 0 var(--accent2)}.brand-stage h1{font-size:45px;margin:3px 0 8px}.brand-copy{font-size:15px;margin-bottom:0}.art-lines{display:none}.auth-panel{min-height:66dvh;padding:28px 22px;align-items:start}.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;z-index:30;inset:0 12% 0 0;transform:translateX(-105%);transition:.3s;box-shadow:var(--shadow);touch-action:pan-y}.sidebar.open{transform:none}.contact{touch-action:manipulation}.mobile-only{display:grid;place-items:center}.chat-head{padding:0 12px}.messages{padding:20px 14px}.composer{padding:10px 10px max(10px,env(safe-area-inset-bottom));gap:7px}.compose-btn,.send-btn{width:44px;height:44px}.emoji-panel{left:10px;bottom:75px;width:calc(100% - 20px)}.message{max-width:86%}.dialog-actions{grid-template-columns:1fr}.theme-grid{grid-template-columns:1fr 1fr}}