:root {
  --bg: #f5f6fa;
  --card: #ffffff;
  --text: #1f2329;
  --muted: #8a909c;
  --border: #e4e7ee;
  --brand: #6c5ce7;
  --brand-dark: #5a4bd1;
  --ok: #12b76a;
  --warn: #f79009;
  --err: #f04438;
  --radius: 14px;
  --shadow: 0 2px 12px rgba(31, 35, 41, .06);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---- 顶栏 ---- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 16px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
  z-index: 10;
}
.logo { display: flex; align-items: center; gap: 10px; }
.logo-mark {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #6c5ce7, #a29bfe);
  color: #fff; font-size: 18px;
  border-radius: 12px;
}
.logo h1 { font-size: 16px; font-weight: 700; display:flex; align-items:center; gap:7px; }
.logo .brand-en { font-size: 11px; font-weight: 500; color: #5f6368; background: rgba(0,0,0,.06); padding: 1px 6px; border-radius: 999px; }
.logo-img { width: 32px; height: 32px; border-radius: 9px; object-fit: cover; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.logo p { font-size: 11px; color: var(--muted); margin-top: 1px; }

.view-tabs {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg); padding: 4px; border-radius: 10px;
  border: 1px solid var(--border);
}
.view-tab {
  padding: 7px 16px; border-radius: 8px; text-decoration: none;
  font-size: 14px; color: var(--muted); transition: all .15s;
}
.view-tab:hover { color: var(--text); }
.view-tab.active { background: var(--card); color: var(--brand); font-weight: 600; box-shadow: var(--shadow); }

/* ---- 三栏工作台：栏宽可拖拽调节 ---- */
.workbench {
  display: flex;
  padding: 16px 20px;
  flex: 1;
  min-height: 0;              /* 让子栏可内部滚动 */
  gap: 0;
}

.col {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  min-width: 250px;
}

/* 左右栏可被拖宽，但窗口变窄时允许收缩（flex-shrink:1），保证内容永远不被裁出屏幕 */
#col-left  { flex: 0 1 380px; min-width: 230px; }
#col-center {
  flex: 1 1 auto;
  min-width: 300px;
  justify-content: flex-start;
}
#col-right {
  flex: 0 1 430px;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  /* 整栏不再滚动：生成结果面板固定高度，视频完整显示，历史任务在下方独立滚动 */
  overflow: hidden;
}
/* 右栏整体滚动条：与中栏一致的可拖拽细条 */
#col-right::-webkit-scrollbar { width: 10px; }
#col-right::-webkit-scrollbar-track { background: transparent; }
#col-right::-webkit-scrollbar-thumb {
  background: #c6c9d1;
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: content-box;
}
#col-right::-webkit-scrollbar-thumb:hover { background: var(--brand); }
#col-right::-webkit-scrollbar-corner { background: transparent; }

/* 栏间拖拽分隔条 */
.splitter {
  flex: 0 0 12px;
  cursor: col-resize;
  position: relative;
  touch-action: none;
}
.splitter::before {
  content: '';
  position: absolute;
  left: 5px; top: 0; bottom: 0;
  width: 2px;
  border-radius: 2px;
  background: transparent;
  transition: background .15s;
}
.splitter:hover::before, .splitter.active::before { background: var(--brand); }

/* 中栏描述框占满弹性空间，且本身可自由拉伸 */
#col-center textarea {
  flex: 0 0 auto;
  min-height: 220px;
  max-height: none;
  resize: both;
  line-height: 1.7;
}
#col-center .btn.block { margin-top: 16px; padding: 14px; font-size: 16px; }

/* 窄屏降级：纵向堆叠，分隔条隐藏 */
@media (max-width: 1080px) {
  .workbench { flex-direction: column; overflow-y: auto; }
  .col { flex: 0 0 auto !important; min-width: 0; overflow: visible; }
  .splitter { display: none; }
  body { overflow: auto; }
  #video-player { max-height: 300px; }
}

.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}
.panel-title { font-size: 15px; margin-bottom: 12px; }

/* ---- 表单 ---- */
.tabs { display: flex; gap: 8px; margin-bottom: 18px; background: var(--bg); padding: 4px; border-radius: 10px; }
.tab {
  flex: 1; padding: 9px 0; border: none; background: transparent;
  border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--muted);
}
.tab.active { background: var(--card); color: var(--brand); font-weight: 600; box-shadow: var(--shadow); }

.field-label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 6px; }
textarea, input[type="text"], input[type="password"], select, .img-url-row input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  background: #fbfbfd;
  outline: none;
  transition: border .15s;
}
textarea:focus, input:focus, select:focus { border-color: var(--brand); background: #fff; }
textarea { resize: both; min-height: 100px; overflow: auto; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

input[type="range"] { width: 100%; accent-color: var(--brand); margin-top: 4px; }

.img-url-row { display: flex; gap: 8px; margin-bottom: 8px; }
.img-url-row .btn-del { flex: 0 0 auto; }

/* ---- 参考素材 ---- */
.ref-group { margin-top: 16px; padding: 12px; border: 1px dashed var(--border); border-radius: 12px; background: #fbfbfd; }
.ref-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.field-label.no-margin { margin: 0; }
.ref-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.count { font-size: 11px; color: var(--muted); font-weight: 400; margin-left: 4px; }
.ref-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.ref-list:empty { margin-top: 0; }

.ref-item {
  position: relative; width: 104px; border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden; background: var(--card);
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.ref-item.clickable { cursor: pointer; }
.ref-item.clickable:hover {
  border-color: var(--brand); box-shadow: 0 4px 14px rgba(108,92,231,.18); transform: translateY(-1px);
}
.ref-item.clickable .name { color: var(--brand); }
.ref-item .thumb {
  width: 104px; height: 78px; display: grid; place-items: center;
  background: #eef0f5; color: var(--muted); font-size: 20px; overflow: hidden;
}
.ref-item img, .ref-item video { width: 104px; height: 78px; object-fit: cover; display: block; }
.ref-item .name {
  font-size: 11px; color: var(--text); padding: 4px 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ref-item .ref-tag {
  display: inline-block; font-size: 9px; color: var(--muted);
  background: var(--bg); border-radius: 4px; padding: 0 4px; margin-right: 4px;
  vertical-align: middle;
}
.ref-item .ref-src { float: right; color: var(--muted); font-size: 10px; }
.ref-item .badge-src {
  position: absolute; top: 4px; left: 4px; font-size: 10px;
  background: rgba(31,35,41,.72); color: #fff; padding: 2px 6px; border-radius: 6px;
}
.ref-item .state {
  position: absolute; inset: 0 0 22px 0; display: grid; place-items: center;
  background: rgba(255,255,255,.75); font-size: 11px; color: var(--text); font-weight: 600;
}
.ref-item .del {
  position: absolute; top: 3px; right: 3px; width: 20px; height: 20px;
  border: none; border-radius: 50%; background: rgba(240,68,56,.9); color: #fff;
  font-size: 11px; line-height: 1; cursor: pointer;
}
.ref-item.audio-item { width: 220px; }
.ref-item.audio-item .thumb { width: 220px; height: 40px; font-size: 13px; }
.ref-item.audio-item audio { width: 220px; height: 36px; display: block; }
.ref-item.audio-item .state { inset: 0 0 18px 0; }

/* ---- @引用候选浮层 ---- */
.at-popover {
  position: fixed; z-index: 1000; min-width: 260px; max-width: 360px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 10px 32px rgba(20, 22, 36, .18);
  padding: 6px; max-height: 320px; overflow-y: auto; font-size: 13px;
}
.at-popover .at-empty { padding: 14px; color: var(--muted); text-align: center; }
.at-popover .at-head {
  font-size: 11px; color: var(--muted); padding: 6px 10px 2px;
  text-transform: uppercase; letter-spacing: .05em;
}
.at-popover .at-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer; user-select: none;
}
.at-popover .at-item:hover, .at-popover .at-item.active {
  background: linear-gradient(135deg, rgba(108,92,231,.10), rgba(162,155,254,.10));
  outline: 1px solid rgba(108,92,231,.35);
}
.at-popover .at-item .at-thumb {
  width: 36px; height: 36px; border-radius: 6px; background: #eef0f5;
  display: grid; place-items: center; overflow: hidden; flex: 0 0 auto;
  font-size: 16px; color: var(--muted);
}
.at-popover .at-item .at-thumb img, .at-popover .at-item .at-thumb video {
  width: 100%; height: 100%; object-fit: cover;
}
.at-popover .at-item .at-meta { min-width: 0; flex: 1; }
.at-popover .at-item .at-tag { font-weight: 600; color: var(--brand); font-size: 13px; }
.at-popover .at-item .at-name {
  color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 200px;
}
.at-popover .at-hint {
  padding: 8px 10px; font-size: 11px; color: var(--muted);
  border-top: 1px dashed var(--border); margin-top: 4px;
  display: flex; gap: 10px; flex-wrap: wrap;
}
.at-popover .at-hint kbd {
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  border: 1px solid var(--border); background: #f5f6fa; font-family: ui-monospace, monospace;
  font-size: 10px;
}

.tip { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.6; }

/* ---- AI 工具：标签页 / 聊天 / 文生图 ---- */
.tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.tab {
  flex: 1; padding: 7px 0; font-size: 12.5px;
  background: transparent; border: 1px solid var(--border); border-radius: 8px;
  color: var(--muted); cursor: pointer; transition: all .15s;
}
.tab.active { background: var(--brand); border-color: var(--brand); color: #fff; }

.chat-log {
  max-height: 240px; min-height: 90px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px; display: flex; flex-direction: column; gap: 8px;
  background: var(--bg);
}
.chat-sys { font-size: 12px; color: var(--muted); line-height: 1.6; }
.chat-msg { font-size: 13px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
.chat-msg.user { align-self: flex-end; background: var(--brand); color: #fff; padding: 6px 10px; border-radius: 10px 10px 2px 10px; max-width: 88%; }
.chat-msg.assistant { align-self: flex-start; background: var(--card); border: 1px solid var(--border); padding: 6px 10px; border-radius: 10px 10px 10px 2px; max-width: 92%; }
.chat-msg .adopt-btn { display: block; margin-top: 6px; }

.chat-quick { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.chat-input-row { display: flex; gap: 8px; }
.chat-input-row input { flex: 1; }

#pane-imggen textarea { width: 100%; min-height: 64px; resize: both; max-width: 100%; }
#img-result { margin-top: 10px; text-align: center; }
#img-output { max-width: 100%; border-radius: 10px; border: 1px solid var(--border); }

/* ---- 设置：服务商管理 ---- */
.settings-divider { border-top: 1px dashed var(--border); margin: 16px 0 12px; }
.provider-head-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.provider-card {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 10px; background: var(--bg);
}
.provider-card .pc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.provider-card .pc-head select { flex: 0 0 150px; }
.provider-card .pc-head input { flex: 1; }
.provider-card .btn-del-provider { border: none; background: none; color: #e05252; cursor: pointer; font-size: 15px; padding: 4px; }
.provider-card .tip { margin-top: 4px; }
.model-provider-tag { color: var(--brand); }
.tip a { color: var(--brand); }
.cost-tip { font-size: 12px; color: var(--muted); text-align: center; margin-top: 10px; }

/* ---- 提示词优化（画面描述下方） ---- */
.prompt-optimize { margin-top: 10px; }
.opt-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.opt-row select {
  flex: 0 0 auto;
  max-width: 200px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  font-size: 13px;
}
.opt-row input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
}
.opt-row .btn { flex: 0 0 auto; white-space: nowrap; }
.opt-result {
  position: relative;
  margin-top: 8px;
  margin-left: auto;   /* 右对齐：从左侧拖动手柄即可调宽 */
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--brand);
  border-radius: 12px;
  background: rgba(108, 92, 231, 0.06);
  padding: 10px 12px;
}
/* 结果框左边缘拖动柄：横向拖拽调节宽度 */
.opt-drag-left {
  position: absolute;
  left: -3px; top: 0; bottom: 0;
  width: 12px;
  cursor: ew-resize;
  z-index: 4;
  border-radius: 12px 0 0 12px;
}
.opt-drag-left::before {
  content: '';
  position: absolute;
  left: 4px; top: 20%; bottom: 20%;
  width: 3px;
  border-radius: 2px;
  background: rgba(108, 92, 231, .25);
}
.opt-drag-left:hover::before { background: var(--brand); }
.opt-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand);
  margin-bottom: 6px;
}
.opt-close {
  border: none; background: transparent; cursor: pointer;
  color: var(--muted); font-size: 13px; padding: 2px 6px; border-radius: 6px;
}
.opt-close:hover { background: rgba(0,0,0,.08); color: var(--text); }
.opt-result-text {
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 180px;
  overflow-y: auto;
  color: var(--text);
}
.opt-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

/* ---- 按钮 ---- */
.btn {
  border: none; border-radius: 10px; cursor: pointer;
  font-size: 14px; padding: 10px 18px; font-family: inherit;
  transition: all .15s; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn.primary { background: var(--brand); color: #fff; font-weight: 600; }
.btn.primary:hover { background: var(--brand-dark); }
.btn.primary:disabled { opacity: .55; cursor: not-allowed; }
.btn.ghost { background: var(--card); border: 1px solid var(--border); color: var(--text); }
.btn.ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn.tiny { font-size: 12px; padding: 6px 12px; color: var(--brand); background: #f0eefe; }
.btn.block { width: 100%; margin-top: 18px; padding: 13px; font-size: 15px; }
.btn.del { background: #feeceb; color: var(--err); padding: 8px 12px; }

/* ---- 状态区（紧凑，尽量让位给视频/历史工作区） ---- */
.status-area { min-height: 0; }
.status-area .placeholder { padding: 10px 0; font-size: 12px; }
.placeholder { color: var(--muted); font-size: 14px; padding: 24px 0; text-align: center; }

.status-card {
  padding: 8px 12px; border-radius: 8px; font-size: 12.5px;
  display: flex; align-items: center; gap: 10px;
}
.status-card .spinner { width: 14px; height: 14px; }
.status-card.pending { background: #fff7e8; color: var(--warn); }
.status-card.processing { background: #eef4ff; color: #1570ef; }
.status-card.completed { background: #ecfdf3; color: var(--ok); }
.status-card.failed { background: #feeceb; color: var(--err); }
.status-card.submitting { background: #f4f0ff; color: #6c5ce7; }
.status-card.submit_failed { background: #feeceb; color: var(--err); }
.status-card .btn.tiny { margin-left: auto; flex-shrink: 0; }

.spinner {
  width: 18px; height: 18px; flex: 0 0 auto;
  border: 2px solid rgba(0,0,0,.12); border-top-color: currentColor;
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- 可缩放/可最小化的视频结果面板 ---- */
.video-area {
  position: relative;
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow);
  overflow: hidden;
  /* 默认高度，最小化时会被脚本切换 */
  min-height: 120px;
  transition: min-height .2s, padding .2s;
  /* 永远不超过所在栏的宽度：窗口再窄也不会把缩放柄/文字挤出屏幕 */
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}
.video-area.minimized { min-height: 0; height: 0; padding: 0; border: none; overflow: hidden; }
/* 悬浮在视频右上角的最小化按钮（原标题条已去掉，节省纵向空间） */
.video-minimize-float {
  position: absolute; top: 8px; right: 8px; z-index: 6;
  padding: 4px 10px; font-size: 13px; line-height: 1;
  background: rgba(255,255,255,.85); backdrop-filter: blur(4px);
  border: 1px solid var(--border); border-radius: 8px;
}
.video-minimize-float:hover { background: #fff; border-color: var(--brand); }
.video-body { padding: 12px; }
#video-player {
  width: 100%; max-height: 460px; border-radius: 10px;
  background: #000; outline: none;
  display: block;
  /* 始终完整显示整幅画面（不足则留黑边），绝不裁切、不变形；面板缩小画面跟着缩小 */
  object-fit: contain;
}
.video-actions { display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.video-actions .meta { font-size: 12px; color: var(--muted); word-break: break-word; }
/* 右下角拖拽缩放手柄（内收 4px 保证在任何窗口宽度下都可见可点） */
.video-resize {
  position: absolute; right: 4px; bottom: 4px;
  width: 26px; height: 26px;
  cursor: se-resize;
  z-index: 5;
  border-radius: 8px;
  background:
    linear-gradient(135deg, transparent 46%, rgba(108,92,231,.45) 46%);
  box-shadow: 0 0 0 1px rgba(108,92,231,.25) inset;
}
.video-resize:hover { background: linear-gradient(135deg, transparent 30%, var(--brand) 30%); box-shadow: 0 0 0 1px var(--brand) inset; }
/* 最小化状态条 */
.video-minibar {
  margin-top: 14px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fbfbfd;
  font-size: 14px; font-weight: 600;
}
.video-minibar .btn.tiny { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ---- 历史任务（独立滚动 + 显式滚动条） ---- */
/* 失败任务的具体原因（服务端/服务商返回的错误信息） */
.hist-error {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--err);
  word-break: break-word;
  /* 失败原因限高 3 行：长报错曾把失败卡撑成大竖条，被误读为"预览变竖屏"；点击卡片该区可展开全文 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: pointer;
}
.hist-error.expanded { display: block; -webkit-line-clamp: unset; overflow: visible; white-space: pre-wrap; }
.history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 18px;
}
.panel-title.no-margin { margin-bottom: 0; }
.history-scroll {
  flex: 1 1 0;
  min-height: 140px;
  margin-top: 12px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  padding: 10px;
}
/* 自定义滚动条：与左栏参考素材区一致的可拖拽细条 */
.history-scroll::-webkit-scrollbar {
  width: 8px;
}
.history-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.history-scroll::-webkit-scrollbar-thumb {
  background: #c6c9d1;
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.history-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--brand);
}
.history-scroll::-webkit-scrollbar-corner { background: transparent; }
.history {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin: 0;
}
.history .hist-empty { grid-column: 1 / -1; cursor: default; color: var(--muted); font-size: 13px; padding: 10px; }

/* 历史卡片「勾选下载」行 */
.hist-pick {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 0;
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.hist-pick input[type="checkbox"] {
  accent-color: var(--brand);
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.hist-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  cursor: pointer; transition: border .15s, box-shadow .15s; background: var(--card);
}
.hist-card:hover { border-color: var(--brand); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.hist-thumb {
  position: relative; width: 100%; aspect-ratio: 16/9; background: #000;
  display: flex; align-items: center; justify-content: center;
}
/* 按提交时的画面比例覆盖缩略图长宽比，避免横屏任务被压成竖屏 */
.hist-thumb.ratio-landscape { aspect-ratio: 16/9; }
.hist-thumb.ratio-portrait  { aspect-ratio: 9/16; }
.hist-thumb.ratio-square    { aspect-ratio: 1/1; }
.hist-thumb.ratio-cinema    { aspect-ratio: 21/9; }
/* 未完成（失败/提交中/找回中）卡片的紧凑占位：固定横条，不随提交比例拉成大竖框 */
.hist-thumb.hist-thumb-flat  { aspect-ratio: 16/9; }
.hist-thumb video,
.hist-thumb img.hist-poster,
.hist-thumb .hist-thumb-placeholder {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hist-thumb img.hist-poster { cursor: zoom-in; }
.hist-thumb-placeholder { display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--muted); background: #f4f5f7; }
.hist-status { position: absolute; right: 6px; top: 6px; font-size: 10px; padding: 2px 6px; border-radius: 12px; }
.hist-body { padding: 8px 10px; flex: 1; min-height: 0; }
.hist-meta { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.hist-prompt { font-size: 12px; color: var(--text); line-height: 1.35; max-height: 3.9em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.hist-actions { display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--border); }
.hist-actions .btn { flex: 1; font-size: 11px; padding: 5px 0; }

.badge { font-size: 11px; padding: 3px 8px; border-radius: 20px; flex: 0 0 auto; }
.badge.completed { background: #ecfdf3; color: var(--ok); }
.badge.processing { background: #eef4ff; color: #1570ef; }
.badge.pending { background: #fff7e8; color: var(--warn); }
.badge.failed { background: #feeceb; color: var(--err); }

/* ---- 弹窗 / Toast ---- */
.modal-mask {
  position: fixed; inset: 0; background: rgba(15,17,26,.45);
  display: grid; place-items: center; z-index: 100;
}
.modal {
  width: min(440px, calc(100vw - 40px));
  background: var(--card); border-radius: 16px; padding: 24px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
}
.modal h3 { font-size: 16px; margin-bottom: 6px; }
.modal-lg { width: min(680px, calc(100vw - 40px)); max-height: calc(100vh - 80px); overflow-y: auto; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* ---- 批量下载弹窗 ---- */
.batch-dl-list {
  margin-top: 12px; display: flex; flex-direction: column; gap: 8px;
  max-height: 320px; overflow-y: auto; padding-right: 4px;
}
.batch-dl-list::-webkit-scrollbar { width: 10px; }
.batch-dl-list::-webkit-scrollbar-thumb { background: var(--border, #c9cdd4); border-radius: 6px; }
.batch-dl-row { display: flex; align-items: center; gap: 10px; }
.batch-dl-badge {
  flex: 0 0 auto; font-size: 12px; color: var(--muted);
  min-width: 72px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.batch-dl-row input[type="text"] {
  flex: 1; min-width: 0; padding: 8px 10px; font-size: 13px;
  border: 1px solid var(--border, #d5d9e0); border-radius: 8px; background: var(--bg, #fff); color: inherit;
}
.batch-dl-row input[type="text"]:focus { outline: 2px solid var(--brand, #6c5ce7); outline-offset: -1px; }

.toast {
  position: fixed; left: 50%; bottom: 36px; transform: translateX(-50%);
  background: #1f2329; color: #fff; font-size: 13px;
  padding: 10px 18px; border-radius: 10px; z-index: 200;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  max-width: 80vw;
}

.footer { text-align: center; font-size: 11px; color: var(--muted); padding: 6px 14px; line-height: 1.45; }

.hidden { display: none !important; }

/* ---- 提示词内联素材缩略图（v124 重构，v126 贴片置顶） ----
 * 旧方案：textarea 文字透明 + 镜像层「替身文字」—— 两层渲染只要有一帧不同步
 * （行高切换首帧 / 滚动竞态 / 输入法组词），用户就看到光标与文字错位。
 * v124 方案：文字、光标、选区全部来自 textarea 本体（同层 = 结构性零偏移）；
 * 镜像层文字转透明、只负责测量与钉贴片。
 * v126：chip 提到文字上层（z-index:2 > textarea 的 1，见下），不透明贴片
 * 直接盖住 textarea 里的 @iN 文字——用户只看到缩略图。测量层即使偶有偏差
 * 也只是贴片偏移，光标与文字的一致性不依赖任何跨层同步。 */
#prompt { position: relative; z-index: 1; }
#prompt.prompt-inline-refs { caret-color: #333; background: transparent; }
/* 有 @ 引用时整体加大行高：给缩略图块留足高度（textarea 与贴片层同步） */
#prompt.prompt-inline-refs.pr-tall { line-height: 2.8; }
/* ★ v126：overlay 不能设 z-index（含 z-index:0）——设了就创建层叠上下文，
 * 内部 chip 的 z-index 就被锁死在本层之内，永远压不过 textarea(z-index:1) 的文字，
 * 用户就会看到「@iN 文字和图片贴片叠在一起」。z-index:auto 时不创建层叠上下文，
 * chip 的 z-index:2 直接参与父层竞争 → 盖住 textarea 文字。 */
.prompt-ref-overlay {
  position: absolute; margin: 0; box-sizing: border-box;
  border: 1px solid transparent; border-radius: 10px;
  background: #fbfbfd; overflow: hidden; pointer-events: none;
}
.prompt-ref-overlay.on-focus { background: #fff; }
/* box-sizing 必须与折行宽度精确匹配：width=ta.clientWidth（含 padding），border-box 后
 * 内容宽 = clientWidth - padding = textarea 内容宽。缺了这条，镜像层每行比 textarea
 * 多排 24px 的字，折行逐行累积漂移 → 贴片全错位（10-08 实锤）。 */
/* 镜像文字整体透明：只为 chip 定位测量，绝不参与显示（显示全部来自 textarea 本体） */
.prompt-ref-inner { position: relative; white-space: pre-wrap; overflow-wrap: break-word; box-sizing: border-box; color: transparent; }
/* token 外壳：★ v125 不能给 position:relative —— 行内元素的绝对定位子元素锚定
 * 「跨行包围盒」（token+补位空格换行时跨两行 → chip 浮到两行之间，本次事故根因）。
 * chip 统一改由 JS 钉位，锚定 .prompt-ref-inner（position:relative，与 textarea 同位）。 */
.pr-token { color: transparent; }
/* ★ v126：chip 在文字上层（z-index:2 > textarea 的 1）——不透明贴片直接盖住
 * textarea 里的 @iN 文字，用户只看到缩略图（overlay 不设 z-index 才能冒泡到此层）。
 * 钉位由 JS 完成（v125 Range 实测），宽度规则见 app.js 钉位块。 */
.pr-token .pr-chip {
  position: absolute; z-index: 2;
}
/* 缩略图块：铺满外壳（无空隙），图片 cover 裁切，图标类内容居中 */
.pr-chip {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; box-sizing: border-box;
  background-color: #e9e9f1; background-repeat: no-repeat;
  background-size: cover; background-position: center;
  border: 1px solid rgba(0,0,0,.08); border-radius: .32em;
  font-size: .82em;
}
.pr-chip.pr-audio { background-color: #2c3038; color: #fff; }
.pr-chip.pr-video { background-color: #565b66; color: #fff; }