@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#10111a;--panel:#171925;--panel2:#1d2030;--line:#292c3d;--text:#f4f4fa;--muted:#9699ad;--accent:#9b8cff;--accent2:#7967f4;--green:#57d6a1;--danger:#ff7c8b}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif}button,input,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.55;cursor:not-allowed}.hidden{display:none!important}.muted{color:var(--muted)}.tiny{font-size:11px;line-height:1.5}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:var(--accent);margin:0 0 10px}
.auth-shell{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at 50% 0%,#282343 0%,transparent 55%),var(--bg)}.auth-card{width:min(420px,100%);padding:42px;background:rgba(23,25,37,.92);border:1px solid var(--line);border-radius:22px;box-shadow:0 24px 90px #0005}.brand-mark{height:48px;width:48px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,#b2a5ff,#7563ed);color:#171426;font-family:Manrope;font-size:25px;font-weight:800;margin-bottom:26px}.brand-mark.small{height:32px;width:32px;border-radius:10px;font-size:17px;margin:0}.auth-card h1,.modal h2{font:800 30px Manrope;margin:0 0 8px;letter-spacing:-1px}.auth-card>p{margin-top:0}.auth-card form{display:grid;gap:16px;margin-top:28px}label{display:grid;gap:8px;font-size:13px;color:#d8d8e4}input,textarea{width:100%;background:#11131d;border:1px solid #34374b;color:var(--text);border-radius:10px;padding:13px 14px;outline:none;resize:vertical}input:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px #9b8cff20}.primary,.secondary{border:0;border-radius:10px;padding:12px 16px;font-weight:700;transition:.15s}.primary{background:var(--accent);color:#171426}.primary:hover{background:#b0a5ff;transform:translateY(-1px)}.secondary{background:#292c40;color:#e5e3f4;border:1px solid #383b52}.secondary:hover{background:#343750}.full{width:100%}.auth-switch{text-align:center;font-size:13px;margin:22px 0}.text-button{border:0;background:none;color:#b4aaff;font-weight:700}.app{height:100vh;display:grid;grid-template-columns:260px minmax(300px,1fr) 270px;overflow:hidden}.sidebar{background:#141621;border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0}.sidebar-top{height:76px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;font:800 19px Manrope;letter-spacing:-.5px}.icon-button{height:36px;width:36px;border:1px solid var(--line);border-radius:10px;background:#202334;color:#ddd9ff;font-size:20px}.icon-button:hover{background:#30334a}.sidebar-label{padding:25px 18px 10px;color:#777b91;font-size:10px;font-weight:700;letter-spacing:1.5px}.group-list{padding:0 10px;overflow:auto;flex:1}.group-item{width:100%;display:flex;align-items:center;gap:11px;padding:10px;border:0;background:transparent;color:#c9cada;text-align:left;border-radius:10px;margin-bottom:3px}.group-item:hover,.group-item.active{background:#28263e;color:white}.group-icon,.group-avatar{height:36px;width:36px;border-radius:11px;background:#292b40;color:#bcb2ff;display:grid;place-items:center;font-weight:700;flex-shrink:0}.group-item.active .group-icon{background:#51467f}.group-item-name{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.empty-side{color:var(--muted);font-size:12px;padding:14px}.sidebar-bottom{padding:14px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px}.avatar{height:36px;width:36px;border-radius:50%;background:#51467f;display:grid;place-items:center;font-weight:700}.my-details{display:grid;gap:3px;min-width:0;flex:1}.my-details strong{font-size:12px}.my-details span{font-size:10px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}.signout{font-size:17px}.chat-area{min-width:0;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 0%,#1b1b2b 0%,transparent 55%),#10111a}.chat-header{height:76px;flex-shrink:0;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 25px}.header-group{display:flex;align-items:center;gap:12px;min-width:0}.header-group h2{font:700 15px Manrope;margin:0 0 4px}.header-group p{font-size:11px;margin:0}.header-actions{display:flex;gap:8px}.header-actions .secondary{font-size:12px;padding:9px 12px}.welcome-panel{margin:auto;text-align:center;max-width:420px;padding:30px}.welcome-icon{height:65px;width:65px;margin:0 auto 20px;border-radius:20px;background:#292541;color:#b7aaff;display:grid;place-items:center;font-size:30px}.welcome-panel h2{font:800 23px Manrope;letter-spacing:-.7px}.welcome-panel p{font-size:13px;line-height:1.6;margin-bottom:22px}.messages{flex:1;overflow:auto;padding:24px max(22px,calc((100% - 820px)/2));display:flex;flex-direction:column;gap:18px}.day-divider{text-align:center;color:#777b91;font-size:10px;margin:10px 0}.message{display:flex;gap:10px;max-width:85%;align-items:flex-start}.message.mine{align-self:flex-end;flex-direction:row-reverse}.message-avatar{height:31px;width:31px;flex-shrink:0;border-radius:50%;background:#373151;display:grid;place-items:center;font-size:11px;font-weight:700;color:#d8d0ff}.message.mine .message-avatar{background:#4c4674}.message-content{min-width:0}.message-meta{display:flex;gap:8px;align-items:center;margin:0 0 5px;font-size:10px;color:var(--muted)}.message.mine .message-meta{justify-content:flex-end}.message-meta strong{color:#deddeb;font-size:11px}.bubble{background:#202333;border:1px solid #2c3043;border-radius:4px 14px 14px 14px;padding:10px 13px;font-size:13px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}.message.mine .bubble{background:#3a345a;border-color:#514777;border-radius:14px 4px 14px 14px}.composer{margin:0 auto 22px;width:min(820px,calc(100% - 44px));display:flex;align-items:flex-end;gap:10px;padding:9px;background:#1b1e2b;border:1px solid #35384b;border-radius:14px}.composer textarea{border:0;background:transparent;box-shadow:none;max-height:130px;min-height:42px;padding:10px;resize:none}.send-button{height:40px;width:42px;border:0;border-radius:10px;background:var(--accent);color:#171426;font-size:18px;font-weight:800}.members-panel{background:#141621;border-left:1px solid var(--line);padding:22px 16px;overflow:auto}.members-heading{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px}.members-heading h3{font:700 15px Manrope;margin:0 0 4px}.members-heading p{font-size:11px;margin:0}.member-row{display:flex;align-items:center;gap:10px;padding:9px 3px}.member-avatar{height:33px;width:33px;border-radius:50%;display:grid;place-items:center;background:#35304f;font-size:11px;font-weight:700}.member-info{flex:1;min-width:0}.member-info strong{font-size:12px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.member-info span{font-size:10px;color:var(--muted)}.online-dot{height:8px;width:8px;border-radius:50%;background:#505365}.online-dot.online{background:var(--green);box-shadow:0 0 8px #57d6a180}.invite-note{margin-top:25px;padding:14px;background:#202233;border:1px solid var(--line);border-radius:12px}.invite-note strong{font-size:12px}.invite-note p{font-size:11px;color:var(--muted);line-height:1.5}.invite-note button{font-size:11px;padding:9px}.modal{width:min(440px,calc(100% - 28px));border:1px solid #3a3c50;border-radius:18px;background:#191b29;color:var(--text);padding:0;box-shadow:0 24px 90px #0009}.modal::backdrop{background:#05060bcc;backdrop-filter:blur(5px)}.modal-content{padding:30px;display:grid;gap:15px;position:relative}.modal-content h2{font-size:25px}.modal-content>p{margin:0}.modal-close{position:absolute;right:17px;top:14px;border:0;background:none;color:#aaaec0;font-size:25px}.invite-link-box{display:flex;gap:8px;background:#10121c;border:1px solid var(--line);padding:7px;border-radius:11px;align-items:center}.invite-link-box span{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:5px;flex:1;color:#d0caff}.invite-link-box button{padding:9px 12px;font-size:11px}.join-group-label{padding:14px;background:#22243a;border-radius:10px;font-weight:700}.toast{position:fixed;z-index:20;top:18px;left:50%;transform:translate(-50%,-20px);opacity:0;pointer-events:none;background:#292b40;border:1px solid #44465e;padding:11px 17px;border-radius:10px;font-size:12px;transition:.2s;max-width:90vw}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:900px){.app{grid-template-columns:220px minmax(280px,1fr)}.members-panel{position:absolute;right:0;top:0;bottom:0;width:270px;z-index:5;box-shadow:-20px 0 60px #0007}}@media(max-width:620px){.app{grid-template-columns:66px minmax(0,1fr)}.sidebar-top{padding:0;justify-content:center}.brand>span:last-child,.sidebar-label,.group-item-name,.my-details,.signout{display:none}.sidebar-top .icon-button{position:absolute;top:82px;left:15px}.group-list{padding:0 8px;margin-top:52px}.group-item{justify-content:center;padding:9px 4px}.sidebar-bottom{justify-content:center;padding:12px 4px}.chat-header{padding:0 13px}.header-actions .secondary{font-size:0}.header-actions .secondary:after{content:'Invite';font-size:11px}.messages{padding:18px 12px}.message{max-width:94%}.composer{width:calc(100% - 24px);margin-bottom:12px}.auth-card{padding:28px 22px}.members-panel{width:min(280px,85vw)}}