/* public/css/components.css */
/* Composants complexes et spécialisés */

/* ===== SECTION COMMENTAIRES ===== */
.comments-section {
    margin-top: var(--spacing-0);
}

.comments-section .section-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

/* Conteneur "Discussion" plus compact que le .section-content générique
   (partagé par les autres sections de la fiche cours, non touché ici). */
.course-section--discussion .section-content {
    padding: var(--spacing-3);
}

/* Formulaire d'ajout de commentaire (.form-elevated n'est utilisé que dans
   partials/comments-section.ejs, sûr à réduire directement). */
.comments-section .form-elevated {
    padding: var(--spacing-3);
}

/* Textarea du commentaire : #comment-content est scopé (par ID) plutôt que
   .form-textarea, classe globale réutilisée par tous les formulaires de
   l'app — la toucher aurait réduit tous les autres textareas aussi. */
#comment-content {
    min-height: auto;
    padding: var(--spacing-2) var(--spacing-3);
}

/* Espace entre le formulaire et la liste des commentaires. */
.comments-list {
    margin-top: var(--spacing-3);
}

/* Déclencheur replié du formulaire (masqué une fois le formulaire ouvert,
   voir #comment-trigger dans comments-section.ejs et public/js/comments.js). */
.comment-trigger {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: var(--transition);
}

.comment-trigger:hover {
    background: var(--gray-50);
    border-color: var(--gray-300);
}

.comment-placeholder {
    color: var(--gray-500);
    font-size: var(--font-size-base);
}

/* ===== ÉDITION INLINE D'UN COMMENTAIRE ===== */
/* Remplace .comment-content à sa place (masqué/affiché en JS, voir
   toggleEditForm dans public/js/comments.js) : mêmes textarea/boutons que
   le formulaire principal pour une apparence cohérente. */
.comment-edit-form {
    margin-bottom: var(--spacing-3);
}

.comment-edit-form .comment-edit-textarea {
    min-height: auto;
    padding: var(--spacing-2) var(--spacing-3);
}

.comment-edit-form .form-actions,
.comment-reply-body .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-2);
    margin-top: var(--spacing-2);
}

/* ===== RÉPONSE INLINE À UN COMMENTAIRE ===== */
/* Même structure avatar + placeholder que #comment-trigger, mais indentée
   comme une réponse imbriquée (.reply-indent, déjà utilisée pour les
   commentaires de niveau > 0 dans comment-item.ejs). */
.comment-reply-form {
    margin-top: var(--spacing-3);
}

.comment-reply-inner {
    display: flex;
    gap: var(--spacing-3);
}

.comment-reply-body {
    flex: 1;
    min-width: 0;
}

.comment-reply-body .comment-reply-textarea {
    min-height: auto;
    padding: var(--spacing-2) var(--spacing-3);
}

/* ===== HEADER COMMENTAIRE ===== */
.comment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-3);
    padding-bottom: var(--spacing-2);
    border-bottom: 1px solid var(--gray-100);
}

.comment-author {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.comment-actions .btn {
    background: none;
    border: none;
    color: var(--gray-500);
    cursor: pointer;
    transition: var(--transition);
}

.comment-actions .btn:hover {
    background: var(--gray-100);
    color: var(--gray-700);
}

.comment-actions .btn.btn-danger:hover {
    background: var(--error);
    color: var(--white);
}

/* ===== CONTENU COMMENTAIRE ===== */
.comment-content {
    color: var(--gray-700);
    line-height: 1.6;
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-3);
}

.comment-content p {
    margin: 0 0 var(--spacing-2) 0;
}

.comment-content p:last-child {
    margin-bottom: 0;
}

/* ===== FORMULAIRE DE RÉPONSE ===== */
.reply-form {
    margin-top: var(--spacing-4);
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--gray-200);
}

.reply-mode {
    border-color: var(--accent-color);
    background: linear-gradient(135deg, #fffbeb 0%, var(--white) 100%);
}

.reply-mode::before {
    background: linear-gradient(90deg, var(--accent-color), #f59e0b, #d97706);
}

/* ===== COMPTEUR DE CARACTÈRES ===== */
.char-counter {
    text-align: right;
    font-size: var(--font-size-xs);
    color: var(--gray-500);
    margin-top: var(--spacing-1);
}

.char-counter.warning {
    color: var(--warning);
}

.char-counter.danger {
    color: var(--error);
}

/* ===== ANIMATIONS ===== */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.comment-new {
    animation: slideInUp 0.5s ease-out;
}

/* ===== RESPONSIVE COMMENTAIRES ===== */
@media (max-width: 768px) {
    .comment-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-2);
    }
    
    .comment-actions {
        align-self: flex-end;
    }
}

/* ===== ACCESSIBILITÉ ===== */
@media (prefers-reduced-motion: reduce) {
    .comment-new {
        animation: none;
    }
}

/* ===== BOUTON FAVORI (sidebar page détail) ===== */
.favorite-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
}

.favorite-toggle-btn.is-favorited {
    border-color: var(--error);
    color: var(--error);
}