/* 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);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

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

/* 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);
  border: 1px solid var(--navy);
}

/* 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;
  }
}