/* ════════════════════════════════════════════════════════════════════════
   A JANELA DO GMAIL, E O CARTÃO DELE NO QUADRO
   ════════════════════════════════════════════════════════════════════════
   Duas coisas, e as duas são a PEÇA DO WHATSAPP REPINTADA. Isso é a decisão,
   não um atalho.

   As duas integrações resolvem o mesmo problema — "o que chega de fora vira
   nota" — e pedem a mesma autorização sobre o mesmo tipo de dado: conversa de
   terceiro. Duas telas diferentes para a mesma decisão obrigariam quem usa a
   aprender duas vezes onde ficam as chaves, e a nós a consertar contraste,
   foco e teclado em dois lugares. Por isso `whatsapp.css` e `kanban.css`
   desenham, e este arquivo só troca a cor e acrescenta o que aqui existe e lá
   não: os cartões de provedor, o campo de assunto e o endereço no cartão.

   ── POR QUE VERMELHO ────────────────────────────────────────────────────
   Porque é o Gmail. A janela do WhatsApp é verde pela mesma razão, e a
   analogia é o pedido: quem abre esperando o Gmail procura vermelho.

   Houve um tempo, nesta mesma folha, em que ela era azul do MyDesk — era o
   certo enquanto havia DOIS provedores, porque pintar com a marca de um faria
   a outra parecer convidada. Com o Outlook dormente, sobra um, e a cor volta a
   poder ser a dele.

   ── O PERIGO SAIU DO VERMELHO ───────────────────────────────────────────
   Na janela verde, "reconecte esta caixa" é vermelho e salta. Aqui o vermelho
   É a marca: um aviso vermelho sobre um painel vermelho deixa de ser aviso.
   O perigo passa para o âmbar, que é a única outra cor da janela e não
   compete com nada.

   ── O CONTRASTE FOI MEDIDO ──────────────────────────────────────────────
   O verde do WhatsApp é claro e pede texto ESCURO em cima. O vermelho do
   Gmail é escuro e pede BRANCO — trocar a cor sem trocar o texto deixaria o
   botão principal em 1,9:1. `test/email-tela.test.js` recalcula cada par a
   cada rodada, a partir desta folha; os números abaixo são o resultado, e não
   a fonte.

     · botão de ação, branco sobre `#d93025 → #b3221c`     4,77:1 (pior ponta)
     · `--wa-verde-txt` sobre o cartão, escuro e claro     8,02 e 5,43:1
     · `--em-perigo` (âmbar) nos dois temas                8,94 e 5,55:1
     · iniciais brancas no retrato do quadro               4,77:1 (pior ponta)
   ════════════════════════════════════════════════════════════════════════ */

/* ── AS VARIÁVEIS DA JANELA IRMÃ, TROCADAS ─────────────────────────────
   `.em-bg` vem SEMPRE junto de `.wa-bg` no mesmo elemento, e toda regra daqui
   carrega as duas classes. Isso lhe dá especificidade MAIOR que a do original,
   e é o que faz a troca valer — não a ordem dos arquivos.

   O `email.css` ainda entra depois do `whatsapp.css` no index, e é de
   propósito: o dia em que alguém escrever aqui um seletor de mesma
   especificidade — coisa fácil de fazer sem perceber — a ordem é o que
   decide, e com ela invertida a janela sairia verde. */
.wa-bg.em-bg{
  --wa-verde:#ea4335;
  --wa-verde-forte:#c5221f;
  --wa-verde-txt:#f9a19a;
  --wa-minha-fundo:rgba(234,67,53,.18);
  --em-tinta:#d93025;
  --em-tinta-forte:#b3221c;
  /* O âmbar de "esta caixa parou de receber". Ver o cabeçalho: aqui o
     vermelho é a marca, e um aviso vermelho sobre painel vermelho some. */
  --em-perigo:#f0b95e;
  --em-perigo-borda:rgba(240,185,94,.45);
  --em-perigo-fundo:rgba(240,185,94,.1);
}
html[data-theme="light"] .wa-bg.em-bg{
  --wa-verde-txt:#c5221f;
  --wa-minha-fundo:#fde3e0;
  --em-perigo:#8a5a09;
  --em-perigo-borda:rgba(138,90,9,.4);
  --em-perigo-fundo:rgba(138,90,9,.07);
}

/* A aura do topo e o logo do cabeçalho. Os dois traziam o verde escrito na
   regra, e não na variável — repintar só as variáveis deixaria um halo verde
   sobre uma janela vermelha. */
.em-bg .wa-card::before{
  background:radial-gradient(closest-side,
    rgba(234,67,53,var(--wa-aura)),rgba(234,67,53,0));
}
.em-bg .wa-logo{
  background:linear-gradient(150deg,#ea4335,#b3221c);
  color:#fff;
  box-shadow:0 6px 18px rgba(217,48,37,.3),0 0 0 5px rgba(234,67,53,.11);
}

/* ── O BOTÃO DE AÇÃO ──────────────────────────────────────────────
   Texto BRANCO, e não escuro como no verde: o vermelho é escuro, e o preto em
   cima dele dá 1,9:1. E o cursor ESCURECE em vez de clarear — clarear um
   vermelho derrubaria o branco abaixo de 4,5. */
.em-bg .wa-btn-ok{
  background:linear-gradient(180deg,#d93025,#b3221c);
  color:#fff;
  box-shadow:0 4px 14px rgba(179,34,28,.34);
}
.em-bg .wa-btn-ok:hover{background:linear-gradient(180deg,#b3221c,#8c1a15);color:#fff}
.em-bg .wa-btn-ok[disabled]:hover{background:linear-gradient(180deg,#d93025,#b3221c);color:#fff}

/* ── E O QUE TRAZ O VERDE ESCRITO NA REGRA ────────────────────────
   Meia dúzia de lugares de `whatsapp.css` não usa a variável: escreveram o
   verde direto. Repintar só as variáveis deixaria um retrato, um número e um
   anel de foco verdes no meio de uma janela vermelha — o tipo de sobra que
   ninguém vê ao revisar o código e todo mundo vê na tela.
   `test/email-tela.test.js` mantém a lista em dia: ele varre esta folha atrás
   de qualquer verde do WhatsApp que tenha sobrado. */
.em-bg .wa-num{background:rgba(234,67,53,.16);color:var(--wa-verde-txt)}
.em-bg .wa-opc.wa-on{
  border-color:rgba(234,67,53,.45);
  background:rgba(234,67,53,.08);
  box-shadow:inset 0 0 0 1px rgba(234,67,53,.12);
}
.em-bg .wa-chave input:focus-visible ~ .wa-chave-pino{
  box-shadow:0 0 0 3px rgba(234,67,53,.36);
}
.em-bg .wa-aba.ativa{
  border-color:rgba(234,67,53,.4);background:rgba(234,67,53,.1);
  color:var(--wa-verde-txt);
}
.em-bg .wa-ini{background:rgba(234,67,53,.16);color:var(--wa-verde-txt)}
html[data-theme="light"] .em-bg .wa-ini{background:#fce8e6}
.em-bg .wa-escrever:focus-within{border-color:rgba(234,67,53,.45)}
.em-bg .wa-enviar{background:linear-gradient(180deg,#d93025,#b3221c);color:#fff}

/* ════════════════════════════════════════════════════════════════════════
   OS CARTÕES DE PROVEDOR
   ════════════════════════════════════════════════════════════════════════
   O cartão mostra o ESTADO antes do botão: "não conectado" e "conectado como
   fulano@x.com" são informações diferentes, e deixar o botão na frente faria a
   pessoa clicar para descobrir qual das duas é a dela. */
.em-provs{display:flex;flex-direction:column;gap:11px}
.em-prov{
  display:flex;align-items:center;gap:13px;
  padding:14px 15px;border-radius:18px;
  border:1px solid var(--wa-borda);background:var(--wa-caixa);
  transition:border-color .15s,background .15s;
}
.em-prov:hover{border-color:var(--wa-borda-forte);background:var(--wa-caixa-alta)}
/* Conectado ganha a marca na borda — a mesma que a chave ligada usa na janela
   irmã, e pelo mesmo motivo: o que está ATIVO se distingue à distância. */
.em-prov.em-prov-on{
  border-color:rgba(234,67,53,.42);
  background:rgba(234,67,53,.07);
}
html[data-theme="light"] .em-prov.em-prov-on{background:#fdf4f3}

/* O retrato da marca é um quadrado branco em qualquer tema: o M do Gmail foi
   desenhado para fundo claro, e sobre o escuro da janela o vermelho dele perde
   a forma. */
.em-prov-marca{
  width:42px;height:42px;flex:0 0 auto;display:grid;place-items:center;
  border-radius:12px;background:#fff;
  box-shadow:0 1px 3px rgba(9,24,46,.18);
}
.em-prov-txt{flex:1;min-width:0}
.em-prov-txt b{
  display:block;font-size:.88rem;font-weight:650;color:var(--wa-tit);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.em-prov-txt span{
  display:block;margin-top:3px;font-size:.755rem;line-height:1.45;color:var(--wa-txt);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* O aviso de reconexão é a única coisa âmbar do cartão, e precisa ser: uma
   caixa que parou de receber não pode ficar igual a uma que está recebendo. */
.em-prov-txt .em-prov-erro{
  margin-top:5px;color:var(--em-perigo);font-weight:600;white-space:normal;
}

.em-prov-acoes{display:flex;gap:7px;flex:0 0 auto}
.em-prov-btn{height:34px;padding:0 15px;font-size:.755rem}
.em-prov-sair{color:var(--wa-fraco)}
.em-prov-sair:hover{
  color:var(--em-perigo);border-color:var(--em-perigo-borda);background:var(--em-perigo-fundo);
}

/* ── O FIO E A RESPOSTA ───────────────────────────────────────────
   O e-mail tem uma coisa que a mensagem de WhatsApp não tem: assunto. Ele
   aparece duas vezes, e são dois papéis diferentes — dentro da bolha diz do
   que trata aquela mensagem; no campo acima do texto é o que VAI SAIR, e vem
   preenchido com "Re:" porque é isso que mantém a resposta no mesmo fio na
   caixa de quem recebe. */
.em-fio-caixa{flex:1;min-height:0;display:flex;flex-direction:column}
.em-bolha-assunto{
  display:block;margin-bottom:4px;
  font-size:.72rem;font-weight:700;color:var(--wa-verde-txt);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.em-responder{display:flex;flex-direction:column;gap:8px;flex-shrink:0;margin-top:11px}
.em-assunto{
  height:38px;padding:0 15px;border-radius:19px;
  border:1px solid var(--wa-borda);background:var(--wa-caixa);
  font:600 .78rem Inter,Arial,sans-serif;color:var(--wa-tit);
  transition:border-color .15s;
}
.em-assunto:focus{outline:none;border-color:rgba(234,67,53,.45)}
.em-assunto::placeholder{color:var(--wa-fraco);font-weight:400}
.em-responder .wa-escrever{margin-top:0}

/* ════════════════════════════════════════════════════════════════════════
   O CARTÃO NO QUADRO
   ════════════════════════════════════════════════════════════════════════
   As classes são as do lead do WhatsApp (`kanban.css`), e o JavaScript monta a
   mesma marcação. Só a cor muda, e `.kb-card-email` vem sempre junto de
   `.kb-card-whatsapp` — logo, especificidade maior, e a troca vale.

   O cartão é CLARO nos dois temas, como o do WhatsApp: ele é um recado que
   chegou de fora, e não uma nota que alguém escreveu. A paleta da nota não
   manda nele.

   O QUE ESTE BLOCO CONSERTA, além da cor: o título "Nome · endereço" jogado
   numa linha só quebrava em três e empurrava o resto do cartão para fora. Aqui
   o nome fica em cima, o endereço ganha linha própria com reticências, e a
   prévia do último e-mail vem embaixo — a mesma anatomia do cartão irmão. */
.kb-card.kb-card-email{
  border-color:#f3ccc8!important;
  box-shadow:0 2px 7px rgba(153,27,20,.1)!important;
}
.kb-card.kb-card-email:hover{background:#fffbfa!important;border-color:#e8a49c!important}
.kb-card-email .kb-wa-lead-avatar{
  background:linear-gradient(145deg,#c5221f,#d93025);
  box-shadow:0 0 0 2px #fbe3e0;
}
.kb-card-email .kb-wa-lead-selo{background:#d93025}
.kb-card-email .kb-wa-lead-identidade strong{color:#40140f}
.kb-card-email .kb-wa-lead-identidade time{color:#8a5a55}
.kb-card-email .kb-integracao-nao-lidas{background:#d93025;box-shadow:0 2px 6px rgba(153,27,20,.28)}
.kb-card-email .kb-wa-lead-previa{color:#6b3b36}
/* O endereço é a identidade de verdade: dois "Victor Azevedo" são duas
   pessoas se os endereços diferem. Uma linha só, cortada, e ainda conferível. */
.kb-card-email .kb-wa-lead-end{
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:#8a5a55;font:500 .66rem/1.2 'Inter',sans-serif;
}
/* A seta de "a última fala foi nossa". Sem ela o cartão parece sempre estar
   esperando resposta, inclusive depois de respondido. */
.kb-card-email .kb-wa-lead-previa.kb-wa-lead-eu::before{
  content:'↳ ';color:#c5221f;font-weight:700;
}
.kb-card-email .kb-wa-lead-acao{
  border-color:#f6d5d0;background:#fdf0ee;color:#8a2a22;
}
.kb-card-email .kb-wa-lead-acao:hover{background:#fbe3e0;color:#b3261e}
.kb-card-email .kb-wa-lead-acao.principal{background:#fce8e6;color:#c5221f}