/* BlueprintBridge — UE-style dark theme */
:root {
  --bg: #1a1a1e;
  --grid: #232328;
  --grid-line: #2b2b31;
  --panel: #232329;
  --panel-2: #2b2b33;
  --text: #d8d8dc;
  --text-dim: #8b8b93;
  --accent: #2f88ff;
  --danger: #e05555;
  --node-bg: rgba(20, 20, 24, 0.92);
  --node-border: #000;
  /* pin type colors (matching UE) */
  --c-exec: #ffffff;
  --c-bool: #8a0000;
  --c-int: #1fe2ae;
  --c-float: #9fef62;
  --c-string: #f527d8;
  --c-name: #c88adf;
  --c-text: #e2a4c5;
  --c-vector: #f4c542;
  --c-rotator: #9bb7f8;
  --c-transform: #f08c00;
  --c-object: #29b6f6;
  --c-class: #5d0d9c;
  --c-byte: #006f64;
  --c-struct: #1141b1;
  --c-delegate: #ff3838;
  --c-wildcard: #7a7a7a;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 13px;
}
/* 100dvh tracks the *visible* viewport so the bottom panel isn't hidden
   behind the mobile address bar (100vh kept as a fallback for old browsers) */
#app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

/* ---------- toolbar ---------- */
#toolbar {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: var(--panel);
  border-bottom: 1px solid #000;
  flex-wrap: wrap;
}
.brand { font-weight: 700; font-size: 15px; margin-right: 10px; letter-spacing: 0.3px; }
.brand span { color: var(--accent); }
.brand .ver { color: var(--text-dim); font-weight: 400; font-size: 10.5px; margin-left: 6px; letter-spacing: 0.4px; }

/* ---------- projects control ---------- */
#btn-projects { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; }
#btn-projects #proj-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; font-weight: 600; }
#btn-projects .caret { color: var(--text-dim); font-size: 10px; }
#proj-status { color: var(--text-dim); font-size: 11px; min-width: 48px; }
#proj-status.dirty { color: #ffd27f; }
#proj-status.error { color: var(--danger); }
#proj-menu {
  position: fixed; z-index: 210; min-width: 240px; max-height: 70vh; overflow-y: auto;
  background: var(--panel); border: 1px solid #3a3a44; border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6); padding: 4px;
}
#proj-menu .item { padding: 7px 10px; border-radius: 4px; cursor: pointer; font-size: 12.5px; white-space: nowrap; }
#proj-menu .item:hover { background: var(--accent); color: #fff; }
#proj-menu .proj-sep { height: 1px; background: #3a3a44; margin: 4px 2px; }
#proj-menu .proj-hdr { padding: 4px 10px; font-size: 10.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }
#proj-menu .proj-item .pn { overflow: hidden; text-overflow: ellipsis; }
#proj-menu .proj-item.current { font-weight: 700; }
#proj-menu .proj-item.current::after { content: " ✓"; color: #6fdc7f; }
#proj-menu .proj-item.current:hover::after { color: #fff; }

/* shared dropdown (account menu) */
.dropdown {
  position: fixed; z-index: 210; min-width: 170px;
  background: var(--panel); border: 1px solid #3a3a44; border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6); padding: 4px;
}
.dropdown .item { padding: 7px 10px; border-radius: 4px; cursor: pointer; font-size: 12.5px; white-space: nowrap; }
.dropdown .item:hover { background: var(--accent); color: #fff; }

/* ---------- account / auth ---------- */
#btn-account { white-space: nowrap; }
#auth-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 220; }
#auth-modal.hidden { display: none; }
#auth-box { width: min(360px, 92vw); background: var(--panel); border: 1px solid #3a3a44; border-radius: 8px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
#auth-title { font-weight: 700; font-size: 15px; }
#auth-sub { font-size: 12px; color: var(--text-dim); line-height: 1.45; }
#auth-box input { background: #111; color: #ddd; border: 1px solid #3a3a44; border-radius: 4px; padding: 9px 10px; font-size: 13px; }
#auth-msg { font-size: 12px; color: var(--text-dim); min-height: 16px; }
#auth-msg.err { color: var(--danger); }
#auth-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
#auth-buttons button { flex: 1; min-width: 110px; background: var(--panel-2); color: var(--text); border: 1px solid #3a3a44; border-radius: 4px; padding: 9px 12px; cursor: pointer; font-size: 12.5px; }
#auth-buttons button:hover { background: #34343e; }
#auth-login { border-color: var(--accent) !important; }
#auth-cancel { flex-basis: 100%; }
#toolbar button {
  background: var(--panel-2); color: var(--text);
  border: 1px solid #3a3a44; border-radius: 4px;
  padding: 5px 11px; cursor: pointer; font-size: 12.5px;
}
#toolbar button:hover { background: #34343e; border-color: #50505c; }
#toolbar button:disabled { opacity: 0.4; cursor: default; }
#toolbar button.danger:hover { background: #4d2326; border-color: var(--danger); }
#toolbar button.play { background: #1d4022; border-color: #2e6b37; }
#toolbar button.play:hover { background: #265a2e; }
#toolbar button.stop { background: #46201f; border-color: #6e3331; }
#toolbar .sep { width: 1px; height: 20px; background: #3a3a44; margin: 0 4px; }
#toolbar .spacer { flex: 1; }

/* ---------- toolbar dropdown menus ---------- */
.tb-menu { position: relative; display: inline-flex; }
.tb-menu .tb-trigger .caret { color: var(--text-dim); font-size: 10px; margin-left: 3px; }
.tb-menu.open .tb-trigger { background: #34343e; border-color: #50505c; }
.tb-panel {
  display: none; position: absolute; top: 100%; left: 0; margin-top: 5px;
  flex-direction: column; gap: 2px; min-width: 200px;
  background: var(--panel); border: 1px solid #3a3a44; border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6); padding: 4px;
  z-index: 205; /* below #proj-menu / .dropdown (210) so their flyouts overlay */
}
.tb-menu.open .tb-panel { display: flex; }
/* not #toolbar-scoped: on mobile the open panel is portaled to <body> to escape
   the toolbar's scroll-container stacking context, so it must style itself there */
.tb-panel button {
  display: flex; align-items: center; width: 100%; text-align: left;
  background: transparent; border: 1px solid transparent; border-radius: 4px;
  padding: 7px 10px; font-size: 12.5px; color: var(--text); cursor: pointer;
}
.tb-panel button:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.tb-panel button.danger { color: var(--danger); }
.tb-panel button.danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.tb-panel button:disabled,
.tb-panel button:disabled:hover {
  background: transparent; border-color: transparent; color: var(--text-dim); cursor: default;
}
.tb-panel .soon {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-dim); border: 1px solid #3a3a44; border-radius: 3px;
  padding: 0 4px; margin-left: auto;
}
/* play / stop float over the graph's top-right, level with the corner tabs */
#play-controls {
  position: absolute; top: 8px; right: 8px; z-index: 30;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
#play-controls .pc-row { display: flex; gap: 6px; }
#play-controls button {
  background: var(--panel-2); color: var(--text);
  border: 1px solid #3a3a44; border-radius: 4px;
  padding: 6px 12px; cursor: pointer; font-size: 12.5px;
}
#play-controls button:hover { background: #34343e; border-color: #50505c; }
#play-controls button:disabled { opacity: 0.4; cursor: default; }
#play-controls button.play { background: #1d4022; border-color: #2e6b37; }
#play-controls button.play:hover { background: #265a2e; }
#play-controls button.stop { background: #46201f; border-color: #6e3331; }
#play-status { color: var(--text-dim); font-size: 12px; text-shadow: 0 1px 3px #000; }
#play-status.playing { color: #6fdc7f; }
#play-status.error { color: var(--danger); }

/* ---------- workspace ---------- */
#workspace { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; }
#main-row { flex: 1; display: flex; min-height: 0; }

/* ---------- slide-out drawers (My Blueprint / Content Browser) ---------- */
.drawer {
  position: absolute; top: 0; bottom: 0; z-index: 40;
  width: 248px; max-width: 86vw;
  background: var(--panel);
  display: flex; flex-direction: column; min-height: 0;
  box-shadow: 0 0 28px rgba(0,0,0,0.55);
  transition: transform 0.18s ease;
  will-change: transform;
}
.drawer.left  { left: 0;  border-right: 1px solid #000; transform: translateX(-100%); }
.drawer.right { right: 0; border-left: 1px solid #000; width: 360px; transform: translateX(100%); }
.drawer.open  { transform: translateX(0); }

#panel-backdrop { position: absolute; inset: 0; z-index: 35; background: rgba(0,0,0,0.45); }
#panel-backdrop.hidden { display: none; }
@media (min-width: 701px) { #panel-backdrop { display: none !important; } }

/* ---------- sidebar (My Blueprint) ---------- */
#sidebar { background: var(--panel); }
.sb-head-btns { display: flex; align-items: center; gap: 6px; }
.sb-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 10px;
  font-weight: 700; font-size: 12.5px;
  border-bottom: 1px solid #34343e;
}
.sb-head button {
  background: var(--panel-2); color: var(--text);
  border: 1px solid #3a3a44; border-radius: 4px;
  padding: 2px 8px; cursor: pointer; font-size: 11.5px;
}
.sb-head button:hover { background: #34343e; }
#var-new-form { padding: 8px 10px; border-bottom: 1px solid #34343e; display: flex; flex-direction: column; gap: 6px; }
#var-new-form.hidden { display: none; }
#var-new-form input, #var-new-form select {
  background: #111; color: #ddd; border: 1px solid #3a3a44; border-radius: 4px;
  padding: 4px 6px; font-size: 12px; width: 100%;
}
#var-new-form .row { display: flex; gap: 6px; }
#var-new-form .row button {
  flex: 1; background: var(--panel-2); color: var(--text);
  border: 1px solid #3a3a44; border-radius: 4px; padding: 4px; cursor: pointer; font-size: 11.5px;
}
#var-list { flex: 1; overflow-y: auto; padding: 4px; }
.var-row {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 6px; border-radius: 4px; cursor: grab;
}
.var-row:hover { background: #2c2c34; }
.var-dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 10px; }
.var-name { flex: 1; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  touch-action: none; user-select: none; -webkit-user-select: none; }
.var-row select.var-type {
  max-width: 70px; background: #111; color: #aaa; border: 1px solid #3a3a44;
  border-radius: 3px; font-size: 10.5px; padding: 1px;
}
.var-row input.var-default, .var-row select.var-default {
  width: 46px; background: #111; color: #ddd; border: 1px solid #3a3a44;
  border-radius: 3px; font-size: 10.5px; padding: 1px 3px;
}
.var-btn {
  background: none; border: none; color: var(--text-dim); cursor: pointer;
  font-size: 11px; padding: 1px 3px;
}
.var-btn:hover { color: #fff; }
.sb-empty, .sb-hint { color: #5b5b64; font-size: 11px; padding: 8px 10px; }
.sb-hint { border-top: 1px solid #2c2c34; }
.var-ghost {
  position: fixed; z-index: 300; pointer-events: none;
  background: var(--accent); color: #fff;
  padding: 2px 8px; border-radius: 4px; font-size: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* ---------- content browser ---------- */
#content-browser { background: #1d1d22; }
#cb-head {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; background: var(--panel);
  font-size: 12.5px; font-weight: 700;
  border-bottom: 1px solid #34343e;
}
#cb-head span:first-child { flex: 1; }
#cb-head button {
  background: var(--panel-2); color: var(--text);
  border: 1px solid #3a3a44; border-radius: 4px;
  padding: 3px 9px; cursor: pointer; font-size: 11.5px;
}
#cb-head button:hover { background: #34343e; }
.cb-note { font-weight: 400; font-size: 10.5px; color: var(--text-dim); padding: 6px 10px; border-bottom: 1px solid #2c2c34; }
#cb-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#cb-assets {
  flex: 0 0 auto; max-height: 40%; overflow-y: auto;
  border-bottom: 1px solid #000; padding: 8px;
  display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start;
}
.cb-tile {
  width: 76px; height: 76px; border-radius: 6px; cursor: pointer;
  background: var(--panel-2); border: 1px solid #3a3a44;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.cb-tile:hover { border-color: #50505c; }
.cb-tile.selected { border-color: var(--accent); outline: 1px solid var(--accent); }
.cb-tile .cb-kind {
  width: 30px; height: 30px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; font-size: 15px;
}
.cb-tile.enum .cb-kind { background: #3e8e84; }
.cb-tile.struct .cb-kind { background: #4f74d8; }
.cb-tile .cb-name { font-size: 10.5px; max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#cb-detail { flex: 1; overflow-y: auto; padding: 10px 14px; }
.cb-empty { color: #5b5b64; font-size: 12px; padding: 12px; }
.cb-detail-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 13px; }
.cb-detail-head .cb-del { color: var(--danger); font-size: 11px; }
.cb-row { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.cb-row label { font-size: 11px; color: var(--text-dim); flex: 0 0 84px; }
.cb-row input, .cb-row select {
  background: #111; color: #ddd; border: 1px solid #3a3a44; border-radius: 4px;
  padding: 3px 6px; font-size: 12px;
}
.cb-row input { flex: 1; max-width: 240px; }
.cb-row input.cb-def { max-width: 90px; flex: 0 1 90px; }
.cb-members { margin-top: 6px; }
.cb-add { color: var(--accent) !important; font-size: 12px !important; margin-top: 4px; }
#canvas-wrap {
  position: relative; flex: 1; overflow: hidden;
  background-color: var(--grid);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
  cursor: default;
  touch-action: none;            /* we drive pan/zoom/drag ourselves */
}
#viewport { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
#wire-layer, #drag-wire-layer { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
/* wires paint above node bodies so short links between tightly-packed
   (e.g. freshly-imported) nodes aren't hidden behind the opaque node cards. */
#wire-layer { z-index: 2; }
#wire-layer path { pointer-events: stroke; }
#drag-wire-layer { width: 100%; height: 100%; }
#node-layer { position: absolute; left: 0; top: 0; z-index: 1; }
#graph-hint {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  color: #5b5b64; font-size: 11.5px; pointer-events: none; white-space: nowrap;
}

/* floating drawer-opener tabs pinned to the canvas corners */
.corner-tab {
  position: absolute; z-index: 30;
  background: rgba(35,35,41,0.92); color: var(--text);
  border: 1px solid #3a3a44; border-radius: 7px;
  padding: 7px 11px; font-size: 12.5px; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.45);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.corner-tab:hover { background: #34343e; border-color: #50505c; }
.corner-tab.tl { top: 8px; left: 8px; }
.corner-tab.bl { bottom: 8px; left: 8px; }
.corner-tab.br { bottom: 8px; right: 8px; }

/* ---------- nodes ---------- */
.bp-node {
  position: absolute;
  min-width: 130px;
  background: var(--node-bg);
  border: 1px solid var(--node-border);
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
  user-select: none;
}
.bp-node.selected { outline: 2px solid #f0a830; }
.bp-node.sim-active { outline: 2px solid #6fdc7f; }
.bp-node .head {
  padding: 4px 10px 4px 8px;
  border-radius: 7px 7px 0 0;
  font-weight: 600; font-size: 12.5px;
  color: #fff;
  background: linear-gradient(90deg, #3f6f9f, rgba(63,111,159,0.25));
  cursor: grab;
  white-space: nowrap;
}
.bp-node .head .sub { display: block; font-weight: 400; font-size: 10px; color: rgba(255,255,255,0.65); }
.bp-node.k-event .head { background: linear-gradient(90deg, #8a1f1f, rgba(138,31,31,0.25)); }
.bp-node.k-flow .head { background: linear-gradient(90deg, #5a5a62, rgba(90,90,98,0.25)); }
.bp-node.k-pure { min-width: 110px; }
.bp-node.k-pure .head { background: linear-gradient(90deg, #2e7d52, rgba(46,125,82,0.25)); }
.bp-node.k-var-get .head, .bp-node.k-var-set .head { background: linear-gradient(90deg, #2e5e7d, rgba(46,94,125,0.25)); }
.bp-node.k-unknown .head { background: linear-gradient(90deg, #555, rgba(85,85,85,0.25)); }
.bp-node.placeholder .head::after { content: " (stub)"; font-weight: 400; font-size: 10px; color: #ffd27f; }
.bp-node.simulated .head::after { content: " (simulated)"; font-weight: 400; font-size: 10px; color: #6fdc7f; }
/* Comment body is click-through so right-click/drag inside a comment reach the
   canvas (add-node menu, marquee); only the header is interactive (drag + menu).
   Nodes sit above the comment, so they still receive their own clicks. */
.bp-node.k-comment { min-width: 0; border-style: dashed; border-width: 1.5px; border-radius: 6px; box-shadow: none; pointer-events: none; }
.bp-node.k-comment .head { font-size: 13px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.7); cursor: move; border-radius: 4px 4px 0 0; pointer-events: auto; }
.bp-node.k-comment .head .sub { color: rgba(255,255,255,0.6); }
.bp-node .body { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0 7px; }
.bp-node .col { display: flex; flex-direction: column; gap: 3px; }
.bp-node .col.out { align-items: flex-end; }

.pin-row { display: flex; align-items: center; gap: 5px; padding: 0 6px; min-height: 19px; }
.pin-row .pin-label { font-size: 11.5px; color: var(--text); white-space: nowrap; }
.pin-row input.pin-default {
  width: 52px; background: #111; color: #ddd;
  border: 1px solid #3a3a44; border-radius: 3px;
  font-size: 11px; padding: 1px 4px;
}
.pin-row input.pin-default.t-string { width: 80px; }
.pin-row input.pin-default.t-bool { width: auto; }
.pin {
  width: 12px; height: 12px; flex: 0 0 12px;
  cursor: crosshair; position: relative;
}
.pin::before {
  content: ""; position: absolute; inset: 1px;
  border: 2px solid var(--pc, #777); border-radius: 50%;
  background: transparent;
}
.pin.linked::before { background: var(--pc, #777); }
.pin.exec::before { border-radius: 2px; clip-path: polygon(0 0, 55% 0, 100% 50%, 55% 100%, 0 100%); border: none; background: transparent; box-shadow: inset 0 0 0 8px var(--pc, #fff); opacity: 0.9; }
.pin.exec.linked::before { background: var(--pc, #fff); }
.pin:hover { transform: scale(1.35); }

/* wires */
path.wire { fill: none; stroke-width: 2.2; opacity: 0.9; cursor: pointer; }
path.wire:hover { stroke-width: 3.5; opacity: 1; }
path.wire.exec { stroke-width: 2.8; }
path.drag-wire { fill: none; stroke: #ddd; stroke-width: 2; stroke-dasharray: 6 4; }
path.drag-wire.valid   { stroke: #6fdc7f; stroke-width: 3; stroke-dasharray: none; }
path.drag-wire.invalid { stroke: #e05555; stroke-width: 3; stroke-dasharray: none; }

/* ---------- console ---------- */
#console-panel {
  height: 150px; background: #141417;
  border-top: 1px solid #000;
  display: flex; flex-direction: column;
}
#console-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 3px 10px; background: var(--panel);
  font-size: 11.5px; color: var(--text-dim);
  cursor: pointer; user-select: none;       /* tap the header to expand/collapse */
}
.console-head-btns { display: flex; align-items: center; gap: 10px; }
#console-head button { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 11px; }
#console-head button:hover { color: var(--text); }
#btn-toggle-console { font-size: 13px; transition: transform 0.15s ease; }
#console-panel.collapsed { height: auto; }
#console-panel.collapsed #console-body { display: none; }
#console-panel.collapsed #btn-toggle-console { transform: rotate(180deg); }
#console-body {
  flex: 1; overflow-y: auto; padding: 4px 10px;
  padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
  font-family: Consolas, "Cascadia Mono", monospace; font-size: 12px;
}
#console-body .log { color: #57c7ff; }
#console-body .warn { color: #ffd27f; }
#console-body .err { color: var(--danger); }
#console-body .sys { color: var(--text-dim); }

/* ---------- modal ---------- */
#modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
#modal.hidden { display: none; }
#modal-box {
  width: min(860px, 92vw); max-height: 86vh;
  background: var(--panel); border: 1px solid #3a3a44; border-radius: 8px;
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
#modal-title { font-weight: 700; font-size: 14px; }
#modal-desc { font-size: 12px; color: var(--text-dim); white-space: pre-wrap; }
#modal-text {
  width: 100%; height: 46vh; resize: vertical;
  background: #111; color: #cfcfd4;
  border: 1px solid #3a3a44; border-radius: 4px;
  font-family: Consolas, "Cascadia Mono", monospace; font-size: 12px;
  padding: 8px;
}
#modal-buttons { display: flex; gap: 8px; justify-content: flex-end; }
#modal-buttons button {
  background: var(--panel-2); color: var(--text);
  border: 1px solid #3a3a44; border-radius: 4px;
  padding: 6px 16px; cursor: pointer;
}
#modal-buttons button:hover { background: #34343e; }
#modal-ok { border-color: var(--accent) !important; }

/* ---------- context menu ---------- */
#ctx-menu {
  position: fixed; z-index: 200;
  min-width: 230px; max-height: 420px; overflow-y: auto;
  background: var(--panel); border: 1px solid #3a3a44; border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  padding: 4px;
}
#ctx-menu.hidden { display: none; }
#ctx-menu input.search {
  width: 100%; background: #111; color: #ddd;
  border: 1px solid #3a3a44; border-radius: 4px;
  padding: 5px 8px; margin-bottom: 4px; font-size: 12.5px;
}
#ctx-menu .item {
  padding: 5px 10px; border-radius: 4px; cursor: pointer;
  font-size: 12.5px; display: flex; justify-content: space-between; gap: 12px;
}
#ctx-menu .item:hover, #ctx-menu .item.active { background: var(--accent); color: #fff; }
#ctx-menu .item .cat { color: var(--text-dim); font-size: 11px; }
#ctx-menu .item:hover .cat, #ctx-menu .item.active .cat { color: rgba(255,255,255,0.7); }
#ctx-menu .head { padding: 4px 10px; font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }
#ctx-menu .divider { height: 1px; background: #3a3a44; margin: 4px 2px; }

/* mobile-friendly tweaks */
@media (max-width: 700px) {
  /* single scrolling row of toolbar buttons instead of wrapping to many rows */
  #toolbar { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
  #toolbar button { padding: 9px 12px; flex: 0 0 auto; }
  #toolbar .spacer { flex: 0 0 6px; }
  .brand { flex: 0 0 auto; }
  #play-status { min-width: 0; flex: 0 0 auto; }
  #graph-hint { display: none; }
  #console-panel { height: 120px; }
  /* bigger touch targets on the graph */
  .pin { width: 18px; height: 18px; flex-basis: 18px; }
  .pin-row { min-height: 24px; }
}

/* ---------- train a node ---------- */
#train-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center; z-index: 240;
}
#train-modal.hidden { display: none; }
#train-box {
  width: min(680px, 94vw); max-height: 90vh; overflow-y: auto;
  background: var(--panel); border: 1px solid #3a3a44; border-radius: 8px;
  padding: 16px; display: flex; flex-direction: column; gap: 8px;
}
.train-title { font-weight: 700; font-size: 15px; }
.train-sub { font-size: 12px; color: var(--text-dim); line-height: 1.45; }
.train-label { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
#train-box textarea {
  width: 100%; background: #111; color: #cfcfd4;
  border: 1px solid #3a3a44; border-radius: 4px; padding: 8px;
  font-family: Consolas, "Cascadia Mono", monospace; font-size: 12px; resize: vertical;
}
#train-ue { height: 150px; }
#train-desc { height: 70px; }
.train-pins { font-size: 11.5px; color: #6fdc7f; min-height: 16px; word-break: break-word; }
#train-msg { font-size: 12px; color: var(--text-dim); min-height: 16px; }
#train-msg.err { color: var(--danger); }
.train-buttons { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.train-buttons button {
  background: var(--panel-2); color: var(--text);
  border: 1px solid #3a3a44; border-radius: 4px; padding: 8px 16px; cursor: pointer; font-size: 12.5px;
}
.train-buttons button:hover { background: #34343e; }
#train-submit { border-color: var(--accent) !important; }