/* 覆盖样式冲突，统一左右两侧的显示效果 */

/* 删除整个容器的边框 */
.compressor {
    padding-top: 0 !important;
    margin-top: -20px !important;
    border-top: none !important;
    box-shadow: none !important;
}

.hero {
    border-bottom: none !important;
    box-shadow: none !important;
}

.hero::after {
    display: none !important;
}

.compressor::before {
    display: none !important;
}

.compressor-layout {
    display: grid !important;
    grid-template-areas: 
        "params"
        "upload"
        "preview-results" !important;
    grid-template-rows: auto auto auto !important;
    gap: 16px !important;
    width: 100% !important;
    justify-items: center !important;
    position: relative !important;
}

.top-panel {
    grid-area: params !important;
    width: 90% !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    margin-top: 0 !important;
}

/* 移除.compression-options的单独样式，恢复其默认样式 */

.upload-card {
    grid-area: upload !important;
    width: calc(90% - 32px) !important; /* 调整宽度以适应新的左边距 */
    margin-left: 16px !important; /* 将左边距从32px改为16px */
    margin-right: 16px!important;
    padding: 16px !important;
    box-sizing: border-box !important;
}

.preview-results-container {
    grid-area: preview-results !important;
    width: 90% !important;
}

/* 当上传卡片隐藏时调整布局 */
.upload-card.hidden + .preview-results-container {
    margin-top: -20px !important; /* 抵消gap的影响 */
}

/* 当上传卡片隐藏时，调整预览卡片与参数设置卡片的距离 */
html body .upload-card.hidden ~ .preview-results-container {
    margin-top: -30px !important; /* 增加负边距值 */
}

/* 覆盖原始样式中的边框 */
.result-item {
    position: relative !important;
    overflow: hidden !important;
    height: 50px !important;
    display: grid !important;
    grid-template-columns: 36px 2fr 1fr 80px 1fr 1fr auto !important;
    align-items: center !important;
    padding: 8px !important;
    margin-bottom: 8px !important;
    background: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    gap: 8px !important;
}

/* 占位内容 - 初始显示 */
.result-placeholder {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 36px 2fr 1fr 80px 1fr 1fr auto !important;
    align-items: center !important;
    width: 100% !important;
    gap: 8px !important;
}

/* 实际内容容器 - 初始隐藏 */
.result-actual {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: grid !important;
    grid-template-columns: 36px 2fr 1fr 80px 1fr 1fr auto !important;
    align-items: center !important;
    gap: 8px !important;
    opacity: 0 !important;
    transform: translateY(5px) !important;
    transition: 
        opacity 0.2s ease-out,
        transform 0.2s ease-out !important;
    pointer-events: none !important;
    padding: 8px !important;
}

/* 缩略图单独控制过渡 */
.result-actual img {
    opacity: 0 !important;
    transition: opacity 0.3s ease-out 0.1s !important;
}

.result-actual.loaded {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

.result-actual.loaded img {
    opacity: 1 !important;
}

/* 缩略图容器固定尺寸 */
.result-thumbnail {
    width: 36px !important;
    height: 36px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    position: relative !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #f5f5f5 !important;
}

/* 缩略图保持比例完整显示 */
.result-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
}

/* 预览卡片的缩略图也保持原始长宽比 */
#previewResults .result-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* 缩略图占位样式 */
.thumbnail-placeholder {
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) !important;
    background-size: 200% 100% !important;
    animation: skeleton-pulse 1.5s infinite !important;
}

/* 进度条样式 */
.progress-pending {
    height: 4px !important;
    background-color: #e0e0e0 !important;
    border-radius: 2px !important;
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
}

.progress-pending::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(144, 202, 249, 0.5), transparent) !important;
    animation: pulse 1.5s infinite !important;
}

.progress-done {
    height: 4px !important;
    background-color: #4caf50 !important;
    border-radius: 2px !important;
    width: 100% !important;
}

/* 动画定义 */
@keyframes pulse {
    0% { left: -100%; }
    100% { left: 100%; }
}

@keyframes skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* 修复徽章遮挡按钮的问题 */
.badge {
    position: absolute !important;
    top: -8px !important; /* 移到按钮上方 */
    right: -8px !important; /* 移到按钮右侧 */
    z-index: 9999 !important;
    transform: none !important;
    pointer-events: none !important;
    border: none !important;
    box-shadow: none !important;
    background-color: #ff3b30 !important;
    color: white !important;
    font-size: 10px !important; /* 减小字体 */
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 修复按钮上的徽章位置 */
.btn-primary .badge,
.action-btn .badge,
#downloadAllBtn .badge,
#startCompressBtn .badge {
    display: flex !important;
    position: absolute !important;
    top: -8px !important; /* 移到按钮上方 */
    right: -8px !important; /* 移到按钮右侧 */
    z-index: 9999 !important;
    transform: none !important;
    font-size: 12px !important; /* 减小字体 */
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    border-radius: 8px !important;
    line-height: 16px !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 确保按钮相对定位，形成正确的定位上下文 */
#downloadAllBtn,
#startCompressBtn {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    padding-right: 16px !important; /* 增加右侧内边距，为徽章腾出空间 */
}

/* 强制统一左右两侧容器的内边距，确保标题栏在同一高度 */
.preview-container, .results-container {
    padding-top: 0 !important;
    width: 100% !important;
    height: 550px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background-color: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.left-panel, .right-panel {
    padding-top: 0 !important;
    padding: 16px !important; /* 统一为16px内边距 */
    padding-right: 4px !important; /* 与间隙配合，总共有8px间距 */
    padding-left: 4px !important; /* 与间隙配合，总共有8px间距 */
}

/* 只为预览卡片添加左侧内边距 */
.preview-header {
    padding-left: 0 !important; /* 移除左侧内边距，使其与结果卡片一致 */
}

/* 最高优先级样式：强制两个标题栏在完全相同的高度，但只设置预览卡片的左侧内边距 */
html body .left-panel .preview-container .preview-header {
    padding-left: 0 !important; /* 移除左侧内边距，使其与结果卡片一致 */
}

/* 恢复统一预览卡片和结果卡片标题栏样式，移除全局的左侧内边距 */
.preview-header, .results-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-shrink: 0 !important;
    height: 40px !important; /* 确保两侧标题高度一致 */
    margin-bottom: 8px !important;
    position: relative !important;
    padding: 0 !important;
    z-index: 10 !important;
}

/* 恢复最高优先级样式，移除共享的左侧内边距 */
html body .left-panel .preview-container .preview-header,
html body .right-panel .results-container .results-header {
    height: 40px !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    /* 移除共享的左侧内边距 */
    padding-bottom: 4px !important;
    position: relative !important;
    top: 0 !important;
}

/* 确保按钮组样式一致 */
.preview-header .button-group,
.results-header .header-right {
    margin-left: auto !important;
    margin-right: 20px !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

/* 确保标题文本样式一致 */
.preview-header h3, 
.results-header h3 {
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important; /* 确保文本垂直居中 */
    line-height: 1 !important; /* 重置行高 */
    padding-left: 0 !important; /* 确保两侧标题文本都没有左内边距 */
}

/* 确保按钮样式一致 */
.preview-header .button-group button,
.results-header .header-right button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 28px !important;
}

/* 调整按钮组样式，确保垂直居中 */
.preview-header .button-group {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

/* 确保按钮垂直居中 */
.preview-header .button-group button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 重置结果区域内容区的高度，确保内容显示正确 */
#imageResults {
    height: calc(100% - 52px) !important; /* 40px标题高度 + 12px上下间距 */
    padding: 0 !important;
    margin: 0 !important;
    overflow-y: auto !important;
    flex: 1 !important;
}

/* 重置左侧预览区域样式，使其与右侧保持一致 */
#previewResults .result-item {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 36px 2fr 1fr auto !important;
    align-items: center !important;
    padding: 8px !important;
    background-color: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    margin-bottom: 8px !important;
    gap: 4px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    transition: all 0.2s ease !important;
    border: none !important;
}

#previewResults .result-item:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-1px) !important;
}

/* 调整左侧缩略图大小，与右侧一致 */
#previewResults .result-thumbnail {
    width: 32px !important;
    height: 32px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
}

/* 添加预览卡片中format-badge的样式，使其与结果卡片对齐 */
#previewResults .format-badge {
    font-size: 10px !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
    text-align: center !important;
    font-weight: 600 !important;
    background-color: #f0f0f0 !important;
    color: #333 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 20px !important; /* 设置一个合适的高度 */
}

/* 调整结果卡片的样式，使每行与左侧预览卡片一致 */
#imageResults .result-item {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 36px 2fr 1fr 2fr 1fr 1fr auto !important;
    align-items: center !important;
    padding: 8px !important;
    background-color: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    margin-bottom: 8px !important;
    gap: 8px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    transition: all 0.2s ease !important;
    border: none !important;
}

#imageResults .result-item:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-1px) !important;
}

#imageResults .result-thumbnail img,
#imageResults .result-filename {
    display: flex !important;
    align-items: center !important;
    height: 32px !important;
}

/* 调整结果卡片中format-badge的高度，与预览卡片一致 */
#imageResults .format-badge {
    justify-content: center !important;
    line-height: 1 !important;
    height: 20px !important; /* 降低高度，与预览卡片一致 */
    display: inline-flex !important;
    align-items: center !important;
}

/* 调整底部面板中左右两栏之间的间隙 */
.bottom-panel {
    gap: 8px !important; /* 完全移除间隙 */
}

/* 调整上传区域和结果区域的宽度比例和外边距 */
.left-panel {
    flex: 11 !important;
    padding: 16px !important; /* 统一为16px内边距 */
    padding-right: 4px !important; /* 与间隙配合，总共有8px间距 */
    margin-left: 0 !important; /* 移除左侧外边距 */
}

.right-panel {
    flex: 19 !important;
    padding: 16px !important; /* 统一为16px内边距 */
    padding-left: 4px !important; /* 与间隙配合，总共有8px间距 */
    margin-right: 0 !important; /* 移除右侧外边距 */
}

/* 确保最高优先级的选择器应用外边距 */
html body .bottom-panel .left-panel {
    margin-left: 0 !important; /* 移除左侧外边距 */
}

html body .bottom-panel .right-panel {
    margin-right: 0 !important; /* 移除右侧外边距 */
}

/* 调整右侧结果区域的所有元素，确保垂直居中 */
#imageResults .result-item > * {
    display: flex !important;
    align-items: center !important;
}

/* 调整进度条容器 */
#imageResults .result-progress-bar {
    width: 120px !important;  /* 与图片名称宽度一致 */
    margin: 0 8px !important;
    height: 6px !important;
    background-color: #f5f5f5 !important;
    border-radius: 3px !important;
    position: relative !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;  /* 防止被压缩 */
    flex-grow: 0 !important;    /* 防止被拉伸 */
    min-width: 120px !important;  /* 确保最小宽度 */
}

#imageResults .result-progress-bar .progress-fill {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    background-color: #4caf50 !important;
    border-radius: 3px !important;
    transition: width 0.3s ease !important;
}

/* 调整百分比变化显示 */
#imageResults .result-reduction,
#imageResults .result-increase {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

/* 统一左右两侧图片项目的行高和间距 */
#previewResults .result-item,
#imageResults .result-item {
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 4px 8px !important;
    gap: 4px !important;
}

/* 确保所有可能包含徽章的容器不会裁剪溢出内容 */
.preview-header .button-group,
.results-header .header-right,
.download-buttons,
.action-btn,
.btn-primary,
.btn-secondary {
    position: relative !important;
    overflow: visible !important;
}

/* 确保预览区域能显示与右侧相同数量的条目 */
#previewResults {
    height: calc(100% - 52px) !important; /* 40px标题高度 + 12px上下间距 */
    padding: 0 !important;
    margin: 0 !important;
    overflow-y: auto !important;
    flex: 1 !important;
}

#imageResults .result-size, 
#imageResults .result-compressed-size {
    white-space: nowrap !important;
    display: inline-block !important;
    min-width: 70px !important;
    text-align: right !important;  /* 右对齐文本 */
}

/* 调整删除按钮的右边距，与下载按钮保持一致 */
.delete-btn {
    margin-right: 0 !important; /* 移除右边距 */
    padding-right: 0 !important; /* 移除右内边距 */
    right: 0 !important; /* 确保按钮贴近右边缘 */
    position: relative !important; /* 使right属性生效 */
}

/* 调整预览容器，使其与结果容器的内边距保持一致 */
.preview-container {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: #fafafa;
    overflow: hidden;
}

/* 设置预览卡片样式与结果卡片一致 */
.preview-card {
    position: relative;
    margin-bottom: 12px;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.2s ease;
}

.preview-card:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* 优化预览结果区域 */
#previewResults {
    height: calc(100% - 52px); /* 40px标题高度 + 12px上下间距 */
    overflow-y: auto;
    flex: 1;
    padding: 0;
    margin: 0;
}

/* 优化预览区头部样式 */
.preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    height: 36px;
    margin-bottom: 4px;
    position: relative;
    padding: 0;
    z-index: 10;
}

/* 图片预览区域样式优化 */
.image-preview {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    display: block;
}

/* 调整图片结果区域内边距，与结果卡片保持一致 */
.image-results {
    padding: 8px 16px !important;
}

/* 统一缩略图样式 */
.result-thumbnail {
    width: 32px !important;
    height: 32px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #f5f5f5 !important;
}

.result-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
}

/* 统一文件名样式 */
.result-filename {
    font-weight: 500 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    min-width: 100px !important;  /* 增加最小宽度 */
    flex: 1 !important;           /* 允许占用剩余空间 */
}

/* 统一格式标签样式 */
.format-badge {
    font-size: 10px !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
    text-align: center !important;
    font-weight: 600 !important;
    background-color: #f0f0f0 !important;
    color: #333 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    height: 18px !important;
}

/* 统一删除和下载按钮样式 */
.delete-btn, .download-btn {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    background: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.delete-btn:hover {
    background-color: rgba(255, 59, 48, 0.1) !important;
}

.download-btn:hover {
    background-color: rgba(0, 113, 227, 0.1) !important;
}

/* 统一头部样式 */
.preview-header, .results-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-shrink: 0 !important;
    height: 40px !important; /* 确保两侧标题高度一致 */
    margin-bottom: 8px !important;
    position: relative !important;
    padding: 0 !important;
    z-index: 10 !important;
}

/* 修复头部按钮的垂直居中问题 */
.preview-header .button-group {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 100% !important;
}

.preview-header .button-group .action-btn {
    height: 28px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    border-radius: 6px !important;
    line-height: 1 !important;
}

/* 调整标题文本样式 */
.preview-header h3, .results-header h3 {
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important; /* 确保文本垂直居中 */
    line-height: 1 !important; /* 重置行高 */
    padding-left: 0 !important; /* 确保两侧标题文本都没有左内边距 */
}

/* 标准化标题右侧按钮容器 */
.preview-header .button-group, 
.results-header .header-right,
.results-header .download-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 40px !important; /* 与标题栏高度保持一致 */
    margin: 0 !important;
    padding: 0 !important;
}

/* 统一所有按钮样式 - 包括预览区和结果区 */
.preview-header .button-group .action-btn,
.preview-header .button-group .btn,
.results-header .header-right .btn,
.results-header .download-buttons .btn {
    height: 28px !important; /* 统一按钮高度 */
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    border-radius: 6px !important;
    line-height: 1 !important;
    margin: 0 !important; /* 清除外边距 */
    position: relative !important; /* 为徽章提供定位上下文 */
}

/* 特别处理开始压缩和下载按钮 */
#startCompressBtn,
#downloadAllBtn,
#downloadZipBtn {
    height: 28px !important; /* 减小高度 */
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    padding: 0 12px !important;
    position: relative !important;
    margin: 0 !important;
}

/* 重新配置徽章位置 */
.badge, 
#downloadBadge, 
#compressBadge {
    position: absolute !important;
    top: -6px !important; /* 调整上方位置 */
    right: -6px !important; /* 调整右侧位置 */
    min-width: 16px !important;
    height: 16px !important;
    font-size: 10px !important;
    padding: 0 4px !important;
    line-height: 16px !important;
    border-radius: 8px !important;
}

/* 统一预览和结果区域的滚动区域 */
#previewResults, #imageResults {
    height: calc(100% - 48px) !important; /* 36px标题高度 + 12px上下间距 */
    padding: 4px !important;
    margin: 0 !important;
    overflow-y: auto !important;
    flex: 1 !important;
}

/* 新增：隐藏新版UI中的预览区域和结果区域，直到添加图片 */
body:not(.has-images) .preview-header,
body:not(.has-images) #previewResults,
body:not(.has-images) #results {
    display: none !important;
}

/* 确保上传消息区域正确显示 */
body:not(.has-images) .upload-message {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
}

/* 确保在上传图片后设置正确的标志 */
body.has-images .upload-message {
    display: none !important;
}

/* 覆盖不管有没有图片都显示标题栏的样式 */
.preview-header,
#results .results-header {
    display: none !important;
}

body.has-images .preview-header,
body.has-images #results .results-header {
    display: flex !important;
}

/* 新增：状态切换样式 */
.upload-card {
    width: 90%;
    margin: 0 auto;
    min-height: 150px;
    background: #fff;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

.upload-card:hover {
    border-color: var(--primary-color);
    background-color: rgba(0, 113, 227, 0.02);
}

.upload-card.hidden {
    opacity: 0;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important; /* 隐藏时移除内边距 */
    overflow: hidden !important;
    border: none !important;
    display: none !important; /* 彻底不显示 */
    position: absolute !important; /* 移出文档流 */
    pointer-events: none !important; /* 确保不接收鼠标事件 */
}

.preview-results-container {
    display: none;
    width: 90%;
    margin: 0 auto;
}

.preview-results-container.visible {
    display: block !important;
    animation: fadeIn 0.3s ease forwards;
    margin-top: 0 !important; /* 确保没有上边距 */
    /* 使用CSS网格定位，确保准确位置 */
    position: relative !important;
    z-index: 5 !important;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 确保初始时结果容器和预览标题栏不显示 */
.preview-container .preview-header,
#results {
    display: block !important;
}

/* 优化底部面板内部边距 */
.bottom-panel {
    gap: 8px !important;
}

/* 修复预览结果区域的样式 */
#previewResults, 
#imageResults {
    display: block !important;
}

/* 状态切换时的平滑过渡 */
.upload-card, 
.preview-results-container {
    transition: opacity 0.3s ease, height 0.3s ease;
}

/* 确保预览结果容器正确显示即使在没有图片的情况下 */
body.has-images .preview-results-container {
    display: block;
}

/* 修复预览标题栏在没有图片时的显示问题 */
.preview-header {
    display: flex !important;
}

/* 确保底部面板比例正确 */
.preview-results-container .bottom-panel {
    display: flex !important; 
    flex-direction: row !important;
    width: 100%;
    margin: 0 auto;
    margin-top: 0 !important;
}

/* 添加更平滑的过渡效果 */
.preview-results-container,
.upload-card {
    transition: opacity 0.3s ease-in-out, 
                height 0.3s ease-in-out, 
                margin 0.3s ease-in-out, 
                padding 0.3s ease-in-out;
}

/* 确保左右面板内容在上传卡片隐藏后立即显示 */
.left-panel .preview-container,
.right-panel .results-container {
    height: 100%;
}

/* 解决红框区域问题 */
.upload-card.hidden ~ * {
    margin-top: 0 !important;
}

/* 改进可见性控制 */
.upload-card:not(.hidden) {
    display: flex !important;
}

.preview-results-container:not(.visible) {
    display: none !important;
}

/* 确保预览和结果卡片高度正确 */
.preview-container, 
.results-container {
    height: 550px !important;
}

/* 防止预览结果容器显示不正确 */
.preview-results-container.visible .bottom-panel {
    display: flex !important; 
    flex-direction: row !important;
}

/* 进度文本在下载按钮旁边的样式 */
.download-buttons .progress-text {
    display: inline-block;
    margin-left: 10px;
    font-size: 14px;
    color: #4a90e2;
    vertical-align: middle;
}

/* 添加骨架屏样式 */
.skeleton-pulse {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-pulse 1.5s infinite;
    min-height: 32px !important;
    min-width: 32px !important;
}

.thumbnail-placeholder {
    width: 100% !important;
    height: 100% !important;
    border-radius: 4px !important;
}

.skeleton-text {
    color: #aaa !important;
    font-style: italic !important;
}

.percentage-change {
    font-size: 13px !important;
}

.skeleton-badge {
    background-color: #e0e0e0 !important;
    color: #999 !important;
}

@keyframes skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* 简化的两状态进度条 */
.progress-pending {
    height: 4px !important;
    background-color: #e0e0e0 !important;
    border-radius: 2px !important;
    position: relative !important;
    overflow: hidden !important;
}

.progress-pending::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 30%;
    background-color: #b0b0b0 !important;
    border-radius: 2px !important;
    animation: pulse-opacity 2s infinite !important;
}

.progress-done {
    height: 4px !important;
    background-color: #4caf50 !important;
    border-radius: 2px !important;
}

@keyframes pulse-opacity {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

/* 禁用状态的下载按钮 */
.download-btn[disabled] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

#imageResults .result-filename {
    min-width: 120px !important;  /* 增加结果区域名称的最小宽度 */
    flex-grow: 1 !important;      /* 允许增长 */
    flex-shrink: 1 !important;    /* 允许收缩 */
}

/* 预览加载指示器 */
.preview-loading-indicator {
    padding: 12px !important;
    text-align: center !important;
    color: #666 !important;
    font-size: 14px !important;
    background-color: rgba(0, 0, 0, 0.05) !important;
    border-radius: 4px !important;
    margin: 8px !important;
}

/* 错误消息样式 */
.error-message {
    padding: 12px !important;
    text-align: center !important;
    color: #d32f2f !important;
    font-size: 14px !important;
    background-color: rgba(211, 47, 47, 0.1) !important;
    border-radius: 4px !important;
    margin: 8px !important;
}