.fp-hr-recruitment-ai-neural-sync-ui {
  --fp-container-width: 100%;
  --fp-max-width: 500px;
  --fp-aspect-ratio: 1 / 1;

  --fp-primary-color: #e6e9f0;
  --fp-secondary-color: #caced7;
  --fp-soft-color: #ffffff;
  --fp-muted-color: #8a93a6;
  --fp-background-color: transparent;

  --fp-info-color: #2d3436;
  --fp-warning-color: #b388ff;
  --fp-danger-color: #651fff;
  --fp-accent-color: #7e57c2;

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

.fp-hr-recruitment-ai-neural-sync-ui * {
  box-sizing: border-box;
}

.fp-hr-recruitment-ai-neural-sync-ui-stage {
  position: relative;
  width: 100%;
  aspect-ratio: var(--fp-aspect-ratio);
  background: var(--fp-primary-color);
  border-radius: 32px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 12px 12px 24px rgba(202, 206, 215, 0.6), -12px -12px 24px rgba(255, 255, 255, 0.8);
}

.fp-hr-recruitment-ai-neural-sync-ui-ambient {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at center, rgba(126, 87, 194, 0.05) 0%, transparent 60%);
  animation: fp-hr-recruitment-ai-neural-sync-ui-breathe 6s ease-in-out infinite alternate;
  pointer-events: none;
}

.fp-hr-recruitment-ai-neural-sync-ui-panel {
  position: relative;
  z-index: 10;
  width: 85%;
  height: 85%;
  background: var(--fp-primary-color);
  border-radius: 24px;
  box-shadow: inset 6px 6px 12px rgba(202, 206, 215, 0.4), inset -6px -6px 12px rgba(255, 255, 255, 0.7);
  display: flex;
  flex-direction: column;
  padding: 24px;
}

.fp-hr-recruitment-ai-neural-sync-ui-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fp-hr-recruitment-ai-neural-sync-ui-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--fp-muted-color);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.fp-hr-recruitment-ai-neural-sync-ui-status-pill {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--fp-accent-color);
  background: var(--fp-primary-color);
  padding: 6px 14px;
  border-radius: 20px;
  box-shadow: 4px 4px 8px rgba(202, 206, 215, 0.5), -4px -4px 8px rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color 0.4s, text-shadow 0.4s;
}

.fp-hr-recruitment-ai-neural-sync-ui-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fp-accent-color);
  animation: fp-hr-recruitment-ai-neural-sync-ui-blink 1s infinite alternate;
  transition: background 0.4s, box-shadow 0.4s;
}

.fp-hr-recruitment-ai-neural-sync-ui-lens-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.fp-hr-recruitment-ai-neural-sync-ui-orbit {
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 2px dashed rgba(126, 87, 194, 0.15);
  animation: fp-hr-recruitment-ai-neural-sync-ui-spin 20s linear infinite;
  pointer-events: none;
}

.fp-hr-recruitment-ai-neural-sync-ui-lens {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: var(--fp-primary-color);
  box-shadow: inset 8px 8px 16px rgba(202, 206, 215, 0.6), inset -8px -8px 16px rgba(255, 255, 255, 0.9);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fp-hr-recruitment-ai-neural-sync-ui-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.fp-hr-recruitment-ai-neural-sync-ui-candidate {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  filter: blur(8px);
  opacity: 0.4;
  transform: scale(0.9);
}

.fp-hr-recruitment-ai-neural-sync-ui-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--fp-primary-color), var(--fp-soft-color));
  box-shadow: 4px 4px 8px rgba(202, 206, 215, 0.5), -4px -4px 8px rgba(255, 255, 255, 0.8);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--fp-accent-color);
  border: 2px solid transparent;
  transition: border-color 0.4s;
}

.fp-hr-recruitment-ai-neural-sync-ui-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--fp-info-color);
  margin-bottom: 4px;
  line-height: 1.2;
}

.fp-hr-recruitment-ai-neural-sync-ui-role {
  font-size: 0.7rem;
  color: var(--fp-muted-color);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.fp-hr-recruitment-ai-neural-sync-ui-match {
  margin-top: 10px;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--fp-primary-color);
  background: var(--fp-accent-color);
  padding: 2px 8px;
  border-radius: 12px;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s ease;
}

.fp-hr-recruitment-ai-neural-sync-ui.is-focused .fp-hr-recruitment-ai-neural-sync-ui-candidate {
  filter: blur(0px);
  opacity: 1;
  transform: scale(1);
}

.fp-hr-recruitment-ai-neural-sync-ui.is-focused .fp-hr-recruitment-ai-neural-sync-ui-match {
  opacity: 1;
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(126, 87, 194, 0.4);
}

.fp-hr-recruitment-ai-neural-sync-ui.is-focused .fp-hr-recruitment-ai-neural-sync-ui-avatar {
  border-color: var(--fp-accent-color);
}

.fp-hr-recruitment-ai-neural-sync-ui.is-focused .fp-hr-recruitment-ai-neural-sync-ui-status-pill {
  color: var(--fp-danger-color);
  text-shadow: 0 0 8px rgba(126, 87, 194, 0.3);
}

.fp-hr-recruitment-ai-neural-sync-ui.is-focused .fp-hr-recruitment-ai-neural-sync-ui-pulse {
  background: var(--fp-danger-color);
  box-shadow: 0 0 8px var(--fp-danger-color);
}

.fp-hr-recruitment-ai-neural-sync-ui-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid rgba(202, 206, 215, 0.3);
}

.fp-hr-recruitment-ai-neural-sync-ui-progress-label {
  font-size: 0.75rem;
  color: var(--fp-muted-color);
}

.fp-hr-recruitment-ai-neural-sync-ui-progress-value {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--fp-info-color);
  font-variant-numeric: tabular-nums;
}

@keyframes fp-hr-recruitment-ai-neural-sync-ui-breathe {
  0% { transform: scale(1); opacity: 0.3; }
  100% { transform: scale(1.1); opacity: 0.8; }
}

@keyframes fp-hr-recruitment-ai-neural-sync-ui-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes fp-hr-recruitment-ai-neural-sync-ui-blink {
  0% { opacity: 0.4; }
  100% { opacity: 1; }
}

@media (max-width: 400px) {
  .fp-hr-recruitment-ai-neural-sync-ui-panel {
    width: 90%;
    padding: 16px;
  }
  .fp-hr-recruitment-ai-neural-sync-ui-lens {
    width: 160px;
    height: 160px;
  }
  .fp-hr-recruitment-ai-neural-sync-ui-orbit {
    width: 200px;
    height: 200px;
  }
}

document.querySelectorAll('.fp-hr-recruitment-ai-neural-sync-ui').forEach(root => {
  const canvas = root.querySelector('.fp-hr-recruitment-ai-neural-sync-ui-canvas');
  const counterEl = root.querySelector('.fp-hr-recruitment-ai-neural-sync-ui-counter');
  const statusText = root.querySelector('.fp-hr-recruitment-ai-neural-sync-ui-status-text');
  
  const avatarEl = root.querySelector('.fp-hr-recruitment-ai-neural-sync-ui-avatar');
  const nameEl = root.querySelector('.fp-hr-recruitment-ai-neural-sync-ui-name');
  const roleEl = root.querySelector('.fp-hr-recruitment-ai-neural-sync-ui-role');
  const matchEl = root.querySelector('.fp-hr-recruitment-ai-neural-sync-ui-match');

  if (!canvas || !counterEl) return;

  const ctx = canvas.getContext('2d');
  let animationFrameId;
  let isVisible = true;
  
  let time = 0;
  let profilesAnalyzed = 12450;
  let isMatched = false;
  let stateTimer = 0;
  
  const candidates = [
    { init: 'AK', name: 'Alex K.', role: 'Senior React Dev', match: '96%' },
    { init: 'MJ', name: 'Maria J.', role: 'Data Scientist', match: '99%' },
    { init: 'ST', name: 'Sam T.', role: 'Product Manager', match: '94%' },
    { init: 'EL', name: 'Emma L.', role: 'DevOps Engineer', match: '97%' }
  ];

  const nodes = [];
  const numNodes = 12;

  const colors = {
    gray: '#caced7',
    violet: '#7e57c2',
    glow: 'rgba(126, 87, 194, 0.6)'
  };

  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);
    initNodes(rect.width, rect.height);
  };

  const initNodes = (w, h) => {
    nodes.length = 0;
    const cx = w / 2;
    const cy = h / 2;
    const radius = w * 0.45;
    
    for (let i = 0; i < numNodes; i++) {
      const angle = (i / numNodes) * Math.PI * 2;
      nodes.push({
        angle: angle,
        baseR: radius,
        x: cx + Math.cos(angle) * radius,
        y: cy + Math.sin(angle) * radius,
        pulseOffset: Math.random() * Math.PI * 2
      });
    }
  };

  const randomString = (length) => {
    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    let result = '';
    for (let i = 0; i < length; i++) {
        result += chars.charAt(Math.floor(Math.random() * chars.length));
    }
    return result;
  };

  const animate = () => {
    if (!isVisible) return;
    
    time += 0.05;
    stateTimer++;

    const width = canvas.width / window.devicePixelRatio;
    const height = canvas.height / window.devicePixelRatio;
    const cx = width / 2;
    const cy = height / 2;

    if (stateTimer === 1) {
       isMatched = false;
       root.classList.remove('is-focused');
       statusText.innerText = "Scanning";
    } else if (stateTimer === 150) {
       isMatched = true;
       root.classList.add('is-focused');
       statusText.innerText = "Match Found";
       
       const selected = candidates[Math.floor(Math.random() * candidates.length)];
       avatarEl.innerText = selected.init;
       nameEl.innerText = selected.name;
       roleEl.innerText = selected.role;
       matchEl.innerText = `${selected.match} MATCH`;
    } else if (stateTimer > 350) {
       stateTimer = 0; 
    }

    if (!isMatched && stateTimer % 5 === 0) {
      avatarEl.innerText = randomString(2);
      nameEl.innerText = "Parsing Data...";
      roleEl.innerText = "ID: " + Math.floor(Math.random() * 10000);
      profilesAnalyzed += Math.floor(Math.random() * 3) + 1;
      counterEl.innerText = profilesAnalyzed.toLocaleString();
    }

    ctx.clearRect(0, 0, width, height);

    const lineColor = isMatched ? colors.violet : colors.gray;
    const lineWidth = isMatched ? 2 : 1;

    ctx.beginPath();
    ctx.strokeStyle = lineColor;
    ctx.lineWidth = lineWidth;
    if (isMatched) {
        ctx.shadowBlur = 10;
        ctx.shadowColor = colors.glow;
    }

    nodes.forEach((node, i) => {
       const pulse = isMatched ? 0 : Math.sin(time + node.pulseOffset) * 5;
       const currentR = node.baseR + pulse;
       const nx = cx + Math.cos(node.angle + (time * 0.2)) * currentR;
       const ny = cy + Math.sin(node.angle + (time * 0.2)) * currentR;

       ctx.moveTo(nx, ny);
       ctx.lineTo(cx, cy);

       const nextNode = nodes[(i + 1) % numNodes];
       const nnx = cx + Math.cos(nextNode.angle + (time * 0.2)) * (nextNode.baseR + pulse);
       const nny = cy + Math.sin(nextNode.angle + (time * 0.2)) * (nextNode.baseR + pulse);
       ctx.moveTo(nx, ny);
       ctx.lineTo(nnx, nny);
    });

    ctx.stroke();
    ctx.shadowBlur = 0; 

    if (!isMatched) {
        ctx.fillStyle = colors.muted;
        nodes.forEach(node => {
           const progress = (time + node.pulseOffset) % 1; 
           const currentR = node.baseR;
           const nx = cx + Math.cos(node.angle + (time * 0.2)) * currentR;
           const ny = cy + Math.sin(node.angle + (time * 0.2)) * currentR;
           
           const px = nx + (cx - nx) * progress;
           const py = ny + (cy - ny) * progress;
           
           ctx.beginPath();
           ctx.arc(px, py, 2, 0, Math.PI * 2);
           ctx.fill();
        });
    }

    animationFrameId = requestAnimationFrame(animate);
  };

  const handleVisibilityChange = () => {
    isVisible = document.visibilityState === 'visible';
    if (isVisible) {
      animate();
    } 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 });

  resizeCanvas();
  animate();
});