/* Variables pour le menu mobile du bas */
:root {
    --mobile-bottom-nav-height: 65px; /* Hauteur du menu mobile en bas */
    --mobile-bottom-nav-bg: #181828; /* Couleur de fond légèrement différente du primary-dark */
    --mobile-bottom-nav-icon-size: 22px;
}

/* --- Variables de couleur (assurez-vous qu'elles sont définies dans un fichier CSS global ou au début de celui-ci) --- */
:root {
    --color-primary: #1e1e1e;
    --color-primary-dark: #121212;
    --color-primary-darker: #0a0a0a; /* Pour les sections encore plus sombres comme le bas de l'input */
    --color-accent-pink: #FF69B4; /* Rose vibrant */
    --color-accent-purple: #8A2BE2; /* Violet vibrant */
    --color-text-light: #f0f0f0; /* Texte clair */
    --color-text-dark: #1a1a1a; /* Texte foncé pour les arrière-plans clairs */
    --color-secondary-light: #87CEEB; /* Bleu clair pour le texte contextuel de l'IA */
    --color-secondary-dark: #555; /* Gris foncé pour le texte contextuel de l'utilisateur */
    --color-background-dark: #1b1b1b; /* Fond des bulles de l'IA */
}

/* Assurez-vous que le body a un padding top pour laisser de l'espace au header fixe */
body {
    padding-top: 108px; /* Ajustez cette valeur à la hauteur de votre header. */
                     /* Le header de la landing page est environ 80px de haut. */
                     /* Si votre header a un padding de 20px en haut et en bas, et une hauteur de 40px, ça fait 80px. */
                     /* Si des éléments dépassent ou si le padding change, ajustez en conséquence. */
    overflow: hidden; /* Gardez ceci pour éviter un scroll horizontal non désiré */
}


/* --- Disposition globale du Dashboard --- */
.dashboard-wrapper {
    display: flex; /* Utilise Flexbox pour la disposition latérale */
    height: calc(100vh - 108px); /* Ajustez la valeur 108px à la hauteur réelle de votre header */
    background-color: var(--color-primary-dark); /* Fond principal */
    overflow: hidden;
}

/* --- Menu latéral (Sidebar) --- */
.sidebar {
    width: 270px; /* Largeur par défaut du menu déplié */
    background-color: #1a1a2e; /* Même couleur que le fond sombre du header de la landing */
    padding: 20px;
    padding-top: 40px;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    transition: width 0.3s ease-in-out, padding 0.3s ease-in-out; /* Animation pour replier/déplier */
    flex-shrink: 0; /* Empêche le sidebar de rétrécir au-delà de sa largeur */
    position: sticky; /* Reste en haut lors du défilement */
    top: 0; /* Alignement en haut */
    height: 100vh; /* Prend toute la hauteur de la fenêtre */
    z-index: 100; /* Assure qu'il est au-dessus du contenu */
}

.sidebar.collapsed {
    width: 80px; /* Largeur quand le menu est replié */
    padding: 15px;
    padding-top: 40px;
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    white-space: nowrap; /* Empêche le texte de passer à la ligne */
}

.sidebar.collapsed .sidebar-header .logo h1 {
    font-size: 1.2em; /* Réduit la taille du logo en mode replié */
    margin-left: -5px; /* Ajustement visuel */
}

.sidebar.collapsed .sidebar-header .logo span {
    display: none; /* Cache le sous-titre en mode replié */
}

.sidebar-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 13px;
    border-radius: var(--border-radius-md);
    transition: background-color var(--transition-speed);
}

.sidebar-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.sidebar-toggle img {
    filter: brightness(0) invert(1); /* Rendre l'icône blanche */
    width: 24px;
    height: 24px;
}

.sidebar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-nav li {
    margin-bottom: 10px;
}

.sidebar-nav .nav-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    color: var(--color-text-light);
    text-decoration: none;
    border-radius: var(--border-radius-md);
    transition: background-color var(--transition-speed), color var(--transition-speed);
    white-space: nowrap; /* Empêche le texte de passer à la ligne */
}

.sidebar-nav .nav-item img {
    filter: brightness(0) invert(1); /* Icônes blanches par défaut */
    width: 20px;
    height: 20px;
    flex-shrink: 0; /* Empêche l'icône de rétrécir */
}

.sidebar-nav .nav-item span {
    opacity: 1;
    transition: opacity 0.3s ease; /* Animation de l'opacité du texte */
}

.sidebar.collapsed .sidebar-nav .nav-item span {
    opacity: 0; /* Cache le texte quand le menu est replié */
    width: 0; /* Réduit la largeur pour éviter le débordement */
    overflow: hidden; /* Masque le texte */
}

.sidebar-nav .nav-item:hover,
.sidebar-nav .nav-item.active {
    background-color: var(--color-accent-purple); /* Couleur d'accentuation au survol/actif */
    color: white;
}

.sidebar-nav .nav-item.logout {
    margin-top: 30px;
    color: var(--color-accent-pink); /* Couleur spécifique pour le bouton de déconnexion */
}

.sidebar-nav .nav-item.logout img {
    filter: none; /* Annule l'effet invert pour que l'icône conserve sa couleur */
    /* Utilisez des icônes colorées si vous voulez une couleur spécifique pour le logout */
}

.sidebar-nav .nav-item.logout:hover {
    background-color: var(--color-accent-pink);
    color: white;
}

.sidebar-nav .nav-item.logout:hover img {
    filter: grayscale(1) brightness(0) invert(1); /* Effet blanc */
}


.sidebar-footer {
    margin-top: auto; /* Pousse le footer en bas */
    text-align: center;
    font-size: 0.8em;
    color: var(--color-text-light);
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.sidebar.collapsed .sidebar-footer {
    opacity: 0; /* Cache le footer en mode replié */
    height: 0; /* Cache également l'espace pris */
    overflow: hidden;
}

/* --- Contenu principal --- */
.main-content {
    flex-grow: 1; /* Prend l'espace restant */
    padding: 40px;
    background-color: var(--color-primary-dark); /* Fond principal */
    transition: margin-left 0.3s ease-in-out; /* Pour quand le sidebar se replie */
    overflow-y: auto; /* Permet le défilement vertical si le contenu dépasse la hauteur de la fenêtre */
    display: flex;
    flex-direction: column;
}

/* --- Styles pour le contenu principal avec la liste de chat --- */
.main-content:has(> .chat_list) {
    padding: 0px;
}

.main-content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.main-content-header h2 {
    font-size: 2.5em;
    color: var(--color-accent-red);
    margin-bottom: 0;
}

.user-profile-widget {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-text-light);
    font-weight: 600;
}

.user-profile-widget img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-accent-pink);
}

/* --- Grille de sélection (Grid) --- */
.selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 280px minimum */
    gap: 30px;
    margin-top: 20px;
}

.grid-card {
    background-color: var(--color-primary-light); /* Fond des cartes */
    border-radius: var(--border-radius-lg);
    padding: 25px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex; /* Utilise flex pour centrer le contenu interne */
    flex-direction: column;
    justify-content: space-between; /* Espace bien le contenu */
    align-items: center;
    position: relative;
    overflow: hidden; /* Pour le glowing-button */
}

/* S'assure que le contenu du glowing-button s'applique bien ici */
.grid-card.glowing-box-button {
    padding: 0; /* Le padding est maintenant sur le span interne */
    background-image: none; /* Annule le background-image si hérité */
    box-shadow: none; /* Annule l'ombre si héritée */
}

.grid-card .card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 25px; /* Redéfinit le padding pour le contenu réel de la carte */
    width: 100%;
    height: 100%;
    background-color: var(--color-primary-light); /* Fond interne de la carte */
    border-radius: var(--border-radius-lg);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Ombre pour l'intérieur de la carte */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.grid-card img {
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
    filter: brightness(0) invert(1); /* Rendre les icônes blanches par défaut */
}

.grid-card h3 {
    font-size: 1.6em;
    color: var(--color-accent-red);
    margin-bottom: 10px;
}

.grid-card p {
    font-size: 0.95em;
    color: var(--color-text-light);
    opacity: 0.8;
    margin-bottom: 25px;
    flex-grow: 1; /* Permet au paragraphe de prendre de l'espace */
}

.grid-card .btn {
    margin-top: auto; /* Pousse le bouton vers le bas */
    padding: 10px 20px;
    font-size: 0.9em;
}

.grid-card .btn:hover {
    color: var(--color-accent-purple);
}

/* Effets au survol des cartes */
.grid-card:hover {
    transform: translateY(-8px); /* Légère élévation au survol */
    /* L'ombre et le glow seront gérés par .glowing-box-button */
}

/* Adaptation du bouton glowing-box-button pour les cartes */
/* Les styles du glowing-box-button de la landing page seront réutilisés */
/* Assurez-vous que les classes `glowing-box-button` sont bien définies dans style.css */


/* Styles pour la grille de sélection des personnages */
.characters-grid {
    display: grid;
    /* Crée des colonnes réactives. Chaque colonne aura une largeur minimale de 280px
       et s'étendra pour remplir l'espace disponible. */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px; /* Espace entre les cartes */
    padding: 20px; /* Espace autour de la grille */
    max-width: 1220px; /* Optionnel: limite la largeur maximale de la grille */
    margin: 0 auto; /* Centre la grille si max-width est défini */
}


.character-video{
    opacity: 1;
}

/**** Liste des conversations ****/
.conversation-card {
    display: flex;
    align-items: center; /* Alignement vertical des éléments */
    background-color: var(--color-primary-light); /* Fond cohérent avec le thème */
    padding: 15px 20px;
    border-radius: var(--border-radius-lg); /* Coins arrondis cohérents */
    margin-bottom: 20px; /* Espace entre les cartes de conversation */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); /* Ombre subtile */
    border: 1px solid rgba(255, 255, 255, 0.08); /* Bordure légère */
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}

.conversation-card:hover {
    background-color: var(--color-primary); /* Fond légèrement plus foncé au survol */
    border-color: var(--color-accent-purple); /* Bordure accentuée au survol */
    transform: translateY(-3px); /* Léger soulèvement */
}

.conversation-image img {
    width: 150px; /* Taille de l'avatar */
    height: 150px;
    border-radius: 50%; /* Avatar circulaire */
    object-fit: cover; /* Assure que l'image couvre bien sans être déformée */
    margin-right: 20px; /* Espace entre l'image et les informations */
    border: 2px solid rgba(255, 255, 255, 0.1); /* Bordure discrète autour de l'avatar */
}

.conversation-info {
    flex-grow: 1; /* Permet à cette section de prendre l'espace disponible */
    color: var(--color-text-light);
}

.conversation-info h5.conversation-date {
    font-size: 0.8em;
    color: var(--color-text-light);
    opacity: 0.65; /* Date moins proéminente */
    margin: 0 0 6px 0;
    font-weight: 400;
    text-transform: uppercase;
}

.conversation-info p {
    margin: 4px 0;
    line-height: 1.4;
}

.conversation-info .conversation-character-name {
    font-weight: 600;
    font-size: 1.1em;
    color: var(--color-accent-red); /* Nom du personnage mis en évidence */
}

.conversation-info .conversation-exchanges {
    font-size: 0.9em;
    opacity: 0.8;
}

.conversation-action{
    display: flex;
    gap: 10px; /* Espace entre le bouton et le texte */
}

.conversation-action .btn-primary {
    /* Utilisation d'un style plus proche des boutons "hero" pour un meilleur impact visuel */
    background-image: linear-gradient(to right, var(--color-accent-purple), var(--color-accent-pink));
    color: var(--color-button-text);
    padding: 12px 24px; /* Padding légèrement augmenté pour une meilleure présence */
    font-size: 1em; /* Taille de police standard pour les boutons d'action */
    font-weight: 600; /* Assuré par la classe .btn, mais on peut le réaffirmer */
    border-radius: var(--border-radius-md); /* Cohérent avec .btn */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    white-space: nowrap; /* Empêche le texte du bouton de passer à la ligne */
    margin-left: 15px; /* Espace avant le bouton */
    border: none; /* Assurez-vous qu'il n'y a pas de bordure par défaut */
    transition: background-image var(--transition-speed), transform var(--transition-speed), box-shadow var(--transition-speed);
}

.conversation-action .btn-primary:hover {
    background-image: linear-gradient(to right, var(--color-accent-pink), var(--color-accent-purple)); /* Inversion du dégradé au survol */
    transform: translateY(-3px); /* Effet de soulèvement plus prononcé */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); /* Ombre plus marquée */
    color: var(--color-button-text); /* Assure que la couleur du texte reste correcte */
}

/* Styles pour le bouton de suppression */
.conversation-actions {
    display: flex;
    gap: 10px; /* Espace entre les boutons */
    align-items: center;
}

.delete-conversation-btn {
    background-color: var(--color-accent-pink); /* Couleur rose vif pour le bouton supprimer */
    border: none;
    border-radius: var(--border-radius-md);
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Empêche le bouton de rétrécir */
}

.delete-conversation-btn:hover {
    background-color: #d1478e; /* Nuance plus foncée au survol */
}

.delete-conversation-btn img {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1); /* Rendre l'icône blanche */
}

/* Styles pour le modal de confirmation */
.modal-overlay {
    display: none; /* Caché par défaut */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Fond semi-transparent */
    /*display: flex;*/
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Assure que le modal est au-dessus de tout */
}

.modal-content {
    background-color: var(--color-primary-light);
    color: var(--color-text-light);
    padding: 30px;
    border-radius: var(--border-radius-lg);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
    width: 90%;
    max-width: 500px;
    transform: translateY(-20px); /* Animation légère */
    opacity: 0; /* Caché pour l'animation */
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    position: relative;
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
    opacity: 1;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 15px;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.8em;
    color: var(--color-accent-red);
}

.modal-body {
    margin-bottom: 30px;
    line-height: 1.6;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}

.modal-footer .btn {
    padding: 10px 25px;
    font-size: 1em;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.modal-footer .btn-secondary {
    background-color: #555;
    color: white;
    border: none;
}

.modal-footer .btn-secondary:hover {
    background-color: #777;
}

.modal-footer .btn-danger {
    background-color: var(--color-accent-pink);
    color: white;
    border: none;
}

.modal-footer .btn-danger:hover {
    background-color: #d1478e;
}

.close-button {
    background: none;
    border: none;
    font-size: 2em;
    color: var(--color-text-light);
    cursor: pointer;
    line-height: 1;
    padding: 0 5px;
    transition: color 0.3s ease;
}

.close-button:hover {
    color: var(--color-accent-red);
}

/* Styles pour la page characterOptions.ejs */
.character-options-section { /* Renommé .section-container pour plus de spécificité si besoin, sinon .section-container est ok */
    padding: 50px 20px;
    background-color: var(--color-background); /* Ou var(--color-primary) selon votre fond de page principal */
}

.character-options-section .content-wrapper { /* Cible le content-wrapper spécifique à cette section */
    display: flex;
    flex-wrap: wrap; /* Permet aux cartes de passer à la ligne sur petits écrans */
    justify-content: center; /* Centre les cartes */
    gap: 40px; /* Espace entre les cartes */
    max-width: 1200px;
    margin: 0 auto;
}

.character-options-section .card {
    flex: 1 1 400px; /* Permet aux cartes de grandir/rétrécir, base de 400px */
    max-width: 550px; /* Largeur maximale pour une carte */
    border-radius: var(--border-radius-lg);
    overflow: hidden; /* Essentiel pour que l'image et l'overlay respectent les coins arrondis */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    background-color: var(--color-primary-light); /* Couleur de fond si l'image ne charge pas ou pour l'arrière-plan */
}

.character-options-section .card:nth-child(2) a, .character-options-section .card:nth-child(2) button{
    cursor: not-allowed;
}

.character-options-section .card:hover {
    transform: translateY(-12px);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
}

.character-options-section .image-container {
    position: relative;
    width: 100%;
    /*aspect-ratio: 16 / 11;*/
}

.character-options-section .image-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit; /* Hérite la couleur du texte, utile pour l'overlay */
}

.character-options-section .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Assure que l'image couvre l'espace sans distorsion */
    display: block;
}

.character-options-section .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 35%, rgba(0, 0, 0, 0.1) 60%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Aligne le contenu (titre, desc, bouton) en bas */
    align-items: center; /* Centre le contenu horizontalement */
    padding: 30px;
    text-align: center;
    color: var(--color-text-light);
    transition: background-color 0.3s ease;
}

.character-options-section .overlay .title {
    font-size: 2.4em;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 12px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
}

.character-options-section .overlay .description {
    font-size: 1.15em;
    color: var(--color-text-light);
    opacity: 0.85;
    margin-bottom: 25px;
    max-width: 90%;
    line-height: 1.6;
}

.character-options-section .overlay .description b {
    color: var(--color-accent-pink); /* Utilise une couleur d'accentuation pour le texte en gras */
    font-weight: 600;
}

.character-options-section .overlay .action-button {
    background-image: linear-gradient(to right, var(--color-accent-purple), var(--color-accent-pink));
    color: var(--color-button-text);
    padding: 14px 35px;
    font-size: 1.1em;
    font-weight: 600;
    border: none;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.25);
    transition: background-image 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.character-options-section .overlay .action-button:hover {
    background-image: linear-gradient(to right, var(--color-accent-pink), var(--color-accent-purple)); /* Inversion du dégradé */
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}

/* Styles pour le nouveau menu du bas - état par défaut (grands écrans et base) */
.mobile-bottom-nav {
    display: none; /* Caché par défaut sur toutes les tailles d'écran */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--mobile-bottom-nav-height);
    background-color: var(--mobile-bottom-nav-bg);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
    z-index: 1050; /* Au-dessus de la plupart des autres éléments */
}

/* Profile Page Specific Styles */
.profile-tabs {
    display: flex;
    justify-content: flex-start;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 30px;
    padding-left: 20px; /* Adjust as needed for alignment with content */
}

.profile-tabs .tab-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 15px 25px;
    color: var(--color-text-light);
    text-decoration: none;
    font-weight: 600;
    transition: color var(--transition-speed), border-bottom var(--transition-speed);
    border-bottom: 3px solid transparent;
}

.profile-tabs .tab-link:hover {
    color: var(--color-accent-purple);
}

.profile-tabs .tab-link.active {
    color: var(--color-accent-purple);
    border-bottom-color: var(--color-accent-purple);
}

.profile-tabs .tab-link .icon img {
    filter: brightness(0) invert(1); /* Ensure icons are white */
    width: 20px;
    height: 20px;
}

.profile-tabs .tab-link.active .icon img {
    filter: invert(40%) sepia(90%) saturate(1400%) hue-rotate(240deg) brightness(90%) contrast(90%); /* Accent color for active icon */
}

/* Style pour les boutons à l'intérieur des sections de profil (.user-info, .user-pass, .user-delete) */
.user-info .btn,
.user-pass .btn,
.user-delete .btn {
    display: inline-flex; /* Utilise flexbox pour l'alignement icône/texte */
    align-items: center; /* Centre verticalement le contenu */
    justify-content: center; /* Centre horizontalement le contenu */
    gap: 8px; /* Espacement entre l'icône et le texte */
    padding: 10px 20px; /* Padding ajusté pour ces boutons spécifiques */
    font-size: 1rem; /* Taille de police pour ces boutons */
    font-weight: 600;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: background-color var(--transition-speed), border-color var(--transition-speed), color var(--transition-speed), box-shadow var(--transition-speed);
    border: 1px solid transparent; /* Par défaut transparent pour les boutons "pleins" */
}

/* Styles spécifiques pour le bouton primaire dans ces sections */
.user-info .btn-primary,
.user-pass .btn-primary {
    background-color: var(--color-accent-purple);
    color: var(--color-button-text); /* Devrait être blanc ou très clair */
    border-color: var(--color-accent-purple);
}

.user-info .btn-primary:hover,
.user-info .btn-primary:focus,
.user-pass .btn-primary:hover,
.user-pass .btn-primary:focus {
    background-color: #7B1FA2; /* Une nuance légèrement plus foncée du violet */
    border-color: #7B1FA2;
    box-shadow: 0 4px 15px rgba(138, 43, 226, 0.4);
}

/* Styles pour le bouton "Delete" (btn-white dans l'exemple dreamgf.ai) */
.user-delete .btn-white,
.alert .btn-white { /* Aussi pour le bouton "Upgrade" dans l'alerte */
    background-color: white;
    color: var(--color-primary-dark); /* Texte sombre sur fond blanc */
    border: 1px solid white;
    margin-top: 10px;
}

.user-delete .btn-white:hover,
.user-delete .btn-white:focus,
.alert .btn-white:hover,
.alert .btn-white:focus {
    background-color: #f0f0f0; /* Légèrement grisé au survol */
    border-color: #f0f0f0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}


/* S'assurer que les icônes à l'intérieur des boutons de ces sections sont stylisées correctement */
.user-info .btn .icon img,
.user-pass .btn .icon img {
    filter: brightness(0) invert(1); /* Rend les icônes blanches pour les fonds sombres */
    width: 20px;
    height: 20px;
}

/* Pour les icônes sur les boutons clairs (comme btn-white) */
.user-delete .btn-white .icon img,
.alert .btn-white .icon img {
    filter: none; /* Supprime l'inversion de couleur si l'icône est noire par défaut ou doit être colorée */
    /* Ou si l'icône doit être sombre, ajustez avec filter: brightness(0); ou une couleur spécifique */
    width: 20px;
    height: 20px;
}

/* Réajustement pour le bouton btn-outline-secondary (Cookie Settings) si nécessaire */
/* Il devrait déjà avoir des styles corrects depuis la dernière fois, mais assurez-vous qu'ils sont spécifiques */
.col-12.col-sm-10.col-md-4 .btn-outline-secondary { /* Utilisation d'un sélecteur plus spécifique */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background-color: transparent;
    border: 1px solid rgba(224, 224, 224, 0.5);
    color: var(--color-text-light);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 600;
    transition: all var(--transition-speed);
}

.col-12.col-sm-10.col-md-4 .btn-outline-secondary:hover,
.col-12.col-sm-10.col-md-4 .btn-outline-secondary:focus {
    background-color: rgba(224, 224, 224, 0.1);
    border-color: var(--color-text-light);
    box-shadow: 0 0 0 0.25rem rgba(224, 224, 224, 0.25);
}

.col-12.col-sm-10.col-md-4 .btn-outline-secondary .icon img {
    filter: brightness(0) invert(1);
    width: 20px;
    height: 20px;
}

/* Upload Box */
.upload-box {
    background-color: var(--color-primary-light);
    border-radius: var(--border-radius-lg);
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.upload-box .place-img-wrap {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 20px auto;
    border: 3px solid var(--color-accent-purple);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-primary-dark);
}

.upload-box .place-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.upload-box .custom-file-input {
    display: none; /* Hide default input */
}

.upload-box .input-group-text {
    cursor: pointer;
    border-radius: var(--border-radius-md);
    padding: 10px 20px;
    font-size: 0.9em;
    font-weight: 600;
    margin-top: 15px; /* Spacing for the button */
}

.upload-box form button{
    width: 100%;
}

/*-----------------------------------------------------------------------------------------------------
Mise en page : Chat 
----------------------------------------------------------------------------------------------------*/

.chat_container {
    padding: 20px; /* Augmenter un peu le padding général pour aérer */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Optionnel: Si vous voulez un fond plus sombre pour le chat lui-même */
    /* background-color: var(--color-primary-dark); */
}

.chat_card {
    display: flex;
    align-items: flex-start; /* Aligner l'image et le texte en haut */
    margin-bottom: 20px; /* Plus d'espace entre les bulles */
    max-width: 80%; /* Limiter la largeur des bulles de chat pour une meilleure lisibilité */
    /* Ajouter une transition pour les effets de survol ou JS futurs */
    transition: transform 0.2s ease-in-out;
}

/* Effet de survol (exemple, à adapter si vous ne voulez pas ça pour chaque bulle) */
.chat_card:hover {
    /* transform: translateY(-2px); */
}


.chat_card .chat_card_image {
    width: 50px; /* Taille légèrement réduite pour les avatars dans le chat */
    height: 50px;
    flex-shrink: 0; /* Empêche l'image de rétrécir */
    border-radius: 50%; /* Assure une forme ronde pour les avatars */
    overflow: hidden; /* Cache tout ce qui dépasse si l'image n'est pas parfaitement carrée */
    margin-right: 15px;
    /* Ajouter une petite bordure ou ombre pour faire ressortir les avatars */
    border: 2px solid var(--color-accent-pink); /* Par exemple, la couleur rose accent */
    box-shadow: 0 0 8px rgba(255, 105, 180, 0.4); /* Ombre rose subtile */
}

.chat_card_image img {
    border-radius: 50%; /* Conserve la forme ronde de l'image elle-même */
    width: 100%;
    height: 100%;
    object-fit: cover; /* S'assure que l'image remplit le cadre sans déformation */
}

.chat_list {
    overflow-y: auto; /* Utilisez 'auto' plutôt que 'scroll' si vous voulez que la barre n'apparaisse que si nécessaire */
    flex-grow: 1;
    padding: 40px; /* Pour éviter que le texte ne soit collé à la barre de défilement */
    /* Amélioration de la barre de défilement pour qu'elle corresponde au thème */
    scrollbar-width: thin;
    scrollbar-color: var(--color-accent-purple) transparent; /* Barre violette sur fond transparent */
}

.chat_list::-webkit-scrollbar {
    width: 8px; /* Largeur de la barre de défilement */
}

.chat_list::-webkit-scrollbar-track {
    background: transparent; /* Fond transparent */
}

.chat_list::-webkit-scrollbar-thumb {
    background-color: var(--color-accent-purple); /* Couleur de la poignée de défilement */
    border-radius: 10px; /* Bords arrondis pour la poignée */
    border: 2px solid transparent; /* Petits bords transparents si besoin */
}


.chat_card_reverse {
    flex-direction: row-reverse;
    margin-left: auto; /* Pousse la carte vers la droite pour l'utilisateur */
}

.chat_card_reverse .chat_card_image {
    margin-right: 0;
    margin-left: 15px;
}

.chat_card_text {
    background-color: var(--color-background-dark); /* Couleur de fond pour les messages de l'IA */
    border-radius: 20px; /* Plus arrondis pour un look plus doux */
    padding: 12px 18px; /* Padding ajusté */
    /* min-height: 64px; */ /* Peut-être pas nécessaire si le contenu est flexible */
    display: flex;
    align-items: center;
    color: var(--color-text-light); /* Texte clair sur fond sombre */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Ombre plus prononcée pour la profondeur */
    /* Optionnel: Un léger dégradé ou une bordure fine pour les messages de l'IA */
    border: 1px solid rgba(138, 43, 226, 0.2); /* Bordure violette très subtile */
}

.chat_card_text p {
    margin: 0;
    line-height: 1.5; /* Meilleure lisibilité */
}


.chat_card_reverse .chat_card_text {
    /* Utilisation des couleurs primaires pour les messages de l'utilisateur */
    background: linear-gradient(90deg, var(--color-accent-pink), var(--color-accent-purple));
    color: var(--color-text-dark); /* Texte sombre sur fond clair/vibrant */
    box-shadow: 0 4px 12px rgba(255, 105, 180, 0.4); /* Ombre rose-violette */
    border: none; /* Pas de bordure pour les messages de l'utilisateur avec dégradé */
}

.chat_card_text .contextual_text {
    font-style: italic;
    color: var(--color-secondary-light); /* Couleur de texte secondaire (exemple: bleu clair) */
    opacity: 0.8; /* Légèrement moins visible */
}

.chat_card_reverse .chat_card_text .contextual_text {
    color: var(--color-secondary-dark); /* Couleur de texte sombre pour le contexte utilisateur */
    opacity: 0.7;
}

/*Pour cibler un élément qui a à la fois la classe .chat_card et la classe .chat_card_introduction*/
.chat_card.chat_card_introduction {
    max-width: 100%; 
}

.chat_card_introduction .chat_card_text {
    background-color: var(--color-accent-purple); 
    font-style: italic;

}

.input_container {
    display: flex;
    align-items: flex-end; /* Aligner les éléments en bas du conteneur */
    padding: 15px 20px; /* Padding pour le conteneur d'input */
    background-color: var(--color-primary-darker); /* Fond légèrement plus sombre pour le conteneur d'input */
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Bordure supérieure subtile */
    border-radius: 0 0 12px 12px; /* Arrondir juste les coins du bas si la page est plus longue */
    position: sticky; /* Rendre l'input sticky en bas si la conversation est longue */
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box; /* S'assurer que le padding ne s'ajoute pas à la largeur */
    gap: 15px; /* Espacement entre le textarea et le bouton */
}

.input_container textarea {
    width: calc(100% - 65px); /* Ajuster la largeur pour laisser de l'espace au bouton */
    resize: none;
    overflow: auto;
    background-color: #2e2e2e; /* Couleur de fond plus foncée pour le textarea */
    color: var(--color-text-light); /* Texte clair dans le textarea */
    min-height: 48px; /* Hauteur minimale légèrement augmentée */
    max-height: 150px; /* Limiter la hauteur maximale */
    padding: 12px 15px;
    border-radius: 25px; /* Très arrondis */
    border: 1px solid var(--color-accent-purple); /* Bordure violette */
    outline: none; /* Supprimer la bordure de focus par défaut */
    font-size: 1.1em;
    box-shadow: inset 0 0 8px rgba(138, 43, 226, 0.2); /* Ombre interne subtile */
    transition: all 0.3s ease;
}

.input_container textarea:focus {
    border-color: var(--color-accent-pink); /* Bordure rose au focus */
    box-shadow: inset 0 0 12px rgba(255, 105, 180, 0.4);
}

/* Placeholder styling */
.input_container textarea::placeholder {
    color: #888;
    opacity: 0.7; /* Pour un aspect plus discret */
}

#send_chat_msg_btn {
    width: 48px; /* Taille du bouton d'envoi */
    height: 48px;
    cursor: pointer;
    border-radius: 50%; /* Bouton rond */
    background: linear-gradient(45deg, var(--color-accent-pink), var(--color-accent-purple)); /* Dégradé pour le bouton */
    box-shadow: 0 4px 15px rgba(255, 105, 180, 0.6); /* Ombre intense pour le bouton */
    transition: all 0.3s ease;
    padding: 0; /* Assurez-vous qu'il n'y a pas de padding interne qui décale l'image */
    display: flex;
    justify-content: center;
    align-items: center;
}

#send_chat_msg_btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 20px rgba(255, 105, 180, 0.8);
}

#send_chat_msg_btn img {
    width: 28px; /* Ajuster la taille de l'icône à l'intérieur du bouton */
    height: 28px;
    filter: brightness(0) invert(1); /* Rendre l'icône blanche si elle ne l'est pas */
}


/* Input Group with Floating Labels */
.input-group {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.input-group-text {
    background-color: var(--color-primary-light);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-text-light);
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius-md) 0 0 var(--border-radius-md);
    height: 58px; /* Match form-floating height */
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-group-text img {
    filter: brightness(0) invert(1); /* White icons */
    width: 20px;
    height: 20px;
}

.form-floating {
    flex-grow: 1;
    position: relative;
}

.form-floating > .form-control,
.form-floating > .form-select {
    width: 100%;
    height: 58px; /* Maintenir la hauteur de l'input */
    /* Ajustez ce padding. Augmentez le padding-top pour pousser le texte de la valeur vers le bas. */
    /* Diminuez le padding-bottom pour réduire l'espace inutile en bas. */
    padding: 1.6rem 0.75rem 0.6rem 0.75rem; 
    background-color: var(--color-primary-light);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-text-light);
    border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
    font-size: 1rem; /* S'assurer d'une taille de police standard pour le texte de l'input */
}

.form-floating > label {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    /* Le padding initial du label doit correspondre au padding initial du contrôle pour un bon alignement */
    padding: 0rem 0.75rem 0.6rem 0.75rem;
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: opacity var(--transition-speed), transform var(--transition-speed);
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem; /* S'assurer d'une taille de police standard pour le label */
}

/* Ajustement pour les inputs disabled */
.form-floating > .form-control:disabled ~ label {
    color: rgba(255, 255, 255, 0.5); /* Couleur du label pour les champs désactivés */
}

/* S'assurer que les labels s'affichent correctement pour les champs avec des valeurs pré-remplies */
.form-floating > .form-control:-webkit-autofill ~ label {
    opacity: 0.65;
    transform: scale(0.75) translateY(-1.1rem) translateX(0.15rem); /* Assurez-vous que c'est le même transform */
}

/* Style de l'input lorsqu'il est en focus */
.form-floating > .form-control:focus,
.form-floating > .form-select:focus {
    border-color: var(--color-accent-purple);
    box-shadow: 0 0 0 0.25rem rgba(138, 43, 226, 0.25);
    background-color: var(--color-primary-light);
    color: var(--color-text-light);
}


/* Checkbox style */
.form-check-input[type="checkbox"] {
    width: 1.25em;
    height: 1.25em;
    margin-top: 0.25em;
    vertical-align: top;
    background-color: var(--color-primary-light);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0.25em;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

.form-check-input[type="checkbox"]:checked {
    background-color: var(--color-accent-purple);
    border-color: var(--color-accent-purple);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.form-check-label {
    color: var(--color-text-light);
    cursor: pointer;
}

/* Alerts */
.alert {
    padding: 1.5rem;
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    gap: 20px;
}

.alert-warning {
    background-color: rgba(255, 105, 180, 0.15); /* Soft pink, based on --color-accent-pink */
    border: 1px solid var(--color-accent-pink);
    color: var(--color-text-light);
}

.alert-info {
    background-color: rgba(0, 191, 255, 0.15);
    border: 1px solid var(--color-accent-red);
    color: var(--color-text-light);
}

.alert-error {
    background-color: rgba(255, 0, 0, 0.15); /* Soft red for error */
    border: 1px solid rgba(255, 0, 0, 0.5);
    color: var(--color-text-light);
}

/* Style pour les messages de succès */
.alert-success {
    background-color: var(--color-success); /* Utilise la nouvelle variable */
    color: var(--color-text-light); /* Texte clair sur fond sombre */
    padding: 15px 20px;
    border-radius: var(--border-radius-md); /* Utilise la variable globale pour le rayon de bordure */
    border: 1px solid var(--color-success-light); /* Bordure légèrement plus claire pour le contraste */
    display: flex;
    align-items: center;
    gap: 15px; /* Espace entre l'icône et le texte, si une icône est ajoutée */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Ombre douce, cohérente avec les autres éléments */
    margin-bottom: 20px; /* Assure un espace avec les éléments suivants, comme dans votre HTML */
    font-family: var(--font-body); /* Cohérent avec le corps du texte */
    line-height: 1.5;
}

.alert .alert-icon {
    position: relative;
    width: 60px;
    height: 60px;
    min-width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

.alert .alert-icon img {
    filter: brightness(0) invert(1); /* White icons */
    width: 32px;
    height: 32px;
}

.alert .message h5 {
    color: var(--color-text-light);
    margin-bottom: 5px;
}

.alert .message p {
    font-size: 0.9em;
    margin-bottom: 0;
}

/* Utility classes for spacing and text */
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.pb-5 { padding-bottom: 3rem !important; }
.pt-5 { padding-top: 3rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-5 { margin-top: 3rem !important; }
.m-0 { margin: 0 !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-muted { opacity: 0.7; }
.text-primary { color: var(--color-accent-purple) !important; } /* Using your primary accent color */
.text-md { font-size: 1.1em; } /* Medium font size */
.text-sm { font-size: 0.85em; } /* Small font size */
.d-flex { display: flex !important; }
.align-items-center { align-items: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-center { justify-content: center !important; }
.flex-column { flex-direction: column !important; }
.flex-md-row {
    flex-direction: column;
}

/* Ensure the .container-fluid exists in your base CSS or add it */
.container-fluid {
    width: 100%;
    padding-right: var(--bs-gutter-x, 0.75rem); /* Example from Bootstrap */
    padding-left: var(--bs-gutter-x, 0.75rem);
    margin-right: auto;
    margin-left: auto;
}

.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: var(--bs-gutter-y);
    margin-right: calc(var(--bs-gutter-x) * -0.5);
    margin-left: calc(var(--bs-gutter-x) * -0.5);
}
.row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-top: var(--bs-gutter-y);
}
.col-12 { flex: 0 0 auto; width: 100%; }
.col-sm-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
}
.col-md-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
}
.col-md-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
}



/* --- Mise en page principale avec le nouveau sidebar de personnage --- */
.main-wrapper {
    display: flex;
    min-height: calc(100vh - var(--header-height)); /* Ajustez si votre header a une hauteur fixe */
    position: relative; /* Pour positionner le toggle-character-sidebar */
    margin-top: var(--header-height); /* Espace pour le header fixe */
}

/* Styles pour le panneau latéral du personnage */
.character-sidebar {
    width: 300px; /* Ouvert par défaut */
    flex-shrink: 0; /* Empêche le panneau de rétrécir par défaut */
    background-color: var(--color-primary-light);
    border-right: 1px solid var(--color-primary-dark);
    transition: width var(--transition-speed) ease-in-out, padding var(--transition-speed) ease-in-out; /* Ajout du padding pour la transition */
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    position: relative;
}

.character-sidebar.closed {
    width: 0; /* Fermé */
    padding-left: 0;
    padding-right: 0;
}

.character-info-content {
    opacity: 1; /* Visible par défaut */
    transition: opacity var(--transition-speed) ease-in-out;
    padding-bottom: 20px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden; /* C'est ici que le contenu interne doit être caché */
}

.character-info-content .character-description {
    max-height: calc(3.7em * 3);
    display: block;
}

.character-sidebar.open .character-info-content {
    opacity: 1; /* Visible quand le panneau est ouvert */
}

.character-sidebar.closed .character-info-content {
    opacity: 0; /* Cache le contenu quand le panneau est fermé */
}

.character-sidebar .character-name {
    color: var(--color-accent-red); /* Ou une autre couleur d'accent */
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.8em;
    font-family: var(--font-heading);
}

.character-sidebar .character-image-wrapper {
    width: 100%;
    max-width: 250px; /* Taille maximale de l'image */
    height: auto; /* Conserve le ratio */
    margin: 0 auto 10px auto; /* Centrer et espacer */
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Ombre pour la profondeur */
}

.character-sidebar .character-image {
    width: 100%;
    height: auto;
    display: block;
}

.character-sidebar .character-video {
    width: 100%;
    height: auto;
    display: block;
    max-height: 330px;
}

.character-sidebar .character-video video{
    width: 100%;
}


.character-sidebar .character-description {
    color: var(--color-text-light);
    font-size: 0.95em;
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: justify;
}

.character-sidebar .character-attributes {
    margin-top: 20px;
}

.character-sidebar .character-attributes h4 {
    color: var(--color-text-light);
    margin-bottom: 10px;
    font-size: 1.1em;
    text-transform: uppercase;
}

.character-sidebar .character-attributes ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* Espace entre les tags */
}

.character-sidebar .attribute-tag {
    background-color: var(--color-accent-purple); /* Couleur de fond pour les tags */
    color: var(--color-button-text);
    padding: 5px 12px;
    border-radius: var(--border-radius-md);
    font-size: 0.85em;
    white-space: nowrap; /* Empêche le texte de se casser sur plusieurs lignes */
}

/* Bouton de bascule pour le panneau latéral du personnage */
.toggle-character-sidebar {
    position: absolute;
    top: 50%;
    /* Positionnement du bouton pour l'état ouvert par défaut */
    right: -12px; /* Positionné à l'intérieur du panneau ouvert */
    transform: translateY(-50%) rotate(180deg); /* Icône tournée pour indiquer la fermeture */
    background-color: var(--color-accent-purple);
    border: none;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: transform var(--transition-speed) ease-in-out, right var(--transition-speed) ease-in-out; /* Assurez-vous que right a aussi une transition */
    z-index: 10;
    /* display: none; */ /* Ne pas le cacher par défaut ici, le JS gérera sa visibilité pour mobile/desktop */
}


.character-sidebar.closed .toggle-character-sidebar {
    transform: translateY(-50%) rotate(0deg); /* Rotation de l'icône pour l'ouverture */
    right: -20px; /* Le bouton se déplace à l'extérieur du panneau fermé */
}

.toggle-character-sidebar img {
    filter: brightness(0) invert(1);
    width: 20px;
    height: 20px;
}


/* Ajustements pour la sidebar principale si elle se rétracte */
.main-wrapper.sidebar-collapsed .character-sidebar {
    /* Si la sidebar principale se rétracte, vous pouvez ajuster la largeur de la sidebar de personnage si elle est ouverte */
    /* Cela dépendra de votre logique pour la sidebar principale */
}



/* --- Responsive Design pour le Dashboard --- */

/* Pour les écrans plus petits (tablettes et smartphones) */
@media (max-width: 992px) {
    /* Masquer le header principal */
    /* Assurez-vous que .main-header est défini dans shared.css ou ici */
    .main-header {
        display: none !important;
    }

    body {
        padding-top: 0; /* Plus de padding-top car le header est masqué */
        padding-bottom: var(--mobile-bottom-nav-height); /* Espace pour le menu du bas fixe */
    }
    .dashboard-wrapper {
        height: 100svh; /* Prend toute la hauteur, le padding-bottom du body gère l'espace */
    }

    .sidebar { /* Menu caché par défaut sur mobile */
        position: fixed; /* Fixé pour une meilleure gestion */
        top: 0; /* Commence en haut de l'écran */
        left: 0;
        width: 270px; /* Largeur standard */
        height: 100vh; /* Prend toute la hauteur de la fenêtre */
        background-color: #1a1a2e;
        padding: 20px;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.4);
        transform: translateX(-100%); /* Caché à gauche initialement */
        transition: transform 0.3s ease-in-out;
        z-index: 999; /* Sous le header, au-dessus du contenu */
    }

    .sidebar.open {
        transform: translateX(0); /* Affiche le menu quand ouvert */
    }

    .sidebar-header .logo h1 {
        font-size: 1.5em; /* Logo un peu plus petit sur mobile */
    }

    .sidebar-nav,
    .sidebar-footer {
        opacity: 1; /* S'assure que le contenu est visible */
    }

    .sidebar-toggle { /* Masquer l'ancien bouton toggle du sidebar sur mobile */
        display: none !important;
    }

    .sidebar:not(.collapsed) .sidebar-nav {
        max-height: 500px; /* Hauteur suffisante pour montrer le menu */
    }

    .sidebar.collapsed .sidebar-nav .nav-item span {
        opacity: 1; /* Ne cache pas le texte sur mobile car le menu ne se replie pas vraiment */
        width: auto;
    }

    .sidebar-footer {
        margin-top: 20px;
        opacity: 1; /* Visible sur mobile */
    }

    .main-content {
        padding: 30px;
        padding-bottom: var(--mobile-bottom-nav-height) !important;

    }
    
    .main-content:has(> .chat_list) {
        /*padding-bottom: var(--mobile-bottom-nav-height);*/
    }

    .main-content-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .main-content-header h2 {
        font-size: 2em;
        margin-bottom: 15px;
    }

    .user-profile-widget {
        margin-top: 10px;
    }

    .selection-grid {
        grid-template-columns: 1fr; /* Une seule colonne sur mobile */
        gap: 20px;
    }
    .character-options-section .card {
        flex-basis: 305px; /* Réduit la base pour les écrans moyens */
    }
    .character-options-section .overlay .title { font-size: 2em; }
    .character-options-section .overlay .description { font-size: 1.05em; }
    .character-options-section .overlay .action-button { padding: 12px 30px; font-size: 1em; }

    /* Styles pour le nouveau menu du bas */
    .mobile-bottom-nav {
        display: block; /* S'assurer qu'il est visible, remplace d-lg-none si pas Bootstrap */
    }

    .mobile-bottom-nav nav {
        height: 100%;
    }

    .mobile-bottom-nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 100%;
    }

    .mobile-bottom-nav li {
        flex: 1;
        text-align: center;
        height: 100%;
    }

    .mobile-bottom-nav .mnav-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        padding: 5px 0;
        color: var(--color-text-light);
        text-decoration: none;
        background: none;
        border: none;
        cursor: pointer;
        transition: color 0.2s ease, background-color 0.2s ease;
    }

    .mobile-bottom-nav .mnav-btn:hover,
    .mobile-bottom-nav .mnav-btn.active { /* Ajoutez la classe .active via JS si besoin */
        color: var(--color-accent-pink);
        /* background-color: rgba(255, 255, 255, 0.05); */
    }

    .mobile-bottom-nav .mnav-btn .icon {
        font-size: var(--mobile-bottom-nav-icon-size); /* Taille de l'icône */
        margin-bottom: 4px;
    }
    .mobile-bottom-nav .mnav-btn .icon img {
        width: var(--mobile-bottom-nav-icon-size);
        height: var(--mobile-bottom-nav-icon-size);
        filter: brightness(0) invert(1); /* Pour rendre les icônes blanches si elles sont sombres */
    }

    .mobile-bottom-nav .mnav-btn .text {
        font-size: 0.7em; /* Taille du texte sous l'icône */
        display: block;
        line-height: 1.2;
    }
}

@media (max-width: 768px) {
    body {
        /*padding-top: 108px;*/ /* Doit correspondre à la hauteur réelle du header */
    }

    .chat_list {
        padding: 10px;
    }

    .dashboard-wrapper {
        min-height: calc(100vh - 108px); /* Utiliser la hauteur correcte du header */
    }

    .character-options-section .content-wrapper {
        flex-direction: column; /* Empile les cartes verticalement */
        align-items: center; /* Centre les cartes empilées */
    }
    .character-options-section .card {
        width: 100%; /* Les cartes prennent plus de largeur */
        max-width: 500px; /* Limite pour ne pas être trop larges */
    }
    .character-options-section .image-container { 
        /*aspect-ratio: 4 / 3; */
    } /* Ratio potentiellement différent sur mobile */


    .characters-grid {
        grid-template-columns: repeat(2, minmax(180px, 1fr)); /* 2 colonnes sur petits écrans */
        padding: 0px;
        gap: 15px;
    }
    
    .character-name {
        margin:0px;
    }

    .character-info {
        padding: 8px;
    }

    .character-description {
        font-size: 0.7em; /* Texte un peu plus petit */
        line-height: 1.2;
        -webkit-line-clamp: 2; /* Affiche seulement 2 lignes */
        min-height: 1em; /* Ajuste la hauteur minimale */
    }

    .conversation-card {
        flex-direction: column; /* Empile les éléments verticalement */
        align-items: flex-start; /* Aligne les éléments au début */
        padding: 15px;
    }
    .conversation-image {
        margin-bottom: 15px; /* Espace sous l'image en mode colonne */
        align-self: center; /* Centre l'image */
    }
    .conversation-image img {
        margin-right: 0;
    }
    .conversation-info {
        width: 100%; /* Prend toute la largeur */
        margin-bottom: 15px;
    }
    .conversation-action {
        width: 100%;
    }
    .conversation-action .btn-primary {
        width: 100%; /* Bouton pleine largeur */
        text-align: center;
        margin-left: 0;
    }

    .flex-md-row {
        flex-direction: row !important;
    }
    .d-md-flex {
        display: flex !important;
    }
    .text-md-start {
        text-align: left !important;
    }
    .ps-md-5 {
        padding-left: 3rem !important;
    }
    .m-3 { margin: 1rem !important; }
    .my-md-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .profile-tabs {
        flex-wrap: wrap;
        justify-content: center;
        padding-left: 0;
    }
    .profile-tabs .tab-link {
        padding: 10px 15px;
        font-size: 0.9em;
    }
    .section.profile-content {
        padding: 20px;
    }
    .col-md-8.ps-md-5 {
        padding-left: 15px !important; /* Reset padding for mobile */
    }

    /* Assure que toutes les colonnes du profil prennent la pleine largeur sur les petits écrans */
    .profile-content .col-sm-10,
    .profile-content .col-md-4,
    .profile-content .col-md-8 {
        width: 100% !important; /* Force la pleine largeur */
        margin-left: 0 !important; /* Réinitialise les marges latérales */
        margin-right: 0 !important;
        /* Si vous avez un padding gauche/droite à l'intérieur de ces colonnes, assurez-vous qu'il est cohérent,
           laisser les paddings par défaut des colonnes est généralement une bonne idée */
        padding-left: 15px !important; /* Assure un padding latéral cohérent */
        padding-right: 15px !important; /* Assure un padding latéral cohérent */
    }

    /* Ajuste le padding général du contenu principal si nécessaire sur mobile */
    .main-content {
        /*padding-left: 15px !important;
        padding-right: 15px !important;*/
    }

    /* Assure que les onglets du profil s'empilent verticalement et prennent toute la largeur */
    .profile-tabs {
        flex-direction: column; /* Empile les onglets verticalement */
        align-items: stretch; /* Fait que les onglets prennent toute la largeur */
        padding-left: 0;
        padding-right: 0;
    }

    .profile-tabs .tab-link {
        width: 100%; /* Chaque lien d'onglet prend la pleine largeur */
        text-align: center; /* Centre le texte dans chaque onglet */
        margin-bottom: 5px; /* Ajoute un petit espace entre les onglets empilés */
    }

    /* Ajustements pour les éléments à l'intérieur des alertes (d-md-flex) */
    .alert .d-md-flex {
        flex-direction: column; /* Empile les éléments d'alerte verticalement */
        align-items: center; /* Centre horizontalement les éléments */
        text-align: center; /* Centre le texte dans l'alerte */
    }

    .alert .d-flex.flex-column.flex-md-row { /* La div qui contient l'icône et le message */
        flex-direction: column; /* Force l'empilement icône-message */
        align-items: center;
        text-align: center;
        margin-bottom: 15px; /* Espace entre le message et le bouton dans l'alerte */
    }

    .alert .message {
        margin: 15px 0 !important; /* Ajuste les marges pour un meilleur espacement vertical */
    }

    .alert .btn-white {
        width: 100%; /* Le bouton dans l'alerte prend toute la largeur */
        margin: 0 !important; /* Supprime les marges latérales */
    }

    /* Assure que les éléments input-group s'enroulent si nécessaire sur mobile */
    .input-group {
        flex-wrap: wrap; /* Permet aux éléments de l'input-group de s'enrouler */
    }

    .input-group > .input-group-text,
    .input-group > .form-floating {
        width: 100% !important; /* Force les éléments de l'input-group à prendre toute la largeur */
    }

    .character-sidebar {
        display: none; /* Cache complètement le panneau latéral sur les petits écrans */
    }
    .toggle-character-sidebar {
        display: none; /* Cache le bouton de bascule sur les petits écrans */
    }
    .main-content {
        width: 100%; /* Le contenu principal prend toute la largeur */
        margin-left: 0; /* S'assure qu'il n'y a pas de décalage */
        padding: 20px; /* Ajustez le padding pour les mobiles */
        padding-bottom: var(--mobile-bottom-nav-height);
    }
    .main-wrapper {
        flex-direction: column;
    }
}

/* Pour les très petits écrans */
@media (max-width: 480px) {
    .main-content {
        padding: 20px;
        padding-bottom: var(--mobile-bottom-nav-height);
    }


    .main-content-header h2 {
        font-size: 1.8em;
    }

    .grid-card .card-content {
        padding: 20px;
    }

    .character-options-section { padding: 30px 15px; }
    .character-options-section .overlay { padding: 20px; }
    .character-options-section .overlay .title { font-size: 1.7em; }
    .character-options-section .overlay .description { font-size: 1em; }
    .character-options-section .overlay .action-button { padding: 12px 25px; font-size: 0.95em; width: 100%; max-width: 300px; }

    .mobile-bottom-nav .mnav-btn .text {
        font-size: 0.65em;
    }
    .mobile-bottom-nav .mnav-btn .icon {
        font-size: calc(var(--mobile-bottom-nav-icon-size) - 2px);
    }
}