/* ==========================================================================
   HΛI LIVE STRATEGY MIND MAP & AI WORKFLOW VISUALIZATION V4.1
   Real Browser-Visible Process Flow — GPU Accelerated Living Pipeline
   ========================================================================== */

:root {
  --mm-bg: #070b12;
  --mm-surface: #0c121e;
  --mm-surface-elevated: #111a2c;
  --mm-surface-hover: #17243c;
  --mm-surface-active: #1c2b48;
  --mm-border: #1a2740;
  --mm-border-glow: rgba(0, 229, 255, 0.4);
  
  --mm-cyan: #00e5ff;
  --mm-cyan-glow: rgba(0, 229, 255, 0.8);
  --mm-emerald: #00e676;
  --mm-emerald-glow: rgba(0, 230, 118, 0.8);
  --mm-rose: #ff1744;
  --mm-rose-glow: rgba(255, 23, 68, 0.8);
  --mm-amber: #ffab00;
  --mm-amber-glow: rgba(255, 171, 0, 0.8);
  --mm-violet: #b388ff;
  --mm-violet-glow: rgba(179, 136, 255, 0.8);
  --mm-blue: #00b0ff;
  --mm-blue-glow: rgba(0, 176, 255, 0.8);
  
  --mm-text-bright: #ffffff;
  --mm-text-muted: #94a3b8;
  --mm-text-dim: #64748b;
  
  --mm-font-mono: 'JetBrains Mono', monospace;
  --mm-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mm-font-heading: 'Space Grotesk', 'Inter Tight', sans-serif;
}

/* Master Container */
.hai-mind-map-card {
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  position: relative;
  margin-bottom: 24px;
}

/* Header */
.hai-mind-map-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--mm-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: linear-gradient(180deg, rgba(17, 26, 44, 0.98) 0%, rgba(12, 18, 30, 0.99) 100%);
}

.hai-header-title-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hai-header-logo-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.3) 0%, rgba(179, 136, 255, 0.3) 100%);
  border: 1.5px solid var(--mm-cyan);
  box-shadow: 0 0 20px var(--mm-cyan-glow);
  color: #fff;
  font-family: var(--mm-font-heading);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.5px;
}

.hai-header-headings h2 {
  font-family: var(--mm-font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--mm-text-bright);
  letter-spacing: 0.3px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hai-header-headings p {
  font-family: var(--mm-font-sans);
  font-size: 12px;
  color: var(--mm-text-muted);
  margin: 3px 0 0 0;
}

/* Header Controls */
.hai-map-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hai-ctrl-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--mm-border);
  color: var(--mm-text-muted);
  padding: 7px 13px;
  border-radius: 6px;
  font-family: var(--mm-font-mono);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.hai-ctrl-btn:hover {
  background: rgba(0, 229, 255, 0.15);
  color: var(--mm-text-bright);
  border-color: var(--mm-cyan);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.25);
}

.hai-ctrl-btn.active, .hai-ctrl-btn.paused {
  background: rgba(255, 171, 0, 0.25);
  color: var(--mm-amber);
  border-color: var(--mm-amber);
  box-shadow: 0 0 12px var(--mm-amber-glow);
}

/* Active Pipeline Flow Breadcrumb Bar */
.hai-flow-pipeline-bar {
  display: flex;
  align-items: center;
  background: rgba(8, 12, 20, 0.98);
  border-bottom: 1px solid var(--mm-border);
  padding: 9px 16px;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
}

.hai-flow-label {
  font-family: var(--mm-font-mono);
  font-size: 10.5px;
  font-weight: 800;
  color: var(--mm-cyan);
  margin-right: 8px;
  white-space: nowrap;
  letter-spacing: 0.6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.hai-flow-step {
  font-family: var(--mm-font-mono);
  font-size: 9.5px;
  font-weight: 600;
  padding: 3.5px 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--mm-text-muted);
  border: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.3s ease;
}

.hai-flow-step.active {
  color: var(--mm-text-bright);
  background: rgba(0, 229, 255, 0.14);
  border-color: rgba(0, 229, 255, 0.45);
}

.hai-flow-step.current {
  color: #fff;
  background: rgba(0, 230, 118, 0.28);
  border-color: var(--mm-emerald);
  box-shadow: 0 0 12px var(--mm-emerald-glow);
}

.hai-flow-arrow {
  color: var(--mm-text-dim);
  font-size: 9px;
  margin: 0 1px;
}

/* Decision Status Bar */
.hai-decision-bar {
  padding: 12px 20px;
  background: rgba(10, 15, 26, 0.92);
  border-bottom: 1px solid var(--mm-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.hai-decision-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 20px;
  font-family: var(--mm-font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.hai-decision-pill.buy {
  background: rgba(0, 230, 118, 0.22);
  color: var(--mm-emerald);
  border: 1.5px solid var(--mm-emerald);
  box-shadow: 0 0 18px var(--mm-emerald-glow);
}

.hai-decision-pill.sell {
  background: rgba(255, 23, 68, 0.22);
  color: var(--mm-rose);
  border: 1.5px solid var(--mm-rose);
  box-shadow: 0 0 18px var(--mm-rose-glow);
}

.hai-decision-pill.hold, .hai-decision-pill.waiting {
  background: rgba(255, 171, 0, 0.2);
  color: var(--mm-amber);
  border: 1.5px solid var(--mm-amber);
  box-shadow: 0 0 14px var(--mm-amber-glow);
}

.hai-decision-meta {
  display: flex;
  align-items: center;
  gap: 18px;
}

.hai-decision-meta-item {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  color: var(--mm-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.hai-decision-meta-item .val {
  font-weight: 700;
  color: var(--mm-text-bright);
}

/* Workspace Canvas */
.hai-map-canvas-container {
  position: relative;
  width: 100%;
  min-height: 580px;
  background: radial-gradient(circle at 50% 50%, rgba(17, 26, 44, 0.5) 0%, rgba(7, 11, 18, 0.99) 100%);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 34px 24px;
}

/* SVG Layer with Highest Visibility */
.hai-map-svg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}

/* Base Connector Pipes */
.hai-pipe-bg {
  stroke: #121c2d;
  stroke-width: 6;
  fill: none;
  stroke-linecap: round;
}

/* Active Flow Pipes with Continuous Directional Dash Velocity */
.hai-pipe-active {
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 10 14;
  animation: hai-pipe-dash 1.2s linear infinite;
  transition: stroke 0.3s ease;
}

@keyframes hai-pipe-dash {
  from { stroke-dashoffset: 24; }
  to { stroke-dashoffset: 0; }
}

.hai-pipe-active.cyan { stroke: var(--mm-cyan); filter: drop-shadow(0 0 7px var(--mm-cyan-glow)); }
.hai-pipe-active.emerald { stroke: var(--mm-emerald); filter: drop-shadow(0 0 7px var(--mm-emerald-glow)); }
.hai-pipe-active.violet { stroke: var(--mm-violet); filter: drop-shadow(0 0 7px var(--mm-violet-glow)); }
.hai-pipe-active.amber { stroke: var(--mm-amber); filter: drop-shadow(0 0 7px var(--mm-amber-glow)); }
.hai-pipe-active.rose { stroke: var(--mm-rose); filter: drop-shadow(0 0 7px var(--mm-rose-glow)); }
.hai-pipe-active.blue { stroke: var(--mm-blue); filter: drop-shadow(0 0 7px var(--mm-blue-glow)); }
.hai-pipe-active.telemetry { stroke: #3f5d94; stroke-dasharray: 6 6; }

/* Moving Luminous Comet System */
.hai-packet-wrap {
  pointer-events: none;
}

/* Outer High-Luminance Radiant Aura */
.hai-packet-aura {
  pointer-events: none;
  opacity: 0.9;
}
.hai-packet-aura.cyan { fill: #00e5ff; filter: drop-shadow(0 0 14px #00e5ff); }
.hai-packet-aura.emerald { fill: #00e676; filter: drop-shadow(0 0 14px #00e676); }
.hai-packet-aura.violet { fill: #b388ff; filter: drop-shadow(0 0 14px #b388ff); }
.hai-packet-aura.amber { fill: #ffab00; filter: drop-shadow(0 0 14px #ffab00); }
.hai-packet-aura.rose { fill: #ff1744; filter: drop-shadow(0 0 14px #ff1744); }
.hai-packet-aura.blue { fill: #00b0ff; filter: drop-shadow(0 0 14px #00b0ff); }

/* Intermediate Saturated Body */
.hai-packet-body {
  pointer-events: none;
  opacity: 0.95;
}
.hai-packet-body.cyan { fill: #00e5ff; filter: drop-shadow(0 0 8px #00e5ff); }
.hai-packet-body.emerald { fill: #00e676; filter: drop-shadow(0 0 8px #00e676); }
.hai-packet-body.violet { fill: #b388ff; filter: drop-shadow(0 0 8px #b388ff); }
.hai-packet-body.amber { fill: #ffab00; filter: drop-shadow(0 0 8px #ffab00); }
.hai-packet-body.rose { fill: #ff1744; filter: drop-shadow(0 0 8px #ff1744); }
.hai-packet-body.blue { fill: #00b0ff; filter: drop-shadow(0 0 8px #00b0ff); }

/* Blazing White-Hot Core */
.hai-packet-core {
  pointer-events: none;
  fill: #ffffff;
  filter: drop-shadow(0 0 5px #ffffff);
}

/* Trailing Comet Spark Particles */
.hai-packet-tail {
  pointer-events: none;
}
.hai-packet-tail.t1 { opacity: 0.80; }
.hai-packet-tail.t2 { opacity: 0.55; }
.hai-packet-tail.t3 { opacity: 0.35; }
.hai-packet-tail.cyan { fill: #00e5ff; }
.hai-packet-tail.emerald { fill: #00e676; }
.hai-packet-tail.violet { fill: #b388ff; }
.hai-packet-tail.amber { fill: #ffab00; }
.hai-packet-tail.rose { fill: #ff1744; }
.hai-packet-tail.blue { fill: #00b0ff; }

/* 14-Node HTML Overlay Grid (7x2 Desktop) */
.hai-nodes-layer {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(7, minmax(170px, 1fr));
  gap: 36px 24px;
  width: 100%;
  min-width: 1260px;
}

/* Individual Module Node Card */
.hai-node-card {
  background: var(--mm-surface-elevated);
  border: 1px solid var(--mm-border);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
  user-select: none;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}

.hai-node-card:hover {
  transform: translateY(-3px);
  border-color: var(--mm-cyan);
  box-shadow: 0 8px 24px rgba(0, 229, 255, 0.3);
}

.hai-node-card.selected {
  border-color: var(--mm-cyan);
  box-shadow: 0 0 0 2px var(--mm-cyan-glow), 0 8px 24px rgba(0, 0, 0, 0.6);
  background: var(--mm-surface-hover);
}

/* Top bar of node */
.hai-node-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.hai-node-icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--mm-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.hai-node-icon-wrap svg {
  width: 18px;
  height: 18px;
}

.hai-node-badge {
  font-family: var(--mm-font-mono);
  font-size: 8.5px;
  font-weight: 700;
  padding: 2.5px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.hai-node-badge.ok {
  background: rgba(0, 230, 118, 0.18);
  color: var(--mm-emerald);
  border: 1px solid rgba(0, 230, 118, 0.5);
}

.hai-node-badge.warn {
  background: rgba(255, 171, 0, 0.18);
  color: var(--mm-amber);
  border: 1px solid rgba(255, 171, 0, 0.5);
}

.hai-node-badge.err {
  background: rgba(255, 23, 68, 0.18);
  color: var(--mm-rose);
  border: 1px solid rgba(255, 23, 68, 0.5);
}

.hai-node-badge.advisory {
  background: rgba(179, 136, 255, 0.18);
  color: var(--mm-violet);
  border: 1px solid rgba(179, 136, 255, 0.5);
}

.hai-node-badge.idle {
  background: rgba(148, 163, 184, 0.1);
  color: var(--mm-text-dim);
  border: 1px solid rgba(148, 163, 184, 0.2);
}

/* Titles */
.hai-node-title {
  font-family: var(--mm-font-heading);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--mm-text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.hai-node-sub {
  font-family: var(--mm-font-mono);
  font-size: 9.5px;
  color: var(--mm-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Internal Visual Modules Slot */
.hai-node-visual-slot {
  height: 48px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  overflow: hidden;
  position: relative;
}

/* 1. MT5 ECG Heartbeat Wave with Sweeping Dot */
.hai-ecg-svg {
  width: 100%;
  height: 32px;
}
.hai-ecg-path {
  stroke: var(--mm-emerald);
  stroke-width: 2.2;
  fill: none;
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: hai-ecg-sweep 1.6s linear infinite;
}
@keyframes hai-ecg-sweep {
  0% { stroke-dashoffset: 120; }
  100% { stroke-dashoffset: 0; }
}
.hai-ecg-beacon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mm-emerald);
  box-shadow: 0 0 10px var(--mm-emerald);
  animation: hai-heartbeat 1.6s ease-in-out infinite;
}
@keyframes hai-heartbeat {
  0%, 100% { transform: scale(0.8); opacity: 0.6; }
  50% { transform: scale(1.3); opacity: 1.0; }
}

/* 2. Tick Soundwave Bars */
.hai-wave-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 28px;
}
.hai-wave-bar {
  width: 5px;
  background: var(--mm-cyan);
  border-radius: 2px;
  box-shadow: 0 0 6px var(--mm-cyan-glow);
  animation: hai-bar-dance 1.1s ease-in-out infinite alternate;
}
.hai-wave-bar:nth-child(1) { height: 10px; animation-delay: 0.1s; }
.hai-wave-bar:nth-child(2) { height: 22px; animation-delay: 0.35s; }
.hai-wave-bar:nth-child(3) { height: 14px; animation-delay: 0.2s; }
.hai-wave-bar:nth-child(4) { height: 26px; animation-delay: 0.45s; }
.hai-wave-bar:nth-child(5) { height: 16px; animation-delay: 0.15s; }
@keyframes hai-bar-dance {
  0% { transform: scaleY(0.35); opacity: 0.5; }
  100% { transform: scaleY(1.0); opacity: 1.0; }
}

/* 3. Renko Bricks 3D Visualizer (Master 0.10% vs Entry 0.05%) */
.hai-renko-bricks-wrap {
  display: flex;
  align-items: flex-end;
  gap: 5px;
}
.hai-mini-brick {
  width: 18px;
  height: 14px;
  border-radius: 3px;
  background: rgba(0, 176, 255, 0.25);
  border: 1px solid var(--mm-blue);
}
.hai-mini-brick.master {
  background: rgba(0, 176, 255, 0.35);
  border-color: var(--mm-blue);
  box-shadow: 0 0 8px var(--mm-blue-glow);
}
.hai-mini-brick.entry {
  background: rgba(0, 230, 118, 0.35);
  border-color: var(--mm-emerald);
  box-shadow: 0 0 8px var(--mm-emerald-glow);
}
.hai-mini-brick.forming {
  background: var(--mm-cyan);
  box-shadow: 0 0 10px var(--mm-cyan-glow);
  animation: hai-brick-scale 1.5s ease-in-out infinite alternate;
}
@keyframes hai-brick-scale {
  0% { opacity: 0.3; transform: scale(0.7); }
  100% { opacity: 1.0; transform: scale(1.0); }
}

/* 4. SuperTrend Chevron Cascade */
.hai-chevron-cascade {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hai-chevron-arrow {
  font-size: 15px;
  font-weight: 800;
  animation: hai-chevron-pulse 1.1s ease-in-out infinite alternate;
}
.hai-chevron-arrow:nth-child(1) { animation-delay: 0.1s; }
.hai-chevron-arrow:nth-child(2) { animation-delay: 0.25s; }
.hai-chevron-arrow:nth-child(3) { animation-delay: 0.4s; }
.hai-chevron-arrow.bearish { color: var(--mm-rose); text-shadow: 0 0 8px var(--mm-rose); }
.hai-chevron-arrow.bullish { color: var(--mm-emerald); text-shadow: 0 0 8px var(--mm-emerald); }
@keyframes hai-chevron-pulse {
  0% { transform: scale(0.8); opacity: 0.4; }
  100% { transform: scale(1.2); opacity: 1.0; }
}

/* 5. Entry SuperTrend Micro Reticle */
.hai-entry-reticle {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px dashed var(--mm-emerald);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: hai-spin 6s linear infinite;
}
.hai-entry-reticle-center {
  width: 6px;
  height: 6px;
  background: var(--mm-emerald);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--mm-emerald);
  animation: hai-heartbeat 1.2s ease-in-out infinite;
}

/* 6. Signal Confluence Orbit Rings */
.hai-orbit-core {
  position: relative;
  width: 30px;
  height: 30px;
  border: 1.5px dashed var(--mm-cyan);
  border-radius: 50%;
  animation: hai-spin 3.5s linear infinite;
}
.hai-orbit-dot-1 {
  position: absolute;
  top: -3px;
  left: 12px;
  width: 7px;
  height: 7px;
  background: var(--mm-emerald);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--mm-emerald);
}
.hai-orbit-dot-2 {
  position: absolute;
  bottom: -3px;
  right: 12px;
  width: 7px;
  height: 7px;
  background: var(--mm-blue);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--mm-blue);
}
@keyframes hai-spin {
  100% { transform: rotate(360deg); }
}

/* 7. Market Regime Radar Sweep & Oscillating Band */
.hai-radar-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--mm-border);
  position: relative;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.12) 0%, transparent 70%);
}
.hai-radar-sweep {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border-top: 2.5px solid var(--mm-amber);
  animation: hai-spin 2s linear infinite;
}
.hai-chop-oscillate {
  display: flex;
  align-items: center;
  gap: 4px;
}
.hai-chop-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mm-amber);
  box-shadow: 0 0 6px var(--mm-amber);
  animation: hai-chop-bounce 1.2s ease-in-out infinite alternate;
}
.hai-chop-dot:nth-child(2) { animation-delay: 0.2s; }
.hai-chop-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes hai-chop-bounce {
  0% { transform: translateX(-4px); opacity: 0.4; }
  100% { transform: translateX(4px); opacity: 1.0; }
}

/* 8. Dedicated Ollama Neural AI Node */
.hai-ollama-halo-wrap {
  position: relative;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hai-ollama-halo {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--mm-violet);
  border-right-color: var(--mm-cyan);
  box-shadow: 0 0 12px var(--mm-violet-glow);
  animation: hai-spin 2.5s linear infinite;
}
.hai-ollama-core-text {
  font-family: var(--mm-font-mono);
  font-size: 8px;
  font-weight: 800;
  color: var(--mm-violet);
}

/* 9. AI Specialist Ensemble Micro Chips */
.hai-ai-chips-grid {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  justify-content: center;
}
.hai-ai-chip {
  font-family: var(--mm-font-mono);
  font-size: 8px;
  font-weight: 700;
  padding: 1.5px 4px;
  border-radius: 3px;
  background: rgba(179, 136, 255, 0.18);
  color: var(--mm-violet);
  border: 1px solid rgba(179, 136, 255, 0.35);
  animation: hai-chip-glow 2s ease-in-out infinite alternate;
}
.hai-ai-chip:nth-child(1) { animation-delay: 0.1s; }
.hai-ai-chip:nth-child(2) { animation-delay: 0.3s; }
.hai-ai-chip:nth-child(3) { animation-delay: 0.5s; }
.hai-ai-chip:nth-child(4) { animation-delay: 0.7s; }
.hai-ai-chip:nth-child(5) { animation-delay: 0.9s; }
@keyframes hai-chip-glow {
  0% { border-color: rgba(179, 136, 255, 0.2); }
  100% { border-color: var(--mm-violet); box-shadow: 0 0 6px var(--mm-violet-glow); }
}

/* 10. The 22 Miniature Risk Gates Component (Section 17) */
.hai-22-gates-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}
.hai-22-gates-grid {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 2px;
  width: 100%;
}
.hai-gate-pip {
  font-family: var(--mm-font-mono);
  font-size: 6.5px;
  font-weight: 700;
  padding: 1px 0;
  text-align: center;
  border-radius: 2px;
  background: rgba(0, 230, 118, 0.2);
  color: var(--mm-emerald);
  border: 1px solid rgba(0, 230, 118, 0.5);
  transition: all 0.2s ease;
}
.hai-gate-pip.active-scan {
  background: var(--mm-emerald);
  color: #000;
  box-shadow: 0 0 6px var(--mm-emerald);
}

/* 11. Demo Execution Lock Beacon */
.hai-exec-terminal {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mm-font-mono);
  font-size: 9.5px;
  color: var(--mm-emerald);
}
.hai-lock-beacon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mm-emerald);
  box-shadow: 0 0 8px var(--mm-emerald);
  animation: hai-heartbeat 1.4s ease-in-out infinite;
}

/* 12. Position & Trailing SL Live Range Slider (Section 18-22) */
.hai-trailing-visual-track {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-family: var(--mm-font-mono);
  font-size: 8.5px;
}
.hai-pos-pill {
  padding: 2px 5px;
  border-radius: 3px;
  font-weight: 700;
}
.hai-pos-pill.sell { background: rgba(255, 23, 68, 0.25); color: var(--mm-rose); border: 1px solid var(--mm-rose); }
.hai-pos-pill.buy { background: rgba(0, 230, 118, 0.25); color: var(--mm-emerald); border: 1px solid var(--mm-emerald); }
.hai-trailing-arrow {
  color: var(--mm-cyan);
  font-weight: 800;
  animation: hai-trailing-slide 1.2s ease-in-out infinite alternate;
}
@keyframes hai-trailing-slide {
  0% { transform: translateX(-3px); }
  100% { transform: translateX(3px); }
}

/* 13. Audit Journal Sync Badge */
.hai-audit-sync-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mm-font-mono);
  font-size: 9px;
  color: var(--mm-cyan);
}

/* Node Footer Metrics */
.hai-node-metrics {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 2px;
  padding-top: 5px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-family: var(--mm-font-mono);
  font-size: 10.5px;
}

.hai-node-metrics .val {
  font-weight: 600;
  color: var(--mm-text-bright);
}

.hai-node-metrics .val.emerald { color: var(--mm-emerald); }
.hai-node-metrics .val.cyan { color: var(--mm-cyan); }
.hai-node-metrics .val.rose { color: var(--mm-rose); }
.hai-node-metrics .val.amber { color: var(--mm-amber); }
.hai-node-metrics .val.violet { color: var(--mm-violet); }
.hai-node-metrics .val.blue { color: var(--mm-blue); }

/* Slide-Out Inspector Drawer */
.hai-drawer-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 10;
}
.hai-drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.hai-node-drawer {
  position: absolute;
  top: 0;
  right: -360px;
  width: 340px;
  height: 100%;
  background: var(--mm-surface-elevated);
  border-left: 1px solid var(--mm-border);
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.7);
  z-index: 11;
  transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}
.hai-node-drawer.open {
  right: 0;
}

.hai-drawer-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--mm-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hai-drawer-header h3 {
  margin: 0;
  font-family: var(--mm-font-heading);
  font-size: 16px;
  color: var(--mm-text-bright);
}
.hai-drawer-close {
  background: none;
  border: none;
  color: var(--mm-text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
}
.hai-drawer-close:hover {
  color: #fff;
}

.hai-drawer-body {
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hai-drawer-field label {
  font-family: var(--mm-font-mono);
  font-size: 10px;
  color: var(--mm-text-muted);
  text-transform: uppercase;
  margin-bottom: 4px;
  display: block;
}
.hai-drawer-field .val {
  font-family: var(--mm-font-mono);
  font-size: 12px;
  color: var(--mm-text-bright);
  background: rgba(0, 0, 0, 0.3);
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Live Event Stream Ticker */
.hai-live-event-ticker {
  background: rgba(6, 10, 17, 0.98);
  border-top: 1px solid var(--mm-border);
  padding: 9px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.ticker-badge {
  font-family: var(--mm-font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--mm-cyan);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.dot-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mm-emerald);
  box-shadow: 0 0 8px var(--mm-emerald);
  animation: hai-heartbeat 1.5s infinite;
}

.ticker-content {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  color: var(--mm-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* Reduced Motion Mode */
.reduced-motion .hai-pipe-active {
  animation: none !important;
}
.reduced-motion .hai-packet-wrap {
  display: none !important;
}
.reduced-motion * {
  animation-duration: 0.01ms !important;
}

/* Responsive Breakpoints */
@media (max-width: 1400px) {
  .hai-nodes-layer {
    grid-template-columns: repeat(7, minmax(150px, 1fr));
    gap: 30px 18px;
    min-width: 1150px;
  }
}

@media (max-width: 1024px) {
  .hai-nodes-layer {
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    min-width: 100%;
  }
}

@media (max-width: 768px) {
  .hai-nodes-layer {
    grid-template-columns: 1fr;
    min-width: 100%;
  }
  .hai-flow-pipeline-bar {
    display: none;
  }
}