:root,
html.dark {
  color-scheme: light;
  --background: 204 24% 96%;
  --foreground: 205 43% 16%;
  --primary: 184 72% 35%;
  --primary-foreground: 0 0% 100%;
  --secondary: 169 48% 93%;
  --secondary-foreground: 186 81% 24%;
  --accent: 12 75% 61%;
  --accent-foreground: 0 0% 100%;
  --border: 199 18% 88%;
  --presentation: #f3f6f8;
  --header-primary: #ffffff;
  --surface-primary: #ffffff;
  --surface-primary-alt: #102b3f;
  --surface-primary-contrast: #e3f5f3;
  --surface-secondary: #f3f6f8;
  --surface-secondary-alt: #edf6f6;
  --surface-tertiary: #e6eef1;
  --surface-tertiary-alt: #dce8eb;
  --surface-chat: #ffffff;
  --surface-dialog: #ffffff;
  --surface-hover: #dceeed;
  --surface-hover-alt: #23475d;
  --surface-active: #188f99;
  --surface-active-alt: #0c6570;
  --surface-submit: #188f99;
  --surface-submit-hover: #0c6570;
  --border-light: #dce3e7;
  --border-medium: #bdd1d5;
  --border-medium-alt: #aac4c9;
  --border-heavy: #769aa1;
  --ring-primary: #188f99;
  --text-primary: #172a3a;
  --text-secondary: #536b78;
  --text-secondary-alt: #657480;
  --text-tertiary: #8a9ba4;
}

#threepnDeveloperWarning {
  position: sticky;
  top: 0;
  z-index: 2147483000;
  padding: 9px 16px;
  color: #fff;
  background: linear-gradient(90deg,#7f1d1d,#dc2626,#7f1d1d);
  border-bottom: 3px solid #fecaca;
  text-align: center;
  font: 900 .78rem/1.2 system-ui,sans-serif;
  letter-spacing: .08em;
  box-shadow: 0 5px 18px rgba(127,29,29,.45);
}

html.threepn-developer-mode body {
  box-shadow: inset 0 0 0 4px #dc2626;
}

html,
body,
#root {
  background: #f3f6f8 !important;
  color: #172a3a !important;
}

aside > div > div:first-child {
  background: linear-gradient(180deg,#102b3f,#0c6570) !important;
  border-color: rgba(255,255,255,.12) !important;
}

aside button,
aside a {
  color: #e3f5f3 !important;
}

aside button:hover,
aside button:focus-visible,
aside button[class*="bg-surface-active"] {
  background: rgba(255,255,255,.14) !important;
  color: #ffffff !important;
}

/* L'historique est rendu dans un <nav> sombre avec des pseudo-boutons en
   <div role="button">. Les couleurs globales claires ne doivent pas y
   réintroduire du texte bleu nuit. */
aside nav {
  --text-primary: #e3f5f3;
  --text-secondary: #bdd1d5;
  --text-secondary-alt: #c9dce0;
  --text-tertiary: #aac4c9;
  color: #e3f5f3 !important;
}

aside nav [role="button"],
aside nav [role="button"] * {
  color: #e3f5f3 !important;
}

aside nav [role="button"][class~="bg-surface-active-alt"],
aside nav [role="button"][class~="bg-surface-active-alt"] > div {
  background: #188f99 !important;
  color: #ffffff !important;
}

aside nav [role="button"][class~="bg-surface-active-alt"] * {
  color: #ffffff !important;
}

aside nav [role="button"][class~="bg-surface-active-alt"] [class*="bg-gradient-to-l"] {
  background-image: linear-gradient(to left,#188f99,rgba(24,143,153,0)) !important;
}

aside nav [role="button"]:hover,
aside nav [role="button"]:focus-visible {
  background: #23475d !important;
}

main [class*="from-presentation"] {
  background-image: linear-gradient(to bottom,rgba(243,246,248,.98),rgba(243,246,248,0)) !important;
}

#prompt-textarea {
  color: #172a3a !important;
}

#prompt-textarea::placeholder {
  color: #657480 !important;
  opacity: 1;
}

/* LibreChat garde des classes `dark:*` sur les messages même lorsque le thème
   3PN force un fond clair. On impose donc ici le contraste du contenu lu. */
main .message-content,
main .message-content :where(p,li,ol,ul,strong,em,h1,h2,h3,h4,h5,h6,blockquote,span) {
  color: #172a3a !important;
}

main .message-content :where(code:not(pre code)) {
  background: #e6eef1 !important;
  color: #0c6570 !important;
}

main .text-message :where(time,[class*="text-text-tertiary"],[class*="text-text-secondary"]) {
  color: #536b78 !important;
}

/* Les appels d'outils MCP sont rendus hors de `.message-content`. LibreChat
   leur applique des gris conçus pour un fond sombre ; sur le thème clair 3PN,
   on renforce donc le texte, les paramètres et les états de la trace. */
main [data-testid*="tool"],
main [data-testid*="tool"] *,
main [aria-label*="outil" i],
main [aria-label*="outil" i] *,
main [aria-label*="tool" i],
main [aria-label*="tool" i] *,
main [class*="tool-call"],
main [class*="tool-call"] *,
main [class*="tool_call"],
main [class*="tool_call"] * {
  color: #172a3a !important;
}

main [data-testid*="tool"],
main [class*="tool-call"],
main [class*="tool_call"] {
  border-color: #aac4c9 !important;
}

a:not([role="button"]) {
  color: #0c6570;
  text-decoration-color: rgba(12,101,112,.45);
}

button:focus-visible,
a:focus-visible,
textarea:focus-visible {
  outline-color: #e76f51 !important;
}

[data-testid="send-button"],
button[aria-label*="Envoyer"] {
  background: #188f99 !important;
  color: #ffffff !important;
}

@media (max-width: 680px) {
  aside[aria-label="Panneau de contrôle"] {
    max-width: 46px !important;
    min-width: 46px !important;
    width: 46px !important;
  }
}