/* magic.css — the "looks like magic" layer: a live breathing knowledge graph,
   first-run onboarding coachmark, and celebration balloons. Colors via --ag-*
   tokens only; respects prefers-reduced-motion. Loaded after the console CSS. */

/* ---- entity map — the single canonical node-link DATA visual -----------
   Shared graph language (reused by any future data graph): nodes tinted by the
   --ag-* palette, edges in --ag-border, labels carry a card-bg halo
   (paint-order:stroke) for legibility over edges. Animates in ONCE then holds.
   Decorative graphs (landing hero, logo, thinking-dots) are intentionally NOT
   this component — they stay pointer-events:none brand/icon visuals. */
.ag-lg {
  position: relative;
  border: 1px solid var(--ag-border, #E3E2DE);
  border-radius: var(--ag-r-xl, 12px);
  background:
    radial-gradient(120% 120% at 50% 0%, var(--ag-hover-bg, #F7F6F4) 0%, var(--ag-card-bg, #fff) 60%);
  overflow: hidden;
  min-height: 240px;
}
.ag-em-svg { display: block; width: 100%; height: 400px; }

/* hover a node → emphasise its incident edges/labels, dim the rest */
.ag-em-stage.is-hover .ag-em-node:not(.is-on) { opacity: .35; }
.ag-em-stage.is-hover .ag-em-edge:not(.is-on),
.ag-em-stage.is-hover .ag-em-elabel:not(.is-on) { opacity: .1; }

.ag-em-edge { stroke: var(--ag-border, #E3E2DE); stroke-width: 1.3; opacity: 0; animation: ag-edge-draw .6s ease forwards; }
.ag-em-edge.is-on { stroke: var(--ag-accent, #2B3FF5); stroke-width: 1.8; opacity: 1 !important; }
@keyframes ag-edge-draw { from { opacity: 0; } to { opacity: .55; } }

.ag-em-elabel { fill: var(--ag-text-secondary, #9C9C96); font: 500 9px/1 var(--ag-mono, monospace); text-anchor: middle;
  paint-order: stroke; stroke: var(--ag-card-bg, #fff); stroke-width: 3px; opacity: 0; animation: ag-emfade .5s ease forwards; }
.ag-em-elabel.is-on { fill: var(--ag-text-primary, #141413); opacity: 1 !important; }
@keyframes ag-emfade { to { opacity: .9; } }

.ag-em-node { transform-box: fill-box; transform-origin: center; cursor: default; animation: ag-pop .5s cubic-bezier(.2,1.2,.3,1) both; }
.ag-em-node circle { transition: opacity .15s ease; }
.ag-em-node.is-on circle { stroke: var(--ag-card-bg, #fff); stroke-width: 2px; }
.ag-em-label { fill: var(--ag-text-main, #3D3D3A); font: 500 10px/1 var(--ag-sans, sans-serif); text-anchor: middle;
  paint-order: stroke; stroke: var(--ag-card-bg, #fff); stroke-width: 3px; }
.ag-em-node.is-on .ag-em-label { fill: var(--ag-text-primary, #141413); }
@keyframes ag-pop { 0% { transform: scale(0); opacity: 0; } 70% { transform: scale(1.18); } 100% { transform: scale(1); opacity: 1; } }

.ag-lg-cap {
  position: absolute; left: 14px; top: 12px; z-index: 1;
  display: flex; align-items: center; gap: 8px;
  font: 600 11px/1 var(--ag-mono, monospace); letter-spacing: .06em;
  color: var(--ag-text-secondary, #9C9C96);
}
.ag-em-refresh {
  position: absolute; right: 12px; top: 10px; z-index: 1;
  width: 26px; height: 26px; border-radius: var(--ag-r-md, 6px);
  border: 1px solid var(--ag-border, #E3E2DE); background: var(--ag-card-bg, #fff);
  color: var(--ag-text-muted, #6E6E69); font-size: 13px; line-height: 1; cursor: pointer;
}
.ag-em-refresh:hover { color: var(--ag-text-primary, #141413); background: var(--ag-hover-bg, #F7F6F4); }

/* ---- first-run onboarding coachmark ----------------------------------- */
.ag-onboard {
  position: relative;
  margin: 0 0 12px;
  border: 1px solid var(--ag-accent, #2B3FF5);
  border-radius: var(--ag-r-xl, 12px);
  background: var(--ag-accent-soft, #EBEDFE);
  padding: 18px 20px;
  display: flex; gap: 18px; align-items: flex-start;
  animation: ag-pop-in .45s cubic-bezier(.2,1,.3,1) both;
}
@keyframes ag-pop-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.ag-onboard-title { font: 700 15px/1.2 var(--ag-sans, sans-serif); color: var(--ag-text-primary, #141413); margin: 0 0 6px; }
.ag-onboard-sub { font: 500 13px/1.5 var(--ag-sans, sans-serif); color: var(--ag-text-main, #3D3D3A); margin: 0 0 12px; max-width: 60ch; }
.ag-onboard-steps { display: flex; gap: 10px; flex-wrap: wrap; }
.ag-onboard-x {
  position: absolute; right: 12px; top: 10px; cursor: pointer; border: none; background: transparent;
  color: var(--ag-text-secondary, #9C9C96); font: 600 16px/1 var(--ag-sans, sans-serif);
}
.ag-onboard-x:hover { color: var(--ag-text-primary, #141413); }
.ag-onboard-badge {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  background: var(--ag-accent, #2B3FF5); color: var(--ag-card-bg, #fff);
  display: flex; align-items: center; justify-content: center;
  animation: ag-pulse 2s ease-in-out infinite;
}
.ag-ob-btn {
  height: 34px; padding: 0 14px; cursor: pointer;
  border: 1px solid var(--ag-border, #E3E2DE); border-radius: var(--ag-r-lg, 8px);
  background: var(--ag-card-bg, #fff); color: var(--ag-text-main, #3D3D3A);
  box-shadow: var(--ag-shadow-xs);
  font: 600 12px/1 var(--ag-sans, sans-serif);
  transition: background var(--ag-dur-fast, .15s) var(--ag-ease), box-shadow var(--ag-dur-fast, .15s) var(--ag-ease), transform var(--ag-dur-fast, .15s) var(--ag-ease);
}
.ag-ob-btn:hover { background: var(--ag-hover-bg, #F7F6F4); transform: translateY(-1px); box-shadow: var(--ag-shadow-sm); }
.ag-ob-btn--primary { background: var(--ag-accent, #2B3FF5); border-color: var(--ag-accent, #2B3FF5); color: var(--ag-card-bg, #fff); box-shadow: var(--ag-highlight), var(--ag-shadow-xs); }
.ag-ob-btn--primary:hover { background: color-mix(in srgb, var(--ag-accent) 88%, var(--ag-text-primary)); box-shadow: var(--ag-highlight), var(--ag-shadow-sm); }
.ag-ob-btn--secondary { background: var(--ag-card-bg, #fff); }
.ag-ob-btn--ghost { background: transparent; border-color: transparent; color: var(--ag-text-muted, #6E6E69); }
.ag-ob-btn--ghost:hover { background: var(--ag-hover-bg, #F7F6F4); color: var(--ag-text-primary, #141413); }

/* ---- celebration balloons --------------------------------------------- */
.ag-balloons { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.ag-balloon {
  position: absolute; bottom: -64px; width: 26px; height: 33px; border-radius: 50% 50% 48% 48%;
  opacity: .92; will-change: transform;
  animation: ag-float-up var(--dur, 3.2s) cubic-bezier(.4,0,.7,1) forwards;
}
.ag-balloon::after { /* string */
  content: ''; position: absolute; left: 50%; top: 100%; width: 1px; height: 22px;
  background: var(--ag-border, #ccc); transform: translateX(-50%);
}
@keyframes ag-float-up {
  0%   { transform: translateY(0) translateX(0) rotate(0); opacity: 0; }
  12%  { opacity: .95; }
  100% { transform: translateY(calc(-100vh - 120px)) translateX(var(--drift, 0)) rotate(var(--spin, 8deg)); opacity: .95; }
}
.ag-confetti {
  position: absolute; top: -16px; width: 8px; height: 12px; opacity: .95; will-change: transform;
  animation: ag-confetti-fall var(--dur, 2.4s) ease-in forwards;
}
@keyframes ag-confetti-fall {
  0%   { transform: translateY(0) rotate(0); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(110vh) translateX(var(--drift, 0)) rotate(var(--spin, 540deg)); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ag-em-node, .ag-em-edge, .ag-em-elabel, .ag-onboard-badge { animation: none !important; opacity: 1 !important; }
  .ag-em-edge { opacity: .55 !important; }
  .ag-balloons { display: none !important; }
}