:root{color:#eef1f8;--accent:#f3a63b;--panel:#191c25;--muted:#9299aa;background:#11131a;font-family:Inter,system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input{font:inherit}.splash{color:#111;background:var(--accent);place-items:center;height:100vh;font-size:64px;font-weight:900;display:grid}.app{grid-template-columns:72px 240px 1fr 240px;height:100vh;display:grid}.rail{background:#101219;flex-direction:column;align-items:center;gap:10px;padding:12px 10px;display:flex}.rail button,.brand{color:#d7dbe6;cursor:pointer;background:#252a36;border:0;border-radius:50%;width:48px;height:48px;font-size:17px;font-weight:800;transition:all .16s}.brand{color:#111;background:var(--accent);place-items:center;display:grid}.rail button:hover,.rail button.active{background:var(--accent);color:#15171e;border-radius:16px}.rail button.active:before{content:"";background:#fff;border-radius:0 4px 4px 0;width:4px;height:36px;position:absolute;left:0}.rail .add,.rail .join{color:#62cf8e}.channels{background:var(--panel);grid-template-rows:50px 1fr 54px;display:grid}header{border-bottom:1px solid #0f1117;align-items:center;gap:12px;padding:0 16px;display:flex;box-shadow:0 1px 2px #0005}.channels header{justify-content:space-between}.channels header button{color:#aeb4c2;cursor:pointer;background:0 0;border:0}.channels section{padding:12px 8px}.section-title{justify-content:space-between;align-items:center;display:flex}.section-title button,.channels footer button{color:#aeb4c2;cursor:pointer;background:0 0;border:0}.channels h4,.members h4{color:var(--muted);margin:16px 8px 8px;font-size:11px}.channels section>div:not(.section-title){color:#aeb4c2;cursor:pointer;border-radius:6px;padding:8px 10px}.channels section>div:hover,.channels .selected{color:#fff;background:#292e3a}.empty-action{background:var(--accent);cursor:pointer;border:0;border-radius:6px;margin:16px 8px;padding:9px}.channels footer{background:#151820;align-items:center;gap:9px;padding:7px;display:flex}.channels footer button{margin-left:auto}.avatar{color:#fff;background:#31435c;border-radius:50%;flex:none;place-items:center;width:34px;height:34px;font-weight:700;display:grid}small{color:var(--muted);font-size:11px;display:block}.chat{background:#20242e;grid-template-rows:50px 1fr 70px;min-width:0;display:grid}.chat header span{color:var(--muted);border-left:1px solid #414653;padding-left:12px;font-size:13px}.connection{color:#e5a84f;margin-left:auto;font-size:11px;font-style:normal}.connection.online{color:#62cf8e}.connection.offline{color:#d27878}.messages{padding:18px 20px;overflow:auto}.welcome{margin-top:18vh}.welcome>div{background:#39404e;border-radius:50%;place-items:center;width:68px;height:68px;font-size:36px;display:grid}.welcome h1{margin-bottom:4px}.welcome p{color:var(--muted);margin-top:0}article{gap:12px;padding:10px 0;display:flex}article:hover{background:#1c2029;margin:0 -20px;padding:10px 20px}article time{color:var(--muted);margin-left:8px;font-size:11px}article p{white-space:pre-wrap;margin:4px 0;line-height:1.45}.composer{color:#c5cad5;background:#353a47;border-radius:8px;align-items:center;gap:12px;margin:10px 20px 18px;padding:0 14px;display:flex}.composer input{color:#fff;background:0 0;border:0;outline:0;flex:1;padding:14px 0}.composer button{color:var(--accent);cursor:pointer;background:0 0;border:0}.members{background:var(--panel);padding:12px 8px}.members>div{align-items:center;gap:9px;padding:7px 8px;display:flex}.toast{border-radius:8px;max-width:280px;position:absolute;bottom:20px;right:20px;background:#ad3640!important}.auth{background:radial-gradient(circle at 50% 0,#2b3040,#11131a 65%);place-items:center;height:100vh;display:grid}.auth form{background:#20242e;border:1px solid #343a49;border-radius:16px;width:min(420px,100vw - 32px);padding:30px;box-shadow:0 24px 80px #0009}.auth .logo{background:var(--accent);color:#111;border-radius:18px;place-items:center;width:56px;height:56px;margin:auto;font-size:28px;font-weight:900;display:grid}.auth h1{text-align:center;margin:18px 0 4px}.auth>form>p{text-align:center;color:var(--muted);margin-top:0}.auth label{color:#b8becc;margin:16px 0;font-size:12px;font-weight:700;display:block}.auth input{color:#fff;background:#141720;border:1px solid #39404d;border-radius:7px;outline:0;width:100%;margin-top:7px;padding:12px;display:block}.auth input:focus{border-color:var(--accent)}.primary{background:var(--accent);color:#17191f;cursor:pointer;border:0;border-radius:7px;width:100%;padding:12px;font-weight:800}.link{color:#9db8e7;cursor:pointer;background:0 0;border:0;width:100%;padding:14px}.error{color:#ffb4bc;background:#4a2329;border-radius:6px;margin:12px 0;padding:10px}@media (width<=900px){.app{grid-template-columns:64px 210px 1fr}.members{display:none}}@media (prefers-reduced-motion:reduce){*{transition:none!important}}.message-body{flex:1;min-width:0}.messages article{position:relative}.message-actions{background:#171a22;border:1px solid #353a47;border-radius:6px;display:none;position:absolute;top:-8px;right:12px;overflow:hidden}.messages article:hover .message-actions{display:flex}.message-actions button{color:#c7ccd7;cursor:pointer;background:0 0;border:0;padding:5px 9px}.message-actions button:hover{color:#fff;background:#343947}.reaction-picker{z-index:4;background:#171a22;border:1px solid #3a404d;border-radius:8px;padding:5px;display:flex;position:absolute;top:28px;right:12px;box-shadow:0 8px 24px #0007}.reaction-picker button{cursor:pointer;background:0 0;border:0;border-radius:5px;padding:5px 7px;font-size:18px}.reaction-picker button:hover{background:#343947}.reactions{flex-wrap:wrap;gap:5px;margin-top:7px;display:flex}.reactions button{color:#cdd2de;cursor:pointer;background:#292e3a;border:1px solid #3a404d;border-radius:7px;padding:3px 8px}.reactions button.mine{border-color:var(--accent);color:#fff;background:#493a25}.reactions button span{margin-left:3px;font-size:12px}.reply-preview{color:#aeb5c5;border-left:2px solid var(--accent);white-space:nowrap;text-overflow:ellipsis;margin-bottom:5px;padding-left:8px;font-size:12px;overflow:hidden}.reply-preview b{color:#d9deea}.edited{margin-left:6px;display:inline}.deleted p{color:#777f90;font-style:italic}.composer-wrap{align-self:end;position:relative}.typing-indicator{color:#9da5b5;white-space:nowrap;font-size:11px;position:absolute;bottom:2px;left:28px}.typing-indicator b{color:#d8dce5}.typing-indicator span{min-width:12px;animation:1s ease-in-out infinite typing-pulse;display:inline-block}@keyframes typing-pulse{50%{opacity:.35}}.replying{color:#aeb5c5;background:#292e3a;border-radius:8px 8px 0 0;align-items:center;gap:6px;margin:0 20px -10px;padding:8px 12px;font-size:12px;display:flex}.replying span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.replying button{color:#d7dbe6;cursor:pointer;background:0 0;border:0;margin-left:auto}.members .member{gap:8px}.member-avatar{flex:none;position:relative}.member-avatar>i{background:#697181;border:2px solid #20232d;border-radius:50%;width:10px;height:10px;position:absolute;bottom:1px;right:-1px}.member-avatar>i.online{background:#48c78e}.member-name{flex:1;min-width:0}.members select{color:#cbd0dc;cursor:pointer;background:#292e3a;border:0;border-radius:5px;max-width:34px;padding:4px}.members select:focus{max-width:130px}.members .kick{color:#aeb4c2;cursor:pointer;background:0 0;border:0;font-size:18px}.members .kick:hover{color:#f07b84}.attach-button{color:#c5cad5;cursor:pointer;font-size:20px;line-height:1}.attach-button:hover{color:var(--accent)}.attach-button input{display:none}.attachment{color:#e8ebf2;background:#191d26;border:1px solid #39404d;border-radius:8px;align-items:center;gap:10px;width:min(440px,100%);margin-top:8px;padding:10px;text-decoration:none;display:flex}.attachment:hover{border-color:#596275}.attachment.image{background:0 0;border:0;padding:0;display:block;overflow:hidden}.attachment.image img{object-fit:contain;background:#13161d;border-radius:8px;max-width:100%;max-height:360px;display:block}.file-icon{width:38px;height:38px;color:var(--accent);background:#303746;border-radius:8px;flex:none;place-items:center;font-size:22px;display:grid}.chat{height:100vh;min-height:0;overflow:hidden}.chat>.messages{scrollbar-gutter:stable;min-height:0;overflow:hidden auto}.composer-wrap{min-height:0}.channels section>div.unread{color:#fff;align-items:center;font-weight:700;display:flex}.channels section>div.unread>span{text-overflow:ellipsis;flex:1;min-width:0;overflow:hidden}.unread-badge{color:#fff;background:#596275;border-radius:10px;place-items:center;min-width:20px;height:20px;padding:0 6px;font-size:11px;display:grid}.mention-badge{background:#d24e59}.mention{color:#ffd890;background:#705522;border-radius:3px;padding:0 2px}.mention.own{color:#fff0c2;background:#8a5b20}.toast.notice{bottom:74px;background:#2f6f50!important}.chat{position:relative}.search-box{background:#141720;border:1px solid #343a49;border-radius:6px;align-items:center;width:min(260px,32vw);margin-left:auto;padding:0 7px;display:flex}.search-box input{color:#eef1f8;background:0 0;border:0;outline:0;width:100%;min-width:0;padding:7px 2px;font-size:12px}.search-box button{color:#aeb4c2;cursor:pointer;background:0 0;border:0}.chat header .connection{white-space:nowrap;margin-left:0}.pins-button{color:#b7bdca;cursor:pointer;white-space:nowrap;background:0 0;border:0;border-radius:6px;padding:6px 8px}.pins-button:hover{color:#fff;background:#303542}.pins-panel{z-index:21;background:#171a22;border:1px solid #3b4251;border-radius:10px;width:min(420px,100% - 24px);max-height:min(560px,100vh - 80px);padding:8px;position:absolute;top:46px;right:12px;overflow-y:auto;box-shadow:0 16px 50px #000a}.pins-title{justify-content:space-between;align-items:center;padding:8px 10px 12px;display:flex}.pins-title button{color:#aeb4c2;cursor:pointer;background:0 0;border:0;font-size:20px}.pin-item{color:#e9edf5;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:7px;gap:4px;width:100%;padding:10px;display:grid}.pin-item:hover{background:#292e3a}.pin-item span{color:#c5cad5;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.pin-item time,.pins-panel>p{color:#9299aa;font-size:11px}.pinned-mark{opacity:.8;margin-left:7px;font-size:11px}.search-results{z-index:20;background:#171a22;border:1px solid #3b4251;border-radius:10px;width:min(460px,100% - 24px);max-height:min(520px,100vh - 80px);padding:8px;position:absolute;top:46px;right:12px;overflow-y:auto;box-shadow:0 16px 50px #000a}.search-summary,.search-empty{color:#9299aa;padding:9px 10px;font-size:12px}.search-results>button{color:#e9edf5;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:7px;width:100%;padding:10px;display:block}.search-results>button:hover{background:#292e3a}.search-results>button span{color:#aeb5c5;font-size:12px}.search-results>button p{text-overflow:ellipsis;white-space:nowrap;margin:4px 0;overflow:hidden}.search-results>button time{color:#7f8798;font-size:10px}.messages article.search-target{animation:1.8s search-flash}@keyframes search-flash{0%,to{background:0 0}25%,70%{background:#4a3c22}}.header-actions,.channel-actions{align-items:center;gap:2px;display:flex}.channel-actions{border-left:0!important;padding-left:0!important}.channel-actions button,.mobile-nav-button{color:#aeb4c2;cursor:pointer;background:0 0;border:0}.mobile-nav-button{padding:0;font-size:18px;display:none}.avatar-image{object-fit:cover}.member-status{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.load-older{color:#cbd0dc;cursor:pointer;background:#252a35;border:1px solid #3d4555;border-radius:16px;margin:0 auto 14px;padding:6px 14px;display:block}.modal-backdrop{z-index:100;background:#07090dbb;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.modal{background:#20242e;border:1px solid #3b4251;border-radius:14px;width:min(430px,100%);padding:22px;box-shadow:0 24px 80px #000b}.modal h2{margin:0 0 18px}.modal>input,.modal>label>input{color:#fff;background:#141720;border:1px solid #3b4251;border-radius:7px;outline:0;width:100%;margin-top:7px;padding:11px;display:block}.modal>label{color:#b8becc;margin:14px 0;font-size:12px;display:block}.modal-actions{justify-content:flex-end;gap:8px;margin-top:18px;display:flex}.modal-actions button{cursor:pointer;border:0;border-radius:7px;width:auto;padding:9px 14px}.modal-actions button:not(.primary){color:#d9deea;background:#303644}.avatar-picker{cursor:pointer;align-items:center;gap:12px;display:flex!important}.avatar-picker .avatar{width:54px;height:54px}.avatar-picker input{display:none!important}@media (width<=700px){.app{grid-template-columns:56px minmax(0,1fr)}.rail{padding-inline:4px}.rail button,.brand{width:44px;height:44px}.channels{z-index:40;width:min(250px,100vw - 56px);transition:transform .18s;position:fixed;top:0;bottom:0;left:56px;transform:translate(-110%);box-shadow:12px 0 30px #0009}.channels.mobile-open{transform:translate(0)}.mobile-nav-button{display:block}.chat header>span:not(.channel-actions){display:none}.search-box{width:min(180px,42vw)}.connection{display:none}.messages{padding-inline:12px}.composer,.replying{margin-inline:10px}}