/* THEME VARIABLES */
:root {
  --ruler: 24px;
  --grid-size: 40px;
  --grid-line: rgba(0,0,0,.06);
  --sb-track: transparent;
  --sb-thumb: color-mix(in hsl, var(--text) 25%, transparent);
  --sb-thumb-hover: color-mix(in hsl, var(--text) 40%, transparent);

  /* Light theme */
  --bg: #ffffff;
  --text: #222;
  --subtext: #666;

  --panel: #fff;
  --border: #ddd;
  --history-bg: #fafafa;

  --ruler-bg: #f4f4f6;
  --ruler-line: #ddd;
  --tick: #bbb;

  --grid-minor: #f0f0f0;
  --grid-major: #fafafa;

  --edge: #222;
  --edge-ghost: #888;
  --handle: #555;

  --node-shadow: 0 2px 10px rgba(0,0,0,0.05);
  --select-outline: #4a90e2;
  --drop-outline: #4a90e2;

  --accent: #0b6; /* assistant label color */
}

:root[data-theme="dark"] {
  --bg: #0f1115;
  --text: #e8e8e8;
  --subtext: #a0a0a0;
  --grid-line: rgba(255,255,255,.09);

  --panel: #171a21;
  --border: #2a2f3a;
  --history-bg: #151922;

  --ruler-bg: #141820;
  --ruler-line: #2a2f3a;
  --tick: #394151;

  --grid-minor: #1e2430;
  --grid-major: #141820;

  --edge: #cfd8e3;
  --edge-ghost: #6b7280;
  --handle: #cfd8e3;

  --node-shadow: 0 2px 10px rgba(0,0,0,0.6);
  --select-outline: #7aa2f7;
  --drop-outline: #7aa2f7;

  --accent: #34d399;
}

/* BASE */
* { box-sizing: border-box; }
html, body {
  height: 100%; margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color: var(--text);
  background: var(--bg);
  overflow: hidden;          /* kill the vertical scrollbar */
  overscroll-behavior: none; /* no bounce/scroll chaining on touchpads */
}

@supports (overflow: clip) {
  #viewport { overflow: clip; } /* no scrollbars, no scroll container */
}

/* TOOLBAR */
#toolbar {
  position: absolute; top: var(--ruler); left: calc(var(--ruler) + 8px); z-index: 50;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
  display: flex; gap: 10px; align-items: center;
  transition: background-color .15s, border-color .15s, color .15s;
}
#toolbar button {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  line-height: 1;
}
#toolbar button:hover {
  background: var(--history-bg);
}
#toolbar .hint { font-size: 12px; color: var(--subtext); }
#add-node { cursor: pointer; }

/* VIEWPORT */
#viewport {
  position: absolute; top: var(--ruler); left: var(--ruler); right: 0; bottom: 0;
  overflow: hidden;
  background-color: var(--bg);
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size:
    calc(var(--grid-size) * var(--grid-zoom, 1)) calc(var(--grid-size) * var(--grid-zoom, 1)),
    calc(var(--grid-size) * var(--grid-zoom, 1)) calc(var(--grid-size) * var(--grid-zoom, 1));
  background-position:
    var(--grid-pan-x, 0px) var(--grid-pan-y, 0px),
    var(--grid-pan-x, 0px) var(--grid-pan-y, 0px);
  transition: background-color .15s, color .15s;
}

/* WORLD */
#world {
  position: absolute;
  width: 50000px;
  height: 50000px;
  transform-origin: 0 0;
  transition: background-color .15s, color .15s;
}

/* EDGES LAYER */
#edges  { position: absolute; inset: 0; width: 50000px; height: 50000px; z-index: 1; overflow: visible; }
#edgesTop { position: absolute; inset: 0; width: 50000px; height: 50000px; z-index: 3; overflow: visible; }

/* Prevent edges from stealing pointer events while connecting */
#edges, #edgesTop { pointer-events: none; }
#edges .edge, #edgesTop .edge { pointer-events: stroke; }

.edge {
  fill: none; stroke: var(--edge); stroke-width: 2;
  vector-effect: non-scaling-stroke;
  marker-end: url(#arrow);
  transition: stroke .15s;
  pointer-events: stroke;
}
.edge.ghost {
  stroke: var(--edge-ghost); stroke-dasharray: 6 6; marker-end: none; pointer-events: none;
}
.edge:hover { stroke: var(--accent); }
.edge.selected { stroke: var(--accent); stroke-width: 3; }

/* Edges pointing into the node being dragged */
.edge.drag-target { stroke: var(--select-outline); /* your blue */ stroke-width: 3; }

/* NODES LAYER */
#nodes  { position: absolute; inset: 0; z-index: 2; pointer-events: none;}
#nodes .node { pointer-events: auto; }

/* Top node layer: dragged/active node lives here */
#nodesTop { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
#nodesTop .node { pointer-events: auto; }

/* NODE */
.node {
  position: absolute; width: 480px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--node-shadow); overflow: visible; user-select: none; color: var(--text); z-index: 0; isolation: isolate;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.node .header {
  padding: 8px 10px; border-bottom: 1px solid var(--border);
  display: flex; gap: 8px; align-items: center; cursor: move; background: var(--panel);
}
.node .header .ctx { margin-left: auto; font-size: 12px; color: var(--subtext); }
.node .header,
.node .row,
.node .history,
.node .input {
  position: relative; /* required for z-index to apply */
  z-index: 1;         /* content above handles */
}
/* extra identification text in headers (host / last message snippet) */
.node .header .extra {
  margin-left: 8px;
  font-size: 12px;
  color: var(--subtext);
  max-width: 50%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* collapse behavior: keep only header (and optionally handles) visible */
.node.collapsed > :not(.header):not(.handle) { display: none; }
.node.collapsed { min-height: 44px; }

/* hide handles when collapsed for a cleaner look (remove if you want them visible) */
.node.collapsed .handle { display: none; }
.node.selected {
  z-index: 999;
}
.row {
  padding: 10px; border-bottom: 1px solid var(--border);
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.row label { font-size: 12px; color: var(--subtext); }
.row select, .row input { padding: 6px; color: var(--text); background: var(--panel); border: 1px solid var(--border); }

/* HISTORY */
.history {
  padding: 10px; height: 220px; overflow-y: auto; overflow-x: hidden;
  background: var(--history-bg); border-bottom: 1px solid var(--border);
}
.history, .input textarea { user-select: text; }
.turn { margin-bottom: 8px; }
.turn .who { font-size: 13px; color: var(--accent); }
.turn.user .who { color: #4a90e2; }
.turn .txt { font-size: 13px; white-space: pre-wrap; }
.turn .md { margin-top: 4px; }

/* INPUT */
.input { padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.input textarea {
  resize: none; min-height: 64px; padding: 8px;
  color: var(--text); background: var(--panel); border: 1px solid var(--border);
}
.input button { padding: 6px 10px; cursor: pointer; }

/* HANDLES */
.handle {
  position: absolute; top: 50%; width: 10px; height: 10px; background: var(--handle);
  border-radius: 50%; transform: translateY(-50%);
  transition: background-color .15s;
  z-index: 0;
}
.handle.left { left: -5px; }
.handle.right { right: -5px; }

/* RULERS */
#ruler-top, #ruler-left, #ruler-corner {
  position: absolute; z-index: 60; background: var(--ruler-bg); color: var(--subtext);
  transition: background-color .15s, border-color .15s, color .15s;
}
#ruler-top { left: var(--ruler); right: 0; top: 0; height: var(--ruler); border-bottom: 1px solid var(--ruler-line); }
#ruler-left { top: var(--ruler); bottom: 0; left: 0; width: var(--ruler); border-right: 1px solid var(--ruler-line); }
#ruler-corner { top: 0; left: 0; width: var(--ruler); height: var(--ruler); border-right: 1px solid var(--ruler-line); border-bottom: 1px solid var(--ruler-line); display: grid; place-items: center; font-size: 10px; }

.selected {
  /* draw a ring without shifting layout */
  box-shadow: 0 0 0 2px var(--select-outline), var(--node-shadow);
  border: 2.5px solid var(--border); /* keep the normal 1px border */
}

/* Optional visual cue while dragging a connection */
.selected-drop { outline: none; }

/* draw a dashed, rounded ring above the node */
.node.selected-drop { 
  position: relative; 
  transform: scale(1.01);
  transition: transform .12s ease;
}
.node.selected-drop::after {
  content: "";
  position: absolute;
  inset: -6px;                 /* how far the ring sits from the node */
  border-radius: 12px;         /* slightly > node’s 8px border-radius */
  border: 3px dashed var(--drop-outline);
  pointer-events: none;
  z-index: 3;                  /* above node content */
  box-shadow:
    0 0 0 6px color-mix(in hsl, var(--drop-outline) 18%, transparent);
}

/* ATTACHMENTS (collapsible) */
.attach-toggle {
  appearance: none;
  background: none;
  border: 0;
  padding: 6px 0;
  font: inherit;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.attach-toggle .chev { color: var(--subtext); }

.attach-panel {
  display: none; /* hidden by default */
  padding: 10px;
  border-bottom: 1px solid var(--border);
  gap: 8px;
  flex-wrap: wrap;
}
.attach-panel.show { display: flex; flex-direction: column; }
.attach-panel label { font-size: 12px; color: var(--subtext); }
/* Make them follow the active theme, full-width */
.attach-panel input {
  width: 100%;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  transition: background-color .15s, border-color .15s, color .15s;
}

.attach-panel input::placeholder {
  color: var(--subtext);
}

/* Optional: a nice focus state that matches your selection color */
.attach-panel input:focus {
  outline: 2px solid var(--select-outline);
  outline-offset: 2px;
}

/* markdown view in chat */
.turn .txt { /* previously had white-space: pre-wrap; */
  white-space: normal;
}

.txt.md {
  line-height: 1.5;
  font-size: 13px;
}

.txt.md p { margin: 0 0 8px; }
.txt.md h1, .txt.md h2, .txt.md h3, .txt.md h4, .txt.md h5, .txt.md h6 {
  margin: 10px 0 6px;
  line-height: 1.25;
}
.txt.md ul,
.txt.md ol {
  margin: 0.2em 0 0.2em 1.05em;
  padding-left: 1.05em;
  list-style-position: outside;
}
/* tighten paragraph spacing inside list items for both markdown + chat */
.txt.md li > p,
.turn .txt li > p {
  margin: 0.1em 0;
}

/* optional: keep nested lists compact as well */
.turn .txt ul ul,
.turn .txt ol ol,
.txt.md ul ul,
.txt.md ol ol {
  margin-left: 1.05em;
}
.txt.md code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  background: rgba(127,127,127,.12);
  padding: 2px 4px;
  border-radius: 4px;
}
.txt.md pre {
  margin: 8px 0;
  padding: 10px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--history-bg);
}
.txt.md pre code {
  background: transparent;
  padding: 0;
}
.txt.md blockquote {
  margin: 8px 0;
  padding: 6px 10px;
  border-left: 3px solid var(--border);
  color: var(--subtext);
  background: var(--history-bg);
  border-radius: 4px;
}
.txt.md a { text-decoration: underline; }
.txt.md img { max-width: 100%; height: auto; border-radius: 6px; }
/* Wrap code blocks; no horizontal scrollbar */
.txt.md pre {
  /* keep formatting but allow wrapping */
  white-space: pre-wrap;

  /* break very long tokens (URLs/long strings/base64) */
  overflow-wrap: anywhere;    /* modern */
  word-break: break-word;     /* fallback */
  word-wrap: break-word;      /* legacy alias */

  /* contain within the bubble */
  width: 100%;
  box-sizing: border-box;

  /* remove horizontal scroll; keep vertical if needed */
  overflow-x: hidden;
  /* optional: let tall code scroll vertically */
  /* overflow-y: auto; max-height: 60vh; */
}

/* ensure inline code can wrap too */
.txt.md code { white-space: pre-wrap; }

/* make <code> inside <pre> inherit wrapping behavior */
.txt.md pre code { white-space: inherit; }

/* Straico key link (only shows when no key) */
.straico-key-link {
  position: fixed;
  left: 22px; bottom: 12px;
  padding: 6px 10px;
  font: 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--node-shadow, 0 0 0 rgba(0,0,0,0));
  cursor: pointer;
}
.straico-key-link:hover { text-decoration: underline; }

/* Modal */
.modal-overlay {
  position: fixed; inset: 0;
  display: none; place-items: center;
  background: rgba(0,0,0,.35);
  z-index: 9999;
}
.modal-overlay.show { display: grid; }
.modal {
  width: min(360px, 90vw);
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}
.modal h3 {
  margin: 0 0 10px;
  font-size: 14px;
  display: flex; gap: 6px; align-items: center;
}
.keycap {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--history-bg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}
.modal .desc { font-size: 12px; color: var(--subtext); margin-bottom: 10px; }
.modal input[type="password"], .modal input[type="text"] {
  width: 100%; padding: 8px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--panel); color: var(--text);
}
.modal .row { display: flex; gap: 8px; margin-top: 10px; }
.modal button {
  appearance: none; border: 1px solid var(--border);
  background: var(--panel); color: var(--text);
  padding: 6px 10px; border-radius: 6px; cursor: pointer;
}
.modal button.primary { background: var(--accent); color: white; border-color: var(--accent); }

/* Minimap */
.minimap {
  position: fixed;
  top: 10px; right: 10px;
  width: 168px; height: 112px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  z-index: 1000;
  overflow: hidden;
  transition: width .12s ease, height .12s ease;
}
.minimap:hover { width: 300px; height: 200px; }
.minimap canvas { width: 100%; height: 100%; display: block; }
.minimap .badge {
  position: absolute; left: 8px; bottom: 6px;
  font: 11px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color: var(--subtext);
  background: color-mix(in hsl, var(--panel), black 6%);
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  pointer-events: none;
}

/* Local file chips in the Attachments panel */
.local-files { display: flex; flex-direction: column; gap: 6px; }
.local-files .list { display: flex; gap: 6px; flex-wrap: wrap; }
.local-files .chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--history-bg); color: var(--text);
  font-size: 12px;
}
.local-files .chip .x {
  appearance: none; border: 0; background: transparent; color: var(--subtext);
  cursor: pointer; font-size: 14px; line-height: 1;
}
.local-files button { align-self: flex-start; padding: 4px 8px; }

/* Firefox */
* {
  scrollbar-width: thin;                        /* thin | auto | none */
  scrollbar-color: var(--sb-thumb) var(--sb-track);
}

/* WebKit/Blink (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;                                  /* for horizontal scrollers elsewhere */
}
::-webkit-scrollbar-track {
  background: var(--sb-track);
}
::-webkit-scrollbar-thumb {
  background-color: var(--sb-thumb);
  border-radius: 999px;
  border: 2px solid transparent;                /* creates a slim pill */
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--sb-thumb-hover);
}
::-webkit-scrollbar-corner {
  background: transparent;
}
/* --- Add Node dropdown --- */
.add-menu {
  position: absolute;
  z-index: 10000;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  box-shadow: var(--node-shadow);
  display: none;
  min-width: 180px;
}
.add-menu.show { display: block; }
.add-menu .item {
  display: block;
  width: 100%;
  text-align: left;
  appearance: none;
  background: transparent;
  color: var(--text);
  border: 0;
  padding: 10px 12px;
  cursor: pointer;
  font: inherit;
}
.add-menu .item + .item {
  border-top: 1px dashed var(--border);
}
.add-menu .item:hover {
  background: var(--history-bg);
}

/* URL node meta row */
.url-meta {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--subtext);
  display: flex;
  align-items: center;
  gap: 8px;
}
/* URL meta link: theme-aware color */
.url-meta a {
  text-decoration: underline;
  font-weight: 600;
}

/* Dark theme → white link */
:root[data-theme="dark"] .url-meta a,
html[data-theme="dark"] .url-meta a,
body[data-theme="dark"] .url-meta a,
html.dark .url-meta a,
body.dark .url-meta a {
  color: #fff;
}

/* Light theme (default) → black link */
:root:not([data-theme="dark"]) .url-meta a,
html:not([data-theme="dark"]) .url-meta a,
body:not([data-theme="dark"]) .url-meta a,
html:not(.dark) .url-meta a,
body:not(.dark) .url-meta a {
  color: #000;
}
.url-meta .status {
  font-size: 11px;
  opacity: .85;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
}

.floater-link{
  position: fixed; right: 10px; bottom: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 999px;
  background: var(--panel, #11161e);
  color: var(--text, #e6edf7); text-decoration: none; font-weight: 600;
  border: 1px solid rgba(148,163,184,.25);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  opacity: .9; transition: transform .08s ease, opacity .15s;
}
.floater-link:hover{ transform: translateY(-1px); opacity: 1 }
.floater-link svg{ width:16px; height:16px }