/* Local preview: keep the smaller room rail on the same footer row as Shots / Location. */
body.panorama-mode {
  --compact-edge: 16px;
  --compact-map: 180px;
  --compact-shots: 88px;
  --compact-gap: 10px;
  --compact-bottom: calc(12px + env(safe-area-inset-bottom));
  --ibn-rail-height: 48px;
  --ibn-rail-bottom: var(--compact-bottom);
}
body.panorama-mode #pano-scenes-toggle {
  left: auto !important;
  right: var(--compact-edge) !important;
  bottom: var(--compact-bottom) !important;
  width: var(--compact-shots) !important;
  min-width: var(--compact-shots) !important;
  height: 48px !important;
  padding: 0 10px !important;
}
body.panorama-mode #pano-scenes-rail,
body.panorama-mode:has(#ibn-map .ibn-toggle[aria-expanded=true]) #pano-scenes-rail {
  left: calc(var(--compact-edge) + var(--compact-map) + var(--compact-gap)) !important;
  right: calc(var(--compact-edge) + var(--compact-shots) + var(--compact-gap)) !important;
  top: auto !important;
  bottom: var(--compact-bottom) !important;
  width: min(440px, calc(100vw - 2 * var(--compact-edge) - var(--compact-map) - var(--compact-shots) - 2 * var(--compact-gap))) !important;
  min-width: 0 !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  margin: 0 auto !important;
  transform: none !important;
  padding: 2px !important;
  gap: 4px !important;
  border-radius: 13px !important;
  align-items: center !important;
}
body.panorama-mode #pano-scenes-rail #pano-room-list.visible {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px !important;
  height: 44px !important;
}
body.panorama-mode #pano-scenes-rail .room-item {
  height: 44px !important;
  min-height: 44px !important;
  padding: 3px 4px !important;
}
body.panorama-mode #pano-scenes-rail .room-name {
  font-size: 11px !important;
  line-height: 1.35 !important;
  overflow-wrap: normal !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden !important;
}
body.panorama-mode #pano-scenes-rail .pano-scene-step {
  width: 44px !important;
  flex: 0 0 44px !important;
  height: 44px !important;
}
body.panorama-mode #ibn-map {
  left: var(--compact-edge) !important;
  right: auto !important;
  bottom: var(--compact-bottom) !important;
  width: var(--compact-map) !important;
  max-width: none !important;
}
body.panorama-mode #ibn-map:has(.ibn-toggle[aria-expanded=false]) {
  height: 48px;
  box-sizing: border-box;
}
body.panorama-mode #ibn-map .ibn-toggle[aria-expanded=false] {
  min-height: 46px;
  height: 46px;
}
body.panorama-mode #ibn-map:has(.ibn-toggle[aria-expanded=true]) {
  bottom: calc(var(--compact-bottom) + 60px) !important;
  width: min(520px, calc(100vw - 2 * var(--compact-edge))) !important;
}
body.panorama-mode #ibn-map-body {
  max-height: calc(100dvh - var(--compact-bottom) - 192px) !important;
  overflow: auto;
}
@media (max-width: 760px) {
  body.panorama-mode {
    --compact-map: 140px;
    --compact-shots: 76px;
    --compact-edge: 12px;
    --compact-gap: 8px;
  }
}
@media (max-width: 640px) {
  body.panorama-mode {
    --compact-map: 44px;
    --compact-shots: 44px;
  }
  body.panorama-mode #pano-scenes-toggle {
    padding: 0 !important;
  }
  body.panorama-mode #pano-scenes-toggle span {
    display: inline !important;
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  body.panorama-mode #ibn-map .ibn-toggle[aria-expanded=false] {
    padding: 0;
    justify-content: center;
  }
  /* Keep the complete location name accessible while showing only its icon. */
  body.panorama-mode #ibn-map .ibn-toggle[aria-expanded=false] .ibn-map-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  body.panorama-mode #ibn-map .ibn-toggle[aria-expanded=false] .ibn-chevron {
    display: none;
  }
  body.panorama-mode #pano-scenes-rail #pano-room-list.visible {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Previous / next still reaches every scene; keep the current name readable. */
  body.panorama-mode #pano-scenes-rail .room-item:not(.active) {
    display: none !important;
  }
  body.panorama-mode #pano-scenes-rail .room-name {
    font-size: 12px !important;
  }
}