/* ═══════════════════════════════════════════════════════════════
   GRAPH SURFACES
   Cytoscape viewport containment, overlay rendering, and
   graph canvas visual infrastructure.
   ═══════════════════════════════════════════════════════════════ */

/* ── Graph viewport shell ───────────────────────────────────────── */
.graph-vp-shell {
  position: relative;
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  contain: layout style;
  background: var(--surface);
}

/* ── Graph canvas (Cytoscape container) ─────────────────────────── */
.graph-vp-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Ensure Cytoscape's own canvas elements fill the container */
.graph-vp-canvas canvas {
  display: block;
}

/* ── Graph stats bar ────────────────────────────────────────────── */
.graph-vp-stats {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 5px 14px;
  background: rgba(255,255,255,0.015);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.graph-vp-stats::-webkit-scrollbar { display: none; }

.graph-vp-stat {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-shrink: 0;
}

.graph-vp-stat__label {
  font-size: 10px;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.graph-vp-stat__value {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-text-2);
}

.graph-vp-stat__value--green { color: #10b981; }
.graph-vp-stat__value--amber { color: #f59e0b; }
.graph-vp-stat__value--red   { color: #ef4444; }

/* ── Graph loading overlay ──────────────────────────────────────── */
.graph-vp-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--surface);
  z-index: 2;
}

.graph-vp-loading__spinner {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(124,58,237,0.15);
  border-top-color: #7c3aed;
  border-radius: 50%;
  animation: op-spin 0.8s linear infinite;
}

.graph-vp-loading__text {
  font-size: 12px;
  color: var(--muted-2);
  letter-spacing: 0.3px;
}

/* ── Graph empty state ──────────────────────────────────────────── */
.graph-vp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 12px;
  color: var(--muted-2);
  padding: 32px;
}

.graph-vp-empty__hex {
  font-size: 48px;
  color: var(--accent);
  opacity: 0.22;
  line-height: 1;
}

.graph-vp-empty__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-heading);
  letter-spacing: 0.2px;
}

.graph-vp-empty__sub {
  font-size: 12px;
  color: var(--muted-2);
  text-align: center;
  max-width: 340px;
  line-height: 1.5;
}

.graph-vp-empty__tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}

.graph-vp-empty__tag {
  font-size: 10px;
  padding: 3px 9px;
  border-radius: 9999px;
  background: var(--op-intel-bg);
  color: var(--op-intel-text);
  border: 1px solid var(--op-intel-border);
}

/* ── Overlay badge (risk / rollback / contradiction indicators) ─── */
.graph-vp-overlay-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  z-index: 3;
  pointer-events: none;
}

.graph-vp-overlay-tag {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 9999px;
  font-weight: 600;
  letter-spacing: 0.4px;
  backdrop-filter: blur(4px);
}

.graph-vp-overlay-tag--risk         { background: rgba(239,68,68,0.20); color: #fca5a5; border: 1px solid rgba(239,68,68,0.30); }
.graph-vp-overlay-tag--rollback      { background: rgba(239,68,68,0.18); color: #fca5a5; border: 1px solid rgba(239,68,68,0.25); }
.graph-vp-overlay-tag--contradiction { background: rgba(245,158,11,0.18); color: #fbbf24; border: 1px solid rgba(245,158,11,0.25); }
.graph-vp-overlay-tag--replay        { background: rgba(124,58,237,0.18); color: #c4b5fd; border: 1px solid rgba(124,58,237,0.30); }

/* ── Node selection tooltip strip ──────────────────────────────── */
.graph-vp-selection {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  background: rgba(12,12,20,0.88);
  border: 1px solid rgba(124,58,237,0.30);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 11px;
  color: var(--accent-text);
  backdrop-filter: blur(6px);
  white-space: nowrap;
  pointer-events: none;
  animation: op-fade-in 0.15s ease;
}

/* ── Graph control overlay ──────────────────────────────────────── */
.graph-vp-controls {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 3;
}

.graph-vp-ctrl-btn {
  width: 28px;
  height: 28px;
  border-radius: 5px;
  background: rgba(12,12,20,0.80);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--op-t-base), color var(--op-t-base);
  backdrop-filter: blur(4px);
}

.graph-vp-ctrl-btn:hover { background: rgba(30,28,50,0.90); color: var(--text); }

/* ── Cytoscape instance background fix ──────────────────────────── */
.cytoscape-container {
  background: transparent !important;
}

/* ── Prevent graph canvas overflow bleed ────────────────────────── */
.dag-canvas,
.graph-canvas {
  contain: layout style;
}

/* ── Replay path glow ───────────────────────────────────────────── */
@keyframes graph-replay-glow {
  0%, 100% { box-shadow: none; }
  50%       { box-shadow: 0 0 20px rgba(124,58,237,0.20); }
}

.graph-vp-shell--replay-active {
  animation: graph-replay-glow 1.8s ease-in-out infinite;
}

/* ── Panel fade-in entrance ─────────────────────────────────────── */
.graph-vp-shell {
  animation: op-fade-in 0.30s ease both;
}