/* --- MASQUER LES BOUTONS DU HEADER (Soleil/Lune et Readme) --- */
header button:has(svg.lucide-sun),
header button:has(svg.lucide-moon),
button[aria-label*="theme" i],
button[aria-label*="mode" i],
header a[href*="readme" i] {
    display: none !important;
}

/* ==========================================
   INVERSION DES POSITIONS (USER GAUCHE / IA DROITE)
   ========================================== */

/* --- 1. ÉTUDIANT (USER) -> À GAUCHE --- */
/* On annule la marge qui le poussait à droite et on place le bouton invisible après le texte */
body [data-step-type="user_message"] .group > button {
    margin-left: 0 !important;
    order: 2 !important;
}
/* La bulle de l'étudiant */
body [data-step-type="user_message"] .bg-accent {
    background-color: #f1f1f1 !important;
    color: #333333 !important;
    /* Pointe inversée : en bas à GAUCHE maintenant */
    border-radius: 15px 15px 15px 2px !important; 
    margin-right: auto !important; /* Sécurise l'alignement à gauche */
}

/* --- 2. IA (ASSISTANT) -> À DROITE --- */
/* On aligne le conteneur invisible de l'IA vers la droite */
body [data-step-type="assistant_message"] .ai-message > div.flex-col {
    align-items: flex-end !important;
}
/* La bulle de l'IA */
body [data-step-type="assistant_message"] .message-content {
    background-color: #eef5d8 !important; /* Vert pâle */
    border: 1px solid #98bf0c !important; /* Vert méca */
    padding: 16px !important;
    /* Pointe inversée : en bas à DROITE maintenant */
    border-radius: 15px 15px 2px 15px !important; 
    max-width: 85% !important;
    margin-left: auto !important; /* Sécurise l'alignement à droite */
    text-align: left !important; /* Le texte reste aligné à gauche pour la lisibilité */
}
/* On garde l'avatar de l'IA caché */
body [data-step-type="assistant_message"] .ai-message > span:first-child {
    display: none !important;
}