/*
 * Magda's presence in the app: persistent guide panel (lane S4).
 * Imported by base.html after tokens.css, app.css and telas.css: reuses
 * the same tokens, no color or radius outside the scale in
 * docs/DESIGN-ALUNO.md. No gradients, no pills (radius capped at
 * --raio-grande like the rest of the app). Post-phase V fix
 * (workstream 1): HARD elevation (--marca-elevacao, zero blur) allowed
 * on conversation cards, never a glow or a diffuse shadow.
 */

/* Magda's trigger: thin single-line bar, anchored just below the
   header (phase U, plan delta point 2: replaces the former full-width
   card block). <details>, closed by default, never requires JavaScript
   to open. Flat edge (no border-radius, no side margin): a clean
   separator line, never a card or a floating pill
   (docs/DESIGN-ALUNO.md, S2+ rejection already ruled on the previous
   shape, re-ruled in phase U, plan delta point 9). */
.magda-painel {
  border: none;
  border-bottom: 1px solid var(--marca-linha);
  border-radius: 0;
  margin: 0;
  background: var(--marca-fundo-pagina);
}

/* Gatilho da Magda : mascote + rotulo + chevron alinhados (correctif
   design accueil ponto 8, "alinhada ao ritmo, nao um texto flutuante").
   O <summary> ja e flex (regra generica abaixo) ; o chevron e o UNICO
   acrescento, desenhado por CSS (nenhum SVG novo), roda 90deg quando o
   painel abre (seletor nativo details[open]). */
.magda-painel__chevron {
  margin-left: auto;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--duracao-transicao) ease;
}

.magda-painel[open] .magda-painel__chevron {
  transform: rotate(45deg);
}

.magda-painel__gatilho {
  display: flex;
  align-items: center;
  gap: var(--espaco-micro);
  min-height: 44px;
  padding: var(--espaco-micro) var(--espaco-medio);
  font-family: var(--fonte-texto);
  font-weight: 600;
  font-size: var(--tamanho-etiqueta);
  color: var(--marca-texto);
  cursor: pointer;
  list-style: none;
}

/* Neutralizes the browsers' native marker (triangle/disclosure) so the
   mascot stays the only visual cue, without inventing a pill or a
   generic button on top of it. */
.magda-painel__gatilho::-webkit-details-marker {
  display: none;
}

.magda-painel__mascote {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.magda-painel__corpo {
  padding: 0 var(--espaco-medio) var(--espaco-curto);
  border-top: 1px solid var(--marca-linha);
  padding-top: var(--espaco-curto);
}

.magda-painel__corpo p {
  color: var(--marca-texto-atenuado);
  margin-bottom: var(--espaco-micro);
}

/* Alvo tatil >= 44px (lane E4, B9, medido : 172.7x25.5px antes desta
   correcao). Painel fechado por defeito (details), sem restricao de
   altura : o padding extra e absorvido sem risco. */
.magda-painel__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--fonte-texto);
  font-weight: 600;
  /* Baptiste's fix (31/08, verified with scripts/contrast_check.py): Acento
     alone on a light background only measures 3.47:1 (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);
}

/* First-visit guided tour (offer and three steps): existing cartao,
   only the action row is specific to this block. */
.magda-visita__acoes {
  display: flex;
  gap: var(--espaco-micro);
  margin-top: var(--espaco-medio);
}

.magda-visita__acoes form {
  flex: 1;
  display: flex;
}

.magda-visita__acoes > a {
  flex: 1;
}

.magda-visita__acoes form .botao {
  width: 100%;
}

/* Magda's apoio on the result screen: always below the official log
   sentence (never merged with it), never shown on a success. */
.magda-apoio {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espaco-micro);
}

.magda-apoio__mascote {
  width: 32px;
  height: 32px;
}

/* Conversa efemera (/magda, lane C1) : historico simple, sugestoes,
   formulaire sobre. Nada aqui persiste (app/magda/conversa.py) : o campo
   escondido "historico" de cada formulario carrega todo o estado entre
   dois renders. */
.magda-conversa__estado {
  margin-bottom: var(--espaco-micro);
}

.magda-conversa__saudacao {
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: var(--tamanho-h2);
  line-height: var(--altura-h2);
  color: var(--marca-texto);
  margin-bottom: var(--espaco-medio);
}

.magda-conversa__historico {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-medio);
  margin-bottom: var(--espaco-largo);
}

/* DA2: "no chat bubble". No background, no border, no shadow, the tour
   is a plain block of text introduced by its mono label (.rotulo). */
.magda-conversa__msg {
  padding: 0;
}

.magda-conversa__msg .rotulo {
  margin-bottom: 4px;
}

.magda-conversa__msg--membro .dado {
  color: var(--marca-texto-atenuado);
}

/* Bloco de escalada (pergunta nao reconhecida OU onde fica o estudio) :
   reutiliza .magda-apoio (ja verificado, resultado.html) em vez de um
   motivo visual novo -- mesma mascote, mesmo cartao. */
.magda-conversa__escalada {
  margin-bottom: var(--espaco-micro);
}

.magda-conversa__sugestoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-micro);
  margin-bottom: var(--espaco-largo);
}

.magda-conversa__sugestao {
  flex: 0 0 auto;
}

.magda-conversa__form {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-micro);
}

.magda-conversa__form textarea {
  padding: var(--espaco-curto);
  border: 1px solid var(--marca-linha-alta);
  border-radius: var(--raio-pequeno);
  resize: vertical;
}