/* ============================================================
   FALAMIGO V8.8 — Modo Lousa (projeção em sala de aula)
   Ativo com <html data-lousa="on">. O lousa.js calcula --lz (o fator
   de ampliação) a partir do tamanho da tela: numa lousa 1920×1080 o
   texto comum vira ~29 px e nada fica abaixo de 28 px.

   Por que "zoom" nos FILHOS da tela, e não na tela inteira: o zoom
   amplia por igual textos, cartões, botões, ícones e ilustrações,
   inclusive os componentes que usam px. Aplicado aos filhos de cada
   área rolável (.screen, .sheet), o scrollTop da área continua em
   pixels de tela, e as rotinas que trazem a pergunta para a vista
   (getBoundingClientRect + scrollTop) seguem corretas.
   ============================================================ */
:root{--lz:1; --lousa-trilho:0px}
html[data-lousa="on"]{--lousa-trilho:96px}

/* ---------- alto contraste ---------- */
html[data-lousa="on"]{
  --ink:#10242b; --ink-2:#1d343c; --muted:#2c434b;
  --line:#5d7a72; --line-soft:#8fa8a0; --control-line:#3f5a54;
  --deep:#1f4f4c; --action:#c9efdf; --action-ink:#0e2a27; --action-edge:#2f6a5a;
  --live-ink:#6a2f1c; --ok-ink:#1f4d31; --warn-ink:#5a3e10;
  --sh-1:none; --sh-2:0 0 0 3px rgba(16,36,43,.35);
}
@media (prefers-color-scheme:dark){
  html[data-lousa="on"]:not([data-theme="light"]){
    --bg:#0f1a20; --bg-2:#14222a; --card:#17262e; --card-2:#1c2e37;
    --ink:#ffffff; --ink-2:#eef5f3; --muted:#d6e2df;
    --line:#9db7b1; --line-soft:#6f8a84; --control-line:#c4d6d2;
    --deep:#c4f1e2; --action:#24433c; --action-ink:#ffffff; --action-edge:#9fd8c3;
    --live-ink:#ffd9c4; --ok-ink:#d9f7e3; --warn-ink:#ffeac0;
  }
}
html[data-lousa="on"][data-theme="dark"]{
  --bg:#0f1a20; --bg-2:#14222a; --card:#17262e; --card-2:#1c2e37;
  --ink:#ffffff; --ink-2:#eef5f3; --muted:#d6e2df;
  --line:#9db7b1; --line-soft:#6f8a84; --control-line:#c4d6d2;
  --deep:#c4f1e2; --action:#24433c; --action-ink:#ffffff; --action-edge:#9fd8c3;
  --live-ink:#ffd9c4; --ok-ink:#d9f7e3; --warn-ink:#ffeac0;
}
html[data-lousa="on"] body{background-image:none; background:var(--bg)}

/* ---------- sem animações ---------- */
html[data-lousa="on"] *,html[data-lousa="on"] *::before,html[data-lousa="on"] *::after{
  animation-duration:.001ms!important; animation-iteration-count:1!important; animation-delay:0s!important;
  transition-duration:.001ms!important; transition-delay:0s!important; scroll-behavior:auto!important;
}
html[data-lousa="on"] .confetti,html[data-lousa="on"] .speaking-halo{display:none!important}

/* ---------- área do app: tela toda, menos o trilho do professor ---------- */
html[data-lousa="on"] #app{
  max-width:none; width:calc(100vw - var(--lousa-trilho)); margin:0;
  border:0; box-shadow:none;
}
html[data-lousa="on"] .screen{
  padding-left:max(24px, env(safe-area-inset-left,0px)); padding-right:24px;
  padding-bottom:calc((var(--tab-h) + 22px) * var(--lz) + env(safe-area-inset-bottom,0px));
}
html[data-lousa="on"] .screen.full{padding-bottom:calc(16px * var(--lz))}
html[data-lousa="on"] .screen > *{zoom:var(--lz)}
/* Com zoom, o Chromium calcula a altura mínima dos itens flexíveis sem a
   ampliação e os encolhe demais (o texto vaza do cartão). Na lousa, os blocos
   da tela não encolhem; só a área de mensagens do chat, que rola por dentro. */
html[data-lousa="on"] .screen > *:not(.chat){flex-shrink:0}
html[data-lousa="on"] .tabbar{
  zoom:var(--lz); max-width:none; width:auto; left:0; transform:none;
  border-radius:0; background:var(--card);
  right:calc(var(--lousa-trilho) / var(--lz));
}
html[data-lousa="on"] .tabbar button{font-size:1rem; color:var(--ink-2)}
html[data-lousa="on"] .tabbar button.on{color:var(--deep)}

/* folha inferior: rolagem própria, conteúdo ampliado */
html[data-lousa="on"] .sheet{
  max-width:min(1500px, calc(100vw - var(--lousa-trilho) - 48px)); width:100%;
  left:calc((100vw - var(--lousa-trilho)) / 2);
  padding:calc(10px * var(--lz)) calc(22px * var(--lz)) calc(22px * var(--lz));
  border:3px solid var(--line);
}
html[data-lousa="on"] .sheet > *{zoom:var(--lz)}
html[data-lousa="on"] .sheet-bg{background:rgba(10,20,25,.6); backdrop-filter:none}
html[data-lousa="on"] .toast{zoom:var(--lz); max-width:min(900px, 80%)}

/* busca global */
html[data-lousa="on"] .fl-busca-panel{
  zoom:var(--lz); width:min(980px, calc(100% - 32px));
  max-height:calc(88vh / var(--lz)); max-height:calc(88dvh / var(--lz));
  margin-top:calc(4vh / var(--lz));
}
html[data-lousa="on"] .fl-busca{right:var(--lousa-trilho)}
html[data-lousa="on"] .fl-busca-meta{max-width:12em}

/* ---------- foco bem visível do fundo da sala ---------- */
html[data-lousa="on"] :focus-visible{
  outline:5px solid #ffb703!important; outline-offset:3px!important;
  box-shadow:0 0 0 9px #10242b!important; border-radius:12px;
}
html[data-lousa="on"] .fl-busca-op.on{outline:4px solid var(--deep); outline-offset:-4px}

/* ---------- traços mais grossos ---------- */
html[data-lousa="on"] .panel,html[data-lousa="on"] .btn,html[data-lousa="on"] .opt,
html[data-lousa="on"] .unit,html[data-lousa="on"] .quick-card,html[data-lousa="on"] .mission-card,
html[data-lousa="on"] .chip,html[data-lousa="on"] .icon-btn{border-width:2px; border-color:var(--line)}
html[data-lousa="on"] .btn.primary{border-color:var(--action-edge)}
html[data-lousa="on"] svg.ic{stroke-width:2.4}
html[data-lousa="on"] .muted{color:var(--ink-2)}

/* ---------- trilho do professor ---------- */
.lousa-trilho{display:none}
html[data-lousa="on"] .lousa-trilho{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  position:fixed; top:0; right:0; bottom:0; width:var(--lousa-trilho); z-index:250;
  padding:14px 8px; background:var(--bg-2); border-left:2px solid var(--line);
  font-family:var(--f-body); color:var(--ink);
}
.lousa-trilho .lousa-marca{font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); text-align:center; line-height:1.2}
.lousa-trilho button{
  width:76px; min-height:68px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  border-radius:16px; border:2px solid var(--line); background:var(--card); color:var(--ink);
  font:800 15px/1.1 var(--f-body); padding:6px 4px; cursor:pointer;
}
.lousa-trilho button b{font-size:24px; line-height:1}
.lousa-trilho button svg.ic{width:26px; height:26px}
.lousa-trilho button[aria-pressed="true"]{background:var(--action); border-color:var(--action-edge)}
.lousa-trilho button:disabled{opacity:.45}
.lousa-trilho .lousa-sair{margin-top:auto; background:var(--live); color:var(--on-live); border-color:var(--live-edge)}
.lousa-trilho .lousa-nivel{font:800 14px/1 var(--f-mono); color:var(--ink-2)}
.lousa-trilho button:focus-visible{outline:5px solid #ffb703; outline-offset:2px}

/* Telas estreitas (celular, tablet em pé): o trilho vira uma faixa no topo. */
@media (max-width:899px){
  html[data-lousa="on"]{--lousa-trilho:0px}
  html[data-lousa="on"] .lousa-trilho{
    flex-direction:row; top:0; left:0; right:0; bottom:auto; width:auto; height:64px; padding:6px 10px;
    border-left:0; border-bottom:2px solid var(--line); justify-content:flex-end;
  }
  html[data-lousa="on"] .lousa-trilho .lousa-marca{margin-right:auto}
  html[data-lousa="on"] .lousa-trilho button{width:auto; min-width:52px; min-height:50px; flex-direction:row; gap:6px; padding:4px 10px}
  html[data-lousa="on"] .lousa-trilho .lousa-sair{margin-top:0}
  html[data-lousa="on"] .lousa-trilho .lousa-rot{display:none}
  html[data-lousa="on"] #app{margin-top:64px; height:calc(100dvh - 64px)}
  html[data-lousa="on"] .fl-busca{top:64px}
}
/* Impressão (ex.: Relatório): o papel não é a lousa. Sem ampliação nem trilho; o --lz inline
   (normal) perde para este !important. O piso de letra inline é desfeito pelo lousa.js (beforeprint). */
@media print{
  html[data-lousa="on"]{--lz:1!important; --lousa-trilho:0px!important}
  html[data-lousa="on"] .screen > *,html[data-lousa="on"] .sheet > *,html[data-lousa="on"] .tabbar,
  html[data-lousa="on"] .toast,html[data-lousa="on"] .fl-busca-panel{zoom:1!important}
  html[data-lousa="on"] #app{width:auto!important; margin:0!important}
  .lousa-trilho{display:none!important}
}