/*
 * NetShow Loading States
 * Mobile-first loading placeholders and animated indicators
 */

.ns-skeleton {
    position: relative;
    overflow: hidden;
    background: var(--ns-bg-tertiary);
    border-radius: var(--ns-radius-md);
}

.ns-skeleton::after,
.ns-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.04) 35%,
        rgba(255, 255, 255, 0.14) 50%,
        rgba(255, 255, 255, 0.04) 65%,
        transparent 100%
    );
    animation: ns-shimmer 1.6s ease-in-out infinite;
}

/* Text skeletons */
.ns-skeleton-text {
    height: 0.9rem;
    width: 100%;
    border-radius: var(--ns-radius-sm);
    background: var(--ns-bg-tertiary);
    position: relative;
    overflow: hidden;
}

.ns-skeleton-text + .ns-skeleton-text {
    margin-top: var(--ns-space-2);
}

.ns-skeleton-text.short {
    width: 55%;
}

.ns-skeleton-text.medium {
    width: 75%;
}

.ns-skeleton-text::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.12),
        transparent
    );
    animation: ns-shimmer 1.5s linear infinite;
}

/* Card skeletons */
.ns-skeleton-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--ns-border);
    background: var(--ns-bg-secondary);
    border-radius: var(--ns-radius-lg);
    padding: var(--ns-space-4);
    min-height: 140px;
}

.ns-skeleton-avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--ns-radius-full);
    background: var(--ns-bg-elevated);
    position: relative;
    overflow: hidden;
}

.ns-skeleton-avatar::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.13),
        transparent
    );
    animation: ns-shimmer 1.4s ease-in-out infinite;
}

/* List skeletons */
.ns-skeleton-list {
    display: grid;
    gap: var(--ns-space-3);
}

.ns-skeleton-list-item {
    display: flex;
    align-items: center;
    gap: var(--ns-space-3);
    padding: var(--ns-space-3);
    border: 1px solid var(--ns-border-subtle);
    border-radius: var(--ns-radius-md);
    background: var(--ns-bg-secondary);
}

.ns-skeleton-list-content {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: var(--ns-space-2);
}

.ns-skeleton-list-content .ns-skeleton-text:last-child {
    width: 62%;
}

.ns-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--ns-border);
    border-top-color: var(--ns-accent, #f59e0b);
    border-radius: 50%;
    animation: ns-spin 0.8s linear infinite;
}

.ns-spinner.sm {
    width: 18px;
    height: 18px;
    border-width: 2px;
}

.ns-spinner.lg {
    width: 44px;
    height: 44px;
    border-width: 4px;
}

.ns-pulse {
    animation: ns-pulse 1.6s ease-in-out infinite;
}

.ns-shimmer {
    position: relative;
    overflow: hidden;
    background: var(--ns-bg-tertiary);
}

.ns-progress {
    width: 100%;
    height: 10px;
    border-radius: var(--ns-radius-full);
    border: 1px solid var(--ns-border-subtle);
    background: var(--ns-bg-tertiary);
    overflow: hidden;
    position: relative;
}

.ns-progress-bar {
    height: 100%;
    width: var(--progress, 0%);
    background: linear-gradient(90deg, var(--ns-accent), var(--ns-accent-hover));
    border-radius: inherit;
    transition: width var(--ns-transition-normal);
}

.ns-progress.indeterminate .ns-progress-bar {
    position: absolute;
    left: -40%;
    width: 40%;
    animation: ns-progress-indeterminate 1.3s ease-in-out infinite;
}

@keyframes ns-shimmer {
    100% {
        transform: translateX(100%);
    }
}

@keyframes ns-progress-indeterminate {
    0% {
        left: -40%;
        width: 30%;
    }

    50% {
        left: 28%;
        width: 50%;
    }

    100% {
        left: 100%;
        width: 35%;
    }
}

@keyframes ns-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes ns-pulse {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.55;
    }
}

@media (max-width: 640px) {
    .ns-skeleton-card {
        padding: var(--ns-space-3);
        min-height: 120px;
    }

    .ns-skeleton-avatar {
        width: 36px;
        height: 36px;
    }

    .ns-skeleton-list-item {
        padding: var(--ns-space-2);
        gap: var(--ns-space-2);
    }

    .ns-skeleton-text {
        height: 0.82rem;
    }

    .ns-spinner.lg {
        width: 36px;
        height: 36px;
        border-width: 3px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ns-skeleton::after,
    .ns-skeleton-text::after,
    .ns-skeleton-avatar::after,
    .ns-shimmer::after,
    .ns-spinner,
    .ns-pulse,
    .ns-progress.indeterminate .ns-progress-bar {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}