/* ─── PRISM CanvasFlow — live simulation visual layer ──────────────────────────
   Activated by body.sim-running (set by canvas-flow.js on simulate).
   All effects are subtle engineering-OS glows — no gaming/neon aesthetics.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Traffic flow: marching dashes DISABLED ────────────────────────────────── */
/* Dashed arrow animations removed — no canvas flow animation on simulate. */

/* ── Node simulation state classes ────────────────────────────────────────── */

/* Healthy: soft green ring that breathes slowly */
@keyframes cf-breathe-green {
  0%, 100% {
    box-shadow:
      0 2px 8px rgba(0,0,0,0.10),
      0 0 0 0   rgba(34,197,94,0);
  }
  50% {
    box-shadow:
      0 2px 8px rgba(0,0,0,0.10),
      0 0 0 3px rgba(34,197,94,0.22),
      0 4px 16px rgba(34,197,94,0.09);
  }
}

/* Active/high-traffic: cyan ring, faster rhythm */
@keyframes cf-breathe-cyan {
  0%, 100% {
    box-shadow:
      0 2px 8px rgba(0,0,0,0.10),
      0 0 0 0   rgba(56,189,248,0);
  }
  50% {
    box-shadow:
      0 2px 8px rgba(0,0,0,0.10),
      0 0 0 3px rgba(56,189,248,0.28),
      0 6px 20px rgba(56,189,248,0.13);
  }
}

/* Bottleneck high: amplified red pulse on top of existing btk-high styling */
@keyframes cf-pulse-red {
  0%, 100% {
    box-shadow:
      0 0 0 3px rgba(220,38,38,0.28),
      0 8px 24px rgba(220,38,38,0.22),
      0 2px 8px rgba(0,0,0,0.14);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(220,38,38,0.36),
      0 12px 32px rgba(220,38,38,0.30),
      0 2px 8px rgba(0,0,0,0.14);
  }
}

/* Bottleneck medium: amber pulse */
@keyframes cf-pulse-amber {
  0%, 100% {
    box-shadow:
      0 0 0 3px rgba(217,119,6,0.28),
      0 8px 24px rgba(217,119,6,0.20),
      0 2px 8px rgba(0,0,0,0.14);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(217,119,6,0.36),
      0 12px 32px rgba(217,119,6,0.26),
      0 2px 8px rgba(0,0,0,0.14);
  }
}

.node.sim-healthy {
  animation: cf-breathe-green 3s ease-in-out infinite;
}

.node.sim-active {
  animation: cf-breathe-cyan 1.8s ease-in-out infinite;
}

/* Intensify existing btk-* glows with rhythm during simulation */
body.sim-running .node.btk-high {
  animation: cf-pulse-red 0.9s ease-in-out infinite !important;
}

body.sim-running .node.btk-medium {
  animation: cf-pulse-amber 1.3s ease-in-out infinite !important;
}

/* ── Simulation status badge ───────────────────────────────────────────────── */
.cf-status-badge {
  position: absolute;
  bottom: 16px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px 5px 10px;
  background: rgba(10, 17, 34, 0.80);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #94a3b8;
  pointer-events: none;
  user-select: none;
  z-index: 50;
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.cf-status-badge.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.cf-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #475569;
  flex-shrink: 0;
  transition: background 0.3s ease, transform 0.3s ease;
}

.cf-status-text {
  transition: color 0.3s ease;
}

/* Simulating */
.cf-status-badge[data-state="simulating"] .cf-status-dot {
  background: #3b82f6;
  animation: cf-dot-blink 0.85s ease-in-out infinite;
}
.cf-status-badge[data-state="simulating"] .cf-status-text {
  color: #93c5fd;
}

/* Stable */
.cf-status-badge[data-state="stable"] .cf-status-dot {
  background: #22c55e;
}
.cf-status-badge[data-state="stable"] .cf-status-text {
  color: #86efac;
}

/* Under load */
.cf-status-badge[data-state="under-load"] .cf-status-dot {
  background: #f59e0b;
}
.cf-status-badge[data-state="under-load"] .cf-status-text {
  color: #fcd34d;
}

/* Bottleneck detected */
.cf-status-badge[data-state="bottleneck"] .cf-status-dot {
  background: #ef4444;
  animation: cf-dot-blink 0.7s ease-in-out infinite;
}
.cf-status-badge[data-state="bottleneck"] .cf-status-text {
  color: #fca5a5;
}

/* In practice-mode or learn-mode, lift badge above the canvas dock */
body.practice-mode .cf-status-badge,
body.learn-mode-active .cf-status-badge {
  bottom: 88px;
}

/* Idle — fully hidden */
.cf-status-badge[data-state="idle"],
.cf-status-badge:not([data-state]) {
  opacity: 0 !important;
  pointer-events: none;
}

@keyframes cf-dot-blink {
  0%, 100% { opacity: 1;   transform: scale(1);   }
  50%       { opacity: 0.4; transform: scale(0.68); }
}

/* ── Simulate button polish during loading ─────────────────────────────────── */
#simulate.is-loading {
  cursor: not-allowed;
  opacity: 0.82;
}

/* ── Connection paths: smoother base transitions ───────────────────────────── */
/* Only apply when NOT in sim-running, to avoid fighting with the animation */
body:not(.sim-running) #connections .connection-path {
  transition: stroke 0.25s ease, opacity 0.25s ease, stroke-width 0.2s ease;
}