/**
 * Стили для плавного появления интерфейса после загрузки сферы
 * 
 * UX требование:
 * 1. Сфера загружается первой и анимируется по центру
 * 2. После загрузки сферы элементы интерфейса появляются плавно с fade-in анимацией
 */

/* Скрытие элементов интерфейса изначально */
.ui-fade-in-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out !important;
}

/* Плавное появление элементов интерфейса */
.ui-fade-in-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out !important;
    animation: fadeInUp 0.8s ease-out forwards;
}

/* Анимация появления снизу вверх */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Специфичные стили для элементов интерфейса */

/* Чат - появляется справа */
.chat-wrapper.ui-fade-in-visible {
    animation: fadeInRight 0.8s ease-out forwards;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Левое меню - появляется слева */
.left-nav.ui-fade-in-visible {
    animation: fadeInLeft 0.8s ease-out forwards;
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Контролы и статус - появляются снизу */
.controls.ui-fade-in-visible,
#status.ui-fade-in-visible {
    animation: fadeInUp 0.8s ease-out forwards;
}

/* Отключаем анимацию для сферы (она должна быть видна сразу) */
#particleSphere,
.assistant-view,
.center-content {
    /* Сфера не должна иметь fade-in анимацию */
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
    animation: none !important;
}

/* УБРАНО: Изначальное скрытие элементов интерфейса */
/* Теперь используется скелетная загрузка вместо скрытия */