/* gogoga-outline — Codex-style heading rail with a dock wave.
   At rest: identical short dashes. On hover the JS drives a gaussian
   wave (inline width/height per dash); the short transitions below
   give the motion its liquid trailing feel. */

.gg-outline {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 12;
  display: flex;
  max-height: 76%;
  pointer-events: none;
}

.gg-outline[data-side="right"] {
  right: 6px;
  flex-direction: row-reverse;
}

.gg-outline[data-side="left"] {
  left: 6px;
}

.gg-outline-empty {
  display: none;
}

.gg-outline-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 6px;
  pointer-events: auto;
}

/* Dashes anchor to the content edge, growing inward like Codex */
.gg-outline[data-side="right"] .gg-outline-list { align-items: flex-end; }
.gg-outline[data-side="left"] .gg-outline-list { align-items: flex-start; }

/* Kill Obsidian's default <button> chrome explicitly; `all: unset`
   alone loses to core's button selectors. */
.gg-outline .gg-outline-item,
.gg-outline .gg-outline-item:hover,
.gg-outline .gg-outline-item:focus {
  all: unset;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 8px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  cursor: pointer;
}

.gg-outline[data-side="right"] .gg-outline-item { justify-content: flex-end; }

/* Uniform 12px dashes at rest; JS overrides width/height inline
   while the wave is live. The transition is what makes the wave
   feel liquid instead of jittery. */
.gg-outline-tick {
  flex: 0 0 auto;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--text-faint) 75%, transparent);
  transition: width 140ms ease-out, height 140ms ease-out,
    background-color 160ms ease;
}

/* Names the dash for screen readers without an aria-label, which
   Obsidian would turn into a tooltip */
.gg-outline-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Current section keeps its accent color at rest and in the wave */
.gg-outline-item.is-active .gg-outline-tick {
  background: var(--text-accent);
}

/* The crest — the dash nearest the cursor — goes dark */
.gg-outline-item.is-crest .gg-outline-tick {
  background: var(--text-normal);
}

.gg-outline-item.is-active.is-crest .gg-outline-tick {
  background: var(--text-accent);
}

/* ---------------- Preview card ---------------- */
.gg-outline-preview {
  position: absolute;
  width: 300px;
  padding: 12px 14px;
  border: 1px solid var(--gg-popover-border, var(--background-modifier-border));
  border-radius: var(--radius-l, 10px);
  background: var(--gg-popover-bg, var(--background-primary));
  box-shadow: var(--shadow-l, 0 8px 24px rgba(0, 0, 0, 0.14));
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%);
  /* `top` transitions too, so the card slides along with the crest */
  transition: opacity 150ms ease, visibility 150ms,
    top 200ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.gg-outline[data-side="right"] .gg-outline-preview {
  right: calc(100% + 12px);
}

.gg-outline[data-side="left"] .gg-outline-preview {
  left: calc(100% + 12px);
}

.gg-outline-has-preview .gg-outline-preview {
  opacity: 1;
  visibility: visible;
}

.gg-outline-preview-title {
  margin-bottom: 5px;
  color: var(--text-normal);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.gg-outline-preview-body {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.55;
}

/* ---------------- Global outline panel ----------------
   Resting on the rail unfolds this beside it. Deliberately a plain
   flyout: the rail does not move, so nothing shifts out from under
   the cursor and a 50-heading note behaves like a 5-heading one. */
.gg-outline-panel {
  position: absolute;
  top: 50%;
  width: var(--gg-panel-width, 240px);
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--gg-popover-border, var(--background-modifier-border));
  border-radius: var(--radius-l, 10px);
  background: var(--gg-popover-bg, var(--background-primary));
  box-shadow: var(--shadow-l, 0 8px 24px rgba(0, 0, 0, 0.14));
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%) translateX(var(--gg-panel-slide, 8px));
  transition: opacity 180ms ease, visibility 180ms,
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  outline: none;
}

/* Slides out of the rail toward the text, so the motion reads as the
   panel coming from the dashes rather than arriving from off-screen */
.gg-outline[data-side="right"] .gg-outline-panel {
  right: calc(100% + 8px);
  --gg-panel-slide: 8px;
  --gg-row-slide: -4px;
}

.gg-outline[data-side="left"] .gg-outline-panel {
  left: calc(100% + 8px);
  --gg-panel-slide: -8px;
  --gg-row-slide: 4px;
}

.gg-outline-is-expanded .gg-outline-panel {
  opacity: 1;
  visibility: visible;
  /* --gg-panel-shift keeps a clicked row in place while branches fold */
  transform: translateY(calc(-50% + var(--gg-panel-shift, 0px))) translateX(0);
  pointer-events: auto;
}

/* Shifted to keep a clicked row in place: no slide, or it drifts under
   the pointer between the two clicks of a double click */
.gg-outline-panel.is-anchored { transition: opacity 180ms ease, visibility 180ms; }

.gg-outline-panel-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Chrome reset only — the :hover/:focus copies are what beat core's
   button selectors. Everything visual lives one notch more specific
   below, so `all: unset` can never claw it back on hover. */
.gg-outline-panel .gg-outline-row,
.gg-outline-panel .gg-outline-row:hover,
.gg-outline-panel .gg-outline-row:focus {
  all: unset;
}

.gg-outline .gg-outline-panel .gg-outline-row {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 4px 8px;
  border-radius: var(--radius-s, 4px);
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.45;
  text-align: start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  opacity: 0;
  transform: translateX(var(--gg-row-slide, -4px));
  transition: opacity 160ms ease, transform 160ms ease,
    background-color 120ms ease, color 120ms ease;
}

/* Top-level headings read a shade stronger than their children —
   the indent alone is thin evidence of hierarchy on one line */
.gg-outline .gg-outline-panel .gg-outline-row[data-depth="0"] {
  color: var(--text-normal);
}

/* Rows fade in from the top down; the cap keeps a long outline from
   trailing off into a visibly slow reveal */
.gg-outline-is-expanded .gg-outline-panel .gg-outline-row {
  opacity: 1;
  transform: none;
  transition-delay: var(--gg-row-delay, 0ms);
}

/* Driven by JS, not :hover — the rail scrubs this same highlight
   while the panel is open */
.gg-outline .gg-outline-panel .gg-outline-row.is-focus {
  background-color: var(--background-modifier-hover);
  color: var(--text-normal);
}

.gg-outline .gg-outline-panel .gg-outline-row.is-active {
  color: var(--text-accent);
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  .gg-outline-tick,
  .gg-outline-preview,
  .gg-outline-panel,
  .gg-outline .gg-outline-panel .gg-outline-row {
    transition: none;
  }
  .gg-outline .gg-outline-panel .gg-outline-row {
    transform: none;
  }
}

/* ---------------- Branch folding, formulas, full titles ---------------- */

/* Rows hold an arrow slot and the title. The arrow only shows with
   "Expand only the current section" on; without it the slot collapses
   to nothing, so the panel looks exactly as before. */
.gg-outline .gg-outline-panel .gg-outline-row {
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.gg-outline-row-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gg-outline-arrow {
  display: none;
  flex: none;
  width: 12px;
  margin-inline-start: -4px;
  text-align: center;
  color: var(--text-faint);
  font-size: 9px;
  border-radius: 3px;
}
.gg-outline-folding .gg-outline-arrow { display: inline-block; }
.gg-outline-folding .gg-outline-row.has-children .gg-outline-arrow::before {
  content: "▸";
  display: inline-block;
  transition: transform 120ms ease;
}
.gg-outline-folding .gg-outline-row.has-children.is-open .gg-outline-arrow::before { transform: rotate(90deg); }
.gg-outline-folding .gg-outline-row.has-children .gg-outline-arrow:hover {
  color: var(--text-normal);
  background-color: var(--background-modifier-hover);
}
.gg-outline .gg-outline-panel .gg-outline-row.is-folded-away { display: none; }

/* "Show full titles": long headings wrap instead of trailing off */
.gg-outline-wrap .gg-outline-panel .gg-outline-row-text {
  white-space: normal;
  overflow-wrap: anywhere;
}
.gg-outline.gg-outline-wrap .gg-outline-panel .gg-outline-row { white-space: normal; }

.gg-outline-row-text mjx-container,
.gg-outline-preview-title mjx-container { font-size: 0.95em; }

/* ---------------- 完整大纲常驻展开（设置里打开） ----------------
   面板一直开着，贴在笔记边上占满高度，代替导轨；正文让出面板的宽度 */
.gg-outline.gg-outline-docked {
  /* 有的主题（gogoga）标题栏浮在正文上面：让开它 */
  top: calc(var(--header-height, 40px) + 8px);
  bottom: 12px;
  transform: none;
  max-height: none;
  width: var(--gg-panel-width, 240px);
}
.gg-outline.gg-outline-docked[data-side="right"] { right: 8px; }
.gg-outline.gg-outline-docked[data-side="left"] { left: 8px; }
.gg-outline-docked .gg-outline-list,
.gg-outline-docked .gg-outline-preview { display: none; }
.gg-outline.gg-outline-docked .gg-outline-panel {
  top: 0;
  left: 0;
  right: 0;
  max-height: 100%;
  border-color: transparent;
  border-inline-start-color: var(--background-modifier-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  transition: none;
}
.gg-outline-docked .gg-outline-panel .gg-outline-row { transition-delay: 0ms; }
.gg-outline.gg-outline-docked[data-side="left"] .gg-outline-panel {
  border-inline-start-color: transparent;
  border-inline-end-color: var(--background-modifier-border);
}
.gg-outline-docked-host[data-gg-outline-side="right"] .markdown-source-view.mod-cm6 .cm-scroller,
.gg-outline-docked-host[data-gg-outline-side="right"] .markdown-preview-view {
  padding-right: calc(var(--gg-panel-width, 240px) + 24px);
}
.gg-outline-docked-host[data-gg-outline-side="left"] .markdown-source-view.mod-cm6 .cm-scroller,
.gg-outline-docked-host[data-gg-outline-side="left"] .markdown-preview-view {
  padding-left: calc(var(--gg-panel-width, 240px) + 24px);
}