:root{--bg-primary:#1d1e27;--bg-secondary:#16171e;--bg-tertiary:#121318;--accent:#c80018;--accent-hover:#a00014;--text-primary:#edf2f4;--text-muted:#8e9297;--text-link:#ff4d4d;--input-bg:#4b4e53;--hover:#2a2b36;--selected:#33354a;--border:#000;--danger:#c80018;--online:#3ba55c;--idle:#faa61a;--offline:#747f8d}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;font-family:gg sans,Noto Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#0a0a0f}input,textarea{background:var(--input-bg);color:var(--text-primary);border:none;border-radius:4px;outline:none;margin:2px 0;padding:8px 12px;font-family:inherit;font-size:14px}input::placeholder,textarea::placeholder{color:var(--text-muted)}input:focus,textarea:focus{box-shadow:0 0 0 2px var(--accent)}button,.btn-primary{cursor:pointer;background:var(--accent);color:var(--text-primary);border:none;border-radius:4px;padding:8px 16px;font-family:inherit;font-size:14px;font-weight:500;transition:background .15s}button:hover,.btn-primary:hover{background:var(--accent-hover)}button:active,.btn-primary:active{background:#8a0010}button:disabled{opacity:.5;cursor:default}.btn-secondary{background:var(--input-bg);color:var(--text-primary)}.btn-secondary:hover{background:#5a5d63}.btn-danger{color:var(--text-muted);background:0 0;padding:4px 8px;font-size:12px}.btn-danger:hover{color:var(--danger);background:0 0}.discord-app{height:100vh;display:flex;overflow:hidden}.channel-sidebar{background:var(--bg-primary);border-right:1px solid #0000004d;flex-direction:column;flex-shrink:0;width:240px;display:flex}.sidebar-header{height:48px;color:var(--text-primary);border-bottom:1px solid var(--bg-tertiary);letter-spacing:.3px;align-items:center;padding:0 16px;font-size:15px;font-weight:600;display:flex}.sidebar-section-title{text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);justify-content:space-between;align-items:center;padding:18px 8px 4px 16px;font-size:11px;font-weight:700;display:flex}.room-list{flex:1;padding:0 8px;overflow-y:auto}.room-item{cursor:pointer;color:var(--text-muted);border-radius:4px;justify-content:space-between;align-items:center;margin:1px 0;padding:6px 8px;font-size:14px;transition:background .1s,color .1s;display:flex}.room-item:hover{background:var(--hover);color:var(--text-primary)}.room-item.selected{background:var(--selected);color:#fff}.room-item .room-name{align-items:center;gap:6px;display:flex}.unread-badge{background:var(--online,#23a55a);color:#fff;text-align:center;border-radius:9px;min-width:18px;height:18px;margin-left:auto;margin-right:4px;padding:0 5px;font-size:11px;font-weight:700;line-height:18px}.user-panel{background:var(--bg-secondary);border-top:1px solid var(--bg-tertiary);justify-content:space-between;align-items:center;height:52px;padding:0 8px;display:flex}.user-info{align-items:center;gap:8px;display:flex}.user-avatar{color:#fff;background:0 0;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:14px;font-weight:700;display:flex;position:relative}.user-avatar .status-dot{border:2px solid var(--bg-secondary);border-radius:50%;width:10px;height:10px;position:absolute;bottom:-1px;right:-1px}.avatar-img{object-fit:cover;border-radius:50%;width:100%;height:100%}.user-name{color:var(--text-primary);font-size:13px;font-weight:600;line-height:1.2}.user-status{color:var(--text-muted);font-size:11px}.chat-area{background:var(--bg-primary);flex-direction:column;flex:1;min-width:0;display:flex}.chat-header{border-bottom:1px solid var(--bg-tertiary);flex-shrink:0;align-items:center;gap:8px;height:48px;padding:0 16px;font-weight:600;display:flex}.chat-header .divider{background:var(--input-bg);width:1px;height:24px;margin:0 8px}.chat-header .members-info{color:var(--text-muted);font-size:13px;font-weight:400}.messages-container{flex:1;padding:16px 16px 0;overflow-y:auto}.message{gap:16px;margin-bottom:4px;padding:2px 0;display:flex}.message:hover{background:#0000000f;border-radius:4px}.message-group-start{margin-top:16px}.msg-avatar{color:#fff;background:0 0;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;margin-top:2px;font-size:16px;font-weight:700;display:flex}.msg-body{flex:1;min-width:0}.msg-header{align-items:baseline;gap:8px;margin-bottom:2px;display:flex}.msg-author{color:var(--text-primary);cursor:pointer;font-size:15px;font-weight:600}.msg-author:hover{text-decoration:underline}.msg-timestamp{color:var(--text-muted);font-size:11px;font-weight:400}.msg-content{color:var(--text-primary);word-wrap:break-word;font-size:14px;line-height:1.375}.message-pending{opacity:.5}.message-failed .msg-content{color:#f04747;opacity:.6}.msg-failed-row{align-items:center;gap:6px;margin-top:2px;display:flex}.msg-failed-icon{color:#f04747;cursor:default;font-size:14px}.msg-retry-btn{color:var(--text-link);cursor:pointer;background:0 0;border:none;padding:0;font-size:12px}.msg-retry-btn:hover{color:var(--accent);text-decoration:underline}.chat-input-container{flex-shrink:0;padding:0 16px 24px}.chat-input-wrapper{background:var(--input-bg);border-radius:8px;align-items:center;padding:2px 4px 2px 16px;display:flex}.chat-input-wrapper input{color:var(--text-primary);background:0 0;border:none;flex:1;padding:10px 0;font-size:15px}.chat-input-wrapper input:focus{box-shadow:none}.chat-input-wrapper input::placeholder{color:var(--text-muted)}.chat-input-wrapper button{color:var(--text-muted);background:0 0;padding:8px;font-size:18px}.chat-input-wrapper button:hover{color:var(--text-primary);background:0 0}.empty-state{color:var(--text-muted);flex:1;justify-content:center;align-items:center;font-size:16px;display:flex}.btn-create-room{color:var(--text-muted);cursor:pointer;background:0 0;border:none;padding:0 4px;font-size:16px;font-weight:700;line-height:1}.btn-create-room:hover{color:var(--text-primary);background:0 0}.btn-create-room-full{background:var(--accent);color:var(--text-primary);cursor:pointer;border:none;border-radius:4px;width:calc(100% - 16px);margin:4px 8px 8px;padding:6px 12px;font-size:13px;font-weight:500}.btn-create-room-full:hover{background:var(--accent-hover)}.sidebar-tabs{border-bottom:1px solid var(--bg-tertiary);display:flex}.sidebar-tab{text-align:center;color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;border-radius:0;flex:1;justify-content:center;align-items:center;gap:4px;padding:8px 0;font-size:12px;font-weight:600;display:flex}.sidebar-tab:hover{color:var(--text-primary);background:0 0}.sidebar-tab.active{color:var(--text-primary);border-bottom-color:var(--accent);background:0 0}.tab-badge{background:var(--accent);color:#fff;text-align:center;border-radius:8px;min-width:16px;height:16px;padding:0 4px;font-size:10px;line-height:16px}.friends-panel{flex:1;padding:0 8px;overflow-y:auto}.friends-search{padding:8px 0}.friends-search input{background:var(--input-bg);border-radius:4px;width:100%;padding:6px 10px;font-size:12px}.friends-search-results{background:var(--bg-tertiary);border-radius:4px;max-height:200px;margin-top:4px;overflow-y:auto}.friend-search-item{cursor:pointer;justify-content:space-between;align-items:center;padding:6px 10px;font-size:13px;display:flex}.friend-search-item:hover{background:var(--hover)}.friends-list{padding:2px 0}.friend-item{color:var(--text-primary);border-radius:4px;justify-content:space-between;align-items:center;padding:6px 8px;font-size:14px;display:flex}.friend-item:hover{background:var(--hover)}.friend-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.friend-actions{gap:2px;display:flex}.btn-accept{background:var(--online);color:#fff;cursor:pointer;border:none;border-radius:4px;padding:4px 8px;font-size:12px}.btn-accept:hover{background:#2d8e4a}.empty-friends{color:var(--text-muted);text-align:center;padding:12px 8px;font-size:13px}.modal-overlay{z-index:100;background:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--bg-primary);border:1px solid var(--bg-tertiary);border-radius:8px;width:400px;max-height:80vh;padding:16px;overflow-y:auto}.modal-header{justify-content:space-between;align-items:center;margin-bottom:12px;font-size:16px;font-weight:700;display:flex}.modal-input{background:var(--input-bg);width:100%;color:var(--text-primary);border:none;border-radius:4px;margin-bottom:8px;padding:8px 12px;font-size:14px}.modal-search-results{background:var(--bg-tertiary);border-radius:4px;max-height:160px;margin-bottom:8px;overflow-y:auto}.selected-friends{flex-wrap:wrap;gap:4px;margin-bottom:8px;display:flex}.selected-friend-chip{background:var(--selected);color:var(--text-primary);border-radius:12px;align-items:center;gap:4px;padding:4px 8px;font-size:12px;display:inline-flex}.selected-friend-chip button{color:var(--text-muted);cursor:pointer;background:0 0;border:none;padding:0;font-size:11px;line-height:1}.selected-friend-chip button:hover{color:var(--danger);background:0 0}.modal-submit{width:100%;margin-top:4px;padding:8px;font-size:14px}.members-bar{background:var(--bg-secondary);border-bottom:1px solid var(--bg-tertiary);height:36px;color:var(--text-muted);flex-shrink:0;align-items:center;gap:8px;padding:0 16px;font-size:12px;display:flex}.members-bar input{background:var(--input-bg);width:150px;padding:4px 8px;font-size:12px}.members-bar button{padding:4px 10px;font-size:12px}.error-banner{border:1px solid var(--accent);color:#ff6b6b;background:#c8001826;border-radius:4px;margin:8px 16px 0;padding:6px 12px;font-size:13px}.auth-page{background:var(--bg-primary);justify-content:center;align-items:center;min-height:100vh;display:flex}.auth-card{background:var(--bg-secondary);border-radius:8px;width:420px;padding:32px;box-shadow:0 2px 10px #00000080}.auth-card h2{text-align:center;color:var(--text-primary);margin-bottom:8px;font-size:24px;font-weight:600}.auth-card .subtitle{text-align:center;color:var(--text-muted);margin-bottom:20px;font-size:14px}.auth-card label{text-transform:uppercase;color:var(--text-muted);letter-spacing:.5px;margin-bottom:8px;font-size:12px;font-weight:700;display:block}.auth-card input{width:100%;margin-bottom:16px;padding:10px 12px}.auth-card button[type=submit]{width:100%;margin-top:4px;padding:10px;font-size:15px}.auth-card .auth-footer{color:var(--text-muted);margin-top:8px;font-size:13px}.auth-card .auth-footer a{color:var(--text-link);text-decoration:none}.auth-card .auth-footer a:hover{text-decoration:underline}.auth-card .error-msg{color:#ff6b6b;margin-bottom:8px;font-size:13px}a{color:var(--text-link);text-decoration:none}a:hover{text-decoration:underline}