/* ════════════════════════════════════════════════════════════════════
   AVAMIS 4 — sistema de design comum
   Direção "Caderno" · paleta "Lápis de cor" · títulos Commissioner ·
   texto Atkinson Hyperlegible · coluna única.
   Decisões da autora em 30/09/2026.

   Tokens primeiro; nenhum componente usa cor literal. Os pares de cor
   são conferidos por ferramentas/verificar-contraste.mjs (meta AA 4,5:1).
   ════════════════════════════════════════════════════════════════════ */
@import url("fontes.css");

:root {
  /* base: papel quadriculado, tinta azul-marinho */
  --papel: #fdfdfb;
  --grade: #e6eaf2;
  --tinta: #16213a;
  --tinta-suave: #4f5870;
  --borda: #d3d8e2;
  --cartao: #ffffff;
  --superficie: #f4f6f9;
  --aluno: #16213a;
  --aluno-tinta: #ffffff;
  --perigo: #a3231a;
  --perigo-suave: #fbe9e7;
  --aviso: #7a4b00;
  --aviso-suave: #fdf1dc;
  --foco: #1d4ed8;
  --sombra: 0 1px 2px rgb(22 33 58 / 8%), 0 4px 16px rgb(22 33 58 / 6%);

  /* agente (padrão: Sigma); cada página sobrescreve via [data-agente] */
  --ag: #3446c8;
  --ag-tinta: #ffffff;
  --ag-texto: #3446c8;
  --ag-suave: #e8ebfb;

  /* tipografia */
  --f-texto: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-titulo: "Commissioner", "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --escala: 1;
  --t-base: calc(1rem * var(--escala));
  --t-peq: calc(0.875rem * var(--escala));
  --t-mini: calc(0.78rem * var(--escala));
  --t-grande: calc(1.25rem * var(--escala));
  --t-titulo: calc(clamp(1.6rem, 4vw, 2.2rem) * var(--escala));
  --entrelinha: 1.6;

  /* forma e ritmo */
  --raio: 12px;
  --raio-peq: 8px;
  --gutter: 16px;
  --coluna: 46rem;
  --toque: 44px;
  --dur: 160ms;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]):not([data-tema="contraste"]) {
    --papel: #10172a; --grade: #1a2440; --tinta: #e8ecf6; --tinta-suave: #a9b2c7;
    --borda: #2c3756; --cartao: #18213a; --superficie: #141c32;
    --aluno: #e8ecf6; --aluno-tinta: #10172a;
    --perigo: #ff9a8f; --perigo-suave: #3a1a17; --aviso: #f5c36a; --aviso-suave: #3a2a0e;
    --foco: #8fb0ff; --sombra: 0 1px 2px rgb(0 0 0 / 30%);
    --ag-tinta: #10142a;
    color-scheme: dark;
  }
}
:root[data-tema="escuro"] {
  --papel: #10172a; --grade: #1a2440; --tinta: #e8ecf6; --tinta-suave: #a9b2c7;
  --borda: #2c3756; --cartao: #18213a; --superficie: #141c32;
  --aluno: #e8ecf6; --aluno-tinta: #10172a;
  --perigo: #ff9a8f; --perigo-suave: #3a1a17; --aviso: #f5c36a; --aviso-suave: #3a2a0e;
  --foco: #8fb0ff; --sombra: 0 1px 2px rgb(0 0 0 / 30%);
  --ag-tinta: #10142a;
  color-scheme: dark;
}

/* ── identidade de cada AVAMI: mesma estrutura, material próprio ──
   (gerado por ferramentas/gerar-tokens; cores conferidas por verificar-contraste.mjs) */
[data-agente="sigma"] { --ag: #3446c8; --ag-texto: #3446c8; --ag-suave: #e8ebfb; --ag-tinta: #ffffff; --papel: #fdfdfb; --cartao: #ffffff; --tinta: #16213a; --tinta-suave: #4f5870; --borda: #d3d8e2; --superficie: #f4f6f9; --grade: #e3e8f1; --aluno: #16213a; --aluno-tinta: #fdfdfb; --f-titulo: "Commissioner", "Atkinson Hyperlegible", system-ui, sans-serif; --raio-selo: 11px; --fundo-img: linear-gradient(var(--grade) 1px, transparent 1px), linear-gradient(90deg, var(--grade) 1px, transparent 1px); --fundo-tam: 24px 24px; }
[data-agente="beta"] { --ag: #a8255f; --ag-texto: #a8255f; --ag-suave: #fbe6ef; --ag-tinta: #ffffff; --papel: #fffdfd; --cartao: #ffffff; --tinta: #2a1420; --tinta-suave: #5f4652; --borda: #e6d2da; --superficie: #fbf4f7; --grade: #f2e3e9; --aluno: #2a1420; --aluno-tinta: #fffdfd; --f-titulo: "Fira Sans", "Atkinson Hyperlegible", system-ui, sans-serif; --raio-selo: 7px; --fundo-img: linear-gradient(var(--grade) 1px, transparent 1px), linear-gradient(90deg, var(--grade) 1px, transparent 1px), linear-gradient(var(--superficie) 1px, transparent 1px), linear-gradient(90deg, var(--superficie) 1px, transparent 1px); --fundo-tam: 40px 40px, 40px 40px, 8px 8px, 8px 8px; }
[data-agente="kapa"] { --ag: #1c6b3e; --ag-texto: #1c6b3e; --ag-suave: #e2f2e8; --ag-tinta: #ffffff; --papel: #fbfdfb; --cartao: #ffffff; --tinta: #12261a; --tinta-suave: #4a5d50; --borda: #d2e2d6; --superficie: #f2f8f4; --grade: #cfe1d5; --aluno: #12261a; --aluno-tinta: #fbfdfb; --f-titulo: "Comfortaa", "Atkinson Hyperlegible", system-ui, sans-serif; --raio-selo: 50%; --fundo-img: radial-gradient(var(--grade) 1.6px, transparent 2.2px); --fundo-tam: 20px 20px; }
[data-agente="mi"] { --ag: #0d6573; --ag-texto: #0d6573; --ag-suave: #def1f3; --ag-tinta: #ffffff; --papel: #fbfdfd; --cartao: #ffffff; --tinta: #0f2329; --tinta-suave: #45595f; --borda: #cfe1e4; --superficie: #f1f7f8; --grade: #dbeaed; --aluno: #0f2329; --aluno-tinta: #fbfdfd; --f-titulo: "Literata", "Atkinson Hyperlegible", system-ui, sans-serif; --raio-selo: 50%; --fundo-img: repeating-radial-gradient(circle at 88% 10%, transparent 0 34px, var(--grade) 34px 35px); --fundo-tam: auto; }
[data-agente="lambda"] { --ag: #8a5300; --ag-texto: #8a5300; --ag-suave: #f6e9d3; --ag-tinta: #ffffff; --papel: #fbf6ec; --cartao: #fffdf8; --tinta: #2b2113; --tinta-suave: #5e5240; --borda: #e1d3ba; --superficie: #f6efe2; --grade: #eadfca; --aluno: #2b2113; --aluno-tinta: #fbf6ec; --f-titulo: "Alegreya", "Atkinson Hyperlegible", system-ui, sans-serif; --raio-selo: 4px; --fundo-img: linear-gradient(var(--grade) 1px, transparent 1px); --fundo-tam: 100% 28px; }
[data-agente="eta"] { --ag: #6a35c0; --ag-texto: #6a35c0; --ag-suave: #eee6fb; --ag-tinta: #ffffff; --papel: #fcfbff; --cartao: #ffffff; --tinta: #1e1630; --tinta-suave: #544a68; --borda: #ddd5ee; --superficie: #f5f2fb; --grade: #e9e3f4; --aluno: #1e1630; --aluno-tinta: #fcfbff; --f-titulo: "Fira Sans Condensed", "Atkinson Hyperlegible", system-ui, sans-serif; --raio-selo: 8px; --fundo-img: linear-gradient(90deg, transparent 36px, var(--ag-suave) 36px, var(--ag-suave) 38px, transparent 38px), linear-gradient(var(--grade) 1px, transparent 1px); --fundo-tam: 100% 100%, 100% 26px; }
[data-agente="portal"] { --ag: #16213a; --ag-texto: #16213a; --ag-suave: #e9ecf3; --ag-tinta: #ffffff; --papel: #fdfdfb; --cartao: #ffffff; --tinta: #16213a; --tinta-suave: #4f5870; --borda: #d3d8e2; --superficie: #f4f6f9; --grade: #e3e8f1; --aluno: #16213a; --aluno-tinta: #fdfdfb; --f-titulo: "Commissioner", "Atkinson Hyperlegible", system-ui, sans-serif; --raio-selo: 11px; --fundo-img: linear-gradient(var(--grade) 1px, transparent 1px), linear-gradient(90deg, var(--grade) 1px, transparent 1px); --fundo-tam: 24px 24px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]):not([data-tema="contraste"])[data-agente="sigma"], :root:not([data-tema="claro"]):not([data-tema="contraste"]) [data-agente="sigma"] { --ag: #9fb0ff; --ag-texto: #b4c1ff; --ag-suave: #222c55; --ag-tinta: #10142a; --papel: #10172a; --cartao: #18213a; --tinta: #e8ecf6; --tinta-suave: #a9b2c7; --borda: #2c3756; --superficie: #141c32; --grade: #1a2440; --aluno: #e8ecf6; --aluno-tinta: #10172a; }
  :root:not([data-tema="claro"]):not([data-tema="contraste"])[data-agente="beta"], :root:not([data-tema="claro"]):not([data-tema="contraste"]) [data-agente="beta"] { --ag: #ff9cc6; --ag-texto: #ffb3d3; --ag-suave: #47202f; --ag-tinta: #10142a; --papel: #1a1016; --cartao: #25161f; --tinta: #f7e9ef; --tinta-suave: #c7a9b6; --borda: #3d2632; --superficie: #20141b; --grade: #2a1a23; --aluno: #f7e9ef; --aluno-tinta: #1a1016; }
  :root:not([data-tema="claro"]):not([data-tema="contraste"])[data-agente="kapa"], :root:not([data-tema="claro"]):not([data-tema="contraste"]) [data-agente="kapa"] { --ag: #7fd99f; --ag-texto: #93e2b0; --ag-suave: #173a26; --ag-tinta: #10142a; --papel: #0e1912; --cartao: #15231a; --tinta: #e7f3ea; --tinta-suave: #a5bcab; --borda: #26392c; --superficie: #121e16; --grade: #25392c; --aluno: #e7f3ea; --aluno-tinta: #0e1912; }
  :root:not([data-tema="claro"]):not([data-tema="contraste"])[data-agente="mi"], :root:not([data-tema="claro"]):not([data-tema="contraste"]) [data-agente="mi"] { --ag: #72d3e0; --ag-texto: #8cdde8; --ag-suave: #12363c; --ag-tinta: #10142a; --papel: #0c171a; --cartao: #132125; --tinta: #e4f2f4; --tinta-suave: #9fb9be; --borda: #233a3f; --superficie: #101d20; --grade: #1b3035; --aluno: #e4f2f4; --aluno-tinta: #0c171a; }
  :root:not([data-tema="claro"]):not([data-tema="contraste"])[data-agente="lambda"], :root:not([data-tema="claro"]):not([data-tema="contraste"]) [data-agente="lambda"] { --ag: #f2bf6b; --ag-texto: #f6cd88; --ag-suave: #3b2a10; --ag-tinta: #10142a; --papel: #1a150d; --cartao: #241d12; --tinta: #f4ead8; --tinta-suave: #c2b393; --borda: #3c3220; --superficie: #1f1910; --grade: #2f271a; --aluno: #f4ead8; --aluno-tinta: #1a150d; }
  :root:not([data-tema="claro"]):not([data-tema="contraste"])[data-agente="eta"], :root:not([data-tema="claro"]):not([data-tema="contraste"]) [data-agente="eta"] { --ag: #c4a6ff; --ag-texto: #d2bbff; --ag-suave: #2e2250; --ag-tinta: #10142a; --papel: #13101c; --cartao: #1c1728; --tinta: #eee8fb; --tinta-suave: #b2a7c9; --borda: #322a45; --superficie: #17131f; --grade: #262036; --aluno: #eee8fb; --aluno-tinta: #13101c; }
  :root:not([data-tema="claro"]):not([data-tema="contraste"])[data-agente="portal"], :root:not([data-tema="claro"]):not([data-tema="contraste"]) [data-agente="portal"] { --ag: #e8ecf6; --ag-texto: #e8ecf6; --ag-suave: #222c45; --ag-tinta: #10142a; --papel: #10172a; --cartao: #18213a; --tinta: #e8ecf6; --tinta-suave: #a9b2c7; --borda: #2c3756; --superficie: #141c32; --grade: #1a2440; --aluno: #e8ecf6; --aluno-tinta: #10172a; }
}
:root[data-tema="escuro"][data-agente="sigma"], :root[data-tema="escuro"] [data-agente="sigma"] { --ag: #9fb0ff; --ag-texto: #b4c1ff; --ag-suave: #222c55; --ag-tinta: #10142a; --papel: #10172a; --cartao: #18213a; --tinta: #e8ecf6; --tinta-suave: #a9b2c7; --borda: #2c3756; --superficie: #141c32; --grade: #1a2440; --aluno: #e8ecf6; --aluno-tinta: #10172a; }
:root[data-tema="escuro"][data-agente="beta"], :root[data-tema="escuro"] [data-agente="beta"] { --ag: #ff9cc6; --ag-texto: #ffb3d3; --ag-suave: #47202f; --ag-tinta: #10142a; --papel: #1a1016; --cartao: #25161f; --tinta: #f7e9ef; --tinta-suave: #c7a9b6; --borda: #3d2632; --superficie: #20141b; --grade: #2a1a23; --aluno: #f7e9ef; --aluno-tinta: #1a1016; }
:root[data-tema="escuro"][data-agente="kapa"], :root[data-tema="escuro"] [data-agente="kapa"] { --ag: #7fd99f; --ag-texto: #93e2b0; --ag-suave: #173a26; --ag-tinta: #10142a; --papel: #0e1912; --cartao: #15231a; --tinta: #e7f3ea; --tinta-suave: #a5bcab; --borda: #26392c; --superficie: #121e16; --grade: #25392c; --aluno: #e7f3ea; --aluno-tinta: #0e1912; }
:root[data-tema="escuro"][data-agente="mi"], :root[data-tema="escuro"] [data-agente="mi"] { --ag: #72d3e0; --ag-texto: #8cdde8; --ag-suave: #12363c; --ag-tinta: #10142a; --papel: #0c171a; --cartao: #132125; --tinta: #e4f2f4; --tinta-suave: #9fb9be; --borda: #233a3f; --superficie: #101d20; --grade: #1b3035; --aluno: #e4f2f4; --aluno-tinta: #0c171a; }
:root[data-tema="escuro"][data-agente="lambda"], :root[data-tema="escuro"] [data-agente="lambda"] { --ag: #f2bf6b; --ag-texto: #f6cd88; --ag-suave: #3b2a10; --ag-tinta: #10142a; --papel: #1a150d; --cartao: #241d12; --tinta: #f4ead8; --tinta-suave: #c2b393; --borda: #3c3220; --superficie: #1f1910; --grade: #2f271a; --aluno: #f4ead8; --aluno-tinta: #1a150d; }
:root[data-tema="escuro"][data-agente="eta"], :root[data-tema="escuro"] [data-agente="eta"] { --ag: #c4a6ff; --ag-texto: #d2bbff; --ag-suave: #2e2250; --ag-tinta: #10142a; --papel: #13101c; --cartao: #1c1728; --tinta: #eee8fb; --tinta-suave: #b2a7c9; --borda: #322a45; --superficie: #17131f; --grade: #262036; --aluno: #eee8fb; --aluno-tinta: #13101c; }
:root[data-tema="escuro"][data-agente="portal"], :root[data-tema="escuro"] [data-agente="portal"] { --ag: #e8ecf6; --ag-texto: #e8ecf6; --ag-suave: #222c45; --ag-tinta: #10142a; --papel: #10172a; --cartao: #18213a; --tinta: #e8ecf6; --tinta-suave: #a9b2c7; --borda: #2c3756; --superficie: #141c32; --grade: #1a2440; --aluno: #e8ecf6; --aluno-tinta: #10172a; }

/* ── alto contraste (AAA): preto, branco e amarelo, sem quadriculado ── */
:root[data-tema="contraste"] {
  --papel: #000000; --grade: transparent; --tinta: #ffffff; --tinta-suave: #ffffff;
  --borda: #ffffff; --cartao: #000000; --superficie: #000000;
  --aluno: #ffd400; --aluno-tinta: #000000;
  --perigo: #ff8080; --perigo-suave: #000000; --aviso: #ffd400; --aviso-suave: #000000;
  --foco: #ffd400; --sombra: none;
  --ag: #ffd400; --ag-tinta: #000000; --ag-texto: #ffd400; --ag-suave: #000000;
  color-scheme: dark;
}
:root[data-tema="contraste"][data-agente], :root[data-tema="contraste"] [data-agente] { --ag: #ffd400; --ag-tinta: #000000; --ag-texto: #ffd400; --ag-suave: #000000; --papel: #000000; --cartao: #000000; --superficie: #000000; --tinta: #ffffff; --tinta-suave: #ffffff; --borda: #ffffff; --grade: transparent; --aluno: #ffd400; --aluno-tinta: #000000; --fundo-img: none; }

/* ════════════════ base ════════════════ */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  background-color: var(--papel);
  background-image: var(--fundo-img, none);
  background-size: var(--fundo-tam, auto);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: var(--t-base);
  line-height: var(--entrelinha);
}
h1, h2, h3 { font-family: var(--f-titulo); line-height: 1.15; text-wrap: balance; margin: 0; }
p { margin: 0; }
a { color: var(--ag-texto); text-underline-offset: 3px; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 4px; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pular { position: absolute; left: var(--gutter); top: -60px; z-index: 50; background: var(--tinta); color: var(--papel); padding: 10px 14px; border-radius: var(--raio-peq); font-weight: 700; }
.pular:focus { top: calc(env(safe-area-inset-top, 0px) + 8px); }

/* botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--toque); min-width: var(--toque); padding: 0 14px;
  border-radius: var(--raio-peq); border: 1.5px solid var(--borda);
  background: var(--cartao); color: var(--tinta); font-weight: 700; cursor: pointer;
  transition: background var(--dur), border-color var(--dur);
}
.btn:hover { border-color: var(--tinta-suave); }
.btn[aria-pressed="true"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.btn-ag { background: var(--ag); color: var(--ag-tinta); border-color: var(--ag); }
.btn-ag:hover { filter: brightness(1.06); border-color: var(--ag); }
.btn-perigo { color: var(--perigo); border-color: currentColor; }
.btn-texto { border-color: transparent; background: transparent; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn svg { width: 20px; height: 20px; flex: none; }

/* ════════════════ estrutura: coluna única ════════════════ */
.app { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; }
.app > main { min-height: 0; }
.topo {
  position: sticky; top: 0; z-index: 20;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--papel); border-bottom: 1px solid var(--borda);
}
.topo-in { max-width: calc(var(--coluna) + 2 * var(--gutter)); margin: 0 auto; padding: 8px var(--gutter); display: flex; align-items: center; gap: 10px; }
.mono {
  width: 42px; height: 42px; flex: none; border-radius: var(--raio-selo, 11px);
  display: grid; place-items: center;
  background: var(--ag); color: var(--ag-tinta);
  font-family: var(--f-titulo); font-weight: 800; font-size: 1.4rem; line-height: 1;
}
.identidade { min-width: 0; display: grid; }
.identidade .nome { font-family: var(--f-titulo); font-weight: 800; font-size: 1.15rem; line-height: 1.1; }
.identidade .tema { font-size: var(--t-mini); color: var(--tinta-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acoes-topo { margin-left: auto; display: flex; gap: 6px; }
.acoes-topo .rotulo-largo { display: none; }
@media (min-width: 640px) { .acoes-topo .rotulo-largo { display: inline; } }

.conversa { width: 100%; max-width: calc(var(--coluna) + 2 * var(--gutter)); margin: 0 auto; padding: 20px var(--gutter) 28px; display: grid; gap: 14px; align-content: start; }

/* boas-vindas (página única: apresentação + sugestões) */
.boas-vindas { display: grid; gap: 14px; padding: 18px; background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); }
.boas-vindas h1 { font-size: var(--t-titulo); font-weight: 800; }
.boas-vindas h1 em { font-style: normal; color: var(--ag-texto); }
.boas-vindas .lead { font-size: calc(1.08rem * var(--escala)); max-width: 60ch; }
.avisos { display: grid; gap: 6px; font-size: var(--t-peq); color: var(--tinta-suave); border-top: 1px dashed var(--borda); padding-top: 10px; }
.avisos p::before { content: "• "; color: var(--ag-texto); font-weight: 700; }
.sugestoes { display: flex; flex-wrap: wrap; gap: 8px; }
.sugestao { border: 1.5px solid var(--ag); background: var(--ag-suave); color: var(--tinta); border-radius: 99px; padding: 8px 14px; min-height: var(--toque); font-weight: 700; cursor: pointer; text-align: left; }
.sugestao:hover { background: var(--ag); color: var(--ag-tinta); }

/* mensagens */
.mensagens { display: grid; gap: 14px; }
.msg { display: grid; gap: 6px; max-width: 100%; min-width: 0; }
.msg-aluno { justify-self: end; max-width: min(85%, 38rem); background: var(--aluno); color: var(--aluno-tinta); padding: 10px 14px; border-radius: 16px 16px 4px 16px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-tutora { background: var(--cartao); border: 1px solid var(--borda); border-radius: 4px 16px 16px 16px; padding: 12px 16px; box-shadow: var(--sombra); }
.msg-tutora .quem { font-family: var(--f-titulo); font-weight: 800; font-size: var(--t-mini); letter-spacing: .07em; text-transform: uppercase; color: var(--ag-texto); }
.texto { overflow-wrap: anywhere; min-width: 0; }
.texto > * + * { margin-top: .7em; }
.texto ul, .texto ol { padding-left: 1.3em; margin: .5em 0; }
.texto li + li { margin-top: .25em; }
.texto h1, .texto h2, .texto h3 { font-size: 1.1em; margin-top: 1em; }
.texto code { font-family: ui-monospace, Consolas, monospace; font-size: .92em; background: var(--superficie); padding: .05em .35em; border-radius: 4px; }
.texto pre { background: var(--superficie); padding: 10px 12px; border-radius: var(--raio-peq); overflow-x: auto; }
.texto table { border-collapse: collapse; display: block; overflow-x: auto; max-width: 100%; }
.texto th, .texto td { border: 1px solid var(--borda); padding: 6px 10px; text-align: left; }
.texto blockquote { margin: 0; padding-left: 12px; border-left: 3px solid var(--ag); color: var(--tinta-suave); }
.texto .katex-display { overflow-x: auto; overflow-y: hidden; padding: 4px 0; }
.texto .katex { font-size: 1.08em; }
/* lista oficial de referências: vem do servidor, nunca do modelo */
.referencias { margin-top: 10px; padding: 12px 14px; background: var(--superficie); border: 1px solid var(--borda); border-left: 4px solid var(--ag); border-radius: var(--raio-peq); font-size: var(--t-peq); }
.referencias .ref-titulo { margin: 0 0 6px; font-weight: 700; color: var(--ag-texto); }
.referencias .ref-grupo { margin: 10px 0 2px; font-weight: 700; color: var(--tinta); }
.referencias ul { margin: 0; padding-left: 1.2em; }
.referencias li { margin: 2px 0; }
.referencias .ref-nota { margin: 6px 0 0; color: var(--tinta-suave); }
.acoes-msg { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.acoes-msg .btn { min-height: 36px; padding: 0 10px; font-size: var(--t-peq); border-color: transparent; background: transparent; color: var(--tinta-suave); }
.acoes-msg .btn:hover, .acoes-msg .btn:focus-visible { border-color: var(--borda); color: var(--tinta); }
/* "⚑ Avisar um erro": é ação do aluno, então tem cara de botão (borda e texto em tinta), separado de Ouvir/Copiar */
.acoes-msg .btn.btn-avisar { border-color: var(--borda); background: var(--cartao); color: var(--tinta); margin-left: auto; gap: 6px; }
.acoes-msg .btn.btn-avisar .bandeira { color: var(--perigo); }
.acoes-msg .btn.btn-avisar:hover, .acoes-msg .btn.btn-avisar:focus-visible { border-color: var(--perigo); }
@media (pointer: coarse) { .acoes-msg .btn { min-height: var(--toque); } }

/* estados */
.etapa { justify-self: start; display: inline-flex; gap: 8px; align-items: center; font-size: var(--t-peq); font-weight: 700; color: var(--ag-texto); background: var(--ag-suave); border-radius: 99px; padding: 5px 12px; }
.etapa::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: pulso 1.2s ease-in-out infinite; }
@keyframes pulso { 50% { opacity: .25; } }
.aviso { display: grid; gap: 8px; padding: 10px 14px; border-radius: var(--raio-peq); background: var(--aviso-suave); color: var(--tinta); border: 1px solid var(--aviso); font-size: var(--t-peq); }
.aviso.erro { background: var(--perigo-suave); border-color: var(--perigo); }
.aviso .linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.selo-ia { font-size: var(--t-mini); color: var(--tinta-suave); }

/* entrada */
.entrada { position: sticky; bottom: 0; z-index: 15; background: var(--papel); border-top: 1px solid var(--borda); padding-bottom: env(safe-area-inset-bottom, 0px); }
.entrada form { max-width: calc(var(--coluna) + 2 * var(--gutter)); margin: 0 auto; padding: 10px var(--gutter); display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: end; }
.entrada textarea {
  width: 100%; min-height: var(--toque); max-height: 40vh; resize: none;
  border: 1.5px solid var(--borda); border-radius: var(--raio-peq); background: var(--cartao);
  padding: 10px 12px; line-height: 1.45;
}
.entrada textarea:focus { border-color: var(--ag); outline: none; box-shadow: 0 0 0 3px var(--ag-suave); }
.entrada .dica { grid-column: 1 / -1; font-size: var(--t-mini); color: var(--tinta-suave); display: flex; justify-content: space-between; gap: 8px; }
.gravando { border-color: var(--perigo) !important; color: var(--perigo); }

/* painéis (dialog) */
dialog.painel {
  border: 1px solid var(--borda); border-radius: var(--raio); background: var(--cartao); color: var(--tinta);
  padding: 0; width: min(92vw, 30rem); max-height: 85vh; box-shadow: 0 20px 60px rgb(0 0 0 / 25%);
}
dialog.painel::backdrop { background: rgb(10 14 28 / 45%); }
.painel-cab { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--borda); }
.painel-cab h2 { font-size: 1.1rem; font-weight: 800; }
.painel-cab .btn { margin-left: auto; }
.painel-corpo { padding: 14px; display: grid; gap: 14px; overflow-y: auto; max-height: calc(85vh - 64px); }
.lista-conversas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lista-conversas li { display: flex; gap: 6px; align-items: stretch; }
.lista-conversas .abrir { flex: 1; justify-content: flex-start; text-align: left; font-weight: 400; overflow: hidden; }
.lista-conversas .abrir span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista-conversas .abrir[aria-current="true"] { border-color: var(--ag); background: var(--ag-suave); }
.grupo { display: grid; gap: 8px; }
.grupo > .titulo { font-family: var(--f-titulo); font-weight: 800; font-size: var(--t-peq); }
.linha-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.faixa { display: flex; align-items: center; gap: 10px; }
.faixa input[type="range"] { flex: 1; accent-color: var(--ag); min-height: var(--toque); }
.nota { font-size: var(--t-mini); color: var(--tinta-suave); }

/* toast */
.toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60; background: var(--tinta); color: var(--papel); padding: 10px 16px; border-radius: var(--raio-peq); font-weight: 700; max-width: calc(100vw - 32px); box-shadow: var(--sombra); }

/* gráfico de barras acessível (Eta) */
.barras { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.barras li { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr auto; gap: 10px; align-items: center; }
.barras .trilho { background: var(--superficie); border: 1px solid var(--borda); border-radius: 6px; height: 22px; overflow: hidden; }
.barras .cheio { height: 100%; background: var(--ag); border-radius: 5px 0 0 5px; }
.barras .valor { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 3.2em; text-align: right; }
@media (max-width: 420px) { .barras li { grid-template-columns: 1fr auto; } .barras .trilho { grid-column: 1 / -1; grid-row: 2; } }
.fontes { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; font-size: var(--t-peq); }

/* modo alto contraste: bordas visíveis em tudo */
:root[data-tema="contraste"] body { background-image: none; }
:root[data-tema="contraste"] .btn, :root[data-tema="contraste"] .msg-tutora, :root[data-tema="contraste"] .boas-vindas, :root[data-tema="contraste"] textarea { border-width: 2px; }
:root[data-tema="contraste"] a { color: #ffd400; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  body { background: #fff; color: #000; }
  .topo, .entrada, .acoes-msg, .boas-vindas .sugestoes { display: none; }
}

/* ════════════════ entrada limpa (rodada 2, decisão da autora) ════════════════
   Tela inicial: só a saudação, perto do campo. Sugestões aparecem ao tocar
   no campo vazio. Aviso de IA numa linha, detalhes no painel "Sobre". */
.conversa { display: flex; flex-direction: column; min-height: 100%; }
.conversa > .mensagens { flex: none; }
.ola { margin-top: auto; padding: 8vh 0 6px; display: grid; gap: 6px; }
.ola-texto { font-family: var(--f-titulo); font-weight: 800; font-size: calc(clamp(1.7rem, 6vw, 2.4rem) * var(--escala)); line-height: 1.1; text-wrap: balance; }
.ola-texto em { font-style: normal; color: var(--ag-texto); }
.sugestoes-campo { grid-column: 1 / -1; display: grid; gap: 6px; padding-bottom: 4px; }
.sugestoes-campo .sugestoes { display: flex; flex-wrap: wrap; gap: 6px; }
.sugestoes-campo .sugestao { background: var(--cartao); color: var(--tinta); border: 1.5px solid var(--borda); font-size: var(--t-peq); padding: 6px 12px; min-height: 40px; }
a.mono { text-decoration: none; }
.sugestoes-campo .sugestao:first-child { border-color: var(--ag); }
.sugestoes-campo .sugestao:hover, .sugestoes-campo .sugestao:focus-visible { background: var(--ag); color: var(--ag-tinta); border-color: var(--ag); }
.entrada .rodape { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: var(--t-mini); color: var(--tinta-suave); margin: 0; }
.entrada .rodape #contador { margin-left: auto; }
.link { background: none; border: 0; padding: 6px 2px; color: var(--ag-texto); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: inherit; font-weight: 700; min-height: 32px; }
@media (pointer: coarse) { .link { min-height: var(--toque); } }
.sem-borda { border: 0; padding: 0; margin: 0; }
.msg-tutora .quem, .mono, .identidade .nome { font-family: var(--f-titulo); }

/* Treino do Eta: questão oficial com alternativas (certa/errada também por ✓/✗, não só cor) */
.alternativas { display: grid; gap: 8px; margin: 12px 0; }
.alt { display: flex; gap: 10px; align-items: flex-start; width: 100%; min-height: var(--toque); padding: 10px 12px; text-align: left;
  border: 1px solid var(--borda); border-radius: var(--raio-peq); background: var(--cartao); color: var(--tinta); font: inherit; cursor: pointer; }
.alt:hover:not([disabled]) { border-color: var(--ag); }
.alt:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.alt[disabled] { cursor: default; }
.alt .letra { font-weight: 700; min-width: 1.5em; }
.alt .alt-texto p { margin: 0; }
.alt.certa { border: 2px solid var(--ag); background: var(--ag-suave); }
.alt.errada { border: 2px solid var(--perigo); background: var(--perigo-suave); }
.alt .sinal { margin-left: auto; font-weight: 700; }
.resultado-treino { font-weight: 700; margin: 12px 0 4px; }
.e-agora { margin: 16px 0 4px; padding-top: 12px; border-top: 1px solid var(--borda); }
.e-agora h3 { margin: 0 0 4px; font-size: var(--t-base); }
.e-agora p { margin: 0 0 8px; }
.e-agora > .q-titulo { font-weight: 700; margin-top: 12px; }
.previa { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.previa li { border: 1px solid var(--borda); border-radius: var(--raio-peq); padding: 10px 12px; background: var(--cartao); }
.previa .q-titulo { font-weight: 700; display: block; }
.previa .q-trecho { display: block; margin: 4px 0 8px; color: var(--tinta-suave); font-size: var(--t-peq); }
.q-imagem { margin: 12px 0; }
.q-imagem img { display: block; max-width: 100%; height: auto; border-radius: var(--raio-peq); border: 1px solid var(--borda); background: #fff; }