:root { color-scheme: dark; font-family: Inter, system-ui, sans-serif; background: #07111f; color: #f5f8ff; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at top, #19355f, #07111f 60%); }
main { width: min(88vw, 54rem); padding: 3rem 2rem; }
.eyebrow { color: #78d9ff; letter-spacing: .16em; text-transform: uppercase; font-size: .78rem; }
h1 { margin: .3rem 0; font-size: clamp(3rem, 12vw, 6rem); }
.tagline { font-size: 1.25rem; color: #c7d5e9; }
nav { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1.5rem 0; }
form, #member, .view, #call-panel { padding: 1.2rem; border: 1px solid #29466d; border-radius: 1rem; background: #0b192c; }
label { display: grid; gap: .35rem; margin: .8rem 0; color: #c7d5e9; }
input, select, button { font: inherit; border-radius: .6rem; padding: .75rem; }
input, select { color: #f5f8ff; background: #07111f; border: 1px solid #45658f; }
button { min-height: 44px; border: 0; background: #78d9ff; color: #07111f; font-weight: 700; cursor: pointer; }
button[disabled] { opacity: .55; cursor: not-allowed; }
#call-panel { position: relative; margin: 1rem 0; }
#video-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 1rem; background: #02060c; box-shadow: inset 0 0 0 1px #29466d; }
figure { margin: 0; }
.remote-frame { position: absolute; inset: 0; }
.remote-frame video { width: 100%; height: 100%; display: block; background: #02060c; object-fit: contain; }
.remote-frame figcaption { position: absolute; left: 1rem; top: 1rem; padding: .35rem .6rem; border-radius: 999px; background: rgb(7 17 31 / 72%); color: #eaf6ff; font-size: .78rem; }
.local-pip { position: absolute; z-index: 2; top: 1rem; right: 1rem; width: clamp(8rem, 23%, 13rem); aspect-ratio: 3 / 4; overflow: hidden; border: 2px solid #78d9ff; border-radius: .9rem; background: #07111f; box-shadow: 0 .6rem 1.6rem rgb(0 0 0 / 45%); }
.local-pip video { width: 100%; height: 100%; display: block; object-fit: cover; }
.local-pip figcaption { position: absolute; right: .4rem; bottom: .4rem; padding: .2rem .45rem; border-radius: 999px; background: rgb(7 17 31 / 78%); color: #fff; font-size: .72rem; }
.enable-media { margin-top: .9rem; }
#call-controls { display: flex; justify-content: center; gap: .75rem; margin: 1rem 0; }
.round-control { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-width: 7rem; min-height: 48px; border-radius: 999px; }
.hangup-control { background: #f05252; color: #fff; }
#incoming-actions, #outgoing-actions { display: flex; gap: .6rem; margin: .8rem 0; }
#dev-debug { margin-top: 1rem; padding: .75rem; border: 1px solid #29466d; border-radius: .75rem; background: #07111f; color: #c7d5e9; }
#dev-debug summary { min-height: 44px; display: flex; align-items: center; color: #78d9ff; font-weight: 700; cursor: pointer; }
#dev-debug p { margin: .55rem 0; }
.ice-trace-panel { margin-top: .65rem; }
.ice-trace-panel summary { min-height: 36px; font-size: .78rem; }
#ice-trace { max-height: 14rem; overflow: auto; margin: .4rem 0 0; padding: .55rem; border-radius: .45rem; background: #02060c; color: #bfeaff; font: .7rem/1.35 ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
#notice { min-height: 1.5rem; color: #ffd585; }
code { overflow-wrap: anywhere; }

body.video-call-active { position: fixed; inset: 0; display: block; width: 100%; min-height: 0; height: var(--call-viewport-height, 100dvh); overflow: hidden; background: #02060c; }
body.video-call-active main { width: 100%; height: 100%; min-height: 0; padding: 0; }
body.video-call-active main > .eyebrow,
body.video-call-active main > h1,
body.video-call-active main > .tagline,
body.video-call-active #notice,
body.video-call-active .member-summary,
body.video-call-active #enable-media,
body.video-call-active #call-form,
body.video-call-active #logout,
body.video-call-active #install { display: none !important; }
#member.in-call { width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: #02060c; }
#member.in-call #call-panel { display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: #02060c; }
#member.in-call #video-stage { height: 100%; min-height: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; background: radial-gradient(ellipse at center, #152941, #07111f); }
#member.in-call .remote-frame video { background: transparent; }
#member.in-call .remote-frame figcaption { top: max(1rem, env(safe-area-inset-top)); }
#member.in-call .local-pip { top: max(1rem, env(safe-area-inset-top)); right: max(1rem, env(safe-area-inset-right)); max-height: calc(100% - 7rem); }
#member.in-call .local-pip video { object-fit: contain; }
#member.in-call #call-controls { position: absolute; z-index: 4; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); transform: translateX(-50%); margin: 0; padding: .55rem; border-radius: 999px; background: rgb(7 17 31 / 78%); backdrop-filter: blur(12px); }
#member.in-call .round-control { min-width: 4.2rem; min-height: 52px; padding: .65rem .85rem; }
#member.in-call #dev-debug { position: absolute; z-index: 3; left: max(1rem, env(safe-area-inset-left)); top: max(3.8rem, calc(env(safe-area-inset-top) + 3.8rem)); width: auto; max-width: calc(100% - 2rem); max-height: min(50%, calc(100% - 7rem)); overflow: auto; margin: 0; padding: .35rem .75rem; border-radius: 999px; background: rgb(7 17 31 / 88%); backdrop-filter: blur(12px); }
#member.in-call #dev-debug[open] { width: min(24rem, calc(100% - 2rem)); padding: .75rem; border-radius: .75rem; }

@media (max-width: 600px) {
  main { width: 100%; padding: 1.5rem 1rem; }
  #member { padding: 1rem; }
  #call-panel { padding: .8rem; }
  #video-stage { min-height: 58vh; aspect-ratio: auto; }
  .local-pip { width: clamp(6rem, 28vw, 8rem); top: .75rem; right: .75rem; }
  #member.in-call .local-pip { width: clamp(5rem, 25vw, 7rem); top: max(.75rem, env(safe-area-inset-top)); right: max(.75rem, env(safe-area-inset-right)); }
  #member.in-call #call-controls { gap: .5rem; width: max-content; max-width: calc(100% - 1rem); padding: .5rem; bottom: max(.75rem, env(safe-area-inset-bottom)); }
  #member.in-call .round-control { min-width: 50px; min-height: 50px; width: 50px; height: 50px; padding: 0; font-size: 1.25rem; }
  #member.in-call .control-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@media (max-width: 600px), (max-height: 520px) and (orientation: landscape) {
  #member.in-call .remote-frame figcaption { display: none; }
  #dev-debug { padding: 8px 10px; font-size: 12px; line-height: 1.35; }
  #dev-debug > summary { font-size: 14px; line-height: 1.35; }
  #dev-debug p { margin: 4px 0; }
  #dev-debug code { font-size: 11px; }
  #dev-debug .ice-trace-panel { margin-top: 6px; }
  #dev-debug .ice-trace-panel summary { min-height: 32px; font-size: 12px; }
  #ice-trace { max-height: 8rem; padding: 6px; font-size: 11px; line-height: 1.35; }
  #member.in-call #dev-debug { top: max(.75rem, env(safe-area-inset-top)); left: max(.75rem, env(safe-area-inset-left)); max-width: calc(70% - 1.5rem); padding: 0 10px; }
  #member.in-call #dev-debug[open] { width: min(280px, calc(100% - 1.5rem)); max-width: calc(100% - 1.5rem); padding: 8px 10px; }
  #member.in-call #dev-debug[open] > summary { min-height: 28px; }
}

@media (max-height: 520px) and (orientation: landscape) {
  #member.in-call .local-pip { width: clamp(5rem, 17vw, 8rem); max-width: calc(var(--call-viewport-height, 100dvh) * .32 * var(--local-video-ratio, .75)); max-height: 32%; aspect-ratio: 4 / 3; top: max(.5rem, env(safe-area-inset-top)); right: max(.75rem, env(safe-area-inset-right)); }
  #member.in-call #call-controls { bottom: max(.5rem, env(safe-area-inset-bottom)); }
  #member.in-call .round-control { width: 52px; min-width: 52px; height: 52px; min-height: 52px; padding: 0; font-size: 1.25rem; }
  #member.in-call .control-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* STT source text remains a compact overlay above the existing call controls. */
#member.in-call #stt-panel { position:absolute; z-index:4; left:50%; bottom:calc(max(1rem, env(safe-area-inset-bottom)) + 4.7rem); transform:translateX(-50%); width:min(28rem, calc(100% - 1.5rem)); max-height:calc(var(--call-viewport-height, 100dvh) - 10rem); overflow:auto; padding:.6rem .8rem; border:1px solid #29466d; border-radius:1rem; background:rgb(7 17 31 / 90%); font-size:14px; line-height:1.35; }
#stt-panel button { font-size:14px; min-height:44px; padding:.5rem .8rem; }
#stt-status { font-size:12px; color:#c7d5e9; margin:.3rem 0 0; }
#stt-status:empty, #stt-transcript:empty, #stt-speaker:empty { display:none; }
#stt-transcript { margin:.2rem 0 .5rem; max-height:3.9em; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; }
#stt-speaker { color:#a6dbef; font-size:11px; }
#stt-editor label { font-size:12px; margin:0 0 .3rem; }
#stt-text { width:100%; min-height:3.5rem; max-height:6rem; resize:vertical; background:#07111f; border:1px solid #45658f; color:#f5f8ff; border-radius:.5rem; padding:.5rem; font:16px/1.35 system-ui,sans-serif; }
.stt-actions { display:flex; gap:.6rem; justify-content:space-between; margin-top:.35rem; }
#stt-retry { background:#253b54; color:#eaf6ff; }
@media (max-width:600px) {
  #member.in-call #stt-panel { bottom:calc(max(.75rem, env(safe-area-inset-bottom)) + 4.55rem); padding:.45rem .65rem; }
}
@media (max-height:520px) and (orientation:landscape) {
  #member.in-call #stt-panel { left:max(.75rem, env(safe-area-inset-left)); transform:none; bottom:max(.5rem, env(safe-area-inset-bottom)); width:min(30%, 22rem, calc(50% - 7.4rem)); max-height:calc(var(--call-viewport-height, 100dvh) - 4.5rem); padding:.4rem .6rem; }
  #stt-transcript { max-height:2.6em; }
  .stt-actions { flex-wrap:wrap; gap:.25rem; }
  #stt-panel button { font-size:12px; }
}