/* Extrait de student_dashboard.html. Ordre historique : 13. */
/* ========== CONTAINER DRONE ESILA - STANDALONE ========== */
#esilaRobotContainer {
  position: fixed;
  bottom: 100px;
  right: 20px;
  z-index: 1000001 !important;
  pointer-events: all !important;
  cursor: pointer;
  user-select: none;
  touch-action: none;
}

/* Assistant léger par défaut : aucun contexte WebGL n'est consommé sur le
   tableau de bord. Le canvas transparent reste la cible tactile accessible. */
#esilaRobotContainer::before {
  content: '🤖';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 48px;
  line-height: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34,211,238,.35), rgba(79,70,229,.12) 58%, transparent 72%);
  filter: drop-shadow(0 5px 12px rgba(59,130,246,.55));
  pointer-events: none;
}

#esilaRobotContainer.esila-webgl-ready::before { opacity: 0; }

/* Classe pour le dragging */
#esilaRobotContainer.dragging {
  cursor: grabbing;
}

#esilaRobotContainer.esila-positioned {
  right: auto !important;
  bottom: auto !important;
}

#esilaRobotContainer.dragging * {
  pointer-events: none;
}

/* ========== CANVAS 3D DRONE SEUL ========== */
#esilaDroneCanvas {
  width: 80px;
  height: 80px;
  display: block;
  pointer-events: all;
  cursor: pointer;
  filter: drop-shadow(0 4px 12px rgba(59, 130, 246, 0.5));
  transition: all 0.3s ease;
}

#esilaDroneCanvas:hover {
  filter: drop-shadow(0 6px 20px rgba(239, 68, 68, 0.7));
  transform: scale(1.1);
}

/* ========== BOUTON SON SUR LE DRONE ========== */
.esila-sound-toggle {
  position: absolute;
  top: 50%;
  right: auto;
  left: -52px;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.85);
  border: 2px solid #4caf50;
  color: white;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.3s;
  pointer-events: auto;
  z-index: 15;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(76, 175, 80, 0.4);
  opacity: 0.8;
}

.esila-sound-toggle:hover {
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.8);
  opacity: 1;
  border-width: 3px;
}

.esila-sound-toggle.muted {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.85);
}

/* ========== RESPONSIVE - TOUS APPAREILS ========== */

/* Smartphones portrait (< 480px) */
@media (max-width: 480px) {
  #esilaRobotContainer {
    bottom: 90px !important;
    right: 15px !important;
  }
  
  #esilaDroneCanvas {
    width: 56px !important;
    height: 56px !important;
  }
  
  #esilaHelpButton {
    bottom: 15px !important;
    right: 15px !important;
    padding: 10px 16px;
    font-size: 12px;
  }
  
  .help-icon {
    font-size: 16px;
  }
  
  .esila-sound-toggle {
    width: 44px;
    height: 44px;
    font-size: 14px;
    top: 50%;
    right: auto;
    left: -52px;
  }
}

/* Smartphones paysage & petites tablettes (480px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
  #esilaRobotContainer {
    bottom: 100px !important;
    right: 20px !important;
  }
  
  #esilaDroneCanvas {
    width: 60px !important;
    height: 60px !important;
  }
  
  #esilaHelpButton {
    padding: 12px 20px;
    font-size: 13px;
  }
  
  .help-icon {
    font-size: 18px;
  }
}

/* Tablettes (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  #esilaDroneCanvas {
    width: 70px;
    height: 70px;
  }
  
  #esilaHelpButton {
    font-size: 14px;
  }
}

/* Desktop (> 1024px) - Taille par défaut */
@media (min-width: 1025px) {
  #esilaDroneCanvas {
    width: 80px;
    height: 80px;
  }
  
  #esilaHelpButton {
    font-size: 15px;
  }
}

/* Réduction des animations pour accessibilité */
@media (prefers-reduced-motion: reduce) {
  #esilaDroneCanvas,
  .esila-sound-toggle,
  #esilaHelpButton,
  #esilaRobotContainer {
    animation: none !important;
    transition: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
       ADAPTATION AUX ÉCRANS — compléments (tablettes, téléphones, pliables)
       Le fichier était déjà bien équipé (22 media queries, requête tactile,
       orientation). Restaient trois manques concrets.
       ══════════════════════════════════════════════════════════════════ */

    /* ① Hauteur réelle de l'écran.
       « 100vh » compte la barre d'adresse escamotable des navigateurs
       mobiles : un élément plein écran dépassait donc vers le bas, et ses
       commandes se retrouvaient masquées — très gênant dans le jeu.
       « dvh » suit la zone réellement visible. */
    @supports (height: 100dvh) {
      body { min-height: 100dvh; }
      #gameModal .modal-content {
        height: 100dvh !important;
        max-height: 100dvh !important;
      }
    }
    /* ⚠️ 05/09/2026 — CETTE RÈGLE A FAIT DISPARAÎTRE LA SPHÈRE ESILA.

       Elle était écrite « canvas { height: 100dvh !important } ». Un sélecteur
       d'élément nu, sans portée : il a touché LES TROIS canvas de l'espace
       élève — le graphique d'évolution, le radar de compétences, et le lanceur
       d'ESILA. Le lanceur mesure 56 points de côté dans un conteneur ancré en
       bas de l'écran ; passé à la hauteur du viewport, il sortait de l'écran
       ET recouvrait toute la page, interceptant les gestes. La sphère
       disparaissait, et rien ne pouvait plus être déplacé.

       Le canvas visé était celui du JEU, qui n'existe qu'à l'ouverture de la
       fenêtre de jeu et porte déjà un nom dans ce dépôt : « .game-canvas »,
       employé par apps/student/core/dashboard.css. Il fallait s'y aligner, pas
       viser tous les canvas et espérer.

       Un sélecteur d'élément nu avec !important atteint des éléments que
       l'auteur n'a jamais vus. Il ne se rattrape pas à la relecture : il se
       découvre en production, sur un téléphone. */
    @supports (height: 100dvh) {
      @media screen and (max-width: 768px) {
        /* 23/09/2026 — « #gameContainer canvas » retiré d'ici : étiré à 100dvh
           sans toucher à sa largeur, le canvas des jeux d'arcade était déformé
           (texte écrasé), dépassait de la fenêtre et poussait l'en-tête — et
           le bouton FERMER — hors de l'écran. Le cadre commun des jeux vit
           dans apps/student/core/dashboard.css (« CADRE DE JEU COMMUN »). */
        .game-canvas { height: 100dvh !important; }
      }
    }

    /* ② Tableaux : 37 d'entre eux n'étaient pas dans un conteneur défilable.
       Sur téléphone, un tableau large pousse TOUTE la page vers la droite —
       c'est la cause classique du décalage et des bandes latérales.
       Ici le tableau devient lui-même défilable : la page ne bouge plus. */
    @media screen and (max-width: 900px) {
      table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
    }

    /* ③ Encoches, coins arrondis et barre gestuelle, sur les éléments
       plein écran uniquement (ne modifie pas la mise en page générale). */
    #gameModal .modal-content {
      padding-bottom: env(safe-area-inset-bottom);
      padding-left:   env(safe-area-inset-left);
      padding-right:  env(safe-area-inset-right);
    }

    /* ④ RETIRÉ le 05/09/2026 — même défaut, en plus discret.

       Cette règle posait « max-width: env(fold-left) » sur .container,
       .main-content et .dashboard-container : sur un pliable déplié, elle
       aurait réduit TOUT l'espace élève à la moitié gauche de l'écran, en
       laissant l'autre moitié vide. Trois sélecteurs très larges pour un
       problème de charnière.

       Le traitement des pliables vit désormais en un seul endroit, à la fin
       de apps/student/core/dashboard.css, et il aligne les gouttières sur la
       charnière au lieu de rétrécir la page. Deux mécanismes différents pour
       la même question, c'est un de trop. */

    /* ⑤ Cibles tactiles d'au moins 44 px sur écran tactile
       (recommandation WCAG 2.5.5 — évite les erreurs de frappe au doigt). */
    @media (hover: none) and (pointer: coarse) {
      button, .btn, .tab-btn, a.button { min-height: 44px; }
    }


    /* ══════════════════════════════════════════════════════════════════
       CHAT — habillage moderne
       Tout est exprimé en couleurs translucides pour rester lisible avec
       les 15 thèmes de la plateforme, clairs comme sombres.
       ══════════════════════════════════════════════════════════════════ */
    .chat-container { position: relative; }

    .chat-messages {
      display: flex; flex-direction: column;
      gap: 0; padding: 16px 14px 18px;
      overflow-y: auto; scroll-behavior: smooth;
      scrollbar-width: thin;
    }
    .chat-messages::-webkit-scrollbar { width: 8px; }
    .chat-messages::-webkit-scrollbar-thumb {
      background: rgba(255,255,255,.22); border-radius: 99px;
    }

    /* Séparateur de journée */
    .chat-day {
      align-self: center; margin: 16px 0 10px;
      padding: 4px 13px; border-radius: 999px;
      font-size: 11px; font-weight: 800; letter-spacing: .05em;
      text-transform: uppercase;
      background: rgba(255,255,255,.14); color: inherit; opacity: .78;
      backdrop-filter: blur(6px);
    }

    /* Ligne de message */
    .chat-row {
      display: flex; gap: 9px; align-items: flex-end;
      margin-top: 10px; animation: chatIn .22s ease-out;
    }
    .chat-row.grouped { margin-top: 3px; }
    .chat-row.own { flex-direction: row-reverse; }
    @keyframes chatIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

    .chat-avatar {
      width: 34px; height: 34px; flex: 0 0 auto;
      border-radius: 50%; display: grid; place-items: center;
      font-size: 18px; line-height: 1;
      background: rgba(255,255,255,.16);
      box-shadow: 0 0 0 2px rgba(255,255,255,.12);
    }
    .chat-avatar.ghost { visibility: hidden; }
    .chat-avatar.prof  { box-shadow: 0 0 0 2px #f59e0b; }

    /* Bulle */
    .chat-bubble {
      max-width: min(76%, 560px);
      padding: 9px 13px 7px;
      border-radius: 17px;
      background: rgba(255,255,255,.13);
      backdrop-filter: blur(4px);
      font-size: var(--chat-font-size, 14px);
      color: var(--chat-text-color, inherit);
    }
    .chat-row:not(.own) .chat-bubble { border-bottom-left-radius: 6px; }
    .chat-row.own .chat-bubble {
      border-bottom-right-radius: 6px;
      background: linear-gradient(135deg, #6366f1, #8b5cf6);
      color: #fff;
    }
    .chat-bubble.from-prof {
      background: linear-gradient(135deg, rgba(245,158,11,.28), rgba(217,119,6,.20));
      box-shadow: inset 0 0 0 1px rgba(245,158,11,.45);
    }

    .chat-author {
      font-size: 11.5px; font-weight: 800; margin-bottom: 3px;
      opacity: .92; display: flex; align-items: center; gap: 6px;
    }
    .chat-badge {
      font-size: 9px; font-weight: 900; letter-spacing: .06em;
      padding: 2px 6px; border-radius: 5px;
      background: #f59e0b; color: #1c1400;
    }
    .chat-text { white-space: pre-wrap; word-break: break-word; line-height: 1.45; }

    .chat-meta {
      margin-top: 4px; display: flex; align-items: center; gap: 8px;
      font-size: 10.5px; opacity: .6;
    }
    .chat-row.own .chat-meta { justify-content: flex-end; }
    /* Suppression discrète : visible au survol, toujours accessible au clavier */
    .chat-del {
      border: 0; background: transparent; cursor: pointer;
      font-size: 12px; padding: 2px 4px; border-radius: 5px;
      opacity: 0; transition: opacity .15s;
    }
    .chat-row:hover .chat-del,
    .chat-del:focus-visible { opacity: .95; }
    @media (hover: none) { .chat-del { opacity: .6; } }   /* tactile : pas de survol */

    /* Écran vide accueillant */
    .chat-empty {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 7px; padding: 46px 20px; text-align: center; opacity: .85;
    }
    .chat-empty-emoji { font-size: 42px; }
    .chat-empty-titre { font-weight: 800; font-size: 15px; }
    .chat-empty-txt   { font-size: 13px; opacity: .7; max-width: 320px; line-height: 1.5; }

    /* Pastille « nouveaux messages » */
    .chat-newmsg {
      position: absolute; left: 50%; bottom: 74px; transform: translateX(-50%);
      z-index: 5; border: 0; cursor: pointer;
      padding: 8px 16px; border-radius: 999px; min-height: 38px;
      background: #4f46e5; color: #fff; font-weight: 700; font-size: 12.5px;
      box-shadow: 0 6px 18px rgba(0,0,0,.32);
      animation: chatIn .2s ease-out;
    }

    /* Barre de saisie */
    .chat-input-container {
      padding: 10px 12px 12px;
      border-top: 1px solid rgba(255,255,255,.12);
    }
    .chat-input {
      border-radius: 999px !important;
      padding: 11px 16px !important;
      min-height: 44px;
      border: 1px solid rgba(255,255,255,.18) !important;
    }
    .chat-input:focus-visible {
      outline: 3px solid rgba(99,102,241,.5); outline-offset: 1px;
    }
    .chat-input:disabled { opacity: .55; cursor: not-allowed; }
    #emojiPickerBtn, .chat-send-btn {
      border-radius: 999px !important; min-height: 44px; min-width: 44px;
    }

    /* Écrans étroits */
    @media (max-width: 480px) {
      .chat-messages { padding: 12px 10px 14px; }
      .chat-bubble   { max-width: 84%; }
      .chat-avatar   { width: 29px; height: 29px; font-size: 16px; }
    }


    /* ══════════════════════════════════════════════════════════════════
       NAVIGATION — groupe repliable et échappatoire
       ══════════════════════════════════════════════════════════════════ */
    .nav-item.nav-group {
      padding: 0 !important; background: transparent !important;
      border: 0 !important; box-shadow: none !important; display: block;
    }
    .nav-group-head {
      display: flex; align-items: center; gap: 12px;
      padding: 14px 18px; cursor: pointer; border-radius: 12px;
      font-weight: 600; min-height: 44px;
      transition: background .15s;
    }
    .nav-group-head:hover { background: rgba(255,255,255,.09); }
    .nav-group-head:focus-visible { outline: 2px solid rgba(99,102,241,.7); outline-offset: -2px; }
    .nav-chev { margin-left: auto; font-size: 11px; opacity: .65; }
    .nav-group-body { padding-left: 14px; }
    .nav-group-body[hidden] { display: none; }
    .nav-group-body .nav-item { font-size: .95em; opacity: .92; }
    .nav-tout {
      display: block; width: 100%; margin: 10px 0 4px;
      padding: 10px 12px; min-height: 40px;
      border: 1px dashed rgba(255,255,255,.28); border-radius: 12px;
      background: transparent; color: inherit; cursor: pointer;
      font-size: 12.5px; opacity: .72;
    }
    .nav-tout:hover { opacity: 1; background: rgba(255,255,255,.07); }

    /* ══════════════════════════════════════════════════════════════════
       CHAT — interface v3
       Principes retenus : hiérarchie claire sans bruit visuel, réglages
       en tiroir plutôt qu'affichés en permanence, saisie qui grandit avec
       le texte, distinction émetteur par ALIGNEMENT + couleur (jamais la
       couleur seule, pour rester lisible en cas de daltonisme).
       ══════════════════════════════════════════════════════════════════ */
    .chat-shell {
      display: flex; flex-direction: column;
      height: min(74dvh, 780px); min-height: 460px;
      border-radius: 22px; overflow: hidden; position: relative;
      background: var(--bg-card);
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: 0 18px 50px rgba(0,0,0,.28);
    }

    /* ── En-tête ── */
    .chat-head {
      display: flex; align-items: center; gap: 14px;
      padding: 13px 16px; flex: 0 0 auto;
      border-bottom: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.05);
      backdrop-filter: blur(12px);
    }
    .chat-head-txt { flex: 1; min-width: 0; }
    .chat-head-title {
      margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .chat-head-sub {
      margin: 2px 0 0; font-size: 12px; opacity: .68;
      display: flex; align-items: center; gap: 6px;
    }
    .chat-dot {
      width: 7px; height: 7px; border-radius: 50%; background: #22c55e;
      box-shadow: 0 0 0 3px rgba(34,197,94,.22);
    }
    .chat-head-right { display: flex; align-items: center; gap: 10px; }

    /* Présence : pastilles compactes qui se chevauchent */
    .chat-avatars { display: flex; align-items: center; }
    .chat-avatars > * {
      margin-left: -8px; font-size: 11px !important; padding: 3px 9px !important;
      border-radius: 999px !important; white-space: nowrap;
      box-shadow: 0 0 0 2px var(--bg-card);
      max-width: 118px; overflow: hidden; text-overflow: ellipsis;
    }
    .chat-avatars > *:first-child { margin-left: 0; }
    @media (max-width: 640px) { .chat-avatars > *:nth-child(n+3) { display: none; } }

    .chat-icon-btn {
      width: 40px; height: 40px; flex: 0 0 auto;
      display: grid; place-items: center;
      border: 0; border-radius: 50%; cursor: pointer;
      font-size: 18px; line-height: 1;
      background: rgba(255,255,255,.12); color: inherit;
      transition: background .15s, transform .12s;
    }
    .chat-icon-btn:hover  { background: rgba(255,255,255,.22); }
    .chat-icon-btn:active { transform: scale(.93); }

    /* ── Fil ── */
    .chat-container { flex: 1 1 auto; min-height: 0; position: relative; display: flex; }
    .chat-messages  { flex: 1; min-height: 0; }

    .chat-typing {
      flex: 0 0 auto; padding: 6px 18px; font-size: 12px; opacity: .7;
    }

    /* ── Barre de saisie ── */
    .chat-composer {
      flex: 0 0 auto; display: flex; align-items: flex-end; gap: 9px;
      padding: 11px 12px calc(11px + env(safe-area-inset-bottom));
      border-top: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.05);
      backdrop-filter: blur(12px);
    }
    .chat-field { flex: 1; position: relative; display: flex; }
    .chat-input {
      flex: 1; resize: none; overflow-y: hidden;   /* passe à « auto » via JS si le texte dépasse */
      max-height: 132px; min-height: 44px;
      padding: 12px 52px 12px 16px !important;
      border-radius: 22px !important;
      border: 1px solid rgba(255,255,255,.16) !important;
      background: rgba(255,255,255,.09) !important;
      color: inherit; font: inherit; font-size: 14.5px; line-height: 1.4;
    }
    .chat-input::placeholder { opacity: .55; }
    .chat-input:focus-visible { outline: 2px solid rgba(99,102,241,.6); outline-offset: 1px; }
    .chat-input:disabled { opacity: .5; cursor: not-allowed; }
    .chat-count {
      position: absolute; right: 14px; bottom: 11px;
      font-size: 11px; opacity: 0; transition: opacity .2s;
      pointer-events: none; font-variant-numeric: tabular-nums;
    }
    .chat-count.show { opacity: .75; }
    .chat-count.warn { opacity: 1; color: #f59e0b; font-weight: 700; }

    .chat-send {
      width: 44px; height: 44px; flex: 0 0 auto;
      display: grid; place-items: center;
      border: 0; border-radius: 50%; cursor: pointer; color: #fff;
      background: linear-gradient(135deg, #6366f1, #8b5cf6);
      box-shadow: 0 4px 14px rgba(99,102,241,.4);
      transition: transform .12s, box-shadow .15s, opacity .15s;
    }
    .chat-send:hover:not(:disabled)  { transform: translateY(-1px); box-shadow: 0 7px 20px rgba(99,102,241,.52); }
    .chat-send:active:not(:disabled) { transform: scale(.92); }
    .chat-send:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }

    /* ── Sélecteur d'émojis ── */
    /* Sélecteur d'émojis : la grille s'adapte à la largeur disponible,
       les cellules ne peuvent donc plus être rognées. */
    .chat-emoji-pop {
      position: absolute; left: 12px; bottom: 76px; z-index: 20;
      width: min(352px, calc(100% - 24px));
      max-height: min(320px, 46dvh);
      display: flex; flex-direction: column; overflow: hidden;
      border-radius: 18px; padding: 0;
      background: var(--bg-card);
      border: 1px solid rgba(255,255,255,.16);
      box-shadow: 0 18px 48px rgba(0,0,0,.46);
      animation: chatIn .16s ease-out;
    }
    .chat-emoji-scroll {
      overflow-y: auto; padding: 4px 10px 12px;
      scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.3) transparent;
      overscroll-behavior: contain;
    }
    .chat-emoji-scroll::-webkit-scrollbar { width: 7px; }
    .chat-emoji-scroll::-webkit-scrollbar-track { background: transparent; }
    .chat-emoji-scroll::-webkit-scrollbar-thumb {
      background: rgba(255,255,255,.26); border-radius: 99px;
    }
    .chat-emoji-cat {
      position: sticky; top: 0; z-index: 1;
      padding: 9px 2px 6px; margin: 0;
      font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
      text-transform: uppercase; opacity: .62;
      background: var(--bg-card);
    }
    .chat-emoji-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
      gap: 2px;
    }
    .chat-emoji-grid button {
      height: 38px; width: 100%;
      display: grid; place-items: center;
      border: 0; background: transparent; cursor: pointer;
      font-size: 22px; line-height: 1; padding: 0;
      border-radius: 10px; transition: background .12s, transform .12s;
    }
    .chat-emoji-grid button:hover { background: rgba(255,255,255,.16); transform: scale(1.16); }
    .chat-emoji-grid button:active { transform: scale(.94); }
    .chat-emoji-grid button:focus-visible { outline: 2px solid rgba(99,102,241,.7); outline-offset: -2px; }

    .chat-alone { font-size: 12px; opacity: .6; white-space: nowrap; }

    /* ── Réglages : tiroir bas (motif dominant en 2026) ── */
    .chat-sheet { position: fixed; inset: 0; z-index: 2147482000; display: flex; }
    .chat-sheet[hidden] { display: none; }
    .chat-sheet-bg {
      position: absolute; inset: 0; background: rgba(6,6,14,.62);
      backdrop-filter: blur(3px); animation: chatFade .18s ease-out;
    }
    .chat-sheet-card {
      position: relative; margin: auto auto 0; width: 100%; max-width: 440px;
      background: var(--bg-card); color: inherit;
      border-radius: 24px 24px 0 0;
      padding: 10px 22px calc(24px + env(safe-area-inset-bottom));
      box-shadow: 0 -12px 44px rgba(0,0,0,.45);
      animation: chatUp .24s cubic-bezier(.22,1,.36,1);
      max-height: 88dvh; overflow-y: auto;
    }
    @media (min-width: 720px) {
      .chat-sheet-card { margin: auto; border-radius: 22px; animation: chatIn .2s ease-out; }
      .chat-sheet-grip { display: none; }
    }
    .chat-sheet-grip {
      width: 42px; height: 4px; border-radius: 99px;
      background: rgba(255,255,255,.28); margin: 4px auto 14px;
    }
    .chat-sheet-title { margin: 0 0 18px; font-size: 17px; font-weight: 800; }
    .chat-set-lbl {
      display: flex; justify-content: space-between; align-items: baseline;
      font-size: 12.5px; font-weight: 700; opacity: .78;
      margin: 16px 0 7px; text-transform: uppercase; letter-spacing: .04em;
    }
    .chat-set-val { font-weight: 600; opacity: .8; text-transform: none; letter-spacing: 0; }
    .chat-set-ctl {
      width: 100%; min-height: 44px; padding: 10px 13px;
      border-radius: 13px; font: inherit;
      color: var(--text-primary, #fff);
      background: rgba(255,255,255,.09);
      border: 1px solid rgba(255,255,255,.16);
    }
    /* La liste déroulante d'un <select> est dessinée par le système, sur fond
       clair par défaut. Avec « color: inherit », les options héritaient d'un
       texte blanc : blanc sur blanc, donc illisible. On déclare donc leurs
       couleurs explicitement, en suivant le thème choisi par l'élève. */
    select.chat-set-ctl { color-scheme: dark; }
    select.chat-set-ctl option {
      background-color: var(--bg-card, #1e1b2e);
      color: var(--text-primary, #ffffff);
      padding: 8px;
    }
    select.chat-set-ctl option:checked,
    select.chat-set-ctl option:hover {
      background-color: #4f46e5;
      color: #ffffff;
    }
    input[type="range"].chat-set-ctl { padding: 0; background: transparent; border: 0; }
    .chat-set-color {
      width: 100%; height: 46px; padding: 3px; cursor: pointer;
      border-radius: 13px; border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.09);
    }
    .chat-sheet-save {
      width: 100%; margin-top: 24px; min-height: 48px; border: 0;
      border-radius: 14px; cursor: pointer;
      font-size: 15px; font-weight: 800; color: #fff;
      background: linear-gradient(135deg, #6366f1, #8b5cf6);
      box-shadow: 0 6px 18px rgba(99,102,241,.4);
    }
    .chat-sheet-save:active { transform: scale(.985); }

    @keyframes chatFade { from { opacity: 0; } to { opacity: 1; } }
    @keyframes chatUp   { from { transform: translateY(100%); } to { transform: none; } }

    @media (max-width: 480px) {
      .chat-shell      { height: 78dvh; border-radius: 18px; }
      .chat-head-title { font-size: 15.5px; }
    }


    
    /* Mention de droits — dans <main>, avant sa fermeture */
    .mention-droits {
      text-align: center;
      padding: 26px 16px calc(20px + env(safe-area-inset-bottom));
      margin-top: 24px;
      font-size: 11.5px; line-height: 1.5;
      color: var(--text-secondary, #94a3b8);
      opacity: .7;
      border-top: 1px solid var(--border, rgba(255,255,255,.10));
    }
    @media print { .mention-droits { opacity: 1; color: #555; } }

/* ══════════════════════════════════════════════════════════════════════════
   19/09/2026 — MASQUÉ SUR TÉLÉPHONE ET TABLETTE

   L'assistant est en position fixe, en bas à droite, z-index 1000001 : il
   passe au-dessus de TOUT, y compris de la barre de navigation basse — la
   seule navigation dont dispose un élève sur téléphone. Son disque de 56 px
   occupe un septième de la largeur d'un écran de 375, en permanence, à
   l'endroit exact où la plupart des écrans posent leurs actions.

   BORNÉ EN LARGEUR, à 1366 : tous les téléphones et toutes les tablettes,
   couchées comprises. J'avais d'abord interrogé « hover » et « pointer » ;
   scripts/test-responsive-prof.js refuse ces requêtes, et il a raison — un
   téléphone avec une souris répond « fine », une tablette Windows aussi.
   Conséquence assumée : un portable de 1366 perd aussi l'assistant flottant.
   Sur un écran de cette taille il recouvrait déjà le coin des actions ; le
   ranger n'y est pas une perte.

   On CACHE, on ne supprime pas. Les scripts ne sont pas touchés : l'assistant
   se construit et fonctionne comme avant, il ne s'affiche plus là où il gêne.
   L'offrir de nouveau au doigt serait une règle à retirer, pas une
   fonctionnalité à réécrire.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1366px) {
  #esilaRobotContainer,
  #esilaHelpButton,
  .esila-sound-toggle {
    display: none !important;
  }
}