:root{--bg-primary:#0a0a0a;--bg-secondary:#1a1a1a;--bg-tertiary:#2a2a2a;--accent-purple:#8b5cf6;--accent-cyan:#0ff;--text-primary:#fff;--text-secondary:#b3b3b3;--border-color:#333;--hover-bg:#8b5cf61a;--success:#10b981;--error:#ef4444;--warning:#f59e0b;color:var(--text-primary);background-color:var(--bg-primary);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-weight:400;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}body{background:linear-gradient(135deg,var(--bg-primary)0%,#1a0a2e 100%);min-height:100vh;margin:0;overflow-x:hidden}#root{flex-direction:column;min-height:100vh;display:flex}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--accent-purple);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--accent-cyan)}button{border:1px solid var(--accent-purple);background:linear-gradient(135deg,var(--accent-purple),#6d28d9);color:var(--text-primary);cursor:pointer;text-transform:uppercase;letter-spacing:.5px;border-radius:8px;padding:.75em 1.5em;font-family:inherit;font-size:.9em;font-weight:500;transition:all .3s}button:hover{background:linear-gradient(135deg,var(--accent-cyan),var(--accent-purple));transform:translateY(-2px);box-shadow:0 0 20px #00ffff4d}button:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}input,textarea{background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-primary);border-radius:8px;padding:.75em;font-family:inherit;transition:all .3s}input:focus,textarea:focus{border-color:var(--accent-purple);outline:none;box-shadow:0 0 10px #8b5cf64d}.glow{box-shadow:0 0 20px #8b5cf680}.glow-cyan{box-shadow:0 0 20px #00ffff80}.login-container{background:radial-gradient(circle,#8b5cf61a 0%,#0000 50%);justify-content:center;align-items:center;min-height:100vh;padding:2rem;display:flex}.login-form{background:var(--bg-secondary);border:1px solid var(--accent-purple);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;width:100%;max-width:400px;padding:3rem}.login-title{text-align:center;margin-bottom:2rem}.title-text{background:linear-gradient(135deg,var(--accent-purple),var(--accent-cyan));-webkit-text-fill-color:transparent;letter-spacing:2px;-webkit-background-clip:text;background-clip:text;font-size:2.5rem;font-weight:700}.title-underline{background:linear-gradient(90deg,var(--accent-purple),var(--accent-cyan));border-radius:2px;width:60%;height:3px;margin:.5rem auto}.form{flex-direction:column;gap:1.5rem;display:flex}.form-group{flex-direction:column;display:flex}.form-input{border:1px solid var(--border-color);background:var(--bg-tertiary);width:100%;color:var(--text-primary);border-radius:8px;padding:1rem;font-size:1rem;transition:all .3s}.form-input:focus{border-color:var(--accent-purple);box-shadow:0 0 15px #8b5cf64d}.error-message{color:var(--error);text-align:center;border:1px solid var(--error);background:#ef44441a;border-radius:6px;padding:.5rem;font-size:.9rem}.submit-btn{margin-top:1rem;padding:1rem 2rem;font-size:1rem;font-weight:600}.form-actions{flex-direction:column;gap:1rem;margin-top:2rem;display:flex}.toggle-btn{border:1px solid var(--border-color);color:var(--text-secondary);text-transform:none;letter-spacing:normal;background:0 0;padding:.75rem;font-size:.9rem}.toggle-btn:hover{background:var(--hover-bg);color:var(--accent-purple);box-shadow:none;transform:none}.divider{text-align:center;margin:1rem 0;position:relative}.divider:before{content:"";background:var(--border-color);height:1px;position:absolute;top:50%;left:0;right:0}.divider span{background:var(--bg-secondary);color:var(--text-secondary);padding:0 1rem;font-size:.9rem}.anonymous-btn{background:linear-gradient(135deg,var(--accent-cyan),#0891b2);border-color:var(--accent-cyan)}.anonymous-btn:hover{background:linear-gradient(135deg,var(--accent-purple),var(--accent-cyan))}.message-list{flex-direction:column;gap:1rem;padding:1rem 0;display:flex}.no-messages{text-align:center;height:200px;color:var(--text-secondary);flex-direction:column;justify-content:center;align-items:center;display:flex}.no-messages-icon{opacity:.5;margin-bottom:1rem;font-size:3rem}.message{gap:.75rem;max-width:70%;display:flex}.message.own{flex-direction:row-reverse;align-self:flex-end}.message-avatar{color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-self:flex-end;align-items:center;width:36px;height:36px;font-size:.9rem;font-weight:700;display:flex}.message-content{flex:1;min-width:0}.message-header{align-items:center;gap:.5rem;margin-bottom:.25rem;display:flex}.sender-name{text-shadow:0 1px 2px #0000001a;letter-spacing:.3px;font-size:.9rem;font-weight:700}.message-time{color:var(--text-secondary);font-size:.8rem}.message-bubble{word-wrap:break-word;border-radius:18px;padding:.75rem 1rem;position:relative}.message-bubble.other{background:var(--bg-secondary);border:1px solid var(--border-color);border-bottom-left-radius:6px}.message-bubble.own{background:linear-gradient(135deg,var(--accent-purple),#6d28d9);color:#fff;border-bottom-right-radius:6px;margin-left:auto}.message-bubble p{margin:0;line-height:1.4}.message-time.own{text-align:right;opacity:.8;margin-top:.25rem;font-size:.75rem;display:block}.message:hover .message-bubble.other{border-color:var(--accent-purple);box-shadow:0 0 10px #8b5cf633}.message:hover .message-bubble.own{box-shadow:0 0 15px #8b5cf666}.message-input-container{background:var(--bg-secondary);border-top:1px solid var(--border-color);padding:1rem 1.5rem}.message-form{width:100%}.input-wrapper{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:24px;align-items:flex-end;gap:.75rem;padding:.75rem 1rem;transition:all .3s;display:flex}.input-wrapper:focus-within{border-color:var(--accent-purple);box-shadow:0 0 15px #8b5cf64d}.message-textarea{color:var(--text-primary);resize:none;background:0 0;border:none;outline:none;flex:1;font-family:inherit;font-size:1rem;line-height:1.4}.message-textarea::placeholder{color:var(--text-secondary)}.message-textarea:disabled{opacity:.5;cursor:not-allowed}.send-button{background:linear-gradient(135deg,var(--accent-purple),#6d28d9);color:#fff;cursor:pointer;text-transform:none;letter-spacing:normal;border:none;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;padding:0;transition:all .3s;display:flex}.send-button:hover:not(:disabled){background:linear-gradient(135deg,var(--accent-cyan),var(--accent-purple));transform:scale(1.05);box-shadow:0 0 20px #0ff6}.send-button:disabled{opacity:.3;cursor:not-allowed;box-shadow:none;transform:none}.send-icon{font-size:1.2rem}.user-list-panel{background:var(--bg-secondary);border-left:1px solid var(--border-color);flex-direction:column;width:280px;height:100%;display:flex}.user-list-header{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:1rem;display:flex}.user-list-header h3{color:var(--text-primary);margin:0;font-size:1rem}.close-btn{border:1px solid var(--border-color);width:32px;height:32px;color:var(--text-secondary);cursor:pointer;text-transform:none;letter-spacing:normal;background:0 0;border-radius:50%;justify-content:center;align-items:center;padding:0;font-size:1rem;display:flex}.close-btn:hover{background:var(--error);color:#fff;border-color:var(--error);box-shadow:none;transform:none}.user-list-content{flex:1;padding:1rem;overflow-y:auto}.no-users{height:100px;color:var(--text-secondary);text-align:center;justify-content:center;align-items:center;display:flex}.users-grid{flex-direction:column;gap:.75rem;display:flex}.user-item{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;align-items:center;gap:.75rem;padding:.75rem;transition:all .3s;display:flex}.user-item:hover{border-color:var(--accent-purple);box-shadow:0 0 10px #8b5cf633}.user-item .user-avatar{color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:.9rem;font-weight:700;display:flex}.user-item .user-info{flex:1;min-width:0}.user-item .user-name{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:.9rem;font-weight:600;overflow:hidden}.user-item .user-status{color:var(--text-secondary);font-size:.8rem}.chat-window{background:var(--bg-primary);flex-direction:column;height:100vh;display:flex}.no-room{text-align:center;height:100%;color:var(--text-secondary);flex-direction:column;justify-content:center;align-items:center;display:flex}.no-room-icon{opacity:.5;margin-bottom:1rem;font-size:4rem}.no-room h2{color:var(--text-primary);margin-bottom:.5rem}.chat-header{background:var(--bg-secondary);border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:1rem 1.5rem;display:flex}.room-info{align-items:center;gap:1rem;display:flex}.room-status{align-items:center;display:flex}.status-dot{background:var(--error);border-radius:50%;width:12px;height:12px;animation:2s infinite pulse}.room-status.connected .status-dot{background:var(--success)}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.room-details h2{color:var(--text-primary);margin:0;font-size:1.2rem}.room-type{color:var(--text-secondary);font-size:.9rem}.chat-actions{gap:.5rem;display:flex}.users-btn{border:1px solid var(--border-color);color:var(--text-secondary);text-transform:none;letter-spacing:normal;background:0 0;padding:.5rem 1rem;font-size:.9rem}.users-btn:hover{background:var(--hover-bg);color:var(--accent-purple);box-shadow:none;transform:none}.chat-body{flex:1;min-height:0;display:flex}.messages-container{flex:1;padding:1rem;overflow-y:auto}.sidebar{background:var(--bg-secondary);border-right:1px solid var(--border-color);flex-direction:column;width:300px;height:100vh;display:flex}.sidebar-header{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:1.5rem;display:flex}.user-info{cursor:pointer;border-radius:8px;align-items:center;gap:.75rem;padding:.5rem;transition:background .3s;display:flex}.user-info:hover{background:var(--hover-bg)}.user-avatar{color:#fff;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:1.2rem;font-weight:700;display:flex}.user-avatar.small{width:30px;height:30px;font-size:.9rem}.user-details{flex:1}.user-name{color:var(--text-primary);font-weight:600}.user-status{color:var(--text-secondary);font-size:.8rem}.logout-btn{border:1px solid var(--error);color:var(--error);background:0 0;padding:.5rem 1rem;font-size:.8rem}.logout-btn:hover{background:var(--error);color:#fff}.sidebar-content{flex:1;padding:1rem;overflow-y:auto}.room-section{margin-bottom:2rem}.room-section h3{color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;margin-bottom:1rem;padding-left:.5rem;font-size:.9rem}.room-item{cursor:pointer;border-radius:8px;align-items:center;gap:.75rem;margin-bottom:.5rem;padding:.75rem;transition:all .3s;display:flex}.room-item:hover{background:var(--hover-bg)}.room-item.active{background:linear-gradient(135deg,var(--accent-purple),#6d28d9);color:#fff}.room-icon{border-radius:6px;justify-content:center;align-items:center;width:32px;height:32px;font-size:1.2rem;display:flex}.room-icon.global{background:linear-gradient(135deg,var(--accent-cyan),#0891b2)}.room-icon.direct{background:linear-gradient(135deg,var(--accent-purple),#6d28d9)}.room-icon.group{background:linear-gradient(135deg,var(--success),#059669)}.room-info{flex-direction:column;display:flex}.room-info small{color:var(--text-secondary);font-size:.8rem}.search-section{margin-bottom:2rem}.search-input{width:100%;margin-bottom:1rem}.search-results{max-height:200px;overflow-y:auto}.search-result{cursor:pointer;border-radius:6px;align-items:center;gap:.75rem;padding:.5rem;transition:background .3s;display:flex}.search-result:hover{background:var(--hover-bg)}.create-section{margin-bottom:2rem}.create-room-btn{border:1px dashed var(--accent-purple);width:100%;color:var(--accent-purple);text-transform:none;letter-spacing:normal;background:0 0;padding:.75rem}.create-room-btn:hover{background:var(--hover-bg);box-shadow:none;transform:none}.create-room-form{flex-direction:column;gap:1rem;display:flex}.room-name-input{width:100%}.create-actions{gap:.5rem;display:flex}.confirm-btn{flex:1;padding:.5rem;font-size:.8rem}.cancel-btn{border:1px solid var(--border-color);color:var(--text-secondary);background:0 0;flex:1;padding:.5rem;font-size:.8rem}.cancel-btn:hover{background:var(--hover-bg);box-shadow:none;transform:none}.invite-btn{border:1px solid var(--accent-purple);color:var(--accent-purple);cursor:pointer;background:0 0;border-radius:4px;min-width:auto;padding:.25rem .5rem;font-size:.9rem;transition:all .3s}.invite-btn:hover{background:var(--accent-purple);color:#fff;box-shadow:none;transform:none}.modal-overlay{z-index:1000;background:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-content{background:var(--bg-primary);border-radius:12px;width:90%;max-width:400px;padding:1.5rem;box-shadow:0 10px 40px #0000004d}.modal-header{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.modal-header h3{color:var(--text-primary);margin:0;font-size:1.2rem}.close-btn{cursor:pointer;color:var(--text-secondary);background:0 0;border:none;width:auto;min-width:auto;padding:0;font-size:1.5rem;transition:color .3s}.close-btn:hover{color:var(--error);box-shadow:none;transform:none}.modal-body{flex-direction:column;gap:1rem;display:flex}.unread-badge{color:#fff;text-align:center;background:linear-gradient(135deg,#ef4444,#dc2626);border-radius:12px;min-width:20px;margin-left:auto;padding:.15rem .5rem;font-size:.75rem;font-weight:700;animation:2s ease-in-out infinite pulse-badge;box-shadow:0 2px 8px #ef444466}@keyframes pulse-badge{0%,to{transform:scale(1);box-shadow:0 2px 8px #ef444466}50%{transform:scale(1.05);box-shadow:0 4px 12px #ef444499}}.user-profile-overlay{z-index:1000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#000c;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.user-profile-modal{background:var(--bg-secondary);border:1px solid var(--accent-purple);border-radius:16px;width:90%;max-width:500px;max-height:90vh;overflow-y:auto}.profile-header{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:1.5rem;display:flex}.profile-header h2{color:var(--text-primary);margin:0;font-size:1.5rem}.profile-header .close-btn{border:1px solid var(--border-color);width:36px;height:36px;color:var(--text-secondary);cursor:pointer;text-transform:none;letter-spacing:normal;background:0 0;border-radius:50%;justify-content:center;align-items:center;padding:0;font-size:1.2rem;display:flex}.profile-header .close-btn:hover{background:var(--error);color:#fff;border-color:var(--error);box-shadow:none;transform:none}.profile-content{padding:2rem}.avatar-section{justify-content:center;margin-bottom:2rem;display:flex}.profile-avatar{color:#fff;border:3px solid var(--accent-purple);border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;font-size:2rem;font-weight:700;display:flex;box-shadow:0 0 20px #8b5cf64d}.profile-form{flex-direction:column;gap:1.5rem;display:flex}.form-group{flex-direction:column;gap:.5rem;display:flex}.form-group label{color:var(--text-primary);text-transform:uppercase;letter-spacing:.5px;font-size:.9rem;font-weight:600}.profile-input{width:100%;padding:.75rem;font-size:1rem}.readonly-field{background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-primary);border-radius:8px;padding:.75rem}.readonly-field small{color:var(--text-secondary);margin-top:.25rem;font-size:.8rem;display:block}.color-picker{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;grid-template-columns:repeat(5,1fr);gap:.75rem;padding:1rem;display:grid}.color-option{cursor:pointer;border:3px solid #fff3;border-radius:50%;width:45px;height:45px;transition:all .3s;box-shadow:0 2px 8px #0000004d}.color-option:hover{transform:scale(1.1);box-shadow:0 0 15px #ffffff4d}.color-option.selected{border-color:var(--accent-cyan);transform:scale(1.1);box-shadow:0 0 15px #00ffff80}.status-info{flex-direction:column;gap:.5rem;display:flex}.status-badge{border-radius:20px;align-items:center;gap:.5rem;width:fit-content;padding:.5rem 1rem;font-size:.9rem;font-weight:600;display:inline-flex}.status-badge.authenticated{background:linear-gradient(135deg,var(--success),#059669);color:#fff}.status-badge.anonymous{background:linear-gradient(135deg,var(--warning),#d97706);color:#fff}.status-info small{color:var(--text-secondary);font-size:.8rem}.profile-actions{border-top:1px solid var(--border-color);justify-content:flex-end;gap:1rem;padding:1.5rem;display:flex}.save-btn{padding:.75rem 1.5rem}.cancel-btn{border:1px solid var(--border-color);color:var(--text-secondary);background:0 0;padding:.75rem 1.5rem}.cancel-btn:hover{background:var(--hover-bg);color:var(--text-primary);box-shadow:none;transform:none}.chat-interface{background:var(--bg-primary);height:100vh;display:flex}.main-content{flex-direction:column;flex:1;min-width:0;display:flex}#root{text-align:left;width:100%;height:100vh;margin:0;padding:0}.App{flex-direction:column;width:100%;height:100vh;display:flex}