.mbwcta {
  --mbwcta-primary: #25070b;
  --mbwcta-shell: #d4d1d1;
  --mbwcta-accent: #f21d2f;
  --mbwcta-text: #ffffff;
  --mbwcta-desktop-width: 640px;
  --mbwcta-desktop-scale: 0.86;
  --mbwcta-mobile-width: 390px;
  --mbwcta-mobile-scale: 1;
  --mbwcta-width: var(--mbwcta-desktop-width);
  --mbwcta-scale: var(--mbwcta-desktop-scale);
  position: fixed;
  z-index: 99999;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(22px, env(safe-area-inset-bottom));
  width: min(var(--mbwcta-width), calc(100vw - 32px));
  font-family: Inter, Roboto, Arial, sans-serif;
  color: #151827;
  pointer-events: none;
}

.mbwcta--size-desktop-s {
  --mbwcta-desktop-width: 520px;
  --mbwcta-desktop-scale: 0.74;
}

.mbwcta--size-desktop-m {
  --mbwcta-desktop-width: 640px;
  --mbwcta-desktop-scale: 0.86;
}

.mbwcta--size-desktop-l {
  --mbwcta-desktop-width: 760px;
  --mbwcta-desktop-scale: 1;
}

.mbwcta--size-desktop-custom {
  --mbwcta-desktop-width: var(--mbwcta-desktop-custom-width, 640px);
  --mbwcta-desktop-scale: var(--mbwcta-desktop-custom-scale, 0.86);
}

.mbwcta--size-mobile-s {
  --mbwcta-mobile-width: 320px;
  --mbwcta-mobile-scale: 0.86;
}

.mbwcta--size-mobile-m {
  --mbwcta-mobile-width: 390px;
  --mbwcta-mobile-scale: 1;
}

.mbwcta--size-mobile-l {
  --mbwcta-mobile-width: 480px;
  --mbwcta-mobile-scale: 1.12;
}

.mbwcta--size-mobile-custom {
  --mbwcta-mobile-width: var(--mbwcta-mobile-custom-width, 390px);
  --mbwcta-mobile-scale: var(--mbwcta-mobile-custom-scale, 1);
}

.mbwcta--bottom-left {
  right: auto;
  left: max(18px, env(safe-area-inset-left));
}

.mbwcta *,
.mbwcta *::before,
.mbwcta *::after {
  box-sizing: border-box;
}

.mbwcta button,
.mbwcta a {
  pointer-events: auto;
}

.mbwcta button,
.mbwcta a,
.mbwcta input,
.mbwcta textarea {
  font-family: Inter, Roboto, Arial, sans-serif;
  letter-spacing: 0;
  text-transform: none;
}

.mbwcta__teaser {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: calc(18px * var(--mbwcta-scale));
  max-width: 100%;
  min-height: calc(84px * var(--mbwcta-scale));
  margin-left: auto;
  padding:
    calc(18px * var(--mbwcta-scale))
    calc(46px * var(--mbwcta-scale))
    calc(18px * var(--mbwcta-scale))
    calc(36px * var(--mbwcta-scale));
  border: calc(16px * var(--mbwcta-scale)) solid var(--mbwcta-shell);
  border-radius: 999px;
  background: var(--mbwcta-primary);
  color: var(--mbwcta-text);
  box-shadow: 0 calc(18px * var(--mbwcta-scale)) calc(36px * var(--mbwcta-scale)) rgba(25, 10, 10, 0.24);
  cursor: pointer;
  font: inherit;
  font-size: calc(30px * var(--mbwcta-scale));
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.1;
  text-align: left;
  text-transform: none;
  -webkit-appearance: none;
  appearance: none;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.mbwcta--bottom-left .mbwcta__teaser {
  margin-left: 0;
  margin-right: auto;
}

.mbwcta__teaser:hover,
.mbwcta__teaser:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 calc(22px * var(--mbwcta-scale)) calc(42px * var(--mbwcta-scale)) rgba(25, 10, 10, 0.3);
  outline: none;
}

.mbwcta--anim-bounce .mbwcta__teaser:active {
  transform: translateY(0) scale(0.98);
}

.mbwcta__whatsapp-icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: calc(42px * var(--mbwcta-scale));
  height: calc(42px * var(--mbwcta-scale));
  color: currentColor;
}

.mbwcta__whatsapp-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.mbwcta__teaser-text {
  overflow-wrap: anywhere;
}

.mbwcta__notification-dot {
  position: absolute;
  top: calc(8px * var(--mbwcta-scale));
  right: calc(10px * var(--mbwcta-scale));
  width: calc(17px * var(--mbwcta-scale));
  height: calc(17px * var(--mbwcta-scale));
  border-radius: 999px;
  background: var(--mbwcta-accent);
}

.mbwcta__panel {
  width: 100%;
  margin-left: auto;
  overflow: hidden;
  border-radius: calc(10px * var(--mbwcta-scale));
  background: #ffffff;
  box-shadow: 0 calc(22px * var(--mbwcta-scale)) calc(50px * var(--mbwcta-scale)) rgba(15, 12, 12, 0.28);
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px) scale(0.98);
  transform-origin: bottom right;
  transition: opacity 180ms ease, transform 180ms ease;
}

.mbwcta--bottom-left .mbwcta__panel {
  margin-left: 0;
  margin-right: auto;
  transform-origin: bottom left;
}

.mbwcta--open .mbwcta__panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.mbwcta--anim-bounce.mbwcta--open .mbwcta__panel {
  animation: mbwcta-panel-pop 360ms cubic-bezier(0.2, 1.34, 0.34, 1) both;
}

.mbwcta__header {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(188px * var(--mbwcta-scale));
  gap: calc(24px * var(--mbwcta-scale));
  padding:
    calc(28px * var(--mbwcta-scale))
    calc(72px * var(--mbwcta-scale))
    calc(28px * var(--mbwcta-scale))
    calc(60px * var(--mbwcta-scale));
  background: var(--mbwcta-primary);
  color: var(--mbwcta-text);
}

.mbwcta__avatar-wrap {
  position: relative;
  flex: 0 0 auto;
}

.mbwcta__avatar {
  display: grid;
  place-items: center;
  width: calc(110px * var(--mbwcta-scale));
  height: calc(110px * var(--mbwcta-scale));
  border: calc(3px * var(--mbwcta-scale)) solid #ffffff;
  border-radius: 999px;
  background: #f2f2f2;
  color: var(--mbwcta-primary);
  object-fit: cover;
  font-size: calc(30px * var(--mbwcta-scale));
  font-weight: 900;
}

.mbwcta__online-dot {
  position: absolute;
  right: calc(4px * var(--mbwcta-scale));
  bottom: calc(14px * var(--mbwcta-scale));
  width: calc(26px * var(--mbwcta-scale));
  height: calc(26px * var(--mbwcta-scale));
  border: max(2px, calc(2px * var(--mbwcta-scale))) solid #ffffff;
  border-radius: 999px;
  background: #19d52f;
}

.mbwcta__identity {
  min-width: 0;
}

.mbwcta__name {
  color: var(--mbwcta-text);
  font-size: calc(29px * var(--mbwcta-scale));
  font-weight: 900;
  line-height: 1.1;
}

.mbwcta__role {
  margin-top: calc(14px * var(--mbwcta-scale));
  color: rgba(255, 255, 255, 0.72);
  font-size: calc(25px * var(--mbwcta-scale));
  font-weight: 800;
  line-height: 1.1;
}

.mbwcta__close {
  position: absolute;
  top: calc(26px * var(--mbwcta-scale));
  right: calc(28px * var(--mbwcta-scale));
  display: grid;
  place-items: center;
  width: calc(42px * var(--mbwcta-scale));
  height: calc(42px * var(--mbwcta-scale));
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
  -webkit-appearance: none;
  appearance: none;
}

.mbwcta__close span {
  display: block;
  font-size: calc(48px * var(--mbwcta-scale));
  font-weight: 300;
  line-height: calc(38px * var(--mbwcta-scale));
}

.mbwcta__body {
  min-height: calc(400px * var(--mbwcta-scale));
  padding: calc(40px * var(--mbwcta-scale));
  background-color: #f7f8f8;
  background-image:
    radial-gradient(circle at 18px 18px, rgba(22, 24, 29, 0.055) 0 2px, transparent 3px),
    radial-gradient(circle at 50px 48px, rgba(22, 24, 29, 0.045) 0 1px, transparent 2px);
  background-size: calc(58px * var(--mbwcta-scale)) calc(58px * var(--mbwcta-scale));
}

.mbwcta__bubble {
  max-width: calc(650px * var(--mbwcta-scale));
  padding:
    calc(23px * var(--mbwcta-scale))
    calc(30px * var(--mbwcta-scale))
    calc(24px * var(--mbwcta-scale));
  border-radius: calc(8px * var(--mbwcta-scale));
  background: #ffffff;
  box-shadow: 0 1px 10px rgba(20, 20, 20, 0.12);
}

.mbwcta__bubble p {
  margin: 0;
  color: #171b2a;
  font-size: calc(26px * var(--mbwcta-scale));
  font-weight: 900;
  line-height: 1.18;
}

.mbwcta__bubble time {
  display: block;
  margin-top: calc(16px * var(--mbwcta-scale));
  color: #8c8c8c;
  font-size: calc(21px * var(--mbwcta-scale));
  font-weight: 800;
  line-height: 1;
}

.mbwcta__footer {
  padding:
    calc(18px * var(--mbwcta-scale))
    calc(15px * var(--mbwcta-scale))
    calc(10px * var(--mbwcta-scale));
  background: #ffffff;
}

.mbwcta__action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(20px * var(--mbwcta-scale));
  min-height: calc(84px * var(--mbwcta-scale));
  width: 100%;
  padding:
    calc(20px * var(--mbwcta-scale))
    calc(24px * var(--mbwcta-scale));
  border-radius: calc(9px * var(--mbwcta-scale));
  background: var(--mbwcta-primary);
  color: var(--mbwcta-text);
  font-size: calc(28px * var(--mbwcta-scale));
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: 0 calc(9px * var(--mbwcta-scale)) calc(16px * var(--mbwcta-scale)) rgba(25, 10, 10, 0.18);
}

.mbwcta__action:hover,
.mbwcta__action:focus-visible {
  color: var(--mbwcta-text);
  outline: 3px solid rgba(242, 29, 47, 0.28);
  outline-offset: 3px;
}

.mbwcta__send-icon {
  width: calc(34px * var(--mbwcta-scale));
  height: calc(26px * var(--mbwcta-scale));
  flex: 0 0 auto;
  clip-path: polygon(0 0, 100% 50%, 0 100%, 13% 54%, 13% 46%);
  background: currentColor;
}

.mbwcta__floating-close {
  display: grid;
  place-items: center;
  width: calc(84px * var(--mbwcta-scale));
  height: calc(84px * var(--mbwcta-scale));
  margin-top: calc(28px * var(--mbwcta-scale));
  margin-left: auto;
  border: 0;
  border-radius: 999px;
  background: var(--mbwcta-primary);
  color: #ffffff;
  box-shadow: 0 calc(18px * var(--mbwcta-scale)) calc(34px * var(--mbwcta-scale)) rgba(25, 10, 10, 0.2);
  cursor: pointer;
  font: inherit;
  letter-spacing: 0;
  opacity: 0;
  text-transform: none;
  transform: scale(0.92);
  transition: opacity 180ms ease, transform 180ms ease;
  -webkit-appearance: none;
  appearance: none;
}

.mbwcta--open .mbwcta__floating-close {
  opacity: 1;
  transform: scale(1);
}

.mbwcta--bottom-left .mbwcta__floating-close {
  margin-left: 0;
  margin-right: auto;
}

.mbwcta__floating-close span {
  font-size: calc(44px * var(--mbwcta-scale));
  font-weight: 300;
  line-height: 1;
}

.mbwcta--open .mbwcta__teaser {
  display: none;
}

.mbwcta--anim-pulse:not(.mbwcta--open) .mbwcta__teaser {
  animation: mbwcta-soft-pulse 2600ms ease-in-out infinite;
}

.mbwcta--anim-pulse:not(.mbwcta--open) .mbwcta__notification-dot {
  animation: mbwcta-dot-pulse 1800ms ease-in-out infinite;
}

@keyframes mbwcta-soft-pulse {
  0%,
  100% {
    box-shadow: 0 calc(18px * var(--mbwcta-scale)) calc(36px * var(--mbwcta-scale)) rgba(25, 10, 10, 0.24);
  }

  50% {
    box-shadow: 0 calc(22px * var(--mbwcta-scale)) calc(48px * var(--mbwcta-scale)) rgba(25, 10, 10, 0.34);
  }
}

@keyframes mbwcta-dot-pulse {
  0%,
  100% {
    transform: scale(1);
  }

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

@keyframes mbwcta-panel-pop {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
  }

  70% {
    opacity: 1;
    transform: translateY(-3px) scale(1.01);
  }

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

@media (max-width: 782px) {
  .mbwcta {
    --mbwcta-width: var(--mbwcta-mobile-width);
    --mbwcta-scale: var(--mbwcta-mobile-scale);
    right: max(12px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    width: min(var(--mbwcta-width), calc(100vw - 24px));
  }

  .mbwcta--bottom-left {
    right: auto;
    left: max(12px, env(safe-area-inset-left));
  }

  .mbwcta__teaser {
    width: 100%;
    min-height: calc(68px * var(--mbwcta-scale));
    gap: calc(12px * var(--mbwcta-scale));
    padding:
      calc(14px * var(--mbwcta-scale))
      calc(30px * var(--mbwcta-scale))
      calc(14px * var(--mbwcta-scale))
      calc(22px * var(--mbwcta-scale));
    border-width: calc(9px * var(--mbwcta-scale));
    font-size: calc(18px * var(--mbwcta-scale));
  }

  .mbwcta__whatsapp-icon {
    width: calc(30px * var(--mbwcta-scale));
    height: calc(30px * var(--mbwcta-scale));
  }

  .mbwcta__notification-dot {
    top: calc(5px * var(--mbwcta-scale));
    right: calc(7px * var(--mbwcta-scale));
    width: calc(13px * var(--mbwcta-scale));
    height: calc(13px * var(--mbwcta-scale));
  }

  .mbwcta__panel {
    max-height: calc(100vh - 106px);
    overflow-y: auto;
  }

  .mbwcta__header {
    min-height: calc(128px * var(--mbwcta-scale));
    gap: calc(15px * var(--mbwcta-scale));
    padding:
      calc(22px * var(--mbwcta-scale))
      calc(52px * var(--mbwcta-scale))
      calc(22px * var(--mbwcta-scale))
      calc(22px * var(--mbwcta-scale));
  }

  .mbwcta__avatar {
    width: calc(78px * var(--mbwcta-scale));
    height: calc(78px * var(--mbwcta-scale));
    font-size: calc(22px * var(--mbwcta-scale));
  }

  .mbwcta__online-dot {
    width: calc(20px * var(--mbwcta-scale));
    height: calc(20px * var(--mbwcta-scale));
    right: calc(1px * var(--mbwcta-scale));
    bottom: calc(8px * var(--mbwcta-scale));
  }

  .mbwcta__name {
    font-size: calc(22px * var(--mbwcta-scale));
  }

  .mbwcta__role {
    margin-top: calc(8px * var(--mbwcta-scale));
    font-size: calc(18px * var(--mbwcta-scale));
  }

  .mbwcta__close {
    top: calc(16px * var(--mbwcta-scale));
    right: calc(16px * var(--mbwcta-scale));
    width: calc(34px * var(--mbwcta-scale));
    height: calc(34px * var(--mbwcta-scale));
  }

  .mbwcta__close span {
    font-size: calc(38px * var(--mbwcta-scale));
    line-height: 1;
  }

  .mbwcta__body {
    min-height: calc(260px * var(--mbwcta-scale));
    padding:
      calc(26px * var(--mbwcta-scale))
      calc(20px * var(--mbwcta-scale));
  }

  .mbwcta__bubble {
    padding:
      calc(18px * var(--mbwcta-scale))
      calc(20px * var(--mbwcta-scale));
  }

  .mbwcta__bubble p {
    font-size: calc(20px * var(--mbwcta-scale));
  }

  .mbwcta__bubble time {
    font-size: calc(17px * var(--mbwcta-scale));
  }

  .mbwcta__action {
    min-height: calc(68px * var(--mbwcta-scale));
    gap: calc(12px * var(--mbwcta-scale));
    padding:
      calc(17px * var(--mbwcta-scale))
      calc(18px * var(--mbwcta-scale));
    font-size: calc(19px * var(--mbwcta-scale));
  }

  .mbwcta__send-icon {
    width: calc(27px * var(--mbwcta-scale));
    height: calc(21px * var(--mbwcta-scale));
  }

  .mbwcta__floating-close {
    width: calc(64px * var(--mbwcta-scale));
    height: calc(64px * var(--mbwcta-scale));
    margin-top: calc(16px * var(--mbwcta-scale));
  }
}

@media (prefers-reduced-motion: reduce) {
  .mbwcta *,
  .mbwcta *::before,
  .mbwcta *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

.mbwcta--anim-none *,
.mbwcta--anim-none *::before,
.mbwcta--anim-none *::after {
  animation: none !important;
  transition: none !important;
}