/* Skeleton Loading Styles */

.skeleton {
    background: linear-gradient(90deg,
            #18181b 0%,
            #27272a 50%,
            #18181b 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 0.5rem;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.skeleton-card {
    background: rgba(24, 24, 27, 0.5);
    border: 1px solid #27272a;
    border-radius: 1.5rem;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.skeleton-header {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.skeleton-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.skeleton-author {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.skeleton-name {
    height: 1rem;
    width: 40%;
}

.skeleton-handle {
    height: 0.875rem;
    width: 30%;
}

.skeleton-content {
    margin-bottom: 1rem;
}

.skeleton-line {
    height: 0.875rem;
    margin-bottom: 0.5rem;
}

.skeleton-line:last-child {
    width: 60%;
}

.skeleton-media {
    height: 300px;
    margin-bottom: 1rem;
    border-radius: 1rem;
}

.skeleton-actions {
    display: flex;
    gap: 2rem;
}

.skeleton-action {
    height: 1.5rem;
    width: 3rem;
}

/* Hide skeleton when content loads */
.feed-loaded .skeleton-card {
    display: none;
}