/* public/assets/css/pdf/pdf-pixel-diff.css */

.pdf-diff-wrapper { padding: 32px 16px; position: relative; }
.pdf-diff-header { text-align: center; margin-bottom: 32px; }
.pdf-diff-title { font-size: 2.2rem; font-weight: 800; color: var(--text-main); margin-bottom: 12px; }
.pdf-diff-subtitle { font-size: 1.05rem; color: var(--text-muted); max-width: 700px; margin: 0 auto; line-height: 1.6; }

.pdf-diff-workspace { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 360px 1fr; gap: 32px; align-items: start; }

.pdf-diff-controls { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 16px; padding: 24px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); display: flex; flex-direction: column; gap: 20px; position: sticky; top: 20px; }
.control-section h4 { margin: 0 0 12px 0; font-size: 1rem; color: var(--text-main); border-bottom: 2px solid rgba(244, 63, 94, 0.2); padding-bottom: 8px; display: inline-block; }

.file-drop-area { border: 2px dashed var(--border-color); border-radius: 10px; padding: 20px; text-align: center; cursor: pointer; transition: 0.3s; background: rgba(0,0,0,0.02); position: relative; overflow: hidden; }
.drop-a.has-file { border-color: #64748b; background: rgba(100, 116, 139, 0.1); }
.drop-b.has-file { border-color: #f43f5e; background: rgba(244, 63, 94, 0.1); }
.file-drop-area:hover { background: rgba(0,0,0,0.05); }

.drop-text { margin: 0; font-weight: 600; color: var(--text-main); font-size: 0.9rem; word-break: break-all; }
.file-input-hidden { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.tips-box { background: rgba(244, 63, 94, 0.05); border: 1px solid rgba(244, 63, 94, 0.15); border-radius: 8px; padding: 12px; font-size: 0.85rem; color: #be123c; line-height: 1.5; }
[data-theme="dark"] .tips-box { color: #fda4af; background: rgba(251, 113, 133, 0.05); }

.pdf-diff-btn-primary { background: #f43f5e; color: #fff; border: none; padding: 14px 20px; font-size: 1.05rem; font-weight: 800; border-radius: 12px; cursor: pointer; transition: 0.2s; box-shadow: 0 4px 10px rgba(244, 63, 94, 0.3); width: 100%; }
.pdf-diff-btn-primary:hover:not(:disabled) { background: #e11d48; transform: translateY(-2px); }
.pdf-diff-btn-primary:disabled { background: #94a3b8; cursor: not-allowed; box-shadow: none; opacity: 0.7; }

.pdf-diff-btn-success { background: #10b981; color: #fff; border: none; padding: 12px 20px; font-size: 1rem; font-weight: 800; border-radius: 12px; cursor: pointer; transition: 0.2s; box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3); width: 100%; }
.pdf-diff-btn-success:hover { background: #059669; transform: translateY(-2px); }

.pdf-diff-btn-warning { background: #64748b; color: #fff; border: none; padding: 12px 20px; font-size: 1rem; font-weight: 800; border-radius: 12px; cursor: pointer; transition: 0.2s; width: 100%; }
.pdf-diff-btn-warning:hover { background: #475569; transform: translateY(-2px); }

.pdf-diff-preview { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.status-box { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 12px; padding: 40px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(0,0,0,0.03); min-height: 300px; }
.status-text { font-size: 1.05rem; font-weight: 600; color: var(--text-main); margin-top: 12px; }
.loader-spinner { width: 32px; height: 32px; border: 4px solid var(--border-color); border-top-color: #f43f5e; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.status-icon { font-size: 3rem; animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes popIn { 0% { transform: scale(0); } 100% { transform: scale(1); } }
.progress-bar-wrap { width: 100%; max-width: 300px; height: 8px; background: var(--bg-body); border-radius: 4px; overflow: hidden; border: 1px solid var(--border-color); box-sizing: border-box; }
.progress-bar-fill { width: 0%; height: 100%; background: #f43f5e; transition: width 0.2s linear; }

/* Diff 画板控制区 */
.pdf-render-box { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 12px; padding: 24px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); text-align: center; overflow: hidden; display: flex; flex-direction: column; }

/* 🌟 沉浸式全屏状态的终极覆写 */
.pdf-render-box.diff-fullscreen-active { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999; margin: 0; border-radius: 0; padding: 16px; background: #0f172a; border: none; box-sizing: border-box; }
.diff-fullscreen-active .diff-pagination { background: #1e293b; border-color: #334155; }
.diff-fullscreen-active .page-indicator { color: #e2e8f0; }
.diff-fullscreen-active .page-indicator b { color: #fff; }
.diff-fullscreen-active .zoom-indicator { color: #e2e8f0; }
.diff-fullscreen-active .pdf-canvas-wrapper { max-height: none; flex: 1; border-color: #334155; }

/* ==========================================
   🌟 升级版 Diff 画板控制条 (三段式响应布局)
   ========================================== */
.diff-pagination { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    background: var(--bg-body); 
    padding: 12px 16px; 
    border-radius: 8px; 
    border: 1px solid var(--border-color); 
    flex-shrink: 0; 
    flex-wrap: wrap; /* 允许在极小屏幕下折叠换行 */
    gap: 16px;
}

.pagination-left, .pagination-center, .pagination-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 让中间翻页区绝对居中 */
.pagination-center {
    flex: 1;
    justify-content: center;
}

.pagination-right {
    justify-content: flex-end;
}

/* 在手机/窄屏模式下自动重排：中间翻页提到最上面，左右分布在下面 */
@media (max-width: 600px) {
    .pagination-center { order: -1; width: 100%; flex: none; }
    .pagination-left { flex: 1; justify-content: flex-start; }
    .pagination-right { flex: 1; justify-content: flex-end; }
}

.page-indicator { font-size: 0.95rem; color: var(--text-muted); white-space: nowrap; }
.page-indicator b { color: var(--text-main); font-weight: 800; }
.pdf-diff-btn-secondary { background: var(--bg-surface); color: var(--text-main); border: 1px solid var(--border-color); padding: 6px 16px; font-weight: 800; border-radius: 6px; cursor: pointer; transition: 0.2s; white-space: nowrap; }
.pdf-diff-btn-secondary:hover:not(:disabled) { border-color: #f43f5e; color: #f43f5e; }
.pdf-diff-btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }

.zoom-controls { display: flex; align-items: center; background: rgba(0,0,0,0.03); border-radius: 6px; padding: 4px; border: 1px solid var(--border-color); }
.pdf-diff-btn-icon { background: transparent; color: var(--text-main); border: none; font-size: 0.9rem; padding: 4px 8px; cursor: pointer; transition: 0.2s; border-radius: 4px; }
.pdf-diff-btn-icon:hover { background: #f43f5e; color: #fff; }
.zoom-indicator { font-size: 0.85rem; font-weight: 800; margin: 0 8px; width: 45px; text-align: center; color: var(--text-main); display: inline-block; }
.page-indicator { font-size: 0.95rem; color: var(--text-muted); }
.page-indicator b { color: var(--text-main); font-weight: 800; }
.pdf-diff-btn-secondary { background: var(--bg-surface); color: var(--text-main); border: 1px solid var(--border-color); padding: 6px 16px; font-weight: 800; border-radius: 6px; cursor: pointer; transition: 0.2s; }
.pdf-diff-btn-secondary:hover:not(:disabled) { border-color: #f43f5e; color: #f43f5e; }
.pdf-diff-btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }

.zoom-controls { display: flex; align-items: center; background: rgba(0,0,0,0.03); border-radius: 6px; padding: 4px; border: 1px solid var(--border-color); }
.pdf-diff-btn-icon { background: transparent; color: var(--text-main); border: none; font-size: 0.9rem; padding: 4px 8px; cursor: pointer; transition: 0.2s; border-radius: 4px; }
.pdf-diff-btn-icon:hover { background: #f43f5e; color: #fff; }
.zoom-indicator { font-size: 0.85rem; font-weight: 800; margin: 0 8px; width: 45px; text-align: center; color: var(--text-main); }

.pdf-canvas-wrapper { width: 100%; max-height: 800px; display: block; overflow: auto; background: #e2e8f0; border-radius: 8px; border: 1px solid #cbd5e1; position: relative; }
[data-theme="dark"] .pdf-canvas-wrapper { background: #0f172a; border-color: #334155; }
#diffCanvas { display: block; margin: 0 auto; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: width 0.2s ease-in-out; }

.tool-seo-article { width: 100%; }
.pdf-info-card { background: var(--bg-surface); padding: 24px 32px; border-radius: 16px; border: 1px solid var(--border-color); box-sizing: border-box; max-width: 1200px; margin: 0 auto; box-shadow: 0 4px 15px rgba(0,0,0,0.02); }
.pdf-info-card h3 { margin: 0 0 12px 0; color: var(--text-main); font-size: 1.25rem; }
.pdf-desc-text { color: var(--text-muted); font-size: 0.95rem; }

@media (max-width: 900px) {
    .pdf-diff-workspace { grid-template-columns: 1fr; }
    .diff-pagination { flex-wrap: wrap; gap: 10px; justify-content: center; }
}
/* ==========================================
   🌟 原生 Fullscreen API 的沉浸式状态重写
   ========================================== */
.pdf-render-box:fullscreen {
    background: #0f172a;
    padding: 24px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.pdf-render-box:-webkit-full-screen {
    background: #0f172a; padding: 24px; display: flex; flex-direction: column; overflow: hidden;
}

.pdf-render-box:fullscreen .diff-pagination,
.pdf-render-box:-webkit-full-screen .diff-pagination {
    background: #1e293b;
    border-color: #334155;
}

.pdf-render-box:fullscreen .page-indicator, 
.pdf-render-box:fullscreen .zoom-indicator,
.pdf-render-box:-webkit-full-screen .page-indicator,
.pdf-render-box:-webkit-full-screen .zoom-indicator {
    color: #e2e8f0;
}

.pdf-render-box:fullscreen .page-indicator b,
.pdf-render-box:-webkit-full-screen .page-indicator b {
    color: #fff;
}

.pdf-render-box:fullscreen .pdf-canvas-wrapper,
.pdf-render-box:-webkit-full-screen .pdf-canvas-wrapper {
    max-height: none; /* 解除最大高度限制 */
    flex: 1; /* 撑满剩余全屏空间 */
    border-color: #334155;
    background: #0f172a;
}

/* CSS Fallback 兼容不支持原生全屏的浏览器 */
.diff-fullscreen-active {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999; margin: 0; border-radius: 0; padding: 16px; background: #0f172a; border: none; box-sizing: border-box; display: flex; flex-direction: column;
}