work on fixing group drag

frontend/src/styles.css

@@ -236,8 +236,104 @@ html, body, #root {
   overflow: hidden;
 }
 
+.group-node {
+  width: 100%;
+  height: 100%;
+  min-width: 220px;
+  resize: none;
+  border-style: dashed;
+  display: flex;
+  flex-direction: column;
+  background:
+    linear-gradient(180deg, rgba(30, 41, 59, 0.82), rgba(15, 23, 42, 0.72));
+  box-shadow:
+    inset 0 0 0 1px rgba(148, 163, 184, 0.08),
+    inset 0 1px 18px rgba(15, 23, 42, 0.28);
+}
+
+.group-node-title {
+  background: #334155;
+}
+
+.group-node-title .node-title-main {
+  flex: 1;
+}
+
+.group-node-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: auto;
+}
+
+.group-toggle {
+  border: 0;
+  background: rgba(15, 23, 42, 0.65);
+  color: var(--text-heading);
+  border-radius: 4px;
+  padding: 2px 8px;
+  cursor: pointer;
+  font-size: 12px;
+  line-height: 1;
+}
+
+.group-toggle-collapse {
+  min-width: 24px;
+  padding: 2px 6px;
+}
+
+.group-node-summary {
+  padding: 6px 10px;
+  color: var(--text-secondary);
+  font-size: 10px;
+  border-top: 1px solid var(--border-subtle);
+}
+
+.group-node .node-body {
+  flex: 1;
+  min-height: 0;
+}
+
+.group-node-expanded .node-body {
+  padding: 12px;
+}
+
+.group-node-workspace {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 120px;
+  border-radius: 8px;
+  border: 1px solid rgba(148, 163, 184, 0.2);
+  background:
+    linear-gradient(180deg, rgba(15, 23, 42, 0.16), rgba(15, 23, 42, 0.34));
+  box-shadow:
+    inset 0 0 0 1px rgba(15, 23, 42, 0.12),
+    inset 0 12px 28px rgba(15, 23, 42, 0.18);
+  pointer-events: none;
+}
+
+.group-node-workspace-label {
+  position: absolute;
+  top: 10px;
+  left: 12px;
+  color: rgba(148, 163, 184, 0.58);
+  font-size: 10px;
+  letter-spacing: 0.06em;
+  text-transform: lowercase;
+}
+
+.group-node-expanded .group-node-summary {
+  position: absolute;
+  right: 10px;
+  bottom: 8px;
+  border-top: 0;
+  padding: 0;
+  background: transparent;
+}
+
 /* Let React Flow node wrapper fit to the custom-node's size */
-.react-flow__node-custom {
+.react-flow__node-custom:not(.group-shell) {
   width: auto !important;
   height: auto !important;
 }