/* Fase 13 - frontend read-only das Contas de email simples.
   Ficheiro próprio, nunca importado por css/main.css (instrução
   explícita) - ligado diretamente em index.html. Só classes/seletores
   de atributo "simple-email-" próprios; a única exceção é a regra de
   cobertura da Conta Geral abaixo, que tem de referenciar os seletores
   ".email-center-*" existentes para os poder ocultar - nunca os
   redefine nem lhes muda nenhuma outra propriedade. */

/* --- Cobertura aditiva da Conta Geral (nunca toca no atributo "hidden"
   nem em nenhum estado interno de js/email-center.js - só display:none
   por cima, sempre reversível ao remover o atributo, ver
   js/simple-email-account.js, applyVisibility()). !important é
   necessário aqui porque .email-center-emails-section/.email-center-hero-actions
   já podem ter as suas próprias regras de display definidas noutros
   pontos de css/email-center.css (ex. dentro de @media) - esta é
   sempre a exceção deliberada de maior prioridade, restrita a este
   único cenário (conta simples ativa). --- */
.email-center-layout[data-simple-email-mode="true"] [data-email-emails-section],
.email-center-layout[data-simple-email-mode="true"] [data-email-hero-emails-actions] {
  display: none !important;
}

/* --- Seletor de conta (correção de layout) ---
   Os botões de conta simples (ex. "Email Financeiro") deixaram de ter
   aparência própria - vivem agora dentro de .email-center-hero-tabs
   (index.html, ao lado de "Email Geral"/"Contactos") e herdam SEMPRE a
   mesma aparência de separador de topo já definida em
   css/email-center.css (.email-center-hero-tabs button/.is-active,
   nunca copiada nem redefinida aqui) - zero CSS de aparência próprio
   necessário para eles, só o suficiente para os poder marcar como
   ativos (reutiliza a MESMA classe .is-active, já com esse efeito
   visual definido no ficheiro partilhado) e para suprimir visualmente
   "Email Geral" quando uma conta simples está ativa (ver
   renderSimpleEmailTabState(), js/simple-email-account.js - só esse
   módulo decide quando aplicar/remover esta classe). Seletor de
   atributo (nunca só a classe) para ficar sempre mais específico do
   que .email-center-hero-tabs button.is-active (css/email-center.css)
   - garante que esta regra vence sempre, independentemente da ordem de
   carregamento das duas folhas de estilo. Valores copiados byte a
   byte do estado NÃO ativo dessa mesma regra (nunca inventados aqui) -
   qualquer alteração futura ao visual "não ativo" desse botão só
   precisa de continuar consistente com este bloco. */
.email-center-hero-tabs button[data-email-section-tab="emails"].is-simple-email-suppressed {
  border-color: var(--color-line);
  background: #ffffff;
  color: var(--color-muted);
  font-weight: var(--font-weight-medium);
}

/* --- Correção de especificidade CSS (Fase 16, encontrada durante a
   validação em Chrome real desta fase) ---
   Qualquer elemento deste módulo escondido via atributo "hidden"
   nativo (JS: els.X.hidden = true/false, nunca outra forma - ver
   js/simple-email-account.js) que TAMBÉM tenha "display" definido por
   uma classe própria abaixo (quase sempre "flex", para o layout
   quando visível) precisa desta regra. Sem ela, a declaração de
   "display" da classe (origem "author") vence SEMPRE a regra do
   próprio motor do browser "[hidden]{display:none}" (origem "user
   agent"), mesmo com especificidade mais baixa - na cascata CSS, a
   prioridade de ORIGEM é decidida antes da especificidade (author
   normal > UA normal, qualquer que seja a especificidade de cada
   lado). Confirmado com um teste isolado real (Chrome headless,
   página mínima só com ".c{display:flex}" e "<div class=c hidden>")
   antes desta correção: o elemento continuava a renderizar-se
   (offsetHeight>0, display computado "flex", nunca "none") - haveria
   um risco real de dois "workspaces" (Conta Geral coberta por
   !important, correto; mas .simple-email-workspace/-toolbar/-body/
   -hero-actions/-detail-actions/-search-panel nunca realmente
   escondidos por "hidden" sozinho) aparecerem sobrepostos. Regra
   própria, mais específica do que a classe sozinha ([hidden] soma à
   especificidade) - nunca precisa de !important, ao contrário da
   regra de cobertura da Conta Geral acima (motivo diferente: aqui
   nunca há um "display" de outra folha de estilo a vencer, só o da
   própria classe deste ficheiro). */
.simple-email-workspace[hidden],
.simple-email-toolbar[hidden],
.simple-email-body[hidden],
.simple-email-hero-actions[hidden],
.simple-email-detail-actions[hidden],
.simple-email-search-panel[hidden] {
  display: none;
}

/* --- Ações do cabeçalho (Fase 16/17B) ---
   Mesmo lugar visual que .email-center-hero-actions (Conta Geral)
   ocupa - layout replicado (display/align-items/gap idênticos a essa
   regra, css/email-center.css), nunca a classe partilhada em si (ver
   cabeçalho deste ficheiro). "+ Novo email" e "Atualizar" reutilizam
   as classes GLOBAIS .primary-button/.ghost-button (css/header.css,
   partilhadas por toda a aplicação, nunca ".email-center-*"). "+ Novo
   email" deixou de nascer "disabled" a partir da Fase 17B (abre agora
   o compositor próprio, ver [data-simple-email-compose-modal] mais
   abaixo) - a regra :disabled abaixo fica só como reforço visual
   defensivo, para qualquer estado desativado futuro deste botão
   (nunca aplicada por omissão nesta fase). */
.simple-email-hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.simple-email-hero-actions .primary-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Correção visual (paridade 1:1 com a Conta Geral) - mesmos valores de
   .email-center-refresh-control/-status/-error (css/email-center.css,
   ficheiro não alterado - reutilizado só como referência, nunca a
   classe partilhada em si). Ao contrário da Geral, esta indicação
   reflete sempre o estado REAL da última sincronização IMAP da conta
   (ver renderRefreshStatus(), js/simple-email-account.js) - nunca um
   valor calculado no cliente. */
.simple-email-refresh-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-width: 0;
}

.simple-email-refresh-status {
  color: var(--color-muted);
  font-size: 0.78rem;
  font-weight: var(--font-weight-normal);
  min-width: 0;
  overflow-wrap: break-word;
}

.simple-email-refresh-error {
  color: #a7332f;
  font-size: 0.78rem;
  font-weight: var(--font-weight-semibold);
  min-width: 0;
  overflow-wrap: break-word;
}

.simple-email-refresh-error[hidden] {
  display: none;
}

/* --- Workspace --- */

.simple-email-workspace {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  /* min-width:0 - [data-page="emails"]/.email-center-layout
     (css/email-center.css, ficheiro não alterado) é um grid container
     (display:grid); um item de grid tem sempre min-width:auto por
     omissão, que usa o tamanho mínimo do CONTEÚDO (não o espaço
     disponível) para calcular a largura da própria coluna da grid -
     sem este reset, um descendente com scroll horizontal próprio
     (.simple-email-view-tabs, @media abaixo) continuava a forçar esta
     caixa - e por isso toda a página - a alargar para além do ecrã
     (bug real, confirmado num teste mobile antes desta correção; ver
     nota equivalente em .simple-email-view-tabs, mais abaixo - o
     mesmo problema em dois níveis diferentes da árvore, grid aqui,
     flex lá). */
  min-width: 0;
}

/* Compactação do topo da página (Fase de simplificação do cartão,
   ponto 5/8; revisão crítica do commit 1dcad6c, ponto 5) - ESCOPADA a
   min-width:1101px, o mesmo breakpoint "desktop verdadeiro" já usado
   por este ficheiro (ver @media (min-width:1101px) mais abaixo) e por
   css/email-center.css - paridade exata com --email-center-block-gap
   (agora também escopada a 1101px nesse ficheiro, consultado só como
   referência, nunca partilhado): mesmo valor exato entre a barra de
   vistas (.simple-email-toolbar) e o corpo (.simple-email-body), para
   as duas contas nunca ficarem com alturas/gaps diferentes entre si.
   Abaixo de 1101px (tablet e mobile, onde .simple-email-body já
   empilha em coluna única - ver @media (max-width:1100px), mais
   abaixo) o gap continua exatamente 0.9rem, valor original,
   inalterado. */
@media (min-width: 1101px) {
  .simple-email-workspace {
    gap: 4px;
  }
}

.simple-email-not-configured {
  margin: 0;
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
  background: #fff6e0;
  border: 1px solid #e8c766;
  color: #6b5300;
  font-size: 0.85rem;
}

/* Correção visual - a barra de vistas da Financeiro passa a copiar,
   valor a valor, o cartão .page-tabs/.page-tabs button/.page-tabs
   button.is-active (css/page-layout.css, ficheiro não alterado -
   reutilizado só como referência, nunca a classe partilhada em si,
   mesmo princípio "replicado, nunca partilhado" já usado no resto
   deste ficheiro). "Pesquisa" deixa de ficar isolada à direita só por
   já não haver justify-content:space-between - passa a ser só mais um
   botão nesta mesma linha, com o mesmo gap:8px dos separadores. */
.simple-email-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(19, 32, 27, 0.08);
  border-radius: var(--radius-md);
  background: #ffffff;
  box-shadow: var(--shadow-soft);
  padding: 12px;
}

.simple-email-view-tabs {
  display: flex;
  gap: 8px;
  /* min-width:0 (nunca o "auto" implícito de um item flex) - sem isto,
     o tamanho mínimo deste item é sempre o do seu conteúdo por
     inteiro (a soma da largura de todos os botões, mesmo com
     overflow-x:auto próprio definido no @media (max-width:1100px)
     abaixo) - obrigava sempre .simple-email-toolbar (e a própria
     página) a alargar para além do ecrã em vez de o scroll horizontal
     ficar contido só aqui dentro (bug real, confirmado num teste
     mobile real antes desta correção: body com scrollWidth > viewport
     só depois de "Email Financeiro" ficar ativo). */
  min-width: 0;
}

.simple-email-view-tab {
  appearance: none;
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: var(--color-muted);
  font-weight: var(--font-weight-medium);
  padding: 0 16px;
  cursor: pointer;
}

.simple-email-view-tab[aria-selected="true"] {
  border-color: var(--color-green);
  background: #edf8e7;
  color: var(--color-green-strong);
  font-weight: var(--font-weight-semibold);
}

/* Abreviatura mobile de "Caixa de entrada" (hotfix uniformização Fase 1) -
   mesmo princípio já usado em .email-center-quick-view-label-full/-mobile
   (Email Geral, css/email-center.css, ficheiro não alterado - nunca
   reutilizadas essas classes aqui, só a mesma técnica replicada com
   nomes próprios "simple-email-", como o resto deste ficheiro). Dois
   <span> sempre no DOM (index.html), nunca detetados por JavaScript;
   por omissão (desktop/tablet, fora de @media max-width:760px)
   mostra-se sempre o nome completo - troca dentro do bloco mobile,
   mais abaixo. Mesmo botão/handler/data-simple-email-view/vista ativa
   de sempre (renderViewTabs()/click handler, js/simple-email-account.js,
   nunca tocados - só leem data-simple-email-view/aria-selected/
   disabled, nunca o texto do botão) - só a apresentação muda. */
.simple-email-view-tab-label-mobile {
  display: none;
}

/* Fase 16 - reforço visual para qualquer vista desativada (nenhuma
   nasce disabled a partir da Fase 19 - "Não lidos"/"Arquivados"/"Lixo"
   passaram todas a ter endpoint real - mas a regra fica como defesa
   visual para qualquer estado desativado futuro): opacidade reduzida,
   fundo neutro, cursor "not-allowed", pointer-events:none reforça que
   nenhum hover/click chega sequer a ser avaliado. */
.simple-email-view-tab:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: #f3f5f4;
  pointer-events: none;
}

.simple-email-view-tab:focus-visible,
.simple-email-search-toggle:focus-visible,
.simple-email-search-submit:focus-visible,
.simple-email-search-clear:focus-visible,
.simple-email-page-button:focus-visible,
.simple-email-thread-clickzone:focus-visible,
.simple-email-detail-back:focus-visible,
.simple-email-search-input:focus-visible {
  outline: 3px solid #2f7d5b;
  outline-offset: 2px;
}

/* Fase 16 (correção visual acima) - botão de abertura/fecho do painel
   de pesquisa - mesmos valores exatos de .simple-email-view-tab (para
   ficar indistinguível de um separador nesta barra), mas nunca essa
   classe em si (não é uma vista - aria-expanded, nunca
   aria-selected/role="tab"). Sem :hover próprio - .page-tabs button
   (css/page-layout.css) também não tem nenhum; Aberto
   ([aria-expanded="true"]) usa exatamente o mesmo destaque verde do
   separador ativo. */
.simple-email-search-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: var(--color-muted);
  font-weight: var(--font-weight-medium);
  padding: 0 16px;
  cursor: pointer;
}

.simple-email-search-toggle[aria-expanded="true"] {
  border-color: var(--color-green);
  background: #edf8e7;
  color: var(--color-green-strong);
  font-weight: var(--font-weight-semibold);
}

/* Painel de pesquisa (Fase 16) - nunca reserva espaço enquanto
   "hidden" (atributo nativo, display:none). Quando aberto, fica numa
   linha própria, acima das duas colunas (secção 7 do pedido). */
.simple-email-search-panel {
  display: flex;
}

.simple-email-search-form {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 1 1 260px;
  min-width: 200px;
}

.simple-email-search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.simple-email-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid rgba(15, 76, 58, 0.25);
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
}

.simple-email-search-submit,
.simple-email-search-clear {
  appearance: none;
  border: 1px solid rgba(15, 76, 58, 0.25);
  background: #fff;
  color: #1f2d27;
  border-radius: 8px;
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.simple-email-search-submit:hover,
.simple-email-search-clear:hover,
.simple-email-page-button:hover {
  border-color: rgba(15, 76, 58, 0.5);
}

/* --- Corpo: lista (~35%) + detalhe (~65%), alturas independentes --- */

.simple-email-body {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.simple-email-list-column {
  flex: 0 0 35%;
  max-width: 35%;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
}

/* Correção visual - cartão exterior da lista, mesmo valores de
   .page-tabs (css/page-layout.css, ficheiro não alterado - reutilizado
   só como referência, nunca a classe partilhada em si), mesmo
   princípio já aplicado a .simple-email-toolbar acima. A Geral não tem
   um cartão equivalente a envolver a lista (.email-center-item vive
   direto sobre o fundo da página, sem scroll próprio, css/email-center.css)
   - aqui mantém-se de propósito (scroll independente da lista, "Manter
   lista + detalhe" do pedido), mas com a mesma linguagem visual de
   cartão branco já usada no resto da página. */
.simple-email-list {
  max-height: 70vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid rgba(19, 32, 27, 0.08);
  border-radius: var(--radius-md);
  background: #ffffff;
  box-shadow: var(--shadow-soft);
  padding: 12px;
}

.simple-email-empty {
  margin: 0.5rem;
  color: #5b6b64;
  font-size: 0.85rem;
}

.simple-email-error {
  color: #9b2c2c;
}

/* Correção visual (paridade 1:1 com a Conta Geral) - valores copiados
   de .email-center-item (css/email-center.css, ficheiro não alterado -
   reutilizado só como referência, nunca a classe partilhada em si,
   mesmo princípio "replicado, nunca partilhado" já usado no resto
   deste ficheiro): display:grid + gap:6px (nunca flex-column) para as
   linhas internas (.simple-email-thread-top/-subject/-bottom-meta)
   empilharem exatamente como .email-center-item-top/-subject/-meta;
   border-left:4px verde-azulado por omissão, radius/padding/fundo
   idênticos. Sem :hover próprio - .email-center-item também não tem
   nenhum. */
.simple-email-thread-card {
  appearance: none;
  display: grid;
  gap: 6px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  text-align: left;
  border: 1px solid var(--color-line);
  border-left: 4px solid var(--color-blue);
  border-radius: var(--radius-sm);
  background: #fbfcfa;
  padding: 13px;
  cursor: pointer;
}

/* Auditoria final do cartão - "clickzone" (novo wrapper interno, ver
   buildThreadCard(), js/simple-email-account.js) agrupa
   top/subject/preview num único item de grelha de ".simple-email-thread-card"
   (nunca três, como antes desta correção), para que os botões
   Arquivar/Lixo deixem de estar aninhados dentro do role="button".
   flex-column + o MESMO gap de sempre reproduz exatamente o espaçamento
   vertical que top/subject/preview já tinham como linhas de grelha
   separadas - sem qualquer diferença visual.
   HOTFIX (regressão pós-791f844) - causa raiz: esta "clickzone" é ELA
   PRÓPRIA um item de grid de .simple-email-thread-card, e um item de
   grid (ou de flex) tem sempre min-width:auto por omissão - mesmo
   problema já documentado em .simple-email-workspace, mais acima
   neste ficheiro, só que num nível novo da árvore, introduzido por
   este wrapper. Antes de 791f844, top/subject/preview eram itens de
   grid DIRETOS de .simple-email-thread-card - cada um já protegido
   individualmente (.simple-email-thread-top já tem min-width:0;
   .simple-email-thread-subject já trunca com overflow:hidden), por
   isso nunca tinham precisado de nenhuma proteção ao nível do
   cartão. A partir de 791f844 esses três passaram a ser itens FLEX de
   "clickzone", não já itens de grid de "card" - a proteção deles
   passou a valer só dentro do flex da "clickzone", nunca chega a
   afetar o tamanho da própria "clickzone" como item de grid do
   cartão; sem min-width:0 aqui, "clickzone" (e por arrasto o cartão
   inteiro) ficava tão larga quanto o maior conteúdo interno exigisse
   (assunto/pré-visualização/remetente compridos em produção,
   Financeiro e Rui), forçando scroll horizontal na listagem. */
.simple-email-thread-clickzone {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  cursor: pointer;
}

/* Compactação do cartão (Fase de simplificação do cartão, ponto 4C/8;
   revisão crítica do commit 1dcad6c, ponto 5) - ESCOPADA a
   min-width:1101px, paridade 1:1 com .email-center-item
   (css/email-center.css, agora também escopada a 1101px nesse
   ficheiro, consultado só como referência, nunca alterado a partir
   daqui): 6px -> 4px de gap, 13px -> 9px/13px de padding (só o
   vertical reduzido). Mesmos valores exatos da Geral, para as duas
   nunca ficarem visualmente incompatíveis (pedido explícito de
   paridade). Abaixo de 1101px (tablet e mobile) o cartão continua
   exatamente 6px/13px, valor original, inalterado - nunca existiu
   nenhuma regra própria de mobile para este seletor neste ficheiro. */
@media (min-width: 1101px) {
  .simple-email-thread-card {
    gap: 4px;
    padding: 9px 13px;
  }

  .simple-email-thread-clickzone {
    gap: 4px;
  }
}

/* "Não lida" - mesmas cores exatas de .email-center-item.is-unread
   (âmbar/creme), nunca as cores próprias que este ficheiro usava antes
   desta correção. */
.simple-email-thread-card.is-unread {
  border-left-color: var(--color-amber);
  background: #fffaf0;
}

/* "Selecionada" (conversa aberta no painel de detalhe, ao lado) - SEM
   equivalente direto na Geral: lá o detalhe abre num modal por cima da
   lista (.modal-dialog.email-center-detail-dialog), nunca precisa de
   destacar o cartão por baixo; aqui a lista fica sempre visível a par
   do detalhe ("Manter lista + detalhe", pedido explícito), por isso
   este destaque continua funcionalmente necessário. Usa os MESMOS
   tokens verdes que a própria Geral usa para "ativo/selecionado"
   noutros componentes partilhados (.page-tabs button.is-active,
   css/page-layout.css) - nunca uma cor inventada de propósito para
   este cartão.
   Usa data-selected (não aria-pressed) - "card" nunca é um widget ARIA
   (ver auditoria final do cartão, js/simple-email-account.js); o
   aria-pressed real vive só em ".simple-email-thread-clickzone", o
   único elemento com role="button". */
.simple-email-thread-card[data-selected="true"] {
  border-color: var(--color-green);
  border-left-color: var(--color-green);
  background: #edf8e7;
}

.simple-email-thread-top {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.simple-email-thread-party {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--color-ink);
  font-size: 0.8rem;
  font-weight: var(--font-weight-medium);
  word-break: break-word;
}

.simple-email-thread-card.is-unread .simple-email-thread-party {
  font-weight: var(--font-weight-semibold);
}

.simple-email-thread-meta {
  flex-shrink: 0;
  color: var(--color-muted);
  font-size: 0.78rem;
  font-weight: var(--font-weight-normal);
  white-space: nowrap;
}

.simple-email-thread-subject {
  color: var(--color-ink);
  font-size: 1.02rem;
  font-weight: var(--font-weight-medium);
}

/* Assunto sempre numa única linha (Fase de simplificação do cartão,
   ponto 4A/8; revisão crítica do commit 1dcad6c, ponto 5) - ESCOPADA a
   min-width:1101px, paridade 1:1 com .email-center-item-subject
   (css/email-center.css, agora também escopada a 1101px nesse
   ficheiro): overflow:hidden/text-overflow:ellipsis/white-space:nowrap,
   nunca quebra para segunda linha. Este cartão é um item de grid
   isolado na sua própria linha (.simple-email-thread-card é
   display:grid, nunca flex - diferente de .email-center-item-subject,
   que partilha linha com badges dentro de um flex row) - por isso não
   precisa de flex:1/min-width:0 (que só fazem sentido dentro de um
   contentor flex), só as três propriedades de truncagem. Abaixo de
   1101px (tablet e mobile) o assunto continua a quebrar normalmente em
   várias linhas, valor original, inalterado - nunca existiu nenhuma
   regra própria de mobile para este seletor neste ficheiro. */
@media (min-width: 1101px) {
  .simple-email-thread-subject {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.simple-email-thread-card.is-unread .simple-email-thread-subject {
  font-weight: var(--font-weight-bold);
}

.simple-email-thread-preview {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.78rem;
  font-weight: var(--font-weight-normal);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* HOTFIX (regressão pós-791f844) - overflow:hidden acima só recorta
     verticalmente (via line-clamp), nunca impede uma única palavra
     comprida (URL, código sem espaços) de ultrapassar horizontalmente
     a largura do cartão - mesmo princípio já usado em
     .simple-email-thread-party (remetente), mais abaixo neste
     ficheiro, para o mesmo tipo de conteúdo real e imprevisível. */
  overflow-wrap: break-word;
}

/* Linha inferior (mesmo papel de .email-center-item-meta) - ações
   (Arquivar/Lixo, quando aplicável) à esquerda + contagens/ponto de não
   lida à direita, quando existirem; nunca no canto superior direito
   (posição antiga deste ficheiro, sem equivalente na Geral). Nova fase
   (Arquivar/Lixo no cartão) - flex-wrap:wrap acrescentado (nunca
   presente antes, quando esta linha só tinha texto passivo que nunca
   precisava de quebrar) - mesma degradação controlada já usada em
   .email-center-item-meta (css/email-center.css, consultado só como
   referência): se faltar espaço, é sempre o grupo secundário
   (.simple-email-thread-meta-info, mais abaixo) que desce de linha,
   nunca as ações. */
.simple-email-thread-bottom-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* Grupo de ações do cartão (Arquivar/Lixo) - nova fase, mesmo papel de
   .email-center-item-actions-group (css/email-center.css, consultado
   só como referência, nunca partilhado) - NUNCA inclui Responsável/
   Conhecimento/Visto (exclusivos da Conta Geral, fora do âmbito desta
   conta simples). */
.simple-email-thread-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

/* Botão de ação do cartão (Arquivar/Lixo) - réplica visual exata de
   .email-center-quick-btn (css/email-center.css, consultado só como
   referência, nunca partilhado/alterado a partir daqui) - mesmo
   princípio "replicado, nunca partilhado" já usado no resto deste
   ficheiro. */
.simple-email-quick-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--color-ink);
  font: inherit;
  font-size: 0.76rem;
  font-weight: var(--font-weight-medium);
  padding: 5px 10px;
  min-height: 32px;
  cursor: pointer;
}

.simple-email-quick-btn:hover {
  border-color: rgba(47, 125, 32, 0.42);
}

.simple-email-quick-btn:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 2px;
}

.simple-email-quick-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Grupo informativo (mensagens/anexos/ponto não lida) - nova fase, mesmo
   papel de .email-center-item-meta-info (css/email-center.css,
   consultado só como referência) - margin-left:auto mantém-no sempre na
   ponta direita da linha, com .simple-email-thread-actions (quando
   existir) na ponta esquerda. Sem margin-left:auto quando
   .simple-email-thread-actions não existe (não há nada à esquerda para
   afastar) - inofensivo, um único grupo ocupa naturalmente o espaço
   disponível a partir do início da linha de qualquer forma. */
.simple-email-thread-meta-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.simple-email-thread-counts {
  color: var(--color-muted);
  font-size: 0.78rem;
  font-weight: var(--font-weight-normal);
}

/* Mesmo tamanho/cor/forma exatos de .email-center-item-unread-dot. */
.simple-email-unread-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--color-amber);
}

.simple-email-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}

.simple-email-page-button {
  appearance: none;
  border: 1px solid rgba(15, 76, 58, 0.25);
  background: #fff;
  border-radius: 8px;
  padding: 0.35rem 0.7rem;
  font-size: 0.8rem;
  cursor: pointer;
}

.simple-email-page-button:disabled {
  opacity: 0.45;
  cursor: default;
}

.simple-email-page-status {
  font-size: 0.8rem;
  color: #5b6b64;
}

/* --- Detalhe --- */

/* Correção visual - mesmo cartão exterior de .simple-email-list (acima)
   - mesmo princípio "linguagem visual partilhada de cartão branco da
   página", nunca a classe partilhada em si. A Geral abre o detalhe num
   MODAL (.modal-dialog.email-center-detail-dialog, css/modals.css) em
   vez de um painel ao lado da lista - "Manter lista + detalhe" (pedido
   explícito) preserva deliberadamente o layout inline; os valores do
   CARTÃO (fundo/borda/radius/sombra) seguem por isso a mesma referência
   .page-tabs já usada na lista, nunca o modal (cuja sombra/borda são
   pensadas para flutuar sobre um fundo escuro, nunca para um painel
   inline ao lado de outro conteúdo). */
.simple-email-detail {
  flex: 1 1 65%;
  max-width: 65%;
  min-width: 0;
  border: 1px solid rgba(19, 32, 27, 0.08);
  border-radius: var(--radius-md);
  background: #ffffff;
  box-shadow: var(--shadow-soft);
  padding: 16px;
  max-height: 78vh;
  overflow-y: auto;
}

.simple-email-detail-back {
  appearance: none;
  border: 1px solid rgba(15, 76, 58, 0.25);
  background: #fff;
  border-radius: 8px;
  padding: 0.35rem 0.7rem;
  font-size: 0.8rem;
  cursor: pointer;
  margin-bottom: 0.6rem;
}

/* Correção visual (paridade 1:1 com a Conta Geral) - mesmos valores de
   .email-center-detail-actions (css/email-center.css, ficheiro não
   alterado - reutilizado só como referência): os próprios botões
   passaram a usar as classes GLOBAIS .primary-button/.ghost-button
   (ver renderDetailActions(), js/simple-email-account.js - "Responder"
   primary, todos os outros ghost, nunca .danger-button, mesmo critério
   exato de computeActionBarForThread(), js/email-center.js) - esta
   regra só aplica a MESMA variante compacta que a Geral aplica a esses
   botões dentro da sua barra de ações (nunca o tamanho "normal", pensado
   para um botão isolado de página). */
.simple-email-detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.simple-email-detail-actions .ghost-button,
.simple-email-detail-actions .primary-button {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 40px;
  padding: 0 14px;
  font-size: 0.85rem;
  white-space: nowrap;
}

.simple-email-detail-actions .ghost-button:disabled,
.simple-email-detail-actions .primary-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.simple-email-detail-placeholder {
  color: #7c8b84;
  font-size: 0.85rem;
}

/* Correção visual - a Geral mostra o assunto como título do MODAL
   (els.detailSubject, sempre dentro de .modal-header h2,
   css/modals.css - nunca uma classe própria "detail-subject" na
   Geral). Valores copiados de .modal-header h2 (a única referência
   real que existe para "o assunto da conversa aberta") - mantido
   dentro do painel inline (nunca um modal, "Manter lista + detalhe"),
   por isso sem a margem/layout do cabeçalho do modal em si. */
.simple-email-detail-subject {
  margin: 0 0 12px;
  color: var(--color-ink);
  font-size: 1.55rem;
  font-weight: var(--font-weight-bold);
  word-break: break-word;
}

.simple-email-mark-read-warning {
  margin: 0 0 0.7rem;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  background: #fff0f0;
  border: 1px solid #e8a3a3;
  color: #7a1f1f;
  font-size: 0.8rem;
}

/* Correção visual (paridade 1:1) - .email-center-messages
   (css/email-center.css, ficheiro não alterado). */
.simple-email-messages {
  display: grid;
  gap: 14px;
}

/* Correção visual - mesmos valores de .email-center-message. */
.simple-email-message {
  display: grid;
  gap: 8px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  padding: 14px;
}

/* Mesmas cores exatas de .email-center-message-outbound (verde) e
   .email-center-message-inbound (neutro). */
.simple-email-message.is-outbound {
  background: #f3fbef;
  border-left: 3px solid var(--color-green);
}

.simple-email-message.is-inbound {
  background: #fbfcfa;
}

/* Mesma disposição de ".email-center-message header" - linha, nunca
   coluna, com o selo de direção + remetente à esquerda e a data
   empurrada para a direita (space-between), nunca cada campo na sua
   própria linha (forma antiga deste ficheiro). */
.simple-email-message-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

/* Selo "Enviada"/"Recebida" - mesmos valores de
   .email-center-message-direction-badge (pílula, nunca texto maiúsculo
   solto, forma antiga deste ficheiro). Cores próprias por direção,
   mesmas de .email-center-message-direction-badge-outbound/-inbound. */
.simple-email-message-direction {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.simple-email-message.is-outbound .simple-email-message-direction {
  background: rgba(79, 155, 37, 0.16);
  color: var(--color-green-strong);
}

.simple-email-message.is-inbound .simple-email-message-direction {
  background: rgba(64, 120, 192, 0.14);
  color: var(--color-blue);
}

/* Remetente - mesmo papel do <strong> dentro de "header" na Geral
   (color:var(--color-ink), sem tamanho/peso próprios - herda do
   elemento <strong> nativo). */
.simple-email-message-sender {
  color: var(--color-ink);
}

.simple-email-message-date {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.78rem;
  font-weight: var(--font-weight-normal);
  white-space: nowrap;
}

/* Assunto por mensagem - conteúdo próprio deste ficheiro, sem
   equivalente na Geral (que só mostra o assunto uma vez, no cabeçalho
   do modal - ver .simple-email-detail-subject acima); estilado com a
   mesma linguagem tipográfica discreta de .email-center-message-recipients
   (nunca inventada), para nunca destacar mais do que o remetente. */
.simple-email-message-subject {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.8rem;
  font-weight: var(--font-weight-normal);
  word-break: break-word;
}

/* Mesmos valores de .email-center-message-recipients/-replied-by. */
.simple-email-message-field {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.8rem;
  font-weight: var(--font-weight-normal);
  word-break: break-word;
}

.simple-email-message-body-wrapper {
  margin-top: 0.4rem;
}

/* Mesmos valores de .email-center-message-body. */
.simple-email-message-body {
  color: var(--color-ink);
  font-weight: var(--font-weight-normal);
  line-height: 1.5;
  font-size: 0.85rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.simple-email-message-body-empty {
  color: #7c8b84;
  font-style: italic;
}

/* body_html sanitizado (revisão "renderização segura de body_html/CID")
   - paridade visual com .email-center-message-body-html (css/email-center.css,
   consultado só como referência, nunca importado/alterado a partir
   daqui, mesmo princípio já usado em todo este ficheiro). Sobrepõe
   sempre white-space:pre-wrap de .simple-email-message-body acima (as
   duas classes convivem no mesmo elemento só quando há HTML real - a
   quebra de linha passa a vir do próprio HTML/CSS do email, nunca de
   \n literais) - por vir depois na cascata, nunca por especificidade.
   overflow-x:auto é só do CORPO da mensagem (nunca da página) - uma
   tabela larga de um email externo nunca provoca scroll horizontal do
   NEXIS inteiro. contain/isolation impedem um "style" perigoso do
   email (ex. position:fixed/absolute sobrevivente à sanitização) de
   escapar visualmente para fora deste cartão. */
.simple-email-message-body-html {
  white-space: normal;
  overflow-wrap: break-word;
  max-width: 100%;
  overflow-x: auto;
  contain: layout paint style;
  isolation: isolate;
}

.simple-email-message-body-html img {
  max-width: 100%;
  height: auto;
}

.simple-email-message-body-html table {
  max-width: 100%;
  border-collapse: collapse;
}

/* Paridade visual com a Conta Geral (revisão desta correção) -
   MESMOS valores exatos de .email-center-attachments/-item/-icon/-info/
   -name/-meta/-actions/-action (css/email-center.css, consultados só
   como referência, nunca importados/alterados a partir daqui) -
   replicados aqui, nunca partilhados entre os dois ficheiros, mesmo
   princípio já usado em todo este módulo. Bloco agora no TOPO do
   detalhe (buildDetailAttachmentsElement(), js/simple-email-account.js) -
   substitui a antiga lista de links no fim de cada mensagem, já não
   existe segunda lista de anexos nesta interface. */
.simple-email-attachments {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--color-line);
}

.simple-email-attachments-heading {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink);
}

.simple-email-attachments-list {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.simple-email-attachment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: #fbfcfa;
  padding: 10px 12px;
}

/* Ícone do tipo de ficheiro - SVG interno simples (ver
   buildSimpleEmailDetailAttachmentIcon(), js/simple-email-account.js),
   sem imagem externa. Tamanho fixo (flex-shrink:0) para o nome/meta ao
   lado continuarem a truncar em vez de encolher o ícone. */
.simple-email-attachment-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
}

.simple-email-attachment-icon svg {
  width: 22px;
  height: 22px;
}

/* min-width:0 explícito (nunca só herdado do flex pai) - mesmo motivo
   já documentado em .simple-email-thread-clickzone, acima neste
   ficheiro: sem isto, um nome de ficheiro comprido forçaria esta
   coluna (e o cartão inteiro) a alargar em vez de truncar, criando
   scroll horizontal no detalhe. */
.simple-email-attachment-info {
  display: grid;
  gap: 2px;
  min-width: 0;
}

/* Data + nome na mesma linha (revisão desta correção) - a data nunca
   fica perdida numa linha à parte, aparece sempre logo junto ao ícone,
   antes do nome. align-items:baseline alinha os dois pelo texto (mesmo
   princípio de .simple-email-message-header, acima). flex-wrap:wrap só
   como rede de segurança em colunas muito estreitas - nunca o caso
   normal. */
.simple-email-attachment-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

/* flex-shrink:0 - a data tem sempre um comprimento previsível
   (formatDateOnly(), "dd/mm/aaaa", sem hora de propósito - só a
   suficiente para situar cada anexo na troca de mensagens a que
   pertence) e nunca deve ser ela a encolher/truncar; é sempre o nome
   do ficheiro (variável, por vezes muito comprido) quem cede espaço
   primeiro. */
.simple-email-attachment-date {
  flex-shrink: 0;
  color: var(--color-muted);
  font-size: 0.72rem;
  font-weight: var(--font-weight-normal);
}

/* flex:1 1 auto + min-width:0 - o nome ocupa sempre o espaço restante
   da linha e é sempre ele a truncar com elipse quando comprido demais,
   nunca a data (fixa, acima) nem o cartão inteiro (mesmo motivo já
   documentado em .simple-email-thread-clickzone, acima neste ficheiro:
   sem min-width:0 aqui, um nome de ficheiro comprido forçaria esta
   linha - e o cartão inteiro - a alargar em vez de truncar, criando
   scroll horizontal no detalhe). Nome sempre visualmente prioritário
   (cor mais forte, peso maior) do que a data ao lado. */
.simple-email-attachment-name {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--color-ink);
  font-weight: var(--font-weight-medium);
  font-size: 0.88rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.simple-email-attachment-meta {
  color: var(--color-muted);
  font-size: 0.76rem;
  font-weight: var(--font-weight-normal);
}

.simple-email-attachment-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.simple-email-attachment-action {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}

/* "Mostrar anteriores (N)" / "Mostrar apenas os mais recentes" (revisão
   "organização final do bloco de anexos") - paridade visual com
   .email-center-attachments-controls (css/email-center.css, consultado
   só como referência, nunca importado a partir daqui, mesmo princípio
   já usado em todo este ficheiro); mesma linguagem visual dos restantes
   controlos do bloco (.ghost-button, já aplicado aos dois botões em
   buildDetailAttachmentsElement(), js/simple-email-account.js). */
.simple-email-attachments-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* --- Mobile/tablet: coluna única, alterna lista/detalhe --- */

@media (max-width: 1100px) {
  .simple-email-body {
    flex-direction: column;
  }

  .simple-email-list-column,
  .simple-email-detail {
    flex: 1 1 auto;
    max-width: 100%;
    width: 100%;
  }

  .simple-email-detail {
    max-height: none;
  }

  /* Por omissão (sem .is-detail-open) mostra-se só a lista; ao abrir
     uma conversa (openMobileDetail(), js/simple-email-account.js)
     mostra-se só o detalhe, com o botão "Voltar" - nunca scroll
     horizontal, nunca os dois lado a lado abaixo deste limiar. */
  .simple-email-body:not(.is-detail-open) .simple-email-detail {
    display: none;
  }

  .simple-email-body.is-detail-open .simple-email-list-column {
    display: none;
  }

  /* Fase 16 (secção 8 do pedido) - 6 vistas + "Pesquisa" já não cabem
     sempre numa só linha a partir daqui; scroll horizontal por swipe
     (mesmo princípio já usado por .email-center-quick-views,
     css/email-center.css, ficheiro não alterado - só a mesma ideia
     replicada aqui) em vez de quebra para várias linhas ou botões
     espremidos. */
  .simple-email-toolbar {
    justify-content: flex-start;
  }

  .simple-email-view-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.15rem;
  }

  .simple-email-view-tab {
    flex: 0 0 auto;
  }

  /* Barra de ações do detalhe (secção 4) - nunca sobreposta ao
     conteúdo da mensagem abaixo; quebra em várias linhas em vez de
     scroll (lista curta e fixa de botões, ao contrário das vistas
     acima). */
  .simple-email-detail-actions {
    flex-wrap: wrap;
  }
}

@media (max-width: 760px) {
  /* Uniformização de spacing mobile (causa #2) - distância vertical
     entre a barra de vistas (.simple-email-toolbar) e o primeiro
     cartão da lista. Esta conta nunca tinha reduzido o gap de 0.9rem
     (14.4px) abaixo de 1101px (só a paridade desktop, regra acima,
     tinha sido feita) - ao contrário da Conta Geral, cujo
     --email-center-block-gap (css/email-center.css,
     [data-email-emails-section]/.email-center-layout, ficheiro não
     alterado) já reduz para 6px dentro do mesmo breakpoint mobile.
     Resultado: 14.4px (Financeiro/Rui) contra 6px (Geral) até à borda
     da lista - e como .simple-email-list/.email-center-list têm o
     MESMO padding interno (12px, cartões da Fase 3, nunca tocados), a
     distância total até ao primeiro cartão diferia em 8.4px. 6px é o
     valor já em vigor no mesmo papel na Geral (nunca inventado aqui) -
     nunca toca no cartão em si (continua exatamente como em f861b55,
     mesma classe/regra de sempre para a lista e para cada item dela)
     nem no espaçamento vertical DENTRO de .simple-email-body (lista
     vs. detalhe, gap:1rem, regra base, nunca tocada) - só a distância
     ATÉ ao corpo muda. */
  .simple-email-workspace {
    gap: 6px;
  }

  /* Fase 1 mobile (correção final, secções 2-4 do pedido) - primeira
     faixa do cabeçalho: .email-center-hero-tabs (Geral/Financeiro/Rui/
     Contactos, css/email-center.css, ficheiro não alterado - flex:1,
     única linha deslizável) e esta caixa partilham agora a mesma linha
     (.email-center-hero, css/email-center.css, também não alterado
     além do necessário para virar flex-direction:row neste
     breakpoint). "Novo email" já saiu daqui (JS, ver
     syncMobileToolbarActionsPosition()) - só o "↻ Atualizar" desta
     conta fica, sempre fora do scroll das contas, nunca encolhido.
     display:contents (hotfix "primeira faixa mais estreita do que a
     linha inferior", css/email-center.css, mesmo tratamento e mesmo
     motivo dado aí a .email-center-hero-actions/.email-center-hero-tabs) -
     sem caixa própria, o filho direto desta div
     (.simple-email-refresh-control, único filho realmente visível
     neste breakpoint) passa a item de flex direto de
     .email-center-hero (partilhado, css/email-center.css, agora
     justify-content:space-between nesse breakpoint), ao lado dos
     botões de .email-center-hero-tabs (Geral/Financeiro/Rui/
     Contactos) - só assim o espaço fica distribuído por igual entre
     TODOS os controlos, nunca só entre "as tabs" e "as ações". Sem
     aria-label/role própria nesta div (index.html) - nada a
     preservar aqui. */
  .simple-email-hero-actions {
    display: contents;
  }

  /* flex-shrink:0 (novo aqui) - mudou-se de .simple-email-hero-actions
     (acima, agora display:contents) para este elemento, que passa a
     ser o item de flex real que representa "↻ Atualizar" desta conta
     na linha; mesmo comportamento de sempre, nunca encolhe (só as
     tabs cedem espaço primeiro). */
  .simple-email-refresh-control {
    flex-shrink: 0;
    flex-wrap: nowrap;
    gap: 0;
  }

  /* Uniformização de spacing mobile (causa #3) - este botão nunca
     tinha largura mínima própria (ao contrário do equivalente da
     Geral, data-email-refresh/.email-center-refresh-button,
     css/email-center.css, que já usa min-width:118px na sua regra
     base - valor calibrado para nunca saltar de largura entre
     "↻ Atualizar" e outros estados). Sem ela, a largura real deste
     botão variava com o texto exato ("↻ Atualizar" antes da primeira
     sincronização, mais estreito depois com "↻ HH:MM"/"↻ Erro") - e
     como .email-center-hero-tabs (ficheiro não alterado, elemento
     partilhado entre Geral/Financeiro/Rui) cresce (flex:1) para
     preencher o espaço que esta caixa não ocupa, a distância visível
     entre "Contactos" e este botão variava com o estado real da
     sincronização desta conta, nunca igual à Geral. Mesmo valor
     exato (118px, nunca inventado aqui) - nunca toca no
     handler/endpoint/sincronização IMAP nem no texto mostrado. */
  [data-simple-email-refresh] {
    min-width: 118px;
  }

  /* O estado/erro textual ao lado do botão passa a viver DENTRO do
     próprio botão (texto compacto "↻ HH:MM"/"↻ Erro" + aria-label/
     title completos - ver renderRefreshStatus(),
     js/simple-email-account.js); os elementos originais continuam a
     existir e a ser atualizados (nunca alterada a lógica), só deixam
     de ocupar espaço visual aqui, para nunca sobrar uma linha vazia. */
  .simple-email-refresh-status,
  .simple-email-refresh-error {
    display: none;
  }

  /* "Novo email" (nunca "+ Novo email") só aqui - retira só o símbolo
     decorativo (span próprio, index.html), nunca o texto/handler do
     botão (data-simple-email-new-email, inalterado). Mesmo princípio
     de .email-center-new-email-plus (css/email-center.css, ficheiro
     não alterado). Desktop/tablet continuam a mostrar "+ Novo email". */
  .simple-email-new-email-plus {
    display: none;
  }

  /* Segunda faixa (secção 8 do pedido) - "Novo email" (primeiro,
     reanexado por JS, sempre o mesmo nó) + Caixa de entrada/Não lidos/
     Enviados/Arquivados/Lixo + "Pesquisa" (já nascia como último
     filho, ver index.html - nunca precisou de ser movida) todos na
     MESMA linha deslizável, com o MESMO scroll horizontal (nunca dois
     scrolls encaixados). */
  /* Hotfix visual mobile - remove o cartão branco exterior (border/
     border-radius/background/box-shadow/padding:12px herdados da regra
     base, iguais byte a byte aos de .page-tabs) para ficar visualmente
     como .email-center-quick-views (Email Geral, css/email-center.css,
     mesmo tratamento mobile) - botões diretamente sobre o fundo da
     página, só um traço inferior como separador. Scrollbar nativa
     escondida (scrollbar-width/::-webkit-scrollbar), mesma técnica já
     usada em .email-center-hero-tabs/.email-center-quick-views. */
  .simple-email-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding: 8px 10px;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--color-line);
    background: transparent;
    box-shadow: none;
    scrollbar-width: none;
  }

  .simple-email-toolbar::-webkit-scrollbar {
    display: none;
  }

  /* O scroll próprio de .simple-email-view-tabs (herdado de
     @media max-width:1100px, acima) passaria a competir com o scroll
     de .simple-email-toolbar, acima - cancelado só aqui: com
     flex-wrap:nowrap já herdado, os 5 botões continuam numa única
     linha, agora só dentro do scroll do contentor pai.
     Causa real do "Pesquisa" sobreposto (auditoria desta correção) -
     .simple-email-view-tabs tem min-width:0 na regra base (necessário
     para não forçar overflow horizontal da própria página, ver
     comentário nessa regra) mas NUNCA tinha flex-shrink:0 - ficava o
     único item encolhível desta linha (Novo email/Pesquisa já são
     flex:0 0 auto, mais abaixo). Com overflow-x:visible (acima, só
     desde esta fase), quando não havia espaço para as 6 vistas + Novo
     email + Pesquisa ao mesmo tempo, o algoritmo de flex encolhia esta
     caixa (nunca os seus botões, que continuam flex:0 0 auto) - o
     conteúdo passava a exceder a caixa já encolhida e, sem overflow
     próprio para o conter, "vazava" visualmente por cima do próximo
     irmão do mesmo flex row (.simple-email-search-toggle, a seguir no
     DOM) em vez de scrollar em conjunto com ele. flex-shrink:0 nunca
     deixa esta caixa encolher - o comprimento total da linha passa a
     ser sempre a soma real dos 3 grupos (Novo email + vistas +
     Pesquisa), scrollado como um todo só por .simple-email-toolbar
     (overflow-x:auto), nunca por partes. */
  .simple-email-view-tabs {
    overflow-x: visible;
    flex-shrink: 0;
  }

  /* "Caixa de entrada" -> "Cx. entrada" só aqui - mesmo princípio de
     .email-center-quick-view-label-full/-mobile (Email Geral,
     css/email-center.css), nunca essas classes em si (regra base,
     acima). */
  .simple-email-view-tab-label-full {
    display: none;
  }

  .simple-email-view-tab-label-mobile {
    display: inline;
  }

  .simple-email-toolbar [data-simple-email-new-email],
  .simple-email-search-toggle {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Uniformização "Novo email" com a Conta Geral (hotfix visual) - a
     versão mobile do botão equivalente da Geral (.email-center-quick-views
     [data-email-new-email], css/email-center.css) herda min-height:46px
     de ".page-tabs button" (css/page-layout.css, especificidade 0-1-1,
     vence sobre ".primary-button" sozinho, 0-1-0) porque
     .email-center-quick-views tem também a classe partilhada
     "page-tabs"; .simple-email-toolbar nunca teve essa classe (isolamento
     total deste módulo, ver topo do ficheiro), por isso este botão
     (mesma classe .primary-button, index.html) ficava só com os 42px
     do bloco partilhado .icon-button/.ghost-button/.primary-button
     (css/header.css) - 4px mais baixo, visivelmente mais pequeno do que
     o da Geral. Reafirma aqui só min-height (nunca cor/padding/
     border-radius/font - já coincidem byte a byte entre as duas regras
     de origem, nada a corrigir); handler/composer/permissões/posição/
     texto do botão inalterados. */
  .simple-email-toolbar [data-simple-email-new-email] {
    min-height: 46px;
  }
}

/* Fase 2 mobile (Financeiro/Rui) - remetente e assunto ficam sempre
   numa única linha, truncados com reticências em vez de quebrar
   (pedido explícito desta fase; buildThreadCard(),
   js/simple-email-account.js, nunca tocado - o texto real/dados nunca
   mudam, só a apresentação). Mesmo princípio já usado acima de
   1101px para o assunto (regra "Assunto sempre numa única linha",
   @media min-width:1101px) - esta regra só estende o mesmo
   comportamento ao mobile (nunca ao tablet, 761-1100px, fora do
   âmbito desta fase).
   .simple-email-thread-party já tem flex:1 1 auto + min-width:0
   (regra base, .simple-email-thread-top acima) - condição necessária
   para um item de flex ROW truncar em vez de alargar o contentor,
   por isso basta acrescentar aqui as 3 propriedades de corte.
   .simple-email-thread-subject vive dentro de .simple-email-thread-
   clickzone (flex-direction:column - eixo principal vertical, nunca
   sofre do "conteúdo mínimo" que obriga a min-width:0 num flex em
   linha), por isso não precisa de min-width:0 aqui, mesmo princípio
   já usado na regra de 1101px acima.
   .simple-email-thread-meta (data/hora) já vive na mesma linha que o
   remetente (.simple-email-thread-top, flex, gap:10px) com
   flex-shrink:0 + white-space:nowrap (regra base, nunca tocada) -
   por isso nunca é empurrada para fora quando o remetente trunca. */
@media (max-width: 760px) {
  .simple-email-thread-party {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .simple-email-thread-subject {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Compactação estrutural do cartão em mobile (Financeiro/Rui, pedido
   explícito de reduzir ~60% do whitespace interno SEM alterar
   font-size/font-weight/line-height/border/cores/ellipsis/botões).
   ESCOPADA a max-width:760px - nunca toca no tablet (761-1100px, que
   continua a herdar a regra base abaixo, inalterada: gap:6px;
   padding:13px) nem no desktop (>=1101px, já tem o seu próprio
   override acima, também inalterado: gap:4px; padding:9px 13px).
   Valores medidos na regra base (.simple-email-thread-card/
   .simple-email-thread-clickzone, mais acima neste ficheiro, fora de
   qualquer @media): gap 6px -> 2px (~33% do original) e padding 13px
   -> 5px (~38% do original) - ambos dentro do alvo pedido (~40% do
   valor atual, nunca mais). Nunca toca na linha remetente/data (gap
   horizontal entre os dois, não contribui para a altura do cartão),
   nem no grupo Arquivar/Lixo (gap horizontal à volta desses botões -
   já fica visualmente mais próximo do resto do cartão só com a
   redução do gap/padding acima, sem precisar de reduzir esse valor
   próprio) - a réplica visual do botão em si (altura/padding
   interno/border-radius/font-size) também fica fora deste bloco, só o
   espaço à volta dele diminui. O espaçamento entre cartões da lista
   também fica fora do âmbito desta fase - só o espaço estrutural
   DENTRO de cada cartão muda. A Conta Geral usa uma classe própria e
   independente (css/email-center.css), nunca partilha seletor com
   este ficheiro - esta alteração nunca chega lá. */
@media (max-width: 760px) {
  .simple-email-thread-card {
    gap: 2px;
    padding: 5px;
  }

  .simple-email-thread-clickzone {
    gap: 2px;
  }
}

/* Compactação do grupo Arquivar/Lixo em mobile (2a fase, sobre a
   compactação do cartão acima) - pedido explícito de baixar ainda
   mais a altura total do cartão, reduzindo só a "caixa" do botão em
   si (altura mínima/espaçamento interno), NUNCA o texto (tamanho e
   peso da fonte continuam exatamente os mesmos de sempre) nem o
   resto do botão (cor, moldura, forma arredondada, handler/ação -
   tudo fora deste bloco). Também ESCOPADA a max-width:760px -
   tablet/desktop continuam com a regra base acima (altura mínima de
   32px, espaçamento 5px/10px), inalterada.
   Cálculo (nunca aplicado às cegas): a altura de uma linha de texto
   deste botão (herdando o line-height 1.5 do body sobre o tamanho de
   fonte próprio, nunca alterado aqui) ronda os 18,2px; somando a
   moldura (2px, topo+fundo) e o novo espaçamento interno vertical
   (6px, 3px de cada lado) o mínimo necessário para nunca cortar o
   texto ronda os 26,2px - a altura mínima escolhida fica logo acima
   desse valor (a menor opção segura dentro do alvo pedido de 26 a
   28px), nunca abaixo.
   O espaço horizontal entre os dois botões (sempre o mesmo grupo de
   ações do rodapé) e o resto do rodapé do cartão (indicador de
   anexos, alinhamento) ficam fora deste bloco - nenhum dos dois
   contribui para a altura do cartão, por isso não precisaram de ser
   reduzidos para este objetivo. */
@media (max-width: 760px) {
  .simple-email-quick-btn {
    min-height: 27px;
    padding: 3px 7px;
  }
}

@media (min-width: 1101px) {
  /* Acima do limiar de desktop, lista e detalhe estão SEMPRE lado a
     lado - o botão "Voltar" nunca é necessário nem visível aqui,
     independentemente do estado is-detail-open (que só existe para o
     layout em coluna). */
  .simple-email-detail-back {
    display: none !important;
  }
}

/* --- Compositor "Novo email" (Fase 17B) ---
   .modal/.modal-backdrop/.modal-dialog/.modal-header/.form-grid/.field/
   .modal-footer vêm sempre de css/modals.css (infraestrutura GENÉRICA e
   partilhada por toda a aplicação - Documentos, Automower, Recursos
   Humanos, etc., nunca exclusiva da Conta Geral) - incluindo já a
   correção .modal[hidden]{display:none} desse ficheiro, por isso este
   compositor NUNCA precisa de repetir a correção de especificidade
   [hidden] documentada mais acima neste ficheiro (esse problema é
   específico de classes deste módulo que também definem "display"
   próprio - .modal não o faz da mesma forma problemática, já resolvido
   uma única vez em modals.css para todos os modais do NEXIS). Só as
   classes própias abaixo (simple-email-compose-*) são deste ficheiro. */

.simple-email-compose-attachments-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.simple-email-compose-attachment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  border: 1px solid rgba(15, 76, 58, 0.15);
  border-radius: 8px;
  padding: 0.35rem 0.6rem;
  background: #fbfdfc;
}

.simple-email-compose-attachment-name {
  font-size: 0.82rem;
  color: #1f2d27;
  word-break: break-word;
}

.simple-email-compose-error {
  margin: 0;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  background: #fdecea;
  color: #a7332f;
  font-size: 0.84rem;
  font-weight: 600;
}

.simple-email-compose-success {
  margin: 0;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  background: #eaf5ef;
  color: #0f4c3a;
  font-size: 0.84rem;
  font-weight: 600;
}

/* --- Fase 18 - modos "Responder"/"Reencaminhar" do compositor partilhado --- */

/* "Para" em modo "Responder" - nunca editável (o destinatário é sempre
   derivado no servidor, ver openComposeModal()/api/simple-email/reply.php) -
   mesma aparência "bloqueado" já usada em .field select.field-locked
   (css/modals.css), aqui aplicada via :read-only nativo (nunca uma
   classe própria - o próprio atributo já basta, sempre em sincronia com
   o JS que o define). */
[data-simple-email-compose-to]:read-only {
  background: var(--color-soft, #f3f5f4);
  color: var(--color-muted, #5b6b64);
  cursor: default;
}

/* Fase 20 - sugestões de Contactos NEXIS em Para/Cc (composer próprio,
   ver index.html/js/simple-email-account.js) - paridade visual 1:1 com
   .email-center-recipient-suggestions* (css/email-center.css, consultado
   só como referência dos valores, nunca partilhado/alterado) - mesmos
   tokens verdes (paridade com a Geral, a cor roxa do ponto 2 é exclusiva
   do botão do separador ativo, nunca aqui). */
.simple-email-recipient-field {
  position: relative;
}

.simple-email-recipient-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 5;
  width: 100%;
  max-width: 100%;
  max-height: 240px;
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  gap: 2px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(3, 18, 15, 0.2);
  padding: 6px;
}

.simple-email-recipient-suggestions[hidden] {
  display: none;
}

.simple-email-recipient-suggestion {
  display: grid;
  gap: 1px;
  min-width: 0;
  width: 100%;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-ink);
  font: inherit;
  text-align: left;
  padding: 7px 10px;
  cursor: pointer;
}

.simple-email-recipient-suggestion:hover,
.simple-email-recipient-suggestion.is-highlighted {
  background: #edf8e7;
}

.simple-email-recipient-suggestion:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: -2px;
}

.simple-email-recipient-suggestion-name {
  font-weight: var(--font-weight-medium);
  font-size: 0.86rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.simple-email-recipient-suggestion-email {
  color: var(--color-muted);
  font-size: 0.78rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.simple-email-recipient-suggestion-entity {
  color: var(--color-muted);
  font-size: 0.76rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.simple-email-recipient-suggestions-empty {
  margin: 0;
  padding: 8px 10px;
  color: var(--color-muted);
  font-size: 0.82rem;
  text-align: center;
}

/* Fase 20, ponto 2 - "Email Financeiro"/"Email Rui" ativos no separador
   do topo (.email-center-hero-tabs, css/email-center.css, consultado só
   como referência) ficam roxo/violeta em vez do verde partilhado -
   único botão afetado (data-simple-email-switcher-tab, ver
   renderSwitcher(), js/simple-email-account.js); "Email Geral" continua
   .email-center-hero-tabs button[data-email-section-tab].is-active,
   nunca tocado por este seletor. Reutiliza só tokens já existentes
   (--color-violet e os mesmos valores já usados em
   .email-center-badge-knowledge, css/email-center.css) - nenhuma cor
   nova. :hover/:focus-visible próprios para nunca reverter ao verde
   partilhado de button:hover/:focus-visible (css/email-center.css)
   enquanto o botão está ativo. */
.email-center-hero-tabs button[data-simple-email-switcher-tab].is-active {
  border-color: var(--color-violet);
  background: #efe8f8;
  color: #5b3f91;
  font-weight: var(--font-weight-semibold);
}

.email-center-hero-tabs button[data-simple-email-switcher-tab].is-active:hover,
.email-center-hero-tabs button[data-simple-email-switcher-tab].is-active:focus-visible {
  border-color: var(--color-violet);
  background: #efe8f8;
  color: #5b3f91;
}

.email-center-hero-tabs button[data-simple-email-switcher-tab].is-active:focus-visible {
  outline: 2px solid var(--color-violet);
}

.simple-email-compose-original-attachments-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

.simple-email-compose-original-attachment-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: #1f2d27;
  cursor: pointer;
}

/* Correção visual (paridade 1:1) - os botões da barra de ações
   (Responder/Reencaminhar/Arquivar/Lixo/Marcar como não lido/Restaurar)
   passaram a usar diretamente as classes GLOBAIS .ghost-button/
   .primary-button (ver renderDetailActions(), js/simple-email-account.js)
   - cursor/hover/focus-visible/estado desativado vêm todos sempre
   dessas classes partilhadas (css/header.css), nunca redefinidos aqui;
   a Geral também não tem nenhum :hover próprio para
   .email-center-detail-actions .ghost-button/.primary-button (só o
   :focus-visible global) - nenhuma regra própria é necessária ou
   desejável aqui. */

/* Botão de pré-visualização (👁) nos itens de anexo do compositor
   partilhado - anexos NOVOS (simple-email-compose-attachment-item) e
   anexos ORIGINAIS reencaminháveis (simple-email-compose-original-
   attachment-item), ver renderComposeAttachments()/
   renderComposeOriginalAttachments(), js/simple-email-account.js. Só o
   suficiente para os itens caberem um botão extra ao lado do nome/
   checkbox - .icon-button em si já vem inteiro de css/header.css,
   partilhado por toda a aplicação, nunca redefinido aqui. */
.simple-email-compose-attachment-item {
  justify-content: flex-start;
}

.simple-email-compose-attachment-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.simple-email-compose-original-attachment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.simple-email-compose-original-attachment-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
  color: #1f2d27;
  cursor: pointer;
}

.simple-email-compose-original-attachment-label span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Pré-visualização de anexos do compositor partilhado (modal próprio,
   isolado - nunca .email-center-attachment-preview-* da Conta Geral,
   css/email-center.css, consultado só como referência dos valores) -
   .modal/.modal-dialog/.modal-header de css/modals.css tratam já do
   posicionamento, fundo e responsividade base; aqui só o suficiente
   para o corpo (PDF/imagem/mensagem "não disponível") ocupar bem o
   espaço, sem nenhum scroll horizontal. Paridade visual 1:1 com os
   valores de .email-center-attachment-preview-* (mesma experiência
   visual pedida), nunca a mesma folha de estilo nem o mesmo nó do DOM. */
.simple-email-attachment-preview-dialog {
  width: min(760px, 100%);
  display: flex;
  flex-direction: column;
}

.simple-email-attachment-preview-meta {
  margin: 2px 0 0;
  color: var(--color-muted, #5b6b64);
  font-size: 0.85rem;
  font-weight: 400;
}

.simple-email-attachment-preview-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  max-width: 100%;
  overflow: auto;
  border: 1px solid var(--color-line, rgba(15, 76, 58, 0.15));
  border-radius: var(--radius-sm, 8px);
  background: #f4f6f2;
}

.simple-email-attachment-preview-frame {
  width: 100%;
  height: min(75vh, 720px);
  border: 0;
}

.simple-email-attachment-preview-image {
  display: block;
  max-width: 100%;
  max-height: min(75vh, 720px);
  object-fit: contain;
}

.simple-email-attachment-preview-body p {
  padding: 32px 18px;
  text-align: center;
  margin: 0;
  color: #5b6b64;
}

/* Aumenta o preview de anexos apenas em desktop largo (≥1101px), mesma
   dimensão da Conta Geral (email-center.css) - seletor composto sobrepõe
   os limites de .modal-dialog definidos em modals.css, sem afetar
   tablet/mobile. */
@media (min-width: 1101px) {
  .modal-dialog.simple-email-attachment-preview-dialog {
    box-sizing: border-box;
    width: min(78vw, 1200px);
    height: min(88vh, calc(100vh - 44px), 1000px);
    max-height: min(88vh, calc(100vh - 44px), 1000px);
  }

  .simple-email-attachment-preview-dialog .simple-email-attachment-preview-body {
    flex: 1 1 auto;
    min-height: 0;
  }

  .simple-email-attachment-preview-dialog .simple-email-attachment-preview-frame {
    height: 100%;
  }

  .simple-email-attachment-preview-dialog .simple-email-attachment-preview-image {
    max-height: 100%;
  }
}

@media (max-width: 760px) {
  /* Ocupa quase todo o ecrã em mobile, mantendo sempre o botão fechar
     visível no cabeçalho - mesmo princípio de
     .email-center-attachment-preview-dialog (css/email-center.css). */
  .simple-email-attachment-preview-dialog {
    width: 100%;
    max-height: calc(100vh - 24px - var(--mobile-safe-top, 0px) - var(--mobile-safe-bottom, 0px));
    max-height: calc(100svh - 24px - var(--mobile-safe-top, 0px) - var(--mobile-safe-bottom, 0px));
    max-height: calc(100dvh - 24px - var(--mobile-safe-top, 0px) - var(--mobile-safe-bottom, 0px));
  }

  .simple-email-attachment-preview-dialog .modal-header {
    position: sticky;
    top: 0;
    background: #ffffff;
    z-index: 1;
  }

  .simple-email-attachment-preview-frame,
  .simple-email-attachment-preview-image {
    height: min(65vh, 640px);
    max-height: min(65vh, 640px);
  }
}