/*
 * Mensagens com a equipa do estudio (lane S5), distinct from the free
 * conversation with Magda (magda.css). Same tokens, same full-block pattern as
 * .magda-conversa__msg: the member/equipa distinction comes through the author
 * text (never color alone), the border is only a reinforcement.
 * No gradient, no radius larger than --raio-grande. Post-phase V
 * fix (workstream 1): HARD elevation (--marca-elevacao, zero
 * blur) allowed on the bubbles, never a glow nor a diffuse shadow.
 *
 * Lane E3 (messaging layout, docs/TESTE-MATINAL.md B6): bubbles
 * aligned by sender (member on the right, team on the left), timestamp per
 * bubble, compact cabecalho de interlocutor with the direct contacts, honest
 * note and nutricao link moved below the thread, input field FIXED
 * in .app-rodape-fixo (telas.css) rather than in normal flow.
 */

/* Cabecalho de interlocutor (B6: "contactos remontados"): name of the
   equipa (or of the coach for the next session, when the API provides it),
   THEN the two direct contact actions, all visible as soon as the
   ecra opens, before the mensagens thread itself: never any need to scroll
   to the bottom, even with many messages. */
.mensagens-cabecalho {
  margin-bottom: var(--espaco-largo);
  padding-bottom: var(--espaco-medio);
  border-bottom: 1px solid var(--marca-linha-alta);
}

.mensagens-cabecalho__nome {
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: var(--tamanho-h2);
  line-height: var(--altura-h2);
  color: var(--marca-texto);
}

.mensagens-cabecalho__contacto {
  margin-top: var(--espaco-micro);
}

/* Secondary link to Nutricao (phase U, plan delta point 3): the route and
   the screen do not change, only the entry point moves from the tabs
   to here (the single /nutricao action already writes into this same message
   thread, app/main.py::nutricao_pedir). Plain text, never a full-width
   button: this link stays secondary next to the messaging itself.
   Lane E3 (B6): moved below the thread, grouped with the honest note
   above, consistent with the idea of a "secondary action" (no action
   color, same discreet link as before, only the position changes). */
.mensagens-nutricao {
  margin-top: var(--espaco-micro);
  font-family: var(--fonte-texto);
  font-weight: 600;
}

/* Alvo tatil >= 44px (lane E4, B9, medido : 186.8x23px antes desta
   correcao). Ecra com scroll normal (nao pixel-critique como a Inicio) :
   nenhuma compensacao de margem negativa necessaria. */
.mensagens-nutricao a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  /* Baptiste fix (31/08, checked with scripts/contrast_check.py): Acento
     alone measures 3.47:1 on a light background (below the 4.5:1 text floor),
     AcentoTexto (the dark variant already established for this role) replaces it,
     7.6:1. */
  color: var(--marca-acento-texto);
}

/* Honest nota (B6: "moves below the thread as a discreet note"). Same wording
   verbatim as before this lane (the benchmark in docs/, B3, quotes it that way),
   only the position and the visual weight change: no more full-width
   banner at the top, just a discreet .rotulo after the thread. */
.mensagens-aviso {
  display: block;
  font-family: var(--fonte-texto);
  font-size: var(--tamanho-etiqueta);
  line-height: var(--altura-etiqueta);
  color: var(--marca-texto-atenuado);
  margin-top: var(--espaco-medio);
}

.mensagens-historico {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-micro);
  margin-bottom: var(--espaco-largo);
}

/* Separador de dia (lane E3): centered in the thread, never a bubble, never
   a full-width line (no rule as a primary structure,
   DESIGN-ALUNO.md §c). Appears only when the day changes between two
   mensagens (Jinja loop.changed, mensagens.html), never one per mensagem. */
.mensagens-separador-dia {
  align-self: center;
  font-family: var(--fonte-texto);
  font-weight: 600;
  font-size: var(--tamanho-etiqueta);
  color: var(--marca-texto-atenuado);
  margin: var(--espaco-micro) 0;
}

/* Bubbles aligned by sender (lane E3): .mensagens-historico is a
   flex column, align-self places each bubble without touching the DOM
   order (which stays chronological, never visually reordered, required
   by the "stable order, oldest to newest" criterion). Width capped at
   85% so the longest bubble never spans the whole column,
   standard messaging pattern. */
.mensagens-bolha {
  max-width: 85%;
  padding: var(--espaco-curto);
  border: 1px solid var(--marca-linha-alta);
  border-radius: var(--raio-pequeno);
  background: var(--marca-superficie-cartao);
  box-shadow: var(--sombra-cartao);
  align-self: flex-start;
}

.mensagens-bolha--staff {
  background: var(--marca-fundo-pagina);
  border-color: var(--marca-acento);
  align-self: flex-start;
}

.mensagens-bolha--member {
  background: var(--marca-superficie-cartao);
  border-color: var(--marca-linha-alta);
  align-self: flex-end;
}

.mensagens-bolha__autor {
  margin-bottom: var(--espaco-nano);
}

.mensagens-bolha__corpo {
  white-space: pre-wrap;
}

/* Timestamp per bubble (lane E3): local time only (the day lives in the
   separador above, never repeated per bubble). Always anchored to the right
   of its own bubble, whichever side it is aligned on: standard messaging
   pattern, never a second signal of who wrote (already carried
   by .mensagens-bolha__autor, text, not color). */
.mensagens-bolha__hora {
  margin-top: var(--espaco-nano);
  text-align: right;
  font-size: var(--tamanho-etiqueta);
  color: var(--marca-texto-atenuado);
}

/* FIXED input field (lane E3): now lives in .app-rodape-fixo
   (telas.css), above .nav-principal, rather than in normal flow at the
   end of the content. A single line (input, not textarea): that is what
   lets Enter submit the form natively, without JavaScript
   (see DECISIONS.md for the full rationale). */
.mensagens-form {
  display: flex;
  align-items: center;
  gap: var(--espaco-micro);
  padding: var(--espaco-micro) var(--espaco-medio);
  border-top: 1px solid var(--marca-linha-alta);
  background: var(--marca-superficie-cartao);
}

.mensagens-form input[type="text"] {
  flex: 1;
  min-height: 44px;
  padding: 0 var(--espaco-curto);
  border: 1px solid var(--marca-linha-alta);
  border-radius: var(--raio-pequeno);
  background: var(--marca-fundo-pagina);
}

.mensagens-form .botao {
  width: auto;
  min-height: 44px;
  padding: 0 var(--espaco-medio);
  flex-shrink: 0;
}