/* nagoon-inventory panorama viewer — full-screen overlay + detection hotspots.
   Loaded after app.css and pannellum.css; uses the app's CSS tokens. */

.pano-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  flex-direction: column;
}

.pano-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1rem;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}
.pano-title { font-weight: 600; color: var(--fg); }
.pano-legend { flex: 1; display: flex; gap: 1rem; align-items: center; color: var(--fg-2); font-size: 0.85rem; }
.pano-legend-item { display: inline-flex; align-items: center; gap: 0.4rem; }

.pano-close {
  margin-left: auto;
  width: 32px;
  height: 32px;
  font-size: 1.3rem;
  line-height: 1;
  background: var(--bg-3);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}
.pano-close.pano-return { width: auto; flex-shrink: 0; padding: 0 12px; font-size: 13px; white-space: nowrap; }
.pano-close:hover { background: var(--bad); color: #fff; }

.pano-canvas { flex: 1; position: relative; background: #0a0a0a; }
/* Stacked render layers — a scene change builds in the hidden one and crossfades
   in (see viewer.js), so travel + the preview→full upgrade fade instead of flicker. */
.pano-layer { position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s ease; }
.pano-msg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-2);
  font-size: 0.9rem;
}

/* legend swatch + detection marker share the orange accent */
.hs-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 136, 0, 0.7);
  border: 1px solid #ff8800;
}
.hs-dot.pw { background: rgba(80, 160, 255, 0.7); border-color: #4a9eff; }

/* Pannellum custom hotspots for detections */
.hotspot-object {
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border-radius: 50%;
  background: rgba(255, 136, 0, 0.6);
  border: 2px solid #ff8800;
  cursor: pointer;
}
.hotspot-object:hover {
  background: rgba(255, 136, 0, 0.95);
  box-shadow: 0 0 12px rgba(255, 136, 0, 0.8);
}
.hotspot-object-tip {
  display: none;
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 12px;
  pointer-events: none;
}
.hotspot-object:hover .hotspot-object-tip { display: block; }
.hotspot-object-tip .hs-label { font-weight: 600; }
.hotspot-object-tip .hs-meta { display: block; color: #ccc; font-size: 11px; }

/* "seen elsewhere": visible from this sweep but first detected in another.
   Provenance display is a SETTING (default off — an object in the room is an
   object in the room, wherever its anchor sweep stood; all markers render the
   same). With the setting ON the canvas gets .show-provenance and these render
   muted + dashed; hover restores full presence (still clickable to inspect). */
.show-provenance .hotspot-elsewhere {
  width: 12px;
  height: 12px;
  background: rgba(160, 170, 185, 0.28);
  border: 1.5px dashed rgba(200, 210, 225, 0.7);
  opacity: 0.7;
}
.show-provenance .hotspot-elsewhere:hover {
  background: rgba(255, 136, 0, 0.85);
  border-style: solid;
  border-color: #ff8800;
  opacity: 1;
  box-shadow: 0 0 10px rgba(255, 136, 0, 0.7);
}

/* Pannellum custom hotspots for pathway openings (blue, distinct from detections) */
.hotspot-pathway {
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border-radius: 50%;
  background: rgba(80, 160, 255, 0.55);
  border: 2px solid #4a9eff;
  cursor: pointer;
}
.hotspot-pathway:hover {
  background: rgba(80, 160, 255, 0.95);
  box-shadow: 0 0 12px rgba(74, 158, 255, 0.8);
}
.hotspot-pathway-tip {
  display: none;
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 12px;
  pointer-events: none;
}
.hotspot-pathway:hover .hotspot-pathway-tip { display: block; }
.hotspot-pathway-tip .hs-label { font-weight: 600; }
.hotspot-pathway-tip .hs-meta { display: block; color: #ccc; font-size: 11px; }
/* Window-like openings (low-clearance gate): amber square, not a walk-through dot */
.hotspot-window {
  border-radius: 3px;
  background: rgba(245, 158, 11, 0.45);
  border-color: #f59e0b;
}
.hotspot-window:hover {
  background: rgba(245, 158, 11, 0.9);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.8);
}

/* propagation proposals (amber, hollow + dashed = "unconfirmed", awaiting review) */
.hotspot-proposal {
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border-radius: 50%;
  background: rgba(240, 168, 50, 0.18);
  border: 2px dashed #f0a832;
  cursor: pointer;
}
.hotspot-proposal:hover {
  background: rgba(240, 168, 50, 0.85);
  box-shadow: 0 0 12px rgba(240, 168, 50, 0.8);
}
.hotspot-proposal-tip {
  display: none;
  position: absolute;
  bottom: 150%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 240px;
  background: rgba(0, 0, 0, 0.92);
  color: #fff;
  padding: 6px 9px;
  border-radius: 5px;
  font-size: 12px;
  text-align: left;
  pointer-events: none;
}
.hotspot-proposal:hover .hotspot-proposal-tip { display: block; }
.hotspot-proposal-tip .hs-label { font-weight: 600; display: block; }
.hotspot-proposal-tip .hs-meta { display: block; color: #f6d6a3; font-size: 11px; margin-top: 2px; }
.hotspot-proposal-tip .hs-hint { display: block; color: #c79a5a; font-size: 10px; font-style: italic; margin-top: 3px; }

/* ---- semantic-search results grid (reuses .pano-overlay / .pano-bar) ---- */

.similar-body { flex: 1; overflow: auto; padding: 1rem 1.25rem; }
.similar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
}
.similar-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.similar-thumb {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
  background: #0a0a0a;
}
.similar-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
}

/* ---- minimap: in-viewer floor plan + scan positions (window.Minimap) ---- */
.mm-panel {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 240px;
  max-width: 38vw;
  z-index: 20;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-2);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
}
/* inline variant — embedded in a card on the project page, not the viewer overlay */
.mm-panel.mm-inline {
  position: relative; right: auto; bottom: auto;
  width: 100%; max-width: 100%; box-shadow: none;
}
/* floor selector overlaid on the minimap */
.mm-floor {
  position: absolute; top: 6px; left: 6px; z-index: 25;
  background: rgba(20, 22, 24, 0.88); color: #e8e8ea;
  border: 1px solid var(--border); border-radius: 6px;
  font: 11px system-ui, sans-serif; padding: 2px 6px; cursor: pointer;
}
.mm-img { display: block; width: 100%; height: auto; }
.mm-heat { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.78; }
.mm-cone { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mm-cone path { stroke: rgba(255, 136, 0, 0.45); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mm-dots { position: absolute; inset: 0; }
.mm-dot {
  position: absolute;
  width: 11px;
  height: 11px;
  margin: -6px 0 0 -6px;           /* centre on the mapped point */
  padding: 0;
  border-radius: 50%;
  background: rgba(120, 200, 255, 0.55);
  border: 1px solid #cfe8ff;
  cursor: pointer;
  transition: transform 0.08s ease;
}
.mm-dot:hover { transform: scale(1.4); background: rgba(120, 200, 255, 0.95); }
.mm-dot.current {
  width: 15px;
  height: 15px;
  margin: -8px 0 0 -8px;
  background: #ff8800;
  border: 2px solid #fff;
  box-shadow: 0 0 8px rgba(255, 136, 0, 0.9);
  z-index: 2;
}

/* in-panorama "walk to next scan" floor markers — a ring with an up-chevron */
.hotspot-nav {
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  box-sizing: border-box;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5), inset 0 0 12px rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: transform 0.1s ease, background 0.1s ease;
}
.hotspot-nav::before {                 /* up-chevron = "walk this way" */
  content: '';
  position: absolute;
  left: 50%;
  top: 56%;
  width: 11px;
  height: 11px;
  border-top: 3px solid #fff;
  border-left: 3px solid #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}
.hotspot-nav:hover { transform: scale(1.2); background: rgba(255, 255, 255, 0.42); }
.hotspot-nav-tip {
  display: none;
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 12px;
  pointer-events: none;
}
.hotspot-nav:hover .hotspot-nav-tip { display: block; }

/* ---- registered photographs: a marker on what the frame was aimed at ---- */
.hotspot-photo {
  width: 30px;
  height: 22px;
  margin: -11px 0 0 -15px;
  box-sizing: border-box;
  border-radius: 4px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: rgba(230, 200, 60, 0.35);
  cursor: pointer;
  position: relative;
}
.hotspot-photo::before {                /* lens */
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
}
.hotspot-photo:hover { transform: scale(1.15); background: rgba(230, 200, 60, 0.6); }
.hotspot-photo:hover .hotspot-nav-tip { display: block; }
.photo-lightbox { display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.92); cursor: zoom-out; }
.photo-lightbox-img { max-width: 96vw; max-height: 90vh; object-fit: contain; box-shadow: 0 0 40px rgba(0, 0, 0, 0.8); }
.photo-lightbox-cap { color: #ddd; font-size: 0.85rem; margin-bottom: 0.5rem; }

/* ---- object marking: human-placed Detections (window.Markers) ---- */

/* "＋ Mark" toggle in the bar; green = the human-marker accent throughout */
.pano-mark {
  height: 32px;
  padding: 0 12px;
  font-size: 0.85rem;
  line-height: 30px;
  background: var(--bg-3);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.pano-mark:hover { border-color: #2ecc71; color: #2ecc71; }
.pano-mark.active { background: #2ecc71; color: #08130c; border-color: #2ecc71; font-weight: 600; }

/* category filter — a top-bar button + a floating panel of per-label toggle chips */
.pano-filter {
  height: 32px;
  padding: 0 12px;
  font-size: 0.85rem;
  line-height: 30px;
  background: var(--bg-3);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.pano-filter:hover, .pano-filter.filtering { border-color: #ff8800; color: #ff8800; }
.pano-filter-panel {
  display: none;
  position: absolute;
  top: 52px;
  right: 1rem;
  width: 320px;
  max-height: 60vh;
  overflow-y: auto;
  z-index: 1200;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.6rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.pano-filter-panel.open { display: block; }
.pfp-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; font-size: 0.8rem; color: var(--fg-2); }
.pfp-head span { flex: 1; }
.pfp-act {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  background: var(--bg-3);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}
.pfp-act:hover { border-color: #ff8800; color: #ff8800; }
.pfp-list { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.pfp-chip {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  background: var(--bg-3);
  color: var(--fg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  opacity: 0.5;
  text-decoration: line-through;
}
.pfp-chip.on { color: #08130c; background: #ff8800; border-color: #ff8800; opacity: 1; text-decoration: none; }

.pano-canvas.mark-mode { cursor: crosshair; }
.pano-canvas.mark-mode::after {
  content: 'Click an object to mark it · Esc to cancel';
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(46, 204, 113, 0.92);
  color: #08130c;
  padding: 5px 12px;
  border-radius: 14px;
  font-size: 0.8rem;
  font-weight: 600;
  pointer-events: none;
  z-index: 30;
}
/* analyze in flight: keep the crosshair, swap the banner to a working state.
   The canvas keeps `.mark-mode` during analyze, so this needs to out-specify
   the banner rule above. */
.pano-canvas.analyzing { cursor: progress; }
.pano-canvas.analyzing::after,
.pano-canvas.analyzing.mark-mode::after {
  content: 'Analyzing object…';
  background: rgba(240, 168, 50, 0.94);
  color: #1a1205;
}

.hs-dot.marker { background: rgba(46, 204, 113, 0.7); border-color: #2ecc71; }

/* hover mask highlight — the SAM outline projected per-frame onto a
   pointer-transparent canvas above the panorama */
.pano-mask-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 8;
}
.hs-dot.proposal { background: rgba(240, 168, 50, 0.35); border-color: #f0a832; border-style: dashed; }

/* green pin with a white centre dot — distinct from detection/pathway circles */
.hotspot-marker {
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border-radius: 50%;
  background: rgba(46, 204, 113, 0.6);
  border: 2px solid #2ecc71;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
.hotspot-marker::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: #fff;
}
.hotspot-marker:hover { background: rgba(46, 204, 113, 0.95); box-shadow: 0 0 12px rgba(46, 204, 113, 0.8); }
.hotspot-marker-tip {
  display: none;
  position: absolute;
  bottom: 150%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 240px;
  background: rgba(0, 0, 0, 0.92);
  color: #fff;
  padding: 6px 9px;
  border-radius: 5px;
  font-size: 12px;
  text-align: left;
  pointer-events: none;
}
.hotspot-marker:hover .hotspot-marker-tip { display: block; }
.hotspot-marker-tip .hs-label { font-weight: 600; display: block; }
.hotspot-marker-tip .hs-note { display: block; color: #d6f5e3; font-size: 11px; margin-top: 2px; white-space: pre-wrap; }
.hotspot-marker-tip .hs-hint { display: block; color: #8ab39a; font-size: 10px; font-style: italic; margin-top: 3px; }

/* create form — a small panel near the top of the overlay */
.marker-form {
  position: absolute;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  width: 320px;
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.9rem 1rem;
  background: var(--bg-2);
  border: 1px solid #2ecc71;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}
.marker-form-title { font-weight: 600; color: var(--fg); display: flex; align-items: center; gap: 0.5rem; }
/* "AI suggested" mini-badge next to the title of the enriched (smart) form. */
.marker-ai-badge {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 10px;
  background: rgba(240, 168, 50, 0.18);
  color: #f0a832;
  border: 1px solid rgba(240, 168, 50, 0.55);
}

/* enriched form: thumbnail left of the stacked fields */
.marker-body { display: flex; gap: 0.6rem; align-items: flex-start; }
.marker-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.marker-thumb {
  width: 96px;
  height: 96px;
  flex: none;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #0a0a0a;
}

.marker-label, .marker-note, .marker-label-select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.45rem 0.55rem;
  background: var(--bg-3);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  font: inherit;
}
.marker-note { resize: vertical; min-height: 3.2em; }
.marker-label:focus, .marker-note:focus, .marker-label-select:focus { outline: none; border-color: #2ecc71; }
/* reuse-grade controls: the a–d select + onsite checkbox (create/edit form)
   and the endorse/edit chip (review form) — grading.md */
.marker-grade {
  width: 100%;
  box-sizing: border-box;
  padding: 0.45rem 0.55rem;
  background: var(--bg-3);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  font: inherit;
}
.marker-onsite-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--fg-2);
  font-size: 0.82rem;
  cursor: pointer;
}
.marker-grade-chip { display: flex; align-items: center; gap: 0.35rem; }
.marker-grade-label { color: var(--fg-2); font-size: 0.82rem; }
.marker-grade-btn {
  min-width: 2em;
  padding: 0.25rem 0.45rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--fg);
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  text-transform: uppercase;
}
.marker-grade-btn.selected { background: #2ecc71; color: #06230f; border-color: #2ecc71; font-weight: 600; }
/* C9 review form: top-k label chips + "annat…" escape hatch, and the
   blind-mode "Visa AI-förslag" reveal gate */
.marker-choices { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.marker-choice, .marker-reveal {
  padding: 0.35rem 0.5rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--fg);
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
}
.marker-choice.selected { background: #2ecc71; color: #06230f; border-color: #2ecc71; font-weight: 600; }
.marker-reveal { align-self: flex-start; }
/* C7 conformal hazmat hint — a NON-preselecting line under the hazmat select */
/* similarity line in the review form */
.marker-similarity { color: var(--fg-2); font-size: 0.82rem; }
.marker-error { color: var(--bad); font-size: 0.8rem; min-height: 1em; }

/* "already detected here" dedup prompt — hidden until a nearby object is found. */
.marker-dedup { display: none; }
.marker-dedup.active {
  display: block;
  background: rgba(255, 136, 0, 0.12);
  border: 1px solid rgba(255, 136, 0, 0.5);
  border-radius: 4px;
  padding: 0.5rem 0.6rem;
}
.dedup-warn { color: #ffb060; font-size: 0.82rem; font-weight: 600; margin-bottom: 0.4rem; }
.dedup-choices { display: flex; gap: 0.4rem; }
.dedup-choice {
  flex: 1;
  padding: 0.35rem 0.5rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--fg);
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
}
.dedup-choice.selected { background: #ff8800; color: #1a0e00; border-color: #ff8800; font-weight: 600; }
.marker-form-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
.marker-save, .marker-cancel, .marker-delete, .marker-confirm, .marker-reject {
  padding: 0.4rem 0.9rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  cursor: pointer;
  font: inherit;
}
.marker-save, .marker-confirm { background: #2ecc71; color: #08130c; border-color: #2ecc71; font-weight: 600; }
.marker-save:disabled, .marker-confirm:disabled { opacity: 0.6; cursor: default; }
.marker-cancel { background: var(--bg-3); color: var(--fg); }
.marker-cancel:hover { background: var(--bad); color: #fff; }
/* Delete + Reject sit apart on the left (margin-right:auto) — destructive. */
.marker-delete, .marker-reject { margin-right: auto; background: transparent; color: var(--bad); border-color: var(--bad); }
.marker-delete:hover, .marker-reject:hover { background: var(--bad); color: #fff; }
.marker-delete:disabled, .marker-reject:disabled { opacity: 0.6; cursor: default; }

/* ---- workflow v2: "?" identify, target tray, armed marking, toast ---- */

.pano-q {
  height: 32px;
  width: 36px;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 30px;
  background: var(--bg-3);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}
.pano-q:hover { border-color: #9b59b6; color: #9b59b6; }
.pano-q.active { background: #9b59b6; color: #fff; border-color: #9b59b6; }

.pano-canvas.q-mode { cursor: help; }
.pano-canvas.q-mode::after {
  content: 'Click an object to identify it (runs the VLM — a few seconds) · Esc to cancel';
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  background: rgba(155, 89, 182, 0.92);
  color: #fff;
  border-radius: 4px;
  font-size: 0.8rem;
  pointer-events: none;
  z-index: 6;
}

.pano-targets {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 6px 14px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}
.target-chip {
  height: 26px;
  padding: 0 10px;
  font-size: 0.8rem;
  line-height: 24px;
  background: var(--bg-3);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.target-chip.scanned { border-style: dashed; }     /* offered by the room scan */
.target-chip:hover { border-color: #2ecc71; color: #2ecc71; }
.target-chip.armed {
  background: #2ecc71;
  color: #08130c;
  border-color: #2ecc71;
  font-weight: 600;
}
.chip-badge {
  font-size: 0.7rem;
  padding: 0 6px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.25);
}
.target-chip.armed .chip-badge { background: rgba(0, 0, 0, 0.18); }
.chip-action {
  height: 26px;
  padding: 0 10px;
  font-size: 0.78rem;
  background: var(--bg-3);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}
.chip-action:hover:not(:disabled) { border-color: #f0a830; color: #f0a830; }
.chip-action:disabled { opacity: 0.55; cursor: default; }
.chip-action.done:hover { border-color: var(--fg); color: var(--fg); }
.target-more {
  height: 26px;
  font-size: 0.78rem;
  background: var(--bg-3);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
}
/* scoped + flex-basis pinned: the app stylesheet's global input rule
   otherwise stretches this to the full row */
.pano-targets .target-add {
  height: 24px;
  width: 110px;
  flex: 0 0 110px;
  padding: 0 8px;
  font-size: 0.78rem;
  background: var(--bg-3);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
}

/* armed marking: same crosshair as mark-mode, banner names the target */
.pano-canvas.armed-mode { cursor: crosshair; }

.pano-toast {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 16px;
  background: rgba(46, 204, 113, 0.94);
  color: #08130c;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  z-index: 8;
  pointer-events: none;
}
.pano-toast.err { background: rgba(231, 76, 60, 0.94); color: #fff; }

/* Scan-coverage overlay (minimap) */
.mm-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; image-rendering: pixelated; }
.mm-cov { position: absolute; right: 6px; bottom: 6px; z-index: 4; font-size: 11px; padding: 2px 8px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.35); background: rgba(0,0,0,0.45); color: #eee; cursor: pointer; }
.mm-cov.on { background: rgba(245,158,11,0.85); color: #111; border-color: transparent; }
.mm-cov.missing { background: rgba(120,120,120,0.6); color: #ddd; border-style: dashed; }

/* --- census mode ----------------------------------------------------------
   The blind capture surface: the flag keeps the surveyor (and anyone glancing
   at their screen) aware that this session must show no detector output. */
.census-flag { color: #ffd166; font-weight: 600; }
.census-mode .pano-bar { box-shadow: inset 0 -2px 0 #ffd166; }

/* up/down between the two captures of one spot (sweeps.counterpart_sweep_id).
   Sits next to the title because it is a move, not a filter — and it is absent
   far more often than present, so it must not leave a gap when hidden. */
.pano-pass {
  height: 32px;
  padding: 0 12px;
  font-size: 0.85rem;
  line-height: 30px;
  background: var(--bg-3);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.pano-pass:hover { border-color: #7fd1c1; color: #7fd1c1; }
.pano-pass[hidden] { display: none; }