.login-wrapper{align-items:center;background:linear-gradient(135deg,#1a1a2e,#16213e 50%,#0f0f1a);display:flex;justify-content:center;min-height:100vh;overflow:hidden;position:relative}.login-wrapper:before{animation:rotate 20s linear infinite;background:radial-gradient(circle at 20% 50%,#00d1ff1a 0,#0000 50%);content:"";height:200%;pointer-events:none;position:absolute;width:200%}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.login-card{animation:slideUp .5s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#1a1a2ef2;border-radius:24px;box-shadow:0 20px 60px #0000004d,0 0 0 1px #00d1ff1a;max-width:90%;padding:40px;text-align:center;width:400px;z-index:1}.login-logo h2{color:#00d1ff;font-size:28px;letter-spacing:2px;margin-bottom:8px;text-shadow:0 0 20px #00d1ff4d}.subtitle{color:#8892b0;font-size:14px;margin-bottom:30px}.error-msg{align-items:center;animation:shake .5s ease;background:#ff4d4d1a;border:1px solid #ff4d4d4d;border-radius:12px;color:#ff6b6b;display:flex;font-size:14px;gap:8px;justify-content:center;margin-bottom:20px;padding:12px}@keyframes shake{0%,to{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}.input-group{margin-bottom:20px}.login-card input{background:#0f0f1acc;border:1px solid #00d1ff33;border-radius:12px;color:#fff;font-size:16px;outline:none;padding:14px 16px;transition:all .3s;width:100%}.login-card input:focus{background:#0f0f1a;border-color:#00d1ff;box-shadow:0 0 0 3px #00d1ff1a}.login-card input::placeholder{color:#4a5568}.login-card input:disabled{cursor:not-allowed;opacity:.5}.join-btn{background:linear-gradient(135deg,#00d1ff,#00a8cc);border:none;border-radius:12px;color:#fff;cursor:pointer;font-size:16px;font-weight:700;overflow:hidden;padding:14px;position:relative;transition:all .3s;width:100%}.join-btn:hover:not(:disabled){box-shadow:0 10px 20px #00d1ff4d;transform:translateY(-2px)}.join-btn:active:not(:disabled){transform:translateY(0)}.join-btn:disabled{cursor:not-allowed;opacity:.7}.btn-content{align-items:center;display:flex;gap:8px;justify-content:center}.spinner{animation:spin .8s linear infinite;border:2px solid #ffffff4d;border-radius:50%;border-top-color:#fff;height:18px;width:18px}.login-footer{margin-top:24px}.info-text{color:#4a5568;font-size:12px;margin-bottom:16px}.demo-users{border-top:1px solid #00d1ff1a;padding-top:16px;text-align:left}.demo-users span{color:#8892b0;display:block;font-size:12px;margin-bottom:10px}.demo-buttons{display:flex;flex-wrap:wrap;gap:10px}.demo-buttons button{background:#00d1ff1a;border:1px solid #00d1ff33;border-radius:8px;color:#00d1ff;cursor:pointer;flex:1 1;font-size:12px;padding:8px 12px;transition:all .2s}.demo-buttons button:hover{background:#00d1ff33;transform:translateY(-1px)}@media (max-width:480px){.login-card{padding:30px 20px}.login-logo h2{font-size:24px}.demo-buttons{flex-direction:column}.demo-buttons button{width:100%}}.chat-window{background:#0a0a1a;display:flex;flex-direction:column;height:100%;overflow:hidden;width:100%}.chat-header-info{background:#1a1a2e;border-bottom:1px solid #2a2a3a;flex-shrink:0;padding:12px 16px;position:sticky;top:0;z-index:10}.chat-header-info h3{color:#00d1ff;font-size:16px;margin:0}.chat-with{color:#8892b0;display:block;font-size:12px;margin-top:4px}.messages-container{display:flex;flex:1 1;flex-direction:column;gap:8px;min-height:0;overflow-y:auto;padding:16px;scroll-behavior:smooth}.message{align-items:baseline;animation:fadeIn .2s ease-in;border-radius:4px;display:flex;flex-wrap:wrap;gap:8px;padding:4px 8px;transition:background .2s}.message:hover{background:#ffffff0d}.message-username{cursor:pointer;flex-shrink:0;font-size:14px;font-size:var(--chat-font-size,14px);font-weight:600;transition:opacity .2s}.message-username:hover{opacity:.8;text-decoration:underline}.message-text{color:#fff;color:var(--chat-font-color,#fff);flex:1 1;font-size:14px;font-size:var(--chat-font-size,14px);word-break:break-word}.system-message{justify-content:center;opacity:.6;text-align:center}.system-text{background:#0000;font-size:12px;font-style:italic;padding:4px 8px}.empty-chat{align-items:center;background:#0a0a1a;display:flex;flex-direction:column;height:100%;justify-content:center;text-align:center}.empty-icon{font-size:48px;margin-bottom:16px;opacity:.5}.empty-chat-message p{color:#8892b0;margin:8px 0}.empty-subtitle{font-size:12px;opacity:.7}.emoji-button{background:#0000;border-radius:4px;font-size:20px;padding:8px;transition:background .2s}.emoji-button:hover{background:#ffffff1a}.emoji-picker{border-radius:8px;box-shadow:0 4px 12px #0000004d;grid-template-columns:repeat(4,1fr);max-height:280px;padding:8px;width:220px}.emoji-item{align-items:center;background:#0000;border:none;border-radius:4px;cursor:pointer;display:flex;font-size:24px;justify-content:center;padding:6px;transition:all .2s}.emoji-item:hover{background:#ffffff1a;transform:scale(1.1)}.emoji-item img{height:28px;object-fit:contain;width:28px}.no-emojis{grid-column:span 4;padding:16px}.input-area-fixed{flex-shrink:0;padding:16px}.input-wrapper{gap:8px}.message-input{background:#0a0a1a;border:1px solid #2a2a3a;border-radius:8px;padding:10px 12px;transition:border-color .2s}.message-input:focus{border-color:#00d1ff}.send-button{background:#00d1ff;border-radius:8px;color:#1a1a2e;padding:10px 24px}.send-button:hover:not(:disabled){background:#00b8e6;transform:translateY(-1px)}.send-button:disabled{cursor:not-allowed;opacity:.5}@media (max-width:768px){.message{gap:6px;padding:4px 6px}.message-username{font-size:13px}.message-text{font-size:14px}.chat-header-info{padding:10px 12px}.chat-header-info h3{font-size:14px}.chat-input-container{background:#1a1a2e;border-top:1px solid #2a2a3a;flex-shrink:0;padding:16px}.input-wrapper{align-items:flex-end;display:flex;gap:12px}.chat-input{background:#0a0a1a;border:1px solid #2a2a3a;border-radius:12px;color:#fff;flex:1 1;font-family:inherit;font-size:14px;line-height:1.4;max-height:120px;min-height:44px;padding:12px 16px;resize:none;transition:all .2s ease}.chat-input:focus{border-color:#00d1ff;box-shadow:0 0 0 2px #00d1ff1a;outline:none}.chat-input::placeholder{color:#8892b0;opacity:.7}.send-button{align-items:center;background:linear-gradient(135deg,#00d1ff,#00a8cc);border:none;border-radius:12px;color:#1a1a2e;cursor:pointer;display:flex;font-size:14px;font-weight:600;gap:8px;min-height:44px;padding:12px 24px;transition:all .2s;white-space:nowrap}.send-button:hover:not(:disabled){background:linear-gradient(135deg,#00b8e6,#09c);box-shadow:0 4px 12px #00d1ff4d;transform:translateY(-2px)}.send-button:active:not(:disabled){transform:translateY(0)}.send-button:disabled{cursor:not-allowed;opacity:.5;transform:none}.send-icon{font-size:16px}.typing-indicator{align-items:center;animation:fadeIn .3s ease;color:#8892b0;display:flex;font-size:12px;gap:6px;margin-top:8px;padding:4px 8px}.typing-dots{display:flex;gap:2px}.typing-dots span{animation:typingDot 1.4s infinite;opacity:0}.typing-dots span:first-child{animation-delay:0s}.typing-dots span:nth-child(2){animation-delay:.2s}.typing-dots span:nth-child(3){animation-delay:.4s}@keyframes typingDot{0%,60%,to{opacity:0;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}.input-hint{align-items:center;color:#8892b0;display:flex;font-size:11px;justify-content:space-between;margin-top:8px;padding:0 8px}.keyboard-hint{background:#ffffff0d;border-radius:4px;font-family:monospace;padding:2px 6px}@media (max-width:768px){.chat-input-container{padding:12px}.input-wrapper{gap:8px}.chat-input{font-size:15px;padding:10px 12px}.send-button{font-size:13px;padding:10px 16px}.send-icon{font-size:14px}.input-hint{align-items:flex-start;flex-direction:column;font-size:10px;gap:4px}.keyboard-hint{font-size:9px}}@media (prefers-color-scheme:dark){.chat-input-container{background:#1a1a2e}.chat-input{background:#0a0a1a;border-color:#2a2a3a}}.messages-container{padding:12px}.emoji-picker{grid-template-columns:repeat(4,1fr);left:auto;right:0;width:200px}.send-button{padding:8px 16px}}.settings-overlay{align-items:center;animation:fadeIn .2s ease;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#000c;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:2000}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.settings-modal{animation:slideUp .3s ease;background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid #00d1ff4d;border-radius:20px;box-shadow:0 20px 40px #0006;max-height:80vh;max-width:90%;overflow:hidden;width:500px}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.settings-header{align-items:center;background:#0000004d;border-bottom:1px solid #2a2a3a;display:flex;justify-content:space-between;padding:20px 24px}.settings-header h2{color:#00d1ff;font-size:20px;margin:0}.close-btn{background:none;border:none;color:#8892b0;cursor:pointer;font-size:28px;line-height:1;transition:all .2s}.close-btn:hover{color:#f44;transform:scale(1.1)}.settings-content{max-height:60vh;overflow-y:auto;padding:24px}.setting-group{margin-bottom:28px}.setting-group label{color:#fff;display:block;font-size:14px;font-weight:600;margin-bottom:12px}.color-preview-row{align-items:center;display:flex;gap:16px}.color-input{border:2px solid #2a2a3a;cursor:pointer;height:50px;width:50px}.color-input,.preview-text{background:#0f0f1a;border-radius:12px}.preview-text{border:1px solid #2a2a3a;flex:1 1;font-size:16px;padding:10px 16px}.font-size-slider{-webkit-appearance:none;background:#2a2a3a;border-radius:2px;height:4px;margin:16px 0;width:100%}.font-size-slider::-webkit-slider-thumb{-webkit-appearance:none;background:#00d1ff;border-radius:50%;box-shadow:0 0 6px #00d1ff;cursor:pointer;height:16px;width:16px}.font-size-preview{background:#0f0f1a;border:1px solid #2a2a3a;border-radius:12px;margin-top:8px;padding:12px}.theme-grid{grid-gap:12px;display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}.theme-card{align-items:center;background:#0f0f1a;border:2px solid #2a2a3a;border-radius:12px;cursor:pointer;display:flex;gap:12px;padding:12px;position:relative;transition:all .2s}.theme-card:hover{transform:translateY(-2px)}.theme-card.active{background:#00d1ff1a;border-color:#00d1ff}.theme-preview{border-radius:50%;height:24px;width:24px}.theme-card span{flex:1 1;font-size:14px}.check-mark{color:#00ff9d;font-weight:700}.settings-footer{background:#0003;border-top:1px solid #2a2a3a;display:flex;gap:12px;padding:20px 24px}.cancel-btn,.save-btn{border:none;border-radius:12px;cursor:pointer;flex:1 1;font-weight:600;padding:12px;transition:all .2s}.cancel-btn{background:#2a2a3a;color:#fff}.cancel-btn:hover{background:#3a3a4a}.save-btn{background:linear-gradient(135deg,#00d1ff,#00a8cc);color:#fff}.save-btn:hover{box-shadow:0 4px 12px #00d1ff4d;transform:translateY(-2px)}@media (max-width:480px){.settings-modal{width:95%}.settings-content{padding:16px}.theme-grid{grid-template-columns:1fr}}.main-chat-layout{background:linear-gradient(135deg,#1a1a2e,#16213e);color:#fff;display:flex;flex-direction:column;height:100vh;overflow:hidden}.connection-status{border-radius:20px;font-size:12px;font-weight:500;padding:4px 12px;position:fixed;right:10px;top:10px;z-index:1000}.connection-status.connected{background:#00ff9d20;border:1px solid #00ff9d50;color:#00ff9d}.connection-status.disconnected{background:#ff444420;border:1px solid #ff444450;color:#f44}.settings-button{background:#1a1a2e;border:1px solid #2a2a3a;border-radius:20px;color:#fff;cursor:pointer;font-size:14px;padding:6px 12px;position:fixed;right:120px;top:10px;transition:all .2s;z-index:1000}.settings-button:hover{background:#2a2a3a;border-color:#00d1ff}.toggle-users-btn{background:linear-gradient(135deg,#00d1ff,#00a8cc);border:none;border-radius:50%;bottom:80px;box-shadow:0 4px 12px #0000004d;color:#fff;cursor:pointer;display:none;font-size:24px;height:48px;position:fixed;right:16px;transition:all .2s;width:48px;z-index:1000}.tab-bar-container{-webkit-overflow-scrolling:touch;background:#0f0f1a;scrollbar-width:thin;white-space:nowrap}.tab-bar-container::-webkit-scrollbar{height:4px}.tab-bar-container::-webkit-scrollbar-track{background:#1a1a2e}.tab-bar-container::-webkit-scrollbar-thumb{background:#00d1ff;border-radius:2px}.tab-bar{min-width:100%;padding:0 8px}.tab,.tab-bar{display:inline-flex}.tab{background:#0000;font-size:14px;font-weight:500;gap:8px;padding:12px 20px;position:relative}.tab:hover{background:#00d1ff1a}.tab.active{color:#00d1ff}.tab.active:after{background:linear-gradient(90deg,#00d1ff,#00ff9d);bottom:0;content:"";height:2px;left:0;position:absolute;right:0}.tab-close{background:none;border:none;border-radius:4px;color:#8892b0;margin-left:4px;padding:0 4px;transition:all .2s}.tab-close:hover{background:#f443;color:#f44}.chat-main-content{background:#0f0f1a;display:flex;flex:1 1;gap:1px;min-height:0;overflow:hidden;position:relative}.chat-window-section{background:#1a1a2e;border-radius:12px;margin:8px 0 8px 8px;min-width:0}.chat-scroll-area{flex:1 1;overflow-y:auto;padding:16px}.input-area-fixed{background:#1a1a2e;border-top:1px solid #2a2a3a;padding:12px 16px}.input-wrapper{align-items:flex-end;background:#0f0f1a;border:1px solid #2a2a3a;border-radius:24px;display:flex;gap:12px;padding:8px 12px;transition:all .2s}.input-wrapper:focus-within{border-color:#00d1ff;box-shadow:0 0 0 2px #00d1ff33}.emoji-button{background:none;border:none;border-radius:50%;border-right:1px solid #2a2a3a;color:#8892b0;cursor:pointer;font-size:24px;margin-right:4px;padding:4px 12px 4px 4px;transition:all .2s}.emoji-button:hover{background:#00d1ff1a;transform:scale(1.1)}.emoji-picker-container{position:relative}.emoji-picker{grid-gap:8px;background:#1a1a2e;border:1px solid #2a2a3a;border-radius:12px;bottom:100%;box-shadow:0 8px 24px #0000004d;display:grid;gap:8px;grid-template-columns:repeat(6,1fr);left:0;margin-bottom:8px;max-height:300px;overflow-y:auto;padding:12px;position:absolute;width:300px;z-index:1000}.emoji-picker button{align-items:center;background:none;border:none;border-radius:8px;cursor:pointer;display:flex;font-size:28px;justify-content:center;padding:8px;transition:all .1s}.emoji-picker button:hover{background:#00d1ff33;transform:scale(1.1)}.no-emojis{color:#8892b0;font-size:12px;grid-column:span 6;padding:20px;text-align:center}.message-input{background:#0000;border:none;color:#fff;flex:1 1;font-family:inherit;font-size:14px;line-height:1.4;max-height:100px;overflow-y:auto;padding:8px 0;resize:none}.message-input:focus{outline:none}.message-input::placeholder{color:#4a5568}.send-button{background:linear-gradient(135deg,#00d1ff,#00a8cc);border:none;border-radius:20px;color:#fff;cursor:pointer;font-weight:600;padding:8px 20px;transition:all .2s;white-space:nowrap}.send-button:hover{box-shadow:0 4px 12px #00d1ff4d;transform:translateY(-1px)}.user-list-sidebar{background:#0f0f1a;border-left:1px solid #2a2a3a;display:flex;flex-direction:column;max-width:280px;min-width:180px;overflow:hidden;position:relative;width:220px}.user-list-sidebar:after{background:#0000;bottom:0;content:"";cursor:ew-resize;left:-3px;position:absolute;top:0;transition:background .2s;width:6px}.user-list-sidebar:hover:after{background:#00d1ff4d}.resize-handle{background:#0000;bottom:0;cursor:ew-resize;left:-3px;position:absolute;top:0;transition:background .2s;width:6px;z-index:10}.resize-handle:hover{background:#00d1ff4d}.chat-window-section{display:flex;flex:1 1;flex-direction:column;overflow:hidden;position:relative}.tab-bar-container{background:#0a0a1a;border-bottom:1px solid #2a2a3a;flex-shrink:0;overflow-x:auto;overflow-y:hidden}.tab-bar{gap:4px;min-width:min-content}.tab,.tab-bar{display:flex;padding:8px 12px}.tab{align-items:center;background:#1a1a2e;border:none;border-radius:6px;color:#8892b0;cursor:pointer;font-size:13px;gap:6px;transition:all .2s;white-space:nowrap}.tab:hover{background:#2a2a3a;color:#fff}.tab.active{background:#00d1ff;color:#1a1a2e}.tab-close{cursor:pointer;font-size:16px;font-weight:700;margin-left:6px;opacity:.6;padding:0 2px}.tab-close:hover{opacity:1}.sidebar-overlay{background:#00000080;bottom:0;left:0;position:fixed;right:0;top:0;z-index:999}@media (max-width:768px){.user-list-sidebar{bottom:0;position:fixed;right:-280px;top:0;transition:right .3s ease;width:280px;z-index:1000}.user-list-sidebar.open{right:0}.toggle-users-btn{background:#00d1ff;border:none;border-radius:50%;bottom:20px;box-shadow:0 2px 8px #0000004d;cursor:pointer;display:flex;font-size:20px;height:50px;position:fixed;right:20px;width:50px;z-index:100}}@media (min-width:769px){.toggle-users-btn{display:none}}.sidebar-header{align-items:center;background:#1a1a2e;border-bottom:1px solid #2a2a3a;display:flex;flex-shrink:0;font-size:14px;font-weight:600;justify-content:space-between;letter-spacing:1px;padding:16px}.close-sidebar-btn{background:none;border:none;color:#fff;cursor:pointer;font-size:24px;padding:0 8px}.total-users{color:#888;font-size:12px;font-weight:400}.sidebar-users{flex:1 1;overflow-y:auto;padding:8px}.user-item{align-items:center;background:#1a1a2e;border-radius:8px;cursor:pointer;display:flex;gap:10px;margin:4px 0;padding:10px 12px;transition:all .2s}.user-item:hover{background:#2a2a3a;transform:translateX(4px)}.user-item.current-user{background:#2a2a3a;cursor:default;opacity:.7}.user-item.current-user:hover{transform:none}.status-dot{border-radius:50%;display:inline-block;height:8px;width:8px}.status-dot.online{animation:pulse 2s infinite;background:#00ff9d;box-shadow:0 0 6px #00ff9d}.status-dot.offline{background:#666}.user-nick-text{flex:1 1;font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.online-badge{color:#00ff9d;font-size:10px}.no-users{color:#666;font-size:14px;padding:32px;text-align:center}.loading-container{align-items:center;background:#1a1a2e;color:#fff;display:flex;flex-direction:column;height:100vh;justify-content:center}.loading-spinner{animation:spin 1s linear infinite;border:3px solid #2a2a3a;border-radius:50%;border-top-color:#00ff9d;height:40px;margin-bottom:16px;width:40px}@keyframes spin{to{transform:rotate(1turn)}}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#1a1a2e}::-webkit-scrollbar-thumb{background:#2a2a3a;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#3a3a4a}.message{color:#fff;color:var(--chat-font-color,#fff);font-size:14px;font-size:var(--chat-font-size,14px)}.message-username{color:#00d1ff;color:var(--nick-color,#00d1ff)}@media (max-width:768px){.toggle-users-btn{align-items:center;display:flex;justify-content:center}.user-list-sidebar{box-shadow:-4px 0 20px #0000004d;height:100vh;position:fixed;right:0;top:0;transform:translateX(100%);transition:transform .3s ease;width:280px;z-index:1050}.user-list-sidebar.open{transform:translateX(0)}.sidebar-overlay{background:#00000080;bottom:0;left:0;position:fixed;right:0;top:0;z-index:1040}.chat-window-section{border-radius:12px;margin:8px}.settings-button{font-size:12px;padding:4px 10px;right:70px;top:10px}.connection-status{font-size:10px;padding:3px 8px;right:10px;top:10px}.tab{font-size:12px;padding:10px 16px}.emoji-picker{grid-template-columns:repeat(5,1fr);max-height:250px;width:260px}.emoji-picker button{font-size:24px;padding:6px}}@media (max-width:480px){.tab{font-size:11px;padding:8px 12px}.chat-scroll-area{padding:12px}.input-wrapper{gap:8px;padding:6px 10px}.emoji-button{font-size:20px;padding:4px 8px 4px 4px}.send-button{font-size:12px;padding:6px 16px}.emoji-picker{grid-template-columns:repeat(4,1fr);max-height:200px;width:220px}.emoji-picker button{font-size:20px;padding:4px}.toggle-users-btn{bottom:70px;font-size:20px;height:40px;right:12px;width:40px}.user-list-sidebar{width:260px}.sidebar-header{font-size:12px;padding:12px}.user-item{padding:8px 10px}.user-nick-text{font-size:12px}}
/*# sourceMappingURL=main.e9c5f8dd.css.map*/