.agent-graph-page { min-width: 0; }
.agent-graph-page .card {
  border: 1px solid rgba(148,163,184,.14);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(11,18,32,.95), rgba(6,12,24,.96));
}
.agent-graph-page .hd {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(148,163,184,.1);
}
.agent-graph-page .hd h2 {
  margin: 0;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #e5e7eb;
}
.agent-graph-page .bd { padding: 10px 12px; }

.toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.toolbar-row + .toolbar-row { margin-top: 8px; }
.toolbar-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.2);
  background: rgba(15,23,42,.7);
  color: #cbd5e1;
  font-size: 11px;
}
.chip.good { color: #86efac; border-color: rgba(34,197,94,.28); }
.chip.warn { color: #fde68a; border-color: rgba(245,158,11,.3); }

.signal-chip {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid rgba(148,163,184,.2);
}

.signal-chip--synthetic {
  color: #fde68a;
  border-color: rgba(245,158,11,.3);
  background: rgba(120,53,15,.22);
}

.signal-chip--degraded {
  color: #fef08a;
  border-color: rgba(251,191,36,.34);
  background: rgba(113,63,18,.24);
}

.signal-chip--risk-off {
  color: #fca5a5;
  border-color: rgba(239,68,68,.3);
  background: rgba(127,29,29,.22);
}

.btn {
  appearance: none;
  border: 1px solid rgba(148,163,184,.24);
  background: rgba(15,23,42,.78);
  color: #e2e8f0;
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 11px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.btn:hover, .btn.active {
  border-color: rgba(96,165,250,.45);
  background: rgba(30,41,59,.92);
}
.btn-sm { padding: 4px 8px; font-size: 10px; border-radius: 8px; }

/* ---------- graph layout ---------- */
.graph-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 12px;
  margin-top: 12px;
}
.graph-main .bd { min-height: 560px; padding: 0; }
.graph-side .bd { min-height: 560px; overflow-y: auto; max-height: 620px; }
.graph-canvas {
  width: 100%;
  height: 580px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.14);
  background:
    radial-gradient(circle at 15% 15%, rgba(59,130,246,.06), transparent 30%),
    radial-gradient(circle at 85% 85%, rgba(249,115,22,.04), transparent 30%),
    #070e1b;
}

/* ---------- node detail panel ---------- */
.node-detail.hidden { display: none; }
.detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.detail-label {
  font-size: 14px;
  font-weight: 600;
  color: #f8fafc;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.detail-grid b {
  font-size: 10px;
  color: #93c5fd;
  text-transform: uppercase;
  letter-spacing: .08em;
  display: block;
  margin-bottom: 2px;
}
.detail-grid .mono {
  font-size: 13px;
  color: #e5e7eb;
}
.detail-block { margin-top: 10px; }
.detail-block b {
  font-size: 10px;
  color: #93c5fd;
  text-transform: uppercase;
  letter-spacing: .08em;
  display: block;
  margin-bottom: 4px;
}
.detail-block div {
  font-size: 12px;
  color: #cbd5e1;
  line-height: 1.5;
}
.detail-block pre {
  margin: 0;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid rgba(148,163,184,.14);
  background: #020817;
  color: #cbd5e1;
  font-size: 10px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 180px;
  overflow: auto;
}
.detail-error-box {
  margin: 8px 0;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(239,68,68,.35);
  background: rgba(239,68,68,.06);
}
.detail-error-msg {
  font-size: 12px;
  color: #fca5a5;
  line-height: 1.5;
}
.detail-error-msg + .detail-error-msg { margin-top: 4px; }

/* ---------- error panel ---------- */
.error-panel { margin-top: 12px; }
.error-panel.hidden { display: none; }
.error-list { display: flex; flex-direction: column; gap: 8px; }
.error-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(148,163,184,.14);
  background: rgba(15,23,42,.5);
  cursor: pointer;
  transition: border-color .15s;
}
.error-item:hover { border-color: rgba(96,165,250,.3); }
.error-item--error { border-left: 3px solid #ef4444; }
.error-item--warn  { border-left: 3px solid #f59e0b; }
.error-icon {
  font-size: 16px;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}
.error-item--error .error-icon { color: #ef4444; }
.error-item--warn  .error-icon { color: #f59e0b; }
.error-body { flex: 1; min-width: 0; }
.error-node-name {
  font-size: 12px;
  font-weight: 600;
  color: #f8fafc;
  display: flex;
  align-items: center;
  gap: 6px;
}
.error-msg {
  margin-top: 2px;
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.4;
}

/* ---------- timeline / summary bar ---------- */
.graph-timeline { margin-top: 12px; }
.kpi {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.box {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(148,163,184,.14);
  background: rgba(15,23,42,.66);
}
.box .val { font-size: 15px; color: #f8fafc; font-weight: 700; }
.box .sub {
  margin-top: 2px;
  font-size: 10px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* ---------- utilities ---------- */
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.muted { color: #94a3b8; }
.small { font-size: 12px; }
.hint  { color: #94a3b8; font-size: 12px; }
.hidden { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 1280px) {
  .graph-layout { grid-template-columns: 1fr; }
  .graph-main .bd { min-height: 420px; }
  .graph-canvas { height: 420px; }
  .graph-side .bd { min-height: auto; max-height: 400px; }
  .kpi { grid-template-columns: repeat(2, 1fr); }
}