/* static/css/style.css - Version Complète avec Rouge Personnalisé */

:root {
    --sidebar-left-width: 280px;
    --sidebar-right-width: 320px;
    --primary-color: #CC6600;
    --primary-color-darker: #b35900;
    --link-hover-bg: #f0f0f0;

    /* --- NOUVELLE VARIABLE POUR LE ROUGE --- */
    --custom-danger-color: #FF0000; /* Rouge vif */
    --custom-danger-darker: #D60000; /* Rouge plus sombre pour le survol */
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f8f9fa;
    color: #343a40;
    margin: 0;
}

/* --- SURCHARGE DES COULEURS BOOTSTRAP --- */
body {
    --bs-primary: var(--primary-color);
    --bs-primary-rgb: 204, 102, 0;
    --bs-link-color: var(--primary-color);
    --bs-link-hover-color: var(--primary-color-darker);
}

/* --- STYLE PERSONNALISÉ POUR LES BOUTONS "DANGER" --- */
.btn-custom-danger {
    background-color: var(--custom-danger-color);
    border-color: var(--custom-danger-color);
    color: white; /* Texte en blanc */
}

.btn-custom-danger:hover, .btn-custom-danger:focus, .btn-custom-danger:active {
    background-color: var(--custom-danger-darker);
    border-color: var(--custom-danger-darker);
    color: white;
}

/* --- GRILLE PRINCIPALE DE LA PAGE --- */
.page-container {
    display: grid;
    grid-template-columns: var(--sidebar-left-width) 1fr;
    min-height: 100vh;
}

/* --- SIDEBAR GAUCHE (collante) --- */
.sidebar-left {
    position: sticky; top: 0;
    height: 100vh; overflow-y: auto;
    background-color: #fff; box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
}
.sidebar { padding: 1rem; }

/* --- CONTENU PRINCIPAL --- */
.main-content { padding: 2rem; }

/* --- GRILLE DE LA PAGE DE CHAT --- */
.chat-grid-container { display: grid; grid-template-columns: 1fr var(--sidebar-right-width); gap: 1.5rem; align-items: start; }
.chat-conversation-area { min-width: 0; }
.chat-container { display: flex; flex-direction: column; background-color: #ffffff; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07); }
.chat-header { background-color: var(--primary-color); color: white; padding: 1.25rem 1.5rem; border-radius: 8px 8px 0 0; }
.chat-messages { flex-grow: 1; padding: 1.5rem; }
.chat-input { padding: 1rem 1.5rem; border-top: 1px solid #e9ecef; background-color: #f8f9fa; border-radius: 0 0 8px 8px; }

/* --- SIDEBAR DROITE DES DOCUMENTS --- */
.chat-documents-sidebar { position: sticky; top: 2rem; }

/* --- STYLES RESTANTS --- */
.card-header { background-color: var(--primary-color); color: white; }
.card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5 { color: white; margin-bottom: 0; }
/* --- STYLES POUR LES BULLES DE CHAT (VERSION FINALE ET ROBUSTE) --- */

.message-container {
    display: flex !important; /* Force l'affichage en ligne */
    margin-bottom: 1rem !important;
    width: 100%;
}

.message {
    padding: 0.75rem 1rem !important;
    border-radius: 18px !important;
    max-width: 80% !important;
    line-height: 1.5;
    word-wrap: break-word !important;
    overflow-wrap: break-word;
}

.user-message {
    background-color: #0A6847 !important;
    color: white !important;
    margin-left: auto !important; /* Aligne à droite */
    border-bottom-right-radius: 5px !important;
}

.ai-message {
    background-color: #f1f3f5 !important;
    color: #212529 !important;
    margin-right: auto !important; /* Aligne à gauche */
    border: 1px solid #dee2e6 !important;
    border-bottom-left-radius: 5px !important;
}

/* Style pour les titres à l'intérieur des bulles IA */
.ai-message h1,
.ai-message h2,
.ai-message h3,
.ai-message h4,
.ai-message h5,
.ai-message h6 {
    background-color: var(--primary-color) !important;
    color: white !important;
    padding: 0.5rem 1rem !important;
    margin: 0.75em -1rem 0.5em -1rem !important; /* Marges négatives pour toucher les bords */
    font-size: 1.1em !important;
    font-weight: bold !important;
    border-radius: 8px !important;
}

/* Ajustement pour le premier titre dans une bulle */
.ai-message > h1:first-child,
.ai-message > h2:first-child,
.ai-message > h3:first-child,
.ai-message > h4:first-child,
.ai-message > h5:first-child,
.ai-message > h6:first-child {
    margin-top: -0.75rem !important;
    border-top-left-radius: 18px !important;
    border-top-right-radius: 18px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.ai-message p:last-child {
    margin-bottom: 0;
}



/* Style pour le conteneur à l'intérieur des cellules de tableau */
.table-cell-content {
    width: 250px; /* Largeur fixe en pixels. Ajustez selon vos besoins. */
    word-wrap: break-word; /* ou overflow-wrap: break-word; */
    white-space: normal; /* Autorise les retours à la ligne normaux */
}

/* Style pour la page d'aide */
#help-content {
    /* Applique les mêmes règles de retour à la ligne au contenu de la documentation */
    overflow-wrap: break-word;
    word-wrap: break-word;
}

#help-content code {
    /* Les blocs de code sont souvent des coupables pour les dépassements */
    word-break: break-all;
}

/* On cible le conteneur principal de la page d'aide */
#help-content {
    /* Propriété standard pour couper les mots longs si nécessaire */
    overflow-wrap: break-word;
    word-wrap: break-word; /* Compatibilité anciens navigateurs */
}

/* On cible SPÉCIFIQUEMENT les éléments qui peuvent poser problème à l'intérieur */
#help-content p, 
#help-content li, 
#help-content td, 
#help-content th {
    /* On force le retour à la ligne pour le texte normal si besoin */
    word-break: break-word; /* Moins agressif que break-all */
}

#help-content a {
    /* Les liens sont souvent la cause principale des dépassements */
    /* 'break-all' est plus sûr pour les URLs qui n'ont pas de tirets ou d'espaces */
    word-break: break-all;
}

#help-content pre,
#help-content code {
    /* Pour les blocs de code, on veut un retour à la ligne ET un défilement horizontal */
    white-space: pre-wrap;   /* Permet le retour à la ligne tout en préservant les espaces */
    word-break: break-all;   /* Force la coupe des très longues lignes sans espaces */
    overflow-x: auto;      /* Ajoute un ascenseur horizontal si nécessaire */
}

#help-content code {
    color: #ffffff; 
    background-color: #CC6600; 
    word-break: break-all;
    padding: 0.2em 0.4em;
    margin: 0;
    font-size: 85%;
    border-radius: 6px;
    font-family: 'Courier New', Courier, monospace;
}

/* On cible tous les niveaux de titres (de h1 à h4) à l'intérieur de #help-content */
#help-content h1,
#help-content h2,
#help-content h3,
#help-content h4 {
    color: #ffffff;                 /* Texte en blanc */
    background-color: #CC6600;      /* Fond orange (votre couleur principale) */
    
    padding: 10px 15px;             /* Espace intérieur pour que ce ne soit pas collé */
    margin-top: 2rem;               /* Espace au-dessus du titre */
    margin-bottom: 1.5rem;            /* Espace en dessous du titre */
    border-radius: 8px;             /* Bords légèrement arrondis */
    
    /* Optionnel : une légère ombre pour donner du relief */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* On peut ajuster la taille pour les sous-titres si besoin */
#help-content h3,
#help-content h4 {
    padding: 8px 15px;
    font-size: 1.5rem; /* Taille de police légèrement réduite pour les sous-titres */
}

/* On s'assure que les lignes horizontales (--- en Markdown) sont bien visibles */
#help-content hr {
    margin-top: 2rem;
    margin-bottom: 2rem;
    border-top: 2px solid #e0e0e0;
}

/* Style général pour le conteneur du tableau */
#help-content table {
    width: 100%;                  /* Le tableau prend toute la largeur disponible */
    margin-top: 1.5rem;           /* Espace au-dessus du tableau */
    margin-bottom: 1.5rem;        /* Espace en dessous du tableau */
    border-collapse: collapse;    /* Fusionne les bordures des cellules pour un look net */
    border: 2px solid #CC6600;    /* Bordure extérieure orange et plus épaisse */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Ombre légère pour le relief */
}

/* Style pour les en-têtes du tableau */
#help-content th {
    background-color: #f8f9fa;    /* Fond gris clair pour les en-têtes */
    border: 1px solid #dee2e6;    /* Bordure grise standard pour les cellules */
    padding: 12px 15px;           /* Espace intérieur généreux */
    text-align: left;             /* Alignement du texte à gauche */
    font-weight: bold;            /* Texte en gras */
}

/* Style pour les cellules du tableau */
#help-content td {
    border: 1px solid #dee2e6;    /* Bordure grise standard pour les cellules */
    padding: 12px 15px;           /* Espace intérieur généreux */
    vertical-align: top;          /* Aligne le contenu en haut de la cellule (utile si le contenu est de hauteur variable) */
}

/* Style pour les lignes impaires (effet "zébré" pour une meilleure lisibilité) */
#help-content tr:nth-of-type(odd) td {
    background-color: #ffffff; /* Fond blanc (ou pas de fond si votre page est déjà blanche) */
}

#help-content tr:nth-of-type(even) td {
    background-color: #f8f9fa; /* Fond gris très clair pour les lignes paires */
}

/* ... (votre CSS existant) ... */

/* --- NOUVEAU : STYLE POUR LE BOUTON COPIER --- */

/* On positionne le conteneur du message en relatif pour pouvoir positionner le bouton en absolu à l'intérieur */
.message-container {
    position: relative;
    /* On ajoute un peu d'espace à gauche pour que le bouton ne sorte pas du flux */
    padding-left: 40px; 
}

/* Style du bouton de copie lui-même */
.copy-button {
    position: absolute; /* Positionné par rapport à .message-container */
    
    /* --- DÉBUT DE LA MODIFICATION DE POSITION --- */
    bottom: 5px;        /* Un peu au-dessus du bas */
    left: 0;            /* Aligné complètement à gauche du conteneur */
    /* --- FIN DE LA MODIFICATION DE POSITION --- */
    
    background-color: #e9ecef;
    border: 1px solid #dee2e6;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
    transform: scale(0.8); /* Le bouton est légèrement réduit par défaut */
}

/* Le bouton apparaît quand on survole le conteneur du message de l'IA */
.message-container:hover .ai-message ~ .copy-button { /* On utilise ~ pour sélectionner un frère */
    opacity: 1;
    visibility: visible;
    transform: scale(1); /* Le bouton grossit légèrement à l'apparition */
}

/* Ajustement pour les messages utilisateur pour qu'ils ne soient pas affectés par le padding */
.user-message {
    margin-left: -40px; /* Compense le padding du conteneur pour l'alignement à droite */
}

/* Style de l'icône à l'intérieur du bouton */
.copy-button i {
    color: #495057;
    font-size: 16px;
}

/* Style au survol du bouton */
.copy-button:hover {
    background-color: #ced4da;
}

/* Style temporaire pour montrer que la copie a réussi */
.copy-button.copied i::before {
    content: "\f26a"; /* Icône "check" de Bootstrap Icons (assurez-vous d'utiliser la bonne classe si c'est bi-check-lg) */
    color: #198754;
}

/*
==============================================
--- NOUVEAU : LOGIQUE DE MASQUAGE DES SIDEBARS ---
==============================================
*/

/* --- 1. SIDEBAR GAUCHE (MENU PRINCIPAL) --- */

/* Ajoute une transition douce à la grille principale */
.page-container {
    transition: grid-template-columns 0.3s ease-in-out;
}
.sidebar-left {
    transition: width 0.3s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out;
    overflow-x: hidden; /* Empêche le contenu de déborder pendant la transition */
}

/* État masqué pour la sidebar gauche */
.page-container.sidebar-left-collapsed {
    grid-template-columns: 0 1fr; /* La colonne de la sidebar n'a plus de largeur */
}
.page-container.sidebar-left-collapsed .sidebar-left {
    width: 0;
    padding: 0;
    opacity: 0;
}

/* Bouton pour faire réapparaître la sidebar gauche */
#sidebar-left-open-toggle {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1050;
    display: none; /* Caché par défaut */
}
.page-container.sidebar-left-collapsed #sidebar-left-open-toggle {
    display: block; /* S'affiche uniquement lorsque la sidebar est masquée */
}


/* --- 2. SIDEBAR DROITE (DOCUMENTS DU CHAT) --- */

/* Ajoute une transition douce à la grille du chat */
.chat-grid-container {
    transition: grid-template-columns 0.3s ease-in-out;
}
.chat-documents-sidebar {
    transition: width 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* État masqué pour la sidebar droite */
.chat-grid-container.sidebar-right-collapsed {
    grid-template-columns: 1fr 45px; /* Garde un petit espace pour le bouton */
    gap: 0;
}
.chat-grid-container.sidebar-right-collapsed .chat-documents-sidebar {
    width: 45px; /* La sidebar rétrécit à la taille du bouton */
}
.chat-grid-container.sidebar-right-collapsed .card-body {
    display: none; /* Masque la liste des documents */
}
.chat-grid-container.sidebar-right-collapsed .card-header h5 {
    display: none; /* Masque le titre "Documents du Domaine" */
}
.chat-grid-container.sidebar-right-collapsed .card {
    background: transparent; /* Rend la carte transparente */
    border: none;
    box-shadow: none;
}
.chat-grid-container.sidebar-right-collapsed .card-header {
    background: transparent !important; /* Rend l'en-tête transparent */
    padding: 0;
    border: none;
}

/* Comportement du bouton de basculement de la sidebar droite */
#sidebar-right-toggle {
    transition: transform 0.3s ease-in-out;
    z-index: 10; /* S'assure qu'il est cliquable */
}
.chat-grid-container.sidebar-right-collapsed #sidebar-right-toggle {
    transform: rotate(180deg); /* L'icône pivote */
    background-color: var(--primary-color) !important; /* Devient orange */
    border-color: var(--primary-color) !important;
}
.chat-grid-container.sidebar-right-collapsed #sidebar-right-toggle i {
    color: white; /* L'icône devient blanche */
}

/* Style pour les boutons de basculement de sidebar lorsqu'ils sont en mode "Afficher" */
.btn-sidebar-toggle-show {
    background-color: var(--primary-color) !important; /* Utilise votre couleur orange */
    border-color: var(--primary-color) !important;
    color: white !important;
    transition: all 0.2s ease-in-out;
}

.btn-sidebar-toggle-show:hover {
    background-color: var(--primary-color-darker) !important;
    transform: scale(1.1);
    color: white !important;
}

.btn-sidebar-toggle-show i {
    color: white !important;
}

/*
=====================================================
--- LOGIQUE VISUELLE POUR LA SIDEBAR DROITE DU CHAT ---
=====================================================
*/

/* Ajoute une transition douce à la grille et à la sidebar */
.chat-grid-container {
    transition: grid-template-columns 0.35s ease-in-out;
}
.chat-documents-sidebar {
    transition: all 0.35s ease-in-out;
}

/* --- ÉTAT MASQUÉ --- */

.chat-grid-container.sidebar-right-collapsed {
    grid-template-columns: 1fr 45px;
    gap: 0.5rem;
}
.chat-grid-container.sidebar-right-collapsed .chat-documents-sidebar {
    width: 45px;
}
.chat-grid-container.sidebar-right-collapsed .card-body,
.chat-grid-container.sidebar-right-collapsed .card-header h5 {
    display: none;
}
.chat-grid-container.sidebar-right-collapsed .card {
    background: transparent;
    border: none;
    box-shadow: none;
}
.chat-grid-container.sidebar-right-collapsed .card-header {
    background: transparent !important;
    padding: 0;
    border: none;
    /* On s'assure qu'il est aligné à droite pour que le bouton soit bien placé */
    justify-content: flex-end !important;
}


/* --- CORRECTION FINALE : STYLE DU BOUTON EN ÉTAT MASQUÉ --- */

#sidebar-right-toggle {
    transition: all 0.35s ease-in-out;
    z-index: 10;
}

/* On cible le bouton LORSQUE la sidebar est masquée */
.chat-grid-container.sidebar-right-collapsed #sidebar-right-toggle {
    /* Il devient BLEU (le bleu primaire standard de Bootstrap) */
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    
    /* L'icône pivote pour indiquer "ouvrir" */
    transform: rotate(180deg);
}

/* On cible l'icône à l'intérieur du bouton LORSQUE la sidebar est masquée */
.chat-grid-container.sidebar-right-collapsed #sidebar-right-toggle i {
    color: white !important;
}

/* On ajoute un effet de survol pour le bouton bleu */
.chat-grid-container.sidebar-right-collapsed #sidebar-right-toggle:hover {
    background-color: #0b5ed7 !important; /* Un bleu plus foncé */
    border-color: #0a58ca !important;
}

/* --- STYLE POUR L'EXPORT PDF --- */

/* Quand le corps de la page a la classe 'exporting-to-pdf' ... */
body.exporting-to-pdf .chat-messages {
    height: auto !important;     /* Supprime la hauteur fixe */
    max-height: none !important;  /* Supprime la hauteur max */
    overflow-y: visible !important; /* Supprime l'ascenseur */
}

/* On s'assure que les boutons de copie ET de carte mentale ne sont pas dans la capture */
/* On masque les boutons de copie ET le conteneur du bouton de la carte mentale */
body.exporting-to-pdf .copy-button,
body.exporting-to-pdf .ai-message .text-center { /* On cible le div.text-center qui contient le lien */
    display: none !important;
}

/* --- 1. SIDEBAR GAUCHE (MENU PRINCIPAL) --- */
.page-container {
    transition: grid-template-columns 0.3s ease-in-out;
}
.sidebar-left {
    transition: all 0.3s ease-in-out;
    overflow-x: hidden;
}
.page-container.sidebar-left-collapsed {
    grid-template-columns: 0 1fr;
}
.page-container.sidebar-left-collapsed .sidebar-left {
    width: 0;
    padding: 0;
    opacity: 0;
}
#sidebar-left-open-toggle {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1050;
    display: none;
}
.page-container.sidebar-left-collapsed #sidebar-left-open-toggle {
    display: block;
}
.btn-sidebar-toggle {
    background-color: var(--primary-color);
    border: 2px solid white;
    color: white;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-sidebar-toggle:hover {
    background-color: var(--primary-color-darker);
    transform: scale(1.1);
    color: white;
}
.btn-sidebar-toggle i {
    font-size: 1.2rem;
    line-height: 1;
}

/* --- 2. SIDEBAR DROITE (DOCUMENTS DU CHAT) --- */
.chat-grid-container {
    transition: grid-template-columns 0.35s ease-in-out;
}
.chat-documents-sidebar {
    transition: all 0.35s ease-in-out;
    overflow: hidden;
}
.chat-grid-container.sidebar-right-collapsed {
    grid-template-columns: 1fr 45px;
    gap: 0.5rem;
}
.chat-grid-container.sidebar-right-collapsed .chat-documents-sidebar {
    width: 45px;
}
.chat-grid-container.sidebar-right-collapsed .card-body,
.chat-grid-container.sidebar-right-collapsed .card-header h5 {
    display: none;
}
.chat-grid-container.sidebar-right-collapsed .card {
    background: transparent;
    border: none;
    box-shadow: none;
}
.chat-grid-container.sidebar-right-collapsed .card-header {
    background: transparent !important;
    padding: 0;
    border: none;
    justify-content: center !important;
    align-items: flex-start !important;
}
#sidebar-right-toggle {
    transition: all 0.35s ease-in-out;
    z-index: 10;
}
.chat-grid-container.sidebar-right-collapsed #sidebar-right-toggle {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    transform: rotate(180deg);
}
.chat-grid-container.sidebar-right-collapsed #sidebar-right-toggle i {
    color: white !important;
}