/*
 * Identidade visual do RH Helper sobre o LibreChat v0.8.8 (sem fork do front-end).
 *
 * Como funciona: o tema do LibreChat é feito de variáveis CSS com triplas RGB ("20 22 19"),
 * definidas em `html` (claro) e `.dark` (escuro) no index.*.css da imagem. Este arquivo
 * redefine essas variáveis com a paleta de docs/identidade/paleta.md e é ligado no
 * index.html pelo Dockerfile (patch-client.cjs), depois do CSS da imagem.
 *
 * Especificidade: `html:not(.high-contrast)` (0,1,1) vence `html` e `.dark` (0,1,0) da imagem,
 * e `html.dark:not(.high-contrast)` (0,2,1) vence o bloco claro deste arquivo. Por isso toda
 * variável do bloco claro também está no escuro. Os modos de alto contraste do LibreChat
 * ficam intactos (as cores deles são as de acessibilidade, não as da marca).
 *
 * Referência de layout: o mock da tela inicial em docs/identidade/previa.html (barra lateral
 * na Superfície, conversa no Fundo, caixa de mensagem na Superfície com a borda forte).
 */

/* ---------- Fontes (auto-hospedadas, OFL; ver fonts/OFL-*.txt) ---------- */
@font-face {
  font-family: 'Figtree Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url(fonts/figtree-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url(fonts/figtree-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 300 900;
  src: url(fonts/figtree-latin-ext-wght-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 300 900;
  src: url(fonts/figtree-latin-wght-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(fonts/bricolage-grotesque-latin-ext-opsz-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(fonts/bricolage-grotesque-latin-opsz-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Escala de cinzas: os mesmos tons do LibreChat, puxados para pedra ---------- */
/* Vale para os dois temas: muitas classes usam bg-gray-* direto, e assim nada fica azulado. */
html:root {
  --gray-20: 236 236 230;
  --gray-50: 246 246 241;
  --gray-100: 237 237 230;
  --gray-200: 226 226 218;
  --gray-300: 205 205 196;
  --gray-400: 153 154 145;
  --gray-500: 95 97 87;
  --gray-600: 66 69 63;
  --gray-650: 58 63 56;
  --gray-700: 47 51 46;
  --gray-800: 33 36 32;
  --gray-850: 24 26 23;
  --gray-875: 20 22 19;
  --gray-900: 14 16 13;

  --rh-fonte-ui: 'Figtree Variable', 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --rh-fonte-titulo: 'Bricolage Grotesque Variable', 'Bricolage Grotesque', 'Figtree Variable', system-ui, sans-serif;
  --theme-font-family: var(--rh-fonte-ui);
}

/* ---------- Tema claro ---------- */
html:not(.high-contrast) {
  --presentation: 246 246 241;
  --surface-primary: 246 246 241;
  --surface-primary-alt: 255 255 255;
  --surface-primary-contrast: 237 237 230;
  --surface-secondary: 255 255 255;
  --surface-secondary-alt: 226 226 218;
  --surface-tertiary: 237 237 230;
  --surface-tertiary-alt: 255 255 255;
  --surface-dialog: 255 255 255;
  --surface-chat: 255 255 255;
  --surface-hover: 237 237 230;
  --surface-hover-alt: 226 226 218;
  --surface-active: 237 237 230;
  --surface-active-alt: 226 226 218;
  --surface-composer-hover: 237 237 230;
  --header-primary: 246 246 241;
  --header-hover: 237 237 230;
  --header-button-hover: 237 237 230;
  --surface-submit: 18 107 80;
  --surface-submit-hover: 14 88 66;
  --surface-destructive: 179 38 47;
  --surface-destructive-hover: 150 30 38;

  --text-primary: 29 31 26;
  --text-secondary: 72 74 66;
  --text-secondary-alt: 95 97 87;
  --text-tertiary: 95 97 87;
  --text-muted: 95 97 87;
  --text-warning: 138 93 0;
  --text-destructive: 179 38 47;
  --link: 18 107 80;
  --link-hover: 14 88 66;
  --link-visited: 18 107 80;
  --accent-primary: 18 107 80;
  --accent-primary-hover: 14 88 66;
  --brand-purple: 18 107 80;
  --ring-primary: 122 125 114;

  --border-light: 218 217 207;
  --border-medium: 205 205 196;
  --border-medium-alt: 205 205 196;
  --border-heavy: 122 125 114;
  --border-xheavy: 95 97 87;
  --border-destructive: 179 38 47;

  --status-success: 30 122 69;
  --status-info: 36 89 166;
  --status-warning: 138 93 0;
  --status-error: 179 38 47;

  /* Cores próprias (não existem no LibreChat): botão de enviar e caixa de mensagem */
  --rh-botao: 18 107 80;
  --rh-botao-hover: 14 88 66;
  --rh-botao-texto: 255 255 255;
  --rh-borda-campo: 122 125 114;
  --rh-citrino: 126 146 20;

  color-scheme: light;
}

/* ---------- Tema escuro ---------- */
html.dark:not(.high-contrast) {
  --presentation: 20 22 19;
  --surface-primary: 20 22 19;
  --surface-primary-alt: 29 32 28;
  --surface-primary-contrast: 29 32 28;
  --surface-secondary: 29 32 28;
  --surface-secondary-alt: 39 43 38;
  --surface-tertiary: 39 43 38;
  --surface-tertiary-alt: 39 43 38;
  --surface-dialog: 29 32 28;
  --surface-chat: 29 32 28;
  --surface-hover: 39 43 38;
  --surface-hover-alt: 49 53 47;
  --surface-active: 58 63 56;
  --surface-active-alt: 49 53 47;
  --surface-composer-hover: 39 43 38;
  --header-primary: 20 22 19;
  --header-hover: 39 43 38;
  --header-button-hover: 39 43 38;
  --surface-submit: 18 107 80;
  --surface-submit-hover: 14 88 66;
  --surface-destructive: 179 38 47;
  --surface-destructive-hover: 150 30 38;

  --text-primary: 236 234 227;
  --text-secondary: 207 205 197;
  --text-secondary-alt: 169 168 158;
  --text-tertiary: 169 168 158;
  --text-muted: 169 168 158;
  --text-warning: 233 194 90;
  --text-destructive: 242 125 134;
  --link: 76 196 149;
  --link-hover: 122 214 177;
  --link-visited: 76 196 149;
  --accent-primary: 76 196 149;
  --accent-primary-hover: 122 214 177;
  --brand-purple: 76 196 149;
  --ring-primary: 110 115 105;

  --border-light: 58 63 56;
  --border-medium: 74 79 71;
  --border-medium-alt: 74 79 71;
  --border-heavy: 110 115 105;
  --border-xheavy: 138 142 132;
  --border-destructive: 242 125 134;

  --status-success: 92 203 138;
  --status-info: 127 178 236;
  --status-warning: 233 194 90;
  --status-error: 242 125 134;

  --rh-botao: 76 196 149;
  --rh-botao-hover: 122 214 177;
  --rh-botao-texto: 14 26 20;
  --rh-borda-campo: 110 115 105;
  --rh-citrino: 217 235 114;

  color-scheme: dark;
}

/* ---------- Tipografia ---------- */
html:root,
html:root body,
html:root .font-sans {
  font-family: var(--rh-fonte-ui);
}

/* Títulos de tela (login, diálogos, configurações) e a saudação da tela inicial.
   As respostas do assistente (.markdown/.prose) ficam em Figtree, como a interface. */
html:root h1:not(.markdown *):not(.prose *),
html:root h2:not(.markdown *):not(.prose *),
html:root .split-parent {
  font-family: var(--rh-fonte-titulo);
  letter-spacing: -0.01em;
}

/* Saudação da tela inicial (interface.customWelcome), no tamanho da prévia: 26 px no celular, 32 px no resto. */
html:root .split-parent {
  font-size: 26px;
  line-height: 1.2;
  font-weight: 500;
}
@media (min-width: 640px) {
  html:root .split-parent {
    font-size: 32px;
  }
}

/* ---------- Detalhes da marca ---------- */

/* Caixa de mensagem com a borda forte (3:1), como campo de texto. */
html:not(.high-contrast) .bg-surface-chat.border-border-light {
  border-color: rgb(var(--rh-borda-campo));
}

/* Botão de enviar em jade (o padrão do LibreChat é preto ou branco). Desligado, mantém o visual da imagem. */
html:not(.high-contrast) #send-button:not(:disabled) {
  background-color: rgb(var(--rh-botao));
}
html:not(.high-contrast) #send-button:not(:disabled):hover {
  background-color: rgb(var(--rh-botao-hover));
}
html:not(.high-contrast) #send-button:not(:disabled) svg {
  color: rgb(var(--rh-botao-texto));
}

html:not(.high-contrast) ::selection {
  background-color: rgb(76 196 149 / 0.35);
}

/* ---------- Cores fixas da imagem (fora das variáveis) ---------- */

/* `.dark body, .dark html` tem #212121 fixo; o fundo aparece ao rolar além da borda. */
html:not(.high-contrast),
html:not(.high-contrast) body {
  background-color: rgb(var(--surface-primary));
}

/* Campos de login e cadastro: a imagem pinta o fundo com sombra interna branca ou #0d0d0d fixos
   (truque contra o amarelo do preenchimento automático), o que destoa do rótulo flutuante. */
html:not(.high-contrast) .webkit-dark-styles,
html:not(.high-contrast) .webkit-dark-styles:focus {
  -webkit-text-fill-color: rgb(var(--text-primary));
  -webkit-box-shadow: inset 0 0 0 50vh rgb(var(--surface-primary));
}

/* Links em texto (modal de termos, listas, respostas em .prose): a imagem fixa #06c e #52a0ff.
   Cada seletor tem um ponto de especificidade a mais que o da imagem, nada além, para não passar
   por cima das classes de cor dos componentes. */
html p.whitespace-pre-wrap a,
html li a,
html.dark p.whitespace-pre-wrap a,
html.dark li a {
  color: rgb(var(--link));
}
html .prose {
  --tw-prose-links: rgb(var(--link));
  --tw-prose-invert-links: rgb(var(--link));
}

/* `.btn-primary` usa o verde #10a37f fixo; passa para o Jade profundo (branco por cima: 6,47:1). */
html:not(.high-contrast) .btn-primary,
html:not(.high-contrast) .btn-primary:disabled:hover {
  background-color: #126b50;
  color: #ffffff;
}
html:not(.high-contrast) .btn-primary:hover {
  background-color: #0e5842;
}
html:not(.high-contrast) .btn-primary:focus-visible {
  --tw-ring-color: rgb(var(--accent-primary));
}