/* ============================================================
   COMFYUI GRAPH THEME (LITEGRAPH)
   High-quality rendering for React implementations
   Extracted + reconstructed from ComfyUI web/dist bundle
   ============================================================ */

/* ---------------------- ROOT WRAPPER ----------------------- */

.comfyui-graph {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #1e1e1e;
  font-family: Inter, Roboto, sans-serif;
}

/* ---------------------- CANVAS GRID ------------------------ */

.comfyui-graph canvas {
  background-color: #1e1e1e;
  background-image:
    linear-gradient(#2a2a2a 1px, transparent 1px),
    linear-gradient(90deg, #2a2a2a 1px, transparent 1px);
  background-size: 20px 20px;
  image-rendering: crisp-edges;
}

/* ---------------------- NODE BASE --------------------------- */

.litegraph .node {
  background: #2b2b2b;
  border: 1px solid #444;
  border-radius: 8px;
  color: #fff;
  box-shadow: 0 0 4px rgba(0,0,0,0.4);
  transition: 0.08s ease-in-out;
}

.litegraph .node:hover {
  border-color: #6b6b6b;
}

/* Selected node */
.litegraph .node.selected {
  border-color: #66aaff;
  box-shadow: 0 0 8px rgba(102,170,255,0.8);
}

/* ---------------------- NODE TITLE -------------------------- */

.litegraph .node .title {
  background: #111;
  border-radius: 8px 8px 0 0;
  padding: 6px 10px;
  color: #eee;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.3px;
  -webkit-user-select: none;
          user-select: none;
}

/* ---------------------- NODE INPUTS & OUTPUTS --------------- */

.litegraph .node .slot {
  width: 10px;
  height: 10px;
  background: #3e3e3e;
  border-radius: 50%;
  border: 1px solid #aaa;
  display: inline-block;
  margin: 4px;
  box-sizing: border-box;
}

.litegraph .node .slot:hover {
  background: #fff;
}

.litegraph .node .slot_label {
  color: #ddd;
  font-size: 11px;
  padding-left: 4px;
  -webkit-user-select: none;
          user-select: none;
}

/* ---------------------- LINK STYLING ------------------------ */

.litegraph .link {
  stroke: #88aaff;
  stroke-width: 2;
  opacity: 0.9;
}

.litegraph .link.selected {
  stroke: #fff;
  stroke-width: 3;
  opacity: 1;
}

/* Highlight when hovering */
.litegraph .link:hover {
  stroke: #cce0ff;
}

/* ---------------------- GRAPH BACKGROUND -------------------- */

.litegraph .graphcanvas {
  background-color: #1e1e1e;
  background-image:
    radial-gradient(#2c2c2c 1px, transparent 1px),
    radial-gradient(#2c2c2c 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
}

/* ---------------------- CONTEXT MENU ------------------------ */

.litecontextmenu {
  background: #2b2b2b;
  border: 1px solid #555;
  color: #eee;
  border-radius: 6px;
  overflow: hidden;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}

.litecontextmenu li {
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.1s;
}

.litecontextmenu li:hover {
  background: #3a3a3a;
}

.litecontextmenu .separator {
  border-bottom: 1px solid #444;
  margin: 5px 0;
}

/* ---------------------- SCROLL/ZOOM SMOOTH ------------------ */

canvas {
  image-rendering: optimize-quality !important;
  transform: translateZ(0);
}

/* ---------------------- TEXT FIELDS IN NODES ---------------- */

.litegraph .node input,
.litegraph .node textarea,
.litegraph .node select {
  background: #222;
  color: #fff;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 4px;
  width: 100%;
}

/* ---------------------- RESIZING HANDLES -------------------- */

.litegraph .node .resizer {
  width: 12px;
  height: 12px;
  background: #111;
  border: 1px solid #666;
  border-radius: 3px;
  position: absolute;
  bottom: 4px;
  right: 4px;
  cursor: se-resize;
}

/* ---------------------- NODE COLOR VARIANTS ------------------ */
/* (Matches ComfyUI color coding) */

.node.type-loader    { border-left: 4px solid #60a5fa; }
.node.type-conditioning { border-left: 4px solid #f43f5e; }
.node.type-vae       { border-left: 4px solid #14b8a6; }
.node.type-sampler   { border-left: 4px solid #f59e0b; }
.node.type-image     { border-left: 4px solid #a855f7; }
.node.type-mask      { border-left: 4px solid #ef4444; }
.node.type-control   { border-left: 4px solid #22c55e; }
.node.type-model     { border-left: 4px solid #3b82f6; }

/* These classes can be applied automatically when parsing JSON */