/* ============================================================================
   Onda 16 — WhatsApp: chooser de mensagens prontas (Simplificacao #5)
   ----------------------------------------------------------------------------
   Modal central (.modal-overlay + .modal-container--w-460) lista os modelos.
   Cada modelo = botao full-width com label + preview da mensagem resolvida.
   Tokens AAA do tema claro (texto >=7:1, bordas/UI >=3:1). Escopo em
   :root[data-theme="light"] pra seguir o padrao das ondas anteriores.
   ============================================================================ */

/* Chooser pode ser disparado de dentro do lead drawer (que tambem e
   .modal-overlay). Sobe o z-index pra ficar ACIMA do drawer (1000) e ABAIXO
   do toast (1500). Sem escopo de tema + escopo claro, pra ganhar em qualquer
   ordem de cascata. */
.modal-overlay--stacked { z-index: 1200; }
:root[data-theme="light"] .modal-overlay--stacked { z-index: 1200; }

:root[data-theme="light"] .wa-tpl-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-2, 8px);
}

:root[data-theme="light"] .wa-tpl {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: var(--radius-md, 10px);
  background: var(--bg-surface, #FFFFFF);
  border: 1px solid var(--border-default, #94A3B8);
  cursor: pointer;
  transition: background var(--duration-fast, .12s) var(--ease-out, ease),
              border-color var(--duration-fast, .12s) var(--ease-out, ease);
}

:root[data-theme="light"] .wa-tpl:hover {
  background: #ECFDF5;                 /* verde bem claro: combina com o WhatsApp */
  border-color: var(--color-success-text, #166534);
}

:root[data-theme="light"] .wa-tpl:focus-visible {
  outline: 2px solid var(--color-accent, #173C46);
  outline-offset: 1px;
}

:root[data-theme="light"] .wa-tpl__label {
  font-weight: 600;
  font-size: var(--fs-sm, 14px);
  color: var(--text-primary, #0F172A);
  line-height: 1.3;
}

:root[data-theme="light"] .wa-tpl__preview {
  font-size: var(--fs-xs, 12.5px);
  color: var(--text-secondary, #334155);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* "Conversa em branco": preview e so uma dica, em tom mais discreto */
:root[data-theme="light"] .wa-tpl--blank .wa-tpl__preview {
  color: var(--text-muted, #41505F);
  font-style: italic;
}