:root{--bg-base: #0d0d0f;--bg-surface: #16171a;--bg-elevated: #1e1f24;--bg-hover: #26272d;--sidebar-width: 340px;--border: #2a2b31;--border-focus: #5865f2;--text-primary: #f0f0f2;--text-secondary: #9a9ba8;--text-muted: #5a5b68;--accent: #5865f2;--accent-hover: #4752c4;--danger: #ed4245;--danger-hover: #c03537;--success: #3ba55c;--warning: #faa61a;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-video: 18px;--shadow-md: 0 4px 16px rgba(0,0,0,.45);--shadow-lg: 0 8px 32px rgba(0,0,0,.6)}body[data-theme=light]{--bg-base: #f4f5f8;--bg-surface: #ffffff;--bg-elevated: #eef1f7;--bg-hover: #e4e9f3;--border: #d7deea;--border-focus: #4752c4;--text-primary: #141821;--text-secondary: #414b61;--text-muted: #6f7890;--accent: #4a56d2;--accent-hover: #3f49b8;--danger: #d43c3f;--danger-hover: #b93336;--success: #2f8a4d;--warning: #b97812;--shadow-md: 0 8px 20px rgba(20, 24, 33, .08);--shadow-lg: 0 16px 40px rgba(20, 24, 33, .15)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg-base);color:var(--text-primary);line-height:1.5;-webkit-font-smoothing:antialiased;transition:background .2s ease,color .2s ease}.app{display:flex;flex-direction:column;height:100%}.app-header{padding:12px 20px;background:var(--bg-surface);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0}.app-header-actions{display:flex;align-items:center;gap:14px;flex-shrink:0}.app-online-count{display:flex;align-items:center;gap:7px;font-size:.82rem;color:var(--accent);white-space:nowrap}.app-online-count__dot{width:7px;height:7px;border-radius:50%;background:var(--text-muted);flex-shrink:0}.app-online-count__placeholder{font-weight:600;color:var(--text-muted);letter-spacing:.05em}.app-online-count__num{font-weight:700;letter-spacing:-.02em}.app-online-count__label{font-weight:500;opacity:.88}.app-server-link{display:inline-flex;align-items:center;gap:6px;margin:0;padding:4px 10px;border:1px solid var(--border);border-radius:999px;background:var(--bg-base);font:inherit;font-size:.78rem;font-weight:600;color:var(--text-muted);cursor:default;white-space:nowrap;max-width:min(200px,38vw)}.app-server-link--disconnected{cursor:pointer;border-color:var(--accent);color:var(--accent)}.app-server-link--connected{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 35%,var(--border))}.app-server-link__dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;background:var(--text-muted)}.app-server-link--connecting .app-server-link__dot{background:var(--accent);animation:app-server-pulse 1.1s ease-in-out infinite}.app-server-link--connected .app-server-link__dot{background:var(--accent)}.app-server-link--disconnected .app-server-link__dot{background:var(--text-muted)}.app-server-link__text{overflow:hidden;text-overflow:ellipsis}@keyframes app-server-pulse{0%,to{opacity:.45}50%{opacity:1}}.app-header-meta{display:flex;align-items:baseline;gap:12px;min-width:0}.app-title{font-size:1.25rem;font-weight:700;color:var(--accent);letter-spacing:-.3px}.app-subtitle{font-size:.8rem;color:var(--text-muted)}.app-main{display:grid;grid-template-columns:1fr 10px var(--sidebar-width);flex:1;overflow:hidden}.sidebar-resizer{position:relative;cursor:col-resize;background:var(--bg-surface);border-left:1px solid var(--border);border-right:1px solid var(--border)}.sidebar-resizer:before{content:"";position:absolute;top:50%;left:50%;width:3px;height:52px;transform:translate(-50%,-50%);border-radius:99px;background:var(--text-muted);opacity:.45;transition:opacity .15s ease,background .15s ease}.sidebar-resizer:hover:before,.app-main--resizing .sidebar-resizer:before{opacity:1;background:var(--accent)}.video-panel{position:relative;background:#000;overflow:hidden}.video-panel--fullscreen .remote-video-wrap{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:#000;overflow:hidden}.video-panel--fullscreen .local-video-wrap{position:absolute;bottom:20px;right:20px;width:180px;aspect-ratio:16/9;border-radius:12px;overflow:hidden;border:2px solid rgba(255,255,255,.15);box-shadow:var(--shadow-lg);background:#000;z-index:5;transition:all .3s ease}.video-panel--fullscreen .local-video-wrap>.local-video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.video-panel--split{display:flex;flex-direction:column;gap:10px;padding:10px;box-sizing:border-box;background:var(--bg-base)}.video-panel--split .remote-video-wrap{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;background:#000;overflow:hidden;border-radius:var(--radius-video);border:1px solid var(--border);box-shadow:inset 0 0 0 1px #ffffff08}.video-panel--split .local-video-wrap{position:relative;flex:1;min-height:0;width:100%;border-radius:var(--radius-video);overflow:hidden;border:1px solid var(--border);box-shadow:none;background:#000;transition:all .3s ease}.video-panel--split .local-video-label{bottom:10px;left:12px;font-size:.75rem}.video-panel--row{display:flex;flex-direction:row;gap:10px;padding:10px;box-sizing:border-box;background:var(--bg-base)}.video-panel--row .remote-video-wrap{flex:1;min-width:0;width:50%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:#000;overflow:hidden;border-radius:var(--radius-video);border:1px solid var(--border);box-shadow:inset 0 0 0 1px #ffffff08}.video-panel--row .local-video-wrap{position:relative;flex:1;min-width:0;width:50%;height:100%;border-radius:var(--radius-video);overflow:hidden;border:1px solid var(--border);box-shadow:none;background:#000;transition:all .3s ease}.video-panel--row .local-video-label{bottom:10px;left:12px;font-size:.75rem}.remote-video{width:100%;height:100%;object-fit:contain;background-color:#000;transform:scaleX(1);backface-visibility:hidden;-webkit-backface-visibility:hidden}.local-video{width:100%;height:100%;object-fit:contain;background-color:#000;transform:scaleX(-1);backface-visibility:hidden;-webkit-backface-visibility:hidden}.video-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--text-secondary);font-size:1rem;text-align:center;padding:24px}.video-placeholder p{max-width:280px}.local-video-label{position:absolute;bottom:6px;left:8px;font-size:.7rem;color:#ffffffb3;text-shadow:0 1px 3px rgba(0,0,0,.8)}.app-sidebar{display:flex;flex-direction:column;background:var(--bg-surface);border-left:none;overflow:hidden;min-width:280px}.controls{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex-shrink:0}.controls-buttons{display:flex;gap:8px;flex-wrap:wrap}.status-badge{display:flex;align-items:center;gap:6px;font-size:.75rem;font-weight:500;color:var(--text-secondary);flex:1;min-width:120px}.status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--text-muted)}.status-badge--idle .status-dot{background:var(--text-muted)}.status-badge--waiting .status-dot{background:var(--warning);animation:pulse 1.2s ease-in-out infinite}.status-badge--connected .status-dot{background:var(--success)}.status-badge--idle .status-label{color:var(--text-muted)}.status-badge--waiting .status-label{color:var(--warning)}.status-badge--connected .status-label{color:var(--success)}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}.btn{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:var(--radius-sm);font-size:.82rem;font-weight:600;padding:7px 16px;cursor:pointer;transition:background .15s,transform .1s,opacity .15s;letter-spacing:.2px;line-height:1;white-space:nowrap}.btn:active{transform:scale(.96)}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.btn-start{background:var(--accent);color:#fff}.btn-start:hover:not(:disabled){background:var(--accent-hover)}.btn-next{background:var(--accent);color:#fff;border:none}.btn-next:hover:not(:disabled){background:var(--accent-hover)}.btn-next .btn-keyhint{color:#ffffffd1;opacity:1}.btn-with-hint{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;line-height:1.05;padding-top:6px;padding-bottom:6px}.btn-keyhint{font-size:.62rem;font-weight:500;opacity:.7}.btn-stop{background:transparent;color:var(--danger);border:1px solid var(--danger)}.btn-stop:hover:not(:disabled){background:var(--danger);color:#fff}.btn-send{background:var(--accent);color:#fff;border-radius:var(--radius-sm);padding:8px 14px;font-size:.82rem;flex-shrink:0}.btn-send:hover:not(:disabled){background:var(--accent-hover)}.theme-switch{background:transparent;border:none;padding:0;cursor:pointer;flex-shrink:0}.theme-switch-track{width:64px;height:34px;border-radius:999px;border:1px solid var(--border);background:var(--bg-elevated);display:flex;align-items:center;justify-content:space-between;padding:0 8px;position:relative;transition:background .2s ease,border-color .2s ease}.theme-switch-icon{font-size:.9rem;line-height:1;opacity:.95;z-index:1;-webkit-user-select:none;user-select:none;text-shadow:0 1px 2px rgba(0,0,0,.35)}.theme-switch-icon--sun{color:#ffbe2e}.theme-switch-icon--moon{color:#bec8ff}.theme-switch-thumb{position:absolute;left:3px;top:3px;width:26px;height:26px;border-radius:50%;background:var(--text-primary);box-shadow:var(--shadow-md);transition:transform .22s ease;transform:translate(0)}.theme-switch:not(.theme-switch--light) .theme-switch-thumb{transform:translate(30px)}.theme-switch--light .theme-switch-icon--sun{opacity:1}.theme-switch:not(.theme-switch--light) .theme-switch-icon--moon{opacity:1}.theme-switch--light .theme-switch-icon--moon,.theme-switch:not(.theme-switch--light) .theme-switch-icon--sun{opacity:.45}.theme-switch:hover .theme-switch-track{background:var(--bg-hover)}.theme-switch:focus-visible .theme-switch-track{outline:2px solid var(--border-focus);outline-offset:2px}.chat-panel{display:flex;flex-direction:column;flex:1;overflow:hidden}.chat-messages{flex:1;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:6px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}.chat-messages::-webkit-scrollbar{width:5px}.chat-messages::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px}.chat-empty{color:var(--text-muted);font-size:.82rem;text-align:center;margin-top:24px}.chat-msg{display:flex;flex-direction:column;max-width:85%}.chat-msg--me{align-self:flex-end;align-items:flex-end}.chat-msg--them{align-self:flex-start;align-items:flex-start}.chat-msg--system{align-self:center}.chat-sender{font-size:.68rem;color:var(--text-muted);margin-bottom:2px;font-weight:500}.chat-text{background:var(--bg-elevated);border-radius:var(--radius-md);padding:7px 11px;font-size:.875rem;line-height:1.45;word-break:break-word;color:var(--text-primary)}.chat-msg--me .chat-text{background:var(--accent);border-bottom-right-radius:3px}.chat-msg--them .chat-text{background:var(--bg-elevated);border-bottom-left-radius:3px}.chat-system{font-size:.75rem;color:var(--text-muted);padding:2px 0;white-space:pre-line;max-width:100%;text-align:center;line-height:1.45}.chat-form{display:flex;gap:8px;padding:10px 16px 14px;border-top:1px solid var(--border);flex-shrink:0;align-items:flex-end}.chat-input{flex:1;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-size:.875rem;padding:8px 12px;outline:none;transition:border-color .15s;min-width:0;min-height:38px;max-height:220px;resize:both;overflow:auto;font-family:inherit;line-height:1.4}.chat-input::placeholder{color:var(--text-muted)}.chat-input:focus{border-color:var(--border-focus)}.chat-input:disabled{opacity:.45;cursor:not-allowed}.spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.media-controls{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;gap:10px;z-index:10;background:#0000008c;padding:8px 14px;border-radius:40px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.08);pointer-events:all;transition:left .25s ease,bottom .25s ease,transform .25s ease,opacity .2s ease}.media-controls--hidden{opacity:0;pointer-events:none}.media-controls-toggle{position:fixed;border:1px solid rgba(255,255,255,.15);background:#0000008c;color:#ffffffd9;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;z-index:11;padding:0;display:flex;align-items:center;justify-content:center;transition:opacity .2s ease,top .2s ease,left .2s ease,right .2s ease,bottom .2s ease;box-sizing:border-box}.media-controls-toggle svg{width:14px;height:14px;flex-shrink:0}.media-controls-toggle:active{opacity:.7}.media-controls-toggle--hidden{opacity:0;pointer-events:none}.video-panel--fullscreen .media-controls{left:50%;bottom:20px;transform:translate(-50%)}.video-panel--split .media-controls{left:18px;top:50%;bottom:auto;transform:translateY(-50%);flex-direction:column;padding:12px 8px;border-radius:28px}.video-panel--split .layout-picker{flex-direction:column;border-radius:22px}.video-panel--row .media-controls{left:75%;bottom:20px;transform:translate(-50%)}.media-btn{width:44px;height:44px;border-radius:50%;border:2px solid transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,border-color .15s,transform .1s;padding:0;flex-shrink:0}.layout-picker{display:flex;gap:6px;padding:3px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:#ffffff14}.layout-btn{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:#ffffff14;color:#f0f0f2d9;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .15s,border-color .15s,transform .1s}.layout-btn:hover{background:#fff3}.layout-btn:active{transform:scale(.94)}.layout-btn--active{background:#5865f23d;border-color:var(--accent);color:#d5d8ff}.layout-btn svg{width:16px;height:16px}.media-btn svg{width:19px;height:19px}.media-btn:active{transform:scale(.91)}.media-btn--on{background:#3ba55c2e;border-color:var(--success);color:var(--success)}.media-btn--on:hover{background:#3ba55c52}.media-btn--off{background:#ed424538;border-color:var(--danger);color:var(--danger)}.media-btn--off:hover{background:#ed424561}.local-cam-off{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--bg-surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--text-muted);font-size:.6rem;letter-spacing:.3px;text-transform:uppercase;z-index:1}.local-cam-off svg{width:22px;height:22px;opacity:.6}@media(max-width:720px){html,body,#root{height:100%;overflow:hidden}.app{height:100dvh;overflow:hidden;background:var(--bg-base)}.app-header{padding:10px 14px}.app-subtitle{display:none}.app-header-actions{gap:10px}.app-online-count{font-size:.74rem;gap:5px}.app-online-count__dot{width:6px;height:6px}.app-server-link{font-size:.7rem;padding:3px 8px;max-width:36vw}.theme-switch-track{width:50px;height:28px}.theme-switch-thumb{width:22px;height:22px}.theme-switch:not(.theme-switch--light) .theme-switch-thumb{transform:translate(22px)}.app-main{grid-template-columns:1fr;grid-template-rows:46% 1fr;gap:8px;padding:8px;overflow:hidden}.sidebar-resizer{display:none}.video-panel{border-radius:18px;overflow:hidden}.video-panel--fullscreen .remote-video-wrap{border-radius:0}.video-panel--fullscreen .remote-video{object-fit:cover}.video-panel--fullscreen .local-video-wrap{width:clamp(76px,21vw,104px);height:clamp(52px,14.625vw,74px);aspect-ratio:auto;bottom:auto;top:max(10px,env(safe-area-inset-top,0px));right:max(10px,env(safe-area-inset-right,0px));left:auto;border-radius:12px;border:2px solid rgba(255,255,255,.2);box-shadow:0 6px 20px #0006;overflow:hidden;min-height:0}.video-panel--fullscreen .local-video-wrap>.local-video{object-fit:cover}.video-panel--fullscreen .local-video-label{display:none}.media-controls{bottom:10px;left:10px;top:auto;transform:none;padding:0;background:none;border:none;backdrop-filter:none;-webkit-backdrop-filter:none;gap:8px}.media-btn{width:38px;height:38px;background:#00000073;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-color:#ffffff1f}.media-btn svg{width:16px;height:16px}.app-sidebar{position:relative;border-left:none;border-top:none;border-radius:18px;background:var(--bg-surface);min-width:0;display:flex;flex-direction:column;overflow:hidden}.controls{padding:10px 14px 8px;border-bottom:1px solid var(--border);gap:8px;flex-shrink:0}.controls-buttons{gap:6px}.btn{padding:8px 16px;font-size:.78rem;border-radius:10px}.btn-start{padding:8px 22px;border-radius:10px}.status-badge{min-width:80px;font-size:.72rem}.chat-panel{flex:1;min-height:0;overflow:hidden}.chat-messages{flex:1;min-height:0;padding:8px 14px;gap:4px;scrollbar-width:none;overflow-y:auto}.chat-messages::-webkit-scrollbar{display:none}.chat-empty{margin-top:12px;font-size:.78rem}.chat-text{font-size:.82rem;padding:6px 10px}.chat-system{font-size:.72rem}.chat-form{padding:8px 10px calc(env(safe-area-inset-bottom,6px) + 6px);border-top:1px solid var(--border);gap:8px}.chat-input{font-size:.85rem;padding:9px 12px;border-radius:10px;min-height:36px;max-height:80px;resize:none}.btn-send{border-radius:10px;padding:9px 14px;font-size:.8rem}.video-placeholder{color:#fff9;font-size:.85rem;gap:12px}.spinner{width:32px;height:32px}}