/* ══════════════════════════════════════════════════════════════════════════
   ds-scrollbar.css — Barres de défilement, définition unique

   Ces règles étaient dispersées dans DOUZE fichiers, avec des largeurs (3, 4
   et 10 px) et des couleurs (gris, rouge) qui ne s'accordaient pas. Une seule
   source ici, plus trois variations pour les cas qui le justifient.

   À charger TÔT (avant les feuilles de composants) : une règle de composant
   plus spécifique peut ainsi encore surcharger si nécessaire.

   ── Variations ────────────────────────────────────────────────────────────
       .ds-scroll--fin      listes latérales, panneaux étroits
       .ds-scroll--accent   grilles de filtres (poignée rouge, plus visible)
       .ds-scroll--none     barres de navigation horizontales (masquée)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Défaut ───────────────────────────────────────────────────────────── */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--border, #333) transparent;
}

::-webkit-scrollbar        { width: 9px; height: 9px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }

::-webkit-scrollbar-thumb {
    background: var(--border, #333);
    border-radius: 6px;
    /* Bordure transparente : la poignée paraît fine sans réduire la zone
       cliquable, qui reste confortable à viser. */
    border: 2px solid transparent;
    background-clip: content-box;
    transition: background .15s;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-dimmer, #555);
    background-clip: content-box;
}

/* ── Fine : listes de conversations, résultats de recherche ───────────── */

.ds-scroll--fin { scrollbar-width: thin; }
.ds-scroll--fin::-webkit-scrollbar       { width: 5px; height: 5px; }
.ds-scroll--fin::-webkit-scrollbar-thumb {
    border: 1px solid transparent;
    border-radius: 3px;
}

/* ── Accent : grilles de filtres, où la barre guide le parcours ───────── */

.ds-scroll--accent { scrollbar-color: var(--red, #ff2525) rgba(255,255,255,.05); }
.ds-scroll--accent::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .05);
    border-radius: 6px;
}
.ds-scroll--accent::-webkit-scrollbar-thumb {
    background: var(--red, #ff2525);
    background-clip: content-box;
}
.ds-scroll--accent::-webkit-scrollbar-thumb:hover {
    background: var(--red-dark, #cc1f1f);
    background-clip: content-box;
}

/* ── Masquée : navigation horizontale, où la barre gênerait ───────────── */

.ds-scroll--none { scrollbar-width: none; -ms-overflow-style: none; }
.ds-scroll--none::-webkit-scrollbar { display: none; }