.fp-pharma-cold-chain-delivery-pipeline-ui {
  --fp-container-width: 100%;
  --fp-max-width: 500px;
  --fp-aspect-ratio: 1 / 1;

  --fp-primary-color: #ffffff;
  --fp-secondary-color: #f1f5f9;
  --fp-muted-color: #94a3b8;
  --fp-soft-color: #f8fafc;
  --fp-background-color: transparent;

  --fp-info-color: #14532d;
  --fp-warning-color: #34d399;
  --fp-danger-color: #059669;
  --fp-accent-color: #6ee7b7;

  all: unset;
  display: block;
  width: var(--fp-container-width);
  max-width: var(--fp-max-width);
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  box-sizing: border-box;
}

.fp-pharma-cold-chain-delivery-pipeline-ui * {
  box-sizing: border-box;
}

.fp-pharma-cold-chain-delivery-pipeline-ui-stage {
  position: relative;
  width: 100%;
  aspect-ratio: var(--fp-aspect-ratio);
  background: var(--fp-primary-color);
  border: 1px solid var(--fp-secondary-color);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 32px rgba(20, 83, 45, 0.05);
}

.fp-pharma-cold-chain-delivery-pipeline-ui-bg {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--fp-secondary-color) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.6;
  animation: fp-pharma-cold-chain-delivery-pipeline-ui-breathe 6s ease-in-out infinite alternate;
}

.fp-pharma-cold-chain-delivery-pipeline-ui-radial {
  position: absolute;
  width: 120%;
  height: 120%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(110, 231, 183, 0.05) 90deg, transparent 180deg);
  animation: fp-pharma-cold-chain-delivery-pipeline-ui-spin 15s linear infinite;
  border-radius: 50%;
  pointer-events: none;
}

.fp-pharma-cold-chain-delivery-pipeline-ui-card {
  position: relative;
  z-index: 10;
  width: 85%;
  height: 85%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--fp-secondary-color);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.fp-pharma-cold-chain-delivery-pipeline-ui-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.fp-pharma-cold-chain-delivery-pipeline-ui-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--fp-info-color);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 4px 0;
}

.fp-pharma-cold-chain-delivery-pipeline-ui-subtitle {
  font-size: 0.75rem;
  color: var(--fp-muted-color);
  margin: 0;
}

.fp-pharma-cold-chain-delivery-pipeline-ui-temp {
  text-align: right;
}

.fp-pharma-cold-chain-delivery-pipeline-ui-temp-val {
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--fp-danger-color);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 4px;
}

.fp-pharma-cold-chain-delivery-pipeline-ui-temp-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fp-accent-color);
  box-shadow: 0 0 8px var(--fp-accent-color);
  animation: fp-pharma-cold-chain-delivery-pipeline-ui-pulse 2s infinite;
}

.fp-pharma-cold-chain-delivery-pipeline-ui-pipeline {
  flex: 1;
  position: relative;
  width: 100%;
}

.fp-pharma-cold-chain-delivery-pipeline-ui-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.fp-pharma-cold-chain-delivery-pipeline-ui-nodes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.fp-pharma-cold-chain-delivery-pipeline-ui-node {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translateY(-50%);
}

.fp-pharma-cold-chain-delivery-pipeline-ui-node:nth-child(1) { top: 10%; left: 5%; }
.fp-pharma-cold-chain-delivery-pipeline-ui-node:nth-child(2) { top: 36%; right: 5%; flex-direction: row-reverse; }
.fp-pharma-cold-chain-delivery-pipeline-ui-node:nth-child(3) { top: 63%; left: 5%; }
.fp-pharma-cold-chain-delivery-pipeline-ui-node:nth-child(4) { top: 90%; right: 5%; flex-direction: row-reverse; }

.fp-pharma-cold-chain-delivery-pipeline-ui-node-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--fp-primary-color);
  border: 2px solid var(--fp-secondary-color);
  position: relative;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.fp-pharma-cold-chain-delivery-pipeline-ui-node.active .fp-pharma-cold-chain-delivery-pipeline-ui-node-dot {
  border-color: var(--fp-accent-color);
  box-shadow: 0 0 0 4px rgba(110, 231, 183, 0.2);
}

.fp-pharma-cold-chain-delivery-pipeline-ui-node-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fp-accent-color);
  transition: transform 0.3s;
}

.fp-pharma-cold-chain-delivery-pipeline-ui-node.active .fp-pharma-cold-chain-delivery-pipeline-ui-node-dot::after {
  transform: translate(-50%, -50%) scale(1);
}

.fp-pharma-cold-chain-delivery-pipeline-ui-node-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--fp-muted-color);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.fp-pharma-cold-chain-delivery-pipeline-ui-node.active .fp-pharma-cold-chain-delivery-pipeline-ui-node-label {
  color: var(--fp-info-color);
}

@keyframes fp-pharma-cold-chain-delivery-pipeline-ui-breathe {
  0% { transform: scale(1); opacity: 0.4; }
  100% { transform: scale(1.05); opacity: 0.8; }
}

@keyframes fp-pharma-cold-chain-delivery-pipeline-ui-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes fp-pharma-cold-chain-delivery-pipeline-ui-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.5; }
}

@media (max-width: 400px) {
  .fp-pharma-cold-chain-delivery-pipeline-ui-card {
    width: 92%;
    height: 92%;
    padding: 16px;
  }
  .fp-pharma-cold-chain-delivery-pipeline-ui-node:nth-child(1) { left: 0%; }
  .fp-pharma-cold-chain-delivery-pipeline-ui-node:nth-child(2) { right: 0%; }
  .fp-pharma-cold-chain-delivery-pipeline-ui-node:nth-child(3) { left: 0%; }
  .fp-pharma-cold-chain-delivery-pipeline-ui-node:nth-child(4) { right: 0%; }
}

document.querySelectorAll('.fp-pharma-cold-chain-delivery-pipeline-ui').forEach(root => {
  const canvas = root.querySelector('.fp-pharma-cold-chain-delivery-pipeline-ui-canvas');
  if (!canvas) return;
  const ctx = canvas.getContext('2d');
  const nodes = root.querySelectorAll('.fp-pharma-cold-chain-delivery-pipeline-ui-node-dot');
  const tempNumber = root.querySelector('.fp-pharma-cold-chain-delivery-pipeline-ui-temp-number');
  
  let animationFrameId;
  let isVisible = true;
  let progress = 0;
  let tempBase = 2.4;
  
  const getColors = () => {
    const style = getComputedStyle(root);
    return {
      secondary: style.getPropertyValue('--fp-secondary-color').trim(),
      accent: style.getPropertyValue('--fp-accent-color').trim(),
      danger: style.getPropertyValue('--fp-danger-color').trim()
    };
  };

  const resizeCanvas = () => {
    const rect = canvas.parentElement.getBoundingClientRect();
    canvas.width = rect.width * window.devicePixelRatio;
    canvas.height = rect.height * window.devicePixelRatio;
    ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
    canvas.style.width = `${rect.width}px`;
    canvas.style.height = `${rect.height}px`;
  };

  const getPoints = () => {
    const canvasRect = canvas.getBoundingClientRect();
    const points = [];
    nodes.forEach(node => {
      const rect = node.getBoundingClientRect();
      points.push({
        x: rect.left - canvasRect.left + rect.width / 2,
        y: rect.top - canvasRect.top + rect.height / 2
      });
    });
    return points;
  };

  const animatePipeline = () => {
    if (!isVisible) return;
    
    const rect = canvas.parentElement.getBoundingClientRect();
    ctx.clearRect(0, 0, rect.width, rect.height);
    
    const points = getPoints();
    const colors = getColors();
    
    if (points.length < 2) return;

    ctx.beginPath();
    ctx.strokeStyle = colors.secondary;
    ctx.lineWidth = 4;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';
    ctx.moveTo(points[0].x, points[0].y);
    for (let i = 1; i < points.length; i++) {
      ctx.lineTo(points[i].x, points[i].y);
    }
    ctx.stroke();

    progress += 0.005;
    if (progress > 3) progress = 0;

    ctx.beginPath();
    ctx.strokeStyle = colors.accent;
    ctx.lineWidth = 4;
    ctx.moveTo(points[0].x, points[0].y);

    let currentSegment = Math.floor(progress);
    let segmentProgress = progress % 1;

    for (let i = 0; i <= currentSegment; i++) {
      if (i === currentSegment && i < points.length - 1) {
        const p1 = points[i];
        const p2 = points[i+1];
        const cx = p1.x + (p2.x - p1.x) * segmentProgress;
        const cy = p1.y + (p2.y - p1.y) * segmentProgress;
        ctx.lineTo(cx, cy);

        ctx.fillStyle = colors.danger;
        ctx.beginPath();
        ctx.arc(cx, cy, 5, 0, Math.PI * 2);
        ctx.fill();
        ctx.shadowBlur = 10;
        ctx.shadowColor = colors.accent;
        ctx.fill();
        ctx.shadowBlur = 0;

      } else if (i < points.length) {
        ctx.lineTo(points[i].x, points[i].y);
      }
    }
    ctx.stroke();

    if (Math.random() < 0.02 && tempNumber) {
      let jitter = (Math.random() * 0.4) - 0.2;
      let newTemp = tempBase + jitter;
      if (newTemp < 2.1) newTemp = 2.1;
      if (newTemp > 2.8) newTemp = 2.8;
      tempBase = newTemp;
      tempNumber.innerText = newTemp.toFixed(1);
    }

    animationFrameId = requestAnimationFrame(animatePipeline);
  };

  const handleVisibilityChange = () => {
    isVisible = document.visibilityState === 'visible';
    if (isVisible) {
      animatePipeline();
    } else {
      cancelAnimationFrame(animationFrameId);
    }
  };

  const observer = new MutationObserver(() => {
    if (!document.body.contains(root)) {
      cancelAnimationFrame(animationFrameId);
      window.removeEventListener('resize', resizeCanvas);
      document.removeEventListener('visibilitychange', handleVisibilityChange);
      observer.disconnect();
    }
  });

  window.addEventListener('resize', resizeCanvas);
  document.addEventListener('visibilitychange', handleVisibilityChange);
  observer.observe(document.body, { childList: true, subtree: true });

  setTimeout(() => {
    resizeCanvas();
    animatePipeline();
  }, 100);
});