.chat{grid-area:chat;position:relative;min-width:0;min-height:0;overflow:hidden;background:var(--surface);visibility:hidden;transition:visibility 0s linear var(--slow)}.call.chat-open .chat{visibility:visible;transition:none}.chat-inner{position:absolute;inset:0 auto 0 0;display:flex;flex-direction:column;width:var(--chat-w);opacity:0;transform:translate(24px);transition:opacity var(--med) var(--ease),transform var(--slow) var(--ease)}.call.chat-open .chat-inner{opacity:1;transform:none}.chat header{display:flex;align-items:center;justify-content:space-between;padding:10px 8px 10px 18px;font-weight:650}.messages{flex:1;display:flex;flex-direction:column;gap:6px;padding:4px 14px 12px;overflow-y:auto;overscroll-behavior:contain}.messages .empty{margin:auto;max-width:240px;font-size:13px;text-align:center}.msg{align-self:flex-start;max-width:85%;padding:8px 12px 6px;border-radius:18px 18px 18px 6px;background:var(--surface-3);overflow-wrap:anywhere;white-space:pre-wrap;animation:msg-in var(--med) var(--ease);transform-origin:bottom left}.msg.mine{align-self:flex-end;border-radius:18px 18px 6px;background:var(--accent);color:#fff;transform-origin:bottom right}.msg .spoken{margin-right:5px;vertical-align:-1px;opacity:.7}.msg .original{display:block;margin-top:3px;color:var(--muted);font-size:12px}.msg time{display:block;margin-top:1px;color:var(--muted);font-size:11px;text-align:right}.msg.mine time,.msg.mine .original{color:#ffffffb8}@keyframes msg-in{0%{opacity:0;transform:translateY(8px) scale(.96)}}.chat form{display:flex;align-items:center;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--border)}.chat form input{flex:1;min-width:0;border-radius:999px;padding:0 16px}.chat button.send{flex:none;width:44px;padding:0;background:var(--accent);border-color:transparent;color:#fff}.chat button.send:hover:not(:disabled){background:var(--accent-hover)}.chat button.send:disabled{background:var(--surface-3);color:var(--muted);opacity:1}.call{--chat-w: 360px;--pip-long: clamp(120px, 22vw, 240px);--pip-gap: 16px;--pill-space: calc(96px + env(safe-area-inset-bottom)) ;position:fixed;top:var(--vv-top, 0px);left:0;right:0;height:var(--vv-height, 100dvh);display:grid;grid-template-columns:minmax(0,1fr) 0px;grid-template-rows:100%;grid-template-areas:"stage chat";background:#000;animation:fade-in var(--slow) var(--ease);transition:grid-template-columns var(--slow) var(--ease),grid-template-rows var(--slow) var(--ease)}.call.chat-open{grid-template-columns:minmax(0,1fr) var(--chat-w)}.call.idle{--pill-space: calc(20px + env(safe-area-inset-bottom)) }.call .chat{border-left:1px solid var(--border)}.stage{grid-area:stage;position:relative;min-width:0;min-height:0;overflow:hidden;background:#000}.call.idle .stage{cursor:none}.feed{position:absolute;overflow:hidden;background:#111216;animation:fade-in var(--slow) var(--ease);transition:top var(--slow) var(--ease),left var(--slow) var(--ease),width var(--slow) var(--ease),height var(--slow) var(--ease),border-radius var(--slow) var(--ease),box-shadow var(--slow) var(--ease),transform var(--fast) var(--ease)}.feed.main{top:0;left:0;z-index:1;width:100%;height:100%;border-radius:0;background:#000}.feed.pip{top:calc(100% - var(--pip-h) - var(--pill-space));left:calc(100% - var(--pip-w) - var(--pip-gap));z-index:3;width:var(--pip-w);height:var(--pip-h);border-radius:var(--radius);box-shadow:0 0 0 1px #ffffff1f,var(--shadow)}.feed.pip[role=button]{cursor:pointer}.feed.pip[role=button]:hover{transform:scale(1.03)}.feed.pip[role=button]:active{transform:scale(.97)}.feed:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.feed-video{display:block;width:100%;height:100%;object-fit:contain;background:transparent}.feed.pip .feed-video{object-fit:cover}video.mirror{transform:scaleX(-1)}.feed-off{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:var(--surface-2);color:var(--muted);opacity:0;pointer-events:none;transition:opacity var(--med) var(--ease)}.feed-off.shown{opacity:1}.waiting{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:flex;align-items:center;justify-content:center;padding:16px 16px var(--pill-space);background:radial-gradient(ellipse at center,#0000008c,#00000040 70%);animation:fade-in var(--slow) var(--ease)}.waiting-card{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(440px,100%);padding:22px;border:1px solid var(--glass-border);border-radius:var(--radius-lg);background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);text-align:center;animation:rise var(--slow) var(--ease)}.waiting-card p{margin:0;font-weight:550}.waiting-card .copy-link{width:100%;background:#0000004d}.fade{opacity:0;transform:translateY(-4px);transition:opacity var(--med) var(--ease),transform var(--med) var(--ease);pointer-events:none}.fade.shown{opacity:1;transform:none}.notices{position:absolute;top:calc(14px + env(safe-area-inset-top));left:50%;z-index:4;display:flex;flex-direction:column;align-items:center;gap:6px;width:max-content;max-width:calc(100% - 32px);transform:translate(-50%)}.notice{padding:7px 14px;border-radius:999px;background:var(--glass-strong);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);font-size:13px;text-align:center}.notice:empty{display:none}.subtitle{position:absolute;left:50%;bottom:calc(var(--pill-space) + 8px);z-index:4;max-width:min(84%,720px);padding:8px 16px;border-radius:var(--radius);background:#000000b8;font-size:20px;line-height:1.35;text-align:center;translate:-50% 0;transition:opacity var(--med) var(--ease),transform var(--med) var(--ease),bottom var(--slow) var(--ease)}.subtitle:empty{display:none}.stats{position:absolute;top:calc(14px + env(safe-area-inset-top));left:14px;z-index:4;max-height:calc(100% - 28px);overflow:auto;padding:12px 14px;border:1px solid var(--glass-border);border-radius:var(--radius);background:var(--glass-strong);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top left;transition:opacity var(--med) var(--ease),transform var(--med) var(--ease),visibility 0s linear var(--med)}.stats.open{opacity:1;visibility:visible;transform:none;transition:opacity var(--med) var(--ease),transform var(--med) var(--ease)}.stats dl{display:grid;grid-template-columns:auto auto;gap:0 14px;margin:0 0 8px}.stats dt{color:var(--muted)}.stats dd{margin:0}.stats label{display:flex;align-items:center;gap:6px;cursor:pointer}.stats input{min-height:0;accent-color:var(--accent)}.stats .good{color:var(--good)}.stats .ok{color:var(--ok)}.stats .bad{color:var(--bad)}.pill{position:absolute;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));z-index:5;display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--glass-border);border-radius:999px;background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--shadow);translate:-50% 0;transition:opacity var(--med) var(--ease),transform var(--med) var(--ease),bottom var(--slow) var(--ease)}.call.idle .pill{opacity:0;transform:translateY(24px);pointer-events:none}.pill .hang-up{margin-left:6px}.more{position:relative}.menu{position:absolute;right:-8px;bottom:calc(100% + 16px);display:flex;flex-direction:column;width:236px;padding:6px;border:1px solid var(--glass-border);border-radius:var(--radius);background:var(--glass-strong);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(8px) scale(.96);transform-origin:bottom right;transition:opacity var(--fast) var(--ease),transform var(--fast) var(--ease),visibility 0s linear var(--fast)}.menu.open{opacity:1;visibility:visible;transform:none;transition:opacity var(--med) var(--ease),transform var(--med) var(--ease-spring)}button.menu-item{justify-content:flex-start;gap:12px;min-height:44px;padding:0 12px;border:none;border-radius:var(--radius-sm);background:transparent;font-weight:500}button.menu-item:hover:not(:disabled){background:#ffffff14}button.menu-item:active:not(:disabled){transform:scale(.98)}.menu-item span{flex:1;text-align:left}.menu-item .check{color:var(--accent-hover)}@media (max-width: 899px){.call{--chat-w: min(320px, 42vw);--pip-long: clamp(104px, 28vw, 168px);--pip-gap: 12px;--pill-space: calc(84px + env(safe-area-inset-bottom)) }.pill{gap:6px;padding:6px}.pill .icon-btn{width:46px;height:46px}.pill .icon-btn.danger{width:56px}.pill .hang-up{margin-left:2px}.subtitle{font-size:17px}}@media (max-width: 899px) and (orientation: portrait){.call{grid-template-columns:100%;grid-template-rows:100% 0%;grid-template-areas:"stage" "chat"}.call.chat-open{grid-template-columns:100%;grid-template-rows:42% 58%;--pip-long: 96px;--pill-space: 66px}.call .chat{border-left:none;border-top:1px solid var(--border)}.chat-inner{width:100%;transform:translateY(32px)}.call.chat-open .pill{bottom:10px;padding:4px}.call.chat-open .pill .icon-btn{width:42px;height:42px}.call.chat-open .pill .icon-btn.danger{width:50px}.call.chat-open .notices,.call.chat-open .stats{top:calc(10px + env(safe-area-inset-top))}.call.chat-open .menu{bottom:calc(100% + 10px)}}.setup{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:32px 40px;min-height:100%;padding:24px 16px calc(24px + env(safe-area-inset-bottom));animation:fade-in var(--slow) var(--ease)}.preview{--w-max: min(640px, 100vw - 32px);--h-max: 64vh;position:relative;flex:none;width:min(var(--w-max),var(--h-max) * var(--ar));height:min(var(--h-max),var(--w-max) / var(--ar));overflow:hidden;border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow);transition:width var(--slow) var(--ease),height var(--slow) var(--ease)}.preview-video{width:100%;height:100%;object-fit:cover;animation:fade-in var(--med) var(--ease)}.preview-off{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:100%;padding:16px 16px 80px;color:var(--muted);font-size:14px;text-align:center;animation:fade-in var(--med) var(--ease)}.preview-controls{position:absolute;left:50%;bottom:14px;display:flex;gap:10px;padding:6px;border:1px solid var(--glass-border);border-radius:999px;background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);transform:translate(-50%)}.preview-controls .icon-btn{width:46px;height:46px}.mic-level{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;box-shadow:0 0 0 calc(var(--level, 0) * 6px) #34c7598c;pointer-events:none}.setup-panel{display:flex;flex-direction:column;gap:18px;width:min(380px,100%)}.share{display:flex;flex-direction:column;gap:8px}.share p{margin:0;font-size:14px}.share .copy-link{width:100%}.devices{display:flex;flex-direction:column;gap:8px}.device-row{position:relative;display:flex;align-items:center;min-height:46px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2);transition:border-color var(--fast) var(--ease)}.device-row:hover{border-color:var(--border-strong)}.device-row:focus-within{border-color:var(--accent)}.row-icon{display:grid;place-items:center;flex:none;width:42px;color:var(--muted)}.row-label{flex:none;color:var(--muted);font-size:14px}.device-row select{flex:1;min-width:0;border:none;background-color:transparent}.device-row .row-label+select{text-align:right;text-align-last:right}.row-status{flex:1;padding-right:14px;font-size:14px}.device-row.pending .row-status{color:var(--muted)}.device-row.problem{border-color:#ef444459}.device-row.problem .row-status,.device-row.problem .row-icon{color:#ff8a85}.permission-help{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:12px 14px;border:1px solid rgba(239,68,68,.3);border-radius:var(--radius);background:#ef444414;font-size:14px;animation:rise var(--med) var(--ease)}.permission-help p{margin:0}.permission-help button{min-height:36px}button.join{min-height:52px;font-size:16px}@media (max-width: 899px){.setup{align-content:flex-start;gap:22px}.preview{--h-max: 52vh}.setup h1{font-size:22px}}:root{--bg: #0a0b0e;--surface: #131419;--surface-2: #1b1d23;--surface-3: #262932;--border: rgba(255, 255, 255, .08);--border-strong: rgba(255, 255, 255, .14);--text: #f3f4f6;--muted: #9ba1ad;--accent: #4c7dff;--accent-hover: #6690ff;--accent-soft: rgba(76, 125, 255, .18);--danger: #ef4444;--danger-hover: #f25c5c;--danger-soft: rgba(239, 68, 68, .2);--good: #34c759;--ok: #ffb020;--bad: #ff5a52;--glass: rgba(20, 21, 26, .6);--glass-strong: rgba(20, 21, 26, .82);--glass-border: rgba(255, 255, 255, .1);--blur: blur(18px) saturate(160%);--radius-sm: 10px;--radius: 14px;--radius-lg: 20px;--shadow: 0 10px 30px rgba(0, 0, 0, .35);--ease: cubic-bezier(.2, .8, .2, 1);--ease-spring: cubic-bezier(.34, 1.4, .64, 1);--fast: .15s;--med: .26s;--slow: .42s;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font:15px/1.45 system-ui,-apple-system,Segoe UI,PingFang SC,Microsoft YaHei,Roboto,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}h1{margin:0;font-size:26px;font-weight:650;letter-spacing:-.02em}.muted{color:var(--muted)}.error{color:var(--bad)}button,.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid var(--border);border-radius:999px;background:var(--surface-3);color:var(--text);font:inherit;font-weight:550;text-decoration:none;cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:background-color var(--fast) var(--ease),border-color var(--fast) var(--ease),color var(--fast) var(--ease),opacity var(--fast) var(--ease),transform var(--fast) var(--ease)}button:hover:not(:disabled),.button:hover{background:#30343e}button:active:not(:disabled),.button:active{transform:scale(.96)}button:focus-visible,.button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button:disabled{opacity:.38;cursor:default}button.primary,.button.primary{background:var(--accent);border-color:transparent;color:#fff}button.primary:hover:not(:disabled),.button.primary:hover{background:var(--accent-hover)}button.danger{background:var(--danger);border-color:transparent;color:#fff}button.danger:hover:not(:disabled){background:var(--danger-hover)}button.icon-btn{position:relative;flex:none;width:48px;height:48px;min-height:0;padding:0;border:none;background:#ffffff1a}button.icon-btn:hover:not(:disabled){background:#ffffff2e}button.icon-btn.active{background:var(--text);color:var(--bg)}button.icon-btn.active:hover:not(:disabled){background:#fff}button.icon-btn.off{background:var(--danger-soft);color:#ff8a85}button.icon-btn.off:hover:not(:disabled){background:#ef44444d}button.icon-btn.danger{width:60px;background:var(--danger);color:#fff}button.icon-btn.danger:hover:not(:disabled){background:var(--danger-hover)}button.icon-btn.small{width:36px;height:36px;background:transparent}button.icon-btn.small:hover:not(:disabled){background:#ffffff14}.badge{position:absolute;top:-2px;right:-2px;min-width:19px;padding:0 5px;border:2px solid var(--surface);border-radius:999px;background:var(--danger);color:#fff;font-size:11px;font-weight:700;line-height:15px;animation:pop var(--med) var(--ease-spring)}input,select{min-height:44px;padding:0 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text);font:inherit;transition:border-color var(--fast) var(--ease),background-color var(--fast) var(--ease)}input:hover,select:hover:not(:disabled){border-color:var(--border-strong)}input:focus,select:focus{border-color:var(--accent);outline:none}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239ba1ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;cursor:pointer}select:disabled{cursor:default;opacity:.7}.centered{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:100%;padding:24px 16px;text-align:center;animation:rise var(--slow) var(--ease)}.centered .actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px}.centered-icon{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--surface-3);color:var(--muted)}.copy-link{display:flex;align-items:center;gap:4px;width:min(460px,100%);padding:4px 4px 4px 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface-2)}.copy-link input{flex:1;min-width:0;min-height:36px;padding:0;border:none;background:none;color:var(--muted);font-size:14px}.copy-link button{min-height:36px;padding:0 14px;font-size:14px}.copy-link button.copied{background:#34c7592e;color:var(--good)}@keyframes rise{0%{opacity:0;transform:translateY(10px)}}@keyframes fade-in{0%{opacity:0}}@keyframes pop{0%{transform:scale(.4)}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:1ms!important;transition-duration:1ms!important}}