/* ==========================================================================
   AI CONSOLE — sitewide AI-presence components
   Covers: nav AI pulse badge, the homepage "Intelligence Layer" section
   (conversational command interface, predictive analytics cards, autonomous
   system monitoring, ML network visualization). Built entirely from the
   existing token system (tokens.css) so it reads as native to the site,
   not a bolted-on widget. Everything here is decorative/simulated — no
   real model calls — same spirit as the AI activity ticker already
   shipping on product-showcase.css.
   ========================================================================== */

/* ---- nav AI pulse badge ------------------------------------------------- */

.nav-ai-badge {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: rgba(255,255,255,0.03);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--silver);
  white-space: nowrap;
  overflow: hidden;
  max-width: 210px;
}

.nav-ai-badge .ai-pulse-dot { flex-shrink: 0; }
.nav-ai-badge span.badge-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}
.nav-ai-badge span.badge-text.fade { opacity: 0; }

@media (min-width: 1180px) {
  .nav-ai-badge { display: inline-flex; }
}

/* ---- generic AI pulse dot, reusable anywhere ---------------------------- */

.ai-pulse-dot {
  --pulse-color: var(--cyan);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pulse-color);
  position: relative;
  box-shadow: 0 0 8px 1px color-mix(in srgb, var(--pulse-color) 65%, transparent);
}

.ai-pulse-dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: var(--pulse-color);
  opacity: 0.5;
  animation: ai-pulse-ring 2s var(--ease-in-out) infinite;
}

@keyframes ai-pulse-ring {
  0% { transform: scale(0.5); opacity: 0.55; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* ==========================================================================
   Intelligence Layer — section shell
   ========================================================================== */

.intelligence-layer { padding: var(--space-7) 0; position: relative; }

.intel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

@media (min-width: 1024px) {
  .intel-grid {
    grid-template-columns: 1.15fr 0.85fr;
    grid-template-areas:
      "console  predictive"
      "monitor  network";
  }
  .intel-console { grid-area: console; }
  .intel-predictive { grid-area: predictive; }
  .intel-monitor { grid-area: monitor; }
  .intel-network { grid-area: network; }
}

.intel-panel {
  background: linear-gradient(165deg, var(--graphite), var(--ink-raised));
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  position: relative;
  overflow: hidden;
}

.intel-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: 16px;
}

.intel-panel-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--paper);
}

.intel-panel-title svg { width: 16px; height: 16px; color: var(--cyan); flex-shrink: 0; }

.intel-panel-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--silver-dim);
  padding: 4px 9px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
}

/* ==========================================================================
   Conversational command interface — mock terminal
   ========================================================================== */

.command-console {
  min-height: 260px;
  display: flex;
  flex-direction: column;
}

.command-log {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  margin-bottom: 14px;
}

.command-line { display: flex; gap: 10px; align-items: flex-start; }

.command-line .prompt-marker {
  flex-shrink: 0;
  color: var(--violet);
  font-weight: 600;
}

.command-line.is-response .prompt-marker { color: var(--cyan); }

.command-line .prompt-text { color: var(--paper-dim); }
.command-line.is-response .prompt-text { color: var(--silver); }

.command-line .type-cursor {
  display: inline-block;
  width: 6px;
  height: 13px;
  background: var(--cyan);
  margin-left: 2px;
  vertical-align: -2px;
  animation: type-cursor-blink 0.9s steps(1) infinite;
}

@keyframes type-cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.command-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: rgba(0,0,0,0.25);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--silver-dim);
}

.command-input-row .ai-pulse-dot { --pulse-color: var(--violet); }

/* ==========================================================================
   Predictive analytics cards
   ========================================================================== */

.predictive-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.predictive-card {
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  background: rgba(255,255,255,0.015);
  transition: border-color 0.3s ease, background 0.3s ease;
}

.predictive-card:hover { border-color: var(--hairline); background: rgba(255,255,255,0.03); }

.predictive-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}

.predictive-card-label { font-size: 12px; color: var(--paper-dim); font-weight: 500; }

.predictive-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
}

.predictive-trend.up { color: var(--cyan); }
.predictive-trend.down { color: var(--amber); }
.predictive-trend svg { width: 11px; height: 11px; }

.predictive-card-body { display: flex; align-items: flex-end; gap: 12px; }

.predictive-value {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--paper);
  white-space: nowrap;
}

.predictive-sparkline { flex: 1; height: 34px; }
.predictive-sparkline svg { width: 100%; height: 100%; display: block; }

.spark-path {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: spark-draw 1.6s var(--ease-out) forwards;
}

@keyframes spark-draw {
  to { stroke-dashoffset: 0; }
}

.predictive-confidence {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--silver-dim);
  letter-spacing: 0.03em;
}

/* ==========================================================================
   Autonomous system monitoring
   ========================================================================== */

.monitor-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.monitor-node {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.015);
}

.monitor-node-name { font-size: 11.5px; color: var(--paper-dim); flex: 1; }
.monitor-node-val { font-family: var(--font-mono); font-size: 11px; color: var(--silver); }

.monitor-log {
  border-top: 1px solid var(--hairline-soft);
  padding-top: 12px;
  height: 108px;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

.monitor-log-track {
  display: flex;
  flex-direction: column;
  gap: 9px;
  transition: transform 0.6s var(--ease-out);
}

.monitor-log-line {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--silver);
}

.monitor-log-line .log-time { color: var(--silver-dim); flex-shrink: 0; }
.monitor-log-line .log-tag {
  flex-shrink: 0;
  color: var(--cyan);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  border: 1px solid var(--cyan-dim);
  border-radius: 4px;
  padding: 1px 5px;
}

/* ==========================================================================
   ML network visualization — animated node graph, cinematic/decorative
   ========================================================================== */

.ml-network {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ml-network-canvas {
  flex: 1;
  min-height: 220px;
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline-soft);
  background: radial-gradient(circle at 30% 20%, rgba(139,124,246,0.08), transparent 55%),
              radial-gradient(circle at 75% 75%, rgba(95,212,216,0.07), transparent 55%);
  overflow: hidden;
  position: relative;
}

.ml-network-canvas svg { width: 100%; height: 100%; display: block; }

.ml-node {
  fill: var(--ink-raised);
  stroke-width: 1.4;
  animation: ml-node-pulse 3s ease-in-out infinite;
}

@keyframes ml-node-pulse {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

.ml-edge {
  fill: none;
  stroke-width: 0.8;
  stroke-dasharray: 3 5;
  animation: ml-edge-flow 2.4s linear infinite;
}

@keyframes ml-edge-flow {
  to { stroke-dashoffset: -16; }
}

.ml-network-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--silver-dim);
  letter-spacing: 0.03em;
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .ai-pulse-dot::after,
  .type-cursor,
  .spark-path,
  .ml-node,
  .ml-edge {
    animation: none;
  }
  .spark-path { stroke-dashoffset: 0; }
}