/* ============================================================================
   X.AI — la palette du site X.GPT PRO appliquée à l'application embarquée.

   L'app (Tailwind + shadcn) lit TOUTES ses couleurs dans des variables CSS en
   canaux HSL (« H S% L% ») : on les remplit ici avec la palette de la page
   (site/index.html), pour les deux thèmes. Le thème actif est porté par
   html[data-xgpt-theme], posé par le script de site/xai/index.html (qui lit le
   thème du site, même origine) et mis à jour par la page hôte.

   En bas de fichier : les accents violets écrits en dur dans l'app (dégradés,
   textes, ombres, scrollbar) sont ramenés sur le dégradé et les gris du site.
   ========================================================================== */

html[data-xgpt-theme="dark"] {
  --background: 255 29% 5%;
  --foreground: 255 60% 96%;
  --card: 253 33% 11%;
  --card-foreground: 255 60% 96%;
  --popover: 253 33% 11%;
  --popover-foreground: 255 60% 96%;
  --primary: 249 100% 77%;
  --primary-foreground: 255 29% 5%;
  --secondary: 252 32% 15%;
  --secondary-foreground: 255 60% 96%;
  --muted: 252 32% 15%;
  --muted-foreground: 254 25% 76%;
  --accent: 249 100% 77%;
  --accent-foreground: 255 29% 5%;
  --destructive: 351 95% 71%;
  --destructive-foreground: 255 29% 5%;
  --border: 252 29% 17%;
  --input: 252 29% 17%;
  --ring: 188 86% 53%;
  --chart-1: 249 100% 77%;
  --chart-2: 188 86% 53%;
  --chart-3: 158 64% 52%;
  --chart-4: 43 96% 56%;
  --chart-5: 351 95% 71%;
  --sidebar-background: 252 35% 8%;
  --sidebar-foreground: 255 60% 96%;
  --sidebar-primary: 249 100% 77%;
  --sidebar-primary-foreground: 255 29% 5%;
  --sidebar-accent: 252 32% 15%;
  --sidebar-accent-foreground: 255 60% 96%;
  --sidebar-border: 253 28% 13%;
  --sidebar-ring: 188 86% 53%;
  --radius: 0.875rem;
  --grad: linear-gradient(102deg, #b4a7ff 0%, #22d3ee 58%, #34d399 100%);
}

html[data-xgpt-theme="light"] {
  --background: 250 60% 98%;
  --foreground: 252 42% 14%;
  --card: 0 0% 100%;
  --card-foreground: 252 42% 14%;
  --popover: 0 0% 100%;
  --popover-foreground: 252 42% 14%;
  --primary: 247 83% 65%;
  --primary-foreground: 0 0% 100%;
  --secondary: 253 47% 96%;
  --secondary-foreground: 252 42% 14%;
  --muted: 253 47% 96%;
  --muted-foreground: 250 16% 37%;
  --accent: 247 83% 65%;
  --accent-foreground: 0 0% 100%;
  --destructive: 347 77% 50%;
  --destructive-foreground: 0 0% 100%;
  --border: 252 37% 92%;
  --input: 252 37% 92%;
  --ring: 192 91% 36%;
  --chart-1: 247 83% 65%;
  --chart-2: 192 91% 36%;
  --chart-3: 161 94% 30%;
  --chart-4: 32 95% 44%;
  --chart-5: 347 77% 50%;
  --sidebar-background: 252 100% 99%;
  --sidebar-foreground: 252 42% 14%;
  --sidebar-primary: 247 83% 65%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 253 47% 96%;
  --sidebar-accent-foreground: 252 42% 14%;
  --sidebar-border: 252 38% 95%;
  --sidebar-ring: 192 91% 36%;
  --radius: 0.875rem;
  --grad: linear-gradient(102deg, #6d5df0 0%, #0e7490 58%, #059669 100%);
}

/* ------------------------------------------------- dégradés signature du site */
html[data-xgpt-theme] .purple-tween-border::before {
  background-image: var(--grad);
  background-size: 300% 300%;
}
html[data-xgpt-theme] .gradient-text-purple {
  background-image: var(--grad);
}
html[data-xgpt-theme] .purple-glow {
  box-shadow: 0 0 20px -4px hsl(var(--primary) / 0.45);
}

/* ------------------------------------------------------- textes violets clairs */
html[data-xgpt-theme] .text-purple-50,
html[data-xgpt-theme] .text-purple-100 {
  color: hsl(var(--foreground)) !important;
}
html[data-xgpt-theme] .text-purple-200,
html[data-xgpt-theme] .text-purple-300 {
  color: hsl(var(--muted-foreground)) !important;
}
html[data-xgpt-theme] .text-purple-400 {
  color: hsl(var(--primary)) !important;
}
html[data-xgpt-theme] .text-purple-50\/90 {
  color: hsl(var(--foreground) / 0.9) !important;
}
html[data-xgpt-theme] .text-purple-200\/70 {
  color: hsl(var(--muted-foreground) / 0.7) !important;
}
html[data-xgpt-theme] .text-purple-300\/40 {
  color: hsl(var(--muted-foreground) / 0.4) !important;
}
html[data-xgpt-theme] .text-purple-300\/50 {
  color: hsl(var(--muted-foreground) / 0.5) !important;
}
html[data-xgpt-theme] .text-purple-300\/60 {
  color: hsl(var(--muted-foreground) / 0.6) !important;
}
html[data-xgpt-theme] .text-purple-300\/70 {
  color: hsl(var(--muted-foreground) / 0.7) !important;
}
html[data-xgpt-theme] .text-purple-400\/60 {
  color: hsl(var(--primary) / 0.6) !important;
}

/* ------------------------------------------------------ fonds et bordures */
html[data-xgpt-theme] .bg-purple-500\/10 {
  background-color: hsl(var(--primary) / 0.1) !important;
}
html[data-xgpt-theme] .bg-purple-500\/15 {
  background-color: hsl(var(--primary) / 0.15) !important;
}
html[data-xgpt-theme] .bg-purple-500\/20 {
  background-color: hsl(var(--primary) / 0.2) !important;
}
html[data-xgpt-theme] .border-purple-400\/30 {
  border-color: hsl(var(--primary) / 0.3) !important;
}
html[data-xgpt-theme] .border-purple-500\/15 {
  border-color: hsl(var(--primary) / 0.15) !important;
}
html[data-xgpt-theme] .border-purple-500\/20 {
  border-color: hsl(var(--primary) / 0.2) !important;
}
html[data-xgpt-theme] .border-purple-500\/50 {
  border-color: hsl(var(--primary) / 0.5) !important;
}

/* --------------------------------------------------------------- dégradés */
html[data-xgpt-theme] .from-purple-500,
html[data-xgpt-theme] .from-purple-600 {
  --tw-gradient-from: hsl(var(--primary)) var(--tw-gradient-from-position) !important;
}
html[data-xgpt-theme] .to-indigo-500,
html[data-xgpt-theme] .to-indigo-600 {
  --tw-gradient-to: hsl(var(--ring)) var(--tw-gradient-to-position) !important;
}
html[data-xgpt-theme] .shadow-purple-900\/40,
html[data-xgpt-theme] .shadow-purple-950\/40 {
  --tw-shadow-color: hsl(var(--primary) / 0.35) !important;
}

/* ------------------------------------------------- scrollbar et curseur d'écriture */
html[data-xgpt-theme] .scrollbar-thin {
  scrollbar-color: hsl(var(--primary) / 0.35) transparent;
}
html[data-xgpt-theme] .scrollbar-thin::-webkit-scrollbar-thumb {
  background-color: hsl(var(--primary) / 0.3);
}
html[data-xgpt-theme] .scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background-color: hsl(var(--primary) / 0.5);
}
html[data-xgpt-theme] .typing-cursor::after {
  color: hsl(var(--primary));
}