/* ---------- A LOUSA ----------
   Redesenhada na id0104 para seguir o design do site: quadro de cantos
   retos, fio de 1px, fundo liso (sem as manchas de "giz mal apagado" nem a
   sombra), barra de ferramentas em abas segmentadas, balões e campo de
   pergunta retangulares com fio, sem sombra nem inclinação.
   O que NÃO mudou (pedido do usuário): a FONTE DA ESCRITA — Kalam nas contas
   e nos balões, CMU nos rótulos da figura — e o FUNCIONAMENTO. Toda
   propriedade funcional daqui foi copiada literalmente da versão anterior:
   posições e camadas (inset, z-index), pointer-events, cursores,
   touch-action, a seleção do marcador, o bloco "explodido" que guarda a
   ordem para o Reiniciar. A área de desenho ocupa TODA a área livre do
   painel; o <canvas> de anotação é `inset:0` sobre ela. */
.figure-panel .math-figure__drawing {
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  aspect-ratio: auto;        /* anula a proporção fixa da regra base */
  min-height: 0;
  border: 1px solid var(--quadro-moldura);
  border-radius: 0;
  overflow: hidden;
  color: var(--quadro-giz);  /* currentColor do SVG = cor do giz */
  background: var(--quadro-bg);
}
/* Figura maior no canto superior esquerdo + a resolução escrita à mão,
   alinhada num bloco homogêneo ao lado (não fragmentada). */
.fig-board {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 20px;
  padding: 18px 20px;
  overflow: auto;
}
/* Sem desenho, as contas ficam maiores e sozinhas — mas continuam ANCORADAS À
   ESQUERDA, não centralizadas: o bloco de contas tem sempre a mesma origem,
   com ou sem figura ao lado. */
.fig-board--contas {
  align-items: flex-start;
  justify-content: flex-start;
  padding: 24px 28px;
}
.fig-board--contas .fig-solution {
  flex: 0 1 auto;
  font-size: clamp(19px, 2.2vw, 26px);
}
/* O invólucro do modo Organizar (id0055) entra na MESMA vaga do flex que o
   <svg> ocupava, por isso os dois dividem a regra — trocar um pelo outro não
   pode mexer no layout da lousa. */
.figure-panel .fig-board > svg,
.figure-panel .fig-board > .fig-envolucro {
  position: static;          /* anula inset:0/absolute da regra base */
  flex: 0 0 auto;
  width: clamp(288px, 57%, 408px);
  height: auto;
  aspect-ratio: 360 / 260;   /* mantém o desenho sem distorção */
  overflow: visible;
  color: var(--quadro-giz);
}
/* id0126b: na MATRIZ o desenho é a própria conta (o pedido: as contas à
   esquerda, a formulação à direita) e ele é largo — o produto numa linha
   passa de 500 unidades. Ganha mais da lousa que as outras figuras. A
   proporção vem do próprio desenho (inline, pelo motor). */
.figure-panel .fig-board > svg.math-figure__svg--matriz,
.figure-panel .fig-board > .fig-envolucro:has(> .math-figure__svg--matriz) { width: clamp(288px, 62%, 640px); }
.figure-panel .fig-board > .fig-envolucro > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* A ESCRITA — fonte, tamanho, entrelinha e o respiro de giz intocados. */
.fig-solution {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;                  /* entrelinha DENTRO de um passo */
  font-family: 'Kalam', 'Playpen Sans', 'Caveat', cursive;
  font-size: 19px;
  line-height: 1.45;
  color: var(--quadro-giz);
  letter-spacing: .2px;
  /* Giz não tem borda dura: um respiro claríssimo tira o aspecto de fonte. */
  text-shadow: 0 0 1px var(--quadro-poeira);
}
/* Cada fórmula ocupa UMA linha só (bloco homogêneo, sem corte no meio da conta).
   Se a linha mais longa não couber, quem se ajusta é a fonte do bloco inteiro
   (ajustarFonteDoQuadro no app.js) — nunca a quebra de linha. */
.fig-solution__line { white-space: nowrap; }
/* Exceção: a linha de "Dados:" e a descrição do "Passo N:" são TEXTO, não
   fórmula. Deixá-las quebrar evita que a linha de dados — a mais longa, porque
   apresenta cada grandeza por extenso — encolha a fonte do quadro inteiro. */
.fig-solution__line--rotulo { white-space: normal; }
/* Respiro ENTRE passos, bem maior que a entrelinha: é o que faz o quadro ser
   lido em blocos ("Dados", "Passo 1", "Passo 2") e não como um parágrafo só. */
.fig-solution__line--passo { margin-top: 15px; }

/* id0126/E70: no split-view do desktop (painel na largura padrão, não largo
   nem cheio) o desenho tem largura MÍNIMA de 288px (`clamp` logo abaixo) e
   não encolhe (`flex: 0 0 auto`) — sobrando pouco ou nada para a coluna de
   texto (`flex:1 1 auto`), que então é espremida a poucos pixels.
   `ajustarFonteDoQuadro` (app.js) tenta caber o texto reduzindo a fonte até
   62%, e o resultado nesse ponto é um amontoado ilegível, não a lousa
   funcionando pequena — exatamente o "aglomerado" relatado. A causa é medida
   pela largura errada: o `@media` de celular abaixo já resolve isto (empilha
   em vez de espremer lado a lado), mas só pela largura da JANELA — no
   split-view a janela pode ser grande (um notebook) com o PAINEL estreito.
   O `@container` mede a largura certa (a do próprio painel, via
   `.figure-panel__body`) e reaplica o mesmo remédio já testado. Em celular
   o painel ocupa a tela cheia, então largura do painel = largura da janela:
   o container query já cobre os dois casos, sem duplicar a regra. */
@container figpainel (max-width: 620px) {
  .figure-panel .math-figure__drawing { border-width: 1px; }
  .fig-board {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 12px;
  }
  .figure-panel .fig-board > svg,
  .figure-panel .fig-board > .fig-envolucro { width: min(360px, 96%); }
  /* A matriz empilhada usa a largura toda: ela é larga e o texto dela é conta. */
  .figure-panel .fig-board > svg.math-figure__svg--matriz,
  .figure-panel .fig-board > .fig-envolucro:has(> .math-figure__svg--matriz) { width: 100%; }
  .fig-solution { font-size: 17px; }
  .fig-board--contas .fig-solution { font-size: 19px; }
  .fig-solution__line { max-width: 100%; overflow-x: auto; }
}

/* Cores do giz — NOTAÇÃO, não decoração:
   vermelho = rótulo de etapa · azul = incógnita intermediária · verde = resposta */
.calc-r { color: var(--giz-vermelho); font-weight: 700; }
.calc-b { color: var(--giz-azul);     font-weight: 700; }
.calc-g { color: var(--giz-verde);    font-weight: 700; }
/* Resposta final: 10% maior que o resto do quadro, SEM círculo (id0107 —
   pedido do usuário: o contorno em volta da conta atrapalhava a leitura). */
.calc-result {
  display: inline-block;
  font-size: 1.1em;
}
/* Matriz em bracket, no MEIO do texto — chat (`figMatrizHtml`) e lousa
   (`figMatrizDom`) montam a MESMA marcação, então uma regra só cobre as duas
   (id0126c). Corrige o modelo escrevendo o resultado como array cru
   ("[[10, 1], [-2, 13]]"): a garantia de formatar é do motor (E8/E9), não do
   prompt — sempre que esse texto aparecer, vira isto aqui. Sem cor própria:
   `currentColor` acompanha o span em volta (verde na resposta, giz no resto). */
.mat-matriz {
  display: inline-flex;
  align-items: stretch;
  vertical-align: middle;
  margin: 0 .18em;
}
.mat-matriz__colchete {
  width: .32em;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}
.mat-matriz__colchete--esq { border-left: 2px solid currentColor; }
.mat-matriz__colchete--dir { border-right: 2px solid currentColor; }
/* Na LOUSA a matriz da resposta é igual à do desenho (id0126d, pedido do
   usuário: "estrutura idêntica"): números no giz BRANCO — não no verde do
   {{g|}} em volta — e um quadrado fechado cercando a matriz inteira. */
.fig-solution .mat-matriz {
  color: var(--quadro-giz);
  font-weight: 400;
  padding: .12em .22em;
  border: 2px solid var(--quadro-giz);
}
.mat-matriz__grade {
  display: inline-grid;
  align-items: center;
  justify-items: end;
  row-gap: .1em;
  column-gap: .55em;
  padding: .08em .32em;
  font-variant-numeric: tabular-nums;
}
/* A LETRA da alternativa correta numa questão de múltipla escolha (id0107)
   — {{a|E}}. Ela, e só ela, sai circulada: verde, à mão (torto como giz), e
   com folga por dentro para "respirar". Depois dela, um espaço largo antes
   da resposta, para as duas se lerem separadas. */
.calc-alternativa {
  display: inline-block;
  color: var(--giz-verde);
  font-weight: 700;
  font-size: 1.15em;
  line-height: 1;
  padding: 7px 14px 8px;
  margin: 4px 1.4em 4px 2px;
  border: 2.6px solid var(--giz-verde);
  border-radius: 47% 53% 50% 50% / 58% 54% 46% 42%;
  transform: rotate(-2deg);
}
/* A FÓRMULA de um conceito (id0105) — {{f|…}}. Pedido do usuário: fórmula
   NUNCA como resposta final (verde e circulada). Sai em VERMELHO, ENQUADRADA
   num retângulo reto, e na MESMA fonte das contas do chat (--font-mat:
   Computer Modern com letras em itálico e números/operadores em pé). É a
   única escrita da lousa fora da Kalam, e é de propósito: fórmula se lê como
   fórmula. Sem o respiro de giz (text-shadow), que borraria a serifa. */
.calc-f {
  display: inline-block;
  padding: 3px 12px 4px;
  border: 2px solid var(--giz-vermelho);
  border-radius: var(--raio-reto);
  color: var(--giz-vermelho);
  font-family: var(--font-mat);
  font-style: normal;
  font-weight: 400;
  font-size: 1.15em;
  letter-spacing: 0;
  line-height: 1.3;
  text-shadow: none;
}
/* ---------- Balões de dúvida ----------
   O aluno marca um trecho da conta e pergunta; a resposta vem num balão ligado
   por uma linha até a marcação. Ordem das camadas dentro de .math-figure__drawing:
   conteúdo → <canvas> do giz → conectores (só traço) → balões (interativos). */

/* Com o marcador ligado o canvas deixa de capturar o ponteiro (feito no JS),
   e o cursor avisa que ali se seleciona texto. O corpo do balão entra na
   lista desde a id0060: a resposta de uma dúvida é grifável igual às contas. */
.lousa-marcando .fig-solution,
.lousa-marcando .fig-balao__corpo { cursor: text; }
/* id0145: os textos e números do DESENHO também são grifáveis; o resto do
   desenho (traços) não seleciona nada. */
.lousa-marcando .math-figure__svg text { cursor: text; user-select: text; -webkit-user-select: text; }
.lousa-marcando .fig-solution__line::selection,
.lousa-marcando .fig-solution__line *::selection,
.lousa-marcando .fig-balao__corpo::selection,
.lousa-marcando .fig-balao__corpo *::selection {
  background: var(--giz-azul);
  color: var(--quadro-bg);
}
/* A cabeça continua sendo só alça de arrasto: grifar ali não ancoraria nada
   (o texto dela é um resumo cortado do trecho, não a resposta). */
.lousa-marcando .fig-balao__cabeca { user-select: none; }

/* Traço de marca-texto: um sublinhado grosso e translúcido, como giz passado
   por cima. A cor vem inline, do balão correspondente. */
.fig-marcado {
  border-radius: 0;
  box-shadow: inset 0 -0.62em 0 rgba(128, 128, 128, .22);
  padding: 0 1px;
}
.fig-marcado--previa { opacity: .75; }
.fig-marcado[data-balao-minimizado="sim"] {
  cursor: pointer; border-radius: 2px; outline: 1px dashed currentColor;
  outline-offset: 2px; user-select: none;
}
.fig-marcado[data-balao-minimizado="sim"]:focus-visible {
  outline: 2px solid currentColor; outline-offset: 3px;
}

.fig-conectores {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;      /* é só traço: nunca rouba o clique */
  overflow: visible;
  z-index: 2;
}

/* A camada não intercepta nada; só os balões dentro dela é que respondem. */
.fig-baloes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.fig-baloes > * { pointer-events: auto; }

/* O balão: retângulo com fio de 2px na cor do giz (a cor do balão, quando
   houver, vem inline do app.js), sobre a camada de cima do quadro. Sem
   sombra e sem a inclinação de antes. A exportação em PNG lê o raio daqui
   (figDesenharCaixaBalao), então o arquivo baixado sai igual à tela. */
.fig-balao {
  position: absolute;
  width: min(240px, 62%);
  display: flex;
  flex-direction: column;
  padding: 8px 60px 10px 11px;
  border: 2px solid var(--quadro-giz);
  border-radius: 0;
  background: var(--quadro-bg-2);
  font-family: 'Kalam', 'Playpen Sans', 'Caveat', cursive;
  color: var(--quadro-giz);
}
.fig-balao--arrastando { transform: scale(1.02); }
.fig-balao--esperando .fig-balao__corpo { opacity: .6; font-style: italic; }
/* Dúvida sobre a dúvida (id0060): o balão que responde sobre a resposta de
   OUTRO sai com a borda tracejada. O "↳" na cabeça (posto pelo app.js) faz o
   mesmo no texto. */
.fig-balao--filho { border-style: dashed; }

/* A cabeça é a alça de arrasto: mostra o trecho marcado, na cor do conector. */
.fig-balao__cabeca {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 3px;
  cursor: grab;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  touch-action: none;        /* senão o toque rola a lousa em vez de arrastar */
}
.fig-balao--arrastando .fig-balao__cabeca { cursor: grabbing; }
.fig-balao__corpo { min-height: 0; overflow: auto; font-size: 16px; line-height: 1.35; }
/* Fechar: quadrado de 28px no canto (era um "×" solto de 19px). */
.fig-balao__fechar {
  position: absolute; top: 0; right: 0;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: none; border: none; border-radius: 0; cursor: pointer;
  color: var(--quadro-giz);
  font-family: var(--font);
  font-size: 18px; line-height: 1; padding: 0;
  opacity: .7;
}
.fig-balao__fechar:hover { opacity: 1; background: var(--surface-2); }
.fig-balao__minimizar {
  position: absolute; top: 0; right: 28px; width: 28px; height: 28px;
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 0;
  background: none; color: var(--quadro-giz); font: 20px/1 var(--font);
  cursor: pointer; opacity: .72;
}
.fig-balao__minimizar:hover { opacity: 1; background: var(--surface-2); }
.fig-balao__minimizar:focus-visible,
.fig-balao__redimensionar:focus-visible {
  outline: 2px solid #9a6a08; outline-offset: 2px;
}
.fig-balao__redimensionar {
  position: absolute; left: -8px; bottom: -8px; width: 20px; height: 20px;
  padding: 0; display: grid; place-items: center;
  border: 2px solid var(--quadro-bg-2); border-radius: 50%;
  background: #efbd3d; cursor: nesw-resize; touch-action: none; z-index: 2;
  box-shadow: 0 0 0 1px rgba(117,77,0,.32), 0 1px 4px rgba(0,0,0,.28);
}
.fig-balao__redimensionar span {
  width: 6px; height: 6px; border: 1.5px solid #684804;
  border-top: 0; border-right: 0;
}
.fig-balao--redimensionando { user-select: none; }
.fig-balao[hidden] { display: none !important; }

/* Campo de pergunta, aberto logo abaixo da marcação: fio no azul do
   marcador, retângulo, sem sombra. O que o aluno DIGITA é interface (fonte
   do site); o trecho marcado, à esquerda, é escrita (Kalam). */
.fig-pergunta {
  position: absolute;
  display: flex; align-items: center; gap: 6px;
  padding: 6px;
  border: 1px solid var(--giz-azul);
  border-radius: 0;
  background: var(--quadro-bg-2);
  max-width: min(340px, 92%);
}
.fig-pergunta__alvo {
  font-family: 'Kalam', 'Playpen Sans', 'Caveat', cursive;
  font-size: 13px; color: var(--giz-azul);
  max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fig-pergunta__campo {
  flex: 1 1 auto; min-width: 0;
  min-height: 34px;
  background: var(--quadro-bg);
  border: 1px solid var(--text-faint);
  border-radius: 0;
  padding: 5px 8px;
  color: var(--quadro-giz);
  font-family: var(--font); font-size: 14px;
}
.fig-pergunta__campo:focus { outline: none; border-color: var(--giz-azul); }
.fig-pergunta__campo::placeholder { color: var(--text-muted); opacity: 1; }
.fig-pergunta__ok {
  flex: 0 0 auto;
  min-height: 34px;
  background: var(--giz-azul); color: var(--quadro-bg);
  border: none; border-radius: 0; padding: 5px 10px;
  font-family: var(--font-mono); font-size: var(--fs-rotulo); font-weight: var(--peso-rotulo);
  letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer;
}
.fig-pergunta__nao {
  flex: 0 0 auto;
  width: 28px; height: 34px;
  background: none; border: none; cursor: pointer;
  color: var(--quadro-giz); opacity: .7; font-size: 18px; line-height: 1;
}
.fig-pergunta__nao:hover { opacity: 1; }

/* ---------- Consulta x → y no gráfico (id0106) ----------
   Abre com o gráfico de função SELECIONADO no modo Organizar: o aluno digita
   um x e o motor devolve o y, marcando o par ordenado no gráfico em amarelo
   tracejado (a marca é SVG, dentro do gráfico — ver figConsultaDesenhar). O
   painel é interface: fonte do site, retângulo com fio amarelo. */
.fig-consulta {
  position: absolute;
  z-index: 6;                 /* acima dos itens organizáveis (4) e do "explodir" (5) */
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  width: min(340px, 92%);
  padding: 6px;
  border: 1px solid var(--giz-amarelo);
  border-radius: 0;
  background: var(--quadro-bg-2);
  font-family: var(--font);
}
.fig-consulta[hidden] { display: none; }
.fig-consulta__rotulo {
  flex: 0 0 auto;
  color: var(--giz-amarelo);
  font-family: var(--font-mat);
  font-size: 17px;
}
.fig-consulta__campo {
  flex: 1 1 90px; min-width: 0;
  min-height: 34px;
  background: var(--quadro-bg);
  border: 1px solid var(--text-faint);
  border-radius: 0;
  padding: 5px 8px;
  color: var(--quadro-giz);
  font-family: var(--font); font-size: 14px;
}
.fig-consulta__campo:focus { outline: none; border-color: var(--giz-amarelo); }
.fig-consulta__campo::placeholder { color: var(--text-muted); }
.fig-consulta__ok {
  flex: 0 0 auto;
  min-height: 34px;
  background: var(--giz-amarelo); color: var(--quadro-bg);
  border: none; border-radius: 0; padding: 5px 10px;
  font-family: var(--font-mono); font-size: var(--fs-rotulo); font-weight: var(--peso-rotulo);
  letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer;
}
.fig-consulta__fechar {
  flex: 0 0 auto;
  width: 28px; height: 34px;
  background: none; border: none; cursor: pointer;
  color: var(--quadro-giz); opacity: .7; font-size: 18px; line-height: 1;
}
.fig-consulta__fechar:hover { opacity: 1; }
.fig-consulta__res {
  flex: 1 1 100%;
  margin: 0;
  color: var(--quadro-giz);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
}
.fig-consulta__res:empty { display: none; }
.fig-consulta__res--erro { color: var(--perigo); }

/* ---------- Modo Organizar (id0054) ----------
   Selecionar a figura ou as contas (em bloco ou linha por linha) e
   movê-las/expandi-las pela lousa. Contorno tracejado reto e alça quadrada. */
.fig-organizavel {
  z-index: 4;
  cursor: grab;
  touch-action: none;         /* senão o toque rola a lousa em vez de arrastar */
  outline: 1px dashed transparent;
  outline-offset: 4px;
  border-radius: 0;
  transition: outline-color var(--transition);
}
/* A pista de que dá para pegar só existe DENTRO do modo — fora dele, os
   mesmos elementos continuam com a aparência estática de sempre. */
.lousa-organizando .fig-organizavel:hover { outline-color: var(--text-muted); }
.fig-organizavel--selecionado {
  outline-color: var(--accent);
  outline-style: solid;
  cursor: grabbing;
}
/* A alça de redimensionar só aparece no item selecionado. */
.fig-organizavel__alca {
  display: none;
  position: absolute;
  right: -9px; bottom: -9px;
  width: 16px; height: 16px;
  border-radius: 0;
  background: var(--accent);
  border: 2px solid var(--quadro-bg);
  cursor: nwse-resize;
  touch-action: none;
}
.fig-organizavel--selecionado .fig-organizavel__alca { display: block; }

/* Botão que quebra o bloco de contas em linhas independentes. Fica preso no
   canto do próprio bloco — sai da lousa junto com ele se o aluno arrastar
   antes de clicar. Some depois do clique (ver explodirLinhas). */
.fig-solution__explodir {
  position: absolute;
  top: -12px; right: -6px;
  background: var(--quadro-bg-2);
  color: var(--quadro-giz);
  border: 1px solid var(--text-faint);
  border-radius: 0;
  padding: 4px 9px;
  font-family: var(--font-mono);
  font-size: var(--fs-rotulo);
  font-weight: var(--peso-rotulo);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-shadow: none;
  cursor: pointer;
  white-space: nowrap;
  z-index: 5;
}
.fig-solution__explodir:hover { border-color: var(--accent); color: var(--accent); }

/* Bloco depois de explodido em linhas: some da tela mas CONTINUA no DOM,
   guardando a ordem original — é dele que o botão de reiniciar (id0055)
   devolve cada linha ao lugar. Removê-lo tornaria o reset impossível sem
   remontar o painel, e remontar apagaria o giz do aluno. */
.fig-solution--explodido {
  visibility: hidden;
  pointer-events: none;
  height: 0;
  overflow: hidden;
}

/* ---------- Abas de ITEM (id0109) ----------
   Questão com itens a), b), c)…: uma aba por item, acima da moldura, no mesmo
   desenho da barra de ferramentas abaixo (células coladas por fio, a ativa
   PREENCHIDA). Alinhada à esquerda, como a escrita da lousa. */
.fig-itens {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-self: flex-start;
  gap: 1px;
  border: 1px solid var(--quadro-moldura);
  background: var(--quadro-moldura);
}
.fig-itens__aba {
  min-width: 44px; height: 36px;
  padding: 0 12px;
  border: 0; border-radius: 0;
  background: var(--quadro-bg-2);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.fig-itens__aba:hover { background: var(--surface-2); }
.fig-itens__aba--ativa,
.fig-itens__aba--ativa:hover { background: var(--text); color: var(--bg); }
.fig-itens__aba:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ---------- Barra de ferramentas da lousa (id0125) ----------
   A LOUSA segue reta; a BARRA arredondou (pedido do Beny). Os modos moram
   num segmento com polegar de borracha (.segmento, abaixo); as ações de um
   clique são botões redondos ao lado. A barra mantém os 46px de altura de
   antes (e os 92px das duas linhas no celular): a área de desenho não muda
   de tamanho — o retrato da lousa confere. */
.figure-panel .math-figure__toolbar {
  position: relative;
  width: auto; max-width: 100%;
  align-self: center;
  flex: 0 0 auto;
  justify-content: center;
  gap: 1px 8px;
  min-height: 46px;
  padding: 0;
  border: 0;
  background: none;
}
.barra-acoes { display: flex; align-items: center; justify-content: center; gap: 2px; }
.barra-acao {
  position: relative;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--raio-circulo);
  background: none;
  color: var(--text);
  cursor: pointer;
  flex: 0 0 auto;
  transition: background-color var(--transition), color var(--transition),
              opacity var(--transition), visibility var(--transition);
}
.barra-acao:hover { background: var(--surface-2); }
.barra-acao:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.barra-acao:disabled { opacity: .5; cursor: progress; }
/* O botão de cores só existe para o Lápis. Escondido, ele GUARDA o lugar
   (visibility, não display): a barra não pula de largura ao trocar de modo. */
.barra-cor { visibility: hidden; opacity: 0; }
.barra-cor--visivel { visibility: visible; opacity: 1; }
.barra-cor[aria-expanded="true"] { background: var(--surface-2); }
.barra-cor__pingo {
  position: absolute; right: 8px; bottom: 8px;
  width: 11px; height: 11px;
  border: 2px solid var(--bg);
  border-radius: var(--raio-circulo);
}
@media (max-width: 640px) {
  /* Celular: o segmento ocupa a linha de cima e as ações a de baixo; o vão
     de 2px entre elas fecha os 92px da barra de duas linhas de antes. */
  .figure-panel .math-figure__toolbar { width: 100%; row-gap: 2px; }
  .figure-panel .math-figure__toolbar .segmento { width: 100%; }
  .figure-panel .math-figure__toolbar .barra-acoes { width: 100%; }
}

/* ---------- Segmento com polegar de borracha (id0125) ----------
   Porte do RubberSegment (React Bits) para o app: o trilho no tom de cima da
   superfície, o polegar é a inversão de sempre das abas (fundo --text, tinta
   --bg). O polegar é uma cópia dos itens recortada pelo clip-path que o JS
   põe (criarSegmento); por isso trilho e polegar têm a mesma grade. */
.segmento {
  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  vertical-align: middle;
  padding: 3px;
  border-radius: var(--raio-controle);
  background: var(--surface-2);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.segmento__item {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; min-width: 46px;
  margin: 0; padding: 0 12px;
  border: 0;
  border-radius: var(--raio-polegar);
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--fs-controle-compacto);
  font-weight: 560;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  transition: color var(--transition), transform var(--dur-clique) var(--ease-saida);
}
.segmento__item[aria-checked="true"] { cursor: grab; }
.segmento[data-segurando], .segmento[data-segurando] .segmento__item { cursor: grabbing; }
.segmento__item[data-apertado] { transform: scale(.96); }
.segmento__item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .segmento__item[aria-checked="false"]:hover { color: var(--text); }
}
.segmento__polegar {
  position: absolute;
  inset: 3px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  background: var(--text);
  color: var(--bg);
  pointer-events: none;
}
.segmento__copia { color: inherit; cursor: default; }
.segmento--lousa > .segmento__item[data-valor="marcador"] {
  position: relative; z-index: 1; color: #bb8210;
  background: linear-gradient(115deg, transparent 15%, rgba(255, 215, 92, .55) 48%, transparent 78%);
  background-size: 220% 100%;
  animation: fig-marcador-brilho 2.8s ease-in-out infinite;
}
.segmento--lousa:has(> .segmento__item[data-valor="marcador"][aria-checked="true"]) .segmento__polegar {
  background: linear-gradient(120deg, #f4ca58, #d99b19 48%, #ffe99d 72%, #c48711);
  color: #392708; box-shadow: 0 0 13px rgba(230, 177, 49, .55), inset 0 1px 2px rgba(255,255,255,.7);
}
.segmento--lousa:has(> .segmento__item[data-valor="marcador"][aria-checked="true"]) > .segmento__item[data-valor="marcador"]::after {
  content: 'Ilumine a dúvida!'; position: absolute; z-index: 8;
  left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%);
  padding: 6px 10px; border: 1px solid #e4b638; border-radius: 8px;
  background: #fff7dc; color: #704b08; box-shadow: 0 3px 12px rgba(94,66,12,.2);
  font: 600 12px/1.2 var(--font); white-space: nowrap; pointer-events: none;
}
@keyframes fig-marcador-brilho {
  0%, 100% { filter: drop-shadow(0 0 1px rgba(232,180,44,.5)); background-position: 100% 50%; }
  50% { filter: drop-shadow(0 0 6px rgba(246,193,52,.9)); background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .segmento--lousa > .segmento__item[data-valor="marcador"] { animation: none; }
}
/* As abas do seletor de cor: o polegar claro sobre o trilho, como no Figma. */
.segmento--abas { display: grid; width: 100%; }
.segmento--abas .segmento__polegar { background: var(--seg-polegar-suave); color: var(--text); }
.segmento--abas .segmento__item[aria-checked="false"] { color: var(--text-muted); }

/* ---------- Seletor de cor do giz (id0125) ----------
   Do "Color Picker UI design" (Figma Community), nos tokens do app: o claro e
   o escuro do Figma são os dois temas daqui. Mora na barra (dentro da lousa),
   em cima dela, com a seta apontando para o botão de cores. */
.seletor-cor {
  position: absolute;
  bottom: calc(100% + 12px);
  z-index: 30;
  width: min(340px, calc(100vw - 32px));
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--raio-destaque);
  box-shadow: var(--sombra-flutuante);
  text-align: start;
}
.seletor-cor::after {
  content: "";
  position: absolute;
  top: 100%; left: var(--seta-x, 50%);
  width: 14px; height: 14px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transform: translate(-50%, -50%) rotate(45deg);
}
.seletor-cor__miolo {
  display: flex; flex-direction: column; gap: 12px;
  padding: 12px 14px 14px;
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: var(--raio-destaque);
}
.seletor-cor__topo { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; }
.seletor-cor__titulo { margin: 0; font-size: 17px; font-weight: 650; text-align: center; grid-column: 2; }
.seletor-cor__conta-gotas { grid-column: 1; color: var(--accent); }
.seletor-cor__fechar { grid-column: 3; background: var(--surface-2); color: var(--text-muted); }
/* A mesma altura nas três abas (o seletor não pula ao trocar): a dos três
   canais e do hex, que é a vista mais alta. */
.seletor-cor__area { height: 232px; }
.seletor-cor__grade {
  display: grid; grid-template-rows: repeat(10, 1fr);
  height: 100%;
  border-radius: var(--raio-p);
  overflow: hidden;
}
.seletor-cor__linha { display: grid; grid-template-columns: repeat(12, 1fr); }
.seletor-cor__celula { padding: 0; border: 0; border-radius: var(--raio-reto); cursor: pointer; }
.seletor-cor__celula--atual { outline: 2px solid var(--surface); outline-offset: -3px; }
.seletor-cor__celula:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.seletor-cor__espectro {
  position: relative;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}
.seletor-cor__espectro canvas { display: block; width: 100%; height: 100%; border-radius: var(--raio-p); }
.seletor-cor__espectro:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--raio-p); }
.seletor-cor__alca {
  position: absolute;
  width: 26px; height: 26px;
  border: 3px solid var(--surface);
  border-radius: var(--raio-circulo);
  outline: 1px solid var(--border-strong);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.seletor-cor__controles { display: flex; flex-direction: column; gap: 6px; height: 100%; justify-content: center; }
.seletor-cor__canal--hex { display: flex; align-items: center; justify-content: space-between; }
.seletor-cor__rotulo { display: block; font-size: var(--fs-etiqueta); color: var(--text-muted); }
.seletor-cor__faixa { display: flex; align-items: center; gap: 10px; }
.seletor-cor__numero {
  width: 56px; height: 40px;
  padding: 0 6px;
  border: 0;
  border-radius: var(--raio-p);
  background: var(--surface-2);
  color: var(--text);
  font: inherit; font-size: var(--fs-controle-compacto);
  font-variant-numeric: tabular-nums;
  text-align: center;
  -moz-appearance: textfield;
}
.seletor-cor__numero::-webkit-inner-spin-button,
.seletor-cor__numero::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.seletor-cor__hex { width: 92px; }
.seletor-cor__numero:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* As faixas: o input de 40px (o alvo) com o trilho de 26px desenhado dentro. */
.seletor-cor__range {
  flex: 1 1 auto; min-width: 0;
  height: 40px; margin: 0;
  background: none;
  -webkit-appearance: none; appearance: none;
  cursor: pointer;
}
.seletor-cor__range::-webkit-slider-runnable-track {
  height: 26px;
  border-radius: var(--raio-capsula);
  background: var(--faixa, var(--surface-2));
}
.seletor-cor__range::-moz-range-track {
  height: 26px;
  border-radius: var(--raio-capsula);
  background: var(--faixa, var(--surface-2));
}
/* A opacidade: o degradê por cima do xadrez que diz "transparente". */
.seletor-cor__range--alfa::-webkit-slider-runnable-track {
  background: var(--faixa), repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface) 0 50%) 0 0 / 12px 12px;
}
.seletor-cor__range--alfa::-moz-range-track {
  background: var(--faixa), repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface) 0 50%) 0 0 / 12px 12px;
}
.seletor-cor__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px;
  border: 3px solid var(--surface);
  border-radius: var(--raio-circulo);
  background: transparent;
  outline: 1px solid var(--border-strong);
}
.seletor-cor__range::-moz-range-thumb {
  width: 20px; height: 20px;
  border: 3px solid var(--surface);
  border-radius: var(--raio-circulo);
  background: transparent;
  outline: 1px solid var(--border-strong);
}
.seletor-cor__range:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--raio-capsula); }
.seletor-cor__porcento { width: 48px; text-align: end; font-weight: 650; font-variant-numeric: tabular-nums; }
.seletor-cor__pe {
  display: grid; grid-template-columns: 60px 1fr; gap: 12px; align-items: stretch;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.seletor-cor__atual {
  border-radius: var(--raio-superficie);
  overflow: hidden;
  background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface) 0 50%) 0 0 / 12px 12px;
}
.seletor-cor__atual span { display: block; width: 100%; height: 100%; }
.seletor-cor__amostras { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; justify-items: center; }
.seletor-cor__amostra {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--raio-circulo);
  background: currentColor;
  cursor: pointer;
}
.seletor-cor__amostra--atual { outline: 2px solid var(--text); outline-offset: 2px; }
.seletor-cor__amostra:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.seletor-cor__amostra--mais { background: var(--surface-2); color: var(--text-muted); }
.seletor-cor__amostra--mais .icon { width: 18px; height: 18px; }

/* A Mãozinha: o quadro mostra que pode ser pego e arrastado. */
.lousa-mao .fig-board { cursor: grab; }
.lousa-mao.lousa-arrastando .fig-board { cursor: grabbing; }

.math-figure__drawing {
  position: relative;
  width: 360px;
  max-width: 100%;
  aspect-ratio: 360 / 260;   /* mantém SVG e canvas alinhados ao redimensionar */
}
.math-figure__drawing svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--text);        /* currentColor dos traços herda o tema */
}
.math-figure__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}
.math-figure__toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  background: var(--bg-subtle);
  flex-wrap: wrap;
}
@media (max-width: 640px) {
  .math-figure__drawing { width: 100%; }
}

/* Anexos exibidos dentro de uma mensagem enviada */
.msg__files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.msg--user .msg__files { justify-content: flex-end; }
.msg__file {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--raio-controle); padding: 6px 10px; font-size: 13px;
  max-width: 220px;
}
.msg__file img {
  width: 100%; max-width: 200px; border-radius: var(--raio-p); display: block;
}
.msg__file--img { padding: 0; border: none; background: none; }
.msg__file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }