/* Branding Hupso — surcharges des variables CSS Chainlit/shadcn */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;700&display=swap');

/* Agrandir (licence hupso, valide sur tous les sous-domaines) : titres.
   Fonte variable : une seule source couvre toutes les graisses. */
@font-face {
  font-family: 'Agrandir';
  src: url('/public/fonts/Agrandir-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

.font-agrandir {
  font-family: 'Agrandir', 'Noto Sans', sans-serif;
}

/* Titres des messages (markdown rendu en .prose) en Agrandir */
.prose h1, .prose h2, .prose h3, .prose h4 {
  font-family: 'Agrandir', 'Noto Sans', sans-serif;
}

/* Masque le sélecteur de thème (id stable du frontend Chainlit 2.11) :
   l'app est light-only, le forçage du thème est dans custom.js. */
#theme-toggle {
  display: none !important;
}

/* Colonne de contenu d'un message assistant (structure Chainlit 2.11,
   vérifiée dans le bundle frontend) :
     .ai-message (flex gap-4) = <Avatar /> + <div class="flex-col items-start
     flex-grow min-w-[150px]"> qui contient .message-content (w-full).
   Ce flex item n'a PAS de min-width: 0 : il refuse de rétrécir sous la
   largeur minimale de son contenu, donc un élément large (QCM, flashcards)
   pousse toute la colonne au-delà du viewport et déborde à droite.
   min-width: 0 est le fix flexbox standard : la colonne reste dans l'espace
   du viewport et c'est le contenu qui s'adapte.
   Le wrapper .inline-custom, lui, est déjà en pleine largeur par stretch
   (tous ses ancêtres sous .message-content sont en flex-col sans
   items-start) : inutile de le forcer. */
.ai-message > div {
  min-width: 0;
}

/* Avatar de l'IA masqué : pas d'option de config Chainlit pour le désactiver
   (sans default_avatar_file_url, le frontend affiche un avatar de repli
   générique — il ne disparaît pas). Dans .ai-message, le seul <span> enfant
   direct est l'avatar (colonne de texte et steps sont des <div>) : le
   sélecteur ne risque pas de masquer autre chose. La colonne de texte
   démarre alors au bord gauche et prend toute la largeur, ce qui supprime
   aussi le décalage de centrage des custom elements. Pour réactiver
   l'avatar (ex. futur avatar Pia), supprimer cette règle. */
.ai-message > span {
  display: none;
}

/* Bulle des messages de l'utilisateur : gris LMS */
[data-step-type="user_message"] .bg-accent {
  background-color: #F2F2F6 !important;
}

/* Zone de saisie : gris très clair LMS */
#message-composer {
  background-color: #F6F6F5 !important;
}

/* Composer compact : le bouton envoyer/stop remonte sur la ligne de l'input.
   Structure Chainlit 2.11 (vérifiée dans le bundle) :
     #message-composer (flex-col, p-3 px-4, min-h-24)
       ├─ #chat-input (p-0, h/min-h 40px fixes, text-base → ligne de 24px)
       └─ rangée d'actions (flex justify-between)
          ├─ groupe gauche (upload, audio, MCP… : TOUS désactivés dans notre
          │  config, donc la rangée ne contient rien d'autre que le submit)
          └─ groupe droite > #chat-submit / #stop-button (h-8 w-8)
   On annule la hauteur de la rangée et on positionne le groupe droite en
   absolu, centré verticalement dans le composer : gain ~40px de vertical.
   ⚠️ Si on active un jour les boutons d'action (upload, audio, MCP, dictée),
   ils réapparaîtront sur cette rangée de hauteur 0 : revoir cette règle. */
#message-composer {
  position: relative;
  min-height: 0;
}
#message-composer > div:last-child {
  height: 0;
  overflow: visible;
}
#message-composer > div:last-child > div:last-child {
  position: absolute;
  right: 16px; /* = px-4 du composer */
  top: 50%;
  transform: translateY(-50%);
}
/* Le texte ne passe jamais sous le bouton repositionné, et la ligne de 24px
   est centrée dans les 40px du textarea (box-sizing: border-box partout) :
   8 + 24 + 8 = 40. En multiligne, le textarea grandit et ces paddings
   deviennent simplement la respiration haut/bas du bloc. */
#chat-input {
  padding-right: 48px;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Boutons d'envoi et d'arrêt : violet LMS */
#chat-submit,
#stop-button {
  background-color: #5A59F6 !important;
  color: #FFFFFF !important;
}
#chat-submit:hover:not(:disabled),
#stop-button:hover:not(:disabled) {
  background-color: #747BE6 !important;
}
#chat-submit:disabled {
  background-color: #C3C9FB !important;
}

/* On augmente la spécificité pour passer après le CSS de Chainlit */
:root:root {
  --font-sans: 'Noto Sans', sans-serif;

  --background: 0 0% 100%;
  --foreground: 0 0% 20%;

  --card: 0 0% 100%;
  --card-foreground: 0 0% 20%;

  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 20%;

  --primary: 16 85% 55%;
  --primary-foreground: 0 0% 100%;

  --secondary: 0 0% 96%;
  --secondary-foreground: 0 0% 20%;

  --muted: 0 0% 96%;
  --muted-foreground: 0 0% 45%;

  --accent: 19 69% 93%;
  --accent-foreground: 0 0% 20%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;

  --border: 19 50% 88%;
  --input: 19 69% 93%;
  --ring: 16 85% 55%;
  --radius: 0.75rem;
}

body {
  font-family: 'Noto Sans', sans-serif;
}

/* Masque le curseur clignotant « ● » (frontend Chainlit 2.11 : le même
   composant BlinkingCursor — codé en dur, sans option de config — sert à la
   fois de curseur en fin de texte streamé ET de loader du run pendant les
   attentes). Notre indicateur d'attente unique est le step « Je réfléchis »
   (thinking.py) ; le texte qui s'écrit suffit pendant le streaming.
   !important obligatoire : le span porte aussi la classe Tailwind
   .inline-block, chargée APRÈS ce fichier — à spécificité égale, elle
   gagnerait et la règle serait morte. Règle CSS pure : aucun JS, aucun
   coût CPU. */
.loading-cursor {
  display: none !important;
}

#user-nav-button {
  display: none !important;
}