/* On the compact dashboard, a vertical finger swipe can still scroll the page,
   while a two-finger gesture belongs to OrbitControls rather than page zoom. */
@media (max-width: 900px) {
  body[data-app-screen="dashboard"] #house,
  body[data-app-screen="dashboard"] #house3d,
  body[data-app-screen="dashboard"] #house3d canvas,
  body[data-app-screen="dashboard"] #threeLabelLayer {
    touch-action: pan-y !important;
  }
}

/* The active modelled run owns the visible viewport; the underlying dashboard
   returns unchanged when the user leaves the enlarged view. */
html[data-simulation-immersive="true"],
body[data-simulation-immersive="true"] {
  overflow: hidden !important;
  overscroll-behavior: none;
}

body[data-simulation-immersive="true"][data-app-screen="dashboard"][data-display-mode="model"]
  #modelViewportFrame {
  position: fixed !important;
  z-index: 1000;
  top: var(--simulation-viewport-top, 0px);
  left: var(--simulation-viewport-left, 0px);
  width: var(--simulation-viewport-width, 100vw);
  height: var(--simulation-viewport-height, 100dvh);
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #f5f5f7;
  isolation: isolate;
  touch-action: none !important;
}

body[data-simulation-immersive="true"] #modelViewportFrame .display-toolbar,
body[data-simulation-immersive="true"] #modelViewportFrame .dashboard-model-primary-actions {
  display: none !important;
}

body[data-simulation-immersive="true"] #modelViewport {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: none;
}

body[data-simulation-immersive="true"] #house,
body[data-simulation-immersive="true"] #house3d,
body[data-simulation-immersive="true"] #modelViewport.view-split #house,
body[data-simulation-immersive="true"] #modelViewport.view-split #house3d {
  width: 100%;
  height: 100% !important;
  border: 0;
  border-radius: 0;
}

/* Product shell permits page pinch on a compact dashboard. During playback,
   both touch points must stay with the model's OrbitControls or SVG handler. */
body[data-simulation-immersive="true"][data-app-screen="dashboard"] #house,
body[data-simulation-immersive="true"][data-app-screen="dashboard"] #house3d,
body[data-simulation-immersive="true"][data-app-screen="dashboard"] #house3d canvas,
body[data-simulation-immersive="true"][data-app-screen="dashboard"] #threeLabelLayer {
  touch-action: none !important;
}

body[data-simulation-immersive="true"] #dashboardTemperatureLegend {
  top: max(0.6rem, calc(env(safe-area-inset-top) + 0.35rem));
  right: max(0.6rem, calc(env(safe-area-inset-right) + 0.35rem));
  bottom: auto;
  max-width: min(15rem, calc(100% - 1.2rem));
}

.immersive-playback-dock[hidden] { display: none !important; }

body[data-simulation-immersive="true"] .immersive-playback-dock {
  position: absolute;
  z-index: 40;
  left: 50%;
  bottom: max(0.65rem, calc(env(safe-area-inset-bottom) + 0.4rem));
  width: min(42rem, calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right) - 1.3rem));
  transform: translateX(-50%);
  display: grid;
  gap: 0.55rem;
  padding: 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.5);
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 0.5rem 2rem rgba(15, 23, 42, 0.2);
  touch-action: auto;
}

.immersive-playback-heading,
.immersive-playback-actions,
.immersive-zoom-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.immersive-playback-heading { justify-content: space-between; }
.immersive-playback-heading strong { font-variant-numeric: tabular-nums; }
.immersive-playback-actions { justify-content: space-between; }
.immersive-playback-dock input[type="range"] { width: 100%; min-height: 2rem; accent-color: #c74424; }
.immersive-playback-dock .btn { min-width: 2.75rem; min-height: 2.75rem; }
.immersive-zoom-actions .btn { padding-inline: 0.65rem; }

@media (max-width: 700px) and (max-height: 450px) {
  body[data-simulation-immersive="true"] .immersive-playback-dock {
    width: min(42rem, calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right) - 0.8rem));
    bottom: max(0.25rem, env(safe-area-inset-bottom));
    gap: 0.2rem;
    padding: 0.3rem 0.55rem;
  }
  .immersive-playback-dock .btn { min-height: 2.25rem; }
  .immersive-playback-dock input[type="range"] { min-height: 1.5rem; }
}

@media (max-width: 560px) {
  body[data-simulation-immersive="true"] #dashboardTemperatureLegend {
    top: max(0.5rem, calc(env(safe-area-inset-top) + 0.3rem));
    right: max(0.5rem, calc(env(safe-area-inset-right) + 0.3rem));
  }
  .immersive-playback-dock { gap: 0.4rem; padding: 0.6rem; }
  .immersive-playback-actions { flex-wrap: wrap; }
  .immersive-zoom-actions { margin-left: auto; }
}