#amazon-connect-open-widget-button {
  position: fixed;
  bottom: 220px;
  right: 20px;
  border-radius: 28px;
  /* rounded rectangle */
  width: auto;
  /* allow width to fit content */
  min-width: 140px;
  /* optional: minimum width */
  height: 48px;
  /* fixed height */
  padding: 12px 24px;
  /* horizontal padding */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* background-color: #005eb8; */
  background: #833ab4;
  background: linear-gradient(
    90deg,
    rgba(131, 58, 180, 1) 0%,
    rgba(253, 29, 29, 1) 50%,
    rgba(252, 176, 69, 1) 100%
  );
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  white-space: nowrap;
  gap: 3px;
  /* space between icon and text */

  /* fade-in animation */
  overflow: hidden;

  animation: shake 0.5s ease-out;
}

#amazon-connect-open-widget-button:hover {
  animation-name: glowPulse;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-5px);
  }

  40% {
    transform: translateX(5px);
  }

  60% {
    transform: translateX(-5px);
  }

  80% {
    transform: translateX(5px);
  }

  100% {
    transform: translateX(0);
  }
}

/* Hide default icon */
#amazon-connect-open-widget-button svg {
  display: none;
}

/* Custom icon */
#amazon-connect-open-widget-button::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.804 21.644A6.707 6.707 0 0 0 6 21.75a6.721 6.721 0 0 0 3.583-1.029c.774.182 1.584.279 2.417.279 5.322 0 9.75-3.97 9.75-9 0-5.03-4.428-9-9.75-9s-9.75 3.97-9.75 9c0 2.409 1.025 4.587 2.674 6.192.232.226.277.428.254.543a3.73 3.73 0 0 1-.814 1.686.75.75 0 0 0 .44 1.223ZM8.25 10.875a1.125 1.125 0 1 0 0 2.25 1.125 1.125 0 0 0 0-2.25ZM10.875 12a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0Zm4.875-1.125a1.125 1.125 0 1 0 0 2.25 1.125 1.125 0 0 0 0-2.25Z"/></svg>')
    no-repeat center center;
  background-size: contain;
}

/* Inject our label */
#amazon-connect-open-widget-button::after {
  content: "Clavarder avec un expert";
}

/* 2) Style the default “Close chat” button */
#amazon-connect-close-widget-button {
  width: auto;
  min-width: 140px;
  height: 48px;
  padding: 12px 24px;
  border-radius: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #407EC9!important;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  white-space: nowrap;
  /* keep this one from wrapping too */
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: normal;
}

#amazon-connect-close-widget-button svg {
  width: 18px;
  height: 18px;
  fill: #fff;
  margin-right: 8px;
}

#amazon-connect-close-widget-button::after {
  content: "Discussion réduite";
}

/* 3) Frame styling */
#amazon-connect-widget-frame {
  /* position: fixed;
    bottom: 90px;
    right: 20px;
    width: 350px;
    height: 500px;
    border: none;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    overflow: hidden;
    z-index: 9998;
    transition: opacity 0.3s, transform 0.3s; */
  margin-bottom: 10px;
}

#amazon-connect-widget-frame.show {
  opacity: 1;
  transform: translateY(0);
}

#amazon-connect-widget-frame:not(.show) {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}

@keyframes glowPulse {
  0% {
    box-shadow: 0 0 6px 2px rgb(64, 126, 201, 0.5);
  }

  100% {
    box-shadow: 0 0 20px 6px rgb(64, 126, 201, 0.5);
  }
}