/* SHELA Living Brain — full-screen cinematic interface */

#pulse-orb-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #000;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  overflow: hidden;
}
#pulse-orb-overlay.open {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

/* Ambient gradient backdrop — depth & atmosphere */
#pulse-orb-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(40, 20, 80, 0.35) 0%,
    rgba(10, 5, 30, 0.7) 40%,
    rgba(0, 0, 0, 1) 80%
  );
  pointer-events: none;
  z-index: 0;
}

/* Soft vignette glow that pulses with voice level (driven by JS) */
#pulse-orb-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow:
    inset 0 0 200px rgba(120, 80, 255, var(--orb-glow, 0.15)),
    inset 0 0 400px rgba(80, 60, 200, calc(var(--orb-glow, 0.1) * 0.5));
  pointer-events: none;
  transition: box-shadow 0.1s linear;
  z-index: 1;
}

#pulse-orb-canvas {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: block;
  z-index: 2;
}

/* Real-time caption text — appears as Shela speaks */
#pulse-orb-caption {
  position: absolute;
  bottom: 14vh;
  left: 50%;
  transform: translateX(-50%);
  max-width: 70vw;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  text-align: center;
  z-index: 3;
  pointer-events: none;
  text-shadow: 0 2px 30px rgba(120, 80, 255, 0.4);
  opacity: 0;
  transition: opacity 0.4s ease;
  min-height: 60px;
}
#pulse-orb-caption.visible { opacity: 1; }

/* Status text — small, faded, unobtrusive */
#pulse-orb-status {
  position: absolute;
  top: 5vh;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  z-index: 3;
  pointer-events: none;
  transition: color 0.4s;
}
#pulse-orb-overlay[data-phase="listening"] #pulse-orb-status { color: rgba(120, 200, 255, 0.6); }
#pulse-orb-overlay[data-phase="thinking"]  #pulse-orb-status { color: rgba(180, 120, 255, 0.6); }
#pulse-orb-overlay[data-phase="speaking"]  #pulse-orb-status { color: rgba(140, 255, 200, 0.6); }

/* Close — minimal, only visible on cursor hover near top-right */
#pulse-orb-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.4);
  font-size: 16px;
  cursor: pointer;
  z-index: 4;
  transition: opacity 0.3s, background 0.2s;
  opacity: 0;
}
#pulse-orb-overlay:hover #pulse-orb-close { opacity: 1; }
#pulse-orb-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

/* Voice Mode trigger button in header (temporary — until wake word is live) */
.voice-mode-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(110, 96, 255, 0.18), rgba(255, 96, 200, 0.18));
  border: 1px solid rgba(180, 140, 255, 0.35);
  color: rgba(220, 200, 255, 0.95);
  cursor: pointer;
  margin: 0 6px;
  padding: 0;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 0 0 rgba(120, 80, 255, 0.4);
  position: relative;
}
.voice-mode-btn:hover {
  background: linear-gradient(135deg, rgba(140, 120, 255, 0.32), rgba(255, 120, 220, 0.32));
  border-color: rgba(200, 160, 255, 0.6);
  box-shadow: 0 0 16px 2px rgba(140, 100, 255, 0.45);
  transform: scale(1.05);
}
.voice-mode-btn svg {
  width: 18px;
  height: 18px;
  filter: drop-shadow(0 0 6px rgba(180, 140, 255, 0.6));
}
.voice-mode-btn::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(180, 140, 255, 0.3) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: -1;
}
.voice-mode-btn:hover::after { opacity: 1; }

/* ── Living Brain — view toggle + region labels + stage badge ────────── */
#brain-view-toggle {
  position: absolute;
  top: 24px; left: 24px;
  display: flex; gap: 6px;
  z-index: 5;
  background: rgba(20, 14, 40, 0.55);
  border: 1px solid rgba(180, 140, 255, 0.18);
  border-radius: 999px;
  padding: 4px;
  backdrop-filter: blur(8px);
}
#brain-view-toggle button {
  background: transparent; border: none;
  color: rgba(220, 200, 255, 0.6);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11px; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 6px 14px;
  border-radius: 999px; cursor: pointer;
  transition: all 0.25s;
}
#brain-view-toggle button:hover { color: rgba(255, 255, 255, 0.9); }
#brain-view-toggle button.active {
  background: linear-gradient(135deg, rgba(120, 80, 255, 0.4), rgba(255, 80, 180, 0.4));
  color: white;
  box-shadow: 0 0 12px rgba(160, 100, 255, 0.4);
}

.brain-region-label {
  position: absolute;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 10px; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.9);
  pointer-events: none; z-index: 3; white-space: nowrap;
  padding: 4px 8px;
  background: rgba(8, 4, 20, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  transition: opacity 0.4s, color 0.4s, box-shadow 0.4s;
  transform: translate(-50%, -50%);
}
.brain-region-label .neurons {
  display: block;
  font-size: 9px; font-weight: 400;
  color: rgba(180, 200, 255, 0.7);
  letter-spacing: 0.1em; margin-top: 2px;
}
.brain-region-label .firing {
  display: block;
  font-size: 9px;
  color: rgba(140, 255, 200, 0.7);
  letter-spacing: 0.1em;
}
.brain-region-label.active {
  color: white;
  border-color: rgba(180, 140, 255, 0.6);
  box-shadow: 0 0 16px rgba(160, 100, 255, 0.5);
}

#brain-stage {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(180, 255, 220, 0.85);
  background: rgba(20, 14, 40, 0.55);
  border: 1px solid rgba(140, 255, 200, 0.25);
  border-radius: 4px;
  padding: 6px 12px;
  z-index: 3; pointer-events: none;
  text-align: center;
}
/* Mobile: stage badge collides with #brain-view-toggle at top:24px — drop below */
@media (max-width: 720px) {
  #brain-stage { top: 76px; }
}
#brain-stage .neuron-count {
  display: block;
  font-size: 9px; font-weight: 400;
  color: rgba(220, 220, 255, 0.7);
  letter-spacing: 0.15em;
  margin-top: 2px;
  text-transform: none;
}

/* ── Standby (pause) button inside overlay ─────────────────────────── */
#orb-pause-btn {
  position: absolute;
  top: 24px;
  right: 70px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  cursor: pointer;
  z-index: 4;
  transition: all 0.2s;
  opacity: 0;
}
#pulse-orb-overlay:hover #orb-pause-btn { opacity: 1; }
#orb-pause-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
}
#orb-pause-btn.paused {
  background: rgba(255, 200, 80, 0.2);
  border-color: rgba(255, 200, 80, 0.45);
  color: rgba(255, 220, 130, 0.95);
  opacity: 1;
}

/* ── First-time long-press hint ────────────────────────────────────── */
#orb-close-hint {
  position: absolute;
  top: 70px;
  right: 14px;
  background: rgba(20, 14, 40, 0.95);
  color: rgba(255, 255, 255, 0.85);
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(180, 140, 255, 0.3);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.05em;
  z-index: 6;
  white-space: nowrap;
  pointer-events: none;
}

/* ── Orbit-mode region label override (smaller, denser) ───────────── */
.brain-region-label-orbit {
  font-size: 9px;
  padding: 3px 6px;
  background: rgba(8, 4, 20, 0.75);
  letter-spacing: 0.15em;
}
.brain-region-label-orbit .neurons {
  font-size: 8px;
  margin-top: 1px;
  letter-spacing: 0.05em;
}


/* ── Talk to Shela header button — premium ── */
.shela-talk-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 200, 230, 0.12), rgba(180, 100, 220, 0.06) 60%, transparent);
  border: 1px solid rgba(255, 180, 220, 0.28);
  cursor: pointer;
  margin: 0 4px;
  padding: 0;
  position: relative;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 12px rgba(220, 80, 180, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.shela-talk-btn svg {
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 1px 2px rgba(120, 40, 100, 0.45));
}
.shela-talk-btn:hover {
  background: radial-gradient(circle at 30% 30%, rgba(255, 200, 230, 0.22), rgba(180, 100, 220, 0.12) 60%, transparent);
  border-color: rgba(255, 200, 230, 0.55);
  box-shadow: 0 4px 18px rgba(220, 80, 180, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transform: scale(1.06);
}
.shela-talk-btn.active {
  background: radial-gradient(circle at 30% 30%, rgba(255, 200, 230, 0.32), rgba(220, 100, 240, 0.22) 60%, rgba(180, 80, 220, 0.12));
  border-color: rgba(255, 220, 240, 0.7);
  box-shadow: 0 0 18px 2px rgba(255, 100, 200, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

#orb-end-btn {
  position: absolute;
  top: 24px;
  right: 116px;
  height: 38px;
  padding: 0 14px;
  border-radius: 19px;
  background: linear-gradient(135deg, rgba(255, 80, 80, 0.25), rgba(220, 40, 80, 0.25));
  border: 1px solid rgba(255, 100, 100, 0.4);
  color: rgba(255, 200, 200, 0.95);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.3s, all 0.2s;
}
#pulse-orb-overlay:hover #orb-end-btn { opacity: 1; }
#orb-end-btn:hover {
  background: linear-gradient(135deg, rgba(255, 100, 100, 0.5), rgba(220, 60, 100, 0.5));
  color: white;
  box-shadow: 0 0 12px rgba(255, 100, 100, 0.4);
}
#orb-end-btn:not(:hover) { opacity: 0; }
#pulse-orb-overlay[data-vapi-active="true"] #orb-end-btn { opacity: 0.5; }

/* Mobile-only: ensure chat textarea voice mic doesn't cover send button */
@media (max-width: 768px) {
  .voice-input-mic, .chat-voice-mic, .textarea-voice-btn {
    right: 56px !important;
  }
}

/* ── Floating Shela panel — persists when full overlay is closed ── */
#shela-floating-panel {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 280px;
  height: 100px;
  background: rgba(18, 12, 32, 0.78);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(220, 140, 255, 0.28);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(120, 60, 200, 0.28), 0 0 0 1px rgba(255, 100, 200, 0.08) inset;
  display: none;
  align-items: center;
  padding: 8px;
  gap: 8px;
  z-index: 99996;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: rgba(240, 220, 255, 0.96);
  transition: opacity 0.25s, transform 0.25s;
  opacity: 0;
  transform: translateY(8px);
}
#shela-floating-panel.visible {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}
#shela-floating-orb-canvas {
  width: 60px;
  height: 60px;
  flex: 0 0 60px;
  border-radius: 50%;
}
#shela-floating-caption {
  flex: 1 1 auto;
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: rgba(240, 220, 255, 0.9);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 0 4px;
}
#shela-floating-buttons {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 0 0 auto;
}
#shela-floating-expand,
#shela-floating-end {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(240, 220, 255, 0.8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.2s;
}
#shela-floating-expand svg,
#shela-floating-end svg {
  width: 14px;
  height: 14px;
}
#shela-floating-expand:hover {
  background: rgba(140, 200, 255, 0.2);
  border-color: rgba(140, 200, 255, 0.5);
  color: rgba(240, 250, 255, 1);
}
#shela-floating-end {
  background: rgba(255, 80, 80, 0.12);
  border-color: rgba(255, 100, 100, 0.3);
  color: rgba(255, 180, 180, 0.95);
}
#shela-floating-end:hover {
  background: rgba(255, 80, 80, 0.45);
  border-color: rgba(255, 120, 120, 0.7);
  color: white;
}

/* Mobile sizing */
@media (max-width: 480px) {
  #shela-floating-panel {
    width: calc(100vw - 32px);
    bottom: 88px;  /* leave room for the chat textarea on mobile */
    right: 16px;
  }
}

/* ── Talk Overlay (own DOM, separate from brain view) ── */
#shela-talk-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  z-index: 99998;
  background: radial-gradient(ellipse at center, rgba(20, 14, 40, 0.95), rgba(8, 4, 20, 0.99));
  display: none;
  align-items: center;
  justify-content: center;
}
#shela-talk-overlay.open { display: flex; }
#shela-talk-canvas {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  margin: 0;
  padding: 0;
}
#shela-talk-status {
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(220, 200, 255, 0.65);
  z-index: 3;
}
#shela-talk-caption {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 80%;
  text-align: center;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: rgba(255, 240, 250, 0.95);
  z-index: 3;
  opacity: 0.95;
}
#shela-talk-end-btn,
#shela-talk-pause-btn,
#shela-talk-close-btn {
  position: absolute;
  top: 24px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: rgba(240,220,255,0.85);
  cursor: pointer;
  z-index: 4;
  transition: all 0.2s;
}
#shela-talk-end-btn {
  right: 116px;
  height: 38px;
  padding: 0 14px;
  border-radius: 19px;
  background: linear-gradient(135deg, rgba(255,80,80,0.25), rgba(220,40,80,0.25));
  border-color: rgba(255,100,100,0.4);
  color: rgba(255,200,200,0.95);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
}
#shela-talk-end-btn:hover {
  background: linear-gradient(135deg, rgba(255,100,100,0.5), rgba(220,60,100,0.5));
  color: white;
}
#shela-talk-pause-btn {
  right: 70px;
  width: 38px;
  height: 38px;
  font-size: 14px;
}
#shela-talk-pause-btn.paused {
  background: rgba(255,200,80,0.2);
  border-color: rgba(255,200,80,0.45);
  color: rgba(255,220,130,0.95);
}
#shela-talk-close-btn {
  right: 24px;
  width: 38px;
  height: 38px;
  font-size: 22px;
  line-height: 1;
}
#shela-talk-end-btn:hover, #shela-talk-pause-btn:hover, #shela-talk-close-btn:hover {
  background: rgba(255,255,255,0.1);
  color: white;
}

/* ── Brain View header button — premium ── */
.shela-brain-view-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(180, 220, 255, 0.12), rgba(120, 140, 220, 0.06) 60%, transparent);
  border: 1px solid rgba(180, 220, 255, 0.28);
  cursor: pointer;
  margin: 0 4px;
  padding: 0;
  position: relative;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 12px rgba(100, 140, 220, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.shela-brain-view-btn svg {
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 1px 2px rgba(40, 60, 120, 0.45));
}
.shela-brain-view-btn:hover {
  background: radial-gradient(circle at 30% 30%, rgba(180, 220, 255, 0.22), rgba(140, 160, 240, 0.12) 60%, transparent);
  border-color: rgba(200, 230, 255, 0.55);
  box-shadow: 0 4px 18px rgba(100, 160, 240, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transform: scale(1.06);
}
.shela-brain-view-btn.active {
  background: radial-gradient(circle at 30% 30%, rgba(180, 220, 255, 0.32), rgba(140, 180, 240, 0.22) 60%, rgba(100, 140, 220, 0.12));
  border-color: rgba(220, 240, 255, 0.7);
  box-shadow: 0 0 18px 2px rgba(140, 180, 240, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

#shela-talk-mode-label {
  position: absolute;
  top: 28px;
  left: 32px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(220, 200, 255, 0.55);
  z-index: 3;
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(180, 100, 255, 0.18), rgba(255, 100, 200, 0.18));
  border: 1px solid rgba(220, 140, 255, 0.3);
}

/* ── Stage badge: hint that it's hoverable ── */
#brain-stage {
  cursor: help;
  position: absolute;
}
#brain-stage::after {
  content: " ⓘ";
  font-size: 9px;
  opacity: 0.5;
  margin-left: 4px;
}

/* ── Mode-specific legends at bottom of brain overlay ── */
.brain-mode-legend {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 760px;
  width: calc(100% - 48px);
  font-family: "Inter", system-ui, sans-serif;
  color: rgba(220, 200, 255, 0.85);
  z-index: 4;
  text-align: center;
}
.brain-mode-legend[hidden] { display: none; }
.brain-legend-summary {
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: rgba(220, 200, 255, 0.7);
  margin-bottom: 8px;
  padding: 0 8px;
}
.brain-legend-summary strong {
  color: rgba(255, 240, 250, 0.95);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 9px;
  margin-right: 6px;
}
.brain-legend-toggle {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(180, 140, 255, 0.25);
  color: rgba(220, 200, 255, 0.85);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s;
}
.brain-legend-toggle:hover {
  background: rgba(180, 140, 255, 0.15);
  color: white;
}
.brain-legend-detail {
  margin-top: 12px;
  padding: 14px 18px;
  background: rgba(20, 14, 40, 0.85);
  border: 1px solid rgba(180, 140, 255, 0.18);
  border-radius: 12px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 24px;
  font-size: 11px;
  line-height: 1.5;
  text-align: left;
}
.brain-legend-detail div {
  display: flex;
  align-items: center;
  gap: 8px;
}
.brain-legend-detail strong {
  color: rgba(255, 240, 250, 0.95);
  font-weight: 600;
  margin-right: 4px;
}
.brain-legend-detail .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 8px currentColor;
}
.brain-legend-detail .line-sample {
  width: 28px;
  height: 2px;
  border-radius: 1px;
  flex-shrink: 0;
}
.brain-legend-detail .line-sample.dim {
  opacity: 0.7;
}
.brain-legend-detail .orbit-tip {
  grid-column: 1 / -1;
  justify-content: center;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(180, 140, 255, 0.12);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: rgba(220, 200, 255, 0.6);
}
.brain-legend-detail .orbit-tip strong {
  color: rgba(255, 240, 250, 0.85);
  font-weight: 600;
  margin: 0 2px;
}
@media (max-width: 700px) {
  .brain-legend-detail {
    grid-template-columns: 1fr;
  }
}