/* ============================================================
   AI 处理进度弹窗（自动抠图/高清放大/黑白上色三页共用）
   2026-08-29：此前 .progress-overlay 无任何样式定义，
   进度以裸文字形式显示在制作页下方，不直观——改为居中小弹窗。
   ============================================================ */

.progress-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9500; /* 低于权限弹窗(10000) */
}

.progress-content {
    position: relative;
    background: #fff;
    border-radius: 16px;
    padding: 34px 40px 26px;
    width: 340px;
    max-width: 88vw;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: aiPop 0.3s ease;
}

@keyframes aiPop {
    from { transform: scale(0.92); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

/* 双环旋转 + 中心图标脉冲 */
.ai-spinner {
    position: relative;
    width: 84px;
    height: 84px;
    margin: 0 auto 16px;
}

.ai-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 4px solid #ede9fe;
    border-top-color: #7c3aed;
    animation: aiSpin 1s linear infinite;
}

.ai-ring2 {
    position: absolute;
    inset: 11px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-bottom-color: #4A90E2;
    animation: aiSpinR 1.6s linear infinite;
}

.ai-core {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    line-height: 1;
    animation: aiPulse 1.2s ease-in-out infinite;
}

@keyframes aiSpin  { to { transform: rotate(360deg); } }
@keyframes aiSpinR { to { transform: rotate(-360deg); } }
@keyframes aiPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.18); }
}

.progress-text {
    font-size: 15px;
    color: #1f2937;
    font-weight: 600;
    margin: 0 0 14px;
    line-height: 1.5;
}

/* 平滑伪进度条（宽度由各页脚本按时段推进） */
.ai-progress-track {
    height: 8px;
    background: #f1f0fb;
    border-radius: 999px;
    overflow: hidden;
}

.ai-progress-bar {
    height: 100%;
    width: 5%;
    border-radius: 999px;
    background: linear-gradient(90deg, #7c3aed, #4A90E2);
    transition: width 0.8s ease;
}

.ai-progress-hint {
    font-size: 12px;
    color: #9aa0a6;
    margin: 12px 0 0;
    line-height: 1.5;
}

/* ============================================================
   AI 错误提示弹窗（与进度弹窗同一套遮罩，2026-08-29 二期）
   此前尺寸超限等错误显示为大卡片下方的一行红字，不直观。
   ============================================================ */
.ai-error-content {
    padding: 30px 34px 24px;
}

.ai-error-icon {
    font-size: 44px;
    line-height: 1;
    margin-bottom: 12px;
    animation: aiShake 0.5s ease;
}

@keyframes aiShake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-7px); }
    40%      { transform: translateX(7px); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(4px); }
}

.ai-error-msg {
    font-size: 14px;
    color: #b3261e;
    font-weight: 600;
    margin: 0 0 18px;
    line-height: 1.7;
    word-break: break-word;
    max-width: 300px;
}

.ai-error-btn {
    padding: 10px 36px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #7c3aed, #4A90E2);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.ai-error-btn:hover { filter: brightness(1.1); }