/**
 * Skeleton Loading States
 * Animated placeholder cards for content loading
 */

/* Base skeleton box */
.skeleton-box {
    background: linear-gradient(
        90deg, 
        var(--border-color, #e0e0e0) 25%, 
        var(--hover-bg, #f5f5f5) 50%, 
        var(--border-color, #e0e0e0) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 4px;
}

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

/* Skeleton shapes */
.skeleton-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
}

.skeleton-circle--sm {
    width: 24px;
    height: 24px;
}

.skeleton-circle--md {
    width: 40px;
    height: 40px;
}

.skeleton-circle--lg {
    width: 48px;
    height: 48px;
}

.skeleton-text {
    height: 14px;
}

.skeleton-text--xs {
    width: 60px;
}

.skeleton-text--sm {
    width: 100px;
}

.skeleton-text--md {
    width: 70%;
}

.skeleton-text--lg {
    width: 85%;
    height: 18px;
}

.skeleton-text--xl {
    width: 90%;
    height: 24px;
}

.skeleton-text--full {
    width: 100%;
}

.skeleton-button {
    width: 70px;
    height: 28px;
    border-radius: 14px;
}

.skeleton-button--sm {
    width: 60px;
    height: 24px;
}

/* ===== Thread Card Skeleton ===== */
.thread-card--skeleton {
    padding: 16px;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
    background: var(--card-bg, #fff);
    cursor: default;
    pointer-events: none;
    animation: skeleton-card-enter 0.3s ease-out forwards;
    opacity: 0;
}

.thread-card--skeleton .thread-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.thread-card--skeleton .thread-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.thread-card--skeleton .thread-title-row {
    display: flex;
}

.thread-card--skeleton .thread-body-preview {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.thread-card--skeleton .thread-actions {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}

/* ===== Circle Card Skeleton ===== */
.circle-card--skeleton {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
    background: var(--card-bg, #fff);
    animation: skeleton-card-enter 0.3s ease-out forwards;
    opacity: 0;
}

.circle-card--skeleton .circle-card-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ===== Notification Item Skeleton ===== */
.notification-item--skeleton {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
    background: var(--card-bg, #fff);
    animation: skeleton-card-enter 0.3s ease-out forwards;
    opacity: 0;
}

.notification-item--skeleton .notification-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ===== Conversation/Message Skeleton ===== */
.conversation-item--skeleton {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
    background: var(--card-bg, #fff);
    animation: skeleton-card-enter 0.3s ease-out forwards;
    opacity: 0;
}

.conversation-item--skeleton .conversation-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ===== Thread Detail Skeleton ===== */
.thread-detail--skeleton {
    padding: 20px;
    background: var(--card-bg, #fff);
    border-radius: 8px;
    margin-bottom: 16px;
}

.thread-detail--skeleton .thread-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.thread-detail--skeleton .thread-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.thread-detail--skeleton .thread-actions {
    display: grid;
    gap: 12px;
}

/* ===== Comments Section Skeleton ===== */
.comments-section--skeleton {
    padding: 16px;
}

.comment-item--skeleton {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.comment-item--skeleton .comment-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ===== Containers ===== */
.threads-skeleton-container,
.circles-skeleton-container,
.notifications-skeleton-container,
.messages-skeleton-container {
    display: flex;
    flex-direction: column;
}

/* ===== Fade-in Animation for Loaded Content ===== */
.threads-container--loaded,
.circles-container--loaded,
.notifications-container--loaded,
.messages-container--loaded {
    animation: content-fade-in 0.3s ease-out;
}

@keyframes content-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes skeleton-card-enter {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Staggered Animations ===== */
.thread-card--skeleton:nth-child(1),
.circle-card--skeleton:nth-child(1),
.notification-item--skeleton:nth-child(1),
.conversation-item--skeleton:nth-child(1) { animation-delay: 0s; }

.thread-card--skeleton:nth-child(2),
.circle-card--skeleton:nth-child(2),
.notification-item--skeleton:nth-child(2),
.conversation-item--skeleton:nth-child(2) { animation-delay: 0.1s; }

.thread-card--skeleton:nth-child(3),
.circle-card--skeleton:nth-child(3),
.notification-item--skeleton:nth-child(3),
.conversation-item--skeleton:nth-child(3) { animation-delay: 0.2s; }

.thread-card--skeleton:nth-child(4),
.circle-card--skeleton:nth-child(4),
.notification-item--skeleton:nth-child(4),
.conversation-item--skeleton:nth-child(4) { animation-delay: 0.3s; }

.thread-card--skeleton:nth-child(5),
.circle-card--skeleton:nth-child(5),
.notification-item--skeleton:nth-child(5),
.conversation-item--skeleton:nth-child(5) { animation-delay: 0.4s; }

/* ===== Dark Mode Support ===== */
[data-theme="dark"] .skeleton-box {
    background: linear-gradient(
        90deg, 
        var(--border-color, #333) 25%, 
        var(--hover-bg, #444) 50%, 
        var(--border-color, #333) 75%
    );
    background-size: 200% 100%;
}

[data-theme="dark"] .thread-card--skeleton,
[data-theme="dark"] .circle-card--skeleton,
[data-theme="dark"] .notification-item--skeleton,
[data-theme="dark"] .conversation-item--skeleton,
[data-theme="dark"] .thread-detail--skeleton,
[data-theme="dark"] .comment-item--skeleton {
    background: var(--card-bg, #1a1a1a);
    border-color: var(--border-color, #333);
}