/* Skylens Viewer — Panorama Workspace (scripts/panorama/panorama-workspace.js).
 *
 * Owns only the workspace surface. Photo lightbox styling for STILLS stays in
 * styles/viewer.css (.photo-lightbox) — the two surfaces are separate on
 * purpose: a still is a flat image, a confirmed panorama is a sphere.
 */

/* The workspace sits INSIDE the viewer chrome, never over it: the top bar and
   the bottom menu stay reachable while a panorama is open. The offsets are
   measured from #cesiumContainer at open/resize time (panorama-workspace.js
   _syncGeometry) rather than hardcoded, so the surface tracks the real layout
   if the chrome ever changes. The fallbacks match today's shell —
   index.html:299 sizes the container as calc(100vh - 50px - 60px). */
.panorama-workspace {
  --pano-background: #051424;
  --pano-surface-low: #0d1c2d;
  --pano-surface: #122131;
  --pano-surface-high: #1c2b3c;
  --pano-text: #d4e4fa;
  --pano-secondary: rgba(212, 228, 250, 0.62);
  --pano-primary: #adc6ff;
  --pano-accent: #3cddc7;
  --pano-warning: #e8c35c;
  position: fixed;
  top: var(--pano-top, 50px);
  bottom: var(--pano-bottom, 60px);
  left: var(--pano-left, 0px);
  right: var(--pano-right, 0px);
  z-index: 1200;
  display: grid;
  grid-template-rows: 60px 1fr;
  background: var(--pano-background);
  color: var(--pano-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
}

/* Fullscreen is the one case where covering everything is the point. */
.panorama-workspace:fullscreen {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

/* Native fullscreen targets the document root so the existing Cesium canvas
   can remain visible as the panorama mini-map. */
body.panorama-native-fullscreen .panorama-workspace {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.panorama-workspace.hidden { display: none; }

/* ADR 0061 guest surface: the recipient receives the scoped tour, not the
   project application shell. The same Cesium canvas remains available as the
   locator map; only navigation/admin chrome is removed. */
body.skylens-guest-tour-mode #appHeader,
body.skylens-guest-tour-mode #bottomNav,
body.skylens-guest-tour-mode #bottomMenuPanel,
body.skylens-guest-tour-mode .gis-explorer-sidebar {
  display: none !important;
}

body.skylens-guest-tour-mode #cesiumContainer {
  height: 100dvh !important;
  min-height: 100dvh !important;
}

body.skylens-guest-tour-mode .panorama-workspace {
  top: 0;
  bottom: 0;
}

body.skylens-guest-tour-mode .panorama-workspace__back {
  visibility: hidden;
  pointer-events: none;
}

.skylens-guest-tour-status {
  position: fixed;
  z-index: 1700;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(5, 20, 36, 0.94);
  color: #d4e4fa;
  font: 600 16px/1.5 system-ui, sans-serif;
  text-align: center;
}

.skylens-guest-tour-status[hidden] { display: none; }
.skylens-guest-tour-status.is-error { color: #fecaca; }

@media (prefers-reduced-motion: no-preference) {
  .panorama-workspace--layout-transition {
    transition: left 180ms ease-out, right 180ms ease-out,
      top 180ms ease-out, bottom 180ms ease-out;
  }

  body.panorama-album-detaching #cesiumContainer,
  body.panorama-album-attaching #cesiumContainer {
    transition: right 180ms ease-out, bottom 180ms ease-out,
      width 180ms ease-out, height 180ms ease-out;
  }

  /* expandAfterAlbumClose briefly restores the map's normal document-flow
     rectangle in order to measure the panorama workspace. Do not let the
     locator transition feed its previous compact width back into that probe. */
  body.panorama-album-detaching.panorama-base-geometry-probe #cesiumContainer,
  body.panorama-album-attaching.panorama-base-geometry-probe #cesiumContainer {
    transition: none !important;
  }

  body.panorama-album-detaching .panorama-mini-map__control-dock,
  body.panorama-album-attaching .panorama-mini-map__control-dock {
    transition: left 180ms ease-out, top 180ms ease-out;
  }
}

/* In focused 360 mode Layers is still a valid navigation action. The GIS
   catalog must overlay the panorama rather than opening invisibly behind it.
   Map + 360 closes the catalog in JS, so this elevation never creates a
   three-column layout. */
body.panorama-workspace-open:not(.panorama-split-mode) .gis-explorer-sidebar {
  z-index: 1300;
}

.panorama-workspace__toolbar {
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(5, 20, 36, 0.92);
  backdrop-filter: blur(12px);
}

.panorama-workspace__identity {
  display: grid;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
}

.panorama-workspace__identity strong {
  overflow: hidden;
  color: var(--pano-text);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panorama-workspace__summary {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--pano-secondary);
  font-size: 11px;
  line-height: 1.2;
}

/* Placement / orientation / measurement state is never hidden — an
   approximate panorama must read as approximate. */
.panorama-workspace__status {
  min-width: 0;
  color: var(--pano-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panorama-workspace__actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
}

.panorama-workspace__toolbar button {
  display: grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--pano-primary);
  cursor: pointer;
  font-size: 21px;
  line-height: 1;
}

.panorama-workspace__toolbar button:hover {
  background: rgba(255, 255, 255, 0.08);
}

.panorama-workspace__toolbar button[aria-pressed="true"] {
  background: rgba(173, 198, 255, 0.14);
}

.panorama-workspace__back span {
  transform: translateY(-1px);
  font-size: 31px;
  font-weight: 300;
}

.panorama-workspace__menu {
  position: absolute;
  top: 48px;
  right: 0;
  z-index: 50;
  width: 190px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(18, 33, 49, 0.97);
  box-shadow: 0 16px 40px rgba(1, 10, 22, 0.48);
  backdrop-filter: blur(12px);
}

.panorama-workspace__menu[hidden] { display: none; }

.panorama-workspace__menu button {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  border-radius: 11px;
  color: var(--pano-text);
  font-size: 13px;
}

.skylens-guest-share-manager {
  position: fixed;
  z-index: 12000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  color: #edf6ff;
}

.skylens-guest-share-manager__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(1, 10, 22, 0.72);
  backdrop-filter: blur(5px);
}

.skylens-guest-share-manager__panel {
  position: relative;
  width: min(680px, 100%);
  max-height: min(760px, calc(100dvh - 36px));
  overflow: hidden;
  border: 1px solid rgba(106, 194, 255, 0.32);
  border-radius: 18px;
  background: #0d1d30;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}

.skylens-guest-share-manager__panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 10px 14px 10px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.skylens-guest-share-manager__panel h2 {
  margin: 0;
  font-size: 20px;
}

.skylens-guest-share-manager__close {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font-size: 27px;
}

.skylens-guest-share-manager__intro,
.skylens-guest-share-manager__empty {
  margin: 0;
  padding: 14px 20px;
  color: #b7c9dc;
  font-size: 13px;
}

.skylens-guest-share-manager__list {
  display: grid;
  gap: 10px;
  max-height: calc(min(760px, 100dvh - 36px) - 122px);
  padding: 0 14px 16px;
  overflow: auto;
}

.skylens-guest-share-manager__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 14px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
}

.skylens-guest-share-manager__card > strong,
.skylens-guest-share-manager__card > p { min-width: 0; }
.skylens-guest-share-manager__card > p { margin: 0; }
.skylens-guest-share-manager__status { color: #73d2ff; font-size: 12px; }
.skylens-guest-share-manager__activity { color: #b7c9dc; font-size: 12px; }
.skylens-guest-share-manager__error { color: #ffb4a9; font-size: 12px; }

.skylens-guest-share-manager__revoke {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(255, 180, 169, 0.55);
  border-radius: 11px;
  background: transparent;
  color: #ffb4a9;
}

.skylens-guest-share-manager__card.is-revoked,
.skylens-guest-share-manager__card.is-expired { opacity: 0.64; }

@media (max-width: 600px) {
  .skylens-guest-share-manager { padding: 0; place-items: end stretch; }
  .skylens-guest-share-manager__panel {
    width: 100%;
    max-height: 88dvh;
    border-radius: 18px 18px 0 0;
  }
  .skylens-guest-share-manager__card { grid-template-columns: 1fr; }
  .skylens-guest-share-manager__revoke {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    margin-top: 6px;
  }
}

/* Gated, not removed: the button stays visible and explains itself on click. */
.panorama-workspace__toolbar button.is-unavailable {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Approximate coupling ("Follow view") is amber, never the calibrated blue —
   the control must not look like a surveyed alignment when the heading was
   typed by hand. Matches the amber sight line the bridge draws on the globe. */
.panorama-workspace__toolbar button.is-approximate {
  color: var(--pano-warning);
}
.panorama-workspace__toolbar button.is-approximate[aria-pressed="true"] {
  background: rgba(232, 195, 92, 0.14);
  color: var(--pano-warning);
}

.panorama-workspace__stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #010f1f;
}

.panorama-workspace__viewer {
  position: absolute;
  inset: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  overscroll-behavior: contain;
  touch-action: none;
}

/* The isolated panorama widget uses no ion/base-layer services. Hide only its
   Cesium branding; the main #cesiumContainer keeps all provider attribution. */
#panoramaWorkspaceViewer .cesium-credit-logoContainer,
#panoramaWorkspaceViewer .cesium-credit-expand-link,
#panoramaWorkspaceViewer .cesium-credit-textContainer {
  display: none !important;
}

.panorama-workspace__tour {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(300px, calc(100% - 32px));
  max-width: calc(100% - 32px);
  box-sizing: border-box;
  gap: 8px;
  transform: translateX(-50%);
  pointer-events: none;
}
.panorama-workspace__tour.hidden { display: none; }
.panorama-workspace__tour-link {
  min-width: 0;
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid rgba(56, 189, 248, 0.55);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.92);
  color: #e0f2fe;
  font: 600 12px/1 sans-serif;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: auto;
}
.panorama-workspace__tour-link[data-relation="previous_panorama"] {
  grid-row: 1;
  grid-column: 1;
}
.panorama-workspace__tour-link[data-relation="next_panorama"] {
  grid-row: 1;
  grid-column: 2;
}
.panorama-workspace__tour-link[data-relation="adjacent"] { grid-column: 1 / -1; }
.panorama-workspace__tour-link:hover,
.panorama-workspace__tour-link:focus-visible {
  background: rgba(14, 165, 233, 0.28);
  outline: 2px solid rgba(125, 211, 252, 0.65);
  outline-offset: 1px;
}

.panorama-workspace__compass {
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 18;
  display: grid;
  grid-template-columns: 28px auto;
  grid-template-rows: 18px 14px;
  align-items: center;
  min-width: 72px;
  min-height: 44px;
  padding: 5px 10px 5px 7px;
  border: 1px solid rgba(125, 211, 252, 0.38);
  border-radius: 13px;
  background: rgba(5, 20, 36, 0.72);
  color: #e0f2fe;
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  backdrop-filter: blur(10px);
}

.panorama-workspace__compass[hidden] { display: none; }
.panorama-workspace__compass:hover {
  border-color: rgba(125, 211, 252, 0.8);
  background: rgba(8, 30, 50, 0.86);
}
.panorama-workspace__compass:focus-visible {
  outline: 2px solid #7dd3fc;
  outline-offset: 2px;
}
.panorama-workspace__compass-needle {
  grid-row: 1 / 3;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: #fb7185;
  font-size: 22px;
  transform-origin: center;
}
.panorama-workspace__compass strong {
  color: #f8fafc;
  font-size: 12px;
  line-height: 1;
}
.panorama-workspace__compass output {
  color: #7dd3fc;
  font: 600 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.skylens-panorama-cesium-canvas {
  width: 100%;
  height: 100%;
  cursor: grab;
}
.skylens-panorama-cesium-canvas:active { cursor: grabbing; }

@media (max-width: 700px) {
  .panorama-workspace__tour {
    right: auto;
    bottom: 12px;
    left: 50%;
    width: min(300px, calc(100% - 20px));
    max-width: calc(100% - 20px);
    gap: 6px;
    transform: translateX(-50%);
  }
  body.panorama-mini-map-mode .panorama-workspace__tour {
    left: calc((100% - 144px - var(--skylens-safe-right, 0px)) / 2);
    width: min(300px, calc(100% - 164px - var(--skylens-safe-left, 0px) - var(--skylens-safe-right, 0px)));
    max-width: calc(100% - 164px - var(--skylens-safe-left, 0px) - var(--skylens-safe-right, 0px));
  }
  body.panorama-mini-map-mode.panorama-mini-map-small .panorama-workspace__tour {
    left: 50%;
    width: min(300px, calc(100% - 20px));
    max-width: calc(100% - 20px);
  }
  .panorama-workspace__tour-link {
    min-height: 44px;
    padding-inline: 8px;
  }
}

.panorama-workspace__viewer > .skylens-powered-by {
  position: absolute;
  right: calc(var(--skylens-safe-right, 0px) + clamp(8px, 2vw, 16px));
  /* The workspace already ends above desktop navigation. A second nav-height
     offset left the attribution floating in the middle of the panorama. */
  bottom: calc(var(--skylens-safe-bottom, 0px) + 10px);
  z-index: 12;
}

body.panorama-native-fullscreen
  .panorama-workspace__viewer > .skylens-powered-by {
  bottom: calc(var(--skylens-safe-bottom, 0px) + 10px);
}

.panorama-workspace__nav {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 18;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 11px;
  background: rgba(5, 20, 36, 0.66);
  backdrop-filter: blur(12px);
}

.panorama-workspace__nav.hidden { display: none; }

.panorama-workspace__nav button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--pano-primary);
  font-size: 24px;
  cursor: pointer;
}

.panorama-workspace__nav button:hover:not(:disabled),
.panorama-workspace__nav button:focus-visible {
  background: rgba(173, 198, 255, 0.12);
}

.panorama-workspace__nav button:disabled { opacity: 0.32; }

.panorama-workspace__scrubber {
  width: clamp(90px, 13vw, 180px);
  accent-color: #38bdf8;
  cursor: pointer;
}

.panorama-workspace__scrubber[hidden] { display: none; }

#panoramaWorkspaceIndex {
  min-width: 42px;
  color: var(--pano-text);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  text-align: center;
}

.panorama-workspace__filmstrip { display: none; }

.panorama-workspace__info {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 60;
  width: min(420px, calc(100% - 28px));
  max-height: min(420px, calc(100% - 80px));
  overflow: auto;
  padding: 14px 18px 18px;
  border: 1px solid rgba(173, 198, 255, 0.18);
  border-radius: 24px;
  background: rgba(13, 28, 45, 0.97);
  box-shadow: 0 18px 52px rgba(1, 10, 22, 0.56);
  backdrop-filter: blur(12px);
}

.panorama-workspace__info[hidden] { display: none; }

/* The panorama facts sheet and the locator map are independent overlays. In
   mini-map mode reserve the lower-right corner for the map and pin facts below
   the toolbar on the opposite side, so neither surface hides the other. */
body.panorama-mini-map-mode .panorama-workspace__info {
  top: 74px;
  right: auto;
  bottom: auto;
  left: 14px;
  max-height: calc(100% - 148px);
}

.panorama-workspace__info header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
}

.panorama-workspace__info header strong {
  color: var(--pano-text);
  font-size: 15px;
  font-weight: 650;
}

.panorama-workspace__info header button {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--pano-secondary);
  font-size: 24px;
  cursor: pointer;
}

.panorama-workspace__info dl { margin: 0; }
.panorama-workspace__info dl > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.panorama-workspace__info dl > div:last-child { border-bottom: 0; }
.panorama-workspace__info dt { color: var(--pano-secondary); }
.panorama-workspace__info dd {
  margin: 0;
  color: var(--pano-text);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  text-align: right;
  overflow-wrap: anywhere;
}

/* Camera elevation is display metadata, not a map Z. Keeping it in its own
   fixed toolbar chip makes MSL/relative/unknown datum evidence visible without
   silently converting it to an ellipsoid or above-ground height. */
.panorama-workspace__elevation {
  flex: none;
  color: var(--pano-accent);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.panorama-workspace__elevation[hidden] { display: none; }

@media (max-width: 900px) {
  .panorama-workspace {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1450;
    grid-template-rows: 60px 1fr;
    padding: var(--skylens-safe-top) var(--skylens-safe-right)
      var(--skylens-safe-bottom) var(--skylens-safe-left);
  }
  .panorama-workspace__toolbar {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    min-height: 60px;
    gap: 8px;
    padding: 6px 8px;
  }
  .panorama-workspace__status {
    white-space: nowrap;
    overflow: hidden;
    color: var(--pano-secondary);
    text-overflow: ellipsis;
  }
  .panorama-workspace__identity {
    gap: 3px;
  }
  .panorama-workspace__identity strong {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .panorama-workspace__elevation {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .panorama-workspace__summary { gap: 6px; }

  .panorama-workspace__nav {
    top: 10px;
    right: 10px;
  }

  .panorama-workspace__scrubber { width: min(28vw, 130px); }

  .panorama-workspace__compass {
    top: 10px;
    left: 10px;
  }

  body.panorama-filmstrip-mode .panorama-workspace__tour {
    bottom: 130px;
  }

  body.panorama-filmstrip-mode .panorama-workspace__nav button {
    display: none;
  }

  body.panorama-filmstrip-mode .panorama-workspace__nav {
    padding: 7px 9px;
  }

  .panorama-workspace__filmstrip {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 16;
    display: flex;
    gap: 8px;
    height: 118px;
    box-sizing: border-box;
    padding: 13px 12px 16px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(13, 28, 45, 0.96);
    backdrop-filter: blur(12px);
  }

  .panorama-workspace__filmstrip::-webkit-scrollbar { display: none; }
  .panorama-workspace__filmstrip[hidden] { display: none; }

  .panorama-workspace__thumb {
    position: relative;
    flex: 0 0 78px;
    width: 78px;
    height: 78px;
    padding: 0;
    overflow: hidden;
    scroll-snap-align: center;
    border: 2px solid transparent;
    border-radius: 12px;
    background: var(--pano-surface-high);
    color: var(--pano-secondary);
    cursor: pointer;
  }

  .panorama-workspace__thumb[aria-current="true"] {
    border-color: var(--pano-primary);
    box-shadow: 0 0 0 2px rgba(173, 198, 255, 0.18);
  }

  .panorama-workspace__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .panorama-workspace__thumb span {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  }

  body.panorama-filmstrip-mode .panorama-workspace__viewer > .skylens-powered-by {
    right: calc(10px + var(--skylens-safe-right, 0px));
    bottom: calc(128px + var(--skylens-safe-bottom, 0px));
  }

  .panorama-workspace__viewer > .skylens-powered-by {
    right: calc(10px + var(--skylens-safe-right, 0px));
    /* The phone workspace covers the full viewport, so reserve the real
       bottom navigation height while keeping the badge in the screen corner. */
    bottom: calc(var(--skylens-bottom-nav-height, 60px) +
      var(--skylens-safe-bottom, 0px) + 10px);
  }

  .panorama-workspace__info {
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-height: 268px;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 24px 24px 0 0;
  }

  body.panorama-mini-map-mode .panorama-workspace__info {
    top: calc(68px + var(--skylens-safe-top, 0px));
    right: calc(8px + var(--skylens-safe-right, 0px));
    bottom: auto;
    left: calc(8px + var(--skylens-safe-left, 0px));
    width: auto;
    max-height: min(46dvh, 320px);
    border: 1px solid rgba(173, 198, 255, 0.18);
    border-radius: 18px;
  }

  .panorama-workspace__viewer,
  .panorama-workspace__viewer :is(canvas, .pnlm-container, .pnlm-render-container) {
    overscroll-behavior: contain;
    touch-action: none;
  }

  body.panorama-workspace-open {
    overflow: hidden;
    overscroll-behavior: none;
  }
}

/* Split screen: the workspace takes the right half of the VIEWER AREA, Cesium
   keeps the left. The horizontal split is expressed through the same measured
   custom properties, so it stays inside the chrome like the full-width state.
   panorama-workspace.js calls viewer.resize() after toggling this class. */
body.panorama-split-mode #cesiumContainer {
  width: 50% !important;
}

/* Album panorama mode: keep the sphere immersive and surface the existing
   Cesium viewer as a locator map. This is the same #cesiumContainer — never a
   second map — and media-album recenters it on every selected panorama. */
body.panorama-mini-map-mode #cesiumContainer {
  position: fixed !important;
  top: auto !important;
  right: max(18px, var(--skylens-safe-right, 0px)) !important;
  bottom: calc(116px + var(--skylens-safe-bottom, 0px)) !important;
  left: auto !important;
  width: clamp(260px, 27vw, 380px) !important;
  height: clamp(170px, 25vh, 250px) !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  z-index: 1250 !important;
  overflow: hidden;
  contain: layout paint;
  isolation: isolate;
  transform: translateZ(0);
  border: 2px solid rgba(125, 211, 252, 0.9);
  border-radius: 12px;
  box-shadow: 0 14px 38px rgba(2, 8, 23, 0.55);
}

/* A locator is a north-up 2D surface, not a second general-purpose Viewer.
   Keep the legal attribution visible but remove 3D/search/home controls that
   can change global map state from inside the compact locator. */
body.panorama-mini-map-mode #cesiumContainer .cesium-viewer-toolbar,
body.panorama-mini-map-mode #cesiumContainer #gisViewModeControls,
body.panorama-mini-map-mode #cesiumContainer #viewCubeContainer,
body.panorama-mini-map-mode #cesiumContainer .cesium-viewer-fullscreenContainer {
  display: none !important;
}

.panorama-mini-map__control-dock {
  position: fixed;
  z-index: 1461 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 2px;
  border: 1px solid rgba(125, 211, 252, 0.72);
  border-radius: 8px;
  background: rgba(8, 15, 28, 0.9);
  box-shadow: 0 4px 14px rgba(2, 8, 23, 0.45);
  pointer-events: auto;
}

.panorama-mini-map__control-dock[hidden] { display: none; }

/* The dock is a body child, so an opaque album cannot clip it. Grid owns the
   complete content surface and must never inherit locator controls from a
   panorama kept alive behind it for a fast return. */
body.media-album-open:not(.media-album-map-mode)
  .panorama-mini-map__control-dock {
  display: none !important;
}

.panorama-mini-map__size-controls {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.panorama-mini-map__size-controls[hidden] { display: none; }

.panorama-mini-map__size-controls button {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0;
  background: rgba(30, 41, 59, 0.96);
  color: #f8fafc;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.panorama-mini-map__recenter {
  position: static;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(125, 211, 252, 0.8);
  border-radius: 0 0 6px 6px;
  background: rgba(8, 15, 28, 0.94);
  color: #f8fafc;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(2, 8, 23, 0.45);
}

.panorama-mini-map__recenter[hidden] { display: none; }

.panorama-mini-map__recenter:hover,
.panorama-mini-map__recenter:focus-visible {
  background: rgba(14, 116, 144, 0.96);
  outline: 2px solid #7dd3fc;
  outline-offset: 1px;
}

.panorama-mini-map__size-controls button:hover:not(:disabled),
.panorama-mini-map__size-controls button:focus-visible {
  background: rgba(14, 116, 144, 0.96);
  outline: 2px solid #7dd3fc;
  outline-offset: 1px;
}

.panorama-mini-map__size-controls button:disabled {
  opacity: 0.42;
  cursor: default;
}

body.panorama-mini-map-mode.panorama-mini-map-small #cesiumContainer {
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  border-color: transparent;
  background: transparent !important;
  box-shadow: none;
}

/* Minimized means no map pixels at all. Keep one 48px restore control so the
   user can reopen the locator without returning to the panorama toolbar. */
body.panorama-mini-map-mode.panorama-mini-map-small #cesiumContainer
  > :not(.panorama-mini-map__size-controls):not(.panorama-mini-map__recenter) {
  visibility: hidden !important;
}

body.panorama-mini-map-mode.panorama-mini-map-small
  .panorama-mini-map__control-dock {
  width: 48px;
  height: 48px;
  padding: 1px;
  gap: 0;
  border-color: rgba(125, 211, 252, 0.72);
}

/* When the locator is collapsed, keep only its restore button. The 48px dock
   still reserves a predictable corner slot, but it must not draw a second
   frame around the compact control. */
body.panorama-mini-map-mode.panorama-mini-map-small
  .panorama-mini-map__control-dock.is-collapsed {
  align-items: flex-end;
  justify-content: flex-end;
  box-sizing: border-box;
  padding: 0 3px 3px 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.panorama-mini-map-mode.panorama-mini-map-small
  .panorama-mini-map__control-dock.is-collapsed
  .panorama-mini-map__size-controls button:not([hidden]) {
  border-radius: 6px;
}

body.panorama-mini-map-mode.panorama-mini-map-small
  .panorama-mini-map__recenter {
  display: none !important;
}

body.panorama-mini-map-mode.panorama-mini-map-large #cesiumContainer {
  width: clamp(400px, 38vw, 520px) !important;
  height: clamp(270px, 38vh, 360px) !important;
}

/* In Map + album the catalogue keeps its right-hand workspace. The same
   Viewer-owned Cesium canvas becomes a locator inside the panorama half; it
   never covers the album and no second map is created. */
@media (min-width: 901px) {
  body.media-album-map-mode.panorama-mini-map-mode #cesiumContainer {
    right: calc(var(--media-album-pane-width, 45%) + 18px) !important;
    width: clamp(260px, 27vw, 380px) !important;
  }
  body.media-album-map-mode.panorama-mini-map-mode.panorama-mini-map-small #cesiumContainer {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
  }
  body.media-album-map-mode.panorama-mini-map-mode.panorama-mini-map-large #cesiumContainer {
    width: min(42vw, 520px) !important;
  }
}

@media (max-width: 900px) {
  body.panorama-mini-map-mode #cesiumContainer {
    right: calc(10px + var(--skylens-safe-right, 0px)) !important;
    /* Stack the locator above the bottom-right attribution instead of placing
       both controls in the same slot. */
    bottom: calc(var(--skylens-bottom-nav-height, 60px) +
      var(--skylens-safe-bottom, 0px) + 52px) !important;
    width: 124px !important;
    height: 92px !important;
    /* The phone panorama workspace is z-index 1450. The locator must sit
       above that immersive surface or it has geometry but no visible pixels. */
    z-index: 1460 !important;
    border-radius: 10px;
  }
  body.panorama-filmstrip-mode.panorama-mini-map-mode #cesiumContainer {
    bottom: calc(170px + var(--skylens-safe-bottom, 0px)) !important;
  }
  body.panorama-mini-map-mode.panorama-mini-map-small #cesiumContainer {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
  }
  body.panorama-mini-map-mode.panorama-mini-map-large #cesiumContainer {
    right: calc(8px + var(--skylens-safe-right, 0px)) !important;
    left: calc(8px + var(--skylens-safe-left, 0px)) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: min(62dvh, 520px) !important;
    border-radius: 16px 16px 10px 10px;
  }

  .panorama-mini-map__size-controls {
    gap: 0;
    padding: 0;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }

  .panorama-mini-map__control-dock {
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }

  .panorama-mini-map__size-controls button {
    position: relative;
    width: 28px;
    height: 28px;
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(30, 41, 59, 0.96);
    color: #f8fafc;
    font-size: 16px;
  }

  .panorama-mini-map__size-controls button::before {
    content: none !important;
  }

  .panorama-mini-map__size-controls button:hover:not(:disabled),
  .panorama-mini-map__size-controls button:focus-visible {
    background: rgba(14, 116, 144, 0.96);
  }

  .panorama-mini-map__recenter {
    width: 28px;
    height: 28px;
  }
}

/* On a phone, a 28px rail occupies almost the full height of the 92px locator.
   Keep the same three controls and ordering, but reduce their visible chrome so
   the map remains the dominant surface. */
@media (max-width: 600px) {
  body.panorama-mini-map-mode.panorama-mini-map-small
    .panorama-mini-map__control-dock.is-collapsed {
    padding: 0;
  }

  .panorama-mini-map__size-controls button,
  .panorama-mini-map__recenter {
    width: 22px;
    height: 22px;
  }

  .panorama-mini-map__size-controls button {
    font-size: 13px;
  }

  .panorama-mini-map__recenter {
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(2, 8, 23, 0.38);
  }
}

body.panorama-native-fullscreen .skylens-powered-by {
  bottom: calc(var(--skylens-safe-bottom, 0px) + 10px);
}

body.panorama-native-fullscreen.panorama-mini-map-mode #cesiumContainer {
  bottom: calc(var(--skylens-safe-bottom, 0px) + 52px) !important;
}

body.panorama-native-fullscreen.panorama-filmstrip-mode.panorama-mini-map-mode
  #cesiumContainer {
  bottom: calc(var(--skylens-safe-bottom, 0px) + 170px) !important;
}

@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
  body.panorama-mini-map-mode:not(.panorama-mini-map-large):not(.panorama-mini-map-small)
    #cesiumContainer {
    width: 124px !important;
    height: 92px !important;
  }

  .panorama-workspace__filmstrip {
    height: 92px;
    padding-block: 7px;
  }

  .panorama-workspace__thumb {
    flex-basis: 72px;
    width: 72px;
    height: 72px;
  }

  body.panorama-filmstrip-mode.panorama-mini-map-mode #cesiumContainer,
  body.panorama-native-fullscreen.panorama-filmstrip-mode.panorama-mini-map-mode
    #cesiumContainer {
    bottom: calc(102px + var(--skylens-safe-bottom, 0px)) !important;
  }
}

.skylens-panorama-hotspot { cursor: pointer; }