/* ── Boards module styles ───────────────────────────────────────────── */
  /* Shell: 2-col when right panel is visible, otherwise full-bleed main */
#boardsShell {
  height: 91vh;
}

#boardsMain {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 0;
  background: transparent !important;
}
#boardsShell #boardSvg, #boardsShell #boardSvg * { touch-action: none; }
#boardsShell .selected { outline: 1.5px dashed var(--primary); outline-offset: 2px; }
#boardsShell .guide-line { stroke: var(--primary); stroke-opacity: .35; stroke-dasharray: 4 4; pointer-events: none; }
#boardsShell .comment-pin { fill: var(--primary); opacity:.8; cursor: pointer; }
#boardsShell .locked { filter: saturate(.5); }
#boardsShell .stroke { stroke: var(--text); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Resize handles */
#boardsShell .resize-box { pointer-events: none; }
#boardsShell .resize-handle { fill: var(--bg); stroke: var(--primary); stroke-width: 1.5; pointer-events: all; cursor: grab; touch-action: none; vector-effect: non-scaling-stroke; transition: fill .12s ease, stroke .12s ease, filter .12s ease; }
#boardsShell .resize-edge   { fill: var(--surface); stroke: var(--primary); stroke-width: 1.2; pointer-events: all; cursor: grab; touch-action: none; vector-effect: non-scaling-stroke; transition: fill .12s ease, stroke .12s ease, filter .12s ease; }
#boardsShell .resize-handle:hover { fill: var(--primary-weak, rgba(84,132,255,.16)); filter: drop-shadow(0 0 6px rgba(13,110,253,.28)); }
#boardsShell .resize-edge:hover { fill: var(--primary-weak, rgba(84,132,255,.14)); filter: drop-shadow(0 0 4px rgba(13,110,253,.22)); }

/* Right-click dragging affordance */
#boardsShell .draggable:active { cursor: grabbing; }

/* Top-edge bin zone */
#boardsShell .bin-zone { position:absolute; top:0; left:0; right:0; height:42px; display:grid; place-items:center; pointer-events:none; }
#boardsShell .bin-zone i { opacity:.0; transition: opacity .12s ease; }
#boardsShell .bin-zone.active { background: rgba(255,0,0,.12); outline: 1px solid rgba(255,0,0,.28); }
#boardsShell .bin-zone.active i { opacity:.9; }

/* Eraser cursor ring */
#boardsShell #eraserRing { pointer-events:none; }
#boardsShell .eraser-dab { fill: #000; }

#boardsShell .boards-header { border-bottom: var(--line); padding: .5rem; position:relative; }
#boardsShell .boards-header .row { display:flex; justify-content: space-between; align-items: center; gap: .75rem; margin: 0 0 3px 0; }
#boardsShell .boards-header .row-1 .left { display:flex; align-items:center; gap:.75rem; }
#boardsShell .boards-header .row-1 .section-title { margin:0; font-size: 1.1rem; }
#boardsShell .boards-header .row-2 .center{flex:1;display:flex;justify-content: flex-start;}
#boardsShell .boards-header input[type="text"] { background: transparent; border: var(--line); border-radius: 20px; padding: .25rem .3rem; color: var(--text); outline: none; }
#boardsShell .boards-header .title-input {font-size:1rem; width:min(200px, 30vw); top:0; left:-5px; position:relative;}
#boardsShell .boards-header .actions { display:flex; gap:.35rem; }
#boardsShell .collabs { display:flex; align-items:center; gap:.5rem; min-width: 140px; justify-content:flex-end; }
#boardsShell .collabs .avatars { display:flex; align-items:center; gap:.25rem; max-width: 220px; overflow:hidden; }
#boardsShell .collab-avatar { width: 28px; height: 28px; border-radius: 50%; display:grid; place-items:center; font-weight:700; font-size:.8rem; background: rgba(255,255,255,.12); color: var(--text); border: var(--line); }
#boardsShell .collab-avatar[title] { cursor: pointer; }

#boardsShell .board-stage {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  background: radial-gradient(var(--dots) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,0.04), rgba(255,255,255,0.04));
  background-position: 0 0, 10px 10px, 0 0;
  background-size: 20px 20px, auto;
  border-radius: 10px;
  margin-top: .5rem;
}
#boardsShell #boardSvg { width:100%; height:100%; touch-action: none; user-select: none; }

#boardsShell .boards-fab {
  position: absolute; top: 18px;
  width: 35px; height: 35px; border-radius: 50%;
  display:grid; place-items:center; border: var(--line);
  background: var(--bg); box-shadow: var(--shadow);
  cursor: grab;
  transition: transform .12s ease, right .22s ease, left .22s ease, top .22s ease, bottom .22s ease;
  z-index: 10;
}
#boardsShell .boards-fab:active { cursor: grabbing; transform: scale(.98); }
#boardsShell .boards-tool-panel {
  position: absolute; min-width: 260px; max-width: 480px;
  background: var(--bg); border: var(--line); border-radius: 10px; box-shadow: var(--shadow);
  padding: .5rem; z-index: 9;
  transform-origin: center center;
}
#boardsShell .boards-tool-panel .categories-row { display:flex; gap:.5rem; overflow-x:auto; }
#boardsShell .boards-tool { display:flex; flex-direction:column; align-items:center;
    border: var(--line); border-radius:10px; padding:.5rem; background: var(--surface);
    cursor:pointer; font-size:.75rem; }
#boardsShell .boards-tool i { font-size: 1.1rem; }
#boardsShell .boards-tool-panel .categories-row .boards-tool { min-width: 50px; user-select:none; }

/* Elements sub-panel (separate floating panel, placed under the board panel) */
#boardsShell .boards-sub-panel {
  position: absolute; min-width: 260px; max-width: 520px;
  background: var(--bg); border: var(--line); border-radius: 10px; box-shadow: var(--shadow);
  padding: .5rem; z-index: 9; transform-origin: center center;
}
/* PATCH: Data editor */
dialog.data-modal, dialog.data-modal::backdrop { animation: none; }
.data-form { min-width: min(520px, 90vw); }
.data-form h3 { margin: 0 0 .5rem; }
.data-form .hint{ font-size:.85rem; opacity:.8; margin-bottom:.35rem; }
.data-grid{ width:100%; border-collapse: collapse; margin-bottom:.5rem; }
.data-grid th, .data-grid td{ border: var(--line); padding:.35rem; }
.data-grid input[type="text"], .data-grid input[type="number"]{
  width:100%; box-sizing:border-box; background:transparent; border: var(--line);
  border-radius:6px; padding:.25rem .35rem; color:var(--text);
}
.data-form textarea{
  width:100%; box-sizing:border-box; background:transparent; border: var(--line);
  border-radius:8px; padding:.5rem; color:var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.data-form .row{ display:flex; gap:.35rem; justify-content:flex-end; align-items:center; }
.data-form .row .sp{ flex:1; }
#boardsShell .draggable { cursor: default; }
#boardsShell.board-dragging .draggable { cursor: grabbing; }
#boardsShell.board-dragging #boardSvg, #boardsShell.board-dragging #boardSvg * { cursor: grabbing !important; }
#boardsShell .boards-sub-panel .boards-sublist { display:grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap:.35rem; }
#boardsShell .boards-sub-panel .header { display:flex; align-items:center; justify-content:space-between; margin-bottom:.35rem; gap:.5rem; }
#boardsShell .boards-sub-panel .title { font-weight:600; }

/* Right panel list */
#boardsShell #boardsRightPanel .boards-list { padding: .5rem; display:flex; flex-direction: column; gap:.5rem; }
#boardsShell .board-card { border: var(--line); border-radius: 10px; padding:.5rem; background: var(--surface); display:grid; grid-template-columns: 1fr auto; gap:.25rem; }
#boardsShell .board-card .name { font-weight: 600; }
#boardsShell .board-card .meta { font-size:.8rem; color: var(--text-muted); }
#boardsShell .board-card .row-actions { display:flex; gap:.25rem; align-items:center; }

/* Live controls */
#boardsShell .live-btn{ display:inline-flex; align-items:center; gap:.45rem; }
#boardsShell .live-dot{ width:10px; height:10px; border-radius:999px; background: rgba(255,0,0,.75); box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset; }
#boardsShell .live-btn.on .live-dot{ background: rgba(0,255,120,.85); }
#boardsShell .live-badge{ display:inline-block; width:8px; height:8px; border-radius:999px; margin-right:.35rem; background: rgba(0,255,120,.85); }

/* Collaborator picker dialog */
dialog.collab-modal{border: var(--line);border-radius: 12px;padding: 0;background: var(--surface);color: var(--text);width: min(560px, 92vw);box-shadow: inset 1px 1px 18px 2px var(--primary-faded);}
dialog.collab-modal::backdrop{ background: rgba(0,0,0,.45); }
dialog.collab-modal .card{ border: none; box-shadow: none; }
.collab-form{display:flex;flex-direction:column;gap: 10px;padding: 10px;}
.collab-form .section{display:flex;flex-direction:column;gap: 10px;border-bottom:var(--line);padding-bottom:2px}
#boardsShell .user-row{display:flex;align-items:center;gap: 10px;padding:2px 0}

/* SVG basics */
#boardsShell .node { fill: rgba(255,255,255,.04); stroke: rgba(255,255,255,.35); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
#boardsShell .node.selected { outline: 2px solid var(--primary); }
#boardsShell .edge { stroke: rgba(255,255,255,.6); stroke-width: 2; fill: none; }
#boardsShell .edge.arrow { marker-end: url(#arrowhead); }
#boardsShell .node { shape-rendering: geometricPrecision; }
#boardsShell .label { font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; font-size: var(--text-size); fill: var(--text); }

/* Simple selection box */
#boardsShell .marquee { fill: rgba(84,132,255,.12); stroke: rgba(84,132,255,.45); stroke-dasharray: 4 3; }

/* Rolling in/out animations (axis-aware) */
@keyframes rollInY { from { transform: scaleY(.82); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
@keyframes rollOutY { from { transform: scaleY(1); opacity: 1; } to { transform: scaleY(.82); opacity: 0; } }
@keyframes rollInX { from { transform: scaleX(.82); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes rollOutX { from { transform: scaleX(1); opacity: 1; } to { transform: scaleX(.82); opacity: 0; } }
.anim-in.axis-y { animation: rollInY .22s ease; }
.anim-out.axis-y { animation: rollOutY .16s ease forwards; }
.anim-in.axis-x { animation: rollInX .22s ease; }
.anim-out.axis-x { animation: rollOutX .16s ease forwards; }
/* Tool Pill (docks under FAB) */
#boardsShell .boards-tool-pill{
  position:static;
  z-index:11;
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
  min-width:230px;
  max-width: 600px;
  min-height: 35px;
  padding: 0 .25rem;
  background:var(--bg);
  border:var(--line);
  border-radius: 50px;
  box-shadow:var(--shadow);
}
#boardsShell .boards-tool-pill .row{display:flex;gap:.35rem;align-items:center;flex-wrap:wrap;}
#boardsShell .boards-tool-pill label{font-size:.8rem; opacity:.8; margin:0; margin-right:.15rem;}
#boardsShell .boards-tool-pill input[type="color"]{width: 25px;height: 25px;padding:0;background:none;border:0;cursor:pointer;box-sizing:border-box;border-radius:999px;}
#boardsShell .boards-tool-pill input[type="range"]{width:9vw; min-width:84px; accent-color: var(--primary);}
#boardsShell .boards-tool-pill .seg{
  display:inline-flex; border:var(--line); border-radius:999px; overflow:hidden;
}
#boardsShell .boards-tool-pill .seg > button{
  padding:.25rem .5rem; border:0; background:var(--surface);
}
#boardsShell .boards-tool-pill .seg > button.active{ background:var(--primary-weak, rgba(84,132,255,.12)); }
#boardsShell .boards-tool-pill .sp{ width:10px; height:1px; }
#boardsShell .boards-tool.active{ border-color: var(--primary); box-shadow: 0 0 0 1.5px var(--primary) inset; }

#boardsShell .node{ pointer-events:all; }
#boardsShell .edge, #boardsShell .stroke{ pointer-events:stroke; vector-effect: non-scaling-stroke; }
/* Flow Ports (single always-visible port + optional “add another” port) */
#boardsShell .node-port{
  fill: rgba(255,255,255,.08);
  stroke: rgba(255,255,255,.62);
  stroke-width: 1.25px;
  cursor: crosshair;
  pointer-events: all;
  touch-action: none;
  vector-effect: non-scaling-stroke;
  /* Smooth glide when snapping along the frame track */
  transition: cx .14s ease, cy .14s ease, transform .12s ease, opacity .12s ease, fill .12s ease, stroke .12s ease;
  filter: url(#shadow);
  opacity: 1;
}
#boardsShell .node-port:hover{
  /* keep geometry stable; hover feedback is visual only */
  fill: var(--primary, #0d6efd);
  stroke: rgba(255,255,255,.95);
  transform: scale(1.03);
}
#boardsShell .node-port.add-port{
  opacity: 0;
  pointer-events: none;
  fill: rgba(255,255,255,.10);
  stroke: rgba(255,255,255,.55);
  stroke-dasharray: 2 2;
}
#boardsShell .node-port.add-port.show{
  opacity: 1;
  pointer-events: all;
}
#boardsShell .node-port-plus{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 9px;
  font-weight: 800;
  fill: rgba(255,255,255,.95);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
}
#boardsShell .node-port-plus.show{ opacity: 1; }
#boardsShell .node-port.add-port:hover{
  fill: var(--primary, #0d6efd);
  stroke: rgba(255,255,255,.95);
  stroke-dasharray: none;
}

/* Comment Badge */
#boardsShell .comment-badge {
  fill: #dc3545;
  stroke: #fff;
  stroke-width: 1px;
}
#boardsShell .comment-bubble rect{ fill: rgba(0,0,0,.82); stroke: rgba(255,255,255,.18); }
#boardsShell .comment-bubble .body{ font-size: 12px; fill: var(--text); }
#boardsShell .comment-bubble .close{ font-size: 12px; fill: var(--text); cursor: pointer; }
#boardsShell .comment-text {
  font-size: 10px;
  fill: #fff;
  font-weight: bold;
  pointer-events: none;
  text-anchor: middle;
}

/* Connector Hover Menu */
.connector-menu {
  position: fixed;
  max-width: calc(100vw - 24px);
  background: rgba(20,20,20,.92);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 12px 34px rgba(0,0,0,0.35);
  display: flex;
  gap: 4px;
  z-index: 100;
  pointer-events: auto;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  isolation: isolate;
}
.connector-menu .icon-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
}
.connector-menu .icon-btn:hover{
  background: rgba(255,255,255,.10);
}
/* Smart resize affordance (shown on hover/near) */
#boardsShell .expand-handle{ pointer-events: all; cursor: nwse-resize; touch-action: none; }
#boardsShell .expand-handle-bg{ fill: rgba(0,0,0,.34); stroke: rgba(255,255,255,.18); stroke-width: 1.25; }
#boardsShell .expand-handle-icon{ fill: none; stroke: rgba(255,255,255,.85); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#boardsShell .expand-handle:hover .expand-handle-bg{ fill: rgba(0,0,0,.42); stroke: rgba(255,255,255,.28); }

/* Flow Editor Popup */
.flow-popup {
  position: fixed;
  background: rgba(20,20,20,.94);
  border: 1px solid rgba(255,255,255,.10);
  padding: 12px;
  border-radius: 14px;
  box-shadow: 0 14px 44px rgba(0,0,0,0.45);
  width: min(300px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 100;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  isolation: isolate;
}
.flow-popup input, .flow-popup textarea {
  width: 100%;
  box-sizing: border-box;
  max-width: 100%;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
   font-size: 13px;
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-size: 13px;
}
.flow-popup label{ font-size:.78rem; opacity:.85; }
.flow-popup strong{ font-size:.95rem; }
.flow-popup .row .btn{ border-radius: 10px; }
.flow-popup .row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* Connector Body Arrows */
#boardsShell .connector-arrow-body {
  fill: none;
  stroke: var(--text, #333);
  opacity: .85;
  pointer-events: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* Drag + smart resize affordances (shown on hover/near) */
#boardsShell .drag-handle { cursor: grab; pointer-events: all; }
#boardsShell.board-dragging .drag-handle { cursor: grabbing; }
#boardsShell .drag-handle-bg { fill: rgba(0,0,0,.28); stroke: rgba(255,255,255,.18); stroke-width: 1.25; }
#boardsShell .drag-handle-dot { fill: rgba(255,255,255,.65); }
#boardsShell .smart-resize-handle { fill: rgba(13,110,253,.10); stroke: rgba(13,110,253,.70); stroke-width: 1.5; pointer-events: all; cursor: nwse-resize; }
#boardsShell .smart-resize-handle:hover { filter: drop-shadow(0 0 6px rgba(13,110,253,.35)); }