/* ====================================================================
   agentic-flow studio — visual authoring UI for pipeline YAML.
   No build step, no framework. Pure CSS, dark IDE-style theme.
   ==================================================================== */

:root {
  --bg:        #0f1115;
  --bg-2:      #161922;
  --bg-3:      #1c2030;
  --panel:     #13161e;
  --line:      #262b38;
  --line-2:    #313749;
  --text:      #e6e9ef;
  --text-dim:  #9aa3b2;
  --text-faint:#6b7384;
  --accent:    #6ea8fe;
  --accent-2:  #4f7fd6;

  /* node-kind colors */
  --agent:  #6ea8fe;
  --tool:   #4cd3b0;
  --loop:   #e0a458;
  --when:   #c98bdb;

  --ok:     #57c98a;
  --warn:   #e0b14e;
  --err:    #e5705b;

  --radius: 9px;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: 13px;
  overflow: hidden;
}

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
}

button { font-family: inherit; }

/* ===================== Toolbar ===================== */
.toolbar {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 14px;
  background: linear-gradient(180deg, var(--bg-2), var(--panel));
  border-bottom: 1px solid var(--line);
  z-index: 30;
}
.brand { display: flex; align-items: center; gap: 9px; }
.logo {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 7px;
  background: linear-gradient(135deg, var(--accent), var(--when));
  color: #0b0e14; font-weight: 800; font-size: 15px;
}
.brand-name { font-size: 14px; letter-spacing: .2px; }
.brand-name b { color: var(--accent); font-weight: 700; }

.toolbar-group { display: flex; gap: 6px; align-items: center; }
.toolbar-spacer { flex: 1; }

.btn {
  background: var(--bg-3); color: var(--text);
  border: 1px solid var(--line-2); border-radius: 7px;
  padding: 6px 11px; cursor: pointer; font-size: 12.5px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .12s, border-color .12s, transform .05s;
}
.btn:hover { background: #232838; border-color: #3c455c; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent-2); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent); }
.btn.pill { border-radius: 999px; padding: 5px 12px; }
.btn.pill.is-error { color: var(--err); border-color: #5a3433; background: #2a1c1d; }
.btn.pill.is-warn  { color: var(--warn); border-color: #54472a; background: #28241a; }
.btn.pill.is-ok    { color: var(--ok);   border-color: #2e4b3b; background: #18241d; }

.mini-btn {
  background: var(--bg-3); color: var(--text-dim);
  border: 1px solid var(--line-2); border-radius: 6px;
  min-width: 24px; height: 24px; padding: 0 6px; cursor: pointer;
  font-size: 13px; line-height: 1; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
}
.mini-btn:hover { background: #232838; color: var(--text); }

/* ---- inline icons (Lucide; see icons.js) ---- */
.icon { flex: 0 0 auto; vertical-align: -0.14em; }
.btn .icon { width: 15px; height: 15px; }
.mini-btn .icon { width: 16px; height: 16px; }
.settings-title { display: inline-flex; align-items: center; gap: 7px; }
.settings-title .icon { width: 14px; height: 14px; }
.logo .icon { width: 16px; height: 16px; }
.yaml-status { display: inline-flex; align-items: center; gap: 5px; }
.yaml-status .icon { width: 14px; height: 14px; }
.val-empty { display: inline-flex; align-items: center; gap: 7px; }
.val-empty .icon { width: 15px; height: 15px; }
.val-item .vi-icon { display: inline-flex; }
.val-item .vi-icon .icon { width: 14px; height: 14px; margin-top: 1px; }

/* dropdown */
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
  background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: 8px; padding: 5px; min-width: 230px;
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
}
.dropdown-menu button {
  display: block; width: 100%; text-align: left;
  background: none; border: none; color: var(--text);
  padding: 7px 9px; border-radius: 6px; cursor: pointer; font-size: 12.5px;
}
.dropdown-menu button:hover { background: var(--bg-3); }
.dropdown-menu button small { display: block; color: var(--text-faint); font-size: 11px; margin-top: 2px; }

/* ===================== Layout ===================== */
.layout {
  display: grid;
  grid-template-columns: 234px 1fr 320px;
  min-height: 0;
}

/* ===================== Sidebar ===================== */
.sidebar {
  background: var(--panel); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0;
  padding: 12px 11px;
}
.settings-card {
  text-align: left; width: 100%; cursor: pointer;
  background: var(--bg-3); border: 1px solid var(--line-2);
  border-radius: 8px; padding: 9px 11px; color: var(--text);
  display: flex; flex-direction: column; gap: 3px; margin-bottom: 14px;
}
.settings-card:hover, .settings-card.active { border-color: var(--accent); }
.settings-title { font-weight: 600; }
.settings-sub { color: var(--text-faint); font-size: 11px; font-family: var(--mono); }

.sidebar-head {
  display: flex; align-items: center; justify-content: space-between;
  color: var(--text-dim); font-size: 11px; text-transform: uppercase;
  letter-spacing: .6px; margin-bottom: 8px;
}
.agent-list { display: flex; flex-direction: column; gap: 7px; overflow-y: auto; flex: 1; }
.agent-card {
  position: relative; overflow: hidden; text-align: left; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: 10px; padding: 8px 10px 8px 12px; color: var(--text);
}
.agent-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: var(--agent); pointer-events: none;
}
.agent-card:hover { background: var(--bg-3); }
.agent-card.active { border-color: var(--accent); background: var(--bg-3); }
.agent-card.active::before { background: var(--accent); }
.agent-card .ac-name { font-weight: 600; font-family: var(--mono); font-size: 12.5px; }
.agent-card .ac-meta { color: var(--text-faint); font-size: 11px; margin-top: 3px; }
.agent-card .ac-tag {
  display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 999px;
  background: var(--bg-3); border: 1px solid var(--line-2); color: var(--text-dim);
  margin: 3px 3px 0 0;
}
.empty-agents { color: var(--text-faint); font-size: 12px; padding: 8px 2px; line-height: 1.5; }

.sidebar-foot { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; }
.legend-row { display: flex; align-items: center; gap: 8px; color: var(--text-faint); font-size: 11.5px; padding: 2px 0; }
.swatch { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.swatch.agent { background: var(--agent); }
.swatch.tool  { background: var(--tool); }
.swatch.loop  { background: var(--loop); }
.swatch.when  { background: var(--when); }

/* ===================== Canvas ===================== */
.canvas-wrap { position: relative; min-width: 0; overflow: hidden; background:
  radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 0) 0 0 / 26px 26px,
  var(--bg);
}
.canvas { width: 100%; height: 100%; cursor: grab; }
.canvas.panning { cursor: grabbing; }
.canvas svg { display: block; width: 100%; height: 100%; }

.canvas-controls {
  position: absolute; top: 12px; left: 12px; z-index: 10;
  display: flex; align-items: center; gap: 6px;
  background: rgba(19,22,30,.85); padding: 5px; border-radius: 9px;
  border: 1px solid var(--line-2); backdrop-filter: blur(6px);
}
.zoom-label { color: var(--text-faint); font-size: 11px; font-family: var(--mono); padding: 0 4px; }

.empty-hint {
  position: absolute; inset: 0; display: grid; place-content: center;
  text-align: center; color: var(--text-dim); pointer-events: none;
}
/* Class display:grid ties UA [hidden] on specificity and wins by order, so the
   hidden attribute wouldn't hide the overlay. This rule restores it. */
.empty-hint[hidden] { display: none; }
.empty-hint p { margin: 4px 0; }
.empty-hint .dim { color: var(--text-faint); font-size: 12px; }

/* SVG node styling (classes set in graph.js) */
.n-rect { transition: stroke .12s; }
.n-card { cursor: pointer; }
.n-card:hover .n-rect { stroke: var(--accent); }
.n-card.selected .n-rect { stroke: var(--accent); stroke-width: 2.2; }
.n-title { fill: var(--text); font: 600 12.5px var(--mono); }
.n-sub   { fill: var(--text-dim); font: 11px var(--sans); }
.n-kind  { font: 700 10px var(--sans); letter-spacing: .5px; }
.n-edge  { stroke: var(--line-2); stroke-width: 1.6; fill: none; }
.n-edge-label { fill: var(--text-faint); font: 10.5px var(--mono); }
.n-container-rect { fill: rgba(255,255,255,.015); }
.n-loopback { stroke: var(--loop); stroke-width: 1.6; fill: none; stroke-dasharray: 4 3; }
.n-placeholder { fill: none; stroke: var(--line-2); stroke-dasharray: 5 4; cursor: pointer; }
.n-placeholder-txt { fill: var(--text-faint); font: 11px var(--sans); cursor: pointer; }

/* ===================== Inspector ===================== */
.inspector {
  background: var(--panel); border-left: 1px solid var(--line);
  overflow-y: auto; padding: 14px; min-width: 0;
}
.insp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.insp-kind-badge {
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .5px; color: #0b0e14;
}
.insp-kind-badge.agent { background: var(--agent); }
.insp-kind-badge.tool  { background: var(--tool); }
.insp-kind-badge.loop  { background: var(--loop); }
.insp-kind-badge.when  { background: var(--when); }
.insp-kind-badge.root  { background: var(--text-dim); }
.insp-title { font-size: 15px; font-weight: 650; }
.insp-hint { color: var(--text-faint); font-size: 11.5px; margin: 2px 0 14px; line-height: 1.5; }

.insp-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.insp-actions .btn { padding: 5px 9px; font-size: 11.5px; }
.btn-danger { color: var(--err); border-color: #4a2f2e; }
.btn-danger:hover { background: #2a1c1d; }

.field { margin-bottom: 13px; }
.field > label {
  display: block; color: var(--text-dim); font-size: 11px;
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 5px;
}
.field .field-help { color: var(--text-faint); font-size: 11px; margin-top: 4px; line-height: 1.4; }
.field input[type=text], .field input[type=number], .field select, .field textarea {
  width: 100%; background: var(--bg); color: var(--text);
  border: 1px solid var(--line-2); border-radius: 7px;
  padding: 7px 9px; font-size: 12.5px; font-family: var(--sans);
}
.field textarea { font-family: var(--mono); font-size: 12px; line-height: 1.5; resize: vertical; min-height: 64px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
}
.field.mono input { font-family: var(--mono); }
.field-row { display: flex; gap: 8px; }
.field-row .field { flex: 1; }
.checkbox-row { display: flex; align-items: center; gap: 8px; }
.checkbox-row input { width: auto; }
.field-error { color: var(--err); font-size: 11px; margin-top: 4px; }

.insp-section-title {
  color: var(--text-dim); font-size: 11px; text-transform: uppercase;
  letter-spacing: .6px; margin: 18px 0 10px; padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* args / tools key-value editor */
.kv-row { display: flex; gap: 6px; margin-bottom: 6px; }
.kv-row input { flex: 1; }
.kv-row .mini-btn { flex: none; }

/* validation panel inside inspector / root */
.val-list { display: flex; flex-direction: column; gap: 6px; }
.val-item {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 7px 9px; border-radius: 7px; background: var(--bg-2);
  border: 1px solid var(--line); font-size: 12px; cursor: pointer;
}
.val-item:hover { background: var(--bg-3); }
.val-item .vi-icon { flex: none; font-weight: 700; }
.val-item.error .vi-icon { color: var(--err); }
.val-item.warn  .vi-icon { color: var(--warn); }
.val-item.info  .vi-icon { color: var(--accent); }
.val-empty { color: var(--ok); font-size: 12px; }

.seed-chip {
  display: inline-block; font-family: var(--mono); font-size: 11px;
  padding: 2px 8px; border-radius: 999px; margin: 0 4px 4px 0;
  background: var(--bg-3); border: 1px solid var(--line-2); color: var(--text-dim);
}

/* ===================== YAML pane ===================== */
.yaml-pane {
  position: relative;
  border-top: 1px solid var(--line); background: var(--panel);
  display: flex; flex-direction: column; height: 230px;
}
.yaml-pane.collapsed  { height: 34px !important; }      /* beats inline resize height */
.yaml-pane.maximized  { height: 78vh !important; }
.yaml-pane.collapsed .yaml-editor { display: none; }

/* drag-to-resize grab bar sitting on the top border */
.yaml-resize {
  position: absolute; top: -3px; left: 0; right: 0; height: 7px;
  cursor: row-resize; z-index: 6;
}
.yaml-resize::after {
  content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 1px;
  background: transparent; transition: background .12s;
}
.yaml-resize:hover::after { background: var(--accent); }
.yaml-pane.resizing .yaml-resize::after { background: var(--accent); }

.yaml-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 12px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 12px; color: var(--text-dim);
}
.yaml-head-actions { display: flex; align-items: center; gap: 8px; }
.yaml-status { font-size: 11px; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yaml-status.ok  { color: var(--ok); }
.yaml-status.err { color: var(--err); }
.mini-btn.active { color: var(--accent); border-color: var(--accent); }

/* Editor = a line-number gutter + a scroll area holding the highlighted
   overlay. The colorized <pre> sits behind a transparent <textarea>; the two
   MUST share identical text metrics so glyphs line up. */
.yaml-editor { display: flex; flex: 1; min-height: 0; background: var(--bg); }
.yaml-gutter {
  flex: none; width: 46px; overflow: hidden; user-select: none;
  padding: 12px 8px 12px 0; text-align: right;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.55;
  white-space: pre; color: var(--text-faint);
  background: var(--panel); border-right: 1px solid var(--line);
}
.yaml-scroll { position: relative; flex: 1; min-width: 0; }
.yaml-hl, .yaml-text {
  position: absolute; inset: 0; margin: 0; border: 0;
  padding: 12px 14px; box-sizing: border-box;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.55;
  white-space: pre; tab-size: 2; letter-spacing: normal; word-spacing: normal;
}
.yaml-hl {
  z-index: 1; pointer-events: none; overflow: hidden;
  color: var(--text); background: transparent;
}
.yaml-text {
  z-index: 2; resize: none; outline: none; overflow: auto;
  background: transparent; color: transparent; caret-color: var(--text);
}
.yaml-text::selection      { background: rgba(110,168,254,.30); }
.yaml-text::-moz-selection { background: rgba(110,168,254,.30); }

/* word-wrap mode: wrap both layers identically; the 1:1 gutter is hidden */
.yaml-editor.wrap .yaml-hl,
.yaml-editor.wrap .yaml-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.yaml-editor.wrap .yaml-text { overflow-x: hidden; }
.yaml-editor.wrap .yaml-gutter { display: none; }

/* YAML token colors (used by highlight.js) */
.y-comment { color: #6b7384; font-style: italic; }
.y-key     { color: #6ea8fe; }
.y-punc    { color: #7d8799; }
.y-string  { color: #a9d77d; }
.y-num     { color: #e0a458; }
.y-bool    { color: #c98bdb; }
.y-tmpl    { color: #7ee0ff; }
.y-block   { color: #e0a458; font-weight: 600; }
.y-plain   { color: var(--text); }

/* scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #2a3040; border-radius: 6px; border: 2px solid var(--panel); }
::-webkit-scrollbar-thumb:hover { background: #36405a; }