/* =====================================================================
   VOLAGO — мобильная «рамка» (static/css/vlg_mobile.css), версия 2027
   • Страница от края до края без серых полос
   • Эффект Glassmorphism для шапки и нижней панели
   • Плавающая панель-"остров" с вырезом под центральную кнопку
   • Аппаратная плавная анимация (GPU) при скролле
   ===================================================================== */

/* Цвет «вокруг» страницы строго совпадает с фоном сайта (убивает серые полосы в Safari) */
html { background-color: #f0f2f5; }
html[data-bs-theme="dark"] { background-color: #18191a; }

/* Страница рисуется под вырезами экрана — в альбомной ориентации отступаем от них */
body {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

@media (max-width: 991.98px) {

    /* ---------- Шапка (Glassmorphism + Центрирование) ---------- */
    nav.navbar.sticky-top {
        position: sticky !important;
        top: 0 !important;
        /* Отступы: 8px снизу, и 8px + челка сверху (идеально по центру) */
        padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important; 
        padding-bottom: 8px !important;
        background: rgba(255, 255, 255, 0.65) !important;
        -webkit-backdrop-filter: blur(24px) saturate(180%);
        backdrop-filter: blur(24px) saturate(180%);
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
        z-index: 1040;
    }
    [data-bs-theme="dark"] nav.navbar.sticky-top {
        background: rgba(36, 37, 38, 0.65) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    }

    /* Скрытие шапки при скролле вниз */
    nav.navbar.sticky-top.is-hidden {
        transform: translateY(-100%);
    }

    /* ---------- Нижняя панель (Плавающий "остров") ---------- */
    .mobile-bottom-nav {
        left: 12px !important; 
        right: 12px !important;
        bottom: calc(9px + env(safe-area-inset-bottom, 0px)) !important; /* Отступ от низа */
        height: 64px !important; 
        padding: 0 10px !important; 
        border-radius: 25px !important; /* Форма капсулы */
        border: 1px solid rgba(255, 255, 255, 0.4) !important;
        background: rgba(255, 255, 255, 0.75) !important;
        -webkit-backdrop-filter: blur(24px) saturate(180%);
        backdrop-filter: blur(24px) saturate(180%);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
        transform: translateY(0);
        will-change: transform;
    }

    [data-bs-theme="dark"] .mobile-bottom-nav {
        background: rgba(36, 37, 38, 0.8) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    }

    /* Скрытое состояние: уводим панель глубоко вниз, чтобы кнопка + гарантированно исчезла */
    .mobile-bottom-nav.is-hidden {
        transform: translateY(calc(100% + 50px + env(safe-area-inset-bottom, 0px))) !important; 
        pointer-events: none;
    }

    /* Отступ снизу страницы, чтобы контент не перекрывался доком */
    #page-content { 
        margin-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important; 
    }

    /* Активный раздел навигации */
    .mobile-bottom-nav .nav-icon-link { 
        position: relative; 
        transition: color 0.2s ease, transform 0.15s ease; 
    }
    .mobile-bottom-nav .nav-icon-link:active { transform: scale(0.9); }
    .mobile-bottom-nav .nav-icon-link.active { color: #FF6B00; }
    .mobile-bottom-nav .nav-icon-link.active::after {
        content: ""; position: absolute; bottom: 8px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px;
        border-radius: 50%; background: #FF6B00;
    }

    /* Центральная кнопка создания (Эффект "выреза" в стекле) */
    .mobile-bottom-nav .btn-create-float {
        margin-top: -24px; 
        width: 52px; 
        height: 52px;
        background: #FF6B00 !important; 
        color: #fff !important; 
        /* Цвет рамки совпадает с фоном сайта, создавая иллюзию выреза в стекле */
        border: 4px solid #f0f2f5 !important; 
        box-shadow: 0 8px 16px -6px rgba(255, 107, 0, 0.6) !important;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        transition: transform 0.15s ease;
    }
    .mobile-bottom-nav .btn-create-float:active { transform: scale(0.9); }
    
    [data-bs-theme="dark"] .mobile-bottom-nav .btn-create-float {
        border-color: #18191a !important; /* Рамка под темный фон сайта */
    }

    /* Если открыта клавиатура — прячем док */
    .mobile-bottom-nav.is-kb {
        transform: translateY(calc(100% + 50px + env(safe-area-inset-bottom, 0px))) !important;
    }

    /* ---------- Всплывающие элементы (тосты), опускаются вместе с доком ---------- */
    .dd-bar {
        left: 12px !important; right: 12px !important; width: auto !important;
        bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
        border-radius: 20px !important; border: 1px solid var(--bs-border-color) !important;
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
        transform: translateY(0);
    }
    .vlg-mid {
        bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity .26s ease-out !important;
        transform: translateY(0);
    }
    .fc-toast, .dz-toast { 
        bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important; 
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity .2s !important;
        transform: translateY(0);
    }
    .dd-toast { 
        bottom: calc(170px + env(safe-area-inset-bottom, 0px)) !important; 
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
        transform: translateY(0);
    }

    /* Когда панель скрыта — тосты плавно съезжают вниз на 90px */
    :root.vlg-dock-hidden .dd-bar,
    :root.vlg-dock-hidden .vlg-mid,
    :root.vlg-dock-hidden .fc-toast,
    :root.vlg-dock-hidden .dz-toast,
    :root.vlg-dock-hidden .dd-toast {
        transform: translateY(90px);
    }
}

@media (max-width: 575.98px) {
    .modal-fullscreen-sm-down .modal-content { padding-top: env(safe-area-inset-top, 0px); }
}