/* Skeleton loaders avec shimmer animation. */

@keyframes blade-shimmer {
    0% { background-position: -480px 0; }
    100% { background-position: 480px 0; }
}

.skeleton-card {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    margin-bottom: 8px;
}

.skeleton-box {
    background: linear-gradient(
        90deg,
        var(--bg-elevated) 0%,
        var(--bg-hover) 50%,
        var(--bg-elevated) 100%
    );
    background-size: 960px 100%;
    animation: blade-shimmer 1.4s infinite linear;
    border-radius: var(--radius-sm);
}

.skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 40px; }
.skeleton-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.skeleton-line { height: 11px; }
.skeleton-line.w-80 { width: 80%; }
.skeleton-line.w-60 { width: 60%; }
.skeleton-line.w-40 { width: 40%; }
.skeleton-line.w-30 { width: 30%; }

@media (prefers-reduced-motion: reduce) {
    .skeleton-box { animation: none; }
}