#aiap-chatbot {
    display: flex;
    flex-direction: column;
    height: calc(80vh - 40px); /* Hauteur totale de la vue moins les marges */
    max-width: 1200px;
    margin: 20px auto; /* 20px en haut et en bas, centré horizontalement */
    border: 1px solid #ddd;
    padding: 15px; /* Padding léger */
    font-size: 14px;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    flex: 1; /* Prend tout l'espace disponible dans sa colonne */
    font-family: Arial, sans-serif;
    background-color: #fff; /* Optionnel : définir un fond blanc */
    z-index: 9999; /* Assure que le chatbot est au-dessus de tout autre élément */
	margin-top: 50px;
}


#aiap-messages {
    flex: 1; /* Prend tout l'espace disponible */
    overflow-y: auto; /* Ajoute une scrollbar si le contenu dépasse */
    background-color: #f9f9f9;
    padding: 10px;
    box-sizing: border-box;
    max-height: inherit; /* Définit la hauteur maximale en fonction de l'élément parent */
    height: 100%; /* Remplit toute la hauteur possible du parent */
    border-top-left-radius: 10px; /* Arrondi en haut à gauche */
    border-top-right-radius: 10px; /* Arrondi en haut à droite */
}

/* Messages */
.aiap-message {
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 10px;
    clear: both;
    max-width: 100%;
    word-wrap: break-word;
    /*max-height: 80vh;*/
}

.aiap-message h3 {
    color: #003366; /* Exemple de couleur spécifique */
    font-size: 1.3rem; /* Taille de police personnalisée */
    border-bottom: 2px solid #003366; /* Ajout d'une bordure inférieure */
    padding-bottom: 5px; /* Espacement en dessous */
    margin-bottom: 10px; /* Marge en dessous */
}

.aiap-message h4 {
    color: #003366; /* Exemple de couleur spécifique */
    font-size: 1.2rem; /* Taille de police personnalisée */
    padding-bottom: 3px; /* Espacement en dessous */
    margin-bottom: 6px; /* Marge en dessous */
	margin-block-start: 1em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

.aiap-message h5 {
    color: #003366; /* Exemple de couleur spécifique */
    font-size: 1.1rem; /* Taille de police personnalisée */
    padding-bottom: 3px; /* Espacement en dessous */
    margin-bottom: 6px; /* Marge en dessous */
	margin-block-start: 1em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

/* Message de l'utilisateur */
.aiap-user-message {
    background-color: #eaeaea;
    text-align: right;
    float: right;
}

/* Message de l'assistant */
.aiap-assistant-message {
    background-color: #fbfbfb;
    text-align: left;
    float: left;
}

/* Message d'erreur */
.aiap-error-message {
    background-color: #ffebee;
    color: #c62828;
    text-align: center;
    clear: both;
}

/* Zone d'entrée utilisateur */
#aiap-input {
    display: flex;
    padding: 10px 10px 0px 10px;
    background-color: #fff;
    box-sizing: border-box;
}

/* Champ de saisie */
#aiap-user-input {
    flex: 1;
    padding: 10px;
    resize: none;
    font-size: 14px;
    box-sizing: border-box;
    height: 50px; /* Hauteur fixe du champ de saisie */
    overflow-y: auto;
}

/* Boutons */
#aiap-send-btn,
#aiap-reset-btn {
    padding: 10px 20px;
    margin-left: 10px;
    cursor: pointer;
    font-size: 14px;
}

.aiap-avatar-btn {
    cursor: pointer;
    font-size: 6px;
    background-color: #fff;
    color: #000;
    border: 1px solid #000;
    border-radius: 50%;
    width: 21px;
    height: 21px;
	margin: 0em;
    padding-block: 0;
    padding-inline: 0;
}

/* Style pour les titres */
.aiap-title {
    font-size: 1.4em; /* Augmente la taille de police de 40% */
    font-weight: bold;
    margin-top: 20px; /* Marge supérieure de 20 pixels */
    margin-bottom: 5px; /* Optionnel : marge inférieure */
}

/* Style pour les paragraphes */
#aiap-chatbot p {
    margin: 0px 0;
}

/* Style pour les listes */
/* Styles pour les listes imbriquées */
#aiap-chatbot ul {
    /*margin: 10px 0;*/
    padding-left: 20px; /* Indentation de base */
    list-style-type: disc; /* Type de puce */
	margin-block-start: 0em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

#aiap-chatbot ul ul {
    padding-left: 40px; /* Indentation supplémentaire pour les sous-listes */
    list-style-type: circle; /* Type de puce pour les sous-listes */
}

#aiap-chatbot ul ul ul {
    padding-left: 60px; /* Indentation supplémentaire */
    list-style-type: square; /* Type de puce pour les sous-sous-listes */
}

/* Vous pouvez continuer pour des niveaux plus profonds si nécessaire */


/* Indentation pour les listes numérotées */
#aiap-chatbot ol {
    margin: 5px 0;
    padding-left: 20px; /* Ajustez la valeur pour augmenter ou diminuer l'indentation */
}

/* Style pour les éléments de liste */
#aiap-chatbot li {
    margin-bottom: 0px;
}

/* Style pour les éléments en gras */
#aiap-chatbot strong {
    font-weight: bold;
}

/* Style pour le bouton avatar en état de chargement */
.aiap-avatar-btn.loading {
    opacity: 0.6; /* Griser le bouton */
    pointer-events: none; /* Désactiver les clics */
    position: relative;
}

.aiap-avatar-btn.loading .aiap-spinnerAvatar {
    display: inline-block; /* Afficher le spinner lorsque le bouton est en chargement */
}

/* Cacher l'icône dashicons lorsque le bouton est en chargement */
.aiap-avatar-btn.loading .dashicons {
    display: none;
}

.aiap-avatar-btn  {
    transition: transform 0.3s ease; /* Ajout d'une transition douce */
}

.aiap-avatar-btn:hover  {
    transform: scale(1.2); /* Agrandit l'icône de 10% */
}


.aiap-avatar-btn .aiap-spinnerAvatar {
    display: none; /* Caché par défaut */
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px; /* Centrer le spinner */
    border: 2px solid #000;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: aiap-spinnerAvatar 1s linear infinite;
}

@keyframes aiap-spinnerAvatar {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Styles pour le spinner */
.aiap-spinner {
    border: 2px solid #f3f3f3; /* Couleur de fond */
    border-top: 2px solid #3498db; /* Couleur du spinner */
    border-radius: 50%;
    width: 14px;
    height: 14px;
    animation: spin 1s linear infinite;
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Cacher le spinner par défaut */
#aiap-send-btn .aiap-spinner {
    display: none;
}

/* Afficher le spinner lorsque le bouton est désactivé */
#aiap-send-btn.disabled .aiap-spinner {
    display: inline-block;
	position: relative;
	z-index: 2;
}

/* Réduire l'opacité du texte du bouton lorsqu'il est désactivé */
#aiap-send-btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.aiap-italic {
    margin-left: 3px;
    font-style: italic;
}

.aiap-italic::before {
    content: "«";
    margin-right: 2px;
}

.aiap-italic::after {
    content: "»";
    margin-left: 2px;
}

/* Styles pour les boutons */
#aiap-send-btn.aiap-send-btn,
#aiap-reset-btn.aiap-reset-btn,
#aiap-prompt-btn.aiap-prompt-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#aiap-send-btn.aiap-send-btn {
    background-color: #000;
    color: #fff;
}

#aiap-reset-btn.aiap-reset-btn {
    background-color: #fff;
    color: #000;
    border: 1px solid #000;
    margin-left: 5px;
}

#aiap-prompt-btn.aiap-prompt-btn {
    background-color: #fff;
    color: #000;
    border: 1px solid #000;
    margin-left: 2px;
    margin-right: 5px;
}

/* Style pour le textarea */
#aiap-user-input.aiap-user-input {
    border: none;
    border-radius: 5px;
    background-color: #f0f0f0;
    padding: 10px;
    resize: none;
    font-size: 14px;
    box-sizing: border-box;
    height: 40px; /* Permet à la hauteur de s'ajuster automatiquement */
    min-height: 40px; /* Hauteur minimale */
    max-height: 300px; /* Hauteur maximale */
    overflow-y: auto;
	font-family: Arial;
    font-size: smaller;
}

/* Styles pour les amorces */
/* Conteneur des amorces */
#aiap-prompts-container {
    position: relative;
    flex: none;
}

#aiap-prompts {
    position: relative;
    /*position: absolute;
	bottom: 0px;
    left: 0;
    right: 0;*/
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 0;
    opacity: 0.8; /* 80% de transparence */
    background-color: #f0f0f0; /* transparent */
	box-sizing: border-box;
	
}

.aiap-prompts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Ajustez selon le nombre d'amorces */
    gap: 10px;
}

.aiap-prompt-item {
    /*border: 1px solid #000;*/
    padding: 5px;
    font-size: 0.8rem;
    cursor: pointer;
    text-align: center;
    border-radius: 5px;
    background-color: #fff;
	/* Flexbox pour centrer le contenu */
    display: flex;
    align-items: center;      /* Centre verticalement */
    justify-content: center;  /* Centre horizontalement */
}

.aiap-prompt-item:hover {
    background-color: #e0e0e0;
}

/* Ajustements pour les icônes */
.dashicons {
    font-size: 20px;
}

/* Spinner */
#aiap-send-btn .aiap-spinner {
    margin-left: 0px;
}

@keyframes colorCycle {
  0% { background: #e74c3c; }   /* Rouge chaud */
  25% { background: #e67e22; }  /* Orange vif */
  50% { background: #f39c12; }  /* Orange doré */
  75% { background: #c0392b; }  /* Rouge sombre */
  100% { background: #e74c3c; } /* Retour au rouge chaud */
}

/* Désactivation du bouton */
#aiap-send-btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
	position: relative; /* Pour positionner le pseudo-élément par rapport au bouton */
	z-index: 1; /* Assure que le pseudo-élément est au-dessus */
}

#aiap-send-btn.disabled::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 50%;
  z-index: 2; /* Au-dessus du fond du bouton */
  animation: colorCycle 2.8s linear infinite;
}
/* Ajuster les marges pour coller les éléments */
#aiap-messages {
    margin-bottom: 0;
}

#aiap-input {
    margin-top: 0;
	align-items: center;
}


/* Lorsque le bouton est désactivé (en cours d'envoi), masquer l'icône et afficher le spinner */
#aiap-send-btn.disabled .send-btn-icon {
    display: none;
}

#aiap-send-btn.disabled .send-btn-spinner {
    display: inline-block; /* ou inline selon vos besoins */
}


/* Styles pour le bouton d'upload en état de chargement */
#aiap-upload-btn.loading {
    opacity: 0.6; /* Griser le bouton */
    pointer-events: none; /* Désactiver les clics */
    position: relative;
}

#aiap-upload-btn.loading .aiap-spinnerUpload {
    display: inline-block; /* Afficher le spinner lorsque le bouton est en chargement */
}

/* Cacher l'icône dashicons lorsque le bouton est en chargement */
#aiap-upload-btn.loading .dashicons {
    display: none;
}

#aiap-upload-btn .aiap-spinnerUpload {
    display: none; /* Caché par défaut */
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px; /* Centrer le spinner */
    border: 2px solid red;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: aiap-spinnerUploadFile 1s linear infinite;
}

@keyframes aiap-spinnerUploadFile {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Style pour le bouton d'upload */
#aiap-upload-btn.aiap-upload-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    color: #000;
    border: 1px solid #000;
    margin-left: 5px;
    margin-right: 5px;
    position: relative;
}

#aiap-upload-btn .dashicons {
    font-size: 20px;
}

/* Style pour le bouton upload-icon (après upload) */
#aiap-upload-icon.aiap-upload-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #28a745; /* Vert pour indiquer succès */
    color: #fff;
    margin-left: 5px;
    margin-right: 5px;
}

#aiap-upload-icon .dashicons {
    font-size: 20px;
}

/* Style pour l'icône dans le message de l'assistant */
.aiap-message-icon {
    font-size: 20px;
    vertical-align: middle;
    margin-right: 5px;
}

/* Styles pour le message de disclaimer */
#aiap-disclaimer.aiap-disclaimer {
    font-size: 0.8em; /* Taille de police réduite */
    color: #555; /* Couleur du texte gris */
    text-align: center; /* Centrer le texte */
    margin-top: 1px; /* Espacement au-dessus du message */
    padding: 0 10px; /* Optionnel : ajouter un padding horizontal */
    box-sizing: border-box; /* Inclure le padding dans la largeur totale */
}

/* Styles pour le conteneur du popup de disclaimer */
.aiap-disclaimer-popup {
    position: fixed; /* Utiliser 'fixed' pour que le popup reste en place lors du défilement */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Fond semi-transparent */
    display: none; /* Caché par défaut */
    z-index: 10000; /* Assure que le popup est au-dessus de tout autre élément */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Styles pour le contenu du popup de disclaimer */
.aiap-disclaimer-popup-content {
    position: relative;
    background-color: #fff;
    padding: 20px;
    width: 90%;
    max-width: 1000px;
    max-height: 80%;
    overflow-y: auto; /* Ajoute un défilement vertical si le contenu dépasse */
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre portée */
}

/* Bouton pour fermer le popup de disclaimer */
.aiap-disclaimer-popup-close {
    position: absolute;
    top: 10px;
    right: 20px;
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.aiap-disclaimer-popup-close:hover,
.aiap-disclaimer-popup-close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Bouton "J'ai compris" */
.aiap-disclaimer-popup-acknowledge {
    display: block;
    margin: 20px auto 0;
    padding: 10px 20px;
    background-color: #0073aa; /* Couleur de fond bleu WordPress */
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.aiap-disclaimer-popup-acknowledge:hover {
    background-color: #005177; /* Bleu plus foncé au survol */
}

/* Styles pour les paragraphes dans le contenu du disclaimer */
.aiap-disclaimer-popup-content p {
    margin-top: 10px !important;
}


/* Assurez-vous que #aiap-messages est positionné relativement */
#aiap-messages {
    position: relative;
}
.aiap-disclaimer-content-wrapper {
    display: flex;
    flex-direction: column;
}

@media (min-width: 599px) {
    .aiap-disclaimer-content-wrapper {
        flex-direction: row;
        align-items: center; /* Centre verticalement la vidéo */
    }

    .aiap-disclaimer-text {
        flex: 1;
        padding-right: 20px;
    }

    .aiap-disclaimer-video {
        flex: 0 0 30%; /* Ne grandit pas et occupe 40% de la largeur du conteneur */
        max-width: 400px; /* Définit une largeur maximale */
        text-align: center;
    }

    .aiap-disclaimer-video video {
        width: 80%;
        height: 100%;
		border-radius: 15px;
    }
}

@media (max-height: 599px) {

	
    .aiap-disclaimer-video video {
        width: 50%;
        height: auto;
		border-radius: 15px;
    }
    .aiap-disclaimer-text {
		width: 80%;
		font-size: 0.7em;
    }
}

@media (max-width: 599px) {
    .aiap-disclaimer-video {
        display: none;
    }
	
    .aiap-disclaimer-video video {
        width: 50%;
        height: auto;
		border-radius: 15px;
    }

    /* Ajuster la direction du flex pour les petits écrans */
    .aiap-disclaimer-content-wrapper {
        flex-direction: column;
    }
}


.aiap-disclaimer-text p {
    flex: 1;
}

/* Si nécessaire, ajouter un alignement centré au contenu du texte */
.aiap-disclaimer-text {
    justify-content: center; /* Centre verticalement le texte */
}

#aiap-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
	padding-right: 10px;
    background-color: #fff;
}

.aiap-buttons-left {
    display: flex;
    gap: 5px;
    align-items: center;
}

.aiap-title-logo-right {
    display: flex;
    gap: 10px;
    align-items: center;
}

.aiap-chatbot-title {
    font-weight: bold;
    font-size: 16px;
    /* Rendez le conteneur positionné pour pouvoir placer les étoiles en absolu */
    position: relative;
    display: inline-block; /* Nécessaire si le titre est en inline */
    /* Vous pouvez ajuster une marge supplémentaire à droite si vos étoiles dépassent */
    margin-right: 20px;
}

/* Étoile plus grande (✦), en pseudo-élément ::after */
.aiap-chatbot-title::after {
    content: "✦";
    color: gold;            /* Couleur de l’étoile (ex: doré) */
    position: absolute;
    font-size: 16px;        /* Taille de l’étoile */
    top: 0;                 /* Ajustez la position verticale */
    right: -18px;           /* Ajustez la position horizontale */
    /* Vous pouvez ajuster top/right en fonction du rendu souhaité */
}

/* Étoile plus petite (✧), en pseudo-élément ::before */
.aiap-chatbot-title::before {
    content: "✧";
    color: gold;            /* Couleur identique ou différente */
    position: absolute;
    font-size: 12px;        /* Taille de l’étoile plus petite */
    top: -8px;              /* Légèrement au-dessus */
    right: -10px;           /* Un peu moins à droite que la grande étoile */
}

#aiap-download-btn.aiap-download-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    color: #000;
    border: 1px solid #000;
    margin-left: 5px;
}

#aiap-download-btn .dashicons {
    font-size: 20px;
}

/* Styles pour le message de confidentialité */
#aiap-privacy.aiap-privacy {
    font-size: 0.8em; /* Taille de police réduite */
    color: #555; /* Couleur du texte gris */
    text-align: center; /* Centrer le texte */
    margin-top: 1px; /* Espacement au-dessus du message */
    padding: 0 10px; /* Optionnel : ajouter un padding horizontal */
    box-sizing: border-box; /* Inclure le padding dans la largeur totale */
}

/* Styles pour le conteneur du popup de confidentialité */
.aiap-privacy-popup {
    position: fixed; /* Utiliser 'fixed' pour que le popup reste en place lors du défilement */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Fond semi-transparent */
    display: none; /* Caché par défaut */
    z-index: 10000; /* Assure que le popup est au-dessus de tout autre élément */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Styles pour le contenu du popup de confidentialité */
.aiap-privacy-popup-content {
    position: relative;
    background-color: #fff;
    padding: 20px;
    width: 90%;
    max-width: 800px;
    max-height: 80%;
    overflow-y: auto; /* Ajoute un défilement vertical si le contenu dépasse */
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre portée */
}

/* Bouton pour fermer le popup de confidentialité */
.aiap-privacy-popup-close {
    position: absolute;
    top: 10px;
    right: 20px;
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.aiap-privacy-popup-close:hover,
.aiap-privacy-popup-close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Bouton "J'ai compris" pour la confidentialité */
.aiap-privacy-popup-acknowledge {
    display: block;
    margin: 20px auto 0;
    padding: 10px 20px;
    background-color: #0073aa; /* Couleur de fond bleu WordPress */
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.aiap-privacy-popup-acknowledge:hover {
    background-color: #005177; /* Bleu plus foncé au survol */
}

/* Styles pour les paragraphes dans le contenu de la confidentialité */
.aiap-privacy-popup-content p {
    margin-top: 10px !important;
}

/* Cercle de quota mis à jour */
#aiap-fair-share-circle {
    width: 40px; /* Taille cohérente avec les boutons */
    height: 40px;
    border-radius: 50%;
    border: 1px solid #000;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    position: relative;
    
    /* Dégradé initial, sera mis à jour via JavaScript */
    background: conic-gradient(#000 0% 0%, #2ca4a4 0% 100%); /* Initialement tout en vert */

    transition: background 0.3s ease; /* Transition douce lors des mises à jour */
}

/* Optionnel : Dégradé multicolore pour la portion non consommée */
#aiap-fair-share-circle.multicolor {
    background: conic-gradient(
        #000 0% var(--usage-ratio)%, 
        #ff8c00 var(--usage-ratio)% 50%, 
        #ff4500 50% 100%
    );
}

#aiap-fair-share-circle .aiap-quota-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px; /* Ajustez selon vos préférences */
    font-weight: bold;
    text-align: center;
    pointer-events: none; /* Assure que le texte ne bloque pas les interactions */
    color: #fff; /* Couleur par défaut, sera mise à jour via JavaScript */
}

.mermaid .node rect {
    rx: 5; /* Rayon horizontal des coins arrondis */
    ry: 5; /* Rayon vertical des coins arrondis */
}



/* Conteneur pour le message de chargement */
.loading-container {
    position: relative;
    display: inline-block;
    white-space: pre-wrap; /* Préserve les espaces et les retours à la ligne */
}

/* Texte en gris clair */
.light-text {
    color: #d3d3d3; /* Gris clair */
    display: block;
}

/* Texte en gris foncé avec masque en dégradé */
.dark-text {

    color: #696969; /* Gris foncé */
    width: 100%;
    height: 100%;
    overflow: hidden;
    white-space: pre-wrap; /* Préserve les espaces et les retours à la ligne */
    background: linear-gradient(
        to right,
        rgba(105, 105, 105, 0) 0%,
        rgba(105, 105, 105, 1) 50%,
        rgba(105, 105, 105, 0) 100%
    );
    background-size: 200% 100%;
    background-position: -100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; /* Rendre le texte transparent pour utiliser le background */
    animation: moveGradient 2s linear infinite;
}

/* Définition de l'animation */
@keyframes moveGradient {
    from {
        background-position: 100% 0;
    }
    to {
        background-position: -100% 0;
    }
}

body #aiap-chatbot #aiap-placeholder {
  flex: 1 1 0%;    /* occupe la hauteur dispo */
  min-height: 0;   /* nécessaire pour autoriser le scroll en flexbox */
  display: flex;   /* on utilisera un wrapper interne pour le centrage */
  overflow-y: auto; 
  margin: 0;       /* Pas de marge pour que ça prenne bien tout l'espace */
  padding: 0;
  box-sizing: border-box;
  transition: background-color 0.3s ease;
}

/* Le conteneur interne qui centre le contenu */
#aiap-placeholder-inner {
  margin: auto;          /* Centre horizontalement ET verticalement */
  text-align: center;    /* Centre le texte horizontalement */
  box-sizing: border-box; 
  display: flex;
  /* flex-wrap: wrap; */
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* La classe qui centre en flex */
.aiap-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
  /* on évite !important ici */
}

/* La classe qui cache l'élément via un display:none !important */
.aiap-hide {
  display: none !important;
}


.aiap-placeholder-logo {
    max-height: 70px;
    margin-bottom: 0px;
}
.aiap-placeholder-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 00px;
    position: relative;      /* Nécessaire pour positionner les étoiles en absolu */
    display: inline-block;   /* Pour que le conteneur ait ses propres dimensions */
}


/* Étoile plus grande (✦), pseudo-élément ::after */
.aiap-placeholder-title::after {
    content: "✦";
    color: gold;            /* Couleur désirée, ex. #ffd700, #ffcc00, etc. */
    position: absolute;
    font-size: 16px;        /* Taille de l’étoile */
    top: 0;                 /* Ajustez la position verticale */
    right: -18px;           /* Ajustez la position horizontale */
}

/* Étoile plus petite (✧), pseudo-élément ::before */
.aiap-placeholder-title::before {
    content: "✧";
    color: gold;
    position: absolute;
    font-size: 12px;        /* Taille plus petite que ✦ */
    top: -8px;              /* Légèrement au-dessus de la grande étoile */
    right: -10px;           /* Moins à droite que la grande étoile */
}

.aiap-placeholder-subtitle {
    font-size: 13px;
    color: #333;
}

/* Modal styles */
.aiap-modal-confirm {
    display: none; 
    position: fixed; 
    z-index: 99999; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
    justify-content: center;
    align-items: center;
}
.aiap-modal-confirm-content {
    background: #fff;
    margin: 100px auto;
    padding: 20px;
    border-radius: 5px;
    max-width: 400px;
    position: relative;
    text-align: center;
}
.aiap-modal-confirm-close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}
.aiap-modal-confirm-text {
    margin-bottom: 20px;
}
.aiap-modal-confirm-buttons button {
    margin: 0 5px;
    background-color: #000;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    padding: 10px 20px;
    transition: background-color 0.3s ease;
}

/* Conteneur des amorces dans le placeholder */
.aiap-placeholder-prompts {
    display: flex;               /* Disposition en flex */
    flex-wrap: wrap;             /* Permet le retour à la ligne */
    justify-content: center;     /* Centre horizontalement */
    gap: 10px;                   /* Espace entre les carrés */
    margin-top: 1em;
    max-height: 340px;           /* ~2 lignes de 150px + marge + gap */
    overflow: hidden;            /* Cache le reste s'il y a plus de 2 lignes */
}

/* Chaque "carré" (amorce) */
.aiap-placeholder-prompt {
    background-color: #f0f0f0;
    border-radius: 5px;
    width: 150px;               /* Largeur du carré */
    height: 150px;              /* Hauteur du carré */
    display: flex;
    align-items: center;        /* Centre verticalement le texte */
    justify-content: center;    /* Centre horizontalement le texte */
    text-align: center;
    cursor: pointer;
    padding: 10px;
    box-sizing: border-box;     /* Prend en compte le padding dans width/height */
    overflow: hidden;           /* Coupe le texte si vraiment trop long */
    white-space: normal;        /* Permet le retour à la ligne */
    word-wrap: break-word;      /* Casse le mot si trop long */
    font-size: smaller;
    line-height: 1.2;           /* Hauteur de ligne pour plus de lisibilité */
    transition: background-color 0.2s ease;
}

/* Effet au survol */
.aiap-placeholder-prompt:hover {
    background-color: #e0e0e0;
}

.aiap-help-popup {
    position: fixed;
    z-index: 10000;
    left: 0; top: 0;
    right: 0; bottom: 0;
    background-color: rgba(0,0,0,0.5);
    display: none; /* cachée par défaut */
    display: flex;
    align-items: center; 
    justify-content: center;
}
.aiap-help-popup-content {
    position: relative;
    background-color: #fff;
    padding: 20px;
    width: 90%;
    max-width: 900px;
    max-height: 80%;
    overflow-y: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,.2);
}
.aiap-help-popup-close {
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
    font-size: 28px;
    color: #999;
}
.aiap-help-popup-close:hover {
    color: #333;
}
.aiap-help-video {
    text-align: center;
    margin-bottom: 0px;
}
.aiap-help-video video {
    /*width: 70%;*/
    height: auto;
    border-radius: 10px;
    max-height: 270px;
}
.aiap-help-text p {
    margin-bottom: 10px;
}

/* Cursor pointeur sur le titre h4 pour montrer que c’est cliquable */
.aiap-help-text h4 {
  cursor: pointer;
  margin-top: 15px; /* un peu d’air */
  margin-bottom: 5px;
  font-size: 0.9em;
}

/* Optionnel : une icône pour signifier que c’est pliable/dépliable */
.aiap-help-text h4::before {
  content: "▼ "; /* flèche bas, vous pouvez utiliser "►" ou autre */
  color: #0073aa;
  font-size: 0.9em;
}

/* Quand on survole le titre, on change un peu la couleur ou la déco */
.aiap-help-text h4:hover {
  color: #005177;
  text-decoration: underline;
}


.aiap-help-trigger {
  text-align: center; /* Centre le lien sous les amorces */
  margin-top: 10px;   /* Espace au-dessus, si souhaité */
}

.aiap-help-trigger a {
  cursor: pointer;
  font-size: 0.8em; /* Taille de police réduite */
  color: #555; /* Couleur du texte gris */
}

.aiap-help-trigger a:hover {
  color: #005177;           /* Couleur au survol */
  text-decoration: none; 
  text-decoration: underline;
}

/* H2 dans les popups (disclaimer, privacy, help) */
.aiap-disclaimer-popup-content h2,
.aiap-privacy-popup-content h2,
.aiap-help-popup-content h2 {
    margin-block-start: 0;
    margin-block-end: 0;
}

/* Style pour la liste déroulante de changement de langue */
#aiap-language-select {
    font-size: 14px;          /* Taille de la police */
    padding: 5px 8px;         /* Espace interne */
    border: 1px solid #ccc;   /* Bordure grise discrète */
    border-radius: 4px;       /* Coins légèrement arrondis */
    background-color: #fff;   /* Fond blanc */
    cursor: pointer;          /* Curseur "main" pour indiquer la possibilité de cliquer */
    transition: border-color 0.2s ease; /* Petite transition pour l’effet focus */
    margin-left: 5px;         /* Légère marge à gauche si nécessaire */
}

#aiap-language-select:hover {
    border-color: #bbb;       /* Bordure un peu plus sombre au survol */
}

#aiap-language-select:focus {
    outline: none;            /* Supprime le contour par défaut */
    border-color: #0073aa;    /* Couleur d’accentuation WordPress lors du focus */
}

.aiap-evaluation span.dashicons {
    font-size: 20px;
    color: #888;
    transition: color 0.3s;
}
.aiap-evaluation span.dashicons.selected {
    color: #000;
}
.aiap-evaluation-comment {
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 3px;
    font-size: 12px;
}

.aiap-avatar-energy-container {
    display: inline-flex;       /* ou flex, selon vos besoins */
    align-items: center;        /* aligne verticalement */
    gap: 8px;                   /* espace horizontal entre avatar et texte */
    margin-top: 5px;            /* ajustez si besoin */
}

.aiap-energy-display {
    font-size: 12px;
    color: #666;
    /* pas de margin-top ici, sinon ça décale verticalement */
}

.aiap-energy-display .dashicons-leaf {
    font-size: 16px;
    color: #2ecc71;
    margin-right: 5px;
}


#aiap-total-energy {
    font-size: 14px;
    color: #333;
    font-weight: bold;
}

.aiap-energy-tooltip {
  position: absolute;
  background: #fff;
  color: #333;
  border: 1px solid #ccc;
  padding: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  z-index: 10000;
  font-size: 12px;
  max-width: 300px;
  border-radius: 4px;
  line-height: 1.4;
}

.aiap-energy-tooltip a {
  color: #337ab7;
  text-decoration: underline;
}