.custom-video-player{cursor:pointer;-webkit-user-select:none;user-select:none;background:#000;width:100%;height:100%;position:relative;overflow:hidden}.custom-video-player.fullscreen{z-index:1;width:100%;height:100%;position:absolute;top:0;left:0}.custom-video-player.fullscreen .video-element,.video-element{object-fit:contain;width:100%;height:100%}.video-element{display:block}.video-element::-webkit-media-controls{display:none!important}.big-play-button{cursor:pointer;z-index:10;background:#667eead9;border-radius:50%;justify-content:center;align-items:center;width:70px;height:70px;transition:all .3s;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 4px 20px #667eea66}.big-play-button:hover{background:#667eea;transform:translate(-50%,-50%)scale(1.1);box-shadow:0 6px 30px #667eea99}.big-play-button svg{margin-left:3px}.video-controls{opacity:0;z-index:20;background:linear-gradient(0deg,#000000e6 0,#0009 60%,#0000);padding:30px 15px 12px;transition:opacity .3s;position:absolute;bottom:0;left:0;right:0}.video-controls.visible{opacity:1}.hide-controls{cursor:none}.progress-bar{cursor:pointer;background:#fff3;border-radius:3px;width:100%;height:5px;margin-bottom:10px;transition:height .2s;position:relative}.progress-bar:hover{height:8px}.progress-filled{background:linear-gradient(90deg,#667eea,#764ba2);border-radius:3px;height:100%;transition:width .1s linear;position:absolute;top:0;left:0}.progress-thumb{opacity:0;pointer-events:none;background:#fff;border-radius:50%;width:14px;height:14px;transition:opacity .2s;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 6px #00000080}.progress-bar:hover .progress-thumb{opacity:1}.controls-bottom{justify-content:space-between;align-items:center;display:flex}.controls-left,.controls-right{align-items:center;gap:6px;display:flex}.control-btn{color:#fff;cursor:pointer;opacity:.85;background:#ffffff0f;border:none;border-radius:8px;justify-content:center;align-items:center;padding:7px;transition:all .2s;display:flex;position:relative}.control-btn:hover{opacity:1;background:#ffffff2e;transform:scale(1.08)}.control-btn:active{transform:scale(.93)}.volume-slider{appearance:none;background:linear-gradient(to right,#fff 0,#fff var(--volume-percent),#fff3 var(--volume-percent),#fff3 100%);cursor:pointer;border-radius:2px;outline:none;width:70px;height:4px;overflow:visible}.volume-slider::-webkit-slider-runnable-track{background:0 0;border-radius:2px;height:4px}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:13px;height:13px;margin-top:-4.5px;box-shadow:0 1px 4px #0000004d}.time-display{color:#fff;opacity:.9;white-space:nowrap;margin-left:8px;font-family:monospace;font-size:13px}@media (width<=768px){.volume-slider{display:none}.time-display{margin-left:4px;font-size:11px}.controls-left,.controls-right{gap:2px}.control-btn{padding:4px}}.subtitle-wrapper{position:relative}.subtitle-menu{z-index:30;background:#141428f7;border:1px solid #ffffff26;border-radius:10px;min-width:180px;padding:6px 0;animation:.2s fadeIn;position:absolute;bottom:45px;left:0;box-shadow:0 8px 30px #0009}.subtitle-menu-header{letter-spacing:1px;opacity:.6;text-transform:uppercase;padding:6px 14px;font-size:.75rem;font-weight:600}.subtitle-option{cursor:pointer;justify-content:space-between;align-items:center;padding:8px 14px;font-size:.85rem;transition:background .15s;display:flex}.subtitle-option:hover{background:#ffffff14}.check,.subtitle-option.selected{color:#667eea}.check{font-weight:700}.add-subtitle{color:#667eea;border-top:1px solid #ffffff1a;margin-top:4px;padding-top:10px}.control-btn.active{color:#667eea;background:#667eea26}.subtitle-text{background:#000c;padding:6px 14px;font-size:1.1rem;font-weight:500;bottom:65px}.video-element::cue{color:#fff;text-shadow:1px 1px 3px #000000e6;white-space:pre-wrap;background:#000c;border-radius:6px;padding:4px 10px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:1.1rem;line-height:1.5}.video-element::cue(b){color:#ffeb3b;font-weight:700}.video-element::cue(i){font-style:italic}.subtitle-settings-menu{background:#141428f7;border:1px solid #ffffff26;border-radius:10px;min-width:220px;padding:6px 0;animation:.2s fadeIn;box-shadow:0 8px 30px #0009}.settings-close-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:10px;width:100%;margin-top:20px;padding:10px;font-size:1rem;font-weight:600}.settings-row{justify-content:space-between;align-items:center;padding:10px 14px;font-size:.85rem;display:flex}.settings-controls{align-items:center;gap:8px;font-size:.8rem;display:flex}.settings-btn{color:#fff;cursor:pointer;background:#ffffff1a;border:1px solid #fff3;border-radius:6px;padding:4px 10px;font-size:.8rem;transition:all .2s}.settings-btn:hover{background:#fff3}.settings-btn.active{background:#667eea66;border-color:#667eea}.subtitle-text{text-align:center;text-shadow:1px 1px 3px #000000e6;z-index:15;border-radius:8px;max-width:85%;line-height:1.5;transition:font-size .2s;left:50%}.progress-tooltip,.subtitle-text{color:#fff;pointer-events:none;position:absolute;transform:translate(-50%)}.progress-tooltip{white-space:nowrap;z-index:25;background:#000000e6;border-radius:6px;padding:3px 8px;font-size:.75rem;font-weight:600;top:-28px}.modal-overlay{backdrop-filter:blur(5px);z-index:1000;background:#0009;justify-content:center;align-items:center;animation:.3s fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:#1a1a2e;border:1px solid #ffffff1a;border-radius:20px;width:90%;max-width:450px;padding:2rem;animation:.3s slideUp;box-shadow:0 20px 60px #00000080}.light .modal-content{background:#fff;border:1px solid #0000001a;box-shadow:0 20px 60px #0003}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-header{justify-content:space-between;align-items:center;margin-bottom:.75rem;display:flex}.modal-title{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;background-clip:text;font-size:1.5rem;font-weight:700}.modal-close{color:#fff;cursor:pointer;background:#ffffff1a;border:none;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:1.2rem;transition:all .3s;display:flex}.modal-close:hover{background:#ef44444d;transform:rotate(90deg)}.light .modal-close{color:#333;background:#0000000d}.light .modal-close:hover{background:#ef444433}.modal-description{opacity:.7;margin-bottom:1.5rem;font-size:.95rem;line-height:1.5}.modal-input-group{gap:.75rem;display:flex}.modal-input{color:#fff;background:#ffffff0d;border:2px solid #667eea4d;border-radius:12px;outline:none;flex:1;padding:.75rem 1rem;font-size:1rem;transition:all .3s}.modal-input:focus{background:#ffffff1a;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.light .modal-input{color:#333;background:#00000008;border-color:#0000001a}.light .modal-input:focus{background:#fff;border-color:#667eea}.modal-input::placeholder{opacity:.5}.modal-save-btn{white-space:nowrap}@media (width<=768px){.modal-content{padding:1.5rem}.modal-input-group{flex-direction:column}.modal-input{width:100%}}*{box-sizing:border-box;margin:0;padding:0}.app{min-height:100vh;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;transition:all .3s}.app.dark{color:#e0e0e0;background:linear-gradient(135deg,#0f0f0f,#1a1a2e 50%,#16213e)}.app.light{color:#2d3436;background:linear-gradient(135deg,#f5f7fa,#c3cfe2)}.container{max-width:1000px;margin:0 auto;padding:2rem}.header{justify-content:space-between;margin-bottom:2rem}.header,.title{align-items:center;display:flex}.title{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;background-clip:text;gap:.5rem;font-weight:700}.icon,.title{font-size:2.5rem}.icon{-webkit-text-fill-color:initial}.theme-toggle{cursor:pointer;background:0 0;border:2px solid #667eea;border-radius:50%;justify-content:center;align-items:center;width:50px;height:50px;font-size:1.5rem;transition:all .3s;display:flex}.theme-toggle:hover{transform:scale(1.1);box-shadow:0 0 20px #667eea80}.join-section{align-items:flex-start;gap:2rem;margin-top:3rem;display:flex}.card{border-radius:20px;flex:1;padding:2rem;transition:all .3s}.dark .card{backdrop-filter:blur(10px);background:#ffffff0d;border:1px solid #ffffff1a}.light .card{background:#fffc;border:1px solid #0000001a;box-shadow:0 10px 40px #0000001a}.card:hover{transform:translateY(-5px)}.card-title{margin-bottom:.5rem;font-size:1.5rem;font-weight:600}.card-description{opacity:.7;margin-bottom:1.5rem;font-size:.9rem}.btn{cursor:pointer;border:none;border-radius:12px;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;transition:all .3s;display:inline-flex}.btn-primary{color:#fff;background:linear-gradient(135deg,#667eea,#764ba2)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px #667eea66}.btn-secondary{color:#fff;background:linear-gradient(135deg,#f093fb,#f5576c)}.btn-secondary:hover{transform:translateY(-2px);box-shadow:0 10px 30px #f093fb66}.btn-danger{color:#fff;background:linear-gradient(135deg,#ef4444,#dc2626)}.btn-danger:hover{transform:translateY(-2px);box-shadow:0 10px 30px #ef444466}.btn-outline{color:#667eea;background:0 0;border:2px solid #667eea}.btn-outline:hover{background:#667eea1a}.btn-small{padding:.5rem 1rem;font-size:.85rem}.divider{flex-direction:column;align-items:center;gap:1rem;display:flex}.divider:after,.divider:before{content:"";background:linear-gradient(135deg,#667eea,#764ba2);border-radius:1px;width:2px;height:50px}.divider span{border-radius:50%;padding:.5rem 1rem;font-weight:600}.dark .divider span{background:#ffffff1a}.light .divider span{background:#0000000d}.input{border:2px solid #0000;border-radius:12px;outline:none;flex:1;padding:.75rem 1rem;font-size:1rem;transition:all .3s}.dark .input{color:#fff;background:#ffffff1a}.dark .input::placeholder{color:#ffffff80}.dark .input:focus{background:#ffffff26;border-color:#667eea}.light .input{color:#2d3436;background:#fff;border-color:#0000001a}.light .input:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.input-group{gap:.5rem;display:flex}.room-content{gap:20px;height:calc(100vh - 200px);min-height:500px;display:flex}.video-section{flex:1;min-width:0}.video-container{border-radius:20px;flex-direction:column;height:100%;display:flex;overflow:hidden}.dark .video-container{background:#ffffff08;border:1px solid #ffffff1a}.light .video-container{background:#fff;border:1px solid #0000001a;box-shadow:0 20px 60px #0000001a}.video-info-bar{border-bottom:1px solid #ffffff1a;flex-shrink:0;justify-content:space-between;align-items:center;min-height:60px;padding:1rem 1.5rem;display:flex}.file-name{text-overflow:ellipsis;white-space:nowrap;max-width:60%;font-weight:500;overflow:hidden}.video-wrapper{background:#000;flex:1;justify-content:center;align-items:center;min-height:300px;display:flex;position:relative}.upload-placeholder{text-align:center;flex-direction:column;align-items:center;gap:.5rem;padding:2rem;display:flex}.upload-placeholder p{margin:0}.upload-icon{font-size:4rem;animation:3s ease-in-out infinite float}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.upload-placeholder p{opacity:.5;font-size:1.1rem}.room-header{border-radius:16px;justify-content:space-between;align-items:center;margin-bottom:1rem;padding:1.5rem;display:flex}.dark .room-header{background:#ffffff0d;border:1px solid #ffffff1a}.light .room-header{background:#ffffffb3;border:1px solid #0000001a}.room-info{align-items:center;gap:1rem;display:flex}.room-label{opacity:.7;font-size:1.1rem}.room-code{color:#fff;letter-spacing:2px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px;padding:.5rem 1rem;font-size:1.5rem;font-weight:700}.status-badge{border-radius:20px;align-items:center;gap:6px;padding:5px 14px;font-size:.78rem;font-weight:600;transition:all .3s;display:flex}.status-badge.active{color:#4ade80;background:#4ade8014}.status-badge.inactive{color:#f87171;background:#ef444414}.status-dot{border-radius:50%;width:7px;height:7px;transition:all .3s}.status-badge.active .status-dot{background:#4ade80;box-shadow:0 0 6px #4ade80}.status-badge.inactive .status-dot{background:#f87171;box-shadow:0 0 6px #f87171}@keyframes badgePulse{0%,to{box-shadow:0 0 #4ade8066}50%{box-shadow:0 0 0 8px #4ade8000}}.status-text{text-transform:uppercase}.room-actions{gap:10px}.btn-chat-toggle{color:#667eea;cursor:pointer;text-align:center;background:0 0;border:2px solid #667eea;border-radius:12px;justify-content:center;align-items:center;gap:6px;min-width:85px;padding:8px 16px;font-size:14px;font-weight:600;transition:all .3s;display:flex;position:relative}.btn-chat-toggle:hover{background:#667eea1a;transform:translateY(-2px)}.btn-chat-toggle.active{color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);border-color:#0000}.chat-badge{color:#fff;text-align:center;background:#f44;border:2px solid #1a1a1a;border-radius:50%;min-width:18px;padding:2px 6px;font-size:10px;position:absolute;top:-8px;right:-8px}.light .chat-badge{border-color:#fff}.chat-resize-handle{cursor:col-resize;background:#ffffff0d;flex-shrink:0;justify-content:center;align-items:center;width:8px;transition:background .2s;display:flex;position:relative}.chat-resize-handle:hover{background:#ffffff1a}.resize-dots{color:#ffffff40;pointer-events:none;-webkit-user-select:none;user-select:none;font-size:14px}.fullscreen-chat-toggle{color:#999;cursor:pointer;z-index:40;background:#1e1e1e;border:1px solid #333;border-right:none;border-radius:10px 0 0 10px;justify-content:center;align-items:center;width:30px;height:55px;padding:0;transition:all .2s;display:flex;position:absolute;top:50%;left:-16px;transform:translateY(-50%)}.fullscreen-chat-toggle:hover{color:#fff;background:#2a2a2a;border-color:#667eea;box-shadow:-2px 0 12px #667eea26}.chat-section{flex-direction:column;min-width:250px;max-width:600px;transition:width .3s;display:flex}.chat-section.minimized{min-width:50px!important;max-width:50px!important}.chat-container{background:#1e1e1e;border:1px solid #333;border-radius:12px;flex-direction:column;height:100%;display:flex;overflow:hidden}.light .chat-container{background:#f5f5f5;border-color:#ddd}.chat-minimized{cursor:pointer;background:#2a2a2a;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;height:100%;display:flex;position:relative}.chat-minimized:hover{background:#333}.light .chat-minimized{background:#e8e8e8}.light .chat-minimized:hover{background:#ddd}.minimized-icon{font-size:24px}.chat-badge-minimized{color:#fff;text-align:center;background:#f44;border-radius:50%;min-width:18px;padding:2px 6px;font-size:10px;position:absolute;top:10px;right:10px}.chat-header{background:#2a2a2a;border-bottom:1px solid #333;flex-shrink:0;justify-content:space-between;align-items:center;padding:15px 20px;display:flex}.light .chat-header{background:#e8e8e8;border-bottom-color:#ddd}.chat-header h3{color:#fff;margin:0;font-size:16px}.light .chat-header h3{color:#333}.chat-header-actions{gap:8px;display:flex}.btn-header-action{color:#999;cursor:pointer;background:0 0;border:none;border-radius:4px;padding:4px 8px;font-size:16px;line-height:1;transition:all .3s}.btn-header-action:hover{color:#fff;background:#ffffff1a}.light .btn-header-action:hover{color:#333;background:#0000001a}.btn-header-action:last-child:hover{color:#f44}.chat-messages{flex-direction:column;flex:1;gap:10px;padding:15px;display:flex;overflow-y:auto}.chat-messages::-webkit-scrollbar{width:6px}.chat-messages::-webkit-scrollbar-track{background:0 0}.chat-messages::-webkit-scrollbar-thumb{background:#444;border-radius:3px}.chat-empty{color:#666;text-align:center;margin:auto 0}.chat-empty p{margin:5px 0}.chat-hint{color:#888;font-size:12px}.chat-message{border-radius:12px;max-width:85%;padding:8px 12px;animation:.3s slideIn}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.chat-message.mine{background:#4caf50;border-bottom-right-radius:4px;align-self:flex-end}.chat-message.other{background:#333;border-bottom-left-radius:4px;align-self:flex-start}.light .chat-message.other{background:#e0e0e0}.message-sender{color:#fffc;margin-bottom:3px;font-size:11px;font-weight:700}.light .chat-message.other .message-sender{color:#555}.message-text{word-wrap:break-word;color:#fff;font-size:13px;line-height:1.4}.light .chat-message.mine .message-text{color:#fff}.light .chat-message.other .message-text{color:#333}.message-time{color:#ffffff80;text-align:right;margin-top:3px;font-size:10px}.chat-input-area{background:#2a2a2a;border-top:1px solid #333;flex-shrink:0;align-items:center;gap:8px;padding:12px;display:flex}.light .chat-input-area{background:#e8e8e8;border-top-color:#ddd}.chat-input{color:#fff;background:#1e1e1e;border:1px solid #444;border-radius:8px;outline:none;flex:1;min-width:0;padding:8px 12px;font-size:13px}.light .chat-input{color:#333;background:#fff;border-color:#ccc}.chat-input:focus{border-color:#4caf50}.btn-send{color:#fff;cursor:pointer;white-space:nowrap;background:#4caf50;border:none;border-radius:8px;flex-shrink:0;padding:8px 12px;font-size:13px;font-weight:600}.btn-send:hover:not(:disabled){background:#45a049}.btn-send:disabled{cursor:not-allowed;opacity:.6;background:#555}.room-content.fullscreen{z-index:9999!important;background:#000!important;flex-direction:row!important;gap:0!important;width:100vw!important;height:100vh!important;min-height:100vh!important;margin:0!important;padding:0!important;display:flex!important;position:fixed!important;inset:0!important}.room-content.fullscreen .video-info-bar{display:none!important}.room-content.fullscreen .video-section{flex:1!important;min-width:0!important;height:100vh!important}.room-content.fullscreen .video-container{border:none!important;border-radius:0!important;width:100%!important;height:100%!important}.room-content.fullscreen .video-wrapper{flex:1!important}.room-content.fullscreen .custom-video-player,.room-content.fullscreen .video-wrapper{width:100%!important;height:100%!important}.room-content.fullscreen .chat-resize-handle{cursor:col-resize;background:0 0;width:4px;margin:0!important;padding:0!important}.room-content.fullscreen .chat-resize-handle:hover{background:0 0}.room-content.fullscreen .resize-dots{display:none}.room-content.fullscreen .chat-section{border-radius:0!important;flex-shrink:0!important;height:100vh!important;margin:0!important}.room-content.fullscreen .chat-container{border-left:none!important;border-radius:0!important;height:100vh!important}.chat-section.hidden{display:none!important}.room-content.fullscreen .chat-section.hidden~.chat-resize-handle{cursor:default;width:2px}.room-content.fullscreen .upload-placeholder{display:none!important}@media (width<=768px){.container{padding:1rem}.icon,.title{font-size:1.8rem}.join-section{flex-direction:column}.divider{flex-direction:row;justify-content:center}.divider:after,.divider:before{width:50px;height:2px}.input-group{flex-direction:column}.room-info{flex-wrap:wrap}.video-info-bar{flex-direction:column;gap:.5rem}.file-name{max-width:800%}.btn-small{justify-content:center;align-items:center;margin-top:5px;padding:8px;font-size:small;display:flex}.chat-resize-handle{display:none}.chat-section{height:400px}.chat-section,.chat-section.minimized{min-width:100%!important;max-width:100%!important}.chat-section.minimized{height:50px}.room-content.fullscreen{flex-direction:column!important}.room-content.fullscreen .chat-section{height:40vh!important}.room-content.fullscreen .video-section{height:60vh!important}}.header-controls{gap:1rem}.header-controls,.username-btn{align-items:center;display:flex}.username-btn{color:inherit;cursor:pointer;background:#667eea1a;border:2px solid #667eea66;border-radius:50px;gap:.5rem;padding:.5rem 1rem;font-family:inherit;transition:all .3s}.username-btn:hover{background:#667eea33;border-color:#667eea99;transform:translateY(-1px);box-shadow:0 4px 15px #667eea33}.username-avatar{color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:30px;height:30px;font-size:.9rem;font-weight:700;display:flex}.username-text{text-overflow:ellipsis;white-space:nowrap;max-width:120px;font-size:.9rem;font-weight:600;overflow:hidden}.edit-icon{opacity:.4;font-size:.75rem;transition:opacity .3s}.username-btn:hover .edit-icon{opacity:1}@media (width<=768px){.header-controls{gap:.5rem}.username-text{display:none}.username-btn{padding:.5rem}.edit-icon{display:none}}.user-list-wrapper{backdrop-filter:blur(10px);background:#0003;border-left:1px solid #ffffff1a;flex-shrink:0}.light .user-list-wrapper{background:#ffffffe6;border-left:1px solid #0000001a}.room-actions{align-items:center;gap:.5rem;display:flex}.user-list-panel-right{backdrop-filter:blur(20px);z-index:500;background:#14142df7;border:1px solid #ffffff1a;border-radius:16px;width:260px;max-height:calc(100vh - 140px);animation:.3s slideInRight;position:fixed;top:100px;right:20px;overflow:hidden;box-shadow:0 20px 60px #0009}.light .user-list-panel-right{background:#fffffffa;border:1px solid #0000001a;box-shadow:0 20px 60px #00000026}@keyframes slideInRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}.room-content.fullscreen~.user-list-panel-right{z-index:10000;max-height:calc(100vh - 20px);top:10px;right:10px}.user-list-panel{flex-direction:column;height:100%;display:flex}.user-list-panel-header{border-bottom:1px solid #ffffff1a;flex-shrink:0;justify-content:space-between;align-items:center;padding:.75rem 1rem;display:flex}.light .user-list-panel-header{border-bottom:1px solid #00000014}.user-list-panel-title{align-items:center;gap:.5rem;font-size:.85rem;font-weight:600;display:flex}.user-list-count{color:#667eea;background:#667eea33;border-radius:10px;padding:2px 7px;font-size:.7rem;font-weight:700}.user-list-close-btn{color:inherit;cursor:pointer;opacity:.4;background:0 0;border:none;border-radius:4px;padding:4px 6px;font-size:.9rem;transition:all .2s}.user-list-close-btn:hover{opacity:1;background:#ef444433}.user-list-panel-body{flex:1;padding:.5rem;overflow-y:auto}.user-list-panel-body::-webkit-scrollbar{width:3px}.user-list-panel-body::-webkit-scrollbar-track{background:0 0}.user-list-panel-body::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:3px}.user-list-empty{opacity:.4;text-align:center;padding:2rem 1rem}.empty-icon{margin-bottom:.5rem;font-size:2rem;display:block}.user-list-empty p{font-size:.8rem}.user-list-item{border-radius:8px;align-items:center;gap:.65rem;padding:.5rem .6rem;transition:background .15s;animation:.3s fadeInRight;display:flex}.user-list-item:hover{background:#667eea14}.light .user-list-item:hover{background:#667eea0f}.user-list-avatar{color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:30px;height:30px;font-size:.75rem;font-weight:700;display:flex;position:relative}.user-online-dot{background:#4ade80;border:2px solid #1a1a2e;border-radius:50%;width:8px;height:8px;position:absolute;bottom:-1px;right:-1px}.light .user-online-dot{border-color:#fff}.user-list-item-info{flex-direction:column;flex:1;min-width:0;display:flex}.user-list-name{text-overflow:ellipsis;white-space:nowrap;font-size:.8rem;font-weight:500;overflow:hidden}.user-list-status{color:#4ade80;opacity:.8;font-size:.65rem}.user-list-time{opacity:.35;flex-shrink:0;font-size:.65rem}@keyframes fadeInRight{0%{opacity:0;transform:translate(8px)}to{opacity:1;transform:translate(0)}}.btn-userlist-toggle{color:#667eea;cursor:pointer;background:0 0;border:2px solid #667eea;border-radius:12px;align-items:center;gap:6px;padding:8px 16px;font-size:14px;font-weight:600;transition:all .3s;display:flex;position:relative}.btn-userlist-toggle:hover{background:#667eea1a;transform:translateY(-2px)}.btn-userlist-toggle.active{color:#fff!important;background:linear-gradient(135deg,#667eea,#764ba2)!important;border-color:#0000!important}.user-count-badge{color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;justify-content:center;align-items:center;min-width:22px;height:22px;margin-left:4px;font-size:.7rem;font-weight:700;display:inline-flex}.btn-userlist-toggle.active .user-count-badge{color:#fff!important;background:#ffffff4d!important}@media (width<=768px){.user-list-panel-right{width:90%;max-width:320px;max-height:60vh;animation:.3s fadeIn;position:fixed;top:50%;left:50%;right:auto;transform:translate(-50%,-50%)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}}@keyframes fadeInOut{0%{opacity:0;transform:translate(-50%)translateY(4px)}15%{opacity:1;transform:translate(-50%)translateY(0)}70%{opacity:1}to{opacity:0}}.btn-reply{color:#999;cursor:pointer;opacity:0;vertical-align:middle;background:0 0;border:none;border-radius:4px;margin-left:8px;padding:2px 6px;font-size:14px;transition:all .2s}.chat-message:hover .btn-reply{opacity:1}.btn-reply:hover{color:#667eea;background:#667eea1a}.reply-preview{background:#667eea1a;border-left:3px solid #667eea;border-radius:6px;width:100%;margin-bottom:6px;padding:6px 10px}.reply-preview-header{opacity:.7;justify-content:space-between;margin-bottom:2px;font-size:.7rem;display:flex}.reply-cancel{color:#999;cursor:pointer;background:0 0;border:none;padding:0 4px;font-size:.8rem}.reply-cancel:hover{color:#ef4444}.reply-preview-text{opacity:.8;text-overflow:ellipsis;white-space:nowrap;font-size:.8rem;overflow:hidden}.reply-reference{background:#ffffff0d;border-left:2px solid #667eea;border-radius:4px;margin-bottom:4px;padding:4px 8px;font-size:.75rem}.reply-name{color:#667eea;margin-right:6px;font-weight:600}.reply-text-preview{opacity:.7}.voice-header-flex{justify-content:space-between;align-items:center;display:flex}.voice-disconnect-btn{color:#fff;cursor:pointer;background:#ef4444;border:none;border-radius:6px;padding:4px 12px;font-size:11px}.voice-disconnect-btn:hover{background:#dc2626}.chat-input-area{flex-wrap:wrap}.voice-panel{backdrop-filter:blur(10px);z-index:1000;background:#1a1a2ef2;border:1px solid #667eea4d;border-radius:16px;min-width:200px;padding:12px 16px;font-size:.85rem;position:fixed;bottom:20px;left:20px}.light .voice-panel{background:#fffffff2;border-color:#667eea33;box-shadow:0 4px 12px #0000001a}.voice-header{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.voice-header h4{margin:0;font-size:.9rem}.voice-status{margin-bottom:10px;font-size:.75rem}.voice-status.connected{color:#4ade80}.voice-status.disconnected{color:#f87171}.voice-mute-btn{color:inherit;cursor:pointer;background:#ef444433;border:none;border-radius:20px;padding:4px 12px;font-size:.7rem;transition:all .2s}.voice-mute-btn.muted{color:#ef4444;background:#ef444466}.voice-mute-btn:hover{transform:scale(1.02)}.voice-participants{border-top:1px solid #667eea33;max-height:150px;margin-top:10px;padding-top:8px;overflow-y:auto}.voice-participants-title{opacity:.6;margin-bottom:6px;font-size:.7rem}.voice-participant{align-items:center;gap:8px;padding:4px 0;font-size:.75rem;display:flex}.voice-participant-name{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}@media (width<=768px){.voice-panel{min-width:auto;bottom:10px;left:10px;right:10px}}.voice-participant-icon{width:24px;font-size:1rem}@media (width<=768px){.mobile-header{z-index:100;background:#1a1a2e;border-bottom:1px solid #333;border-radius:15px;justify-content:space-between;align-items:center;padding:12px 16px;display:flex;position:sticky;top:0}.video-container{height:370px}.room-code{padding:7px;font-size:1rem}.mobile-room-info{flex-direction:row;align-items:center;gap:12px;display:flex}.menu-button{color:#fff;cursor:pointer;background:0 0;border:none;border-radius:8px;padding:8px;font-size:24px}.menu-button:hover{background:#ffffff1a}.chat-container{height:230px}.dark .video-container{margin-top:10px}.chat-header{padding:5px 10px}.menu-overlay{z-index:1000;background:#00000080;position:fixed;inset:0}.mobile-sidebar{z-index:1001;background:#1e1e2e;flex-direction:column;width:300px;height:100vh;animation:.3s slideIn;display:flex;position:fixed;top:0;right:0;box-shadow:-2px 0 10px #0000004d}.upload-placeholder p{padding-bottom:14px}@keyframes slideIn{0%{transform:translate(100%)}to{transform:translate(0)}}.sidebar-header{border-bottom:1px solid #333;justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.sidebar-header h3{color:#fff;margin:0;font-size:18px}.sidebar-header button{color:#fff;cursor:pointer;background:0 0;border:none;font-size:20px}.sidebar-items{flex-direction:column;flex:1;display:flex;overflow-y:auto}.sidebar-item{color:#fff;cursor:pointer;text-align:left;background:0 0;border:none;border-bottom:1px solid #333;align-items:center;gap:16px;width:100%;padding:14px 20px;font-size:16px;display:flex;position:relative}.sidebar-item:hover{background:#ffffff0d}.sidebar-icon{width:28px;font-size:20px}.sidebar-badge{color:#fff;background:#ef4444;border-radius:12px;padding:2px 8px;font-size:12px;position:absolute;right:20px}.submenu-arrow{color:#888;margin-left:auto;font-size:12px}.sidebar-item-danger{color:#ef4444;border-top:1px solid #333;margin-top:auto}.submenu-vertical{background:#2a2a3e;border-bottom:1px solid #444}.submenu-vertical-header{color:#fff;background:#333;padding:10px 20px;font-size:13px;font-weight:700}.submenu-vertical-content{background-color:#2a2a3e8f;padding:8px 0}.submenu-user{color:#fff;border-bottom:1px solid #444;align-items:center;gap:12px;padding:10px 20px;display:flex}.submenu-user:first-child,.submenu-user:last-child{border:none}.user-avatar{font-size:16px}.user-name{flex:1;font-size:14px}.user-badge{color:#000;background:#4ade80;border-radius:12px;padding:2px 8px;font-size:10px}.voice-submenu-content{background-color:#2a2a3e8f;flex-direction:column;gap:10px;padding:12px 20px;display:flex}.voice-status{text-align:center;border-radius:8px;padding:6px 10px;font-size:13px}.voice-status.connected{color:#4ade80;background:#4ade8033}.voice-status.disconnected{color:#ef4444;background:#ef444433}.voice-mute-btn{cursor:pointer;border:none;border-radius:8px;padding:8px;font-size:13px}.voice-mute-btn.muted{color:#fff;background:#ef4444}.voice-mute-btn:not(.muted){color:#000;background:#4ade80}.voice-participants{margin-top:4px}.voice-participants-title{color:#888;margin-bottom:6px;font-size:11px}.voice-participant{align-items:center;gap:8px;padding:6px 0;font-size:13px;display:flex}.room-content{flex-direction:column;height:600px;display:flex}.room-content.mobile-chat-active .video-section{flex:1;width:100%;height:400px;margin-top:20px}.room-content .chat-section{display:none}.room-content.mobile-chat-active .chat-section{position:relative;width:280px!important;display:flex!important}.mobile-chat-close{color:#fff;cursor:pointer;visibility:hidden;z-index:60;background:#333;border:none;border-radius:50%;justify-content:center;align-items:center;width:30px;height:30px;font-size:14px;display:flex;position:absolute;top:8px;right:8px}.copy-toast{color:#000;z-index:200;background:#4ade80;border-radius:20px;padding:4px 12px;font-size:12px;animation:1.5s fadeOut;position:fixed;top:60px;left:50%;transform:translate(-50%)}@keyframes fadeOut{0%{opacity:1}70%{opacity:1}to{opacity:0;visibility:hidden}}}.room-content.fullscreen .custom-video-player{z-index:1!important}.mini-voice-overlay{backdrop-filter:blur(8px);pointer-events:none;border:none;border-radius:10px;flex-direction:column;gap:4px;min-width:150px;z-index:99999!important;background:#000c!important;padding:10px 14px!important;display:flex!important;position:fixed!important;top:12px!important;left:12px!important}.mini-voice-user{align-items:center;gap:8px;font-size:13px;font-weight:500;transition:all .3s;display:flex!important}.mini-dot{border-radius:50%;flex-shrink:0;width:7px;height:7px}.mini-voice-user.idle{color:#fff6!important}.mini-voice-user.idle .mini-dot{background:#ffffff4d!important}.mini-voice-user.speaking{font-weight:600;color:#4ade80!important}.mini-voice-user.speaking .mini-dot{box-shadow:0 0 8px #4ade80b3;background:#4ade80!important}.mini-voice-user.muted{color:#fff3!important}.mini-voice-user.muted .mini-dot{background:#ffffff1a!important}