/* MedDex Spatial — camera-first perception surface.
   The engine owns the data and lifecycle; this file only owns the quiet HUD. */

.spatial-screen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2400;
  display: none !important;
  overflow: hidden;
  background: #05070c;
  color: #eff8ff;
}

.spatial-screen.active {
  display: block !important;
  animation: none !important;
}

.spatial-camera {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  background: #071019;
  --spatial-cyan: #74e5ff;
  --spatial-green: #7ef0bc;
  --spatial-gold: #e7c778;
  --spatial-ink: #eff8ff;
  --spatial-muted: rgba(224, 240, 250, 0.7);
}

.spatial-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #071019;
  /* The camera is the user's scene. Do not darken it to make the HUD work. */
  filter: none;
  transform: translateZ(0);
}

.spatial-camera-wash,
.spatial-vignette,
.spatial-camera-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.spatial-camera-wash {
  z-index: 1;
  /* Kept as a structural layer for compatibility with existing markup. HUD
     contrast belongs to its own cards/pills, never to a full-frame overlay. */
  display: none;
}

.spatial-camera-grid {
  z-index: 2;
  opacity: .1;
  background-image:
    linear-gradient(rgba(139, 223, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 223, 255, .06) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(180deg, black, transparent 72%);
}

.spatial-vignette {
  z-index: 3;
  /* No live-video vignette: normal camera exposure should reach the HUD. */
  box-shadow: none;
}

.spatial-frame-canvas { display: none; }

.spatial-topbar {
  position: absolute;
  z-index: 20;
  top: max(18px, env(safe-area-inset-top, 0px));
  left: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  pointer-events: none;
}

.spatial-topbar > *,
.spatial-top-actions > * { pointer-events: auto; }

.spatial-title-lockup {
  display: grid;
  gap: 1px;
  min-width: 0;
  text-align: center;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .48);
}

.spatial-title-lockup strong {
  color: var(--spatial-ink);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .22em;
}

.spatial-title-lockup > span:last-child {
  color: var(--spatial-muted);
  font-size: .59rem;
  letter-spacing: .06em;
}

.spatial-live-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--spatial-green);
  font-size: .53rem;
  font-weight: 800;
  letter-spacing: .15em;
}

.spatial-live-mark i,
.spatial-diagnostics i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}

.spatial-top-actions { display: flex; gap: 8px; }

.spatial-icon-button {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(213, 238, 251, .19);
  border-radius: 50%;
  color: rgba(237, 248, 255, .9);
  background: rgba(7, 16, 25, .48);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 22px rgba(0, 0, 0, .16);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-size: 1.05rem;
  line-height: 1;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.spatial-icon-button:hover,
.spatial-icon-button:focus-visible {
  border-color: rgba(116, 229, 255, .58);
  background: rgba(26, 65, 83, .6);
  transform: translateY(-1px);
}

.spatial-icon-button:focus-visible,
.spatial-primary-button:focus-visible,
.spatial-label-button:focus-visible,
.spatial-insight-foot button:focus-visible {
  outline: 2px solid var(--spatial-cyan);
  outline-offset: 3px;
}

.spatial-state-pill {
  position: absolute;
  z-index: 15;
  top: max(88px, calc(env(safe-area-inset-top, 0px) + 74px));
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 40px);
  padding: 8px 12px;
  border: 1px solid rgba(167, 220, 239, .16);
  border-radius: 999px;
  color: var(--spatial-muted);
  background: rgba(4, 13, 21, .48);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-size: .66rem;
  font-weight: 650;
  letter-spacing: .01em;
  transform: translateX(-50%);
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}

.spatial-state-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--spatial-green);
  box-shadow: 0 0 12px rgba(126, 240, 188, .78);
}

.spatial-camera[data-state="voice"] .spatial-state-pill,
.spatial-camera[data-state="reasoning"] .spatial-state-pill { color: #fff7dc; border-color: rgba(231, 199, 120, .38); }
.spatial-camera[data-state="voice"] .spatial-state-dot,
.spatial-camera[data-state="reasoning"] .spatial-state-dot { background: var(--spatial-gold); box-shadow: 0 0 14px rgba(231, 199, 120, .72); }

.spatial-reticle {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 47%;
  width: min(72vw, 340px);
  aspect-ratio: 1;
  border: 1px solid rgba(163, 228, 243, .17);
  border-radius: 26%;
  opacity: .8;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: border-color .35s ease, transform .35s ease, opacity .35s ease;
}

.spatial-reticle::after,
.spatial-reticle::before {
  content: "";
  position: absolute;
  background: rgba(173, 232, 243, .12);
}

.spatial-reticle::after { left: 50%; top: 8%; bottom: 8%; width: 1px; }
.spatial-reticle::before { top: 50%; left: 8%; right: 8%; height: 1px; }
.spatial-reticle > span { position: absolute; inset: 47%; border: 1px solid rgba(126, 240, 188, .5); border-radius: 50%; box-shadow: 0 0 16px rgba(126, 240, 188, .25); }
.spatial-reticle-corner { position: absolute; width: 22px; height: 22px; border-color: rgba(116, 229, 255, .75); }
.spatial-reticle-corner.tl { left: -1px; top: -1px; border-top: 2px solid; border-left: 2px solid; border-radius: 10px 0 0; }
.spatial-reticle-corner.tr { right: -1px; top: -1px; border-top: 2px solid; border-right: 2px solid; border-radius: 0 10px 0 0; }
.spatial-reticle-corner.bl { left: -1px; bottom: -1px; border-bottom: 2px solid; border-left: 2px solid; border-radius: 0 0 0 10px; }
.spatial-reticle-corner.br { right: -1px; bottom: -1px; border-bottom: 2px solid; border-right: 2px solid; border-radius: 0 0 10px; }
.spatial-camera[data-has-object="true"] .spatial-reticle { opacity: .28; transform: translate(-50%, -50%) scale(.9); }

.spatial-air-cursor {
  position: absolute;
  z-index: 35;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(126, 240, 188, .76);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.65);
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease, background .12s ease;
  box-shadow: 0 0 18px rgba(126, 240, 188, .42);
}

.spatial-air-cursor::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: rgba(126, 240, 188, .88); }
.spatial-air-cursor.is-visible { opacity: .9; transform: translate(-50%, -50%) scale(1); }
.spatial-air-cursor.is-pinching { background: rgba(126, 240, 188, .2); transform: translate(-50%, -50%) scale(1.25); }

.spatial-label-layer {
  position: absolute;
  z-index: 12;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.spatial-object-label {
  position: absolute;
  width: clamp(160px, 28vw, 238px);
  min-height: 52px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  will-change: left, top, opacity;
  overflow: visible;
  transition: left .16s linear, top .16s linear, opacity .22s ease;
}

.spatial-object-outline {
  position: absolute;
  inset: -2px;
  border: 1px solid rgba(116, 229, 255, .56);
  border-radius: 14px;
  opacity: .8;
  box-shadow: 0 0 0 1px rgba(116, 229, 255, .06), inset 0 0 20px rgba(116, 229, 255, .04);
  pointer-events: none;
}

.spatial-object-label.is-focused .spatial-object-outline {
  border-color: var(--spatial-green);
  box-shadow: 0 0 0 1px rgba(126, 240, 188, .14), 0 0 24px rgba(126, 240, 188, .16), inset 0 0 24px rgba(126, 240, 188, .06);
}

.spatial-label-button {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: grid;
  gap: 3px;
  width: 100%;
  min-height: 58px;
  padding: 10px 12px 9px;
  box-sizing: border-box;
  border: 1px solid rgba(218, 240, 250, .18);
  border-radius: 13px;
  color: var(--spatial-ink);
  text-align: left;
  background: rgba(5, 15, 23, .7);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  pointer-events: auto;
  overflow: visible;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.spatial-label-button:hover,
.spatial-object-label.is-focused .spatial-label-button { border-color: rgba(126, 240, 188, .5); background: rgba(8, 30, 35, .8); transform: translateY(-2px); }
.spatial-label-button strong { display: block; padding-right: 48px; color: #f4fbff; font-size: .77rem; font-weight: 780; line-height: 1.2; overflow-wrap: anywhere; }
.spatial-label-button small { color: rgba(209, 232, 241, .88); font-size: .62rem; font-weight: 620; line-height: 1.2; overflow-wrap: anywhere; }
.spatial-label-ocr { color: rgba(173, 235, 220, .9); font-size: .59rem; font-style: normal; font-weight: 680; line-height: 1.25; overflow-wrap: anywhere; }
.spatial-label-action { color: var(--spatial-green); cursor: pointer; font-size: .62rem; font-weight: 800; letter-spacing: .02em; }
.spatial-confidence { position: absolute; right: 10px; top: 10px; color: rgba(211, 245, 255, .78); font-size: .57rem; font-weight: 750; }
.spatial-object-leader { position: absolute; z-index: 0; height: 1px; transform-origin: 0 50%; background: linear-gradient(90deg, rgba(126, 240, 188, .8), rgba(116, 229, 255, .2)); box-shadow: 0 0 7px rgba(126, 240, 188, .35); pointer-events: none; }

.spatial-empty-state {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  display: grid;
  justify-items: center;
  width: min(350px, calc(100% - 42px));
  text-align: center;
  transform: translate(-50%, -44%);
  transition: opacity .35s ease, transform .35s ease;
}

.spatial-camera[data-camera="on"] .spatial-empty-state { opacity: 0; transform: translate(-50%, -40%) scale(.96); pointer-events: none; }
.spatial-camera[data-models="ready"] .spatial-empty-state { opacity: .22; transform: translate(-50%, -40%) scale(.96); pointer-events: none; }
.spatial-empty-state h2 { margin: 12px 0 8px; color: #f4fbff; font-size: clamp(1.3rem, 4vw, 1.8rem); letter-spacing: -.04em; }
.spatial-empty-state > p:not(.spatial-kicker) { max-width: 300px; margin: 0; color: rgba(212, 233, 242, .7); font-size: .79rem; line-height: 1.55; }
.spatial-kicker { margin: 0; color: var(--spatial-cyan); font-size: .57rem; font-weight: 800; letter-spacing: .22em; }

.spatial-empty-orbit { position: relative; width: 92px; height: 92px; border: 1px solid rgba(116, 229, 255, .24); border-radius: 50%; box-shadow: 0 0 50px rgba(45, 157, 204, .14); }
.spatial-empty-orbit::before, .spatial-empty-orbit::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(126, 240, 188, .2); border-radius: 50%; transform: rotate(42deg) scaleX(1.5); }
.spatial-empty-orbit::after { transform: rotate(-42deg) scaleX(1.5); }
.spatial-empty-orbit span { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--spatial-green); box-shadow: 0 0 12px var(--spatial-green); }
.spatial-empty-orbit span:nth-child(1) { left: 12px; top: 38px; }
.spatial-empty-orbit span:nth-child(2) { right: 15px; top: 20px; background: var(--spatial-cyan); box-shadow: 0 0 12px var(--spatial-cyan); }
.spatial-empty-orbit span:nth-child(3) { right: 22px; bottom: 12px; background: var(--spatial-gold); box-shadow: 0 0 12px var(--spatial-gold); }

.spatial-primary-button {
  min-height: 42px;
  margin-top: 18px;
  padding: 0 18px;
  border: 1px solid rgba(126, 240, 188, .46);
  border-radius: 999px;
  color: #03100d;
  background: linear-gradient(145deg, #9ef7ce, #66ddb4);
  box-shadow: 0 10px 28px rgba(64, 214, 164, .2);
  font-size: .75rem;
  font-weight: 800;
}

.spatial-bottom-zone {
  position: absolute;
  z-index: 21;
  right: 0;
  bottom: max(14px, env(safe-area-inset-bottom, 0px));
  left: 0;
  display: grid;
  justify-items: center;
  min-height: 150px;
  pointer-events: none;
}

.spatial-diagnostics {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: rgba(207, 231, 240, .58);
  font-size: .58rem;
  font-weight: 650;
  letter-spacing: .02em;
}

.spatial-diagnostics span { display: inline-flex; align-items: center; gap: 5px; }
.spatial-diagnostics span:nth-child(1) i { color: var(--spatial-cyan); }
.spatial-diagnostics span:nth-child(2) i { color: var(--spatial-green); }
.spatial-diagnostics b { color: rgba(240, 250, 255, .9); font-weight: 800; }
.spatial-privacy-note { color: rgba(231, 199, 120, .75); }

.spatial-sphere-dock {
  position: relative;
  width: 118px;
  height: 96px;
  margin-top: 2px;
  pointer-events: auto;
}

.spatial-sphere-hint {
  margin: -2px 0 0;
  color: rgba(232, 245, 250, .72);
  font-size: .61rem;
  font-weight: 650;
  letter-spacing: .05em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
}

/* The exact same Sphere instance used by Home is reparented into this dock. */
body.mdx-spatial-mode #mdxSphereHome {
  position: absolute !important;
  inset: 0 !important;
  width: 118px !important;
  height: 96px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

body.mdx-spatial-mode #mdxSphereHome .mdxs {
  width: 118px !important;
  height: 96px !important;
  --mdxs-h: 96px !important;
}

body.mdx-spatial-mode #mdxSphereHome .mdxs-stage { width: 92px !important; height: 92px !important; }
body.mdx-spatial-mode #mdxSphereHome .mdxs-core { cursor: pointer !important; pointer-events: auto !important; }
body.mdx-spatial-mode #mdxSphereHome .mdxs-caption,
body.mdx-spatial-mode #mdxSphereHome .mdxs-think,
body.mdx-spatial-mode #mdxSphereHome .mdxs-hint,
body.mdx-spatial-mode #mdxSphereHome .mdxs-live { display: none !important; }
body.mdx-spatial-mode #mdxSphereHome .mdxs-orbit { display: none !important; }

.spatial-insight-card {
  position: absolute;
  z-index: 30;
  right: 18px;
  bottom: 166px;
  left: 18px;
  width: min(520px, calc(100% - 36px));
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(169, 224, 241, .22);
  border-radius: 22px;
  color: #eef9ff;
  background: linear-gradient(145deg, rgba(9, 28, 39, .9), rgba(5, 14, 23, .92));
  box-shadow: 0 24px 65px rgba(0, 0, 0, .44), inset 0 1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  animation: spatialCardIn .38s cubic-bezier(.2, .8, .2, 1) both;
}

.spatial-insight-card[hidden], .spatial-privacy-sheet[hidden] { display: none; }
.spatial-insight-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 18px 18px 12px; }
.spatial-insight-kicker { color: var(--spatial-cyan); font-size: .57rem; font-weight: 800; letter-spacing: .16em; }
.spatial-insight-head h2 { margin: 5px 0 0; font-size: 1.05rem; letter-spacing: -.025em; }
.spatial-card-close { width: 31px; height: 31px; flex: none; }
.spatial-insight-body { display: flex; gap: 9px; max-height: 180px; overflow: auto; padding: 7px 18px 18px; color: rgba(227, 242, 249, .86); font-size: .82rem; line-height: 1.58; white-space: pre-wrap; }
.spatial-insight-body.is-ready { display: block; }
.spatial-response-pulse { width: 7px; height: 7px; flex: 0 0 auto; margin-top: 7px; border-radius: 50%; background: var(--spatial-cyan); box-shadow: 0 0 13px var(--spatial-cyan); animation: spatialPulse 1.5s ease-in-out infinite; }
.spatial-insight-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 18px 13px; border-top: 1px solid rgba(173, 224, 238, .12); color: rgba(199, 226, 236, .54); font-size: .59rem; }
.spatial-insight-foot button { padding: 0; border: 0; color: var(--spatial-green); background: transparent; font-size: .62rem; font-weight: 800; }

.spatial-permission-note { position: absolute; z-index: 22; right: 18px; bottom: 154px; left: 18px; max-width: 420px; margin: auto; padding: 10px 13px; border: 1px solid rgba(231, 199, 120, .28); border-radius: 12px; color: #fff5d7; background: rgba(48, 37, 14, .68); font-size: .7rem; line-height: 1.4; text-align: center; }

.spatial-privacy-sheet { position: absolute; z-index: 40; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(1, 5, 9, .54); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.spatial-privacy-card { position: relative; width: min(420px, 100%); padding: 26px 24px 24px; border: 1px solid rgba(173, 224, 238, .2); border-radius: 24px; background: linear-gradient(145deg, rgba(10, 29, 40, .97), rgba(4, 12, 20, .98)); box-shadow: 0 26px 80px rgba(0, 0, 0, .5); }
.spatial-privacy-card .spatial-card-close { position: absolute; top: 14px; right: 14px; }
.spatial-privacy-card h2 { max-width: 280px; margin: 10px 0 12px; font-size: 1.45rem; letter-spacing: -.05em; }
.spatial-privacy-card p:not(.spatial-kicker) { color: rgba(219, 238, 246, .75); font-size: .79rem; line-height: 1.6; }

@keyframes spatialCardIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes spatialPulse { 50% { opacity: .3; transform: scale(.7); } }

/* Spatial owns the whole viewport. The shell's rail/bar never competes with
   the camera; the top mode switch remains as the Chat | Lens | Spatial escape. */
body.mdx-spatial-mode { overflow: hidden; background: #05070c !important; }
body.mdx-spatial-mode .app-shell { width: 100% !important; margin: 0 !important; padding: 0 !important; }
body.mdx-spatial-mode .app-shell > .topbar,
body.mdx-spatial-mode .mdx-topline,
body.mdx-spatial-mode .mdx-bar,
body.mdx-spatial-mode .mdx-nav,
body.mdx-spatial-mode .mdx-lens-controls,
body.mdx-spatial-mode .ai-companion-container,
body.mdx-spatial-mode .install-prompt { display: none !important; }
body.mdx-spatial-mode main { padding: 0 !important; }
/* The global switch keeps its normal MedDex thumb position. Spatial remains
   immersive because the surrounding shell is hidden, while the escape hatch
   stays below the camera rather than obscuring its upper edge. */
body.mdx-spatial-mode .mdx-switch { z-index: 2600; }
body.mdx-spatial-mode .mdx-switch-thumb { background: rgba(126, 240, 188, .18); }
body.mdx-spatial-mode .mdx-switch-btn[aria-selected="true"] { color: #edfff8; }
body.mdx-spatial-mode .mdx-switch-btn[aria-selected="true"] svg { color: var(--spatial-green); }

@media (min-width: 900px) {
  .spatial-topbar { left: 28px; right: 28px; }
  .spatial-state-pill { top: 106px; }
  .spatial-reticle { top: 48%; width: min(42vw, 510px); }
  .spatial-insight-card { bottom: 178px; }
  .spatial-bottom-zone { min-height: 168px; }
  body.mdx-spatial-mode .spatial-title-lockup { margin-inline: 180px; }
}

@media (prefers-reduced-motion: reduce) {
  .spatial-empty-orbit, .spatial-empty-orbit::before, .spatial-empty-orbit::after, .spatial-response-pulse { animation: none; }
  .spatial-object-label, .spatial-label-button, .spatial-insight-card { transition: none; animation: none; }
}

@media (max-width: 420px) {
  .spatial-topbar { left: 12px; right: 12px; }
  .spatial-icon-button { width: 35px; height: 35px; }
  .spatial-topbar .spatial-title-lockup { margin-inline: 76px; }
  .spatial-diagnostics { gap: 8px; }
  .spatial-privacy-note { display: none !important; }
  .spatial-object-label { width: 172px; }
}

/* -------------------------------------------------------------------------
   Spatial World
   -------------------------------------------------------------------------
   Detection stays quiet until attention is explicit. The camera remains the
   dominant surface; these are small intent/knowledge blooms, not a permanent
   diagnostic HUD. */
.spatial-camera[data-models="ready"] .spatial-camera-grid { opacity: 0 !important; }
.spatial-camera[data-models="ready"] .spatial-reticle { opacity: .08; }
.spatial-label-layer .spatial-object-label:not(.is-focused):not(.is-world-relevant) {
  opacity: 0 !important;
  pointer-events: none !important;
}
.spatial-label-layer .spatial-object-label:not(.is-focused):not(.is-world-relevant) .spatial-label-button { pointer-events: none !important; }
.spatial-label-layer .spatial-object-label.is-focused,
.spatial-label-layer .spatial-object-label.is-world-relevant {
  opacity: 1 !important;
  pointer-events: none;
}
.spatial-label-layer .spatial-object-label.is-focused .spatial-label-button,
.spatial-label-layer .spatial-object-label.is-world-relevant .spatial-label-button { pointer-events: auto !important; }

.spatial-world-layer {
  position: absolute;
  z-index: 24;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.spatial-world-layer > * { pointer-events: auto; }
.spatial-focus-ring, .spatial-world-thread { pointer-events: none !important; }
.spatial-focus-ring {
  position: absolute;
  z-index: 1;
  display: none;
  min-width: 28px;
  min-height: 28px;
  border: 1px solid rgba(126, 240, 188, .72);
  border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(126, 240, 188, .11), 0 0 28px rgba(104, 224, 226, .2), inset 0 0 18px rgba(126, 240, 188, .08);
  opacity: 0;
  transform: scale(.97);
  transition: opacity .24s ease, transform .35s cubic-bezier(.2, .8, .2, 1), left .22s ease, top .22s ease, width .22s ease, height .22s ease;
}
.spatial-focus-ring.is-visible { display: block; opacity: 1; transform: none; }
.spatial-focus-ring i {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border-top: 1px solid rgba(255, 255, 255, .58);
  opacity: .65;
  animation: spatialWorldContour 2.8s linear infinite;
}
.spatial-world-thread {
  position: absolute;
  z-index: 0;
  height: 1px;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(126, 240, 188, 0), rgba(126, 240, 188, .58), rgba(104, 224, 226, .05));
  box-shadow: 0 0 9px rgba(126, 240, 188, .3);
  opacity: 0;
  transition: opacity .3s ease, left .25s ease, top .25s ease, width .25s ease, transform .25s ease;
}
.spatial-world-thread::after {
  position: absolute;
  top: -2px;
  right: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--spatial-green);
  box-shadow: 0 0 12px var(--spatial-green);
  content: "";
}
.spatial-world-thread.is-visible { opacity: .58; }

.spatial-intent-bloom,
.spatial-knowledge-bloom,
.spatial-timeline-bloom {
  position: absolute;
  z-index: 5;
  width: min(250px, calc(100% - 24px));
  padding: 11px;
  overflow: hidden;
  border: 1px solid rgba(183, 235, 241, .22);
  border-radius: 18px;
  color: #effbff;
  background: linear-gradient(145deg, rgba(9, 26, 37, .88), rgba(4, 12, 21, .86));
  box-shadow: 0 18px 48px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .09);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  animation: spatialWorldBloomIn .28s cubic-bezier(.2, .8, .2, 1) both;
}
.spatial-intent-bloom[hidden], .spatial-knowledge-bloom[hidden], .spatial-timeline-bloom[hidden] { display: none; }
.spatial-bloom-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; }
.spatial-bloom-head > div { min-width: 0; }
.spatial-bloom-kicker { display: block; color: var(--spatial-green); font-size: .5rem; font-weight: 850; letter-spacing: .16em; line-height: 1.1; }
.spatial-bloom-head strong { display: block; max-width: 205px; margin-top: 4px; overflow: hidden; font-size: .75rem; font-weight: 760; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.spatial-bloom-close { display: grid; flex: 0 0 auto; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; color: rgba(235, 249, 252, .72); background: rgba(255, 255, 255, .07); font-size: 1rem; line-height: 1; }
.spatial-bloom-close:hover { color: #fff; background: rgba(255, 255, 255, .14); }
.spatial-intent-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.spatial-intent-actions button,
.spatial-knowledge-foot button { min-height: 28px; padding: 6px 9px; border: 1px solid rgba(183, 235, 241, .18); border-radius: 999px; color: rgba(239, 251, 255, .88); background: rgba(255, 255, 255, .065); font-size: .6rem; font-weight: 760; letter-spacing: .01em; }
.spatial-intent-actions button:hover,
.spatial-knowledge-foot button:hover { border-color: rgba(126, 240, 188, .54); color: #fff; background: rgba(126, 240, 188, .13); }
.spatial-knowledge-bloom { width: min(270px, calc(100% - 24px)); }
.spatial-knowledge-bloom p { max-height: 142px; margin: 10px 0 8px; overflow: auto; color: rgba(235, 248, 251, .86); font-size: .69rem; line-height: 1.52; white-space: pre-wrap; }
.spatial-knowledge-foot { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding-top: 8px; border-top: 1px solid rgba(183, 235, 241, .11); color: rgba(207, 235, 241, .57); font-size: .5rem; line-height: 1.3; }
.spatial-knowledge-foot > span { max-width: 116px; }
.spatial-knowledge-foot > div { display: flex; flex: 0 0 auto; gap: 5px; }
.spatial-knowledge-foot button { min-height: 25px; padding: 5px 7px; font-size: .54rem; }
.spatial-timeline-bloom { width: min(280px, calc(100% - 24px)); }
.spatial-timeline-track { height: 3px; margin: 15px 4px 3px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .11); }
.spatial-timeline-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--spatial-cyan), var(--spatial-green)); transition: width .25s ease; }
.spatial-timeline-bloom input { display: block; width: 100%; margin: 0; accent-color: var(--spatial-green); }
.spatial-timeline-labels { display: flex; justify-content: space-between; gap: 4px; margin-top: 6px; color: rgba(220, 241, 246, .48); font-size: .5rem; }
.spatial-timeline-labels span { max-width: 60px; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.spatial-timeline-labels span.is-active { color: var(--spatial-green); }
.spatial-world-controls { position: absolute; z-index: 6; right: 13px; bottom: max(120px, env(safe-area-inset-bottom, 0px) + 104px); display: flex; gap: 5px; padding: 4px; border: 1px solid rgba(183, 235, 241, .15); border-radius: 999px; background: rgba(5, 16, 24, .6); box-shadow: 0 8px 24px rgba(0, 0, 0, .2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.spatial-world-controls button { min-width: 42px; min-height: 25px; padding: 5px 7px; border: 0; border-radius: 999px; color: rgba(229, 246, 250, .58); background: transparent; font-size: .53rem; font-weight: 800; }
.spatial-world-controls button[aria-pressed="true"] { color: #071410; background: var(--spatial-green); box-shadow: 0 0 12px rgba(126, 240, 188, .22); }
.spatial-world-note { position: absolute; z-index: 6; right: 15px; bottom: max(94px, env(safe-area-inset-bottom, 0px) + 78px); left: 15px; min-height: 0; color: rgba(223, 244, 248, .66); font-size: .56rem; font-weight: 650; line-height: 1.3; text-align: center; text-shadow: 0 2px 12px rgba(0, 0, 0, .72); pointer-events: none !important; }

/* The existing Sphere node is reparented into the camera. This is the same
   node, not a second sphere or a decorative proxy. */
body.mdx-spatial-mode .spatial-camera > #mdxSphereHome.spatial-world-sphere {
  position: absolute !important;
  z-index: 30 !important;
  inset: auto !important;
  left: var(--spatial-world-x, 50%) !important;
  top: var(--spatial-world-y, 80%) !important;
  width: 126px !important;
  height: 112px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: translate(-50%, -50%);
  touch-action: none;
}
body.mdx-spatial-mode .spatial-camera > #mdxSphereHome.spatial-world-sphere::after { position: absolute; z-index: -1; right: 18px; bottom: 7px; left: 18px; height: 11px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, .48), transparent 72%); content: ""; filter: blur(4px); }
body.mdx-spatial-mode .spatial-camera > #mdxSphereHome.spatial-world-sphere .mdxs { width: 126px !important; height: 112px !important; --mdxs-h: 104px !important; }
body.mdx-spatial-mode .spatial-camera > #mdxSphereHome.spatial-world-sphere .mdxs-stage { width: 94px !important; height: 94px !important; }

@keyframes spatialWorldBloomIn { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes spatialWorldContour { from { transform: rotate(0deg); opacity: .2; } 50% { opacity: .8; } to { transform: rotate(360deg); opacity: .2; } }

@media (max-width: 520px) {
  .spatial-intent-bloom, .spatial-knowledge-bloom, .spatial-timeline-bloom { width: min(224px, calc(100% - 20px)); padding: 10px; }
  .spatial-knowledge-bloom { width: min(246px, calc(100% - 20px)); }
  .spatial-world-controls { right: 10px; }
  .spatial-world-controls button { min-width: 39px; }
  body.mdx-spatial-mode .spatial-camera > #mdxSphereHome.spatial-world-sphere { width: 114px !important; height: 102px !important; }
  body.mdx-spatial-mode .spatial-camera > #mdxSphereHome.spatial-world-sphere .mdxs { width: 114px !important; height: 102px !important; }
  body.mdx-spatial-mode .spatial-camera > #mdxSphereHome.spatial-world-sphere .mdxs-stage { width: 86px !important; height: 86px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .spatial-focus-ring, .spatial-focus-ring i, .spatial-world-thread, .spatial-intent-bloom, .spatial-knowledge-bloom, .spatial-timeline-bloom { animation: none; transition: none; }
}

/* Dedicated immersive mode: the camera and the existing Sphere are the
   interface. The global Chat/Lens/Spatial switch, diagnostics and legacy
   bottom dock must not compete with the physical scene. */
body.mdx-spatial-mode .mdx-switch,
body.mdx-spatial-mode .bottom-nav,
body.mdx-spatial-mode .mdx-nav,
body.mdx-spatial-mode .mdx-topline,
body.mdx-spatial-mode .mdx-bar,
body.mdx-spatial-mode #mdxAiFab,
body.mdx-spatial-mode .ai-companion-container,
body.mdx-spatial-mode .install-prompt { display: none !important; }

body.mdx-spatial-mode .spatial-state-pill,
body.mdx-spatial-mode .spatial-diagnostics,
body.mdx-spatial-mode .spatial-sphere-hint,
body.mdx-spatial-mode .spatial-bottom-zone,
body.mdx-spatial-mode .spatial-insight-card { display: none !important; }

body.mdx-spatial-mode .spatial-camera-grid,
body.mdx-spatial-mode .spatial-reticle { opacity: 0 !important; }

/* The compact Intent Bloom owns selected-object copy. Hide the old label
   cards while retaining the label layer as a silent hit-test/compatibility
   surface for existing perception events. */
body.mdx-spatial-mode .spatial-label-layer .spatial-object-label .spatial-label-button,
body.mdx-spatial-mode .spatial-label-layer .spatial-object-label .spatial-object-outline,
body.mdx-spatial-mode .spatial-label-layer .spatial-object-label .spatial-object-leader {
  opacity: 0 !important;
  pointer-events: none !important;
}

body.mdx-spatial-mode .spatial-focus-ring {
  border: 0;
  border-radius: 46% 54% 52% 48% / 54% 46% 55% 45%;
  background: radial-gradient(ellipse at center, rgba(126, 240, 188, .08), transparent 68%);
  box-shadow: none;
}
body.mdx-spatial-mode .spatial-focus-ring::before {
  position: absolute;
  inset: -6px;
  border: 1px solid rgba(126, 240, 188, .64);
  border-radius: inherit;
  box-shadow: 0 0 22px rgba(126, 240, 188, .17), inset 0 0 20px rgba(126, 240, 188, .05);
  content: "";
  transform: rotate(-4deg);
}
body.mdx-spatial-mode .spatial-focus-ring i { border-top-color: rgba(230, 255, 245, .72); }

body.mdx-spatial-mode .spatial-world-controls {
  right: 50%;
  bottom: max(112px, env(safe-area-inset-bottom, 0px) + 94px);
  opacity: 0;
  pointer-events: none;
  transform: translateX(50%) translateY(6px);
  transition: opacity .24s ease, transform .28s cubic-bezier(.2, .8, .2, 1);
}
body.mdx-spatial-mode .spatial-camera.spatial-world-engaged .spatial-world-controls {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(50%);
}

body.mdx-spatial-mode .spatial-intent-bloom,
body.mdx-spatial-mode .spatial-knowledge-bloom,
body.mdx-spatial-mode .spatial-timeline-bloom {
  width: auto;
  max-width: min(216px, calc(100% - 24px));
  padding: 9px;
  border-radius: 15px;
  background: rgba(7, 18, 27, .6);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .08);
}
body.mdx-spatial-mode .spatial-bloom-head strong { max-width: 170px; font-size: .67rem; }
body.mdx-spatial-mode .spatial-intent-actions { gap: 4px; margin-top: 8px; }
body.mdx-spatial-mode .spatial-intent-actions button { min-height: 25px; padding: 5px 7px; font-size: .54rem; }
body.mdx-spatial-mode .spatial-knowledge-bloom p { max-height: 96px; margin: 7px 0; font-size: .62rem; }

/* State is carried by the existing Sphere node. These restrained auras make
   the agent's state legible without adding another widget to the scene. */
body.mdx-spatial-mode #mdxSphereHome.spatial-world-sphere::before {
  position: absolute;
  z-index: -1;
  inset: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(126, 240, 188, .16), transparent 68%);
  content: "";
  opacity: .55;
  animation: spatialSphereAura 4.2s ease-in-out infinite;
  pointer-events: none;
}
body.mdx-spatial-mode #mdxSphereHome.spatial-world-sphere[data-spatial-state="listening"]::before { opacity: .9; animation-duration: 1.55s; }
body.mdx-spatial-mode #mdxSphereHome.spatial-world-sphere[data-spatial-state="thinking"]::before,
body.mdx-spatial-mode #mdxSphereHome.spatial-world-sphere[data-spatial-state="analysing"]::before,
body.mdx-spatial-mode #mdxSphereHome.spatial-world-sphere[data-spatial-state="generating"]::before { background: radial-gradient(circle, rgba(116, 229, 255, .18), transparent 68%); animation-duration: 1.9s; }
body.mdx-spatial-mode #mdxSphereHome.spatial-world-sphere[data-spatial-state="uncertain"]::before { background: radial-gradient(circle, rgba(231, 199, 120, .16), transparent 68%); }
@keyframes spatialSphereAura { 0%, 100% { opacity: .35; transform: scale(.92); } 50% { opacity: .78; transform: scale(1.08); } }

@media (max-width: 520px) {
  body.mdx-spatial-mode .spatial-world-controls { bottom: max(104px, env(safe-area-inset-bottom, 0px) + 86px); }
  body.mdx-spatial-mode .spatial-intent-bloom,
  body.mdx-spatial-mode .spatial-knowledge-bloom,
  body.mdx-spatial-mode .spatial-timeline-bloom { max-width: min(204px, calc(100% - 20px)); }
}

/* End-of-file precedence keeps the assistant anchor visible after the
   immersive-mode rules above have been evaluated. */
body.mdx-spatial-mode .spatial-bottom-zone { display: grid !important; z-index: 42; }
body.mdx-spatial-mode .spatial-camera > #mdxSphereHome,
body.mdx-spatial-mode .spatial-camera > #mdxSphereHome.spatial-world-sphere {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  will-change: transform, left, top;
}
body.mdx-spatial-mode #mdxSphereHome .mdxs,
body.mdx-spatial-mode .spatial-camera > #mdxSphereHome .mdxs {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}