/* The parent dimension dock and the embedded walk view dock share these sizes. */
:root {
  --immersive-dimension-width: 164px;
  --immersive-walk-view-width: 176px;
  --immersive-mode-width: clamp(192px, calc(100vw - 376px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)), 310px);
}
.walk-toolbar { display: contents; }
body:not(.compact-scene) .walk-toolbar {
  position: absolute;
  z-index: 10;
  left: 50%;
  bottom: 104px;
  display: flex;
  align-items: stretch;
  gap: 8px;
  transform: translateX(-50%);
}
body:not(.compact-scene) .walk-toolbar > .walk-view-switch,
body:not(.compact-scene) .walk-toolbar > .walk-settings {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  width: 190px;
  margin: 0;
  transform: none;
}
body:not(.compact-scene) .walk-toolbar .walk-view-switch button { flex: 1; min-width: 0; }

/* Same baseline, with the perspective switch immediately left of 2D / 3D. */
.mobile-layout.map-immersive .view-switch,
.mobile-layout.map-immersive.is-landscape[data-view="3d"] .view-switch {
  width: var(--immersive-dimension-width);
  height: 54px;
  min-height: 54px;
  padding: 4px;
}
.map-immersive .view-switch button { min-height: 44px !important; }
.compact-scene.immersive-scene .walk-view-switch {
  left: auto;
  right: calc(18px + var(--immersive-dimension-width) + env(safe-area-inset-right, 0px));
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  width: var(--immersive-walk-view-width);
  height: 54px;
  padding: 4px;
  transform: none;
}
.compact-scene.immersive-scene .walk-view-switch button { min-height: 44px; padding-inline: 3px; }

@media (min-aspect-ratio: 1/1) {
  .compact-scene.immersive-scene .bottom {
    left: calc(10px + env(safe-area-inset-left, 0px));
    right: auto;
    width: var(--immersive-mode-width);
    transform: none;
  }
  .compact-scene.immersive-scene .mode-control { width: 100%; }
  .compact-scene.immersive-scene .mode-control button { padding-inline: 3px; font-size: 12px; }
  .compact-scene.immersive-scene .walk-settings {
    left: auto;
    right: calc(10px + env(safe-area-inset-right, 0px));
    bottom: calc(74px + env(safe-area-inset-bottom, 0px));
    width: 176px;
  }
  .compact-scene.immersive-scene .character-options { right: calc(100% + 8px); bottom: 0; width: 176px; }
  .compact-scene.immersive-scene.walking .walk-help {
    top: calc(8px + env(safe-area-inset-top, 0px));
    left: calc(10px + env(safe-area-inset-left, 0px));
    right: auto;
    width: auto;
    max-width: min(260px, calc(100vw - 310px));
    transform: none;
  }
  .compact-scene.immersive-scene.walking .right-tools { top: calc(68px + env(safe-area-inset-top, 0px)); }
  .compact-scene.immersive-scene.walking .tool-group { display: grid; grid-template-columns: 44px 44px; gap: 2px; }
}
@media (max-width: 620px) and (min-aspect-ratio: 1/1) {
  :root {
    --immersive-dimension-width: 132px;
    --immersive-walk-view-width: 148px;
    --immersive-mode-width: calc(100vw - 328px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  }
}
@media (max-width: 510px) and (min-aspect-ratio: 1/1) {
  :root { --immersive-dimension-width: 124px; --immersive-walk-view-width: 132px; --immersive-mode-width: calc(100vw - 304px); }
  .compact-scene.immersive-scene .mode-control button { font-size: 11px; padding-inline: 2px; }
  .compact-scene.immersive-scene .character-options { right: 0; bottom: calc(100% + 8px); }
}
@media (max-width: 380px) and (max-aspect-ratio: 1/1) {
  :root { --immersive-dimension-width: 132px; --immersive-walk-view-width: 148px; }
}
@media (max-height: 360px) and (min-aspect-ratio: 1/1) {
  .compact-scene.immersive-scene.walking .tool-group { grid-template-columns: repeat(5, 44px); }
  .compact-scene.immersive-scene.walking #qualityBtn { grid-column: auto; }
}
@media (max-aspect-ratio: 1/1) {
  .compact-scene.immersive-scene .bottom { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  .compact-scene.immersive-scene .walk-settings { bottom: calc(140px + env(safe-area-inset-bottom, 0px)); }
  .compact-scene.immersive-scene .touch-move { bottom: calc(136px + env(safe-area-inset-bottom, 0px)); }
  .compact-scene.immersive-scene .walk-help { right: calc(98px + env(safe-area-inset-right, 0px)); }
  .compact-scene.immersive-scene .character-options { bottom: calc(100% + 8px); }
}
@media (max-height: 650px) and (max-aspect-ratio: 1/1) {
  /* A backdrop filter would make this fixed popover relative to the small dock. */
  .compact-scene .walk-settings { backdrop-filter: none; }
  .compact-scene .character-options,
  .compact-scene.immersive-scene .character-options {
    position: fixed;
    top: calc(136px + env(safe-area-inset-top, 0px));
    left: calc(10px + env(safe-area-inset-left, 0px));
    right: calc(74px + env(safe-area-inset-right, 0px));
    bottom: auto;
    width: auto;
  }
}