/* ===========================================================================
   BOTÃO DO WHATSAPP NO SITE — Apps → Marketing e CRM (26/10/2026, public/js/painel/botaoDoWhatsapp.js).
   A gaveta veste a do Link e QR (`.itg-*` do b6 e `.lw-*` do b19: logo, chips, caixa de texto e a lista de onde usar).
   Aqui mora só o que ela não tem: a prévia (uma página de mentira com o botão no canto), a linha do interruptor e o
   código, que quebra linha e rola. Só variável de tema; o balão e o círculo verde são as cores do próprio botão que vai
   para o site do cliente, iguais nos dois temas de propósito.
   =========================================================================== */

.bw-shell .bw-previa { position: relative; height: 196px; overflow: hidden; border-radius: var(--r-md);
    border: 1px solid var(--border); background: var(--bg-surface); }
.bw-shell .bw-previa-pagina { position: absolute; inset: 0; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.bw-shell .bw-previa-barra { height: 10px; border-radius: 999px; background: var(--bg-surface-active); }
.bw-shell .bw-previa-linha { height: 8px; width: 78%; border-radius: 999px; background: var(--bg-surface-active); }
.bw-shell .bw-previa-linha.is-titulo { height: 14px; width: 52%; margin-top: 8px; }
.bw-shell .bw-previa-linha.is-curta { width: 46%; }
.bw-shell .bw-previa-botao { position: absolute; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 8px; }
.bw-shell .bw-previa-botao.is-esquerda { right: auto; left: 14px; flex-direction: row-reverse; }
.bw-shell .bw-previa-balao { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 7px 11px;
    border-radius: 16px; background: #fff; color: #111b21; font-size: 12px; font-weight: 600; line-height: 1.2;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.bw-shell .bw-previa-circulo { flex: none; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; background: #25d366; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.bw-shell .bw-previa-circulo svg { width: 24px; height: 24px; display: block; }

/* Os ajustes respiram como os campos do Link e QR: rótulo, campo e o próximo rótulo a 16px. */
.bw-shell .lw-modelos { margin-bottom: 16px; }
.bw-shell #bw-balao { margin-bottom: 4px; }
.bw-shell .bw-celular { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 12px 0 16px;
    padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--bg-surface); }
.bw-shell .bw-celular-texto { min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--text-main); }
.bw-shell .bw-celular-texto small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--text-secondary); }
.bw-shell textarea.itg-input.lw-mensagem { margin-bottom: 8px; }

/* O código leva o desenho do WhatsApp inteiro: quebra linha para caber no celular e rola em vez de empurrar a gaveta. */
.bw-shell .itg-code.bw-codigo { max-height: 220px; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere;
    word-break: normal; font-size: 11.5px; }
.bw-shell .bw-codigo + .itg-actions { margin-top: 12px; }