/* 主CSS文件 - 统一管理所有CSS模块 */

/* 导入所有CSS模块 —— 每个 @import 必须带 ?v=,否则会被 Cloudflare 的 immutable 缓存锁死。
   修改任一子文件后:① 同步 bump 该子文件的 ?v=;② bump index.html 里 main.css 的 ?v=,
   让浏览器重新下载 main.css 才能看到新的 @import URL。 */
/* 项目特定的样式覆盖 */
/* 在这里可以添加项目特定的样式覆盖 */

/* ===== 历史记录瀑布流布局 ===== */
.history-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    /* 瀑布流：每行 1px，卡片用 grid-row-end: span N 按真实宽高比占高（JS 计算） */
    grid-auto-rows: 1px;
}

@media (max-width: 1024px) {
    .history-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .history-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .history-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

.history-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: rgb(var(--white-rgb) / 0.05);
}

.history-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgb(var(--black-rgb) / 0.3);
}

.history-card img {
    width: 100%;
    height: 100%;
    display: block;
    /* 卡片高度由 grid 行跨度（=真实宽高比）决定，cover 不裁切；比例未知时按图片自适应 */
    object-fit: cover;
    background: rgb(var(--white-rgb) / 0.03);
}

.history-card .card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 8px 8px;
    background: linear-gradient(transparent, rgb(var(--black-rgb) / 0.7));
    opacity: 0;
    transition: opacity 0.2s ease;
}

.history-card:hover .card-overlay {
    opacity: 1;
}

.history-card .card-badges {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
}

.history-card .card-actions {
    position: absolute;
    top: 6px;
    left: 6px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.history-card:hover .card-actions {
    opacity: 1;
}

.history-card .card-prompt {
    font-size: 11px;
    color: white;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 多图指示器 */
.history-card .multi-image-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    background: rgb(var(--black-rgb) / 0.6);
    color: white;
    font-size: var(--text-2xs);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    pointer-events: none;
}

.history-card:hover .multi-image-badge {
    opacity: 0;
}

/* 分辨率角标（左下角常驻；1K 低调 / 2K 主色 / 4K 高亮） */
.history-card .resolution-badge {
    position: absolute;
    bottom: 6px;
    left: 6px;
    z-index: 3;
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    padding: 3px 6px;
    border-radius: var(--radius-sm);
    color: white;
    pointer-events: none;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.history-card .resolution-badge.res-1k {
    background: rgb(var(--black-rgb) / 0.55);
    color: rgb(var(--white-rgb) / 0.78);
    font-weight: 600;
}

.history-card .resolution-badge.res-2k {
    background: rgb(var(--brand-primary-rgb) / 0.85);
    box-shadow: 0 1px 4px rgb(var(--black-rgb) / 0.3);
}

.history-card .resolution-badge.res-4k {
    background: linear-gradient(135deg, rgb(var(--amber-400-rgb) / 0.95), rgb(var(--brand-primary-rgb) / 0.95));
    box-shadow: 0 1px 6px rgb(var(--amber-400-rgb) / 0.35);
}

/* 占位图（高度由卡片 aspect-ratio / grid 行跨度撑起） */
.history-card .placeholder-img {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgb(var(--white-rgb) / 0.05);
    color: rgb(var(--white-rgb) / 0.3);
    font-size: 2rem;
    padding: 8px;
    text-align: center;
}

/* 过期卡片样式 */
.history-card .placeholder-img.placeholder-expired {
    background: linear-gradient(135deg, rgb(var(--color-error-rgb) / 0.18), rgb(var(--orange-900-rgb) / 0.25));
    border: 1px dashed rgb(var(--color-error-rgb) / 0.5);
    border-radius: var(--radius-lg);
    color: rgb(var(--red-300-rgb) / 0.95);
}
.history-card .placeholder-img.placeholder-expired i {
    font-size: 1.75rem;
    color: rgb(var(--red-400-rgb) / 0.95);
}
.history-card .placeholder-img .placeholder-title {
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.2;
    color: rgb(var(--red-100-rgb) / 0.95);
}
.history-card .placeholder-img .placeholder-subtitle {
    font-size: var(--text-2xs);
    line-height: 1.25;
    color: rgb(var(--red-300-rgb) / 0.75);
    max-width: 90%;
}

/* 云端保留期警告横幅 */
.cloud-retention-warning {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(90deg, rgb(var(--color-warning-rgb) / 0.2), rgb(var(--orange-600-rgb) / 0.18));
    border: 1px solid rgb(var(--amber-400-rgb) / 0.4);
    border-left: 3px solid var(--amber-400);
    color: rgb(var(--amber-100-rgb) / 0.95);
    font-size: var(--text-xs);
    line-height: 1.4;
    padding: 10px 12px;
    border-radius: var(--radius);
    margin-bottom: 10px;
}
.cloud-retention-warning i {
    color: var(--amber-400);
    font-size: var(--text-sm);
    flex-shrink: 0;
}

/* 详情弹窗 */
.history-detail-modal {
    position: fixed;
    inset: 0;
    background: rgb(var(--black-rgb) / 0.7);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.history-detail-card {
    background: var(--surface-dark);
    border-radius: var(--radius-xl);
    max-width: 480px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
}

/* === 左右布局 variant：信息栏 + 大图铺满整个视口 === */
/* 修饰类：当弹窗用于 wide variant 时，撤掉 .history-detail-modal 的 16px padding 让卡片真·全屏 */
.history-detail-modal.modal-fullbleed { padding: 0; }

.history-detail-card.history-detail-card-wide {
    position: relative;
    max-width: none;
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;          /* 全屏铺满下不需要圆角 */
    display: flex;
    flex-direction: row-reverse;  /* 大图在左、信息+操作栏在右 */
    overflow: hidden;          /* 由 .detail-info-scroll 自己滚 */
    padding: 0;
}

.history-detail-card.history-detail-card-wide .detail-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgb(var(--black-rgb) / 0.5);
    color: var(--white);
    transition: background 0.15s ease;
}
.history-detail-card.history-detail-card-wide .detail-close-btn:hover {
    background: rgb(var(--black-rgb) / 0.75);
}

/* 右侧：信息栏(分隔线在其左缘,分隔左图与右信息) */
.history-detail-card.history-detail-card-wide .detail-info-pane {
    width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-left: 1px solid rgb(var(--white-rgb) / 0.08);
    background: var(--surface-dark);
}
.history-detail-card.history-detail-card-wide .detail-info-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.history-detail-card.history-detail-card-wide .detail-info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-right: 32px;       /* 给右上角关闭按钮让位,避免压住「复制提示词」 */
}
.history-detail-card.history-detail-card-wide .detail-info-title {
    color: var(--white);
    font-size: var(--text-base);
    font-weight: 600;
}
.history-detail-card.history-detail-card-wide .detail-copy-prompt-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    background: rgb(var(--white-rgb) / 0.1);
    color: var(--content);
    font-size: var(--text-xs);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: filter .15s ease, background .15s ease;
}
.history-detail-card.history-detail-card-wide .detail-copy-prompt-btn:hover {
    background: rgb(var(--white-rgb) / 0.18);
    filter: brightness(1.1);
}
.history-detail-card.history-detail-card-wide .detail-prompt {
    color: var(--white);
    font-size: var(--text-sm);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
}
.history-detail-card.history-detail-card-wide .detail-meta-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.history-detail-card.history-detail-card-wide .detail-badge {
    background: rgb(var(--white-rgb) / 0.1);
    color: var(--content);
    font-size: var(--text-xs);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}
/* 云端「已存储」状态的强语义徽章：绿底绿字，让用户一眼确认已上传成功 */
.history-detail-card.history-detail-card-wide .detail-badge.detail-badge-success {
    background: var(--success-soft);
    color: var(--color-success);
    border: 1px solid rgb(var(--color-success-rgb) / 0.35);
}
/* 本地「已缓存」徽章：蓝底蓝字，与云端绿色对仗（蓝=本地、绿=云端）*/
.history-detail-card.history-detail-card-wide .detail-badge.detail-badge-info {
    background: var(--info-soft);
    color: var(--color-info);
    border: 1px solid rgb(var(--color-info-rgb) / 0.35);
}
/* 可点徽章（如「云端: 上传失败」点击 = 重新上传） */
.history-detail-card.history-detail-card-wide .detail-badge.detail-badge-actionable {
    cursor: pointer;
    transition: filter 0.15s ease, background 0.15s ease;
    user-select: none;
}
.history-detail-card.history-detail-card-wide .detail-badge.detail-badge-actionable:hover {
    filter: brightness(1.25);
}
.history-detail-card.history-detail-card-wide .detail-badge.detail-badge-actionable:active {
    transform: translateY(1px);
}
/* 可点提示块（网络受限提示块点击 = 网络选项） */
.history-detail-card.history-detail-card-wide .detail-network-note[data-action] {
    cursor: pointer;
    transition: background 0.15s ease;
    user-select: none;
}
.history-detail-card.history-detail-card-wide .detail-network-note[data-action]:hover {
    background: rgb(var(--color-warning-strong-rgb) / 0.18);
}
.history-detail-card.history-detail-card-wide .detail-date {
    color: var(--muted);
    font-size: var(--text-xs);
    margin: 0;
}
.history-detail-card.history-detail-card-wide .detail-comparison-note {
    background: var(--brand-soft);
    color: var(--brand-primary);
    border-radius: var(--radius);
    padding: 12px;
    font-size: var(--text-xs);
}
.history-detail-card.history-detail-card-wide .detail-network-note {
    background: rgb(var(--color-warning-strong-rgb) / 0.1);
    color: var(--color-warning-strong);
    border-radius: var(--radius);
    padding: 12px;
    font-size: var(--text-xs);
}

.history-detail-card.history-detail-card-wide .detail-action-bar {
    padding: 12px 16px 16px;
    border-top: 1px solid rgb(var(--white-rgb) / 0.08);
    display: grid;
    gap: 8px;
}
.history-detail-card.history-detail-card-wide .detail-btn {
    width: 100%;
    padding: 8px 12px;
    border-radius: var(--radius);
    font-size: var(--text-sm);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: background 0.15s ease, transform 0.05s ease;
}
.history-detail-card.history-detail-card-wide .detail-btn:active { transform: translateY(1px); }
.history-detail-card.history-detail-card-wide .detail-btn-primary { background: var(--gradient-brand); }
.history-detail-card.history-detail-card-wide .detail-btn-primary:hover { background: var(--gradient-brand-hover); }
.history-detail-card.history-detail-card-wide .detail-btn-warn { background: var(--color-warning-strong); }
.history-detail-card.history-detail-card-wide .detail-btn-warn:hover { background: var(--color-warning-deep); }
.history-detail-card.history-detail-card-wide .detail-btn-secondary { background: var(--surface-3); border: 1px solid var(--line); }
.history-detail-card.history-detail-card-wide .detail-btn-secondary:hover { filter: brightness(1.12); }
.history-detail-card.history-detail-card-wide .detail-btn-danger { background: var(--danger-soft); color: var(--color-error); }
.history-detail-card.history-detail-card-wide .detail-btn-danger:hover { background: rgb(var(--color-error-rgb) / 0.2); }

/* 「添加参考图」→「去首页编辑」就地形变：颜色由上面的 background transition 平滑过渡，
   再叠一个一次性的 pop 动效让形变有反馈（添加成功瞬间触发，动画结束后类名移除） */
.history-detail-card.history-detail-card-wide .detail-ref-btn { transition: background 0.25s ease, border-color 0.25s ease, transform 0.05s ease; }
.history-detail-card.history-detail-card-wide .detail-ref-btn.detail-ref-morph { animation: detailRefMorph 0.32s ease; }
@keyframes detailRefMorph {
    0%   { transform: scale(1); }
    45%  { transform: scale(0.94); }
    100% { transform: scale(1); }
}

/* 右侧：大图区 */
.history-detail-card.history-detail-card-wide .detail-image-pane {
    flex: 1;
    min-width: 0;              /* 关键：让 flex item 可以收缩到容器内 */
    position: relative;
    background: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
}
.history-detail-card.history-detail-card-wide .detail-image-stage {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
}
.history-detail-card.history-detail-card-wide .detail-image-stage img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    cursor: zoom-in;           /* 提示：点图可全屏 */
}
.history-detail-card.history-detail-card-wide .detail-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgb(var(--black-rgb) / 0.5);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
    transition: background 0.15s ease;
}
.history-detail-card.history-detail-card-wide .detail-nav-btn:hover {
    background: rgb(var(--black-rgb) / 0.8);
}
.history-detail-card.history-detail-card-wide .detail-prev { left: 16px; }
.history-detail-card.history-detail-card-wide .detail-next { right: 16px; }
.history-detail-card.history-detail-card-wide .detail-counter {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: rgb(var(--black-rgb) / 0.6);
    color: var(--white);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: var(--text-xs);
}

/* 窄屏（< 768px）回退为上下布局 */
@media (max-width: 768px) {
    .history-detail-card.history-detail-card-wide {
        flex-direction: column;
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }
    .history-detail-card.history-detail-card-wide .detail-image-pane {
        flex: 1;
        min-height: 50vh;
    }
    .history-detail-card.history-detail-card-wide .detail-info-pane {
        width: 100%;
        border-left: none;
        border-top: 1px solid rgb(var(--white-rgb) / 0.08);
        max-height: 50vh;
    }
    .history-detail-card.history-detail-card-wide .detail-nav-btn {
        width: 40px;
        height: 40px;
    }
}

/* 角标统一为正圆:固定等宽高 + flex 居中,避免按非方形图标收缩成椭圆 */
.upload-indicator,
.local-reauth-indicator,
.local-archive-indicator {
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* R2 上传状态指示器样式 */
.upload-indicator {
    transition: all 0.3s ease;
    z-index: 10;
}

.upload-indicator.uploading {
    animation: pulse 1.5s infinite;
}

.upload-indicator.uploaded {
    background-color: rgb(var(--state-green-rgb) / 0.7) !important;
}

.upload-indicator.uploaded i {
    animation: none !important;
    color: white;
}

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

/* 本地归档「重新授权」角标：权限失效时显示，需高于上传指示器并轻微脉冲提示 */
.local-reauth-indicator {
    z-index: 11;
    animation: pulse 1.8s infinite;
}

/* ===== 生成阶段指示器样式 ===== */
.stage-circle {
    background: rgb(var(--white-rgb) / 0.15);
    transition: all 0.4s ease;
}

.stage-node.active .stage-circle {
    background: rgb(var(--state-purple-rgb) / 0.9);
    box-shadow: 0 0 12px rgb(var(--state-purple-rgb) / 0.5);
    animation: stagePulse 1.8s ease-in-out infinite;
}

.stage-node.active .stage-label {
    opacity: 1;
    font-weight: 600;
}

.stage-node.completed .stage-circle {
    background: rgb(var(--state-green-rgb) / 0.9);
}

.stage-node.completed .stage-label {
    opacity: 0.8;
}

.stage-node.error .stage-circle {
    background: rgb(var(--color-error-rgb) / 0.9);
}

.stage-node.error .stage-label {
    opacity: 0.9;
    color: var(--color-error-soft);
}

.stage-node.warning .stage-circle {
    background: rgb(var(--color-warning-rgb) / 0.9);
    animation: stagePulse 1.8s ease-in-out infinite;
}

.stage-node.warning .stage-label {
    opacity: 0.9;
    color: var(--color-highlight-deep);
}

.stage-node.skipped {
    opacity: 0.3;
}

.stage-node.skipped .stage-circle {
    background: rgb(var(--white-rgb) / 0.1);
}

.stage-line {
    transition: background-color 0.5s ease;
}

.stage-line.completed {
    background-color: rgb(var(--state-green-rgb) / 0.6) !important;
}

.stage-line.error {
    background-color: rgb(var(--color-error-rgb) / 0.6) !important;
}

.stage-line.warning {
    background-color: rgb(var(--color-warning-rgb) / 0.6) !important;
}

@keyframes stagePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 8px rgb(var(--state-purple-rgb) / 0.4);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 16px rgb(var(--state-purple-rgb) / 0.6);
    }
}

/* 进度条警告状态（连接中断） */
[data-role="progressBar"].warning,
#progressBar.warning {
    background: var(--gradient-warning-bar) !important;
}

/* ===== 任务卡片样式 ===== */
.task-card {
    border: 1px solid rgb(var(--white-rgb) / 0.08);
    transition: border-color 0.3s ease;
}

/*
 * 不要再用 `.task-card + .task-card { margin-top }` 给卡片做间距：
 * 卡片间距已由各容器自身负责——首页 #imageResult 用 space-y-4（竖向堆叠），
 * 批量 #batchResults 用 grid gap-4。相邻兄弟选择器会给「除第一张外」的卡片
 * 单独加 margin-top，在 grid 里导致第一张卡片顶边比同行其它卡片高出 12px
 * （历史遗留的「第一个卡片总是高一些」UI 问题）。
 */

.task-header {
    padding-bottom: 4px;
}
/* Tailwind utility fallbacks for dynamically-loaded shell.html (Tailwind JIT can't scan fetch'd HTML) */
.bg-surface { background-color: var(--surface); }
.bg-surface-2 { background-color: var(--surface-2); }
.bg-surface-3 { background-color: var(--surface-3); }
.bg-surface-dark { background-color: var(--surface-dark); }
.bg-surface-darker { background-color: var(--surface-darker); }
.bg-brand { background-color: var(--brand-primary); }
.bg-brand-end { background-color: var(--brand-primary-end); }
.bg-brand-soft { background-color: var(--brand-soft); }
.bg-line { background-color: var(--line); }
.bg-info { background-color: var(--color-info); }
.bg-error { background-color: var(--color-error); }
.bg-success { background-color: var(--color-success); }
.bg-warning { background-color: var(--color-warning); }
.text-content { color: var(--content); }
.text-content-strong { color: var(--content-strong); }
.text-content-soft { color: var(--content-soft); }
.text-content-stronger { color: var(--content-stronger); }
.text-muted { color: var(--muted); }
.text-brand { color: var(--brand-primary); }
.text-info { color: var(--color-info); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error { color: var(--color-error); }
.border-line { border-color: var(--line); }
.border-line-strong { border-color: var(--line-strong); }
.border-brand { border-color: var(--brand-primary); }