diff --git a/src/components/CopyPageButton.astro b/src/components/CopyPageButton.astro
index d1bc523..f844f15 100644
--- a/src/components/CopyPageButton.astro
+++ b/src/components/CopyPageButton.astro
@@ -17,7 +17,7 @@ const chatgptUrl = `https://chatgpt.com/?q=${prompt}`;
 const claudeUrl = `https://claude.ai/new?q=${prompt}`;
 ---
 
-<div class="copy-dropdown-wrapper" id="copy-dropdown-wrapper">
+<div class="copy-dropdown-wrapper" id="copy-dropdown-wrapper" data-pagefind-ignore>
   <button class="copy-dropdown-trigger" id="copy-dropdown-trigger">
     <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
       <rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
diff --git a/src/components/CustomSidebar.astro b/src/components/CustomSidebar.astro
index 5c51271..1a5027a 100644
--- a/src/components/CustomSidebar.astro
+++ b/src/components/CustomSidebar.astro
@@ -35,80 +35,196 @@ import KapaLauncher from './KapaLauncher.astro';
 <Default><slot /></Default>
 
 <!-- Search UX enhancements:
-     1. "Ask AI" row styled like a search result at the bottom of the
-        results area (GitBook-style). Always visible when results or
-        no-results message are shown.
+     1. Persistent dialog footer (GitBook-style):
+          - "Ask AI" CTA whose label interpolates the live search query
+            ("Ask AI" when empty, `Ask AI: "<query>"` once typed) and
+            surfaces the ⌘+I (Ctrl+I on Windows/Linux) shortcut. Clicking
+            it routes the query into the Kapa Ask chat panel.
+          - Keyboard-hint strip (↑↓ Navigate · ↵ Select · Esc Close)
+            hidden under 50rem.
      2. Arrow key navigation through results with visible selection
-        state. Enter opens the selected result. -->
+        state. Enter opens the selected result. Ask AI is the LAST
+        navigable item, so arrow-down past the last doc result lands
+        on it.
+     3. Breadcrumb row injected at the top of each result title,
+        derived from the result URL (first segment maps to the topic
+        label; subsequent segments are humanized). -->
 <script is:inline>
 	(() => {
 		var dialog = document.querySelector('site-search dialog');
 		if (!dialog) return;
 
+		var footerId = 'warp-search-footer';
 		var askAiId = 'warp-search-ask-ai';
+		var breadcrumbClass = 'warp-search-breadcrumb';
 		var selectedIndex = -1;
 
-		// --- Build the Ask AI row (result-card style) ---
-		function buildAskAiRow() {
-			var row = document.createElement('button');
-			row.id = askAiId;
-			row.type = 'button';
-			row.className = 'warp-search-ask-ai-row';
-			row.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>'
+		// Mirrors the top-level sidebar topic labels (see src/sidebar.ts) so
+		// the breadcrumb's first segment reads as the user-facing topic name
+		// rather than the URL slug. Unmapped segments fall back to a humanized
+		// version (e.g. "agent-platform" → "Agents", "foo-bar" → "Foo bar").
+		var TOPIC_LABELS = {
+			'terminal': 'Terminal',
+			'code': 'Code',
+			'getting-started': 'Getting started',
+			'knowledge-and-collaboration': 'Knowledge & collaboration',
+			'agent-platform': 'Agents',
+			'reference': 'Reference',
+			'changelog': 'Changelog',
+			'support-and-community': 'Support',
+			'enterprise': 'Enterprise',
+			'guides': 'Guides',
+			'api': 'API',
+		};
+
+		// Detect Apple platforms once so the Ask AI kbd reads ⌘+I on Macs and
+		// Ctrl+I elsewhere. Mirrors KapaChatLauncher.tsx which binds the same
+		// shortcut via keymatch's `CmdOrCtrl+I`.
+		var isMac = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform || '');
+		var modKey = isMac ? '\u2318' : 'Ctrl';
+
+		function humanize(slug) {
+			return slug.replace(/-/g, ' ').replace(/^(\w)/, function (c) {
+				return c.toUpperCase();
+			});
+		}
+
+		function labelForSegment(segment, isFirst) {
+			if (isFirst && TOPIC_LABELS[segment]) return TOPIC_LABELS[segment];
+			return humanize(segment);
+		}
+
+		// Build a breadcrumb (`Topic › Section`) from a result URL. We drop
+		// the leaf segment because the result title already carries it, and
+		// cap the breadcrumb at two levels (topic + section) so it stays
+		// scannable at the eyebrow scale.
+		function breadcrumbFromUrl(url) {
+			if (!url) return '';
+			var path = url;
+			try {
+				path = new URL(url, 'https://docs.warp.dev').pathname;
+			} catch (e) {}
+			var segments = path.split('/').filter(function (s) {
+				return s && s !== 'index' && !s.endsWith('.html');
+			});
+			if (segments.length === 0) return TOPIC_LABELS.terminal;
+			// Drop the leaf segment if there's more than one (the title carries it).
+			var parts = segments.length > 1 ? segments.slice(0, -1) : segments;
+			// Cap at the first two parts (topic + section) so we don't sprawl.
+			if (parts.length > 2) parts = parts.slice(0, 2);
+			return parts.map(function (seg, i) { return labelForSegment(seg, i === 0); }).join('\u00a0\u203a\u00a0');
+		}
+
+		function renderAskAiLabel(label) {
+			var query = label && label.trim();
+			if (!query) return 'Ask AI';
+			var escaped = query
+				.replace(/&/g, '&amp;')
+				.replace(/</g, '&lt;')
+				.replace(/>/g, '&gt;')
+				.replace(/"/g, '&quot;');
+			return 'Ask AI: <span class="warp-search-ask-ai-row__query">"' + escaped + '"</span>';
+		}
+
+		// --- Build the persistent footer (Ask AI + keyboard hints) once ---
+		function buildFooter() {
+			var footer = document.createElement('div');
+			footer.id = footerId;
+			footer.className = 'warp-search-footer';
+
+			var askAi = document.createElement('button');
+			askAi.id = askAiId;
+			askAi.type = 'button';
+			askAi.className = 'warp-search-ask-ai-row';
+			askAi.innerHTML =
+				'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">'
+				+ '<path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/>'
+				+ '<path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M5 18H3"/>'
+				+ '</svg>'
 				+ '<span class="warp-search-ask-ai-row__label">Ask AI</span>'
-				+ '<kbd class="warp-search-ask-ai-row__kbd" aria-hidden="true">Enter</kbd>';
-			row.addEventListener('click', function () {
-				// Grab the current search query so Kapa can pre-fill it
-				var searchInput = dialog.querySelector('.pagefind-ui__search-input');
-				var searchQuery = searchInput ? searchInput.value.trim() : '';
-				if (searchQuery) {
-					window.__warpAskAiQuery = searchQuery;
-				}
-				dialog.close();
+				+ '<kbd class="warp-search-ask-ai-row__kbd" aria-hidden="true">' + modKey + '<span class="warp-search-ask-ai-row__kbd-plus">+</span>I</kbd>';
+			askAi.addEventListener('click', function () {
+				// openPanel() in KapaChatLauncher reads the live search input and
+				// closes the search dialog itself, so we just route the click.
 				var kapaBtn = document.querySelector('.warp-kapa-button');
 				if (kapaBtn) kapaBtn.click();
 			});
-			return row;
+			footer.appendChild(askAi);
+
+			var hints = document.createElement('div');
+			hints.className = 'warp-search-keyboard-hints';
+			hints.innerHTML =
+				'<span class="warp-search-keyboard-hints__group">'
+				+ '<kbd class="warp-search-keyboard-hints__kbd">\u2191</kbd>'
+				+ '<kbd class="warp-search-keyboard-hints__kbd">\u2193</kbd>'
+				+ '<span>Navigate</span>'
+				+ '</span>'
+				+ '<span class="warp-search-keyboard-hints__group">'
+				+ '<kbd class="warp-search-keyboard-hints__kbd">\u21b5</kbd>'
+				+ '<span>Select</span>'
+				+ '</span>'
+				+ '<span class="warp-search-keyboard-hints__group">'
+				+ '<kbd class="warp-search-keyboard-hints__kbd">Esc</kbd>'
+				+ '<span>Close</span>'
+				+ '</span>';
+			footer.appendChild(hints);
+
+			return footer;
 		}
 
-		// --- Inject / remove the Ask AI row ---
-		// Pagefind re-renders the results area on every keystroke, which
-		// removes our injected element. We re-inject on every observer
-		// tick by checking if the element is still in the DOM.
-		// The Ask AI row is always visible when the dialog is open --
-		// even before the user types a query.
-		function injectAskAi() {
-			var existing = document.getElementById(askAiId);
-			// Find the best container: results area if it exists, otherwise
-			// the search container (#starlight__search) for the empty state.
-			var container = dialog.querySelector('.pagefind-ui__results-area')
-				|| dialog.querySelector('#starlight__search');
-			if (!container) return;
-			// If it already exists and is still in the container, skip
-			if (existing && container.contains(existing)) return;
-			// Re-build and append
-			if (existing) existing.remove();
-			container.appendChild(buildAskAiRow());
+		function ensureFooter() {
+			var existing = document.getElementById(footerId);
+			if (existing) return existing;
+			var frame = dialog.querySelector('.dialog-frame');
+			if (!frame) return null;
+			var footer = buildFooter();
+			frame.appendChild(footer);
+			return footer;
 		}
 
-		function removeAskAi() {
-			var el = document.getElementById(askAiId);
+		function removeFooter() {
+			var el = document.getElementById(footerId);
 			if (el) el.remove();
 		}
 
+		function updateAskAiLabel() {
+			var labelEl = dialog.querySelector('.warp-search-ask-ai-row__label');
+			if (!labelEl) return;
+			var searchInput = dialog.querySelector('.pagefind-ui__search-input');
+			var value = searchInput ? searchInput.value : '';
+			labelEl.innerHTML = renderAskAiLabel(value);
+		}
+
+		// --- Breadcrumb injection ---
+		// Pagefind re-renders the results area on every keystroke, so on every
+		// observer tick we (re)inject a small breadcrumb above each result
+		// title. The breadcrumb is idempotent (we skip if already present).
+		function injectBreadcrumbs() {
+			dialog.querySelectorAll('.pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *))').forEach(function (titleEl) {
+				if (titleEl.querySelector('.' + breadcrumbClass)) return;
+				var link = titleEl.querySelector('.pagefind-ui__result-link');
+				if (!link) return;
+				var crumb = breadcrumbFromUrl(link.getAttribute('href') || '');
+				if (!crumb) return;
+				var span = document.createElement('span');
+				span.className = breadcrumbClass;
+				span.textContent = crumb;
+				titleEl.insertBefore(span, titleEl.firstChild);
+			});
+		}
+
 		// --- Arrow key navigation ---
 		// Navigate per VISIBLE ROW: each .pagefind-ui__result-title and
 		// .pagefind-ui__result-nested is one navigable item (matching the
-		// mouse hover granularity). Ask AI is first (it's at the top).
+		// mouse hover granularity). Ask AI is LAST so arrow-down past the
+		// last result lands on it (mirrors GitBook's persistent CTA).
 		function getNavigableItems() {
 			var items = [];
-			// Ask AI row first (visually at top of results)
-			var askAi = document.getElementById(askAiId);
-			if (askAi) items.push(askAi);
-			// Collect each visible row: title rows and sub-result rows
 			dialog.querySelectorAll('.pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)), .pagefind-ui__result-nested').forEach(function (row) {
 				items.push(row);
 			});
+			var askAi = document.getElementById(askAiId);
+			if (askAi) items.push(askAi);
 			return items;
 		}
 
@@ -128,15 +244,7 @@ import KapaLauncher from './KapaLauncher.astro';
 			selectedIndex = index;
 			var item = items[selectedIndex];
 			item.classList.add('warp-search-selected');
-			// When wrapping to the first item (Ask AI at index 0),
-			// scroll the entire dialog frame to the top so the search
-			// box and Ask AI are both visible.
-			if (selectedIndex === 0) {
-				var frame = dialog.querySelector('.dialog-frame');
-				if (frame) frame.scrollTop = 0;
-			} else {
-				item.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
-			}
+			item.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
 		}
 
 		// Clear keyboard selection when mouse moves over results
@@ -156,37 +264,54 @@ import KapaLauncher from './KapaLauncher.astro';
 			} else if (e.key === 'ArrowUp') {
 				e.preventDefault();
 				selectItem(selectedIndex - 1);
-		} else if (e.key === 'Enter') {
+			} else if (e.key === 'Enter') {
 				if (selectedIndex >= 0 && selectedIndex < items.length) {
 					e.preventDefault();
-					// For result rows, click the link inside; for Ask AI, click the row
+					// For result rows, click the link inside; for Ask AI, click the button
 					var link = items[selectedIndex].querySelector('.pagefind-ui__result-link');
 					if (link) { link.click(); } else { items[selectedIndex].click(); }
-				} else if (items.length > 1) {
-					// No selection: go to first doc result (skip Ask AI at index 0)
-					e.preventDefault();
-					var firstLink = items[1] && items[1].querySelector('.pagefind-ui__result-link');
-					if (firstLink) firstLink.click();
+				} else {
+					// No keyboard selection: open the first doc result if any.
+					var firstResult = dialog.querySelector('.pagefind-ui__result-link');
+					if (firstResult) {
+						e.preventDefault();
+						firstResult.click();
+					}
 				}
 			}
 		});
 
-		// --- Observer: inject Ask AI + reset selection on results change ---
+		// --- Observer: refresh breadcrumbs + reset selection on results change ---
+		// The footer is built once and lives outside Pagefind's render scope so
+		// it survives every re-render without re-injection.
 		var observer = new MutationObserver(function () {
-			injectAskAi();
+			injectBreadcrumbs();
 			clearSelection();
 		});
 
 		dialog.addEventListener('close', function () {
 			observer.disconnect();
-			removeAskAi();
+			removeFooter();
 			clearSelection();
 		});
 
+		// Wire the input listener at the dialog level (delegated) so it
+		// catches the Pagefind input even though that input is mounted after
+		// the dialog itself exists. Updates the Ask AI label live as the
+		// user types or clears the query.
+		dialog.addEventListener('input', function (e) {
+			if (e.target && e.target.classList && e.target.classList.contains('pagefind-ui__search-input')) {
+				updateAskAiLabel();
+			}
+		});
+
 		new MutationObserver(function () {
 			if (dialog.open) {
+				ensureFooter();
+				updateAskAiLabel();
 				var target = dialog.querySelector('#starlight__search') || dialog;
 				observer.observe(target, { childList: true, subtree: true });
+				injectBreadcrumbs();
 				clearSelection();
 			}
 		}).observe(dialog, { attributes: true, attributeFilter: ['open'] });
diff --git a/src/components/KapaChatLauncher.tsx b/src/components/KapaChatLauncher.tsx
index f4c0257..d4e1bcb 100644
--- a/src/components/KapaChatLauncher.tsx
+++ b/src/components/KapaChatLauncher.tsx
@@ -122,17 +122,33 @@ function ChatSurface({ title, welcomeMessage, autoOpen = false, onNewConversatio
 	};
 
 	const openPanel = () => {
+		// If the Pagefind search dialog is open with a query typed in, hand
+		// that query off to Kapa's input. Both entry points (the ⌘+I / Ctrl+I
+		// global shortcut and the "Ask AI" footer CTA) route through here, so
+		// this is the single place that owns the search → Kapa handoff. Read
+		// the value BEFORE closing the dialog — closing tears down the input.
+		const searchDialog = document.querySelector<HTMLDialogElement>('site-search dialog');
+		let pendingQuery: string | undefined;
+		if (searchDialog?.open) {
+			const searchInput = searchDialog.querySelector<HTMLInputElement>('.pagefind-ui__search-input');
+			pendingQuery = searchInput?.value.trim() || undefined;
+			searchDialog.close();
+		}
+		// Legacy fallback: earlier callers stashed the query on window before
+		// triggering us. Kept as a belt-and-braces guard in case any path
+		// still uses it.
+		if (!pendingQuery && (window as any).__warpAskAiQuery) {
+			pendingQuery = (window as any).__warpAskAiQuery;
+			delete (window as any).__warpAskAiQuery;
+		}
+
 		setIsOpen(true);
-		// If a search query was passed from the search dialog's "Ask AI"
-		// button, auto-submit it after the panel opens.
-		const pendingQuery = (window as any).__warpAskAiQuery;
+		// Pre-fill (don't auto-submit) so the user can refine before sending.
+		// The input is controlled by `query` state, and the open-dialog effect
+		// focuses inputRef once the dialog mounts — cursor lands at the end
+		// of the pre-filled text, ready for Enter or edits.
 		if (pendingQuery) {
-			delete (window as any).__warpAskAiQuery;
-			// Wait for the panel to mount and the input to be ready
-			setTimeout(() => {
-				submitQuery(pendingQuery);
-				setHasStartedConversation(true);
-			}, 100);
+			setQuery(pendingQuery);
 		}
 	};
 
diff --git a/src/styles/warp-components.css b/src/styles/warp-components.css
index dc2b2e0..ff81c82 100644
--- a/src/styles/warp-components.css
+++ b/src/styles/warp-components.css
@@ -942,6 +942,11 @@ body {
 site-search dialog {
   background-color: var(--sl-color-bg);
   border: 1px solid var(--sl-color-hairline-light);
+  /* Drop Starlight's default `min-height: 15rem` so the empty-state dialog
+     sizes to its actual content (form + footer ≈ 150px) instead of forcing
+     dead space inside the scroll container. `height: max-content` (Starlight
+     default) handles natural sizing; `max-height` is unchanged. */
+  min-height: auto;
 }
 
 /* Stronger neutral backdrop. Starlight's `--sl-color-backdrop-overlay`
@@ -956,6 +961,35 @@ site-search dialog::backdrop {
   background-color: rgba(255, 255, 255, 0.55);
 }
 
+/* Dialog frame: convert into a real flex column so the Pagefind-rendered
+   `.search-container` scrolls in the middle and our injected
+   `.warp-search-footer` sits as a sibling pinned by flex flow. The
+   alternative (sticky form + sticky footer on a single scroll container)
+   broke Pagefind's absolutely-positioned magnifier + clear icons — they
+   sit at `top: 13-15px` of the form, so any form-level padding pushes the
+   input down and leaves the icons floating above it. Flex flow keeps the
+   form at its default zero-padding layout. */
+site-search dialog .dialog-frame {
+  padding: 0;
+  gap: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+site-search dialog .search-container {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 1rem;
+}
+
+@media (min-width: 50rem) {
+  site-search dialog .search-container {
+    padding: 1.5rem;
+  }
+}
+
 /* Pagefind UI custom-property overrides. These cascade into Pagefind's own
    stylesheet (which authors all its surfaces against
    `--pagefind-ui-background` / `--pagefind-ui-border` / `--pagefind-ui-tag`
@@ -969,7 +1003,13 @@ site-search dialog::backdrop {
    `--sl-search-corners` is Starlight's own knob for the result-card
    corners (defaults to `0.3125rem` = 5px, between our `sm` and `md`
    tokens, which never matches anything else). Pin it to `sm` so the
-   list rows match the input above them. */
+   list rows match the input above them.
+
+   `--sl-search-result-pad-*` are Starlight's knobs over Pagefind's own
+   default vertical padding. Pin them to a compact 0.5rem block / 0.875rem
+   inline pair (and 0.375rem block for nested rows) so every result row
+   sits tighter, and drop the leading 3.75rem inline-start gutter that's
+   reserved for the page/tree icon — we hide that icon below. */
 site-search #starlight__search {
   --pagefind-ui-background: var(--warp-control-bg);
   --pagefind-ui-border: var(--warp-control-border);
@@ -978,118 +1018,477 @@ site-search #starlight__search {
   --pagefind-ui-primary: var(--sl-color-white);
   --pagefind-ui-border-radius: var(--sl-radius-sm);
   --sl-search-corners: var(--sl-radius-sm);
+  --sl-search-result-pad-block: 0.5rem;
+  --sl-search-result-pad-inline-start: 0.875rem;
+  --sl-search-result-pad-inline-end: 0.875rem;
+  --sl-search-result-nested-pad-block: 0.375rem;
+  /* Intra-card spacing pinned to 0 so the per-row left border on
+     `.pagefind-ui__result-nested` forms one continuous vertical rail
+     across all sub-results inside a card. Inter-card spacing comes from
+     the `.pagefind-ui__result` margin-bottom rule below. */
+  --sl-search-result-spacing: 0;
+}
+
+/* Page card wrapper. Pagefind renders one `<li class="pagefind-ui__result">`
+   per page; inside, the parent title and sub-results are flat siblings.
+   Move the card chrome onto this wrapper so the parent title + its nested
+   rows read as a single grouped card. Border is `--sl-color-hairline-light`
+   (8% white) instead of `--warp-control-border` (#404040) so the card edge
+   reads as a hairline frame, not a chip outline. */
+site-search #starlight__search .pagefind-ui__result {
+  background-color: var(--warp-control-bg);
+  border: 1px solid var(--sl-color-hairline-light);
+  border-radius: var(--sl-radius-sm);
+  padding: 0.5rem 0;
+  margin-bottom: 0.5rem;
+}
+
+site-search #starlight__search .pagefind-ui__result:last-child {
+  margin-bottom: 0;
+}
+
+site-search #starlight__search .pagefind-ui__result-inner {
+  width: 100%;
+}
+
+/* When sub-results are rendered, the page-level excerpt repeats the same
+   matched content the sub-results below provide more usefully (with
+   anchors + per-section context). Hide it so each card shows breadcrumb
+   + title + sub-results, no redundant body excerpt. Results with no
+   sub-results keep their excerpt as the only available context. */
+site-search #starlight__search .pagefind-ui__result:has(.pagefind-ui__result-nested) .pagefind-ui__result-inner > .pagefind-ui__result-excerpt {
+  display: none;
+}
+
+/* Hide Starlight's leading page + tree-diagram icons. They were tuned for
+   Pagefind's default verbose layout and read as decorative noise in our
+   tighter cards. The breadcrumb injected by CustomSidebar.astro replaces
+   their role of communicating "this is a page" / "this is a heading". */
+site-search #starlight__search .pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *))::before,
+site-search #starlight__search .pagefind-ui__result-nested::before {
+  display: none;
+}
+
+/* Results-count message ("12 results for changelog"). Pagefind's default
+   UI stacks margins on the form + drawer + results container; we hard-zero
+   every level so the message sits flush against the form above and the
+   first card below. */
+site-search #starlight__search .pagefind-ui__form {
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
+site-search #starlight__search .pagefind-ui__drawer {
+  margin: 0;
+  padding: 0;
+}
+
+site-search #starlight__search .pagefind-ui__results-area {
+  margin: 0;
+  padding: 0;
+}
+
+site-search #starlight__search .pagefind-ui__results {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+site-search #starlight__search .pagefind-ui__message {
+  margin: 0.5rem 0 0.625rem;
+  padding: 0;
+  font-size: var(--sl-text-sm);
+  font-weight: 500;
+  color: var(--sl-color-gray-2);
+}
+
+/* "Load more results" button: match the chrome card system so it reads as
+   a row of the same family as the result list. Pagefind's default is a
+   borderless inline button at body size that floats below the last card
+   on too much air. */
+site-search #starlight__search .pagefind-ui__button {
+  display: block;
+  width: 100%;
+  margin: 0.75rem 0 0;
+  padding: 0.5rem 0.875rem;
+  border: 1px solid var(--warp-control-border);
+  border-radius: var(--sl-radius-sm);
+  background: var(--warp-control-bg);
+  color: var(--warp-control-text);
+  font-family: var(--__sl-font, 'Inter', sans-serif);
+  font-size: var(--sl-text-sm);
+  font-weight: 500;
+  line-height: 1.2;
+  cursor: pointer;
+  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
+}
+
+site-search #starlight__search .pagefind-ui__button:hover,
+site-search #starlight__search .pagefind-ui__button:focus-visible {
+  border-color: var(--warp-control-border-hover);
+  background-color: var(--warp-control-bg-hover);
+  color: var(--warp-control-text-hover);
+  outline: none;
 }
 
 /* Input focus border: Starlight's default flips `--pagefind-ui-border` to
-   the saturated Warp blue accent on focus, which is the bright cyan ring
-   in the screenshot. Replace with the chrome ladder's hover border so the
-   input matches the trigger button's `:hover` affordance. */
-site-search #starlight__search input:focus {
+   the saturated Warp blue accent on focus, which renders as a bright cyan
+   ring around the form. Set the variable on every level Pagefind reads it
+   from (form + input) AND set `border-color` directly on the form's
+   `:focus-within` state — belt-and-braces because CSS variables don't
+   cascade upward, so setting `--pagefind-ui-border` on the input alone
+   never affected the form's painted border. Also strip the browser's
+   default focus outline on the input (the form's hover-border swap is
+   the visible focus affordance). */
+site-search #starlight__search .pagefind-ui__form:focus-within {
   --pagefind-ui-border: var(--warp-control-border-hover);
+  border-color: var(--warp-control-border-hover);
+}
+
+site-search #starlight__search input:focus,
+site-search #starlight__search input:focus-visible {
+  --pagefind-ui-border: var(--warp-control-border-hover);
+  outline: none;
 }
 
-/* Cancel + clear buttons: drop the blue accent color in favor of a calm
-   gray that recedes the way every other secondary chrome action does. */
+/* Hide Starlight's upstream mobile Cancel button entirely. It renders
+   beside `.pagefind-ui__form` at viewports <50rem (Starlight ships it
+   with `class="sl-flex md:sl-hidden"`) and squashes the search input.
+   Mobile users still close the dialog via backdrop tap (wired by
+   Starlight's `site-search` element) and ESC; the persistent footer +
+   keyboard hints handle desktop. */
 site-search button[data-close-modal] {
-  color: var(--sl-color-gray-2);
+  display: none;
 }
 
-site-search button[data-close-modal]:hover {
-  color: var(--sl-color-white);
+/* Unify the in-input magnifier (`.pagefind-ui__form::before`) and clear-X
+   (`.pagefind-ui__search-clear::before`) icons with the rest of the chrome.
+   Pagefind ships its own icon SVGs via `mask-image`, drawn in a slightly
+   different stroke style than the Lucide icons we use everywhere else
+   (Kapa "Ask" button, Ask AI sparkle, etc.). Override both with matched
+   Lucide SVGs at `stroke-width=2`, `stroke-linecap/linejoin=round` so the
+   pair reads as a single icon family inside the dialog. The element's
+   `background-color` shows through the mask alpha, so the icon color
+   tracks `--pagefind-ui-text` / our explicit color rules below. */
+site-search #starlight__search .pagefind-ui__form::before {
+  width: 16px;
+  height: 16px;
+  background-color: var(--sl-color-gray-2);
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
 }
 
 site-search #starlight__search .pagefind-ui__search-clear::before {
+  /* The Lucide X spans almost the full viewBox while the magnifier circle
+     only fills the inner ~half, so rendering both at 16px makes the X
+     visually outweigh the magnifier. Pull the X down to 13px so the two
+     icons read as the same optical weight. */
+  width: 13px;
+  height: 13px;
   background-color: var(--sl-color-gray-3);
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+}
+
+/* The Pagefind clear button ships with a translated "Clear" label as its
+   text node alongside the `::before` icon, which renders as visible copy
+   stacked under the X. Collapse the label to zero size so only the icon
+   shows; the text node stays in the DOM so screen readers still announce
+   the button as "Clear". `inset-inline-end` pushes the button away from
+   the input's right edge so the X has the same breathing room as the
+   magnifier on the left (~20px from the form edge). */
+site-search #starlight__search .pagefind-ui__search-clear {
+  font-size: 0;
+  line-height: 0;
+  inset-inline-end: 18px;
+}
+
+/* Hover + keyboard focus: brighten just the icon. The form's `:focus-within`
+   border already signals that the search input as a whole has focus, so
+   the clear button doesn't need its own wraparound outline (which would
+   read as a chip-within-chip against the input border). */
+site-search #starlight__search .pagefind-ui__search-clear:hover::before,
+site-search #starlight__search .pagefind-ui__search-clear:focus-visible::before {
+  background-color: var(--sl-color-white);
 }
 
 site-search #starlight__search .pagefind-ui__search-clear:focus {
-  outline: 1px solid var(--warp-control-border-hover);
+  outline: none;
 }
 
-/* Result cards. Starlight paints the title row + each nested sub-result
-   with `--sl-color-black` (`#121212`), which on the cool gray-6 dialog
-   read as stamped-down patches. With the dialog now sharing the page
-   canvas, raise each result onto the chrome `--warp-control-bg` so the
-   list reads as a stack of tactile chips. A 1px hairline keeps the cards
-   distinct without a heavy outline. */
+/* Result rows are transparent siblings inside the page card so the card
+   wrapper (`.pagefind-ui__result`) is the only painted surface; the
+   parent title and any nested rows just sit on top of it. Sub-result
+   indent + left rail are handled by the dedicated `.pagefind-ui__result-nested`
+   rule near the bottom of this section. */
 site-search #starlight__search .pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)),
 site-search #starlight__search .pagefind-ui__result-nested,
 site-search #starlight__search .pagefind-ui__result-tags {
-  background-color: var(--warp-control-bg);
+  background-color: transparent;
 }
 
-/* Hover / keyboard-focus state. Replace the blue accent outline + tinted
-   fill with the same neutral wash the chrome buttons use on hover. The
-   1px border swap stays inside the existing layout box, so list rows
-   don't shift on hover. */
-site-search #starlight__search .pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)):hover,
-site-search #starlight__search .pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)):focus-within,
+/* Hover / keyboard-focus state is scoped to nested rows only — the parent
+   title is now visually part of the card, so hovering its own row would
+   give it a second-tier highlight that competes with the card itself.
+   Use a soft white wash instead of the chip `--warp-control-bg-hover` so
+   the hover stays inside the card surface without painting a hard chip. */
 site-search #starlight__search .pagefind-ui__result-nested:hover,
 site-search #starlight__search .pagefind-ui__result-nested:focus-within {
-  outline: 1px solid var(--warp-control-border-hover);
-  background-color: var(--warp-control-bg-hover);
+  background-color: rgba(255, 255, 255, 0.04);
 }
 
-/* Arrow-key selection state for search results. Applied by the
-   keyboard navigation script in CustomSidebar.astro. Targets the
-   same per-row elements (.pagefind-ui__result-title and
-   .pagefind-ui__result-nested) that the hover rules above target,
-   so keyboard and mouse highlight produce identical visuals. */
+:root[data-theme='light'] site-search #starlight__search .pagefind-ui__result-nested:hover,
+:root[data-theme='light'] site-search #starlight__search .pagefind-ui__result-nested:focus-within {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+/* Arrow-key selection state for search results. The keyboard navigation
+   script in CustomSidebar.astro adds `.warp-search-selected` to the
+   currently-focused row (parent title or nested). Same wash as hover
+   plus a 1px border so keyboard selection pops clearly inside the card. */
 site-search #starlight__search .warp-search-selected {
   outline: 1px solid var(--warp-control-border-hover);
   background-color: var(--warp-control-bg-hover);
 }
 
+/* Tighten the title typography. Pagefind's default is `21px * scale`
+   semibold; that reads as a stamped-down heading inside a 4px-radius
+   chip. Step it down to body size with the white text token so the title
+   still anchors the row but doesn't dominate it. The link itself
+   inherits color; restate it to defeat Starlight's `--pagefind-ui-text`
+   default which paints the link a lighter gray than the surrounding row. */
+site-search #starlight__search .pagefind-ui__result-title {
+  font-size: var(--sl-text-sm);
+  font-weight: 600;
+  line-height: 1.35;
+}
+
+site-search #starlight__search .pagefind-ui__result-title .pagefind-ui__result-link {
+  color: var(--sl-color-white);
+}
+
+/* Excerpt: drop a step below the title, line-clamp to 2 rows so each
+   result stays a compact two-or-three-line block instead of an open-ended
+   paragraph. `-webkit-line-clamp` is well-supported and degrades to
+   `overflow: hidden` on browsers that don't support it. */
+site-search #starlight__search .pagefind-ui__result-excerpt {
+  font-size: var(--sl-text-xs);
+  line-height: 1.5;
+  color: var(--sl-color-gray-2);
+  margin-top: 0.25rem;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* `<mark>` highlight inside excerpts: the Pagefind default uses a saturated
+   yellow that fights the grayscale chrome. Swap to a neutral wash that
+   matches the chrome hover surface so the highlight reads as a chip rather
+   than a stamp. `--sl-color-white` is mode-aware in Starlight (warm off-white
+   in dark, near-black in light) so it gives the right text contrast in both
+   themes — only the background tone needs a light-mode override. */
+site-search #starlight__search .pagefind-ui__result-excerpt mark,
+site-search #starlight__search .pagefind-ui__result-title mark {
+  background-color: rgba(255, 255, 255, 0.12);
+  color: var(--sl-color-white);
+  font-weight: 600;
+  padding: 0 0.125rem;
+  border-radius: var(--sl-radius-xs);
+}
+
+:root[data-theme='light'] site-search #starlight__search .pagefind-ui__result-excerpt mark,
+:root[data-theme='light'] site-search #starlight__search .pagefind-ui__result-title mark {
+  background-color: rgba(0, 0, 0, 0.08);
+}
+
+/* Scoped text-selection color so dragging across result text picks up the
+   chrome palette instead of the OS accent (saturated macOS blue read as
+   foreign next to the grayscale dialog). */
+site-search dialog ::selection {
+  background-color: rgba(255, 255, 255, 0.16);
+  color: var(--sl-color-white);
+}
+
+:root[data-theme='light'] site-search dialog ::selection {
+  background-color: rgba(0, 0, 0, 0.10);
+  color: var(--sl-color-white);
+}
+
+/* Breadcrumb row injected by CustomSidebar.astro into each
+   `.pagefind-ui__result-title` (mirrors GitBook's small label above the
+   title showing the result's section path). Sits above the result link
+   as a quiet eyebrow at the smallest legible scale. */
+.warp-search-breadcrumb {
+  display: block;
+  margin-bottom: 0.25rem;
+  font-size: var(--sl-text-2xs);
+  font-weight: 400;
+  color: var(--sl-color-gray-3);
+  letter-spacing: 0.02em;
+}
+
+/* Nested sub-results: indent inside the parent card with a continuous
+   2px left rail signaling "these all belong to the page above". With
+   `--sl-search-result-spacing: 0` (above) sub-result rows stack flush,
+   so the per-row `border-inline-start` paints a single unbroken vertical
+   bar from the first sub-result down through the last. The margin pulls
+   the rail one notch inset from the card edge so it reads as structural,
+   not as a card outline. Use `--warp-control-border-hover` (#585756 /
+   #9d9d9b) instead of the lighter `--warp-control-border` so the rail is
+   readable but not loud. */
+site-search #starlight__search .pagefind-ui__result-nested {
+  margin-inline-start: 0.625rem;
+  padding-inline-start: 0.875rem;
+  padding-inline-end: var(--sl-search-result-pad-inline-end);
+  padding-block: 0.375rem;
+  border-inline-start: 2px solid var(--warp-control-border-hover);
+  border-radius: 0;
+}
+
+site-search #starlight__search .pagefind-ui__result-nested .pagefind-ui__result-title {
+  font-size: var(--sl-text-xs);
+  font-weight: 600;
+  line-height: 1.35;
+}
+
+site-search #starlight__search .pagefind-ui__result-nested .pagefind-ui__result-link {
+  font-size: var(--sl-text-xs);
+  font-weight: 600;
+  color: var(--sl-color-gray-1);
+}
+
+site-search #starlight__search .pagefind-ui__result-nested .pagefind-ui__result-excerpt {
+  font-size: var(--sl-text-2xs);
+  color: var(--sl-color-gray-3);
+  margin-top: 0.125rem;
+}
+
 /* --------------------------------------------------------------------------
-   19. "Ask AI" row in the search dialog
+   19. Persistent search footer (Ask AI + keyboard hints)
    --------------------------------------------------------------------------
-   Styled as a result card so it reads as an inline option, not a separate
-   CTA. Sits at the bottom of the results area. Shows an Enter kbd hint
-   when selected via arrow keys. */
+   Footer pinned to the bottom of the search dialog via the parent flex
+   column in §18 (`.dialog-frame { display: flex; flex-direction: column;
+   overflow: hidden }` + `.warp-search-footer { flex: 0 0 auto }`). Contains
+   the "Ask AI" CTA (with the current query interpolated into the label) and
+   a Scalar-style keyboard hint strip (↑↓ Navigate · ↵ Select · Esc Close).
+   Built and injected once per dialog open by the script in
+   CustomSidebar.astro. */
+
+.warp-search-footer {
+  /* Surface stays on the dialog body (`--sl-color-bg`) so the footer is
+     fully neutral — `--sl-color-gray-6` reads visibly blue in dark mode
+     (Oz `#252b37`) and pulls the chrome out of family. The hairline +
+     scrim do the separating work. */
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  padding: 0.625rem 1rem 0.75rem;
+  background: var(--sl-color-bg);
+  border-top: 1px solid var(--sl-color-hairline-light);
+  box-shadow: 0 -8px 12px -8px rgba(0, 0, 0, 0.35);
+}
 
+:root[data-theme='light'] .warp-search-footer {
+  box-shadow: 0 -8px 12px -8px rgba(0, 0, 0, 0.10);
+}
+
+@media (min-width: 50rem) {
+  .warp-search-footer {
+    padding: 0.75rem 1.5rem 0.875rem;
+  }
+}
+
+/* Ask AI CTA. Reads like a chrome button: same surface + hairline as the
+   trigger button this modal opened from, with a leading sparkle icon, a
+   flexible label that interpolates the current query, and a trailing
+   keyboard shortcut chip. */
 .warp-search-ask-ai-row {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: 0.625rem;
   width: 100%;
-  padding: 0.75rem 1.25rem;
-  margin-top: 0.5rem;
-  border: 0;
+  padding: 0.625rem 0.75rem;
+  border: 1px solid var(--warp-control-border);
   border-radius: var(--sl-radius-sm);
   background: var(--warp-control-bg);
-  color: var(--sl-color-text-accent);
+  color: var(--warp-control-text);
   font-family: var(--__sl-font, 'Inter', sans-serif);
   font-size: var(--sl-text-sm);
   font-weight: 500;
+  line-height: 1.2;
   cursor: pointer;
-  transition: background-color 0.15s ease, outline-color 0.15s ease;
+  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
 }
 
 .warp-search-ask-ai-row:hover,
-.warp-search-ask-ai-row.warp-search-selected {
-  outline: 1px solid var(--warp-control-border-hover);
+.warp-search-ask-ai-row.warp-search-selected,
+.warp-search-ask-ai-row:focus-visible {
+  border-color: var(--warp-control-border-hover);
   background-color: var(--warp-control-bg-hover);
+  color: var(--warp-control-text-hover);
+  outline: none;
 }
 
 .warp-search-ask-ai-row svg {
   flex-shrink: 0;
-  opacity: 0.7;
+  width: 14px;
+  height: 14px;
+  color: var(--warp-control-icon);
+}
+
+.warp-search-ask-ai-row:hover svg,
+.warp-search-ask-ai-row.warp-search-selected svg {
+  color: var(--warp-control-text-hover);
 }
 
 .warp-search-ask-ai-row__label {
   flex: 1;
+  min-width: 0;
   text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Highlighted query inside the Ask AI label (e.g. `Ask AI: "<query>"`).
+   Keeps the label color but raises weight so the typed query reads as the
+   subject of the action. `--sl-color-white` is mode-aware (warm off-white
+   in dark, near-black in light) so one rule covers both themes. */
+.warp-search-ask-ai-row__query {
+  font-weight: 600;
+  color: var(--sl-color-white);
 }
 
+/* Keyboard shortcut chip — always visible (replaces the previous Enter
+   hint that only appeared on keyboard selection). Surface mirrors
+   `.warp-sidebar-search button[data-open-modal] kbd` (§16) so the modal's
+   AI shortcut and the sidebar trigger's ⌘K share one chip style. */
 .warp-search-ask-ai-row__kbd {
-  display: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.125rem;
+  flex-shrink: 0;
   padding: 0.125rem 0.375rem;
   border-radius: var(--sl-radius-xs);
   background: rgba(255, 255, 255, 0.08);
   color: var(--sl-color-gray-3);
   font-family: var(--__sl-font);
   font-size: var(--sl-text-2xs);
-  font-weight: 400;
+  font-weight: 500;
   line-height: 1.2;
 }
 
@@ -1097,8 +1496,53 @@ site-search #starlight__search .warp-search-selected {
   background: rgba(0, 0, 0, 0.06);
 }
 
-/* Show the Enter hint only when the row is selected via keyboard */
-.warp-search-selected .warp-search-ask-ai-row__kbd,
-.warp-search-ask-ai-row.warp-search-selected .warp-search-ask-ai-row__kbd {
-  display: inline-block;
+/* `+` separator between the modifier glyph and the letter inside the kbd
+   chip. A hair of inline margin keeps `⌘ + I` from collapsing to `⌘+I`
+   while staying tighter than a regular space. */
+.warp-search-ask-ai-row__kbd-plus {
+  margin: 0 0.0625rem;
+}
+
+/* Keyboard hints strip below the Ask AI row. A quiet single-line legend
+   of the available shortcuts (↑↓ Navigate · ↵ Select · Esc Close). Hidden
+   on narrow viewports to prioritize screen real estate; keyboard hints
+   are also less relevant on touch devices. */
+.warp-search-keyboard-hints {
+  display: none;
+  align-items: center;
+  gap: 0.875rem;
+  font-size: var(--sl-text-2xs);
+  color: var(--sl-color-gray-3);
+}
+
+@media (min-width: 50rem) {
+  .warp-search-keyboard-hints {
+    display: flex;
+  }
+}
+
+.warp-search-keyboard-hints__group {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.warp-search-keyboard-hints__kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 0.3125rem;
+  border-radius: var(--sl-radius-xs);
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--sl-color-gray-2);
+  font-family: var(--__sl-font);
+  font-size: var(--sl-text-2xs);
+  font-weight: 500;
+  line-height: 1;
+}
+
+:root[data-theme='light'] .warp-search-keyboard-hints__kbd {
+  background: rgba(0, 0, 0, 0.06);
 }