/* Monitor portrait: native 800 x 1280, scaling with the available viewport. */
@media (orientation: portrait) {
  body { overflow: hidden; }
  .screen { height: 100dvh; min-height: 0; }
  .hero, .hero-connected, .connected-view { min-width: 0; min-height: 0; }
  body[data-state="connected"] .hero { overflow: auto; align-items: start; }
  body[data-state="connected"] .hero-connected { width: 100%; }
  body[data-state="connected"][data-mode="standard"] .hero,
  body[data-state="connected"][data-mode="map"] .hero,
  body[data-state="connected"][data-mode="lock"] .hero,
  body[data-state="connected"][data-mode="products"] .hero,
  body[data-state="connected"][data-mode="checkout"] .hero {
    padding: clamp(16px, 3vw, 32px);
  }
  .call-layout {
    width: 100%; height: calc(100dvh - clamp(32px, 6vw, 64px));
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 3fr) minmax(0, 2fr);
    gap: clamp(16px, 2vw, 24px);
  }
  .call-layout .video-panel { grid-row: 1; }
  .call-layout .info-panel { grid-row: 2; }
  .call-layout .video-panel, .call-layout .info-panel {
    aspect-ratio: auto; min-height: 0; height: 100%; border-radius: 20px;
  }
  .video-native { object-fit: contain; }
  .assist-layout {
    width: 100%; grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto; gap: clamp(16px, 2.5vw, 28px);
  }
  .assist-header { grid-column: 1; grid-row: 1; gap: 20px; align-items: center; }
  .assist-logo { width: clamp(72px, 12vw, 110px); }
  .assist-title { font-size: clamp(28px, 5vw, 48px); }
  .assist-unit { font-size: clamp(18px, 3vw, 28px); margin-top: 8px; }
  .assist-title, .assist-unit { text-align: left; }
  .assist-video-panel {
    grid-column: 1; grid-row: 2; max-width: none; justify-self: stretch;
    height: clamp(180px, 27dvh, 400px); aspect-ratio: auto; border-radius: 20px;
  }
  .content-stage { grid-column: 1; grid-row: 3; min-width: 0; padding-top: 0; }
  .map-stage { width: 100%; min-height: 0; padding: 16px; grid-template-columns: 1fr; }
  .map-side { min-height: 80px; grid-template-columns: 1fr; }
  .map-side-text { writing-mode: horizontal-tb; transform: none; padding: 12px; }
  .map-brand-box { flex-direction: row; padding: 12px; }
  .products-stage { width: 100%; }
  .totem-products-grid { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; margin-top: 20px; }
  .product-card { padding: 16px; border-radius: 16px; background: var(--hub-surface); overflow-wrap: anywhere; }
  .product-card-name { font-size: clamp(22px, 3.5vw, 30px); }
  .product-card-image { width: 100px; height: 100px; }
  .lock-stage { grid-template-columns: 1fr; gap: 24px; }
  .lock-product { grid-template-columns: minmax(100px, 30%) minmax(0, 1fr); gap: 24px; }
  .lock-product-description { font-size: clamp(18px, 3vw, 26px); }
  .lock-payment { gap: 12px; }
  .checkout-panel { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .checkout-item { grid-template-columns: 64px minmax(0, 1fr) auto; overflow-wrap: anywhere; }
  .checkout-summary { gap: 12px; border-radius: 16px; }
  .support-actions { margin-top: 20px; }
  .support-actions .action-button {
    min-height: 52px; padding: 12px 28px; border: 1px solid var(--hub-brand-strong);
    border-radius: 12px; background: var(--hub-brand); color: var(--hub-ink);
    font: inherit; font-size: 20px; font-weight: 600; cursor: pointer;
  }
  .support-actions .action-button:focus-visible { outline: 3px solid var(--hub-ink); outline-offset: 3px; }
  body[data-state="connected"][data-mode="full"] .hero { padding: 0; overflow: hidden; }
  body[data-state="connected"][data-mode="full"] .video-panel-fullscreen {
    height: 100dvh; min-height: 0; border-radius: 0;
  }
  body[data-state="calling"] .screen { grid-template-rows: auto minmax(0, 1fr); }
  .hero-title { font-size: clamp(40px, 9vw, 80px); }
  .hero-subtitle { font-size: clamp(32px, 7vw, 64px); }
}

/* Idle media fills the monitor; only a media-error message can overlay it. */
body[data-state="idle"] .screen,
body[data-state="idle"] .hero-idle,
.idle-media { height: 100dvh; min-height: 0; }
.idle-video-frame { inset: 0; border-radius: 0; box-shadow: none; }
.idle-video { object-fit: cover; filter: none; }
.idle-top-band, .idle-overlay-callout { display: none; }
.idle-overlay-text { bottom: 24px; }