/* ── Pipeline Editor (Custom DOM+SVG) ── */

.igp-toolbar { display:flex; gap:6px; padding:8px 12px; border-bottom:1px solid var(--border); align-items:center; flex-wrap:wrap; background:var(--surface); }
.igp-hint { margin-left:auto; font-size:11px; color:var(--text-dim); }
.igp-menu { display:none; position:absolute; top:100%; left:0; z-index:100; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:4px 0; min-width:170px; box-shadow:0 8px 24px rgba(0,0,0,.4); }
.igp-menu button { display:flex; align-items:center; width:100%; padding:8px 14px; background:none; border:none; color:var(--text); font-size:13px; cursor:pointer; text-align:left; font-family:inherit; }
.igp-menu button:hover { background:rgba(255,255,255,.06); }

/* Canvas area */
.igp-wrap {
  flex:1; min-height:400px; position:relative; overflow:hidden; cursor:grab;
  background:#151520;
  background-image: radial-gradient(circle, #252535 1px, transparent 1px);
  background-size: 24px 24px;
}
.igp-wrap:active { cursor:grabbing; }
.igp-svg { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; overflow:visible; transform-origin:0 0; }
.igp-svg path { pointer-events:stroke; cursor:pointer; }
.igp-nodes { position:absolute; top:0; left:0; transform-origin:0 0; }

/* Connection paths */
.igp-cpath { transition:stroke 0.15s; }
.igp-cpath:hover { stroke:#7ab !important; stroke-width:3.5px; }
.igp-csel { stroke:var(--accent, #3b7dd8) !important; stroke-width:3px; filter:drop-shadow(0 0 4px var(--accent, #3b7dd8)); }

/* ── Nodes ── */
.igp-node {
  position:absolute; min-width:240px; max-width:320px;
  background:#22223a; border:1px solid #3a3a50;
  border-radius:10px; box-shadow:0 4px 20px rgba(0,0,0,.35);
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size:13px; color:#e0e0e8; user-select:none;
  transition:box-shadow 0.15s;
}
.igp-node:hover { box-shadow:0 6px 28px rgba(0,0,0,.45); }
.igp-sel { border-color:var(--accent, #3b7dd8) !important; box-shadow:0 0 0 2px var(--accent, #3b7dd8), 0 6px 28px rgba(0,0,0,.4) !important; }

/* Header */
.igp-header {
  display:flex; align-items:center; padding:8px 12px; cursor:move;
  border-radius:10px 10px 0 0; position:relative; overflow:hidden;
}
.igp-color-bar { position:absolute; top:0; left:0; right:0; height:3px; }
.igp-title { font-weight:600; font-size:12px; letter-spacing:0.3px; flex:1; padding-top:2px; }
.igp-del {
  width:20px; height:20px; border:none; background:rgba(255,80,80,.2);
  color:#f88; border-radius:4px; cursor:pointer; font-size:14px; line-height:20px;
  display:flex; align-items:center; justify-content:center;
}
.igp-del:hover { background:rgba(255,80,80,.4); }

/* Body */
.igp-body { padding:8px 12px 4px; }
.igp-textarea {
  width:100%; min-height:50px; background:#1a1a2e; border:1px solid #3a3a50;
  border-radius:6px; color:#e0e0e8; padding:8px; font-size:12px;
  resize:vertical; font-family:inherit; line-height:1.4; box-sizing:border-box;
}
.igp-textarea:focus { border-color:#4ecdc4; outline:none; }
.igp-field { display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.igp-field span { font-size:11px; color:#888; white-space:nowrap; min-width:38px; }
.igp-select, .igp-input {
  flex:1; background:#1a1a2e; border:1px solid #3a3a50; border-radius:4px;
  color:#e0e0e8; padding:4px 6px; font-size:11px; font-family:inherit; min-width:0;
}
.igp-select:focus, .igp-input:focus { border-color:#a855f7; outline:none; }
.igp-upload-zone {
  padding:16px 8px; border:2px dashed #3a3a50; border-radius:6px;
  text-align:center; color:#666; font-size:12px; cursor:pointer;
}
.igp-upload-zone:hover { border-color:#45b7d1; background:rgba(69,183,209,.06); }
.igp-thumb { width:100%; max-height:100px; object-fit:contain; border-radius:6px; margin-top:6px; }
.igp-preview-area {
  min-height:50px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; color:#555; font-size:12px; background:#1a1a2e;
  border-radius:6px; padding:8px; overflow:hidden;
}

/* Gen preview at top of Image Gen node */
.igp-gen-preview {
  background:#151525; border-radius:6px; min-height:50px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#555; font-size:11px; overflow:hidden; margin-bottom:8px;
}
.igp-gen-preview img {
  width:100%; max-height:220px; object-fit:contain; border-radius:6px; display:block;
}

/* Collapsible settings */
.igp-settings-toggle {
  font-size:11px; color:#888; cursor:pointer; padding:4px 0;
  user-select:none; border-top:1px solid rgba(255,255,255,.06); margin-top:4px;
}
.igp-settings-toggle:hover { color:#bbb; }
.igp-settings { padding-top:6px; }

/* Status */
.igp-status { padding:3px 8px; border-radius:4px; font-size:11px; text-align:center; min-height:16px; margin-bottom:6px; }
.igp-status:empty { display:none; }
.igp-st-running { background:rgba(255,204,0,.12); color:#fc0; }
.igp-st-done { background:rgba(0,204,102,.12); color:#0c6; }
.igp-st-error { background:rgba(255,68,68,.12); color:#f44; }

/* Ports */
.igp-ports { display:flex; justify-content:space-between; padding:6px 12px 10px; }
.igp-ins, .igp-outs { display:flex; flex-direction:column; gap:6px; }
.igp-outs { align-items:flex-end; }
.igp-port { display:flex; align-items:center; gap:6px; }
.igp-dot {
  width:12px; height:12px; border-radius:50%; border:2px solid #444;
  cursor:crosshair; transition:transform 0.15s, box-shadow 0.15s;
  flex-shrink:0;
}
.igp-dot:hover { transform:scale(1.3); box-shadow:0 0 6px currentColor; }
.igp-plbl { font-size:10px; color:#777; }