@layer components {
  body > div:nth-of-type(2) > button:first-of-type,
  .woot--bubble-holder button,
  .woot-widget-bubble {
    position: fixed !important;
    right: max(22px, env(safe-area-inset-right)) !important;
    bottom: max(22px, env(safe-area-inset-bottom)) !important;
    left: auto !important;
    top: auto !important;
    z-index: 2147483000 !important;
    isolation: isolate;
    overflow: visible !important;
    border: 1px solid rgb(255 255 255 / 0.42) !important;
    background:
      radial-gradient(circle at 28% 20%, rgb(255 255 255 / 0.95), transparent 24%),
      linear-gradient(135deg, #00d5ff 0%, #0f9b78 34%, #f0a83a 68%, #ff4f9a 100%) !important;
    background-size: 220% 220% !important;
    box-shadow:
      0 0 0 0 rgb(0 213 255 / 0.42),
      0 16px 38px rgb(11 137 130 / 0.38),
      0 0 28px rgb(240 168 58 / 0.46) !important;
    color: #fff !important;
    transform-origin: center;
    animation:
      chatwoot-launcher-breathe 2.45s ease-in-out infinite,
      chatwoot-launcher-color 6.8s ease-in-out infinite !important;
  }

  body > div:nth-of-type(2) > button:first-of-type::before,
  .woot--bubble-holder button::before,
  .woot-widget-bubble::before {
    position: absolute;
    inset: -9px;
    z-index: -1;
    border-radius: inherit;
    content: "";
    background: conic-gradient(from 90deg, #00d5ff, #f0a83a, #ff4f9a, #00d5ff);
    filter: blur(13px);
    opacity: 0.58;
    animation: chatwoot-launcher-halo 2.45s ease-in-out infinite;
  }

  body > div:nth-of-type(2) > button:first-of-type::after,
  .woot--bubble-holder button::after,
  .woot-widget-bubble::after {
    position: absolute;
    inset: -16px;
    z-index: -2;
    border: 1px solid rgb(0 213 255 / 0.34);
    border-radius: inherit;
    content: "";
    opacity: 0;
    animation: chatwoot-launcher-ring 2.45s ease-out infinite;
  }

  body > div:nth-of-type(2) > button:first-of-type svg,
  .woot--bubble-holder button svg,
  .woot-widget-bubble svg {
    filter: drop-shadow(0 0 8px rgb(255 255 255 / 0.82));
  }

  body > div:nth-of-type(2) > button:first-of-type svg path,
  .woot--bubble-holder button svg path,
  .woot-widget-bubble svg path {
    fill: #ffffff !important;
    stroke: #ffffff !important;
    animation: chatwoot-icon-pulse 2.45s ease-in-out infinite;
  }

  body > div:nth-of-type(2) > button:first-of-type:hover,
  body > div:nth-of-type(2) > button:first-of-type:focus-visible,
  .woot--bubble-holder button:hover,
  .woot--bubble-holder button:focus-visible,
  .woot-widget-bubble:hover,
  .woot-widget-bubble:focus-visible {
    box-shadow:
      0 0 0 7px rgb(255 79 154 / 0.2),
      0 20px 48px rgb(11 137 130 / 0.45),
      0 0 34px rgb(240 168 58 / 0.62) !important;
    transform: translateY(-2px) scale(1.04);
  }

  @media (max-width: 640px) {
    body > div:nth-of-type(2) > button:first-of-type,
    .woot--bubble-holder button,
    .woot-widget-bubble {
      right: max(10px, env(safe-area-inset-right)) !important;
      bottom: max(10px, env(safe-area-inset-bottom)) !important;
      width: 40px !important;
      min-width: 40px !important;
      height: 40px !important;
      min-height: 40px !important;
      box-shadow:
        0 10px 22px rgb(11 137 130 / 0.26),
        0 0 16px rgb(240 168 58 / 0.3) !important;
      animation: none !important;
    }

    body > div:nth-of-type(2) > button:first-of-type::before,
    .woot--bubble-holder button::before,
    .woot-widget-bubble::before {
      inset: -3px;
      filter: blur(6px);
      opacity: 0.34;
      animation: none;
    }

    body > div:nth-of-type(2) > button:first-of-type::after,
    .woot--bubble-holder button::after,
    .woot-widget-bubble::after {
      display: none;
    }

    body > div:nth-of-type(2) > button:first-of-type svg,
    .woot--bubble-holder button svg,
    .woot-widget-bubble svg {
      width: 18px !important;
      height: 18px !important;
    }
  }
}

@keyframes chatwoot-launcher-breathe {
  0%,
  100% {
    transform: scale(1);
    box-shadow:
      0 0 0 0 rgb(0 213 255 / 0.38),
      0 16px 38px rgb(11 137 130 / 0.34),
      0 0 24px rgb(240 168 58 / 0.42);
  }

  50% {
    transform: scale(1.075);
    box-shadow:
      0 0 0 11px rgb(0 213 255 / 0),
      0 20px 48px rgb(255 79 154 / 0.34),
      0 0 36px rgb(240 168 58 / 0.72);
  }
}

@keyframes chatwoot-launcher-color {
  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

@keyframes chatwoot-launcher-halo {
  0%,
  100% {
    opacity: 0.48;
    transform: scale(0.98);
  }

  50% {
    opacity: 0.86;
    transform: scale(1.08);
  }
}

@keyframes chatwoot-launcher-ring {
  0% {
    opacity: 0.48;
    transform: scale(0.82);
  }

  70%,
  100% {
    opacity: 0;
    transform: scale(1.42);
  }
}

@keyframes chatwoot-icon-pulse {
  0%,
  100% {
    opacity: 0.94;
    filter: drop-shadow(0 0 4px rgb(255 255 255 / 0.54));
  }

  50% {
    opacity: 1;
    filter: drop-shadow(0 0 11px rgb(255 255 255 / 0.92));
  }
}

@media (prefers-reduced-motion: reduce) {
  body > div:nth-of-type(2) > button:first-of-type,
  body > div:nth-of-type(2) > button:first-of-type::before,
  body > div:nth-of-type(2) > button:first-of-type::after,
  body > div:nth-of-type(2) > button:first-of-type svg path,
  .woot--bubble-holder button,
  .woot--bubble-holder button::before,
  .woot--bubble-holder button::after,
  .woot--bubble-holder button svg path,
  .woot-widget-bubble,
  .woot-widget-bubble::before,
  .woot-widget-bubble::after,
  .woot-widget-bubble svg path {
    animation: none !important;
  }

  body > div:nth-of-type(2) > button:first-of-type,
  .woot--bubble-holder button,
  .woot-widget-bubble {
    box-shadow:
      0 16px 38px rgb(11 137 130 / 0.38),
      0 0 28px rgb(240 168 58 / 0.46) !important;
  }
}