/* 移动端专属底层重构方案 v9.1：Flexbox + 容器固定宽度居中 */

@media (max-width: 768px) {
    /* 1. 容器：使用固定宽度 + margin auto 实现绝对居中 */
    #photoGrid.active, 
    #videoGrid.active {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        align-content: flex-start !important;
        
        position: fixed !important;
        top: 60px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        bottom: 0 !important;
        width: 100% !important; /* 占据100%宽度，但内部有padding */
        max-width: 500px !important;
        height: calc(100% - 60px) !important;
        
        padding: 15px 1% 150px 3% !important; /* 调整 padding 以均衡间距 */
        margin: 0 !important;
        background-color: var(--bg-color) !important;
        overflow-y: scroll !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        z-index: 9998 !important; /* 修复：稍微调低一点，确保遮罩(100000)永远在上面 */
        box-sizing: border-box !important;
    }

    /* 2. 强制子项：使用 Flex 子项 + 精确百分比 */
    #photoGrid .media-item,
    #videoGrid .media-item {
        /* 关键：使用 flex-basis 替代 width，确保 Flexbox 精确计算 */
        flex: 0 0 auto !important;
        width: 32% !important; /* 每行3张，总计96%，剩余4%作为间距 */
        height: 0 !important;
        padding-bottom: 32% !important; /* 1:1正方形 */
        
        position: relative !important;
        margin: 0 2% 15px 0 !important; /* 右边距2%，底部15px */
        
        background-color: #222 !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
        box-sizing: border-box !important;
        
        /* 清除所有可能干扰的属性 */
        display: block !important;
        float: none !important;
        aspect-ratio: unset !important;
        vertical-align: baseline !important;
        line-height: 0 !important;
    }

    /* 3. 每行第3张照片清除右边距 */
    #photoGrid .media-item:nth-child(3n),
    #videoGrid .media-item:nth-child(3n) {
        margin-right: 0 !important;
    }

    /* 4. 图片内容填充 */
    #photoGrid .media-item img,
    #photoGrid .media-item video {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
        transform: translateZ(0) !important;
    }

    /* Safari修复：视频网格封面结构 - 移动端完整适配 */
    /* 容器：absolute定位填充父元素 */
    #videoGrid .media-item .video-thumb-container {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
    }
    
    /* 缩略图：absolute定位填充容器 */
    #videoGrid .media-item .video-thumbnail {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
        transform: translateZ(0) !important;
    }
    
    /* 播放按钮遮罩：absolute定位覆盖 */
    #videoGrid .media-item .video-overlay {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(0, 0, 0, 0.3) !important;
        pointer-events: none !important;
    }
    
    /* 播放图标：确保可见 */
    #videoGrid .media-item .video-play-icon {
        font-size: 48px !important;
        color: white !important;
        opacity: 0.9 !important;
    }

    /* 占位符：absolute定位填充（无缩略图时显示） */
    #videoGrid .media-item .video-thumb-placeholder {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        background-color: #222 !important;
    }

    /* 5. 加载提示：独占整行 */
    #photoGrid .load-tip,
    #videoGrid .load-tip {
        flex: 0 0 100% !important; /* 强制占据整行 */
        width: 100% !important;
        height: auto !important;
        padding: 40px 15px !important;
        margin: 0 !important;
        text-align: center !important;
        font-size: 14px !important;
        color: var(--text-light) !important;
        background: transparent !important;
        line-height: 2 !important;
    }
}