/* React Flow graph app — brand-themed. Assumes styles.css variables are loaded. */

/* ── Embedded static diagrams (index/audit) ── */
.rf-diagram { position: relative; height: 380px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev); overflow: hidden; margin: 20px 0; box-shadow: var(--shadow); }
.rf-diagram .gp-loading, .rf-diagram .dg-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-faint); font-size: 13px; }
.dg-box { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 12px; border-radius: 8px; background: var(--surface); border: 1px solid var(--c, var(--border)); border-left: 3px solid var(--c, var(--accent)); color: var(--text); font-family: var(--font); white-space: nowrap; }
.dg-box .dg-box-label { font-family: var(--font-mono); font-size: 12px; color: var(--text); }
.dg-box .dg-box-sub { font-size: 9.5px; color: var(--text-faint); }
.dg-box.dg-io { border-radius: 20px; background: color-mix(in srgb, var(--c, var(--accent)) 16%, var(--surface)); border-left-width: 1px; }
.dg-box.dg-accent { box-shadow: inset 2px 0 0 var(--c); }
.dg-h { opacity: 0; width: 1px; height: 1px; min-width: 0; min-height: 0; border: 0; }
.dg-group { border: 1px dashed var(--c, var(--border)); border-radius: 12px; background: color-mix(in srgb, var(--c, var(--accent)) 5%, transparent); }
.dg-group-label { position: absolute; top: 7px; left: 12px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--c, var(--text-dim)); font-weight: 600; }
.rf-diagram .react-flow__attribution { background: transparent; font-size: 9px; }


#graph-root { position: relative; width: 100%; height: 74vh; min-height: 520px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg-elev); }
.gp-wrap { position: absolute; inset: 0; }

.gp-loading, .gp-fatal { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--text-dim); font-size: 14px; padding: 24px; text-align: center; }
.gp-fatal strong { color: var(--text); }
.gp-fatal span { max-width: 460px; line-height: 1.6; }
.gp-spinner { width: 22px; height: 22px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: gpspin 0.8s linear infinite; }
@keyframes gpspin { to { transform: rotate(360deg); } }

/* ── Nodes ── */
.rf-node { position: relative; display: flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-family: var(--font); font-size: 11px; line-height: 1.1; white-space: nowrap; cursor: pointer; transition: border-color 140ms, box-shadow 140ms, opacity 140ms, transform 140ms; }
.rf-node .rf-label { font-family: var(--font-mono); font-size: 10.5px; color: var(--text); }
.rf-h { opacity: 0; width: 1px; height: 1px; min-width: 0; min-height: 0; border: 0; background: transparent; }
.rf-node:hover, .rf-node.is-hover { border-color: var(--c, var(--accent)); }
.rf-node.is-selected { border-color: var(--c, var(--accent)); box-shadow: 0 0 0 2px var(--c, var(--accent)), var(--shadow-lg); z-index: 5; }
.rf-node.is-hi { border-color: var(--c, var(--accent)); }
.rf-node.is-dim { opacity: 0.14; }
.rf-node.is-active { box-shadow: 0 0 0 2px var(--c, var(--accent)), 0 0 18px var(--c, var(--accent)); }

/* Symbol node — a colored dot + label; god nodes emphasized */
.rf-symbol { padding: 4px 9px; }
.rf-symbol .rf-dot { flex: none; border-radius: 50%; background: var(--c, #8b8b95); box-shadow: 0 0 0 1px rgba(0,0,0,0.35); }
.rf-symbol.is-god { border-color: var(--c, var(--accent)); background: color-mix(in srgb, var(--c, var(--accent)) 14%, var(--surface)); }
.rf-symbol .rf-god { font-size: 8px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--c, var(--accent)); border: 1px solid var(--c, var(--accent)); border-radius: 4px; padding: 0 3px; }
.rf-io { border-radius: 20px; background: color-mix(in srgb, var(--c, var(--accent)) 18%, var(--surface)); border-color: var(--c, var(--accent)); }

/* Agent / skill / db / provider */
.rf-agent { border-left: 3px solid var(--c, var(--accent)); padding-left: 9px; }
.rf-node .rf-kind { font-size: 8px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--c, var(--accent)); background: color-mix(in srgb, var(--c, var(--accent)) 16%, transparent); padding: 1px 5px; border-radius: 4px; }
.rf-skill { border-color: var(--green); }
.rf-db { border-radius: 4px 4px 8px 8px; }
.rf-db .rf-db-top { width: 14px; height: 5px; border: 1px solid var(--c, #8b8b95); border-radius: 50%; }
.rf-provider { border-radius: 20px; }

/* Community group container (cluster mode) */
.rf-community { width: 100%; height: 100%; border: 1px dashed var(--c, var(--border)); border-radius: 14px; background: color-mix(in srgb, var(--c, var(--accent)) 5%, transparent); }
.rf-community-label { position: absolute; top: 6px; left: 10px; font-size: 10px; color: var(--c, var(--text-dim)); text-transform: uppercase; letter-spacing: 0.6px; }

/* ── React Flow chrome overrides ── */
.react-flow__attribution { background: transparent; color: var(--text-faint); font-size: 9px; }
.react-flow__controls { box-shadow: var(--shadow-lg); border-radius: var(--radius-sm); overflow: hidden; }
.react-flow__controls-button { background: var(--surface); border-bottom: 1px solid var(--border); color: var(--text-dim); }
.react-flow__controls-button:hover { background: var(--surface-2); color: var(--text); }
.react-flow__controls-button svg { fill: currentColor; }
.react-flow__minimap { border-radius: var(--radius-sm); }
.react-flow__edge.rf-dispatch path { stroke-dasharray: 6 4; animation: gpdash 0.7s linear infinite; }
@keyframes gpdash { to { stroke-dashoffset: -20; } }

/* ── Overlay panels ── */
.gp-panel { background: rgba(26,26,31,0.92); border: 1px solid var(--border); border-radius: var(--radius-sm); backdrop-filter: blur(6px); box-shadow: var(--shadow-lg); font-size: 12px; color: var(--text-dim); }
.gp-controls { display: flex; flex-direction: column; gap: 6px; padding: 5px; }
.gp-modes { display: flex; gap: 2px; }
.gp-seg { padding: 6px 12px; border: none; background: transparent; color: var(--text-dim); border-radius: 6px; font-size: 12px; font-weight: 500; }
.gp-seg.active { background: var(--accent-grad); color: #000; font-weight: 600; }
.gp-toolbar { display: flex; gap: 3px; border-top: 1px solid var(--border-soft); padding-top: 6px; }
.gp-tool { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 6px; color: var(--text-dim); cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); }
.gp-tool:hover { background: var(--surface-2); color: var(--text); border-color: var(--accent); }
.gp-tool.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.gp-tool .icon-svg { display: inline-flex; }
.gp-tool .icon-svg svg { width: 15px; height: 15px; }
.gp-filter { display: flex; flex-direction: column; gap: 8px; padding: 10px; width: 234px; }
.gp-search { position: relative; display: flex; align-items: center; }
.gp-search-ic { position: absolute; left: 9px; display: inline-flex; color: var(--text-faint); }
.gp-search-ic svg { width: 14px; height: 14px; }
.gp-search input { width: 100%; padding: 7px 10px 7px 30px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 12px; outline: none; }
.gp-search input:focus { border-color: var(--accent); }
.gp-chiprow { display: flex; flex-wrap: wrap; gap: 4px; }
.gp-chip { padding: 3px 9px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 20px; color: var(--text-dim); font-size: 11px; font-family: var(--font-mono); }
.gp-chip.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.gp-check { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.gp-meta { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--text-faint); border-top: 1px solid var(--border-soft); padding-top: 6px; }
.gp-link { background: none; border: none; color: var(--accent); font-size: 11px; cursor: pointer; padding: 0; }
.gp-link:hover { color: var(--accent-2); }

.gp-legend { padding: 0; max-width: 260px; }
.gp-legend-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 12px; background: none; border: none; color: var(--text-dim); font-size: 12px; }
.gp-legend-list { max-height: 220px; overflow-y: auto; padding: 4px; border-top: 1px solid var(--border-soft); }
.gp-legend-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 8px; background: none; border: none; border-radius: 6px; color: var(--text-dim); font-size: 11px; text-align: left; }
.gp-legend-row:hover, .gp-legend-row.active { background: var(--accent-soft); color: var(--text); }
.gp-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.gp-legend-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); }
.gp-legend-size { color: var(--text-faint); font-variant-numeric: tabular-nums; }

.gp-sim { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.gp-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--accent); color: #000; border: none; border-radius: 6px; font-size: 12px; font-weight: 600; }
.gp-btn.ghost { background: var(--surface-2); color: var(--text-dim); }
.gp-btn .icon-svg { display: inline-flex; }
.gp-btn .icon-svg svg { width: 13px; height: 13px; }
.gp-sim-status { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }
.gp-sim-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); }
.gp-sim-dot[data-on="true"] { background: var(--accent); box-shadow: 0 0 6px var(--accent); }

/* ── Inspector drawer ── */
.gp-inspector { position: absolute; top: 12px; right: 12px; bottom: 12px; width: 340px; max-width: calc(100% - 24px); background: rgba(19,19,22,0.96); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); backdrop-filter: blur(8px); padding: 16px 18px; overflow-y: auto; z-index: 10; animation: slideIn 200ms ease-out; }
.gp-insp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.gp-insp-kind { font-size: 9px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--c, var(--accent)); border: 1px solid var(--c, var(--accent)); border-radius: 4px; padding: 2px 6px; }
.gp-insp-close { display: inline-flex; background: none; border: none; color: var(--text-faint); cursor: pointer; padding: 2px; border-radius: 6px; }
.gp-insp-close:hover { background: var(--surface-2); color: var(--text); }
.gp-insp-close svg { width: 16px; height: 16px; }
.gp-insp-title { font-family: var(--font-mono); font-size: 15px; color: var(--text); margin: 4px 0 12px; word-break: break-word; }
.gp-insp-row { display: flex; gap: 10px; font-size: 12px; margin-bottom: 7px; }
.gp-insp-row .k { color: var(--text-faint); width: 78px; flex: none; }
.gp-insp-row .v { color: var(--text-dim); display: flex; align-items: center; gap: 6px; }
.gp-insp-row .v .gp-swatch { width: 10px; height: 10px; }
.gp-insp-badge { margin: 8px 0; padding: 8px 10px; font-size: 11px; color: var(--accent); background: var(--accent-soft); border-radius: 6px; }
.gp-insp-subhead { font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-faint); margin: 12px 0 8px; }
.gp-insp-list { display: flex; flex-direction: column; gap: 3px; max-height: 40vh; overflow-y: auto; }
.gp-conn { display: flex; align-items: center; gap: 8px; padding: 5px 8px; background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 6px; color: var(--text-dim); font-size: 11px; text-align: left; }
.gp-conn:hover { border-color: var(--accent); color: var(--text); }
.gp-conn-rel { font-size: 9px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-faint); flex: none; }
.gp-conn-label { font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-empty { color: var(--text-faint); font-size: 12px; font-style: italic; }
.gp-insp-src { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 12px; color: var(--text-dim); }
.gp-insp-src .icon-svg svg { width: 14px; height: 14px; }

@media (prefers-reduced-motion: reduce) {
  .react-flow__edge.rf-dispatch path { animation: none; }
  .gp-spinner { animation-duration: 1.6s; }
}
@media (max-width: 720px) {
  .gp-filter { width: 190px; }
  .gp-inspector { width: calc(100% - 24px); }
}