/* ════════════════════════════════════════════════════════════════════════
   A NOTA DE E-MAIL ABERTA — a tela do lead do WhatsApp, repintada
   ════════════════════════════════════════════════════════════════════════
   Quem desenha é `whatsapp-lead-detalhe.css`. O JavaScript monta a MESMA
   marcação `wld-*` e acrescenta `.emd-modal` no mesmo elemento, o que dá a
   toda regra daqui especificidade maior. Este arquivo faz duas coisas, e só
   elas: troca o verde pelo vermelho do Gmail, e acrescenta o campo de assunto,
   que é o que o e-mail tem e a mensagem de WhatsApp não.

   ── POR QUE NÃO UMA FOLHA PRÓPRIA ───────────────────────────────────────
   Porque é a mesma tela. Duas folhas completas dariam dois lugares para
   consertar contraste, foco, teclado e o encaixe da `.note` dentro do modal —
   e o segundo é sempre o que ninguém lembra. Aqui, o dia em que a tela do lead
   melhorar, esta melhora junto.

   ── A FOLHA IRMÃ ESCREVE O VERDE NA REGRA ───────────────────────────────
   Ela não usa variáveis: o verde está escrito em cada declaração. Por isso
   este arquivo é uma lista de regras repetidas com outra cor, e não um punhado
   de `--variáveis`. É feio de ler e é a única forma de não tocar na folha que
   já funciona para o WhatsApp. `test/email-nota.test.js` varre este arquivo
   atrás de verde que tenha sobrado.

   ── O CONTRASTE FOI MEDIDO ──────────────────────────────────────────────
     · branco no botão de enviar, sobre `#d93025 → #b3221c`   4,77:1
     · selo da lista, `#a3231b` sobre `#fce8e6`               6,33:1
     · legenda dos fatos, `#8a6b67` sobre a caixa clara       4,57:1
     · rótulo secundário da ficha, `#7d605c` sobre branco     5,68:1
   ════════════════════════════════════════════════════════════════════════ */

/* ── A MOLDURA ─────────────────────────────────────────────────── */
.kb-modal.wld-modal.emd-modal{background:#fdf7f6}
.kb-modal-detalhe.wld-modal.emd-modal .kb-modal-cabecalho{
  background:linear-gradient(110deg,#8c1a15,#c5221f 58%,#ea4335)!important;
  border-bottom-color:#c5221f!important;
}
.emd-modal .wld-note .wld-shell{background:#fdf7f6}
.emd-modal .kb-modal-lista-select{background:#fdf4f3;border-color:#f0d6d2;color:#6b201a}
.emd-modal .wld-shell button:focus-visible,
.emd-modal .wld-shell a:focus-visible,
.emd-modal .wld-shell select:focus-visible,
.emd-modal .wld-shell input:focus-visible,
.emd-modal .wld-shell textarea:focus-visible{outline-color:#c5221f}

/* ── OS BOTÕES ─────────────────────────────────────────────────── */
.emd-modal .wld-shell .wld-button{border-color:#efdcd9;color:#5c3b37}
.emd-modal .wld-shell .wld-button:hover{background:#fdf0ee;border-color:#eebdb6}
.emd-modal .wld-shell .wld-button.soft{color:#a3231b;background:#fdf2f0;border-color:#f6ddd9}
.emd-modal .wld-shell .wld-button.link{color:#b3221c;background:transparent;border-color:transparent}

/* ── IDENTIDADE ────────────────────────────────────────────────── */
.emd-modal .wld-identity,
.emd-modal .wld-work,
.emd-modal .wld-right{border-color:#f3e3e1;box-shadow:0 5px 18px rgba(140,26,21,.03)}
.emd-modal .wld-avatar{
  background:linear-gradient(140deg,#ea4335,#b3221c);
  box-shadow:0 2px 6px rgba(140,26,21,.12);
}
.emd-modal .wld-avatar>i{background:#fff;color:#ea4335}
.emd-modal .wld-badge{background:#fce8e6;color:#a3231b}
.emd-modal .wld-contact h1{color:#3c1512}
.emd-modal .wld-contact p{color:#6b4a46}
.emd-modal .wld-contact p>i{border-left-color:#eedbd8}
.emd-modal .wld-wa-label svg{color:#ea4335}
.emd-modal .wld-contact>small{color:#8a6b67}

/* ── OS QUATRO FATOS ───────────────────────────────────────────── */
.emd-modal .wld-facts>div{border-color:#f1e2e0;background:#fdfafa}
.emd-modal .wld-fact-icon{background:#fce8e6;color:#b3221c}
.emd-modal .wld-facts>div:last-child .wld-fact-icon{background:#eef1f7;color:#4a5568}
.emd-modal .wld-facts small{color:#8a6b67}
.emd-modal .wld-facts b{color:#43302d}

/* ── AS ABAS ───────────────────────────────────────────────────── */
.emd-modal .wld-tabs{border-bottom-color:#f3e5e3}
.emd-modal .wld-shell .wld-tabs .wld-button{color:#6b4a46}
.emd-modal .wld-shell .wld-tabs .selected{
  background:linear-gradient(#fdf3f2,#fffdfd);
  border-bottom-color:#d93025;color:#8c1a15;
}

/* ── O FIO ─────────────────────────────────────────────────────── */
.emd-modal .wld-conversation{border-color:#f0e0de;background:#fbf7f6}
.emd-modal .wld-chat-head{background:#fbf6f5;border-bottom-color:#f0e2e0}
.emd-modal .wld-chat-head small{color:#8a6b67}
.emd-modal .wld-chat-head small i{background:#ea4335}
.emd-modal .wld-shell .wld-chat-head .wld-button{color:#6b4a46;background:none}
.emd-modal .wld-chat-head input{border-color:#eedbd8;color:#3c1512}
/* O papel do fio é NEUTRO, e não vermelho claro. A folha irmã usa um bege com
   a textura do WhatsApp porque é o papel de lá; aqui um fundo rosado deixaria
   as bolhas brancas sem contorno e a conversa sem profundidade. */
.emd-modal .wld-messages{background-color:#f3efee;background-image:none}
.emd-modal .wld-day{color:#7d605c;box-shadow:0 2px 7px rgba(60,21,18,.12)}
.emd-modal .wld-bubble{color:#2b1512;box-shadow:0 2px 8px rgba(60,21,18,.07)}
.emd-modal .wld-bubble.outgoing{background:#fde7e4;border-color:#f6cdc7}
.emd-modal .wld-bubble time{color:#8a6b67}
.emd-modal .wld-empty{color:#7d605c}
.emd-modal .wld-chat-error{color:#7d605c}
.emd-modal .wld-status{color:#a3231b}

/* ── RESPONDER, COM ASSUNTO ────────────────────────────────────────
   É a única diferença de ESTRUTURA entre esta tela e a do WhatsApp. O
   compositor de lá é uma linha; aqui são duas, porque o e-mail tem assunto —
   e ele não é enfeite: é o que mantém a resposta no mesmo fio na caixa de
   quem recebe. */
.emd-modal .wld-composer.emd-composer{
  display:flex;flex-direction:column;align-items:stretch;gap:7px;
  background:#f8f3f2;padding:9px 10px;
}
.emd-modal .emd-assunto-campo{
  width:100%;border:1px solid #eedbd8;border-radius:8px;background:#fff;
  padding:8px 11px;color:#3c1512;font:600 12px Inter,Arial,sans-serif;outline:none;
}
.emd-modal .emd-assunto-campo:focus{border-color:#e0928a}
.emd-modal .emd-assunto-campo::placeholder{color:#9a7b77;font-weight:400}
.emd-modal .emd-linha{display:flex;align-items:center;gap:8px;min-width:0}
.emd-modal .emd-composer textarea{
  flex:1;min-width:0;background:#fff;border:1px solid #eedbd8;border-radius:18px;
  padding:9px 13px;color:#3c1512;
}
.emd-modal .wld-send{
  background:linear-gradient(#d93025,#b3221c);color:#fff;box-shadow:0 0 0 4px #f8f3f2;
}
/* O assunto dentro da bolha diz do que trata aquela mensagem. Ele é rótulo, e
   por isso menor e na cor da marca — emendado no texto viraria a primeira
   frase da pessoa. */
.emd-modal .emd-bolha-assunto{
  display:block;margin-bottom:5px;color:#b3221c;
  font-size:11px;font-weight:700;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ── A COLUNA DA FICHA ─────────────────────────────────────────── */
.emd-modal .wld-details>section{border-color:#f2e3e1}
.emd-modal .wld-details h2,
.emd-modal .wld-right h2{color:#3c1512}
.emd-modal .wld-details select{border-color:#eedbd8;color:#6b201a}
.emd-modal .wld-details dt{color:#7d605c}
.emd-modal .wld-details dd{color:#43302d}
.emd-modal .wld-origin svg{color:#ea4335}
.emd-modal .wld-notes-input{border-color:#eedbd8;background:#fffcfc;color:#3c1512}

/* ── A COLUNA DA DIREITA ───────────────────────────────────────── */
.emd-modal .wld-side-tabs{border-color:#f3e5e3;background:#fdfafa}
.emd-modal .wld-shell .wld-side-tabs .wld-button{color:#6b4a46}
.emd-modal .wld-shell .wld-side-tabs .selected{
  background:#fce8e6;border-bottom-color:#d93025;color:#8c1a15;
}
.emd-modal .wld-right h2>span{color:#8a6b67}
.emd-modal .wld-note .n-coment-novo{border-color:#eedbd8}
.emd-modal .wld-note .n-coment-inp{color:#3c1512!important}
.emd-modal .wld-note .n-coment-enviar{background:#b3221c}
.emd-modal .wld-note .n-coment-item{border-top-color:#f1e3e1}
.emd-modal .wld-note .n-coment-cab{color:#3c1512}
.emd-modal .wld-note .n-coment-hora{color:#8a6b67}
.emd-modal .wld-note .n-coment-txt{color:#6b4a46}
.emd-modal .wld-note .n-coment-vazio{color:#8a6b67}
.emd-modal .kb-atividade-item,
.emd-modal .wld-created{border-bottom-color:#f1e3e1;color:#6b4a46}
.emd-modal .wld-created small{color:#8a6b67}
.emd-modal .wld-created>svg{background:#fce8e6;color:#b3221c}
.emd-modal .wld-tip{
  border-color:#f6ddd9;background:linear-gradient(110deg,#fdf4f3,#fbeae7);color:#8c2a22;
}
.emd-modal .wld-tip p{color:#7d605c}
.emd-modal .wld-shell .wld-tip .wld-button{color:#8a6b67;background:none;border:0}

/* ── O QUE VEM DA NOTA ─────────────────────────────────────────── */
.emd-modal .wld-note .n-checklist-wrap{color:#43302d}
.emd-modal .wld-note .n-cl-text{color:#43302d!important}
.emd-modal .wld-note .n-cl-check{accent-color:#d93025}
.emd-modal .wld-note .n-checklist-add{color:#a3231b;background:#fdf4f3;border-color:#f0c7c1}
.emd-modal .kb-etq-editar{color:#a3231b;border-color:#f3ddd9;background:#fdf7f6}
.emd-modal .kb-etq-vazio{color:#8a6b67}
.emd-modal .n-dates{background:#fdfaf9!important;color:#43302d!important}
.emd-modal .n-dinput{background:#fff!important;color:#43302d!important;border-color:#eedbd8!important}

/* ── EXCLUIR ───────────────────────────────────────────────────────
   O botão fica ao lado de "Responder" e "Abrir no Gmail", que são
   inofensivos. Aqui o vermelho da marca não serve de alerta — ele é a cor da
   tela inteira —, então o estado ARMADO é que fala: fundo cheio, rótulo
   visível e a palavra "mesmo?". */
.emd-modal .wld-shell .wld-button.danger{color:#8a6b67;border-color:#efdcd9}
.emd-modal .wld-shell .wld-button.danger:hover{
  color:#8c1a15;background:#fbe3e0;border-color:#e0a9a4;
}
.emd-modal .wld-shell .wld-button.icon-only.armado{
  background:#8c1a15;border-color:#8c1a15;color:#fff;
}
.emd-modal .wld-shell .wld-button.icon-only.armado:hover{background:#6b1410;border-color:#6b1410}