/* ══════════════════════════════════════════════════════════════════════
   视频二创：中栏两侧空白利用（配套 video-remix-side-panels.js）
   ══════════════════════════════════════════════════════════════════════
   竖屏画布在宽中栏里只占中间一条，两侧本来全空。
   这两块面板【绝对定位】贴在 .vr-canvas-wrap 的左右，
   不参与 grid 布局，所以不会推挤画布（画布尺寸完全不变）。

   宽度：两侧各 208px。只在 >=1320px 时由 JS 显示。
   ══════════════════════════════════════════════════════════════════════ */
.xhs-vr-side {
  position: absolute;
  top: 14px;
  bottom: 14px;
  width: 208px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  background: rgba(16, 19, 22, .72);
  padding: 10px;
  backdrop-filter: blur(6px);
  z-index: 3;
}
.xhs-vr-side[hidden] { display: none !important; }
.xhs-vr-side-left { left: 14px; }
.xhs-vr-side-right { right: 14px; }

.xhs-vr-side-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.xhs-vr-side-head b { font-size: 12.5px; color: #ecf1f4; }
.xhs-vr-side-count { font-size: 10.5px; color: #85929d; }
.xhs-vr-side-hint { margin: 0; font-size: 11px; line-height: 1.6; color: #85929d; }

/* ── 左侧：镜头列表 ── */
.xhs-vr-clip-list { display: grid; gap: 6px; }
.xhs-vr-clip {
  display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 8px; align-items: center;
  width: 100%; padding: 5px; cursor: pointer; text-align: left;
  border: 1px solid rgba(255, 255, 255, .09); border-radius: 8px;
  background: rgba(255, 255, 255, .03); color: #cfd6db; font: inherit;
  transition: border-color .12s, background .12s;
}
.xhs-vr-clip:hover { border-color: rgba(110, 214, 173, .5); background: rgba(110, 214, 173, .08); }
.xhs-vr-clip.is-active { border-color: #6ed6ad; background: rgba(110, 214, 173, .14); }
.xhs-vr-clip-thumb {
  position: relative; display: block; width: 42px; height: 56px; overflow: hidden;
  border-radius: 5px; background: #0b0e11; border: 1px solid rgba(255, 255, 255, .06);
}
.xhs-vr-clip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xhs-vr-clip-thumb i { display: grid; place-items: center; height: 100%; color: #59636c; font-style: normal; font-size: 13px; }
.xhs-vr-clip-meta { display: grid; gap: 2px; min-width: 0; }
.xhs-vr-clip-meta b { font-size: 12px; color: #ecf1f4; }
.xhs-vr-clip-meta small {
  display: block; font-size: 10.5px; color: #85929d;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.xhs-vr-clip-meta small.is-ok { color: #6ed6ad; }
.xhs-vr-clip-meta small.is-fail { color: #ef7d7d; }

.xhs-vr-side-foot { display: flex; gap: 6px; margin-top: auto; padding-top: 6px; }
.xhs-vr-nav-btn {
  flex: 1 1 0; height: 28px; padding: 0 6px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 7px;
  background: rgba(255, 255, 255, .04); color: #cfd6db; font-size: 11px;
}
.xhs-vr-nav-btn:hover:not(:disabled) { border-color: rgba(110, 214, 173, .55); color: #fff; }
.xhs-vr-nav-btn:disabled { opacity: .35; cursor: not-allowed; }

/* ── 右侧：本镜头速览 ── */
.xhs-vr-facts { margin: 0; display: grid; gap: 4px; }
.xhs-vr-facts > div { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 6px; align-items: baseline; }
.xhs-vr-facts dt { font-size: 10.5px; color: #85929d; }
.xhs-vr-facts dd {
  margin: 0; font-size: 11.5px; color: #dfe6ea;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.xhs-vr-facts dd.is-ok { color: #6ed6ad; }
.xhs-vr-facts dd.is-fail { color: #ef7d7d; }

.xhs-vr-prompt { display: grid; gap: 3px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .07); }
.xhs-vr-prompt > span { font-size: 10.5px; color: #85929d; }
.xhs-vr-prompt p {
  margin: 0; font-size: 11px; line-height: 1.55; color: #c3cbd1;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

.xhs-vr-gen { margin-top: auto; display: grid; gap: 6px; }
.xhs-vr-gen-btn {
  width: 100%; height: 32px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 650;
  border-radius: 8px; border: 1px solid #6ed6ad; background: #6ed6ad; color: #071510;
}
.xhs-vr-gen-btn:hover { filter: brightness(1.08); }
.xhs-vr-gen-btn.is-retry { border-color: #f2b96d; background: #f2b96d; color: #241704; }
.xhs-vr-gen-btn.is-again { border-color: rgba(110, 214, 173, .5); background: rgba(110, 214, 173, .16); color: #a9ecd2; }
.xhs-vr-gen-link {
  width: 100%; height: 26px; cursor: pointer; font: inherit; font-size: 11px;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 7px;
  background: transparent; color: #85929d;
}
.xhs-vr-gen-link:hover { color: #cfd6db; border-color: rgba(255, 255, 255, .24); }

/* ── 日间模式 ── */
html[data-vr-theme="light"] .xhs-vr-side {
  border-color: #f0dade; background: rgba(255, 255, 255, .9);
}
html[data-vr-theme="light"] .xhs-vr-side-head { border-bottom-color: #f2dade; }
html[data-vr-theme="light"] .xhs-vr-side-head b { color: #2a2c31; }
html[data-vr-theme="light"] .xhs-vr-side-count,
html[data-vr-theme="light"] .xhs-vr-side-hint { color: #8d9099; }
html[data-vr-theme="light"] .xhs-vr-clip { border-color: #eed7db; background: #fff; color: #4a4741; }
html[data-vr-theme="light"] .xhs-vr-clip:hover { border-color: #6fc9a4; background: #f2fbf7; }
html[data-vr-theme="light"] .xhs-vr-clip.is-active { border-color: #35a97a; background: #e8f8f1; }
html[data-vr-theme="light"] .xhs-vr-clip-meta b { color: #2a2c31; }
html[data-vr-theme="light"] .xhs-vr-clip-meta small { color: #8d9099; }
html[data-vr-theme="light"] .xhs-vr-clip-meta small.is-ok { color: #1f9d6d; }
html[data-vr-theme="light"] .xhs-vr-clip-meta small.is-fail { color: #d8402f; }
html[data-vr-theme="light"] .xhs-vr-nav-btn { border-color: #eccdd3; background: #fff; color: #4a4741; }
html[data-vr-theme="light"] .xhs-vr-nav-btn:hover:not(:disabled) { border-color: #35a97a; color: #1f7a58; }
html[data-vr-theme="light"] .xhs-vr-facts dt { color: #8d9099; }
html[data-vr-theme="light"] .xhs-vr-facts dd { color: #2a2c31; }
html[data-vr-theme="light"] .xhs-vr-facts dd.is-ok { color: #1f9d6d; }
html[data-vr-theme="light"] .xhs-vr-facts dd.is-fail { color: #d8402f; }
html[data-vr-theme="light"] .xhs-vr-prompt { border-top-color: #f2dade; }
html[data-vr-theme="light"] .xhs-vr-prompt > span { color: #8d9099; }
html[data-vr-theme="light"] .xhs-vr-prompt p { color: #5d6167; }
html[data-vr-theme="light"] .xhs-vr-gen-link { border-color: #eccdd3; color: #8d9099; }
html[data-vr-theme="light"] .xhs-vr-gen-link:hover { color: #2a2c31; border-color: #d8b6bd; }
html[data-vr-theme="light"] .xhs-vr-gen-btn.is-again { border-color: rgba(53, 169, 122, .45); background: #eefaf5; color: #1f7a58; }

/* ══ 参考图区拖拽高亮（配套 enableReferenceDrop）══ */
.vr-reference-section.xhs-vr-drop-on {
  outline: 2px dashed #6ed6ad;
  outline-offset: 2px;
  border-radius: 8px;
  background: rgba(110, 214, 173, .07);
}
html[data-vr-theme="light"] .vr-reference-section.xhs-vr-drop-on {
  outline-color: #35a97a;
  background: #effaf5;
}

/* ══ 左栏「图文笔记」封面溢出修正 ══
   实测 .vr-note-cover 的内容高 69px 而容器只有 52px，被裁掉一截。
   这里把封面收敛到容器内：媒体铺满 + 溢出隐藏干净。 */
.vr-note-cover.xhs-vr-cover-fixed {
  overflow: hidden;
  display: block;
  line-height: 0;
}
.vr-note-cover.xhs-vr-cover-fixed > img,
.vr-note-cover.xhs-vr-cover-fixed > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
/* 封面上的角标/计数别被挤出去 */
.vr-note-cover.xhs-vr-cover-fixed > span,
.vr-note-cover.xhs-vr-cover-fixed > b {
  line-height: 1.4;
}

/* ══ F. 音字面板：统一时长状态条 + 重复块弱化 ══ */
.xhs-vr-dur-bar {
  position: sticky; top: -14px; z-index: 2;
  margin: -14px -14px 12px; padding: 10px 14px 11px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: rgba(15, 20, 24, .96);
  backdrop-filter: blur(8px);
}
.xhs-vr-dur-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.xhs-vr-dur-head b { font-size: 12px; color: #ecf1f4; }
.xhs-vr-dur-head em { font-size: 11px; font-style: normal; }
.xhs-vr-dur-head em.is-ok { color: #6ed6ad; }
.xhs-vr-dur-head em.is-over { color: #f2b96d; }
.xhs-vr-dur-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.xhs-vr-dur-grid > span {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 4px 8px; border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .04);
}
.xhs-vr-dur-grid i { font-style: normal; font-size: 10.5px; color: #85929d; }
.xhs-vr-dur-grid b { font-size: 12px; color: #ecf1f4; }

/* 被弱化的重复时长块：保留信息但不再抢注意力 */
.xhs-vr-dur-dup { opacity: .5; }
.xhs-vr-dur-dup:hover { opacity: 1; }

html[data-vr-theme="light"] .xhs-vr-dur-bar { border-bottom-color: #f2dade; background: rgba(255, 255, 255, .97); }
html[data-vr-theme="light"] .xhs-vr-dur-head b { color: #2a2c31; }
html[data-vr-theme="light"] .xhs-vr-dur-head em.is-ok { color: #1f9d6d; }
html[data-vr-theme="light"] .xhs-vr-dur-head em.is-over { color: #c8801f; }
html[data-vr-theme="light"] .xhs-vr-dur-grid > span { border-color: #f0dade; background: #fdf6f6; }
html[data-vr-theme="light"] .xhs-vr-dur-grid i { color: #8d9099; }
html[data-vr-theme="light"] .xhs-vr-dur-grid b { color: #2a2c31; }

/* ══ 提示词输入框体验优化（配套 video-remix-prompt-ux.js）══ */
.vr-prompt-editor textarea {
  /* 输入更舒展，行高与字号对中文更友好 */
  line-height: 1.75;
  font-size: 12.5px;
  tab-size: 2;
}
/* 键盘提示：弱化，不抢注意力 */
.xhs-px-hint {
  flex-basis: 100%;
  margin-top: 2px;
  font-size: 10.5px;
  color: #6d7883;
  line-height: 1.5;
}
html[data-vr-theme="light"] .xhs-px-hint { color: #9aa0a8; }
/* 「复制 / 撤销」按钮与既有 ghost 按钮视觉一致，略微区分层级 */
.vr-prompt-tools .vr-btn-ghost { white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════════════
   精细设置简化 + 花字画布调节 + 字幕动效（配套 video-remix-simplify.js）
   ══════════════════════════════════════════════════════════════════════ */

/* ── 一、简化：隐藏冗余/可自动/画布能直接调的字段（不删节点，数据照旧提交）── */
label.xhs-vr-simplified { display: none !important; }
.vr-subtitle-style-tags.xhs-vr-simplified { display: none !important; }

/* 位置提示：替代原来的「顶部/中部/底部」三按钮 */
.vr-quick-group-hint { align-items: center; gap: 8px; }
.vr-quick-tip { font-size: 10.5px; color: #8b93a4; }

/* ── 二、花字画布调节：拖动期间锁定布局 ──
   实测问题：调字幕/花字位置时，拖动会触发换行、字号偶发变化。
   根因是拖动过程中画布重绘，对象尺寸按内容重算。
   这里在拖动态下固定宽度与字号，让拖动变成纯平移。 */
.vr-canvas.xhs-vr-dragging .vr-title-object,
.vr-canvas.xhs-vr-dragging .vr-subtitle-object {
  /* 固定布局：不因位置变化而重新折行 / 不改变字号 */
  white-space: pre;
  text-wrap: nowrap;
  will-change: left, top;
  transition: none !important;
}
.vr-canvas.xhs-vr-dragging .vr-live-subtitle {
  /* 实时字幕同样锁定：只动位置，不动字号 */
  font-size: revert-layer;
  transition: none !important;
}
/* 拖动时给个轻微的视觉反馈，让用户知道"正在平移" */
.vr-canvas.xhs-vr-dragging .vr-title-object.is-selected,
.vr-canvas.xhs-vr-dragging .vr-subtitle-object.is-selected {
  outline-style: solid;
  outline-color: rgba(122, 219, 233, .95);
}

/* ── 三、字幕动效选择器（搬进字幕时间轴的每一行）── */
.xhs-cue-anim { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.xhs-cue-anim::before {
  content: '动效';
  font-size: 10.5px;
  color: #8b93a4;
  flex: 0 0 auto;
}
.xhs-cue-anim select {
  flex: 1 1 auto; min-width: 0;
  height: 26px; padding: 0 7px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 7px;
  background: rgba(255, 255, 255, .04); color: #dde4e8; font-size: 11.5px;
}
.xhs-cue-anim select:hover { border-color: rgba(110, 214, 173, .5); }
html[data-vr-theme="light"] .xhs-cue-anim::before { color: #8d9099; }
html[data-vr-theme="light"] .xhs-cue-anim select {
  border-color: #eed7db; background: #fff; color: #2a2c31;
}

/* ══ 动效比例优化：重点词 vs 正文更和谐 ══
   原来重点词放大 1.3~1.4 倍、且单独加粗加重，视觉跳变太强；
   这里把强调的处理改得更克制：比例收敛、用颜色与轻微放大区分，
   让整行读起来是一句话，而不是"一个词突然跳出来"。 */
.vr-live-subtitle .is-emphasis {
  /* 收敛放大比例：跟随后端 emphasisScale，但不超过 1.32 倍观感 */
  font-size: 1.26em;
  font-weight: 800;
  letter-spacing: .01em;
}
.vr-live-subtitle { letter-spacing: .012em; }
/* 重点词的描边略细一点，避免加重后笔画粘连 */
.vr-live-subtitle .is-emphasis {
  -webkit-text-stroke-width: calc(var(--subtitle-stroke, 3) * .2px);
}

/* ══ 音字面板「AI 改写」口播稿预览（配套 aiNarrationScript）══ */
.vr-script-preview {
  margin-top: 9px; padding: 11px 12px;
  border: 1px solid rgba(110, 214, 173, .38); border-radius: 9px;
  background: rgba(110, 214, 173, .07);
}
.vr-script-preview-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding-bottom: 7px; margin-bottom: 8px;
  border-bottom: 1px solid rgba(110, 214, 173, .22);
}
.vr-script-preview-head b { font-size: 12px; color: #a9ecd2; }
.vr-script-preview-head span { font-size: 10.5px; color: #85929d; font-variant-numeric: tabular-nums; }
.vr-script-preview p {
  margin: 0 0 10px; font-size: 12.5px; line-height: 1.85; color: #dde4e8;
  white-space: pre-wrap; word-break: break-word;
}
.vr-script-preview-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.vr-script-preview-actions .vr-btn { height: 28px; padding: 0 11px; font-size: 11.5px; }

html[data-vr-theme="light"] .vr-script-preview { border-color: rgba(53, 169, 122, .38); background: #effaf5; }
html[data-vr-theme="light"] .vr-script-preview-head { border-bottom-color: rgba(53, 169, 122, .22); }
html[data-vr-theme="light"] .vr-script-preview-head b { color: #1f7a58; }
html[data-vr-theme="light"] .vr-script-preview-head span { color: #8d9099; }
html[data-vr-theme="light"] .vr-script-preview p { color: #2a2c31; }

/* ══════════════════════════════════════════════════════════════════════
   镜头面板按参考图排版：时长滑块 + 区块统一
   ══════════════════════════════════════════════════════════════════════
   参考图的排版规律（照搬，但换成我们的配色）：
     · 区块之间均匀留白；每块「标题在左、当前值/操作在右」
     · 选项按钮：选中=主色实心、未选中=浅底深字（胶囊圆角）
     · 滑块：轨道细、已滑过部分用主色、手柄是主色圆点
   我们的主色是珊瑚红 #e8452f / 绿色 #6ed6ad（深色主题用绿，浅色用珊瑚红）
   ══════════════════════════════════════════════════════════════════════ */

/* ── 区块间距统一（参考图是 24px 左右）── */
.vr-inspector .vr-form-grid > * + * { margin-top: 10px; }
.vr-inspector section + section { margin-top: 14px; }

/* ── 时长区块 ── */
.vr-dur-section {
  display: grid; gap: 9px;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  background: rgba(255, 255, 255, .02);
}
.vr-dur-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.vr-dur-heading strong { font-size: 12.5px; color: #ecf1f4; }
.vr-dur-heading small { display: block; margin-top: 3px; font-size: 10.5px; color: #85929d; }
.vr-dur-heading b {
  flex: 0 0 auto; font-size: 13px; color: #6ed6ad; font-variant-numeric: tabular-nums;
}
.vr-dur-slider { display: grid; gap: 4px; }
.vr-dur-slider input[type="range"] {
  width: 100%; height: 22px; margin: 0; appearance: none; background: transparent; cursor: pointer;
}
/* 轨道：已滑过的主色、未滑过的淡底 */
.vr-dur-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .14);
}
.vr-dur-slider input[type="range"]::-webkit-slider-thumb {
  appearance: none; width: 16px; height: 16px; margin-top: -5.5px;
  border-radius: 50%; border: 2px solid #0d1114; background: #6ed6ad;
  box-shadow: 0 0 0 2px rgba(110, 214, 173, .35);
}
.vr-dur-slider input[type="range"]:active::-webkit-slider-thumb { background: #8ee7c2; }
.vr-dur-ticks { display: flex; justify-content: space-between; }
.vr-dur-ticks i { font-style: normal; font-size: 10px; color: #6d7883; }

html[data-vr-theme="light"] .vr-dur-section { border-color: #f0dade; background: #fdfafa; }
html[data-vr-theme="light"] .vr-dur-heading strong { color: #2a2c31; }
html[data-vr-theme="light"] .vr-dur-heading small { color: #8d9099; }
html[data-vr-theme="light"] .vr-dur-heading b { color: #1f9d6d; }
html[data-vr-theme="light"] .vr-dur-slider input[type="range"]::-webkit-slider-runnable-track { background: #eadfe2; }
html[data-vr-theme="light"] .vr-dur-slider input[type="range"]::-webkit-slider-thumb {
  border-color: #fff; background: #35a97a; box-shadow: 0 0 0 2px rgba(53, 169, 122, .3);
}
html[data-vr-theme="light"] .vr-dur-ticks i { color: #9aa0a8; }

/* ── 「AI 优化」按钮做成主色实心，一眼能看到（参考图里 AI 润色是蓝色高亮）── */
.vr-prompt-tools .vr-btn-primary {
  height: 26px; padding: 0 11px; font-size: 11.5px; font-weight: 650;
  border-radius: 7px;
}
/* 提示词输入框给足高度，符合参考图里的大输入区 */
.vr-prompt-editor textarea { min-height: 110px; }

/* ══════════════════════════════════════════════════════════════════════
   生成进度条（画布上方常驻）+ 时间线两行
   ══════════════════════════════════════════════════════════════════════ */

/* ── 【用户要求】镜头面板紧凑化 ──
   「把镜头选项卡里的排列弄紧凑一点，比如画面比例 9:16 和 16:9 弄个图标，
     尽量把高度拉低，占的空间小一些」 */

/* 画面比例：【用户要求】改成与图文二创工作台「生成比例」同款的小方块网格。
   原话：「镜头选项卡下面的内容，能不能也和图文二创工作台原贴图片的生成要求、
          生成比例采用同样的排列方式，然后细节上重新优化一遍 UI？」
   图文二创那边是 .ratio-option-grid：display:grid；4 列等宽；gap 5px；方块按钮。
   这里保持一致（原来是一行 26px 的小胶囊，与图文二创不是一路）。
   注意：本文件在 index.html 里排在 clip-tab-layout.css 之前，
   但本条选择器特异性更高（.vr-ratio-section.is-compact .vr-ratio-grid），
   所以必须在这里改，改 .vr-ratio-grid 会被这条压住。 */
.vr-ratio-section.is-compact { margin: 0; padding: 0; }
.vr-ratio-inline { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; }
.vr-ratio-inline-label { flex: 0 0 auto; font-size: 12px; color: var(--text-2, #9aa6b2); white-space: nowrap; }
.vr-ratio-section.is-compact .vr-ratio-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin: 0;
}
.vr-ratio-section.is-compact .vr-ratio-option {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; height: 46px; min-height: 46px; max-height: 46px;
  padding: 4px 2px; margin: 0; width: auto; min-width: 0;
  font-size: 12px; border-radius: 7px;
}
.vr-ratio-section.is-compact .vr-ratio-option small { display: none; }
.vr-ratio-section.is-compact .vr-ratio-icon { width: 14px; height: 18px; flex: 0 0 auto; }
.vr-ratio-section.is-compact .vr-ratio-option.is-active { border-color: var(--green, #6ed6ad); }

/* 参考图：一行放图 + 三个入口按钮，整体压扁 */
.vr-reference-section.is-compact { margin: 0; padding: 6px 0; }
.vr-reference-section.is-compact .vr-reference-heading { margin-bottom: 5px; }
.vr-reference-section.is-compact .vr-reference-heading small { display: none; }
.vr-reference-section.is-compact .vr-reference-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vr-reference-section.is-compact .vr-reference-item { width: 44px; height: 58px; }
.vr-reference-section.is-compact .vr-reference-item figcaption { font-size: 8.5px; }
.vr-reference-add {
  display: inline-flex; align-items: center; justify-content: center;
  height: 26px; padding: 0 9px; cursor: pointer; font: inherit; font-size: 11px;
  border: 1px dashed rgba(255, 255, 255, .2); border-radius: 6px;
  background: rgba(255, 255, 255, .03); color: #cfd6db; white-space: nowrap;
}
.vr-reference-add:hover { border-color: var(--green, #6ed6ad); color: #fff; }
.vr-reference-add input[type="file"] { display: none; }

/* 任务记录里的「删除任务」按钮 */
.vr-job-del {
  margin-left: auto; font-size: 10.5px; color: #ff9d9d;
  border: 1px solid rgba(239, 125, 125, .35); border-radius: 5px;
  padding: 1px 8px; background: rgba(239, 125, 125, .08);
}
.vr-job-del:hover:not(:disabled) { background: rgba(239, 125, 125, .18); color: #fff; }
.vr-job-del:disabled { opacity: .5; color: #85929d; border-color: rgba(255, 255, 255, .12); background: transparent; cursor: not-allowed; }

/* 选图弹层（帖子图片 / 笔记图片） */
.vr-refpick-mask {
  position: fixed; inset: 0; z-index: 1400; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .62); padding: 5vh 4vw;
}
.vr-refpick-card {
  width: min(860px, 92vw); max-height: 84vh; display: flex; flex-direction: column;
  border: 1px solid #2b333b; border-radius: 12px; background: #12161a; overflow: hidden;
}
.vr-refpick-card header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px; border-bottom: 1px solid #232b33;
}
.vr-refpick-card header b { display: block; font-size: 13px; color: #ecf1f4; }
.vr-refpick-card header small { display: block; margin-top: 2px; font-size: 10.5px; color: #85929d; }
.vr-refpick-grid {
  flex: 1 1 auto; overflow: auto; padding: 12px 14px;
  display: grid; grid-template-columns: repeat(auto-fill, 108px); gap: 10px; justify-content: start;
}
.vr-refpick-item {
  display: grid; gap: 4px; padding: 0; cursor: pointer; text-align: left;
  border: 1px solid #2b333b; border-radius: 8px; background: #171d22; overflow: hidden;
}
.vr-refpick-item:hover { border-color: var(--green, #6ed6ad); }
.vr-refpick-item img { width: 100%; height: 108px; object-fit: cover; display: block; }
.vr-refpick-item span {
  padding: 0 6px 5px; font-size: 9.5px; color: #9aa2a8;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html[data-vr-theme="light"] .vr-refpick-card { background: #fff; border-color: #f0dade; }
html[data-vr-theme="light"] .vr-refpick-card header { border-color: #f2dade; }
html[data-vr-theme="light"] .vr-refpick-card header b { color: #2a2c31; }
html[data-vr-theme="light"] .vr-refpick-item { background: #fdf6f6; border-color: #f0dade; }
html[data-vr-theme="light"] .vr-reference-add { border-color: #eccdd3; background: #fff; color: #5d6167; }

/* 镜头面板整体收紧一行间距，少占高度 */
.vr-inspector .vr-form-grid { gap: 7px; }
.vr-inspector .vr-clip-mode-note { padding: 5px 8px; }
.vr-inspector .vr-clip-trace { padding: 6px 8px; }

/* ── 生成进度：【镜头】选项卡内的醒目进度块 ──
   用户要求：「把生成进度给我做的明显一点，做到镜头选项卡里面」。
   默认内嵌进 [data-slot="inspector"] 顶部（.is-inline，流式布局、占满整宽）；
   兜底挂在 body 上时用 fixed 贴住面板（z-index 压过 #video-remix-host 的 1000）。 */
.xhs-vr-progress {
  --pg-accent: #35e0a1;
  --pg-accent-dim: rgba(53, 224, 161, .18);
  --pg-track: rgba(255, 255, 255, .1);
  position: fixed; z-index: 1200;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 13px;
  border: 1px solid rgba(53, 224, 161, .5);
  border-left: 3px solid var(--pg-accent);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(16, 32, 28, .98), rgba(11, 20, 18, .98));
  box-shadow: 0 8px 26px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .05);
  pointer-events: auto;
}
/* 内嵌模式：不再 fixed，占满面板宽度、跟着面板滚动 */
.xhs-vr-progress.is-inline {
  position: static; z-index: auto;
  width: auto; margin: 0 0 12px;
  /* 【关键】.vr-inspector 是 flex column 容器，本面板作为它的子项
     默认 flex-shrink:1 —— 内容一多就被压扁成一行（实测高度只剩 26px，
     用户完全看不出这是个进度面板）。必须禁止收缩、按内容撑开高度。 */
  flex: 0 0 auto;
  align-self: stretch;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .05);
}
/* 内部容器同样禁止收缩，并允许换行，避免子项被挤成一行 */
.xhs-vr-progress.is-inline .xhs-vr-pg-main { flex: 0 0 auto; }
.xhs-vr-progress.is-inline .xhs-vr-pg-actions { flex: 0 0 auto; }
/* 运行中：顶部加一条流动的高光，一眼就知道"在动" */
.xhs-vr-progress.is-run { position: relative; overflow: hidden; }
.xhs-vr-progress.is-run::after {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--pg-accent), transparent);
  animation: xhsVrPgSweep 1.6s linear infinite;
}
@keyframes xhsVrPgSweep { from { transform: translateX(-100%) } to { transform: translateX(100%) } }
.xhs-vr-progress[hidden] { display: none !important; }
.xhs-vr-pg-main { flex: 1 1 auto; min-width: 0; display: grid; gap: 7px; }

/* 标题行：大号粗体阶段名 + 右侧用时 */
.xhs-vr-pg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.xhs-vr-pg-head b { font-size: 15px; font-weight: 800; letter-spacing: .2px; color: #d9fff0; }
.xhs-vr-pg-time {
  flex: 0 0 auto; font-size: 11px; color: #8fa6a0; font-variant-numeric: tabular-nums;
  padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, .06);
}

/* 进度条：加粗到 10px，带条纹动效 + 发光，远远就能看见 */
.xhs-vr-pg-bar { display: flex; align-items: center; gap: 10px; }
.xhs-vr-pg-bar progress {
  flex: 1 1 auto; height: 10px; border: 0; border-radius: 999px;
  background: var(--pg-track); appearance: none; overflow: hidden;
}
.xhs-vr-pg-bar progress::-webkit-progress-bar { background: var(--pg-track); border-radius: 999px; }
.xhs-vr-pg-bar progress::-webkit-progress-value {
  border-radius: 999px;
  background: linear-gradient(90deg, #1fb98a, var(--pg-accent) 60%, #7dffcf);
  background-size: 200% 100%;
  box-shadow: 0 0 10px rgba(53, 224, 161, .6);
  animation: xhsVrPgStripe 1.8s linear infinite;
  transition: width .35s ease;
}
.xhs-vr-pg-bar progress::-moz-progress-bar {
  border-radius: 999px; background: linear-gradient(90deg, #1fb98a, var(--pg-accent));
}
@keyframes xhsVrPgStripe { from { background-position: 200% 0 } to { background-position: 0 0 } }
.xhs-vr-pg-bar b {
  flex: 0 0 auto; min-width: 46px; text-align: right;
  font-size: 15px; font-weight: 800; color: var(--pg-accent);
  font-variant-numeric: tabular-nums; text-shadow: 0 0 10px rgba(53, 224, 161, .35);
}
.xhs-vr-pg-step { font-size: 11px; color: #8fa6a0; }
.xhs-vr-pg-foot { display: flex; }
.xhs-vr-pg-note { margin: 2px 0 0; font-size: 11px; line-height: 1.55; color: #f2b96d; }
.xhs-vr-pg-err { margin: 2px 0 0; font-size: 11px; line-height: 1.55; color: #ff9d9d; overflow-wrap: anywhere; }
.xhs-vr-pg-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* 多镜头：逐条列出每个镜头，左侧带小进度条 */
.xhs-vr-pg-list { margin: 2px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.xhs-vr-pg-list li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 7px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .05);
  font-size: 11.5px;
}
.xhs-vr-pg-list li span { color: #93a8a2; font-weight: 600; white-space: nowrap; }
.xhs-vr-pg-list li b { color: #e2fff4; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xhs-vr-pg-list li em {
  color: var(--pg-accent); font-style: normal; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.xhs-vr-pg-list li.is-stuck { background: rgba(242, 185, 109, .14); border-color: rgba(242, 185, 109, .3); }
.xhs-vr-pg-list li.is-stuck em { color: #f2b96d; }
.xhs-vr-pg-btn {
  height: 26px; padding: 0 10px; cursor: pointer; font: inherit; font-size: 11.5px;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 7px;
  background: rgba(255, 255, 255, .05); color: #cfd6db;
}
.xhs-vr-pg-btn:hover { border-color: rgba(110, 214, 173, .55); color: #fff; }
.xhs-vr-pg-btn.is-primary { border-color: #6ed6ad; background: #6ed6ad; color: #071510; font-weight: 650; }
.xhs-vr-pg-btn.is-warn { border-color: #f2b96d; color: #f2b96d; }
/* 状态配色 */
.xhs-vr-progress.is-fail { border-color: rgba(239, 125, 125, .55); }
.xhs-vr-progress.is-fail .xhs-vr-pg-head b { color: #ff9d9d; }
.xhs-vr-progress.is-done { border-color: rgba(110, 214, 173, .5); }
.xhs-vr-progress.is-done .xhs-vr-pg-head b { color: #a9ecd2; }
/* 空闲（没在跑）：低调但始终可见 —— 用户要求"随时能看生成状态" */
.xhs-vr-progress.is-idle {
  border-color: rgba(255, 255, 255, .14);
  border-left-color: rgba(255, 255, 255, .22);
  background: linear-gradient(180deg, rgba(21, 26, 30, .96), rgba(16, 20, 23, .96));
}
.xhs-vr-progress.is-idle .xhs-vr-pg-head b { color: #cfd9d6; }
.xhs-vr-progress.is-idle .xhs-vr-pg-bar progress::-webkit-progress-value { background: #5b6b68; box-shadow: none; animation: none; }
.xhs-vr-progress.is-idle .xhs-vr-pg-bar b { color: #9aa8a4; text-shadow: none; }
.xhs-vr-progress.is-idle { overflow: hidden; }
.xhs-vr-progress.is-idle::after { display: none; }

/* 每个镜头的状态行：按状态着色，一眼区分 */
.xhs-vr-pg-list li.tone-idle { background: rgba(255, 255, 255, .035); }
.xhs-vr-pg-list li.tone-idle b { color: #9db0ab; }
.xhs-vr-pg-list li.tone-idle em { color: #7d8c88; }
.xhs-vr-pg-list li.tone-run { background: rgba(53, 224, 161, .12); border-color: rgba(53, 224, 161, .28); }
.xhs-vr-pg-list li.tone-run b { color: #b9ffe4; }
.xhs-vr-pg-list li.tone-run em { color: var(--pg-accent); }
.xhs-vr-pg-list li.tone-done { background: rgba(110, 214, 173, .09); }
.xhs-vr-pg-list li.tone-done b { color: #93e8c6; }
.xhs-vr-pg-list li.tone-done em { color: #6ed6ad; }
.xhs-vr-pg-list li.tone-fail { background: rgba(239, 125, 125, .13); border-color: rgba(239, 125, 125, .3); }
.xhs-vr-pg-list li.tone-fail b { color: #ffb3b3; }
.xhs-vr-pg-list li.tone-fail em { color: #ff9d9d; }

/* 日间模式 */
html[data-vr-theme="light"] .xhs-vr-progress {
  --pg-accent: #12a877;
  --pg-track: #e8eeec;
  border-color: rgba(18, 168, 119, .5);
  background: linear-gradient(180deg, #ffffff, #f7fbfa);
  box-shadow: 0 6px 20px rgba(120, 70, 80, .14);
}
html[data-vr-theme="light"] .xhs-vr-pg-head b { color: #14624a; }
html[data-vr-theme="light"] .xhs-vr-pg-time { color: #6f7b78; background: rgba(0, 0, 0, .05); }
html[data-vr-theme="light"] .xhs-vr-pg-bar progress::-webkit-progress-bar { background: #e8eeec; }
html[data-vr-theme="light"] .xhs-vr-pg-bar progress::-webkit-progress-value {
  background: linear-gradient(90deg, #0d8a61, #12a877 60%, #35d3a0);
  box-shadow: 0 0 8px rgba(18, 168, 119, .45);
}
html[data-vr-theme="light"] .xhs-vr-pg-bar b { color: #0f8a62; text-shadow: none; }
html[data-vr-theme="light"] .xhs-vr-pg-step { color: #6f7b78; }
html[data-vr-theme="light"] .xhs-vr-pg-list li { background: #f4f8f7; border-color: #e6eeec; }
html[data-vr-theme="light"] .xhs-vr-pg-list li span { color: #6f7b78; }
html[data-vr-theme="light"] .xhs-vr-pg-list li b { color: #1d3b33; }
html[data-vr-theme="light"] .xhs-vr-pg-list li em { color: #0f8a62; }
html[data-vr-theme="light"] .xhs-vr-pg-list li.is-stuck { background: #fdf3e2; border-color: #f0dcbc; }
html[data-vr-theme="light"] .xhs-vr-pg-list li.is-stuck em { color: #c8801f; }
html[data-vr-theme="light"] .xhs-vr-pg-btn { border-color: #eccdd3; background: #fff; color: #5d6167; }
html[data-vr-theme="light"] .xhs-vr-pg-btn.is-primary { border-color: #35a97a; background: #35a97a; color: #fff; }
html[data-vr-theme="light"] .xhs-vr-pg-note { color: #c8801f; }
html[data-vr-theme="light"] .xhs-vr-pg-list li { background: #f6f9f8; }
html[data-vr-theme="light"] .xhs-vr-pg-list li span { color: #8d9099; }
html[data-vr-theme="light"] .xhs-vr-pg-list li b { color: #24413a; }
html[data-vr-theme="light"] .xhs-vr-pg-list li em { color: #1f9d6d; }
html[data-vr-theme="light"] .xhs-vr-pg-list li.is-stuck { background: #fdf3e2; }
html[data-vr-theme="light"] .xhs-vr-pg-list li.is-stuck em { color: #c8801f; }
html[data-vr-theme="light"] .xhs-vr-pg-err { color: #d8402f; }

/* ── 时间线两行：第一行成片、第二行片段 ── */
.vr-track-row-merged { display: block; padding-bottom: 4px; }
.vr-track-row-clips { display: block; }
/* 两行之间给一条淡淡的分隔，视觉上明确"上面是成片、下面是片段" */
.vr-track-row-merged + .vr-track-row-clips { border-top: 1px dashed rgba(255, 255, 255, .08); margin-top: 4px; padding-top: 6px; }
html[data-vr-theme="light"] .vr-track-row-merged + .vr-track-row-clips { border-top-color: #f0dade; }
/* 成片为空时的占位要弱化（用户要求：辅助/无内容状态弱化或隐藏） */
.vr-track-item.is-empty {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 11px; border: 1px dashed rgba(255, 255, 255, .12);
  border-radius: 8px; background: transparent; color: #6d7883;
}
.vr-track-item.is-empty b { font-size: 11.5px; font-weight: 500; }
.vr-track-item.is-empty small { font-size: 10.5px; color: #5f6970; }
html[data-vr-theme="light"] .vr-track-item.is-empty { border-color: #ece3e5; color: #9aa0a8; }
html[data-vr-theme="light"] .vr-track-item.is-empty small { color: #a9adb4; }