/* ==========================================================================
   site-tool-wa.css — PECA do componente de mensagem do WhatsApp, dividido
   pelo formatador de texto e pelo gerador de link: a barra de formatos
   (_wa-toolbar.php) e a conversa com o balao (_wa-phone.php). O JS e o
   site-tool-wa.js. A casca das ferramentas mora em site-tool.css.

   A previa imita a conversa do WhatsApp (papel de parede bege, balao verde
   claro de mensagem enviada, horario e os dois tiques). As cores do balao sao
   as do proprio WhatsApp: e o que a pessoa vai ver do outro lado.
   ========================================================================== */

/* ── Barra de formatos ──────────────────────────────────────────────── */
.st-wa__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin: 16px 0 10px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-alt);
}

.st-tool__field > .st-wa__toolbar { margin-top: 0; }

.st-wa__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text-lead);
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.st-wa__btn svg { width: 16px; height: 16px; }

.st-wa__btn:hover { background: var(--bg-card); border-color: var(--border); color: var(--primary-text); transform: translateY(-1px); }

.st-wa__btn:active { transform: translateY(0) scale(.94); }

.st-wa__btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

.st-wa__sep { width: 1px; height: 20px; margin: 0 5px; background: var(--line); }

/* Dica do botao: nome, simbolo e atalho, por cima no hover/foco. */
.st-wa__tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 3;
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 6px;
  background: #1a1a1a;
  color: #fff;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity .15s ease, transform .15s ease;
}

.st-wa__tip code { font-family: var(--font-mono); color: color-mix(in oklab, var(--primary) 55%, #fff); }

.st-wa__tip small { font-size: 11px; color: rgba(255, 255, 255, .62); }

.st-wa__btn:hover .st-wa__tip,
.st-wa__btn:focus-visible .st-wa__tip { opacity: 1; transform: translate(-50%, 0); }

/* Tela de toque ou estreita: sem hover nem atalho de teclado, a dica nao serve, e mesmo
   invisivel a da ponta da barra empurrava a pagina 21px para o lado. */
@media (hover: none), (max-width: 480px) {
  .st-wa__tip { display: none; }
}

/* ── A conversa ─────────────────────────────────────────────────────── */
.st-wa__phone {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background-color: #efeae2;
  /* Papel de parede discreto em pontos, so com gradiente (nada de imagem). */
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0, 0, 0, .035) 1.2px, transparent 1.6px),
    radial-gradient(circle at 70% 80%, rgba(0, 0, 0, .03) 1.2px, transparent 1.6px);
  background-size: 22px 22px, 30px 30px;
  transition: border-color .25s ease;
}

.st-wa__phone:hover { border-color: var(--primary-edge); }

.st-wa__top { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #fff; border-bottom: 1px solid #e9edef; }

.st-wa__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--primary-subtle);
  color: var(--primary-text);
}

.st-wa__avatar svg { width: 16px; height: 16px; }

.st-wa__who { display: flex; flex-direction: column; min-width: 0; }

.st-wa__name { font-size: 14px; line-height: 18px; font-weight: 500; color: #111b21; font-variant-numeric: tabular-nums; }

.st-wa__status { font-size: 12px; line-height: 15px; color: #54656f; }

.st-wa__chat { display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-height: 360px; padding: 14px 14px 18px; }

.st-wa__phone--compact { border-radius: 18px; }

.st-wa__phone--compact .st-wa__chat { min-height: 150px; }

.st-wa__day { align-self: center; padding: 4px 10px; border-radius: 8px; background: #fff; font-size: 11px; line-height: 14px; font-weight: 500; color: #54656f; text-transform: uppercase; letter-spacing: .03em; }

.st-wa__bubble {
  position: relative;
  align-self: flex-end;
  max-width: 92%;
  min-width: 90px;
  padding: 7px 9px 8px 10px;
  border-radius: 9px 0 9px 9px;
  background: #d9fdd3;
  color: #111b21;
  transform-origin: 100% 0;
}

/* Rabinho do balao, no canto de cima. */
.st-wa__bubble::after {
  content: '';
  position: absolute;
  top: 0;
  right: -8px;
  border-top: 10px solid #d9fdd3;
  border-right: 8px solid transparent;
}

.st-wa__msg { font-size: 14.5px; line-height: 20px; overflow-wrap: anywhere; }

/* Espaco e quebra do texto valem DENTRO de cada bloco; no container, o
   espaco entre as tags do HTML inicial viraria linha em branco. */
.st-wa__p,
.st-wa__quote,
.st-wa__li > span:last-child { white-space: pre-wrap; }

.st-wa__msg:empty::before { content: attr(data-empty); color: #54656f; }

.st-wa__msg strong { font-weight: 700; }

.st-wa__msg em { font-style: italic; }

.st-wa__msg s { text-decoration: line-through; }

.st-wa__list { display: flex; flex-direction: column; }

.st-wa__li { display: flex; gap: 6px; padding-left: 4px; }

.st-wa__mark { flex: 0 0 auto; min-width: 12px; color: #111b21; }

/* Citacao: a barra lateral e a do proprio WhatsApp (cinza), nao enfeite. */
.st-wa__quote { margin: 2px 0; padding: 0 0 0 10px; border-left: 3px solid rgba(17, 27, 33, .22); color: #3b4a54; }

.st-wa__code { padding: 1px 5px; border-radius: 5px; background: rgba(17, 27, 33, .07); font-family: var(--font-mono); font-size: 13px; }

.st-wa__mono { font-family: var(--font-mono); font-size: 13.5px; white-space: pre-wrap; }

.st-wa__url { color: #027eb5; text-decoration: underline; }

.st-wa__time { display: flex; justify-content: flex-end; align-items: center; gap: 3px; margin-top: 3px; font-size: 11px; line-height: 14px; color: #4f5e67; }

.st-wa__time svg { width: 15px; height: 15px; color: #53bdeb; stroke-width: 2; }

.st-wa__composer { display: flex; align-items: center; gap: 8px; padding: 8px 10px 10px; background: #f0f2f5; }

.st-wa__fake { flex: 1 1 auto; height: 36px; padding: 0 14px; display: flex; align-items: center; border-radius: 18px; background: #fff; font-size: 14px; color: #5f6f78; }

.st-wa__send { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #00a884; color: #fff; }

.st-wa__send svg { width: 16px; height: 16px; }

@media (max-width: 480px) {
  .st-wa__btn { width: 34px; }
  .st-wa__sep { display: none; }
  .st-wa__chat { min-height: 300px; }
  .st-wa__phone--compact .st-wa__chat { min-height: 130px; }
}

@media (prefers-reduced-motion: reduce) {
  .st-wa__btn:hover,
  .st-wa__btn:active { transform: none; }
  .st-wa__tip { transition: none; }
}