/* ============================================
      START: NodeUI Library Scoped Styles
      ============================================
      All library styles are now scoped within the `.node-ui-editor` class
      to prevent polluting the global scope.
      */

.node-ui-editor {
  /* These styles were moved from the body tag to be self-contained */
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  background-color: var(--background-1);
  color: var(--text-1);

  /* The container now fits its parent and manages its own layout */
  width: 100%;
  height: 100%;
  border: 1px solid var(--panel-border);
  box-sizing: border-box;
  position: relative; /* Crucial for positioning internal absolute elements */
  overflow: hidden; /* Also moved from body */
  cursor: default; /* Default cursor, grab for panning */
  flex-grow: 1; /* Allow editor to fill space in flex container */
  user-select: none !important;
}
.node-ui-editor.node-ui-panning {
  cursor: grabbing;
}

.node-ui-editor .node-ui-content-wrapper {
  position: absolute;
  transform-origin: 0 0;
}

.node-ui-editor .node-ui-svg-layer {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.node-ui-editor .node-ui-selection-rectangle {
  position: absolute;
  border: 1px solid var(--accent);
  background-color: rgba(56, 189, 248, 0.2);
  z-index: 10000;
  display: none;
  pointer-events: none;
}

/* Node Styling */
.node-ui-editor .node-ui-node {
  position: absolute;
  background-color: var(--background-2);
  border: 2px solid var(--text-2);
  box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  cursor: default;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  user-select: none;
  min-width: 60px;
  min-height: 60px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  padding: 0;
}
.node-ui-editor .node-ui-node.node-ui-selected {
  border-color: var(--blue -3) !important;
  box-shadow: 0 0 15px var(--blue-3);
}
.node-ui-editor .node-ui-node.node-type-question {
  border-color: var(--text-2);
}
.node-ui-editor .node-ui-node.node-type-answer {
  border-color: var(--text-2);
  border-style: dashed;
}
.node-ui-editor .node-ui-node-custom-content-container {
  flex-grow: 1;
  padding: 8px;
  user-select: text;
  min-height: 30px;
  outline: none;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.node-ui-editor .node-ui-node-anchor {
  position: absolute;
  width: 14px;
  height: 14px;
  background-color: var(--yellow-3);
  border: 2px solid var(--orange-2);
  border-radius: 50%;
  cursor: crosshair;
  z-index: 10;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  transition: background-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
  display: none;
}
.node-ui-editor .node-ui-node:hover .node-ui-node-anchor,
.node-ui-editor .node-ui-node.node-ui-selected .node-ui-node-anchor {
  display: block;
}
.node-ui-editor.node-ui-node-editor-connecting
  .node-ui-node
  .node-ui-node-anchor {
  display: block;
}
.node-ui-editor .node-ui-node-anchor:hover {
  background-color: var(--orange-3);
  transform: translate(-50%, -50%) scale(1.15);
}
.node-ui-editor .node-ui-node-anchor.top {
  top: 0%;
  left: 50%;
}
.node-ui-editor .node-ui-node-anchor.bottom {
  top: 100%;
  left: 50%;
}
.node-ui-editor .node-ui-node-anchor.left {
  top: 50%;
  left: 0%;
}
.node-ui-editor .node-ui-node-anchor.right {
  top: 50%;
  left: 100%;
}

.node-ui-editor .node-ui-node-resize-handle {
  position: absolute;
  width: 24px;
  height: 24px;
  bottom: 0px;
  right: 0px;
  cursor: nwse-resize;
  z-index: 11;
  border-bottom-right-radius: 4px;
  mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg class='icon icon-tabler icons-tabler-outline icon-tabler-arrows-diagonal' width='24' height='24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' version='1.1' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m24 0h-24v24h24z' fill='none' stroke='none'/%3E%3Cpath d='m8 4h-4v4'/%3E%3Cpath d='m10 10-6-6'/%3E%3Cpath d='m16 20h4v-4'/%3E%3Cpath d='m20 20-6-6'/%3E%3C/svg%3E");
  mask-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--text-2);
}

.node-ui-editor .node-ui-node-control-button {
  position: absolute;
  width: 24px;
  height: 24px;
  color: var(--text-1);
  border: none;
  margin: 0px;
  border-radius: 50%;
  text-align: center;
  z-index: 12;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}
.node-ui-editor .node-ui-node-delete-btn {
  top: 3px;
  right: 3px;
  /*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-x'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M18 6l-12 12' /%3E%3Cpath d='M6 6l12 12' /%3E%3C/svg%3E");*/
  background-color: var(--red-3);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-x'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M18 6l-12 12' /%3E%3Cpath d='M6 6l12 12' /%3E%3C/svg%3E");
  mask-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.node-ui-editor .node-ui-node-delete-btn:hover {
  background-color: var(--red-3);
}
.node-ui-editor .node-ui-node-clone-btn {
  top: 3px;
  right: 25px;
  background-color: var(--text-2);
  mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-copy' version='1.1' id='svg3' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs3' /%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none' id='path1' /%3E%3Cpath style='fill:%23000000;stroke:none' d='M 5,2 C 3.3545455,2 2,3.3545455 2,5 v 10 a 1.0001,1.0001 0 0 0 0,0.002 c 0.00259,1.075234 0.5834711,2.070995 1.5175781,2.603516 A 1,1 0 0 0 4.8808594,17.232422 1,1 0 0 0 4.5078125,15.869141 C 4.1940477,15.690268 4.0015096,15.361061 4,15 V 5 C 4,4.4454545 4.4454545,4 5,4 h 10 c 0.203889,0 0.24664,0.027483 0.316406,0.078125 0.06977,0.050642 0.17856,0.1708577 0.310547,0.4082031 a 1,1 0 0 0 1.359375,0.3867188 1,1 0 0 0 0.386719,-1.359375 C 17.163034,3.1360173 16.897469,2.7565452 16.490234,2.4609375 16.083,2.1653298 15.546111,2 15,2 Z' id='path3' /%3E%3Cpath style='fill:%23000000;stroke:none' d='M 9.6679688,6 C 7.6545852,6 6,7.6545852 6,9.6679688 V 18.332031 C 6,20.345415 7.6545852,22 9.6679688,22 H 18.332031 C 20.345415,22 22,20.345415 22,18.332031 V 9.6679688 C 22,7.6545852 20.345415,6 18.332031,6 Z m 0,2 H 18.332031 C 19.264535,8 20,8.7354654 20,9.6679688 V 18.332031 C 20,19.264535 19.264535,20 18.332031,20 H 9.6679688 C 8.7354654,20 8,19.264535 8,18.332031 V 9.6679688 C 8,8.7354654 8.7354654,8 9.6679688,8 Z' id='path2' /%3E%3C/svg%3E");
  mask-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.node-ui-editor .node-ui-node-clone-btn:hover {
  background-color: var(--blue-2);
}
.node-ui-editor .connection-line {
  stroke: var(--neutral-3);
  stroke-width: 2.5px;
  fill: none;
  pointer-events: none;
  stroke-linecap: round;
  transition: stroke 0.2s ease, stroke-width 0.2s ease;
}

.node-ui-editor .connection-line.required {
  stroke-dasharray: 1, 6; /* An 8px line followed by a 6px gap */
  stroke: var(--blue-3);
}

.node-ui-editor .connection-line.excluded {
  stroke-dasharray: 16, 6;
  stroke: var(--orange-3);
}

.node-ui-editor .connection-line.selected {
  stroke: var(--red-3);
}
.node-ui-editor .connection-line.highlighted {
  stroke: var(--accent);
}

.node-ui-editor .connection-hitbox {
  stroke: transparent;
  stroke-width: 12px;
  fill: none;
  pointer-events: stroke;
  stroke-linecap: round;
  cursor: pointer;
}
.node-ui-editor .temp-connection-line {
  stroke: var(--accent);
  stroke-width: 2px;
  stroke-dasharray: 6, 4;
  fill: none;
  pointer-events: none;
}

.node-ui-editor .node-ui-connection-label {
  position: absolute;
  background-color: var(--background-2, #373737);
  color: var(--text-2, #ccc);
  border: 1px solid var(--neutral-3, #71717a);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 12px;
  white-space: nowrap; /* Prevents the label text from wrapping */
  transform: translate(-50%, -50%); /* Centers the element on its position */
  pointer-events: none; /* Allows mouse events to pass through to the connection hitbox */
  z-index: 1; /* Sits above the SVG layer but below nodes */
  display: none; /* Hidden by default until it has content */
  user-select: none;
}

/* Add this at the end of your nodeui.css file */
.node-ui-editor .node-ui-boundary-line {
  position: absolute;
  background-color: var(--panel-border, #404040);
  z-index: -1;
}

.node-ui-editor .node-ui-boundary-line.top,
.node-ui-editor .node-ui-boundary-line.bottom {
  top: 0;
  left: 0;
  width: 100%;
  height: 1px; /* Changed from 2px */
}
.node-ui-editor .node-ui-boundary-line.bottom {
  top: auto;
  bottom: 0;
}
.node-ui-editor .node-ui-boundary-line.left,
.node-ui-editor .node-ui-boundary-line.right {
  top: 0;
  left: 0;
  width: 1px; /* Changed from 2px */
  height: 100%;
}
.node-ui-editor .node-ui-boundary-line.right {
  left: auto;
  right: 0;
}

.node-ui-editor .node-ui-multi-select-gizmo {
  position: absolute;
  border: 2px dashed var(--accent, #38bdf8);
  background-color: rgba(56, 189, 248, 0.1);
  /* Make it draggable */
  pointer-events: all;
  cursor: move;
  /* Set z-index behind nodes so anchors are clickable */
  z-index: 0;
  /* Hidden by default */
  display: none;
  box-sizing: border-box;
}

.node-ui-editor .node-ui-group {
  position: absolute;
  background-color: rgba(128, 128, 128, 0.15);
  border: 2px solid #888;
  border-radius: 12px;
  box-sizing: border-box;
  z-index: 0; /* Keep groups behind nodes */
  cursor: move;
}

.node-ui-editor .node-ui-group.node-ui-selected {
  border-color: var(--accent);
}

.node-ui-editor .node-ui-group-title {
  position: absolute;
  left: 10px;
  color: var(--text-1);
  font-weight: bold;
  font-size: 16px;
  cursor: text;
  user-select: none;
  padding: 4px 8px;
  background-color: var(--background-1);
  border-radius: 5px;
  white-space: nowrap;
  transform-origin: bottom left; /* MODIFIED */
  z-index: 10000;
}

.node-ui-editor .node-ui-group-resize-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  bottom: 0;
  right: 0;
  cursor: nwse-resize;
  z-index: 1; /* Above the group but below nodes */
  background-color: #888;
  mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg class='icon icon-tabler icons-tabler-outline icon-tabler-arrows-diagonal' width='24' height='24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' version='1.1' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m24 0h-24v24h24z' fill='none' stroke='none'/%3E%3Cpath d='m8 4h-4v4'/%3E%3Cpath d='m10 10-6-6'/%3E%3Cpath d='m16 20h4v-4'/%3E%3Cpath d='m20 20-6-6'/%3E%3C/svg%3E");
  mask-size: cover;
}

.node-ui-editor .node-ui-create-group-button {
  position: absolute;
  left: 10px;
  user-select: none;
  background-color: var(--accent);
  border-radius: 5px;
  transform-origin: bottom left; /* MODIFIED */
  z-index: 10001;
}

.node-ui-editor .node-ui-group-delete-btn {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 24px;
  height: 24px;
  background-color: var(--red-3);
  border-radius: 50%;
  cursor: pointer;
  z-index: 2; /* Must be on top of the group */
  display: none; /* Hidden by default */
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M18 6l-12 12' /%3E%3Cpath d='M6 6l12 12' /%3E%3C/svg%3E");
  mask-size: 60%;
  mask-repeat: no-repeat;
  mask-position: center;
  transition: transform 0.2s ease;
}

.node-ui-editor .node-ui-group-delete-btn:hover {
  transform: scale(1.1);
}

/* Show the button ONLY when the group is selected */
.node-ui-editor .node-ui-group.node-ui-selected .node-ui-group-delete-btn {
  display: block;
}

.node-ui-editor .node-ui-grid {
  background-image: radial-gradient(
    circle,
    var(--panel-border, #404040) 1px,
    transparent 1px
  );
  background-size: 20px 20px;
}