/* =================================================================
   Thèmes.

   Chargé APRÈS app.css : ses valeurs de :root remplacent celles d'origine.
   Un thème ne redéfinit que des variables — aucune règle de mise en page,
   donc aucun risque de casser l'affichage.

   Deux variables comptent particulièrement :
     --voile       teinte des bordures, survols et fonds légers.
                   Blanche sur les thèmes sombres, sombre sur le thème clair.
     --sur-accent  reste TOUJOURS blanche : elle habille ce qui est posé sur
                   le dégradé coloré (bulles envoyées) ou sur le voile noir
                   du plein écran, où le fond ne change jamais.
================================================================= */

:root {
  --sur-accent: 255, 255, 255;   /* jamais redéfini */
  --voile: 255, 255, 255;
  --ombre: 0, 0, 0;
  --accent1: #8b3dff;  --accent1-rgb: 139, 61, 255;
  --accent2: #18d8ff;  --accent2-rgb: 24, 216, 255;

  /* Anciens noms, conservés pour ne rien casser ailleurs */
  --purple: var(--accent1);
  --purple-2: var(--accent1);
  --cyan: var(--accent2);

  --gradient: linear-gradient(135deg, var(--accent1) 0%, var(--accent2) 100%);
  --gradient-soft: linear-gradient(135deg,
                   rgba(var(--accent1-rgb), 0.20),
                   rgba(var(--accent2-rgb), 0.18));
}

/* Le fond « aurore » suit lui aussi les couleurs du thème. */
#bg-aurora {
  background:
    radial-gradient(circle at 12% 20%, rgba(var(--accent1-rgb), 0.20), transparent 45%),
    radial-gradient(circle at 88% 75%, rgba(var(--accent2-rgb), 0.16), transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(var(--accent1-rgb), 0.06), transparent 65%),
    var(--bg-base);
}

/* ─────────────────── Thèmes sombres : les accents ─────────────────── */

[data-theme="violet"] {
  --accent1: #8b3dff;  --accent1-rgb: 139, 61, 255;
  --accent2: #18d8ff;  --accent2-rgb: 24, 216, 255;
}

[data-theme="rouge"] {
  --accent1: #ff2f55;  --accent1-rgb: 255, 47, 85;
  --accent2: #ff8a3d;  --accent2-rgb: 255, 138, 61;
  --bg-base: #120609;
}

[data-theme="bleu"] {
  --accent1: #2f6bff;  --accent1-rgb: 47, 107, 255;
  --accent2: #4ab8ff;  --accent2-rgb: 74, 184, 255;
  --bg-base: #050a18;
}

[data-theme="vert"] {
  --accent1: #12b981;  --accent1-rgb: 18, 185, 129;
  --accent2: #6ee7a8;  --accent2-rgb: 110, 231, 168;
  --bg-base: #04120d;
}

[data-theme="cyan"] {
  --accent1: #06b6d4;  --accent1-rgb: 6, 182, 212;
  --accent2: #67e8f9;  --accent2-rgb: 103, 232, 249;
  --bg-base: #04121a;
}

/* Réservé aux membres VIP et aux testeurs. */
[data-theme="dore"] {
  --accent1: #c9922a;  --accent1-rgb: 201, 146, 42;
  --accent2: #ffd75e;  --accent2-rgb: 255, 215, 94;
  --bg-base: #120e04;
  --bg-card: rgba(30, 25, 12, 0.74);
  --bg-card-hover: rgba(44, 36, 16, 0.84);
  --line: rgba(255, 215, 94, 0.10);
  --line-strong: rgba(255, 215, 94, 0.22);
}

/* ────────────────────── Noir intense (OLED) ───────────────────────── */
/* Sur un écran OLED, le noir pur éteint réellement les pixels : c'est plus
   contrasté et ça consomme moins de batterie. On garde les accents colorés,
   sinon le texte blanc des bulles envoyées deviendrait illisible. */
[data-theme="noir"] {
  --bg-base: #000000;
  --bg-card: rgba(9, 9, 12, 0.92);
  --bg-card-hover: rgba(22, 22, 28, 0.94);
  --bg-active: rgba(38, 38, 48, 0.8);
  --bg-input: rgba(0, 0, 0, 0.72);
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.14);
  --shadow-deep: 0 20px 60px rgba(0, 0, 0, 0.9);
}
[data-theme="noir"] #bg-aurora {
  background:
    radial-gradient(circle at 12% 20%, rgba(var(--accent1-rgb), 0.10), transparent 42%),
    radial-gradient(circle at 88% 75%, rgba(var(--accent2-rgb), 0.08), transparent 42%),
    #000000;
}

/* ─────────────────────────── Thème clair ──────────────────────────── */
/* Le seul qui retourne toute la palette. --voile devient sombre : les
   bordures et survols, blancs en mode sombre, doivent noircir ici — sans
   quoi ils disparaîtraient purement et simplement. */
[data-theme="blanc"] {
  --bg-base: #eef0f7;
  --bg-card: rgba(255, 255, 255, 0.88);
  --bg-card-hover: rgba(255, 255, 255, 0.98);
  --bg-active: rgba(139, 61, 255, 0.10);
  --bg-input: rgba(255, 255, 255, 0.92);
  --line: rgba(18, 22, 40, 0.10);
  --line-strong: rgba(18, 22, 40, 0.18);
  --text: #141827;
  --text-mute: #6b7285;
  --text-soft: #3c4256;
  --voile: 18, 22, 40;
  --ombre: 90, 100, 130;
  --shadow-deep: 0 18px 44px rgba(90, 100, 130, 0.18);
}
[data-theme="blanc"] #bg-aurora {
  background:
    radial-gradient(circle at 12% 20%, rgba(var(--accent1-rgb), 0.10), transparent 46%),
    radial-gradient(circle at 88% 75%, rgba(var(--accent2-rgb), 0.10), transparent 46%),
    var(--bg-base);
}
/* En clair, les panneaux translucides doivent rester lisibles : on réduit
   le flou, qui délave le texte sur fond pâle. */
[data-theme="blanc"] aside,
[data-theme="blanc"] section,
[data-theme="blanc"] .card {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
/* Les bulles reçues ont besoin d'un fond franc sur clair. */
[data-theme="blanc"] .msg.them {
  background: #ffffff;
  border-color: rgba(18, 22, 40, 0.10);
}
[data-theme="blanc"] .day-sep { background: rgba(18, 22, 40, 0.06); }
[data-theme="blanc"] ::-webkit-scrollbar-thumb { background: rgba(18, 22, 40, 0.18); }

/* ═══════════════ Taille du texte ════════════════════════════════════
   Les tailles sont écrites en pixels un peu partout : plutôt que de tout
   convertir, on ajuste les éléments qu'on lit vraiment — messages, listes,
   champ de saisie. Le reste (icônes, badges) garde sa taille, sinon la
   mise en page se déforme.
==================================================================== */

[data-taille="petit"] .msg .body,
[data-taille="petit"] .v-corps          { font-size: 13px; }
[data-taille="petit"] .convo-name,
[data-taille="petit"] .v-c-nom          { font-size: 13px; }
[data-taille="petit"] .convo-preview,
[data-taille="petit"] .v-c-sous         { font-size: 12px; }
[data-taille="petit"] #thread-title      { font-size: 15px; }

[data-taille="grand"] .msg .body,
[data-taille="grand"] .v-corps          { font-size: 16.5px; line-height: 1.5; }
[data-taille="grand"] .convo-name,
[data-taille="grand"] .v-c-nom          { font-size: 15.5px; }
[data-taille="grand"] .convo-preview,
[data-taille="grand"] .v-c-sous         { font-size: 14px; }
[data-taille="grand"] #thread-title      { font-size: 18px; }
[data-taille="grand"] #composer-text     { font-size: 16.5px; }
[data-taille="grand"] .msg .who          { font-size: 12.5px; }
[data-taille="grand"] .vc-duree          { font-size: 13px; }

/* ═══════════════ Halo coloré d'arrière-plan ═════════════════════════
   Ce n'est pas une animation : c'est un dégradé radial fixe. Le couper
   donne un fond parfaitement uni — utile en noir intense sur écran OLED,
   où le moindre halo empêche les pixels de s'éteindre.
==================================================================== */
[data-fond="plat"] #bg-aurora { background: var(--bg-base) !important; }

/* ═══════════════ Fond de la conversation ════════════════════════════
   Motifs légers dessinés en CSS : aucun fichier à télécharger, et ils
   s'adaptent tout seuls aux couleurs du thème choisi.
==================================================================== */
[data-fondconv="trame"] #messages {
  background-image:
    linear-gradient(rgba(var(--voile), 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--voile), 0.035) 1px, transparent 1px);
  background-size: 22px 22px;
}
[data-fondconv="bulles"] #messages {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(var(--accent1-rgb), 0.07) 0 9px, transparent 10px),
    radial-gradient(circle at 70% 60%, rgba(var(--accent2-rgb), 0.06) 0 13px, transparent 14px),
    radial-gradient(circle at 45% 85%, rgba(var(--accent1-rgb), 0.05) 0 7px, transparent 8px);
  background-size: 190px 190px;
}
[data-fondconv="degrade"] #messages {
  background-image: linear-gradient(160deg,
    rgba(var(--accent1-rgb), 0.10) 0%,
    transparent 45%,
    rgba(var(--accent2-rgb), 0.09) 100%);
}
[data-fondconv="ardoise"] #messages {
  background-image: repeating-linear-gradient(45deg,
    rgba(var(--voile), 0.028) 0 2px, transparent 2px 9px);
}
[data-fondconv="papier"] #messages {
  background-image:
    repeating-linear-gradient(0deg,
      rgba(var(--voile), 0.05) 0 1px, transparent 1px 26px);
}