/* Versão 1.0.0 */

/*
  Contato → formulário que vira mensagem de WhatsApp. JS: public/assets/js/contato-whatsapp.js
  - Prévia ao vivo: o texto exatamente como vai chegar no WhatsApp (com o *negrito* do WhatsApp aplicado).
    O tique fica cinza enquanto falta campo obrigatório e vira duplo, em indigo, quando está pronto para enviar.
  - Estado de envio: a mensagem só chega quando a pessoa toca em Enviar no WhatsApp, e o site diz isso.
*/

.previa-wa__titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #6B6B78;
}

.previa-wa__titulo .material-icons {
  color: oklch(62.7% .194 149.214);
}

.previa-wa__balao {
  position: relative;
  max-width: 92%;
  padding: 14px 16px 10px;
  background: #F7F7F8;
  border: 1px solid #E4E4E8;
  border-radius: 4px 16px 16px 16px;
}

/* Altura natural: a prévia mostra a mensagem inteira, nunca uma janela recortada dela */
.previa-wa__texto {
  font-size: 14px;
  line-height: 1.55;
  color: #0A0A14;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.previa-wa__vazio {
  color: #8F9092;
}

.previa-wa__rodape {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 6px;
  font-size: 12px;
  color: #6B6B78;
  font-variant-numeric: tabular-nums;
}

.material-icons.previa-wa__tique {
  font-size: 16px;
  color: #8F9092;
  transition: color 300ms cubic-bezier(0.16, 1, 0.3, 1), transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.previa-wa.is-pronta .previa-wa__tique {
  color: oklch(51.1% .262 276.966);
  transform: scale(1.15);
}

/* Estado depois do envio */
.envio-wa {
  padding: 24px 0 8px;
  text-align: center;
}

.envio-wa__selo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  border-radius: 9999px;
  background-image: linear-gradient(to bottom right, oklch(58.5% .233 277.117), oklch(60.6% .25 292.717));
  color: #FFFFFF;
}

.envio-wa:not([hidden]) .envio-wa__selo {
  animation: envio-wa-chega 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.envio-wa__titulo {
  margin-bottom: 12px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: #0A0A14;
  text-wrap: balance;
}

.envio-wa__titulo:focus {
  outline: none;
}

.envio-wa__texto {
  max-width: 24rem;
  margin: 0 auto 32px;
  color: #4A4A57;
  line-height: 1.6;
}

.envio-wa__acoes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.envio-wa__editar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: oklch(45.7% .24 277.023);
  border-radius: 4px;
  transition: color 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.envio-wa__editar:hover {
  color: #0A0A14;
}

.envio-wa__editar:focus-visible {
  outline: 2px solid oklch(67.3% .182 276.935);
  outline-offset: 3px;
}

@keyframes envio-wa-chega {
  from {
    opacity: 0;
    transform: scale(0.6) rotate(-12deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .envio-wa:not([hidden]) .envio-wa__selo {
    animation: none;
  }
  .material-icons.previa-wa__tique {
    transition: color 300ms linear;
  }
  .previa-wa.is-pronta .previa-wa__tique {
    transform: none;
  }
}