/* Papo: acabamento do chat com IA do kit BaitaOS (@baitaos/kit/chat, docs/chat.md do kit) por cima do LibreChat, sem fork.
   Só sobrescreve variáveis de tema do LibreChat e ganchos estáveis (id/data-testid); o que muda e como reaplicar depois
   de atualizar o LibreChat está em docs/personalizacao-chat.md. Carregado pelo index.html depois do CSS do app.
   Ao mudar este arquivo, suba o ?v= no index.html (assets ficam 2 dias em cache).

   As cores do LibreChat são trios RGB ("r g b") usados em rgb(var(--x)): cada trio abaixo é um token do kit
   (src/modulo/growthos.css), com o hex ao lado; testes/personalizacao-chat.mjs reprova se divergir.
   Os temas de alto contraste do LibreChat ficam como estão. */

/* Tokens de movimento do kit (src/chat/chat.css), mesmos nomes e valores. */
:where(:root) {
  --kit-mov-instante: 90ms;
  --kit-mov-rapido: 150ms;
  --kit-mov-medio: 220ms;
  --kit-mov-lento: 320ms;
  --kit-mov-escalonar: 40ms;
  --kit-mov-cursor: 1000ms;
  --kit-mov-pensando: 1200ms;
  --kit-curva-saida: cubic-bezier(0.16, 1, 0.3, 1);
  --kit-curva-padrao: cubic-bezier(0.2, 0, 0, 1);
  --kit-curva-entrada: cubic-bezier(0.4, 0, 1, 1);
  --papo-fonte: "Inter Variable", Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  --papo-fonte-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --papo-raio-sm: 8px;
  --papo-raio-md: 12px;
  --papo-raio-lg: 16px;
}

/* Claro (.app-growthos do kit) */
html:root:not([class*="contrast"]) {
  --papo-bg: 244 246 249;        /* --color-bg #f4f6f9 */
  --papo-sup: 255 255 255;       /* --color-surface #ffffff */
  --papo-sup2: 242 245 249;      /* --color-surface2 #f2f5f9 */
  --papo-sup3: 232 237 243;      /* --color-surface3 #e8edf3 */
  --papo-linha: 221 227 235;     /* --color-line #dde3eb */
  --papo-linha-suave: 233 237 242; /* --color-linesoft #e9edf2 */
  --papo-tinta: 15 23 42;        /* --color-ink #0f172a */
  --papo-tinta2: 71 84 103;      /* --color-ink2 #475467 */
  --papo-tinta3: 85 98 116;      /* --color-ink3 #556274 */
  --papo-acento: 29 78 216;      /* --color-accent #1d4ed8 */
  --papo-perigo: 200 30 30;      /* --color-danger #c81e1e */
  --papo-resultado: 21 128 61;   /* --color-result #15803d */
}
/* Escuro (.app-growthos.gos-dark do kit); o LibreChat põe .dark no <html> */
html.dark:root:not([class*="contrast"]) {
  --papo-bg: 10 14 20;           /* #0a0e14 */
  --papo-sup: 15 20 28;          /* #0f141c */
  --papo-sup2: 21 28 38;         /* #151c26 */
  --papo-sup3: 28 37 50;         /* #1c2532 */
  --papo-linha: 35 46 61;        /* #232e3d */
  --papo-linha-suave: 26 34 48;  /* #1a2230 */
  --papo-tinta: 232 237 244;     /* #e8edf4 */
  --papo-tinta2: 151 164 184;    /* #97a4b8 */
  --papo-tinta3: 107 122 145;    /* #6b7a91 */
  --papo-acento: 59 130 246;     /* #3b82f6 */
  --papo-perigo: 239 68 68;      /* #ef4444 */
  --papo-resultado: 34 197 94;   /* #22c55e */
}

/* Variáveis de tema do LibreChat -> tokens do kit (mesma ligação no claro e no escuro) */
html:root:not([class*="contrast"]),
html.dark:root:not([class*="contrast"]) {
  --presentation: var(--papo-sup);
  --text-primary: var(--papo-tinta);
  --text-secondary: var(--papo-tinta2);
  --text-secondary-alt: var(--papo-tinta3);
  --text-tertiary: var(--papo-tinta3);
  --text-destructive: var(--papo-perigo);
  --link: var(--papo-acento);
  --link-hover: var(--papo-acento);
  --accent-primary: var(--papo-acento);
  --accent-primary-hover: var(--papo-acento);
  --ring-primary: var(--papo-acento);
  --header-primary: var(--papo-sup);
  --header-hover: var(--papo-sup2);
  --header-button-hover: var(--papo-sup2);
  --surface-primary: var(--papo-sup);
  --surface-primary-alt: var(--papo-bg);
  --surface-primary-contrast: var(--papo-sup2);
  --surface-secondary: var(--papo-bg);
  --surface-secondary-alt: var(--papo-sup3);
  --surface-tertiary: var(--papo-sup2);
  --surface-tertiary-alt: var(--papo-sup);
  --surface-dialog: var(--papo-sup);
  --surface-chat: var(--papo-sup);
  --surface-hover: var(--papo-sup3);
  --surface-hover-alt: var(--papo-linha);
  --surface-active: var(--papo-sup2);
  --surface-active-alt: var(--papo-sup3);
  --surface-composer-hover: var(--papo-sup3);
  --surface-submit: var(--papo-acento);
  --surface-submit-hover: var(--papo-acento);
  --surface-destructive: var(--papo-perigo);
  --surface-destructive-hover: var(--papo-perigo);
  --border-light: var(--papo-linha-suave);
  --border-medium: var(--papo-linha);
  --border-medium-alt: var(--papo-linha);
  --border-heavy: var(--papo-tinta3);
  --border-xheavy: var(--papo-tinta2);
  --border-destructive: var(--papo-perigo);
  --status-error: var(--papo-perigo);
  --status-error-strong: var(--papo-perigo);
  --status-success: var(--papo-resultado);
}

/* Fontes do kit (o LibreChat já traz Inter; JetBrains Mono cai para a mono do sistema se não houver) */
html body { font-family: var(--papo-fonte); }
html :is(code, pre, kbd, samp, .font-mono) { font-family: var(--papo-fonte-mono); }

/* Foco visível em tudo que recebe teclado (o campo mostra o foco no compositor inteiro) */
html :is(button, a, [role="button"], [role="menuitem"], [role="menuitemcheckbox"], [role="option"], [tabindex]):focus-visible {
  outline: 2px solid rgb(var(--papo-acento));
  outline-offset: 2px;
}
html #prompt-textarea:focus-visible { outline: none; }

/* Campo: cresce com o texto (o LibreChat já mede a altura) com a curva do kit.
   .papo-compositor é a moldura do campo, marcada pelo papo-chat.js (a classe do LibreChat muda entre versões). */
html #prompt-textarea {
  transition: height var(--kit-mov-rapido) var(--kit-curva-padrao);
  caret-color: rgb(var(--papo-acento));
}
html #prompt-textarea::placeholder { color: rgb(var(--papo-tinta3)); }
html .papo-compositor {
  border-color: rgb(var(--papo-linha)) !important;
  border-radius: var(--papo-raio-lg) !important;
  background-color: rgb(var(--papo-sup)) !important;
  transition: border-color var(--kit-mov-rapido) var(--kit-curva-padrao), box-shadow var(--kit-mov-rapido) var(--kit-curva-padrao);
}
html .papo-compositor:focus-within {
  border-color: rgb(var(--papo-acento)) !important;
  box-shadow: 0 0 0 3px rgb(var(--papo-acento) / 0.18);
}

/* Enviar <-> Parar: troca no lugar, como no kit */
html :is([data-testid="send-button"], [data-testid="stop-generation-button"], [data-testid="composer-stop-button"]) {
  border-radius: var(--papo-raio-md);
  transition: background-color var(--kit-mov-instante) var(--kit-curva-padrao), transform var(--kit-mov-instante) var(--kit-curva-padrao), opacity var(--kit-mov-rapido) var(--kit-curva-padrao);
}
html :is([data-testid="stop-generation-button"], [data-testid="composer-stop-button"]) {
  animation: papo-troca var(--kit-mov-rapido) var(--kit-curva-saida);
}
/* Enviar no acento (como o kit); parar fica na tinta, que já é a cor do LibreChat */
html [data-testid="send-button"] { background-color: rgb(var(--papo-acento)); color: white; }
html [data-testid="send-button"]:disabled { opacity: 0.4; }

/* Copiar / refazer / editar: aparecem e reagem com os tempos do kit */
html :is([data-testid="copy-response-button"], [data-testid="regenerate-generation-button"], .hover-button) {
  border-radius: var(--papo-raio-sm);
  transition: background-color var(--kit-mov-instante) var(--kit-curva-padrao), color var(--kit-mov-instante) var(--kit-curva-padrao), opacity var(--kit-mov-rapido) var(--kit-curva-padrao), transform var(--kit-mov-instante) var(--kit-curva-padrao);
}
html :is(button, [role="button"]):active:not(:disabled) { transform: scale(0.96); }

/* Mensagem entrando */
html [data-testid="message-body"] { animation: papo-entra var(--kit-mov-medio) var(--kit-curva-saida); }

/* Resposta em fluxo: cursor de barra que pisca no fim (no lugar da bolinha), mesmos seletores do LibreChat */
html .result-streaming > :not(ol):not(ul):not(pre):last-child::after,
html .result-streaming > pre:last-child code::after,
html .result-streaming > ul:last-child > li:last-child:not(:has(> :is(ul, ol, pre)))::after,
html .result-streaming > ol:last-child > li:last-child:not(:has(> :is(ul, ol, pre)))::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-left: 2px;
  vertical-align: text-bottom;
  border-radius: 1px;
  background: rgb(var(--papo-acento));
  animation: papo-cursor var(--kit-mov-cursor) steps(1, end) infinite;
}

/* Faixa "Reconectando…" (papo-chat.js), acima do campo */
.papo-reconectando {
  position: fixed;
  left: 50%;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid rgb(var(--papo-linha));
  border-radius: 999px;
  background: rgb(var(--papo-sup2));
  color: rgb(var(--papo-tinta2));
  font: 500 13px/1.4 var(--papo-fonte);
  transform: translate(-50%, 0);
  animation: papo-faixa var(--kit-mov-lento) var(--kit-curva-saida);
}
.papo-reconectando[hidden] { display: none; }
.papo-reconectando__icone { width: 14px; height: 14px; animation: papo-gira var(--kit-mov-pensando) linear infinite; }
.papo-anuncio { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@keyframes papo-troca { from { opacity: 0; transform: scale(0.88); } }
@keyframes papo-entra { from { opacity: 0; transform: translateY(4px); } }
@keyframes papo-faixa { from { opacity: 0; transform: translate(-50%, 6px); } }
@keyframes papo-cursor { 50% { opacity: 0; } }
@keyframes papo-gira { to { transform: rotate(360deg); } }

/* Movimento reduzido: tokens a zero (como no kit) e nada animando, inclusive o que vem do LibreChat */
@media (prefers-reduced-motion: reduce) {
  :where(:root) {
    --kit-mov-instante: 0ms;
    --kit-mov-rapido: 0ms;
    --kit-mov-medio: 0ms;
    --kit-mov-lento: 0ms;
    --kit-mov-escalonar: 0ms;
    --kit-mov-cursor: 0ms;
    --kit-mov-pensando: 0ms;
  }
  html *, html *::before, html *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html :is(button, [role="button"]):active:not(:disabled) { transform: none; }
}