.toolbar-wrapper{display:flex;flex-direction:column;align-items:center;gap:6px}.toolbar-row{display:flex;align-items:center;gap:4px}.toolbar-grip{color:#ffffff4d;cursor:grab;padding:4px 2px;transition:color .2s ease;display:flex;align-items:center}.toolbar-grip:hover{color:#ffffffb3}.toolbar-grip:active{cursor:grabbing}.toolbar-container{border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;position:relative;transition:width .3s ease-out,border-radius .3s ease-out,background .2s ease,box-shadow .2s ease;height:40px}.toolbar-collapsed{width:40px;border-radius:50%;cursor:pointer;background:#00000080;box-shadow:0 4px 16px #0000004d;overflow:hidden}.toolbar-collapsed:hover{background:#000000d9;box-shadow:0 6px 20px #0006}.toolbar-expanded{border-radius:20px;padding:0 10px 0 5px;background:#000000e6!important;box-shadow:0 4px 20px #0006;overflow:visible}.toolbar-content{display:flex;align-items:center;gap:6px;opacity:1;transition:opacity .2s ease-out .1s}.toolbar-content.hidden{opacity:0;pointer-events:none;position:absolute;transition:opacity .12s ease-in}.collapsed-content{transition:opacity .2s ease-out .1s}.collapsed-content.hidden{transition:opacity .12s ease-in}.collapsed-indicator{color:#ffffff80;transition:color .2s ease,transform .2s ease;display:flex;align-items:center;justify-content:center}.toolbar-collapsed:hover .collapsed-indicator{color:#fff;transform:translate(1px)}.toolbar-btn{width:30px;height:30px;border-radius:6px;border:1px solid rgba(255,255,255,.1);background:#ffffff0d;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease}.toolbar-btn:hover{background:#ffffff1f}.toolbar-btn:disabled{color:#71717a;cursor:not-allowed;opacity:.5}.toolbar-divider{width:1px;height:18px;background:#ffffff1a}.collapse-btn{width:24px;height:30px;border-radius:4px;border:none;background:transparent;color:#ffffff59;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease;padding:0;margin-right:-2px}.collapse-btn:hover{color:#fffc;background:#ffffff0d}.video-panel{display:flex;align-items:center;gap:4px;padding:6px 8px;background-color:#000000e6;border-radius:16px;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 16px #0006;align-self:center;margin-left:20px;opacity:0;transform:translateY(-8px);transition:opacity .2s ease,transform .2s ease}.video-panel.visible{opacity:1;transform:translateY(0)}.video-panel-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border-radius:6px;border:1px solid rgba(255,255,255,.1);background:#ffffff0d;color:#fff;cursor:pointer;transition:all .15s ease}.video-panel-btn:hover{background:#ffffff26}.video-panel-btn.play-btn{width:32px;height:32px;border-radius:50%;border-color:#22c55e66;background:#22c55e26;color:#22c55e}.video-panel-btn.play-btn:hover{background:#22c55e40}.video-panel-btn.exit-btn{border-color:#ef44444d;background:#ef44441a;color:#ef4444}.video-panel-btn.exit-btn:hover{background:#ef444433}.video-panel-divider{width:1px;height:18px;background:#ffffff1a;margin:0 2px}.volume-control{display:flex;align-items:center}.volume-slider-container{width:0;overflow:hidden;transition:width .2s ease,opacity .2s ease;opacity:0;display:flex;align-items:center}.volume-slider-container.expanded{width:60px;opacity:1;margin-left:4px}.volume-slider{width:100%;height:3px;border-radius:2px;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:10px;height:10px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 0 2px #00000080}.volume-slider::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:#fff;cursor:pointer;border:none;box-shadow:0 0 2px #00000080}.app-container{display:flex;height:100vh;width:100vw;background-color:#1a1a1a;color:#fff;overflow:hidden}.main-content{flex-grow:1;display:flex;flex-direction:column;justify-content:center;align-items:center;background:radial-gradient(circle at center,#2a2a2a,#1a1a1a);padding:0;position:relative}.video-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;box-shadow:0 10px 30px #00000080;border-radius:12px;overflow:hidden;background-color:#000}.sidebar{width:300px;background-color:#242424;border-left:1px solid #333;display:flex;flex-direction:column;padding:20px;box-shadow:-5px 0 15px #0000004d;z-index:10;overflow-x:hidden;overflow-y:auto;box-sizing:border-box;transition:width .3s ease,padding .3s ease,border .3s ease,opacity .3s ease}.sidebar.closed{width:0;padding:0;border-left:none;opacity:0;overflow:hidden}.sidebar-header{margin-bottom:10px}.sidebar-section{min-width:0;overflow-x:hidden;overflow-y:hidden;width:100%;box-sizing:border-box}.sidebar-section h3{font-size:14px;text-transform:uppercase;letter-spacing:1.5px;color:#888;margin-bottom:15px;border-bottom:1px solid #333;padding-bottom:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.placeholder-content{background-color:#2a2a2a;padding:15px;border-radius:8px;color:#666;font-size:14px;text-align:center;border:1px dashed #444}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px);max-height:0}to{opacity:1;transform:translateY(0);max-height:100px}}.color-panel{animation:slideDown .3s ease-out}@keyframes slideDownCentered{0%{opacity:0;transform:translate(-50%,-20px)}to{opacity:1;transform:translate(-50%)}}.fullscreen-overlay{position:fixed;top:20px;left:50%;transform:translate(-50%);background-color:#202020e6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:12px 24px;border-radius:16px;display:flex;gap:16px;z-index:10001;border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px #0006;transition:transform .3s ease,opacity .3s ease;opacity:0;pointer-events:none}.fullscreen-overlay.visible{transform:translate(-50%);opacity:1;pointer-events:auto}.fullscreen-overlay.hidden{transform:translate(-50%,-100%);opacity:0;pointer-events:none}.users-container{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}.users-container::-webkit-scrollbar{width:6px}.users-container::-webkit-scrollbar-track{background:transparent}.users-container::-webkit-scrollbar-thumb{background-color:#fff3;border-radius:3px}.users-container::-webkit-scrollbar-thumb:hover{background-color:#ffffff4d}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#0f0f0f;color:#e5e5e5;height:100%;overflow:hidden}html{height:100%}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.icon-btn{background:transparent;border:none;color:#71717a;cursor:pointer;padding:6px;border-radius:6px;transition:all .2s ease;display:inline-flex;align-items:center;justify-content:center}.icon-btn:hover{background:#ffffff14;color:#fff}.icon-btn:active{transform:scale(.96)}.icon-btn svg{width:18px;height:18px;stroke-width:2px}.icon-btn.small svg{width:14px;height:14px}.icon-btn.danger:hover{color:#fca5a5;background:#dc26261a}.icon-btn.success{color:#86efac}.switch{position:relative;display:inline-block;width:36px;height:20px;vertical-align:middle}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#27272a;transition:.3s;border-radius:20px;border:1px solid #3f3f46}.slider:before{position:absolute;content:"";height:14px;width:14px;left:2px;bottom:2px;background-color:#71717a;transition:.3s;border-radius:50%}input:checked+.slider{background-color:#e5e5e5;border-color:#e5e5e5}input:checked+.slider:before{transform:translate(16px);background-color:#18181b}.minimal-input{background:#ffffff08;border:1px solid #27272a;border-radius:6px;color:#fff;padding:8px 12px;outline:none;transition:all .2s;font-size:14px;width:100%;box-sizing:border-box}.minimal-input:focus{border-color:#52525b;background:#ffffff0d}.tooltip-container{position:relative;display:inline-block;overflow:visible}.tooltip{visibility:hidden;background-color:#18181b;color:#d4d4d8;text-align:center;padding:4px 8px;border-radius:4px;position:absolute;z-index:1000;bottom:125%;left:50%;transform:translate(-50%);opacity:0;transition:opacity .2s;font-size:11px;white-space:nowrap;border:1px solid #27272a;pointer-events:none;overflow:visible}.tooltip.bottom{bottom:auto;top:125%}.sidebar-section .tooltip-container,.sidebar .tooltip-container{overflow:visible!important}.sidebar .tooltip-container .tooltip{max-width:200px;word-wrap:break-word;white-space:normal;position:fixed!important;transform-origin:center bottom}.users-container,.sidebar-section{overflow-x:visible!important}.tooltip-container:hover .tooltip{visibility:visible;opacity:1}.chrome-icon-btn{background:transparent;border:none;color:#aaa;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.chrome-icon-btn:hover{color:#fff;background:#ffffff1a}.btn-primary:hover:not(:disabled){opacity:.9}.btn-ghost{color:#666;border:1px solid #333}.btn-ghost:hover:not(:disabled){border-color:#666;color:#fff}.btn-ghost-dark{color:#9ca3af;border:1px solid #1f1f23}.btn-ghost-dark:hover:not(:disabled){border-color:#2e2e34;color:#fff}.btn-subtle{background-color:transparent;color:#a1a1aa}.btn-subtle:hover:not(:disabled){background-color:#27272a;color:#fff}.btn-danger{background-color:#dc2626}.btn-danger:hover:not(:disabled){background-color:#b91c1c}.btn-neutral{background-color:#333}.btn-neutral:hover:not(:disabled){background-color:#444}.card-btn{background-color:#1a1a1a;border:1px solid #333}.card-btn:hover:not(:disabled){background-color:#222;border-color:#444}.card-btn-muted{color:#888}.card-btn-muted:hover:not(:disabled){color:#fff}.card-btn-raised{background-color:#2a2a2a;border:1px solid #333}.card-btn-raised:hover:not(:disabled){background-color:#333;border-color:#444}.volume-btn:hover:not(:disabled){opacity:.8}.volume-range::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 0 2px #00000080}.volume-range::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;border:none;box-shadow:0 0 2px #00000080}.input-affordance{color:#666}.input-affordance:hover{color:#fff}.sidebar-header-btn{color:#71717a}.sidebar-header-btn:hover{color:#a1a1aa}.toast-close{background:transparent;color:#71717a}.toast-close:hover{background-color:#ffffff1a;color:#e4e4e7}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInPlain{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(.95)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}
