/* =========================================================
   COSMIC SOLAR SYSTEM — shared component
   Used on both landing (/) and demo (/demo). Depends on CSS
   tokens defined in landing.css (:root).
   ========================================================= */

.solar-system {
  position: relative;
  width: 100%;
  height: 440px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background-color: rgba(2, 3, 9, 0.55);
  overflow: visible;
  isolation: isolate;
}

/* Clipped inner layer holds the starfield so stars don't leak
   outside the panel but orbits themselves can breathe. */
.solar-system::before,
.solar-system::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.solar-system::before {
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(124, 58, 237, 0.12), transparent 75%),
    radial-gradient(circle at 20% 10%, rgba(34, 211, 238, 0.05), transparent 40%),
    radial-gradient(circle at 85% 85%, rgba(244, 114, 182, 0.05), transparent 40%);
}

.solar-system::after {
  background-image:
    radial-gradient(1px 1px at 22% 34%, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(1px 1px at 68% 18%, rgba(255,255,255,0.4), transparent 60%),
    radial-gradient(1px 1px at 48% 72%, rgba(255,255,255,0.45), transparent 60%),
    radial-gradient(1px 1px at 12% 80%, rgba(255,255,255,0.3), transparent 60%),
    radial-gradient(1px 1px at 82% 58%, rgba(255,255,255,0.35), transparent 60%),
    radial-gradient(1px 1px at 90% 30%, rgba(255,255,255,0.5), transparent 60%),
    radial-gradient(1px 1px at 30% 54%, rgba(255,255,255,0.3), transparent 60%);
  animation: solarStarDrift 50s linear infinite;
  opacity: 0.65;
}

@keyframes solarStarDrift {
  from { transform: translate(0, 0); }
  to   { transform: translate(-14px, -10px); }
}

/* Comet SVG sits BELOW the orbits/planets so trails don't
   cover the crew. */
.graph-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

/* =========================================================
   SUN (Leader)
   ========================================================= */
.sun-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 92px;
  height: 92px;
  border-radius: 50%;
  z-index: 4;
  background:
    radial-gradient(circle at 40% 38%, rgba(255, 236, 180, 0.95), rgba(251, 191, 36, 0.85) 30%, rgba(244, 114, 182, 0.55) 65%, rgba(124, 58, 237, 0.2) 100%);
  box-shadow:
    0 0 30px rgba(251, 191, 36, 0.55),
    0 0 60px rgba(244, 114, 182, 0.35),
    0 0 110px rgba(124, 58, 237, 0.3);
  animation: sunPulse 3.8s ease-in-out infinite;
}

.sun-core[data-hidden="1"] {
  display: none;
}

.sun-core::after {
  content: attr(data-name);
  position: absolute;
  left: 50%;
  bottom: -26px;
  transform: translateX(-50%);
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.5);
}

.sun-core.active {
  animation: sunPulse 1.6s ease-in-out infinite;
  box-shadow:
    0 0 40px rgba(255, 236, 180, 0.85),
    0 0 80px rgba(251, 191, 36, 0.55),
    0 0 140px rgba(244, 114, 182, 0.4);
}

@keyframes sunPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.15); }
}

/* =========================================================
   ORBITS — rotating containers that carry the planet.
   The planet counter-rotates at matching speed/phase so
   labels stay upright.
   ========================================================= */
.orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px dashed rgba(167, 139, 250, 0.18);
  z-index: 2;
  pointer-events: none;
  animation-name: orbitRotate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  will-change: transform;
}

@keyframes orbitRotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.planet-anchor {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-name: planetCounterRotate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  will-change: transform;
}

@keyframes planetCounterRotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(-360deg); }
}

.planet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 3;
  pointer-events: auto;
  cursor: default;
}

.planet-body {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  position: relative;
  background:
    radial-gradient(circle at 32% 32%, rgba(255,255,255,0.45), transparent 40%),
    radial-gradient(circle at 50% 50%, var(--planet-hue-1, #7c3aed), var(--planet-hue-2, #22d3ee) 120%);
  box-shadow:
    inset -4px -4px 8px rgba(0,0,0,0.45),
    0 0 18px rgba(167, 139, 250, 0.25);
  transition: box-shadow 0.3s ease, transform 0.25s ease;
}

.planet-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: rgba(234, 238, 252, 0.82);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(2, 3, 9, 0.75);
  border: 1px solid rgba(167, 139, 250, 0.2);
  white-space: nowrap;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.planet.active .planet-body {
  transform: scale(1.18);
  box-shadow:
    inset -4px -4px 8px rgba(0,0,0,0.45),
    0 0 24px rgba(167, 139, 250, 0.75),
    0 0 48px rgba(244, 114, 182, 0.45);
}

.planet.active .planet-label {
  color: var(--violet);
  border-color: rgba(167, 139, 250, 0.6);
  background: rgba(124, 58, 237, 0.22);
}

.planet.receiving .planet-body {
  box-shadow:
    inset -4px -4px 8px rgba(0,0,0,0.45),
    0 0 28px rgba(34, 211, 238, 0.8);
}

/* =========================================================
   COMET TRAIL (SVG path + travelling dot)
   ========================================================= */
.graph-arrow {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke: rgba(167, 139, 250, 0.7);
  filter: drop-shadow(0 0 4px rgba(167, 139, 250, 0.5));
}

.graph-arrow[data-leader="false"] {
  stroke: rgba(34, 211, 238, 0.7);
  filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.45));
}

.graph-dot {
  fill: #fef3c7;
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.95)) drop-shadow(0 0 16px rgba(244, 114, 182, 0.6));
}

.graph-dot[data-leader="false"] {
  fill: #e0f2fe;
  filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.9)) drop-shadow(0 0 16px rgba(124, 58, 237, 0.55));
}

/* =========================================================
   HALO — persistent marker that follows the current speaker.
   This is what the user reads as "this agent has the floor
   right now." On speaker change the instance briefly hides
   the halo, plays a transfer comet, then re-pins it to the
   new planet.
   ========================================================= */
.graph-halo {
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.35s ease;
}

.graph-halo[data-hidden="1"] {
  opacity: 0;
}

.graph-halo-ring {
  fill: none;
  stroke: rgba(34, 211, 238, 0.75);
  stroke-width: 1.6;
  stroke-dasharray: 3 5;
  filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.55)) drop-shadow(0 0 22px rgba(124, 58, 237, 0.35));
  animation: haloPulse 2.4s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}

.graph-halo[data-leader="true"] .graph-halo-ring {
  stroke: rgba(251, 191, 36, 0.85);
  filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.6)) drop-shadow(0 0 24px rgba(244, 114, 182, 0.4));
  r: 52; /* wider halo around the sun */
}

@keyframes haloPulse {
  0%, 100% { opacity: 0.7; stroke-width: 1.4; }
  50%      { opacity: 1;   stroke-width: 2.2; }
}

.graph-halo-satellite {
  animation: haloSatelliteOrbit 3.6s linear infinite;
  transform-origin: 0 0;
}

.graph-halo[data-leader="true"] .graph-halo-satellite-dot {
  fill: #fef3c7;
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.95));
}

.graph-halo-satellite-dot {
  fill: #e0f2fe;
  filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.9)) drop-shadow(0 0 14px rgba(124, 58, 237, 0.55));
}

@keyframes haloSatelliteOrbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* =========================================================
   SSA DECISION CHIP (shown in solar-system panel header)
   ========================================================= */
.ssa-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(167, 139, 250, 0.35);
  background: rgba(124, 58, 237, 0.12);
  color: var(--violet);
  font-family: var(--body);
  font-size: 0.82rem;
  transition: opacity 0.2s ease, border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.ssa-chip[data-hidden="1"] {
  opacity: 0;
  pointer-events: none;
}

.ssa-chip[data-reason="heartbeat"] {
  border-color: rgba(251, 191, 36, 0.55);
  background: rgba(251, 191, 36, 0.14);
  color: var(--gold);
}

.ssa-chip[data-reason="nomination"] {
  border-color: rgba(34, 211, 238, 0.55);
  background: rgba(34, 211, 238, 0.12);
  color: var(--cyan);
}

.ssa-chip[data-reason="fairness"] {
  border-color: rgba(52, 211, 153, 0.5);
  background: rgba(52, 211, 153, 0.12);
  color: var(--emerald);
}

.ssa-chip[data-reason="first_turn"] {
  border-color: rgba(244, 114, 182, 0.55);
  background: rgba(244, 114, 182, 0.14);
  color: var(--rose);
}