:root{--bg-primary: #09090b;--bg-secondary: #18181b;--bg-elevated: #27272a;--bg-hover: #3f3f46;--text-primary: #fafafa;--text-secondary: #a1a1aa;--text-muted: #8b8b96;--accent: #6366f1;--accent-hover: #818cf8;--accent-muted: rgba(99, 102, 241, .15);--success: #22c55e;--error: #ef4444;--warning: #f59e0b;--border: #27272a;--border-focus: #6366f1;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono: "JetBrains Mono", "SF Mono", monospace;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);--shadow-md: 0 4px 12px rgba(0, 0, 0, .5);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .6);--transition-fast: .15s ease;--transition-normal: .2s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);line-height:1.5;min-height:100vh}#app{min-height:100vh}.view{display:none;min-height:100vh}.view.active{display:flex}h1,h2,h3{font-weight:600;line-height:1.3}h1{font-size:2rem}h2{font-size:1.25rem}h3{font-size:1rem}p{color:var(--text-secondary)}a{color:var(--accent);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--accent-hover)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:10px 20px;font-family:var(--font-sans);font-size:.875rem;font-weight:500;line-height:1;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover:not(:disabled){background:var(--accent-hover)}.btn-secondary{background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border)}.btn-secondary:hover:not(:disabled){background:var(--bg-hover);border-color:var(--bg-hover)}.btn-ghost{background:transparent;color:var(--text-secondary)}.btn-ghost:hover:not(:disabled){background:var(--bg-elevated);color:var(--text-primary)}.btn-sm{padding:6px 12px;font-size:.8125rem}.btn-full{width:100%}.btn-icon,.btn-icon-sm{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;color:var(--text-secondary);cursor:pointer;transition:color var(--transition-fast)}.btn-icon{width:40px;height:40px;border-radius:var(--radius-md)}.btn-icon-sm{width:32px;height:32px;border-radius:var(--radius-sm)}.btn-icon:hover,.btn-icon-sm:hover{background:var(--bg-elevated);color:var(--text-primary)}.btn-icon svg,.btn-icon-sm svg{width:20px;height:20px}.btn-icon-sm svg{width:16px;height:16px}.btn .btn-loading,.btn.loading .btn-text{display:none}.btn.loading .btn-loading{display:inline}.input{width:100%;padding:12px 16px;font-family:var(--font-sans);font-size:.9375rem;color:var(--text-primary);background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);transition:all var(--transition-fast)}.input::placeholder{color:var(--text-muted)}.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-muted)}.input-code{width:100%;padding:12px 16px;font-family:var(--font-mono);font-size:1.125rem;font-weight:500;text-align:center;text-transform:uppercase;letter-spacing:.15em;color:var(--text-primary);background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);transition:all var(--transition-fast)}.input-code::placeholder{color:var(--text-muted);letter-spacing:.3em}.input-code:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-muted)}.inline-form{display:flex;flex-direction:column;gap:var(--space-sm);width:100%}.inline-form .btn{width:100%}#view-landing{align-items:center;justify-content:center;padding:var(--space-xl)}.landing{width:100%;max-width:800px;display:flex;flex-direction:column;align-items:center;gap:var(--space-2xl)}.landing-header{text-align:center}.logo{display:flex;align-items:center;justify-content:center;gap:var(--space-md);margin-bottom:var(--space-md)}.logo-icon{width:40px;height:40px;color:var(--accent)}.logo-text{font-size:1.75rem;font-weight:700}.tagline{font-size:1.125rem;color:var(--text-muted)}.landing-content{width:100%}.action-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-lg)}.card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-xl);padding:var(--space-xl);text-align:center;transition:all var(--transition-normal)}.card:hover{border-color:var(--bg-hover);box-shadow:var(--shadow-md)}.card-icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;background:var(--accent-muted);border-radius:var(--radius-lg);margin-bottom:var(--space-lg)}.card-icon svg{width:28px;height:28px;color:var(--accent)}.card h2{margin-bottom:var(--space-sm)}.card p{font-size:.9375rem;margin-bottom:var(--space-lg)}.landing-footer{text-align:center}.landing-footer p{font-size:.8125rem;color:var(--text-muted)}#view-pending.active{align-items:center;justify-content:center}.pending-container{display:flex;align-items:center;justify-content:center;padding:var(--space-xl)}.pending-card{text-align:center;max-width:420px;padding:var(--space-2xl);background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-xl)}.pending-icon{display:inline-flex;align-items:center;justify-content:center;width:80px;height:80px;margin-bottom:var(--space-lg);background:var(--accent-muted);border-radius:50%}.pending-icon svg{width:40px;height:40px;color:var(--accent)}.pending-card h2{margin-bottom:var(--space-sm)}.pending-card p{margin-bottom:var(--space-md)}.pending-code-box{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);margin:var(--space-xl) 0;padding:var(--space-lg);background:var(--bg-elevated);border-radius:var(--radius-lg);border:1px solid var(--border)}.pending-code-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted)}.pending-code{font-family:var(--font-mono);font-size:2rem;font-weight:700;letter-spacing:.2em;color:var(--accent)}.pending-hint{font-size:.875rem;color:var(--text-muted);margin-bottom:var(--space-lg)}#view-room.active{display:flex;flex-direction:column;height:100vh}.room{display:flex;flex-direction:column;height:100%}.room-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md) var(--space-lg);background:var(--bg-secondary);border-bottom:1px solid var(--border)}.room-info{display:flex;align-items:center;gap:var(--space-sm)}.room-code-badge{display:inline-flex;align-items:center;gap:var(--space-sm);padding:6px 12px;background:var(--bg-elevated);border-radius:var(--radius-md);font-family:var(--font-mono);font-size:.875rem;font-weight:600;color:var(--text-primary)}.room-code-badge svg{color:var(--text-muted)}.host-badge{padding:4px 8px;background:var(--accent);border-radius:var(--radius-sm);font-size:.6875rem;font-weight:700;color:#fff;letter-spacing:.05em}.password-badge{display:inline-flex;align-items:center;justify-content:center;padding:4px 6px;background:var(--warning);border-radius:var(--radius-sm);color:#000}.room-meta{display:flex;align-items:center;gap:var(--space-md)}.participant-count{display:inline-flex;align-items:center;gap:var(--space-xs);font-size:.875rem;color:var(--text-secondary)}.room-main{flex:1;display:grid;grid-template-columns:1fr 300px;gap:1px;background:var(--border);overflow:hidden}.video-area{display:flex;flex-direction:column;background:var(--bg-primary);overflow:hidden}.screen-container{flex:1;position:relative;display:flex;align-items:center;justify-content:center;background:#000;min-height:0}.screen-container video{max-width:100%;max-height:100%;object-fit:contain}.screen-placeholder{display:flex;flex-direction:column;align-items:center;gap:var(--space-md);color:var(--text-muted)}.screen-placeholder svg{width:64px;height:64px;opacity:.5}.screen-placeholder p{font-size:.9375rem}.screen-container video:not([src=""])+.screen-placeholder,.screen-container video.has-stream~.screen-placeholder{display:none}.webcam-grid{display:flex;gap:var(--space-sm);padding:var(--space-md);background:var(--bg-secondary);overflow-x:auto}.webcam-tile{position:relative;flex-shrink:0;width:120px;height:90px;background:var(--bg-elevated);border-radius:var(--radius-md);overflow:hidden}.webcam-tile video{width:100%;height:100%;object-fit:cover}.webcam-name{position:absolute;bottom:0;left:0;right:0;padding:4px 8px;background:linear-gradient(transparent,#000c);font-size:.6875rem;color:#fff;text-align:center}.sidebar{display:flex;flex-direction:column;background:var(--bg-secondary)}.participants-panel{border-bottom:1px solid var(--border)}.panel-header{padding:var(--space-md);border-bottom:1px solid var(--border)}.panel-header h3{font-weight:500;color:var(--text-secondary)}.participants-list{padding:var(--space-sm);max-height:180px;overflow-y:auto}.participant-item{display:flex;align-items:center;justify-content:space-between;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);gap:var(--space-sm)}.participant-item:hover{background:var(--bg-elevated)}.participant-info{display:flex;align-items:center;gap:var(--space-sm);flex:1;min-width:0}.participant-name{font-size:.875rem;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.participant-host-tag{font-size:.6875rem;color:var(--accent);font-weight:500;flex-shrink:0}.participant-actions{display:flex;gap:var(--space-xs);flex-shrink:0}.btn-grant-screen{padding:4px 8px;font-size:.6875rem;background:var(--accent-muted);color:var(--accent);border:none;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.btn-grant-screen:hover{background:var(--accent);color:#fff}.btn-kick{padding:4px 8px;font-size:.6875rem;background:#ef444426;color:var(--error);border:none;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast)}.btn-kick:hover{background:var(--error);color:#fff}.chat-panel{flex:1;display:flex;flex-direction:column;min-height:0}.chat-header{padding:var(--space-md);border-bottom:1px solid var(--border)}.chat-header h3{font-weight:500;color:var(--text-secondary)}.chat-messages{flex:1;padding:var(--space-md);overflow-y:auto;display:flex;flex-direction:column;gap:var(--space-sm)}.chat-message{display:flex;flex-direction:column;gap:2px}.chat-message .sender{font-size:.75rem;font-weight:500;color:var(--accent)}.chat-message .text{font-size:.875rem;color:var(--text-primary);word-break:break-word}.chat-message .time{font-size:.6875rem;color:var(--text-muted)}.chat-message.system{text-align:center;padding:var(--space-sm) 0}.chat-message.system .text{font-size:.75rem;color:var(--text-muted);font-style:italic}.chat-form{display:flex;gap:var(--space-sm);padding:var(--space-md);border-top:1px solid var(--border)}.chat-input{flex:1;padding:10px 14px;font-family:var(--font-sans);font-size:.875rem;color:var(--text-primary);background:var(--bg-elevated);border:none;border-radius:var(--radius-md)}.chat-input::placeholder{color:var(--text-muted)}.chat-input:focus{outline:none;box-shadow:0 0 0 2px var(--accent-muted)}.room-footer{display:flex;flex-direction:column;gap:var(--space-md);padding:var(--space-md) var(--space-lg);background:var(--bg-secondary);border-top:1px solid var(--border)}.media-controls{display:flex;justify-content:center;gap:var(--space-sm)}.control-btn{display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);padding:var(--space-md) var(--space-lg);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);color:var(--text-secondary);font-size:.75rem;cursor:pointer;transition:all var(--transition-fast)}.control-btn svg{width:24px;height:24px}.control-btn .icon-off{display:none}.control-btn:hover:not(:disabled){background:var(--bg-hover);color:var(--text-primary)}.control-btn:disabled{opacity:.4;cursor:not-allowed}.control-btn[data-active=true]{background:var(--accent);border-color:var(--accent);color:#fff}.control-btn[data-active=true] .icon-on{display:none}.control-btn[data-active=true] .icon-off{display:block}.share-link-bar{display:flex;align-items:center;justify-content:center;gap:var(--space-md);padding:var(--space-sm) var(--space-md);background:var(--bg-elevated);border-radius:var(--radius-md)}.share-link-bar span{font-size:.8125rem;color:var(--text-muted)}.share-link-bar code{font-family:var(--font-mono);font-size:.875rem;color:var(--accent);background:var(--bg-primary);padding:4px 12px;border-radius:var(--radius-sm)}#view-kicked.active{align-items:center;justify-content:center}.kicked-container{display:flex;align-items:center;justify-content:center;padding:var(--space-xl)}.kicked-card{text-align:center;max-width:400px;padding:var(--space-2xl);background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-xl)}.kicked-icon{display:inline-flex;align-items:center;justify-content:center;width:80px;height:80px;margin-bottom:var(--space-lg);background:#ef444426;border-radius:50%}.kicked-icon svg{width:40px;height:40px;color:var(--error)}.kicked-card h2{margin-bottom:var(--space-sm)}.kicked-card p{margin-bottom:var(--space-xl)}.toast-container{position:fixed;bottom:var(--space-lg);right:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-sm);z-index:200}.toast{padding:var(--space-md) var(--space-lg);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);font-size:.875rem;box-shadow:var(--shadow-lg);animation:slideIn .2s ease}.toast.success{border-color:var(--success)}.toast.error{border-color:var(--error)}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.hidden{display:none!important}@media (max-width: 768px){.room-main{grid-template-columns:1fr;grid-template-rows:1fr auto}.sidebar{max-height:250px}.participants-panel{display:none}.action-cards{grid-template-columns:1fr}.webcam-tile{width:80px;height:60px}.share-link-bar{flex-wrap:wrap}}�/�*� �A�c�t�i�v�e� �S�e�s�s�i�o�n�s� �B�a�d�g�e� �*�/� � � .active-sessions{display:inline-flex;align-items:center;gap:var(--space-sm);margin-top:var(--space-md);padding:var(--space-sm) var(--space-md);background:var(--bg-elevated);border-radius:var(--radius-md);font-size:.875rem;color:var(--text-secondary)}.pulse{display:inline-block;width:8px;height:8px;background:var(--success);border-radius:50%;animation:pulse 2s infinite}@keyframes pulse{0%{box-shadow:0 0 #22c55e80}70%{box-shadow:0 0 0 8px #22c55e00}to{box-shadow:0 0 #22c55e00}}#view-join-link.active{align-items:center;justify-content:center}.join-link-container{display:flex;align-items:center;justify-content:center;padding:var(--space-xl)}.join-link-card{text-align:center;width:100%;max-width:400px;padding:var(--space-2xl);background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-xl)}.join-link-card h2{margin-bottom:var(--space-sm)}.join-link-card p{margin-bottom:var(--space-lg)}.join-link-card .inline-form{margin-bottom:var(--space-md)}.room-code-inline{font-family:var(--font-mono);font-size:1rem;color:var(--accent);background:var(--bg-elevated);padding:2px 8px;border-radius:var(--radius-sm)}.back-link{display:inline-block;margin-top:var(--space-md);font-size:.875rem;color:var(--text-muted)}.back-link:hover{color:var(--text-primary)}.btn-lg{padding:14px 28px;font-size:1rem}#view-lobby.active{align-items:center;justify-content:center}.lobby-container{display:flex;align-items:center;justify-content:center;padding:var(--space-xl);width:100%}.lobby-card{width:100%;max-width:480px;padding:var(--space-2xl);background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-xl)}.lobby-header{display:flex;flex-direction:column;align-items:center;gap:var(--space-md);margin-bottom:var(--space-xl);text-align:center}.lobby-room-info{display:flex;align-items:center;gap:var(--space-sm)}.lobby-status{display:flex;flex-direction:column;align-items:center;gap:var(--space-md);margin-bottom:var(--space-xl);padding:var(--space-lg);background:var(--bg-elevated);border-radius:var(--radius-lg)}.lobby-spinner{width:40px;height:40px;border:3px solid var(--bg-hover);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.lobby-status p{font-size:.9375rem;color:var(--text-secondary)}.lobby-participants{margin-bottom:var(--space-xl)}.lobby-participants h3{font-size:.875rem;font-weight:500;color:var(--text-muted);margin-bottom:var(--space-sm)}.lobby-list{display:flex;flex-direction:column;gap:var(--space-xs);background:var(--bg-elevated);border-radius:var(--radius-md);padding:var(--space-sm);max-height:200px;overflow-y:auto}.lobby-peer{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--bg-secondary);border-radius:var(--radius-sm);font-size:.9375rem}.lobby-peer .peer-dot{width:8px;height:8px;background:var(--success);border-radius:50%}.lobby-peer .peer-name{flex:1}.lobby-peer .peer-tag{font-size:.6875rem;color:var(--accent);font-weight:500}.lobby-peer .peer-host{font-size:.6875rem;color:var(--warning);font-weight:500}.lobby-share{margin-bottom:var(--space-xl);text-align:center}.lobby-share p{font-size:.8125rem;color:var(--text-muted);margin-bottom:var(--space-sm)}.share-box{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm);background:var(--bg-elevated);border-radius:var(--radius-md)}.share-box code{flex:1;font-family:var(--font-mono);font-size:.75rem;color:var(--accent);word-break:break-all;text-align:left}.lobby-actions{display:flex;flex-direction:column;gap:var(--space-sm)}.lobby-actions .btn{width:100%}.btn-hint{display:block;font-size:.6875rem;font-weight:400;opacity:.7;margin-top:2px}#btn-start-session:not(:disabled) .btn-hint{display:none}.room.theater-mode .sidebar:before{content:"";position:absolute;left:-40px;top:50%;transform:translateY(-50%);width:40px;height:80px;display:flex;align-items:center;justify-content:center;background:var(--bg-secondary);border-radius:var(--radius-md) 0 0 var(--radius-md);cursor:pointer;font-size:1.25rem;opacity:.7;transition:opacity .2s}.room.theater-mode .btn-fullscreen{opacity:0}.room.theater-mode:hover .btn-fullscreen{opacity:1}.chat-unread-badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 6px;background:var(--error);border-radius:10px;font-size:.6875rem;font-weight:600;color:#fff;display:flex;align-items:center;justify-content:center}.room.theater-mode{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:#000}.room.theater-mode .room-header{position:absolute;top:0;left:0;right:0;z-index:10;background:linear-gradient(to bottom,rgba(0,0,0,.8) 0%,transparent 100%);border:none;opacity:0;transition:opacity .3s ease}.room.theater-mode:hover .room-header,.room.theater-mode .room-header:focus-within{opacity:1}.room.theater-mode .room-main{display:block;position:absolute;top:0;right:0;bottom:0;left:0;background:#000}.room.theater-mode .video-area,.room.theater-mode .screen-container{position:absolute;top:0;right:0;bottom:0;left:0}.room.theater-mode .screen-container video{width:100%;height:100%;object-fit:contain}.room.theater-mode .webcam-grid{position:absolute;bottom:80px;left:var(--space-md);z-index:20;display:flex;flex-direction:column;gap:var(--space-sm);padding:0;background:transparent;max-height:calc(100vh - 180px);overflow-y:auto;scrollbar-width:none}.room.theater-mode .webcam-grid::-webkit-scrollbar{display:none}.room.theater-mode .webcam-tile{width:160px;height:120px;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border:2px solid rgba(255,255,255,.1);transition:all .2s ease}.room.theater-mode .webcam-tile:hover{transform:scale(1.05);border-color:var(--accent)}.room.theater-mode .webcam-tile.speaking{border-color:var(--success);box-shadow:0 0 20px #22c55e66}.room.theater-mode .sidebar{position:absolute;top:0;right:0;bottom:0;width:320px;z-index:15;transform:translate(100%);transition:transform .3s ease;background:var(--bg-secondary);border-left:1px solid var(--border)}.room.theater-mode .sidebar:hover,.room.theater-mode .sidebar:focus-within,.room.theater-mode .sidebar.pinned{transform:translate(0)}.room.theater-mode .sidebar:before{content:"💬";position:absolute;left:-40px;top:50%;transform:translateY(-50%);width:40px;height:80px;display:flex;align-items:center;justify-content:center;background:var(--bg-secondary);border-radius:var(--radius-md) 0 0 var(--radius-md);cursor:pointer;font-size:1.25rem;opacity:.7;transition:opacity .2s}.room.theater-mode .sidebar:hover:before{opacity:0}.room.theater-mode .room-footer{position:absolute;bottom:0;left:0;right:0;z-index:10;background:linear-gradient(to top,rgba(0,0,0,.9) 0%,transparent 100%);border:none;padding:var(--space-md) var(--space-lg);opacity:0;transition:opacity .3s ease}.room.theater-mode:hover .room-footer,.room.theater-mode .room-footer:focus-within{opacity:1}.room.theater-mode .share-link-bar{display:none}.btn-theater{display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);padding:var(--space-md) var(--space-lg);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);color:var(--text-secondary);font-size:.75rem;cursor:pointer;transition:all var(--transition-fast)}.btn-theater svg{width:24px;height:24px}.btn-theater:hover{background:var(--bg-hover);color:var(--text-primary)}.btn-theater[data-active=true]{background:var(--accent);border-color:var(--accent);color:#fff}.btn-fullscreen{position:absolute;top:var(--space-md);right:var(--space-md);z-index:25;padding:var(--space-sm);background:#0009;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-md);color:#fff;cursor:pointer;opacity:0;transition:all .2s ease}.screen-container:hover .btn-fullscreen{opacity:1}.btn-fullscreen:hover{background:#fff3}.btn-fullscreen svg{width:20px;height:20px}.buffer-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:30;display:flex;flex-direction:column;align-items:center;gap:var(--space-md);padding:var(--space-xl);background:#000000d9;border-radius:var(--radius-xl);text-align:center}.buffer-indicator.hidden{display:none}.buffer-spinner{width:48px;height:48px;border:4px solid var(--bg-hover);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}.buffer-indicator p{color:var(--text-primary);font-size:1rem}.buffer-indicator .countdown{font-family:var(--font-mono);font-size:2rem;font-weight:700;color:var(--accent)}.sidebar-tab{position:relative}.chat-unread-badge{position:absolute;top:50%;left:-60px;transform:translateY(-50%);min-width:24px;height:24px;padding:0 8px;background:var(--error);border-radius:12px;font-size:.75rem;font-weight:600;color:#fff;display:none;align-items:center;justify-content:center}.room.theater-mode .chat-unread-badge.visible{display:flex}@media (max-width: 768px){.room.theater-mode .webcam-grid{bottom:70px;left:var(--space-sm);flex-direction:row;max-width:calc(100vw - 100px);overflow-x:auto;overflow-y:hidden}.room.theater-mode .webcam-tile{width:100px;height:75px}.room.theater-mode .sidebar{width:100%;height:60%;top:auto;bottom:0;transform:translateY(100%)}.room.theater-mode .sidebar:hover,.room.theater-mode .sidebar.pinned{transform:translateY(0)}.room.theater-mode .sidebar:before{left:50%;top:-30px;transform:translate(-50%);width:60px;height:30px;border-radius:var(--radius-md) var(--radius-md) 0 0}}.btn-install{display:inline-flex;align-items:center;gap:var(--space-sm);margin-top:var(--space-md)}.btn-install svg{flex-shrink:0}.role-badge{padding:4px 10px;border-radius:var(--radius-sm);font-size:.6875rem;font-weight:600;letter-spacing:.03em}.role-badge.superhost{background:linear-gradient(135deg,#f59e0b,#d97706);color:#000}.role-badge.host{background:var(--accent);color:#fff}.participant-role{font-size:.875rem;margin-right:var(--space-xs)}.participant-actions{display:flex;gap:var(--space-xs)}.participant-actions button{padding:4px 8px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.75rem;cursor:pointer;transition:all var(--transition-fast)}.participant-actions .btn-promote:hover{background:var(--accent);border-color:var(--accent)}.participant-actions .btn-demote:hover{background:var(--warning);border-color:var(--warning)}.participant-actions .btn-kick:hover{background:var(--error);border-color:var(--error);color:#fff}.btn-pip{position:absolute;top:var(--space-md);left:var(--space-md);z-index:25;padding:var(--space-sm);background:#0009;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-md);color:#fff;cursor:pointer;opacity:0;transition:all .2s ease}.screen-container:hover .btn-pip,.screen-container:hover .btn-fullscreen{opacity:1}.btn-pip:hover,.btn-fullscreen:hover{background:#fff3}.btn-pip svg,.btn-fullscreen svg{width:20px;height:20px}.btn-toggle-controls{position:fixed;bottom:0;left:50%;transform:translate(-50%);z-index:50;padding:6px 20px;background:var(--bg-secondary);border:1px solid var(--border);border-bottom:none;border-radius:var(--radius-md) var(--radius-md) 0 0;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);display:none}.btn-toggle-controls:hover{background:var(--bg-elevated);color:var(--text-primary)}.btn-toggle-controls svg{width:16px;height:16px}.room.focus-mode{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:#000}.room.focus-mode .btn-toggle-controls{display:block}.room.focus-mode .room-header{position:absolute;top:0;left:0;right:0;z-index:10;background:linear-gradient(to bottom,rgba(0,0,0,.8),transparent);border:none;padding:var(--space-sm) var(--space-lg);opacity:0;transition:opacity .3s ease}.room.focus-mode:hover .room-header{opacity:1}.room.focus-mode .room-main{display:block;position:absolute;top:0;right:0;bottom:0;left:0;background:#000}.room.focus-mode .video-area,.room.focus-mode .screen-container{position:absolute;top:0;right:0;bottom:0;left:0}.room.focus-mode .screen-container video{width:100%;height:100%;object-fit:contain}.room.focus-mode .webcam-grid{position:absolute;bottom:70px;left:var(--space-md);z-index:20;display:flex;flex-direction:column;gap:var(--space-xs);padding:0;background:transparent;max-height:calc(100vh - 150px);overflow-y:auto;scrollbar-width:none}.room.focus-mode .webcam-grid::-webkit-scrollbar{display:none}.room.focus-mode .webcam-tile{width:100px;height:75px;border-radius:var(--radius-md);box-shadow:var(--shadow-md);border:2px solid rgba(255,255,255,.1);transition:all .2s ease}.room.focus-mode .webcam-tile:hover{transform:scale(1.1);border-color:var(--accent);z-index:5}.room.focus-mode .sidebar{position:absolute;top:0;right:0;bottom:0;width:300px;z-index:15;transform:translate(100%);transition:transform .3s ease;background:var(--bg-secondary);border-left:1px solid var(--border)}.room.focus-mode .sidebar:hover,.room.focus-mode .sidebar:focus-within{transform:translate(0)}.room.focus-mode .sidebar:before{content:"💬";position:absolute;left:-36px;top:50%;transform:translateY(-50%);width:36px;height:60px;display:flex;align-items:center;justify-content:center;background:var(--bg-secondary);border-radius:var(--radius-md) 0 0 var(--radius-md);font-size:1rem;opacity:.8;cursor:pointer}.room.focus-mode .sidebar:hover:before{opacity:0}.room.focus-mode .room-footer{position:absolute;bottom:0;left:0;right:0;z-index:10;background:linear-gradient(to top,rgba(0,0,0,.9),transparent);border:none;padding:var(--space-md) var(--space-lg);transition:transform .3s ease,opacity .3s ease}.room.focus-mode .room-footer.hidden-controls{transform:translateY(100%);opacity:0}.chat-unread-badge{position:absolute;left:-55px;top:calc(50% - 30px);min-width:24px;height:24px;padding:0 6px;background:var(--error);border-radius:12px;font-size:.75rem;font-weight:600;color:#fff;display:none;align-items:center;justify-content:center}.room.focus-mode .chat-unread-badge.visible{display:flex}.room.focus-mode .control-btn{padding:var(--space-sm) var(--space-md)}.room.focus-mode .control-btn span{display:none}@media (max-width: 768px){.room.focus-mode .webcam-grid{bottom:60px;left:var(--space-xs);flex-direction:row;max-width:calc(100vw - 80px);overflow-x:auto}.room.focus-mode .webcam-tile{width:70px;height:52px}.room.focus-mode .sidebar{width:100%;height:50%;top:auto;transform:translateY(100%)}.room.focus-mode .sidebar:hover{transform:translateY(0)}.room.focus-mode .sidebar:before{left:50%;top:-28px;transform:translate(-50%);width:50px;height:28px;border-radius:var(--radius-md) var(--radius-md) 0 0}}