/* Keep camera space independent of inspection-card height. */
.showroom-stage { position: absolute; inset: 0; overflow: hidden; }
.showroom.is-loading .sr-top,
.showroom.is-loading .sr-bar { display: flex; visibility: hidden; }

@media (max-width: 979px) {
  .showroom.webgl-ready .showroom-frame {
    aspect-ratio: auto;
    min-height: 0;
  }
  .showroom.webgl-ready .showroom-stage {
    position: relative;
    inset: auto;
    height: 560px;
  }
  .showroom.webgl-ready .sr-panel {
    position: relative;
    inset: auto;
    width: auto;
    max-height: none;
    margin: 0 18px 18px;
    display: none;
    transform: none;
    overflow: visible;
  }
  .showroom.webgl-ready .sr-panel.open { display: block; }
}

@media (max-width: 720px) {
  .showroom.webgl-ready .showroom-stage { height: 590px; }
  .showroom.webgl-ready .sr-panel { margin: 0 14px 14px; }
}

/* =================================================================
   Inspection callout: anchored beside the tapped point at every width
   (positioned by placePanel() in home3d.js). Replaces the old card that
   sat below the stage on phones and in the top-right corner on desktop.
   ================================================================= */
.showroom.webgl-ready .sr-panel {
  position: absolute; inset: auto; right: auto; bottom: auto; left: 0; top: 0;
  width: min(300px, calc(100% - 24px)); max-height: none; margin: 0;
  display: block; overflow: visible; padding: 18px 18px 16px; z-index: 6;
  transform: scale(.96); transform-origin: center;
}
.showroom.webgl-ready .sr-panel.open { transform: none; }
.showroom.webgl-ready .sr-panel h3 { font-size: 1.08rem; margin-bottom: 6px; }
.showroom.webgl-ready .sr-panel p { font-size: .84rem; margin-bottom: 10px; }
.showroom.webgl-ready .sr-panel li { font-size: .76rem; }
.showroom.webgl-ready .sr-panel .eyebrow { margin-bottom: 6px; }
.showroom.webgl-ready .sr-panel-content {
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  scrollbar-gutter: stable; padding-top: 6px; padding-right: 4px;
}
.showroom.webgl-ready .sr-panel .sr-close { z-index: 1; }
/* Camera movement is already eased; keep the selected point and card aligned. */
.showroom.webgl-ready .hotspot[aria-expanded="true"] { transition: opacity .35s; }
/* pointer aimed at the dot */
.showroom.webgl-ready .sr-panel::before {
  content: ""; position: absolute; width: 12px; height: 12px; transform: rotate(45deg);
  background: rgba(16,20,24,.97); border: 1px solid var(--line-2);
}
.sr-panel[data-side="right"]::before { left: -7px; top: calc(var(--tail, 24px) - 6px); border-top: 0; border-right: 0; }
.sr-panel[data-side="left"]::before  { right: -7px; top: calc(var(--tail, 24px) - 6px); border-bottom: 0; border-left: 0; }
.sr-panel[data-side="below"]::before { top: -7px; left: calc(var(--tail, 24px) - 6px); border-right: 0; border-bottom: 0; }
.sr-panel[data-side="above"]::before { bottom: -7px; left: calc(var(--tail, 24px) - 6px); border-left: 0; border-top: 0; }
.sr-panel[data-side="none"]::before { display: none; }
@media (max-width: 559px) {
  .showroom.webgl-ready .sr-panel { width: min(264px, calc(100% - 24px)); padding: 15px 15px 13px; }
  .showroom.webgl-ready .sr-panel h3 { font-size: 1rem; }
  .showroom.webgl-ready .sr-panel p { font-size: .8rem; }
}