/*
 * Sales-Bot Pulse-Ring Animation
 * Erzeugt zwei expandierende Ringe um die Chat-Bubble.
 * Wird per <link> vom widget-core.js geladen.
 *
 * Verwendung: Das .sbot-bubble-wrap Element braucht data-sbot-client="<slug>"
 * und das zugehoerige config.json muss primaryColor gesetzt haben.
 * Da CSS keine JSON-Daten lesen kann, werden die Ring-Farben via JS-generiertem
 * <style>-Tag pro Client gesetzt (siehe widget-core.js injectStyles).
 * Die Animations-Geometrie kommt aus diesem File.
 */

.sbot-bubble-wrap {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99990;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
}

/* Pulse rings: ::before = outer ring, ::after = inner ring */
.sbot-bubble-wrap::before,
.sbot-bubble-wrap::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  animation: sbotPulse 2.4s ease-out infinite;
  pointer-events: none;
  /* Color overridden per client via JS injectStyles primaryColor */
  border: 2px solid currentColor;
  opacity: 0;
}

.sbot-bubble-wrap::before {
  width: 68px;
  height: 68px;
  animation-delay: 0s;
}

.sbot-bubble-wrap::after {
  width: 68px;
  height: 68px;
  animation-delay: 1.2s;
}

@keyframes sbotPulse {
  0%   { transform: scale(1);    opacity: 0.5; }
  70%  { transform: scale(1.65); opacity: 0;   }
  100% { transform: scale(1.65); opacity: 0;   }
}

/* Battery-friendly: reduce animation on low-power devices */
@media (prefers-reduced-motion: reduce) {
  .sbot-bubble-wrap::before,
  .sbot-bubble-wrap::after {
    animation: none;
    opacity: 0;
  }
}

/* Mobile: slightly tighter rings */
@media (max-width: 480px) {
  .sbot-bubble-wrap::before,
  .sbot-bubble-wrap::after {
    animation-duration: 3s;
  }
}