/* AI 画布（#/canvas）样式——复用 base.css 变量（--surface/--line/--txt/--sub/--brand 等）
 * 【文档】页面与样式结构 → website-sales/frontend-README.md「功能地图」；总索引见 config.js 顶部。 */

.cv-page { display: flex; flex-direction: column; height: calc(100vh - 120px); }

/* 工具栏 */
.cv-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0 12px; }
.cv-toolbar .cv-sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }
.cv-projsel { max-width: 220px; }
.cv-savestate { font-size: 12px; margin-left: 8px; }
.cv-zoom { font-size: 12px; min-width: 42px; text-align: right; }

/* 画布区（纯 CSS 网格背景替代 X6 data:svg，严格兼容 CSP img-src 'self'） */
.cv-wrap {
  position: relative; flex: 1; min-height: 320px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background-color: var(--bg, #14171f);
  background-image:
    linear-gradient(to right, rgba(139, 147, 167, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(139, 147, 167, 0.07) 1px, transparent 1px);
  background-size: 20px 20px;
}
.cv-graph { position: absolute; inset: 0; }
.cv-minimap { position: absolute; right: 12px; bottom: 12px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); opacity: .92; z-index: 5; }
/* minimap 只是导航镜，里面节点副本的控件一律不可点（防误触/重复提交） */
.cv-minimap .x6-node, .cv-minimap .x6-edge { pointer-events: none !important; }

/* 节点卡片 */
.cv-node { width: 100%; height: 100%; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.cv-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--surface2); cursor: grab; }
.cv-title { font-size: 13px; font-weight: 600; color: var(--txt); }
.cv-body { flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow: auto; }
.cv-body .input { width: 100%; font-size: 12.5px; }
.cv-ta { resize: none; flex: 0 0 auto; }
.cv-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cv-grid2 label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--sub); }
.cv-grid2 label:first-child { grid-column: 1 / -1; }
.cv-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cv-price { font-size: 12px; }
.cv-result { width: 100%; border-radius: 8px; border: 1px solid var(--line); background: #000; }
img.cv-result { max-height: 180px; object-fit: contain; }
video.cv-result { max-height: 200px; }
/* 视频封面帧结果（点击播放） */
.cv-vresult { position: relative; cursor: pointer; }
.cv-vresult .cv-vplay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 28px; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.6); background: rgba(0,0,0,.18); border-radius: 8px; }
.cv-vresult:hover .cv-vplay { background: rgba(0,0,0,.32); }

/* X6 HTML 容器撑满节点 */
.cv-graph .x6-graph-svg-decorator { z-index: 2; }
.x6-node [magnet="true"]:hover { stroke: #6d8dff; }

/* 移动端收窄 */
@media (max-width: 760px) {
  .cv-page { height: calc(100vh - 100px); }
  .cv-minimap { display: none; }
}

/* 测试版横幅 */
.cv-beta { font-size: 11px; font-weight: 600; color: var(--brand); background: var(--brand-soft);
  border: 1px solid var(--brand); border-radius: 6px; padding: 2px 8px; align-self: center; }
.cv-beta-note { font-size: 12.5px; color: var(--sub); background: var(--brand-soft); border: 1px dashed var(--brand);
  border-radius: 10px; padding: 8px 14px; margin-bottom: 10px; line-height: 1.7; }
.cv-beta-note b { color: var(--brand); }

/* X6 selection / snapline 插件外置样式（替代 X6 运行时动态注入的内联 <style>，严格兼容 CSP style-src 'self'） */
.x6-widget-selection { position: absolute; top: 0; left: 0; display: none; width: 0; height: 0; touch-action: none; }
.x6-widget-selection-rubberband { display: block; overflow: visible; opacity: 0.3; background-color: #3498db; border: 2px solid #2980b9; }
.x6-widget-selection-selected { display: block; }
.x6-widget-selection-box { cursor: move; box-sizing: content-box !important; margin-top: -4px; margin-left: -4px; padding-right: 4px; padding-bottom: 4px; border: 2px dashed #feb663; box-shadow: 2px 2px 5px #d3d3d3; }
.x6-widget-selection-inner { box-sizing: content-box !important; margin-top: -8px; margin-left: -8px; padding-right: 12px; padding-bottom: 12px; border: 2px solid #feb663; box-shadow: 2px 2px 5px #d3d3d3; }
.x6-widget-selection-inner[data-selection-length='0'],
.x6-widget-selection-inner[data-selection-length='1'] { display: none; }
.x6-widget-selection-content { position: absolute; top: 100%; right: -20px; left: -20px; margin-top: 30px; padding: 6px; line-height: 14px; text-align: center; border-radius: 6px; color: #fff; font-size: 10px; background-color: #6a6b8a; }
.x6-widget-selection-content:empty { display: none; }
.x6-widget-snapline { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; }
.x6-widget-snapline-vertical, .x6-widget-snapline-horizontal { stroke: #2ecc71; stroke-width: 1px; }