/* Inbox de Mensagens (§2.2 / §2.4-A) — mestre-detalhe.
   Sistema visual: superfícies brancas com tarja dourada de 3px no topo,
   cantos 2px, Playfair Display só no título, Lato no resto. */

.mens-inbox h1 {
  font-family: var(--fonte-serif);
  color: var(--cor-texto);
  margin: 0 0 12px;
}

/* Filtros do topo da lista (§2.4-A). Entre os CONTROLOS do inbox o dourado
   preenchido fica reservado ao CTA "+ Nova mensagem" (Task 11) — o activo
   marca-se por peso de fonte e `aria-pressed`, nunca por um segundo dourado
   sólido. A regra é sobre controlos concorrentes, não sobre indicadores: o
   contador de não lidas é dourado por precedente do produto
   (.topbar-sino-contagem, base.css). */
.mens-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.mens-filtro {
  padding: 6px 12px;
  border: 1px solid var(--cor-borda);
  border-radius: 2px;
  background: var(--cor-superficie);
  color: var(--cor-texto-secundario);
  font-size: 13px;
  cursor: pointer;
}

.mens-filtro:hover {
  background: var(--cor-fundo);
}

.mens-filtro[aria-pressed="true"] {
  border-color: var(--cor-borda-forte);
  color: var(--cor-texto);
  font-weight: 700;
}

.mens-inbox-corpo {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.mens-inbox-lista {
  flex: 0 0 340px;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  background: var(--cor-superficie);
  border-top: 3px solid var(--gold);
  border-radius: var(--raio-borda);
  box-shadow: var(--sombra);
}

.mens-inbox-linha {
  padding: 12px 14px;
  border-bottom: 1px solid var(--cor-borda);
  border-left: 2px solid transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mens-inbox-linha:last-child {
  border-bottom: 0;
}

/* Marca de leitura à esquerda em vez de fundo colorido: o hover já usa o
   cream, e um segundo fundo competiria com ele. */
.mens-inbox-linha:hover {
  background: var(--cor-fundo);
  border-left-color: var(--gold);
}

/* Nome e contador na mesma linha, contador encostado à direita. Sem isto o
   contador era filho directo da coluna flex e esticava-se à largura toda —
   uma barra dourada onde devia estar uma pílula (visto no harness). */
.mens-inbox-linha-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mens-inbox-linha-nome {
  font-size: 14px;
  color: var(--cor-texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Uma linha só: o excerto é uma pista, não a mensagem. Linhas de altura
   variável tornavam a lista impossível de percorrer com o olho. */
.mens-inbox-linha-preview {
  font-size: 13px;
  color: var(--cor-texto-secundario);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mens-inbox-linha-rodape {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.mens-inbox-linha-rodape em {
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cor-aviso);
}

/* Acção secundária dentro de uma linha clicável: discreta por omissão,
   revela-se ao aproximar. Nunca dourado preenchido — esse fica para o CTA
   "+ Nova mensagem". */
button.mens-inbox-atribuir {
  padding: 3px 9px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: 2px;
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font-family: inherit;
  font-size: 11px;
  line-height: 1.4;
  cursor: pointer;
}

button.mens-inbox-atribuir:hover {
  border-color: var(--gold);
  color: var(--navy);
}

/* O número tem de ser visível (não só a cor) — leitores de ecrã e quem não
   distingue a cor precisam do mesmo sinal (revisão final, achado 6).
   Dourado com texto navy e pílula de 999px: é o precedente do produto para
   contadores (.topbar-sino-contagem em base.css, visível na topbar ao mesmo
   tempo que o inbox; financeiro.css usa o mesmo). Dois contadores com cores
   diferentes no mesmo ecrã seria incoerência, não hierarquia. */
.mens-inbox-nao-lida {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--navy);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* Aviso legível de erro nas vias assíncronas do inbox (achado 3) — nunca
   silencioso, sempre com hipótese de repetir. */
.mens-erro {
  color: var(--cor-perigo, #a3261e);
  font-size: 13px;
  margin: 8px 0;
}

/* Erro do composer (resposta individual e envio em lote). Mesma cor de
   perigo de `.mens-erro`: um envio em lote falhado pode significar mensagens
   não entregues a pacientes — nunca pode aparecer como texto normal. Vazio
   não ocupa espaço (o `<p role="alert">` vive sempre no DOM). */
.mens-composer-erro {
  color: var(--cor-perigo, #a3261e);
  font-size: 13px;
  margin: 8px 0 0;
}

.mens-composer-erro:empty {
  display: none;
}

.mens-erro button {
  margin-left: 8px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: 2px;
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font-size: 12px;
  padding: 3px 8px;
  cursor: pointer;
}

.mens-inbox-conversa {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  max-width: 780px;
  max-height: calc(100vh - 220px);
  min-height: 200px;
  background: var(--cor-superficie);
  border-top: 3px solid var(--gold);
  border-radius: var(--raio-borda);
  box-shadow: var(--sombra);
  padding: 16px;
}

.mens-conversa-cabecalho {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--cor-borda);
  padding-bottom: 10px;
  margin-bottom: 12px;
}

.mens-conversa-cabecalho h2 {
  font-family: var(--fonte-serif);
  color: var(--cor-texto);
  margin: 0;
  font-size: 20px;
}

.mens-conversa-estado {
  font-size: 13px;
  color: var(--cor-texto-secundario);
  margin-right: auto;
}

/* Menu de acções (`···`) — Arquivar vive aqui, nunca solto na lista
   (§2.4-A). Sem dourado preenchido: essa superfície fica reservada ao CTA
   "+ Nova mensagem" (Task 11). */
.mens-conversa-acoes {
  position: relative;
}

.mens-conversa-acoes-gatilho {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 2px;
  background: none;
  color: var(--cor-texto-secundario);
  cursor: pointer;
  font-size: 16px;
}

.mens-conversa-acoes-gatilho:hover,
.mens-conversa-acoes-gatilho[aria-expanded="true"] {
  background: var(--cor-fundo);
  border-color: var(--cor-borda);
}

.mens-conversa-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 5;
  min-width: 160px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: 2px;
  box-shadow: var(--sombra);
  padding: 4px;
}

.mens-conversa-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 0;
  background: none;
  color: var(--cor-texto);
  font-size: 13px;
  cursor: pointer;
  border-radius: 2px;
}

.mens-conversa-menu button:hover {
  background: var(--cor-fundo);
}

.mens-conversa-fio {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}

/* Preso ao rodapé da coluna da conversa, nunca ao viewport (spec §2.4-A). O
   dourado preenchido desta superfície fica reservado ao CTA "+ Nova
   mensagem" (Task 11) — o botão de enviar não compete com ele. */
.mens-composer {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--cor-borda);
}

.mens-composer-campo {
  flex: 1 1 auto;
  resize: none;
  /* Crescimento visível até 4 linhas por CSS puro (spec §2.4-A), nunca por
     medição de `scrollHeight` em JS: `field-sizing: content` deixa a caixa
     seguir o conteúdo, `max-height` trava-a em ~4 linhas e passa a scroll
     interno a partir daí. Sem suporte (Safari/Firefox nesta data), cai no
     fallback `min-height` de 3 linhas fixas — pior que crescer, mas ainda
     utilizável, nunca a caixa de 1 linha que ficava antes. */
  min-height: 3.6em;
  max-height: 5.2em;
  field-sizing: content;
  padding: 8px 10px;
  border: 1px solid var(--cor-borda);
  border-radius: 2px;
  font-family: var(--fonte-sans, inherit);
  color: var(--cor-texto);
  background: #ffffff;
}

.mens-composer-rodape {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.mens-composer-contador {
  font-size: 11px;
  color: var(--cor-texto-secundario);
  white-space: nowrap;
}

.mens-composer-enviar {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cor-borda-forte);
  border-radius: 2px;
  background: var(--cor-superficie);
  color: var(--navy);
  cursor: pointer;
  font-size: 18px;
}

.mens-composer-enviar:hover {
  background: var(--cor-fundo);
}

.mens-composer-enviar:disabled {
  opacity: 0.5;
  cursor: default;
}

.mens-balao {
  max-width: 80%;
  padding: 8px 12px;
  border-radius: var(--raio-borda);
  /* `--cor-borda` (navy a 12%), não `--navy` cheio: a Regra da Borda-Navy do
     DESIGN.md manda navy semi-transparente. A força total lia-se como
     contorno preto no balão do paciente (fundo branco) enquanto o da clínica
     (fundo cream) parecia suave — dois pesos para a mesma borda. */
  border: 1px solid var(--cor-borda);
}

/* A cor nunca é o único diferenciador: cada balão também leva o rótulo
   textual "Clínica"/"Você" (ver .mens-balao-rotulo). */
.mens-balao-clinica {
  align-self: flex-end;
  background: rgba(191,164,95,0.12);
  border-color: var(--cor-borda-forte);
}

.mens-balao-paciente {
  align-self: flex-start;
  background: #ffffff;
}

.mens-balao-rotulo {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cor-texto-secundario);
  margin-bottom: 2px;
}

.mens-balao p {
  margin: 0;
  color: var(--cor-texto);
}

.mens-carregando {
  color: var(--cor-texto-secundario);
}

/* Só visível abaixo de 768px (ver media query) — devolve à lista sem a
   destruir, por isso a posição de scroll sobrevive. */
.mens-conversa-voltar {
  display: none;
  align-items: center;
  gap: 4px;
  margin-bottom: 12px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cor-texto-secundario);
  font-size: 13px;
  cursor: pointer;
}

@media (max-width: 1023px) {
  .mens-inbox-lista {
    flex-basis: 280px;
  }
}

@media (max-width: 767px) {
  /* Ecrãs consecutivos (spec §2.4-A): lista e conversa nunca visíveis ao
     mesmo tempo. Por omissão mostra a lista; `.mens-inbox-corpo--conversa-
     aberta` (aplicada por inbox.js ao abrir uma conversa) troca para o fio. */
  .mens-inbox-corpo {
    display: block;
    position: relative;
  }
  .mens-inbox-lista,
  .mens-inbox-conversa {
    max-width: none;
    max-height: none;
  }
  .mens-inbox-conversa {
    display: none;
  }
  .mens-conversa-voltar {
    display: inline-flex;
  }
  .mens-inbox-corpo--conversa-aberta .mens-inbox-lista {
    display: none;
  }
  .mens-inbox-corpo--conversa-aberta .mens-inbox-conversa {
    display: block;
  }
}

/* ─── Nova mensagem (§2.4-B) ──────────────────────────────────────────────
   O HTML desta página existia desde o início sem uma única linha de CSS: em
   produção o cliente não conseguiu sequer encontrar o campo de busca de
   paciente, logo nunca seleccionou ninguém, logo "Enviar" nunca activou.
   Mesma classe de falha do .portal-oculto (HTML sem CSS) — por isso há agora
   um teste que lê esta folha do disco e falha se um destes blocos ficar sem
   regra (nova_mensagem.test.mjs).

   Sistema visual: superfície branca com tarja dourada de 3px no topo, cantos
   2px, Playfair só no título, Lato no resto. O único dourado preenchido da
   página é o botão "Enviar" (.btn-primario, componentes.css) quando activo —
   nenhum outro elemento aqui compete com ele. */
.mens-nova {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 780px;
  padding: 20px 22px 22px;
  background: var(--cor-superficie);
  border-top: 3px solid var(--gold);
  border-radius: var(--raio-borda);
  box-shadow: var(--sombra);
}

.mens-nova header {
  border-bottom: 1px solid var(--cor-borda);
  padding-bottom: 10px;
}

.mens-nova h1 {
  font-family: var(--fonte-serif);
  color: var(--cor-texto);
  font-size: 22px;
  margin: 0;
}

.mens-nova [data-bloco="busca"] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Os botões de segmento reutilizam .mens-filtro (o mesmo dos filtros do
   inbox); o que faltava era o contentor. */
.mens-nova [data-bloco="filtros"] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Tem de PARECER um campo de busca: caixa com contorno, altura de alvo de
   toque e lupa à esquerda. Sem isto era um rectângulo invisível no meio da
   página — a causa raiz do defeito reportado. O selector leva `input` de
   propósito: base.css estiliza os campos por
   `input:not([type="checkbox"]):not([type="radio"])` (0,2,1) e apaga a
   moldura para uma linha inferior — sem o tipo de elemento aqui, esta regra
   perde a especificidade e o campo volta a desaparecer. */
.mens-nova input[data-campo="busca-paciente"] {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px 10px 34px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-borda);
  background: var(--cor-superficie)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235a6478' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cpath d='M21 21l-6-6'/%3E%3C/svg%3E")
    no-repeat 10px center;
  font-family: var(--fonte);
  font-size: 14px;
  color: var(--cor-texto);
}

.mens-nova input[data-campo="busca-paciente"]::placeholder {
  color: var(--cor-texto-secundario);
}

.mens-nova input[data-campo="busca-paciente"]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

/* Painel de sugestões. Fica no fluxo (não em position:absolute) de propósito:
   o campo não é o último elemento do bloco de busca, e uma camada flutuante
   ancorada por CSS puro ficaria presa à posição do contentor, não à do campo.
   Vazio não ocupa espaço nem desenha moldura. */
.mens-nova [data-bloco="sugestoes"] {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda);
  box-shadow: var(--sombra);
}

.mens-nova [data-bloco="sugestoes"]:empty {
  display: none;
}

.mens-nova [data-bloco="sugestoes"] li + li {
  border-top: 1px solid var(--cor-borda);
}

.mens-nova [data-bloco="sugestoes"] button {
  display: block;
  width: 100%;
  min-height: 44px;
  text-align: left;
  padding: 10px 12px;
  border: 0;
  background: none;
  font-family: var(--fonte);
  font-size: 14px;
  color: var(--cor-texto);
  cursor: pointer;
}

.mens-nova [data-bloco="sugestoes"] button:hover,
.mens-nova [data-bloco="sugestoes"] button:focus-visible {
  background: var(--cor-fundo);
}

/* Destinatários escolhidos: fichas legíveis com o "Remover" sempre visível
   (nunca escondido atrás de hover — em toque não existe hover). */
.mens-nova [data-bloco="selecionados"] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mens-nova [data-bloco="selecionados"] li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px 5px 10px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-borda);
  background: var(--cor-fundo);
  font-size: 13px;
  color: var(--cor-texto);
}

.mens-nova [data-bloco="selecionados"] button {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda);
  background: var(--cor-superficie);
  color: var(--cor-texto-secundario);
  font-family: var(--fonte);
  font-size: 11px;
  padding: 3px 7px;
  cursor: pointer;
}

.mens-nova [data-bloco="selecionados"] button:hover {
  border-color: var(--cor-perigo);
  color: var(--cor-perigo-texto);
}

.mens-nova .mens-campo {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: 380px;
}

.mens-nova .mens-campo > span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor-texto-secundario);
}

.mens-nova .mens-campo select {
  min-height: 44px;
  padding: 9px 10px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-borda);
  background: var(--cor-superficie);
  font-family: var(--fonte);
  font-size: 14px;
  color: var(--cor-texto);
}

.mens-nova [data-campo="texto"] {
  min-height: 150px;
  resize: vertical;
  padding: 12px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-borda);
  background: var(--cor-superficie);
  font-family: var(--fonte);
  font-size: 14px;
  line-height: 1.5;
  color: var(--cor-texto);
}

.mens-nova [data-bloco="contador"] {
  align-self: flex-end;
  margin-top: -10px;
  font-size: 11px;
  color: var(--cor-texto-secundario);
}

/* Prévia da notificação: informativa, nunca um controlo. O rótulo é gerado
   aqui para não fazer passar o texto genérico por conteúdo da mensagem. */
.mens-nova [data-bloco="previa-push"] {
  padding: 10px 12px;
  border: 1px dashed var(--cor-borda-forte);
  border-radius: var(--raio-borda);
  background: var(--cor-fundo);
  font-size: 13px;
  color: var(--cor-texto-secundario);
}

.mens-nova [data-bloco="previa-push"]::before {
  content: 'Prévia da notificação no celular';
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor-texto-secundario);
  margin-bottom: 4px;
}

.mens-nova-accoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid var(--cor-borda);
  padding-top: 14px;
}

/* Segundo passo de um envio em lote: tem de ler-se como um travão, por isso
   o tom de aviso — e não um segundo dourado a competir com o "Enviar". O
   peso vem só do contorno de 1px em --cor-aviso e do fundo tingido: nada de
   acento lateral colorido (DESIGN.md, "Don't" — a excepção registada é o
   toast e o item activo da sidebar) e nada de tarja de 3px no topo, que é a
   assinatura de SUPERFÍCIE e este bloco vive dentro da superfície .mens-nova
   que já a tem. */
.mens-nova [data-bloco="confirmacao"] {
  padding: 12px 14px;
  border: 1px solid var(--cor-aviso);
  border-radius: var(--raio-borda);
  background: rgba(181,137,58,0.08);
  color: var(--cor-aviso-texto);
  font-size: 14px;
}

.mens-nova [data-bloco="confirmacao"] p {
  margin: 0 0 10px;
}

.mens-nova [data-bloco="confirmacao"] button {
  min-height: 44px;
  padding: 9px 18px;
  border: 1.5px solid var(--cor-borda-forte);
  border-radius: var(--raio-borda);
  background: var(--cor-superficie);
  color: var(--navy);
  font-family: var(--fonte);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

.mens-nova [data-bloco="confirmacao"] button:hover {
  border-color: var(--gold);
}

/* Resultado por destinatário: cada linha diz o nome e o desfecho em texto —
   a cor nunca é o único sinal. */
.mens-nova [data-bloco="resultado"] {
  padding: 12px 14px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda);
  background: var(--cor-fundo);
}

.mens-nova [data-bloco="resultado"] ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mens-nova [data-bloco="resultado"] li {
  font-size: 13px;
  color: var(--cor-texto);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--cor-borda);
}

.mens-nova [data-bloco="resultado"] li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

@media (max-width: 767px) {
  .mens-nova {
    padding: 16px;
  }
  .mens-nova-accoes {
    justify-content: stretch;
  }
  .mens-nova-accoes .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* ─── Estados vazios (revisão visual 2026-08-31) ──────────────────────────
   Defeito reportado em produção: sem nenhuma conversa, a página desenhava o
   mestre-detalhe na mesma — coluna esquerda com um `<p>` cru "Nenhuma
   conversa." e coluna direita um retângulo branco enorme, vazio e sem
   propósito. Lia-se como erro de renderização, não como estado.

   A correcção é de arquitectura, não de decoração: sem conversas o
   mestre-detalhe não se desenha (`.mens-inbox--vazia`), e a superfície é o
   próprio cream — nunca uma laje branca à espera de conteúdo que não existe.
   A tarja dourada fica reservada a superfícies com conteúdo real; aqui a
   assinatura é um filete curto acima do título, que marca o sistema sem
   fingir que há um card. */
/* Corpo sem conversas: a coluna da lista deixa de ser uma coluna estreita e
   branca — passa a ocupar a largura toda, sem superfície nem tarja, e o
   painel de detalhe sai do fluxo. A barra de filtros CONTINUA visível acima:
   escondê-la tornaria "Arquivadas" inalcançável a partir de uma caixa de
   entrada vazia (regressão apanhada pelos testes ao desenhar isto). */
.mens-inbox-corpo--vazia .mens-inbox-lista {
  flex: 1 1 auto;
  max-height: none;
  overflow: visible;
  background: transparent;
  border-top: 0;
  box-shadow: none;
}

.mens-inbox-corpo--vazia .mens-inbox-conversa {
  display: none;
}

.mens-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  max-width: 420px;
  margin: 64px auto 0;
  padding: 0 20px 40px;
}

/* Filete dourado curto — a assinatura do sistema sem simular um card. */
.mens-vazio::before {
  content: '';
  width: 44px;
  height: 3px;
  background: var(--gold);
}

.mens-vazio-icone {
  font-size: 32px;   /* `icon-xl` da rampa do DESIGN.md — 34px era invenção minha */
  color: var(--gold);
  opacity: 0.55;
  line-height: 1;
}

.mens-vazio h2 {
  font-family: var(--fonte-serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--cor-texto);
  margin: 0;
}

.mens-vazio p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--cor-texto-secundario);
  margin: 0;
  max-width: 36ch;
}

.mens-vazio .btn {
  margin-top: 4px;
}

/* Vazio da LISTA: há inbox, este filtro é que não devolveu nada. Fica dentro
   da coluna branca, discreto — não é um erro, é um resultado. */
.mens-vazio-lista {
  padding: 22px 16px;
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: var(--cor-texto-secundario);
}

/* Detalhe por escolher: o painel deixa de ser superfície (sem branco, sem
   tarja, sem sombra) enquanto não houver conversa aberta — a caixa branca
   vazia era exactamente o que o cliente apontou. */
.mens-inbox-conversa--vazia {
  background: transparent;
  border-top: 0;
  box-shadow: none;
}

.mens-detalhe-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 200px;
  text-align: center;
  color: var(--cor-texto-secundario);
}

.mens-detalhe-vazio-icone {
  font-size: 22px;
  color: var(--gold);
  opacity: 0.5;
}

.mens-detalhe-vazio p {
  margin: 0;
  font-size: 14px;
  max-width: 30ch;
}

/* Campo de pesquisa do inbox. O elemento entra no selector de propósito:
   `base.css` estiliza `input:not([type="checkbox"]):not([type="radio"])` com
   especificidade (0,2,1) — e `:not()` conta a especificidade do argumento, por
   isso cada `:not([type=...])` vale uma classe. `input.mens-inbox-pesquisa` é
   só (0,1,1) e PERDE; foi o que aconteceu à primeira tentativa, confirmado no
   harness. (0,3,1) aqui não deixa margem para dúvida. */
.mens-inbox input.mens-inbox-pesquisa[type="search"] {
  width: 100%;
  max-width: 340px;
  padding: 8px 10px;
  margin-bottom: 12px;
  border: 1px solid var(--cor-borda);
  border-radius: 2px;
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font-family: inherit;
  font-size: 14px;
}

.mens-inbox input.mens-inbox-pesquisa[type="search"]:focus {
  outline: none;
  border-color: var(--gold);
}

@media (max-width: 767px) {
  .mens-detalhe-vazio {
    display: none;
  }
  .mens-vazio {
    margin-top: 40px;
  }
}