html,body{margin:0;height:100%;overflow:hidden}
:root{--bg:#0b0e12;--fg:#e8eef6;--muted:#96a3b3;--accent:#79c0ff}
body{background:var(--bg);color:var(--fg);font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}

#toolbar{
  position:fixed;top:12px;left:12px;right:12px;
  display:flex;gap:8px;align-items:center;
  background:#12161dcc;border:1px solid #263041;border-radius:12px;
  padding:8px 10px;backdrop-filter: blur(6px);
  z-index:9999;pointer-events:auto
}
#toolbar .title{font-weight:600;margin-right:auto}

#canvasWrap{
  position:absolute;inset:0;
  /* Prevent page-level panning/zooming on touch; we handle gestures in JS */
  touch-action:none; -ms-touch-action:none;
}

#world{
  position:absolute;left:0;top:0;transform-origin:0 0;
  /* Softer transition for programmatic pan/zoom */
  transition:transform 420ms cubic-bezier(.25,.8,.25,1)
}

/* ===== Nodes ===== */
.node{
  position:absolute;transform:translate(-50%,-50%);
  background:#151b23;border:1px solid #2a3646;border-radius:10px;
  padding:6px 8px;white-space:nowrap;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
  will-change:transform;
  /* Minimum footprint so items never collapse */
  min-width:140px; min-height:60px;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
}
.node .label{font-size:12px;color:var(--muted)}
.node.selected{
  border-color:var(--accent);
  box-shadow:0 8px 24px rgba(121,192,255,.25),0 0 0 2px rgba(121,192,255,.35) inset
}

/* Drag handle */
.node .handle,
.drag-handle{
  position:absolute;top:-10px;right:-10px;width:18px;height:18px;
  border-radius:50%;background:#fff;border:1px solid #d0d7e2;
  display:none;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  cursor:grab;user-select:none;-webkit-user-select:none;-moz-user-select:none
}
.node .handle *, .node .handle svg,
.drag-handle *, .drag-handle svg{cursor:grab}
.node.selected .handle, .node.selected .drag-handle{display:flex}
.node .handle:hover, .drag-handle:hover{box-shadow:0 3px 10px rgba(0,0,0,.3)}
.node .handle:active, .drag-handle:active{transform:translateY(1px)}

body.dragging-node,
body.dragging-node *{cursor:grabbing !important}

/* ===== Images (thumbnails) ===== */
.node.image{
  padding:0;border-radius:12px;overflow:hidden;
  background:#0e131a; /* subtle backdrop while image loads */
  min-width:140px; min-height:140px; /* minimum thumbnail size */
}
.node.image .thumb{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;
  padding:8px;color:#96a3b3;font-size:12px
}
.node img{
  display:block;
  max-width:400px; max-height:400px; /* cap large previews */
  min-width:140px; min-height:140px; /* minimum thumb */
  width:auto; height:auto;
  object-fit:contain; /* contain within max bounds */
}

/* Footer hint */
#hint{
  position:fixed;bottom:12px;left:12px;color:var(--muted);font-size:12px;
  background:#12161dcc;border:1px solid #263041;border-radius:10px;padding:6px 8px
}

/* Buttons */
.button, #toolbar button{
  appearance:none;border:1px solid #d0d7e2;border-radius:8px;
  background:#fff;color:#0b0e12;padding:6px 10px;cursor:pointer;font-weight:600;
  transition:background .15s ease,border-color .15s ease,transform .15s ease,box-shadow .15s ease;
  box-shadow:0 1px 0 rgba(0,0,0,.2)
}
.button:hover, #toolbar button:hover{background:#f3f5f8;border-color:#b8c1cf}
#toolbar button:disabled{opacity:.5;cursor:not-allowed}
.button:active, #toolbar button:active{transform:translateY(1px);background:#e6eaf0;box-shadow:inset 0 2px 4px rgba(0,0,0,.15)}
.button:focus-visible, #toolbar button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.scale{font-variant-numeric:tabular-nums}
#toolbar .button, #toolbar button{pointer-events:auto}