/* ============================================================
   SAN & CO. — css/panteao.css
   HUD de avatares quadrados, timeline de raciocínio/execução (padrão
   Cursor/Claude), feed de conversa e barra de comando multimodal.

   Cada agente aplica sua cor via --agente, custom property inline
   escrita pelo panteao.js a partir de AGENTES. Nada aqui hardcoda hex
   de agente — trocar cor ou nome é mexer só no JS.
   ============================================================ */

/* ---------- TOKENS PRÓPRIOS DO PANTEÃO -------------------------
   A sidebar/gaveta/popovers sempre usaram uma paleta mais escura de
   propósito, independente de --bg/--surface globais — por isso precisam
   dos próprios tokens por tema, em vez de herdar os de main.css direto.
   Reagem ao MESMO atributo [data-tema] que main.css já usa (ver lá pra
   entender os 3 temas: Sistema/Escuro/Claro). */
:root {
  --pt-painel-bg:     #06090C;
  --pt-painel-borda:  #161B22;
  --pt-popover-bg:    #0D1218;
  --pt-popover-borda: #1F2937;
  --pt-borda-media:   #30363D;
  --pt-well:          #05070A;
  --pt-borda-fraca:   #2D3748;
  --pt-surface:       #1E293B;
  --pt-pill-bg:       rgba(22, 27, 34, 0.9);   /* fundo do "pill" onde se digita */

  /* "realce" — hover/toque em cima de uma superfície escura. Em branco
     translúcido aqui faz sentido (clareia); no Claro precisa ser preto
     translúcido (escurece), senão fica praticamente invisível num fundo
     já claro. Era rgba(255,255,255,X) escrito direto em ~10 lugares. */
  --realce-fraco: var(--realce-fraco);
  --realce:       var(--realce);
  --realce-forte: var(--realce-forte);
}
:root[data-tema="escuro"] {
  --pt-painel-bg:     #000000;
  --pt-painel-borda:  #1A1A1A;
  --pt-popover-bg:    #0A0A0A;
  --pt-popover-borda: #262626;
  --pt-borda-media:   #333333;
  --pt-well:          #000000;
  --pt-borda-fraca:   #262626;
  --pt-surface:       #141414;
  --pt-pill-bg:       rgba(18, 18, 18, 0.9);
}
:root[data-tema="claro"] {
  --pt-painel-bg:     #FFFFFF;
  --pt-painel-borda:  #E4E4E7;
  --pt-popover-bg:    #FFFFFF;
  --pt-popover-borda: #D4D4D8;
  --pt-borda-media:   #D4D4D8;
  --pt-well:          #EFEFED;
  --pt-borda-fraca:   #E4E4E7;
  --pt-surface:       #F7F7F5;
  --pt-pill-bg:       rgba(255, 255, 255, 0.92);

  --realce-fraco: rgba(0, 0, 0, 0.03);
  --realce:       rgba(0, 0, 0, 0.05);
  --realce-forte: rgba(0, 0, 0, 0.07);
}

[data-module="panteao"] .view__head { margin-bottom: 16px; }

/* Fixo no topo, abaixo do cabeçalho global "SAN & CO." — mesmo motivo
   estrutural da barra de digitação/gaveta/sidebar: #app-content não tem
   rolagem própria (é a PÁGINA inteira que rola, ver main.css), então
   qualquer conteúdo normal ali dentro é arrastado quando o navegador tenta
   "revelar" o campo de texto focado. Ficando fixo, esse cabeçalho não tem
   como ser arrastado — não importa o que a rolagem da página faça.
   Replica manualmente o centering de largura que .app-content já faz
   (max-width + margin auto + padding lateral), porque, fora dali, essa
   centralização não é herdada de graça. */
.panteao-head {
  position: fixed;
  top: calc(var(--header-h, 56px) + env(safe-area-inset-top));
  left: 0;
  right: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: var(--shell-max, 720px);
  margin: 0 auto;
  padding: 14px var(--gutter, 20px) 10px;
  background: var(--bg);
}

.panteao-head__direita {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

/* placeholder visual — sem contagem real ainda; o valor chega com o
   backend (aiOrchestrator.js), que vai definir também o limite */
.token-contador {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex: 0 0 auto;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  white-space: nowrap;
  font: inherit;
  cursor: pointer;
  transition: border-color var(--fast) var(--ease);
}
@media (hover: hover) {
  .token-contador:hover { border-color: var(--border-strong); }
}
.token-contador__rotulo {
  color: var(--muted-dim);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.token-contador__valor {
  color: var(--muted);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

/* botão de menu (hambúrguer) que abre a barra lateral de conversas */
.panteao-head__titulo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.panteao-head__titulo .view__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 1. HUD — SÍMBOLOS FLUTUANTES ------------------------ */
/* Sem card, sem borda, sem fundo — cada agente é só o glifo brilhando
   sobre o vazio, com uma deriva bem discreta para não parecer estático.
   O glifo em si é SVG (não CSS puro como na versão anterior): trocar o
   símbolo de um agente por um SVG próprio é só trocar a constante
   SVG_SIMBOLO_* em panteao.js — nenhuma classe aqui precisa mudar. */

/* tamanho normal — hoje só usado se o HUD for solicitado fora do
   cabeçalho algum dia; a versão do dia a dia é a compacta abaixo */
.panteao-hud {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  gap: 8px;
}

/* compacta: cabe no cabeçalho, ao lado do contador de tokens — glifo
   pequeno, sem nome nem texto de estado por baixo (viraria poluição
   visual nesse espaço apertado); o nome ainda existe no DOM, só
   escondido, porque outras telas/leitores de tela podem precisar dele */
.panteao-hud--compacta {
  display: flex;
  gap: 14px;
}
.panteao-hud--compacta .agente-simbolo { width: auto; gap: 0; }
.panteao-hud--compacta .agente-simbolo__glifo { width: 22px; height: 22px; }
.panteao-hud--compacta .agente-simbolo__nome,
.panteao-hud--compacta .agente-simbolo__estado { display: none; }

.agente-simbolo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 76px;
  -webkit-tap-highlight-color: transparent;
}

.agente-simbolo__glifo {
  width: 38px;
  height: 38px;
  color: var(--agente);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--agente) 45%, transparent));
  animation: flutuarSimbolo 5s ease-in-out infinite;
  transition: filter var(--slow) var(--ease);
}
.agente-simbolo__glifo svg { width: 100%; height: 100%; }

/* cada símbolo flutua num compasso levemente diferente, pra não
   parecerem sincronizados como um relógio */
.agente-simbolo:nth-child(1) .agente-simbolo__glifo { animation-delay: 0s; }
.agente-simbolo:nth-child(2) .agente-simbolo__glifo { animation-delay: -1.6s; }
.agente-simbolo:nth-child(3) .agente-simbolo__glifo { animation-delay: -3.2s; }

@keyframes flutuarSimbolo {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

.agente-simbolo__nome {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color var(--base) var(--ease);
}

.agente-simbolo__estado {
  min-height: 11px;
  color: var(--agente);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* estado ativo: o brilho intensifica, o nome acende — sem card, sem
   contorno, só a luz do próprio símbolo mudando. Reforçado — a versão
   anterior era sutil demais pra notar de relance. */
.agente-simbolo.is-responding .agente-simbolo__glifo {
  filter:
    drop-shadow(0 0 6px var(--agente))
    drop-shadow(0 0 16px var(--agente))
    drop-shadow(0 0 32px color-mix(in srgb, var(--agente) 75%, transparent));
  animation: flutuarSimbolo 5s ease-in-out infinite, pulsoSimbolo 1.3s ease-in-out infinite;
}
.agente-simbolo.is-responding .agente-simbolo__nome { color: var(--agente); }

@keyframes pulsoSimbolo {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.72; }
}

/* ---------- 2. FEED CONVERSACIONAL ------------------------------ */

.panteao-feed {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 220px;
  max-height: 58vh;
  /* respiro exato pro cabeçalho fixo (medido de verdade em JS, ver
     medirCabecalhoPanteao) não cobrir o começo do feed — mais um
     pouquinho de ar embaixo dele */
  margin-top: calc(var(--panteao-head-h, 78px) + 10px);
  margin-bottom: 14px;
  padding-right: 4px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.panteao-feed::-webkit-scrollbar { width: 6px; }
.panteao-feed::-webkit-scrollbar-track { background: transparent; }
.panteao-feed::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }

/* --- estado vazio: uma frase só, sem subtítulo explicando o óbvio --- */
.panteao-vazio {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto 0;
  padding: 40px 16px;
  text-align: center;
}
.panteao-vazio__frase {
  color: var(--muted);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* --- mensagem do usuário --- */
.msg--usuario { display: flex; justify-content: flex-end; }
.msg--usuario .msg__bolha {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 16px 16px 4px 16px;
  background: var(--pt-surface);
}
.msg__texto { color: var(--text); font-size: 14px; line-height: 1.5; }

/* --- mensagem do agente: sem caixa envolvente, linha lateral fina --- */
.msg--agente {
  max-width: 90%;
  padding: 2px 0 2px 14px;
  border-left: 2px solid var(--agente);
}
.msg__autor {
  margin-bottom: 4px;
  color: var(--agente);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.msg__corpo { color: var(--text); font-size: 14px; line-height: 1.6; }
.msg__corpo code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--realce-forte);
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  font-size: 0.92em;
}

/* --- timeline de raciocínio/execução --- */
.timeline__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted-dim);
  font-size: 11px;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
@media (hover: hover) {
  .timeline__btn:hover { color: var(--muted); border-color: var(--border-strong); }
}
.timeline__seta {
  display: inline-block;
  font-size: 9px;
  transition: transform var(--fast) var(--ease);
}
.timeline__seta--aberta { transform: rotate(180deg); }
.timeline__rotulo { color: inherit; }   /* herda de .timeline__btn — explícito para não depender de ordem no cascade */

.timeline__corpo {
  position: relative;
  margin: 0 0 12px 6px;
  padding-left: 16px;
  border-left: 1px solid var(--pt-borda-fraca);
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  animation: timelineAbre 220ms var(--ease) both;
}
/* sem isto, o `display: flex` acima vence o atributo [hidden] — o
   navegador aplica estilo de autor por cima do estilo nativo do
   [hidden], então o painel nunca fechava de verdade, só a seta girava */
.timeline__corpo[hidden] { display: none; }
@keyframes timelineAbre {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.timeline__no {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}
.timeline__icone {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--muted-dim);
}
.timeline__icone svg { width: 13px; height: 13px; }
.timeline__texto {
  color: var(--muted);
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.5;
}

/* --- chips de ação rápida --- */
.msg__acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip-acao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--agente);
  border-radius: 999px;
  background: color-mix(in srgb, var(--agente) 12%, transparent);
  color: var(--agente);
  font-size: 12px;
  font-weight: 500;
  transition: background-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.chip-acao__icone { display: inline-flex; width: 13px; height: 13px; }
@media (hover: hover) {
  .chip-acao:not(:disabled):hover { background: color-mix(in srgb, var(--agente) 22%, transparent); }
}
.chip-acao:active { transform: scale(0.97); }
.chip-acao:disabled { opacity: 0.6; cursor: default; }

/* --- bloco de código --- */
.msg-codigo {
  position: relative;
  margin: 8px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--pt-well);
  overflow: hidden;
}
.msg-codigo pre { margin: 0; padding: 30px 14px 14px; overflow-x: auto; }
.msg-codigo code {
  color: var(--muted-hi);
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  background: none;
  padding: 0;
}
.msg-codigo__copiar {
  position: absolute;
  top: 6px; right: 8px;
  padding: 4px 9px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: var(--surface);
  color: var(--muted);
  font-size: 10.5px;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
@media (hover: hover) {
  .msg-codigo__copiar:hover { color: var(--gold); border-color: var(--gold-line); }
}

/* --- anexo dentro de uma mensagem já enviada --- */
.msg-anexo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--realce);
  font-size: 12px;
}
.msg-anexo__nome { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-anexo__meta { flex: 0 0 auto; color: var(--muted-dim); }

/* ---------- 3. BARRA DE COMANDOS ---------------------------------- */

/* era position:sticky — só gruda embaixo se a página tiver conteúdo
   suficiente pra rolar até lá. Com a conversa vazia (pouco conteúdo),
   ela flutuava solta no meio da tela em vez de ficar na base. Fixed
   resolve de vez: sempre ancorada, não importa quanto conteúdo existe. */
.panteao-input {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 40;
  /* centraliza no mesmo container que o resto do app usa — sem isto,
     ela esticava a largura inteira da tela em telas largas (desktop),
     enquanto tudo mais fica confinado a --shell-max */
  max-width: var(--shell-max, 720px);
  margin: 0 auto;
  /* --teclado-altura VOLTOU — a remoção anterior partiu do diagnóstico
     errado (achava que "fixed" seguia a visual viewport sozinho, tirado
     de um teste feito com um viewport meta diferente do atual). Com
     números reais (29-31/08/2026): sem essa soma, barra.bottom batia
     EXATAMENTE com "altura total da tela − nav-h" (ex.: 741−64=677),
     ignorando por completo que o teclado cobria o resto — a prova de que
     "fixed" aqui NÃO acompanha o teclado sozinho, precisa da ajuda do
     cálculo. --teclado-altura vem de acompanharTeclado() via Visual
     Viewport API, 0px com teclado fechado. */
  bottom: calc(var(--nav-h, 64px) + env(safe-area-inset-bottom) + var(--teclado-altura, 0px));
  padding: 10px 16px 0;
  background: linear-gradient(180deg, transparent, var(--bg) 22%);
  /* SEM transição na posição — o teclado do sistema já anima sozinho ao
     abrir; uma transição CSS nossa por cima disso corria numa velocidade
     diferente da dele, e o instantâneo capturado no meio do movimento
     (pelo painel de diagnóstico) mostrava um "vão" que era só a barra
     ainda a caminho da posição final, não um erro de cálculo de verdade. */
}

/* Com o teclado aberto, a navbar some (ver body.panteao-teclado-aberto
   #app-nav em main.css) — mas o cálculo acima continuava reservando
   var(--nav-h) como se ela ainda estivesse lá, sobrando como um vão
   vazio bem no lugar onde ela costumava estar. Sem navbar visível, não
   tem por que reservar espaço pra ela. */
body.panteao-teclado-aberto .panteao-input {
  bottom: calc(env(safe-area-inset-bottom) + var(--teclado-altura, 0px));
}

/* espaço reservado embaixo do feed pra ele nunca ficar escondido atrás
   da barra agora fixa (compensa a saída do fluxo normal do documento) */
[data-module="panteao"] { padding-bottom: 104px; }

/* Enquanto o teclado está aberto (campo de texto focado), a navbar do
   app some — mesmo padrão de qualquer app de chat. Ela é `position:
   fixed` como a barra de digitação, então "sobe" sozinha quando o
   teclado empurra a altura visível da tela — só que ninguém quer as
   duas competindo pelo mesmo espaço logo acima do teclado. Selector
   global (#app-nav é de index.html, fora deste módulo) de propósito:
   esse comportamento faz sentido em qualquer tela com teclado aberto,
   não só no Panteão — mas a classe só é ligada/desligada por aqui. */
body.panteao-teclado-aberto #app-nav {
  transform: translateY(100%);
  transition: transform 160ms var(--ease);
  pointer-events: none;
}

/* TRAVA a página inteira de rolar enquanto o teclado está aberto — em vez
   de corrigir a rolagem DEPOIS que o navegador já empurrou a página
   sozinho pra "revelar" o campo focado (essa correção reativa perdia a
   corrida contra o navegador, era por isso que o cabeçalho ainda sumia).
   Sem nada pra rolar, o navegador não tem como empurrar nada. */
body.panteao-teclado-aberto {
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100%;
}

.anexo-pendente {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 6px 8px 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  font-size: 12px;
}
.anexo-pendente__nome {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.anexo-pendente__meta { color: var(--muted-dim); }
.anexo-pendente__remover {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
@media (hover: hover) {
  .anexo-pendente__remover:hover { color: var(--danger); background: rgba(239, 68, 68, 0.12); }
}

/* dock translúcido, tipo glassmorphism, seguindo a paleta dark do app */
.panteao-input__linha {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--pt-borda-media);
  border-radius: 9999px;
  background: var(--pt-pill-bg);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.panteao-btn-icone {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.panteao-btn-icone svg { width: 19px; height: 19px; }
@media (hover: hover) {
  .panteao-btn-icone:hover { color: var(--gold); background: var(--gold-dim); }
}

/* ditando: pulso vermelho suave, mesmo idioma visual do avatar ativo.
   A troca de ícone (SVG -> onda) é feita pelas regras específicas do
   .panteao-btn-mic mais abaixo. */
@keyframes pulsoDitado {
  0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.panteao-textarea {
  flex: 1 1 auto;
  min-width: 0;
  max-height: 132px;
  padding: 9px 4px;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: none;
  overflow-y: auto;
}
.panteao-textarea::placeholder { color: var(--muted-dim); }
.panteao-textarea:focus { outline: none; }

.panteao-btn-enviar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gold-dim);
  color: var(--gold);
  transition: background-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.panteao-btn-enviar svg { width: 17px; height: 17px; }
.panteao-btn-enviar:disabled { background: transparent; color: var(--muted-dim); }
@media (hover: hover) {
  .panteao-btn-enviar:not(:disabled):hover { background: rgba(212, 175, 55, 0.28); }
}
.panteao-btn-enviar:not(:disabled):active { transform: scale(0.92); }

/* ---------- SUGESTÕES ACOPLADAS À BARRA (padrão ChatGPT) ------------- */

/* menores, alinhadas à esquerda — não competem com o campo de texto por
   atenção; era uma coluna full-width de linhas grandes, agora é um par de
   chips discretos no canto */
.sugestoes-inline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  margin-bottom: 8px;
  transition: opacity 180ms var(--ease), transform 180ms var(--ease), max-height 180ms var(--ease);
}
/* somem com fade quando o campo tem texto — ficam no fluxo (não display:none)
   para a transição rodar suave, sem o dock pular de lugar bruscamente */
.sugestoes-inline.is-oculta {
  opacity: 0;
  transform: translateY(4px);
  max-height: 0;
  margin-bottom: 0;
  overflow: hidden;
  pointer-events: none;
}

/* fundo transparente, sem card/borda ao redor — só texto + ícone
   flutuando sobre o conteúdo, discreto de propósito. Truncado com
   reticências se passar da largura, nunca estica a ponto de brigar com
   o campo de texto abaixo. */
.sugestao-inline {
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: min(78vw, 260px);
  padding: 4px 6px;
  color: var(--muted);
  font-size: 11.5px;
  text-align: left;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);   /* legibilidade sobre qualquer fundo, sem precisar de card */
  transition: color var(--fast) var(--ease);
}
.sugestao-inline span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sugestao-inline__icone {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 13px;
  height: 13px;
  color: var(--muted-dim);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}
.sugestao-inline__icone svg { width: 12px; height: 12px; }
@media (hover: hover) {
  .sugestao-inline:hover { color: var(--text); }
  .sugestao-inline:hover .sugestao-inline__icone { color: var(--gold); }
}

/* ---------- GAVETA DE ANEXOS (Bottom Sheet, padrão Gemini) ----------- */

/* A gaveta agora vive fora de #app-content (anexada ao <body> pelo
   panteao.js) — precisamente para escapar do contexto de empilhamento que
   prendia o "z-index:70" dela atrás da barra de navegação. Ver o
   comentário de montarGaveta() no JS para a explicação completa. */
.anexo-sheet {
  position: fixed;
  inset: 0;
  z-index: 70;
}
.anexo-sheet[hidden] { display: none; }

.anexo-sheet__alca { display: none; }   /* era a alça de bottom sheet — não se aplica a um popover ancorado */

.anexo-sheet__fundo {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 200ms var(--ease);
}
.anexo-sheet.is-aberta .anexo-sheet__fundo { opacity: 1; }

/* grudada no botão [+], não centralizada na tela — mesma matemática de
   `left` que .app-content usa para se centralizar, para o painel nascer
   bem em cima de onde o [+] realmente está, em qualquer largura de tela. */
.anexo-sheet__painel {
  position: fixed;
  left: max(var(--gutter), calc((100% - var(--shell-max)) / 2 + var(--gutter)));
  bottom: calc(
    var(--nav-h, 64px) + env(safe-area-inset-bottom) + var(--teclado-altura, 0px) + 62px
  );
  width: min(240px, calc(100% - 2 * var(--gutter)));
  padding: 6px;
  border: 1px solid var(--pt-popover-borda);
  border-radius: 16px;
  background: var(--pt-popover-bg);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  transform-origin: bottom left;
  transform: translateY(8px) scale(0.96);
  opacity: 0;
  transition: transform 160ms var(--ease), opacity 160ms var(--ease);
}
.anexo-sheet.is-aberta .anexo-sheet__painel { transform: none; opacity: 1; }



.anexo-sheet__lista {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 4px;
}
.anexo-sheet__item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 8px;
  border-radius: 10px;
  text-align: left;
  transition: background-color var(--fast) var(--ease);
}
@media (hover: hover) {
  .anexo-sheet__item:hover { background: var(--realce); }
}
.anexo-sheet__item-icone {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--realce);
  color: var(--text);
}
.anexo-sheet__item-icone svg { width: 14px; height: 14px; }
.anexo-sheet__item-texto { flex: 1 1 auto; min-width: 0; }
.anexo-sheet__item-texto strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 500;
}

/* --- separador antes do toggle de raciocínio estendido --- */
.anexo-sheet__separador {
  height: 1px;
  margin: 6px 8px 4px;
  background: var(--pt-popover-borda);
}

/* --- "Pensar por mais tempo": mesma linha visual dos itens da lista,
   mas com um interruptor à direita e um aviso pequeno embaixo --- */
.anexo-sheet__pensar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 11px 8px 13px;
  border-radius: 12px;
  text-align: left;
  transition: background-color var(--fast) var(--ease);
}
@media (hover: hover) {
  .anexo-sheet__pensar:hover { background: var(--realce-fraco); }
}
.anexo-sheet__pensar-linha {
  display: flex;
  align-items: center;
  gap: 16px;
}
.anexo-sheet__pensar-aviso {
  margin-left: 41px;   /* alinha com o texto acima, depois do círculo de 30px + gap */
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.4;
}

.anexo-sheet__switch {
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  height: 22px;
  border: 1px solid var(--pt-borda-media);
  border-radius: 999px;
  background: var(--pt-painel-bg);
  transition: background-color var(--base) var(--ease), border-color var(--base) var(--ease);
}
.anexo-sheet__switch::after {
  content: "";
  position: absolute;
  top: 50%; left: 2px;
  width: 16px; height: 16px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform var(--base) var(--ease), background-color var(--base) var(--ease);
}
.anexo-sheet__pensar[aria-pressed="true"] .anexo-sheet__switch {
  background: var(--gold-dim);
  border-color: var(--gold-line);
}
.anexo-sheet__pensar[aria-pressed="true"] .anexo-sheet__switch::after {
  transform: translateX(16px);
  background: var(--gold);
}

/* ---------- ONDA DE ÁUDIO (substitui o ícone de microfone ao ditar) --- */

.panteao-btn-mic { position: relative; }
.onda-audio {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 14px;
}
.onda-audio i {
  display: block;
  width: 2.5px;
  height: 100%;
  border-radius: 2px;
  background: currentColor;
  animation: ondaAudio 0.9s ease-in-out infinite;
}
.onda-audio i:nth-child(2) { animation-delay: 0.15s; }
.onda-audio i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ondaAudio {
  0%, 100% { transform: scaleY(0.35); }
  50%      { transform: scaleY(1); }
}

.panteao-btn-mic.is-recording {
  color: #fff;
  background: var(--danger);
  animation: pulsoDitado 1.1s ease-in-out infinite;
}
.panteao-btn-mic.is-recording .panteao-btn-mic__svg { display: none; }
.panteao-btn-mic.is-recording .onda-audio { display: flex; }

/* ---------- BARRA LATERAL DE CONVERSAS (padrão Gemini/ChatGPT) --------- */
/* Mesmo motivo estrutural da gaveta de anexos: vive fora de #app-content,
   anexada direto ao <body> (ver montarSidebar() em panteao.js), porque
   #app-content cria seu próprio contexto de empilhamento e prenderia
   qualquer z-index interno atrás da barra de navegação. */

.conversas-sheet {
  position: fixed;
  inset: 0;
  z-index: 75;   /* acima da gaveta de anexos (70) — a sidebar é a camada mestra */
}
.conversas-sheet[hidden] { display: none; }

.conversas-sheet__fundo {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 220ms var(--ease);
}
.conversas-sheet.is-aberta .conversas-sheet__fundo { opacity: 1; }

/* desliza da esquerda — ocupa a lateral, não a tela inteira, mesmo no
   celular, para deixar claro que é navegação, não uma tela nova */
.conversas-sheet__painel {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: min(300px, 84vw);
  display: flex;
  flex-direction: column;
  padding: 16px 12px calc(16px + env(safe-area-inset-bottom));
  border-right: 1px solid var(--pt-painel-borda);
  background: var(--pt-painel-bg);
  box-shadow: 24px 0 50px rgba(0, 0, 0, 0.45);
  transform: translateX(-100%);
  transition: transform 240ms var(--ease);
}
.conversas-sheet.is-aberta .conversas-sheet__painel { transform: translateX(0); }

/* área rolável — tudo menos o rodapé fixo. min-height:0 é o que permite
   um filho flex encolher e ganhar scroll próprio em vez de estourar o
   painel inteiro (comportamento padrão de flex column sem isso: o filho
   nunca fica menor que o conteúdo, então nunca haveria scroll aqui). */
.conversas-sheet__corpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}

.conversas-sheet__rodape {
  flex: 0 0 auto;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--pt-painel-borda);
}

.conversas-sheet__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}

.conversas-sheet__marca {
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
}

.conversas-sheet__topo-acoes {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* botão de ícone genérico do topo (busca) — mesmo molde do X ao lado */
.conversas-sheet__icone-btn {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--muted);
  transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.conversas-sheet__icone-btn svg { width: 15px; height: 15px; }
@media (hover: hover) {
  .conversas-sheet__icone-btn:hover { color: var(--text); background: var(--realce); }
}

/* preenchido (não só contorno) — mais chamativo, no espírito do pill
   sólido "+ Chat" do ChatGPT, com a cor de marca do app no lugar do azul */
/* menor, e agora vive no rodapé fixo — não precisa mais de margem embaixo */
.conversas-sheet__nova {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 9px 14px;
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  background: var(--gold-dim);
  color: var(--gold);
  font-size: 12.5px;
  font-weight: 600;
  transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.conversas-sheet__nova svg { width: 14px; height: 14px; color: var(--gold); }
@media (hover: hover) {
  .conversas-sheet__nova:hover { background: color-mix(in srgb, var(--gold) 22%, transparent); }
}
.conversas-sheet__nova:active { transform: scale(0.98); }

.conversas-sheet__x {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--muted);
  transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.conversas-sheet__x svg { width: 16px; height: 16px; }
@media (hover: hover) {
  .conversas-sheet__x:hover { color: var(--text); background: var(--realce); }
}

.conversas-sheet__busca {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.conversas-sheet__busca svg { flex: 0 0 auto; width: 14px; height: 14px; color: var(--muted-dim); }
.conversas-sheet__busca input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 13px;
}
.conversas-sheet__busca input::placeholder { color: var(--muted-dim); }

.conversas-sheet__label {
  margin-bottom: 6px;
  color: var(--muted-dim);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.conversas-lista {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.conversas-lista__vazio {
  padding: 10px 12px;
  color: var(--muted-dim);
  font-size: 12.5px;
}

/* ---------- LINHA DE CONVERSA: card cheio, sem botão ao lado ---------- */
/* Era card + botão de 3 pontinhos lado a lado — agora o card ocupa a
   linha inteira; o menu abre por toque longo (contextmenu), não por um
   botão fixo competindo por espaço. */
.conversas-lista__linha {
  display: flex;
  align-items: center;
}

.conversas-lista__card {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 11px 12px;
  border-radius: 9px;
  text-align: left;
  color: var(--muted);
  font-size: 13px;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
@media (hover: hover) {
  .conversas-lista__card:hover { background: var(--realce-fraco); color: var(--text); }
}
.conversas-lista__card.is-ativa {
  background: var(--realce-forte);
  color: var(--text);
  font-weight: 500;
}
/* segura o toque um pouco mais confortável na área inteira do card,
   sem "vazar" seleção de texto durante o long-press */
.conversas-lista__card--cheio { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

.conversas-lista__titulo {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversas-lista__ponto {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.conversas-lista__editar {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--gold-line);
  border-radius: 9px;
  background: var(--realce-fraco);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}
.conversas-lista__editar:focus { outline: none; }

/* ---------- OS 3 CARDS "FALAR COM <AGENTE>" --------------------------- */

.conversas-sheet__agentes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 18px;
}

.conversas-sheet__agente-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
@media (hover: hover) {
  .conversas-sheet__agente-card:hover {
    border-color: color-mix(in srgb, var(--agente) 45%, var(--border));
    background: color-mix(in srgb, var(--agente) 8%, var(--surface));
  }
}
.conversas-sheet__agente-glifo {
  width: 22px;
  height: 22px;
  color: var(--agente);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--agente) 40%, transparent));
}
.conversas-sheet__agente-glifo svg { width: 100%; height: 100%; }
.conversas-sheet__agente-card span:last-child {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* contador "(N)" ao lado do rótulo "Conversas individuais" */
.conversas-sheet__retratil-conta {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--realce);
  color: var(--muted-dim);
  font-size: 10px;
  font-weight: 600;
}

/* card "Personalizado" — mesmo molde dos 3 de agente, mas sem cor de
   agente própria (usa o dourado do app como acento neutro) */
.conversas-sheet__agente-card--personalizado {
  --agente: var(--gold);
}
.conversas-sheet__agente-card--personalizado .conversas-sheet__agente-glifo {
  color: var(--muted);
}

/* ---------- FILTRO RETRÁTIL — Todas / Conselho / por agente ----------- */
/* Era uma fileira com todas as opções sempre visíveis; agora só a opção
   ativa aparece, num botão só — tocar nele revela as outras numa lista
   solta por baixo, que fecha assim que uma é escolhida. */

.conversas-filtro-retratil {
  position: relative;
  margin: 4px 0 14px;
}

.conversas-filtro-retratil__atual {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--agente, var(--azul)) 45%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--agente, var(--azul)) 14%, transparent);
  color: var(--text);
  font-size: 11.5px;
  font-weight: 600;
}
.conversas-filtro-retratil__seta { display: grid; place-items: center; color: var(--muted-dim); transition: transform var(--fast) var(--ease); }
.conversas-filtro-retratil__seta svg { width: 11px; height: 11px; }
.conversas-filtro-retratil__seta.is-aberta { transform: rotate(180deg); }

.conversas-filtro-retratil__lista {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 140px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--pt-popover-bg);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}
.conversas-filtro-retratil__item {
  padding: 7px 10px;
  border-radius: 7px;
  color: var(--muted);
  font-size: 12px;
  text-align: left;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
@media (hover: hover) {
  .conversas-filtro-retratil__item:hover {
    background: color-mix(in srgb, var(--agente, var(--azul)) 14%, transparent);
    color: var(--text);
  }
}

/* ---------- POPOVER DE CONVERSA — Renomear/Excluir/Personalizado ------ */
/* Ancorado ao <body>, tela cheia — mesmo motivo estrutural da gaveta e da
   sidebar: escapa do contexto de empilhamento de #app-content. Antes o
   menu de 3 pontinhos era um dropdown preso dentro da lista rolável e
   ficava cortado; isto substitui aquilo por completo. */

.conversa-menu-popover {
  position: fixed;
  inset: 0;
  z-index: 78;
}
.conversa-menu-popover[hidden] { display: none; }

.conversa-menu-popover__fundo {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 160ms var(--ease);
}
.conversa-menu-popover.is-aberto .conversa-menu-popover__fundo { opacity: 1; }

.conversa-menu-popover__painel {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -46%) scale(0.97);
  width: min(300px, calc(100% - 32px));
  padding: 16px;
  border: 1px solid var(--pt-popover-borda);
  border-radius: 16px;
  background: var(--pt-popover-bg);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: transform 160ms var(--ease), opacity 160ms var(--ease);
}
.conversa-menu-popover.is-aberto .conversa-menu-popover__painel { transform: translate(-50%, -50%) scale(1); opacity: 1; }

/* menu de conversa aberto por toque longo — ancorado no ponto exato,
   left/top vêm inline via JS (abrirMenuConversa); aqui só cancela a
   centralização e troca a origem da transição pra ficar natural saindo
   do ponto tocado, não do centro da tela */
.conversa-menu-popover__painel--ancorado {
  left: 0;
  top: 0;
  width: min(220px, calc(100% - 24px));
  transform: scale(0.94);
  transform-origin: top left;
}
.conversa-menu-popover.is-aberto .conversa-menu-popover__painel--ancorado { transform: scale(1); }

.conversa-menu-popover__titulo {
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}
.conversa-menu-popover__nota {
  margin-bottom: 12px;
  color: var(--muted-dim);
  font-size: 11.5px;
  line-height: 1.5;
}

/* detalhe de tokens — pares rótulo/valor, o que existe de verdade só */
.tokens-detalhe { margin: 10px 0 14px; display: grid; gap: 8px; }
.tokens-detalhe div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tokens-detalhe dt { color: var(--muted-dim); font-size: 11.5px; }
.tokens-detalhe dd {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.conversa-menu-popover__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
  padding: 11px 10px;
  border-radius: 9px;
  color: var(--text);
  font-size: 13.5px;
  text-align: left;
  transition: background-color var(--fast) var(--ease);
}
.conversa-menu-popover__item svg { flex: 0 0 auto; width: 15px; height: 15px; }
@media (hover: hover) {
  .conversa-menu-popover__item:hover { background: var(--realce); }
}
.conversa-menu-popover__item.is-perigo { color: #F87171; }
@media (hover: hover) {
  .conversa-menu-popover__item.is-perigo:hover { background: rgba(248, 113, 113, 0.12); }
}

.conversa-menu-popover__confirmar { width: 100%; margin-top: 14px; }

/* seleção de agentes dentro do popover "Personalizado" */
.personalizado-lista { display: flex; flex-direction: column; gap: 2px; }
.personalizado-lista__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border-radius: 9px;
  color: var(--muted);
  font-size: 13.5px;
  text-align: left;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
@media (hover: hover) {
  .personalizado-lista__item:hover { background: var(--realce-fraco); }
}
.personalizado-lista__item.is-selecionado {
  background: color-mix(in srgb, var(--agente) 14%, transparent);
  color: var(--text);
  font-weight: 600;
}
.personalizado-lista__item.is-selecionado span:last-child { margin-left: auto; color: var(--agente); }
.personalizado-lista__ponto {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--agente);
}
.personalizado-lista__nome { flex: 1 1 auto; }

/* ícone de cada agente é fixo agora (fada/lux/nova, mantido de propósito
   — decisão explícita de não trocar, mesmo se o tema mudar depois) — o
   botão de editar/trocar ícone foi removido. */
.agente-simbolo { position: relative; }