/* =========================================================================
   Thème PIXEL Compétences pour LibreChat
   Couleurs reprises de pixel-competences.com :
     rose   #FF63B1 (255 99 177)   rose clair #FF8FC4 (255 143 196)
     bleu   #638DEC (99 141 236)
     fond   hsl(240 18% 13%) ≈ #1B1B27 (27 27 39)
     carte  hsl(240 10% 22%) ≈ #32323E (50 50 62)
   Police : K2D (hébergée localement)
   Les variables LibreChat attendent des triplets « R G B ».
   ========================================================================= */

@font-face { font-family: 'K2D'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/k2d-400.woff2') format('woff2'); }
@font-face { font-family: 'K2D'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/k2d-500.woff2') format('woff2'); }
@font-face { font-family: 'K2D'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/k2d-600.woff2') format('woff2'); }
@font-face { font-family: 'K2D'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/k2d-700.woff2') format('woff2'); }

/* ---------- Commun aux deux modes ---------- */
html:root {
  --theme-font-family: 'K2D', Inter, sans-serif !important;
  --brand-purple: 255 99 177 !important;
  --surface-submit: 255 99 177 !important;
  --surface-submit-hover: 236 72 153 !important;
  --ring-primary: 255 99 177 !important;
  --status-verified: 255 99 177 !important;
}

html,
body,
button,
input,
textarea,
select {
  font-family: 'K2D', Inter, sans-serif;
}

/* ---------- Mode clair ---------- */
html:root:not(.dark) {
  --accent-primary: 70 110 220 !important;
  --accent-primary-hover: 50 88 196 !important;
  --link: 70 110 220 !important;
  --link-hover: 50 88 196 !important;
  --surface-secondary: 249 247 251 !important;
  --surface-primary-alt: 249 247 251 !important;
  --surface-active: 252 231 243 !important;
  --surface-active-alt: 251 207 232 !important;
}

/* ---------- Mode sombre (ambiance du site) ---------- */
/* Les gris foncés neutres de LibreChat, teintés bleu nuit comme le site.
   Certaines zones (fond de la discussion) utilisent ces gris directement. */
html:root.dark {
  --gray-500: 96 96 124 !important;
  --gray-600: 66 66 88 !important;
  --gray-650: 58 58 78 !important;
  --gray-700: 46 46 64 !important;
  --gray-800: 27 27 39 !important;
  --gray-850: 23 23 34 !important;
  --gray-875: 20 20 30 !important;
  --gray-900: 16 16 25 !important;
}

html:root.dark {
  --presentation: 27 27 39 !important;
  --surface-primary: 22 22 33 !important;
  --surface-primary-alt: 22 22 33 !important;
  --surface-primary-contrast: 31 31 45 !important;
  --surface-secondary: 36 36 52 !important;
  --surface-secondary-alt: 36 36 52 !important;
  --surface-tertiary: 50 50 62 !important;
  --surface-tertiary-alt: 50 50 62 !important;
  --surface-dialog: 31 31 45 !important;
  --surface-chat: 40 40 56 !important;
  --surface-code: 18 18 28 !important;
  --surface-hover: 54 54 72 !important;
  --surface-hover-alt: 64 64 84 !important;
  --surface-composer-hover: 48 48 66 !important;
  --surface-active: 70 56 88 !important;
  --surface-active-alt: 50 50 62 !important;
  --header-primary: 27 27 39 !important;
  --header-hover: 50 50 62 !important;
  --header-button-hover: 36 36 52 !important;
  --border-light: 48 48 66 !important;
  --border-medium: 64 64 86 !important;
  --border-medium-alt: 64 64 86 !important;
  --border-heavy: 89 89 153 !important;
  --border-xheavy: 120 120 170 !important;
  --accent-primary: 99 141 236 !important;
  --accent-primary-hover: 130 165 240 !important;
  --link: 130 165 240 !important;
  --link-hover: 160 188 245 !important;
}

/* ---------- Page de connexion : logo plus grand, version blanche en sombre ---------- */
div.h-10:has(> img[src$='logo.svg']) {
  height: 72px;
  margin-top: 2.5rem;
}
html.dark img[src$='logo.svg'] {
  content: url('pixel-logo-white.png');
}

/* Champs de formulaire en sombre : LibreChat force un fond #0d0d0d */
html.dark .webkit-dark-styles,
html.dark .webkit-dark-styles:focus {
  -webkit-box-shadow: 0 0 0 50vh rgb(22 22 33) inset;
}

/* Interface uniquement en français : sélecteur de langue masqué (Réglages > Général) */
div:has(> div > #language-selector-label) {
  display: none !important;
}

/* Barre de saisie : pas de pastilles d'outils (les outils restent actifs, l'IA choisit seule) */
/* (le bouton « Tools Options », dans le même conteneur, reste visible) */
form button[role='checkbox'][aria-label],
form div:has(> button[role='checkbox']):not(:has(> button[aria-label='Tools Options'])) {
  display: none !important;
}

/* Menu des outils : pas d'épingles, un interrupteur par outil (ajouté par pixel.js) */
#tools-dropdown-menu [role='menuitem'] button[aria-label],
#tools-dropdown-menu [role='menuitemcheckbox'] button[aria-label] {
  display: none !important;
}
.pixel-switch {
  position: relative;
  flex-shrink: 0;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: rgb(var(--gray-600, 120 120 140) / 0.55);
  transition: background-color 0.15s ease;
}
.pixel-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
  transition: transform 0.15s ease;
}
.pixel-switch[data-on='true'] {
  background: rgb(255 99 177);
}
.pixel-switch[data-on='true']::after {
  transform: translateX(14px);
}
@media (prefers-reduced-motion: reduce) {
  .pixel-switch,
  .pixel-switch::after {
    transition: none;
  }
}

/* Liste des conversations : pas de barre verticale à gauche de la conversation active */
nav .before\:bg-text-primary::before,
[data-testid='convo-item'].before\:absolute::before,
[data-testid='favorite-item'].before\:absolute::before {
  content: none !important;
  display: none !important;
}

/* Panneau d'aperçu : quand le sélecteur Code/Aperçu n'a qu'une option (fichier PowerPoint,
   Word, Excel…), il ne sert à rien. On l'affiche comme un simple titre : sans icône ▷,
   sans fond, non cliquable. Le vrai sélecteur Code/Aperçu (2 options) reste inchangé. */
div[role='radiogroup']:has(> button[role='radio']:only-of-type) {
  background: transparent !important;
  pointer-events: none;
}
div[role='radiogroup']:has(> button[role='radio']:only-of-type) > div {
  display: none !important;
}
div[role='radiogroup'] > button[role='radio']:only-of-type > span:first-child:has(svg) {
  display: none !important;
}

/* Bouton d'envoi : icône blanche sur le rose */
button[data-testid='send-button']:not(:disabled) {
  background-color: rgb(255 99 177);
  color: #fff;
}
button[data-testid='send-button']:not(:disabled):hover {
  background-color: rgb(236 72 153);
}