/* ===========================================================================
   Sputnik X — Memory Center :: 3D Neural Graph styling (NON-Tailwind)

   Plain static CSS (no `npm run mc:build` needed), linked after the connectome
   host CSS. Scopes everything under #mc-neural-graph so it never bleeds into the
   2D connectome or other views. Uses the MC design tokens (--color-mc-*) so the
   glass panel + toggle match Mission Control / Streams chrome.

   Pieces:
     1. #mc-neural-3d-host   — the WebGL canvas host (absolute, fills the view).
     2. .mc-n3d-toggle       — the 2D / 3D segmented control (top-centre).
     3. #mc-n3d-info         — the click-to-inspect slide-in node panel (right).
     4. #mc-n3d-halos        — DOM overlay layer of orphan/stale halo rings.
     5. .mc-n3d-tip          — hover tooltip card (rendered into FG's label div).
   =========================================================================== */

/* ── 1. WebGL host ───────────────────────────────────────────────────────────
   Fills #mc-neural-graph exactly like the 2D #canvas host. Sits BELOW the
   floating chrome (stats z=25, controls z=25) so the panels stay clickable. */
#mc-neural-graph #mc-neural-3d-host {
  position: absolute;
  inset: 0;
  z-index: 10;
  overflow: hidden;
  background: #0a0e16;
}
#mc-neural-graph #mc-neural-3d-host canvas {
  display: block;
  outline: none;
}

/* When 3D mode is active we hide the 2D connectome chrome that would otherwise
   float over the WebGL host, and vice-versa. mc-shell.js toggles these classes
   on #mc-neural-graph (data-mode driven). */
#mc-neural-graph.mc-mode-3d #canvas,
#mc-neural-graph.mc-mode-3d #tooltip,
#mc-neural-graph.mc-mode-3d .connectome-controls,
#mc-neural-graph.mc-mode-3d #slider-wrap,
#mc-neural-graph.mc-mode-3d #focus-banner,
#mc-neural-graph.mc-mode-3d #status {
  display: none !important;
}
#mc-neural-graph.mc-mode-2d #mc-neural-3d-host,
#mc-neural-graph.mc-mode-2d #mc-n3d-info,
#mc-neural-graph.mc-mode-2d #mc-n3d-halos {
  display: none !important;
}

/* ── 2. 2D / 3D segmented toggle ─────────────────────────────────────────────
   Top-centre, clear of the left controls and right stats panel. Glass pill with
   two data-mode buttons; the active one glows cyan (primary token). */
#mc-neural-graph .mc-n3d-toggle {
  position: absolute;
  top: var(--spacing-mc-md, 16px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-mc-surface-lowest, #0a0e1a) 72%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
#mc-neural-graph .mc-n3d-toggle button {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--color-mc-on-surface-variant, #bbc9cd);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition:
    color 0.15s,
    background 0.15s,
    box-shadow 0.15s;
}
#mc-neural-graph .mc-n3d-toggle button:hover {
  color: var(--color-mc-on-surface, #dde3ea);
}
#mc-neural-graph .mc-n3d-toggle button.is-active {
  color: #04141a;
  background: var(--color-mc-primary, #8aebff);
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.45);
}
#mc-neural-graph .mc-n3d-toggle button:focus-visible {
  outline: 2px solid var(--color-mc-primary-container, #22d3ee);
  outline-offset: 2px;
}

/* ── 3. Node info slide-in panel ─────────────────────────────────────────────
   Right-side glass panel; slides in on node click, out on close/background. */
#mc-neural-graph #mc-n3d-info {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 40;
  width: 320px;
  max-width: 86vw;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 20px 24px;
  background: color-mix(in srgb, var(--color-mc-surface, #1a2025) 86%, transparent);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.5);
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
}
#mc-neural-graph #mc-n3d-info.is-open {
  transform: translateX(0);
}
#mc-neural-graph #mc-n3d-info[hidden] {
  display: none;
}

#mc-neural-graph .mc-n3d-info-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
#mc-neural-graph .mc-n3d-info-title {
  min-width: 0;
}
#mc-neural-graph #mc-n3d-info-id {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-mc-on-surface, #dde3ea);
  word-break: break-word;
  line-height: 1.25;
}
#mc-neural-graph #mc-n3d-info-type {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-mc-primary, #8aebff);
}
#mc-neural-graph #mc-n3d-info-close {
  flex-shrink: 0;
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  color: var(--color-mc-on-surface-variant, #bbc9cd);
  border-radius: 8px;
  width: 30px;
  height: 30px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition:
    color 0.15s,
    border-color 0.15s,
    background 0.15s;
}
#mc-neural-graph #mc-n3d-info-close:hover {
  color: var(--color-mc-on-surface, #dde3ea);
  border-color: var(--color-mc-primary-container, #22d3ee);
  background: rgba(34, 211, 238, 0.08);
}

/* State badge (active / orphan / stale). */
#mc-neural-graph .mc-n3d-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid currentColor;
}
#mc-neural-graph .mc-n3d-badge[hidden] {
  display: none;
}
#mc-neural-graph .mc-n3d-badge.is-active {
  color: #3ee08a;
  background: rgba(62, 224, 138, 0.1);
}
#mc-neural-graph .mc-n3d-badge.is-orphan {
  color: #ff6b5e;
  background: rgba(255, 107, 94, 0.12);
}
#mc-neural-graph .mc-n3d-badge.is-stale {
  color: #ffb24a;
  background: rgba(255, 178, 74, 0.12);
}

/* Detail rows. */
#mc-neural-graph .mc-n3d-rows {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
#mc-neural-graph .mc-n3d-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.02);
}
#mc-neural-graph .mc-n3d-row[hidden] {
  display: none;
}
#mc-neural-graph .mc-n3d-row-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-mc-on-surface-variant, #bbc9cd);
  flex-shrink: 0;
}
#mc-neural-graph .mc-n3d-row-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-mc-on-surface, #dde3ea);
  text-align: right;
  word-break: break-word;
  font-variant-numeric: tabular-nums;
}

#mc-neural-graph .mc-n3d-info-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-mc-primary, #8aebff);
  margin: 6px 0 2px;
}
#mc-neural-graph #mc-n3d-info-health[hidden] {
  display: none;
}

/* ── 4. Halo overlay rings (orphan red / stale amber) ────────────────────────
   Centred over the node via JS (left/top = screen coords). pointer-events:none
   so they never intercept clicks/drag on the canvas. */
#mc-neural-graph #mc-n3d-halos {
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  overflow: hidden;
}
#mc-neural-graph .mc-n3d-halo {
  position: absolute;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px; /* centre on the screen-coord point */
  border-radius: 50%;
  border: 2px solid transparent;
  box-sizing: border-box;
  will-change: left, top;
}
#mc-neural-graph .mc-n3d-halo.is-orphan {
  border-color: #ff5e5e;
  border-style: dashed;
  box-shadow: 0 0 10px rgba(255, 94, 94, 0.6);
  animation: mc-n3d-halo-pulse 1.8s ease-in-out infinite;
}
#mc-neural-graph .mc-n3d-halo.is-stale {
  border-color: #ffa93a;
  box-shadow: 0 0 8px rgba(255, 169, 58, 0.45);
}

@keyframes mc-n3d-halo-pulse {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.18);
  }
}

/* ── 5. Hover tooltip card (rendered into ForceGraph3D's label div) ──────────
   FG3D wraps nodeLabel HTML in its own positioned container; we style the inner
   card we emit. Dark glass, small. */
.mc-n3d-tip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(10, 14, 22, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  font-family: inherit;
}
.mc-n3d-tip-id {
  font-size: 12.5px;
  font-weight: 700;
  color: #dde3ea;
  white-space: nowrap;
}
.mc-n3d-tip-sub {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8aebff;
}

/* ── Reduced motion ──────────────────────────────────────────────────────────
   autoRotate is disabled in JS under prefers-reduced-motion; here we also calm
   the halo pulse + remove the panel slide easing so nothing animates. */
@media (prefers-reduced-motion: reduce) {
  #mc-neural-graph .mc-n3d-halo.is-orphan {
    animation: none;
    opacity: 0.85;
  }
  #mc-neural-graph #mc-n3d-info {
    transition: none;
  }
}