/*
 * Flow animations for the API Access and MCP Server tabs.
 * Markup is built at runtime by dist/flowAnimations.js, which mounts into the
 * #api-flow-anim / #mcp-flow-anim placeholders in GlobalAIRegulationTracker.html.
 *
 * The two animations share one visual grammar (request card -> wire -> pulsing
 * hub -> response card), so the structure lives on .flow-anim and each tab only
 * overrides its accent colour and a few sizes.
 */

.flow-anim {
  --fx-teal: #0d9488;
  --fx-teal-l: #14b8a6;
  --fx-teal-d: #0f766e;
  --fx-blue: #0ea5e9;
  --fx-mute: #94a3b8;
  /* accent = the request side of the flow; overridden per tab below */
  --fx-accent: var(--fx-teal);
  --fx-accent-l: var(--fx-teal-l);
  --fx-accent-glow: rgba(20, 184, 166, 0.75);
  box-sizing: border-box;
  font-family: Helvetica, Arial, sans-serif;
  max-width: 860px;
  margin: 16px auto 24px;
  padding: 16px 18px 20px;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}

.flow-anim * { box-sizing: border-box; }

/* ---- per-tab skins ---- */
#api-flow-anim {
  background: linear-gradient(135deg, #f0fdfa 0%, #ffffff 55%);
  border: 1px solid rgba(13, 148, 136, 0.18);
  box-shadow: 0 4px 20px rgba(13, 148, 136, 0.08);
}

#mcp-flow-anim {
  --fx-accent: #7c3aed;
  --fx-accent-l: #a78bfa;
  --fx-accent-glow: rgba(167, 139, 250, 0.75);
  background: linear-gradient(135deg, #f5f3ff 0%, #ffffff 50%, #f0fdfa 100%);
  border: 1px solid rgba(124, 58, 237, 0.16);
  box-shadow: 0 4px 20px rgba(79, 70, 229, 0.08);
}

/* ---- layout ---- */
.flow-anim .fx-caption {
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fx-teal-d);
  text-align: center;
  margin: 0 0 14px;
  opacity: 0.85;
}

.flow-anim .fx-note {
  font-size: 10px;
  line-height: 1.4;
  color: #64748b;
  text-align: center;
  font-style: italic;
  margin: 12px 0 0;
}

.flow-anim .fx-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.flow-anim .fx-card {
  flex: 1 1 0;
  min-width: 0;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 11px 12px 12px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}

.flow-anim .fx-tag {
  font-size: 10px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fx-mute);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.flow-anim .fx-tag-sub { margin-top: 10px; }

.flow-anim .fx-tier {
  margin-left: auto;
  background: rgba(245, 158, 11, 0.16);
  color: #b45309;
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.flow-anim .fx-tier-free {
  background: rgba(16, 185, 129, 0.16);
  color: #047857;
}

.flow-anim .fx-badge {
  margin-left: auto;
  background: rgba(124, 58, 237, 0.12);
  color: #6d28d9;
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.flow-anim .fx-json {
  background: rgba(14, 165, 233, 0.12);
  color: #0369a1;
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 9px;
  letter-spacing: 0.5px;
}

/* ---- code block: API request / MCP tool call ---- */
.flow-anim .fx-code {
  background: #0f172a;
  border-radius: 9px;
  padding: 10px 12px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 12px;
  line-height: 1.6;
  color: #cbd5e1;
  overflow-x: auto;
}

#mcp-flow-anim .fx-code {
  font-size: 11.5px;
  padding: 9px 12px 10px;
  overflow-x: visible;
}

.flow-anim .fx-code-hd {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  font-size: 11px;
}

.flow-anim .fx-code-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.flow-anim .fx-indent { padding-left: 14px; }
.flow-anim .fx-fn { color: var(--fx-accent-l); }
#mcp-flow-anim .fx-fn { font-weight: 700; }
.flow-anim .fx-key { color: #7dd3fc; }
.flow-anim .fx-punc { color: #64748b; }

.flow-anim .fx-str {
  color: #fcd34d;
  border-radius: 3px;
  transition: background 0.25s ease;
}

.flow-anim .fx-str.fx-flash { background: rgba(252, 211, 77, 0.28); }

/* ---- question bubble (MCP) ---- */
.flow-anim .fx-bubble {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  background: rgba(124, 58, 237, 0.07);
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 12px 12px 12px 4px;
  padding: 9px 11px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #3b0764;
  min-height: 52px;
}

.flow-anim .fx-avatar { font-size: 14px; line-height: 1.3; }

.flow-anim .fx-caret {
  display: inline-block;
  width: 6px;
  height: 13px;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--fx-accent);
  animation: fx-blink 1s step-end infinite;
}

.flow-anim .fx-caret.fx-done { display: none; }

/* ---- chips ---- */
.flow-anim .fx-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px;
}

#mcp-flow-anim .fx-chips { margin-top: 8px; }

.flow-anim .fx-chip {
  font-size: 10px;
  color: var(--fx-teal-d);
  background: rgba(13, 148, 136, 0.09);
  border: 1px solid rgba(13, 148, 136, 0.18);
  border-radius: 20px;
  padding: 2px 8px;
  white-space: nowrap;
}

.flow-anim .fx-chip b { font-weight: 700; }

/* ---- wires + hub ---- */
.flow-anim .fx-wire {
  position: relative;
  flex: 0 1 46px;
  min-width: 22px;
  height: 2px;
  align-self: center;
  background: repeating-linear-gradient(90deg, var(--fx-accent) 0 6px, transparent 6px 12px);
  background-size: 12px 2px;
  opacity: 0.65;
  animation: fx-dash-x 0.7s linear infinite;
}

.flow-anim .fx-wire-out {
  background: repeating-linear-gradient(90deg, var(--fx-blue) 0 6px, transparent 6px 12px);
  background-size: 12px 2px;
}

.flow-anim .fx-packet {
  position: absolute;
  top: 50%;
  left: 0;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--fx-accent-l);
  box-shadow: 0 0 9px 2px var(--fx-accent-glow);
  animation: fx-flow-x 2s linear infinite;
}

.flow-anim .fx-packet-res {
  background: var(--fx-blue);
  box-shadow: 0 0 9px 2px rgba(14, 165, 233, 0.7);
  animation-delay: 1s;
}

.flow-anim .fx-hub {
  position: relative;
  width: 74px;
  height: 74px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flow-anim .fx-ring {
  position: absolute;
  inset: 8px;
  border: 2px solid var(--fx-teal);
  border-radius: 50%;
  opacity: 0.5;
  animation: fx-pulse 2.6s ease-out infinite;
}

.flow-anim .fx-ring2 { animation-delay: 1.3s; }

.flow-anim .fx-hub-icon {
  font-size: 36px;
  line-height: 1;
  z-index: 2;
  filter: drop-shadow(0 2px 4px rgba(13, 148, 136, 0.35));
  animation: fx-bob 3.2s ease-in-out infinite;
}

#mcp-flow-anim .fx-hub-icon { font-size: 34px; }

.flow-anim .fx-hub-label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 4px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--fx-teal-d);
  white-space: nowrap;
  text-align: center;
}

/* ---- returned JSON ---- */
.flow-anim .fx-out {
  background: #0f172a;
  border-radius: 9px;
  padding: 10px 12px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 11px;
  line-height: 1.55;
  color: #cbd5e1;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow-y: auto;
  max-height: 258px;
}

#mcp-flow-anim .fx-out { max-height: 300px; }

.flow-anim .fx-out::-webkit-scrollbar { width: 7px; height: 7px; }
.flow-anim .fx-out::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
.flow-anim .fx-j-key { color: #7dd3fc; }
.flow-anim .fx-j-str { color: #fcd34d; }
.flow-anim .fx-j-url { color: #5eead4; }
.flow-anim .fx-j-num { color: #f0abfc; }
.flow-anim .fx-j-bool { color: #34d399; }
.flow-anim .fx-j-null { color: #f87171; }

/* ---- grounded answer strip (MCP) ---- */
.flow-anim .fx-down {
  position: relative;
  width: 2px;
  height: 24px;
  margin: 6px auto 0;
  background: repeating-linear-gradient(180deg, var(--fx-accent) 0 6px, transparent 6px 12px);
  background-size: 2px 12px;
  opacity: 0.6;
  animation: fx-dash-y 0.7s linear infinite;
}

.flow-anim .fx-packet-ans { animation-name: fx-flow-y; top: 0; left: 50%; }

.flow-anim .fx-answer {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 6px;
  background: #ffffff;
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 12px;
  padding: 11px 13px 12px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}

.flow-anim .fx-answer-icon { font-size: 20px; line-height: 1.2; }
.flow-anim .fx-answer-body { min-width: 0; }

.flow-anim .fx-answer-text {
  font-size: 12.5px;
  line-height: 1.5;
  color: #1e293b;
}

/* ---- step states ---- */
.flow-anim .fx-stale { opacity: 0.5; transition: opacity 0.3s ease; }
.flow-anim .fx-in { animation: fx-fade-in 0.4s ease; }

/* ---- keyframes ---- */
@keyframes fx-dash-x { from { background-position: 0 0; } to { background-position: 12px 0; } }
@keyframes fx-dash-y { from { background-position: 0 0; } to { background-position: 0 12px; } }
@keyframes fx-flow-x { 0% { left: -4px; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes fx-flow-y { 0% { top: -4px; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes fx-pulse { 0% { transform: scale(0.55); opacity: 0.55; } 70% { opacity: 0.12; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes fx-bob { 0%, 100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.06) translateY(-2px); } }
@keyframes fx-fade-in { from { opacity: 0.2; } to { opacity: 1; } }
@keyframes fx-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ---- responsive: stack the stage vertically ---- */
@media (max-width: 640px) {
  .flow-anim { padding: 14px 11px 16px; }
  .flow-anim .fx-stage { flex-direction: column; gap: 4px; }
  .flow-anim .fx-card { width: 100%; flex: 0 0 auto; }

  .flow-anim .fx-wire {
    flex: 0 0 auto;
    width: 2px;
    height: 26px;
    min-height: 26px;
    background: repeating-linear-gradient(180deg, var(--fx-accent) 0 6px, transparent 6px 12px);
    background-size: 2px 12px;
    animation-name: fx-dash-y;
  }

  .flow-anim .fx-wire-out {
    background: repeating-linear-gradient(180deg, var(--fx-blue) 0 6px, transparent 6px 12px);
    background-size: 2px 12px;
  }

  .flow-anim .fx-packet {
    top: 0;
    left: 50%;
    animation-name: fx-flow-y;
  }

  /* keeps the hub label clear of the icon once stacked */
  .flow-anim .fx-hub { margin-bottom: 18px; }
}

/* ---- accessibility: respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .flow-anim .fx-packet,
  .flow-anim .fx-ring,
  .flow-anim .fx-hub-icon,
  .flow-anim .fx-caret,
  .flow-anim .fx-wire,
  .flow-anim .fx-down { animation: none !important; }
  .flow-anim .fx-packet { opacity: 1; left: 50%; }
  .flow-anim .fx-in { animation: none !important; }
  .flow-anim .fx-stale { opacity: 1; }
  .flow-anim .fx-caret { display: none; }
}