/* Полноэкранное отображение для мобильных устройств */

/* Базовые настройки для полноэкранного режима - только для мобильных */
@media (max-width: 768px) {
    html, body {
        height: 100vh !important;
        height: 100dvh !important; /* Dynamic viewport height для мобильных */
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Скрытие нативных элементов браузера */
    body {
        -webkit-user-select: none !important;
        user-select: none !important;
        -webkit-touch-callout: none !important;
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }
}

/* Мобильный контейнер - только для мобильных */
@media (max-width: 768px) {
    .mobile-app {
        height: 100vh !important;
        height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        position: relative !important;
    }
}

/* Мобильный хедер с учетом safe area - только для мобильных */
@media (max-width: 768px) {
    .mobile-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        /* Добавляем отступ для safe area */
        padding-top: calc(16px + env(safe-area-inset-top, 0px)) !important;
        padding-top: calc(16px + constant(safe-area-inset-top, 0px)) !important;
        padding-left: calc(16px + env(safe-area-inset-left, 0px)) !important;
        padding-left: calc(16px + constant(safe-area-inset-left, 0px)) !important;
        padding-right: calc(16px + env(safe-area-inset-right, 0px)) !important;
        padding-right: calc(16px + constant(safe-area-inset-right, 0px)) !important;
    }
}

/* Мобильный контент - только для мобильных */
@media (max-width: 768px) {
    .mobile-content {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth !important;
        overscroll-behavior: contain !important;
        height: calc(100vh - 60px) !important;
        height: calc(100dvh - 60px) !important;
        /* Добавляем отступы для safe area */
        padding-left: calc(16px + env(safe-area-inset-left, 0px)) !important;
        padding-left: calc(16px + constant(safe-area-inset-left, 0px)) !important;
        padding-right: calc(16px + env(safe-area-inset-right, 0px)) !important;
        padding-right: calc(16px + constant(safe-area-inset-right, 0px)) !important;
    }
}

/* Мобильная навигация с учетом safe area - только для мобильных */
@media (max-width: 768px) {
    .mobile-nav {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
        /* Добавляем отступ для safe area */
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        padding-bottom: calc(8px + constant(safe-area-inset-bottom, 0px)) !important;
        padding-left: calc(16px + env(safe-area-inset-left, 0px)) !important;
        padding-left: calc(16px + constant(safe-area-inset-left, 0px)) !important;
        padding-right: calc(16px + env(safe-area-inset-right, 0px)) !important;
        padding-right: calc(16px + constant(safe-area-inset-right, 0px)) !important;
    }
}

/* Предотвращение зума при двойном тапе - только для мобильных */
@media (max-width: 768px) {
    * {
        touch-action: manipulation !important;
    }

    /* Скрытие полос прокрутки на мобильных */
    .mobile-content::-webkit-scrollbar {
        display: none !important;
    }

    .mobile-content {
        -ms-overflow-style: none !important;
        scrollbar-width: none !important;
    }

    /* Улучшенная производительность */
    .mobile-app,
    .mobile-header,
    .mobile-content,
    .mobile-nav {
        will-change: transform !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
    }

    /* Анимации для плавных переходов */
    .mobile-app {
        transition: transform 0.3s ease !important;
    }
}

/* Стили для PWA режима - только для мобильных */
@media (max-width: 768px) and (display-mode: standalone) {
    .mobile-header {
        padding-top: calc(16px + env(safe-area-inset-top, 0px)) !important;
        padding-top: calc(16px + constant(safe-area-inset-top, 0px)) !important;
    }
    
    .mobile-nav {
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        padding-bottom: calc(8px + constant(safe-area-inset-bottom, 0px)) !important;
    }
}

/* Стили для iOS Safari - только для мобильных */
@media (max-width: 768px) {
    @supports (-webkit-touch-callout: none) {
        .mobile-app {
            height: -webkit-fill-available !important;
        }
        
        .mobile-content {
            height: calc(-webkit-fill-available - 60px) !important;
        }
    }
}

/* Стили для Android Chrome - только для мобильных */
@media (max-width: 768px) {
    @supports (height: 100dvh) {
        .mobile-app {
            height: 100dvh !important;
        }
        
        .mobile-content {
            height: calc(100dvh - 60px) !important;
        }
    }
}