/* Classes de fond pour les posts - fallback au cas où le JS ne se charge pas */
.bg-random-1 { background-color: #3498db !important; }
.bg-random-2 { background-color: #9b59b6 !important; }
.bg-random-3 { background-color: #2ecc71 !important; }
.bg-random-4 { background-color: #e74c3c !important; }
.bg-random-5 { background: linear-gradient(135deg, #f39c12, #e74c3c) !important; }
.bg-random-6 { background: linear-gradient(135deg, #1abc9c, #3498db) !important; }
.bg-random-7 { background: linear-gradient(135deg, #9b59b6, #3498db) !important; }
.bg-random-8 { background: linear-gradient(135deg, #2ecc71, #1abc9c) !important; }
.bg-random-9 { background: radial-gradient(circle, #f39c12, #d35400) !important; }
.bg-random-10 { background: radial-gradient(circle, #3498db, #2980b9) !important; }
.bg-random-11 { background: radial-gradient(circle, #e74c3c, #c0392b) !important; }
.bg-random-12 { background: radial-gradient(circle, #2ecc71, #27ae60) !important; }
.bg-random-13 { background: linear-gradient(45deg, #3498db, #e74c3c) !important; }
.bg-random-14 { background: linear-gradient(45deg, #f39c12, #9b59b6) !important; }
.bg-random-15 { background: linear-gradient(45deg, #1abc9c, #f39c12) !important; }



/* Style pour tous les posts */
.post-content {
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

/* Style pour les posts sans image (avec padding) */
.post-content:not(.with-image) {
    padding: 1.5rem;
}

/* Style pour les posts avec image (sans padding) */
.post-content.with-image {
    padding: 0 !important;
}

/* Style pour le texte dans les posts sans image */
.post-content:not(.with-image) p {
    color: #111;
    text-shadow: none;
}

/* Forcer un texte sombre si aucun fond n'est appliqué (évite blanc sur blanc)
   Cette règle est plus spécifique et utilise !important pour surpasser text-white des templates */
.post-content:not(.with-image):not([class*="bg-"]) p {
    color: #111 !important;
}

/* Style pour le texte dans les posts avec image */
.post-content.with-image p {
    color: #333 !important;
    text-shadow: none;
    margin-bottom: 0.5rem;
    line-height: 1.5;
    overflow-wrap: break-word;
}


/* Styles spécifiques pour mobile pour réduire le décalage des conversations */
@media (max-width: 767px) {
    /* Styles avec spécificité maximale pour surcharger les styles scoped de Vue */
    body [data-vue-component="comments-list"] div.comments-list,
    body [data-vue-component="comments-list"] .comments-list {
        margin-left: 0 !important;
        padding-left: 0 !important;
        max-width: 100% !important;
    }
    
    /* Forcer la suppression de tous les décalages dans les commentaires */
    body [data-vue-component="comments-list"] div.flex,
    body [data-vue-component="comments-list"] div.flex-1,
    body [data-vue-component="comments-list"] div.relative,
    body [data-vue-component="comments-list"] div.space-y-3 {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
    
    /* Forcer la suppression des marges pour les réponses */
    body [data-vue-component="comments-list"] .flex-1 .relative .flex,
    body [data-vue-component="comments-list"] .flex-1 .relative div {
        margin-left: 0 !important;
        padding-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Réduire l'espace entre les éléments */
    body [data-vue-component="comments-list"] .space-x-2 > * {
        margin-left: 0 !important;
        margin-right: 0.25rem !important;
    }
    
    /* Assurer que le texte s'adapte à l'espace disponible */
    body [data-vue-component="comments-list"] p,
    body [data-vue-component="comments-list"] div {
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }
    
    /* Cibler toutes les bulles de commentaires et réponses avec un sélecteur plus précis */
    body [data-vue-component="comments-list"] .bg-gray-100.rounded-2xl {
        padding: 0.5rem 0.75rem !important;
        border-radius: 1rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    /* Ajouter un padding gauche spécifique pour les bulles de réponses */
    body [data-vue-component="comments-list"] .mt-1\.5 .bg-gray-100.rounded-2xl {
        padding-left: 0.75rem !important;
    }
    
    /* Ajouter un peu d'espace entre le nom et le contenu dans tous les commentaires */
    body [data-vue-component="comments-list"] .font-semibold.text-xs {
        margin-bottom: 0.25rem !important;
    }
    
    /* Suppression de l'espacement entre l'avatar et la bulle */
    body [data-vue-component="comments-list"] .flex.items-start.space-x-2 > div:first-child {
        margin-right: 0 !important;
    }
    
    /* Supprimer les marges automatiques de space-x-2 qui causent des problèmes */
    body [data-vue-component="comments-list"] .flex.items-start.space-x-2 > * {
        margin-left: 0 !important;
    }
    
    /* Corriger l'alignement des avatars avec les bulles */
    body [data-vue-component="comments-list"] .flex.items-start {
        align-items: flex-start !important;
    }
}