/* views/index2/style.css */
/* Soft, minimal, full-screen graph */

:root{
  --bg: #0b0f14;
  --panel: #10161d;
  --panel-2: #131b24;
  --ink: #e6edf3;
  --muted: #9fb0c2;
  --line: #1e2937;
  --accent: #4cc2ff;
  --accent-2: #60a5fa;
  --good: #22c55e;
  --warn: #f59e0b;
  --bad: #ef4444;

  --radius: 10px;
  --pad: 10px;
  --pad-lg: 14px;

  --tap: 40px;
  --tap-lg: 44px;

  --shadow: 0 8px 20px rgba(0,0,0,0.3);
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  height:100%;
  background:var(--bg);
  color:var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 🔒 Disable page scroll & scroll-chaining */
  overflow:hidden;
  overscroll-behavior: none;
  /* ✅ Prevent iOS from "helpfully" resizing text (which can feel like zoom) */
  -webkit-text-size-adjust: 100%;
}

/* Scroll-lock markers (JS adds these; defensive if styles are overridden) */
html.scroll-locked-root,
body.scroll-locked{
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

/* Global guard:
 * - Kill native text selection / touch callouts so long-press / double-tap
 *   don't escape into Safari's own selection/zoom.
 * - Still allow real editables to opt in if plugins add them later.
 */
body{
  -webkit-touch-callout: none;
}
body,
body *:not(input):not(textarea):not([contenteditable="true"]){
  -webkit-user-select: none;
  user-select: none;
}

#app{
  min-height:100%;
  display:flex;
  flex-direction:column;
  /* avoid scroll chaining to the page from inside children */
  overscroll-behavior: none;
}

/* Header */
header{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  flex-direction:column;
  gap:8px;
  background:linear-gradient(0deg, var(--panel), #0c131a);
  border-bottom:1px solid var(--line);
  padding:8px var(--pad-lg) 10px;
  /* ↑ base padding; add safe-area for standalone on iOS */
  padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  /* prevent swipe scrolling when touching header controls */
  touch-action: none;
}

/* When hidden, give all space to the graph */
body.nav-hidden header{ display:none; }

.status{
  display:flex;
  align-items:center;
  gap:10px;
}
.status-dot{
  width:12px; height:12px; border-radius:50%;
  background:#485765;
  box-shadow: 0 0 0 2px rgba(76,194,255,0.08);
}
.status-dot.ok{ background:var(--good); }

.title-main{ font-size:18px; font-weight:700; letter-spacing:0.2px; }
.title-sub{ font-size:12.5px; color:var(--muted); margin-top:2px; }

.header-right{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}

/* Stats */
.stats-pill{
  padding: 8px 10px;
  border:1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 12.5px;
  background: var(--panel-2);
}

/* Pills / controls */
.pill-group{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px;
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
  /* no accidental scroll on pill groups */
  touch-action: none;
}
.pill-label{
  color:var(--muted);
  font-size:12.5px;
  padding:4px 2px;
}

.pill,
.nav-btn{
  appearance:none;
  background: #0e1620;
  color: var(--ink);
  border: 1px solid var(--line);
  height: var(--tap);
  padding: 0 12px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1;
  /* ✅ prevent double-tap zoom on tappables while preserving taps */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.pill.view-toggle.on,
.nav-btn.on{
  background: #0b1b26;
  border-color: #123447;
  box-shadow: inset 0 0 0 1px rgba(76,194,255,0.12), 0 0 0 2px rgba(76,194,255,0.12);
}

.pill:hover,
.nav-btn:hover{
  border-color:#254056;
}

.pill:disabled,
.nav-btn:disabled{
  opacity:0.6;
  cursor:not-allowed;
}

/* Main / Graph column */
main{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
}

#graph-column{
  flex:1 1 auto;
  min-height:0;
  display:flex;
}

#graph-box{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  background:
    radial-gradient(1000px 600px at 20% 10%, rgba(76,194,255,0.06), transparent 55%),
    radial-gradient(800px 480px at 90% 20%, rgba(96,165,250,0.06), transparent 60%),
    var(--bg);
  overflow:hidden;           /* contain overlays */
  border-top:1px solid var(--line);
  overscroll-behavior: none; /* stop scroll chaining */
}

#graph-hint{
  position:absolute;
  top:8px; left:8px;
  color:var(--muted);
  font-size:12px;
  background: rgba(0,0,0,0.35);
  padding:6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.06);
  z-index:2;
  pointer-events:none;
}

/* NEW: non-intrusive header toggle */
.nav-toggle{
  position:absolute;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  right:8px;
  z-index:60; /* above overlays */
  appearance:none;
  border:1px solid var(--line);
  background: rgba(14,22,32,0.85);
  color: var(--muted);
  border-radius:8px;
  padding:4px 8px;
  font-size:12px;
  line-height:1;
  pointer-events:auto;
  box-shadow: var(--shadow);
  touch-action: none; /* don’t scroll page when dragging near it */
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle:hover{ border-color:#254056; color:var(--ink); }
.nav-toggle.on{
  background:#0b1b26;
  border-color:#123447;
  box-shadow: inset 0 0 0 1px rgba(76,194,255,0.12), 0 0 0 2px rgba(76,194,255,0.12);
}

/* SVG fills box; turn off browser gestures so pan/zoom are clean */
#graph-svg{
  width:100%;
  height:100%;
  display:block;
  touch-action: none;
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
}
#graph-svg:active{ cursor: grabbing; }

/* NEW: while a touch gesture is active on a graph node, suppress
   iOS text selection / touch-callout so long-press stays ours.
   (Kept for compatibility; global body rules already enforce this.) */
body.no-touch-select,
body.no-touch-select *{
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  user-select: none;
}

/* Edges & nodes */
.edge{
  stroke:#1f2937;
  stroke-width:1.2;
  pointer-events: none;
}

.edge.selected-edge{
  stroke-width: 2.4;
  stroke-dasharray: none;
}

.edge.lineage-edge{
  stroke: var(--warn);
  stroke-width: 2.0;
  stroke-dasharray: none;
}

.node-group.hovered circle{
  filter: drop-shadow(0 0 6px rgba(96,165,250,0.35));
}

.node-group .node-label{
  fill: #c9d6e2;
  font-size: 12.5px;
  user-select: none;
}

.node-group.selected .node-label{
  fill:#e5f0ff;
  font-weight:500;
}

/* Hover / preview overlay root */
.graph-overlay-root{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:5;
}

/* Hover preview panels */
.hover-panel{
  position:absolute;
  min-width:220px;
  min-height:60px; /* allow sensible resize min-height */
  background:rgba(15,23,35,0.96);
  border-radius:10px;
  border:1px solid rgba(148,163,184,0.4);
  box-shadow: var(--shadow);
  color:var(--ink);
  font-size:12px;
  pointer-events:auto;
  overflow:hidden;
  /* prevent page scroll when dragging the panel itself */
  touch-action: none;
}

.hover-panel.pinned{
  border-color:var(--accent-2);
  box-shadow: 0 12px 28px rgba(0,0,0,0.55);
}

/* NEW: visual hint when a panel is Live-bound */
.hover-panel.live{
  border-color: var(--good);
}

.hover-panel.minimized .hover-panel-body{
  display:none;
}

.hover-panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  padding:6px 8px;
  background:linear-gradient(90deg,rgba(15,23,35,0.98),rgba(15,23,35,0.92));
  cursor:grab;
}

/* NEW: make header/resizer proper touch targets for iOS dragging/resizing */
.hover-panel-header,
.hover-panel-resizer{
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: none; /* allow Pointer Events to deliver continuous moves */
}

.hover-panel-header:active{
  cursor:grabbing;
}

.hover-panel-origin{
  border:none;
  background:rgba(148,163,184,0.15);
  color:#e5e7eb;
  padding:2px 6px;
  border-radius:6px;
  font-size:11px;
  cursor:pointer;
}
.hover-panel-origin:hover{
  background:rgba(148,163,184,0.25);
}

.hover-panel-title{
  flex:1 1 auto;
  min-width:0;
  font-size:12.5px;
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.hover-panel-buttons{
  display:flex;
  gap:4px;
}

.hover-panel-btn{
  border:none;
  padding:2px 5px;
  border-radius:6px;
  background:transparent;
  color:var(--muted);
  font-size:11px;
  cursor:pointer;
  /* ✅ remove double-tap zoom on button taps */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.hover-panel-btn:hover{
  background:rgba(148,163,184,0.18);
  color:var(--ink);
}

/* NEW: active state for toggle-like buttons (e.g., Live/Highlight) */
.hover-panel-btn.on{
  background:rgba(148,163,184,0.18);
  color:var(--ink);
  border:1px solid rgba(148,163,184,0.35);
}

/* Make body flex so preview can expand when needed */
.hover-panel-body{
  padding:6px 8px 8px;
  display:block;
}

.hover-panel-meta{
  font-size:11px;
  color:var(--muted);
  margin-bottom:4px;
}

.hover-panel-preview{
  max-height:220px;
  overflow:auto;
  border-radius:6px;
  background:#020617;
  border:1px solid rgba(15,23,42,0.8);
  padding:6px 8px;
  /* ✅ allow native scroll but forbid double-tap zoom */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y;
}

.hover-panel-preview pre{
  margin:0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:11px;
  white-space:pre-wrap;
  word-break:break-word;
}

.hover-panel-preview img,
.hover-panel-preview video{
  max-width:100%;
  border-radius:6px;
  display:block;
}

.hover-panel-preview audio{
  width:100%;
}

.hover-panel-footer{
  margin-top:6px;
  display:flex;
  justify-content:flex-end;
}

.hover-panel-footer button{
  border:none;
  padding:2px 6px;
  border-radius:6px;
  font-size:11px;
  background:#0f172a;
  color:var(--ink);
  cursor:pointer;
  border:1px solid rgba(148,163,184,0.4);
  /* ✅ remove double-tap zoom on footer buttons */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.hover-panel-footer button:hover{
  border-color:var(--accent-2);
}

/* Branch chips (per-anchor hex badge) */
.branch-chip{
  position:absolute;
  pointer-events:auto;
  z-index:6;
  font-size:11px;
  padding:2px 6px;
  border-radius:6px;
  border:1px solid currentColor;
  background:rgba(2, 6, 23, 0.75);
  user-select:none;
  backdrop-filter: blur(6px);
  cursor:pointer;
  touch-action: none; /* avoid page scroll when dragging around chips */
}

/* NEW: pinned panel resizer (bottom-right corner) */
.hover-panel-resizer{
  position:absolute;
  right:4px;
  bottom:4px;
  width:12px;
  height:12px;
  cursor:nwse-resize;
  background:rgba(148,163,184,0.15);
  border:1px solid rgba(148,163,184,0.35);
  border-radius:3px;
}
.hover-panel-resizer:hover{
  background:rgba(148,163,184,0.25);
}

/* ===== NEW: Content-only mode (double-tap on pinned panel) ===== */
.hover-panel.content-only .hover-panel-header{ display:none; }
.hover-panel.content-only .hover-panel-meta{ display:none; }
.hover-panel.content-only .hover-panel-footer{ display:none; }

/* Let the preview take the entire panel */
.hover-panel.content-only .hover-panel-body{
  display:flex;
  flex-direction:column;
  height:100%;
  padding:8px; /* slight breathing room */
}

.hover-panel.content-only .hover-panel-preview{
  flex:1 1 auto;
  max-height:none;
  height:100%;
  overflow:auto;
}

/* ===== NEW: Allow native text selection inside PINNED panels ===== */
.hover-panel.pinned .hover-panel-preview,
.hover-panel.pinned .hover-panel-preview *,
.hover-panel.pinned .hover-panel-meta,
.hover-panel.pinned .hover-panel-meta *,
.hover-panel.pinned .hover-panel-title,
.hover-panel.pinned .hover-panel-footer,
.hover-panel.pinned .hover-panel-footer *{
  -webkit-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
}

/* ===== NEW: Content-only escape button ===== */
.hover-panel-escape{
  position:absolute;
  top:6px;
  left:50%;
  transform: translateX(-50%);
  z-index:7; /* above chips */
  display:none;
  background: rgba(2,6,23,0.88);
  color:#e5e7eb;
  border:1px solid rgba(148,163,184,0.6);
  border-radius:999px;
  padding:6px 12px;
  font-size:12px;
  line-height:1;
  box-shadow: var(--shadow);
  cursor:pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.hover-panel-escape.show{ display:inline-flex; }
.hover-panel-escape:hover{
  border-color:#90a2b6;
  color:#ffffff;
}

/* ===== NEW: Content-only drag handle (appears with Restore) ===== */
.hover-panel-drag{
  position:absolute;
  top:6px;
  left: calc(50% - 84px); /* to the left of the Restore pill */
  z-index:7;
  display:none;
  background: rgba(2,6,23,0.88);
  color:#e5e7eb;
  border:1px solid rgba(148,163,184,0.6);
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  line-height:1;
  box-shadow: var(--shadow);
  cursor:grab;
  touch-action: none; /* drag without scrolling */
  -webkit-tap-highlight-color: transparent;
}
.hover-panel-drag.show{ display:inline-flex; }
.hover-panel-drag:active{ cursor:grabbing; }

/* ===== NEW: Content-only Copy pill (appears to the RIGHT of Restore) ===== */
.hover-panel-copy{
  position:absolute;
  top:6px;
  left: calc(50% + 84px); /* to the right of the Restore pill */
  z-index:7;
  display:none;
  background: rgba(2,6,23,0.88);
  color:#e5e7eb;
  border:1px solid rgba(148,163,184,0.6);
  border-radius:999px;
  padding:6px 12px;
  font-size:12px;
  line-height:1;
  box-shadow: var(--shadow);
  cursor:pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.hover-panel-copy.show{ display:inline-flex; }
.hover-panel-copy:hover{
  border-color:#90a2b6;
  color:#ffffff;
}

/* Small-screen tweaks */
@media (max-width: 420px){
  :root{ --tap: 44px; }
  .pill,
  .nav-btn{
    font-size:15px;
  }
}