/* ════════════════════════════════════════════════════════════════════════
   A JANELA DA INTEGRAÇÃO DO WHATSAPP
   ════════════════════════════════════════════════════════════════════════
   Ela pede uma autorização que envolve as conversas de terceiros — os
   clientes de quem usa. Por isso a ordem é: primeiro o que acontece, depois
   as escolhas, e o botão de conectar por último.

   ── ELA SEGUE O TEMA DO APP ──────────────────────────────────
   A primeira versão era escura em qualquer tema. Sobre o MyDesk claro isso
   não vira "modal elegante": vira um bloco preto no meio de uma página branca,
   que é exatamente a impressão de coisa colada de fora — e a janela que pede
   acesso ao WhatsApp de alguém é a última que pode parecer de terceiros.

   Todas as cores são variáveis declaradas em `.wa-bg`, e o bloco de
   `html[data-theme="light"]` troca SÓ as variáveis. Nenhuma regra de layout
   aparece duas vezes: onde a cor é a única diferença, só a cor muda.

   ── O VERDE É RESERVADO ──────────────────────────────────────
   Ele aparece em quatro lugares: o logo, a aura do topo, o que está LIGADO e
   o botão de ação. Espalhado por tudo, deixaria de significar "WhatsApp" para
   virar só uma tonalidade — onde tudo é verde, nada é.

   O verde da marca (#25d366) fica no que é SUPERFÍCIE. Para TEXTO no tema
   claro ele dá 1,8:1 sobre branco, o que é ilegível: aí entra `--wa-verde-txt`,
   que é escuro no claro e claro no escuro.

   ── REDONDO, E NÃO QUADRADO ─────────────────────────────────
   Logo em círculo, cartões de 18px, botões em pílula — e, no lugar da caixinha
   de marcar, uma CHAVE. Além de arredondar a tela, ela diz melhor o que essas
   três opções são: coisas que ficam ligadas ou desligadas, e não itens de uma
   lista que se conferem uma vez.
   ════════════════════════════════════════════════════════════════════════ */
.wa-bg{
  /* O verde da marca, para superfície. */
  --wa-verde:#25d366;
  --wa-verde-forte:#12b45b;
  /* O verde para TEXTO e traço fino — o único que muda entre os temas. */
  --wa-verde-txt:#5ee89b;

  --wa-fundo:#111a24;
  --wa-caixa:#18232f;
  --wa-caixa-alta:#1f2c3a;
  --wa-borda:rgba(148,163,184,.15);
  --wa-borda-forte:rgba(148,163,184,.3);
  --wa-tit:#eef4fa;
  --wa-txt:#a9bccd;
  --wa-fraco:#8296aa;
  --wa-chave-off:rgba(148,163,184,.3);
  --wa-pino:#fff;
  --wa-veu:rgba(4,10,18,.72);
  --wa-sombra:0 24px 70px rgba(0,0,0,.55);
  --wa-aura:.16;
  --wa-minha-fundo:rgba(37,211,102,.16);
  --wa-plano-fundo:rgba(245,158,11,.1);
  --wa-plano-borda:rgba(245,158,11,.32);
  --wa-plano-ico-fundo:rgba(245,158,11,.18);
  --wa-plano-txt:#f0b95e;

  position:fixed;inset:0;z-index:2147482100;display:flex;
  align-items:center;justify-content:center;padding:22px;
  background:var(--wa-veu);backdrop-filter:blur(10px);
}
.wa-bg[hidden]{display:none}

/* ── O MESMO DESENHO, NO CLARO ───────────────────────────────
   Só variáveis. Os tons vieram da paleta do tema claro do projeto
   (`theme-light.css`) para a janela pertencer à mesma família do resto. */
html[data-theme="light"] .wa-bg{
  --wa-verde-txt:#0a7a3e;
  --wa-fundo:#ffffff;
  --wa-caixa:#f4f8fc;
  --wa-caixa-alta:#e9f1f9;
  --wa-borda:#dbe6f1;
  --wa-borda-forte:#c2d4e6;
  --wa-tit:#0f2744;
  --wa-txt:#46617e;
  --wa-fraco:#536b84;
  --wa-chave-off:#c7d6e5;
  --wa-pino:#fff;
  --wa-veu:rgba(20,44,74,.34);
  --wa-sombra:0 20px 60px rgba(15,39,68,.22);
  --wa-aura:.2;
  --wa-minha-fundo:#d8f7e5;
  --wa-plano-fundo:#fff8ec;
  --wa-plano-borda:#f2ddb4;
  --wa-plano-ico-fundo:#fbeacd;
  --wa-plano-txt:#8a5a09;
}

.wa-card{
  position:relative;
  width:min(524px,100%);max-height:min(860px,calc(100vh - 44px));
  display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--wa-borda);border-radius:26px;
  background:var(--wa-fundo);color:var(--wa-tit);
  box-shadow:var(--wa-sombra);
  font-family:Inter,Arial,sans-serif;
  animation:cardRise .24s cubic-bezier(.16,1,.3,1) both;
}
/* A aura verde do topo. Um brilho difuso identifica a janela sem tingir o
   texto embaixo dela, que era o problema do véu da versão anterior. */
.wa-card::before{
  content:'';position:absolute;top:-190px;left:50%;translate:-50% 0;
  width:520px;height:340px;pointer-events:none;
  background:radial-gradient(closest-side,
    rgba(37,211,102,var(--wa-aura)),rgba(37,211,102,0));
}

/* ── Cabeçalho ──────────────────────────────────────── */
.wa-cab{
  position:relative;display:flex;align-items:center;gap:14px;flex-shrink:0;
  padding:22px 22px 18px;
}
.wa-logo{
  width:46px;height:46px;flex:0 0 auto;display:grid;place-items:center;
  border-radius:50%;background:linear-gradient(150deg,#37e07a,#0da85a);
  color:#042a15;
  box-shadow:0 6px 18px rgba(37,211,102,.3),0 0 0 5px rgba(37,211,102,.11);
}
.wa-logo svg{width:26px;height:26px}
.wa-cab-txt{flex:1;min-width:0}
.wa-cab h2{
  margin:0;font-family:Syne,Inter,sans-serif;font-size:1.2rem;font-weight:700;
  letter-spacing:-.4px;line-height:1.2;color:var(--wa-tit);
}
/* O nome do QUADRO. É o que muda de uma abertura para outra, e responde à
   pergunta que a janela mais provoca: "onde isso vai parar?" */
/* `nowrap` com reticências servia para uma frase só. Agora a linha pode
   carregar um botão ou um aviso ao lado, e cortar isso esconderia justamente a
   parte que a pessoa precisa clicar. Quebra em vez de cortar. */
.wa-quadro{
  margin:5px 0 0;font-size:.765rem;font-weight:500;color:var(--wa-fraco);
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;
}
.wa-quadro b{color:var(--wa-verde-txt);font-weight:700}

/* Só variáveis daqui: o tema claro desta janela troca a paleta e nada mais
   (ver o bloco `html[data-theme="light"] .wa-bg`), e cor fixa aqui sobreviveria
   à troca de tema — que é exatamente o defeito que aquele bloco evita. */
/* Avisa, antes do clique, que Salvar vai mudar o quadro. Não é botão: o
   botão é o "Salvar" do pé, e um segundo controle aqui foi exatamente o que
   fez a correção anterior exigir dois cliques e não funcionar na prática. */
.wa-quadro-muda{
  flex:0 0 auto;padding:2px 9px;border-radius:999px;
  font:700 .68rem Inter,Arial,sans-serif;
  color:var(--wa-verde-txt);background:var(--wa-minha-fundo);
  border:1px solid var(--wa-borda-forte);
}

/* O aviso ocupa a linha inteira: é uma frase de duas linhas explicando por que
   não dá, e espremida ao lado do nome do quadro ela não se lê. */
.wa-quadro-nao{
  flex:1 0 100%;margin-top:2px;font-size:.7rem;font-weight:500;line-height:1.45;
  color:var(--wa-plano-txt);
}
.wa-x{
  width:32px;height:32px;flex:0 0 auto;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--wa-borda);border-radius:50%;
  background:transparent;color:var(--wa-txt);font-size:1rem;line-height:1;
  transition:background .15s,color .15s,border-color .15s;
}
.wa-x:hover{background:var(--wa-caixa-alta);color:var(--wa-tit);border-color:var(--wa-borda-forte)}

.wa-corpo{
  position:relative;
  flex:1;min-height:0;overflow-y:auto;padding:2px 22px 8px;
  display:flex;flex-direction:column;gap:18px;
}
/* Coluna flex com rolagem espreme os filhos em vez de rolar: a faixa de
   conectado perdia metade da altura e o número saía por cima do nome. */
.wa-corpo > *{flex-shrink:0}
.wa-corpo::-webkit-scrollbar{width:8px}
.wa-corpo::-webkit-scrollbar-thumb{border-radius:8px;background:var(--wa-chave-off)}

/* ── A faixa de estado ───────────────────────────────────
   `display:flex` VENCE o `[hidden]` do navegador — sem a regra abaixo a faixa
   aparecia vazia no topo de quem ainda nem conectou. */
.wa-estado{
  display:flex;align-items:center;gap:12px;padding:13px 16px;
  border:1px solid rgba(37,211,102,.3);border-radius:18px;
  background:rgba(37,211,102,.1);
}
.wa-estado[hidden]{display:none}
.wa-ponto{
  width:9px;height:9px;flex:0 0 auto;border-radius:50%;background:var(--wa-verde-forte);
  box-shadow:0 0 0 4px rgba(37,211,102,.18);
}
.wa-estado-txt{min-width:0}
.wa-estado b{
  display:block;font-size:.86rem;font-weight:650;color:var(--wa-tit);
  font-variant-numeric:tabular-nums;
}
.wa-estado span{display:block;margin-top:2px;font-size:.74rem;color:var(--wa-txt)}

/* ── Sem plano ─────────────────────────────────────────
   Âmbar, e não vermelho: não é erro nem bloqueio por falta de permissão — é
   uma oferta. Vermelho aqui acusaria a pessoa de ter feito algo errado. */
.wa-plano{
  display:flex;gap:13px;align-items:flex-start;padding:15px 16px;
  border:1px solid var(--wa-plano-borda);border-radius:18px;
  background:var(--wa-plano-fundo);
}
.wa-plano-ico{
  width:30px;height:30px;flex:0 0 auto;display:grid;place-items:center;
  border-radius:50%;background:var(--wa-plano-ico-fundo);color:var(--wa-plano-txt);
}
.wa-plano-ico svg{width:16px;height:16px}
.wa-plano-txt b{display:block;font-size:.85rem;font-weight:700;color:var(--wa-plano-txt)}
.wa-plano-txt span{display:block;margin-top:5px;font-size:.775rem;line-height:1.55;color:var(--wa-txt)}

/* ── Como funciona ───────────────────────────────────── */
.wa-passos{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:15px}
.wa-passo{display:flex;gap:13px;align-items:flex-start}
.wa-num{
  width:24px;height:24px;flex:0 0 auto;display:grid;place-items:center;
  border-radius:50%;background:rgba(37,211,102,.14);color:var(--wa-verde-txt);
  font-size:.71rem;font-weight:800;font-variant-numeric:tabular-nums;
}
/* ── O NÚMERO FICA NO CENTRO DO CÍRCULO ────────────────────────
   A descrição do passo mora num invólucro com classe própria, e não em
   `.wa-passo span`. Aquele seletor tem especificidade (0,1,1) e o do círculo,
   `.wa-num`, tem (0,1,0): a descrição VENCIA e impunha `display:block` mais
   `margin-top:5px` ao próprio círculo, que é um `span`. O `place-items:center`
   do grid era descartado junto, e o algarismo ia parar no canto de cima. */
.wa-passo-txt b{display:block;font-size:.855rem;font-weight:650;color:var(--wa-tit);line-height:1.35}
.wa-passo-txt span{display:block;margin-top:5px;font-size:.785rem;line-height:1.6;color:var(--wa-txt)}

/* ── As escolhas ─────────────────────────────────────── */
.wa-opcoes{display:flex;flex-direction:column;gap:11px}
.wa-opc{
  display:flex;gap:14px;align-items:flex-start;cursor:pointer;
  padding:15px 16px;border:1px solid var(--wa-borda);border-radius:18px;
  background:var(--wa-caixa);
  transition:border-color .16s,background .16s,box-shadow .16s;
}
.wa-opc:hover{border-color:var(--wa-borda-forte);background:var(--wa-caixa-alta)}
.wa-opc.wa-on{
  border-color:rgba(37,211,102,.45);
  background:rgba(37,211,102,.08);
  box-shadow:inset 0 0 0 1px rgba(37,211,102,.12);
}
/* Mesma armadilha: `.wa-opc span` casaria com `.wa-chave` e com
   `.wa-chave-pino`, e com especificidade maior do que a das regras delas —
   a chave herdaria `margin-top:5px` e a cor do texto. */
.wa-opc-txt b{display:block;font-size:.86rem;font-weight:650;color:var(--wa-tit)}
.wa-opc-txt span{display:block;margin-top:5px;font-size:.775rem;line-height:1.55;color:var(--wa-txt)}

/* Opção filha desligada porque a chave geral está desligada. Ela continua
   VISÍVEL: escondê-la faria a caixa mudar de tamanho a cada clique, e quem
   desligou a sincronização perderia de vista o que estava perdendo. */
.wa-opc.wa-off{opacity:.42;cursor:default}
.wa-opc.wa-off:hover{border-color:var(--wa-borda);background:var(--wa-caixa)}

/* ── A chave ─────────────────────────────────────────
   O `input` continua sendo um checkbox de verdade, só que invisível por cima
   da chave: teclado, leitor de tela e o `label` que envolve o texto seguem
   funcionando como sempre. Trocar por `div` com `onclick` custaria isso tudo
   em nome do desenho. */
.wa-chave{position:relative;width:40px;height:23px;flex:0 0 auto;margin-top:1px}
.wa-chave input{
  position:absolute;inset:0;width:100%;height:100%;margin:0;
  opacity:0;cursor:pointer;z-index:2;
}
.wa-chave input:disabled{cursor:default}
.wa-chave-pino{
  position:absolute;inset:0;border-radius:999px;
  background:var(--wa-chave-off);transition:background .18s;
}
.wa-chave-pino::after{
  content:'';position:absolute;top:3px;left:3px;width:17px;height:17px;
  border-radius:50%;background:var(--wa-pino);
  box-shadow:0 1px 3px rgba(4,16,32,.3);
  transition:translate .18s cubic-bezier(.4,1.3,.5,1);
}
.wa-chave input:checked ~ .wa-chave-pino{background:var(--wa-verde-forte)}
.wa-chave input:checked ~ .wa-chave-pino::after{translate:17px 0}
.wa-chave input:focus-visible ~ .wa-chave-pino{
  box-shadow:0 0 0 3px rgba(37,211,102,.36);
}

/* ── O que o MyDesk não faz ─────────────────────────────────
   Neutro, e não verde: é a parte que tranquiliza, e não a que se oferece. */
.wa-limites{
  margin:0;padding:15px 17px;border-radius:18px;
  border:1px solid var(--wa-borda);background:var(--wa-caixa);
}
.wa-limites b{
  display:block;margin-bottom:9px;font-size:.685rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--wa-fraco);
}
.wa-limites ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.wa-limites li{
  position:relative;padding-left:18px;
  font-size:.765rem;line-height:1.5;color:var(--wa-txt);
}
.wa-limites li::before{
  content:'';position:absolute;left:2px;top:.42em;
  width:7px;height:7px;border-radius:50%;
  border:1.5px solid var(--wa-fraco);opacity:.75;
}

/* ── O pé ────────────────────────────────────────────── */
.wa-aviso{margin:0;font-size:.765rem;line-height:1.45;color:var(--clr-danger,#e5484d)}
.wa-aviso:empty{display:none}
.wa-aviso.wa-ok{color:var(--wa-verde-txt)}
.wa-pe{
  display:flex;gap:11px;justify-content:flex-end;align-items:center;flex-shrink:0;
  padding:16px 22px 20px;
}
.wa-btn{
  height:42px;padding:0 22px;border-radius:999px;cursor:pointer;
  font:650 .82rem Inter,Arial,sans-serif;
  border:1px solid var(--wa-borda-forte);background:transparent;color:var(--wa-txt);
  transition:background .15s,color .15s,border-color .15s,translate .1s;
}
.wa-btn:hover{background:var(--wa-caixa-alta);color:var(--wa-tit)}
.wa-btn:active{translate:0 1px}
/* Sólido, e não um verde translúcido: é A ação da janela e precisa parecer um
   botão. Texto escuro sobre o verde do WhatsApp dá 9:1 nos dois temas. */
.wa-btn-ok{
  border-color:transparent;
  background:linear-gradient(180deg,#2fdc74,#12b45b);
  color:#042a15;font-weight:700;
  box-shadow:0 4px 14px rgba(18,180,91,.32);
}
.wa-btn-ok:hover{background:linear-gradient(180deg,#43e884,#17c866);color:#03230f}
.wa-btn[disabled]{opacity:.5;cursor:default;box-shadow:none}
.wa-btn[disabled]:hover{background:transparent;color:var(--wa-txt);translate:none}
.wa-btn-ok[disabled]:hover{background:linear-gradient(180deg,#2fdc74,#12b45b);color:#042a15}

@media (max-width:560px){
  .wa-bg{padding:0;align-items:flex-end}
  .wa-card{width:100%;max-height:94vh;border-radius:26px 26px 0 0}
  .wa-pe{flex-direction:column-reverse}
  .wa-btn{width:100%}
}

/* ════════════════════════════════════════════════════════════════════════
   AS CONVERSAS
   ════════════════════════════════════════════════════════════════════════ */

/* ── A TRAVA GERAL DO `[hidden]` ───────────────────────────────
   Todo `display` declarado numa classe VENCE o `[hidden]` do navegador, e esta
   janela tem meia dúzia deles. Já custou uma faixa verde vazia no topo; com as
   abas custaria as duas telas empilhadas. Uma regra, e o problema acaba de vez. */
.wa-card [hidden]{display:none!important}

.wa-abas{
  display:flex;gap:4px;flex-shrink:0;padding:0 22px 12px;
}
.wa-aba{
  flex:1;height:34px;border-radius:999px;cursor:pointer;
  border:1px solid transparent;background:transparent;color:var(--wa-fraco);
  font:650 .78rem Inter,Arial,sans-serif;
  transition:background .15s,color .15s,border-color .15s;
}
.wa-aba:hover{color:var(--wa-tit);background:var(--wa-caixa)}
.wa-aba.ativa{
  border-color:rgba(37,211,102,.4);background:rgba(37,211,102,.1);
  color:var(--wa-verde-txt);
}

.wa-pane-conv{
  flex:1;min-height:0;display:flex;flex-direction:column;
  padding:0 14px 14px;
}
.wa-vazio{
  margin:auto;padding:26px 20px;text-align:center;
  font-size:.79rem;line-height:1.6;color:var(--wa-fraco);
}

/* ── A lista ──────────────────────────────────────────── */
.wa-lista{
  flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:2px;
}
.wa-lista::-webkit-scrollbar{width:8px}
.wa-lista::-webkit-scrollbar-thumb{border-radius:8px;background:var(--wa-chave-off)}
.wa-conversa{
  display:flex;gap:12px;align-items:center;width:100%;text-align:left;
  padding:11px 12px;border:0;border-radius:14px;background:transparent;
  cursor:pointer;color:inherit;font:inherit;
  transition:background .14s;
}
.wa-conversa:hover{background:var(--wa-caixa)}
.wa-ini{
  width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;
  border-radius:50%;background:rgba(37,211,102,.16);color:var(--wa-verde-txt);
  font-size:.92rem;font-weight:700;text-transform:uppercase;
}
.wa-conversa-txt{flex:1;min-width:0}
.wa-conversa-topo{display:flex;align-items:baseline;gap:8px}
.wa-conversa-topo b{
  flex:1;min-width:0;font-size:.85rem;font-weight:650;color:var(--wa-tit);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wa-quando{flex:0 0 auto;font-size:.68rem;color:var(--wa-fraco);font-variant-numeric:tabular-nums}
.wa-previa{
  display:block;margin-top:3px;font-size:.755rem;color:var(--wa-txt);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ── O fio da conversa ──────────────────────────────────── */
.wa-fio-topo{
  display:flex;align-items:center;gap:11px;flex-shrink:0;
  padding:2px 4px 12px;border-bottom:1px solid var(--wa-borda);margin-bottom:10px;
}
.wa-voltar{
  width:30px;height:30px;flex:0 0 auto;display:grid;place-items:center;
  border:1px solid var(--wa-borda);border-radius:50%;background:transparent;
  color:var(--wa-txt);cursor:pointer;font-size:.9rem;line-height:1;
  transition:background .14s,color .14s;
}
.wa-voltar:hover{background:var(--wa-caixa-alta);color:var(--wa-tit)}
.wa-fio-quem{min-width:0}
.wa-fio-quem b{
  display:block;font-size:.87rem;font-weight:650;color:var(--wa-tit);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wa-fio-quem span{display:block;font-size:.71rem;color:var(--wa-fraco);font-variant-numeric:tabular-nums}

/* O botão de apagar mora no canto do cabeçalho do fio. Cinza até o primeiro
   clique; vermelho e escrito "Apagar mesmo?" no segundo — confirmação sem
   abrir janela, e que se desfaz sozinha em 4 segundos se ninguém continuar. */
.wa-apagar{
  margin-left:auto;display:flex;align-items:center;justify-content:center;gap:6px;
  min-width:30px;height:30px;padding:0 9px;flex:0 0 auto;cursor:pointer;
  border:1px solid var(--wa-borda);border-radius:999px;background:transparent;
  color:var(--wa-fraco);font:650 .72rem Inter,Arial,sans-serif;
  transition:background .14s,color .14s,border-color .14s;
}
.wa-apagar svg{width:15px;height:15px}
.wa-apagar:hover{color:#e5484d;border-color:rgba(229,72,77,.45);background:rgba(229,72,77,.08)}
.wa-apagar.wa-apagar-sim{
  color:#fff;background:#e5484d;border-color:#e5484d;
}
.wa-apagar[disabled]{opacity:.5;cursor:default}

.wa-fio{
  flex:1;min-height:0;overflow-y:auto;
  display:flex;flex-direction:column;gap:7px;padding:0 4px 4px;
}
.wa-fio::-webkit-scrollbar{width:8px}
.wa-fio::-webkit-scrollbar-thumb{border-radius:8px;background:var(--wa-chave-off)}
.wa-bolha{
  max-width:78%;align-self:flex-start;
  padding:9px 13px 7px;border-radius:16px 16px 16px 5px;
  background:var(--wa-caixa);
}
/* A minha vai para a direita e ganha o verde — é assim em todo aplicativo de
   mensagem, e inventar outra convenção aqui só faria a pessoa parar para ler
   quem falou o quê. */
.wa-bolha.wa-minha{
  align-self:flex-end;border-radius:16px 16px 5px 16px;
  background:var(--wa-minha-fundo);
}
.wa-bolha-txt{
  display:block;font-size:.79rem;line-height:1.5;color:var(--wa-tit);
  white-space:pre-wrap;word-break:break-word;
}
.wa-bolha-hora{
  display:block;margin-top:3px;text-align:right;
  font-size:.63rem;color:var(--wa-fraco);font-variant-numeric:tabular-nums;
}
/* Enquanto o servidor não confirmou. Some sozinha quando confirma — e a bolha
   inteira sai se falhar, com o texto de volta no campo. */
.wa-bolha.wa-indo{opacity:.55}

/* ── Escrever ────────────────────────────────────────── */
.wa-escrever{
  display:flex;gap:9px;align-items:flex-end;flex-shrink:0;
  margin-top:11px;padding:8px 8px 8px 14px;
  border:1px solid var(--wa-borda);border-radius:22px;background:var(--wa-caixa);
  transition:border-color .15s;
}
.wa-escrever:focus-within{border-color:rgba(37,211,102,.45)}
.wa-campo{
  flex:1;min-width:0;border:0;background:transparent;resize:none;
  padding:8px 0;max-height:110px;
  font:400 .8rem/1.5 Inter,Arial,sans-serif;color:var(--wa-tit);
}
.wa-campo:focus{outline:none}
.wa-campo::placeholder{color:var(--wa-fraco)}
.wa-enviar{
  width:36px;height:36px;flex:0 0 auto;display:grid;place-items:center;
  border:0;border-radius:50%;cursor:pointer;
  background:linear-gradient(180deg,#2fdc74,#12b45b);color:#042a15;
  transition:filter .15s,opacity .15s;
}
.wa-enviar svg{width:16px;height:16px}
.wa-enviar:hover{filter:brightness(1.1)}
.wa-enviar[disabled]{opacity:.5;cursor:default;filter:none}

@media (max-width:560px){
  .wa-bolha{max-width:86%}
}