/* Skeleton Loading Styles */

/* Базовые токены и анимация */
.skeleton-shimmer {
    background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.12) 37%, rgba(255,255,255,0.06) 63%);
    background-size: 400% 100%;
    animation: shimmer 1.2s ease-in-out infinite;
}

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

/* Preloader */
.navorina-preloader {
    position: fixed;
    inset: 0;
    background: var(--color-bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    transition: opacity var(--transition-slower), visibility var(--transition-slower);
}

.navorina-preloader.hidden {
    opacity: 0;
    visibility: hidden;
}

/* Navigation Skeleton */
.nav-skeleton {
    display: none;
    width: 100%;
    gap: var(--spacing-sm);
    flex-direction: column;
}

.nav-skel-item {
    width: 100%;
    height: 44px;
    border-radius: var(--radius-full);
    background: rgba(255,255,255,0.06);
    position: relative;
    overflow: hidden;
}

.nav-skel-item::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: none;
}

.nav-skel-item::after {
    background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.12) 37%, rgba(255,255,255,0.06) 63%);
    background-size: 400% 100%;
    animation: shimmer 1.2s ease-in-out infinite;
}

.preloader-active .nav-skeleton { 
    display: flex; 
}

.preloader-active .nav-items .nav-item { 
    display: none !important; 
}

/* Chat Skeleton */
.chat-skeleton {
    display: none;
    padding: var(--spacing-lg);
    gap: var(--spacing-md);
}

.skeleton-section-title {
    width: 96px;
    height: var(--font-size-md);
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.06);
    position: relative;
    overflow: hidden;
}

.skeleton-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.skeleton-pill {
    display: inline-block;
    height: var(--spacing-3xl);
    width: 120px;
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,0.06);
    position: relative;
    overflow: hidden;
}

.skeleton-pill.long { 
    width: 180px; 
}

.skeleton-messages {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.skeleton-bubble {
    height: var(--spacing-4xl);
    width: 60%;
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,0.06);
    position: relative;
    overflow: hidden;
}

.skeleton-bubble.user { 
    margin-left: auto; 
    background: rgba(255,255,255,0.12); 
}

.skeleton-bubble.long { 
    height: var(--spacing-6xl); 
    width: 75%; 
}

.chat-skeleton > *,
.skeleton-pill::after,
.skeleton-bubble::after,
.skeleton-section-title::after { 
    background: none; 
}

.chat-skeleton .skeleton-pill::after,
.chat-skeleton .skeleton-bubble::after,
.chat-skeleton .skeleton-section-title::after {
    content:'';
    position:absolute;
    inset:0;
    background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.12) 37%, rgba(255,255,255,0.06) 63%);
    background-size: 400% 100%;
    animation: shimmer 1.2s ease-in-out infinite;
    border-radius: inherit;
}

.preloader-active .chat-skeleton { 
    display: flex; 
    flex-direction: column; 
}

/* Chat Input Skeleton */
.chat-input-skeleton {
    display: none;
    height: var(--spacing-6xl);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-3xl);
    padding: var(--spacing-sm) var(--spacing-lg);
    gap: var(--spacing-md);
    align-items: center;
}

.skeleton-circle {
    width: var(--spacing-3xl);
    height: var(--spacing-3xl);
    border-radius: var(--radius-circle);
    background: rgba(255,255,255,0.06);
    position: relative;
    overflow: hidden;
}

.skeleton-rect {
    flex: 1;
    height: var(--spacing-3xl);
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,0.06);
    position: relative;
    overflow: hidden;
}

.skeleton-circle::after, 
.skeleton-rect::after {
    content:'';
    position:absolute;
    inset:0;
    background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.12) 37%, rgba(255,255,255,0.06) 63%);
    background-size: 400% 100%;
    animation: shimmer 1.2s ease-in-out infinite;
    border-radius: inherit;
}

.preloader-active .chat-input-skeleton { 
    display: flex; 
}

.preloader-active .chat-input-wrapper { 
    visibility: hidden; 
}

/* Адаптивные стили для мобильных устройств */
@media (max-width: 768px) {
    /* Мобильные размеры скелетов внизу экрана */
    .nav-skel-item { 
        height: var(--spacing-6xl); 
        border-radius: var(--radius-circle); 
    }
    
    .chat-input-skeleton {
        height: var(--spacing-6xl);
    }
}