/* ==========================================================================
   site-tool-fmt.css — PECA do formatador de texto para WhatsApp
   (/ferramentas/formatador-texto-whatsapp): so a montagem da tela (editor a
   esquerda, conversa a direita, contador). A barra de formatos e a conversa
   com o balao sao o componente compartilhado com o gerador de link
   (site-tool-wa.css); a casca comum mora em site-tool.css.
   ========================================================================== */

.st-tfmt { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 16px; align-items: start; }

.st-tfmt__area { min-height: 268px; font-size: 15px; line-height: 23px; }

.st-tfmt__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }

.st-tfmt__count { font-size: 12px; line-height: 16px; color: var(--text-muted); font-variant-numeric: tabular-nums; transition: color .2s ease; }

.st-tfmt__count.is-near { color: #b45309; }

.st-tfmt__preview { position: sticky; top: 92px; }

.st-tfmt__note { padding: 0 6px; }

@media (max-width: 1024px) {
  .st-tfmt { grid-template-columns: 1fr; }
  .st-tfmt__preview { position: relative; top: auto; max-width: 420px; width: 100%; margin: 0 auto; }
}

@media (max-width: 480px) {
  .st-tfmt__foot { flex-wrap: wrap; }
  .st-tfmt__area { min-height: 220px; }
}

/* Tela de toque ou estreita: 16px, senao o Safari do iPhone/iPad da zoom ao focar. */
@media (pointer: coarse), (max-width: 768px) {
  .st-tfmt__area { font-size: 16px; }
}