/* ===========================================================================
   LINK E QR DO WHATSAPP — Apps → Marketing e CRM (26/10/2026, public/js/painel/linkDoWhatsapp.js).
   A gaveta veste o desenho da "API e Webhooks" (`.itg-*` do b6-api-webhooks.css). Aqui mora só o que aquela tela não
   tem: o logo em imagem, os modelos de mensagem, a caixa de texto com contador, o link que quebra linha e o QR —
   escopado em `.lw-shell`, só variável de tema. A exceção é o fundo do QR, branco nos dois temas de propósito:
   câmera de celular lê mal QR claro sobre fundo escuro.
   =========================================================================== */

.lw-shell .lw-logo { width: 40px; height: 40px; flex: none; display: block; box-sizing: border-box; padding: 6px;
    border-radius: 10px; background: rgba(255, 255, 255, .96); border: 1px solid var(--border); }

/* Abertura e aviso respiram como as seções (24px). */
.lw-shell .itg-lead,
.lw-shell .itg-note { margin-bottom: 24px; }
/* O número não parte no hífen no celular ("+55 61 98148-" numa linha e "0716" na outra). */
.lw-shell .itg-lead b { white-space: nowrap; }

.lw-shell .lw-modelos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.lw-shell .itg-chip.lw-modelo { height: 36px; padding: 0 14px; font-size: 12px; font-weight: 600; cursor: pointer;
    transition: color var(--itg-t), border-color var(--itg-t), background var(--itg-t); }
.lw-shell .itg-chip.lw-modelo i { font-size: 12px; opacity: 1; }
.lw-shell .itg-chip.lw-modelo:hover { color: var(--text-main); border-color: var(--border-hover); }
.lw-shell .itg-chip.lw-modelo.is-on { color: var(--accent-text); border-color: var(--accent-border); background: var(--accent-subtle); }
.lw-shell .itg-chip.lw-modelo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.lw-shell textarea.itg-input.lw-mensagem { height: auto; min-height: 88px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.lw-shell .lw-contador { margin-top: 6px; font-size: 11px; color: var(--text-secondary); text-align: right; font-variant-numeric: tabular-nums; }

/* O link leva a mensagem codificada: quebra linha para caber no celular; os botões ficam embaixo dele. */
.lw-shell .itg-code.lw-link { white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; }
.lw-shell .lw-link + .itg-actions { margin-top: 12px; }

.lw-shell .lw-qr-linha { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.lw-shell .lw-qr { flex: none; width: 216px; height: 216px; box-sizing: border-box; padding: 14px; display: grid; place-items: center;
    border-radius: var(--r-md); background: #fff; border: 1px solid var(--border); }
.lw-shell .lw-qr svg { display: block; width: 100%; height: 100%; }
.lw-shell .lw-qr-falhou { margin: 0; font-size: 12px; line-height: 1.5; color: #54656f; text-align: center; }
.lw-shell .lw-qr-texto { flex: 1 1 240px; min-width: 0; }
.lw-shell .lw-qr-texto .itg-actions { margin-top: 16px; }

.lw-shell .lw-onde { margin: 0; padding-left: 18px; font-size: 12px; line-height: 1.7; color: var(--text-secondary); }
.lw-shell .lw-onde b { color: var(--text-main); font-weight: 600; }