/**
 * Joinchat vs tema Amiy.
 * O Amiy estiliza *[role="button"] (padding, line-height:1, uppercase…)
 * e achata o botão "Abrir chat", o X e o ícone flutuante.
 */

/* Anula estilos de botão do tema só dentro do Joinchat */
.joinchat [role="button"],
.joinchat .joinchat__button,
.joinchat .joinchat__open,
.joinchat .joinchat__close {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--joinchat-font, inherit) !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  font-style: normal !important;
  line-height: normal !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  outline: none !important;
  transform: none !important;
}

/* Botão flutuante redondo */
.joinchat .joinchat__button {
  display: block !important;
  position: absolute !important;
  height: var(--s, 60px) !important;
  width: var(--s, 60px) !important;
  min-height: var(--s, 60px) !important;
  min-width: var(--s, 60px) !important;
  border-radius: 50% !important;
  background: #25d366 var(--joinchat-ico) center / 60% no-repeat !important;
  box-shadow: 1px 6px 24px 0 rgba(7, 94, 84, 0.24) !important;
  overflow: visible !important;
  cursor: pointer !important;
}

.joinchat .joinchat__button:has(.joinchat__button__ico) {
  background: var(--color) !important;
  box-shadow: 1px 6px 24px 0 hsl(var(--ch) var(--cs) calc(-10% + var(--cl)) / 24%) !important;
}

.joinchat .joinchat__button:hover,
.joinchat .joinchat__button:active {
  background-color: #128c7e !important;
}

.joinchat .joinchat__button:has(.joinchat__button__ico):hover,
.joinchat .joinchat__button:has(.joinchat__button__ico):active {
  background: var(--hover) !important;
}

/* Fechar (X) */
.joinchat .joinchat__close {
  --size: 34px;
  display: block !important;
  position: absolute !important;
  top: calc(50% - 0.5 * var(--size)) !important;
  right: 24px !important;
  width: var(--size) !important;
  height: var(--size) !important;
  min-width: var(--size) !important;
  min-height: var(--size) !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.4) url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23fff%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M24%202.4%2021.6%200%2012%209.6%202.4%200%200%202.4%209.6%2012%200%2021.6%202.4%2024l9.6-9.6%209.6%209.6%202.4-2.4-9.6-9.6z%22%2F%3E%3C%2Fsvg%3E") center / 12px no-repeat !important;
  cursor: pointer !important;
}

/* Botão "Abrir chat" — o mais achatado na screenshot */
.joinchat .joinchat__open {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  align-self: flex-end !important;
  position: sticky !important;
  z-index: 2 !important;
  bottom: 8px !important;
  min-width: var(--s, 60px) !important;
  height: var(--s, 60px) !important;
  min-height: var(--s, 60px) !important;
  margin: 0 8px !important;
  padding: 0 !important;
  background: var(--color) !important;
  color: inherit !important;
  border-radius: var(--h, 30px) !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

.joinchat .joinchat__open:hover,
.joinchat .joinchat__open:active {
  background: var(--hover) !important;
}

.joinchat .joinchat__open__text {
  max-width: var(--mw, min(384px - var(--s, 60px), 100vw - 16px - var(--s, 60px) - 2 * var(--sep, 20px))) !important;
  width: fit-content !important;
  padding: 0 4px 0 24px !important;
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: var(--s, 60px) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: inherit !important;
}

.joinchat .joinchat__open__icon {
  flex-shrink: 0 !important;
  width: var(--s, 60px) !important;
  height: var(--s, 60px) !important;
  max-width: var(--s, 60px) !important;
  padding: calc(0.18 * var(--s, 60px)) !important;
  margin: 0 !important;
  overflow: hidden !important;
  display: block !important;
}

/* Cabeçalho / logo WhatsApp */
.joinchat .joinchat__header {
  display: flex !important;
  align-items: center !important;
  height: var(--header, 50px) !important;
  min-height: var(--header, 50px) !important;
  padding: 0 70px 0 26px !important;
  margin: 0 !important;
  line-height: normal !important;
  overflow: visible !important;
}

.joinchat .joinchat__header span,
.joinchat #joinchat__label span {
  font-size: 19px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap !important;
  opacity: 0.8;
}

.joinchat .joinchat__wa {
  display: block !important;
  width: 120px !important;
  height: 28px !important;
  max-width: none !important;
  opacity: 0.8;
}

.joinchat .joinchat__bubble,
.joinchat .joinchat__chat {
  line-height: 1.45 !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}