/*
  DTC Big-Eyed Butterfly Chat Launcher
  This file only changes the appearance of #portal-chat-launcher.
  Existing chat behaviour and unread-count logic remain unchanged.
*/

#portal-chat-launcher.dtc-chat-launcher-config-pending {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#portal-chat-launcher.butterfly-chat-launcher {
  --dtc-butterfly-scale: 1;
  --dtc-butterfly-prompt-font-size: 11px;
  width: 128px !important;
  height: 112px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  right: 20px !important;
  bottom: 22px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  color: inherit !important;
  transform-origin: center center;
  isolation: isolate;
}

#portal-chat-launcher.butterfly-chat-launcher:hover,
#portal-chat-launcher.butterfly-chat-launcher:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
}

#portal-chat-launcher.butterfly-chat-launcher:focus-visible {
  outline: 3px solid rgba(49, 87, 229, 0.28);
  outline-offset: 5px;
  border-radius: 30px !important;
}

#portal-chat-launcher.butterfly-chat-launcher .portal-chat-launcher-copy {
  display: none !important;
}

#portal-chat-launcher.butterfly-chat-launcher .portal-chat-launcher-icon {
  scale: var(--dtc-butterfly-scale, 1);
  transform-origin: right bottom;
  position: absolute !important;
  inset: 0 !important;
  width: 128px !important;
  height: 112px !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  color: inherit !important;
  animation: dtcButterflyCornerFloat 2.8s ease-in-out infinite;
}

#portal-chat-launcher.butterfly-chat-launcher.butterfly-enter {
  animation: dtcButterflyChatArrive 3.25s cubic-bezier(.22, .82, .24, 1) both;
}

.dtc-chat-butterfly {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  transform-origin: center center;
}

.dtc-chat-butterfly .dtc-butterfly-body {
  position: absolute;
  z-index: 5;
  left: 43px;
  top: 15px;
  width: 48px;
  height: 79px;
  border: 2px solid #8ecbff;
  border-radius: 49% 49% 43% 43%;
  background:
    radial-gradient(circle at 34% 16%, rgba(255, 255, 255, 0.72), transparent 22%),
    linear-gradient(155deg, #72c5ff 0%, #3157e5 58%, #173b91 100%);
  box-shadow:
    inset 4px 4px 8px rgba(255, 255, 255, 0.26),
    inset -5px -8px 12px rgba(5, 28, 84, 0.22),
    0 9px 19px rgba(28, 65, 151, 0.28);
}

.dtc-chat-butterfly .dtc-butterfly-body::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 9px;
  width: 17px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transform: rotate(-20deg);
}

.dtc-chat-butterfly .dtc-butterfly-face {
  position: absolute;
  left: 3px;
  top: 12px;
  display: flex;
  justify-content: center;
  gap: 1px;
  width: 40px;
  height: 43px;
}

.dtc-chat-butterfly .dtc-butterfly-eye {
  position: relative;
  display: block;
  width: 20px;
  height: 27px;
  overflow: hidden;
  border: 2px solid #17345f;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    inset 0 -4px 5px rgba(50, 114, 205, 0.14),
    0 1px 2px rgba(0, 0, 0, 0.16);
}

.dtc-chat-butterfly .dtc-butterfly-pupil {
  position: absolute;
  left: 5px;
  top: 7px;
  width: 10px;
  height: 13px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 28%, #ffffff 0 10%, transparent 11%),
    radial-gradient(circle at center, #56c8ff 0 28%, #175ea9 29% 58%, #071c3c 59% 100%);
  transform: translate(var(--dtc-pupil-x, 0), var(--dtc-pupil-y, 0));
  transition: transform 70ms linear;
}

.dtc-chat-butterfly .dtc-eye-shine {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
}

.dtc-chat-butterfly .dtc-butterfly-smile {
  position: absolute;
  left: 15px;
  top: 32px;
  width: 12px;
  height: 6px;
  border-bottom: 2px solid #ffffff;
  border-radius: 0 0 12px 12px;
}

.dtc-chat-butterfly .dtc-butterfly-label {
  position: absolute;
  left: 0;
  bottom: 9px;
  width: 100%;
  color: #ffffff;
  text-align: center;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.9px;
}

.dtc-chat-butterfly .dtc-butterfly-antenna {
  position: absolute;
  top: -14px;
  width: 2px;
  height: 20px;
  border-radius: 999px;
  background: #214d96;
  transform-origin: bottom;
}

.dtc-chat-butterfly .dtc-butterfly-antenna::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #72c8ff;
  box-shadow: 0 0 8px rgba(91, 190, 255, 0.75);
}

.dtc-chat-butterfly .dtc-antenna-left {
  left: 12px;
  transform: rotate(-24deg);
}

.dtc-chat-butterfly .dtc-antenna-right {
  right: 12px;
  transform: rotate(24deg);
}

.dtc-chat-butterfly .dtc-butterfly-wing {
  position: absolute;
  z-index: 2;
  display: block;
  border: 2px solid rgba(38, 103, 210, 0.78);
  background:
    radial-gradient(circle at 62% 30%, rgba(255, 255, 255, 0.7) 0 9%, transparent 10%),
    radial-gradient(circle at 45% 68%, rgba(255, 255, 255, 0.34) 0 8%, transparent 9%),
    linear-gradient(145deg, rgba(205, 238, 255, 0.96), rgba(95, 172, 246, 0.84) 52%, rgba(77, 79, 210, 0.66));
  box-shadow:
    inset 4px 4px 8px rgba(255, 255, 255, 0.32),
    inset -5px -6px 10px rgba(20, 60, 145, 0.10);
  transform-style: preserve-3d;
}

.dtc-chat-butterfly .dtc-butterfly-wing::before,
.dtc-chat-butterfly .dtc-butterfly-wing::after {
  content: "";
  position: absolute;
  height: 1px;
  border-radius: 999px;
  background: rgba(31, 93, 186, 0.43);
  transform-origin: center;
}

.dtc-chat-butterfly .dtc-butterfly-wing::before {
  left: 8px;
  top: 42%;
  width: 70%;
  transform: rotate(26deg);
}

.dtc-chat-butterfly .dtc-butterfly-wing::after {
  left: 10px;
  top: 65%;
  width: 58%;
  transform: rotate(-22deg);
}

.dtc-chat-butterfly .dtc-wing-left {
  transform-origin: right center;
}

.dtc-chat-butterfly .dtc-wing-right {
  transform-origin: left center;
}

.dtc-chat-butterfly .dtc-wing-left-top {
  left: 2px;
  top: 12px;
  width: 52px;
  height: 49px;
  border-radius: 78% 27% 66% 32%;
  animation: dtcFlapLeftTop 0.34s ease-in-out infinite alternate;
}

.dtc-chat-butterfly .dtc-wing-left-bottom {
  left: 11px;
  top: 55px;
  width: 43px;
  height: 38px;
  border-radius: 42% 68% 35% 80%;
  animation: dtcFlapLeftBottom 0.38s ease-in-out infinite alternate;
}

.dtc-chat-butterfly .dtc-wing-right-top {
  right: 2px;
  top: 12px;
  width: 52px;
  height: 49px;
  border-radius: 27% 78% 32% 66%;
  animation: dtcFlapRightTop 0.34s ease-in-out infinite alternate;
}

.dtc-chat-butterfly .dtc-wing-right-bottom {
  right: 11px;
  top: 55px;
  width: 43px;
  height: 38px;
  border-radius: 68% 42% 80% 35%;
  animation: dtcFlapRightBottom 0.38s ease-in-out infinite alternate;
}

.dtc-chat-butterfly .dtc-butterfly-shadow {
  position: absolute;
  z-index: 1;
  left: 38px;
  bottom: 1px;
  width: 59px;
  height: 10px;
  border-radius: 50%;
  background: rgba(10, 31, 71, 0.20);
  filter: blur(3px);
  animation: dtcButterflyShadow 2.8s ease-in-out infinite;
}

#portal-chat-launcher.butterfly-chat-launcher .portal-chat-launcher-badge {
  position: absolute !important;
  z-index: 12 !important;
  top: 1px !important;
  right: 21px !important;
  min-width: 25px !important;
  width: auto !important;
  height: 25px !important;
  padding: 0 6px !important;
  display: grid;
  place-items: center;
  border: 2px solid #ffffff !important;
  border-radius: 999px !important;
  background: #ef3340 !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: 0 4px 10px rgba(239, 51, 64, 0.34) !important;
}

#portal-chat-launcher.butterfly-chat-launcher .portal-chat-launcher-badge.butterfly-no-unread {
  display: none !important;
}

#portal-chat-launcher.butterfly-chat-launcher[aria-expanded="true"] .dtc-butterfly-body {
  box-shadow:
    inset 4px 4px 8px rgba(255, 255, 255, 0.26),
    inset -5px -8px 12px rgba(5, 28, 84, 0.22),
    0 0 0 5px rgba(49, 87, 229, 0.14),
    0 10px 24px rgba(28, 65, 151, 0.30);
}

#portal-chat-launcher.butterfly-chat-launcher:hover .dtc-butterfly-body {
  transform: scale(1.05);
}

#portal-chat-launcher.butterfly-chat-launcher:hover .dtc-butterfly-smile {
  width: 14px;
  left: 14px;
}

@keyframes dtcButterflyChatArrive {
  0% {
    opacity: 0;
    transform: translate(calc(-100vw + 175px), calc(-100vh + 190px)) scale(0.34) rotate(-23deg);
  }
  18% {
    opacity: 1;
    transform: translate(-68vw, -67vh) scale(0.72) rotate(14deg);
  }
  44% {
    transform: translate(-49vw, -38vh) scale(1.02) rotate(-9deg);
  }
  70% {
    transform: translate(-19vw, -20vh) scale(0.98) rotate(11deg);
  }
  89% {
    transform: translate(-3vw, -28px) scale(1.08) rotate(-4deg);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0);
  }
}

@keyframes dtcButterflyCornerFloat {
  0%, 100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-7px) rotate(2deg);
  }
}

@keyframes dtcFlapLeftTop {
  from { transform: perspective(190px) rotateY(12deg) rotateZ(-5deg); }
  to { transform: perspective(190px) rotateY(67deg) rotateZ(7deg); }
}

@keyframes dtcFlapLeftBottom {
  from { transform: perspective(190px) rotateY(8deg) rotateZ(8deg); }
  to { transform: perspective(190px) rotateY(56deg) rotateZ(-5deg); }
}

@keyframes dtcFlapRightTop {
  from { transform: perspective(190px) rotateY(-12deg) rotateZ(5deg); }
  to { transform: perspective(190px) rotateY(-67deg) rotateZ(-7deg); }
}

@keyframes dtcFlapRightBottom {
  from { transform: perspective(190px) rotateY(-8deg) rotateZ(-8deg); }
  to { transform: perspective(190px) rotateY(-56deg) rotateZ(5deg); }
}

@keyframes dtcButterflyShadow {
  0%, 100% {
    opacity: 0.27;
    transform: scaleX(1);
  }
  50% {
    opacity: 0.13;
    transform: scaleX(0.7);
  }
}

@media (max-width: 760px) {
  #portal-chat-launcher.butterfly-chat-launcher {
    right: 8px !important;
    bottom: calc(78px + env(safe-area-inset-bottom)) !important;
    transform: scale(0.88);
    transform-origin: right bottom;
  }

  #portal-chat-launcher.butterfly-chat-launcher.butterfly-enter {
    animation-name: dtcButterflyChatArriveMobile;
  }

  @keyframes dtcButterflyChatArriveMobile {
    0% {
      opacity: 0;
      transform: translate(calc(-100vw + 145px), calc(-100vh + 245px)) scale(0.3) rotate(-23deg);
    }
    20% {
      opacity: 1;
      transform: translate(-62vw, -58vh) scale(0.68) rotate(13deg);
    }
    52% {
      transform: translate(-35vw, -34vh) scale(0.94) rotate(-8deg);
    }
    82% {
      transform: translate(-7vw, -45px) scale(1.04) rotate(7deg);
    }
    100% {
      opacity: 1;
      transform: translate(0, 0) scale(0.88) rotate(0);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  #portal-chat-launcher.butterfly-chat-launcher,
  #portal-chat-launcher.butterfly-chat-launcher .portal-chat-launcher-icon,
  .dtc-chat-butterfly .dtc-butterfly-wing,
  .dtc-chat-butterfly .dtc-butterfly-shadow {
    animation: none !important;
  }
}

/* DTC butterfly conversational chat prompt */
#portal-chat-launcher.butterfly-chat-launcher .dtc-butterfly-chat-message {
  position: absolute;
  right: 84px;
  bottom: 70px;
  z-index: 20;
  display: block;
  width: min(220px, calc(100vw - 150px));
  padding: 12px 14px;
  border: 1px solid #d8e4f5;
  border-radius: 17px;
  background: #ffffff;
  color: #17304f;
  text-align: left;
  box-shadow: 0 14px 32px rgba(29, 73, 137, 0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.95);
  transition:
    opacity 180ms ease,
    visibility 180ms ease,
    transform 180ms ease;
  pointer-events: none;
}

#portal-chat-launcher.butterfly-chat-launcher .dtc-butterfly-chat-message::after {
  content: "";
  position: absolute;
  right: 20px;
  bottom: -8px;
  width: 15px;
  height: 15px;
  border-right: 1px solid #d8e4f5;
  border-bottom: 1px solid #d8e4f5;
  background: #ffffff;
  transform: rotate(45deg);
}

#portal-chat-launcher.butterfly-chat-launcher .dtc-butterfly-chat-message.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

#portal-chat-launcher.butterfly-chat-launcher .dtc-chat-speaker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  color: #3157e5;
  font-size: max(8px, calc(var(--dtc-butterfly-prompt-font-size, 11px) - 2px));
  font-weight: 800;
  letter-spacing: 0.2px;
}

#portal-chat-launcher.butterfly-chat-launcher .dtc-chat-speaker-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #31b46c;
  box-shadow: 0 0 0 3px rgba(49, 180, 108, 0.14);
}

#portal-chat-launcher.butterfly-chat-launcher .dtc-chat-prompt-text {
  display: block;
  min-height: 36px;
  font-size: var(--dtc-butterfly-prompt-font-size, 11px);
  font-weight: 700;
  line-height: 1.38;
}

#portal-chat-launcher.butterfly-chat-launcher .dtc-chat-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
}

#portal-chat-launcher.butterfly-chat-launcher .dtc-chat-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3157e5;
  opacity: 0.35;
  animation: dtcTypingDot 1s ease-in-out infinite;
}

#portal-chat-launcher.butterfly-chat-launcher .dtc-chat-typing-dot:nth-child(2) {
  animation-delay: 0.15s;
}

#portal-chat-launcher.butterfly-chat-launcher .dtc-chat-typing-dot:nth-child(3) {
  animation-delay: 0.3s;
}

#portal-chat-launcher.butterfly-chat-launcher .dtc-chat-prompt-hint {
  display: block;
  margin-top: 7px;
  color: #66758b;
  font-size: max(8px, calc(var(--dtc-butterfly-prompt-font-size, 11px) - 2px));
  font-weight: 600;
}

#portal-chat-launcher.butterfly-chat-launcher.prompt-speaking .dtc-butterfly-body {
  animation: dtcSpeakingBob 0.7s ease-in-out infinite alternate;
}

#portal-chat-launcher.butterfly-chat-launcher.prompt-speaking .dtc-butterfly-smile {
  animation: dtcSpeakingMouth 0.36s ease-in-out infinite alternate;
}

@keyframes dtcTypingDot {
  0%, 60%, 100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

@keyframes dtcSpeakingBob {
  from { transform: translateY(0) rotate(-1deg); }
  to { transform: translateY(-3px) rotate(1deg); }
}

@keyframes dtcSpeakingMouth {
  from {
    width: 10px;
    height: 5px;
    left: 16px;
    border-radius: 0 0 10px 10px;
  }
  to {
    width: 8px;
    height: 8px;
    left: 17px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    border-top-color: transparent;
    border-left-color: transparent;
  }
}

@media (max-width: 760px) {
  #portal-chat-launcher.butterfly-chat-launcher .dtc-butterfly-chat-message {
    right: 76px;
    bottom: 76px;
    width: min(220px, calc(100vw - 125px));
    padding: 11px 12px;
  }

  #portal-chat-launcher.butterfly-chat-launcher .dtc-chat-prompt-text {
    font-size: var(--dtc-butterfly-prompt-font-size, 11px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #portal-chat-launcher.butterfly-chat-launcher .dtc-chat-typing-dot,
  #portal-chat-launcher.butterfly-chat-launcher.prompt-speaking .dtc-butterfly-body,
  #portal-chat-launcher.butterfly-chat-launcher.prompt-speaking .dtc-butterfly-smile {
    animation: none !important;
  }
}



/* Context-aware activity encouragement and desktop checkout focus */
body.dtc-butterfly-checkout-open {
  --dtc-butterfly-checkout-active: 1;
}

@media (min-width: 901px) {
  body.dtc-butterfly-checkout-open #portal-chat-launcher.butterfly-chat-launcher {
    z-index: 10040 !important;
    right: 26px !important;
    bottom: 28px !important;
  }

  body.dtc-butterfly-checkout-open #portal-chat-launcher.butterfly-chat-launcher .dtc-butterfly-chat-message {
    right: 88px;
    bottom: 72px;
    width: min(270px, calc(100vw - 170px));
  }

  /* Keep the checkout itself clear. Only the page behind its overlay is blurred. */
  body.dtc-butterfly-checkout-open .portal-shop-overlay.open {
    z-index: 9999 !important;
  }

  body.dtc-butterfly-checkout-open .portal-shop-overlay.open .portal-shop-modal,
  body.dtc-butterfly-checkout-open .portal-shop-overlay.open .portal-shop-modal * {
    filter: none !important;
  }

  body.dtc-butterfly-checkout-open #portal-chat-launcher.butterfly-chat-launcher .dtc-butterfly-body {
    animation: dtcCheckoutEncourage 1.8s ease-in-out infinite;
  }
}

@media (max-width: 900px) {
  /* Do not cover package, payment, receipt or submit controls on smaller screens. */
  body.dtc-butterfly-checkout-open #portal-chat-launcher.butterfly-chat-launcher {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@keyframes dtcCheckoutEncourage {
  0%, 100% {
    transform: translateY(0) rotate(-1deg);
  }
  45% {
    transform: translateY(-5px) rotate(2deg);
  }
  55% {
    transform: translateY(-5px) rotate(-2deg);
  }
}

#portal-chat-launcher.butterfly-chat-launcher.activity-encouragement .dtc-butterfly-body {
  animation: dtcActivityCelebrate 0.55s ease-in-out 2;
}

@keyframes dtcActivityCelebrate {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-5px) scale(1.08);
  }
}



/* Standard launcher mode selected in the administrator panel */
#portal-chat-launcher:not(.butterfly-chat-launcher) .dtc-chat-butterfly {
  display: none !important;
}

#portal-chat-launcher:not(.butterfly-chat-launcher) {
  transform: none;
}