/* Insets belong to controls, never to the WebGL viewport or page background. */
:root {
  --device-safe-top: env(safe-area-inset-top, 0px);
  --device-safe-bottom: env(safe-area-inset-bottom, 0px);
  --device-safe-left: env(safe-area-inset-left, 0px);
  --device-safe-right: env(safe-area-inset-right, 0px);
}
html[data-device="iphone"] {
  --device-safe-top: 48px;
  --device-safe-bottom: 34px;
  --device-safe-left: 20px;
  --device-safe-right: 20px;
}

/* Shared native navigation used by FLUX, ATELIER and ORBIT. */
@media (max-width: 1100px) {
  .native-appbar {
    height: calc(67px + var(--device-safe-top));
    padding-top: var(--device-safe-top);
    padding-left: max(22px, var(--device-safe-left));
    padding-right: max(22px, var(--device-safe-right));
  }
  .native-glassbar {
    bottom: calc(15px + var(--device-safe-bottom));
    width: calc(100% - max(15px, var(--device-safe-left)) - max(15px, var(--device-safe-right)));
  }
  body:has(.native-appbar) { padding-bottom: calc(94px + var(--device-safe-bottom)); }
}
@media (max-width: 700px) {
  .native-appbar {
    padding-left: max(14px, var(--device-safe-left));
    padding-right: max(14px, var(--device-safe-right));
  }
  .scene-header {
    top: calc(18px + var(--device-safe-top));
    left: max(23px, var(--device-safe-left));
    right: max(23px, var(--device-safe-right));
  }
  .scene-heading { top: calc(96px + var(--device-safe-top)); }
  .scene-status { top: calc(71px + var(--device-safe-top)); }
  #scene-detail { top: calc(230px + var(--device-safe-top)); }
  .scene-floor-ui {
    bottom: calc(99px + var(--device-safe-bottom));
    left: max(18px, var(--device-safe-left));
    right: max(18px, var(--device-safe-right));
  }
  .scene-appnav {
    bottom: calc(19px + var(--device-safe-bottom));
    max-width: calc(100% - max(15px, var(--device-safe-left)) - max(15px, var(--device-safe-right)));
  }
  #immersive-stage .scene-credits { bottom: calc(5px + var(--device-safe-bottom)); }
  #return-immersive {
    bottom: calc(100px + var(--device-safe-bottom));
    right: max(18px, var(--device-safe-right));
  }
}