/* 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 {
  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: 48px 1fr;
  background: rgba(8, 15, 28, 0.97);
  color: #e2e8f0;
  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;
}

.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 {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
  padding: 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  min-width: 0;
}

.panorama-workspace__identity {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
}

.panorama-workspace__identity strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Placement / orientation / measurement state is never hidden — an
   approximate panorama must read as approximate. */
.panorama-workspace__status {
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panorama-workspace__nav,
.panorama-workspace__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

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

.panorama-workspace__toolbar button {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  color: #e2e8f0;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 6px 10px;
}

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

.panorama-workspace__toolbar button[aria-pressed="true"] {
  background: rgba(56, 189, 248, 0.28);
  border-color: rgba(56, 189, 248, 0.55);
}

/* 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 {
  border-color: rgba(251, 146, 60, 0.55);
  color: #fdba74;
}
.panorama-workspace__toolbar button.is-approximate[aria-pressed="true"] {
  background: rgba(251, 146, 60, 0.28);
  border-color: rgba(251, 146, 60, 0.7);
  color: #fed7aa;
}

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

@media (max-width: 900px) {
  .panorama-workspace {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1450;
    grid-template-rows: auto 1fr;
    padding: var(--skylens-safe-top) var(--skylens-safe-right)
      var(--skylens-safe-bottom) var(--skylens-safe-left);
  }
  .panorama-workspace__toolbar {
    min-height: 54px;
    gap: 8px;
    padding: 6px 8px;
  }
  .panorama-workspace__status {
    display: none;
  }
  .panorama-workspace__actions button[data-action="sync"],
  .panorama-workspace__actions button[data-action="split"] {
    display: none;
  }
  .panorama-workspace__toolbar button {
    min-width: 44px;
    min-height: 44px;
    padding: 7px 9px;
  }

  .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(78px + var(--skylens-safe-bottom, 0px)) !important;
  left: auto !important;
  width: clamp(260px, 27vw, 380px) !important;
  height: clamp(170px, 25vh, 250px) !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);
}

.panorama-mini-map__size-controls {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 10000 !important;
  display: flex;
  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__size-controls[hidden] { display: none; }

.panorama-mini-map__size-controls button {
  width: 32px;
  height: 30px;
  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__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: 82px !important;
  min-width: 82px !important;
  max-width: 82px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  border-color: transparent;
  background: transparent !important;
  box-shadow: none;
}

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

body.panorama-mini-map-mode.panorama-mini-map-small
  .panorama-mini-map__size-controls {
  inset: 0;
  border-color: rgba(125, 211, 252, 0.72);
}

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(45% + 18px) !important;
    width: clamp(260px, 27vw, 380px) !important;
  }
  body.media-album-map-mode.panorama-mini-map-mode.panorama-mini-map-small #cesiumContainer {
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !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(74px + var(--skylens-safe-bottom, 0px)) !important;
    width: min(46vw, 220px) !important;
    height: min(28vh, 160px) !important;
    border-radius: 10px;
  }
  body.panorama-mini-map-mode.panorama-mini-map-small #cesiumContainer {
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }
  body.panorama-mini-map-mode.panorama-mini-map-large #cesiumContainer {
    width: min(68vw, 320px) !important;
    height: min(40vh, 250px) !important;
  }
}

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