.fp-fitness-app-live-chat-bot-indicator-ui {
  /* Layout Variables */
  --fp-container-width: 100%;
  --fp-max-width: 500px;
  --fp-aspect-ratio: 1 / 1;

  /* Semantic Color Variables */
  --fp-primary-color: #F4F4F5;
  --fp-secondary-color: #FFFFFF;
  --fp-text-color: #09090B;
  --fp-muted-color: #71717A;
  --fp-soft-color: rgba(204, 255, 0, 0.2);
  --fp-accent-color: #CCFF00;
  --fp-background-color: transparent;

  width: var(--fp-container-width);
  max-width: var(--fp-max-width);
  margin: 0 auto;
  background: var(--fp-background-color);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.fp-fitness-app-live-chat-bot-indicator-ui-stage {
  aspect-ratio: var(--fp-aspect-ratio);
  width: 100%;
  background-color: var(--fp-primary-color);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 5%;
  box-sizing: border-box;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(0,0,0,0.02),
    rgba(0,0,0,0.02) 2px,
    transparent 2px,
    transparent 10px
  );
}

.fp-fitness-app-live-chat-bot-indicator-ui-card {
  background: var(--fp-secondary-color);
  width: 80%;
  max-width: 350px;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  position: relative;
  z-index: 2;
  border-left: 6px solid var(--fp-text-color);
  animation: fp-fitness-app-live-chat-bot-indicator-ui-breathe 3s ease-in-out infinite alternate;
}

.fp-fitness-app-live-chat-bot-indicator-ui-card.is-typing {
  box-shadow: 0 10px 40px var(--fp-soft-color), 0 0 0 2px var(--fp-accent-color);
}

.fp-fitness-app-live-chat-bot-indicator-ui-avatar-wrap {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fp-fitness-app-live-chat-bot-indicator-ui-ring {
  position: absolute;
  inset: -6px;
  border: 3px dashed var(--fp-text-color);
  border-top-color: var(--fp-accent-color);
  border-radius: 50%;
  animation: fp-fitness-app-live-chat-bot-indicator-ui-spin 4s linear infinite;
}

.fp-fitness-app-live-chat-bot-indicator-ui-avatar {
  width: 100%;
  height: 100%;
  background: var(--fp-text-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}

.fp-fitness-app-live-chat-bot-indicator-ui-avatar svg {
  width: 28px;
  height: 28px;
  fill: var(--fp-accent-color);
}

.fp-fitness-app-live-chat-bot-indicator-ui-text-wrap {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: hidden;
}

.fp-fitness-app-live-chat-bot-indicator-ui-name {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--fp-muted-color);
  text-transform: uppercase;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.fp-fitness-app-live-chat-bot-indicator-ui-status-dot {
  width: 6px;
  height: 6px;
  background: var(--fp-accent-color);
  border-radius: 50%;
}

.fp-fitness-app-live-chat-bot-indicator-ui-message {
  font-size: 15px;
  font-weight: 700;
  color: var(--fp-text-color);
  white-space: nowrap;
  overflow: hidden;
  display: flex;
  align-items: center;
  font-style: italic;
}

.fp-fitness-app-live-chat-bot-indicator-ui-cursor {
  display: inline-block;
  width: 10px;
  height: 18px;
  background: var(--fp-accent-color);
  margin-left: 4px;
  box-shadow: 2px 2px 0px var(--fp-text-color);
  animation: fp-fitness-app-live-chat-bot-indicator-ui-blink 0.5s steps(2, start) infinite;
}

.fp-fitness-app-live-chat-bot-indicator-ui-speedlines {
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0.2;
}

.fp-fitness-app-live-chat-bot-indicator-ui-line {
  height: 4px;
  background: var(--fp-text-color);
  border-radius: 2px;
  transform-origin: right;
}

.fp-fitness-app-live-chat-bot-indicator-ui-line:nth-child(1) { width: 40px; animation: fp-fitness-app-live-chat-bot-indicator-ui-dash 1.5s infinite; }
.fp-fitness-app-live-chat-bot-indicator-ui-line:nth-child(2) { width: 60px; animation: fp-fitness-app-live-chat-bot-indicator-ui-dash 2s infinite 0.3s; }
.fp-fitness-app-live-chat-bot-indicator-ui-line:nth-child(3) { width: 30px; animation: fp-fitness-app-live-chat-bot-indicator-ui-dash 1.2s infinite 0.6s; }

@keyframes fp-fitness-app-live-chat-bot-indicator-ui-breathe {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-5px); }
}

@keyframes fp-fitness-app-live-chat-bot-indicator-ui-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes fp-fitness-app-live-chat-bot-indicator-ui-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes fp-fitness-app-live-chat-bot-indicator-ui-dash {
  0% { transform: scaleX(1); opacity: 1; }
  50% { transform: scaleX(1.5); opacity: 0.5; }
  100% { transform: scaleX(1); opacity: 1; }
}

@media (max-width: 480px) {
  .fp-fitness-app-live-chat-bot-indicator-ui-card { width: 90%; padding: 16px; gap: 12px; }
  .fp-fitness-app-live-chat-bot-indicator-ui-message { font-size: 13px; }
}

document.querySelectorAll('.fp-fitness-app-live-chat-bot-indicator-ui').forEach(root => {
  const textEl = root.querySelector('#fp-fitness-app-live-chat-bot-indicator-ui-text');
  const cardEl = root.querySelector('#fp-fitness-app-live-chat-bot-indicator-ui-card');
  const ringEl = root.querySelector('#fp-fitness-app-live-chat-bot-indicator-ui-ring');

  const phrases = [
    "Analyzing biomechanics...",
    "Loading HIIT protocol...",
    "Setting target HR zones...",
    "Prepare to crush it."
  ];

  let phraseIndex = 0;
  let charIndex = 0;
  let isDeleting = false;
  let typeAccumulator = 0;
  let pauseTimer = 0;
  let spikeLevel = 0;
  let reqId;
  let isVisible = true;
  let lastTime = 0;

  function animate(time) {
    if (!lastTime) lastTime = time;
    const dt = time - lastTime;
    lastTime = time;

    if (pauseTimer > 0) {
      pauseTimer -= dt;
    } else {
      typeAccumulator += dt;
      const threshold = isDeleting ? 20 : 35;

      if (typeAccumulator > threshold) {
        typeAccumulator = 0;
        const currentPhrase = phrases[phraseIndex];

        if (!isDeleting) {
          if (charIndex < currentPhrase.length) {
            charIndex++;
            if (textEl) textEl.textContent = currentPhrase.substring(0, charIndex);
            spikeLevel = 1.0;
            if (cardEl) cardEl.classList.add('is-typing');
          } else {
            pauseTimer = 1800;
            isDeleting = true;
            if (cardEl) cardEl.classList.remove('is-typing');
          }
        } else {
          if (charIndex > 0) {
            charIndex--;
            if (textEl) textEl.textContent = currentPhrase.substring(0, charIndex);
            spikeLevel = 0.4;
          } else {
            isDeleting = false;
            phraseIndex = (phraseIndex + 1) % phrases.length;
            pauseTimer = 400;
          }
        }
      }
    }

    if (spikeLevel > 0) {
      spikeLevel *= 0.88;
      if (spikeLevel < 0.05) {
        spikeLevel = 0;
        if (cardEl) cardEl.classList.remove('is-typing');
      }
    }

    if (ringEl) {
      const scale = 1 + (spikeLevel * 0.12);
      ringEl.style.transform = `scale(${scale})`;
    }

    if (isVisible) reqId = requestAnimationFrame(animate);
  }

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      isVisible = entry.isIntersecting;
      if (isVisible) {
        lastTime = performance.now();
        if (!reqId) reqId = requestAnimationFrame(animate);
      } else if (reqId) {
        cancelAnimationFrame(reqId);
        reqId = null;
      }
    });
  });
  observer.observe(root);

  const handleVisibility = () => {
    if (document.visibilityState === "hidden") {
      isVisible = false;
      if (reqId) { cancelAnimationFrame(reqId); reqId = null; }
    } else {
      isVisible = true;
      lastTime = performance.now();
      if (!reqId) reqId = requestAnimationFrame(animate);
    }
  };
  document.addEventListener("visibilitychange", handleVisibility);

  const clean = setInterval(() => {
    if (!document.body.contains(root)) {
      if (reqId) cancelAnimationFrame(reqId);
      observer.disconnect();
      document.removeEventListener("visibilitychange", handleVisibility);
      clearInterval(clean);
    }
  }, 1000);
});