/* ===========================================================================
   SKELETON LOADER — Animation shimmer générique
   Reproduit la forme des cartes de messages récents du forum
   Architecture BEM :
     .skeleton-loader   → conteneur de la liste de squelettes
     .skeleton-card     → une carte squelette
     .skeleton-bone     → fragment rectangulaire/circulaire animé
   =========================================================================== */

/* KEYFRAME — effet de balayage lumineux (shimmer) */
@keyframes skeleton-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}

/* BASE — fragment bone partagé par tous les éléments */
.skeleton-bone {
    display: block;
    background: linear-gradient(
        90deg,
        var(--color-gray-100, #f3f4f6) 25%,
        var(--color-gray-200, #e5e7eb) 50%,
        var(--color-gray-100, #f3f4f6) 75%
    );
    background-size: 1200px 100%;
    border-radius: var(--border-radius-sm, 4px);
    animation: skeleton-shimmer 1.6s ease-in-out infinite;
}

/* Variant circulaire (avatar) */
.skeleton-bone--circle {
    border-radius: var(--border-radius-full, 9999px);
}

/* CONTENEUR — liste de cartes squelettes */
.skeleton-loader {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 12px);
}

/* CARTE — miroir exact de .recent-discussions__message */
.skeleton-card {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md, 16px);
    padding: var(--spacing-md, 16px) var(--spacing-lg, 20px);
    background: var(--color-surface, white);
    border-radius: var(--border-radius-xl, 12px);
    border: 1px solid var(--color-border, #e5e7eb);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}

/* Avatar circulaire 48 x 48 px */
.skeleton-card__avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
}

/* Zone de contenu */
.skeleton-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs, 6px);
}

/* Ligne d'en-tête : nom discussion + catégorie ~68 % */
.skeleton-card__header {
    height: 14px;
    width: 68%;
}

/* Corps du message — ligne 1 : 100 % */
.skeleton-card__line-1 {
    height: 13px;
    width: 100%;
    margin-top: var(--spacing-3xs, 2px);
}

/* Corps du message — ligne 2 : 82 % */
.skeleton-card__line-2 {
    height: 13px;
    width: 82%;
}

/* Méta (heure + réponses) : 40 % */
.skeleton-card__meta {
    height: 12px;
    width: 40%;
    margin-top: var(--spacing-2xs, 6px);
}

/* DÉLAI PROGRESSIF — effet de vague naturel entre les cartes */
.skeleton-card:nth-child(1) .skeleton-bone { animation-delay: 0.00s; }
.skeleton-card:nth-child(2) .skeleton-bone { animation-delay: 0.10s; }
.skeleton-card:nth-child(3) .skeleton-bone { animation-delay: 0.20s; }
.skeleton-card:nth-child(4) .skeleton-bone { animation-delay: 0.30s; }
.skeleton-card:nth-child(5) .skeleton-bone { animation-delay: 0.40s; }
.skeleton-card:nth-child(6) .skeleton-bone { animation-delay: 0.50s; }
.skeleton-card:nth-child(7) .skeleton-bone { animation-delay: 0.60s; }
.skeleton-card:nth-child(8) .skeleton-bone { animation-delay: 0.70s; }

/* ACCESSIBILITÉ — respecter la préférence « réduire les animations » */
@media (prefers-reduced-motion: reduce) {
    .skeleton-bone {
        animation: none;
        background: var(--color-gray-100, #f3f4f6);
    }
}