:root{--bg-primary:#0f0f0f;--bg-secondary:#181818;--bg-surface:#212121;--bg-hover:#272727;--bg-input:#1e1e1e;--bg-card:#212121d9;--text-primary:#f1f1f1;--text-secondary:#aaa;--text-muted:#717171;--text-link:#3ea6ff;--accent-red:#f03;--accent-red-hover:#cc0029;--accent-blue:#3ea6ff;--accent-green:#2ba640;--accent-purple:#a855f7;--border-subtle:#ffffff14;--border-active:#fff3;--font-main:"Roboto", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono:"JetBrains Mono", monospace;--chat-width:380px;--header-height:56px;--radius-sm:4px;--radius-md:8px;--radius-lg:14px;--radius-full:9999px;--shadow-elevated:0 8px 32px #00000073}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body.dark-theme{background-color:var(--bg-primary);color:var(--text-primary);font-family:var(--font-main);-webkit-font-smoothing:antialiased;flex-direction:column;width:100vw;height:100vh;display:flex;overflow:hidden}#root{flex-direction:column;width:100%;height:100%;display:flex;overflow:hidden}.app-header{height:var(--header-height);background-color:var(--bg-primary);border-bottom:1px solid var(--border-subtle);z-index:20;flex-shrink:0;justify-content:space-between;align-items:center;padding:0 16px;display:flex}.header-left,.header-right{align-items:center;gap:16px;display:flex}.brand-logo{cursor:pointer;align-items:center;gap:8px;text-decoration:none;display:flex}.brand-title{letter-spacing:-.5px;align-items:center;gap:6px;font-size:1.15rem;font-weight:700;display:flex}.brand-badge{background:var(--bg-surface);border:1px solid var(--border-active);color:var(--accent-red);border-radius:var(--radius-sm);letter-spacing:.5px;padding:2px 6px;font-size:.65rem;font-weight:700}.live-pill{border-radius:var(--radius-full);letter-spacing:.5px;border:1px solid var(--border-subtle);color:var(--text-muted);background-color:#ffffff0d;align-items:center;gap:6px;padding:4px 10px;font-size:.72rem;font-weight:700;transition:all .3s;display:flex}.live-pill.active{color:var(--accent-red);background-color:#ff003326;border-color:#f036}.live-dot{background-color:currentColor;border-radius:50%;width:7px;height:7px}.live-pill.active .live-dot{animation:1.5s infinite pulse}@keyframes pulse{0%{opacity:.6;transform:scale(.95)}50%{opacity:1;transform:scale(1.3)}to{opacity:.6;transform:scale(.95)}}.header-center{align-items:center;display:flex}.room-status-chip{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-full);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;padding:4px 12px;font-size:.85rem;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex}.room-status-chip:hover{background:var(--bg-hover);border-color:var(--accent-blue);transform:translateY(-1px);box-shadow:0 0 10px #3ea6ff33}.room-status-chip:active{transform:scale(.97)}.room-status-chip.copied{background:#00e67624;border-color:#00e67680}.chip-copied-text{color:#00e676;font-size:.72rem;font-weight:600;animation:.15s ease-out fadeIn}.chip-label{color:var(--text-muted);font-size:.75rem;font-weight:600}.chip-code{font-family:var(--font-mono);color:var(--accent-blue);letter-spacing:1px;font-weight:700}.chip-copy-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:4px;align-items:center;padding:4px;transition:all .2s;display:flex}.chip-copy-btn:hover{color:var(--text-primary)}.header-room-group{align-items:center;gap:8px;display:flex}.header-voice-chip{border-radius:var(--radius-full);cursor:pointer;-webkit-user-select:none;user-select:none;border:1px solid #0000;align-items:center;gap:6px;height:28px;padding:0 12px;font-size:.76rem;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-flex}.header-voice-chip.live{color:#00e676;background:#00e6761f;border-color:#00e67673}.header-voice-chip.live:hover{background:#00e67638;box-shadow:0 0 10px #00e6764d}.header-voice-chip.muted{color:var(--text-secondary);background:#ffffff0d;border-color:#ffffff26}.header-voice-chip.muted:hover{color:var(--text-primary);background:#ffffff1a;border-color:#ffffff40}.header-voice-chip.blocked{color:#f59e0b;background:#f59e0b24;border-color:#f59e0b73}.header-voice-chip.blocked:hover{background:#f59e0b3d;box-shadow:0 0 10px #f59e0b40}.voice-chip-dot{border-radius:50%;width:7px;height:7px;display:inline-block}.voice-chip-dot.live{background:#00e676;box-shadow:0 0 8px #00e676}.voice-chip-dot.muted{background:#666}.voice-chip-dot.blocked{background:#f59e0b;box-shadow:0 0 6px #f59e0b}.header-p2p-chip{border-radius:var(--radius-full);-webkit-user-select:none;user-select:none;color:#f59e0b;background:#f59e0b1a;border:1px solid #f59e0b59;align-items:center;gap:6px;max-width:280px;height:28px;padding:0 12px;font-size:.76rem;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-flex}.header-p2p-chip.connected{color:#00e676;background:#00e6761a;border-color:#00e67659}.p2p-chip-dot{background:#f59e0b;border-radius:50%;flex-shrink:0;width:7px;height:7px;box-shadow:0 0 6px #f59e0b}.header-p2p-chip.connected .p2p-chip-dot{background:#00e676;box-shadow:0 0 8px #00e676}.p2p-chip-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.header-action-btn{border-radius:var(--radius-full);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;border:1px solid #0000;align-items:center;gap:5px;height:28px;padding:0 12px;font-size:.76rem;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-flex}.header-action-btn.exit-video{color:#f56;background:#ff00331f;border-color:#ff003359}.header-action-btn.exit-video:hover{color:#fff;background:#ff003340;border-color:#f03;box-shadow:0 0 10px #ff00334d}.header-action-btn.leave-room{border-color:var(--border-subtle);color:var(--text-secondary);background:#ffffff0d}.header-action-btn.leave-room:hover{color:var(--accent-red);background:#ff003326;border-color:#f036}.header-action-btn:active{transform:scale(.96)}.server-config-wrapper{background-color:var(--bg-secondary);border-radius:var(--radius-full);border:1px solid var(--border-subtle);align-items:center;gap:8px;padding:3px 8px;display:flex}.signal-indicator{color:var(--text-muted);align-items:center;gap:6px;font-size:.75rem;display:flex}.signal-dot{background-color:#f59e0b;border-radius:50%;width:8px;height:8px;transition:background-color .3s}.signal-indicator.connected .signal-dot{background-color:var(--accent-green);box-shadow:0 0 8px #2ba64066}.signal-indicator.connected .signal-label{color:var(--text-secondary)}.icon-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:4px;transition:all .2s;display:flex}.icon-btn:hover{color:var(--text-primary);background-color:var(--bg-hover)}.user-profile-pill{align-items:center;gap:8px;display:flex}.user-avatar{color:#fff;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:.85rem;font-weight:700;display:flex}.user-name{color:var(--text-primary);font-size:.85rem;font-weight:500}.main-container{flex:1;display:flex;position:relative;overflow:hidden}.stage-section{background-color:var(--bg-primary);flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.room-bar-center{align-items:center;gap:8px;display:flex}.room-badge{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);align-items:center;gap:6px;padding:4px 10px;font-size:.82rem;transition:all .2s;display:inline-flex}.room-badge:hover{border-color:var(--border-active);background:var(--bg-hover)}.room-badge-code{font-family:var(--font-mono);color:var(--accent-blue);letter-spacing:1px;font-weight:700}.btn-copy-pill{border:1px solid var(--border-subtle);color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;background:0 0;align-items:center;gap:6px;padding:5px 10px;font-size:.78rem;transition:all .2s;display:inline-flex}.btn-copy-pill:hover{color:var(--text-primary);background:var(--bg-hover);border-color:var(--border-active)}.btn-exit-video-pill{color:#ff4d4d;border-radius:var(--radius-sm);cursor:pointer;background:#ff00331f;border:1px solid #ff003359;align-items:center;gap:6px;padding:5px 12px;font-size:.78rem;font-weight:600;transition:all .2s;display:inline-flex}.btn-exit-video-pill:hover{color:#fff;border-color:var(--accent-red);background:#ff003340}.btn-leave-pill{border:1px solid var(--border-subtle);color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;background:#ffffff0d;align-items:center;gap:6px;padding:5px 12px;font-size:.78rem;transition:all .2s;display:inline-flex}.btn-leave-pill:hover{color:var(--accent-red);background:#ff003326;border-color:#f036}.room-bar-voice-group{align-items:center;gap:6px;margin-left:4px;display:flex}.voice-pill-btn{cursor:pointer;-webkit-user-select:none;user-select:none;border:1px solid #0000;border-radius:12px;align-items:center;gap:5px;height:24px;padding:0 10px;font-size:.72rem;font-weight:600;transition:all .2s;display:inline-flex}.voice-pill-btn.live{color:#00e676;background:#00e6761f;border-color:#00e67659}.voice-pill-btn.live:hover{background:#00e6763d}.voice-pill-btn.muted{color:#888;background:#ffffff0d;border-color:#ffffff1f}.voice-pill-btn.muted:hover{color:#fff;background:#ffffff1a}.voice-pill-btn.blocked{color:#f59e0b;background:#f59e0b24;border-color:#f59e0b66}.voice-pill-btn.blocked:hover{background:#f59e0b3d}.voice-pill-dot{border-radius:50%;width:6px;height:6px}.voice-pill-dot.live{background:#00e676;box-shadow:0 0 6px #00e676}.voice-pill-dot.muted{background:#666}.voice-pill-dot.blocked{background:#f59e0b;box-shadow:0 0 6px #f59e0b}.stage-canvas{background:radial-gradient(circle,#161616 0%,#0d0d0d 100%);flex:1;justify-content:center;align-items:center;padding:12px 20px;display:flex;position:relative;overflow-y:auto}.stage-overlay{z-index:5;width:100%;max-width:560px}.stage-card{background:var(--bg-card);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-active);border-radius:var(--radius-lg);text-align:center;box-shadow:var(--shadow-elevated);padding:36px 32px}.stage-logo-ring{background:#ff003314;border:1px solid #f033;border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;margin:0 auto 20px;display:flex}.stage-title{letter-spacing:-.5px;margin-bottom:8px;font-size:1.6rem;font-weight:700}.stage-subtitle{color:var(--text-secondary);margin-bottom:28px;font-size:.95rem;line-height:1.5}.initial-actions{justify-content:center;gap:16px;display:flex}.active-room-display{margin-top:10px}.code-banner{background:var(--bg-secondary);border:1px solid var(--border-active);border-radius:var(--radius-md);margin-bottom:20px;padding:20px}.code-label{letter-spacing:1px;color:var(--text-muted);margin-bottom:12px;font-size:.72rem;font-weight:700}.code-digits{justify-content:center;gap:8px;margin-bottom:16px;display:flex}.digit-box{background:var(--bg-surface);border:2px solid var(--border-active);border-radius:var(--radius-sm);width:44px;height:54px;font-family:var(--font-mono);color:#fff;justify-content:center;align-items:center;font-size:1.8rem;font-weight:700;display:flex;box-shadow:inset 0 2px 4px #0006}.p2p-status-card{border-radius:var(--radius-full);color:var(--text-secondary);background:#ffffff08;justify-content:center;align-items:center;gap:10px;padding:10px 20px;font-size:.85rem;display:flex}.p2p-status-card.connected{color:var(--accent-green);background:#2ba6401f;border:1px solid #2ba6404d}.spinner-dot{background:var(--accent-blue);border-radius:50%;width:8px;height:8px;animation:1.2s infinite pulse}.p2p-status-card.connected .spinner-dot{background:var(--accent-green);animation:none}.stage-footer-note{color:var(--text-muted);justify-content:center;align-items:center;gap:8px;margin-top:24px;font-size:.78rem;display:flex}.stage-controls{background-color:var(--bg-secondary);border-top:1px solid var(--border-subtle);z-index:10;justify-content:space-between;align-items:center;height:56px;padding:0 20px;display:flex}.controls-left,.controls-right{align-items:center;gap:14px;display:flex}.peer-counter{color:var(--text-secondary);align-items:center;gap:6px;font-size:.8rem;display:flex}.p2p-badge{border-radius:var(--radius-full);background:var(--bg-surface);color:var(--text-muted);border:1px solid var(--border-subtle);letter-spacing:.5px;padding:3px 8px;font-size:.68rem;font-weight:700}.p2p-badge.active{color:var(--accent-green);background:#2ba64026;border-color:#2ba6404d}.controls-center{align-items:center;gap:12px;display:flex}.control-btn{background:var(--bg-surface);border:1px solid var(--border-subtle);width:40px;height:40px;color:var(--text-primary);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;transition:all .2s;display:flex}.control-btn:hover:not(:disabled){background:var(--bg-hover);border-color:var(--border-active)}.control-btn.disabled{opacity:.35;cursor:not-allowed}.control-btn.danger{color:var(--accent-red);background-color:#ff003326;border-color:#ff00334d}.control-btn.danger:hover{background-color:var(--accent-red);color:#fff}.control-btn.mic-live{color:#00e676;background-color:#00e67629;border-color:#00e67680;position:relative}.control-btn.mic-live:hover{background-color:#00e67647;border-color:#00e676;box-shadow:0 0 16px #00e67666}.control-btn.mic-muted{color:var(--text-secondary);background-color:#ffffff0d;border-color:#ffffff26}.control-btn.mic-muted:hover{color:#fff;background-color:#ffffff1a;border-color:#ffffff4d}.control-btn.audio-allowed{background-color:var(--bg-surface);color:var(--text-primary);border-color:var(--border-subtle)}.control-btn.audio-allowed:hover{background-color:var(--bg-hover);border-color:var(--border-active)}.control-btn.audio-blocked{color:#f59e0b;background-color:#f59e0b26;border-color:#f59e0b73}.control-btn.audio-blocked:hover{background-color:#f59e0b47;box-shadow:0 0 14px #f59e0b4d}.mic-pulse-wave{pointer-events:none;border:2px solid #00e67699;border-radius:50%;animation:1.8s cubic-bezier(.25,.46,.45,.94) infinite micPulseWave;position:absolute;inset:-4px}@keyframes micPulseWave{0%{opacity:.9;transform:scale(.95)}to{opacity:0;transform:scale(1.4)}}.chat-section{width:var(--chat-width);background-color:var(--bg-secondary);border-left:1px solid var(--border-subtle);z-index:15;flex-direction:column;flex-shrink:0;height:100%;transition:width .25s cubic-bezier(.4,0,.2,1);display:flex;position:relative}.chat-section.collapsed{border-left:none;width:0;overflow:hidden}.chat-header{border-bottom:1px solid var(--border-subtle);flex-shrink:0;justify-content:space-between;align-items:center;height:48px;padding:0 16px;display:flex}.chat-header-title-wrap{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:4px;display:flex}.chat-header-title{color:var(--text-primary);font-size:.95rem;font-weight:500}.dropdown-chevron{color:var(--text-secondary)}.chat-header-actions{align-items:center;gap:4px;display:flex}.header-icon-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:6px;transition:all .2s;display:flex}.header-icon-btn:hover{color:var(--text-primary);background-color:var(--bg-hover)}.chat-nav-tabs{background:var(--bg-surface);border-bottom:1px solid var(--border-subtle);flex-shrink:0;gap:4px;padding:0 4px;display:flex}.chat-tab-btn{height:40px;color:var(--text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;background:0 0;border:none;border-bottom:2px solid #0000;flex:1;justify-content:center;align-items:center;gap:7px;font-size:.82rem;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-flex;position:relative}.chat-tab-btn:hover{color:var(--text-primary);background:#ffffff08}.chat-tab-btn.active{color:var(--accent-blue);border-bottom-color:var(--accent-blue);background:#3ea6ff0a}.tab-badge{color:var(--accent-blue);background:#3ea6ff29;border-radius:12px;padding:1px 7px;font-size:.68rem;font-weight:700}.tab-badge.secondary{color:var(--text-secondary);background:#ffffff14}.tab-unread-dot{background:#00e676;border-radius:50%;width:6px;height:6px;position:absolute;top:8px;right:14px;box-shadow:0 0 6px #00e676}.tab-unread-dot.logs{background:#3ea6ff;box-shadow:0 0 6px #3ea6ff}.logs-panel-wrapper{background:var(--bg-secondary);flex-direction:column;flex:1;display:flex;overflow:hidden}.logs-header-bar{border-bottom:1px solid var(--border-subtle);color:var(--text-muted);background:#00000040;flex-shrink:0;justify-content:space-between;align-items:center;padding:8px 14px;font-size:.75rem;display:flex}.logs-count-label{align-items:center;gap:6px;font-weight:500;display:inline-flex}.logs-count-dot{background:#3ea6ff;border-radius:50%;width:6px;height:6px}.btn-clear-logs{border:1px solid var(--border-subtle);color:var(--text-secondary);cursor:pointer;background:#ffffff0d;border-radius:4px;padding:3px 9px;font-size:.72rem;transition:all .2s}.btn-clear-logs:hover{color:var(--accent-red);background:#ff00331f;border-color:#f036}.room-logs-container{flex:1;padding:12px 14px;overflow-y:auto}.room-logs-container::-webkit-scrollbar{width:6px}.room-logs-container::-webkit-scrollbar-thumb{background-color:#ffffff1f;border-radius:3px}.room-logs-list{flex-direction:column;gap:6px;display:flex}.room-log-item{border-radius:var(--radius-sm);color:#cfd8dc;background:#ffffff06;border:1px solid #ffffff0d;align-items:flex-start;gap:10px;padding:7px 10px;font-size:.78rem;line-height:1.45;transition:all .15s;display:flex}.room-log-item:hover{background:#ffffff0d;border-color:#ffffff1a}.room-log-item.log-cat-video{border-left:2px solid #f03}.room-log-item.log-cat-playback{border-left:2px solid #3ea6ff}.room-log-item.log-cat-voice{border-left:2px solid #00e676}.room-log-item.log-cat-room{border-left:2px solid #f59e0b}.room-log-item.log-cat-media{border-left:2px solid #a855f7}.room-log-time{font-family:var(--font-mono);color:var(--text-muted);white-space:nowrap;flex-shrink:0;margin-top:2px;font-size:.68rem}.room-log-content{word-break:break-word;flex:1}.chat-empty-state{text-align:center;height:100%;min-height:200px;color:var(--text-muted);flex-direction:column;flex:1;justify-content:center;align-items:center;padding:40px 20px;display:flex}.empty-state-icon{opacity:.85;margin-bottom:10px;font-size:2.2rem}.empty-state-title{color:var(--text-secondary);margin-bottom:4px;font-size:.95rem;font-weight:600}.empty-state-subtitle{max-width:220px;color:var(--text-muted);font-size:.78rem;line-height:1.45}.pinned-banner{color:#cfd8dc;background:#1c2b39;border-bottom:1px solid #3ea6ff33;flex-shrink:0;align-items:flex-start;gap:10px;padding:8px 14px;font-size:.78rem;line-height:1.4;display:flex}.pinned-icon{margin-top:1px}.audio-blocked-chat-banner{color:#fcd34d;background:#f59e0b1f;border-bottom:1px solid #f59e0b4d;flex-shrink:0;justify-content:space-between;align-items:center;gap:10px;padding:8px 14px;font-size:.76rem;display:flex}.blocked-banner-left{align-items:center;gap:8px;display:flex}.btn-unblock-audio{color:#fff;cursor:pointer;white-space:nowrap;background:#f59e0b40;border:1px solid #f59e0b80;border-radius:4px;padding:3px 10px;font-size:.72rem;font-weight:600;transition:all .2s}.btn-unblock-audio:hover{background:#f59e0b73;border-color:#f59e0b}.chat-messages-container{scroll-behavior:smooth;flex:1;position:relative;overflow-y:auto}.chat-messages-container::-webkit-scrollbar{width:6px}.chat-messages-container::-webkit-scrollbar-thumb{background-color:#ffffff26;border-radius:3px}.chat-messages-inner{flex-direction:column;gap:8px;padding:12px 16px;display:flex}.yt-message{border-radius:4px;align-items:flex-start;gap:12px;padding:4px 6px;font-size:.85rem;line-height:1.45;transition:background-color .15s;animation:.18s ease-out slideInUp;display:flex}@keyframes slideInUp{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.yt-message:hover{background-color:var(--bg-hover)}.yt-avatar{color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;margin-top:2px;font-size:.72rem;font-weight:700;display:flex}.yt-message-content{word-break:break-word;flex:1}.yt-timestamp{color:var(--text-muted);-webkit-user-select:none;user-select:none;margin-right:6px;font-size:.72rem}.yt-author{margin-right:6px;font-size:.82rem;font-weight:500}.yt-author.self{color:#fc0}.yt-author.peer{color:var(--accent-blue)}.yt-author.system{color:var(--accent-purple);font-weight:700}.yt-badge{color:var(--text-secondary);background-color:#ffffff1a;border-radius:2px;margin-right:6px;padding:1px 4px;font-size:.62rem;font-weight:700;display:inline-block}.yt-text{color:var(--text-primary)}.yt-system-msg{border-radius:var(--radius-sm);color:var(--text-secondary);border-left:3px solid var(--accent-blue);background:#ffffff0a;padding:8px 12px;font-size:.8rem}.scroll-bottom-pill{background-color:var(--bg-surface);border:1px solid var(--border-active);color:var(--text-primary);border-radius:var(--radius-full);cursor:pointer;z-index:10;align-items:center;gap:6px;padding:6px 14px;font-size:.78rem;font-weight:500;animation:.2s fadeIn;display:flex;position:absolute;bottom:12px;left:50%;transform:translate(-50%);box-shadow:0 4px 12px #00000080}.quick-reactions-bar{background:var(--bg-surface);border-top:1px solid var(--border-subtle);flex-shrink:0;align-items:center;gap:6px;padding:6px 16px;display:flex;overflow-x:auto}.reaction-chip{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-full);cursor:pointer;padding:4px 10px;font-size:.9rem;transition:transform .15s,background-color .15s}.reaction-chip:hover{background-color:var(--bg-hover);transform:scale(1.15)}.chat-footer{background-color:var(--bg-secondary);border-top:1px solid var(--border-subtle);flex-shrink:0;padding:12px 16px}.input-card{background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-md);align-items:flex-start;gap:10px;padding:8px 12px;transition:border-color .2s;display:flex}.input-card:focus-within{border-color:var(--accent-blue)}.input-sender-avatar{color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;margin-top:2px;font-size:.72rem;font-weight:700;display:flex}.input-body{flex-direction:column;flex:1;display:flex}.sender-name-label{color:var(--text-muted);margin-bottom:2px;font-size:.72rem}.chat-textarea{color:var(--text-primary);resize:none;background:0 0;border:none;outline:none;width:100%;max-height:80px;font-family:inherit;font-size:.88rem;line-height:1.4}.chat-textarea::placeholder{color:var(--text-muted)}.chat-footer-bottom{justify-content:space-between;align-items:center;margin-top:8px;display:flex}.char-count{color:var(--text-muted);font-size:.72rem}.send-btn{color:var(--accent-blue);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:6px;transition:all .2s;display:flex}.send-btn:disabled{color:var(--text-muted);cursor:not-allowed;opacity:.4}.send-btn:not(:disabled):hover{background-color:#3ea6ff26;transform:scale(1.08)}.btn{font-family:var(--font-main);border-radius:var(--radius-full);cursor:pointer;border:none;justify-content:center;align-items:center;gap:8px;padding:10px 20px;font-size:.9rem;font-weight:500;text-decoration:none;transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-flex}.btn:active{transform:scale(.97)}.btn-primary{background-color:var(--accent-red);color:#fff}.btn-primary:hover{background-color:var(--accent-red-hover);box-shadow:0 4px 14px #ff003359}.btn-secondary{color:var(--text-primary);border:1px solid var(--border-active);background-color:#ffffff1a}.btn-secondary:hover{background-color:#ffffff2e}.btn-subtle{color:var(--text-primary);border-radius:var(--radius-md);background-color:#ffffff14;padding:8px 16px;font-size:.8rem}.btn-subtle:hover{background-color:#ffffff26}.btn-block{width:100%}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.modal-backdrop{-webkit-backdrop-filter:blur(8px);z-index:100;background-color:#000000b3;justify-content:center;align-items:center;animation:.2s ease-out fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-card{background:var(--bg-surface);border:1px solid var(--border-active);border-radius:var(--radius-lg);width:90%;max-width:440px;box-shadow:var(--shadow-elevated);padding:24px;animation:.2s cubic-bezier(.16,1,.3,1) scaleUp}@keyframes scaleUp{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.modal-header{justify-content:space-between;align-items:center;margin-bottom:14px;display:flex}.modal-title{font-size:1.15rem;font-weight:700}.modal-close-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;padding:4px;font-size:1.5rem;line-height:1}.modal-close-btn:hover{color:var(--text-primary)}.modal-desc{color:var(--text-secondary);margin-bottom:20px;font-size:.85rem;line-height:1.45}.form-group{margin-bottom:18px}.form-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;font-size:.78rem;font-weight:600;display:block}.text-input{background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-md);width:100%;color:var(--text-primary);outline:none;padding:10px 14px;font-family:inherit;font-size:.95rem;transition:border-color .2s}.text-input:focus{border-color:var(--accent-blue)}.pin-inputs{justify-content:center;gap:10px;margin:12px 0 6px;display:flex}.pin-box{background:var(--bg-input);border:2px solid var(--border-subtle);border-radius:var(--radius-md);color:#fff;width:50px;height:60px;font-family:var(--font-mono);text-align:center;outline:none;font-size:1.8rem;font-weight:700;transition:all .2s}.pin-box:focus{border-color:var(--accent-blue);transform:translateY(-2px);box-shadow:0 0 12px #3ea6ff4d}.pin-error{color:var(--accent-red);text-align:center;margin-top:6px;font-size:.75rem}.quick-servers{flex-direction:column;gap:8px;display:flex}.server-preset-btn{background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-md);text-align:left;cursor:pointer;flex-direction:column;gap:2px;padding:10px 14px;transition:all .2s;display:flex}.server-preset-btn:hover{background:var(--bg-hover)}.server-preset-btn.active{border-color:var(--accent-blue);background:#3ea6ff14}.preset-name{color:var(--text-primary);font-size:.85rem;font-weight:600}.preset-url{font-family:var(--font-mono);color:var(--text-secondary);font-size:.75rem}.toast{background-color:var(--bg-surface);border:1px solid var(--border-active);color:var(--text-primary);border-radius:var(--radius-full);box-shadow:var(--shadow-elevated);z-index:200;padding:10px 20px;font-size:.85rem;font-weight:500;animation:.3s cubic-bezier(.16,1,.3,1) slideUp;position:fixed;bottom:24px;left:50%;transform:translate(-50%)translateY(0)}.stage-room-bar{border-bottom:1px solid var(--border-subtle);-webkit-backdrop-filter:blur(12px);z-index:15;background:#121212f2;flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;padding:8px 18px;display:flex}.room-bar-left,.room-bar-right{align-items:center;gap:10px;display:flex}.room-badge{border:1px solid var(--border-active);border-radius:var(--radius-sm);background:#ffffff14;align-items:center;gap:6px;padding:3px 8px;display:inline-flex}.room-badge-label{color:var(--text-muted);letter-spacing:.5px;font-size:.65rem;font-weight:700}.room-badge-code{font-family:var(--font-mono);letter-spacing:1px;color:#fff;font-size:.88rem}.btn-copy-pill{border:1px solid var(--border-subtle);border-radius:var(--radius-full);color:var(--text-secondary);cursor:pointer;background:#ffffff0f;align-items:center;gap:5px;padding:4px 10px;font-size:.76rem;font-weight:500;transition:all .2s;display:inline-flex}.btn-copy-pill:hover{color:var(--text-primary);border-color:var(--border-active);background:#ffffff24}.p2p-pill{border:1px solid var(--border-subtle);border-radius:var(--radius-full);color:var(--text-secondary);background:#ffffff0a;align-items:center;gap:8px;padding:4px 14px;font-size:.78rem;display:inline-flex}.p2p-pill.connected{color:var(--accent-green);background:#2ba6401f;border-color:#2ba6404d}.p2p-pill-dot{background:var(--text-muted);border-radius:50%;width:7px;height:7px}.p2p-pill.connected .p2p-pill-dot{background:var(--accent-green);animation:1.8s infinite pulse;box-shadow:0 0 8px #2ba64099}.btn-leave-pill{border-radius:var(--radius-full);color:#f67;cursor:pointer;background:#ff00331a;border:1px solid #ff003340;align-items:center;gap:5px;padding:4px 12px;font-size:.76rem;font-weight:500;transition:all .2s;display:inline-flex}.btn-leave-pill:hover{background:var(--accent-red);color:#fff;border-color:var(--accent-red)}.btn-exit-video-pill{border-radius:var(--radius-full);color:#f56;cursor:pointer;background:#ff00331f;border:1px solid #ff003359;align-items:center;gap:6px;padding:4px 12px;font-size:.76rem;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-flex}.btn-exit-video-pill:hover{color:#fff;background:#ff003347;border-color:#f03;transform:translateY(-1px);box-shadow:0 0 10px #ff003359}.btn-exit-video-pill:active{transform:scale(.96)}.early-video-loader{margin-top:14px}.yt-sync-wrapper{flex-direction:column;gap:10px;width:100%;max-width:1060px;margin:0 auto;animation:.25s ease-out fadeIn;display:flex}.yt-url-bar{background:var(--bg-surface);border:1px solid var(--border-active);border-radius:var(--radius-md);flex-direction:column;gap:6px;padding:8px 14px;display:flex;box-shadow:0 4px 16px #00000059}.yt-url-form{align-items:center;gap:10px;width:100%;display:flex}.yt-input-wrapper{background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-full);flex:1;align-items:center;gap:10px;padding:4px 14px;transition:border-color .2s,box-shadow .2s;display:flex}.yt-input-wrapper:focus-within{border-color:var(--accent-red);box-shadow:0 0 0 2px #ff003326}.yt-input-icon{flex-shrink:0}.yt-url-input{color:var(--text-primary);background:0 0;border:none;outline:none;flex:1;padding:6px 0;font-family:inherit;font-size:.88rem}.yt-url-input::placeholder{color:var(--text-muted)}.yt-clear-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;padding:0 4px;font-size:1.2rem;line-height:1}.yt-clear-btn:hover{color:var(--text-primary)}.yt-load-btn{border-radius:var(--radius-full);flex-shrink:0;padding:8px 18px;font-size:.85rem}.yt-url-error{color:var(--accent-red);padding-left:6px;font-size:.78rem}.yt-presets-bar{border-top:1px solid #ffffff0d;flex-wrap:wrap;align-items:center;gap:8px;padding-top:4px;display:flex}.yt-presets-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:.74rem;font-weight:600}.yt-preset-chip{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-full);color:var(--text-secondary);cursor:pointer;white-space:nowrap;padding:4px 12px;font-size:.76rem;transition:all .18s}.yt-preset-chip:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--border-active);transform:translateY(-1px)}.yt-preset-chip.active{border-color:var(--accent-red);color:#fff;background:#ff003326;font-weight:500}.stage-canvas.has-video{background:#000!important;justify-content:stretch!important;align-items:stretch!important;padding:0!important;overflow:hidden!important}.yt-fullstage-player{background:#000;flex-direction:column;flex:1;width:100%;height:100%;animation:.25s ease-out fadeIn;display:flex;position:relative;overflow:hidden}.yt-stage-topbar{-webkit-backdrop-filter:blur(12px);z-index:10;background:#0e0e0ef5;border-bottom:1px solid #ffffff14;flex-wrap:wrap;flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;padding:6px 16px;display:flex}.yt-stage-url-form{flex:1;align-items:center;gap:8px;max-width:440px;display:flex}.yt-input-wrapper.compact{border-radius:var(--radius-full);padding:2px 10px}.yt-input-wrapper.compact .yt-url-input{padding:4px 0;font-size:.8rem}.yt-load-btn.compact{white-space:nowrap;padding:5px 14px;font-size:.78rem}.yt-stage-top-controls{align-items:center;gap:10px;display:flex}.yt-stage-canvas-viewport{background:#000;flex:1;width:100%;height:100%;position:relative;overflow:hidden}.yt-stage-canvas-viewport iframe,.yt-stage-canvas-viewport #yt-iframe-placeholder{position:absolute;top:0;left:0;border:none!important;border-radius:0!important;width:100%!important;height:100%!important}.yt-theater-container{border-radius:var(--radius-lg);border:1px solid var(--border-active);background:#000;flex-direction:column;display:flex;overflow:hidden;box-shadow:0 12px 40px #000000b3,0 0 24px #ff00330f}.yt-player-frame{aspect-ratio:16/9;background:#050505;width:100%;position:relative}.yt-player-frame iframe,.yt-player-frame #yt-iframe-placeholder{border:none;width:100%;height:100%;position:absolute;top:0;left:0}.yt-theater-status-bar{border-top:1px solid var(--border-subtle);background:#141414;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:10px 16px;display:flex}.yt-status-left{align-items:center;gap:12px;display:flex}.yt-sync-pill{border:1px solid var(--border-subtle);border-radius:var(--radius-full);color:var(--text-secondary);background:#ffffff0f;align-items:center;gap:7px;padding:4px 12px;font-size:.76rem;font-weight:500;display:inline-flex}.yt-sync-pill.playing{color:var(--accent-green);background:#2ba6401f;border-color:#2ba64059}.yt-sync-pill.paused{color:#fb3;background:#ffaa001f;border-color:#ffaa0059}.yt-sync-dot{background:var(--text-muted);border-radius:50%;width:6px;height:6px}.yt-sync-pill.playing .yt-sync-dot{background:var(--accent-green);box-shadow:0 0 6px var(--accent-green);animation:1.6s infinite pulse}.yt-sync-pill.paused .yt-sync-dot{background:#fb3}.yt-time-display{font-family:var(--font-mono);color:var(--text-muted);font-size:.82rem}.yt-controls-toolbar{align-items:center;gap:8px;display:flex}.yt-ctrl-btn{border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-primary);cursor:pointer;background:#ffffff12;align-items:center;gap:5px;padding:6px 10px;font-size:.78rem;font-weight:500;transition:all .18s cubic-bezier(.4,0,.2,1);display:inline-flex}.yt-ctrl-btn:hover{border-color:var(--border-active);background:#ffffff29;transform:translateY(-1px)}.yt-ctrl-btn:active{transform:scale(.96)}.yt-ctrl-btn.sync-btn{color:var(--accent-blue);background:#3ea6ff1f;border-color:#3ea6ff4d}.yt-ctrl-btn.sync-btn:hover{background:#3ea6ff38;box-shadow:0 0 10px #3ea6ff4d}.yt-ctrl-btn.exit-video-btn{color:#f56;background:#ff003324;border-color:#ff003359;margin-left:4px;font-weight:600}.yt-ctrl-btn.exit-video-btn:hover{color:#fff;background:#ff003347;border-color:#f03;box-shadow:0 0 10px #ff003359}.yt-placeholder-card{background:var(--bg-card);border:1px dashed var(--border-active);border-radius:var(--radius-lg);text-align:center;box-shadow:var(--shadow-elevated);flex-direction:column;align-items:center;padding:24px 20px;display:flex}.yt-placeholder-icon{background:#ff003314;border:1px solid #f033;border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;margin-bottom:10px;display:flex}.yt-placeholder-title{color:var(--text-primary);margin-bottom:4px;font-size:1.15rem;font-weight:700}.yt-placeholder-subtitle{color:var(--text-secondary);max-width:520px;font-size:.82rem;line-height:1.4}.yt-placeholder-subtitle strong{color:var(--text-primary)}@media (width<=900px){.app-header{padding:0 12px}.brand-title{font-size:1rem}.chat-section{width:100%;max-width:380px;position:absolute;top:0;bottom:0;right:0;box-shadow:-4px 0 24px #0009}}.local-fullstage-player{background:#000;flex-direction:column;flex:1;width:100%;height:100%;animation:.25s ease-out fadeIn;display:flex;position:relative;overflow:hidden}.local-stage-topbar{background:#0e0e0ef5;border-bottom:1px solid #ffffff14}.local-file-info-pill{border-radius:var(--radius-full);background:#3ea6ff1a;border:1px solid #3ea6ff4d;align-items:center;gap:8px;max-width:420px;padding:4px 12px;font-size:.8rem;display:inline-flex}.local-filename-text{color:#fff;white-space:nowrap;text-overflow:ellipsis;max-width:220px;font-weight:600;overflow:hidden}.local-filesize-text{color:var(--text-muted);font-size:.72rem;font-family:var(--font-mono)}.local-replace-btn{border-radius:var(--radius-sm);color:var(--text-primary);cursor:pointer;background:#ffffff1a;border:1px solid #fff3;margin-left:4px;padding:2px 7px;font-size:.7rem;transition:all .15s}.local-replace-btn:hover{color:#fff;background:#ffffff40}.local-video-viewport{cursor:pointer;background:#000;flex:1;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative;overflow:hidden}.local-video-element{object-fit:contain;background:#000;width:100%;height:100%;max-height:100%}.local-drag-overlay{z-index:30;pointer-events:none;background:#000000d9;border:2px dashed #3ea6ff;flex-direction:column;justify-content:center;align-items:center;gap:16px;animation:.15s ease-out fadeIn;display:flex;position:absolute;inset:0}.local-drag-overlay h2{color:#fff;font-size:1.3rem;font-weight:600}.local-bottom-controls{z-index:25;background:linear-gradient(#0000 0%,#000000b3 30%,#000000f2 100%);flex-direction:column;gap:8px;padding:12px 18px 8px;transition:opacity .25s;display:flex;position:absolute;bottom:0;left:0;right:0}.local-scrubber-wrapper{align-items:center;width:100%;display:flex}.local-scrubber-slider{appearance:none;cursor:pointer;background:#ffffff40;border-radius:3px;outline:none;width:100%;height:5px;transition:height .15s}.local-scrubber-slider:hover{height:8px}.local-scrubber-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#3ea6ff;border-radius:50%;width:14px;height:14px;transition:transform .15s;box-shadow:0 0 8px #3ea6ff99}.local-scrubber-slider:hover::-webkit-slider-thumb{transform:scale(1.25)}.local-bottom-bar{justify-content:space-between;align-items:center;width:100%;display:flex}.local-bottom-left,.local-bottom-right{align-items:center;gap:12px;display:flex}.local-icon-button{color:#fff;cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;justify-content:center;align-items:center;padding:4px;transition:color .15s,transform .15s;display:flex}.local-icon-button:hover{color:#3ea6ff;transform:scale(1.1)}.local-volume-slider{appearance:none;cursor:pointer;background:#ffffff4d;border-radius:2px;outline:none;width:72px;height:4px}.local-volume-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:10px;height:10px}.local-time-indicator{font-family:var(--font-mono);color:#ccc;margin-left:4px;font-size:.78rem}.local-badge-sync{color:#3ea6ff;border-radius:var(--radius-full);letter-spacing:.5px;background:#3ea6ff1f;border:1px solid #3ea6ff4d;padding:2px 8px;font-size:.7rem;font-weight:600}.local-dropzone-wrapper{background:radial-gradient(circle,#121826e6 0%,#0a0a0cfa 100%);flex:1;justify-content:center;align-items:center;width:100%;height:100%;padding:24px;animation:.25s ease-out fadeIn;display:flex}.local-dropzone-wrapper.drag-over{background:#3ea6ff14;border:2px dashed #3ea6ff}.local-waiting-card{background:var(--bg-card);border:1px solid var(--border-active);border-radius:var(--radius-lg);text-align:center;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:600px;padding:40px 32px;display:flex;box-shadow:0 16px 48px #0009,0 0 30px #3ea6ff14}.local-waiting-icon-ring{background:#3ea6ff1a;border:1px solid #3ea6ff40;border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;display:flex;box-shadow:0 0 20px #3ea6ff33}.local-waiting-title{color:var(--text-primary);font-size:1.4rem;font-weight:700}.local-waiting-subtitle{color:var(--text-secondary);font-size:.9rem;line-height:1.6}.local-waiting-subtitle strong{color:var(--text-primary)}.local-remote-banner{border-radius:var(--radius-md);background:#3ea6ff14;border:1px solid #3ea6ff40;flex-direction:column;align-items:center;gap:6px;width:100%;padding:12px 20px;display:flex}.local-remote-badge{letter-spacing:1px;color:#3ea6ff;text-transform:uppercase;font-size:.65rem;font-weight:800}.local-remote-filename{color:#fff;word-break:break-all;font-size:1.15rem;font-weight:700}.local-file-size-tag{color:var(--text-muted);font-size:.75rem;font-family:var(--font-mono)}.local-action-buttons{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin-top:8px;display:flex}.local-privacy-pills{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin-top:8px;display:flex}.local-pill{border:1px solid var(--border-subtle);border-radius:var(--radius-full);color:var(--text-secondary);background:#ffffff0d;padding:3px 10px;font-size:.72rem;font-weight:600}.lobby-options-container{flex-direction:column;gap:10px;width:100%;display:flex}.local-lobby-dropzone{border-radius:var(--radius-lg);cursor:pointer;background:#3ea6ff0d;border:1px dashed #3ea6ff59;align-items:center;gap:14px;padding:12px 18px;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;box-shadow:0 4px 16px #0003}.local-lobby-dropzone:hover,.local-lobby-dropzone.active{background:#3ea6ff1f;border-color:#3ea6ff;transform:translateY(-1px);box-shadow:0 6px 24px #3ea6ff26}.local-drop-icon{background:#3ea6ff1a;border:1px solid #3ea6ff40;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:42px;height:42px;display:flex}.local-drop-content{flex:1}.local-drop-title{color:var(--text-primary);margin-bottom:2px;font-size:.95rem;font-weight:700}.local-drop-subtitle{color:var(--text-secondary);font-size:.78rem;line-height:1.35}.local-drop-subtitle strong{color:#3ea6ff}.local-browse-btn{white-space:nowrap;flex-shrink:0}