/**
 * BOTTOM NAVIGATION COMPONENT STYLES
 * Переиспользуемые стили для нижней навигации
 */

/* === ОСНОВНЫЕ СТИЛИ УПРАВЛЕНИЯ === */
/* Стили полоски управления перенесены в основное определение ниже */

.bottom-nav-toggle:hover {
    background: #357ABD; /* темнее при наведении */
    /* БЕЗ изменений размера и позиции! */
}

.bottom-nav-toggle:active {
    background: #2E6DA4; /* еще темнее при клике */
    /* БЕЗ scale эффектов! */
}

.toggle-text {
    font-size: 9px; /* чуть больше для читаемости */
    color: white; /* четкий белый БЕЗ прозрачности */
    font-weight: 600; /* жирнее */
    letter-spacing: 0.4px;
    text-shadow: 0 0 2px rgba(0,0,0,0.3); /* тень для четкости */
}

/* Стрелочки убраны - теперь только текст "Меню" */

/* === ЧЕТКИЙ РАЗДЕЛИТЕЛЬ === */
.bottom-nav-separator {
    position: fixed;
    bottom: 79px; /* между управлением и меню */
    left: 0;
    right: 0;
    height: 1px; /* четкая линия */
    background: linear-gradient(to right, 
        transparent, 
        #4A90E2 30%, 
        #4A90E2 70%, 
        transparent
    );
    z-index: 1001;
    /* transition убран - добавляется через класс animations-enabled */
    
    /* СКРЫВАЕМ ДО ИНИЦИАЛИЗАЦИИ JS - избегаем мигания */
    opacity: 0;
    visibility: hidden;
}

/* === ОСНОВНЫЕ СТИЛИ НИЖНЕЙ НАВИГАЦИИ === */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-bg-primary, #ffffff);
    border-top: 1px solid var(--color-border-light, #e2e8f0);
    display: flex;
    padding: 8px 0;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    /* Поддержка CSS переменных из Telegram темы */
    color: var(--color-text-primary, #000000);
    /* УБИРАЕМ transition при загрузке - добавляем через JS после полной загрузки */
    
    /* СКРЫВАЕМ МЕНЮ ДО ИНИЦИАЛИЗАЦИИ JS - избегаем мигания */
    opacity: 0;
    visibility: hidden;
}

/* ПОКАЗЫВАЕМ ВСЁ ПОСЛЕ ИНИЦИАЛИЗАЦИИ JS - переопределяем inline стили */
body.nav-initialized .bottom-nav,
body.nav-initialized .bottom-nav-toggle,
body.nav-initialized .bottom-nav-separator {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Полоска управления тоже без анимации при загрузке */
.bottom-nav-toggle {
    position: fixed;
    bottom: 80px;
    
    /* СКРЫВАЕМ ДО ИНИЦИАЛИЗАЦИИ JS - избегаем мигания */
    opacity: 0;
    visibility: hidden;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    min-width: 60px;
    padding: 0 12px;
    
    height: 10px;
    background: #4A90E2;
    border: none;
    border-radius: 5px 5px 0 0;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    cursor: pointer;
    /* УБИРАЕМ transition при загрузке */
    z-index: 1002;
    
    /* Четкая тень */
    box-shadow: 0 -1px 4px rgba(74, 144, 226, 0.4);
}

/* === АНИМАЦИИ ВКЛЮЧАЮТСЯ ТОЛЬКО ПОСЛЕ ЗАГРУЗКИ === */

/* Плавные переходы ТОЛЬКО при кликах пользователя */
body.animations-enabled {
    transition: padding-bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

body.animations-enabled .bottom-nav {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

body.animations-enabled .bottom-nav-toggle {
    transition: bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease;
}

body.animations-enabled .bottom-nav-separator {
    transition: bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === ЭЛЕМЕНТЫ НАВИГАЦИИ === */
.nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 8px;
    border: none;
    background: none;
    color: var(--color-text-secondary, #64748b);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    /* Убираем стандартные стили кнопки */
    outline: none;
    font-family: inherit;
}

/* === АКТИВНЫЙ ЭЛЕМЕНТ === */
.nav-item.active {
    color: var(--color-primary, var(--tg-theme-button-color, #2481cc));
    transform: translateY(-2px);
}

/* === HOVER ЭФФЕКТ === */
.nav-item:hover {
    color: var(--color-primary, var(--tg-theme-button-color, #2481cc));
    background: var(--color-primary-light, rgba(36, 129, 204, 0.05));
    border-radius: 8px;
}

/* === ИКОНКИ === */
.nav-icon {
    font-size: 22px;
    margin-bottom: 2px;
    transition: transform 0.2s ease-in-out;
}

.nav-item:hover .nav-icon {
    transform: scale(1.1);
}

/* === ПОДПИСИ === */
.nav-label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
    /* Предотвращаем перенос текста */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* === АДАПТИВНОСТЬ === */

/* Для очень маленьких экранов */
@media (max-width: 320px) {
    .nav-item {
        padding: 2px 4px;
    }
    
    .nav-icon {
        font-size: 20px;
        margin-bottom: 1px;
    }
    
    .nav-label {
        font-size: 9px;
    }
}

/* === НАЧАЛЬНОЕ СОСТОЯНИЕ: ЗАВИСИТ ОТ КЛАССА body === */

/* ПО УМОЛЧАНИЮ (без классов): меню СВЕРНУТО */
body {
    padding-bottom: 16px; /* только место для полоски управления */
}

/* КОГДА body.nav-expanded: меню РАЗВЕРНУТО */
body.nav-expanded {
    padding-bottom: 90px; /* полная высота меню */
}

/* ОСНОВНЫЕ СТИЛИ НИЖНЕЙ НАВИГАЦИИ */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-bg-primary, #ffffff);
    border-top: 1px solid var(--color-border-light, #e2e8f0);
    display: flex;
    padding: 8px 0;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    color: var(--color-text-primary, #000000);
    
    /* ПО УМОЛЧАНИЮ СВЕРНУТО - полностью вниз */
    transform: translateY(100%);
}

/* КОГДА body.nav-expanded: меню выезжает */
body.nav-expanded .bottom-nav {
    transform: translateY(0);
}

/* Полоска управления - ПО УМОЛЧАНИЮ НА МЕСТЕ МЕНЮ */
.bottom-nav-toggle {
    position: fixed;
    bottom: 0; /* на месте свернутого меню */
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    min-width: 60px;
    padding: 0 12px;
    
    height: 10px;
    background: #4A90E2;
    border: none;
    border-radius: 5px 5px 0 0;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    cursor: pointer;
    z-index: 1002;
    box-shadow: 0 -1px 4px rgba(74, 144, 226, 0.4);
}

/* КОГДА body.nav-expanded: полоска поднимается */
body.nav-expanded .bottom-nav-toggle {
    bottom: 80px; /* поднимается над меню */
}

/* Разделитель - ПО УМОЛЧАНИЮ СКРЫТ */
.bottom-nav-separator {
    position: fixed;
    bottom: -1px; /* спрятан под полоску */
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, 
        transparent, 
        #4A90E2 30%, 
        #4A90E2 70%, 
        transparent
    );
    z-index: 1001;
    opacity: 0; /* скрыт изначально */
    visibility: hidden; /* ДОПОЛНИТЕЛЬНО скрываем до инициализации */
}

/* КОГДА body.nav-expanded: разделитель появляется */
body.nav-expanded .bottom-nav-separator {
    bottom: 79px; /* появляется между управлением и меню */
    opacity: 1;
}

/* === ИГРОВЫЕ КНОПКИ В ПОТОКЕ КОНТЕНТА === */

/* СПЕЦИАЛЬНЫЕ кнопки которые должны быть fixed (если нужно) */
.game-action-button-fixed {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 999;
    transition: bottom 0.3s ease;
    bottom: 16px; /* по умолчанию над полоской */
}

body.nav-expanded .game-action-button-fixed {
    bottom: 100px; /* над развернутым меню */
}

/* === СПЕЦИАЛЬНЫЕ КЛАССЫ ДЛЯ ИГРОВЫХ КНОПОК (СОВМЕСТИМОСТЬ) === */

/* Игровые кнопки остаются в потоке контента, но получают правильные отступы */
.actions-footer,
.quiz-actions,
.result-actions {
    /* НЕ fixed - остаются в потоке документа */
    position: relative !important;
    bottom: unset !important;
    left: unset !important;
    right: unset !important;
    
    width: 100%;
    padding: 20px 16px;
    margin-top: auto;
    margin-bottom: 20px;
    
    /* Flexbox для красивого расположения кнопок */
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    
    /* Сохраняем стили из quizzes.css где это нужно */
    background-color: var(--color-bg-primary);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -2px 8px var(--color-border);
    z-index: 100;
}

/* Специальные состояния из quizzes.css - поддерживаем логику видимости */
body.question-visible .actions-footer {
    display: flex !important; /* показываем при вопросе */
    background: transparent !important; /* убираем фон */
    border-top: none !important; /* убираем рамку сверху */
    box-shadow: none !important; /* убираем тень */
}

body.fact-visible .actions-footer {
    display: none !important; /* скрываем при факте */
}

body.explanation-visible .actions-footer {
    display: flex !important; /* показываем при объяснении */
    background: transparent !important;
    border-top: none !important;
    box-shadow: none !important;
    padding: 20px 16px !important; /* но оставляем наш отступ */
    margin-top: 16px !important; /* отступ сверху */
}

/* Для quiz-container - убеждаемся что он занимает минимальную высоту */
.quiz-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Обеспечиваем что actions-footer всегда внизу quiz-container */
.quiz-container .actions-footer {
    margin-top: auto;
}

/* Для страницы результатов - тоже flexbox структура */
.quiz-result-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 20px 16px;
}

/* Прижимаем result-actions к низу страницы результатов */
.quiz-result-container .result-actions {
    margin-top: auto;
}

/* Убираем рамки с кнопок результатов - делаем их чистыми */
.result-actions {
    background: transparent !important; /* убираем фон */
    border-top: none !important; /* убираем рамку сверху */
    box-shadow: none !important; /* убираем тень */
}


/* === СОВМЕСТИМОСТЬ СО СТАРЫМИ СТРАНИЦАМИ === */

/* Для страниц использующих bottom-spacer */
.bottom-spacer {
    height: 16px; /* ПО УМОЛЧАНИЮ минимальный отступ (свернутое меню) */
    flex-shrink: 0;
    /* НЕТ transition изначально */
}

/* Когда меню развернуто - увеличиваем */
body.nav-expanded .bottom-spacer {
    height: 90px; /* увеличиваем для развернутого меню */
}

/* Анимация для bottom-spacer когда включены анимации */
body.animations-enabled .bottom-spacer {
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === АНИМАЦИИ === */
/* Убрали стартовую анимацию появления, оставили только transition при взаимодействиях */


/* === ACCESSIBILITY === */

/* Увеличиваем область клика */
.nav-item {
    min-height: 64px;
    min-width: 44px;
}

/* Фокус для клавиатурной навигации */
.nav-item:focus {
    outline: 2px solid var(--color-primary, #2481cc);
    outline-offset: -2px;
    border-radius: 8px;
}

/* Уменьшаем анимации для пользователей с предпочтением */
@media (prefers-reduced-motion: reduce) {
    .nav-item,
    .nav-icon,
    .bottom-nav {
        transition: none;
    }
    
    .nav-item.active {
        transform: none;
    }
    
    .bottom-nav {
        animation: none;
    }
}

/* Десктоп: полоска меню на всю ширину, кнопки — по ширине контента */
@media (min-width: 768px) {
    .bottom-nav {
        left: 0;
        right: 0;
        max-width: none;
        border-radius: 0;
        border-left: none;
        border-right: none;
        background: #ffffff;
        display: flex;
        justify-content: center;
    }

    body.nav-expanded .bottom-nav {
        transform: translateY(0);
    }

    .bottom-nav .nav-item {
        max-width: calc(800px / 6);
    }

    .bottom-nav-toggle {
        max-width: 800px;
    }
}