/* First-load iOS Safari viewport anchoring for the incoming transmission.
   The intro must not be laid out relative to a restored document scroll
   position or the browser's pre-toolbar-resize 100dvh estimate. */
body[data-state="intro"] .call-layer,
body[data-state="connecting"] .call-layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: var(--intro-visible-height, 100dvh);
  overflow: hidden;
  overscroll-behavior: none;
  transform: none;
}
body[data-state="intro"] .panel--intro {
  position: absolute;
  inset: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  padding-top: calc(env(safe-area-inset-top,0px) + 12px);
  padding-bottom: calc(env(safe-area-inset-bottom,0px) + 14px);
}
body[data-state="intro"] .intro-scene { min-height: 0; }
body[data-state="intro"] .intro-scene__character {
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
}
@media (max-height: 700px) {
  body[data-state="intro"] .panel--intro { gap: 6px; }
  body[data-state="intro"] .intro-connect.btn--primary { min-height: 50px; }
}