/* ============================================================================
 * Mira 觅画 · Error States v1
 *
 * 错误展示统一规范：
 *   - 视频段失败卡（video-card-failed）
 *   - 错误标题 + 友好 hint + 改写建议
 *   - 退积分提示
 *   - 重试按钮醒目化
 *
 * 必须在 tokens.css + buttons.css + icons.css 之后加载。
 * ============================================================================ */

/* === 失败卡整体 === */
.video-card-failed {
    border: 1px solid var(--seal-100);
    background: linear-gradient(180deg, var(--seal-50), #ffffff);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--motion-base) var(--ease-out);
}
.video-card-failed:hover {
    box-shadow: var(--shadow-md);
}

/* === 失败占位（替代视频缩略图） === */
.video-card-fail {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    aspect-ratio: 16 / 9;
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--accent-base);
    padding: var(--space-4);
}
.video-card-fail .fail-icon {
    font-size: 0;
    color: var(--accent-base);
}
.video-card-fail .fail-icon .ico {
    color: var(--accent-base);
}
.video-card-fail .fail-title {
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--accent-base);
    letter-spacing: 0.04em;
    text-align: center;
}

/* === 状态行的失败 dot === */
.video-status .fail-dot {
    background: var(--accent-base) !important;
    box-shadow: 0 0 0 3px var(--accent-soft);
    animation: fail-dot-pulse 1.6s var(--ease-out) infinite;
}
@keyframes fail-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 3px var(--accent-soft); }
    50%      { box-shadow: 0 0 0 6px var(--accent-soft); }
}

/* === 失败详情区（hint + advice） === */
.fail-detail {
    margin: var(--space-2) 0;
    padding: var(--space-3);
    background: var(--accent-soft);
    border-left: 3px solid var(--accent-base);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
}
.fail-detail .fail-hint {
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}
.fail-detail .fail-advice {
    color: var(--text-primary);
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}
.fail-detail .fail-advice .ico {
    color: var(--gold-500);
    margin-top: 2px;
    flex-shrink: 0;
}

/* === 重试按钮强调（失败状态时高亮 primary） === */
.video-card-failed .btn-regen {
    width: 100%;
    margin-top: var(--space-2);
}

/* === Toast 错误状态 (复用) === */
.toast-error {
    background: var(--surface-card) !important;
    color: var(--accent-base) !important;
    border-left: 3px solid var(--accent-base) !important;
    box-shadow: var(--shadow-md) !important;
}
.toast-error::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='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></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='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>");
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    margin-right: var(--space-2);
    vertical-align: -3px;
}