/* ==========================================================================
 * 详情页样式(dp-* 系列)
 * 2026-10-02 从 video_subtitle.html 内联 <style> 抽出,
 *   供首页(index.html)直接复用,保持两处文案提取详情页完全一致。
 *
 * 用到的 CSS 变量(--accent / --bg-card / --border / ... 等)在 theme.css 已定义。
 * ========================================================================== */

/* 2026-08-31: 访客额度耗尽提示条 */
.visitor-quota-bar {
    background-color: #fdecec;
    color: #b3261e;
    border: 1px solid #f5c6cb;
    border-radius: 10px;
    padding: 12px 16px;
    margin: 12px auto 0;
    max-width: 960px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.visitor-quota-bar-icon { font-size: 18px; color: #d63342; }

/* ==========================================================================
 * 2026-09-05 详情页风格重构(同步 task_history_detail)
 * ========================================================================== */
.dp-shell { max-width: 1080px; margin: 24px auto 80px; padding: 0 24px; }
.dp-hero { text-align: center; padding: 56px 24px 16px; }
.dp-hero .sub { color: var(--text-secondary, #475569); font-size: 15px; margin: 0; }

.dp-summary {
    background: #fff; border: 1px solid var(--border, rgba(15,23,42,0.06));
    border-radius: 20px; padding: 22px 24px; margin-bottom: 24px;
    box-shadow: 0 12px 32px rgba(15,23,42,0.06);
}
.dp-summary .top-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.pill-platform, .pill-extra, .pill-status {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 600;
}
.pill-platform { background: var(--accent-soft, #EDE9FE); color: var(--accent, #7C3AED); }
.pill-extra { background: #DBEAFE; color: #1D4ED8; }
.pill-status { background: #DCFCE7; color: #15803D; }
.pill-status.is-pending { background: #FEF3C7; color: #B45309; }
.dp-summary .duration { color: var(--text-secondary, #475569); font-weight: 500; }
.dp-summary .visit {
    margin-left: auto; padding: 6px 14px; border-radius: 999px;
    border: 1px solid var(--accent, #7C3AED); color: var(--accent, #7C3AED);
    text-decoration: none; font-size: 12px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 4px;
}
.dp-summary .top-line-alt .visit { margin-left: 0; }

.dp-summary .extract-another {
    margin-left: auto; padding: 12px 24px; border-radius: 14px;
    border: 1px solid rgba(15,23,42,0.08); background: #fff;
    color: #0F172A; font-size: 14px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 8px;
    cursor: pointer; font-family: inherit;
    box-shadow: 0 1px 4px rgba(15,23,42,0.10);
}
.dp-summary .extract-another:hover { border-color: var(--accent, #7C3AED); color: var(--accent, #7C3AED); }
.dp-summary h2.title { font-size: 22px; font-weight: 800; margin: 14px 0 6px; color: var(--text-primary, #0F172A); }
.dp-summary p.desc { color: var(--text-secondary, #475569); font-size: 14px; line-height: 1.7; margin: 0; }
.dp-summary .quota-row {
    display: flex; flex-wrap: wrap; gap: 14px;
    margin-top: 14px; padding-top: 14px;
    border-top: 1px dashed var(--border, rgba(15,23,42,0.08));
    font-size: 12px; color: var(--text-secondary, #475569);
}

/* ==========================================================================
 * 左媒体 / 右 AI 创作 双栏网格
 * 2026-10-02: 左媒体列保持较窄,右 AI 创作列更宽
 * ========================================================================== */
.dp-grid-2 {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: 24px; align-items: stretch;
}

.dp-card {
    background: #fff; border: 1px solid var(--border, rgba(15,23,42,0.06));
    border-radius: 20px; box-shadow: 0 12px 32px rgba(15,23,42,0.06);
    overflow: hidden; display: flex; flex-direction: column;
}
.dp-card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 18px 22px;
    border-bottom: 1px solid var(--border, rgba(15,23,42,0.06));
}
.dp-card-head h2 { font-size: 16px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; }
.dp-card-head h2 .ico {
    width: 28px; height: 28px; border-radius: 8px;
    background: var(--accent-soft, #EDE9FE); color: var(--accent, #7C3AED);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
}
.dp-card-head .badge-count {
    padding: 3px 10px; border-radius: 999px;
    background: #DCFCE7; color: #15803D;
    font-size: 12px; font-weight: 600;
}

/* ==========================================================================
 * 各 section(视频/音频/封面/AI 文案区)
 * ========================================================================== */
.dp-section { padding: 18px 22px; border-top: 1px solid var(--border, rgba(15,23,42,0.06)); }
.dp-section:first-of-type { border-top: none; }
.dp-section h3 {
    font-size: 14px; font-weight: 700; margin: 0 0 12px;
    display: flex; align-items: center; justify-content: space-between;
}
.dp-section h3 .meta { color: var(--text-tertiary, #94A3B8); font-size: 12px; font-weight: 500; }

.dp-thumb {
    background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
    border-radius: 12px; aspect-ratio: 16/9; overflow: hidden;
    display: flex; align-items: center; justify-content: center; color: #fff;
    position: relative;
}
.dp-thumb video {
    display: block;
    width: 100%;
    height: auto;
    max-height: 720px;
    margin: 0 auto;
    background: #000;
    border-radius: 12px;
    object-fit: cover;
}
.dp-thumb.sq { aspect-ratio: 1 / 1; }
/* 2026-10-02: 注入视频后取消固定 16:9 与灰底,按视频原始比例显示高度 */
.dp-thumb.has-video {
    aspect-ratio: auto;
    background: none;
    display: block;
    max-width: 480px;
    margin: 0 auto;
}
.dp-imgs { display: flex; flex-wrap: wrap; gap: 10px; }
.dp-imgs img {
    width: 88px; height: 88px; border-radius: 10px;
    object-fit: cover; background: linear-gradient(135deg, #cbd5e1, #94a3b8);
}
.dp-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* ==========================================================================
 * dp-btn 系列:渐变/描边/纯色,根据使用场景搭配
 * ========================================================================== */
.dp-btn {
    display: inline-flex; align-items: center; gap: 6px;
    border: none; cursor: pointer;
    padding: 8px 16px; border-radius: 10px;
    font-size: 14px; font-weight: 500;
    transition: all 0.18s ease;
    text-decoration: none;
}
.dp-btn-primary {
    background: linear-gradient(135deg, #7C3AED 0%, #4F46E5 100%);
    color: #fff; box-shadow: 0 4px 12px rgba(124,58,237,0.25);
}
.dp-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(124,58,237,0.35); }
.dp-btn-blue {
    background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
    color: #fff; box-shadow: 0 4px 12px rgba(59,130,246,0.25);
}
.dp-btn-blue:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(59,130,246,0.35); }
.dp-btn-ghost { background: #F4F4EF; color: #0F172A; }
.dp-btn-ghost:hover { background: rgba(15,23,42,0.08); }

/* 2026-10-02: 视频文案导出/复制按钮(图3 样式,字号缩小) */
/* 2026-10-06 与 image_subtitle.html 同款美化:轻阴影 + 渐变 hover + 位移反馈 */
.dp-btn-outline-teal {
    background: #fff; color: #0D9488; border: 1px solid #14B8A6;
    font-size: 12px; padding: 6px 12px;
    display: inline-flex; align-items: center; gap: 5px;
    border-radius: 8px; cursor: pointer; line-height: 1.4;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(20,184,166,0.06);
}
.dp-btn-outline-teal:hover:not(:disabled) {
    background: linear-gradient(135deg, #F0FDFA 0%, #ECFEFF 100%);
    border-color: #0D9488; color: #0D9488;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(20,184,166,0.18);
}
.dp-btn-outline-teal:active:not(:disabled) { transform: translateY(0); box-shadow: 0 1px 2px rgba(20,184,166,0.08); }
.dp-btn-outline-teal:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.dp-link-teal {
    background: transparent; color: #14B8A6; border: none; cursor: pointer;
    font-size: 12px; font-weight: 500; padding: 6px 8px;
    display: inline-flex; align-items: center; gap: 4px;
    border-radius: 6px; line-height: 1.4;
    transition: all 0.2s ease;
}
.dp-link-teal:hover:not(:disabled) { color: #0D9488; background: rgba(20,184,166,0.08); }
.dp-link-teal:active:not(:disabled) { background: rgba(20,184,166,0.14); }
.dp-link-teal:disabled { opacity: .45; cursor: not-allowed; }
.dp-btn-outline { background: #fff; color: #7C3AED; border: 1px solid #7C3AED; }
.dp-btn-outline:hover { background: #EDE9FE; }

.dp-btn-teal {
    background: linear-gradient(135deg, #14B8A6 0%, #0EA5E9 100%);
    color: #fff; box-shadow: 0 4px 12px rgba(20,184,166,0.25);
}
.dp-btn-teal:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(20,184,166,0.35); }
.dp-btn-dark {
    background: #0F172A;
    color: #fff;
}
.dp-btn-dark:hover { background: #1E293B; transform: translateY(-1px); }
.dp-btn-slate { background: #4B5563; color: #fff; }
.dp-btn-slate:hover { background: #374151; transform: translateY(-1px); }
.dp-btn-block { flex: 1 1 100%; justify-content: center; }

/* ==========================================================================
 * 右栏 AI 创作卡片头 / 正文 / 工具栏
 * ========================================================================== */
.dp-right-head {
    display: flex; gap: 8px; align-items: center;
    padding: 14px 22px;
    border-bottom: 1px solid var(--border, rgba(15,23,42,0.06));
    background: rgba(124,58,237,0.04);
}
.dp-right-head .label {
    font-size: 13px; color: #7C3AED; font-weight: 700;
    display: inline-flex; align-items: center; gap: 6px;
}
.dp-right-head .desc { color: #475569; font-size: 12px; }
.dp-right-body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.dp-text {
    background: #F4F4EF; border-radius: 16px; padding: 18px;
    line-height: 1.9; font-size: 14.5px;
    white-space: pre-wrap; word-break: break-word;
    max-height: 560px; overflow-y: auto;
    color: #0F172A; flex: 1;
}
.dp-toolbar { display: flex; gap: 8px; margin-top: 16px; flex-wrap: nowrap; }
.dp-toolbar .dp-btn { padding: 8px 12px; font-size: 13px; flex: 1 1 0; justify-content: center; }

/* 2026-10-08 首页视频文案详情页:AI 创作入口由渐变按钮改为「标题 + 说明」文字卡片 */
.dp-ai-tiles { gap: 10px; flex-wrap: wrap; }
.ai-tile {
    flex: 1 1 0; min-width: 150px; display: flex; align-items: flex-start; gap: 10px;
    background: #fff; border: 1px solid rgba(15,23,42,0.06); border-radius: 10px;
    padding: 12px 14px; cursor: pointer; transition: all 0.2s ease;
}
.ai-tile:hover {
    transform: translateY(-2px);
    border-color: rgba(15,23,42,0.12);
    box-shadow: 0 6px 16px rgba(15,23,42,0.08);
}
.ai-tile:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(15,23,42,0.06); }
.ai-tile-icon {
    width: 30px; height: 30px; border-radius: 8px; flex: none; margin-top: 1px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; color: #fff;
}
.ai-tile-teal { background: linear-gradient(135deg, #14B8A6 0%, #0EA5E9 100%); }
.ai-tile-blue { background: linear-gradient(135deg, #3B82F6 0%, #06B6D4 100%); }
.ai-tile-pink { background: linear-gradient(135deg, #EC4899 0%, #A855F7 100%); }
.ai-tile-body { min-width: 0; }
.ai-tile-title { font-size: 13.5px; font-weight: 600; color: #0F172A; line-height: 1.4; }
.ai-tile-desc { font-size: 12px; color: #64748B; line-height: 1.6; margin-top: 3px; }
@media (max-width: 640px) {
    .dp-ai-tiles { flex-direction: column; }
    .ai-tile { width: 100%; }
}

/* ==========================================================================
 * 文案加载中 / 隐藏节点
 * ========================================================================== */
.dp-pending {
    display: flex; flex-direction: row; align-items: center; justify-content: center;
    gap: 10px; padding: 24px;
    color: #475569; flex: 1;
}
.dp-pending .ring {
    width: 18px; height: 18px; border-radius: 50%;
    border: 3px solid #EDE9FE; border-top-color: #7C3AED;
    animation: dp-spin 0.9s linear infinite; flex: none;
}
@keyframes dp-spin { to { transform: rotate(360deg); } }
.dp-pending .t1 { font-size: 14px; font-weight: 500; color: #475569; }

.transcript-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 12px;
}

@media (max-width: 960px) {
    .dp-grid-2 { grid-template-columns: 1fr; }
}

/* ==========================================================================
 * 2026-10-02: 首页场景
 * 详情页默认隐藏,触发后整块淡入;首页保留 hero 区域不变,
 * 用户无需跳转即可在原地看到视频/音频/封面 + 文案。
 * ========================================================================== */

/* 进度提示(轻量文字,替代大转圈) */
#extractProgress {
    text-align: center;
    color: #6c757d;
    font-size: 14px;
    min-height: 20px;
}
.dp-shell.dp-hidden { display: none; }

/* 首页专属:详情页标题上方"重新提取"链接 */
.dp-reset-row {
    max-width: 1080px; margin: 32px auto 0; padding: 0 24px;
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px;
}
.dp-reset-row .back {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--accent, #7C3AED); font-weight: 600;
    text-decoration: none; padding: 8px 16px; border-radius: 10px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, rgba(15,23,42,0.06));
    transition: all .15s; cursor: pointer; font-size: 14px;
}
.dp-reset-row .back:hover { background: var(--bg-soft, #F4F4EF); }
.dp-reset-row .crumb {
    color: var(--text-secondary, #475569); font-size: 13px;
}
.dp-reset-row .crumb strong { color: var(--text-primary, #0F172A); font-weight: 600; }


/* ==================== 首页模式切换(视频 / 图文)+ 图文结果布局 ==================== */
.hero-mode-toggle {
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(15, 23, 42, 0.05); padding: 4px; border-radius: 999px;
    margin-bottom: 16px;
}
.hero-mode-toggle .mode-btn {
    border: none; background: transparent; cursor: pointer;
    padding: 8px 18px; border-radius: 999px;
    color: var(--text-secondary, #475569); font-size: 14px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 6px;
    transition: all .2s;
}
.hero-mode-toggle .mode-btn:hover { color: var(--text-primary, #0F172A); }
.hero-mode-toggle .mode-btn.active {
    background: #fff; color: var(--accent, #7C3AED);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}
.hero-mode-toggle .mode-btn i { font-size: 13px; }

/* 图文模式结果区(参考 image_subtitle.html 的 .result-content 风格) */
.result-content {
    display: grid; grid-template-columns: 1fr 2fr; gap: 24px;
}
.result-content .images-card {
    background: #fff; border: 1px solid var(--border, rgba(15, 23, 42, 0.06));
    border-radius: 16px; padding: 16px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}
.result-content .images-card-title {
    font-size: 16px; font-weight: 700; color: var(--text-primary, #0F172A);
    margin: 0 0 14px; padding-bottom: 10px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    display: flex; align-items: center; gap: 8px;
}
/* 2026-10-06 头部容器:左标题 + 右按钮(下载图片),与 image_subtitle.html 一致 */
.result-content .images-card-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin: 0 0 14px; padding-bottom: 10px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.result-content .images-card-header .images-card-title {
    margin: 0; padding-bottom: 0; border-bottom: none; flex: 1;
}
.result-content .images-card-title::before {
    content: ""; display: inline-block; width: 4px; height: 16px;
    background: linear-gradient(180deg, #8B5CF6, #3B82F6); border-radius: 2px;
}
.result-content .images-list {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
    max-height: 520px; overflow-y: auto;
}
.result-content .images-list.single-image {
    grid-template-columns: 1fr; max-width: 360px; margin: 0 auto;
}
.result-content .image-item {
    position: relative; border-radius: 8px; overflow: hidden;
    border: 2px solid rgba(15, 23, 42, 0.08);
}
.result-content .image-item img {
    width: 100%; height: 120px; object-fit: cover; display: block;
}
.result-content .image-index {
    position: absolute; top: 5px; left: 5px;
    background: rgba(0, 0, 0, 0.6); color: #fff;
    padding: 2px 8px; border-radius: 4px; font-size: 12px;
}
.result-content .text-content {
    padding: 20px; background: #f9fafb; border-radius: 16px;
    border: 1px solid var(--border, rgba(15, 23, 42, 0.06));
}
/* 2026-10-06 文案区头部:左标题 + 右操作(导出/复制文案) */
.result-content .text-content-header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.result-content .text-content-header h3 {
    color: var(--accent, #7C3AED); font-size: 18px; margin: 0 0 14px;
    display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
}
.result-content .image-result-actions { display: flex; gap: 8px; flex-shrink: 0; padding-top: 1px; }
.result-content .text-content .content-text {
    color: var(--text-primary, #0F172A); font-size: 14px; line-height: 1.8;
    white-space: pre-wrap; word-break: break-all;
    max-height: 480px; overflow-y: auto;
}
@media (max-width: 768px) {
    .result-content { grid-template-columns: 1fr; }
}