/* =============================================
   STICKY WHATSAPP CHATBOT — BEA BOT (Eazybe-style)
   Reference: https://eazybe.com/
   ============================================= */
.sticky-chatbot {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(20px, 4vw, 32px);
  z-index: 999;
  width: 72px;
  pointer-events: none;
}

.sticky-chatbot__btn {
  position: relative;
  display: block;
  flex-shrink: 0;
  text-decoration: none;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

.sticky-chatbot__btn:focus-visible {
  outline: none;
}

.sticky-chatbot__btn-inner {
  display: block;
  transform: scale(1);
  transition:
    transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1),
    filter 0.35s ease;
  will-change: transform;
}

.sticky-chatbot.is-bot-hovered .sticky-chatbot__btn-inner,
.sticky-chatbot__btn:focus-visible .sticky-chatbot__btn-inner {
  transform: scale(1.08);
  filter: brightness(1.06);
}

.sticky-chatbot.is-bot-pressed .sticky-chatbot__btn-inner,
.sticky-chatbot__btn:active .sticky-chatbot__btn-inner {
  transform: scale(0.94);
  transition-duration: 0.12s;
  filter: brightness(0.98);
}

/* ---- Bea bot (Eazybe landing animations) ---- */
.bea-bot {
  position: relative;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  transform-origin: 50% 50%;
  animation: landing-beaFly 7s ease-in-out infinite;
  transition: filter 0.35s ease;
}

.bea-bot::before {
  content: '';
  position: absolute;
  inset: -16px;
  z-index: -1;
  pointer-events: none;
  filter: blur(2px);
  background: radial-gradient(closest-side, rgba(17, 185, 86, 0.4), rgba(91, 75, 174, 0.15) 50%, transparent 80%);
  animation: landing-beaGlow 3s ease-in-out infinite;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.sticky-chatbot.is-bot-hovered .bea-bot::before,
.sticky-chatbot__btn:focus-visible .bea-bot::before {
  opacity: 1;
  transform: scale(1.2);
}

.bea-bot svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: landing-beaBob 2.2s ease-in-out infinite;
}

.bea-ring {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1.5px solid rgba(17, 185, 86, 0.55);
  opacity: 0;
  pointer-events: none;
  animation: landing-beaPulse 2.6s ease-out infinite;
}

.bea-ring.r2 {
  animation-delay: 1.3s;
}

.bea-shadow {
  transform-origin: 50% 50%;
  transform-box: fill-box;
  animation: landing-beaShadow 7s ease-in-out infinite;
}

.bea-wing {
  transform-origin: 50% 50%;
  transform-box: fill-box;
  animation: landing-beaWing 0.42s ease-in-out infinite;
}

.bea-wing.right {
  animation-delay: 0.18s;
}

.bea-antenna {
  transform-origin: 50% 100%;
  transform-box: fill-box;
  animation: landing-beaAntenna 1.8s ease-in-out infinite;
}

.bea-body {
  transform-origin: 50% 60%;
  transform-box: fill-box;
  animation: landing-beaBreathe 3s ease-in-out infinite;
}

.bea-eye {
  transform-origin: 50% 50%;
  transform-box: fill-box;
  animation: landing-beaBlink 4s ease-in-out infinite;
}

.bea-dot {
  animation: landing-beaTalk 1s ease-in-out infinite;
}

.bea-dot.d2 {
  animation-delay: 0.2s;
}

.bea-dot.d3 {
  animation-delay: 0.4s;
}

.sticky-chatbot.is-bot-hovered .bea-bot,
.sticky-chatbot__btn:focus-visible .bea-bot {
  animation-duration: 4s;
}

.sticky-chatbot.is-bot-hovered .bea-wing,
.sticky-chatbot__btn:focus-visible .bea-wing {
  animation-duration: 0.3s;
}

.sticky-chatbot.is-bot-hovered .bea-ring,
.sticky-chatbot__btn:focus-visible .bea-ring {
  animation-duration: 2s;
}

.sticky-chatbot.is-bot-pressed .bea-bot,
.sticky-chatbot__btn:active .bea-bot {
  animation-play-state: paused;
}

.sticky-chatbot.is-bot-pressed .bea-bot svg,
.sticky-chatbot__btn:active .bea-bot svg {
  animation-play-state: paused;
}

/* ---- Tooltip (above bot, right-aligned) ---- */
.sticky-chatbot__tooltip {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  width: min(240px, calc(100vw - 32px));
  padding: 14px 18px;
  border-radius: 16px;
  color: #fff;
  background: #0f172aeb;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 50px -16px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.96);
  transform-origin: bottom right;
  pointer-events: none;
  transition:
    opacity 0.22s ease,
    visibility 0.22s ease,
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sticky-chatbot__tooltip::after {
  content: '';
  position: absolute;
  bottom: -6px;
  right: 30px;
  width: 12px;
  height: 12px;
  background: #0f172aeb;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  transform: rotate(-45deg);
}

.sticky-chatbot__tooltip-name {
  margin: 0 0 4px;
  font-family: var(--font-primary);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-align: center;
  color: #fff;
}

.sticky-chatbot__tooltip-name em {
  font-style: italic;
  color: var(--primary-green);
}

.sticky-chatbot__tooltip-msg {
  margin: 0 0 10px;
  font-family: var(--font-primary);
  font-size: 0.78125rem;
  font-weight: 400;
  line-height: 1.45;
  text-align: center;
  color: rgba(255, 255, 255, 0.72);
}

.sticky-chatbot__tooltip-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  margin: 0;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
  font-family: var(--font-primary);
  font-size: 0.65625rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--primary-green);
}

.sticky-chatbot__tooltip-cta span {
  transition: transform 0.2s ease;
}

.sticky-chatbot:hover .sticky-chatbot__tooltip-cta span:last-child,
.sticky-chatbot.is-tooltip-visible .sticky-chatbot__tooltip-cta span:last-child,
.sticky-chatbot:focus-within .sticky-chatbot__tooltip-cta span:last-child {
  transform: translateX(3px);
}

.sticky-chatbot.is-tooltip-visible .sticky-chatbot__tooltip,
.sticky-chatbot:hover .sticky-chatbot__tooltip,
.sticky-chatbot:focus-within .sticky-chatbot__tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  animation: bea-tooltip-bob 2.8s ease-in-out infinite;
}

/* ---- Keyframes (from eazybe.com) ---- */
@keyframes landing-beaFly {
  0% {
    transform: translate(0, 0) rotate(3deg);
  }

  14% {
    transform: translate(12px, -10px) rotate(-5deg);
  }

  28% {
    transform: translate(18px, 6px) rotate(2deg);
  }

  42% {
    transform: translate(6px, 14px) rotate(-7deg);
  }

  57% {
    transform: translate(-10px, 4px) rotate(5deg);
  }

  71% {
    transform: translate(-16px, -8px) rotate(-4deg);
  }

  85% {
    transform: translate(-4px, -16px) rotate(6deg);
  }

  100% {
    transform: translate(0, 0) rotate(3deg);
  }
}

@keyframes landing-beaBob {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }
}

@keyframes landing-beaBreathe {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.025);
  }
}

@keyframes landing-beaWing {
  0%,
  100% {
    transform: scaleY(1);
  }

  50% {
    transform: scaleY(0.62);
  }
}

@keyframes landing-beaAntenna {
  0%,
  100% {
    transform: rotate(-4deg);
  }

  50% {
    transform: rotate(4deg);
  }
}

@keyframes landing-beaBlink {
  0%,
  90%,
  100% {
    transform: scaleY(1);
  }

  93%,
  97% {
    transform: scaleY(0.15);
  }
}

@keyframes landing-beaTalk {
  0%,
  100% {
    opacity: 0.4;
    transform: translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateY(-1px);
  }
}

@keyframes landing-beaShadow {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(1);
  }

  50% {
    opacity: 0.15;
    transform: scale(0.8);
  }
}

@keyframes landing-beaGlow {
  0%,
  100% {
    opacity: 0.7;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

@keyframes landing-beaPulse {
  0% {
    opacity: 0.55;
    transform: scale(0.85);
  }

  100% {
    opacity: 0;
    transform: scale(1.7);
  }
}

@keyframes bea-tooltip-bob {
  0%,
  100% {
    transform: translateX(0) translateY(0) scale(1);
  }

  50% {
    transform: translateX(0) translateY(-3px) scale(1);
  }
}

@media (max-width: 768px) {
  .sticky-chatbot {
    right: 14px;
    bottom: 16px;
    width: 68px;
  }

  .bea-bot {
    width: 68px;
    height: 68px;
  }

  .sticky-chatbot__tooltip {
    width: min(220px, calc(100vw - 28px));
    padding: 12px 14px;
  }

  .sticky-chatbot__tooltip::after {
    right: 28px;
  }

  .sticky-chatbot__tooltip-name {
    font-size: 0.875rem;
  }

  .sticky-chatbot__tooltip-msg {
    font-size: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bea-bot,
  .bea-bot::before,
  .bea-bot svg,
  .bea-ring,
  .bea-shadow,
  .bea-wing,
  .bea-antenna,
  .bea-body,
  .bea-eye,
  .bea-dot,
  .sticky-chatbot.is-tooltip-visible .sticky-chatbot__tooltip {
    animation: none;
  }

  .sticky-chatbot__tooltip {
    transition: opacity 0.2s ease;
  }
}