:root {
  --bg-color: #0f172a;
  --node-bg: rgba(30, 41, 59, 0.75);
  --node-border: rgba(255, 255, 255, 0.15);
  --accent: #3b82f6;
  --text: #f8fafc;
}
:root.light-theme {
  --bg-color: #f1f5f9;
  --node-bg: rgba(255, 255, 255, 0.85);
  --node-border: rgba(0, 0, 0, 0.1);
  --accent: #2563eb;
  --text: #0f172a;
}

* { 
  box-sizing: border-box; 
  -webkit-tap-highlight-color: transparent;
  user-select: none; /* Prevent accidental text selection everywhere by default */
}

body, html { 
  margin: 0; padding: 0; width: 100%; height: 100%; 
  overflow: hidden; 
  font-family: 'Inter', system-ui, -apple-system, sans-serif; 
  background: var(--bg-color); 
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 20px 20px;
  color: var(--text); 
  touch-action: none; 
  transition: background-color 0.3s, color 0.3s;
}
:root.light-theme body {
  background-image: radial-gradient(rgba(0,0,0,0.06) 1px, transparent 1px);
}
:root.light-theme .conn-dot { border-color: #f1f5f9; }
:root.light-theme .action-btn { background: rgba(255, 255, 255, 0.85); border-color: rgba(0, 0, 0, 0.1); color: var(--text); box-shadow: 0 5px 20px rgba(0,0,0,0.15); }
:root.light-theme .action-btn:hover { background: rgba(240, 240, 240, 0.95); }
:root.light-theme #hint-panel { background: rgba(255, 255, 255, 0.85); border-color: rgba(0, 0, 0, 0.1); box-shadow: 0 10px 40px rgba(0,0,0,0.15); }
:root.light-theme .hint-content b { color: #0f172a; }
:root.light-theme .hint-content h1 { color: #d97706; }
:root.light-theme .hint-content p { color: rgba(15,23,42,0.7); }
:root.light-theme .edge-path { stroke: rgba(0, 0, 0, 0.2); }
:root.light-theme .edge-hit-path:hover + .edge-path { stroke: rgba(0, 0, 0, 0.4); }
:root.light-theme .edge-path.selected { stroke: var(--accent); }
:root.light-theme .node-content:empty::before { color: rgba(0,0,0,0.3); }

#app { width: 100%; height: 100%; cursor: grab; position: relative; overflow: hidden; touch-action: none; }
#app:active { cursor: grabbing; }

/* The anchor that receives translate() */
#canvas {
  position: absolute; top: 0; left: 0; transform-origin: 0 0;
  width: 1px; height: 1px; pointer-events: none;
}

/* Ensure proper large dimensions to bypass Safari SVG culling */
#svg-layer, #nodes-layer {
  position: absolute; top: 0; left: 0;
  width: 50000px; height: 50000px;
  pointer-events: none; 
  overflow: visible;
}

.node {
  position: absolute;
  min-width: 240px; min-height: 80px;
  width: max-content;
  background: var(--node-bg);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--node-border);
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  display: flex; flex-direction: column;
  transition: box-shadow 0.2s, border-color 0.2s;
  pointer-events: auto; /* Re-enable pointer events for nodes natively! */
}
.node:hover { border-color: rgba(255, 255, 255, 0.3); box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
.node.selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5), 0 10px 40px rgba(0,0,0,0.5); }

#marquee-box {
  position: absolute;
  border: 1.5px dashed var(--accent);
  background: rgba(59, 130, 246, 0.1);
  pointer-events: none;
  z-index: 50;
  display: none;
}

.node-content { 
  padding: 16px; outline: none; flex-grow: 1; min-height: 80px; 
  white-space: pre; 
  cursor: grab; line-height: 1.5; font-size: 15px; user-select: text; 
}
.node-content[contenteditable="true"] { cursor: text; }
.node-content:empty::before { content: "在此输入文本..."; color: rgba(255,255,255,0.3); pointer-events: none; }

/* Connection Handles */
.conn-wrap {
  position: absolute; width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  cursor: crosshair; z-index: 20;
  opacity: 0; pointer-events: none; /* Ignore clicks natively */
  transition: opacity 0.2s; touch-action: none;
}
.conn-wrap.top    { top: -24px; left: 50%; transform: translateX(-50%); }
.conn-wrap.bottom { bottom: -24px; left: 50%; transform: translateX(-50%); }
.conn-wrap.left   { left: -24px; top: 50%; transform: translateY(-50%); }
.conn-wrap.right  { right: -24px; top: 50%; transform: translateY(-50%); }

.conn-dot {
  width: 16px; height: 16px; border-radius: 50%; background: var(--accent);
  border: 2.5px solid #1e293b; transition: transform 0.2s, box-shadow 0.2s;
}

/* Visibility Control */
.node.selected .conn-wrap { opacity: 1; pointer-events: auto; }
.is-connecting .conn-wrap { opacity: 1; pointer-events: auto; }

/* Visual Feedback */
.is-connecting .conn-dot { box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.4); transform: scale(1.2); }
.is-connecting .conn-wrap:hover .conn-dot { transform: scale(1.6); background: #fbbf24; border-color: #fff; box-shadow: 0 0 0 5px rgba(251, 191, 36, 0.4); }

/* SVG Edges */
.edge-hit-path {
  fill: none; stroke: transparent; stroke-width: 30px; 
  pointer-events: stroke; cursor: pointer;
}
.edge-path { 
  fill: none; stroke: rgba(255, 255, 255, 0.25); stroke-width: 3px; stroke-linecap: round; transition: stroke 0.3s, stroke-width 0.2s;
  pointer-events: none;
}
.edge-hit-path:hover + .edge-path { stroke: rgba(255, 255, 255, 0.6); stroke-width: 4px; }
.edge-path.selected { stroke: var(--accent); stroke-width: 5px; }

.edge-path.temp { 
  stroke: var(--accent); stroke-width: 4px; stroke-dasharray: 8 8; opacity: 0.9; pointer-events: none; animation: dash 1s linear infinite; 
}
@keyframes dash { to { stroke-dashoffset: -16; } }

/* Trash Zone */
#trash-zone {
  position: absolute; top: 30px; right: 30px;
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(239, 68, 68, 0.9); border: 2px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 40px rgba(239, 68, 68, 0.4); color: white;
  z-index: 1000; transition: transform 0.2s, opacity 0.3s, background 0.2s; pointer-events: none;
}
#trash-zone.hidden { opacity: 0; transform: scale(0.5); pointer-events: none; }
#trash-zone.clickable { pointer-events: auto; cursor: pointer; }
#trash-zone.clickable:active { transform: scale(0.9); }
#trash-zone svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#trash-zone.hovered { transform: scale(1.3); background: rgba(185, 28, 28, 1); box-shadow: 0 10px 50px rgba(185, 28, 28, 0.8); }

/* Controls UI */
#left-actions { position: absolute; left: 30px; bottom: 30px; display: flex; flex-direction: column; gap: 16px; z-index: 100; pointer-events: none; }
.action-btn { pointer-events: auto; width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.1); background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 40px rgba(0,0,0,0.5); transition: transform 0.2s, background 0.2s; padding: 0; }
.action-btn:hover { background: rgba(30, 41, 59, 0.95); transform: scale(1.08); }
.action-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
#hint-toggle-btn.active { color: #fbbf24; border-color: rgba(251, 191, 36, 0.5); }

#hint-panel { position: absolute; bottom: 0px; left: 70px; background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 20px 24px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 10px 40px rgba(0,0,0,0.5); display: flex; gap: 14px; align-items: flex-start; width: max-content; white-space: nowrap; transition: opacity 0.3s, transform 0.3s; transform-origin: bottom left; }
#hint-panel.hidden { opacity: 0; transform: scale(0.9) translateX(-20px); pointer-events: none; }
.hint-content h1 { margin: 0 0 10px 0; font-size: 16px; font-weight: 600; color: #fbbf24; letter-spacing: 0.5px; }
.hint-content p { margin: 0; font-size: 14px; color: rgba(255,255,255,0.7); line-height: 1.8; white-space: nowrap; }
.hint-content b { color: #fff; font-weight: 500;}