/* Safari移动端视口修复 */
/* 解决Safari地址栏隐藏/显示导致的底部导航异常变化问题 */

/* 使用CSS自定义属性来处理动态视口高度 */
:root {
    /* 定义固定的底部导航高度 */
    --dock-bar-height: 40px;
    /* 使用100vh作为基准，但在Safari中会动态调整 */
    --viewport-height: 100vh;
    /* 使用100dvh（动态视口高度）如果支持的话 */
    --dynamic-viewport-height: 100dvh;
}

/* 支持动态视口单位的现代浏览器 */
@supports (height: 100dvh) {
    :root {
        --viewport-height: 100dvh;
    }
}

/* Safari特定的修复 */
@supports (-webkit-touch-callout: none) {
    /* 只在Safari中应用 */
    
    /* 防止整个页面的视口变化影响 */
    html {
        /* 使用固定高度防止Safari地址栏影响 */
        height: 100%;
        overflow: hidden;
    }
    
    body {
        /* 使用固定高度和滚动容器 */
        height: 100%;
        overflow: hidden;
        position: relative;
    }
    
    /* 创建一个滚动容器来替代body滚动 */
    .page-container {
        position: absolute;
        top: 50px; /* 头部高度 */
        bottom: var(--dock-bar-height); /* 底部导航高度 */
        left: 0;
        right: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* 防止滚动时的弹性效果影响固定元素 */
        overscroll-behavior: contain;
    }
    
    /* 确保底部导航始终固定 */
    .dock-bar {
        /* 强制固定定位 */
        position: fixed !important;
        bottom: 0 !important;
        /* 固定高度，防止Safari动态调整 */
        height: var(--dock-bar-height) !important;
        min-height: var(--dock-bar-height) !important;
        max-height: var(--dock-bar-height) !important;
        /* 防止内容溢出 */
        overflow: hidden;
        /* 确保在所有元素之上 */
        z-index: 9999 !important;
        /* 防止Safari的合成层问题 */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        will-change: auto;
    }
    
    /* 确保头部也固定 */
    .header {
        position: fixed !important;
        top: 0 !important;
        height: 50px !important;
        z-index: 9998 !important;
    }
}

/* iOS Safari特定修复 */
@media screen and (max-width: 768px) {
    @supports (-webkit-touch-callout: none) {
        /* 移动端Safari */
        
        /* 防止视口缩放 */
        html {
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
        }
        
        /* 防止橡皮筋滚动影响固定元素 */
        body {
            position: fixed;
            width: 100%;
            height: 100%;
        }
        
        /* 夜间模式下确保整个视口背景正确 */
        html[data-theme="dark"] {
            background-color: #111827 !important;
        }
        
        html[data-theme="dark"] body {
            background-color: #111827 !important;
        }
        
        /* 滚动容器 */
        .page-container {
            position: absolute;
            top: 50px;
            bottom: 50px;
            left: 0;
            right: 0;
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
            /* 防止过度滚动 */
            overscroll-behavior-y: contain;
            /* 重置margin-top，避免与绝对定位冲突 */
            margin-top: 0 !important;
            /* 重置padding-top，确保内容从顶部开始 */
            padding-top: 20px;
        }
        
        /* 底部导航固定样式 */
        .dock-bar {
            position: fixed !important;
            bottom: 0 !important;
            height: 50px !important;
            /* 防止Safari的视口变化影响 */
            transform: translate3d(0, 0, 0) !important;
            -webkit-transform: translate3d(0, 0, 0) !important;
            /* 防止背景色扩展 */
            background-clip: padding-box !important;
            /* 确保渐变背景不会异常扩展 */
            background-size: 100% 100% !important;
            background-repeat: no-repeat !important;
        }
        
        /* 防止dock-item异常放大 */
        .dock-bar .dock-item {
            height: auto !important;
            max-height: 44px !important;
            /* 防止字体和图标异常放大 */
            font-size: 13px !important;
            flex-shrink: 0 !important;
        }
        
        .dock-bar .dock-item i {
            font-size: 22px !important;
            max-height: 22px !important;
            line-height: 22px !important;
        }
    }
}

/* 针对iPhone X及更新设备的安全区域 */
@supports (padding: max(0px)) {
    .dock-bar {
        /* 使用安全区域内边距 */
        padding-bottom: max(6px, env(safe-area-inset-bottom)) !important;
        /* 调整底部位置 */
        bottom: env(safe-area-inset-bottom, 0) !important;
    }
    
    /* 夜间模式下的安全区域处理 */
    html[data-theme="dark"] .dock-bar {
        /* 确保安全区域也使用渐变背景 */
        background: linear-gradient(to right, #1a2a6c, #b21f1f) !important;
        /* 扩展背景到安全区域 */
        background-size: 100% calc(100% + env(safe-area-inset-bottom, 0px)) !important;
        background-position: 0 0 !important;
        background-repeat: no-repeat !important;
    }
    
    /* 为安全区域添加伪元素背景 */
    html[data-theme="dark"] .dock-bar::after {
        content: '';
        position: absolute;
        bottom: calc(-1 * env(safe-area-inset-bottom, 0px));
        left: 0;
        right: 0;
        height: env(safe-area-inset-bottom, 0px);
        background: linear-gradient(to right, #1a2a6c, #b21f1f);
        z-index: -1;
    }
}

/* 防止在横屏模式下出现问题 */
@media screen and (orientation: landscape) and (max-height: 500px) {
    @supports (-webkit-touch-callout: none) {
        .dock-bar {
            /* 横屏时减少高度 */
            height: 50px !important;
            min-height: 50px !important;
            max-height: 50px !important;
        }
        
        .page-container {
            bottom: 50px !important;
        }
    }
}