/* ══════════════════════════════════════════════════════════════════════
   ABRIDOR DE .MSG E .EML

   Só o que é deste abridor. A casca comum a toda ferramenta (trilha,
   topo, selos, texto de apoio, FAQ e convite) mora em
   /ferramentas/base.css, carregada antes desta.
   ══════════════════════════════════════════════════════════════════ */

/* ── Resultado ──────────────────────────────────────────────────────── */
/* SEM overflow: hidden. Ele existia so para arredondar os cantos, e
   qualquer overflow diferente de visible num ancestral desliga o
   position: sticky do descendente: a barra de acoes ia embora junto com
   a rolagem. O arredondamento passou para os cantos das pontas. */
/* Gruda no alto enquanto a mensagem rola. Com um e-mail de 12 páginas,
   um botão no rodapé do cartão custa rolar tudo de volta só para salvar
   em PDF. O 69px é a altura da navbar fixa: sem ele a barra desliza para
   debaixo dela. */
.resultado-topo {
    /* O arredondamento de cima mora aqui, agora que o cartao nao corta
       mais o que sai dele. */
    border-radius: 15px 15px 0 0;
    position: sticky;
    top: 69px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px 11px 22px;
    border-bottom: 1px solid var(--color-border);
    /* Opaco de propósito: a mensagem passa por baixo. */
    background: #f8fafc;
}

.resultado-topo strong {
    font-size: 14px;
    font-weight: 750;
    color: var(--color-text);
}

/* ── Anexos, no topo como no Outlook ─────────────────────────────────
   Ficavam no rodapé do cartão, depois de um corpo que pode ter mil
   linhas. Anexo é a primeira coisa que se procura num e-mail de
   proposta, e no Outlook ele está logo abaixo do cabeçalho. */
.bloco-anexos {
    padding: 16px 22px;
    border-bottom: 1px solid var(--color-border-light, #f1f5f9);
    background: rgba(255, 107, 0, 0.02);
}

.bloco-anexos h2 {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.anexos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.anexo {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    border: 1px solid var(--color-border);
    border-radius: 11px;
    background: var(--bg-surface, #fff);
    font-size: 13.5px;
    max-width: 100%;
}

.anexo--imagem {
    cursor: zoom-in;
}

.anexo--imagem:hover,
.anexo--imagem:focus-visible {
    border-color: var(--color-primary);
}

.anexo-mini {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 7px;
    object-fit: cover;
    background: var(--bg-sidebar);
}

.anexo-icone {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: var(--bg-sidebar);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
}

.anexo-texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.anexo-nome {
    font-weight: 650;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 240px;
}

.anexo-tamanho {
    font-size: 12px;
    color: var(--color-text-muted);
}

.anexo-baixar {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(255, 107, 0, 0.1);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
}

.anexo-baixar:hover {
    background: rgba(255, 107, 0, 0.18);
}

/* ── Voltar, quando se abriu uma mensagem anexada ─────────────────────
   Mensagem dentro de mensagem é comum em e-mail encaminhado, e sem uma
   saída visível a pessoa fica presa na de dentro. */
.voltar-barra {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    border-bottom: 1px solid var(--color-border-light, #f1f5f9);
    background: rgba(255, 107, 0, 0.05);
    font-size: 13.5px;
}

.voltar-barra button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border: 1px solid var(--color-border);
    border-radius: 9px;
    background: var(--bg-surface, #fff);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.voltar-barra button:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.voltar-barra svg {
    width: 14px;
    height: 14px;
}

#voltar-rotulo {
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Anexo que é outra mensagem: o botão de abrir vem antes do de baixar,
   porque ler é o que se quer, e o ícone se distingue do de arquivo. */
.anexo-abrir {
    flex-shrink: 0;
    padding: 6px 12px;
    border: 1px solid var(--color-primary);
    border-radius: 8px;
    background: var(--color-primary);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
}

.anexo-abrir:hover {
    filter: brightness(1.08);
}

.anexo-icone--mensagem {
    background: rgba(255, 107, 0, 0.12);
    color: var(--color-primary);
}

/* ── Cabeçalho da mensagem ──────────────────────────────────────────── */
.campos {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 7px 18px;
    margin: 0;
    padding: 20px 22px;
    border-bottom: 1px solid var(--color-border-light, #f1f5f9);
    font-size: 14.5px;
}

.campos dt {
    font-weight: 750;
    color: var(--color-text-muted);
}

.campos dd {
    margin: 0;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

/* ── Abas do corpo ──────────────────────────────────────────────────── */
/* Também gruda, logo abaixo da barra: trocar entre Original e Texto no
   meio de uma mensagem longa não deve exigir voltar ao topo. O 121px é a
   navbar mais a barra de ações. */
.abas {
    position: sticky;
    top: 121px;
    z-index: 4;
    display: flex;
    gap: 4px;
    padding: 12px 22px 0;
    border-bottom: 1px solid var(--color-border-light, #f1f5f9);
    background: var(--bg-surface, #fff);
}

.abas button {
    padding: 8px 16px 11px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--color-text-muted);
    cursor: pointer;
}

.abas button[aria-selected="true"] {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.abas button:hover {
    color: var(--color-text);
}

/* A altura vem do JavaScript, medida no conteúdo: o quadro cresce até
   caber a mensagem e quem rola é a página. Altura fixa aqui deixava uma
   barra de rolagem dentro de outra e, pior, fazia o PDF sair só com o
   pedaço visível da mensagem. O valor abaixo é só o ponto de partida,
   antes da medição. */
.original {
    display: block;
    width: 100%;
    height: 400px;
    border: none;
    background: #fff;
}

.texto {
    margin: 0;
    padding: 22px;
    max-height: 560px;
    overflow-y: auto;
    font-family: inherit;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--color-text);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* A ponta de baixo do cartao, seja ela o texto, o quadro ou os anexos. */
.resultado > :last-child,
.resultado > :last-child.texto {
    border-radius: 0 0 15px 15px;
}

/* ── Visor de imagem ──────────────────────────────────────────────────
   Anexo de imagem abre aqui em vez de exigir download. Continua tudo
   local: a origem é um endereço de objeto do próprio navegador. */
.visor {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 28px;
    background: rgba(15, 23, 42, 0.88);
}

.visor img {
    max-width: 100%;
    max-height: calc(100vh - 150px);
    border-radius: 10px;
    background: #fff;
    object-fit: contain;
}

.visor-barra {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #fff;
    font-size: 14px;
}

.visor-barra a,
.visor-barra button {
    padding: 8px 15px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: none;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

.visor-barra a:hover,
.visor-barra button:hover {
    background: rgba(255, 255, 255, 0.14);
}

/* ── Impressão ───────────────────────────────────────────────────────
   "Imprimir" aqui quer dizer "salvar em PDF", que é o que a maioria
   procura ao chegar por "converter msg para pdf". Some tudo que não é a
   mensagem, e o corpo perde a rolagem: no papel, caixa com altura fixa
   corta o texto. */
@media print {
    .navbar,
    .mobile-menu-overlay,
    .footer,
    .breadcrumb,
    .ferramenta-topo,
    .garantias,
    .zona,
    .processando,
    .abas,
    .acoes,
    .apoio,
    .ferramenta-cta,
    .limpo,
    .visor,
    .anexo-baixar,
    #cookie-banner {
        display: none !important;
    }

    .ferramenta {
        padding: 0;
        max-width: none;
    }

    .resultado {
        border: none;
        border-radius: 0;
        margin: 0;
    }

    .resultado-topo {
        background: none;
        padding-left: 0;
    }

    .campos,
    .bloco-anexos {
        padding-left: 0;
        background: none;
    }

    /* No papel some a aba: imprime o que estiver à vista, sem rolagem e
       sem altura fixa. */
    .texto {
        max-height: none;
        overflow: visible;
        padding-left: 0;
        font-size: 12pt;
    }

    /* A altura já é a do conteúdo, medida em tela, então aqui só se
       garante que nada corte. */
    .original {
        max-height: none;
        overflow: visible;
    }
}

/* ── Celular ────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    /* Rótulo em cima do valor: em 390px, uma coluna de 78px mais um
       endereço de e-mail longo não cabem lado a lado. */
    .campos {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
        padding: 18px;
    }

    .campos dt {
        font-size: 11.5px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .campos dd {
        margin-bottom: 10px;
    }

    .texto,
    .bloco-anexos,
    .acoes {
        padding: 18px;
    }

    .abas {
        padding: 10px 18px 0;
    }


    .anexo {
        width: 100%;
    }

    .anexo-nome {
        max-width: none;
    }

    /* No celular a barra do topo quebra em duas linhas: o rótulo em cima
       e os três botões embaixo, dividindo a largura. */
    .resultado-topo {
        flex-wrap: wrap;
        top: 61px;
        padding: 11px 16px;
    }

    .acoes {
        margin-left: 0;
        width: 100%;
        gap: 6px;
    }

    .acoes button {
        flex: 1 1 auto;
        padding: 9px 8px;
        font-size: 12.5px;
    }

    .abas {
        top: 121px;
    }
}