/* ============================================================================
 * Mira 觅画 · Progress (5 步流水线进度条) v1
 *
 * 4 态：
 *   pending  墨灰 dot + 数字（待开始）
 *   active   朱砂 dot + 数字 + 脉冲 ring（进行中）
 *   done     古铜金 dot + ✓（完成）
 *   failed   朱砂深边框 + ✕ + 醒目（失败）
 *
 * 用法：
 *   <div class="step pending|active|done|failed">
 *     <div class="step-dot">N</div>     ← 数字 / ✓ / ✕ 自动切
 *     <div class="step-label">剧本</div>
 *     <div class="step-time">12:58</div>  ← 可选时间戳
 *   </div>
 *   <div class="step-line done|pending"></div>
 *
 * 必须在 tokens.css 之后加载（覆盖 style.css 老定义）。
 * ============================================================================ */

/* === 容器 === */
.step-progress {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.step {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 1 auto;
    position: relative;
}

/* === Dot 基类（4 态共用） === */
.step .step-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--border-default);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface-card);
    flex-shrink: 0;
    transition: all var(--motion-base) var(--ease-out);
    font-family: var(--font-display);
    position: relative;
}

/* === pending 态（默认） === */
/* 上面的基类就是 pending 样式 */

/* === active 态（朱砂 + 脉冲） === */
.step.active .step-dot,
.step.cur .step-dot {
    border-color: var(--accent-base);
    background: var(--accent-base);
    color: var(--text-inverse);
    box-shadow: 0 0 0 4px var(--accent-soft);
    animation: step-pulse 1.6s var(--ease-out) infinite;
}
@keyframes step-pulse {
    0%, 100% { box-shadow: 0 0 0 4px var(--accent-soft); }
    50%      { box-shadow: 0 0 0 8px var(--accent-soft); }
}

/* === done 态（古铜金 + ✓） === */
.step.done .step-dot {
    border-color: var(--gold-500);
    background: var(--gold-500);
    color: var(--text-inverse);
    font-size: 0;  /* 隐藏数字 */
}
.step.done .step-dot::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background: currentColor;
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

/* === failed 态（朱砂深 + ✕） === */
.step.failed .step-dot {
    border-color: var(--seal-700);
    background: var(--surface-card);
    color: var(--seal-700);
    font-size: 0;
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.step.failed .step-dot::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background: var(--seal-700);
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

/* === Label === */
.step .step-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
    font-family: var(--font-display);
    transition: color var(--motion-base) var(--ease-out);
}
.step.active .step-label,
.step.cur .step-label {
    color: var(--text-primary);
    font-weight: 600;
}
.step.done .step-label {
    color: var(--gold-500);
    font-weight: 500;
}
.step.failed .step-label {
    color: var(--seal-700);
    font-weight: 600;
}

/* === 时间戳（可选）=== */
.step .step-time {
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--text-muted);
    margin-left: var(--space-1);
    opacity: .7;
}
.step.done .step-time { color: var(--gold-700); opacity: 1; }
.step.failed .step-time { color: var(--seal-700); opacity: 1; }

/* === 连接线 === */
.step-line {
    flex: 1 1 auto;
    min-width: 16px;
    height: 2px;
    background: var(--border-default);
    margin: 0 var(--space-2);
    border-radius: 1px;
    position: relative;
    overflow: hidden;
}
.step-line.done {
    background: var(--gold-500);
}
.step-line.active {
    background: linear-gradient(
        90deg,
        var(--gold-500) 0%,
        var(--gold-500) 50%,
        var(--accent-base) 50%,
        var(--accent-base) 100%
    );
    background-size: 200% 100%;
    animation: line-progress 2s var(--ease-out) infinite;
}
@keyframes line-progress {
    0%   { background-position: 100% 0; }
    100% { background-position: 0 0; }
}
.step-line.failed {
    background: var(--seal-700);
}

/* === Loading 态 (active + 转圈，可选)  === */
.step.active.loading .step-dot {
    color: transparent;
    animation: step-pulse 1.6s var(--ease-out) infinite,
               step-spin 1.2s linear infinite;
}
@keyframes step-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* === 失败态可点击重试提示 === */
.step.failed[data-retryable="true"] {
    cursor: pointer;
}
.step.failed[data-retryable="true"]::after {
    content: "点击重试";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 4px;
    padding: 2px 6px;
    background: var(--seal-700);
    color: var(--text-inverse);
    font-size: 10px;
    border-radius: 2px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity var(--motion-fast);
    pointer-events: none;
}
.step.failed[data-retryable="true"]:hover::after {
    opacity: 1;
}

/* === 响应式：窄屏纵向 === */
@media (max-width: 640px) {
    .step-progress {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }
    .step {
        justify-content: flex-start;
    }
    .step-line {
        height: 16px;
        width: 2px;
        margin: 0 0 0 16px;
    }
}