:root{--bg: #eef2f7;--bg-soft: #ffffff;--bg-softer: #e2e8f0;--primary: #6366f1;--primary-hover: #4f46e5;--text: #1e293b;--text-muted: #64748b;--danger: #ef4444;--success: #22c55e;--radius: 12px;font-family:Segoe UI,system-ui,-apple-system,sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);min-height:100vh}#root{height:100vh}button{cursor:pointer;font-family:inherit}input{font-family:inherit}.auth-container{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:2rem 1rem;background:var(--bg-main)}.auth-card{background:var(--bg-soft);padding:2.5rem;border-radius:var(--radius);width:100%;max-width:380px;box-shadow:0 10px 30px #0f172a14}.auth-logo{text-align:center;margin-bottom:.25rem}.auth-logo-img{width:72px;height:72px;display:block;margin:0 auto .6rem}.auth-logo-text{font-size:2rem;font-weight:700}.auth-logo-text span{color:var(--primary)}.auth-subtitle{text-align:center;color:var(--text-muted);margin-bottom:1.75rem;font-size:.9rem}.auth-form{display:flex;flex-direction:column;gap:1rem}.field label{display:block;font-size:.8rem;color:var(--text-muted);margin-bottom:.35rem}.field input{width:100%;padding:.75rem 1rem;background:var(--bg);border:1px solid var(--bg-softer);border-radius:8px;color:var(--text);font-size:.95rem;outline:none;transition:border-color .15s}.field input:focus{border-color:var(--primary)}.btn-primary{padding:.8rem;background:var(--primary);color:#fff;border:none;border-radius:8px;font-size:.95rem;font-weight:600;transition:background .15s}.btn-primary:hover{background:var(--primary-hover)}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.auth-toggle{text-align:center;margin-top:1.25rem;font-size:.85rem;color:var(--text-muted)}.auth-toggle button{background:none;border:none;color:var(--primary);font-weight:600;font-size:.85rem}.error-banner{background:#ef44441f;border:1px solid var(--danger);color:#b91c1c;padding:.7rem 1rem;border-radius:8px;font-size:.85rem;text-align:center}.chat-layout{display:grid;grid-template-columns:260px 1fr;height:100vh}.sidebar{background:var(--bg-soft);border-right:1px solid var(--bg-softer);display:flex;flex-direction:column;padding:1.25rem;height:100vh;overflow:hidden}.sidebar-main{display:flex;flex-direction:column;flex-grow:1;min-height:0}.sidebar-conversations{display:flex;flex-direction:column;gap:.75rem;flex-grow:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-color:var(--bg-softer) transparent;scrollbar-width:thin}.sidebar-brand{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding-bottom:1.1rem;border-bottom:1px solid var(--bg-softer)}.brand-logo{width:48px;height:48px}.sidebar-header{font-size:1.25rem;font-weight:700}.sidebar-header span{color:var(--primary)}.online-title{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin:1.5rem 0 .75rem}.user-list{list-style:none;display:flex;flex-direction:column;gap:.5rem}.user-item{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;border-radius:8px;font-size:.9rem}.user-item.me{background:var(--bg-softer)}.user-item.offline{opacity:.65}.user-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.last-seen{margin-left:auto;padding-left:.5rem;font-size:.68rem;color:var(--text-muted);white-space:nowrap;flex-shrink:0}.dot{width:9px;height:9px;border-radius:50%;background:var(--success);flex-shrink:0}.dot.off{background:var(--text-muted)}.sidebar-footer{padding-top:1rem;border-top:1px solid var(--bg-softer);flex-shrink:0;margin-top:auto;padding-top:1.25rem}.user-card{display:flex;align-items:center;gap:.6rem;background:var(--bg);border:1px solid var(--bg-softer);border-radius:var(--radius);padding:.55rem .65rem;margin-bottom:.75rem}.user-avatar{width:38px;height:38px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;flex-shrink:0}.user-card-info{display:flex;flex-direction:column;gap:.15rem;min-width:0}.user-card-name{font-weight:600;font-size:.9rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-card-status{display:flex;align-items:center;gap:.35rem;font-size:.72rem;color:var(--text-muted)}.user-card-status .dot{width:7px;height:7px}.btn-logout{width:100%;padding:.6rem;background:transparent;border:1px solid var(--danger);color:#dc2626;border-radius:8px;font-size:.85rem;transition:background .15s}.btn-logout:hover{background:#ef44441f}.chat-main{display:flex;flex-direction:column;height:100vh;background:var(--bg-soft)}.chat-topbar{padding:1rem 1.5rem;border-bottom:1px solid var(--bg-softer);display:flex;align-items:center;justify-content:space-between}.chat-topbar h2{font-size:1.05rem}.connection-status{font-size:.8rem;display:flex;align-items:center;gap:.4rem;color:var(--text-muted)}.connection-status .dot{background:var(--success)}.connection-status.off .dot{background:var(--danger)}.messages{flex:1;overflow-y:auto;padding:1.5rem;display:flex;flex-direction:column;gap:.75rem;background-color:var(--bg-soft);background-image:url(/chat-bg.svg);background-repeat:repeat}.message{max-width:70%;padding:.6rem .9rem;border-radius:var(--radius);background:var(--bg);border:1px solid var(--bg-softer);align-self:flex-start}.message.mine{align-self:flex-end;background:var(--primary);border-color:var(--primary);color:#fff}.message-meta{display:flex;gap:.5rem;align-items:baseline;margin-bottom:.2rem}.message-author{font-size:.78rem;font-weight:700;color:var(--primary)}.message.mine .message-author{color:#c7d2fe}.message-time{font-size:.68rem;color:var(--text-muted)}.message.mine .message-time{color:#c7d2fe}.message-text{font-size:.92rem;line-height:1.4;word-wrap:break-word}.system-message{align-self:center;font-size:.78rem;color:var(--text-muted);background:var(--bg-softer);padding:.3rem .9rem;border-radius:999px}.typing-indicator{height:1.2rem;padding:0 1.5rem;font-size:.78rem;color:var(--text-muted);font-style:italic}.composer{display:flex;gap:.75rem;padding:1rem 1.5rem;border-top:1px solid var(--bg-softer)}.composer input{flex:1;padding:.8rem 1rem;background:var(--bg-soft);border:1px solid var(--bg-softer);border-radius:999px;color:var(--text);font-size:.95rem;outline:none}.composer input:focus{border-color:var(--primary)}.composer button{padding:.8rem 1.5rem;background:var(--primary);color:#fff;border:none;border-radius:999px;font-weight:600;transition:background .15s}.composer button:hover{background:var(--primary-hover)}.composer button:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 640px){.chat-layout{grid-template-columns:1fr}.sidebar{display:none}.message{max-width:85%}}@media (max-width: 480px){.auth-card{padding:1.75rem}}