.fp-travel-concierge-live-chat-bot-indicator-ui {
  --fp-container-width: 100%;
  --fp-max-width: 500px;
  --fp-aspect-ratio: 1 / 1;

  --fp-primary-color: #ffffff;
  --fp-secondary-color: #e0f2fe;
  --fp-muted-color: #64748b;
  --fp-soft-color: rgba(255, 255, 255, 0.65);
  --fp-background-color: transparent;

  --fp-info-color: #0f172a;
  --fp-warning-color: #bae6fd;
  --fp-danger-color: #0284c7;
  --fp-accent-color: #38bdf8;

  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-travel-concierge-live-chat-bot-indicator-ui * {
  box-sizing: border-box;
}

.fp-travel-concierge-live-chat-bot-indicator-ui-stage {
  position: relative;
  width: 100%;
  aspect-ratio: var(--fp-aspect-ratio);
  background: var(--fp-primary-color);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 40px rgba(2, 132, 199, 0.05);
  border: 1px solid var(--fp-secondary-color);
}

.fp-travel-concierge-live-chat-bot-indicator-ui-ambient {
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle at center, rgba(56, 189, 248, 0.15) 0%, transparent 60%);
  animation: fp-travel-concierge-live-chat-bot-indicator-ui-breathe 4s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}

.fp-travel-concierge-live-chat-bot-indicator-ui-orbit {
  position: absolute;
  width: 120%;
  height: 120%;
  border-radius: 50%;
  border: 2px dashed rgba(56, 189, 248, 0.2);
  animation: fp-travel-concierge-live-chat-bot-indicator-ui-spin 30s linear infinite;
  pointer-events: none;
  z-index: 2;
}

.fp-travel-concierge-live-chat-bot-indicator-ui-orbit::after {
  content: '';
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  border: 1px solid rgba(14, 165, 233, 0.1);
  animation: fp-travel-concierge-live-chat-bot-indicator-ui-spin 20s linear infinite reverse;
}

.fp-travel-concierge-live-chat-bot-indicator-ui-card {
  position: relative;
  z-index: 10;
  width: 80%;
  background: var(--fp-soft-color);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.04), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  display: flex;
  flex-direction: column;
  padding: 24px;
  overflow: hidden;
}

.fp-travel-concierge-live-chat-bot-indicator-ui-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.fp-travel-concierge-live-chat-bot-indicator-ui-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--fp-warning-color), var(--fp-accent-color));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3);
  position: relative;
}

.fp-travel-concierge-live-chat-bot-indicator-ui-avatar-icon {
  width: 20px;
  height: 20px;
  fill: var(--fp-primary-color);
}

.fp-travel-concierge-live-chat-bot-indicator-ui-status-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 10px;
  height: 10px;
  background-color: #10b981;
  border: 2px solid var(--fp-primary-color);
  border-radius: 50%;
}

.fp-travel-concierge-live-chat-bot-indicator-ui-profile-info {
  display: flex;
  flex-direction: column;
}

.fp-travel-concierge-live-chat-bot-indicator-ui-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--fp-info-color);
  letter-spacing: -0.02em;
}

.fp-travel-concierge-live-chat-bot-indicator-ui-role {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--fp-danger-color);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.fp-travel-concierge-live-chat-bot-indicator-ui-bubble-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.fp-travel-concierge-live-chat-bot-indicator-ui-bubble {
  background: var(--fp-primary-color);
  border-radius: 16px 16px 16px 4px;
  padding: 16px 20px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
  border: 1px solid var(--fp-secondary-color);
  position: relative;
  height: 48px;
  width: 80px;
}

.fp-travel-concierge-live-chat-bot-indicator-ui-canvas-container {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fp-travel-concierge-live-chat-bot-indicator-ui-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.fp-travel-concierge-live-chat-bot-indicator-ui-typing-text {
  font-size: 0.85rem;
  color: var(--fp-muted-color);
  display: flex;
  align-items: center;
  height: 20px;
  margin-left: 4px;
}

.fp-travel-concierge-live-chat-bot-indicator-ui-cursor {
  display: inline-block;
  width: 4px;
  height: 14px;
  background-color: var(--fp-accent-color);
  margin-left: 4px;
  border-radius: 2px;
  animation: fp-travel-concierge-live-chat-bot-indicator-ui-blink 1s step-start infinite;
}

@keyframes fp-travel-concierge-live-chat-bot-indicator-ui-breathe {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.1); opacity: 1; }
}

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

@keyframes fp-travel-concierge-live-chat-bot-indicator-ui-blink {
  50% { opacity: 0; }
}

@media (max-width: 400px) {
  .fp-travel-concierge-live-chat-bot-indicator-ui-card {
    width: 90%;
    padding: 20px;
  }
}

document.querySelectorAll('.fp-travel-concierge-live-chat-bot-indicator-ui').forEach(root => {
  const canvas = root.querySelector('.fp-travel-concierge-live-chat-bot-indicator-ui-canvas');
  const messageEl = root.querySelector('.fp-travel-concierge-live-chat-bot-indicator-ui-message');
  if (!canvas || !messageEl) return;

  const ctx = canvas.getContext('2d');
  let animationFrameId;
  let isVisible = true;
  
  let time = 0;
  let frameCount = 0;
  
  const messages = [
    "Checking suite availability",
    "Reviewing your preferences",
    "Preparing local recommendations",
    "Connecting to front desk"
  ];
  let msgIndex = 0;
  let charIndex = 0;
  let isDeleting = false;
  let typeSpeed = 5;

  const numDots = 3;
  const dotRadius = 4;
  const dotSpacing = 10;
  const baseColor = '#94a3b8'; 
  const spikeColor = '#38bdf8'; 

  let spikeActive = false;
  let spikeDuration = 0;

  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);
  };

  const drawDots = (width, height) => {
    const totalWidth = (numDots * dotRadius * 2) + ((numDots - 1) * dotSpacing);
    const startX = (width - totalWidth) / 2 + dotRadius;
    const centerY = height / 2;

    for (let i = 0; i < numDots; i++) {
      const speedMulti = spikeActive ? 6 : 3;
      const bounceAmp = spikeActive ? 8 : 4;
      
      const yOffset = Math.sin((time * speedMulti) + (i * 1.5)) * bounceAmp;
      
      ctx.beginPath();
      ctx.arc(startX + i * (dotRadius * 2 + dotSpacing), centerY + yOffset, dotRadius, 0, Math.PI * 2);
      
      ctx.fillStyle = spikeActive ? spikeColor : baseColor;
      ctx.fill();

      if (spikeActive) {
        ctx.shadowBlur = 6;
        ctx.shadowColor = spikeColor;
        ctx.fill();
        ctx.shadowBlur = 0;
      }
    }
  };

  const handleTypingText = () => {
    const currentMsg = messages[msgIndex];
    
    if (frameCount % typeSpeed === 0) {
      if (!isDeleting) {
        charIndex++;
        if (charIndex > currentMsg.length) {
          if (frameCount % 100 === 0) {
             isDeleting = true;
             typeSpeed = 2; 
          }
        }
      } else {
        charIndex--;
        if (charIndex === 0) {
          isDeleting = false;
          msgIndex = (msgIndex + 1) % messages.length;
          typeSpeed = 5; 
          spikeActive = true;
          spikeDuration = 60; 
        }
      }
      
      messageEl.innerText = currentMsg.substring(0, charIndex);
    }
  };

  const animate = () => {
    if (!isVisible) return;
    
    time += 0.02;
    frameCount++;

    if (spikeActive) {
      spikeDuration--;
      if (spikeDuration <= 0) spikeActive = false;
    }
    
    const width = canvas.width / window.devicePixelRatio;
    const height = canvas.height / window.devicePixelRatio;
    
    ctx.clearRect(0, 0, width, height);

    handleTypingText();
    drawDots(width, height);

    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();
});