:root{--primary:#365ff8;--primary-dark:#083af3;--primary-rgb:54,95,248;--dark-main:#14141f;--dark-light:#28283e;--white:#fff;--gray:#8a8a9a;--gray-light:#b0b0c0;--success:#00d26a;--success-dark:#009f50;--warning:#ffc107;--danger:#8b202b;--danger-dark:#62161e;--sidebar-width:400px;--header-height:60px;--bottom-bar-height:64.55px;--border-radius:8px;--border-radius-lg:12px;--transition:.2s ease}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{color:#fff;background-color:#14141f;height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;font-size:14px;line-height:1.5;overflow:hidden}a{color:inherit;text-decoration:none}button{cursor:pointer;font-family:inherit;font-size:inherit;color:inherit;background:0 0;border:none}input,textarea{font-family:inherit;font-size:inherit;background-color:#14141f;border:none;outline:none}ul,ol{list-style:none}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#28283e;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#3c3c5d}.flex{flex-direction:row;display:flex}.flex-center{justify-content:center;align-items:center;display:flex}.flex-between{justify-content:space-between;align-items:center;display:flex}.flex-column{flex-direction:column;display:flex}.gap-sm{gap:8px}.gap-md{gap:16px}.gap-lg{gap:24px}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:.3}50%{opacity:1}}@keyframes rtc-pulse{0%,to{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}}.page-enter{opacity:0;transform:translateY(10px)}.page-enter-active{opacity:1;transition:all .3s;transform:translateY(0)}.btn{border-radius:var(--border-radius);transition:all var(--transition);cursor:pointer;justify-content:center;align-items:center;gap:8px;padding:12px 20px;font-weight:500;display:inline-flex}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{color:#fff;background-color:#365ff8}.btn-primary:hover:not(:disabled){background-color:#6786fa}.btn-secondary{color:#fff;background-color:#28283e}.btn-secondary:hover:not(:disabled){background-color:#3c3c5d}.btn-ghost{color:#b0b0c0;background-color:#0000}.btn-ghost:hover:not(:disabled){color:#fff;background-color:#28283e}.btn-icon{border-radius:50%;width:44px;height:44px;padding:0;font-size:20px}.btn-icon-sm{width:36px;height:36px;font-size:16px}.input{border-radius:var(--border-radius);color:#fff;width:100%;transition:all var(--transition);border:1px solid #0000;padding:12px 16px}.input::placeholder{color:#8a8a9a}.input:focus{border-color:#365ff8}.input-group{flex-direction:column;gap:6px;display:flex}.input-group label{color:#b0b0c0;font-size:13px}.toggle-switch{width:48px;height:26px;position:relative}.toggle-switch input{opacity:0;width:0;height:0}.toggle-switch input:checked+.toggle-slider{background:var(--primary)}.toggle-switch input:checked+.toggle-slider:before{transform:translate(22px)}.toggle-switch .toggle-slider{background:var(--dark-light);cursor:pointer;transition:all var(--transition);border-radius:13px;position:absolute;inset:0}.toggle-switch .toggle-slider:before{content:"";background:var(--white);width:20px;height:20px;transition:all var(--transition);border-radius:50%;position:absolute;top:3px;left:3px}.range-slider{appearance:none;background:#28283e;border-radius:2px;outline:none;width:100%;height:4px}.range-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;width:14px;height:14px;transition:all var(--transition);background:#fff;border-radius:50%}.range-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.select-setting{padding:12px 0}.select-setting label{margin-bottom:8px;font-weight:500;display:block}.select-setting select{background:var(--dark-light);border-radius:var(--border-radius);width:100%;color:var(--white);cursor:pointer;border:none;padding:10px 12px}.select-setting select option{background:var(--dark-main)}.card{border-radius:var(--border-radius-lg);background-color:#28283e;padding:20px}.badge{border-radius:50px;justify-content:center;align-items:center;padding:2px 8px;font-size:12px;font-weight:500;display:inline-flex}.badge-primary{color:#fff;background-color:#365ff8}.badge-success{color:#14141f;background-color:#00d26a}.avatar{text-transform:uppercase;background-color:#365ff8;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:16px;font-weight:600;display:flex}.avatar-sm{width:32px;height:32px;font-size:12px}.avatar-lg{width:56px;height:56px;font-size:22px}.active-speaker{box-shadow:0 0 0 3px #00d26a}.modal-backdrop{z-index:1000;background-color:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{border-radius:var(--border-radius-lg);background-color:#14141f;border:1px solid #28283e;width:90%;max-width:480px;max-height:90vh;padding:24px;overflow-y:auto}.tooltip{position:relative}.tooltip:after{content:attr(data-tooltip);white-space:nowrap;opacity:0;visibility:hidden;transition:all var(--transition);z-index:1000;background-color:#14141f;border:1px solid #28283e;border-radius:6px;padding:6px 12px;font-size:12px;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.tooltip:hover:after{opacity:1;visibility:visible}.tabs{border-radius:var(--border-radius);background-color:#14141f;gap:4px;padding:4px;display:flex}.tab{color:#b0b0c0;transition:all var(--transition);border-radius:6px;padding:8px 16px}.tab:hover{color:#fff;background-color:#28283e80}.tab.active{color:#fff;background-color:#28283e}.status-dot{border-radius:50%;width:10px;height:10px}.status-dot.online{background-color:#00d26a}.status-dot.offline{background-color:#8a8a9a}.status-dot.away{background-color:#ffc107}.spinner{border:3px solid #28283e;border-top-color:#365ff8;border-radius:50%;width:24px;height:24px;animation:.8s linear infinite spin}.connection-bars{align-items:flex-end;gap:2px;height:16px;display:flex}.connection-bars span{width:4px;transition:all var(--transition);background-color:#8a8a9a;border-radius:1px}.connection-bars span:first-child{height:4px}.connection-bars span:nth-child(2){height:8px}.connection-bars span:nth-child(3){height:12px}.connection-bars span:nth-child(4){height:16px}.connection-bars.excellent span,.connection-bars.good span:nth-child(-n+3){background-color:#00d26a}.connection-bars.fair span:nth-child(-n+2){background-color:#ffc107}.connection-bars.poor span:first-child{background-color:#8b202b}.home-page{background:linear-gradient(135deg,var(--dark-main)0%,#1a1a2e 100%);flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:40px 20px;display:flex}.home-logo{align-items:center;gap:10px;margin-bottom:48px;display:flex}.home-logo .logo-icon{width:100px}.home-logo h1{color:#365ff8;font-size:46px;font-weight:700}.home-content{width:100%;max-width:400px}.home-card{background:var(--dark-light);border-radius:var(--border-radius-lg);margin-bottom:24px;padding:32px}.home-card h2{align-items:center;gap:8px;margin-bottom:20px;font-size:18px;font-weight:600;display:flex}.room-form{flex-direction:column;gap:16px;display:flex}.room-form .room-id-input{gap:8px;display:flex}.room-form .room-id-input input{flex:1}.room-form .room-id-input .btn-generate{background-color:#14141f;padding:8px}.room-form .room-id-input .btn-generate:hover{color:#365ff8}.recent-rooms h2{color:var(--gray-light);align-items:center;gap:8px;margin-bottom:16px;font-size:16px;display:flex}.recent-rooms-list{flex-direction:column;gap:8px;display:flex}.recent-room-item{background:var(--dark-main);border-radius:var(--border-radius);transition:all var(--transition);cursor:pointer;justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.recent-room-item:hover{background:#365ff81a}.recent-room-item .room-info{flex-direction:column;gap:2px;display:flex}.recent-room-item .room-info .room-id{transition:color var(--transition);font-weight:500}.recent-room-item .room-info .room-time{color:var(--gray);font-size:12px}.recent-room-item .remove-btn{width:28px;height:28px;color:var(--gray);transition:all var(--transition);border-radius:50%;justify-content:center;align-items:center;display:flex}.recent-room-item .remove-btn:hover{background:var(--danger);color:var(--white)}.no-recent{text-align:center;color:var(--gray);padding:16px;font-size:14px}.tabs-container{background:var(--dark-main);border-radius:var(--border-radius);gap:4px;margin-bottom:20px;padding:4px;display:flex}.tabs-container .tab-btn{color:var(--gray-light);transition:all var(--transition);border-radius:6px;flex:1;justify-content:center;align-items:center;gap:5px;padding:10px 16px;font-weight:500;display:flex}.tabs-container .tab-btn:hover{color:var(--white)}.tabs-container .tab-btn.active{background:var(--primary);color:var(--white)}.welcome-page{background:linear-gradient(135deg,var(--dark-main)0%,#1a1a2e 100%);justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.welcome-card{background:var(--dark-light);border-radius:var(--border-radius-lg);text-align:center;width:100%;max-width:400px;padding:40px}.welcome-card .welcome-header{margin-bottom:32px}.welcome-card .welcome-header .room-emoji{margin-bottom:16px;font-size:48px}.welcome-card .welcome-header h1{margin-bottom:8px;font-size:24px;font-weight:600}.welcome-card .welcome-header .room-id-display{color:var(--gray-light);justify-content:center;align-items:center;gap:8px;display:flex}.welcome-card .welcome-header .room-id-display code{background:var(--dark-main);border-radius:6px;padding:4px 12px;font-family:monospace}.welcome-form{text-align:left;flex-direction:column;gap:20px;display:flex}.welcome-form .connect-btn{height:48px;margin-top:8px;font-size:16px}.back-link{color:var(--gray-light);transition:color var(--transition);align-items:center;gap:8px;margin-top:24px;font-size:14px;display:inline-flex}.back-link:hover{color:var(--white)}.connecting-state{flex-direction:column;align-items:center;gap:16px;padding:40px 0;display:flex}.connecting-state .spinner{border-width:4px;width:48px;height:48px}.connecting-state p{color:var(--gray-light);font-size:16px}.room-page{height:100vh;display:flex;overflow:hidden}.room-main{flex-direction:column;flex:1;display:flex;overflow:hidden}.room-content{flex:1;position:relative;overflow:hidden}.room-content .tab-panel{flex-direction:column;width:100%;height:100%}.room-content .tab-panel.active{display:flex}.room-sidebar{width:var(--sidebar-width);background:var(--dark-main);border-right:1px solid var(--dark-light);flex-direction:column;flex-shrink:0;height:100vh;display:flex;position:relative}.room-sidebar.dragging .sidebar-chat-container{pointer-events:none;opacity:.3}.drag-drop-overlay-sidebar{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100;background:#14141ff2;justify-content:center;align-items:center;animation:.2s ease-out fadeIn;display:flex;position:absolute;inset:0}.drag-drop-overlay-sidebar .drag-drop-content{text-align:center;border:2px dashed var(--primary);background:#365ff814;border-radius:20px;flex-direction:column;align-items:center;padding:32px;animation:1.5s ease-in-out infinite pulse-border;display:flex}.drag-drop-overlay-sidebar .drag-drop-content .drag-drop-icon{margin-bottom:16px;font-size:64px;animation:1s ease-in-out infinite bounce-gentle}.drag-drop-overlay-sidebar .drag-drop-content h4{color:var(--white);margin:0 0 4px;font-size:18px;font-weight:600}.drag-drop-overlay-sidebar .drag-drop-content p{color:var(--gray);margin:0;font-size:12px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pulse-border{0%,to{border-color:var(--primary)}50%{border-color:#365ff880}}@keyframes bounce-gentle{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.sidebar-header{height:var(--header-height);border-bottom:1px solid var(--dark-light);justify-content:space-between;align-items:center;padding:12px;display:flex}.sidebar-header .logo{align-items:center;gap:4px;display:flex}.sidebar-header .logo-text{color:var(--primary);letter-spacing:-.5px;font-size:22px;font-weight:700}.sidebar-header .settings-btn{width:36px;height:36px;color:var(--gray-light);transition:all var(--transition);border-radius:8px;justify-content:center;align-items:center;font-size:18px;display:flex}.sidebar-header .settings-btn:hover{background:var(--dark-light);color:var(--white)}.sidebar-controls-row{border-bottom:1px solid var(--dark-light);justify-content:space-evenly;align-items:center;gap:8px;padding:12px;display:flex}.control-btn{background:var(--dark-light);width:44px;height:44px;transition:all var(--transition);border-radius:50%;justify-content:center;align-items:center;font-size:18px;display:flex;position:relative}.control-btn:hover{background:#32324e}.control-btn.leave{background:var(--danger);color:var(--white)}.control-btn.leave:hover{background:#bd2130}.room-header{height:var(--header-height);background:var(--dark-main);border-bottom:1px solid var(--dark-light);align-items:center;padding:0 20px;display:flex}.room-tabs{gap:8px;display:flex}.room-tab{border-radius:var(--border-radius);color:var(--gray-light);transition:all var(--transition);align-items:center;gap:8px;padding:10px 16px;display:flex}.room-tab:hover{color:var(--white);background:#ffffff0d}.room-tab.active{background:var(--dark-light);color:var(--primary)}.room-tab .tab-icon{font-size:16px}.room-tab .tab-name{font-weight:500}.room-tab .tab-users{align-items:center;margin-left:8px;display:flex}.room-tab .tab-users .user-avatar{background:var(--primary);border:2px solid var(--dark-light);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;margin-left:-8px;font-size:10px;font-weight:600;display:flex}.room-tab .tab-users .user-avatar:first-child{margin-left:0}.room-tab .tab-users .more-users{color:var(--gray);margin-left:4px;font-size:11px}.room-footer{height:var(--bottom-bar-height);background:var(--dark-main);border-top:1px solid var(--dark-light);justify-content:space-between;align-items:center;padding:0 20px;display:flex}.footer-left{align-items:center;gap:8px;display:flex}.footer-left .connection-label{color:var(--gray);font-size:12px}.footer-left .rtc-status-divider{background:var(--dark-light);width:1px;height:16px;margin:0 8px}.footer-left .rtc-status{align-items:center;gap:6px;display:flex}.footer-left .rtc-status .rtc-dot{border-radius:50%;width:8px;height:8px;animation:2s infinite rtc-pulse}.footer-left .rtc-status .rtc-label{color:var(--gray);font-size:12px}.footer-left .rtc-status.rtc-green .rtc-dot{background:var(--success);animation:none}.footer-left .rtc-status.rtc-green .rtc-label{color:var(--success)}.footer-left .rtc-status.rtc-yellow .rtc-dot{background:var(--warning)}.footer-left .rtc-status.rtc-yellow .rtc-label{color:var(--warning)}.footer-left .rtc-status.rtc-orange .rtc-dot{background:#ff9800}.footer-left .rtc-status.rtc-orange .rtc-label{color:#ff9800}.footer-left .rtc-status.rtc-red .rtc-dot{background:var(--danger);animation:none}.footer-left .rtc-status.rtc-red .rtc-label{color:var(--danger)}.footer-left .rtc-status.rtc-gray .rtc-dot{background:var(--gray);animation:none}.footer-left .rtc-status.rtc-gray .rtc-label{color:var(--gray)}.footer-left .connection-bars{align-items:flex-end;gap:2px;height:16px;display:flex}.footer-left .connection-bars span{background:var(--gray);width:4px;transition:all var(--transition);border-radius:2px}.footer-left .connection-bars span:first-child{height:4px}.footer-left .connection-bars span:nth-child(2){height:8px}.footer-left .connection-bars span:nth-child(3){height:12px}.footer-left .connection-bars span:nth-child(4){height:16px}.footer-left .connection-bars.excellent span,.footer-left .connection-bars.good span:first-child,.footer-left .connection-bars.good span:nth-child(2),.footer-left .connection-bars.good span:nth-child(3){background:var(--success)}.footer-left .connection-bars.fair span:first-child,.footer-left .connection-bars.fair span:nth-child(2){background:var(--warning)}.footer-left .connection-bars.poor span:first-child{background:var(--danger)}.footer-left .connection-bars.connecting span{animation:1s ease-in-out infinite pulse}.footer-right{align-items:center;gap:12px;display:flex}.footer-right .room-id-display{align-items:center;gap:8px;display:flex}.footer-right .room-id-display span{color:var(--gray-light);font-family:monospace;font-size:13px}.footer-right .room-id-display .copy-btn{width:28px;height:28px;color:var(--gray);transition:all var(--transition);border-radius:6px;justify-content:center;align-items:center;font-size:14px;display:flex}.footer-right .room-id-display .copy-btn:hover{background:var(--dark-light);color:var(--white)}.chat-panel{top:0;left:var(--sidebar-width);z-index:100;background:linear-gradient(#14141ffa 0%,#14141f 100%);border-right:1px solid #ffffff0f;flex-direction:column;width:380px;height:100vh;transition:transform .35s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;transform:translate(-100%);box-shadow:4px 0 24px #0000004d}.chat-panel.open{transform:translate(0)}.chat-panel.dragging .chat-messages,.chat-panel.dragging .chat-input-container{pointer-events:none;opacity:.3}.drag-drop-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100;background:#14141ff2;justify-content:center;align-items:center;animation:.2s ease-out fadeIn;display:flex;position:absolute;inset:0}.drag-drop-overlay .drag-drop-content{text-align:center;border:2px dashed var(--primary);background:#365ff814;border-radius:20px;flex-direction:column;align-items:center;padding:32px;animation:1.5s ease-in-out infinite pulse-border;display:flex}.drag-drop-overlay .drag-drop-content .drag-drop-icon{width:80px;height:80px;color:var(--primary);background:linear-gradient(135deg,#365ff833 0%,#365ff80d 100%);border-radius:50%;justify-content:center;align-items:center;margin-bottom:16px;animation:1s ease-in-out infinite bounce-gentle;display:flex}.drag-drop-overlay .drag-drop-content h4{color:var(--white);margin:0 0 4px;font-size:18px;font-weight:600}.drag-drop-overlay .drag-drop-content p{color:var(--gray);margin:0;font-size:12px}.chat-header{height:calc(var(--header-height) + 8px);min-height:calc(var(--header-height) + 8px);background:linear-gradient(#ffffff08 0%,#0000 100%);border-bottom:1px solid #ffffff0f;justify-content:space-between;align-items:center;padding:0 24px;display:flex}.chat-header .chat-header-info{align-items:center;gap:8px;display:flex}.chat-header .chat-header-info .chat-header-icon{width:38px;height:38px;color:var(--primary);background:linear-gradient(135deg,#365ff826 0%,#365ff80d 100%);border-radius:8px;justify-content:center;align-items:center;display:flex}.chat-header .chat-header-info .chat-header-text{flex-direction:column;gap:1px;display:flex}.chat-header .chat-header-info h3{color:var(--white);letter-spacing:-.01em;margin:0;font-size:16px;font-weight:600}.chat-header .chat-header-info .chat-participant-count{color:var(--gray);font-size:11px;font-weight:500}.chat-header .chat-close-btn{width:36px;height:36px;color:var(--gray);cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;transition:all .2s;display:flex}.chat-header .chat-close-btn:hover{color:var(--white);background:#ffffff14;transform:scale(1.05)}.chat-header .chat-close-btn:active{transform:scale(.95)}.chat-messages{background:linear-gradient(#0000 0%,#0000001a 100%);flex-direction:column;flex:1;gap:16px;padding:24px 16px;transition:opacity .2s;display:flex;position:relative;overflow:hidden auto}.chat-messages::-webkit-scrollbar{width:5px}.chat-messages::-webkit-scrollbar-track{background:0 0}.chat-messages::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}.chat-messages::-webkit-scrollbar-thumb:hover{background:#fff3}@keyframes bounceInChat{0%{opacity:0;transform:scale(.3)}50%{transform:scale(1.08)}to{opacity:1;transform:scale(1)}}.chat-empty{text-align:center;color:var(--gray);flex-direction:column;flex:1;justify-content:center;align-items:center;padding:32px;display:flex}.chat-empty .chat-empty-icon{opacity:.5;filter:grayscale(.3);margin-bottom:24px;font-size:56px}.chat-empty h4{color:var(--white);margin:0 0 4px;font-size:18px;font-weight:600}.chat-empty p{opacity:.7;margin:0;font-size:12px}.message-group{flex-direction:column;gap:3px;max-width:82%;animation:.25s cubic-bezier(.4,0,.2,1) messageSlideIn;display:flex}.message-group.own{align-self:flex-end;align-items:flex-end}.message-group.other{align-self:flex-start;align-items:flex-start}@keyframes messageSlideIn{0%{opacity:0;transform:translateY(12px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}.message-bubble{flex-direction:column;gap:3px;display:flex}.message-bubble .message-sender{color:var(--primary);letter-spacing:.01em;margin-bottom:1px;padding-left:10px;font-size:11px;font-weight:600}.message-bubble .message-content-wrapper{max-width:100%}.message-bubble .message-text{word-wrap:break-word;background-color:var(--dark-light);border-radius:18px;padding:10px 14px;font-size:14px;line-height:1.5;position:relative}.message-bubble .message-time{color:#fff6;margin-top:3px;padding:0 8px;font-size:10px;font-weight:500}.message-bubble.own .message-text{background:linear-gradient(135deg,var(--primary)0%,#0f40f7 100%);color:var(--white);box-shadow:0 2px 8px #365ff840}.message-bubble.own.first .message-text{border-top-left-radius:18px;border-top-right-radius:18px}.message-bubble.own.last .message-text{border-bottom-right-radius:6px;border-bottom-left-radius:18px}.message-bubble.own:not(.first) .message-text{border-top-right-radius:6px}.message-bubble.own:not(.last) .message-text{border-bottom-right-radius:6px}.message-bubble.own.first.last .message-text{border-radius:18px 18px 6px}.message-bubble.other .message-text{color:var(--white);background:#ffffff14;border:1px solid #ffffff0a}.message-bubble.other.first .message-text{border-top-left-radius:18px;border-top-right-radius:18px}.message-bubble.other.last .message-text{border-bottom-right-radius:18px;border-bottom-left-radius:6px}.message-bubble.other:not(.first) .message-text{border-top-left-radius:6px}.message-bubble.other:not(.last) .message-text{border-bottom-left-radius:6px}.message-bubble.other.first.last .message-text{border-radius:18px 18px 18px 6px}.file-message{background:#00000040;border:1px solid #ffffff0d;border-radius:16px;min-width:240px;max-width:300px;transition:transform .2s;overflow:hidden}.file-message:hover{transform:scale(1.01)}.own .file-message{background:#0003}.other .file-message{background:#0000004d}.file-preview{background:#0006;width:100%;max-height:320px;overflow:hidden}.file-preview img{object-fit:contain;cursor:pointer;width:100%;height:auto;max-height:320px;transition:all .25s}.file-preview img:hover{filter:brightness(1.05);transform:scale(1.03)}.file-preview.file-preview-video video{background:#000;border-radius:0;width:100%;max-height:320px}.file-info{border-bottom:1px solid #ffffff0d;align-items:center;gap:10px;padding:12px 14px;display:flex}.file-info .file-icon{background:#ffffff14;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:20px;display:flex}.file-info .file-details{flex-direction:column;flex:1;gap:3px;min-width:0;display:flex}.file-info .file-details .file-name{color:var(--white);white-space:nowrap;text-overflow:ellipsis;font-size:12px;font-weight:600;overflow:hidden}.file-info .file-details .file-size{color:#ffffff80;font-size:11px;font-weight:500}.file-status{padding:10px 14px;font-size:12px}.file-status .file-progress-bar{background:#ffffff1a;border-radius:3px;height:5px;margin-bottom:4px;overflow:hidden}.file-status .file-progress-bar .file-progress-fill{background:linear-gradient(90deg,var(--primary),#6786fa);border-radius:3px;height:100%;transition:width .15s ease-out;box-shadow:0 0 10px #365ff880}.file-status .file-progress-text{color:#fff9;font-size:11px;font-weight:500}.file-status.file-status-sending .file-progress-fill,.file-status.file-status-receiving .file-progress-fill{animation:1.5s ease-in-out infinite progressShine}.file-status.file-status-completed{justify-content:flex-end;display:flex}.file-status.file-status-failed{color:var(--danger)}.file-status.file-status-failed span{align-items:center;gap:4px;font-weight:500;display:flex}.file-status.file-status-unavailable{color:#ffffff73;font-style:italic}.file-status.file-status-unavailable span{align-items:center;gap:4px;font-size:12px;display:flex}@keyframes progressShine{0%{opacity:1;filter:brightness()}50%{opacity:.85;filter:brightness(1.2)}to{opacity:1;filter:brightness()}}.file-download-btn{color:var(--white);cursor:pointer;background:linear-gradient(135deg,#ffffff1f 0%,#ffffff0f 100%);border:1px solid #ffffff1a;border-radius:10px;align-items:center;gap:6px;padding:8px 14px;font-size:12px;font-weight:600;transition:all .2s;display:flex}.file-download-btn:hover{background:#ffffff2e;border-color:#fff3;transform:translateY(-1px)}.file-download-btn:active{transform:translateY(0)}.typing-indicator{color:#ffffff80;background:0 0;align-items:center;gap:4px;padding:4px 16px;font-size:11px;animation:.2s fadeIn;display:flex}.typing-indicator .typing-dots{background:#0003;border:1px solid #ffffff0f;border-radius:12px;gap:3px;padding:4px 8px;display:flex}.typing-indicator .typing-dots span{background:var(--primary);border-radius:50%;width:5px;height:5px;animation:1.2s ease-in-out infinite typingBounce}.typing-indicator .typing-dots span:first-child{animation-delay:0s}.typing-indicator .typing-dots span:nth-child(2){animation-delay:.15s}.typing-indicator .typing-dots span:nth-child(3){animation-delay:.3s}.typing-indicator .typing-text{font-size:11px;font-style:italic;font-weight:500}@keyframes typingBounce{0%,60%,to{opacity:.4;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}.chat-input-container{background:linear-gradient(#0000 0%,#00000026 100%);border-top:1px solid #ffffff0a;padding:16px 24px 24px}.chat-input-container form{background:#ffffff0f;border:1px solid #ffffff14;border-radius:24px;align-items:center;gap:8px;padding:6px 6px 6px 8px;transition:all .2s;display:flex}.chat-input-container form:focus-within{background:#ffffff14;border-color:#365ff866;box-shadow:0 0 0 3px #365ff81f}@keyframes emojiPickerSlideUp{0%{opacity:0;transform:translateY(12px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}.chat-input-container .emoji-picker-wrapper{position:relative}.chat-input-container .emoji-btn{cursor:pointer;color:#ffffff80;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:42px;height:42px;transition:all .2s;display:flex}.chat-input-container .emoji-btn svg{width:20px;height:20px}.chat-input-container .emoji-btn:hover:not(:disabled){color:var(--white);background:#ffffff1a;transform:scale(1.1)}.chat-input-container .emoji-btn:active:not(:disabled){transform:scale(.95)}.chat-input-container .emoji-picker{z-index:100;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:linear-gradient(#14141ffa 0%,#14141f 100%);border:1px solid #ffffff1f;border-radius:16px;padding:8px;animation:.25s cubic-bezier(.4,0,.2,1) emojiPickerSlideUp;position:absolute;bottom:calc(100% + 12px);left:0;box-shadow:0 12px 32px #00000080}.chat-input-container .emoji-grid{grid-template-columns:repeat(6,1fr);gap:6px;max-height:200px;padding:4px;display:grid;overflow-y:auto}.chat-input-container .emoji-grid::-webkit-scrollbar{width:5px}.chat-input-container .emoji-grid::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.chat-input-container .emoji-grid::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.chat-input-container .emoji-item{cursor:pointer;background:0 0;border:none;border-radius:8px;width:40px;height:40px;font-size:22px;transition:all .15s}.chat-input-container .emoji-item:hover{background:#ffffff1f;transform:scale(1.2)}.chat-input-container .emoji-item:active{transform:scale(.9)}.chat-input-container .file-attach-btn{cursor:pointer;color:#ffffff80;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:42px;height:42px;font-size:18px;transition:all .2s;display:flex}.chat-input-container .file-attach-btn svg{width:22px;height:22px}.chat-input-container .file-attach-btn:hover:not(:disabled){color:var(--white);background:#ffffff1a;transform:rotate(-15deg)}.chat-input-container .file-attach-btn:active:not(:disabled){transform:scale(.92)}.chat-input-container .file-attach-btn:disabled{opacity:.35;cursor:not-allowed}.chat-input-container input[type=text]{color:var(--white);background:0 0;border:none;outline:none;flex:1;min-width:0;padding:10px 4px;font-size:15px}.chat-input-container input[type=text]::placeholder{color:#ffffff59}.chat-input-container input[type=text]:disabled{opacity:.5}.chat-input-container .chat-send-btn{background:linear-gradient(135deg,var(--primary)0%,#1d4bf7 100%);width:42px;height:42px;color:var(--white);cursor:pointer;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;transition:all .2s;display:flex;box-shadow:0 2px 8px #365ff859}.chat-input-container .chat-send-btn svg{width:18px;height:18px;margin-left:2px}.chat-input-container .chat-send-btn:hover:not(:disabled){transform:scale(1.08);box-shadow:0 4px 12px #365ff880}.chat-input-container .chat-send-btn:active:not(:disabled){transform:scale(.95)}.chat-input-container .chat-send-btn:disabled{opacity:.35;cursor:not-allowed;box-shadow:none;transform:none}.sidebar-chat-container{flex-direction:column;flex:1;display:flex;overflow:hidden}.sidebar-chat-container .chat-header-inline{border-bottom:1px solid var(--dark-light);align-items:center;gap:5px;padding:12px 16px;display:flex}.sidebar-chat-container .chat-header-inline h3{color:var(--gray-light);font-size:14px;font-weight:600}.sidebar-chat-container .chat-messages{flex-direction:column;flex:1;gap:24px;padding:16px 8px;display:flex;position:relative;overflow:hidden auto}.sidebar-chat-container .chat-messages::-webkit-scrollbar{width:4px}.sidebar-chat-container .chat-messages::-webkit-scrollbar-track{background:0 0}.sidebar-chat-container .chat-messages::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}.sidebar-chat-container .chat-messages::-webkit-scrollbar-thumb:hover{background:#fff3}.sidebar-chat-container .scroll-to-bottom{background:var(--primary);color:#fff;cursor:pointer;z-index:10;border:none;border-radius:50%;justify-content:center;align-items:center;width:40px;min-height:40px;margin-top:auto;transition:all .2s;animation:.3s bounceInSidebar;display:flex;position:sticky;bottom:8px;left:50%;transform:translate(-50%);box-shadow:0 4px 12px #365ff866;height:60px!important}.sidebar-chat-container .scroll-to-bottom:hover{box-shadow:0 6px 16px #365ff899}.sidebar-chat-container .scroll-to-bottom:active{transform:scale(.95)}.sidebar-chat-container .scroll-to-bottom .unread-badge{background:var(--danger);color:#fff;border-radius:10px;justify-content:center;align-items:center;min-width:20px;height:20px;padding:0 5px;font-size:11px;font-weight:700;display:flex;position:absolute;top:-4px;right:-4px;box-shadow:0 2px 6px #0000004d}@keyframes bounceInSidebar{0%{opacity:0;transform:scale(.3)}50%{transform:scale(1.05)}to{opacity:1;transform:scale(1)}}.sidebar-chat-container .no-messages{text-align:center;color:var(--gray);flex-direction:column;flex:1;justify-content:center;align-items:center;padding:32px;display:flex}.sidebar-chat-container .no-messages .icon{opacity:.5;margin-bottom:16px;font-size:48px}.sidebar-chat-container .no-messages p{color:var(--white);margin-bottom:4px;font-size:14px;font-weight:600}.sidebar-chat-container .no-messages small{opacity:.7;font-size:12px}.sidebar-chat-container .message-group{gap:8px;width:100%;max-width:88%;animation:.25s cubic-bezier(.4,0,.2,1) messageSlideInSidebar;display:flex}.sidebar-chat-container .message-group.own{flex-direction:row-reverse;align-self:flex-end}.sidebar-chat-container .message-group.own .message-group-content{align-items:flex-end}.sidebar-chat-container .message-group.other{align-self:flex-start}.sidebar-chat-container .message-group.other .message-group-content{align-items:flex-start}@keyframes messageSlideInSidebar{0%{opacity:0;transform:translateY(12px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}.sidebar-chat-container .message-avatar{color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;font-size:11px;font-weight:700;display:flex;box-shadow:0 2px 6px #0003}.sidebar-chat-container .message-group-content{flex-direction:column;gap:4px;max-width:calc(100% - 40px);display:flex}.sidebar-chat-container .message-group-content .message-sender{letter-spacing:.01em;margin-bottom:2px;padding-left:6px;font-size:11px;font-weight:600}.sidebar-chat-container .message-bubble{flex-direction:column;gap:2px;display:flex}.sidebar-chat-container .message-bubble .message-text{word-wrap:break-word;white-space:pre-wrap;border-radius:18px;min-width:60px;padding:11px 16px;font-size:13px;line-height:1.5;position:relative}.sidebar-chat-container .message-bubble .message-time{color:#fff6;margin-top:2px;padding:0 4px;font-size:10px;font-weight:500}.own .sidebar-chat-container .message-bubble .message-text{background:linear-gradient(135deg,var(--primary)0%,#0f40f7 100%);color:var(--white);box-shadow:0 2px 8px #365ff840}.own .sidebar-chat-container .message-bubble.first .message-text{border-top-left-radius:16px;border-top-right-radius:16px}.own .sidebar-chat-container .message-bubble.last .message-text{border-bottom-right-radius:4px;border-bottom-left-radius:16px}.own .sidebar-chat-container .message-bubble:not(.first) .message-text{border-top-right-radius:4px}.own .sidebar-chat-container .message-bubble:not(.last) .message-text{border-bottom-right-radius:4px}.own .sidebar-chat-container .message-bubble.first.last .message-text{border-radius:16px 16px 4px}.other .sidebar-chat-container .message-bubble .message-text{color:var(--white);background:#ffffff14;border:1px solid #ffffff0a}.other .sidebar-chat-container .message-bubble.first .message-text{border-top-left-radius:16px;border-top-right-radius:16px}.other .sidebar-chat-container .message-bubble.last .message-text{border-bottom-right-radius:16px;border-bottom-left-radius:4px}.other .sidebar-chat-container .message-bubble:not(.first) .message-text{border-top-left-radius:4px}.other .sidebar-chat-container .message-bubble:not(.last) .message-text{border-bottom-left-radius:4px}.other .sidebar-chat-container .message-bubble.first.last .message-text{border-radius:16px 16px 16px 4px}.sidebar-chat-container .file-message-sidebar{background:#00000040;border:1px solid #ffffff0d;border-radius:14px;flex-direction:column;gap:4px;max-width:280px;display:flex;overflow:hidden}.sidebar-chat-container .file-message-sidebar .file-preview-sidebar{cursor:pointer;background:#0006;width:100%;max-height:280px;position:relative;overflow:hidden}.sidebar-chat-container .file-message-sidebar .file-preview-sidebar img{object-fit:cover;width:100%;height:auto;max-height:280px;transition:transform .3s;display:block}.sidebar-chat-container .file-message-sidebar .file-preview-sidebar .file-preview-overlay{opacity:0;background:0 0;justify-content:center;align-items:center;transition:all .3s;display:flex;position:absolute;inset:0}.sidebar-chat-container .file-message-sidebar .file-preview-sidebar .file-preview-overlay .preview-icon{font-size:48px;transition:transform .3s;transform:scale(.8)}.sidebar-chat-container .file-message-sidebar .file-preview-sidebar:hover img{transform:scale(1.05)}.sidebar-chat-container .file-message-sidebar .file-preview-sidebar:hover .file-preview-overlay{opacity:1;background:#00000080}.sidebar-chat-container .file-message-sidebar .file-preview-sidebar:hover .file-preview-overlay .preview-icon{transform:scale(1)}.sidebar-chat-container .file-message-sidebar .file-preview-sidebar.video video{background:#000;width:100%;max-height:280px;display:block}.sidebar-chat-container .file-message-sidebar .file-info-row{align-items:center;gap:4px;padding:10px 12px;display:flex}.sidebar-chat-container .file-message-sidebar .file-info-row .file-icon{flex-shrink:0;font-size:20px}.sidebar-chat-container .file-message-sidebar .file-info-row .file-details{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.sidebar-chat-container .file-message-sidebar .file-info-row .file-details .file-name{color:var(--white);white-space:nowrap;text-overflow:ellipsis;font-size:12px;font-weight:600;overflow:hidden}.sidebar-chat-container .file-message-sidebar .file-info-row .file-details .file-size{color:#ffffff80;font-size:10px}.sidebar-chat-container .file-message-sidebar .file-info-row .file-actions{flex-shrink:0;gap:4px;display:flex}.sidebar-chat-container .file-message-sidebar .file-info-row .file-action-btn{width:32px;height:32px;color:var(--white);cursor:pointer;background:#ffffff14;border:1px solid #ffffff1a;border-radius:8px;justify-content:center;align-items:center;transition:all .2s;display:flex}.sidebar-chat-container .file-message-sidebar .file-info-row .file-action-btn:hover{background:#ffffff26;transform:scale(1.05)}.sidebar-chat-container .file-message-sidebar .file-info-row .file-action-btn:active{transform:scale(.95)}.sidebar-chat-container .file-message-sidebar .file-info-row .file-progress-mini{background:#ffffff1a;height:3px;position:absolute;bottom:0;left:0;right:0}.sidebar-chat-container .file-message-sidebar .file-info-row .file-progress-mini .file-progress-fill-mini{background:linear-gradient(90deg,var(--primary),#6786fa);height:100%;transition:width .2s}.sidebar-chat-container .typing-indicator{color:#ffffff80;align-items:center;gap:4px;min-height:24px;padding:4px 8px;font-size:10px;font-style:italic;animation:.2s fadeIn;display:flex}.sidebar-chat-container .typing-indicator .typing-dots{background:#0003;border:1px solid #ffffff0f;border-radius:10px;gap:3px;padding:3px 6px;display:flex}.sidebar-chat-container .typing-indicator .typing-dots span{background:var(--primary);border-radius:50%;width:4px;height:4px;animation:1.2s ease-in-out infinite typingBounceSidebar}.sidebar-chat-container .typing-indicator .typing-dots span:first-child{animation-delay:0s}.sidebar-chat-container .typing-indicator .typing-dots span:nth-child(2){animation-delay:.15s}.sidebar-chat-container .typing-indicator .typing-dots span:nth-child(3){animation-delay:.3s}.sidebar-chat-container .typing-indicator .typing-text{font-size:10px;font-weight:500}@keyframes typingBounceSidebar{0%,60%,to{opacity:.4;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}.sidebar-chat-container .chat-input-container{border-top:1px solid var(--dark-light);padding:9.8px}.sidebar-chat-container .chat-input-container form{background:#ffffff0d;border:1px solid #ffffff14;border-radius:20px;align-items:center;gap:4px;padding:4px 4px 4px 6px;transition:all .2s;display:flex}.sidebar-chat-container .chat-input-container form:focus-within{background:#ffffff14;border-color:#365ff866;box-shadow:0 0 0 3px #365ff81f}.sidebar-chat-container .chat-input-container .input-actions{align-items:center;gap:2px;display:flex}.sidebar-chat-container .chat-input-container .file-attach-btn{cursor:pointer;color:#ffffff80;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:34px;height:34px;transition:all .2s;display:flex}.sidebar-chat-container .chat-input-container .file-attach-btn svg{width:18px;height:18px}.sidebar-chat-container .chat-input-container .file-attach-btn:hover:not(:disabled){color:var(--white);background:#ffffff1a;transform:rotate(-15deg)}.sidebar-chat-container .chat-input-container .file-attach-btn:active:not(:disabled){transform:scale(.92)}.sidebar-chat-container .chat-input-container .file-attach-btn:disabled{opacity:.35;cursor:not-allowed}.sidebar-chat-container .chat-input-container .emoji-picker-wrapper{position:relative}.sidebar-chat-container .chat-input-container .emoji-btn{cursor:pointer;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:34px;height:34px;font-size:18px;transition:all .2s;display:flex}.sidebar-chat-container .chat-input-container .emoji-btn:hover{background:#ffffff1a;transform:scale(1.1)}.sidebar-chat-container .chat-input-container .emoji-btn:active{transform:scale(.95)}.sidebar-chat-container .chat-input-container .emoji-picker{background:var(--dark-main);z-index:100;border:1px solid #ffffff1a;border-radius:12px;padding:4px;animation:.2s cubic-bezier(.4,0,.2,1) emojiPickerSlideUpSidebar;position:absolute;bottom:calc(100% + 8px);left:0;box-shadow:0 8px 24px #0006}@keyframes emojiPickerSlideUpSidebar{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.sidebar-chat-container .chat-input-container .emoji-grid{grid-template-columns:repeat(6,1fr);gap:4px;max-height:180px;display:grid;overflow-y:auto}.sidebar-chat-container .chat-input-container .emoji-grid::-webkit-scrollbar{width:4px}.sidebar-chat-container .chat-input-container .emoji-grid::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.sidebar-chat-container .chat-input-container .emoji-item{cursor:pointer;background:0 0;border:none;border-radius:6px;width:36px;height:36px;font-size:20px;transition:all .15s}.sidebar-chat-container .chat-input-container .emoji-item:hover{background:#ffffff1a;transform:scale(1.15)}.sidebar-chat-container .chat-input-container .emoji-item:active{transform:scale(.9)}.sidebar-chat-container .chat-input-container input{color:var(--white);background:0 0;border:none;outline:none;flex:1;min-width:0;padding:8px 6px;font-size:13px}.sidebar-chat-container .chat-input-container input::placeholder{color:#ffffff59}.sidebar-chat-container .chat-input-container .send-btn{background:linear-gradient(135deg,var(--primary)0%,#1d4bf7 100%);width:34px;height:34px;color:var(--white);cursor:pointer;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;transition:all .2s;display:flex;box-shadow:0 2px 8px #365ff859}.sidebar-chat-container .chat-input-container .send-btn svg{margin-left:1px}.sidebar-chat-container .chat-input-container .send-btn:hover:not(:disabled){transform:scale(1.08);box-shadow:0 4px 12px #365ff880}.sidebar-chat-container .chat-input-container .send-btn:active:not(:disabled){transform:scale(.95)}.sidebar-chat-container .chat-input-container .send-btn:disabled{opacity:.35;cursor:not-allowed;box-shadow:none;transform:none}.lightbox-modal{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:9999;background:#000000f2;justify-content:center;align-items:center;padding:32px;animation:.2s fadeInModal;display:flex;position:fixed;inset:0}@keyframes fadeInModal{0%{opacity:0}to{opacity:1}}.lightbox-modal .lightbox-content{flex-direction:column;gap:16px;max-width:90vw;max-height:90vh;display:flex;position:relative}.lightbox-modal .lightbox-close{color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;transition:all .2s;display:flex;position:absolute;top:-50px;right:0}.lightbox-modal .lightbox-close:hover{background:#fff3;transform:scale(1.1)}.lightbox-modal .lightbox-close:active{transform:scale(.95)}.lightbox-modal .lightbox-media{justify-content:center;align-items:center;max-width:90vw;max-height:calc(90vh - 80px);display:flex}.lightbox-modal .lightbox-media img{object-fit:contain;border-radius:12px;max-width:100%;max-height:100%;box-shadow:0 20px 60px #00000080}.lightbox-modal .lightbox-media video{border-radius:12px;max-width:100%;max-height:100%;box-shadow:0 20px 60px #00000080}.lightbox-modal .lightbox-info{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;justify-content:space-between;align-items:center;padding:16px 24px;display:flex}.lightbox-modal .lightbox-info .lightbox-filename{color:var(--white);white-space:nowrap;text-overflow:ellipsis;max-width:60%;font-size:14px;font-weight:600;overflow:hidden}.lightbox-modal .lightbox-info .lightbox-download{background:linear-gradient(135deg,var(--primary)0%,#0f40f7 100%);color:#fff;border-radius:10px;align-items:center;gap:4px;padding:10px 18px;font-size:12px;font-weight:600;text-decoration:none;transition:all .2s;display:flex;box-shadow:0 4px 12px #365ff84d}.lightbox-modal .lightbox-info .lightbox-download:hover{transform:translateY(-2px);box-shadow:0 6px 16px #365ff880}.lightbox-modal .lightbox-info .lightbox-download:active{transform:translateY(0)}@media (max-width:768px){.chat-panel{width:100%;left:0}.chat-panel.open{transform:translate(0)}.message-group{width:100%;max-width:88%}.file-message{max-width:280px}.chat-input-container{padding:8px 16px 16px}.chat-input-container .file-attach-btn,.chat-input-container .chat-send-btn{width:40px;height:40px}.lightbox-modal{padding:16px}.lightbox-modal .lightbox-content{max-width:95vw;max-height:95vh}.lightbox-modal .lightbox-close{top:-40px}.lightbox-modal .lightbox-info{flex-direction:column;align-items:stretch;gap:8px}.lightbox-modal .lightbox-info .lightbox-filename{text-align:center;max-width:100%}.lightbox-modal .lightbox-info .lightbox-download{justify-content:center}}.settings-overlay{z-index:200;background:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.settings-panel{background:var(--dark-main);border:1px solid var(--dark-light);border-radius:var(--border-radius-lg);flex-direction:column;width:100%;max-width:540px;max-height:90vh;animation:.3s cubic-bezier(.16,1,.3,1) slideUpFadeIn;display:flex;overflow:hidden;box-shadow:0 8px 32px #0006}@keyframes slideUpFadeIn{0%{opacity:0;transform:translateY(20px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}.settings-header{border-bottom:1px solid var(--dark-light);justify-content:space-between;align-items:center;padding:20px 24px;display:flex}.settings-header h2{font-size:20px;font-weight:600}.settings-header .close-btn{width:36px;height:36px;color:var(--gray);transition:all var(--transition);border-radius:8px;justify-content:center;align-items:center;font-size:18px;display:flex}.settings-header .close-btn:hover{background:var(--dark-light);color:var(--white)}.settings-tabs{border-bottom:1px solid var(--dark-light);padding:0 24px;display:flex}.settings-tabs .settings-tab{color:var(--gray-light);transition:all var(--transition);border-bottom:2px solid #0000;align-items:center;gap:4px;margin-bottom:-1px;padding:12px 20px;font-size:14px;font-weight:500;display:flex}.settings-tabs .settings-tab:hover{color:var(--white);background:#ffffff0d}.settings-tabs .settings-tab.active{color:var(--primary);border-bottom-color:var(--primary)}.settings-content{flex:1;padding:24px;overflow-y:auto}.settings-content::-webkit-scrollbar{width:8px}.settings-content::-webkit-scrollbar-track{background:0 0}.settings-content::-webkit-scrollbar-thumb{background:var(--dark-light);border-radius:10px}.settings-content::-webkit-scrollbar-thumb:hover{background:#fff3}.settings-section{margin-bottom:40px}.settings-section:last-child{margin-bottom:0}.settings-section h3{color:var(--gray-light);text-transform:uppercase;letter-spacing:.8px;border-bottom:2px solid #5865f24d;align-items:center;gap:8px;margin-bottom:20px;padding-bottom:8px;font-size:13px;font-weight:700;display:flex}.select-setting{margin-bottom:16px}.select-setting label{color:var(--gray-light);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;font-size:12px;font-weight:600;display:block}.select-setting select{background:var(--dark-light);width:100%;color:var(--white);cursor:pointer;border:1px solid #ffffff1a;border-radius:6px;padding:12px 16px;font-size:14px;transition:all .2s}.select-setting select:hover{background:#ffffff0d;border-color:#fff3}.select-setting select:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px #5865f21a}.select-setting .input{background:var(--dark-light);width:100%;color:var(--white);border:1px solid #ffffff1a;border-radius:6px;padding:12px 16px;font-size:14px;transition:all .2s}.select-setting .input:hover{border-color:#fff3}.select-setting .input:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px #5865f21a}.setting-item{border-bottom:1px solid #ffffff0d;justify-content:space-between;align-items:center;padding:16px 0;transition:background-color .2s;display:flex}.setting-item:last-child{border-bottom:none}.setting-item:hover{background:#ffffff05;border-radius:6px;margin:0 -8px;padding-left:8px;padding-right:8px}.setting-item .setting-label{flex-direction:column;gap:4px;display:flex}.setting-item .setting-label span{font-size:14px;font-weight:500}.setting-item .setting-label small{color:var(--gray);font-size:12px;line-height:1.3}.slider-setting{border-top:1px solid #ffffff0d;flex-direction:column;gap:8px;padding:16px 0;display:flex}.slider-setting:first-child{border-top:none}.slider-setting .slider-header{justify-content:space-between;align-items:center;display:flex}.slider-setting .slider-header span{font-weight:500}.slider-setting .slider-header .slider-value{color:var(--gray-light);font-family:monospace;font-size:13px}.slider-setting .slider-header .slider-value-badge{color:var(--white);background:var(--primary);border-radius:12px;padding:2px 8px;font-family:monospace;font-size:12px;font-weight:600}.slider-setting .slider-wrapper{flex-direction:column;gap:4px;display:flex}.slider-setting .slider-labels{color:var(--gray);justify-content:space-between;padding:0 2px;font-size:10px;display:flex}.slider-setting .setting-description{color:var(--gray);background:#ffffff08;border-radius:6px;align-items:flex-start;gap:4px;padding:8px;font-size:10px;line-height:1.4;display:flex}.slider-setting .setting-description .desc-icon{flex-shrink:0;font-size:14px}.slider-setting.vad-sensitivity{background:#5865f20d;border:1px solid #5865f233;border-radius:8px;margin:8px 0;padding:16px}.slider-setting.vad-sensitivity .vad-slider::-webkit-slider-thumb{background:var(--primary);box-shadow:0 0 0 4px #5865f233}.slider-setting.vad-sensitivity .vad-slider::-moz-range-thumb{background:var(--primary);box-shadow:0 0 0 4px #5865f233}.admin-actions{flex-direction:column;gap:12px;display:flex}.admin-actions .btn{justify-content:center;width:100%}.mic-level-container{padding:16px 0}.mic-level-container .mic-level-header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.mic-level-container .mic-level-header label{color:var(--gray-light);text-transform:uppercase;letter-spacing:.5px;font-size:13px;font-weight:600}.mic-level-container .mic-level-header .mic-status{color:var(--gray-light);align-items:center;gap:4px;font-size:12px;font-weight:500;display:flex}.mic-level-container .mic-level-header .mic-status .status-indicator{border-radius:50%;width:8px;height:8px;transition:all .2s}.mic-level-container .mic-level-header .mic-status .status-indicator.active{background:#3ba55d;animation:1.5s ease-in-out infinite pulse-glow;box-shadow:0 0 8px #3ba55d99}.mic-level-container .mic-level-header .mic-status .status-indicator.idle{background:var(--gray)}.mic-level-container .vad-hint{border-left:3px solid var(--primary);color:var(--gray-light);background:#5865f21a;border-radius:4px;align-items:center;gap:8px;margin-top:12px;padding:8px 12px;font-size:12px;display:flex}.mic-level-container .vad-hint .hint-icon{font-size:16px}.discord-mic-meter{-webkit-user-select:none;user-select:none;padding:16px 0;position:relative}.discord-mic-meter .meter-track{background:var(--dark-light);border-radius:20px;height:10px;position:relative;overflow:visible}.discord-mic-meter .meter-bars{gap:2px;height:100%;padding:0 2px;display:flex}.discord-mic-meter .meter-bar{background:#ffffff14;border-radius:2px;flex:1;transition:background-color 50ms,transform 50ms}.discord-mic-meter .meter-bar.active{background:#3ba55d;transform:scaleY(1.4)}.discord-mic-meter .meter-bar.active.vad-active{background:linear-gradient(#4fc76d,#3ba55d);box-shadow:0 0 6px #3ba55d80}.discord-mic-meter .meter-bar.active.warning{background:#faa81a}.discord-mic-meter .meter-bar.active.warning.vad-active{background:linear-gradient(#ffb732,#faa81a);box-shadow:0 0 6px #faa81a80}.discord-mic-meter .meter-bar.active.danger{background:#ed4245}.discord-mic-meter .meter-bar.active.danger.vad-active{background:linear-gradient(#ff5a5d,#ed4245);box-shadow:0 0 6px #ed424580}.discord-mic-meter .vad-threshold-indicator{z-index:10;cursor:ew-resize;width:4px;margin-left:-2px;transition:all .2s cubic-bezier(.4,0,.2,1);position:absolute;top:-2px;bottom:-2px}.discord-mic-meter .vad-threshold-indicator:hover .threshold-line{width:6px;margin-left:-1px;box-shadow:0 0 16px #5865f2e6}.discord-mic-meter .vad-threshold-indicator:hover .threshold-handle{transform:translate(-50%,-50%)scale(1.15);box-shadow:0 0 0 4px #5865f233,0 4px 12px #0006}.discord-mic-meter .vad-threshold-indicator.dragging .threshold-line{width:6px;margin-left:-1px;box-shadow:0 0 20px #5865f2}.discord-mic-meter .vad-threshold-indicator.dragging .threshold-handle{background:linear-gradient(135deg,#5865f2,#7289ff);transform:translate(-50%,-50%)scale(1.2);box-shadow:0 0 0 6px #5865f24d,0 6px 16px #00000080}.discord-mic-meter .vad-threshold-indicator .threshold-line{background:linear-gradient(#5865f2,#4752c4);border-radius:3px;width:4px;transition:all .2s cubic-bezier(.4,0,.2,1);position:absolute;top:0;bottom:0;left:0;box-shadow:0 0 12px #5865f2b3}.discord-mic-meter .vad-threshold-indicator .threshold-handle{background:var(--primary);border:3px solid var(--dark-main);cursor:ew-resize;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 2px #5865f21a,0 2px 8px #0000004d}.discord-mic-meter .vad-threshold-indicator .threshold-handle .handle-icon{color:var(--white);-webkit-user-select:none;user-select:none;font-size:10px;font-weight:700;line-height:1;transform:rotate(90deg)}@keyframes pulse-glow{0%,to{box-shadow:0 0 8px #3ba55d99}50%{box-shadow:0 0 16px #3ba55de6}}.keybind-hint{color:var(--gray);margin-bottom:16px;font-size:13px}.keybind-list{flex-direction:column;gap:8px;display:flex}.keybind-item{background:var(--dark-light);border-radius:var(--border-radius);justify-content:space-between;align-items:center;padding:12px;display:flex}.keybind-item .keybind-label{flex-direction:row;align-items:center;gap:4px;display:flex}.keybind-item .keybind-label span{font-weight:500}.keybind-item .keybind-label small{color:var(--gray);font-size:12px}.keybind-item .keybind-actions{align-items:center;gap:8px;display:flex}.keybind-item .keybind-btn{background:var(--dark-main);border:1px solid var(--gray);min-width:80px;color:var(--white);cursor:pointer;transition:all var(--transition);border-radius:6px;padding:8px 16px;font-family:monospace;font-size:13px}.keybind-item .keybind-btn:hover{border-color:var(--primary)}.keybind-item .keybind-btn.recording{border-color:var(--primary);background:#365ff833;animation:1s infinite pulse}.keybind-item .keybind-clear{width:28px;height:28px;color:var(--gray);transition:all var(--transition);border-radius:50%;justify-content:center;align-items:center;font-size:12px;display:flex}.keybind-item .keybind-clear:hover{background:var(--danger);color:var(--white)}.call-tab{background:radial-gradient(at top,#365ff808 0%,#0000 50%),radial-gradient(at 100% 100%,#365ff805 0%,#0000 50%);flex-direction:column;height:100%;padding:16px;display:flex;overflow:hidden}.participants-grid{border-radius:16px;flex:1;place-content:stretch;gap:16px;padding:4px;display:grid;overflow:hidden}.participants-grid.count-1{grid-template-rows:1fr;grid-template-columns:1fr;width:100%;max-height:100%;margin:0 auto}.participants-grid.count-2{grid-template-rows:1fr;grid-template-columns:repeat(2,1fr)}.participants-grid.count-3{grid-template-rows:1fr;grid-template-columns:repeat(3,1fr)}.participants-grid.count-4{grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(2,1fr)}.participants-grid.count-5,.participants-grid.count-6{grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(3,1fr)}.participants-grid.count-large{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));grid-auto-rows:1fr;align-content:start;overflow-y:auto}.participants-grid.count-large::-webkit-scrollbar{width:6px}.participants-grid.count-large::-webkit-scrollbar-track{background:0 0}.participants-grid.count-large::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}.participants-grid.count-large::-webkit-scrollbar-thumb:hover{background:#fff3}.participant-card{transition:all .3s ease cubic-bezier(.4,0,.2,1);background:linear-gradient(145deg,#28283ee6,#14141ff2);border:1px solid #ffffff0f;border-radius:16px;justify-content:center;align-items:center;min-height:0;display:flex;position:relative;overflow:hidden;box-shadow:0 4px 24px #0000004d,0 1px 2px #0003,inset 0 1px #ffffff0d}.participant-card:before{content:"";opacity:0;pointer-events:none;z-index:1;background:linear-gradient(135deg,#365ff808 0%,#0000 50%,#365ff805 100%);transition:opacity .3s;position:absolute;inset:0}.participant-card:hover{border-color:#ffffff1f}.participant-card:hover:before{opacity:1}.participant-card.speaking{border-color:#00d26a80;border-radius:16px;animation:2s ease-in-out infinite speaking-pulse;box-shadow:0 0 0 2px #00d26a4d,0 0 20px #00d26a26,0 0 40px #00d26a14,0 8px 32px #0000004d}.participant-card video{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.participant-card .no-video{z-index:2;flex-direction:column;align-items:center;gap:16px;display:flex}.participant-card .no-video:before{content:"";background:radial-gradient(circle at 30% 40%,#365ff814 0%,#0000 50%),radial-gradient(circle at 70% 60%,#365ff80d 0%,#0000 50%);animation:8s ease-in-out infinite alternate ambient-shift;position:absolute;inset:0}.participant-card .no-video .avatar{width:90px;height:90px;color:var(--white);z-index:2;background:linear-gradient(135deg,#365ff84d,#365ff826);border:2px solid #ffffff1a;border-radius:50%;justify-content:center;align-items:center;font-size:28px;font-weight:700;transition:transform .3s,box-shadow .3s;display:flex;position:relative;box-shadow:0 8px 32px #365ff833,inset 0 2px 4px #ffffff1a}.participant-card .no-video .name{color:var(--white);text-shadow:0 2px 8px #0000004d;z-index:2;opacity:.9;font-size:16px;font-weight:600;position:relative}.participant-card .participant-info{z-index:10;background:linear-gradient(#0000 0%,#0006 30%,#000000bf 100%);justify-content:space-between;align-items:center;padding:16px 16px 8px;display:flex;position:absolute;bottom:0;left:0;right:0}.participant-card .participant-name{align-items:center;gap:8px;display:flex}.participant-card .participant-name span{color:var(--white);text-shadow:0 1px 4px #00000080;font-size:14px;font-weight:600}.participant-card .participant-name .admin-badge{filter:drop-shadow(0 2px 4px #0000004d);justify-content:center;align-items:center;display:flex}.participant-card .participant-status{align-items:center;gap:10px;display:flex}.participant-card .participant-status .status-icon{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0006;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;transition:all .15s;display:flex}.participant-card .participant-status .status-icon.muted{background:#8b202b40;animation:2s ease-in-out infinite status-pulse}.participant-card .volume-control{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:0;transition:all .2s ease cubic-bezier(.4,0,.2,1);z-index:15;background:#0009;border:1px solid #ffffff1a;border-radius:20px;align-items:center;gap:10px;padding:10px 16px;display:flex;position:absolute;top:16px;right:16px;transform:translateY(-8px);box-shadow:0 4px 16px #0000004d}.participant-card .volume-control span{color:var(--white);opacity:.8;align-items:center;display:flex}.participant-card .volume-control input[type=range]{appearance:none;cursor:pointer;background:#ffffff26;border-radius:2px;width:90px;height:4px}.participant-card .volume-control input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--primary);cursor:pointer;border-radius:50%;width:14px;height:14px;transition:transform .15s,box-shadow .15s;box-shadow:0 2px 8px #365ff866}.participant-card .volume-control input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 2px 12px #365ff899}.participant-card .volume-control input[type=range]::-moz-range-thumb{background:var(--primary);cursor:pointer;border:none;border-radius:50%;width:14px;height:14px;box-shadow:0 2px 8px #365ff866}.participant-card:hover .volume-control{opacity:1;transform:translateY(0)}@keyframes speaking-pulse{0%,to{box-shadow:0 0 0 2px #00d26a4d,0 0 20px #00d26a26,0 0 40px #00d26a14,0 8px 32px #0000004d}50%{box-shadow:0 0 0 3px #00d26a66,0 0 30px #00d26a33,0 0 60px #00d26a1a,0 8px 32px #0000004d}}@keyframes ambient-shift{0%{opacity:.5}to{opacity:1;transform:scale(1.05)}}@keyframes status-pulse{0%,to{opacity:1}50%{opacity:.6}}@media (max-width:768px){.call-tab{padding:8px}.participants-grid{gap:8px}.participants-grid.count-3{grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(2,1fr)}.participants-grid.count-5,.participants-grid.count-6{grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(2,1fr)}.participants-grid.count-large{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.participant-card .no-video .avatar{width:60px;height:60px;font-size:20px}.participant-card .volume-control{padding:4px 8px;top:8px;right:8px}.participant-card .volume-control input[type=range]{width:60px}}.screen-share-tab{height:100%;padding:16px;overflow:hidden}.screen-grid{gap:12px;height:100%;display:grid}.screen-grid.count-1{grid-template-columns:1fr}.screen-grid.count-2{grid-template-columns:repeat(2,1fr)}.screen-grid.count-large{grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(2,1fr)}.screen-card{background:var(--dark-light);border-radius:var(--border-radius-lg);position:relative;overflow:hidden}.screen-card.fullscreen{z-index:100;border-radius:0;position:fixed;inset:0}.screen-card video{object-fit:contain;background:#000;width:100%;height:100%}.screen-card .screen-controls{border-radius:var(--border-radius);opacity:0;transition:opacity var(--transition);background:#0009;justify-content:space-between;align-items:center;padding:12px;display:flex;position:absolute;bottom:12px;left:12px;right:12px}.screen-card:hover .screen-controls{opacity:1}.screen-card .sharer-info{align-items:center;gap:8px;display:flex}.screen-card .sharer-info .avatar{width:28px;height:28px;font-size:11px}.screen-card .screen-actions{align-items:center;gap:8px;display:flex}.screen-card .screen-actions .screen-volume-control{background:#0000008c;border:1px solid #ffffff24;border-radius:12px;align-items:center;gap:4px;padding:6px 10px;display:flex}.screen-card .screen-actions .screen-volume-control span{color:#fff;opacity:.9;align-items:center;display:flex}.screen-card .screen-actions .screen-volume-control .range-slider{background:#fff3;border-radius:999px;width:92px;height:4px}.screen-card .screen-actions .screen-volume-control .volume-value{text-align:right;min-width:36px;font-size:10px}.screen-card .screen-actions button{background:var(--dark-light);width:36px;height:36px;transition:all var(--transition);border-radius:50%;justify-content:center;align-items:center;display:flex}.screen-card .screen-actions button:hover{background:var(--primary)}@media (max-width:768px){.screen-card .screen-actions .screen-volume-control{padding:6px 8px}.screen-card .screen-actions .screen-volume-control .range-slider{width:70px}}.pip-camera{aspect-ratio:16/9;border-radius:var(--border-radius);-webkit-user-select:none;user-select:none;z-index:10;border:2px solid #0000;width:160px;transition:border-color .2s,box-shadow .2s;position:absolute;overflow:hidden;box-shadow:0 4px 12px #00000080}.pip-camera:hover{border-color:var(--primary)}.pip-camera:hover .pip-drag-hint{opacity:1}.pip-camera.dragging{border-color:var(--primary);box-shadow:0 8px 24px #0009}.pip-camera video{aspect-ratio:16/9;object-fit:cover;pointer-events:none;width:100%}.pip-camera .pip-drag-hint{color:#fff;text-shadow:0 1px 2px #000c;opacity:0;pointer-events:none;font-size:10px;transition:opacity .2s;position:absolute;top:4px;left:50%;transform:translate(-50%)}.pip-camera .pip-resize-handle{cursor:nwse-resize;color:#fff;text-shadow:0 1px 2px #000c;opacity:0;background:#0006;border-radius:0 0 4px;justify-content:center;align-items:center;width:20px;height:20px;font-size:10px;transition:opacity .2s;display:flex;position:absolute;top:0;left:0}.pip-camera:hover .pip-resize-handle,.pip-camera.resizing .pip-resize-handle{opacity:1}.pip-camera.resizing{border-color:var(--success)}.no-screens{height:100%;color:var(--gray);flex-direction:column;justify-content:center;align-items:center;gap:16px;display:flex}.no-screens .icon{opacity:.5;font-size:64px}.no-screens p{font-size:18px}.no-screens small{font-size:13px}.player-tab{flex-direction:column;height:100%;padding:16px;display:flex}.player-container{flex-direction:column;flex:1;gap:16px;width:100%;height:100%;margin:0 auto;display:flex;position:relative}.player-container.fullscreen-mode{background:#000;gap:0}.player-container.fullscreen-mode .video-wrapper{border-radius:0;height:100%}.player-container.fullscreen-mode .video-wrapper video{cursor:pointer}.player-container.fullscreen-mode .player-controls{z-index:10;background:linear-gradient(#0000,#000000e6);border-radius:0;padding:32px 24px 24px;transition:opacity .3s,transform .3s;position:absolute;bottom:0;left:0;right:0}.player-container.fullscreen-mode.controls-hidden .player-controls{opacity:0;pointer-events:none;transform:translateY(100%)}.player-container.fullscreen-mode.controls-visible .player-controls{opacity:1;pointer-events:auto;transform:translateY(0)}.load-media{background:var(--dark-light);border-radius:var(--border-radius-lg);gap:8px;padding:16px;display:flex}.load-media .url-input-form{gap:8px;width:100%;display:flex}.load-media .url-input-form input{flex:1}.load-media .btn{width:50px;padding:12px}.load-media .btn.danger-btn{background:var(--danger)}.load-media .btn.danger-btn:hover{background:var(--danger-dark)}.load-media .file-input-wrapper label{border:2px dashed var(--dark-main);border-radius:var(--border-radius);cursor:pointer;width:50px;transition:all var(--transition);border-color:var(--primary);justify-content:center;align-items:center;gap:8px;padding:12px;display:flex}.load-media .file-input-wrapper label:hover{background:#365ff866}.load-media .file-input-wrapper input{display:none}.video-wrapper{background:#000;border-radius:0;flex:1;position:relative;overflow:hidden}.video-wrapper video{object-fit:contain;width:100%;height:100%}.video-wrapper .no-video-placeholder{color:var(--gray);flex-direction:column;justify-content:center;align-items:center;gap:16px;display:flex;position:absolute;inset:0}.video-wrapper .no-video-placeholder .icon{opacity:.5;font-size:64px}.fullscreen-overlay{opacity:0;pointer-events:none;z-index:5;background:0 0;justify-content:center;align-items:center;transition:opacity .3s;display:flex;position:absolute;inset:0}.fullscreen-overlay.visible{opacity:1}.fullscreen-overlay .center-play-btn{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;cursor:pointer;pointer-events:auto;background:#0009;border-radius:50%;justify-content:center;align-items:center;width:100px;height:100px;transition:transform .2s,background .2s;display:flex}.fullscreen-overlay .center-play-btn:hover{background:rgba(var(--primary-rgb),.8);transform:scale(1.1)}.pip-cameras-container{pointer-events:none;z-index:8;position:absolute;inset:0}.pip-camera{pointer-events:auto;cursor:grab;background:#000;border:2px solid #ffffff1a;border-radius:12px;transition:box-shadow .2s,border-color .2s;position:absolute;overflow:hidden;box-shadow:0 8px 32px #00000080}.pip-camera:hover{border-color:var(--primary);box-shadow:0 8px 32px rgba(var(--primary-rgb),.3)}.pip-camera:active{cursor:grabbing}.pip-camera video{object-fit:cover;pointer-events:none;width:100%;height:100%}.pip-camera .pip-no-video{background:var(--dark-light);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.pip-camera .pip-no-video span{background:var(--primary);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:50px;height:50px;font-size:20px;font-weight:600;display:flex}.pip-camera .pip-camera-label{color:#fff;text-align:center;pointer-events:none;background:linear-gradient(#0000,#000c);padding:4px 8px;font-size:12px;font-weight:500;position:absolute;bottom:0;left:0;right:0}.pip-camera .pip-resize-handle{cursor:se-resize;opacity:0;background:linear-gradient(135deg,#0000 50%,#ffffff4d 50%);border-radius:0 0 12px;width:20px;height:20px;transition:opacity .2s;position:absolute;bottom:0;right:0}.pip-camera:hover .pip-resize-handle{opacity:1}.pip-toggle-btn{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;cursor:pointer;z-index:15;opacity:0;background:#14141fd9;border:1px solid #ffffff26;border-radius:12px;align-items:center;gap:8px;padding:10px 20px;font-size:12px;font-weight:500;transition:all .3s;display:flex;position:absolute;top:24px;right:24px;box-shadow:0 4px 20px #0006}.pip-toggle-btn.visible{opacity:1}.pip-toggle-btn:hover{background:var(--primary);border-color:var(--primary);box-shadow:0 6px 24px rgba(var(--primary-rgb),.4);transform:translateY(-2px)}.pip-toggle-btn:active{transform:translateY(0)}.pip-toggle-btn span{letter-spacing:.3px}.local-file-warning{border-radius:var(--border-radius);color:var(--warning);text-align:center;background:#ffc1071a;border:1px solid #ffc1074d;padding:12px 16px;font-size:13px}.player-controls{background:var(--dark-light);border-radius:var(--border-radius-lg);gap:12px;padding:16px;display:flex}.player-controls button{background:var(--dark-main);width:44px;min-width:44px;height:44px;transition:all var(--transition);border-radius:50%;justify-content:center;align-items:center;font-size:18px;display:flex}.player-controls button:hover:not(:disabled){background:var(--primary)}.player-controls button:disabled{opacity:.3;cursor:not-allowed}.player-controls button.active{background:var(--success)}.player-controls button.active:hover{background:var(--success-dark)}.player-controls.fullscreen-controls{background:0 0}.player-controls.fullscreen-controls button{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a}.player-controls.fullscreen-controls button:hover:not(:disabled){background:var(--primary)}.player-controls.fullscreen-controls .progress-bar,.player-controls.fullscreen-controls .volume-inline{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a}.progress-bar{background:var(--dark-main);border-radius:20px;align-items:center;gap:12px;width:100%;padding:8px 12px;display:flex}.progress-bar input[type=range]{flex:1}.progress-bar .time{color:var(--gray-light);min-width:45px;font-family:monospace;font-size:13px}.control-buttons{flex-direction:row;justify-content:center;align-items:center;gap:16px;display:flex}.control-buttons .volume-inline{background:var(--dark-main);border-radius:20px;align-items:center;gap:8px;padding:8px 12px;display:flex}.control-buttons .volume-inline input{width:80px}.control-buttons .subtitle-info{background:var(--dark-main);border-radius:20px;align-items:center;gap:4px;max-width:200px;padding:8px 12px;display:flex}.control-buttons .subtitle-info .subtitle-name{color:var(--gray-light);white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.control-buttons .subtitle-info .remove-subtitle-btn{width:24px;min-width:24px;height:24px;color:var(--gray-light);background:0 0;border-radius:50%;padding:0;font-size:12px}.control-buttons .subtitle-info .remove-subtitle-btn:hover{background:var(--danger);color:var(--white)}.music-tab{flex-direction:column;height:100%;padding:16px;display:flex}.music-container{flex:1;gap:24px;width:100%;height:100%;margin:0 auto;display:flex}@media (max-width:900px){.music-container{flex-direction:column;gap:16px}}@media (max-width:600px){.music-container{padding:0}}.now-playing-panel{background:var(--dark-light);border-radius:12px;flex-direction:column;flex:1;justify-content:center;align-items:center;padding:32px;display:flex;position:relative;overflow:hidden}@media (max-width:600px){.now-playing-panel{padding:24px 16px}.now-playing-panel .album-artwork{width:160px;height:160px;margin-bottom:24px}}.now-playing-panel .visualizer-bg{opacity:.12;pointer-events:none;justify-content:center;align-items:flex-end;height:100px;display:flex;position:absolute;bottom:0;left:0;right:0}@media (max-width:600px){.now-playing-panel .visualizer-bg{opacity:.08;height:70px}}.now-playing-panel .visualizer-bars{align-items:flex-end;gap:4px;height:100%;display:flex}.now-playing-panel .visualizer-bars .bar{background:linear-gradient(180deg,var(--primary),var(--secondary));width:5px;height:20px;box-shadow:0 0 8px rgba(var(--primary-rgb),.3);border-radius:3px}.now-playing-panel .visualizer-bars .bar.animate{animation:.5s ease-in-out infinite alternate visualizer}.now-playing-panel .album-artwork{width:200px;height:200px;margin-bottom:32px;position:relative}.now-playing-panel .album-artwork .artwork-inner{background:linear-gradient(135deg,var(--primary)0%,var(--secondary)100%);color:#fff;width:100%;height:100%;box-shadow:0 20px 60px rgba(var(--primary-rgb),.4),0 0 0 1px #ffffff1a inset;border-radius:20px;justify-content:center;align-items:center;transition:transform .3s;display:flex}.now-playing-panel .album-artwork .artwork-inner:hover{transform:translateY(-4px)}.now-playing-panel .album-artwork .artwork-ring{border:2px solid rgba(var(--primary-rgb),.2);opacity:0;border-radius:20px;transition:all .3s;position:absolute;inset:-8px}.now-playing-panel .album-artwork .artwork-ring.playing{opacity:1;animation:2s ease-in-out infinite pulse-ring}.now-playing-panel .track-info{text-align:center;max-width:100%;margin-bottom:24px;padding:0 16px}.now-playing-panel .track-info .track-title{white-space:nowrap;text-overflow:ellipsis;background:linear-gradient(135deg,var(--white),var(--gray));-webkit-text-fill-color:#0000;-webkit-background-clip:text;background-clip:text;max-width:450px;margin-bottom:4px;font-size:20px;font-weight:700;overflow:hidden}@media (max-width:600px){.now-playing-panel .track-info .track-title{max-width:280px;font-size:18px}}.now-playing-panel .track-info .track-status{color:var(--primary);letter-spacing:.5px;font-size:12px;font-weight:500}.now-playing-panel .progress-section{align-items:center;gap:8px;width:100%;max-width:450px;margin-bottom:24px;display:flex}@media (max-width:600px){.now-playing-panel .progress-section{max-width:100%}}.now-playing-panel .progress-section .time{color:var(--white);font-variant-numeric:tabular-nums;opacity:.7;min-width:38px;font-size:12px;font-weight:500}.now-playing-panel .progress-section .time.current{text-align:right}.now-playing-panel .progress-section .time.duration{text-align:left}.now-playing-panel .progress-section .progress-track{cursor:pointer;background:#ffffff14;border-radius:6px;flex:1;height:8px;transition:all .2s;position:relative}.now-playing-panel .progress-section .progress-track .progress-fill{background:linear-gradient(90deg,var(--primary),var(--secondary));height:100%;box-shadow:0 0 10px rgba(var(--primary-rgb),.5);pointer-events:none;border-radius:6px;transition:width .1s linear;position:absolute;top:0;left:0}.now-playing-panel .progress-section .progress-track .progress-fill:after{content:"";width:14px;height:14px;box-shadow:0 2px 10px #0006,0 0 0 2px var(--primary);opacity:1;background:#fff;border-radius:50%;transition:all .2s;position:absolute;top:50%;right:-6px;transform:translateY(-50%)}.now-playing-panel .progress-section .progress-track .progress-input{opacity:0;cursor:pointer;z-index:2;width:100%;height:100%;position:absolute;inset:0}.now-playing-panel .progress-section .progress-track:hover{height:10px}.now-playing-panel .progress-section .progress-track:hover .progress-fill:after{width:16px;height:16px;box-shadow:0 3px 12px #00000080,0 0 0 3px var(--primary);right:-8px}.now-playing-panel .main-controls{align-items:center;gap:4px;margin-bottom:16px;display:flex}@media (max-width:600px){.now-playing-panel .main-controls{gap:4px}}.now-playing-panel .main-controls .control-btn{width:44px;height:44px;color:var(--white);cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex}.now-playing-panel .main-controls .control-btn:hover:not(:disabled){background:#ffffff1a;transform:scale(1.05)}.now-playing-panel .main-controls .control-btn:active:not(:disabled){transform:scale(.95)}.now-playing-panel .main-controls .control-btn:disabled{opacity:.3;cursor:not-allowed}.now-playing-panel .main-controls .control-btn.secondary{width:36px;height:36px;color:var(--gray)}@media (max-width:600px){.now-playing-panel .main-controls .control-btn.secondary{width:32px;height:32px}}.now-playing-panel .main-controls .control-btn.secondary.active{color:var(--primary);background:rgba(var(--primary-rgb),.15)}.now-playing-panel .main-controls .control-btn.secondary:hover:not(:disabled){color:var(--white)}.now-playing-panel .main-controls .control-btn.play-pause{background:linear-gradient(135deg,var(--primary),var(--secondary));width:64px;height:64px;box-shadow:0 8px 24px rgba(var(--primary-rgb),.4);border-radius:20px;margin:0 8px}@media (max-width:600px){.now-playing-panel .main-controls .control-btn.play-pause{width:56px;height:56px;margin:0 4px}}.now-playing-panel .main-controls .control-btn.play-pause:hover:not(:disabled){box-shadow:0 12px 32px rgba(var(--primary-rgb),.5);transform:scale(1.08)}.now-playing-panel .main-controls .control-btn.play-pause:active:not(:disabled){transform:scale(.98)}.now-playing-panel .volume-section{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0a;border-radius:12px;align-items:center;gap:8px;padding:8px;display:flex}.now-playing-panel .volume-section .volume-icon{width:28px;height:28px;color:var(--primary);cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;transition:all .15s;display:flex}.now-playing-panel .volume-section .volume-icon:hover{color:var(--secondary);background:#ffffff0d}.now-playing-panel .volume-section .volume-track{cursor:pointer;background:#ffffff1a;border-radius:4px;width:100px;height:6px;transition:all .2s;position:relative}.now-playing-panel .volume-section .volume-track .volume-fill{background:linear-gradient(90deg,var(--primary),var(--secondary));pointer-events:none;border-radius:4px;height:100%;transition:width .1s;position:absolute;top:0;left:0}.now-playing-panel .volume-section .volume-track .volume-fill:after{content:"";width:12px;height:12px;box-shadow:0 2px 8px #0006,0 0 0 2px var(--primary);opacity:1;background:#fff;border-radius:50%;transition:all .2s;position:absolute;top:50%;right:-5px;transform:translateY(-50%)}.now-playing-panel .volume-section .volume-track .volume-input{opacity:0;cursor:pointer;z-index:2;width:100%;height:100%;position:absolute;inset:0}.now-playing-panel .volume-section .volume-track:hover{height:8px}.now-playing-panel .volume-section .volume-track:hover .volume-fill:after{width:14px;height:14px;box-shadow:0 3px 10px #00000080,0 0 0 3px var(--primary);right:-7px}.now-playing-panel .volume-section .volume-value{color:var(--white);text-align:right;min-width:32px;font-size:12px;font-weight:500}.playlist-panel{background:var(--dark-light);border-radius:12px;flex-direction:column;width:380px;min-width:320px;display:flex;overflow:hidden}@media (max-width:900px){.playlist-panel{width:100%;min-width:auto;max-height:350px}}.playlist-panel .playlist-header{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff05;border-bottom:1px solid #ffffff14;padding:16px}.playlist-panel .playlist-header .header-content{align-items:center;gap:8px;display:flex}.playlist-panel .playlist-header .header-content h3{flex:1;font-size:16px;font-weight:600}.playlist-panel .playlist-header .header-content .track-count{color:var(--primary);background:rgba(var(--primary-rgb),.15);border-radius:8px;padding:4px 10px;font-size:11px;font-weight:500}.playlist-panel .playlist-tracks{flex:1;padding:4px 0;overflow-y:auto}.playlist-panel .playlist-tracks::-webkit-scrollbar{width:6px}.playlist-panel .playlist-tracks::-webkit-scrollbar-track{background:0 0;margin:4px 0}.playlist-panel .playlist-tracks::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:3px;transition:background .2s}.playlist-panel .playlist-tracks::-webkit-scrollbar-thumb:hover{background:#ffffff40}.playlist-panel .empty-playlist{text-align:center;color:var(--gray);flex-direction:column;justify-content:center;align-items:center;padding:64px 16px;display:flex}.playlist-panel .empty-playlist svg{opacity:.3;filter:drop-shadow(0 4px 12px rgba(var(--primary-rgb),.2));margin-bottom:16px}.playlist-panel .empty-playlist p{margin-bottom:4px;font-size:14px;font-weight:500}.playlist-panel .empty-playlist span{opacity:.7;font-size:12px}.playlist-panel .add-track-section{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff05;border-top:1px solid #ffffff14;padding:16px}.playlist-panel .add-track-form{gap:4px;display:flex}.playlist-panel .add-track-form .url-input{background:var(--dark-light);color:var(--white);border:1.5px solid #ffffff1a;border-radius:8px;flex:1;padding:8px 16px;font-size:12px;transition:all .2s}.playlist-panel .add-track-form .url-input::placeholder{color:var(--gray);opacity:.6}.playlist-panel .add-track-form .url-input:focus{border-color:var(--primary);background:rgba(var(--primary-rgb),.05);box-shadow:0 0 0 3px rgba(var(--primary-rgb),.1);outline:none}.playlist-panel .add-track-form .add-btn{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;cursor:pointer;width:44px;height:44px;box-shadow:0 4px 12px rgba(var(--primary-rgb),.3);border:none;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;transition:all .2s;display:flex}.playlist-panel .add-track-form .add-btn:hover:not(:disabled){box-shadow:0 6px 16px rgba(var(--primary-rgb),.4);transform:translateY(-2px)}.playlist-panel .add-track-form .add-btn:active:not(:disabled){transform:translateY(0)}.playlist-panel .add-track-form .add-btn:disabled{opacity:.4;cursor:not-allowed}.track-item{cursor:pointer;-webkit-user-select:none;user-select:none;border:1px solid #0000;border-radius:8px;align-items:center;gap:8px;margin:2px 8px;padding:8px 16px;transition:all .2s;display:flex}.track-item:hover{background:#ffffff0f;border-color:#ffffff14;transform:translate(4px)}.track-item:hover .track-actions{opacity:1}.track-item.active{background:linear-gradient(90deg,rgba(var(--primary-rgb),.15),rgba(var(--secondary-rgb),.1));border-color:rgba(var(--primary-rgb),.3);box-shadow:0 0 20px rgba(var(--primary-rgb),.2)}.track-item.active .track-number{color:var(--primary)}.track-item.active .track-name{color:var(--primary);font-weight:600}.track-item.dragging{opacity:.5}.track-item.drag-over{border-top:2px solid var(--primary);padding-top:6px}.track-item .track-number{width:24px;height:24px;color:var(--gray);flex-shrink:0;justify-content:center;align-items:center;font-size:10px;font-weight:500;display:flex}.track-item .track-info{flex:1;min-width:0}.track-item .track-info .track-name{white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.track-item .track-actions{opacity:0;align-items:center;gap:4px;transition:opacity .2s;display:flex}.track-item .track-actions .drag-handle{color:var(--gray);cursor:grab;border-radius:4px;padding:4px 6px;font-size:12px;transition:all .2s}.track-item .track-actions .drag-handle:hover{color:var(--white);background:#ffffff0d}.track-item .track-actions .drag-handle:active{cursor:grabbing;color:var(--primary)}.track-item .track-actions .delete-btn{width:28px;height:28px;color:var(--gray);cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;transition:all .2s;display:flex}.track-item .track-actions .delete-btn:hover{background:rgba(var(--danger-rgb),.2);color:var(--danger);transform:scale(1.1)}.track-item .track-actions .delete-btn:active{transform:scale(.95)}@keyframes visualizer{0%{opacity:.6;height:20px}50%{opacity:1}to{opacity:.8;height:65px}}@keyframes pulse-ring{0%,to{opacity:.3;transform:scale(1)}50%{opacity:.7;transform:scale(1.05)}}.whiteboard-tab{flex-direction:column;height:100%;display:flex;overflow:hidden}.whiteboard-toolbar{background:var(--dark-light);border-bottom:1px solid var(--dark-main);flex-wrap:wrap;align-items:center;gap:8px;padding:12px 16px;display:flex}.whiteboard-toolbar .tool-group{border-right:1px solid var(--dark-main);gap:4px;padding-right:12px;display:flex}.whiteboard-toolbar .tool-group:last-child{border-right:none}.whiteboard-toolbar .tool-btn{width:36px;height:36px;transition:all var(--transition);border-radius:6px;justify-content:center;align-items:center;font-size:18px;display:flex}.whiteboard-toolbar .tool-btn:hover{background:var(--dark-main)}.whiteboard-toolbar .tool-btn.active{background:var(--primary)}.whiteboard-toolbar .tool-btn:disabled{opacity:.5;cursor:not-allowed}.whiteboard-toolbar .tool-label-btn{width:auto;min-width:72px;padding:0 10px;font-size:12px;font-weight:600}.whiteboard-toolbar .tools-main{align-items:center}.whiteboard-toolbar .size-slider{background-color:var(--dark-main);border-radius:20px;width:100px;padding:10px}.whiteboard-toolbar .size-slider input{width:100%}.whiteboard-toolbar .viewport-controls{align-items:center}.whiteboard-toolbar .viewport-controls .tool-label-btn{min-width:88px}.whiteboard-toolbar .viewport-controls .zoom-indicator{text-align:center;min-width:48px;color:var(--gray-300);font-size:12px}.whiteboard-toolbar .color-picker-group{align-items:center;gap:8px}.whiteboard-toolbar .color-picker-group .color-input-stack{background:var(--dark-main);border-radius:10px;align-items:center;gap:4px;padding:6px 8px;display:flex}.whiteboard-toolbar .color-picker-group .color-picker-native{cursor:pointer;background:0 0;border:none;border-radius:8px;width:34px;height:34px;padding:0}.whiteboard-toolbar .color-picker-group .color-code-input{border:1px solid var(--dark-main);width:92px;color:var(--white);text-transform:uppercase;background:0 0;border-radius:8px;padding:6px 8px;font-size:12px}.whiteboard-toolbar .color-picker-group .color-code-input:focus{border-color:var(--primary);outline:none}.whiteboard-canvas-container{background:var(--white);flex:1;position:relative;overflow:hidden}.whiteboard-canvas-container canvas{cursor:crosshair;touch-action:none;width:100%;height:100%}.whiteboard-canvas-container .whiteboard-cursor-layer{pointer-events:none;position:absolute;inset:0}.whiteboard-canvas-container .remote-cursor{z-index:3;align-items:center;gap:6px;display:inline-flex;position:absolute;top:0;left:0;transform:translate(0)}.whiteboard-canvas-container .cursor-dot{border:2px solid var(--white);background:#2563eb;border-radius:50%;width:10px;height:10px;box-shadow:0 0 0 1px #1d4ed8}.whiteboard-canvas-container .cursor-label{color:#fff;white-space:nowrap;background:#0f172ae6;border-radius:999px;padding:2px 8px;font-size:11px;line-height:1.2}