@import"https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&family=Fraunces:ital,opsz,wght@1,9..144,300&display=swap";:root{--bg: #0f1117;--surf: #181c27;--surf2: #1f2435;--bdr: #2a3045;--acc: #4f9cf9;--acc2: #f97b4f;--tx: #e8eaf2;--mt: #6b7494;--on: #4fdb8a;--sent: #1e3a5f;--recv: #1f2435;--err: #f97b4f;--r: 16px}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;background:var(--bg);color:var(--tx);font-family:DM Sans,sans-serif;font-size:14px;overflow:hidden}.login-wrap{height:100dvh;display:flex;align-items:center;justify-content:center;background:var(--bg)}.login-box{background:var(--surf);border:1px solid var(--bdr);border-radius:18px;padding:36px 32px;width:320px;display:flex;flex-direction:column;gap:18px}.login-brand{text-align:center;font-family:Fraunces,serif;font-size:26px;font-weight:300;font-style:italic;color:var(--acc)}.brand-dot{color:var(--acc2)}.login-sub{text-align:center;font-size:12px;color:var(--mt);margin-top:-10px}.field{display:flex;flex-direction:column;gap:5px}.field label{font-size:11px;font-weight:600;color:var(--mt);letter-spacing:.6px;text-transform:uppercase}.field input{background:var(--surf2);border:1px solid var(--bdr);border-radius:10px;padding:10px 13px;color:var(--tx);font-size:14px;font-family:DM Sans,sans-serif;outline:none;transition:border-color .15s}.field input:focus{border-color:var(--acc)}.field input::placeholder{color:var(--mt)}.remember-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mt);cursor:pointer}.remember-row input[type=checkbox]{accent-color:var(--acc);cursor:pointer}.login-err{font-size:12px;color:var(--err);text-align:center}.login-btn{background:var(--acc);border:none;border-radius:10px;padding:11px;color:#fff;font-size:14px;font-weight:600;cursor:pointer;font-family:DM Sans,sans-serif;transition:background .15s}.login-btn:hover{background:#6babff}.login-btn:disabled{opacity:.6;cursor:default}.app{display:flex;height:100dvh;position:relative}.sidebar-overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:99}.sidebar{width:260px;min-width:260px;background:var(--surf);border-right:1px solid var(--bdr);display:flex;flex-direction:column;transition:transform .25s ease;z-index:100}.sb-head{padding:14px 16px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;gap:10px}.brand{font-family:Fraunces,serif;font-size:20px;font-weight:300;font-style:italic;color:var(--acc)}.user-badge{margin-left:auto;display:flex;align-items:center;gap:6px}.user-av{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;flex-shrink:0}.user-dot{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;background:var(--on);border:2px solid var(--surf)}.user-name{font-size:12px;color:var(--mt)}.logout-btn{background:none;border:none;color:var(--mt);cursor:pointer;font-size:14px;padding:2px 4px;border-radius:4px;transition:color .15s}.logout-btn:hover{color:var(--tx)}.room-list{flex:1;overflow-y:auto;padding:6px 0}.room-list::-webkit-scrollbar{width:3px}.room-list::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:3px}.section-label{padding:10px 16px 3px;font-size:10px;font-weight:600;letter-spacing:1.1px;color:var(--mt);text-transform:uppercase}.room-item{display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;border-radius:8px;margin:1px 6px;position:relative;transition:background .15s}.room-item:hover{background:var(--surf2)}.room-item.active{background:#4f9cf91f}.room-item.active:before{content:"";position:absolute;left:0;top:20%;bottom:20%;width:3px;border-radius:0 3px 3px 0;background:var(--acc)}.room-av{width:38px;height:38px;border-radius:12px;background:var(--surf2);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;position:relative;overflow:hidden}.online-dot{position:absolute;bottom:0;right:0;width:10px;height:10px;border-radius:50%;background:var(--on);border:2px solid var(--surf)}.room-info{flex:1;min-width:0}.room-name{font-size:13px;font-weight:500;margin-bottom:1px}.room-preview{font-size:12px;color:var(--mt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-area{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}.chat-header{padding:12px 18px;border-bottom:1px solid var(--bdr);background:var(--surf);display:flex;align-items:center;gap:12px}.menu-btn{display:none;background:none;border:none;color:var(--mt);font-size:20px;cursor:pointer;padding:4px 6px;border-radius:6px;flex-shrink:0}.menu-btn:hover{color:var(--tx);background:var(--surf2)}.ch-av{width:38px;height:38px;border-radius:12px;background:var(--surf2);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}.ch-name{font-size:14.5px;font-weight:600}.ch-status{font-size:11.5px;color:var(--on);display:flex;align-items:center;gap:4px;margin-top:1px}.ch-status.away{color:var(--mt)}.status-dot{width:6px;height:6px;border-radius:50%;background:currentColor}.messages{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:2px}.messages::-webkit-scrollbar{width:3px}.messages::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:3px}.date-divider{text-align:center;font-size:10.5px;color:var(--mt);padding:8px 0;display:flex;align-items:center;gap:8px}.date-divider:before,.date-divider:after{content:"";flex:1;height:1px;background:var(--bdr)}.msg-row{display:flex;align-items:flex-end;gap:6px;margin-bottom:3px}.msg-row.sent{flex-direction:row-reverse}.msg-row.same-author{margin-bottom:1px}.msg-av{width:26px;height:26px;border-radius:50%;background:var(--surf2);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}.bubble-wrap{display:flex;flex-direction:column;max-width:72%;gap:2px}.msg-row.sent .bubble-wrap{align-items:flex-end}.sender-name{font-size:10.5px;color:var(--mt);padding:0 6px;font-weight:500}.bubble{padding:8px 12px;border-radius:var(--r);font-size:13.5px;line-height:1.5;word-break:break-word;animation:popIn .18s ease}@keyframes popIn{0%{opacity:0;transform:scale(.94) translateY(3px)}to{opacity:1;transform:scale(1) translateY(0)}}.bubble.recv{background:var(--recv);border-bottom-left-radius:4px}.bubble.sent{background:var(--sent);border-bottom-right-radius:4px;color:#d6e8ff}.bubble-meta{display:flex;align-items:center;gap:3px;font-size:10px;color:var(--mt);padding:0 3px}.msg-row.sent .bubble-meta{flex-direction:row-reverse}.tick.read{color:var(--acc);font-size:11px}.typing-row{display:flex;align-items:center;gap:6px;padding:3px 0}.typing-dots{display:flex;gap:3px;padding:9px 12px;background:var(--recv);border-radius:var(--r);border-bottom-left-radius:4px}.typing-dots span{width:5px;height:5px;border-radius:50%;background:var(--mt);animation:typeBounce 1.2s infinite ease-in-out}.typing-dots span:nth-child(2){animation-delay:.2s}.typing-dots span:nth-child(3){animation-delay:.4s}@keyframes typeBounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-5px)}}.input-area{padding:11px 14px;background:var(--surf);border-top:1px solid var(--bdr);display:flex;align-items:flex-end;gap:8px}.msg-input{flex:1;background:var(--surf2);border:1px solid var(--bdr);border-radius:12px;padding:9px 13px;color:var(--tx);font-size:14px;font-family:DM Sans,sans-serif;outline:none;resize:none;min-height:38px;max-height:110px;line-height:1.5;transition:border-color .15s}.msg-input:focus{border-color:var(--acc)}.msg-input::placeholder{color:var(--mt)}.send-btn{width:38px;height:38px;border-radius:11px;background:var(--acc);border:none;cursor:pointer;color:#fff;font-size:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s}.send-btn:hover{background:#6babff;transform:scale(1.05)}.send-btn:active{transform:scale(.97)}@media (max-width: 640px){.sidebar{position:fixed;top:0;left:0;height:100dvh;transform:translate(-100%)}.sidebar.mobile-open{transform:translate(0)}.sidebar-overlay{display:block}.menu-btn{display:flex;align-items:center;justify-content:center}.bubble-wrap{max-width:80%}}