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
enfant
direct est l'avatar (colonne de texte et steps sont des ) : 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%;
/* Primaire violet hupso #5A59F6 (= bouton d'envoi du chat, LMS_PURPLE des
custom elements) en remplacement de l'orange initial 16 85% 55% : pilote
les boutons pleins (ex. « Envoyer le commentaire » du dialog feedback),
le hover des pills de liens, badges et barres de progression. */
--primary: 240 90% 66%;
--primary-foreground: 0 0% 100%;
--secondary: 0 0% 96%;
--secondary-foreground: 0 0% 20%;
--muted: 0 0% 96%;
--muted-foreground: 0 0% 45%;
/* --accent pilote le hover des boutons ghost/outline et des items de menu
(hover:bg-accent partout dans le frontend Chainlit). Bleu clair hupso
#E7E9FB (= LMS_PURPLE_LIGHT des custom elements), en remplacement du
pêche initial 19 69% 93%. La bulle des messages utilisateur utilise aussi
.bg-accent mais est déjà surchargée en gris plus haut (règle !important). */
--accent: 234 71% 95%;
--accent-foreground: 0 0% 20%;
--destructive: 0 84% 60%;
--destructive-foreground: 0 0% 100%;
--border: 19 50% 88%;
/* Bordure des champs au repos : bleu clair #C3C9FB (palette bouton d'envoi
désactivé) au lieu du pêche 19 69% 93%. */
--input: 234 87% 87%;
/* Focus rings (contour du textarea de commentaire, etc.) : violet hupso
au lieu de l'orange. */
--ring: 240 90% 66%;
--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;
}
/* Logo du welcome screen masqué : pendant la création de l'agent, le frontend
Chainlit 2.11 affiche un écran d'attente centré (div#welcome-screen) dont le
seul contenu pour nous est le logo hupso en grand (img.logo w-[200px], rendu
par le composant Logo faute d'icône de chat profile — vérifié dans le bundle
frontend). Pas d'option de config pour le désactiver : règle CSS pure.
Le sélecteur est scopé à #welcome-screen pour ne pas toucher au même logo
réutilisé par la page /login (inaccessible chez nous : header auth). Une fois
le message de bienvenue streamé, le welcome screen disparaît de toute façon
(le composant retourne null dès qu'un message existe). */
#welcome-screen .logo {
display: none;
}
/* Tooltips en bleu clair hupso (fond #E7E9FB, bordure #C3C9FB) au lieu du
couple blanc/bordure saumon (--border: 19 50% 88%) qui leur donnait un
aspect orangé. Structure Chainlit 2.11 (Radix, vérifiée dans le bundle) :
la boîte visible porte les classes bg-popover/border et contient un span
VisuallyHidden role="tooltip" (descripteur aria) : le :has() ne cible donc
QUE les tooltips, pas les dropdowns/menus qui partagent bg-popover. */
.bg-popover:has([role="tooltip"]) {
background-color: #E7E9FB;
border-color: #C3C9FB;
}
/* Feedback positif instantané — volet 1/2 (le volet 2 est dans custom.js) :
masque TOUT dialog non classé ET son overlay dès le premier paint, tant que
custom.js ne l'a pas révélé (classe .profia-dialog-visible). Sans ce
masquage, la popup de commentaire d'un vote positif clignote quelques
frames avant que le MutationObserver ne la soumette (Radix monte le
contenu du dialog en différé, après un premier paint).
Structure Chainlit 2.11 (Radix, vérifiée dans le bundle) : le portail du
Dialog pose l'overlay puis le contenu [role="dialog"] en enfants directs
de body — l'overlay est le frère immédiatement précédent, capturé par
:has(+ …).
⚠️ Sélecteurs PLATS obligatoires : un :has() imbriqué dans un :has() est
invalide et ferait silencieusement tomber TOUTE la règle (ne jamais en
réintroduire ici). D'où le classement générique par le JS : tout dialog
est révélé sauf le feedback positif, soumis avant révélation.
Ne s'applique que si custom.js tourne (.profia-dialogs-js sur body) : si
le script est mort, la règle est inerte et tout reste natif. */
body.profia-dialogs-js [role="dialog"]:not(.profia-dialog-visible),
body.profia-dialogs-js div:has(+ [role="dialog"]:not(.profia-dialog-visible)) {
display: none !important;
}