/* ==========================================================================
   José Jacaré (T-066): painel lateral de chat (qualquer tela), tela #/jose-jacare
   e cartão da persona no Admin. Sóbrio como o resto: bordas finas, superfícies
   lisas, azul só na ação principal, sem gradiente e sem sombra forte.
   ========================================================================== */

/* ---------- Painel lateral ----------
   T-085 (AG-37 e AG-38): de 80rem (1280 px, LARGURA_PAINEL_AO_LADO do js) para cima o painel fica ao lado do
   conteúdo: a coluna e o rodapé ganham a largura dele como margem e nada fica coberto. Abaixo disso ele é um diálogo,
   com o fundo escuro que fecha no clique. Os toasts não cobrem o painel nem a gaveta: ficam à esquerda do painel
   quando há espaço e, na tela estreita, por baixo do painel e da gaveta. */
:root { --jacare-largura: min(26rem, 100vw); }
.jacare-painel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 55;
  width: var(--jacare-largura);
  display: flex; flex-direction: column;
  border-left: 1px solid hsl(var(--borda)); background: hsl(var(--superficie));
  box-shadow: var(--sombra-lateral);
}
.jacare-painel[hidden] { display: none; }
.jacare-fundo { position: fixed; inset: 0; z-index: 54; background: hsl(var(--fundo) / .7); }
.jacare-fundo[hidden] { display: none; }
@media (min-width: 80rem) {
  body.jacare-aberto .coluna, body.jacare-aberto .rodape { margin-right: var(--jacare-largura); }
  /* a analise do cartao do Dashboard (painel lateral) abre ao lado do José, nao por baixo dele */
  body.jacare-aberto .painel-lateral { right: var(--jacare-largura); }
  .jacare-fundo { display: none; }
}
body.jacare-aberto .toasts { right: calc(var(--jacare-largura) + 1rem); }
/* abaixo de 52rem (832 px, LARGURA_TOASTS_AO_LADO do js) nao cabe toast ao lado do painel: ele fica por baixo, e o erro
   do polegar aparece dentro do chat */
@media (max-width: 51.99rem) {
  body.jacare-aberto .toasts { right: 1rem; z-index: 50; }
}
body:has(.gaveta--aberta) .toasts { z-index: 50; }
.jacare-painel__topo { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid hsl(var(--borda)); }
.jacare-painel__titulo { margin: 0; font-size: .9375rem; }
.jacare-painel__sub { margin: 0; font-size: .75rem; color: hsl(var(--texto-suave)); }
.jacare-painel__corpo { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: .75rem 1rem 1rem; }
.jacare-painel__corpo .chat { flex: 1; min-height: 0; }

/* ---------- Chat ---------- */
/* T-075: a conversa rola por dentro da área de mensagens (altura limitada pelo painel ou pelo cartão da
   tela), o campo fica preso embaixo e cresce até 6 linhas (a altura vem do js, pelo CSSOM) */
.chat { display: flex; flex-direction: column; gap: .625rem; min-height: 0; height: 100%; }
.chat__rolagem { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.chat__mensagens {
  list-style: none; margin: 0; padding: 0 .25rem 0 0;
  display: flex; flex-direction: column; gap: .5rem;
  flex: 1 1 auto; min-height: 6rem; overflow-y: auto; overscroll-behavior: contain;
}
.chat__mensagens:focus-visible { outline: none; box-shadow: var(--anel-foco); border-radius: var(--raio-p); }
.chat__msg { max-width: 92%; min-width: 0; padding: .5rem .75rem; border: 1px solid hsl(var(--borda)); border-radius: var(--raio-p); background: hsl(var(--card)); font-size: .8125rem; line-height: 1.5; overflow-wrap: anywhere; }
.chat__msg--usuario { align-self: flex-end; background: hsl(var(--card-alto)); }
.chat__msg--jose { align-self: flex-start; }
.chat__msg--erro { align-self: flex-start; border-color: hsl(var(--vermelho) / .6); }
.chat__autor { margin: 0 0 .125rem; font-size: .6875rem; font-weight: 600; color: hsl(var(--texto-suave)); }
.chat__texto { margin: 0; white-space: pre-line; overflow-wrap: anywhere; color: hsl(var(--texto)); }
/* texto do José: parágrafos, lista e a linha da fonte montados nó a nó (nunca HTML do modelo) */
.chat__texto--jose { display: grid; gap: .375rem; white-space: normal; }
.chat__par { margin: 0; }
.chat__texto strong { font-weight: 600; }
.chat__lista { margin: 0; padding-left: 1.125rem; display: grid; gap: .25rem; }
.chat__lista li { overflow-wrap: anywhere; }
.chat__fonte-linha { margin: 0; font-size: .75rem; color: hsl(var(--texto-suave)); }
/* "digitando": três pontos discretos enquanto o José responde (o leitor de tela ouve o status) */
.chat__digitando { display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; color: hsl(var(--texto-suave)); }
.chat__digitando[hidden] { display: none; }
.chat__pontos { display: inline-flex; gap: .1875rem; }
.chat__pontos span { width: .3125rem; height: .3125rem; border-radius: 50%; background: hsl(var(--texto-suave)); opacity: .3; animation: chat-ponto 1.2s ease-in-out infinite; }
.chat__pontos span:nth-child(2) { animation-delay: .15s; }
.chat__pontos span:nth-child(3) { animation-delay: .3s; }
@keyframes chat-ponto { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
/* quem subiu para reler não é puxado para baixo: aparece o botão para voltar à última mensagem */
.chat__ir-fim { position: absolute; left: 50%; bottom: .5rem; transform: translateX(-50%); box-shadow: var(--sombra-card); }
.chat__ir-fim[hidden] { display: none; }
/* resposta cujo texto veio da reescrita experimental por IA: marca visível, sóbria */
.chat__marca { margin: .375rem 0 0; padding-left: .5rem; border-left: 2px solid hsl(var(--amarelo)); font-size: .6875rem; font-weight: 600; color: hsl(var(--texto-suave)); }
.chat__acoes { display: flex; align-items: center; gap: .25rem; margin-top: .375rem; flex-wrap: wrap; }
.chat__polegar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; padding: 0;
  border: 1px solid transparent; border-radius: var(--raio-p);
  background: transparent; color: hsl(var(--texto-suave));
  transition: background-color var(--transicao), color var(--transicao), border-color var(--transicao);
}
.chat__polegar:hover { background: hsl(var(--card-alto)); color: hsl(var(--texto)); }
.chat__polegar:focus-visible { box-shadow: var(--anel-foco); }
.chat__polegar[aria-pressed="true"] { border-color: hsl(var(--borda-forte)); background: hsl(var(--card-alto)); color: hsl(var(--texto)); }
.chat__polegar:disabled { opacity: .45; cursor: not-allowed; }
.chat__polegar svg { width: .9375rem; height: .9375rem; }
.chat__fonte { margin-left: .25rem; font-size: .75rem; }
.chat__status { margin: 0; min-height: 1.125rem; font-size: .75rem; color: hsl(var(--texto-suave)); }
.chat__status:empty { min-height: 0; }
.chat__sugestoes { display: flex; flex-wrap: wrap; gap: .375rem; flex: none; }
.chat__sugestoes[hidden] { display: none; }
.chat__form { display: grid; gap: .25rem; flex: none; }
.chat__linha-campo { display: flex; align-items: flex-end; gap: .5rem; }
.chat__linha-campo .botao { flex: none; }
/* o campo cresce com o texto até 6 linhas e depois rola; sem alça de redimensionar */
.chat__campo { flex: 1 1 auto; min-width: 0; min-height: 0; line-height: 1.5; resize: none; overflow-y: hidden; }
.chat__campo--rolando { overflow-y: auto; }
.chat__dica { margin: 0; font-size: .6875rem; color: hsl(var(--texto-suave)); }

/* ---------- Tela #/jose-jacare ---------- */
/* o chat vem logo abaixo do título e tem a altura do espaço que sobra na janela (--jacare-altura-chat, medida pelo
   js; o valor de reserva cobre o título de uma linha): o campo aparece sem rolar e a conversa rola por dentro. A
   coluna ao lado (insights do dia e perguntas recentes) tem a mesma altura e rola por dentro; abaixo de 1100 px ela
   desce para baixo do chat, com a altura do conteúdo */
.jacare-tela { display: grid; gap: .875rem; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.jacare-tela > * { min-width: 0; }
.jacare-tela__chat { display: flex; flex-direction: column; min-height: 0; height: var(--jacare-altura-chat, clamp(20rem, calc(100vh - 11rem), 60rem)); }
.jacare-tela__chat .chat { flex: 1 1 auto; min-height: 0; }
.jacare-tela__lado {
  display: flex; flex-direction: column; gap: .875rem; min-width: 0; min-height: 0;
  height: var(--jacare-altura-chat, clamp(20rem, calc(100vh - 11rem), 60rem));
  overflow-y: auto; overscroll-behavior: contain; padding-right: .125rem;
}
.jacare-tela__lado > * { flex: none; min-width: 0; }
.jacare-tela__lado .insights__lista { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1099px) {
  .jacare-tela { grid-template-columns: minmax(0, 1fr); }
  .jacare-tela__lado { height: auto; overflow: visible; padding-right: 0; }
  .jacare-tela__lado .insights__lista { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
}
.recentes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.recentes:focus-visible { outline: none; box-shadow: var(--anel-foco); border-radius: var(--raio-p); }
.recentes__item { display: grid; gap: .25rem; min-width: 0; padding: .625rem .75rem; border: 1px solid hsl(var(--borda)); border-radius: var(--raio-p); background: hsl(var(--card)); }
.recentes__pergunta { margin: 0; font-size: .8125rem; font-weight: 500; overflow-wrap: anywhere; }
.recentes__resumo { margin: 0; font-size: .75rem; color: hsl(var(--texto-suave)); overflow-wrap: anywhere; }
.recentes__meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; font-size: .6875rem; color: hsl(var(--texto-suave)); }

/* ---------- Insights do dia (tela do José e cartão do Dashboard) ---------- */
/* o tipo vem escrito e numa borda à esquerda na cor do tema: sem selo colorido */
.insights__nota { margin: 0 0 .5rem; font-size: .75rem; }
.insights__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.insights__lista:empty { display: none; }
.insights__item {
  display: grid; gap: .25rem; align-content: start;
  padding: .625rem .75rem; border: 1px solid hsl(var(--borda)); border-left: 3px solid hsl(var(--borda-forte));
  border-radius: var(--raio-p); background: hsl(var(--card));
}
.insights__item--alerta { border-left-color: hsl(var(--vermelho)); }
.insights__item--oportunidade { border-left-color: hsl(var(--verde)); }
.insights__tipo { margin: 0; font-size: .6875rem; font-weight: 600; letter-spacing: .02em; color: hsl(var(--texto-suave)); }
.insights__titulo { margin: 0; font-size: .8125rem; font-weight: 600; color: hsl(var(--texto)); overflow-wrap: anywhere; }
.insights__texto { margin: 0; font-size: .75rem; line-height: 1.5; color: hsl(var(--texto-suave)); overflow-wrap: anywhere; }
.insights__acoes { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .25rem; }
.insights__fonte { font-size: .75rem; }
.insights--compacto .insights__lista { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }

/* ---------- Persona no Admin ---------- */
.persona-estilo { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.persona-versoes { max-height: 18rem; overflow-y: auto; }
.persona-versoes .lista-itens__item { cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .chat__polegar { transition: none; }
  .chat__pontos span { animation: none; opacity: .6; }
}