/* =====================================================
   BlackNode Memory Graph (page-specific)
   Lightweight SVG/HTML constellation
   ===================================================== */

.mg-body {
  min-height: 100vh;
  max-width: 100vw;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  font-family: var(--bn-font-body);
}

/* ============ TOP BAR ============ */
.mg-topbar {
  position: relative;
  z-index: var(--bn-z-elevated);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid var(--bn-border-soft);
  background: rgba(7, 8, 10, 0.6);
  backdrop-filter: var(--bn-glass-blur);
  -webkit-backdrop-filter: var(--bn-glass-blur);
}

.mg-topbar__left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.mg-topbar__logo {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--bn-r);
  background: var(--bn-glass-1);
  border: 1px solid var(--bn-border);
  text-decoration: none;
  transition: all var(--bn-dur) var(--bn-ease);
}
.mg-topbar__logo:hover {
  transform: scale(1.06);
  border-color: var(--bn-accent-border);
  box-shadow: 0 0 24px rgba(0,255,136,0.15);
}

.mg-topbar__titles { line-height: 1.2; }
.mg-topbar__title {
  font-family: var(--bn-font-display);
  font-weight: 600;
  font-size: var(--bn-text-base);
  letter-spacing: var(--bn-tracking-tight);
  margin: 0;
}
.mg-topbar__sub {
  font-size: var(--bn-text-xs);
  color: var(--bn-ink-tertiary);
  margin-top: 2px;
}

.mg-topbar__right {
  display: flex;
  align-items: center;
  gap: var(--bn-s-2);
}

.mg-topbar__nav {
  display: flex;
  gap: var(--bn-s-5);
  flex: 1;
  justify-content: center;
}
.mg-topbar__nav a {
  color: var(--bn-ink-secondary);
  text-decoration: none;
  font-size: var(--bn-text-sm);
  font-weight: 500;
  transition: color var(--bn-dur-fast) var(--bn-ease);
}
.mg-topbar__nav a:hover { color: var(--bn-ink-primary); }
.mg-topbar__nav a.is-active { color: var(--bn-accent-strong); }  /* AA on light page */
@media (max-width: 760px) {
  .mg-topbar__nav { display: none; }
}

/* ============ STATUS PILL (top center) ============ */
.mg-status {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--bn-z-sticky);
  pointer-events: none;
}

/* ============ STAGE / CONSTELLATION ============ */
.mg-stage {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(800px 600px at 50% 50%, rgba(0,255,136,0.04), transparent 60%),
    radial-gradient(1200px 800px at 20% 80%, rgba(76,201,240,0.03), transparent 60%);
}

.mg-edges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.mg-nodes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

/* center title overlay (visible only briefly during load) */
.mg-center-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 1;
  pointer-events: none;
  opacity: 0.4;
  transition: opacity var(--bn-dur-slow) var(--bn-ease);
}
.mg-center-title.is-hidden { opacity: 0; }
.mg-center-title h2 {
  font-family: var(--bn-font-display);
  font-weight: 600;
  font-size: var(--bn-text-2xl);
  letter-spacing: var(--bn-tracking-tight);
  margin: 0 0 4px 0;
  color: var(--bn-ink-secondary);
}
.mg-center-title p {
  margin: 0;
  font-size: var(--bn-text-sm);
  color: var(--bn-ink-tertiary);
}

/* ============ NODE BASE ============ */
.mg-node {
  position: absolute;
  transform: translate(-50%, -50%);
  transition:
    transform var(--bn-dur-slow) var(--bn-ease-out),
    opacity var(--bn-dur-slow) var(--bn-ease);
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.mg-node.is-dragging {
  cursor: grabbing !important;
  transition: none !important;
  filter: drop-shadow(0 8px 24px rgba(0,255,136,0.3));
}
.mg-node.is-loading {
  opacity: 0;
}
.mg-node.is-loaded {
  opacity: 1;
}
/* Subtle hover invite for draggable memory pills */
.mg-node--mem:hover {
  transform: translate(-50%, -50%) scale(1.04);
}
/* Spring-back animation on drop */
.mg-node.is-dropping {
  transition: left 250ms cubic-bezier(0.34, 1.56, 0.64, 1),
              top 250ms cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
/* Drop target highlight when dragging near a category */
.mg-node--cat.is-drop-target {
  background: var(--bn-accent-soft);
  border-color: var(--bn-accent-border);
  box-shadow: 0 0 32px rgba(0,255,136,0.5), 0 0 64px rgba(0,255,136,0.25);
  transform: translate(-50%, -50%) scale(1.15);
}
.mg-drop-tooltip {
  position: absolute;
  pointer-events: none;
  z-index: 60;
  background: var(--bn-accent);
  color: var(--bn-ink-on-accent);
  font-size: var(--bn-text-xs);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--bn-r-full);
  transform: translate(-50%, calc(-100% - 8px));
  white-space: nowrap;
  box-shadow: var(--bn-shadow-md);
}

/* ROOT (user avatar at center) */
.mg-node--root {
  width: 88px; height: 88px;
  display: grid;
  place-items: center;
  border-radius: var(--bn-r-full);
  background:
    radial-gradient(circle, rgba(0,255,136,0.12), rgba(76,201,240,0.06) 60%, transparent),
    var(--bn-bg-surface-1);
  border: 1px solid var(--bn-accent-border);
  font-family: var(--bn-font-display);
  font-weight: 700;
  font-size: 32px;
  color: var(--bn-accent);
  cursor: default;
  box-shadow:
    var(--bn-glow-accent),
    inset 0 0 30px rgba(0,255,136,0.06);
  animation: mg-pulse-root 3s ease-in-out infinite;
}
@keyframes mg-pulse-root {
  0%, 100% { box-shadow: var(--bn-glow-accent), inset 0 0 30px rgba(0,255,136,0.06); }
  50%      { box-shadow: 0 0 64px rgba(0,255,136,0.4), 0 0 128px rgba(0,255,136,0.2), inset 0 0 40px rgba(0,255,136,0.1); }
}

/* CATEGORY nodes (orbit 1) */
.mg-node--cat {
  width: 56px; height: 56px;
  display: grid;
  place-items: center;
  border-radius: var(--bn-r-full);
  background: var(--bn-glass-2);
  backdrop-filter: var(--bn-glass-blur);
  -webkit-backdrop-filter: var(--bn-glass-blur);
  border: 1px solid var(--bn-border-strong);
  font-size: 22px;
  box-shadow: var(--bn-shadow-md), var(--bn-shadow-inset);
  transition: all var(--bn-dur) var(--bn-ease);
}
.mg-node--cat:hover {
  background: var(--bn-accent-soft);
  border-color: var(--bn-accent-border);
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: var(--bn-shadow-lg), var(--bn-glow-accent);
}
.mg-node--cat__label {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--bn-text-xs);
  font-weight: 600;
  color: var(--bn-ink-secondary);
  white-space: nowrap;
  letter-spacing: 0.02em;
  pointer-events: none;
}
.mg-node--cat:hover .mg-node--cat__label { color: var(--bn-accent); }
.mg-node--cat__count {
  position: absolute;
  bottom: -3px; right: -3px;
  width: 18px; height: 18px;
  background: var(--bn-accent);
  color: var(--bn-ink-on-accent);
  border-radius: var(--bn-r-full);
  display: grid; place-items: center;
  font-size: 10px;
  font-weight: 700;
  border: 2px solid var(--bn-bg-page);
}

/* MEMORY PILLS (orbit 2) */
.mg-node--mem {
  padding: 8px 14px;
  background: var(--bn-glass-2);
  backdrop-filter: var(--bn-glass-blur);
  -webkit-backdrop-filter: var(--bn-glass-blur);
  border: 1px solid var(--bn-border);
  border-radius: var(--bn-r-full);
  font-size: var(--bn-text-xs);
  font-weight: 500;
  color: var(--bn-ink-primary);
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all var(--bn-dur) var(--bn-ease);
  box-shadow: var(--bn-shadow-sm);
}
.mg-node--mem:hover {
  background: var(--bn-glass-3);
  border-color: var(--bn-accent-border);
  color: var(--bn-accent);
  box-shadow: var(--bn-shadow-md), 0 0 16px rgba(0,255,136,0.15);
}

.mg-node--mem__icon {
  margin-right: 6px;
  vertical-align: -2px;
  color: var(--bn-ink-tertiary);
}

/* INFERRED memories have softer style */
.mg-node--mem.is-inferred {
  background: var(--bn-glass-1);
  border-style: dashed;
  color: var(--bn-ink-secondary);
}

/* ASSET nodes (image thumbnail) */
.mg-node--asset {
  width: 60px; height: 60px;
  border-radius: var(--bn-r-md);
  background: var(--bn-bg-surface-2);
  border: 1px solid var(--bn-border-strong);
  background-size: cover;
  background-position: center;
  box-shadow: var(--bn-shadow);
  transition: transform var(--bn-dur) var(--bn-ease), box-shadow var(--bn-dur) var(--bn-ease);
}
.mg-node--asset:hover {
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: var(--bn-shadow-lg);
}

/* ADD memory CTA node */
.mg-node--add {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: var(--bn-r-full);
  background: var(--bn-accent);
  color: var(--bn-ink-on-accent);
  box-shadow: var(--bn-glow-accent), var(--bn-shadow-md), var(--bn-shadow-inset-strong);
  transition: all var(--bn-dur) var(--bn-ease);
}
.mg-node--add:hover {
  transform: translate(-50%, -50%) scale(1.15);
  background: var(--bn-accent-hover);
}

/* SKELETON placeholder nodes (loading) */
.mg-node--skeleton {
  width: 42px; height: 42px;
  border-radius: var(--bn-r-full);
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  animation: bn-shimmer 1.5s ease infinite;
  border: 1px solid var(--bn-border-soft);
  pointer-events: none;
}

/* ============ EDGES (SVG paths) ============ */
.mg-edge {
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 1;
  fill: none;
  transition: stroke 0.3s ease;
}
.mg-edge--cat {
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 1.2;
}
.mg-edge--mem {
  stroke: rgba(255, 255, 255, 0.06);
  stroke-dasharray: 2 4;
}

/* travelling dot on edges */
.mg-edge-dot {
  fill: var(--bn-accent);
  filter: drop-shadow(0 0 4px var(--bn-accent));
  r: 1.8;
}

/* ============ COMPOSER (bottom) ============ */
.mg-composer-wrap {
  padding: 16px 24px 24px;
  background: linear-gradient(to top, rgba(7,8,10,0.92), transparent);
  position: relative;
  z-index: var(--bn-z-elevated);
}
.mg-composer {
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
}
.mg-composer__field {
  font-size: var(--bn-text-base);
}
.mg-composer__hint {
  text-align: center;
  font-size: var(--bn-text-xs);
  color: var(--bn-ink-tertiary);
  margin: 10px 0 0;
}
.mg-composer__hint kbd { margin: 0 2px; }

/* ============ CATEGORY POPOVER ============ */
.mg-cat-popover {
  position: fixed;
  background: var(--bn-bg-surface-3);
  border: 1px solid var(--bn-border-strong);
  border-radius: var(--bn-r-md);
  padding: 8px;
  box-shadow: var(--bn-shadow-lg);
  z-index: var(--bn-z-overlay);
  animation: bn-pop var(--bn-dur) var(--bn-ease-spring);
  min-width: 220px;
}
.mg-cat-popover[hidden] { display: none; }
.mg-cat-popover__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: none;
  background: transparent;
  width: 100%;
  border-radius: var(--bn-r-sm);
  color: var(--bn-ink-primary);
  font-family: var(--bn-font-body);
  font-size: var(--bn-text-sm);
  text-align: left;
  cursor: pointer;
  transition: background var(--bn-dur-fast) var(--bn-ease);
}
.mg-cat-popover__item:hover { background: var(--bn-glass-2); }
.mg-cat-popover__icon {
  font-size: 16px;
  width: 22px;
  text-align: center;
}

/* ============ SIGN-IN BANNER (replaces blocking gate) ============ */
.mg-signin-gate {
  position: fixed;
  /* Pushed further down so it sits above the composer but doesn't cover the
     outer ring of memory pills on shorter (laptop) viewports. */
  bottom: 140px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--bn-z-elevated);
  animation: bn-fade-in var(--bn-dur-slow) var(--bn-ease);
  /* Critical: wrapper itself must NOT capture clicks, otherwise the banner's
     bounding box (which is wider than the card) silently eats clicks on the
     pills that sit just outside the card. Only the card receives clicks. */
  pointer-events: none;
}
.mg-signin-gate[hidden] { display: none; }
.mg-signin-gate__card {
  position: relative;
  max-width: 480px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  /* Re-enable clicks on the card itself (Sign in button + dismiss X). */
  pointer-events: auto;
}
/* Dismiss button (X in top-right of card) */
.mg-signin-gate__dismiss {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--bn-ink-tertiary);
  font-size: 18px;
  line-height: 1;
  padding: 0;
  transition: background var(--bn-dur-fast) var(--bn-ease), color var(--bn-dur-fast) var(--bn-ease);
}
.mg-signin-gate__dismiss:hover {
  background: var(--bn-glass-2);
  color: var(--bn-ink-primary);
}
.mg-signin-gate__card h2 {
  font-family: var(--bn-font-display);
  font-size: var(--bn-text-base);
  font-weight: 600;
  letter-spacing: var(--bn-tracking-tight);
  margin: 0 0 2px;
  text-align: left;
}
.mg-signin-gate__card p {
  color: var(--bn-ink-tertiary);
  margin: 0;
  font-size: var(--bn-text-xs);
  line-height: 1.4;
}
.mg-signin-gate__card > [data-lucide] {
  width: 28px;
  height: 28px;
}

/* ============ EDIT MODAL ============ */
.mg-modal-edit__cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--bn-text-xs);
  color: var(--bn-ink-tertiary);
  padding: 4px 10px;
  background: var(--bn-glass-1);
  border-radius: var(--bn-r-full);
  margin-bottom: var(--bn-s-3);
}
.mg-modal-edit__meta {
  display: flex;
  gap: 12px;
  margin-top: var(--bn-s-3);
  font-size: var(--bn-text-xs);
  color: var(--bn-ink-tertiary);
}

/* ============ SEARCH MODAL ============ */
.mg-search-modal { max-width: 560px; }
.mg-search-results {
  max-height: 320px;
  overflow-y: auto;
  margin-top: var(--bn-s-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mg-search-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--bn-r-sm);
  text-align: left;
  cursor: pointer;
  font-family: var(--bn-font-body);
  font-size: var(--bn-text-sm);
  color: var(--bn-ink-primary);
  transition: background var(--bn-dur-fast) var(--bn-ease), border-color var(--bn-dur-fast) var(--bn-ease);
}
.mg-search-row:hover, .mg-search-row:focus-visible {
  background: var(--bn-glass-2);
  border-color: var(--bn-border-strong);
}
.mg-search-row__cat {
  font-size: var(--bn-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bn-ink-tertiary);
}
.mg-search-row__label { color: var(--bn-ink-primary); }
.mg-search-empty {
  text-align: center;
  padding: 24px;
  color: var(--bn-ink-tertiary);
  font-size: var(--bn-text-sm);
}

/* Keyboard focus ring on draggable nodes (a11y) */
.mg-node:focus-visible {
  outline: 2px solid var(--bn-accent);
  outline-offset: 3px;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 760px) {
  .mg-topbar { padding: 12px 16px; gap: 8px; }
  .mg-topbar__sub { display: none; }
  .mg-topbar__title { font-size: var(--bn-text-sm); }
  .mg-topbar__right { gap: 4px; }
  .mg-topbar__right .bn-btn span,
  .mg-topbar__right .bn-btn kbd { display: none; }
  .mg-topbar__right .bn-btn { padding: 8px; }
  .mg-node--cat { width: 48px; height: 48px; font-size: 18px; }
  .mg-node--cat__label { font-size: 10px; }
  .mg-node--mem {
    font-size: 11px;
    padding: 6px 10px;
    /* tighter cap so adjacent pills in the same category don't visually collide */
    max-width: 120px;
  }
  .mg-composer-wrap { padding: 12px 16px 20px; }
  /* On mobile the signin gate becomes a sticky bottom card pinned just above
     the composer — much smaller surface so it can't cover pills. */
  .mg-signin-gate {
    left: 12px;
    right: 12px;
    transform: none;
    bottom: 120px;
  }
  .mg-signin-gate__card { padding: 12px 14px; gap: 10px; }
}
/* On very short viewports (typical laptop 768/810 with bookmark bar) shrink
   the gate so the bottom-most ring of memory pills stays clear. */
@media (max-height: 720px) {
  .mg-signin-gate { bottom: 130px; }
  .mg-signin-gate__card { padding: 10px 16px; max-width: 380px; }
  .mg-signin-gate__card h2 { font-size: 13px; }
  .mg-signin-gate__card p { font-size: 11px; }
}
@media (max-width: 460px) {
  /* On the smallest screens, drop the Re-arrange button entirely so the topbar
     fits without horizontal scroll. Re-arrange is non-essential on mobile. */
  .mg-topbar #mgRearrangeBtn { display: none; }
}