/* Aviso de e-mail novo (18/10/2026): cartões no canto inferior direito, acima do botão de pagamentos. */
.ea-pilha { position: fixed; right: 20px; bottom: 96px; z-index: 2147481000; display: flex; flex-direction: column; gap: 10px; width: 368px; max-width: calc(100vw - 32px); pointer-events: none; }
.ea-card { pointer-events: auto; position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; padding: 14px 40px 14px 14px; border-radius: 16px;
  background: #fff; border: 1px solid rgba(15, 23, 42, .08); box-shadow: 0 20px 44px -12px rgba(2, 6, 23, .42), 0 2px 6px rgba(2, 6, 23, .08); overflow: hidden;
  font-family: 'DM Sans', system-ui, sans-serif; color: #0f172a; animation: ea-entra .45s cubic-bezier(.2, .9, .25, 1.15) both; }
.ea-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--ea-cor, #c9a227); }
.ea-card.saindo { animation: ea-sai .22s ease forwards; }
@keyframes ea-entra { from { opacity: 0; transform: translateX(40px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ea-sai { to { opacity: 0; transform: translateX(30px); } }
.ea-av { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-family: 'Sora', 'DM Sans', sans-serif; font-weight: 800; font-size: 17px; color: #fff;
  background: var(--ea-cor, #c9a227); position: relative; }
.ea-av::after { content: ''; position: absolute; inset: -4px; border-radius: 15px; border: 2px solid var(--ea-cor, #c9a227); opacity: 0; animation: ea-pulso 1.6s ease-out 3; }
@keyframes ea-pulso { 0% { opacity: .7; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.25); } }
.ea-av-sino { background: #0f172a; }
.ea-av-sino svg { width: 20px; height: 20px; }
.ea-txt { min-width: 0; }
.ea-topo { display: flex; align-items: center; gap: 8px; }
.ea-rot { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #b45309; }
.ea-rot svg { width: 13px; height: 13px; }
.ea-hora { margin-left: auto; font-size: 12px; color: #94a3b8; font-variant-numeric: tabular-nums; }
.ea-de { margin-top: 3px; font-size: 14.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ea-ass { margin-top: 1px; font-size: 13.5px; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ea-ass-livre { white-space: normal; }
.ea-cx { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ea-cx span { flex: 0 0 8px; height: 8px; border-radius: 50%; background: var(--ea-cor, #c9a227); }
.ea-cx svg { width: 12px; height: 12px; }
.ea-acoes { display: flex; gap: 8px; margin-top: 11px; }
.ea-btn { font: inherit; font-size: 13px; font-weight: 700; border-radius: 9px; padding: 7px 14px; cursor: pointer; border: 1px solid #e2e8f0; background: #fff; color: #0f172a; transition: background .15s, box-shadow .15s; }
.ea-btn:hover { background: #f8fafc; }
.ea-btn:focus-visible, .ea-x:focus-visible { outline: 2px solid #f59e0b; outline-offset: 2px; }
.ea-abrir { background: #0f172a; border-color: #0f172a; color: #fff; }
.ea-abrir:hover { background: #1e293b; }
.ea-x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: #94a3b8; font-size: 20px; line-height: 1; cursor: pointer; }
.ea-x:hover { background: #f1f5f9; color: #0f172a; }
.ea-mais { grid-template-columns: minmax(0, 1fr); padding-left: 18px; }
.ea-perg { border-color: rgba(245, 158, 11, .35); }

/* Botão do sino na Caixa de e-mail */
#page-email-comercial .em-som-off { color: #94a3b8; }

/* Durante o tour de novidades os avisos saem da frente */
body.nv-ativo .ea-pilha { visibility: hidden; }

@media (max-width: 640px) {
  .ea-pilha { right: 12px; left: 12px; width: auto; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .ea-card, .ea-card.saindo, .ea-av::after { animation: none; }
}

/* Devolução (e-mail não entregue): cartão em vermelho */
.ea-card.ea-falha { --ea-cor: #dc2626; border-color: rgba(220, 38, 38, .35); }
.ea-card.ea-falha .ea-rot { color: #b91c1c; }

/* Avisos de venda nova e do Mercado Livre (assets/js/avisos_erp.js, 18/10/2026): ícone na cor do assunto. */
.ea-venda .ea-av-sino, .ea-pergunta .ea-av-sino, .ea-mensagem .ea-av-sino { background: var(--ea-cor); }
.ea-venda .ea-rot, .ea-pergunta .ea-rot, .ea-mensagem .ea-rot { color: var(--ea-cor); }

/* Mercado Livre com a cara do ML (09/11/2026): amarelo da marca, logo no topo e o azul do ML
   no ícone e no botão — o cartão era o mesmo dourado do e-mail e um se confundia com o outro. */
.ea-card.ea-ml { border-color: rgba(45, 50, 119, .16); background: linear-gradient(180deg, #fffde6 0%, #fff 46%); }
.ea-card.ea-ml::before { width: 6px; background: #ffe600; }
.ea-card.ea-ml .ea-av-sino { background: #ffe600; color: #2d3277; box-shadow: inset 0 0 0 1px rgba(45, 50, 119, .12); }
.ea-card.ea-ml .ea-av::after { border-color: #f5d000; }
.ea-card.ea-ml .ea-rot { color: #2d3277; gap: 7px; }
.ea-ml-logo { height: 18px; width: auto; display: block; }
.ea-ml-tipo { padding: 1px 7px; border-radius: 999px; background: #2d3277; color: #fff; font-size: 10px; letter-spacing: .06em; }
.ea-card.ea-ml .ea-abrir { background: #2d3277; border-color: #2d3277; }
.ea-card.ea-ml .ea-abrir:hover { background: #3a3f96; }
.ea-ml-extra { margin-top: 4px; }