/* GraphView (/app/graph) — full-pane global graph inside .mainpane. A header bar
   (--color-surface, like .agentpanel-header) over the canvas host that fills the
   remaining height. Empty/loading/error states are quiet muted lines mirroring
   the BacklinksPanel / .agentpanel-empty contract. Token-only — no hard-coded
   color/px. */
.graphview {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.graphview-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding: var(--space-md);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.graphview-title {
  margin: 0;
  font-size: var(--font-size-heading);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  color: var(--color-text);
}

/* The canvas host fills the rest of the pane; GraphCanvas auto-sizes into it. */
.graphview-canvas {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--color-bg);
}

/* Quiet muted single line for loading/error (mirrors .backlinks-status). */
.graphview-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  height: 100%;
  margin: 0;
  font-size: var(--font-size-label);
  color: var(--color-text-muted);
}

/* Centered empty state (clones the .agentpanel-empty muted column). */
.graphview-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-sm);
  height: 100%;
  padding: var(--space-lg);
}

.graphview-empty-heading {
  margin: 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-body);
  color: var(--color-text);
}

.graphview-empty-body {
  margin: 0;
  max-width: 32rem;
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  color: var(--color-text-muted);
}
