:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#182033;background:#f6f8fb;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--brand: #e635da;--brand-dark: #b91db0;--blue: #1688d8;--green: #17a56b;--amber: #d98b13;--red: #dc3f4f;--ink: #182033;--muted: #667085;--line: #d9e0ea;--surface: #ffffff;--surface-soft: #eef3f8;--shadow: 0 18px 48px rgba(35, 45, 72, .12)}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.62}.app-frame{height:100vh;min-height:100vh;display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden;background:#f5f7fb}.app-frame .preflight{min-height:0;overflow:auto}.app-frame .call-shell{height:100%;min-height:0}.desktop-app-banner{min-height:46px;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:8px 14px;border-bottom:1px solid var(--line);background:#101828;color:#fff;font-size:13px}.desktop-app-banner div{min-width:0;display:flex;align-items:center;gap:10px}.desktop-app-banner strong,.desktop-app-banner span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.desktop-app-banner span{color:#cfd6e4}.desktop-app-banner a,.desktop-app-banner button{min-height:32px;border:1px solid rgba(255,255,255,.2);border-radius:8px;display:inline-flex;align-items:center;justify-content:center;gap:7px;color:#fff;background:#ffffff1a;text-decoration:none;font-size:12px;font-weight:760;white-space:nowrap}.desktop-app-banner a{padding:0 12px}.desktop-app-banner button{width:32px;padding:0}.icon-lg{width:42px;height:42px}.icon-sm{width:16px;height:16px}.icon-xs{width:13px;height:13px}.preflight{min-height:100vh;display:grid;place-items:center;padding:28px;background:linear-gradient(180deg,rgba(230,53,218,.05),transparent 28%),#f7f9fc}.preflight-panel{width:min(1080px,100%)}.brand-row{display:flex;align-items:center;gap:10px;font-weight:760;color:var(--ink);margin-bottom:18px}.brand-row.compact{margin-bottom:0}.brand-mark{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;background:var(--brand);color:#fff;font-size:13px;font-weight:780}.preflight-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);gap:18px}.preview-frame,.join-panel{background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow)}.preview-frame{min-height:520px;overflow:hidden;display:grid;place-items:center;background:#131927}.preview-frame video{width:100%;height:100%;object-fit:cover}.preview-empty{color:#e9eef7;display:grid;justify-items:center;gap:18px}.join-panel{padding:28px;align-self:stretch}.join-panel h1{margin:0 0 24px;font-size:32px;line-height:1.08;letter-spacing:0}.join-panel label{display:grid;gap:8px;font-size:13px;font-weight:680;color:var(--muted)}.join-panel select,.chat-form input{width:100%;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);min-height:44px;padding:0 12px;outline:none}.device-row{display:grid;gap:10px;margin:20px 0 26px;color:var(--muted);font-size:14px}.device-row label{display:grid;gap:7px;color:var(--muted);font-size:13px;font-weight:680}.device-row span{display:flex;align-items:center;gap:8px}.device-row select,.media-settings-panel select{min-height:40px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);padding:0 10px;outline:none}.recording-notice{margin:-8px 0 22px;display:flex;align-items:flex-start;gap:8px;color:var(--muted);font-size:13px;line-height:1.45}.inline-error{margin:-6px 0 18px;padding:10px 12px;border:1px solid #ffd5db;border-radius:8px;background:#fff4f5;color:#ab2636;font-size:13px;line-height:1.35}.auth-note{margin:0;color:var(--muted);font-size:15px;line-height:1.45}.primary-btn,.secondary-btn,.chat-form button{border:0;border-radius:8px;min-height:44px;padding:0 18px;font-weight:760}.primary-btn{width:100%;background:var(--brand);color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}.secondary-btn{background:#fff;color:var(--ink)}.call-shell{height:100dvh;display:grid;grid-template-columns:minmax(0,1fr) auto auto;overflow:hidden;background:#f5f7fb}.call-main{min-width:0;min-height:0;height:100%;display:grid;grid-template-rows:58px minmax(220px,1fr) auto 76px;gap:12px;padding:14px}.statusbar{height:58px;display:grid;grid-template-columns:minmax(142px,1fr) auto minmax(220px,1fr);align-items:center;gap:16px;padding:0 14px;background:#ffffffeb;border:1px solid var(--line);border-radius:8px}.status-center{min-width:0;justify-self:center}.status-actions{min-width:0;justify-self:end;display:flex;align-items:center;gap:8px}.room-state,.quality{display:flex;align-items:center;gap:8px;min-width:0;color:var(--muted);font-size:14px}.quality{height:40px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface-soft)}.top-action-btn{height:40px;min-width:40px}.room-state strong{color:var(--ink);font-weight:760;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.recording-toggle{height:30px;min-width:58px;border:1px solid #ffd5db;border-radius:8px;background:#fff4f5;color:var(--red);font-size:12px;font-weight:780}.recording-toggle.is-active{background:var(--red);border-color:var(--red);color:#fff}.rec{color:var(--red);fill:currentColor}.video-grid{min-height:0;position:relative;overflow:hidden;border-radius:8px;background:linear-gradient(180deg,#ffffffa8,#eff4fbeb),#eef3f8}.video-tile{position:relative;min-width:0;min-height:0;overflow:hidden;border-radius:50%;background:linear-gradient(135deg,#1688d82e,#17a56b1f),#172033;border:1px solid #263249;display:grid;place-items:center;box-shadow:0 18px 34px #1018282e}.bubble-cloud .video-tile{position:absolute;z-index:2;left:var(--bubble-x);top:var(--bubble-y);width:var(--bubble-size);height:var(--bubble-size);transform:translate(-50%,-50%);animation:bubble-drift 8.5s ease-in-out infinite;animation-delay:var(--bubble-delay);transition:left .52s ease,top .52s ease,width .52s ease,height .52s ease,box-shadow .26s ease,border-color .26s ease}.bubble-cloud .video-tile.bubble-solo,.bubble-cloud .video-tile.bubble-pair{animation-duration:24s}.bubble-cloud .video-tile.bubble-solo{animation:none}.bubble-cloud .video-tile.bubble-focus{z-index:4}.bubble-cloud .video-tile.bubble-orbit{z-index:3;box-shadow:0 12px 24px #10182824}.video-tile.is-active{border-color:var(--brand);box-shadow:0 0 0 3px #e635da3d,0 20px 42px #10182838}.video-tile.is-offline{filter:grayscale(.8);opacity:.58}.tile-avatar{width:42%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:clamp(22px,3vmin,44px);font-weight:820;background:linear-gradient(135deg,var(--brand),var(--blue))}.bubble-orbit .tile-avatar{width:52%;font-size:clamp(17px,2.1vmin,30px)}.tile-video{width:100%;height:100%;object-fit:cover;background:#0f1726}.video-tile.is-mirrored .tile-video[data-source=camera]{transform:scaleX(-1)}.video-tile.is-screen-share .tile-video{object-fit:contain;background:#111827}.screen-share-badge{position:absolute;left:12px;top:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 9px;border-radius:8px;color:#fff;background:#111827c7;font-size:12px;font-weight:760}.bubble-orbit .screen-share-badge,.is-load-test-media .tile-video{display:none}.tile-footer{position:absolute;left:12%;right:12%;bottom:9%;height:34px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 10px;border-radius:8px;color:#fff;background:#0b101cc2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:13px;font-weight:680}.bubble-orbit .tile-footer{left:14%;right:14%;bottom:10%;height:27px;justify-content:center;padding:0 8px;font-size:11px}.tile-footer span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tile-icons{display:flex;align-items:center;gap:6px}.bubble-orbit .tile-icons{display:none}@keyframes bubble-drift{0%,to{transform:translate(-50%,-50%) translate(0)}50%{transform:translate(-50%,-50%) translate(var(--bubble-drift-x),var(--bubble-drift-y))}}.caption-bar{height:46px;display:flex;align-items:center;gap:10px;padding:0 14px;border-radius:8px;background:#172033;color:#fff;font-size:15px}.caption-bar.is-error{background:#fff4f5;color:#ab2636;border:1px solid #ffd5db}.toolbar-wrap{min-width:0;position:relative}.toolbar{height:76px;display:flex;align-items:center;gap:8px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:8px;overflow-x:auto}.mic-stack{height:58px;min-width:44px;display:grid;grid-template-rows:10px 44px;gap:4px;align-items:center}.mic-level{height:10px;width:44px;display:grid;grid-template-columns:repeat(7,1fr);gap:2px;align-items:end}.mic-level span{height:4px;border-radius:999px;background:#dfe3ea}.mic-level span:nth-child(2),.mic-level span:nth-child(6){height:6px}.mic-level span:nth-child(3),.mic-level span:nth-child(5){height:8px}.mic-level span:nth-child(4){height:10px}.mic-level.is-active span.is-lit{background:var(--green)}.mic-level.is-active span:first-child{background:#a7e4c9}.mic-level.is-active span.is-lit:nth-child(n+6){background:var(--amber)}.media-settings-panel{position:absolute;left:0;bottom:calc(100% + 8px);z-index:15;width:min(520px,calc(100vw - 28px));display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:12px;border:1px solid var(--line);border-radius:8px;background:#fff;box-shadow:var(--shadow)}.media-settings-panel label{min-width:0;display:grid;gap:7px;color:var(--muted);font-size:12px;font-weight:760}.tool-btn,.seg-btn,.request-btn,.leave-btn{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:8px;height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:720;white-space:nowrap}.tool-btn svg,.seg-btn svg,.request-btn svg,.leave-btn svg{width:18px;height:18px}.tool-btn.wide{padding:0 12px}.av-toggle{min-width:76px;padding:4px 9px;display:grid;grid-template-rows:18px 12px;gap:2px}.av-icons,.av-labels{display:flex;align-items:center;justify-content:center}.av-icons{gap:9px}.av-icons svg{width:16px;height:16px}.av-labels{gap:8px;color:inherit;font-size:10px;font-weight:820;line-height:1}.tool-btn.is-off{color:var(--red);background:#fff4f5;border-color:#ffd5db}.tool-btn.is-live,.seg-btn.is-selected{color:#fff;background:var(--ink);border-color:var(--ink)}.screen-share-btn.is-live{color:#fff;background:var(--green);border-color:var(--green)}.tool-btn:disabled{cursor:not-allowed;color:#8b92a1;background:#f3f5f8;border-color:#dfe3ea;opacity:.78}.tooltip-wrap{display:inline-flex}.toolbar-segment{display:inline-flex;gap:4px;padding:4px;background:var(--surface-soft);border-radius:8px}.room-switcher{max-width:min(100%,420px)}.seg-btn{background:transparent;border-color:transparent;padding:0 12px}.request-btn{color:#fff;background:var(--brand);border-color:var(--brand);padding:0 14px}.leave-btn{color:#fff;background:var(--red);border-color:var(--red);margin-left:auto}.host-sidebar,.chat-drawer{width:348px;height:100dvh;max-height:100dvh;min-height:0;background:#fff;border-left:1px solid var(--line);overflow:hidden}.host-sidebar{padding:14px;overflow-y:auto}.sidebar-head,.chat-head{height:44px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.sidebar-head h2{margin:0;font-size:18px;letter-spacing:0}.sidebar-head span{color:var(--brand-dark);font-size:13px;font-weight:760}.course-group{border-top:1px solid var(--line);padding:8px 0}.course-row,.participant-row{width:100%;border:0;background:transparent;display:grid;align-items:center;text-align:left;color:var(--ink)}.course-row{grid-template-columns:24px minmax(0,1fr) 18px;min-height:42px;gap:8px;font-size:13px;font-weight:780}.participant-list{display:grid;gap:3px;margin-left:4px}.participant-row{grid-template-columns:20px 24px minmax(0,1fr) 12px;min-height:36px;gap:7px;border-radius:8px;padding:0 6px;font-size:13px}.participant-row.has-request{background:#fff1fb;color:#8e1686}.participant-row.is-offline{color:#9aa4b2}.queue-no{color:var(--brand-dark);font-weight:820;text-align:center}.check-box{width:18px;height:18px;border-radius:5px;border:1px solid #b8c2d0;display:grid;place-items:center;color:#fff}.check-box svg{width:13px;height:13px}.check-box.is-checked{background:var(--brand);border-color:var(--brand)}.participant-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.online-dot,.offline-dot{width:8px;height:8px;border-radius:50%;background:var(--green)}.offline-dot{background:#b8c2d0}.chat-drawer{display:grid;grid-template-rows:54px minmax(0,1fr) auto;overflow:hidden}.chat-head{padding:0 14px;margin:0;border-bottom:1px solid var(--line);justify-content:flex-start;font-weight:780}.chat-list{min-height:0;padding:14px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}.chat-list p{margin:0;padding:10px 12px;background:#f3f6fa;border-radius:8px;color:var(--ink);font-size:14px;line-height:1.35}.chat-list strong{font-weight:780}.chat-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:12px 12px max(12px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#fff}.chat-form button{background:var(--ink);color:#fff}@media(max-width:980px){.preflight-grid{grid-template-columns:1fr}.preview-frame{min-height:320px}.call-shell{grid-template-columns:minmax(0,1fr)}.host-sidebar,.chat-drawer{position:fixed;top:0;right:0;bottom:0;z-index:20;width:min(360px,100vw);height:100dvh;max-height:100dvh;box-shadow:var(--shadow)}.statusbar{height:auto;min-height:58px;grid-template-columns:minmax(0,1fr) auto;padding-block:10px}.status-center{grid-column:1 / -1;grid-row:2;width:100%;justify-self:stretch;display:flex;justify-content:center}.status-actions{grid-column:2;grid-row:1}.status-actions .quality{display:none}.status-center .toolbar-segment{max-width:100%;overflow-x:auto}.bubble-cloud .video-tile.bubble-orbit .tile-footer{display:none}}@media(prefers-reduced-motion:reduce){.bubble-cloud .video-tile{animation:none}}@media(min-width:721px)and (max-width:980px){.call-shell:has(.host-sidebar) .call-main,.call-shell:has(.chat-drawer) .call-main{margin-right:min(360px,46vw)}.host-sidebar,.chat-drawer{width:min(360px,46vw)}}@media(max-width:720px){.call-main{grid-template-rows:auto minmax(210px,1fr) auto 82px;padding:8px;gap:8px}.brand-row.compact{width:100%}.toolbar{border-radius:8px;height:82px}.desktop-app-banner{grid-template-columns:minmax(0,1fr) auto}.desktop-app-banner div{display:grid;gap:2px}.desktop-app-banner a{grid-column:1 / -1;justify-self:stretch}.desktop-app-banner button{grid-column:2;grid-row:1}.media-settings-panel{grid-template-columns:1fr}.tool-btn.wide span,.seg-btn{font-size:12px}.status-actions .request-btn{padding:0 10px}.status-actions .request-btn span{display:none}}