styles.css

/* Graph Insight styles */
.graph-insight-container {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
	background: var(--background-primary);
}

.graph-insight-tooltip {
	position: absolute;
	z-index: 10;
	pointer-events: none;
	background: var(--background-secondary);
	color: var(--text-normal);
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-s);
	padding: 4px 8px;
	font-size: var(--font-ui-small);
	max-width: 360px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.graph-insight-panel {
	position: absolute;
	/* Below the full-width search row. */
	top: var(--graph-topbar-bottom, 72px);
	left: 12px;
	z-index: 10;
	min-width: 220px;
	background: color-mix(in srgb, var(--background-secondary) 85%, transparent);
	backdrop-filter: blur(8px);
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-s);
	font-size: var(--font-ui-small);
	color: var(--text-normal);
}

.graph-insight-panel-header {
	display: flex;
	width: 100%;
	height: auto;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--text-normal);
	text-align: left;
	justify-content: space-between;
	align-items: center;
	padding: 10px 12px;
	cursor: pointer;
	font-weight: 600;
	user-select: none;
}

.graph-insight-panel-toggle {
	color: var(--text-muted);
}

.graph-insight-panel-body {
	padding: 4px 12px 12px;
}

.graph-insight-panel-body.is-hidden {
	display: none;
}

.graph-insight-panel-section-title {
	margin: 8px 0 4px;
	font-size: var(--font-ui-smaller);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-muted);
}

.graph-insight-panel-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	margin: 6px 0 2px;
	font-size: var(--font-ui-smaller);
}

.graph-insight-panel-row select {
	max-width: 150px;
	font-size: var(--font-ui-smaller);
	height: auto;
	padding: 2px 18px 2px 6px;
}

.graph-insight-legend {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 10;
	max-width: 220px;
	padding: 8px 10px;
	background: color-mix(in srgb, var(--background-secondary) 85%, transparent);
	backdrop-filter: blur(8px);
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-s);
	font-size: var(--font-ui-smaller);
	color: var(--text-muted);
}

.graph-insight-legend-title {
	font-weight: 600;
	color: var(--text-normal);
	margin-bottom: 4px;
}

.graph-insight-legend-bar {
	height: 8px;
	border-radius: 4px;
	margin: 4px 0 2px;
}

.graph-insight-legend-range {
	display: flex;
	justify-content: space-between;
}

.graph-insight-legend-category {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 2px 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.graph-insight-legend-swatch {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}

.graph-insight-legend-more {
	margin-top: 2px;
	font-style: italic;
}

.graph-insight-tooltip-title {
	font-weight: 600;
}

.graph-insight-tooltip-meta {
	margin-top: 2px;
	color: var(--text-muted);
	font-size: var(--font-ui-smaller);
}

.graph-insight-tooltip-preview {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid var(--background-modifier-border);
	color: var(--text-muted);
	font-size: var(--font-ui-smaller);
	/* Override the tooltip's single-line clamp so the whole body wraps and
	 * shows in full — no inner scrollbar. */
	white-space: normal;
	max-height: min(40vh, 18em);
	overflow: auto;
}

.graph-insight-tooltip-encoding {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin-top: 5px;
	padding-top: 5px;
	border-top: 1px solid var(--background-modifier-border);
	color: var(--text-muted);
	font-size: var(--font-ui-smaller);
}

.graph-insight-panel-checkbox {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}

.graph-insight-panel-count {
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
}

/* Segmented row: panel mode at the top, layout density inside the simple panel.
   Buttons share the width so the group reads as one control, not three. */
.graph-insight-panel-modes {
	display: flex;
	gap: 4px;
	margin: 4px 0 8px;
}

.graph-insight-panel-mode {
	flex: 1;
	padding: 4px 6px;
	font-size: var(--font-ui-smaller);
	cursor: pointer;
}

.graph-insight-panel-mode.is-active {
	background: var(--interactive-accent);
	color: var(--text-on-accent);
}

.graph-insight-panel-hint {
	color: var(--text-muted);
	font-style: italic;
	font-size: var(--font-ui-smaller);
	/* Long explanations must wrap inside the panel, never widen it. */
	white-space: normal;
	overflow-wrap: anywhere;
	line-height: 1.35;
}

.graph-insight-panel {
	max-width: 280px;
}

.graph-insight-cluster-list {
	max-height: 180px;
	overflow-y: auto;
	margin-top: 4px;
}

.graph-insight-cluster-row {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 2px 0;
	cursor: pointer;
	border-radius: var(--radius-s);
}

.graph-insight-cluster-row:hover {
	background: var(--background-modifier-hover);
}

.graph-insight-cluster-row.is-cluster-hidden {
	opacity: 0.45;
}

.graph-insight-cluster-eye {
	cursor: pointer;
	color: var(--text-muted);
}

.graph-insight-cluster-name {
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* The top edge belongs to search and filters alone: one full-width row,
   with the focus/explore bar on its own line under it. The cursor tools
   live bottom-left, out of the way (camera is bottom-right). */
.graph-insight-topbar {
	position: absolute;
	top: 12px;
	left: 12px;
	right: 12px;
	z-index: 11;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 8px;
	/* The row itself must not eat canvas clicks between its blocks. */
	pointer-events: none;
}

.graph-insight-topbar > * {
	pointer-events: auto;
}

.graph-insight-searchbar {
	min-width: 0;
	flex: 1 1 auto;
	max-width: 100%;
	display: flex;
	flex-wrap: wrap; /* the status row drops to its own line */
	justify-content: flex-start;
	gap: 6px;
	align-items: center;
	padding: 6px 8px;
	background: color-mix(in srgb, var(--background-secondary) 85%, transparent);
	backdrop-filter: blur(8px);
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-s);
}

.graph-insight-searchbar input[type="text"] {
	/* F-04: track the pane width instead of a fixed 320 px. */
	width: 100%;
	max-width: 100%;
	font-size: var(--font-ui-small);
	padding-left: 30px;
	padding-right: 36px;
}

.graph-insight-searchbar-input {
	flex: 1 1 180px;
	min-width: 0;
}

.graph-insight-searchbar > select {
	max-width: min(180px, 100%);
	min-width: 0;
}

.graph-insight-search-icon {
	position: absolute;
	left: 9px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	color: var(--text-faint);
	pointer-events: none;
}

.graph-insight-search-icon .svg-icon,
.graph-insight-search-icon-button .svg-icon,
.graph-insight-timeline-play .svg-icon {
	width: 16px;
	height: 16px;
}

.graph-insight-search-icon-button {
	background: transparent;
	box-shadow: none;
	color: var(--text-muted);
}

.graph-insight-search-icon-button:hover {
	color: var(--text-normal);
	background: var(--background-modifier-hover);
}

.graph-insight-search-clear {
	position: absolute;
	right: 3px;
	top: 50%;
	transform: translateY(-50%);
	padding: 2px 5px;
}

.graph-insight-searchbar-btn {
	padding: 2px 8px;
	min-width: 28px;
	min-height: 28px;
	cursor: pointer;
}

/* F-03: search state row — active-filter chip, live counter, Enter hint. */
.graph-insight-search-statusrow {
	min-width: 0;
	flex-wrap: wrap;
	flex-basis: 100%;
	display: flex;
	gap: 8px;
	align-items: center;
	font-size: var(--font-ui-smaller);
	color: var(--text-muted);
}

.graph-insight-search-statusrow.is-hidden {
	display: none;
}

.graph-insight-search-status.has-error {
	color: var(--text-error);
}

.graph-insight-search-chip {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	display: inline-flex;
	gap: 4px;
	align-items: center;
	padding: 1px 6px;
	border: 1px solid var(--interactive-accent);
	border-radius: var(--radius-s);
	color: var(--text-normal);
	background: color-mix(in srgb, var(--interactive-accent) 12%, transparent);
}

.graph-insight-search-chip > span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.graph-insight-search-chip button {
	flex-shrink: 0;
	padding: 0 2px;
	background: none;
	border: none;
	cursor: pointer;
	box-shadow: none;
}

.graph-insight-search-hint {
	font-style: italic;
}

.graph-insight-search-constraints {
	display: flex;
	min-width: 0;
	gap: 4px;
	align-items: center;
	flex-wrap: wrap;
}

.graph-insight-search-constraints.is-hidden {
	display: none;
}

/* F-09: save/edit filter modal and the manager list. */
.graph-insight-preset-row {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-bottom: 8px;
}

.graph-insight-preset-label {
	min-width: 70px;
	color: var(--text-muted);
}

.graph-insight-preset-row input {
	flex: 1;
}

.graph-insight-preset-error {
	min-height: 1.2em;
	color: var(--text-error);
	font-size: var(--font-ui-smaller);
}

.graph-insight-preset-manager-row {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	padding: 6px 0;
	border-bottom: 1px solid var(--background-modifier-border);
}

.graph-insight-preset-manager-query {
	color: var(--text-muted);
	font-size: var(--font-ui-smaller);
}

.graph-insight-preset-manager-actions {
	display: flex;
	gap: 4px;
	flex-shrink: 0;
}

.graph-insight-searchbar input[type="text"].has-error {
	border-color: var(--text-error);
}

.graph-insight-focusbar {
	order: 2;
	flex-basis: 100%;
	justify-content: center;
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 4px 12px;
	background: color-mix(in srgb, var(--background-secondary) 85%, transparent);
	backdrop-filter: blur(8px);
	border: 1px solid var(--interactive-accent);
	border-radius: var(--radius-m);
	font-size: var(--font-ui-small);
	color: var(--text-normal);
}

.graph-insight-timeline {
	position: absolute;
	bottom: var(--graph-bottom-controls, 172px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 11;
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	width: min(520px, calc(100% - 24px));
	gap: 10px;
	align-items: center;
	padding: 6px 12px;
	background: color-mix(in srgb, var(--background-secondary) 85%, transparent);
	backdrop-filter: blur(8px);
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-s);
}

.graph-insight-timeline-slider {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1 1 140px;
	min-width: 0;
}

.graph-insight-container .graph-insight-timeline-spark {
	width: 100%;
	height: 22px;
	display: block;
}

.graph-insight-timeline-slider input[type="range"] {
	width: 100%;
	margin: 0;
}

.graph-insight-timeline-label {
	min-width: 58px;
	font-variant-numeric: tabular-nums;
	font-size: var(--font-ui-small);
	color: var(--text-muted);
}

.graph-insight-insights {
	padding: 8px 12px;
	overflow-y: auto;
}

.graph-insight-insights h5 {
	margin: 14px 0 6px;
}

.graph-insight-insights-totals {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}

.graph-insight-insights-total {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: var(--font-ui-smaller);
	color: var(--text-muted);
}

.graph-insight-insights-total-value {
	font-size: var(--font-ui-large);
	font-weight: 700;
	color: var(--text-normal);
}

.graph-insight-insights-spark {
	width: 100%;
	height: 32px;
}

.graph-insight-insights-row {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding: 2px 0;
	font-size: var(--font-ui-small);
}

.graph-insight-insights-label {
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.graph-insight-insights-label:hover {
	color: var(--interactive-accent);
}

.graph-insight-searchbar-input {
	min-width: 0;
	max-width: 100%;
	position: relative;
}

.graph-insight-suggest {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 4px;
	z-index: 12;
	background: var(--background-primary);
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-s);
	max-height: min(260px, 40vh);
	overscroll-behavior: contain;
	scroll-padding-block: 4px;
	padding: 4px;
	overflow-y: auto;
}

.graph-insight-suggest-row {
	padding: 7px 10px;
	border-radius: var(--radius-s);
	cursor: pointer;
	font-size: var(--font-ui-small);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.graph-insight-suggest-row:hover {
	background: var(--background-modifier-hover);
	color: var(--text-normal);
}

.graph-insight-suggest-row.is-active {
	background: color-mix(in srgb, var(--interactive-accent) 16%, var(--background-primary));
	color: var(--text-normal);
	box-shadow: inset 2px 0 var(--interactive-accent);
}

.graph-insight-container :is(button, input, select):focus-visible {
	outline: 2px solid var(--interactive-accent);
	outline-offset: 2px;
}

/* Panel polish: tighter rows, full-width thin sliders, section separators */
.graph-insight-panel {
	/* Leave room for the search row above and the cursor toolbar below. */
	max-height: max(40px, calc(100% - var(--graph-topbar-bottom, 72px) - var(--graph-bottom-controls, 100px) - var(--graph-timeline-space, 0px) - 12px));
	overflow-y: auto;
	min-width: 240px;
}

.graph-insight-panel-section {
	padding-bottom: 8px;
	border-bottom: 1px solid var(--background-modifier-border);
}

.graph-insight-panel-section:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.graph-insight-panel-body input[type="range"] {
	width: 100%;
	height: 14px;
	margin: 0 0 6px;
}

.graph-insight-panel-body button {
	width: 100%;
	margin-top: 6px;
	font-size: var(--font-ui-smaller);
	padding: 4px 8px;
	cursor: pointer;
}

.graph-insight-panel-row .graph-insight-searchbar-btn {
	width: auto;
	margin-top: 0;
}

.graph-insight-camera {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 11;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 6px 10px;
	background: color-mix(in srgb, var(--background-secondary) 85%, transparent);
	backdrop-filter: blur(8px);
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-s);
	font-size: var(--font-ui-smaller);
}

.graph-insight-camera-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.graph-insight-camera-row.is-hidden {
	display: none;
}

/* Legend sits above the camera widget, which owns the bottom-right corner.
   The widget lost its X/Y sliders (F-06) but keeps room for the legend's
   own scroll for long category lists. */
.graph-insight-legend {
	bottom: calc(var(--graph-bottom-controls, 172px) + var(--graph-timeline-space, 0px));
	max-height: max(40px, calc(100% - var(--graph-topbar-bottom, 72px) - var(--graph-bottom-controls, 172px) - var(--graph-timeline-space, 0px) - 12px));
	overflow-y: auto;
}

/* Eye toggle hides every floating UI element except the camera widget */
.graph-insight-ui-hidden .graph-insight-panel,
.graph-insight-ui-hidden .graph-insight-searchbar,
.graph-insight-ui-hidden .graph-insight-legend,
.graph-insight-ui-hidden .graph-insight-timeline,
.graph-insight-ui-hidden .graph-insight-focusbar,
.graph-insight-ui-hidden .graph-insight-camera > div:not(:first-child),
.graph-insight-ui-hidden .graph-insight-camera .graph-insight-camera-icon:not(:first-child) {
	display: none;
}

/* One quiet icon row, styled like Obsidian's own view actions: muted icons,
   hover background from the theme, accent color when the toggle is on. */
.graph-insight-camera-icon {
	--icon-size: var(--icon-s);
	padding: 4px;
}

.graph-insight-camera-icon.is-active {
	color: var(--interactive-accent);
	background-color: var(--background-modifier-hover);
}

.graph-insight-camera-fit {
	margin-top: 2px;
}

/* Explore mode is a state, not an action — the button stays lit while it runs. */
.graph-insight-camera-fit.is-active {
	background: var(--interactive-accent);
	color: var(--text-on-accent);
}

.graph-insight-panel-section-title {
	cursor: pointer;
	user-select: none;
	display: flex;
	align-items: center;
	gap: 6px;
}

.graph-insight-panel-chevron {
	color: var(--text-faint);
	font-size: 9px;
}

.graph-insight-panel-section-body.is-hidden {
	display: none;
}

.graph-insight-container canvas {
	display: block;
	width: 100%;
	height: 100%;
}

.graph-insight-clusters {
	/* Cluster list was replaced by coloring + the cluster: search operator. */
	display: none;
	background: color-mix(in srgb, var(--background-secondary) 85%, transparent);
	backdrop-filter: blur(8px);
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-s);
	font-size: var(--font-ui-small);
}

.graph-insight-clusters .graph-insight-cluster-list {
	overflow-y: auto;
	padding: 0 10px 8px;
	max-height: none;
}

.graph-insight-ui-hidden .graph-insight-clusters {
	display: none;
}

/* The actual fix: collapsed cluster list had no matching CSS rule */
.graph-insight-clusters .graph-insight-cluster-list.is-hidden {
	display: none;
}

.graph-insight-colorpanel-body {
	padding: 0 10px 10px;
}

.graph-insight-colorpanel-body.is-hidden {
	display: none;
}

.graph-insight-colorpanel-pickers {
	display: flex;
	gap: 6px;
}

.graph-insight-colorpanel-pickers input[type="color"] {
	width: 34px;
	height: 22px;
	padding: 0;
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--radius-s);
	background: transparent;
	cursor: pointer;
}

.graph-insight-toolbar {
	position: absolute;
	left: 12px;
	bottom: 12px;
	z-index: 11;
	max-width: 40%;
	display: flex;
	flex-wrap: wrap; /* the status row gets its own line (F-08) */
	align-items: center;
	gap: 2px;
	padding: 3px;
	background: color-mix(in srgb, var(--background-secondary) 85%, transparent);
	backdrop-filter: blur(8px);
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-s);
}

.graph-insight-toolbar-depth,
.graph-insight-toolbar-group {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: 4px;
	padding-left: 6px;
	border-left: 1px solid var(--background-modifier-border);
}

.graph-insight-toolbar-depth.is-hidden {
	display: none;
}

.graph-insight-toolbar-depth input[type="range"] {
	width: 70px;
	margin: 0;
}

.graph-insight-tool {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	cursor: pointer;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--radius-s);
	color: var(--text-muted);
	box-shadow: none;
}

.graph-insight-tool .svg-icon {
	width: 15px;
	height: 15px;
}

.graph-insight-tool:hover {
	background: var(--background-modifier-hover);
	color: var(--text-normal);
}

.graph-insight-tool.is-active {
	background: var(--interactive-accent);
	color: var(--text-on-accent);
	border-color: var(--interactive-accent);
}

/* ── F-04: responsive floating UI ─────────────────────────────────────
   The container carries data-graph-responsive="full|compact|minimal",
   set from a ResizeObserver on the view (never the window). */

.graph-insight-tool {
	min-width: 28px; /* touch target (§8) */
	min-height: 28px;
}

/* The overflow "…" appears only when something is actually hidden. */
.graph-insight-toolbar-overflow {
	display: none;
}

[data-graph-responsive="compact"] .graph-insight-toolbar-overflow,
[data-graph-responsive="minimal"] .graph-insight-toolbar-overflow {
	display: inline-flex;
}

/* compact: standing modes move into the overflow menu. */
[data-graph-responsive="compact"] .graph-insight-toolbar-group,
[data-graph-responsive="minimal"] .graph-insight-toolbar-group {
	display: none;
}

/* minimal: search input + active tool + overflow only. */
[data-graph-responsive="minimal"] .graph-insight-searchbar select.dropdown,
[data-graph-responsive="minimal"] .graph-insight-searchbar-secondary,
[data-graph-responsive="minimal"] .graph-insight-searchbar-filters,
[data-graph-responsive="minimal"] .graph-insight-toolbar-depth,
[data-graph-responsive="minimal"] .graph-insight-camera-secondary,
[data-graph-responsive="minimal"] .graph-insight-search-hint {
	display: none;
}

[data-graph-responsive="minimal"] .graph-insight-searchbar input[type="text"] {
	width: 100%;
}

/* minimal: the control panel opens as a drawer over the canvas. */
[data-graph-responsive="minimal"] .graph-insight-panel {
	left: 8px;
	right: 8px;
	max-width: none;
	overflow-y: auto;
}

/* A drawer needs the full pane width. Restore its legend when it closes. */
[data-graph-responsive="minimal"] .graph-insight-panel:not(.is-collapsed) ~ .graph-insight-legend {
	display: none;
}

/* The focus/explore bars may wrap, but never past two lines (§F-04). */
.graph-insight-focusbar {
	flex-wrap: wrap;
}

/* ── F-10: "What changed?" panel ─────────────────────────────────────── */
.graph-insight-changes {
	position: absolute;
	/* Below the top row even when it wraps onto a second line. */
	top: var(--graph-topbar-bottom, 100px);
	right: 12px;
	z-index: 12;
	width: 300px;
	max-width: calc(100% - 24px);
	max-height: 70%;
	display: flex;
	flex-direction: column;
	background: color-mix(in srgb, var(--background-secondary) 92%, transparent);
	backdrop-filter: blur(8px);
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-s);
	font-size: var(--font-ui-small);
}

.graph-insight-changes-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 6px 10px;
	border-bottom: 1px solid var(--background-modifier-border);
	font-weight: 600;
}

.graph-insight-changes-body {
	padding: 8px 10px;
	overflow-y: auto;
}

.graph-insight-changes-periods {
	display: flex;
	gap: 4px;
	margin-bottom: 8px;
}

.graph-insight-changes-category {
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin-bottom: 2px;
	background: none;
	box-shadow: none;
	cursor: pointer;
}

.graph-insight-changes-category.is-active {
	border: 1px solid var(--interactive-accent);
	border-radius: var(--radius-s);
}

.graph-insight-changes-category:disabled {
	opacity: 0.5;
	cursor: default;
}

.graph-insight-changes-list {
	margin-top: 8px;
	border-top: 1px solid var(--background-modifier-border);
	padding-top: 6px;
}

.graph-insight-changes-row {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	box-shadow: none;
	cursor: pointer;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--text-muted);
}

.graph-insight-changes-row:hover {
	color: var(--text-normal);
}

.graph-insight-changes-empty,
.graph-insight-changes-skeleton,
.graph-insight-changes-more {
	color: var(--text-faint);
	font-size: var(--font-ui-smaller);
	padding: 6px 0;
}

/* F-11: breadcrumb strip inside the focus/explore bar. */
.graph-insight-breadcrumb {
	flex-basis: 100%;
	display: flex;
	gap: 2px;
	align-items: center;
	font-size: var(--font-ui-smaller);
	overflow: hidden;
}

.graph-insight-breadcrumb-crumb {
	padding: 0 5px;
	background: none;
	box-shadow: none;
	color: var(--text-muted);
	cursor: pointer;
	max-width: 160px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	/* Buttons center their text; centered + clipped shows the MIDDLE of a
	   long name. Left-aligned, the name reads from its start with … at
	   the end, and the full name lives in the hover tooltip. */
	text-align: left;
	display: inline-block;
	flex-shrink: 1;
	min-width: 0;
}

.graph-insight-breadcrumb-crumb.is-active {
	color: var(--text-normal);
	border: 1px solid var(--interactive-accent);
	border-radius: var(--radius-s);
}

.graph-insight-breadcrumb-crumb:disabled {
	opacity: 0.5;
	cursor: default;
}

.graph-insight-breadcrumb-sep {
	color: var(--text-faint);
}

.graph-insight-breadcrumb-remove {
	padding: 0 3px;
	background: none;
	box-shadow: none;
	cursor: pointer;
}

/* F-08: tool status line + standing-mode badges. The bar sits at the
   bottom edge now, so the status reads ABOVE the icon row. */
.graph-insight-toolbar-statusrow {
	order: -1;
	flex-basis: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	padding: 1px 4px;
	font-size: var(--font-ui-smaller);
	color: var(--text-muted);
}

.graph-insight-toolbar-badge {
	padding: 0 5px;
	border: 1px solid var(--interactive-accent);
	border-radius: var(--radius-s);
	color: var(--text-normal);
	background: color-mix(in srgb, var(--interactive-accent) 12%, transparent);
}

.graph-insight-ui-hidden .graph-insight-toolbar {
	display: none;
}

/* Focus bar sits just below the centered search bar. */
.graph-insight-focusbar {
	top: 56px;
}

.graph-insight-filters {
	position: relative;
	display: flex;
	gap: 6px;
}

.graph-insight-filter-btn {
	padding: 3px 10px;
	min-height: 28px;
	font-size: var(--font-ui-smaller);
	cursor: pointer;
	background: transparent;
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--radius-s);
	color: var(--text-muted);
	box-shadow: none;
	white-space: nowrap;
}

.graph-insight-filter-btn:hover {
	background: var(--background-modifier-hover);
}

.graph-insight-filter-btn.is-active {
	background: var(--interactive-accent);
	color: var(--text-on-accent);
	border-color: var(--interactive-accent);
}

.graph-insight-filter-menu {
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 6px;
	z-index: 13;
	min-width: 220px;
	max-width: 300px;
	background: var(--background-primary);
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-s);
	padding: 6px;
}

.graph-insight-filter-menu-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	padding: 2px 4px 6px;
	font-size: var(--font-ui-smaller);
	color: var(--text-muted);
	border-bottom: 1px solid var(--background-modifier-border);
}

.graph-insight-filter-menu-header button {
	width: auto;
	margin: 0;
	padding: 2px 6px;
}

.graph-insight-filter-search {
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 6px;
}

.graph-insight-filter-list {
	max-height: 300px;
	overflow-y: auto;
	padding-top: 4px;
}

.graph-insight-filter-row {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 3px 4px;
	font-size: var(--font-ui-small);
	cursor: pointer;
	border-radius: var(--radius-s);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.graph-insight-filter-row[hidden] {
	display: none;
}

.graph-insight-filter-row > span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.graph-insight-filter-row:hover {
	background: var(--background-modifier-hover);
}

/* Action button inside a Notice — failure notices stay open until acted on. */
.agv-notice-action {
	margin-top: 8px;
	padding: 4px 10px;
	font-size: var(--font-ui-small);
	cursor: pointer;
	border-radius: var(--radius-s);
	background: var(--interactive-accent);
	color: var(--text-on-accent);
	border: none;
}

.agv-notice-action:hover {
	background: var(--interactive-accent-hover);
}

/* Shown instead of a blank canvas when the vault holds no notes. */
.graph-insight-empty {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 12;
	width: max-content;
	max-width: calc(100% - 48px);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 24px;
	text-align: center;
	pointer-events: none;
	background: var(--background-secondary);
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-s);
}

.graph-insight-empty button {
	pointer-events: auto;
}

.graph-insight-startup-error {
	pointer-events: auto;
}

.graph-insight-startup-retry {
	margin-top: 8px;
}

.graph-insight-empty-title {
	font-size: var(--font-ui-large);
	color: var(--text-normal);
}

.graph-insight-empty-body {
	max-width: 32em;
	font-size: var(--font-ui-small);
	color: var(--text-muted);
	line-height: 1.5;
}

/* Local 3D graph pane: slim control strip above the canvas. */
.graph-insight-local-header {
	position: absolute;
	top: 8px;
	left: 8px;
	right: 8px;
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 10px;
	pointer-events: none;
}

.graph-insight-local-header label {
	font-size: var(--font-ui-small);
	color: var(--text-muted);
	white-space: nowrap;
}

.graph-insight-local-header input[type="range"] {
	width: 90px;
	pointer-events: auto;
}

.graph-insight-local-header button {
	margin-left: auto;
	pointer-events: auto;
	font-size: var(--font-ui-small);
}