/* AOLytics — workflow n8n-like (V5 : clean rewrite, centrage calibré)
   ─────────────────────────────────────────────────────────────────
   Light theme. Canvas SVG + nœuds HTML positionnés en absolu sur un
   viewBox 1200×440 calibré pour symétrie verticale.

   Géométrie :
     - .hv-wf-node-box : 96×96 (NODE_HALF = 48 dans le JS)
     - .hv-wf-node-icon : 52×52 (54% du fill de la box → l'icône
       domine visuellement la box, on perçoit moins les éventuelles
       micro-asymétries de positionnement)
     - Icône en position:absolute, top:50%/left:50% + margin négatif
       (-26 -26) = centrage pixel-perfect dans la box.
*/

/* ── Hint sous le pill (avant clic) ──────────────────────────────── */
.hv-url-form {
  flex-direction: column;
  align-items: center;
}
.hv-url-hint {
  margin-top: 10px;
  font-size: 11.5px;
  color: #94a3b8;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: center;
  transition: opacity 220ms ease;
}
.hv-url-hint.is-hidden { opacity: 0; pointer-events: none; }

/* ── Conteneur global ─────────────────────────────────────────────── */
.hv-wf {
  position: relative;
  width: 100%;
  max-width: 1180px;
  /* Pas de margin-top : sinon le wf serait décalé sous le centre vertical
     de la carte hero (justify-content:center inclut les marges). */
  margin: 0 auto;
}
.hv-wf[hidden] { display: none; }

/* ── Phase 1 : typing intro ──────────────────────────────────────── */
.hv-wf-typing {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
  min-height: 220px;
}
.hv-wf-typing-text {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: #0f172a;
  white-space: pre;
}
.hv-wf-typing-cursor {
  display: inline-block;
  width: 2px;
  height: 17px;
  background: #0f172a;
  margin-left: 2px;
  vertical-align: middle;
  animation: hv-wf-blink 0.9s steps(2, start) infinite;
}
.hv-wf-typing.is-leaving { animation: hv-wf-typing-out 280ms ease forwards; }
@keyframes hv-wf-blink   { 50% { opacity: 0; } }
@keyframes hv-wf-typing-out { to { opacity: 0; transform: translateY(-6px); } }

/* ── Canvas : light, grille de points dense ──────────────────────── */
.hv-wf-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 1200 / 440;
  border-radius: 18px;
  background-color: #fafbfc;
  background-image:
    radial-gradient(circle, rgba(15, 23, 42, 0.12) 1px, transparent 1.2px);
  background-size: 18px 18px;
  background-position: 0 0;
  border: 1px solid #e5e7eb;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 8px 28px -10px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 360ms ease, transform 360ms ease, filter 460ms ease;
  overflow: hidden;
}
.hv-wf-canvas.is-visible { opacity: 1; transform: scale(1); }
.hv-wf-canvas.is-leaving { opacity: 0; filter: blur(10px); transform: scale(0.97); }

/* ── Barre de progression (top, absolute) ────────────────────────── */
.hv-wf-progress {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: rgba(15, 23, 42, 0.06);
  overflow: hidden;
  z-index: 4;
}
.hv-wf-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg,
                #fcd34d 0%,
                #f59e0b 35%,
                #b45309 70%,
                #78350f 100%);
  box-shadow: 0 0 6px rgba(180, 83, 9, 0.35);
  transition: width 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hv-wf-progress.is-snapping .hv-wf-progress-fill {
  box-shadow: 0 0 14px rgba(180, 83, 9, 0.65);
  transition: width 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 600ms ease;
}

/* ── Stage : positioning context ─────────────────────────────────── */
.hv-wf-stage {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* ── Couche SVG des connecteurs ──────────────────────────────────── */
.hv-wf-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
.hv-wf-edge-path {
  fill: none;
  stroke: #d1d5db;
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 380ms ease, stroke 280ms ease;
}
.hv-wf-edge-path.is-mounted { opacity: 1; }
.hv-wf-edge-path.is-flowing {
  stroke: #94a3b8;
  stroke-dasharray: 8 8;
  animation: hv-wf-dash-flow 1.1s linear infinite;
}
.hv-wf-edge-path.is-done {
  stroke: #0f172a;
  stroke-dasharray: none;
}
@keyframes hv-wf-dash-flow { to { stroke-dashoffset: -16; } }

.hv-wf-edge-port {
  fill: #ffffff;
  stroke: #d1d5db;
  stroke-width: 1.4;
  transition: fill 280ms ease, stroke 280ms ease;
}
.hv-wf-edge-port.is-flowing { stroke: #94a3b8; }
.hv-wf-edge-port.is-done    { stroke: #0f172a; }

/* ── Couche HTML des nœuds ───────────────────────────────────────── */
.hv-wf-nodes {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* ── Nœud ─────────────────────────────────────────────────────────── */
.hv-wf-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -50%) translateY(4px);
  opacity: 0;
  transition: opacity 420ms cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hv-wf-node.is-mounted {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.hv-wf-node-box {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 22px;
  background: #ffffff;
  border: 1.5px solid #e5e7eb;
  transition: border-color 240ms ease, box-shadow 240ms ease,
              background-color 240ms ease;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 6px 14px -6px rgba(15, 23, 42, 0.08);
}
.hv-wf-node.is-queued .hv-wf-node-box {
  opacity: 0.55;
  background: #f9fafb;
}
.hv-wf-node.is-active .hv-wf-node-box {
  border-color: #f97316;
  box-shadow:
    0 0 0 5px rgba(249, 115, 22, 0.10),
    0 8px 22px -4px rgba(249, 115, 22, 0.30);
  animation: hv-wf-node-pulse 1.8s ease-in-out infinite;
}
.hv-wf-node.is-done .hv-wf-node-box {
  border-color: #cbd5e1;
  background: #ffffff;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 6px 14px -6px rgba(15, 23, 42, 0.10);
}
@keyframes hv-wf-node-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 5px rgba(249, 115, 22, 0.10),
      0 8px 22px -4px rgba(249, 115, 22, 0.30);
  }
  50% {
    box-shadow:
      0 0 0 11px rgba(249, 115, 22, 0.14),
      0 12px 26px -4px rgba(249, 115, 22, 0.36);
  }
}

/* ── Icône : positionnement absolu = centrage pixel-perfect ──────── */
.hv-wf-node-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;  /* négatif moitié de width/height */
  color: #475569;
  transition: color 240ms ease;
  pointer-events: none;
}
.hv-wf-node-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.hv-wf-node.is-active .hv-wf-node-icon { color: #ea580c; }
.hv-wf-node.is-done   .hv-wf-node-icon { color: #0f172a; }

/* ── Pastille check verte (done) ─────────────────────────────────── */
.hv-wf-node-check {
  display: none;
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #16a34a;
  color: #ffffff;
  align-items: center;
  justify-content: center;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.12);
  animation: hv-wf-check-in 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 4;
}
.hv-wf-node-check svg { width: 11px; height: 11px; }
.hv-wf-node.is-done .hv-wf-node-check { display: flex; }
@keyframes hv-wf-check-in {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Labels sous la box ──────────────────────────────────────────── */
.hv-wf-node-labels {
  margin-top: 12px;
  text-align: center;
  max-width: 120px;
}
.hv-wf-node-label {
  font-size: 12.5px;
  line-height: 1.25;
  color: #334155;
  font-weight: 600;
  letter-spacing: 0.005em;
  transition: color 240ms ease;
}
.hv-wf-node-sub {
  margin-top: 2px;
  font-size: 10.5px;
  color: #94a3b8;
  line-height: 1.3;
  font-weight: 500;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.01em;
}
.hv-wf-node.is-active .hv-wf-node-label { color: #0f172a; }
.hv-wf-node.is-done   .hv-wf-node-label { color: #0f172a; }

/* ── Fallback mobile ──────────────────────────────────────────────── */
.hv-wf-mobile {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 28px 16px;
  text-align: center;
}
.hv-wf-mobile-label {
  font-size: 13px;
  color: #0f172a;
  font-weight: 600;
}
.hv-wf-mobile-sub {
  font-size: 11.5px;
  color: #64748b;
}
.hv-wf-mobile-bar {
  width: 240px;
  height: 4px;
  border-radius: 2px;
  background: #e5e7eb;
  overflow: hidden;
}
.hv-wf-mobile-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #fde047, #a16207);
  border-radius: 2px;
  transition: width 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 900px) {
  .hv-wf-canvas { display: none; }
  .hv-wf-mobile { display: flex; }
  .hv-wf { min-height: 160px; }
}

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hv-wf-node.is-active .hv-wf-node-box { animation: none; }
  .hv-wf-edge-path.is-flowing { animation: none; }
  .hv-wf-typing-cursor { animation: none; }
}