/* ══════════════════════════════════════════════════════════════════════
   补回被 CSS 截断丢失的规则（实测修复）
   ══════════════════════════════════════════════════════════════════════
   背景：dist/video-remix.css 第 1 行曾在第 2013 字符处被截断，
   截断点正好落在 `.vr-b...`（即 .vr-btn-ghost 开头），
   于是从那条起、到该行结束为止的规则【整段丢失】，
   而且这个损坏版本一路进了 0.3.39 ~ 0.11.9 的每个安装包。

   实测排查方式：把 JS 里用到的所有 .vr-* 类 与 CSS 里定义过的比对，
   找出 21 个「JS 在用、CSS 完全没有」的类；再在实时界面里逐个量
   computed style，确认它们确实渲染成了“零样式”（透明背景、无边框、无圆角）。
   下面按项目既有视觉语言（深色面板 + 细描边 + 圆角 + 次要文字灰）补回。
   ══════════════════════════════════════════════════════════════════════ */

/* ── 空状态 / 占位（画布与检查器无内容时）── */
.vr-canvas-empty,
.vr-canvas-placeholder,
.vr-inspector-empty,
.vr-stage-empty-title {
  display: block;
  color: #85929d;
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
}
.vr-canvas-empty,
.vr-canvas-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 6px;
  padding: 18px;
  background: linear-gradient(180deg, #0c1013, #0a0d10);
}
.vr-stage-empty-title { font-size: 13px; color: #aeb7be; }
.vr-inspector-empty {
  padding: 18px 14px;
  border: 1px dashed rgba(255, 255, 255, .12);
  border-radius: 9px;
  background: rgba(255, 255, 255, .02);
}

/* ── 镜头提示词编辑器（实测：286×175 却零样式）── */
.vr-prompt-editor {
  display: block;
  width: 100%;
  min-height: 120px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 9px;
  background: rgba(0, 0, 0, .22);
  color: #dde4e8;
  font: 12.5px/1.7 ui-sans-serif, system-ui, -apple-system, "PingFang SC", sans-serif;
  resize: vertical;
}
.vr-prompt-editor:focus {
  outline: none;
  border-color: rgba(110, 214, 173, .6);
  background: rgba(0, 0, 0, .3);
}
.vr-prompt-editor::placeholder { color: #66707a; }

.vr-prompt-tools {
  display: flex;
  /* 【用户要求】提示词下面的按钮必须挤在一行。
     8 个元素（字数 + AI优化 + 复制 + 撤销 + 清空 + 剪贴板 + ＋镜头语言…）
     在 300px 宽的面板里放不下，所以：
       ① 禁止换行；
       ② 按钮允许收缩（min-width:0 + 缩小 padding/字号）；
       ③ 文案长的按钮（从剪贴板粘贴 / ＋镜头语言）自动缩短显示。
     溢出时横向滚动，保证永远是一行。 */
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.vr-prompt-tools::-webkit-scrollbar { display: none; }
.vr-prompt-tools .vr-btn {
  /* 【不能收缩】曾经用 flex:0 1 auto，按钮被压到 18px 宽、文字全裁掉。
     现在固定按内容宽度排，靠横向滚动容纳，保证永远是一行。 */
  flex: 0 0 auto !important;
  height: 24px;
  padding: 0 7px;
  font-size: 10.5px;
  white-space: nowrap;
  overflow: visible;
}
.vr-prompt-tools .vr-btn-primary {
  height: 24px;
  padding: 0 8px;
  font-size: 10.5px;
}
/* 【关键的真凶】工具行末尾那个说明用的 <small>（"回车换行 · ⌘A…"）
   带 flex-basis:100%，会强制独占一整行，把按钮全挤到上面去 —— 
   用户看到的就是"排成了两行/三行"。这里解除它的整行占位。 */
.vr-prompt-tools > small,
.vr-prompt-tools .vr-prompt-hint {
  flex: 0 0 auto !important;
  order: 100;
  white-space: nowrap;
  font-size: 9.5px;
}
.vr-prompt-tools .vr-prompt-count {
  flex: 0 0 auto !important;
  margin-left: 0;
  order: 98;
  font-size: 10px;
  white-space: nowrap;
}
.vr-prompt-count {
  /* 【配合单行】不再 margin-left:auto 推到最右（会把按钮挤到下一行），
     改由 .vr-prompt-tools .vr-prompt-count 用 order 放在行尾。 */
  margin-left: 0;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
  font-size: 10.5px;
  color: #85929d;
  font-variant-numeric: tabular-nums;
}

/* ── 生成提示 / 进度 ── */
.vr-gen-hint {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.6;
  color: #85929d;
}
.vr-batch-progress,
.vr-clip-progress,
.vr-merge-progress,
.vr-merge-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #aeb7be;
  font-variant-numeric: tabular-nums;
}
.vr-merge-summary { color: #85929d; }
.vr-batch-progress progress,
.vr-clip-progress progress,
.vr-merge-progress progress {
  flex: 1 1 auto;
  height: 5px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  appearance: none;
}
.vr-batch-progress progress::-webkit-progress-bar,
.vr-clip-progress progress::-webkit-progress-bar,
.vr-merge-progress progress::-webkit-progress-bar { background: rgba(255, 255, 255, .1); border-radius: 999px; }
.vr-batch-progress progress::-webkit-progress-value,
.vr-clip-progress progress::-webkit-progress-value,
.vr-merge-progress progress::-webkit-progress-value { background: #6ed6ad; border-radius: 999px; }

/* ── 合并预览 ── */
.vr-merged-preview {
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 9px;
  background: rgba(255, 255, 255, .02);
  padding: 9px;
}

/* ── 文件选择按钮（音字面板导入旁白/背景音）── */
.vr-file-button {
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 12px;
  border: 1px dashed rgba(255, 255, 255, .18);
  border-radius: 9px;
  background: rgba(255, 255, 255, .02);
  color: #aeb7be;
  font-size: 12px;
  cursor: pointer;
  text-align: center;
}
.vr-file-button:hover {
  border-color: rgba(110, 214, 173, .55);
  background: rgba(110, 214, 173, .07);
  color: #d6f3e6;
}
.vr-file-button input[type="file"] { display: none; }

/* ── 开关行（音字面板的音量/语速等）── */
.vr-switch {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.vr-switch > span,
.vr-switch > label {
  font-size: 11px;
  color: #85929d;
}
.vr-switch input[type="range"] { width: 100%; }
.vr-full { width: 100%; }

/* ── 文本输入框（字数计数那种小框）── */
.vr-prompt-tools input[type="text"],
.vr-switch input[type="text"] {
  height: 26px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 7px;
  background: rgba(0, 0, 0, .22);
  color: #dde4e8;
  font-size: 12px;
}

/* ── 字幕轨（动态类名 vr-track-<kind>，其中 caption/thumb 是实际用到的）── */
.vr-track-caption,
.vr-track-thumb {
  min-width: 0;
  overflow: hidden;
}
.vr-track-caption .vr-track-item,
.vr-track-thumb .vr-track-item {
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 5px;
  background: rgba(255, 255, 255, .06);
}

/* ── 主题切换时的过渡（原来无规则，切主题会突兀）── */
.vr-theme-change,
.vr-theme-change * {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

/* ── 右下角缩放把手 ── */
.vr-title-handle-se,
.vr-subtitle-handle {
  box-shadow: 0 0 0 2px rgba(217, 242, 96, .35);
}

/* ══ 日间模式 ══ */
html[data-vr-theme="light"] .vr-canvas-empty,
html[data-vr-theme="light"] .vr-canvas-placeholder {
  background: linear-gradient(180deg, #fdf6f6, #fbf0f1);
  color: #8d9099;
}
html[data-vr-theme="light"] .vr-inspector-empty { border-color: #f0dade; background: #fdf8f8; color: #8d9099; }
html[data-vr-theme="light"] .vr-stage-empty-title { color: #5d6167; }
html[data-vr-theme="light"] .vr-prompt-editor { border-color: #eed7db; background: #fff; color: #2a2c31; }
html[data-vr-theme="light"] .vr-prompt-editor::placeholder { color: #a9adb4; }
html[data-vr-theme="light"] .vr-prompt-count { border-color: #f0dade; background: #fdf6f6; color: #8d9099; }
html[data-vr-theme="light"] .vr-gen-hint { color: #8d9099; }
html[data-vr-theme="light"] .vr-batch-progress,
html[data-vr-theme="light"] .vr-clip-progress,
html[data-vr-theme="light"] .vr-merge-progress { color: #5d6167; }
html[data-vr-theme="light"] .vr-merge-summary { color: #8d9099; }
html[data-vr-theme="light"] .vr-batch-progress progress::-webkit-progress-bar,
html[data-vr-theme="light"] .vr-clip-progress progress::-webkit-progress-bar,
html[data-vr-theme="light"] .vr-merge-progress progress::-webkit-progress-bar { background: #f2dade; }
html[data-vr-theme="light"] .vr-merged-preview { border-color: #f0dade; background: #fff; }
html[data-vr-theme="light"] .vr-file-button { border-color: #eccdd3; background: #fff; color: #5d6167; }
html[data-vr-theme="light"] .vr-file-button:hover { border-color: #35a97a; background: #effaf5; color: #1f7a58; }
html[data-vr-theme="light"] .vr-switch > span,
html[data-vr-theme="light"] .vr-switch > label { color: #8d9099; }
html[data-vr-theme="light"] .vr-prompt-tools input[type="text"],
html[data-vr-theme="light"] .vr-switch input[type="text"] { border-color: #eed7db; background: #fff; color: #2a2c31; }
html[data-vr-theme="light"] .vr-track-caption .vr-track-item,
html[data-vr-theme="light"] .vr-track-thumb .vr-track-item { border-color: #f0dade; background: #fdf6f6; }