/* ============================================
   无限画布 v4 — 节点重设计
   预览区 / 参考图横排 / 底部工具栏 / 弹窗选择
   ============================================ */

.canvas-page { height: calc(100vh - 60px); display: flex; flex-direction: column; overflow: hidden; position: relative; background: #080812; }
.main-content main { padding: 0; overflow: hidden; }

/* --- 顶部工具栏 --- */
.canvas-topbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px; background: #0c0c1a; border-bottom: 1px solid rgba(255,255,255,0.05); flex-shrink: 0; z-index: 100; gap: 12px; }
.canvas-topbar-left { display: flex; align-items: center; gap: 10px; }
.canvas-back-btn { padding: 7px 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 6px; color: #a0a0c0; cursor: pointer; font-size: 0.83rem; font-family: var(--font-family); transition: all var(--transition); display: flex; align-items: center; gap: 5px; text-decoration: none; }
.canvas-back-btn:hover { background: rgba(255,255,255,0.06); color: #fff; }
.canvas-project-input { background: transparent; border: 1px solid transparent; color: #c084fc; font-size: 0.95rem; font-weight: 600; font-family: var(--font-family); padding: 4px 8px; border-radius: 5px; outline: none; width: 180px; transition: all var(--transition); }
.canvas-project-input:hover { border-color: rgba(255,255,255,0.06); }
.canvas-project-input:focus { border-color: var(--color-primary); background: rgba(79,110,246,0.03); }
.canvas-topbar-center { display: flex; align-items: center; gap: 3px; }
.canvas-tool-btn { width: 32px; height: 32px; border-radius: 6px; background: transparent; border: 1px solid transparent; color: #6b6b8a; cursor: pointer; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; transition: all var(--transition); }
.canvas-tool-btn:hover { background: rgba(255,255,255,0.04); color: #fff; border-color: rgba(255,255,255,0.06); }
.canvas-tool-btn:disabled { opacity: 0.3; cursor: default; }
.canvas-tool-sep { width: 1px; height: 18px; background: rgba(255,255,255,0.05); margin: 0 5px; }
.canvas-topbar-right { display: flex; align-items: center; gap: 8px; }
.canvas-save-btn { padding: 7px 18px; background: var(--gradient-primary); color: #fff; border: none; border-radius: 6px; font-size: 0.83rem; font-weight: 600; cursor: pointer; transition: all var(--transition); font-family: var(--font-family); }
.canvas-save-btn:hover { box-shadow: 0 4px 16px rgba(79,110,246,0.35); }
.canvas-saved-indicator { font-size: 0.74rem; color: #4ade80; opacity: 0; transition: opacity 0.3s; white-space: nowrap; }
.canvas-saved-indicator.show { opacity: 1; }

/* --- 视口 --- */
.canvas-viewport { flex: 1; overflow: hidden; position: relative; cursor: default; background-image: radial-gradient(circle, rgba(255,255,255,0.025) 1px, transparent 1px); background-size: 28px 28px; }
.canvas-viewport.grabbing { cursor: grabbing; }
.canvas-world { position: absolute; top: 0; left: 0; width: 0; height: 0; transform-origin: 0 0; z-index: 1; }
.canvas-select-box { position: absolute; border: 1.5px dashed rgba(79,110,246,0.6); background: rgba(79,110,246,0.06); border-radius: 3px; pointer-events: none; z-index: 100; display: none; }

/* ============================================
   节点基础
   ============================================ */
.canvas-node { position: absolute; width: 240px; background: #12122a; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; cursor: pointer; user-select: none; box-shadow: 0 4px 20px rgba(0,0,0,0.4); z-index: 1; transition: box-shadow 0.15s, border-color 0.15s; }
.canvas-node:hover { border-color: rgba(79,110,246,0.35); box-shadow: 0 6px 28px rgba(0,0,0,0.5); z-index: 10; }
.canvas-node.selected { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(79,110,246,0.12), 0 6px 28px rgba(0,0,0,0.5); z-index: 11; }
.canvas-node.grouped { border-color: rgba(168,85,247,0.3); }
.cn-header { padding: 8px 12px; display:flex; align-items:center; gap:8px; border-bottom:1px solid rgba(255,255,255,0.04); cursor:move; }
.cn-icon { font-size:1rem; }
.cn-title { flex:1; font-size:0.78rem; font-weight:600; color:#ccc; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cn-preview { height:120px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.02); overflow:hidden; position:relative; }
.cn-preview img,.cn-preview video { width:100%; height:100%; object-fit:cover; }
.cn-preview-placeholder { font-size:2rem; color:#6b6b8a; }
.cn-status { position:absolute; top:4px; right:4px; padding:2px 8px; border-radius:8px; font-size:0.65rem; font-weight:600; }
.cn-status.queued { background:rgba(234,179,8,0.15); color:#eab308; }
.cn-status.processing { background:rgba(79,110,246,0.15); color:#7b93fa; }
.cn-status.done { background:rgba(74,222,128,0.15); color:#4ade80; }
.cn-status.failed { background:rgba(239,68,68,0.15); color:#ef4444; }
.cn-footer { padding:6px 12px; display:flex; align-items:center; gap:6px; }
.cn-footer-text { font-size:0.68rem; color:#6b6b8a; flex:1; }
.cn-footer-btn { font-size:0.7rem; color:#a0a0c0; background:none; border:1px solid rgba(255,255,255,0.08); border-radius:4px; padding:2px 8px; cursor:pointer; font-family:inherit; }
.cn-footer-btn:hover { border-color:var(--color-primary); color:#fff; }

/* 编辑弹窗 */
.cn-popup { position:absolute; width:420px; background:#12122a; border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:12px; box-shadow:0 12px 48px rgba(0,0,0,0.6); z-index:20; display:none; }
.cn-popup.show { display:block; }
.cn-popup-refs { display:flex; gap:6px; margin-bottom:8px; flex-wrap:wrap; }
.cn-popup-ref { width:48px; height:48px; border-radius:6px; overflow:hidden; border:1px solid rgba(255,255,255,0.06); position:relative; cursor:pointer; flex-shrink:0; }
.cn-popup-ref img,.cn-popup-ref video { width:100%; height:100%; object-fit:cover; }
.cn-popup-ref:hover { border-color:rgba(79,110,246,0.4); }
.cn-popup-ref .cn-ref-del { position:absolute; top:2px; right:2px; width:14px; height:14px; border-radius:50%; background:rgba(0,0,0,0.6); color:#fff; border:none; font-size:0.5rem; cursor:pointer; display:none; align-items:center; justify-content:center; }
.cn-popup-ref:hover .cn-ref-del { display:flex; }
.cn-popup-preview-large { position:fixed; z-index:9999; width:260px; max-height:200px; background:#12122a; border:1px solid rgba(255,255,255,0.15); border-radius:8px; overflow:hidden; box-shadow:0 8px 32px rgba(0,0,0,0.6); pointer-events:none; }
.cn-popup-preview-large img,.cn-popup-preview-large video { width:100%; max-height:200px; object-fit:contain; background:#0a0a18; }
.cn-popup-textarea { width:100%; min-height:80px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:6px; padding:8px 10px; color:#ccc; font-size:0.78rem; font-family:inherit; resize:vertical; outline:none; margin-bottom:8px; box-sizing:border-box; }
.cn-popup-textarea:focus { border-color:var(--color-primary); }
.cn-popup-params { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.cn-popup-select { padding:5px 8px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:5px; color:#ccc; font-size:0.72rem; font-family:inherit; cursor:pointer; outline:none; }
.cn-popup-select:focus { border-color:var(--color-primary); }
.cn-popup-select option { background:#12122a; color:#ccc; }
.cn-popup-cost { font-size:0.7rem; color:#6b6b8a; margin-left:auto; }
.cn-popup-gen-btn { padding:6px 14px; background:linear-gradient(135deg,#4f6ef6,#a855f7); border:none; border-radius:6px; color:#fff; font-size:0.76rem; font-weight:600; cursor:pointer; font-family:inherit; }
.cn-popup-gen-btn:hover { opacity:0.9; }
.cn-popup-gen-btn:disabled { opacity:0.4; cursor:not-allowed; }

/* 头部 */
.canvas-node-header { padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,0.04); display: flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 600; color: #fff; border-radius: 14px 14px 0 0; background: rgba(255,255,255,0.015); }
.canvas-node-delete { margin-left: auto; width: 22px; height: 22px; border-radius: 4px; background: transparent; border: none; color: #6b6b8a; cursor: pointer; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; opacity: 0; transition: all var(--transition); }
.canvas-node:hover .canvas-node-delete { opacity: 1; }
.canvas-node-delete:hover { background: rgba(239,68,68,0.12); color: #ef4444; }

/* 内容区 */
.canvas-node-body { padding: 0; display: flex; flex-direction: column; }

/* --- 预览区（自适应比例） --- */
.canvas-node-preview { position: relative; background: #0a0a18; display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,0.04); }
.canvas-node-preview.ratio-16-9 { aspect-ratio: 16/9; }
.canvas-node-preview.ratio-9-16 { aspect-ratio: 9/16; }
.canvas-node-preview.ratio-1-1 { aspect-ratio: 1/1; }
.canvas-node-preview.ratio-4-3 { aspect-ratio: 4/3; }
.canvas-node-preview.ratio-3-4 { aspect-ratio: 3/4; }
.canvas-node-preview.ratio-21-9 { aspect-ratio: 21/9; }
.canvas-node-preview img, .canvas-node-preview video { width: 100%; height: 100%; object-fit: cover; }
.canvas-node-preview-placeholder { font-size: 2.5rem; color: rgba(255,255,255,0.06); }

/* --- 参考区（横排） --- */
.canvas-node-refs { display: flex; gap: 8px; padding: 10px 14px; overflow-x: auto; border-bottom: 1px solid rgba(255,255,255,0.04); scrollbar-width: none; }
.canvas-node-refs::-webkit-scrollbar { display: none; }
.canvas-ref-item { width: 52px; height: 52px; flex-shrink: 0; border-radius: 8px; background: rgba(255,255,255,0.03); border: 1px dashed rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition); font-size: 1.2rem; color: #6b6b8a; overflow: hidden; position: relative; }
.canvas-ref-item:hover { border-color: rgba(79,110,246,0.3); background: rgba(79,110,246,0.04); }
.canvas-ref-item.has-file { border-style: solid; border-color: rgba(255,255,255,0.1); }
.canvas-ref-item img, .canvas-ref-item video { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; }
.canvas-ref-item-remove { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; background: rgba(0,0,0,0.7); border: none; color: #fff; font-size: 0.5rem; cursor: pointer; display: none; align-items: center; justify-content: center; }
.canvas-ref-item.has-file:hover .canvas-ref-item-remove { display: flex; }
.canvas-ref-add { border-style: dashed; }
.canvas-ref-add span { font-size: 0.65rem; margin-left: 2px; }

/* --- 提示词输入 --- */
.canvas-node-prompt-wrap { padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.canvas-prompt-input { width: 100%; min-height: 56px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 9px 11px; color: #fff; font-family: var(--font-family); font-size: 0.8rem; resize: vertical; outline: none; line-height: 1.5; transition: border-color var(--transition); }
.canvas-prompt-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(79,110,246,0.06); }
.canvas-prompt-input::placeholder { color: #6b6b8a; }

/* --- 底部工具栏（横排） --- */
.canvas-node-toolbar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; flex-wrap: wrap; }
.canvas-tb-item { display: flex; align-items: center; gap: 4px; }
.canvas-tb-select { padding: 5px 20px 5px 8px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 5px; font-size: 0.73rem; color: #fff; font-family: var(--font-family); outline: none; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L4 4L7 1' stroke='%236b6b8a' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 6px center; }
.canvas-tb-select:focus { border-color: var(--color-primary); }
.canvas-tb-select option { background: #12122a; color: #fff; }
.canvas-tb-btn { padding: 5px 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 5px; color: #a0a0c0; font-size: 0.73rem; cursor: pointer; font-family: var(--font-family); transition: all var(--transition); white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.canvas-tb-btn:hover { background: rgba(255,255,255,0.06); color: #fff; border-color: rgba(255,255,255,0.12); }
.canvas-tb-btn.active { border-color: var(--color-primary); background: rgba(79,110,246,0.1); color: var(--color-primary-light); }
.canvas-tb-slider { width: 70px; -webkit-appearance: none; appearance: none; height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px; outline: none; }
.canvas-tb-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--color-primary); cursor: pointer; border: 2px solid #12122a; }
.canvas-tb-cost { font-size: 0.72rem; color: #6b6b8a; white-space: nowrap; }
.canvas-tb-cost span { color: var(--color-primary-light); }
.canvas-tb-generate { padding: 6px 14px; background: var(--gradient-primary); color: #fff; border: none; border-radius: 5px; font-size: 0.76rem; font-weight: 600; cursor: pointer; font-family: var(--font-family); white-space: nowrap; transition: all var(--transition); }
.canvas-tb-generate:hover { box-shadow: 0 2px 10px rgba(79,110,246,0.35); }

/* 工具栏分隔 */
.canvas-tb-sep { width: 1px; height: 14px; background: rgba(255,255,255,0.06); }

/* 音频开关 */
.canvas-tb-audio { display: flex; align-items: center; gap: 4px; font-size: 0.72rem; color: #a0a0c0; cursor: pointer; white-space: nowrap; }
.canvas-tb-audio-dot { width: 14px; height: 14px; border-radius: 3px; border: 2px solid rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; font-size: 0.55rem; color: transparent; transition: all var(--transition); }
.canvas-tb-audio.on .canvas-tb-audio-dot { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* 参考方式切换（视频节点） */
.canvas-ref-type-row { display: flex; gap: 2px; padding: 8px 14px; background: rgba(255,255,255,0.01); border-bottom: 1px solid rgba(255,255,255,0.04); }
.canvas-ref-type-btn { flex: 1; padding: 5px 8px; text-align: center; font-size: 0.72rem; color: #6b6b8a; background: transparent; border: none; border-radius: 4px; cursor: pointer; font-family: var(--font-family); transition: all var(--transition); }
.canvas-ref-type-btn.active { background: rgba(79,110,246,0.15); color: var(--color-primary-light); }

/* --- 比例/分辨率弹窗 --- */
.canvas-popover { position: fixed; background: #15152a; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 14px; z-index: 600; min-width: 220px; box-shadow: 0 12px 40px rgba(0,0,0,0.6); display: none; }
.canvas-popover.show { display: block; }
.canvas-popover-title { font-size: 0.78rem; color: #6b6b8a; margin-bottom: 10px; }
.canvas-popover-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.canvas-popover-opt { padding: 6px 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 6px; font-size: 0.76rem; color: #a0a0c0; cursor: pointer; transition: all var(--transition); font-family: var(--font-family); }
.canvas-popover-opt:hover { border-color: rgba(79,110,246,0.3); color: #fff; }
.canvas-popover-opt.active { border-color: var(--color-primary); background: rgba(79,110,246,0.1); color: var(--color-primary-light); }
.canvas-popover-close { margin-top: 10px; width: 100%; padding: 6px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 6px; color: #6b6b8a; font-size: 0.76rem; cursor: pointer; font-family: var(--font-family); }

/* --- 连线 --- */
.canvas-connections { position: absolute; inset: 0; pointer-events: none; z-index: 0; width: 100%; height: 100%; }
.conn-line { stroke: rgba(79,110,246,0.25); stroke-width: 2.5; fill: none; stroke-linecap: round; }
.conn-line-flow { stroke: var(--color-primary); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-dasharray: 10 6; animation: flowDash 0.8s linear infinite; opacity: 0.6; }
@keyframes flowDash { to { stroke-dashoffset: -32; } }

/* --- 锚点 --- */
.canvas-node-anchor { position: absolute; width: 20px; height: 20px; background: var(--color-primary); border: 3px solid #12122a; border-radius: 50%; cursor: crosshair; z-index: 30; box-shadow: 0 0 8px rgba(79,110,246,0.4); transition: transform 0.15s, box-shadow 0.15s; top: 50%; transform: translateY(-50%); }
.canvas-node-anchor.input { left: -10px; }
.canvas-node-anchor.output { right: -10px; }
.canvas-node-anchor:hover { transform: translateY(-50%) scale(1.35); box-shadow: 0 0 16px rgba(79,110,246,0.7); }
.canvas-node-anchor::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; }

/* --- 分组 --- */
.canvas-group-frame { position: absolute; border: 2px solid rgba(168,85,247,0.4); background: rgba(168,85,247,0.03); border-radius: 16px; pointer-events: none; z-index: 0; }
.canvas-group-label { position: absolute; top: -12px; left: 16px; padding: 3px 12px; background: rgba(168,85,247,0.2); border: 1px solid rgba(168,85,247,0.3); border-radius: 10px; font-size: 0.72rem; color: #c084fc; pointer-events: none; z-index: 1; }

/* --- 菜单 --- */
.canvas-context-menu, .canvas-connect-menu { position: fixed; background: #15152a; border: 1px solid rgba(255,255,255,0.08); border-radius: 11px; padding: 6px; z-index: 500; min-width: 200px; box-shadow: 0 10px 36px rgba(0,0,0,0.6); display: none; }
.canvas-context-menu.show, .canvas-connect-menu.show { display: block; }
.canvas-context-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 7px; font-size: 0.84rem; color: #a0a0c0; cursor: pointer; transition: all var(--transition); border: none; background: transparent; width: 100%; text-align: left; font-family: var(--font-family); }
.canvas-context-item:hover { background: rgba(255,255,255,0.05); color: #fff; }
.canvas-context-divider { height: 1px; background: rgba(255,255,255,0.05); margin: 4px 8px; }
.canvas-connect-menu-title { padding: 8px 12px 6px; font-size: 0.74rem; color: #6b6b8a; }

/* --- 小地图/缩放 --- */
.canvas-minimap { position: absolute; bottom: 18px; right: 18px; width: 160px; height: 105px; background: rgba(18,18,42,0.9); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; overflow: hidden; z-index: 50; }
.canvas-minimap-viewport { position: absolute; border: 1px solid rgba(79,110,246,0.5); background: rgba(79,110,246,0.04); border-radius: 3px; pointer-events: none; }
.canvas-zoom-indicator { position: absolute; bottom: 18px; left: 18px; padding: 5px 12px; background: rgba(18,18,42,0.85); border: 1px solid rgba(255,255,255,0.06); border-radius: 7px; font-size: 0.76rem; color: #6b6b8a; z-index: 50; }
.canvas-empty-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 2; }
.canvas-empty-hint-box { padding: 24px 40px; background: rgba(18,18,42,0.7); border: 1px solid rgba(255,255,255,0.04); border-radius: 14px; text-align: center; color: #6b6b8a; font-size: 0.85rem; line-height: 2; }
.canvas-empty-hint-box span { color: var(--color-primary-light); }

@media (max-width: 768px) { .canvas-node { width: 300px; } .canvas-topbar { padding: 8px 10px; gap: 6px; } .canvas-project-input { width: 110px; } }