/* 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; }

/* 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;
}

/* 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;
}

.panorama-workspace__viewer > .skylens-powered-by {
  position: absolute;
  right: clamp(8px, 2vw, 16px);
  bottom: calc(var(--skylens-bottom-nav-height, 60px) +
    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; }

#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;
  }

  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(146px + var(--skylens-safe-right, 0px));
    bottom: calc(128px + var(--skylens-safe-bottom, 0px));
  }

  .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;
  align-items: center;
  gap: 5px;
  padding: 4px;
  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; }

.panorama-mini-map__size-controls {
  display: flex;
  gap: 5px;
}

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

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

.panorama-mini-map__recenter {
  position: static;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(125, 211, 252, 0.8);
  border-radius: 8px;
  background: rgba(8, 15, 28, 0.94);
  color: #f8fafc;
  font-size: 22px;
  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);
}

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;
    bottom: calc(12px + var(--skylens-safe-bottom, 0px)) !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(130px + 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 {
    gap: 0;
    padding: 0;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }

  .panorama-mini-map__size-controls button {
    position: relative;
    width: 44px;
    height: 44px;
    border-color: transparent;
    background: transparent;
    color: transparent;
    font-size: 0;
  }

  .panorama-mini-map__size-controls button::before {
    position: absolute;
    inset: 7px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 6px;
    background: rgba(30, 41, 59, 0.96);
    color: #f8fafc;
    font-size: 16px;
    line-height: 1;
  }

  .panorama-mini-map__size-controls button:first-child::before {
    content: "−";
  }

  .panorama-mini-map__size-controls button:last-child::before {
    content: "+";
  }

  .panorama-mini-map__size-controls button:hover:not(:disabled),
  .panorama-mini-map__size-controls button:focus-visible {
    background: transparent;
  }

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

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

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) + 12px) !important;
}

body.panorama-native-fullscreen.panorama-filmstrip-mode.panorama-mini-map-mode
  #cesiumContainer {
  bottom: calc(var(--skylens-safe-bottom, 0px) + 130px) !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; }