/* Production shim — the wireframe used a fake 375px .device frame as the
   container query root. On the real site the viewport is the device. */
*{box-sizing:border-box}
html{background:#080808;-webkit-text-size-adjust:100%}
body{margin:0;background:#080808;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:#f3f3f3}
.product{container-type:inline-size;width:100%;min-height:100dvh;position:relative;isolation:isolate;overflow-x:hidden}
[hidden]{display:none!important}
section[data-screen]{scroll-margin-top:72px}
/* Live call fills the viewport, controls pinned to the bottom */
/* During a call the page itself must not scroll — only the transcript does.
   overflow:hidden also clamps the sub-pixel rounding of 100dvh. */
.product.in-call{height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.product.in-call>header{flex:0 0 auto}
.product.in-call section[data-screen="6"]{flex:1;min-height:0;display:flex;flex-direction:column;padding-bottom:0}
.product.in-call section[data-screen="6"] .call-shell{flex:1;min-height:0}
.product.in-call section[data-screen="6"] .transcript{height:auto;min-height:0;flex:1;overflow-y:auto}
/* States the prototype never needed */
.is-busy{opacity:.6;pointer-events:none}
.field-note{font-size:12px;color:#8d8d8d;margin:10px 0 0}
.err{color:#ff9d9d;font-size:13px;min-height:18px}
.orb.speaking{animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@media(prefers-reduced-motion:reduce){.orb.speaking{animation:none}}