*{box-sizing:border-box;margin:0;padding:0}:root{--bg-deep: #0a0a0f;--bg-surface: #12121a;--bg-glass: rgba(255, 255, 255, .04);--bg-glass-hover: rgba(255, 255, 255, .07);--bg-glass-border: rgba(255, 255, 255, .08);--accent-cyan: #00d4ff;--accent-purple: #8b5cf6;--accent-gradient: linear-gradient(135deg, #00d4ff, #8b5cf6);--accent-gradient-reverse: linear-gradient(135deg, #8b5cf6, #00d4ff);--text-primary: #e4e4e7;--text-secondary: #71717a;--text-muted: #52525b;--success: #10b981;--danger: #ef4444;--admin-badge: #f59e0b;--radius-sm: .375rem;--radius-md: .75rem;--radius-lg: 1rem;--radius-xl: 1.25rem;--glass-blur: blur(20px);--transition-fast: .15s ease;--transition-normal: .25s ease;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", "Courier New", monospace}::selection{background:#00d4ff4d;color:#fff}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#fff3}body{font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg-deep);color:var(--text-primary);line-height:1.6}#app{min-height:100vh}@keyframes meshFloat1{0%,to{transform:translate(0) scale(1)}33%{transform:translate(30px,-50px) scale(1.05)}66%{transform:translate(-20px,20px) scale(.95)}}@keyframes meshFloat2{0%,to{transform:translate(0) scale(1)}33%{transform:translate(-40px,30px) scale(1.1)}66%{transform:translate(25px,-40px) scale(.9)}}@keyframes meshFloat3{0%,to{transform:translate(0) scale(1)}33%{transform:translate(20px,40px) scale(.95)}66%{transform:translate(-30px,-30px) scale(1.05)}}@keyframes fadeSlideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes typingBounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-6px)}}@keyframes glowPulse{0%,to{box-shadow:0 0 #00d4ff00}50%{box-shadow:0 0 0 4px #00d4ff26}}@keyframes charPop{0%{opacity:0;transform:scale(.5) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes reactionPop{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes slideInRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}.mesh-blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.35;pointer-events:none;will-change:transform}.mesh-blob--1{width:400px;height:400px;background:#00d4ff4d;top:-10%;left:-5%;animation:meshFloat1 20s ease-in-out infinite}.mesh-blob--2{width:350px;height:350px;background:#8b5cf64d;top:40%;right:-8%;animation:meshFloat2 25s ease-in-out infinite}.mesh-blob--3{width:300px;height:300px;background:#00d4ff33;bottom:-10%;left:30%;animation:meshFloat3 18s ease-in-out infinite}.home{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:1.5rem;text-align:center;position:relative;overflow:hidden}.home-logo{width:56px;height:56px;background:var(--accent-gradient);clip-path:polygon(50% 0%,100% 100%,0% 100%);margin-bottom:1.25rem;animation:fadeSlideUp .6s ease backwards}.home h1{font-size:2.5rem;font-weight:800;letter-spacing:-.02em;margin-bottom:.5rem;background:linear-gradient(135deg,#00d4ff,#8b5cf6,#00d4ff);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradientShift 4s ease infinite,fadeSlideUp .6s ease .1s backwards}.home-tagline{color:var(--text-secondary);margin-bottom:.75rem;font-size:.95rem;animation:fadeSlideUp .6s ease .2s backwards}.home-badge{display:inline-flex;align-items:center;gap:.375rem;padding:.3rem .75rem;background:var(--bg-glass);border:1px solid var(--bg-glass-border);border-radius:2rem;font-size:.75rem;color:var(--accent-cyan);margin-bottom:2rem;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);animation:fadeSlideUp .6s ease .3s backwards}.home-badge-dot{width:6px;height:6px;background:var(--accent-cyan);border-radius:50%;animation:pulse 2s ease-in-out infinite}.home-card{background:var(--bg-glass);border:1px solid var(--bg-glass-border);border-radius:var(--radius-xl);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);padding:2rem;width:100%;max-width:420px;animation:fadeSlideUp .6s ease .4s backwards}.home-actions{display:flex;flex-direction:column;gap:.75rem;width:100%}.room-code-display{display:flex;justify-content:center;gap:.5rem;margin:1rem 0}.room-code-char{display:inline-flex;align-items:center;justify-content:center;width:44px;height:52px;background:var(--bg-glass);border:1px solid rgba(0,212,255,.3);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:1.5rem;font-weight:700;color:var(--accent-cyan);animation:charPop .35s ease backwards}.room-code-char:nth-child(1){animation-delay:.05s}.room-code-char:nth-child(2){animation-delay:.1s}.room-code-char:nth-child(3){animation-delay:.15s}.room-code-char:nth-child(4){animation-delay:.2s}.room-code-char:nth-child(5){animation-delay:.25s}.room-code-char:nth-child(6){animation-delay:.3s}button{padding:.75rem 1.5rem;font-size:.9rem;font-weight:600;font-family:var(--font-sans);border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal);white-space:nowrap}.btn-primary{background:var(--accent-gradient);color:#fff;box-shadow:0 4px 20px #00d4ff33}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 28px #00d4ff59}.btn-primary:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}.btn-secondary{background:var(--bg-glass);color:var(--text-primary);border:1px solid var(--bg-glass-border);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}.btn-secondary:hover{background:var(--bg-glass-hover);border-color:#ffffff26}.btn-small{padding:.25rem .5rem;font-size:.75rem;background:var(--accent-gradient);color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer}.ip-restriction-active{background:linear-gradient(135deg,#4caf50,#45a049)!important;box-shadow:0 0 10px #4caf5080}input{padding:.75rem 1rem;font-size:.95rem;font-family:var(--font-sans);background:var(--bg-glass);border:1px solid var(--bg-glass-border);border-radius:var(--radius-md);color:var(--text-primary);width:100%;outline:none;transition:all var(--transition-normal)}input::placeholder{color:var(--text-muted)}input:focus{border-color:#00d4ff66;animation:glowPulse 2s ease-in-out infinite}.input-group{display:flex;flex-direction:column;gap:.4rem;margin-bottom:.75rem;text-align:left}.input-group label{font-size:.8rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.input-code{text-align:center;font-family:var(--font-mono);font-size:1.25rem;font-weight:700;letter-spacing:.3rem;text-transform:uppercase}.chat-room{display:flex;flex-direction:column;height:100vh;background:var(--bg-deep)}.chat-header{background:#12121acc;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--bg-glass-border);color:var(--text-primary);padding:.75rem 1rem;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;z-index:10}.chat-header-left{display:flex;align-items:center;gap:.75rem}.chat-header-right{display:flex;align-items:center;gap:.5rem}.chat-header h2{font-size:1rem;font-weight:700;color:var(--text-primary)}.chat-header-info{font-size:.8rem;color:var(--text-secondary)}.room-code-badge{display:inline-flex;align-items:center;padding:.2rem .6rem;background:var(--bg-glass);border:1px solid var(--bg-glass-border);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:.85rem;font-weight:700;color:var(--accent-cyan);letter-spacing:.1em}.connection-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.connection-dot--connected{background:var(--success);animation:pulse 2s ease-in-out infinite}.connection-dot--disconnected{background:var(--danger)}.sidebar-toggle{display:none;padding:.4rem .6rem;font-size:1.1rem;background:var(--bg-glass);border:1px solid var(--bg-glass-border);border-radius:var(--radius-sm);color:var(--text-primary);cursor:pointer;line-height:1}.chat-main{display:flex;flex:1;overflow:hidden}.chat-content{flex:1;display:flex;flex-direction:column;overflow:hidden}.pinned-messages{background:#f59e0b14;border-bottom:1px solid rgba(245,158,11,.15);padding:.6rem 1rem;font-size:.8rem;color:var(--admin-badge)}.messages-container{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.5rem}.message{display:flex;gap:.6rem;padding:.6rem .75rem;background:var(--bg-glass);border:1px solid var(--bg-glass-border);border-radius:var(--radius-md);word-wrap:break-word;animation:fadeInUp .3s ease backwards;transition:background var(--transition-fast);position:relative}.message:hover{background:var(--bg-glass-hover)}.message--pinned{border-left:3px solid var(--admin-badge)}.message--own{background:#00d4ff0a;border-color:#00d4ff1a}.message-avatar{width:34px;height:34px;border-radius:50%;background:var(--accent-gradient);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:#fff;flex-shrink:0;text-transform:uppercase}.message-body{flex:1;min-width:0}.message-header{display:flex;align-items:center;gap:.5rem;font-size:.8rem;margin-bottom:.15rem}.message-author{font-weight:600;color:var(--text-primary)}.admin-badge{background:#f59e0b26;color:var(--admin-badge);padding:.1rem .35rem;border-radius:var(--radius-sm);font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.message-time{color:var(--text-muted);font-size:.7rem;margin-left:auto}.message-content{color:var(--text-primary);line-height:1.5;font-size:.9rem}.message-content p{margin-bottom:.4rem}.message-content p:last-child{margin-bottom:0}.message-content pre{background:#0006;color:#e4e4e7;padding:.75rem;border-radius:var(--radius-sm);overflow-x:auto;margin:.4rem 0;border:1px solid var(--bg-glass-border)}.message-content code{background:#ffffff14;padding:.125rem .3rem;border-radius:.2rem;font-family:var(--font-mono);font-size:.825rem}.message-content pre code{background:transparent;padding:0}.message-actions{display:flex;gap:.3rem;margin-top:.4rem;flex-wrap:wrap;opacity:0;height:0;overflow:hidden;transition:opacity var(--transition-fast),height var(--transition-fast)}.message:hover .message-actions{opacity:1;height:auto;overflow:visible}.message-action-btn{padding:.2rem .4rem;font-size:.8rem;background:var(--bg-glass);border:1px solid var(--bg-glass-border);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);color:var(--text-primary);line-height:1}.message-action-btn:hover{background:var(--bg-glass-hover);border-color:#ffffff26}.reactions{display:flex;gap:.3rem;flex-wrap:wrap;margin-top:.4rem}.reaction{display:flex;align-items:center;gap:.2rem;padding:.2rem .5rem;background:var(--bg-glass);border:1px solid var(--bg-glass-border);border-radius:1rem;font-size:.8rem;cursor:pointer;transition:all var(--transition-fast);color:var(--text-primary)}.reaction:hover{background:var(--bg-glass-hover)}.reaction.user-reacted{background:#00d4ff1f;border-color:#00d4ff4d;color:var(--accent-cyan)}.reaction.user-reacted:hover{background:#00d4ff33}.chat-input{border-top:1px solid var(--bg-glass-border);padding:.75rem 1rem;background:#12121a99;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);flex-shrink:0}.chat-input-container{display:flex;gap:.5rem;align-items:flex-end}.chat-input textarea{flex:1;padding:.7rem .85rem;border:1px solid var(--bg-glass-border);border-radius:var(--radius-md);resize:none;font-family:var(--font-sans);font-size:.9rem;outline:none;min-height:44px;max-height:150px;background:var(--bg-glass);color:var(--text-primary);transition:border-color var(--transition-normal)}.chat-input textarea::placeholder{color:var(--text-muted)}.chat-input textarea:focus{border-color:#00d4ff66;animation:glowPulse 2s ease-in-out infinite}.chat-sidebar{width:240px;border-left:1px solid var(--bg-glass-border);background:var(--bg-surface);padding:1rem;overflow-y:auto;flex-shrink:0}.chat-sidebar h3{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.75rem;color:var(--text-secondary)}.sidebar-close{display:none;position:absolute;top:.75rem;right:.75rem;padding:.3rem .5rem;background:var(--bg-glass);border:1px solid var(--bg-glass-border);border-radius:var(--radius-sm);color:var(--text-primary);font-size:1rem;cursor:pointer;line-height:1}.user-list{display:flex;flex-direction:column;gap:.35rem}.user-item{display:flex;align-items:center;gap:.6rem;padding:.45rem .5rem;background:var(--bg-glass);border:1px solid var(--bg-glass-border);border-radius:var(--radius-md);font-size:.825rem;color:var(--text-primary)}.user-avatar{width:30px;height:30px;border-radius:50%;background:var(--accent-gradient);display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;color:#fff;text-transform:uppercase;position:relative;flex-shrink:0}.user-avatar .user-status{position:absolute;bottom:-1px;right:-1px;width:9px;height:9px;background:var(--success);border-radius:50%;border:2px solid var(--bg-surface);animation:pulse 2s ease-in-out infinite}.user-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.typing-indicator{padding:.4rem 1rem;font-size:.8rem;color:var(--text-secondary);display:flex;align-items:center;gap:.4rem}.typing-indicator-text{font-style:italic}.typing-dots{display:inline-flex;gap:3px;align-items:center}.typing-dot{width:5px;height:5px;background:var(--text-secondary);border-radius:50%;animation:typingBounce 1.2s ease-in-out infinite}.typing-dot:nth-child(2){animation-delay:.15s}.typing-dot:nth-child(3){animation-delay:.3s}.error{background:#ef44441a;color:#fca5a5;border:1px solid rgba(239,68,68,.2);padding:.75rem 1rem;border-radius:var(--radius-md);margin-bottom:.75rem;font-size:.85rem}.success{background:#10b9811a;color:#6ee7b7;border:1px solid rgba(16,185,129,.2);padding:.75rem 1rem;border-radius:var(--radius-md);margin-bottom:.75rem;font-size:.85rem}.loading{display:flex;align-items:center;justify-content:center;min-height:100vh}.spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.08);border-top-color:var(--accent-cyan);border-radius:50%;animation:spin 1s linear infinite}.code-block{background:var(--bg-glass);border:1px solid var(--bg-glass-border);padding:1rem;border-radius:var(--radius-md);margin:1rem 0;text-align:center}.code-block code{font-size:2rem;font-weight:700;letter-spacing:.5rem;font-family:var(--font-mono);color:var(--accent-cyan)}.theme-toggle{padding:.4rem .6rem;background:var(--bg-glass);border:1px solid var(--bg-glass-border);border-radius:var(--radius-sm);color:var(--text-primary);cursor:pointer;font-size:1rem;line-height:1;transition:all var(--transition-fast)}.theme-toggle:hover{background:var(--bg-glass-hover)}.home-theme-toggle{position:absolute;top:1rem;right:1rem;z-index:10}[data-theme=light]{--bg-deep: #f5f5f7;--bg-surface: #ffffff;--bg-glass: rgba(0, 0, 0, .03);--bg-glass-hover: rgba(0, 0, 0, .06);--bg-glass-border: rgba(0, 0, 0, .1);--text-primary: #1a1a2e;--text-secondary: #6b7280;--text-muted: #9ca3af}[data-theme=light] ::selection{background:#00d4ff33;color:#1a1a2e}[data-theme=light] ::-webkit-scrollbar-thumb{background:#0000001f}[data-theme=light] ::-webkit-scrollbar-thumb:hover{background:#0003}[data-theme=light] .mesh-blob--1{background:#00d4ff1f}[data-theme=light] .mesh-blob--2{background:#8b5cf61f}[data-theme=light] .mesh-blob--3{background:#00d4ff14}[data-theme=light] .chat-header{background:#ffffffd9}[data-theme=light] .chat-input{background:#ffffffb3}[data-theme=light] .message--own{background:#00d4ff0f;border-color:#00d4ff26}[data-theme=light] .message-content pre{background:#1e1e2e;color:#e4e4e7}[data-theme=light] .message-content code{background:#0000000f}[data-theme=light] .message-action-btn:hover{border-color:#00000026}[data-theme=light] .btn-secondary:hover{border-color:#0003}[data-theme=light] .error{background:#ef444414;color:#b91c1c;border-color:#ef444433}[data-theme=light] .success{background:#10b98114;color:#065f46;border-color:#10b98133}[data-theme=light] .spinner{border-color:#00000014;border-top-color:var(--accent-cyan)}[data-theme=light] .sidebar-overlay{background:#0000004d}.sidebar-overlay{display:none}@media (max-width: 768px){.home h1{font-size:2rem}.home-card{padding:1.5rem}.mesh-blob{opacity:.2}.mesh-blob--1{width:250px;height:250px}.mesh-blob--2{width:200px;height:200px}.mesh-blob--3{width:180px;height:180px}.chat-sidebar{position:fixed;top:0;right:0;bottom:0;width:280px;z-index:100;transform:translate(100%);transition:transform .3s ease}.chat-sidebar--open{transform:translate(0)}.sidebar-close{display:block}.sidebar-toggle{display:flex;align-items:center;justify-content:center}.sidebar-overlay{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:99;opacity:0;pointer-events:none;transition:opacity .3s ease}.sidebar-overlay--visible{opacity:1;pointer-events:auto}.chat-header{padding:.6rem .75rem}.chat-header h2{font-size:.9rem}.messages-container,.message{padding:.5rem}.chat-input{padding:.5rem .75rem}.message-actions{opacity:1;height:auto;overflow:visible}}