:root{color-scheme:dark;--live-bg:#070a0f;--live-panel:rgba(18,23,31,.9);--live-panel-solid:#12171f;--live-border:rgba(255,255,255,.11);--live-border-strong:rgba(255,255,255,.2);--live-text:#f2f6fa;--live-muted:#aab5c1;--live-brand:#5794ef;--live-ok:#32c88a;--live-warn:#f4b84a;--live-danger:#ee6377}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;background:var(--live-bg);color:var(--live-text);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow:hidden}
button,input{font:inherit}button:focus-visible,input:focus-visible{outline:2px solid color-mix(in srgb,var(--live-brand) 78%,white);outline-offset:2px}
.live-shell{height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr);background:radial-gradient(circle at 50% -20%,rgba(87,148,239,.18),transparent 42%),var(--live-bg)}
.live-header{position:relative;z-index:5;display:grid;grid-template-columns:minmax(180px,1fr) auto minmax(300px,1fr);align-items:center;gap:14px;padding:max(10px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));border-bottom:1px solid var(--live-border);background:var(--live-panel);backdrop-filter:blur(14px)}
.live-brand{display:flex;align-items:center;gap:10px;min-width:0}.live-brand img{width:36px;height:36px;object-fit:contain}.live-brand strong{display:block;font-size:.84rem;line-height:1.2}.live-brand span{display:block;margin-top:2px;color:var(--live-muted);font-size:.66rem}
.live-session-state{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0}.live-status,.live-quality{display:flex;align-items:center;gap:7px;min-height:34px;padding:6px 11px;border:1px solid var(--live-border);border-radius:999px;background:rgba(0,0,0,.12);font-size:.69rem;font-weight:700;white-space:nowrap}.live-dot,.live-quality-dot{width:8px;height:8px;flex:0 0 auto;border-radius:50%;background:#7d8996}.is-connecting .live-dot,.is-reconnecting .live-dot{background:var(--live-warn);animation:pulse 1.2s infinite}.is-live .live-dot{background:var(--live-ok);box-shadow:0 0 0 5px rgba(50,200,138,.12)}.is-error .live-dot,.is-ended .live-dot{background:var(--live-danger)}.live-quality.is-good .live-quality-dot{background:var(--live-ok)}.live-quality.is-fair .live-quality-dot{background:var(--live-warn)}.live-quality.is-poor .live-quality-dot{background:var(--live-danger)}
.live-actions{display:flex;justify-content:flex-end;align-items:flex-end;gap:8px;min-width:0}.live-identity{display:grid;gap:3px;min-width:150px}.live-identity label{color:var(--live-muted);font-size:.58rem;letter-spacing:.02em}.live-name{width:min(220px,24vw);height:34px;border:1px solid var(--live-border);border-radius:9px;background:rgba(0,0,0,.18);color:var(--live-text);padding:0 10px;font-size:.72rem;outline:0}.live-name::placeholder{color:#7f8b98}.live-name:focus{border-color:var(--live-brand);box-shadow:0 0 0 3px rgba(87,148,239,.15)}.live-button{min-height:34px;border:1px solid var(--live-border);border-radius:9px;background:rgba(255,255,255,.06);color:var(--live-text);padding:0 11px;cursor:pointer}.live-button:hover:not(:disabled){background:rgba(255,255,255,.12);border-color:var(--live-border-strong)}.live-button:disabled{opacity:.48;cursor:not-allowed}.live-audio-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;font-size:.68rem}.live-audio-button.is-listening{border-color:rgba(50,200,138,.42);background:rgba(50,200,138,.13);color:#dff9ee}.live-button-icon{font-size:.88rem}.live-icon-button{width:36px;padding:0;font-size:1rem}
.live-stage{position:relative;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.live-stage video{display:none;width:100%;height:100%;object-fit:contain;background:#020304}.live-stage.has-video video{display:block}
.live-message{width:min(500px,calc(100% - 32px));padding:26px;border:1px solid transparent;border-radius:18px;text-align:center}.live-stage.is-ended .live-message{border-color:rgba(238,99,119,.18);background:rgba(18,23,31,.64)}.live-stage.is-ended .live-spinner{display:none}.live-spinner{width:36px;height:36px;margin:0 auto 16px;border:3px solid rgba(255,255,255,.14);border-top-color:var(--live-brand);border-radius:50%;animation:spin .8s linear infinite}.live-message h1{font-size:1.08rem;margin:0 0 8px}.live-message p{margin:0;color:var(--live-muted);font-size:.79rem;line-height:1.55}.live-message .live-button{margin-top:16px}.live-expiry{position:absolute;right:max(14px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));padding:6px 9px;border:1px solid var(--live-border);border-radius:8px;background:rgba(8,11,16,.72);color:var(--live-muted);font-size:.63rem;backdrop-filter:blur(8px)}
.live-bottom-bar{position:absolute;left:max(14px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:4px;max-width:min(620px,calc(100% - 180px));pointer-events:none}.live-security,.live-audio-status{color:rgba(255,255,255,.58);font-size:.62rem;line-height:1.35}.live-security::before{content:"●";color:var(--live-ok);margin-right:6px}.live-audio-status{color:var(--live-muted)}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.35}}
@media(max-width:980px){.live-header{grid-template-columns:minmax(150px,1fr) auto}.live-session-state{grid-column:1/-1;grid-row:2}.live-actions{min-width:0}.live-name{width:min(220px,34vw)}}
@media(max-width:720px){.live-header{grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:8px 10px}.live-brand img{width:32px;height:32px}.live-brand span{display:none}.live-actions{gap:6px}.live-identity{min-width:0}.live-identity label{display:none}.live-name{width:min(42vw,180px)}.live-audio-button{width:36px;padding:0}.live-audio-button #audioButtonText{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important}.live-session-state{justify-content:flex-start;overflow-x:auto;padding-bottom:1px}.live-status,.live-quality{min-height:30px;padding:5px 9px;font-size:.64rem}.live-bottom-bar{left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));max-width:none}.live-security{display:none}.live-expiry{right:8px;bottom:max(8px,env(safe-area-inset-bottom))}.live-audio-status{max-width:calc(100% - 145px)}}
@media(max-width:440px){.live-brand strong{font-size:.76rem}.live-name{width:36vw}.live-quality{max-width:145px;overflow:hidden}.live-quality span:last-child{overflow:hidden;text-overflow:ellipsis}.live-expiry{display:none}.live-audio-status{max-width:100%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}