:root {
  --bg: #0b0d11;
  --panel: #11141a;
  --panel2: #171b22;
  --line: #2b313d;
  --text: #eef2f7;
  --muted: #9aa4b2;
  --accent: #f0b429;
  --urgent: #ff4d5e;
  --high: #ff8a3d;
  --medium: #e3c64f;
  --low: #67b7ff;
  --none: #6d7786;
  --done: #55c98f;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, select, input, textarea { font: inherit; }
button, .buttonlike { color: var(--text); background: #1c212a; border: 1px solid #323a48; border-radius: 8px; padding: 8px 11px; cursor: pointer; transition: .15s ease; }
button:hover, .buttonlike:hover { background: #252c37; border-color: #4a5568; }
button.active { background: #47370d; border-color: var(--accent); color: #ffe9a0; }
#app { height: 100%; display: flex; flex-direction: column; }
.topbar { height: 58px; flex: 0 0 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; background: #0f1217; border-bottom: 1px solid #242a34; gap: 16px; }
.brand { display: flex; align-items: center; gap: 9px; min-width: 205px; }
.brand .bolt { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: #26200f; border: 1px solid #4c421d; }
.brand strong { display: block; font-size: 14px; }
.brand small { display: block; margin-top: 1px; color: var(--muted); font-size: 10px; }
.toolbar { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.top-actions { min-width: 0; justify-content: flex-end; }
.top-actions .language-control { margin-left: 2px; }
.toolbar .sep { width: 1px; height: 26px; background: #303640; margin: 0 2px; }
.workspace { min-height: 0; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 330px; }
.toolrail { background: #0f1217; border-right: 1px solid #242a34; padding: 10px 8px; display: flex; flex-direction: column; gap: 7px; overflow-y: auto; overflow-x: hidden; z-index: 40; }
.tool-btn { width: 100%; min-height: 54px; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 9px; }
.tool-btn .tool-icon { font-size: 18px; line-height: 1; font-weight: 650; }
.tool-btn .tool-label { font-size: 10px; line-height: 1.1; color: var(--muted); }
.tool-btn.active .tool-label { color: inherit; }
.tool-group { display: flex; flex-direction: column; gap: 5px; padding-top: 2px; }
.tool-select { width: 100%; color: var(--text); background: #171c24; border: 1px solid #303846; border-radius: 7px; padding: 5px 3px; font-size: 10px; }
.canvas-wrap { position: relative; overflow: hidden; outline: none; cursor: grab; background-color: #0c0f14; background-image: radial-gradient(circle at 1px 1px, #252b35 1px, transparent 1.1px); background-size: 24px 24px; }
.canvas-wrap.panning { cursor: grabbing; }
.world { position: absolute; left: 0; top: 0; transform-origin: 0 0; width: 1px; height: 1px; }
.links { position: absolute; left: -100000px; top: -100000px; width: 200000px; height: 200000px; overflow: visible; pointer-events: none; }
.links path.link { fill: none; stroke: #788394; stroke-width: 2.2; pointer-events: stroke; }
.links marker path { fill: #788394; }
.node { position: absolute; width: 260px; min-height: 135px; border-radius: 12px; background: #161b23; border: 1px solid #384252; box-shadow: 0 10px 28px #0008; overflow: hidden; user-select: none; cursor: default; }
.node.selected { border-color: var(--accent); box-shadow: 0 0 0 2px #f0b42933, 0 12px 30px #0008; cursor: move; }
.node.done { opacity: .62; }
.node-head { height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 8px 0 10px; background: #1c222c; border-bottom: 1px solid #303845; cursor: move; }
.node-type { font-size: 11px; color: #aeb7c4; text-transform: uppercase; letter-spacing: .6px; flex: 1; }
.priority-pill { font-size: 10px; font-weight: 700; padding: 3px 7px; border-radius: 999px; border: 1px solid currentColor; cursor: pointer; }
.priority-pill.urgent { color: var(--urgent); }
.priority-pill.high { color: var(--high); }
.priority-pill.medium { color: var(--medium); }
.priority-pill.low { color: var(--low); }
.priority-pill.none { color: var(--none); }
.node-close { appearance: none; border: 0; background: transparent; padding: 4px; color: #87909d; font-size: 16px; }
.node-close:hover { color: white; background: transparent; }
.node-body { padding: 10px; }

.node.selected .node-body { cursor: move; }
.node.selected .node-body textarea:not(:focus) { cursor: move; }
.node-body textarea:focus { cursor: text; }
.node.selected button { cursor: pointer; }
.node.selected .node-resize-n, .node.selected .node-resize-s { cursor: ns-resize; }
.node.selected .node-resize-e, .node.selected .node-resize-w { cursor: ew-resize; }
.node.selected .node-resize-ne, .node.selected .node-resize-sw { cursor: nesw-resize; }
.node.selected .node-resize-se, .node.selected .node-resize-nw { cursor: nwse-resize; }
.node textarea { width: 100%; min-height: 72px; resize: vertical; border: 0; outline: 0; background: transparent; color: var(--text); line-height: 1.35; user-select: text; }
.node.task textarea { font-weight: 600; min-height: 54px; }
.node-image { display: block; width: 100%; max-height: 260px; object-fit: contain; background: #0a0c10; border-radius: 7px; pointer-events: none; }
.image-caption { margin-top: 8px; min-height: 44px !important; font-size: 12px; color: #d9e0e8; }
.task-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid #2e3540; padding-top: 8px; margin-top: 5px; }
.status-btn { padding: 5px 8px; font-size: 11px; }
.node-resize { position: absolute; z-index: 8; opacity: 0; transition: opacity .12s ease, background .12s ease; }
.node:hover .node-resize, .node.selected .node-resize { opacity: 1; }
.node-resize-n, .node-resize-s { left: 10px; right: 10px; height: 8px; cursor: ns-resize; }
.node-resize-n { top: -4px; }
.node-resize-s { bottom: -4px; }
.node-resize-e, .node-resize-w { top: 10px; bottom: 10px; width: 8px; cursor: ew-resize; }
.node-resize-e { right: -4px; }
.node-resize-w { left: -4px; }
.node-resize-ne, .node-resize-se, .node-resize-sw, .node-resize-nw { width: 13px; height: 13px; border-radius: 3px; background: #8792a2; border: 2px solid #161b23; }
.node.selected .node-resize-ne, .node.selected .node-resize-se, .node.selected .node-resize-sw, .node.selected .node-resize-nw { background: var(--accent); }
.node-resize-ne { top: -6px; right: -6px; cursor: nesw-resize; }
.node-resize-se { right: -6px; bottom: -6px; cursor: nwse-resize; }
.node-resize-sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
.node-resize-nw { top: -6px; left: -6px; cursor: nwse-resize; }
.node.selected::after { content: ''; position: absolute; inset: -2px; border: 1px solid #f0b42966; border-radius: 13px; pointer-events: none; }
.zoom-hud { position: absolute; right: 14px; bottom: 35px; background: #111720dd; border: 1px solid #303846; color: #bdc7d4; padding: 5px 8px; border-radius: 7px; font-size: 11px; }
.canvas-help { position: absolute; left: 12px; bottom: 10px; color: #7f8996; font-size: 11px; pointer-events: none; }
.sidebar { min-width: 0; background: var(--panel); border-left: 1px solid #252c35; display: flex; flex-direction: column; }
.side-head { padding: 14px; border-bottom: 1px solid #272e38; display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; }
.side-head h2 { margin: 0; font-size: 15px; }
.side-head p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.side-head select { color: var(--text); background: #1c212a; border: 1px solid #333b47; border-radius: 7px; padding: 6px; font-size: 11px; }
.focus-list { flex: 1; overflow: auto; padding: 9px; }
.focus-empty { color: #768190; font-size: 12px; text-align: center; padding: 30px 16px; }
.focus-item { padding: 9px 10px; margin-bottom: 7px; background: var(--panel2); border: 1px solid #2d3540; border-left-width: 4px; border-radius: 8px; cursor: pointer; }
.focus-item:hover { background: #1d232c; }
.focus-item.urgent { border-left-color: var(--urgent); }
.focus-item.high { border-left-color: var(--high); }
.focus-item.medium { border-left-color: var(--medium); }
.focus-item.low { border-left-color: var(--low); }
.focus-item.none { border-left-color: var(--none); }
.focus-item.done { opacity: .52; }
.focus-top { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.focus-prio { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; }
.focus-title { font-size: 12px; line-height: 1.25; color: #e8edf3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.focus-meta { font-size: 10px; color: #7f8997; margin-top: 5px; }
.side-footer { padding: 10px 12px; border-top: 1px solid #272e38; display: flex; justify-content: space-between; align-items: center; color: #8f99a7; font-size: 11px; }
.side-footer button { font-size: 10px; padding: 5px 8px; }
.context-menu { position: fixed; z-index: 1000; background: #171c24; border: 1px solid #394250; box-shadow: 0 12px 28px #000a; border-radius: 8px; padding: 5px; min-width: 150px; }
.context-menu button { display: block; width: 100%; border: 0; text-align: left; background: transparent; padding: 7px 8px; font-size: 12px; }
.context-menu button:hover { background: #252c37; }
@media (max-width: 900px) {
  .workspace { grid-template-columns: 1fr; }
  .sidebar { position: absolute; right: 0; top: 58px; bottom: 0; width: 300px; box-shadow: -10px 0 30px #0008; }
  .toolbar button:nth-of-type(5) { display: none; }
}
.language-control { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; }
.language-control select { min-width: 128px; color: var(--text); background: #1c212a; border: 1px solid #333b47; border-radius: 7px; padding: 7px 8px; }
.toolbar select { color:var(--text); background:#1c212a; border:1px solid #333b47; border-radius:7px; padding:7px 8px; }
body.light { --bg:#eef1f5; --panel:#f7f8fa; --panel2:#fff; --line:#ccd2da; --text:#1c2430; --muted:#66717f; background:#eef1f5; }
body.light .topbar { background:#fff; border-color:#d9dde3; }
body.light .canvas-wrap { background-color:#f3f5f7; background-image:radial-gradient(circle at 1px 1px,#cbd2db 1px,transparent 1.1px); }
body.light .sidebar { background:#f8f9fb; border-color:#d8dde4; }
body.light button, body.light .buttonlike, body.light select { color:#1c2430; background:#fff; border-color:#ccd2da; }
body.clean-cards .node { border-color:transparent; box-shadow:0 7px 18px #0004; }
body.clean-cards .node-head { border-bottom:0; background:transparent; }
body.light .node { background:#fff; color:#1c2430; box-shadow:0 7px 18px #27313d22; }
body.light .node textarea { color:#1c2430; }
.node-actions { position:absolute; right:8px; bottom:7px; display:flex; gap:5px; z-index:4; }
.node-actions button { padding:3px 6px; font-size:12px; background:#111820aa; }
.node.liked .like-btn { color:#ff5c79; }
.node.comment { background:#fff3b8; color:#2a2515; }
.node.comment textarea { color:#2a2515; }
.node.linkcard { min-height:110px; }
.node-link { color:#67b7ff; text-decoration:underline; word-break:break-all; cursor:pointer; font-size:12px; }
.node-video { width:100%; max-height:100%; background:#000; border-radius:7px; }
.links path.link.dashed { stroke-dasharray:12 8; }
.links path.link.dotted { stroke-dasharray:2 8; stroke-linecap:round; }
.links path.link.plain { marker-end:none; }
.links path.link { pointer-events:stroke; cursor:pointer; }
.draw-stroke { fill:none; stroke:#f0b429; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.canvas-wrap.draw-mode { cursor:crosshair; }
.list-overlay { position:absolute; inset:18px 20px 18px 20px; z-index:30; background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:0 20px 50px #0008; display:flex; flex-direction:column; }
.list-overlay[hidden] { display:none; }
.list-overlay-head { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--line); }
.list-items { overflow:auto; padding:10px; }
.list-row { display:grid; grid-template-columns:130px 100px 1fr 70px; gap:10px; align-items:center; padding:9px; border-bottom:1px solid var(--line); }
.list-row textarea { width:100%; min-height:38px; resize:vertical; background:transparent; color:var(--text); border:1px solid var(--line); border-radius:6px; padding:6px; }

/* v8: dragging cards is an interaction mode, not browser text selection. */
body.dragging-cards, body.dragging-cards * { user-select: none !important; -webkit-user-select: none !important; }
body.dragging-cards { cursor: grabbing !important; }
body.dragging-cards .node.selected, body.dragging-cards .node.selected * { cursor: grabbing !important; }
body.dragging-cards textarea { caret-color: transparent; }
body.light .toolrail { background:#fff; border-color:#d9dde3; }
body.light .tool-select { color:#1c2430; background:#fff; border-color:#ccd2da; }
@media (max-width: 1180px) {
  .topbar { padding: 0 8px; gap: 8px; }
  .brand { min-width: 170px; }
  .top-actions button, .top-actions .buttonlike { padding: 7px 8px; }
  .language-control > span { display:none; }
  .language-control select { min-width: 108px; }
}


/* v9 interaction hardening: the infinite canvas must never behave like selectable web-page text. */
.canvas-wrap, .canvas-wrap > *, .world, .node-layer, .links, .drawing-layer {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
.node textarea:focus {
  user-select: text;
  -webkit-user-select: text;
}
body.canvas-pointer-active, body.canvas-pointer-active * {
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-user-drag: none !important;
}


/* v10: nested cards, selectable connections, movable freehand drawings */
.node.child-node {
  box-shadow: 0 5px 14px #0007;
}
.node.child-node::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 13px;
  pointer-events: none;
}
.link.editable-link {
  pointer-events: stroke;
  stroke-width: 5;
  cursor: pointer;
}
.link.selected-link {
  stroke: #ff6b6b !important;
  stroke-width: 6 !important;
  filter: drop-shadow(0 0 4px #ff6b6baa);
}
.draw-stroke { pointer-events: none; }
.draw-stroke.movable-drawing {
  pointer-events: stroke;
  cursor: grab;
  stroke-width: 7;
}
.draw-stroke.selected-drawing {
  stroke: #67b7ff;
  filter: drop-shadow(0 0 4px #67b7ffaa);
}
.compact-tool { margin-top: 5px; }


/* v11 custom context menu */
.context-menu {
  position: fixed;
  z-index: 10000;
  min-width: 220px;
  max-width: 300px;
  max-height: min(620px, calc(100vh - 16px));
  overflow-y: auto;
  display: none;
  padding: 6px;
  border: 1px solid #384252;
  border-radius: 11px;
  background: rgba(23,27,34,.98);
  box-shadow: 0 18px 55px #000b, 0 2px 8px #0007;
  backdrop-filter: blur(12px);
  user-select: none;
}
.context-menu.open { display: block; }
.context-item {
  width: 100%;
  min-height: 34px;
  display: grid;
  grid-template-columns: 22px minmax(0,1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  background: transparent;
  border: 0;
  border-radius: 7px;
  color: var(--text);
  text-align: left;
}
.context-item:hover { background: #2a313c; border: 0; }
.context-item.danger { color: #ff7783; }
.context-item.danger:hover { background: #3b2026; }
.context-item.checked { background: #252d38; }
.context-icon { width: 20px; text-align: center; color: #b8c3d1; }
.context-text { overflow: hidden; text-overflow: ellipsis; }
.context-shortcut { color: var(--muted); font-size: 11px; padding-left: 12px; }
.context-separator { height: 1px; margin: 5px 4px; background: #343b46; }
.context-label {
  padding: 5px 9px 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
}
body.light .context-menu {
  background: rgba(250,251,253,.98);
  border-color: #cbd2dc;
  box-shadow: 0 18px 55px #26314333, 0 2px 8px #26314325;
}
body.light .context-item:hover,
body.light .context-item.checked { background: #e9edf3; }
body.light .context-separator { background: #d8dde5; }

/* Freehand strokes stay right-clickable even before Move drawing mode is enabled. */
.draw-stroke.context-drawing {
  pointer-events: stroke;
}


/* v12 URL cards */
.node-youtube {
  display: block;
  width: 100%;
  min-height: 180px;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 8px;
  background: #000;
}
.url-display {
  display: block;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
  padding: 6px 2px;
}
.node.child-node {
  outline: 1px solid rgba(240,180,41,.22);
}


/* v13: true in-card content editing */
.node-edit {
  appearance:none; border:0; background:transparent; padding:4px 5px;
  color:#9aa6b6; font-size:14px;
}
.node-edit:hover { color:#fff; background:#ffffff10; }
.node-image-wrap {
  width:100%;
  overflow:hidden;
  border-radius:8px;
  background:#0b0d11;
}
.node-image-wrap .node-image {
  width:100%; height:100%; object-fit:contain; display:block;
  pointer-events:none;
}
.image-height-handle {
  height:10px;
  margin:2px 0 4px;
  cursor:ns-resize;
  position:relative;
  touch-action:none;
}
.image-height-handle::after {
  content:'';
  position:absolute;
  left:35%; right:35%; top:4px;
  height:2px; border-radius:2px;
  background:#697587;
}
.image-height-handle:hover::after { background:var(--accent); }

.internal-content {
  display:flex; flex-direction:column; gap:8px;
  margin-top:10px; padding-top:9px;
  border-top:1px solid #303844;
}
.internal-block {
  position:relative;
  padding:8px;
  border:1px solid #343d4a;
  border-radius:8px;
  background:#11161d;
  cursor:default;
}
.internal-block-head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:5px;
  color:#8793a3; font-size:9px; font-weight:700; letter-spacing:.55px;
}
.internal-remove {
  border:0; background:transparent; color:#788493; padding:0 3px; line-height:1;
}
.internal-remove:hover { color:#ff7783; background:transparent; }
.internal-block textarea {
  width:100%; min-height:46px; resize:vertical;
  background:transparent; border:0; outline:0;
  color:var(--text); padding:2px;
}
.internal-block textarea[readonly] { cursor:default; resize:none; }
.internal-task { display:grid; grid-template-columns:20px 1fr; column-gap:5px; }
.internal-task .internal-block-head { grid-column:1 / -1; }
.internal-task textarea { grid-column:2; }
.internal-youtube {
  width:100%; aspect-ratio:16/9; min-height:150px;
  border:0; border-radius:6px; background:#000;
}
.internal-url { color:#79b8ff; overflow-wrap:anywhere; }


/* v17 task alignment + explicit resize mode */
.internal-task {
  display:block !important;
}
.internal-task-row {
  display:flex;
  align-items:flex-start;
  gap:7px;
  width:100%;
}
.internal-task-row input[type="checkbox"] {
  flex:0 0 auto;
  margin:5px 0 0 0;
}
.internal-task-row textarea {
  flex:1 1 auto;
  min-width:0;
  margin:0;
}
.node.resize-mode {
  border-color:#67b7ff !important;
  box-shadow:0 0 0 2px #67b7ff66,0 12px 30px #0008 !important;
  cursor:default !important;
}
.node.resize-mode .node-head,
.node.resize-mode .node-body,
.node.resize-mode .node-body textarea:not(:focus) {
  cursor:default !important;
}
.node.resize-mode .node-resize {
  opacity:1 !important;
  z-index:50;
}
.node.resize-mode .node-resize-n,
.node.resize-mode .node-resize-s { height:12px !important; }
.node.resize-mode .node-resize-e,
.node.resize-mode .node-resize-w { width:12px !important; }
.node.resize-mode .node-resize-ne,
.node.resize-mode .node-resize-se,
.node.resize-mode .node-resize-sw,
.node.resize-mode .node-resize-nw {
  width:18px !important;
  height:18px !important;
  background:#67b7ff !important;
  border-radius:4px;
}


/* v18 single interaction mode per selected card */
.node .interaction-shield {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 30;
  background: transparent;
}

.node.selected:not(.editing-mode):not(.resize-mode) .interaction-shield {
  display: block;
  cursor: move;
}

.node.resize-mode .interaction-shield {
  display: block;
  cursor: default;
}

/* In move-only and resize-only modes, internal content must not compete for the cursor. */
.node.selected:not(.editing-mode) .node-body,
.node.selected:not(.editing-mode) .node-body *,
.node.resize-mode .node-body,
.node.resize-mode .node-body * {
  cursor: inherit !important;
}

/* Resize handles always sit above the shield. */
.node.resize-mode .node-resize {
  z-index: 60 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Make the four edges much easier to hit in explicit resize mode. */
.node.resize-mode .node-resize-n,
.node.resize-mode .node-resize-s {
  height: 16px !important;
}
.node.resize-mode .node-resize-e,
.node.resize-mode .node-resize-w {
  width: 16px !important;
}
.node.resize-mode .node-resize-ne,
.node.resize-mode .node-resize-se,
.node.resize-mode .node-resize-sw,
.node.resize-mode .node-resize-nw {
  width: 22px !important;
  height: 22px !important;
}

/* Edit mode removes the interaction shield entirely. */
.node.editing-mode .interaction-shield {
  display: none !important;
}


/* v19: strong resize frame — visible thick border + generous hit zones */
.node.resize-mode {
  border: 4px solid #67b7ff !important;
  outline: 2px solid rgba(103,183,255,.28);
  outline-offset: 3px;
  box-shadow: 0 0 0 1px rgba(103,183,255,.22), 0 12px 30px #0008 !important;
}

/* Edge hit areas deliberately extend both inside and outside the card. */
.node.resize-mode .node-resize-n {
  top: -10px !important;
  left: 12px !important;
  right: 12px !important;
  height: 20px !important;
  cursor: ns-resize !important;
}
.node.resize-mode .node-resize-s {
  bottom: -10px !important;
  left: 12px !important;
  right: 12px !important;
  height: 20px !important;
  cursor: ns-resize !important;
}
.node.resize-mode .node-resize-e {
  right: -10px !important;
  top: 12px !important;
  bottom: 12px !important;
  width: 20px !important;
  cursor: ew-resize !important;
}
.node.resize-mode .node-resize-w {
  left: -10px !important;
  top: 12px !important;
  bottom: 12px !important;
  width: 20px !important;
  cursor: ew-resize !important;
}

/* Large corner grips make diagonal resizing obvious. */
.node.resize-mode .node-resize-ne,
.node.resize-mode .node-resize-se,
.node.resize-mode .node-resize-sw,
.node.resize-mode .node-resize-nw {
  width: 24px !important;
  height: 24px !important;
  background: #67b7ff !important;
  border: 2px solid #d7efff !important;
  border-radius: 5px !important;
  z-index: 70 !important;
}
.node.resize-mode .node-resize-ne { right:-12px !important; top:-12px !important; cursor:nesw-resize !important; }
.node.resize-mode .node-resize-se { right:-12px !important; bottom:-12px !important; cursor:nwse-resize !important; }
.node.resize-mode .node-resize-sw { left:-12px !important; bottom:-12px !important; cursor:nesw-resize !important; }
.node.resize-mode .node-resize-nw { left:-12px !important; top:-12px !important; cursor:nwse-resize !important; }

/* Highlight the edge currently under the pointer. */
.node.resize-mode .node-resize:hover {
  background: rgba(103,183,255,.28) !important;
}
.node.resize-mode .node-resize-ne:hover,
.node.resize-mode .node-resize-se:hover,
.node.resize-mode .node-resize-sw:hover,
.node.resize-mode .node-resize-nw:hover {
  background: #9bd2ff !important;
}


.app-version {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  margin-left: 4px;
}
.ai-info-overlay { width: min(820px, calc(100vw - 80px)); }
.ai-info-box { padding:14px; display:flex; flex-direction:column; gap:12px; }
.ai-enable { display:flex; align-items:center; gap:8px; font-size:13px; }
.ai-handoff-text { width:100%; min-height:360px; resize:vertical; border:1px solid #303946; border-radius:8px; background:#10151c; color:var(--text); padding:12px; font-family:ui-monospace, SFMono-Regular, Consolas, monospace; line-height:1.4; }


/* v26 textarea resize persistence */
.node textarea[readonly],
.internal-block textarea[readonly] {
  resize: none !important;
}
.node.editing-mode textarea:not([readonly]),
.internal-block textarea:not([readonly]) {
  resize: both;
  max-width: 100%;
}


/* v27 connection junctions */
.node.junction-node {
  min-height:0 !important;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#1a2029;
  border:2px solid #8b98aa;
  box-shadow:0 0 0 3px rgba(139,152,170,.12);
  cursor:crosshair;
  z-index:20 !important;
  overflow:visible;
}
.node.junction-node::after {
  content:'';
  position:absolute;
  width:4px;height:4px;
  border-radius:50%;
  background:#dbe4ef;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
}
.node.junction-node:hover,
.node.junction-node.selected {
  border-color:#67b7ff;
  box-shadow:0 0 0 5px rgba(103,183,255,.18);
}


/* v28 connections are directly interactive; no separate Edit links mode */
.links path.link {
  pointer-events: stroke;
  cursor: pointer;
}
.links path.link:hover {
  stroke-width: 3.4;
  filter: drop-shadow(0 0 3px rgba(103,183,255,.5));
}
.node.junction-node {
  cursor: pointer;
}


/* v29 junctions are fixed connection dots, never card-sized nodes */
.node.junction-node {
  width:14px !important;
  height:14px !important;
  min-width:14px !important;
  min-height:14px !important;
  max-width:14px !important;
  max-height:14px !important;
  padding:0 !important;
  border-radius:50% !important;
  overflow:visible !important;
  resize:none !important;
}
.node.junction-node .node-resize,
.node.junction-node .interaction-shield,
.node.junction-node .node-head,
.node.junction-node .node-body {
  display:none !important;
}




/* v31: explicit junction hit target */
.node.junction-node {
  position:absolute;
  width:14px !important;
  height:14px !important;
  min-width:14px !important;
  min-height:14px !important;
  max-width:14px !important;
  max-height:14px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
  pointer-events:auto !important;
}

.node.junction-node::before,
.node.junction-node::after {
  content:none !important;
}

.junction-hit-target {
  position:absolute;
  left:50%;
  top:50%;
  width:34px;
  height:34px;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  pointer-events:auto;
  z-index:100;
}

.junction-dot {
  width:14px;
  height:14px;
  border-radius:50%;
  background:#1a2029;
  border:2px solid #8b98aa;
  box-shadow:0 0 0 3px rgba(139,152,170,.12);
  pointer-events:none;
}

.junction-hit-target:hover .junction-dot,
.node.junction-node.selected .junction-dot {
  border-color:#67b7ff;
  box-shadow:0 0 0 5px rgba(103,183,255,.18);
}

.node.junction-node.selected .junction-dot::after {
  content:'';
  position:absolute;
}









#nodeLayer > .node {
  pointer-events: auto;
}

.node.junction-node {
  z-index: 50 !important;
  pointer-events: auto !important;
}

.junction-hit-target {
  z-index: 60 !important;
  pointer-events: auto !important;
}


/* v34: restore original connection geometry.
   The SVG keeps its original -100000px offset; cards/junctions are later DOM siblings and paint above it. */
.world {
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  width:1px !important;
  height:1px !important;
  transform-origin:0 0 !important;
}

.links {
  position:absolute !important;
  left:-100000px !important;
  top:-100000px !important;
  width:200000px !important;
  height:200000px !important;
  overflow:visible !important;
  pointer-events:none !important;
  z-index:auto !important;
}

.links path.link {
  pointer-events:stroke !important;
  cursor:pointer;
}

#nodeLayer {
  position:static !important;
  pointer-events:none;
}

#nodeLayer > .node {
  pointer-events:auto;
}

.node.junction-node {
  z-index:100 !important;
  pointer-events:auto !important;
}

.junction-hit-target {
  pointer-events:auto !important;
}


/* v37 connection routing */
.links marker path {
  fill: context-stroke;
}


/* v38 free bend attachment handles */
.connection-angle-control {
  pointer-events:none;
}

.connection-angle-guide {
  stroke:#67b7ff;
  stroke-width:2;
  stroke-dasharray:5 5;
  pointer-events:stroke;
}

.connection-angle-grip {
  fill:#151b23;
  stroke:#67b7ff;
  stroke-width:3;
  cursor:grab;
  pointer-events:all;
}

.connection-angle-grip:hover {
  fill:#26384b;
  stroke-width:4;
}

.connection-angle-grip:active {
  cursor:grabbing;
}


/* v41: saved textarea dimensions are immutable during normal re-rendering.
   Only an actual native resize gesture in Edit mode may change the stored height. */
.node textarea[data-saved-height]:not(.textarea-editable),
.internal-block textarea[data-saved-height]:not(.textarea-editable) {
  resize:none !important;
}

.node textarea.textarea-editable,
.internal-block textarea.textarea-editable {
  min-height:34px !important;
  max-height:none !important;
  resize:vertical !important;
}


/* If the current layout uses the sidebar as the flex container, allow the
   Focus list body to consume the remaining viewport height and scroll. */
.right-sidebar,
.sidebar-right,
#rightSidebar {
  min-height: 0 !important;
}

.focus-panel,
#focusPanel,
.focus-list-panel,
#focusListPanel {
  display: flex;
  flex-direction: column;
}

.focus-list,
#focusList,
.focus-items,
#focusItems {
  flex: 1 1 auto;
}


/* v43: make the Focus sidebar a real viewport-height flex column.
   Only the task list scrolls; the header/footer remain visible. */
.focus-sidebar,
#focusSidebar {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

.focus-top {
  flex: 0 0 auto !important;
}

.focus-list,
#focusList {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  padding-right: 4px;
}

.focus-footer,
.focus-bottom {
  flex: 0 0 auto !important;
}

/* Firefox */
.focus-list,
#focusList {
  scrollbar-width: auto;
}

/* Chromium / Edge */
.focus-list::-webkit-scrollbar,
#focusList::-webkit-scrollbar {
  width: 12px;
}
.focus-list::-webkit-scrollbar-thumb,
#focusList::-webkit-scrollbar-thumb {
  background: #3d4654;
  border-radius: 8px;
  border: 2px solid #171c23;
}
.focus-list::-webkit-scrollbar-track,
#focusList::-webkit-scrollbar-track {
  background: #171c23;
}

.right-panel,
.sidebar-right,
.focus-panel {
  min-height: 0 !important;
}


/* v43 corrected Focus scrolling: actual right panel is .sidebar */
main {
  min-height: 0 !important;
  overflow: hidden !important;
}

.sidebar {
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.sidebar .side-head,
.sidebar .side-footer {
  flex: 0 0 auto !important;
}

.sidebar .focus-list,
.sidebar #focusList {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  touch-action: pan-y;
}


/* v49 drawing selection + grouping */
.drawing-group-hit {
  fill: transparent;
  stroke: transparent;
  stroke-width: 1.5;
  pointer-events: all;
  cursor: default;
}

.drawing-group-hit.selected {
  fill: rgba(103,183,255,.035);
  stroke: #67b7ff;
  stroke-dasharray: 8 6;
  vector-effect: non-scaling-stroke;
}

.movable-drawing {
  cursor: move;
}

.drawing-group-hit.selected,
.move-drawing-mode .drawing-group-hit {
  cursor: move;
}

.drawing-marquee {
  fill: rgba(103,183,255,.10);
  stroke: #67b7ff;
  stroke-width: 1.5;
  stroke-dasharray: 7 5;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.draw-stroke.selected-drawing {
  filter: drop-shadow(0 0 3px rgba(103,183,255,.8));
}


/* v50 Google Calendar / phone reminder integration */


.calendar-content {
  overflow:auto;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.calendar-section {
  border:1px solid var(--line);
  background:color-mix(in srgb,var(--panel) 90%,transparent);
  border-radius:10px;
  padding:14px;
}

.calendar-section h3 { margin:0 0 10px; }
.calendar-help { margin:0 0 12px; color:var(--muted); font-size:12px; line-height:1.45; }

.calendar-client-row {
  display:grid;
  grid-template-columns:minmax(260px,1fr) auto auto auto;
  gap:8px;
  align-items:center;
}

.calendar-client-row input,
.calendar-form-grid input,
.calendar-form-grid select {
  width:100%;
  min-height:36px;
  border:1px solid var(--line);
  background:var(--field);
  color:var(--text);
  border-radius:7px;
  padding:7px 9px;
}

.calendar-form-grid {
  display:grid;
  grid-template-columns:2fr 1fr 1.4fr;
  gap:10px;
}

.calendar-form-grid label {
  display:flex;
  flex-direction:column;
  gap:5px;
  font-size:11px;
  color:var(--muted);
}

.calendar-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

.calendar-primary {
  border-color:#4285f4 !important;
  box-shadow:0 0 0 1px #4285f455 inset;
}

.calendar-status {
  display:block;
  margin-top:9px;
  min-height:16px;
  font-size:11px;
  color:var(--muted);
}

.calendar-task-list {
  display:flex;
  flex-direction:column;
  gap:7px;
}

.calendar-task-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  width:100%;
  text-align:left;
}
.calendar-task-row small { color:var(--muted); }
.calendar-empty { color:var(--muted); padding:12px 4px; }

.task-schedule-chip {
  display:block;
  width:max-content;
  max-width:100%;
  margin-top:5px;
  padding:3px 7px;
  border:1px solid #4285f466;
  border-radius:999px;
  color:#9fc2ff;
  background:#4285f411;
  font-size:10px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media (max-width:900px) {
  .calendar-client-row,.calendar-form-grid { grid-template-columns:1fr; }
}


/* Keep the Calendar usable on smaller displays. */
@media (max-width: 700px) {
  .list-overlay,
  .calendar-overlay,
  #calendarOverlay {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 20px) !important;
  }

  .calendar-content,
  .list-overlay > .calendar-content {
    max-height: calc(100vh - 95px) !important;
  }
}


/* v0.1.0: corrected centered viewport tool windows.
   IMPORTANT: do not use `inset:auto` after left/top because it resets them. */
.list-overlay,
.calendar-overlay,
#calendarOverlay {
  position: fixed !important;

  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;

  transform: translate(-50%, -50%) !important;

  width: min(860px, calc(100vw - 48px)) !important;
  max-width: calc(100vw - 48px) !important;

  height: auto !important;
  max-height: calc(100vh - 48px) !important;

  margin: 0 !important;
  z-index: 100000 !important;
  overflow: hidden !important;
}

.list-overlay-head {
  flex: 0 0 auto !important;
}

.calendar-content,
.list-overlay > .calendar-content {
  min-height: 0 !important;
  max-height: calc(100vh - 130px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

@media (max-width: 700px) {
  .list-overlay,
  .calendar-overlay,
  #calendarOverlay {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 20px) !important;
  }

  .calendar-content,
  .list-overlay > .calendar-content {
    max-height: calc(100vh - 95px) !important;
  }
}


/* Public ownership notice */
.ownership-footer {
  position: fixed;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  z-index: 90;
  max-width: min(760px, calc(100vw - 220px));
  padding: 3px 9px;
  border: 1px solid #343b47;
  border-radius: 7px;
  background: #0f1217d9;
  color: #8f99a7;
  font-size: 10px;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  pointer-events: auto;
  backdrop-filter: blur(4px);
}

.ownership-footer .legal-links { margin-left: 7px; display: inline-flex; gap: 6px; align-items: center; }
.ownership-footer a { color: #b9c3d0; text-decoration: none; }
.ownership-footer a:hover, .ownership-footer a:focus-visible { color: #f0b429; text-decoration: underline; }
@media (max-width: 900px) {
  .ownership-footer {
    max-width: calc(100vw - 24px);
    white-space: normal;
    bottom: 4px;
  }
}


/* v0.1.2: canvas-first tool access.
   Controls remain in the DOM for keyboard/state compatibility but are no longer shown as a left rail. */
.toolrail-hidden {
  display: none !important;
}

/* Nested right-click groups */
.context-submenu-wrap {
  position: relative;
}
.context-submenu {
  display: none;
  position: absolute;
  left: calc(100% + 5px);
  top: -5px;
  min-width: 218px;
  max-width: min(290px, calc(100vw - 24px));
  padding: 6px;
  border: 1px solid #343b47;
  border-radius: 9px;
  background: #181d25;
  box-shadow: 0 12px 34px #0008;
  z-index: 1002;
}
.context-submenu-wrap.open > .context-submenu {
  display: block;
}
.context-submenu-wrap.flip > .context-submenu {
  left: auto;
  right: calc(100% + 5px);
}
.context-submenu-trigger .context-shortcut {
  margin-left: auto;
  opacity: .75;
}
body.light .context-submenu {
  background: #fff;
  border-color: #cfd5dd;
  box-shadow: 0 12px 34px #0002;
}