:root{--joymap-bg:#0b0d12;--joymap-bg-top:#202639;--joymap-page-background:radial-gradient(circle at top, var(--joymap-bg-top) 0, var(--joymap-bg) 48%);color:#f7f8fb;background:var(--joymap-bg);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{width:100%;min-height:100%;margin:0}body{background:var(--joymap-bg);min-height:100vh}button{font:inherit}.call-shell{background:var(--joymap-page-background);min-height:100vh;padding:20px}.call-shell--embedded{background:#0b0d12;padding:0}.call-app{flex-direction:column;gap:16px;width:min(100%,1100px);min-height:calc(100vh - 40px);margin:0 auto;display:flex}.call-shell--embedded .call-app{width:100%;min-height:100vh}.call-header{justify-content:space-between;align-items:center;gap:16px;display:flex}.brand{align-items:center;gap:12px;display:flex}.brand-mark{background:#6558f5;border-radius:12px;place-items:center;width:42px;height:42px;font-weight:800;display:grid}.brand strong,.brand span{display:block}.brand span{color:#8f98aa;margin-top:3px;font-size:12px}.connection-badges{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.badge{color:#c9cfda;background:#ffffff14;border-radius:999px;padding:7px 10px;font-size:12px}.badge--success{color:#8ce0b6;background:#3aca8329}.video-stage{background:#090b0f;border:1px solid #ffffff14;border-radius:24px;flex:1;min-height:520px;position:relative;overflow:hidden}.video-panel{background:#11141b;position:relative;overflow:hidden}.video-panel video{object-fit:cover;width:100%;height:100%;display:block}.video-panel--remote{position:absolute;inset:0}.video-panel--local{aspect-ratio:16/10;z-index:3;border:1px solid #ffffff29;border-radius:16px;width:min(26%,260px);position:absolute;bottom:18px;right:18px;box-shadow:0 16px 48px #00000073}.video-panel__empty{width:100%;height:100%;min-height:inherit;color:#7f8899;text-align:center;place-items:center;padding:24px;display:grid}.video-panel__label{color:#fff;text-overflow:ellipsis;white-space:nowrap;background:#0000008c;border-radius:8px;max-width:calc(100% - 24px);padding:6px 9px;font-size:12px;position:absolute;bottom:12px;left:12px;overflow:hidden}.call-controls{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;display:flex}.control{color:#f7f8fb;cursor:pointer;background:#171b24;border:1px solid #ffffff1f;border-radius:12px;min-height:44px;padding:0 18px}.control:hover{background:#202633}.control--primary{background:#6558f5;border-color:#0000}.control--primary:hover{background:#756af7}.control--off{color:#aeb5c2;background:#343945}.control--danger{background:#cc3d4b;border-color:#0000}.control--danger:hover{background:#dc4a59}.call-meta{color:#7f8899;flex-wrap:wrap;justify-content:center;gap:16px;font-size:12px;display:flex}.notice{border-radius:12px;margin:0;padding:12px 14px;line-height:1.7}.notice--warning{background:#ffb84d1f}.notice--error{color:#ffb3b3;background:#ff52521f}@media (width<=720px){.call-shell{padding:0}.call-app{min-height:100vh}.call-header{padding:12px 14px 0}.video-stage{border-left:0;border-right:0;border-radius:0;flex:auto;min-height:52vh}.video-panel--local{width:34%;bottom:12px;right:12px}.call-controls{padding:0 12px}.call-meta{padding:0 12px 12px}}.badge--relay{color:#ffd58a;background:#ffb84d24}.call-shell--embedded .call-app{gap:0}.call-shell--embedded .call-header,.call-shell--embedded .call-meta{display:none}.call-shell--embedded .video-stage{border:0;border-radius:0;min-height:0}.call-shell--embedded .call-controls{background:#0f131b;min-height:62px;padding:9px 10px}.call-shell--embedded .control{border-radius:10px;min-height:40px;padding-inline:13px;font-size:12px}.call-shell--embedded .notice{margin:8px;font-size:12px}@media (width<=720px){.call-shell--embedded .call-controls{gap:7px;min-height:58px;padding:8px}.call-shell--embedded .control{min-height:38px;padding-inline:11px}}.control{justify-content:center;align-items:center;gap:9px;display:inline-flex}.control__icon{flex-shrink:0;justify-content:center;align-items:center;width:18px;height:18px;display:inline-flex}.control__icon-svg{width:18px;height:18px;display:block}.control__label{white-space:nowrap;align-items:center;display:inline-flex}.call-shell--embedded .control{gap:7px}@media (width<=720px){.control__label{font-size:12px}.call-shell--embedded .control__label{font-size:11px}}html,body,#root{width:100%;min-width:0;height:100%;min-height:0;margin:0}html,body{overscroll-behavior:none;overflow:hidden}.call-shell--standalone{left:0;right:0;top:var(--call-visual-top,0px);width:100%;height:var(--call-visual-height,100dvh);min-height:0;max-height:var(--call-visual-height,100dvh);padding:20px;position:fixed;overflow:hidden}.call-shell--standalone .call-app{flex-direction:column;width:min(100%,1100px);height:100%;min-height:0;max-height:100%;margin:0 auto;display:flex;overflow:hidden}.call-shell--standalone .call-header,.call-shell--standalone .call-meta,.call-shell--standalone .call-controls,.call-shell--standalone .notice{flex:none}.call-shell--standalone .video-stage{flex:1 1 0;height:0;min-height:0;overflow:hidden}.call-shell--standalone .call-controls{padding-bottom:max(8px, env(safe-area-inset-bottom))}@media (width<=720px){.call-shell--standalone{padding:0}.call-shell--standalone .call-app{gap:0;width:100%}.call-shell--standalone .call-header{padding:max(8px, env(safe-area-inset-top)) 12px 7px}.call-shell--standalone .call-meta{padding:5px 10px}.call-shell--standalone .video-stage{border-left:0;border-right:0;border-radius:0;height:0;min-height:0}.call-shell--standalone .video-panel__empty{min-height:0}.call-shell--standalone .call-controls{min-height:62px;padding:7px 8px max(8px, env(safe-area-inset-bottom));background:#0f131b;flex-wrap:nowrap}.call-shell--standalone .control{flex:1 1 0;gap:6px;min-width:0;min-height:44px;padding:0 10px}.call-shell--standalone .control__label{text-overflow:ellipsis;white-space:nowrap;font-size:11px;overflow:hidden}.call-shell--standalone .control__icon,.call-shell--standalone .control__icon-svg{width:19px;height:19px}.call-shell--standalone .notice{margin:5px 8px}.call-shell--standalone .video-panel--local{width:34%;bottom:12px;right:12px}}@media (height<=520px) and (orientation:landscape){.call-shell--standalone .call-header,.call-shell--standalone .call-meta{display:none}.call-shell--standalone .call-controls{min-height:52px;padding-top:5px;padding-bottom:max(5px, env(safe-area-inset-bottom))}.call-shell--standalone .control{min-height:40px}}.control--icon-only{justify-content:center;gap:0;width:52px;min-width:52px;padding:0}.control--icon-only .control__icon,.control--icon-only .control__icon-svg{width:20px;height:20px}.control__label{display:none}.call-controls{justify-content:center}@media (width<=720px){.call-shell--embedded .control--icon-only,.call-shell--standalone .control--icon-only{width:48px;min-width:48px;min-height:44px}.call-shell--standalone .control--icon-only .control__icon,.call-shell--standalone .control--icon-only .control__icon-svg,.call-shell--embedded .control--icon-only .control__icon,.call-shell--embedded .control--icon-only .control__icon-svg{width:19px;height:19px}}