/* ===================================================== */
/* ========= ArtSee 阅读器外框 (高度修复版) ============ */
/* ===================================================== */

/* 仅在桌面端生效 */
@media (min-width: 769px) {

    /* 1. 网页背景色 (非全屏时) */
    html body:not(.fullscreen-active) {
        background-color: #f0f2f5 !important; 
    }

    /* 2. 外框容器样式 */
    html body:not(.fullscreen-active) .main-viewer-frame {
        /* 布局 */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        
        /* 定位 */
        position: relative !important;
        z-index: 5 !important;
        
        /* 宽度 */
        width: 96% !important; 
        max-width: 1320px !important; 
        
        /* 高度 */
        min-height: 850px !important; 
        
        /* 顶部下移 */
        margin: 100px auto 0px !important; 
        
        padding-bottom: 40px !important;
        
        /* 视觉装饰 */
        background-color: #ffffff !important;
        border-radius: 16px !important;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08) !important;
        border: 1px solid rgba(0,0,0,0.03) !important;

        /* 缩放控制 */
        transform: scale(var(--scale-desktop, 0.76)) !important;
        transform-origin: top center !important;
        
        /* 底部贴合计算 */
        margin-bottom: calc(var(--margin-adjust-desktop) - 110px) !important;
    }

    /* 3. 内部组件重置 (桌面端变透明，融入大框) */
    html body:not(.fullscreen-active) .main-viewer-frame > div {
        transform: none !important;
        margin: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ========================================================= */
    /* ========= 【关键修复】内容高度恢复 ====================== */
    /* ========================================================= */
    
    /* 修复1：强制恢复内容包装器的原始高度 (1100px) */
    /* 解决 book.css 中预先缩小高度导致内容被截断的问题 */
    html body:not(.fullscreen-active) .main-viewer-frame .ebook-content-wrapper {
        height: var(--base-height-desktop) !important; /* 强制恢复到1100px */
        min-height: var(--base-height-desktop) !important;
    }

    /* 修复2：针对单页模式，强制扩大滚动区域 */
    /* 解决 JS 将高度锁定在 620px 导致可视窗口太小的问题 */
    html body:not(.fullscreen-active) .main-viewer-frame .single-page-mode .ebook-pages {
        height: 100% !important; /* 填满父容器 (1100px) */
        min-height: 800px !important;
    }

    /* ========================================================= */

    /* 4. 细节调整 */
    html body:not(.fullscreen-active) .main-viewer-frame #ebook-container {
        padding-top: 40px !important;
    }
    
    html body:not(.fullscreen-active) .main-viewer-frame .control-frame {
        border-top: 1px dashed #eee !important;
        padding: 25px 0 !important;
        margin-top: 20px !important;
        width: 94% !important; 
    }
    
    html body:not(.fullscreen-active) .main-viewer-frame .ebook-info {
        padding: 10px 0 !important;
        width: 94% !important;
    }
    
    /* 5. 底部区域层级修复 (防止被背景遮挡) */
    #recommendations-container {
        position: relative !important;
        z-index: 10 !important;
        background-color: #ffffff !important;
        box-shadow: 0 -5px 20px rgba(0,0,0,0.02) !important;
    }

    #footer-container, footer, .footer {
        position: relative !important;
        z-index: 10 !important;
        background-color: #1a1a1a !important; 
        opacity: 1 !important;
    }

    /* 6. 全屏模式处理 */
    html body.fullscreen-active .main-viewer-frame {
        display: contents !important;
    }
    
    html body.fullscreen-active {
        background-color: #1a1a1a !important;
    }
}

/* ===================================================== */
/* ========= 移动端样式修复 (关键部分) ================= */
/* ===================================================== */
@media (max-width: 768px) {
    /* 移动端取消桌面端的大外框 */
    .main-viewer-frame {
        display: contents;
    }

    /* 【核心修复】强制恢复移动端三个组件的白色背景 */
    /* 必须加 !important 以覆盖可能存在的全局透明设置 */
    #ebook-container, 
    .control-frame, 
    .ebook-info {
        background-color: #ffffff !important;
        background: #ffffff !important;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05) !important; /* 加回阴影 */
        border-radius: 8px !important; /* 确保圆角 */
    }

    /* 底部区域保持正常 */
    #recommendations-container, #footer-container {
        position: relative !important;
        z-index: 10 !important;
        background-color: #fff !important;
    }
    #footer-container {
        background-color: #1a1a1a !important;
    }
}