/* Refino visual do HelpEmail (2026-09-28): mesma estrutura, um padrao so de cor, raio, sombra e espaco.
   Base: fundo cinza-azulado suave; lista e leitor como cartoes brancos; azul HELP (#2563eb) como unica cor de acao. */
:root{
  --he-canvas:#f2f4f8; --he-card:#ffffff; --he-borda:#e6e9ef; --he-texto:#101828; --he-texto2:#475467; --he-texto3:#98a2b3;
  --he-azul:#2563eb; --he-azul-suave:#eaf1fe; --he-azul-medio:#d4e3fd; --he-raio:14px;
  --he-sombra:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.06);
}
.dark{--he-canvas:#0b1120; --he-card:#111827; --he-borda:#1f2937; --he-texto:#f3f4f6; --he-texto2:#cbd5e1; --he-texto3:#64748b;
  --he-azul-suave:rgba(37,99,235,.16); --he-azul-medio:rgba(37,99,235,.28); --he-sombra:0 1px 2px rgba(0,0,0,.4)}
body{background:var(--he-canvas);-webkit-font-smoothing:antialiased;letter-spacing:-.005em}

/* ---------- Lateral ---------- */
.he-side.he-side{background:var(--he-canvas);border-right:0}
.he-side .border-b{border-color:transparent}
.he-side .border-t{border-color:var(--he-borda)}
.he-acc.he-acc{padding:8px 10px;border-radius:12px;gap:10px}
.he-acc.he-acc:hover{background:rgba(16,24,40,.04)}
.he-acc-open.he-acc-open{background:var(--he-card);box-shadow:var(--he-sombra)}
.dark .he-acc.he-acc:hover{background:rgba(255,255,255,.04)}
.he-acc-av{width:28px;height:28px;border-radius:9px;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;letter-spacing:.02em}
.he-acc-nome{font-size:13px;font-weight:600;color:var(--he-texto);line-height:17px}
.he-acc-mail{font-size:11px;color:var(--he-texto3);line-height:14px}
.he-side .he-acc + button{opacity:.0;transition:opacity .15s}
.he-side .mb-1:hover .he-acc + button,.he-side .mb-1:focus-within .he-acc + button{opacity:1}
@media (hover:none){.he-side .he-acc + button{opacity:1}}
.he-fold.he-fold{margin-left:6px;padding:7px 12px;border-radius:10px;color:var(--he-texto2);font-size:13px}
.he-fold.he-fold:hover{background:rgba(16,24,40,.045)}
.dark .he-fold.he-fold:hover{background:rgba(255,255,255,.05)}
.he-fold-sel.he-fold-sel,.he-fold-sel.he-fold-sel:hover{background:var(--he-azul-medio);color:#0b3aa6;font-weight:600}
.dark .he-fold-sel.he-fold-sel{color:#bfd4ff}
.he-cnt.he-cnt{font-size:11px;font-weight:600;min-width:22px;height:20px;padding:0 7px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--he-azul-suave);color:var(--he-azul)}
.he-cnt-forte.he-cnt-forte{background:var(--he-azul);color:#fff}
.he-cnt-tot.he-cnt-tot{background:rgba(16,24,40,.06);color:var(--he-texto3);font-weight:500}
.dark .he-cnt-tot.he-cnt-tot{background:rgba(255,255,255,.07)}

/* ---------- Area principal: lista e leitor como cartoes ---------- */
.he-main.he-main{background:var(--he-canvas);padding:10px 10px 10px 2px;gap:10px}
.he-listwrap.he-listwrap{border:1px solid var(--he-borda);border-radius:var(--he-raio);box-shadow:var(--he-sombra);background:var(--he-card)}
.he-readwrap.he-readwrap{border:1px solid var(--he-borda);border-radius:var(--he-raio);box-shadow:var(--he-sombra);overflow:hidden;background:var(--he-card)}
@media (max-width:767px){.he-main.he-main{padding:0;gap:0}.he-listwrap.he-listwrap,.he-readwrap.he-readwrap{border:0;border-radius:0;box-shadow:none}}

/* ---------- Lista ---------- */
.he-list.he-list{background:var(--he-card)}
.he-list .border-b{border-color:var(--he-borda)}
.he-list button[title="Resumir a caixa"],.he-list button[title*="IA"]{color:var(--he-texto3)}
.he-grp.he-grp{background:rgba(255,255,255,.96);color:var(--he-texto3);font-size:11px;letter-spacing:.07em;padding:14px 18px 6px}
.dark .he-grp.he-grp{background:rgba(17,24,39,.96)}
.he-row.he-row{margin:2px 8px;border:0;border-radius:12px;padding:10px 12px 10px 10px;gap:12px;box-shadow:none;background:transparent}
.he-row.he-row:hover{background:#f5f7fa}
.dark .he-row.he-row:hover{background:rgba(255,255,255,.04)}
.he-row.he-sel,.he-row.he-sel:hover{background:var(--he-azul-suave);box-shadow:inset 0 0 0 1px rgba(37,99,235,.28)}
.he-row.he-marc,.he-row.he-marc:hover{background:#f3f7ff}
.dark .he-row.he-marc,.dark .he-row.he-marc:hover{background:rgba(37,99,235,.10)}
.he-row.he-marc.he-sel,.he-row.he-marc.he-sel:hover{background:var(--he-azul-suave)}
.he-row.he-unread::before{content:"";position:absolute;left:-5px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--he-azul)}
.he-row .he-from{font-size:14px;color:var(--he-texto2);font-weight:500}
.he-row.he-unread .he-from{color:var(--he-texto);font-weight:700}
.he-row .he-subj{font-size:13px;color:var(--he-texto2);font-weight:400}
.he-row.he-unread .he-subj{color:var(--he-texto);font-weight:600}
.he-row .he-snip{font-size:12.5px;color:var(--he-texto3)}
.he-row .he-date{font-size:11.5px;color:var(--he-texto3);font-weight:500}
.he-row.he-unread .he-date{color:var(--he-azul);font-weight:700}
.he-row .he-av-ini{box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);font-size:13px}
/* Quadradinho de selecao no comeco da linha (PC): discreto, azul so quando marcado */
.he-cx{width:18px;height:18px;border-radius:5px;border:1.5px solid #c3cad6;background:var(--he-card);display:inline-flex;align-items:center;justify-content:center;color:#fff;transition:border-color .12s,background .12s}
.he-row:hover .he-cx{border-color:#98a2b3}
.he-cx-area:focus-visible .he-cx{box-shadow:0 0 0 3px rgba(37,99,235,.25)}
.he-cx.he-cx-on{background:var(--he-azul);border-color:var(--he-azul)}
.dark .he-cx{border-color:#475569}
/* Lista mais larga no PC */
/* Proporcional a tela: 600 px no monitor grande, sem espremer o leitor em telas menores */
@media (min-width:768px){.he-listwrap.he-listwrap{width:clamp(300px,32vw,600px)}}
/* Tira faixas/contornos antigos da linha (o ponto azul e o fundo fazem esse papel) */
.he-row.he-row{border-left-width:0 !important;outline:0}
.he-row.he-row > .absolute.left-0{display:none}

/* ---------- Leitor ---------- */
.he-reader.he-reader{background:var(--he-canvas)}
.he-rhead.he-rhead{background:var(--he-card);border-bottom:1px solid var(--he-borda);padding:26px 24px 22px}
.he-rsubj.he-rsubj{font-size:21px;font-weight:700;letter-spacing:-.015em;color:var(--he-texto);line-height:1.25}
.he-rdata{font-size:12px;color:var(--he-texto3);padding-top:4px;white-space:nowrap}
.he-aibar.he-aibar{margin:16px auto 0;max-width:820px;width:calc(100% - 48px);padding:6px;background:var(--he-card);border:1px solid var(--he-borda);border-radius:12px;gap:4px;box-shadow:var(--he-sombra)}
.he-aibar-tit{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:0 10px 0 8px;
  background:linear-gradient(90deg,#7c3aed,#2563eb);-webkit-background-clip:text;background-clip:text;color:transparent;border-right:1px solid var(--he-borda);margin-right:2px}
.he-aibar button.border{border-color:transparent;background:transparent;border-radius:9px;font-weight:600;color:var(--he-texto2)}
.he-aibar button.border:hover{background:var(--he-azul-suave);color:var(--he-azul)}
.he-body.he-body{margin:14px auto 0;max-width:820px;width:calc(100% - 48px);background:var(--he-card);border:1px solid var(--he-borda);border-radius:var(--he-raio);box-shadow:var(--he-sombra);padding:28px 32px}
@media (max-width:767px){.he-aibar.he-aibar,.he-body.he-body{width:auto;margin:10px 10px 0;padding:16px}}
.he-actions.he-actions{background:var(--he-card);border-top:1px solid var(--he-borda);padding:10px 16px;gap:6px}
.he-btn-pri.he-btn-pri{border-radius:10px;padding:9px 18px;box-shadow:0 1px 2px rgba(37,99,235,.35)}
.he-btn-sec.he-btn-sec{border-radius:10px;padding:9px 14px;border-color:var(--he-borda);color:var(--he-texto2)}
.he-btn-sec.he-btn-sec:hover{background:var(--he-canvas)}
.he-actions > button:not(.he-btn-pri):not(.he-btn-sec),.he-actions > div > button{border-radius:10px;color:var(--he-texto3)}
@media (max-width:767px){.he-rdata{display:none}}
/* Aviso de "selecionar todos os N": pilula flutuante no rodape da lista (nao desloca os e-mails) */
.he-faixa-sel{position:absolute;left:12px;right:12px;margin:0 auto;width:fit-content;bottom:16px;z-index:20;max-width:calc(100% - 24px);
  padding:9px 16px;border-radius:999px;background:#1f2937;color:#f3f4f6;font-size:13px;text-align:center;line-height:1.45;box-shadow:0 8px 24px rgba(16,24,40,.22);animation:fadeIn .2s ease-out}
.he-faixa-sel b{color:#fff}
.he-faixa-sel button{color:#93c5fd;font-weight:600;margin-left:4px;white-space:nowrap}
@media (max-width:480px){.he-faixa-sel{border-radius:14px}}
/* Espaco fixo no fim da lista: a pilula nunca cobre o ultimo e-mail, e selecionar nao desloca nada */
.he-rolagem.he-rolagem{padding-bottom:72px}
.he-faixa-sel button:hover{text-decoration:underline}
.dark .he-faixa-sel{background:#e5e7eb;color:#111827}.dark .he-faixa-sel b{color:#000}.dark .he-faixa-sel button{color:#1d4ed8}
/* Destaque da pesquisa: amarelo marca-texto na lista e no e-mail aberto */
.he-mark{background:#fde047;color:inherit;border-radius:3px;padding:0 1px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.dark .he-mark{background:#facc15;color:#111827}
/* E-mail aberto no mesmo esquadro: cabecalho, anexos, faixa de IA e corpo na mesma coluna centralizada (820 px) */
.he-rhead.he-rhead > *{max-width:820px;margin-left:auto;margin-right:auto}
.he-anexos.he-anexos{margin:16px auto 0;max-width:820px;width:calc(100% - 48px);padding:0}
.he-anexos-caixa.he-anexos-caixa{background:var(--he-card);border:1px solid var(--he-borda);border-radius:12px;padding:12px 14px;box-shadow:var(--he-sombra)}
.he-anexos-grade.he-anexos-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:8px}
.he-anexo.he-anexo{display:flex;min-width:0;background:var(--he-canvas);border-color:var(--he-borda);border-radius:10px;padding:8px 10px}
.he-anexo.he-anexo:hover{transform:none;border-color:#c3cad6;box-shadow:var(--he-sombra)}
.he-anexo-info{flex:1;min-width:0}
.he-anexo-nome{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
@media (max-width:767px){.he-anexos.he-anexos{width:auto;margin:10px 10px 0}.he-rhead.he-rhead{padding:18px 10px 16px}}
/* Resultado da IA (resumo, resposta, traducao) na mesma coluna do e-mail */
.he-airesult.he-airesult{margin:12px auto 0;max-width:820px;width:calc(100% - 48px)}
@media (max-width:767px){.he-airesult.he-airesult{width:auto;margin:10px 10px 0}}

/* Desempenho (2026-09-29): linhas fora da tela nao sao desenhadas pelo navegador (rolagem mais leve em PC lento) */
.he-list [data-chave] { content-visibility: auto; contain-intrinsic-size: auto 76px; }