/* Dashboard -- page dédiée (voir dashboard.js + index.html #page-dashboard).
   Convertie depuis un panneau flottant le 2026-07-06 (retour de Lionel :
   "quand je clique sur le dashboard, ça doit m'amener sur une autre page...
   pas ouvrir une fenêtre dans l'interface Amber"). */

/* L'ancien label texte "Dashboard" (coin haut-droit de la page principale)
   a été RETIRÉ le 2026-07-11 avec ses règles #dashboard-label -- voir le
   commentaire dans index.html. Navigation : onglets #page-nav + glissement
   (shared/swipe-nav.js). */

/* --- Page Dashboard elle-même ------------------------------------------- */

/* Thème "néon violet" (demande de Lionel, 2026-07-07 : "assorti à
   l'interface d'Amber... pas tout violet, mais toutes les fenêtres avec un
   accent néon violet"). Teinte reprise telle quelle de l'accent violet déjà
   utilisé ailleurs dans l'interface (voir shared/styles.css,
   #doc-drop-zone--active : rgba(150, 100, 255, ...)) -- même famille de
   couleur que le reste d'Amber, pas une teinte inventée à part. La plaque
   "Dashboard" reste en or (élément de marque déjà validé par Lionel) :
   le violet habille les fenêtres de données, pas tout l'écran. */
:root {
  --neon-violet: rgb(190, 150, 255);
  --neon-violet-soft: rgba(190, 150, 255, 0.28);
  --neon-violet-glow: rgba(150, 100, 255, 0.4);
  --neon-violet-glow-soft: rgba(150, 100, 255, 0.14);

  /* Accents supplémentaires (2026-07-07, retour de Lionel après retrait du
     coeur : "donner un petit style à chaque fenêtre... une couleur assortie
     avec tout l'ensemble") -- même famille froide violet/bleu, pas des
     teintes qui jureraient. Bleu ciel repris de #dashboard-toggle /
     scrollbar déjà en place ; cyan choisi comme 3e teinte de la même
     famille pour distinguer une 3e fenêtre sans sortir de la palette. */
  --neon-blue: rgb(140, 195, 255);
  --neon-blue-soft: rgba(140, 195, 255, 0.28);
  --neon-blue-glow: rgba(120, 180, 255, 0.4);
  --neon-blue-glow-soft: rgba(120, 180, 255, 0.14);

  --neon-cyan: rgb(120, 230, 220);
  --neon-cyan-soft: rgba(120, 230, 220, 0.28);
  --neon-cyan-glow: rgba(100, 220, 210, 0.4);
  --neon-cyan-glow-soft: rgba(100, 220, 210, 0.14);
}

/* Fond raccordé à l'interface principale (2026-07-12, demande de Lionel :
   "que le dashboard soit plus en reflet avec l'interface [Alpha]") : même
   bleu nuit que le champ d'étoiles (#030a1c, voir constellation.js
   setClearColor) + une lueur OR discrète en haut (la marque) par-dessus
   les lueurs violettes existantes -- le thème néon reste, il s'assoit
   simplement sur le même monde que la page principale. */
#page-dashboard {
  background:
    radial-gradient(ellipse 700px 320px at 50% -6%, rgba(225, 185, 110, 0.07), transparent 60%),
    radial-gradient(ellipse 900px 500px at 50% -8%, rgba(150, 100, 255, 0.12), transparent 65%),
    radial-gradient(ellipse 700px 400px at 100% 100%, rgba(150, 100, 255, 0.08), transparent 60%),
    #030a1c;
}

.dashboard-page__header {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 2026-07-15 : Lionel veut le TITRE (plaque) CENTRÉ sur chaque page. Le nav
     global est petit, en haut à GAUCHE (left:18px) -- il ne chevauche pas une
     plaque centrée. Donc padding symétrique + justify-content center. Touche
     #page-dashboard ET #page-agents (classe partagée). */
  padding: 22px 32px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Coeur néon animé + lignes de connexion RETIRÉS le 2026-07-07 (retour de
   Lionel après l'avoir vu en vrai : "on ne le voit pas, il est inutile").
   Voir plus bas : "accent de couleur par fenêtre" pour ce qui le remplace. */

/* La "plaque" demandée par Lionel : plaque noire, texte "Dashboard" en or,
   plus grande/voyante que le petit label de la page principale mais pas
   criarde -- même famille de police que la marque "L.L". */
.dashboard-plaque {
  display: inline-block;
  padding: 10px 30px;
  background: rgba(10, 10, 14, 0.92);
  border: 1px solid rgba(225, 185, 110, 0.35);
  border-radius: 8px;
  font-family: Georgia, "Palatino Linotype", "Book Antiqua", serif;
  font-style: italic;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.08em;
  color: rgba(225, 185, 110, 0.92);
  text-shadow: 0 0 10px rgba(225, 185, 110, 0.3);
}

/* SAGE GARDIEN, H2b (2026-07-15) : pastille d'état du circuit breaker, à droite
   de l'en-tête du Dashboard (en-tête en position:relative). Verte au repos
   (CLOSED), rouge pulsée en alerte (OPEN). */
.sage-indicator {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid var(--neon-cyan-soft);
  color: rgba(200, 235, 230, 0.85);
  background: rgba(10, 20, 24, 0.5);
}
.sage-indicator::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--neon-cyan);
  box-shadow: 0 0 8px var(--neon-cyan-glow);
}
.sage-indicator--open {
  border-color: rgba(255, 120, 90, 0.6);
  color: rgba(255, 190, 170, 0.95);
  background: rgba(40, 12, 8, 0.55);
}
.sage-indicator--open::before {
  background: #ff6a4a;
  box-shadow: 0 0 10px rgba(255, 106, 74, 0.7);
  animation: sagePulse 1.4s ease-in-out infinite;
}
@keyframes sagePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

#dashboard-back {
  background: none;
  border: 1px solid rgba(150, 200, 255, 0.25);
  border-radius: 8px;
  color: rgba(210, 230, 255, 0.85);
  padding: 8px 16px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

#dashboard-back:hover {
  background: rgba(40, 70, 130, 0.35);
  border-color: rgba(150, 200, 255, 0.5);
}

/* Grille de cartes compactes -- volontairement petites (retour de Lionel :
   "pas des gros carrés, pas des gros rectangles"), avec de la place
   naturelle pour d'autres cartes plus tard (auto-fill : pas besoin de
   redéfinir la grille quand on en ajoutera, voir mémoire
   amber_dashboard_v2_vision). */
.dashboard-grid {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 320px));
  gap: 18px;
  padding: 24px 32px;
  align-content: start;
  overflow-y: auto;
}

.dashboard-card {
  /* Dégradé léger (2026-07-12) : donne de la profondeur plutôt qu'un aplat. */
  background: linear-gradient(160deg, rgba(30, 20, 55, 0.5), rgba(10, 6, 20, 0.62));
  /* Flou léger en fond -- effet "verre dépoli" plutôt qu'un aplat plat. */
  backdrop-filter: blur(7px);
  border: 1px solid var(--neon-violet-soft);
  border-radius: 12px;
  padding: 14px 16px;
  /* 2026-07-20 (Lionel) : carte ADAPTATIVE -- elle s'ajuste a son contenu et
     ne depasse jamais 300px (au-dela, le corps .dashboard-card__body defile).
     align-self:start empeche l'etirement a la hauteur de la ligne (grille). */
  max-height: 300px;
  align-self: start;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 22px var(--neon-violet-glow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 0 24px rgba(150, 100, 255, 0.03);
  /* Relief 3D (2026-07-12, demande de Lionel) : ombre portée qui suit la
     carte -> effet "posée au-dessus du fond". filter (pas box-shadow) pour
     que les variantes colorées gardent le relief sans le réécrire. */
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.45));
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* TOURNOI PAPER, T-D (2026-07-14) : carte "Session d'entraînement (live)".
   Le contenu (détail par trader) peut dépasser -> DÉFILEMENT INTERNE comme la
   carte conso (fini le texte qui "sort du carré"). Bouton ⤢ pour agrandir la
   carte et tout voir d'un coup (même idée que le zoom de la page Agents). */
.dashboard-card--session { border-color: var(--neon-cyan-soft); }
.dashboard-card--session .dashboard-card__title { color: var(--neon-cyan); text-shadow: 0 0 8px var(--neon-cyan-glow); }
#dashboard-session-live {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  font-size: 13px;
  color: #eee;
}
/* 2026-07-20 (Lionel) : agrandissement generalise a TOUTES les cartes (avant,
   seule la carte session). Cliquer ⤢ etale la carte sur toute la largeur et
   deplie sa hauteur -> on voit tout d'un coup. */
.dashboard-card--expanded {
  max-height: 82vh;
  grid-column: 1 / -1;
}
.dashboard-card__expand {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--neon-cyan-soft);
  color: var(--neon-cyan);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 2px 7px;
}
.dashboard-card__expand:hover { border-color: var(--neon-cyan-glow); }

/* 2026-07-20 (Lionel) : CORPS DEFILANT ajoute par dashboard.js autour du
   contenu de chaque carte -> le texte qui depassait "sort du carre" defile
   maintenant a l'interieur du cadre au lieu de deborder. */
.dashboard-card__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.dashboard-card:hover {
  border-color: var(--neon-violet-glow);
  /* Léger soulèvement au survol -> renforce l'effet 3D "carte qui flotte". */
  transform: translateY(-3px);
  box-shadow: 0 0 30px rgba(150, 100, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 24px rgba(150, 100, 255, 0.05);
}

/* Accent de couleur propre à chaque fenêtre fonctionnelle (2026-07-07) --
   "Historique" garde le violet par défaut ci-dessus ; les 2 autres cartes
   fonctionnelles ont chacune leur propre teinte de la même famille
   froide, pour que chaque fenêtre soit reconnaissable au premier coup
   d'oeil sans que l'ensemble ne jure. Les cartes "à venir" restent
   neutres (violet doux, pointillés) -- pas encore de contenu à distinguer. */
.dashboard-card--agents {
  border-color: var(--neon-blue-soft);
  box-shadow: 0 0 22px var(--neon-blue-glow-soft), inset 0 0 24px rgba(120, 180, 255, 0.03);
}

.dashboard-card--agents:hover {
  border-color: var(--neon-blue-glow);
  box-shadow: 0 0 30px rgba(120, 180, 255, 0.2), inset 0 0 24px rgba(120, 180, 255, 0.05);
}

.dashboard-card--agents .dashboard-card__title {
  color: var(--neon-blue);
  text-shadow: 0 0 8px var(--neon-blue-glow);
}

.dashboard-card--agents .agent-conv-row {
  border-left-color: var(--neon-blue-glow);
}

.dashboard-card--agents .agent-conv-row__header {
  color: var(--neon-blue);
}

.dashboard-card--consumption {
  border-color: var(--neon-cyan-soft);
  box-shadow: 0 0 22px var(--neon-cyan-glow-soft), inset 0 0 24px rgba(100, 220, 210, 0.03);
}

.dashboard-card--consumption:hover {
  border-color: var(--neon-cyan-glow);
  box-shadow: 0 0 30px rgba(100, 220, 210, 0.2), inset 0 0 24px rgba(100, 220, 210, 0.05);
}

.dashboard-card--consumption .dashboard-card__title {
  color: var(--neon-cyan);
  text-shadow: 0 0 8px var(--neon-cyan-glow);
}

.dashboard-card--consumption .token-usage-row {
  border-left-color: var(--neon-cyan-glow-soft);
}

.dashboard-card--consumption .token-period-value {
  color: var(--neon-cyan);
  text-shadow: 0 0 12px var(--neon-cyan-glow);
}

.dashboard-card__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  margin-bottom: 8px;
  color: var(--neon-violet);
  text-shadow: 0 0 8px var(--neon-violet-glow);
  flex-shrink: 0;
}

/* Titres en police calligraphiée (2026-07-07, retour de Lionel : "ça fait
   trop carré, trop ordinateur" -- elle veut le même esprit d'écriture que
   le monogramme L.L, sur les titres de toutes les fenêtres). Majuscules
   forcées + tracking retirés : un script cursif en capitales espacées est
   illisible, l'effet recherché est justement l'inverse d'un rendu
   "clavier". "Segoe Script" est native Windows (toujours présente, pas
   besoin d'Office) ; repli sur d'autres cursives si absente. Le bouton
   "vider" reste en dehors de cette règle (scopée à .dashboard-card__title
   plutôt qu'au conteneur .dashboard-card__title, qui garde les boutons
   lisibles). */
.dashboard-card__title-text {
  opacity: 0.9;
  font-family: "Segoe Script", "Brush Script MT", "Lucida Handwriting", cursive;
  font-size: 17px;
  font-weight: 400;
  flex: 1;
  min-width: 0;
}

/* Cartes vides réservées pour de futurs ajouts (demande de Lionel :
   "propose-moi au moins six sept fenêtres, on les remplira après") --
   bordure en pointillés, pas de contenu, pour que la grille ne paraisse
   pas vide/cassée avant qu'elles servent. */
.dashboard-card--placeholder {
  border-style: dashed;
  align-items: center;
  justify-content: center;
}

.dashboard-card--placeholder .dashboard-card__title {
  margin-bottom: 0;
}

.dashboard-placeholder-text {
  opacity: 0.35;
  font-size: 11px;
  font-style: italic;
  text-align: center;
}

/* Petit bouton de suppression manuelle -- JAMAIS de suppression
   automatique (demande explicite de Lionel : "c'est moi qui décide quand
   je supprime"). Volontairement discret, pas un gros bouton rouge -- une
   action rare, pas une action qu'on veut mettre en avant. */
.dashboard-clear-btn {
  background: none;
  border: 1px solid rgba(190, 150, 255, 0.25);
  border-radius: 6px;
  color: rgba(210, 190, 255, 0.6);
  font-size: 9px;
  text-transform: none;
  letter-spacing: normal;
  padding: 2px 7px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.dashboard-clear-btn:hover {
  background: rgba(150, 100, 255, 0.15);
  border-color: rgba(190, 150, 255, 0.6);
  color: rgba(230, 215, 255, 0.95);
}

#dashboard-messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dashboard-row {
  max-width: 92%;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.35;
  color: #eee;
}

.dashboard-row--user {
  align-self: flex-end;
  background: rgba(79, 127, 255, 0.5);
}

.dashboard-row--amber {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.08);
}

.dashboard-row__meta {
  font-size: 9px;
  opacity: 0.5;
  margin-bottom: 2px;
}

.dashboard-empty {
  opacity: 0.5;
  text-align: center;
  margin-top: 30px;
  font-size: 12px;
  color: #eee;
}

/* --- Carte "Consommation API" (Claude + Gemini) -------------------------- */
/* Fusion demandée par Lionel le 2026-07-07 : les 3 anciennes cartes
   (dépense du jour, de la semaine, total) sont remplacées par CETTE seule
   carte -- "tout ça devrait être dans la même fenêtre... pas dans deux
   fenêtres séparées". Contenu plus dense qu'avant (jour/semaine/mois +
   voix/texte + total + bloc Gemini) dans la même hauteur de carte fixe
   (voir .dashboard-card) -- défilement interne via overflow-y, scrollbar
   fine bleu ciel (voir règles ::-webkit-scrollbar plus bas). */
.dashboard-card--consumption {
  padding-bottom: 10px;
}

#dashboard-consumption {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  font-size: 13px;
  color: #eee;
}

.consumption-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.consumption-section__title {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.5;
}

/* Trois mini-colonnes jour/semaine/mois, cote à cote plutôt qu'empilées
   verticalement comme avant (les 2 anciennes cartes séparées) -- même
   information, plus compacte pour tenir dans une seule carte. */
.consumption-periods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.consumption-period {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  padding: 6px 4px;
}

.consumption-period .token-period-value {
  font-size: 18px;
  margin: 0 0 2px;
}

.consumption-period .token-period-label {
  font-size: 8px;
}

.token-period-value {
  font-size: 30px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--neon-violet);
  text-shadow: 0 0 12px var(--neon-violet-glow);
  margin: auto 0 4px;
  text-align: center;
}

.token-period-label {
  font-size: 10px;
  opacity: 0.5;
  text-align: center;
}

.token-usage-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 5px 8px;
  background: rgba(255, 255, 255, 0.04);
  border-left: 2px solid var(--neon-violet-glow-soft);
  border-radius: 8px;
  font-size: 11px;
}

.token-usage-row__label {
  opacity: 0.7;
}

.token-usage-row__value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.token-usage-row--total {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 2px;
  padding-top: 8px;
  background: none;
}

.token-usage-note {
  font-size: 10px;
  opacity: 0.4;
  line-height: 1.4;
}

/* Gemini (voix / écoute) : pas encore mesurable -- jamais de chiffre
   inventé (règle constante du projet, voir amber_visual_design_lessons).
   Bloc visuellement plus discret que Claude, séparé par une ligne fine. */
.consumption-section--gemini {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 8px;
}

.consumption-section--gemini .dashboard-empty {
  margin-top: 0;
  text-align: left;
  font-size: 10px;
  opacity: 0.45;
}

/* --- Carte "API Gemini" (2026-07-12) : accent BLEU pour la distinguer de la
   carte Anthropic (cyan). Même grammaire que --consumption. --- */
.dashboard-card--gemini {
  border-color: var(--neon-blue-soft);
  box-shadow: 0 0 22px var(--neon-blue-glow-soft), inset 0 0 24px rgba(120, 180, 255, 0.03);
}
.dashboard-card--gemini:hover {
  border-color: var(--neon-blue-glow);
  box-shadow: 0 0 30px rgba(120, 180, 255, 0.2), inset 0 0 24px rgba(120, 180, 255, 0.05);
}
.dashboard-card--gemini .dashboard-card__title {
  color: var(--neon-blue);
  text-shadow: 0 0 8px var(--neon-blue-glow);
}
.dashboard-card--gemini .token-usage-row {
  border-left-color: var(--neon-blue-glow-soft);
}
.dashboard-card--gemini .token-period-value {
  color: var(--neon-blue);
  text-shadow: 0 0 12px var(--neon-blue-glow);
}

/* Bloc "détail par modèle · exemple" dans la carte Anthropic : séparé et
   légèrement estompé pour bien signaler que c'est de la démo. */
.consumption-section--demo {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.14);
  opacity: 0.92;
}
.consumption-section--demo .consumption-section__title {
  opacity: 0.7;
}

/* --- Carte "Conversations entre agents" ---------------------------------- */
/* Demande explicite de Lionel 2026-07-07 : la fenêtre de message
   principale (chat/chat.js) doit rester UNIQUEMENT elle <-> Amber -- tout
   ce qui se passe entre agents (délégations, débats, briefs) doit vivre
   ici à la place, sur le dashboard. Voir claude_router.py,
   log_agent_conversation. */
#dashboard-agent-conversations {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.agent-conv-row {
  padding: 6px 9px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  /* La COULEUR du filet est posée par dashboard.js (couleur de l'agent
     qui répond, voir AGENT_COLORS) -- seule l'épaisseur vit ici. */
  border-left: 2px solid var(--neon-violet-glow);
  font-size: 13px;
  line-height: 1.45;
  color: #eee;
}

/* Séparateur de conversation (2026-07-12, demande de Lionel : "un gros
   point pour montrer que c'est une nouvelle conversation") : point OR
   lumineux (la marque, comme sur la page principale) + filet dégradé +
   étiquette discrète. Inséré par dashboard.js avant chaque chaîne qui
   part d'Alpha. */
.agent-conv-divider {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 10px 0 2px;
}

.agent-conv-divider__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(225, 185, 110, 0.95);
  box-shadow: 0 0 8px rgba(225, 185, 110, 0.8), 0 0 16px rgba(225, 185, 110, 0.35);
}

.agent-conv-divider__label {
  font-size: 9px;
  letter-spacing: 0.04em;
  color: rgba(225, 185, 110, 0.65);
  white-space: nowrap;
}

.agent-conv-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(225, 185, 110, 0.4), transparent);
}

.agent-conv-row__arrow {
  opacity: 0.5;
  color: #eee;
}

.agent-conv-row__header {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: 10px;
  color: var(--neon-violet);
  margin-bottom: 3px;
}

.agent-conv-row__path {
  text-transform: capitalize;
  font-weight: 600;
}

.agent-conv-row__time {
  opacity: 0.5;
}

.agent-conv-row__task {
  opacity: 0.55;
  font-style: italic;
  margin-bottom: 3px;
}

.agent-conv-row__response {
  opacity: 0.9;
}

/* MINI-ALPHA (2026-07-16) : petite sphere de particules d'Alpha, calee dans
   l'espace libre a DROITE du dashboard. Decorative (pointer-events none) : elle
   ne gene jamais les cartes, meme si elle les frole. Le canvas suit la taille
   de ce conteneur (voir constellation/mini-sphere.js). */
.mini-alpha {
  position: absolute;
  /* 2026-07-20 (Lionel) : une taille au-dessus (170 -> 215) et decalee d'un cran
     vers la gauche (right 28 -> 56). La page Agents la surcharge (plus grande
     encore) via .mini-alpha.mini-alpha--agents dans agents.css. */
  right: 56px;
  top: 50%;
  transform: translateY(-50%);
  width: 215px;
  height: 215px;
  pointer-events: none;
  z-index: 1;
}

/* --- Scrollbar fine bleu ciel (2026-07-07) -------------------------------- */
/* Retour de Lionel : la barre de défilement par défaut est "trop large" et
   blanche, "pas très assorti" avec le thème violet. Electron = Chromium,
   donc ::-webkit-scrollbar est disponible (pas de fallback Firefox à
   prévoir ici). Bleu ciel repris de la même famille que l'icône
   #dashboard-toggle (rgba(150, 200, 255, ...)) plutôt qu'une teinte
   inventée à part -- cohérent avec une couleur déjà présente sur cette
   page. Scopé à #page-dashboard : ne touche pas le reste de l'appli. */
#page-dashboard *::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

#page-dashboard *::-webkit-scrollbar-track {
  background: transparent;
}

#page-dashboard *::-webkit-scrollbar-thumb {
  background: rgba(150, 200, 255, 0.35);
  border-radius: 999px;
}

#page-dashboard *::-webkit-scrollbar-thumb:hover {
  background: rgba(150, 200, 255, 0.6);
}