/* ---------- Sidebar (histórico de conversas) ---------- */
.sidebar {
  flex: 0 0 auto;
  width: 268px;
  display: flex;
  flex-direction: column;
  background: var(--bg-subtle);
  border-right: 1px solid var(--border);
  padding: 0 10px 12px;
  gap: 4px;
  transition: margin-left var(--transition);
}
/* Recolher no desktop */
.app.sidebar-collapsed .sidebar { margin-left: -268px; }

/* A faixa da marca tem a MESMA altura da topbar (12 + 40 + 12 + fio = 65px)
   e o fio de baixo corre de ponta a ponta: sidebar e topbar leem como UMA
   barra de três colunas — marca | conversa | ações (redesign, id0100). */
.sidebar__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 65px;
  margin: 0 -10px 10px;
  padding: 0 14px 0 16px;
  border-bottom: 1px solid var(--border);
}
.sidebar__close { display: none; }   /* só aparece no mobile */

/* "Nova conversa" é a única ação da sidebar e se separa da LISTA — abrir uma
   conversa nova e trocar de conversa antiga são coisas diferentes. Desde a
   id0100 no desenho da ação secundária: fio de 3:1 (é o fio que diz que
   aquilo é um botão), com o "+" no accent; arredondado desde o Lote C. */
.sidebar__new {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--text-faint);
  background: transparent;
  color: var(--text);
  border-radius: var(--raio-controle);
  padding: 10px 12px;
  font-family: var(--font);
  font-size: var(--fs-controle);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--tracking-ui);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.sidebar__new:hover { background: var(--surface-2); border-color: var(--text-muted); }
.sidebar__new .icon { color: var(--accent); }
.sidebar__new .icon { width: 18px; height: 18px; }

/* "Conversas" como índice de seção: fio no topo, rótulo de um lado e
   o número do outro. O "01" é conteúdo de CSS com texto alternativo vazio —
   enfeite, fora do leitor de tela e do textContent. */
.sidebar__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 16px 6px 8px;
  padding-top: 10px;
  border-top: var(--fio);
  color: var(--text-muted);
  font-family: var(--font);
  font-size: var(--fs-etiqueta);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--tracking-ui);
}
.sidebar__label::after { content: "01" / ""; font-variant-numeric: tabular-nums; }

/* ---------- Sidebar de linha (id0052) ----------
   Reprodução do LineSidebar do React Bits. O componente é React e este projeto
   não tem npm nem bundler (mesma situação da id0027), então o que vale é a
   ASSINATURA visual dele, que no fonte é `borderLeft: 1px solid` na pilha de
   itens mais um indicador que acompanha o item ativo.

   O trilho é `border-left` na PRÓPRIA lista, e não um pseudo-elemento
   posicionado: dentro de um container que rola, um `::before` com top/bottom
   fica preso ao topo do conteúdo e sobe para fora da vista na rolagem. A borda
   é pintada na caixa da lista e continua inteira, que é o que se quer. */
.conv-list {
  position: relative;
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex; flex-direction: column;
  gap: 2px;
  border-left: 1px solid var(--border);
  padding: 2px 2px 2px 14px;
  margin-left: 8px;
}
.conv-list__empty {
  color: var(--text-faint); font-size: 13px;
  padding: 8px; margin: 0;
}

/* O indicador que desliza. Fica ABSOLUTO dentro da lista de propósito: assim
   ele rola junto com os itens — marcar um item que saiu da vista e deixar o
   traço parado no meio da lista seria mentira. */
.conv-list__linha {
  position: absolute;
  left: -1px; top: 0;
  width: 3px;
  background: var(--accent);
  height: 0;
  opacity: 0;
  pointer-events: none;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1),
              height    .3s cubic-bezier(.4, 0, .2, 1),
              opacity   .2s ease,
              background .2s ease;
}
/* Prévia no hover: mesma peça, mais apagada. É o que o componente original faz
   ao passar o mouse antes de clicar. */
.conv-list__linha--previa { background: var(--text-faint); }

.conv-item {
  display: flex; align-items: center;
  border-radius: var(--raio-p);
  transition: background var(--transition);
}
.conv-item:hover { background: var(--surface-2); }
/* Sem preenchimento no ativo: quem marca a seleção agora é o traço no trilho.
   Manter os dois competindo deixava a lista pesada. */
.conv-item--active .conv-item__title { color: var(--text); font-weight: 550; }
.conv-item--active .conv-item__icon { opacity: 1; color: var(--accent); }

.conv-item__open {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 9px;
  background: none; border: none; cursor: pointer;
  color: var(--text-muted);
  min-height: 40px;            /* alvo de toque (auditoria id0102: tinha 38) */
  padding: 9px 6px 9px 10px;
  font-size: 14px; text-align: left;
}
.conv-item__icon { width: 16px; height: 16px; flex: 0 0 auto; opacity: .8; }
/* id0134e: cérebro "pensando" na conversa que está sendo respondida. Pulsa
   devagar; o bloco global de prefers-reduced-motion zera a animação. */
.conv-item__pensando {
  width: 16px; height: 16px; flex: 0 0 auto;
  margin-left: auto;
  color: var(--accent);
  animation: conv-pensando 1.6s ease-in-out infinite;
}
@keyframes conv-pensando {
  0%, 100% { opacity: .45; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.06); }
}
.conv-item__title {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conv-item__del {
  flex: 0 0 auto;
  background: none; border: none; cursor: pointer;
  color: var(--text-faint);
  /* 40×40: a lixeira media 32×28 (auditoria id0102). */
  display: grid; place-items: center;
  width: 40px; height: 40px;
  padding: 0; margin-right: 0;
  border-radius: var(--raio-circulo);
  opacity: 0;
  transition: opacity var(--transition), color var(--transition), background var(--transition);
}
.conv-item:hover .conv-item__del,
.conv-item--active .conv-item__del { opacity: 1; }
.conv-item__del .icon { width: 16px; height: 16px; }
/* Apagar conversa acende em VERMELHO, não no accent: com a paleta do giz no
   chrome (id0079) a cor virou semântica, e um botão destrutivo que fica azul
   — a cor de "ação normal" em todo o resto do app — mente sobre o que faz. */
.conv-item__del:hover { color: var(--atencao); background: color-mix(in srgb, var(--atencao) 12%, transparent); }

/* ---------- Rodapé da sidebar: engrenagem de conta (Fase 1 de usuários) ----------
   Fica no canto inferior porque a `.conv-list` acima é `flex: 1 1 auto` e
   empurra tudo o que vier depois para a base — sem `position: absolute`,
   que brigaria com a rolagem da lista.
   `position: relative` aqui é a âncora do menu, que abre PARA CIMA. */
.sidebar__rodape {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 8px 2px 0;
  margin-top: 6px;
  border-top: 1px solid var(--border);
}
/* E2: `hidden` sozinho perde pro `display: flex` acima — o rodapé some por
   completo quando não há sessão (app.js: pintarUsuarioNaTela). */
.sidebar__rodape[hidden] { display: none; }

/* Etapa 2, Fase 5: links para os Termos e o Aviso, com ou sem conta. */
.sidebar__legal {
  flex: 0 0 auto;
  display: flex;
  gap: 14px;
  padding: 8px 4px 2px;
  font-size: 12px;
}
.sidebar__legal a { color: var(--text-faint); text-decoration: none; }
.sidebar__legal a:hover { color: var(--text-muted); text-decoration: underline; }
.sidebar__config { color: var(--text-muted); }
.sidebar__config:hover { color: var(--text); }

/* Menu da engrenagem. Abre para CIMA (bottom: 100%) porque o botão mora na
   base da tela — para baixo ele sairia da janela. Hoje tem um item só; a
   largura mínima é para o próximo item não fazer o menu pular de tamanho. */
.conta-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 50;
  min-width: 168px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 5px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--raio-superficie);
  box-shadow: var(--sombra-flutuante);
}
/* E2 de novo: sem isto o `display: flex` acima deixaria o menu SEMPRE
   aberto — que foi exatamente a armadilha do overlay da id0029. */
.conta-menu[hidden] { display: none; }

.conta-menu__item {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  background: none;
  border: none;
  border-radius: var(--raio-p);
  min-height: 40px;            /* "Sair" media 37 (auditoria id0102) */
  padding: 8px 10px;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.conta-menu__item .icon { width: 17px; height: 17px; }
.conta-menu__item[hidden] { display: none; }
.conta-menu__item:hover { background: var(--surface-2); }
/* Vermelho por pedido do usuário: sair tem de saltar aos olhos. Mesmo
   vermelho de INTERFACE já usado em .auth-form__erro e no status suspenso
   do painel de admin — nunca o --giz-vermelho, que é NOTAÇÃO da lousa
   (rótulo de etapa) e não pode ganhar um segundo significado. */
.conta-menu__item--sair { color: var(--perigo); }
.conta-menu__item--sair:hover { background: color-mix(in srgb, var(--perigo) 12%, transparent); }

/* Fundo escuro do drawer (mobile) */
.sidebar-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 30;
}

/* Topbar */
/* Centro da barra de três colunas (ver .sidebar__top): a conversa à esquerda
   e as ações à direita. 12 + 40 + 12 + fio = 65px, a altura da faixa da marca. */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 65px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  flex: 0 0 auto;
  z-index: 5;
}
.topbar__left { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* Os botões de ícone da barra não encolhem: com título longo o flex os
   espremia a 38px de largura (auditoria id0102). Quem encolhe é o título. */
.topbar .btn--icon { flex: 0 0 auto; }
.topbar__title {
  font-size: 15px; font-weight: 620; letter-spacing: -.015em;
  margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar__brand { display: flex; align-items: center; gap: 0; align-self: stretch; }
/* O boneco (id0145) fica de pé no fio de baixo da faixa e apoia a mão no
   "F" de Facin.me: sem gap, a palma é a borda direita do PNG. O PNG vem
   recortado rente ao desenho, com o tronco encurtado, em 3x da altura. */
.brand__mark {
  display: block;
  height: 54px; width: auto;
  flex: 0 0 auto;
  align-self: flex-end;
  filter: var(--traco-desenho);  /* escuro: o traço preto vira branco; claro: intacto */
}
.brand__mark--carinha { height: 30px; align-self: center; }   /* admin (id0145) */
.brand__name { font-family: var(--font-display); font-weight: var(--peso-titulo); font-size: 18px; letter-spacing: -.03em;
  position: relative; top: -3px; /* a palma do boneco cai no meio do "F" (id0145) */ }
/* Facin.me (id0103): o domínio em destaque, SEMPRE na cor oposta à do nome
   (nome claro, ".me" no accent). */
.brand__dominio { color: var(--accent); }
.topbar__actions { display: flex; align-items: center; gap: 6px; }
/* `hidden` sozinho perde pro `display: flex` acima (mesma armadilha do
   .roda-overlay, ver o comentário lá) — #userArea (Fase 1 de usuários)
   usa esta classe e alterna `hidden` puro, sem tocar em style.display. */
.topbar__actions[hidden] { display: none; }
/* Mesma armadilha: #adminLink é `.btn` (display: inline-flex) e some via
   `hidden` puro quando o usuário não é admin (app.js:pintarUsuarioNaTela). */
#adminLink[hidden] { display: none; }

/* Área de chat: contexto de posicionamento do overlay de drag-and-drop.
   Assim o overlay cobre APENAS as mensagens, nunca a barra de digitação. */
.chat-area {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Réguas de coluna da abertura: REMOVIDAS na id0103 a pedido do usuário —
   atrás do texto e dos componentes, atrapalhavam a leitura. A abertura é só
   o fundo preto (--bg). */

/* Conversa (área rolável) */
.conversation {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
.messages {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 24px 18px 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Composer (base): hoje só segura o aviso de cota e o paywall (a barra de
   digitar saiu com a home antiga). Fundo transparente. */
.composer-wrap {
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  background: transparent;
  padding: 6px 18px calc(14px + env(safe-area-inset-bottom));
}
.composer {
  max-width: var(--maxw);
  margin: 0 auto;
}

/* ---------- Cota do plano (id0086) ----------
   Três níveis, e NENHUM em vermelho: o contador não pode dar ao aluno medo
   de perguntar (quem paga e economiza pergunta é pior para o negócio do que
   quem usa tudo). Até ~70% nem aparece (app.js: nivelDaCota).
   Sem `display` na classe base de propósito — E2: o [hidden] do HTML tem de
   continuar valendo. A guarda explícita abaixo é para quem um dia puser. */
.composer__cota {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: var(--fs-etiqueta);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--tracking-ui);
  line-height: 1.4;
}
.composer__cota::before { content: "> " / ""; color: var(--accent); }
.composer__cota[hidden] { display: none; }
/* ≥ 90%: mais legível e com a data de renovação no texto. */
.composer__cota--visivel { color: var(--text); }
/* 100%: a frase é longa e é a notícia da tela — volta à prosa (caixa alta
   em mono cansaria), num bloco de fio, sem o ">". */
.composer__cota--esgotada {
  margin: 0;
  padding: 14px 16px;
  font-family: var(--font);
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--raio-controle);
}
.composer__cota--esgotada::before { content: none; }

/* Linha informativa no menu da engrenagem — não é item clicável. */
.conta-menu__info {
  margin: 0;
  padding: 8px 10px 6px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-muted);    /* --text-faint dava 3,82:1 no --surface (auditoria id0102) */
  border-bottom: 1px solid var(--border);
}
.conta-menu__info[hidden] { display: none; }

/* ---------- Roda de ajustes (id0057) ----------
   Adaptação do PieChart que o usuário mandou (MUI): donut com furo, cantos
   arredondados, rótulo dentro do arco, rótulo no centro e as outras fatias
   esmaecendo no hover. React não roda neste projeto — o que veio foi o desenho,
   feito com o SVG à mão do resto do app (ver rodaMontar no app.js). */
.roda-overlay {
  position: fixed; inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  /* Véu SÓLIDO desde a id0101 (era 72% + desfoque de 3px): sobre um tema
     quase preto, escurecer pouco não separava nada — o chat seguia legível
     atrás da roda, e era o desfoque que o apagava. Sem desfoque, quem apaga é
     a opacidade: a 94% do --bg o texto atrás some, e a roda vira o único
     plano da tela. */
  background: color-mix(in srgb, var(--bg) 94%, transparent);
}
/* `hidden` sozinho perderia para o `display: flex` acima. */
.roda-overlay[hidden] { display: none; }
/* O diálogo recebe o foco ao abrir (para o Esc e o Tab), mas ele não é um
   controle — anel de foco aqui só sujaria a tela. */
.roda-overlay:focus { outline: none; }

.roda-caixa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}
/* 612px = os 360 originais +70% (pedido do usuário). O viewBox continua 360, e
   quem cresce é a caixa — então rótulo, cantos e contornos crescem junto, na
   mesma proporção. Os limites de viewport ficam porque a roda mais a descrição
   passariam de uma tela baixa: `vh` é o que garante que ela nunca sai. */
.roda-svg { width: min(612px, 86vw, 64vh); }
.roda { display: block; width: 100%; height: auto; overflow: visible; }

/* A descrição da opção sob o cursor. Altura reservada de propósito: sem ela a
   roda pulava para cima e para baixo a cada fatia que o aluno passasse.
   O NOME sai na cor da própria fatia (posto pelo app.js) — é o que amarra o
   texto ao desenho, e era esse destaque que faltava. */
.roda-desc {
  min-height: 3.2em;
  max-width: min(612px, 86vw);
  margin: 0;
  text-align: center;
  font-size: 1.04rem;
  line-height: 1.4;
  color: var(--text);
}
.roda-desc strong { font-weight: 800; }

.roda-fatia {
  cursor: pointer;
  /* O salto tem uma sobra de mola (o cubic-bezier passa de 1) — é o que dá a
     sensação de "pulou" em vez de "escorregou". O brilho e a perda de cor vão
     no tempo padrão do app, para a fatia acender junto e não depois.
     `opacity` saiu da lista: desde que apagar virou tirar a cor, quem faz as
     duas coisas é o `filter`, e transicionar uma propriedade que ninguém mais
     muda é linha morta. */
  transition: filter var(--transition),
              transform 260ms cubic-bezier(.34, 1.4, .64, 1);
}
.roda-fatia__txt {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  text-anchor: middle;
  pointer-events: none;      /* o clique é da fatia inteira, não da palavra */
}
/* `fade: 'global'` do MUI, na forma que o usuário pediu: a fatia apontada fica
   COLORIDA e as OUTRAS perdem a cor (cinza), em vez de todas apagarem juntas.

   As duas regras são DISJUNTAS de propósito — o esmaecimento exclui, no próprio
   seletor, quem está sob o cursor ou com o foco. A primeira versão apagava com
   `opacity` e deixava o realce para uma regra separada, e aí a de apagar tinha
   especificidade MAIOR (`.roda:hover .roda-fatia`, 4 classes, contra
   `.roda .roda-fatia:hover`, 3) e vencia também na fatia apontada: ficava tudo
   apagado, que foi exatamente o que o usuário viu na tela. Seletores que não se
   sobrepõem tiram a disputa do caminho em vez de a resolver por peso.

   `:focus-within` para o teclado ter o mesmo destaque do mouse, e
   `:not(.roda--mini)` porque na miniatura da barra não há o que destacar — lá
   as três fatias juntas SÃO a informação. */
.roda:not(.roda--mini):hover .roda-fatia:not(:hover):not(:focus-visible),
.roda:not(.roda--mini):focus-within .roda-fatia:not(:hover):not(:focus-visible) {
  filter: grayscale(1) brightness(.55);
}
/* A fatia apontada ACENDE e SALTA para fora do anel, ao longo da própria
   bissetriz (--fatia-dx/dy vêm do app.js). O foco de teclado faz o mesmo: quem
   navega sem mouse precisa do mesmo retorno. */
.roda .roda-fatia:hover,
.roda .roda-fatia:focus-visible {
  transform: translate(var(--fatia-dx, 0), var(--fatia-dy, 0));
  filter: brightness(1.12) drop-shadow(0 0 9px var(--fatia-cor, transparent));
}
/* A miniatura da barra não salta nem acende: lá as três fatias juntas SÃO a
   informação, e mexer nelas ao passar o mouse só faria o botão tremer. */
.roda--mini .roda-fatia:hover { transform: none; filter: none; }
/* A opção JÁ escolhida leva contorno — sem isso não dá para saber, ao abrir um
   ajuste, qual das fatias está valendo. O contorno usa a TINTA da própria
   fatia (posta pelo app.js em --fatia-tinta): contorno de cor fixa não serve,
   porque um claro sumiria no branco do desenho e um escuro sumiria no neutro.
   Escolhida = traço cheio; foco de teclado = tracejado, para os dois estados
   aparecerem juntos sem se confundir. */
.roda-fatia--ativa path {
  stroke: var(--fatia-tinta, var(--text));
  stroke-width: 3;
}
.roda-fatia:focus { outline: none; }
.roda-fatia:focus-visible path {
  stroke: var(--fatia-tinta, var(--text));
  stroke-width: 3;
  stroke-dasharray: 6 4;
}

/* O furo do meio: na raiz é só o título; dentro de um ajuste vira o voltar. */
.roda-centro circle { fill: var(--bg); }
.roda-centro__txt {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  fill: var(--text);
  text-anchor: middle;
  pointer-events: none;
}
.roda-centro__voltar { font-size: 13px; font-weight: 500; fill: var(--text-muted); }
.roda-centro--voltar { cursor: pointer; }
.roda-centro--voltar:hover .roda-centro__voltar { fill: var(--accent); }
.roda-centro circle,
.roda-centro__txt,
.roda-centro__voltar { transition: stroke var(--transition), fill var(--transition); }

/* ---- Suavidade (id0058) ----
   Três entradas, todas curtas: abrir a roda, trocar de nível e trocar o texto
   da descrição. Trocar de nível reanima porque `pintarRoda` cria um <svg> novo
   a cada vez — nó novo reinicia a animação, sem controle em JS.
   O bloco de `prefers-reduced-motion` no fim deste arquivo já zera tudo isto
   para quem pediu menos movimento; nada aqui precisa repetir a regra. */
@keyframes rodaFundoEntra { from { opacity: 0; } to { opacity: 1; } }
@keyframes rodaEntra {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes rodaTextoEntra {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
.roda-overlay { animation: rodaFundoEntra 160ms ease-out; }
.roda:not(.roda--mini) {
  animation: rodaEntra 240ms cubic-bezier(.2, .8, .3, 1);
  transform-origin: 50% 50%;
}
.roda-desc__in { display: inline-block; animation: rodaTextoEntra 200ms ease-out; }
.roda-centro--voltar circle { stroke: var(--border-strong); stroke-width: 1.5; }
.roda-centro--voltar:hover circle { stroke: var(--accent); }
.roda-centro--voltar:hover .roda-centro__txt { fill: var(--accent); }
.roda-centro--voltar:focus { outline: none; }
.roda-centro--voltar:focus-visible circle { stroke: var(--accent); stroke-width: 2.5; }

/* A miniatura do botão da barra: sem texto, sem hover próprio (quem reage é o
   botão), e um contorno em cada fatia para o neutro escuro não sumir sobre o
   fundo da barra de digitação. */
.roda--mini { width: 22px; height: 22px; }
.roda--mini .roda-fatia { cursor: inherit; }
.roda--mini .roda-fatia path { stroke: var(--border-strong); stroke-width: 1; }