/* mobile-layout-fix.css - 移动端整体布局修复 */

/* 超小屏设备适配 (320px-480px) */
@media only screen and (max-width: 480px) {
    .zib-123pan-container-layout {
        bottom: 130px !important; /* 增加底部间距，确保不被footer-tabbar遮挡 */
        height: calc(100vh - 130px) !important;
        padding-top: 0px !important;
    }
}

/* 小屏设备适配 (481px-768px) */
@media only screen and (min-width: 481px) and (max-width: 768px) {
    .zib-123pan-container-layout {
        bottom: 140px !important; /* 增加底部间距，确保不被footer-tabbar遮挡 */
        height: calc(100vh - 140px) !important;
        padding-top: 0px !important;
    }
}

/* 平板设备适配 (769px-1024px) */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
    .zib-123pan-container-layout {
        bottom: 80px !important;
        height: calc(100vh - 80px) !important;
        padding-top: 0px !important;
       
    }
}

/* 移动端整体页面布局修复 */
@media only screen and (max-width: 768px) {
    /* 确保html和body从顶部开始 */
    html, body {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* 主要容器重置顶部间距 */
    .main,
    .container,
    .content,
    .wrapper {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* 文章容器重置顶部间距 */
    .article,
    .post,
    .entry,
    .content-area {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* 123云盘相关容器布局调整 */
    .zib-123pan-container {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* 主容器布局 - 移动端适配footer-tabbar */
    .zib-123pan-container-layout {
        /* 顶部保持适当间距 */
        padding-top: 0px !important;
        margin-top: 0 !important;
        
        /* 底部为footer-tabbar预留空间 - 增加底部间距 */
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 140px !important; /* 增加底部导航栏高度，确保目录树不被遮挡 */
        
        /* 确保容器占满可用空间 */
        width: 100% !important;
        height: calc(100vh - 140px) !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
        z-index: 1 !important;
    }
    
    /* 确保内容区域完全适配 */
    .zib-123pan-container-layout .directory-layout {
        height: 100% !important;
        padding-bottom: 0px !important; /* 增加底部内边距，确保目录树底部不贴边 */
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }
    
    /* 目录面板底部额外间距 */
    .directory-panel {
        padding-bottom: 0px !important; /* 为目录面板底部添加额外间距 */
    }
    
    /* 文件树容器底部间距 */
    .file-list,
    .directory-content {
        padding-bottom: 30px !important; /* 确保文件树底部有足够间距 */
        margin-bottom: 20px !important;
    }
    
    /* 文章页面移动端布局优化 - 底部贴着导航栏 */
    .article.page-article.main-bg.theme-box.box-body.radius8.main-shadow,
    .article.page-article {
        margin-bottom: 60px !important; /* 与footer-tabbar高度匹配 */
        padding-bottom: 20px !important;
        max-width: calc(100vw - 20px) !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        position: relative !important;
        /* 确保article从顶部开始 */
        margin-top: 15px !important;
    }
    
    /* 主题相关容器重置 */
    .theme-box,
    .main-bg,
    .box-body {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* 移除可能的特殊间距元素 */
    .header-spacing,
    .top-spacing,
    .navbar-spacing {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* 移动端夜间主题支持 */
    /* 夜间模式下的容器背景适配 */
    body.dark-theme .zib-123pan-container-layout,
    body.theme-dark .zib-123pan-container-layout,
    .zib-theme-dark .zib-123pan-container-layout,
    .dark-mode .zib-123pan-container-layout,
    body[data-theme="dark"] .zib-123pan-container-layout,
    html[data-theme="dark"] .zib-123pan-container-layout,
    html.dark .zib-123pan-container-layout,
    body.dark .zib-123pan-container-layout {
        background-color: #1a1a1a !important;
        color: #f0f0f0 !important;
    }
    
    /* 夜间模式下的文章容器适配 */
    body.dark-theme .article.page-article,
    body.theme-dark .article.page-article,
    .zib-theme-dark .article.page-article,
    .dark-mode .article.page-article,
    body[data-theme="dark"] .article.page-article,
    html[data-theme="dark"] .article.page-article,
    html.dark .article.page-article,
    body.dark .article.page-article,
    body.dark-theme article.page-article,
    body.theme-dark article.page-article,
    .zib-theme-dark article.page-article,
    .dark-mode article.page-article,
    body[data-theme="dark"] article.page-article,
    html[data-theme="dark"] article.page-article,
    html.dark article.page-article,
    body.dark article.page-article {
        background-color: #1a1a1a !important;
        color: #f0f0f0 !important;
        border-color: #404040 !important;
    }
    
    /* 增强文章容器夜间模式样式优先级 */
    body.dark-theme .zib-123pan-container-layout .article.page-article,
    body.theme-dark .zib-123pan-container-layout .article.page-article,
    .zib-theme-dark .zib-123pan-container-layout .article.page-article,
    .dark-mode .zib-123pan-container-layout .article.page-article,
    body[data-theme="dark"] .zib-123pan-container-layout .article.page-article,
    html[data-theme="dark"] .zib-123pan-container-layout .article.page-article,
    html.dark .zib-123pan-container-layout .article.page-article,
    body.dark .zib-123pan-container-layout .article.page-article {
        background-color: #1a1a1a !important;
        color: #f0f0f0 !important;
        border-color: #404040 !important;
    }
    
    /* 夜间模式下的目录布局适配 */
    body.dark-theme .directory-layout,
    body.theme-dark .directory-layout,
    .zib-theme-dark .directory-layout,
    .dark-mode .directory-layout,
    body[data-theme="dark"] .directory-layout,
    html[data-theme="dark"] .directory-layout,
    html.dark .directory-layout,
    body.dark .directory-layout {
        background-color: #1a1a1a !important;
        color: #f0f0f0 !important;
    }
}