/* Spatial scene graph: virtual-room layer for panels and Sphere. */
.spatial-stage { perspective:1400px; transform-style:preserve-3d; transform:none; transform-origin:50% 50% 0; }
.spatial-scene.scene-graph-ready .spatial-camera { z-index:0; }
.spatial-panel { left:50%!important; top:50%!important; width:var(--panel-width,min(650px,calc(100vw - 34px)))!important; max-width:calc(100vw - 20px); transform:translate3d(calc(-50% + var(--scene-x,0px) + var(--anchor-pan-x,0px)),calc(-50% + var(--scene-y,0px) + var(--anchor-pan-y,0px)),var(--scene-z,0px)) scale(var(--scene-scale,1)); transform-origin:50% 0; transition:transform .34s cubic-bezier(.2,.8,.2,1),box-shadow .24s,opacity .24s; will-change:transform; }
.spatial-panel.is-focused { border-color:rgba(159,239,250,.42); }
.spatial-panel.is-dragging { transition:none; cursor:grabbing; }
.spatial-panel.is-minimized .surface-host { display:none!important; }
.spatial-panel.is-minimized { width:min(300px,var(--panel-width,calc(100vw - 34px)))!important; min-height:58px; }
.spatial-panel.is-anchored { --anchor-pan-x:0px; --anchor-pan-y:0px; }
.spatial-panel.is-preview { box-shadow:0 22px 70px rgba(5,20,31,.3),0 0 0 1px rgba(135,231,247,.08),inset 0 1px rgba(255,255,255,.2); }
.spatial-panel.is-world-offscreen,.spatial-object.is-world-offscreen { opacity:0; pointer-events:none; }
.spatial-panel.is-move-mode { outline:1px solid rgba(155,239,197,.7); outline-offset:4px; cursor:move; }
.scene-resize-handle { position:absolute; right:7px; bottom:7px; z-index:8; width:17px; height:17px; border-right:2px solid rgba(171,239,249,.68); border-bottom:2px solid rgba(171,239,249,.68); border-radius:0 0 7px 0; cursor:nwse-resize; opacity:.72; }
.spatial-scene-control { width:36px!important; height:36px!important; padding:8px!important; font-size:14px!important; }
.spatial-scene-control.is-place-control { width:auto!important; min-width:92px; gap:6px; padding:8px 10px!important; color:#071e2d!important; border-color:rgba(155,239,197,.72)!important; background:#bff8dc!important; font:10px 'DM Mono',monospace!important; }
.spatial-scene-control.is-place-control svg { width:16px; height:16px; }
.spatial-scene-control svg,.spatial-sphere-control svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.spatial-scene-control.is-active,.spatial-sphere-control.is-active { color:#071e2d!important; border-color:rgba(155,239,197,.8)!important; background:linear-gradient(135deg,#bff8dc,#86e9c2)!important; box-shadow:0 0 18px rgba(132,236,196,.2); }
.spatial-scene-control[data-scene-action="place-panel"],.spatial-sphere-control[data-scene-action="place-sphere"] { color:#071e2d; }
.spatial-object-controls { position:absolute; top:16px; right:8px; z-index:12; display:flex; gap:7px; opacity:0; transform:translateY(-4px); transition:opacity .2s,transform .2s; }
.spatial-object:hover .spatial-object-controls,.spatial-object:focus-within .spatial-object-controls,.spatial-object.is-move-mode .spatial-object-controls { opacity:1; transform:none; }
.spatial-sphere-control { display:flex; align-items:center; justify-content:center; gap:6px; width:40px; height:40px; padding:10px; border:1px solid rgba(225,247,252,.24); border-radius:12px; color:rgba(235,250,253,.86); background:rgba(5,24,36,.42); cursor:pointer; backdrop-filter:blur(10px); touch-action:manipulation; }
.spatial-sphere-control[data-scene-action="place-sphere"] { width:auto; min-width:96px; color:#071e2d; border-color:rgba(155,239,197,.72); background:#bff8dc; font:10px 'DM Mono',monospace; }
.spatial-sphere-control:hover { color:#071e2d; border-color:rgba(155,239,197,.68); background:#bff8dc; }
.spatial-placement-hint { position:absolute; z-index:70; top:calc(50% + 155px); left:50%; display:flex; align-items:center; gap:10px; width:min(390px,calc(100vw - 32px)); padding:10px 12px; transform:translateX(-50%); border:1px solid rgba(224,246,251,.22); border-radius:15px; color:rgba(235,251,255,.86); background:rgba(7,25,37,.48); box-shadow:0 14px 36px rgba(3,17,27,.24),inset 0 1px rgba(255,255,255,.12); backdrop-filter:blur(16px); transition:opacity .25s,transform .25s; pointer-events:auto; }
.spatial-placement-hint.is-hidden { opacity:0; transform:translate(-50%,8px); pointer-events:none; }
.spatial-placement-hint > div { display:grid; gap:3px; flex:1; min-width:0; }
.spatial-placement-hint b { color:#bff8dc; font:10px 'DM Mono',monospace; letter-spacing:.08em; }
.spatial-placement-hint small { color:rgba(225,244,248,.68); font:10px/1.35 Inter,system-ui,sans-serif; }
.placement-state-dot { width:8px; height:8px; flex:none; border-radius:50%; background:#bff8dc; box-shadow:0 0 15px #86e9c2; }
.spatial-placement-hint button { flex:none; min-height:36px; padding:8px 11px; border:1px solid rgba(155,239,197,.52); border-radius:10px; color:#071e2d; background:#bff8dc; font:10px 'DM Mono',monospace; cursor:pointer; touch-action:manipulation; }
.spatial-scene.world-tracking-active .spatial-placement-hint { border-color:rgba(155,239,197,.62); }
.spatial-scene[data-world-tracking="fallback"] .spatial-placement-hint small::after { content:" Orientation-only fallback."; color:rgba(255,217,168,.76); }
.spatial-motion-toggle { position:absolute; z-index:80; right:15px; bottom:17px; min-height:30px; padding:6px 9px; border:1px solid rgba(228,249,252,.24); border-radius:10px; color:rgba(241,252,254,.78); background:rgba(6,24,35,.35); box-shadow:0 10px 25px rgba(2,17,27,.24),inset 0 1px rgba(255,255,255,.12); cursor:pointer; font:8px 'DM Mono',monospace; backdrop-filter:blur(14px); }
.spatial-motion-toggle.is-on { color:#071e2d; border-color:rgba(155,239,197,.68); background:linear-gradient(135deg,#bff8dc,#86e9c2); }
.spatial-object { left:50%!important; top:50%!important; transform:translate3d(calc(-50% + var(--scene-x,0px) + var(--anchor-pan-x,0px)),calc(-50% + var(--scene-y,0px) + var(--anchor-pan-y,0px)),var(--scene-z,0px)) scale(var(--scene-scale,1)); transform-origin:50% 50%; transition:transform .34s cubic-bezier(.2,.8,.2,1),opacity .24s; will-change:transform; }
.spatial-object.is-dragging { transition:none; cursor:grabbing; }
.spatial-sphere-anchor { position:absolute; right:13px; top:23px; z-index:10; display:grid; place-items:center; width:28px; height:28px; border:1px solid rgba(225,247,252,.24); border-radius:10px; color:rgba(235,250,253,.82); background:rgba(5,24,36,.32); cursor:pointer; font-size:15px; backdrop-filter:blur(10px); }
.spatial-sphere-anchor:hover { color:#071e2d; border-color:rgba(155,239,197,.68); background:#bff8dc; }
.spatial-scene[data-motion="on"] .spatial-motion-toggle { box-shadow:0 0 20px rgba(132,236,196,.24),0 10px 25px rgba(2,17,27,.24); }
.spatial-scene.scene-graph-ready:has(.spatial-dock.has-surface) .spatial-object,.spatial-scene.scene-graph-ready .spatial-object { top:50%!important; transform:translate3d(calc(-50% + var(--scene-x,0px) + var(--anchor-pan-x,0px)),calc(-50% + var(--scene-y,0px) + var(--anchor-pan-y,0px)),var(--scene-z,0px)) scale(var(--scene-scale,1))!important; }
.mdx-spatial-audio-meta { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px 9px; padding-top:4px; border-top:1px solid rgba(224,245,249,.1); }
.mdx-spatial-audio-meta span { color:rgba(211,233,239,.67); font:9px/1.4 'DM Mono',monospace; }
.mdx-spatial-audio-meta b { color:rgba(239,252,254,.9); font-weight:500; }
@media (max-width:600px) {
  .spatial-panel { top:50%!important; width:var(--panel-width,calc(100vw - 24px))!important; transform:translate3d(calc(-50% + var(--scene-x,0px) + var(--anchor-pan-x,0px)),calc(-50% + var(--scene-y,0px) + var(--anchor-pan-y,0px)),var(--scene-z,0px)) scale(var(--scene-scale,.9)); }
  .spatial-panel.is-minimized { width:min(284px,var(--panel-width,calc(100vw - 24px)))!important; }
  .spatial-scene-control { width:40px!important; height:40px!important; padding:10px!important; border-radius:11px!important; }
  .window-actions { gap:7px!important; }
  .spatial-object-controls { opacity:1; transform:none; gap:8px; }
  .spatial-placement-hint { top:calc(50% + 148px); align-items:flex-start; }
  .spatial-placement-hint small { font-size:9px; }
  .spatial-motion-toggle { right:12px; bottom:14px; }
  .mdx-spatial-audio-meta { grid-template-columns:1fr; }
}

/* Spatial v2: the default composition is calm and screen-locked. Keep the
   premium depth cue, but reserve a predictable lower zone for the Sphere so
   it remains visible when the main tab is open. */
.spatial-motion-toggle,.spatial-placement-hint,.spatial-object-controls,.scene-resize-handle,.spatial-scene-control { display:none!important; }
.spatial-panel.is-world-offscreen,.spatial-object.is-world-offscreen { opacity:1!important; pointer-events:auto!important; }
.spatial-scene.scene-graph-ready:not(:has(.spatial-dock.has-surface)) .sphere-shell { top:62%!important; transform:translate3d(-50%,-50%,190px) scale(.70)!important; }
.spatial-scene.scene-graph-ready:has(.spatial-dock.has-surface) .sphere-shell { top:81%!important; transform:translate3d(-50%,-50%,120px) scale(.58)!important; }
@media (max-width:600px) {
  .spatial-scene.scene-graph-ready:not(:has(.spatial-dock.has-surface)) .sphere-shell { top:61%!important; transform:translate3d(-50%,-50%,150px) scale(.64)!important; }
  .spatial-scene.scene-graph-ready:has(.spatial-dock.has-surface) .sphere-shell { top:80%!important; transform:translate3d(-50%,-50%,110px) scale(.52)!important; }
}

/* Final scene-graph guard: keep the Sphere in a viewport-relative lower lane
   even when this stylesheet is loaded after the workspace cascade. */
.spatial-scene.scene-graph-ready .sphere-shell { top:clamp(420px,68vh,700px)!important; transform:translate(-50%,-50%) translate3d(var(--spatial-sphere-motion-x),var(--spatial-sphere-motion-y),360px) rotateX(var(--spatial-sphere-tilt-x)) rotateY(var(--spatial-sphere-tilt-y)) scale(calc(var(--sphere-scale,1) * var(--spatial-sphere-depth-scale,1)))!important; filter:drop-shadow(0 42px 66px rgba(0,0,0,.38))!important; }
.spatial-scene.scene-graph-ready .sphere-shell { top:clamp(420px,68dvh,700px)!important; }
.spatial-scene.scene-graph-ready .sphere-shell { top:var(--spatial-sphere-top,clamp(420px,68dvh,700px))!important; }
.spatial-scene.scene-graph-ready:has(.spatial-dock.has-surface) .sphere-shell { top:var(--spatial-sphere-top,clamp(420px,68dvh,700px))!important; }
@media (max-width:600px) {
  .spatial-scene.scene-graph-ready .sphere-shell { top:clamp(400px,68dvh,610px)!important; transform:translate(-50%,-50%) translate3d(var(--spatial-sphere-motion-x),var(--spatial-sphere-motion-y),300px) rotateX(var(--spatial-sphere-tilt-x)) rotateY(var(--spatial-sphere-tilt-y)) scale(calc(var(--sphere-scale,.94) * var(--spatial-sphere-depth-scale,1)))!important; }
  .spatial-scene.scene-graph-ready .sphere-shell { top:var(--spatial-sphere-top,clamp(400px,68dvh,610px))!important; }
  .spatial-scene.scene-graph-ready:has(.spatial-dock.has-surface) .sphere-shell { top:var(--spatial-sphere-top,clamp(400px,68dvh,610px))!important; }
}