/*!
 * VisionQA × BD Canvas —— 浅色纸面主题覆盖层（vq-theme.css）
 * ---------------------------------------------------------------------------
 * 本文件由 VisionQA 自研，只包含 CSS 自定义属性重定义与少量「硬编码色」收敛规则；
 * 不含任何 BD Canvas 源码、不复制其样式表、不删除或隐藏其版权声明、水印、署名与
 * 版本标识。依据 BD Canvas Source-Available License 3.2（为自用修改）使用，不对外分发。
 * BD Canvas 升级后重新执行 scripts/apply-bdc-theme.mjs 即可恢复。
 *
 * 设计语言（对齐 VisionQA tokens.css / docs/screenshot-canvas.png）：
 *   浅色纸面 #f4f4f4 画布 · 白色节点卡 · 发丝线 rgba(17,17,17,.10)
 *   近黑字 #111111 · 中性灰强调（无蓝紫）· 无发光只留投影 · 等宽元数据
 *   语义色仅在「通过 #176b43 / 待确认 #8a5b08 / 问题 #a33838」出现
 *
 * 分层：BD Canvas 的旧 token（--bg-* / --text-* / --border-* / --shadow-*
 * / --surface-* / --tx-*）在 legacyAliases.css 里已全部桥接到 --ui-* 语义层，
 * 因此这里只重定义「调色板 + --ui-* 语义层 + 少数未桥接的旧 token」，
 * 靠 CSS 变量继承一次性收口，不写新的布局规则。
 * 选择器用 :root:root 提高特异性：Vite 在运行时注入 <style>，普通 :root 会被其覆盖。
 */

/* ========================================================================== */
/* 1. 调色板：白纸 + 墨线，去掉全部蓝 / 青 / 紫                                  */
/* ========================================================================== */
:root:root,
html[data-theme="light"],
body[data-theme="light"],
.theme-light,
html[data-theme="dark"],
body[data-theme="dark"],
.theme-dark {
  color-scheme: light;

  --palette-graphite-950: #f4f4f4;
  --palette-graphite-900: #fbfbfb;
  --palette-graphite-850: #f7f7f7;
  --palette-graphite-800: #ffffff;
  --palette-graphite-750: #f0f0f0;
  --palette-graphite-700: #d8d8d8;
  --palette-graphite-600: #b4b4b4;
  --palette-graphite-400: #9a9a9a;
  --palette-graphite-300: #5d5d5d;
  --palette-graphite-100: #111111;
  --palette-graphite-050: #ffffff;

  --palette-cool-050: #fbfbfb;
  --palette-cool-100: #f6f6f6;
  --palette-cool-200: #ececec;
  --palette-cool-300: #dcdcdc;
  --palette-cool-400: #c4c4c4;
  --palette-cool-500: #8a8a8a;
  --palette-cool-650: #5d5d5d;
  --palette-cool-900: #111111;

  --palette-blue-050: #f6f6f6;
  --palette-blue-200: #000000;
  --palette-blue-400: #111111;
  --palette-blue-600: #111111;
  --palette-blue-700: #000000;
  --palette-cyan-100: #f6f6f6;
  --palette-cyan-400: #5d5d5d;
  --palette-cyan-600: #3f3f3f;

  --palette-green-400: #176b43;
  --palette-green-600: #125636;
  --palette-yellow-400: #8a5b08;
  --palette-yellow-600: #744c07;
  --palette-red-400: #a33838;
  --palette-red-600: #8a2f2f;

  --palette-alpha-white-04: rgb(17 17 17 / 4%);
  --palette-alpha-white-07: rgb(17 17 17 / 5%);
  --palette-alpha-white-10: rgb(17 17 17 / 10%);
  --palette-alpha-black-05: rgb(17 17 17 / 6%);
  --palette-alpha-black-10: rgb(17 17 17 / 10%);
  --palette-alpha-black-22: rgb(17 17 17 / 14%);
  --palette-alpha-blue-dark: rgb(17 17 17 / 6%);
  --palette-alpha-blue-glow-dark: transparent;
  --palette-alpha-blue-light: rgb(17 17 17 / 6%);
  --palette-alpha-blue-glow-light: transparent;
  --palette-alpha-cyan-dark: rgb(17 17 17 / 5%);
  --palette-alpha-cyan-glow-dark: transparent;
  --palette-alpha-cyan-light: rgb(17 17 17 / 5%);
  --palette-alpha-cyan-glow-light: transparent;
  --palette-alpha-green-dark: rgb(23 107 67 / 10%);
  --palette-alpha-green-glow-dark: transparent;
  --palette-alpha-green-light: rgb(23 107 67 / 9%);
  --palette-alpha-green-glow-light: transparent;
  --palette-alpha-yellow-dark: rgb(138 91 8 / 10%);
  --palette-alpha-yellow-light: rgb(138 91 8 / 9%);
  --palette-alpha-red-dark: rgb(163 56 56 / 10%);
  --palette-alpha-red-glow-dark: transparent;
  --palette-alpha-red-light: rgb(163 56 56 / 9%);
  --palette-alpha-red-glow-light: transparent;
}

/* ========================================================================== */
/* 2. 语义层 --ui-*：纸面表面 / 发丝线 / 纯投影 / 无发光                          */
/* ========================================================================== */
:root:root,
html[data-theme="light"],
body[data-theme="light"],
.theme-light,
html[data-theme="dark"],
body[data-theme="dark"],
.theme-dark {
  --ui-canvas: #f4f4f4;
  --ui-canvas-dot: rgb(17 17 17 / 10%);
  --ui-surface-panel: #fbfbfb;
  --ui-surface-raised: #ffffff;
  --ui-surface-node: #ffffff;
  --ui-surface-control: #f0f0f0;
  --ui-surface-hover: rgb(17 17 17 / 5%);
  --ui-surface-active: rgb(17 17 17 / 6%);
  --ui-surface-scrim: rgb(17 17 17 / 8%);

  --ui-border-subtle: rgb(17 17 17 / 6%);
  --ui-border-default: rgb(17 17 17 / 10%);
  --ui-border-strong: rgb(17 17 17 / 20%);

  --ui-text-primary: #111111;
  --ui-text-secondary: #3f3f3f;
  --ui-text-muted: #5d5d5d;
  --ui-text-placeholder: #9a9a9a;
  --ui-text-on-accent: #ffffff;
  --ui-text-on-danger: #ffffff;

  --ui-accent: #111111;
  --ui-accent-hover: #000000;
  --ui-accent-soft: rgb(17 17 17 / 6%);
  --ui-accent-glow: transparent;
  --ui-focus-ring: #111111;

  --ui-ai: #5d5d5d;
  --ui-ai-soft: rgb(17 17 17 / 6%);
  --ui-ai-glow: transparent;

  --ui-success: #176b43;
  --ui-success-soft: rgb(23 107 67 / 10%);
  --ui-success-glow: transparent;
  --ui-warning: #8a5b08;
  --ui-warning-soft: rgb(138 91 8 / 10%);
  --ui-danger: #a33838;
  --ui-danger-strong: #8a2f2f;
  --ui-danger-soft: rgb(163 56 56 / 10%);
  --ui-danger-glow: transparent;

  --ui-shadow-panel: 0 1px 2px rgb(17 17 17 / 6%), 0 10px 24px rgb(17 17 17 / 6%);
  --ui-shadow-popover: 0 2px 4px rgb(17 17 17 / 6%), 0 16px 32px rgb(17 17 17 / 8%);
  --ui-shadow-node: 0 1px 2px rgb(17 17 17 / 6%), 0 10px 24px rgb(17 17 17 / 6%);
  --ui-shadow-node-hover: 0 2px 4px rgb(17 17 17 / 8%), 0 14px 28px rgb(17 17 17 / 8%);

  --ui-radius-control: 6px;
  --ui-radius-menu: 8px;
  --ui-radius-panel: 10px;
  --ui-radius-node: 10px;
  --ui-font-sans: Geist, 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --ui-font-mono: 'Geist Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
}

/* ========================================================================== */
/* 3. index.html 里未桥接到 --ui-* 的旧 token                                    */
/* ========================================================================== */
:root:root {
  --stroke-connection: rgb(17 17 17 / 55%);
  --highlight-color: #111111;
  --port-bg: #ffffff;
  --port-bg-hover: #111111;
  --port-bg-input: #ffffff;
  --group-port-bg: #ffffff;
  --border-port: #111111;
  --slider-thumb: #111111;
  --border-slider: #ffffff;
  --bg-slider: rgb(17 17 17 / 14%);
  --outline-selection: 1.5px solid #111111;
  --generate-btn: #111111;
  --generate-btn-hover: #000000;
  --bg-progress-fill: #111111;
  --node-status-generating-a: rgb(17 17 17 / 0%);
  --node-status-generating-b: rgb(17 17 17 / 0%);
  --node-status-generating-c: rgb(17 17 17 / 0%);
  --node-status-generating-glow: transparent;
  --node-status-done: rgb(23 107 67 / 55%);
  --node-status-done-soft: rgb(23 107 67 / 12%);
  --node-status-error: rgb(163 56 56 / 55%);
  --node-status-error-soft: rgb(163 56 56 / 12%);
  --task-type-image-bg: #3f3f3f;
  --task-type-video-bg: #3f3f3f;
  --task-type-audio-bg: #3f3f3f;
  --task-type-chat-bg: #3f3f3f;
}

/* 连接线颜色 / 走线动画色由脚本写进 <html style>，必需 !important 才压得住 */
html:root {
  --stroke-connection: rgb(17 17 17 / 55%) !important;
  --highlight-color: #111111 !important;
  --connection-flow-color: #8a8a8a !important;
}

/* 字体：index.html 把 Inter 写死在 html/body 上，这里接回 VisionQA 字族 */
body {
  font-family: Geist, 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 端口：白底 + 1.5px 深描边（源码是 2px 白边 + 绿/灰填充，这里整组翻转） */
.connection-port,
.v2-node > .connection-port,
.v2-node > .input-port,
.v2-node > .output-port {
  background: #ffffff !important;
  border-color: #111111 !important;
  border-width: 1.5px !important;
}
.connection-port:hover,
.v2-node > .connection-port:hover,
.v2-node > .connection-port.is-hover,
.connection-port.is-hover,
.v2-node .input-port:hover { background: #111111 !important; border-color: #111111 !important; }

/* ========================================================================== */
/* 4. 主按钮文字：强调色现在是近黑，按钮必须是白字                              */
/* ========================================================================== */
.agent-send-btn,
.agent-actions .agent-primary,
.agent-action-buttons button[data-agent-card-confirm],
.agent-api-footer button[data-agent-api-save],
.vc-btn-primary,
.vc-btn-replace,
.tts-mode-tab.active,
.generate-btn-small,
.face-blur-btn.primary,
.face-blur-mode-btn.active,
.bd-dialog-btn.confirm,
.bd-dialog-btn.danger,
.save-asset-confirm,
.bd-popup-btn-ok,
.asset-cat-tab.active,
.task-tab.active,
.enterprise-dialog-primary,
.enterprise-budget-recharge,
button[style*="background:var(--primary-btn)"],
button[style*="background: var(--primary-btn)"],
button[style*="var(--generate-btn)"] {
  color: #ffffff !important;
}

/* ========================================================================== */
/* 5. 深色假设逐条翻转：白 alpha 的描边 / 悬浮 / 分隔 → 墨 alpha                  */
/* ========================================================================== */
input[type="range"]::-webkit-slider-thumb,
input[type="range"]::-moz-range-thumb { border-color: #ffffff !important; }
.bd-dialog-input { background: var(--ui-surface-raised) !important; }
.bd-dialog-btn.cancel:hover { background: rgb(17 17 17 / 5%) !important; }
.canvas-tab-close:hover { background: rgb(17 17 17 / 8%) !important; color: #111111 !important; }
.pp-cost-preview,
.pp-task-status button { background: rgb(17 17 17 / 5%) !important; }
.pp-task-status button:hover { background: rgb(17 17 17 / 10%) !important; }
.pp-audio-source { background: rgb(17 17 17 / 3%) !important; }
.pp-ref-video-preview,
.pp-ref-upload-mode-badge {
  background: rgb(255 255 255 / 92%) !important;
  color: #111111 !important;
  border-color: rgb(17 17 17 / 14%) !important;
}
.seedream-edit-header button:hover { background: rgb(17 17 17 / 6%) !important; color: #111111 !important; }
.enterprise-budget-indicator { background: rgb(17 17 17 / 3%) !important; }
.enterprise-budget-refresh { background: rgb(17 17 17 / 6%) !important; }
.enterprise-budget-refresh:hover { background: rgb(17 17 17 / 12%) !important; color: #111111 !important; }
.enterprise-dialog-secondary { background: rgb(17 17 17 / 4%) !important; }
.enterprise-dialog-secondary:hover { background: rgb(17 17 17 / 8%) !important; }
.enterprise-dialog-secondary:focus-visible { outline-color: #111111 !important; }
.enterprise-avatar-gesture-hint { background: rgb(17 17 17 / 3%) !important; }
.enterprise-dialog-backdrop { background: rgb(17 17 17 / 10%) !important; }
.grid-container.cut-mode .grid-cell.filled { border-color: rgb(17 17 17 / 28%) !important; }
.seedream-grid-cell {
  border-color: rgb(17 17 17 / 12%) !important;
  background: rgb(17 17 17 / 2%) !important;
}
.seedream-grid-cell.is-empty {
  background:
    linear-gradient(135deg, rgb(17 17 17 / 5%) 25%, transparent 25%) 0 0 / 12px 12px,
    rgb(17 17 17 / 2%) !important;
}
.seedream-grid-cell.is-selected,
.seedream-grid-cell.is-selected:hover,
.grid-cell.selected,
.grid-cell.selected:hover { box-shadow: inset 0 0 0 2px #111111 !important; }
.seedream-grid-cell.filled:hover { box-shadow: 0 4px 12px rgb(17 17 17 / 10%) !important; }
.workflow-card-folded-generation-flow::before {
  background: linear-gradient(90deg, transparent 36%, rgb(17 17 17 / 3%) 45%, rgb(17 17 17 / 14%) 50%, rgb(17 17 17 / 3%) 55%, transparent 64%) !important;
}
.enterprise-avatar-edit-mask {
  box-shadow: 0 0 0 999px rgb(17 17 17 / 28%), inset 0 0 0 1px rgb(255 255 255 / 85%) !important;
}

/* tooltip：深色气泡 → 白卡 + 发丝线 + 墨字 */
.annotation-tool::after,
.annotation-toggle::after {
  background: #ffffff !important;
  color: #111111 !important;
  border-color: rgb(17 17 17 / 12%) !important;
  box-shadow: 0 6px 18px rgb(17 17 17 / 10%) !important;
}

/* 全屏预览是媒体灯箱，保留深底；控制件前景维持浅色 */
#fullscreen-preview .fp-play-btn,
#fullscreen-preview .fp-play-btn:hover,
.chat-img-fs-close,
.chat-img-fs-close:hover { color: #ffffff !important; }
#fullscreen-preview .fp-progress { background: rgb(255 255 255 / 25%) !important; }

/* ========================================================================== */
/* 6. 硬编码的蓝 / 紫 / 荧光：全部改中性（浅色取值）                              */
/* ========================================================================== */
.node-type-pill {
  background: rgb(255 255 255 / 88%) !important;
  border-color: rgb(17 17 17 / 12%) !important;
  box-shadow: 0 2px 8px rgb(17 17 17 / 8%) !important;
  backdrop-filter: blur(6px) !important;
}
.node-type-pill[class*="node-type-pill--"] {
  color: #3f3f3f !important;
  border-color: rgb(17 17 17 / 14%) !important;
}
.local-depth-node { border-color: var(--ui-border-default) !important; }
.local-depth-node:hover { border-color: var(--ui-border-strong) !important; }
.depth-slider-row output { color: #111111 !important; }
.seedream-node-cost-badge {
  background: rgb(255 255 255 / 92%) !important;
  border-color: rgb(17 17 17 / 12%) !important;
  color: #111111 !important;
  box-shadow: 0 2px 8px rgb(17 17 17 / 8%) !important;
  backdrop-filter: blur(6px) !important;
}
.seedream-node-cost-badge span { color: #5d5d5d !important; }
.seedream-node-cost-badge b { color: #111111 !important; }

/* 生成中遮罩：紫蓝流体 + 紫色锥环 → 极淡墨色呼吸 */
.gen-fluid {
  background:
    radial-gradient(ellipse 50% 40% at 65% 30%, rgb(17 17 17 / 3%), transparent 70%),
    radial-gradient(ellipse 45% 55% at 25% 70%, rgb(17 17 17 / 2%), transparent 70%),
    radial-gradient(ellipse 55% 45% at 75% 65%, rgb(17 17 17 / 2%), transparent 70%) !important;
}
.gen-spinner-ring {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgb(17 17 17 / 8%) 90deg,
    rgb(17 17 17 / 45%) 270deg,
    #111111 340deg,
    transparent 360deg
  ) !important;
}

/* 选中 / 悬停：蓝描边 + 外发光 → 墨色发丝线 + 纯投影 */
.asset-card:hover,
.qa-card:hover { box-shadow: 0 8px 20px rgb(17 17 17 / 10%) !important; }
.asset-card.selected { box-shadow: 0 0 0 1.5px #111111 !important; }
.annotation-toggle { box-shadow: 0 4px 12px rgb(17 17 17 / 10%) !important; }
.pp-bar-item.changing { border-color: rgb(17 17 17 / 45%) !important; }
.reverse-output-option.is-active { border-color: #111111 !important; background: rgb(17 17 17 / 6%) !important; }
.sb-btn.active,
.pp-clone-card.selected,
.reverse-preset-chip:hover { border-color: rgb(17 17 17 / 22%) !important; }
.pp-inline-clone-card.selected { border-color: #111111 !important; }
.pp-bar-item:hover,
.pp-inline-clone-card:hover { border-color: rgb(17 17 17 / 18%) !important; }

/* 输入聚焦环：蓝色光晕 → 墨色发丝环 */
.agent-input-row textarea:focus,
.agent-field input:focus,
.agent-field select:focus,
.asset-search-bar input:focus,
.save-asset-field input:focus,
.bd-popup-input:focus,
.enterprise-dialog-field input:focus,
.vc-input:focus,
.vc-select:focus { box-shadow: 0 0 0 2px rgb(17 17 17 / 10%) !important; border-color: #111111 !important; }
.vc-file-btn:hover { border-color: #111111 !important; }
.vc-demo-link { color: #111111 !important; }

/* 零散写死的蓝：链接、选区框、追踪框、聊天状态点、分镜首帧标签 */
.chat-msg a,
.chat-code-rendered a { color: #111111 !important; text-decoration-color: rgb(17 17 17 / 35%); }
.annotation-selection-box { stroke: rgb(17 17 17 / 55%) !important; }
.video-face-blur-node.video-face-blur-tracking { border-color: #111111 !important; box-shadow: none !important; }
.chat-status-dot.is-streaming { background: #5d5d5d !important; }
.pp-ref-thumb.frame-first { border-color: #111111 !important; }
.pp-ref-thumb.frame-first .pp-ref-thumb-label { background: #111111 !important; color: #ffffff !important; }
.storyboard-custom-gap-handle::after { background: rgb(17 17 17 / 45%) !important; }
.enterprise-avatar-pick {
  border-color: rgb(17 17 17 / 14%) !important;
  background: rgb(17 17 17 / 3%) !important;
}
.enterprise-avatar-pick:hover { border-color: rgb(17 17 17 / 26%) !important; background: rgb(17 17 17 / 6%) !important; }
.enterprise-api-lock-notice { border-color: rgb(17 17 17 / 12%) !important; background: rgb(17 17 17 / 3%) !important; }
.chat-new-btn:hover,
.chat-load-more:hover { background: rgb(17 17 17 / 6%) !important; }
.chat-msg blockquote,
.chat-code-rendered blockquote { border-left-color: rgb(17 17 17 / 20%) !important; }
.chat-bubble.is-user { background: rgb(17 17 17 / 4%) !important; border-color: rgb(17 17 17 / 10%) !important; }

/* 状态类：三档语义色只用于 成功 / 待确认 / 问题 */
.workflow-card-run-status.is-running { color: #5d5d5d !important; }
.workflow-card-run-status.is-succeeded { color: #176b43 !important; }
.workflow-card-run-status.is-failed { color: #a33838 !important; }
.pp-connected-prompt-divider::after {
  border-color: var(--ui-border-default) !important;
  background: var(--ui-surface-control) !important;
  color: var(--ui-text-secondary) !important;
}
.pp-connected-prompt-module { border-color: rgb(23 107 67 / 28%) !important; background: rgb(23 107 67 / 6%) !important; }
.pp-connected-prompt-badge { background: rgb(23 107 67 / 10%) !important; color: #176b43 !important; }
.enterprise-budget-indicator,
.enterprise-budget-dot,
.enterprise-budget-text { color: var(--ui-text-muted) !important; }
.enterprise-budget-dot { background: var(--ui-text-muted) !important; }
.enterprise-budget-track { background: var(--ui-border-default) !important; }
.enterprise-budget-indicator { box-shadow: none !important; }
.enterprise-connection-pill { color: var(--ui-text-muted) !important; background: var(--ui-surface-control) !important; }
.local-backend-status { color: var(--ui-text-muted) !important; background: transparent !important; }
.local-backend-status[data-status="online"] {
  color: #176b43 !important;
  border-color: rgb(23 107 67 / 28%) !important;
  background: rgb(23 107 67 / 9%) !important;
}
.local-backend-status[data-status="offline"] {
  color: #a33838 !important;
  border-color: rgb(163 56 56 / 30%) !important;
  background: rgb(163 56 56 / 9%) !important;
}