diff --git a/scripts/cmux-next/build-agent-pane-web.sh b/scripts/cmux-next/build-agent-pane-web.sh
index 8343d52448c6..c531828f8c25 100755
--- a/scripts/cmux-next/build-agent-pane-web.sh
+++ b/scripts/cmux-next/build-agent-pane-web.sh
@@ -49,56 +49,47 @@ LOADER="$(bun scripts/pages/split-strings.mjs "$SRC/acpmux/generated/strings.jso
 # common languages, not every grammar and the WebAssembly engine. The React Compiler
 # runs on first-party sources, as in the Vite dev server; skipped components are listed.
 # Dynamic imports (shiki's grammars, KaTeX) become chunks/ beside pane.js, loaded when used.
-# --css-inputs lists the stylesheets the pane imports; the bundle drops them, so each must be
-# one of the sheets the page's <style> is written from (checked below).
-bun scripts/agent-pane/bundle.mjs "$SRC/acpmux/main.tsx" "$SRC/acpmux/shiki" "$WORK/pane/pane.js" --split --css-inputs "$WORK/imported-sheets"
+# --css-inputs lists every stylesheet the pane imports, in the order the page applies them: the
+# import graph of acpmux/pageStyles.ts (the page's own sheets) and then main.tsx, as esbuild orders
+# a CSS bundle. The bundle drops CSS, so the page's <style> is written from that list (below).
+bun scripts/agent-pane/bundle.mjs "$SRC/acpmux/main.tsx" "$SRC/acpmux/shiki" "$WORK/pane/pane.js" --split --css-inputs "$WORK/sheets" --page-styles "$SRC/acpmux/pageStyles.ts"
 # Code highlighting runs in a worker beside the page (conversation/highlightPool.ts): Pierre's
 # worker, bundled with the same trimmed shiki. It is the entry point itself because the package
 # marks the module side-effect free, so an import of it would be dropped. Both hosts serve it
 # with a policy that allows no network.
 bun scripts/agent-pane/bundle.mjs node_modules/@pierre/diffs/dist/worker/worker.js "$SRC/acpmux/shiki" "$WORK/highlight-worker.js"
 
-# The desktop layer first (R139): chrome never selects, so Cmd-A highlights only
-# fields and `.selectable` content. desktop.ts imports it, but the bundle drops CSS.
-cat "$ROOT/webviews/src/pages/shared/desktop.css" > "$WORK/styles.css"
-# The liquid glass surface and tokens, which desktop.ts imports beside desktop.css.
-cat "$ROOT/webviews/src/ui/glass/glass.css" >> "$WORK/styles.css"
-# The shared shimmer wave, which desktop.ts imports too.
-cat "$ROOT/webviews/src/ui/wave.css" >> "$WORK/styles.css"
-# The shared stylesheet opens with a Tailwind @import that only Vite resolves;
-# the pane needs just its variables and rules, so drop @import lines.
-grep -v '^@import ' "$SRC/shared/styles.css" >> "$WORK/styles.css"
-# One surface for every menu and popover (the pane does not load ui.css, which imports it).
-cat "$ROOT/webviews/src/ui/popupSurface.css" >> "$WORK/styles.css"
-# The shared icon+label button (New Tab's tools, the composer footer), imported by main.tsx.
-cat "$ROOT/webviews/src/ui/ghost.css" >> "$WORK/styles.css"
-# The shared find pill (Find in Chat), imported by ui/FindPill.tsx.
-cat "$ROOT/webviews/src/ui/findPill.css" >> "$WORK/styles.css"
-# The import suggestion cards in New Tab's notice slot (ui/ImportCards.tsx).
-cat "$ROOT/webviews/src/ui/importCards.css" >> "$WORK/styles.css"
-cat "$ROOT/webviews/src/theme/messages.css" "$SRC/acpmux/styles.css" "$SRC/acpmux/conversation/conversation.css" "$SRC/acpmux/chips/chips.css" "$SRC/acpmux/previewCard/previewCard.css" >> "$WORK/styles.css"
-# changes.css @imports git.css; an @import never loads here (mid-sheet, and the CSP loads no
-# style file), so inline it where the import stood.
-cat "$SRC/acpmux/changes/git.css" >> "$WORK/styles.css"
-grep -v '^@import ' "$SRC/acpmux/changes/changes.css" >> "$WORK/styles.css"
-cat "$SRC/acpmux/handoff/styles.css" "$SRC/acpmux/checkpoints/styles.css" "$SRC/acpmux/composerControls.css" "$SRC/acpmux/composerStates.css" "$SRC/acpmux/composerLocation.css" "$SRC/acpmux/savedEnvironments.css" "$SRC/acpmux/bottomStack.css" "$SRC/acpmux/composerAttachments.css" "$SRC/acpmux/composer/dropOverlay.css" "$SRC/acpmux/markdownField.css" \
-  "$SRC/acpmux/modelPicker.css" "$SRC/acpmux/keys.css" "$SRC/acpmux/summary/summary.css" "$SRC/acpmux/subagents/subagents.css" "$SRC/acpmux/header/header.css" "$SRC/acpmux/needsYou/needsYou.css" "$SRC/acpmux/newtab/screen.css" "$SRC/acpmux/newtab/history.css" "$SRC/acpmux/threadMinimap/threadMinimap.css" >> "$WORK/styles.css"
-cat "$SRC/acpmux/turnChanges/turnChanges.css" "$SRC/acpmux/Inspector.css" "$SRC/acpmux/inspector/inspector.css" "$SRC/acpmux/inspector/ContextSection.css" "$SRC/acpmux/dictation.css" >> "$WORK/styles.css"
-cat "$SRC/acpmux/addProject.css" "$SRC/acpmux/harnesses/harnesses.css" "$SRC/acpmux/replay/replay.css" "$SRC/acpmux/offer/suggestedTasks.css" "$SRC/acpmux/started/startedSessions.css" "$SRC/acpmux/started/sessionHover.css" "$SRC/acpmux/conversation/SubsessionCallCard.css" "$SRC/acpmux/conversation/AgentMessageRow.css" "$ROOT/webviews/src/markdown-task-checkbox.css" >> "$WORK/styles.css"
+# The page's <style>: every sheet in that list, in its order (desktop.css first, R139: chrome never
+# selects, so Cmd-A highlights only fields and `.selectable` content). A sheet's @import of a
+# sibling never loads here (mid-sheet, and the CSP loads no style file); the list carries the
+# sibling ahead of it (git.css before changes.css), so the line is dropped. Tailwind's entry is
+# compiled over the pane's sources and goes last (below), not as written.
+TAILWIND=src/agent-session/acpmux/tailwind.css
+SIBLING_IMPORT='s/^[ \t]*\@import\s+["\x27]\.\.?\/[^"\x27]+\.css["\x27];[ \t]*(?:\n|\z)//mgi'
+[ -s "$WORK/sheets" ] || { echo "error: bundle.mjs listed no stylesheets for the agent pane" >&2; exit 1; }
+: > "$WORK/styles.css"
+while IFS= read -r sheet; do
+  [ "$sheet" = "$TAILWIND" ] && continue
+  perl -0777 -pe "$SIBLING_IMPORT" "$ROOT/webviews/$sheet" >> "$WORK/styles.css"
+done < "$WORK/sheets"
 # Every sheet the pane imports ships: a missing one renders its component unstyled in the app
 # only (the dev server loads imports), as New Tab's tools did.
 while IFS= read -r sheet; do
+  [ "$sheet" = "$TAILWIND" ] && continue
+  perl -0777 -pe "$SIBLING_IMPORT" "$ROOT/webviews/$sheet" > "$WORK/sheet.css"
   perl -0777 -e 'open my $all, "<", shift or die; open my $one, "<", shift or die; exit(index(<$all>, <$one>) < 0)' \
-    "$WORK/styles.css" "$ROOT/webviews/$sheet" && continue
-  echo "error: the agent pane imports webviews/$sheet but build-agent-pane-web.sh does not add it to the page's styles" >&2
+    "$WORK/styles.css" "$WORK/sheet.css" && continue
+  echo "error: the agent pane imports webviews/$sheet but its rules are missing from the page's styles" >&2
   exit 1
-done < "$WORK/imported-sheets"
-if grep -n '^@import ' "$WORK/styles.css" >&2; then
-  echo "error: an @import reached the agent pane's styles, where it never loads; inline the sheet in build-agent-pane-web.sh" >&2
+done < "$WORK/sheets"
+# Any other @import (with a media or layer condition, mid-line, in any letter case: CSS keywords
+# ignore case) is left in place, where the browser drops it: refuse it, outside comments.
+if perl -0777 -ne 's{/\*.*?\*/}{}gs; exit(/\@import\b/i ? 0 : 1)' "$WORK/styles.css"; then
+  echo "error: an @import reached the agent pane's styles, where it never loads; import the sheet from a module (acpmux/pageStyles.ts) instead" >&2
   exit 1
 fi
 # Tailwind utilities last (acpmux/tailwind.css): compiled over the classes the pane's sources use.
-bun scripts/agent-pane/tailwind-css.mjs "$SRC/acpmux/tailwind.css" >> "$WORK/styles.css"
+bun scripts/agent-pane/tailwind-css.mjs "$ROOT/webviews/$TAILWIND" >> "$WORK/styles.css"
 
 # Same-origin script files only (no inline script, no eval; WebAssembly compiles for Ondine's Mermaid diagrams) and inline style. No connection of its own: the
 # host's native transport (AgentPaneTransport) carries acpmux. No remote loads. Frames show only loopback web
diff --git a/webviews/dev-server/galleryHost.ts b/webviews/dev-server/galleryHost.ts
index cf0400aad155..f8e3e1fd2e28 100644
--- a/webviews/dev-server/galleryHost.ts
+++ b/webviews/dev-server/galleryHost.ts
@@ -6,8 +6,9 @@
 //   virtual:cmux-gallery/themes            every theme the app ships (Resources/ghostty/themes, Resources/cmux-themes)
 //   virtual:cmux-gallery/web-theme         WebTheme.bootstrapScript, the script the app injects at
 //                                          document start in every cmux web view (WebTheme.swift)
-//   virtual:cmux-gallery/agent-pane.css    the agent pane's shipped stylesheet, the files and the
-//                                          order scripts/cmux-next/build-agent-pane-web.sh inlines
+//   virtual:cmux-gallery/agent-pane.css    the agent pane's shipped stylesheet: the sheets
+//                                          acpmux/pageStyles.ts imports, in the order
+//                                          scripts/cmux-next/build-agent-pane-web.sh ships them
 //   virtual:cmux-gallery/metrics           the chrome metrics (MetricTunables.swift: sidebar width,
 //                                          tab strip height, ...) per density, for window mode
 //   virtual:cmux-gallery/fixtures          every shared fixture JSON (schemas/gallery/fixtures.json
@@ -30,8 +31,8 @@ export const THEMES_DIR = path.join(repoRoot, "Resources/ghostty/themes");
 /** cmux's own themes, which the app's bundle phase adds to Ghostty's themes folder. */
 export const CMUX_THEMES_DIR = path.join(repoRoot, "Resources/cmux-themes");
 const WEB_THEME_SWIFT = path.join(repoRoot, "Packages/macOS/CmuxNext/Sources/CmuxNextDesign/Windows/WebTheme.swift");
-const PANE_BUILD_SCRIPT = path.join(repoRoot, "scripts/cmux-next/build-agent-pane-web.sh");
 const SESSION = path.join(webviewsRoot, "src/agent-session");
+const PANE_PAGE_STYLES = path.join(SESSION, "acpmux/pageStyles.ts");
 const galleryDir = path.join(webviewsRoot, "src/gallery");
 
 const FIXTURE_INDEX = path.join(repoRoot, "schemas/gallery/fixtures.json");
@@ -116,22 +117,31 @@ export function readWebThemeBootstrap(file = WEB_THEME_SWIFT): string {
   return script.replace(/\\\\/g, "\\");
 }
 
+/** A sheet's `@import "./x.css";` of a sibling, which the page carries ahead of it (not inlined). */
+const SIBLING_IMPORT = /^[ \t]*@import\s+["'](\.\.?\/[^"']+\.css)["'];[ \t]*$/gim;
+
 /**
- * The pane's stylesheets in shipped order: desktop.css, the shared stylesheet without its Tailwind
- * @import lines, then every `$SRC/...css` file the build script concatenates. (KaTeX's stylesheet
- * loads beside it; the shipped copy only inlines its fonts.)
+ * The pane's stylesheets in shipped order: the sheets acpmux/pageStyles.ts imports, each after the
+ * siblings it @imports (changes.css after git.css), then acpmux/tailwind.css, which
+ * build-agent-pane-web.sh compiles and puts last. The page also ships every sheet a component
+ * imports and pageStyles.ts leaves out, after these; in the gallery those load with the pane's own
+ * modules (main.tsx), as they do in the dev server. (KaTeX's stylesheet loads beside it; the
+ * shipped copy only inlines its fonts.)
  */
-export function agentPaneStylesheets(script = PANE_BUILD_SCRIPT): string[] {
-  const text = fs.readFileSync(script, "utf8");
-  // `$SRC/...` (the session sources) and `$ROOT/webviews/src/...` (shared ui/ files such as
-  // ui/popupSurface.css), in the script's order, so the gallery pane matches the shipped one.
-  const files = [...text.matchAll(/"\$(SRC|ROOT\/webviews\/src)\/([^"$]+\.css)"/g)].map((match) =>
-    match[1] === "SRC" ? path.join(SESSION, match[2]!) : path.join(webviewsRoot, "src", match[2]!),
-  );
-  if (!files.some((file) => file.endsWith("shared/styles.css")))
-    throw new Error("gallery: build-agent-pane-web.sh no longer names shared/styles.css; update agentPaneStylesheets");
-  const desktop = path.join(webviewsRoot, "src/pages/shared/desktop.css");
-  return [desktop, ...files.filter((file) => file !== desktop)];
+export function agentPaneStylesheets(pageStyles = PANE_PAGE_STYLES): string[] {
+  const text = fs.readFileSync(pageStyles, "utf8");
+  const files: string[] = [];
+  const add = (file: string) => {
+    if (files.includes(file)) return;
+    const css = fs.existsSync(file) ? fs.readFileSync(file, "utf8") : "";
+    for (const match of css.matchAll(SIBLING_IMPORT)) add(path.resolve(path.dirname(file), match[1]!));
+    if (!files.includes(file)) files.push(file);
+  };
+  for (const match of text.matchAll(/^import\s+"([^"]+\.css)";/gm))
+    add(path.resolve(path.dirname(pageStyles), match[1]!));
+  if (!files.some((file) => file.endsWith("agent-session/shared/styles.css")))
+    throw new Error("gallery: acpmux/pageStyles.ts no longer imports shared/styles.css; update agentPaneStylesheets");
+  return [...files, path.join(SESSION, "acpmux/tailwind.css")];
 }
 
 export type Revision = { sha: string; subject: string; committedAt: number; branch: string };
@@ -160,16 +170,6 @@ export function readRevision(root = repoRoot): Revision {
 }
 
 function agentPaneCSS(): string {
-  const inlineRelativeImports = (file: string, css: string, seen = new Set<string>()): string =>
-    css.replace(/^@import\s+["']([^"']+)["'];\s*$/gm, (statement, specifier: string) => {
-      if (!specifier.startsWith(".")) return statement;
-      const imported = path.resolve(path.dirname(file), specifier);
-      if (seen.has(imported)) return "";
-      seen.add(imported);
-      if (!fs.existsSync(imported)) return statement;
-      return inlineRelativeImports(imported, fs.readFileSync(imported, "utf8"), seen);
-    });
-
   return agentPaneStylesheets()
     .map((file) => {
       const css = fs.readFileSync(file, "utf8");
@@ -177,7 +177,7 @@ function agentPaneCSS(): string {
         ? css.replace(/^@import .*$/gm, "")
         : file.endsWith("acpmux/tailwind.css")
           ? `${css}\n${tailwindSources()}`
-          : inlineRelativeImports(file, css);
+          : css.replace(SIBLING_IMPORT, "");
       return `/* ${path.relative(webviewsRoot, file)} */\n${body}`;
     })
     .join("\n");
@@ -229,14 +229,14 @@ export function galleryModules(): Plugin {
         response.setHeader("Content-Type", "text/javascript; charset=utf-8");
         response.end(readVegaLibrary());
       });
-      // The sources live partly outside webviews/ (the themes, WebTheme.swift, the build script),
-      // where Vite does not watch: watch them, and reload the module built from a changed one.
+      // The sources live partly outside webviews/ (the themes, WebTheme.swift), where Vite does not
+      // watch: watch them, and reload the module built from a changed one (pageStyles.ts too).
       const roots = fixtureRoots().map((root) => path.join(repoRoot, root));
       server.watcher.add([
         THEMES_DIR,
         CMUX_THEMES_DIR,
         WEB_THEME_SWIFT,
-        PANE_BUILD_SCRIPT,
+        PANE_PAGE_STYLES,
         FIXTURE_INDEX,
         METRICS_SWIFT,
         ...roots,
@@ -251,7 +251,7 @@ export function galleryModules(): Plugin {
               ? `\0${THEMES_ID}`
               : file === WEB_THEME_SWIFT
                 ? `\0${WEB_THEME_ID}`
-                : file === PANE_BUILD_SCRIPT
+                : file === PANE_PAGE_STYLES
                   ? PANE_CSS_PATH
                   : undefined;
         const module = id ? server.moduleGraph.getModuleById(id) : undefined;
diff --git a/webviews/scripts/agent-pane/bundle.mjs b/webviews/scripts/agent-pane/bundle.mjs
index d43664c46377..0ee78e727145 100644
--- a/webviews/scripts/agent-pane/bundle.mjs
+++ b/webviews/scripts/agent-pane/bundle.mjs
@@ -2,12 +2,18 @@
 // Compiler on, the same compiler the Vite dev server runs (vite.config.ts).
 //
 //   bun scripts/agent-pane/bundle.mjs <entry> <shiki alias dir> <outfile> [--report <file>] [--split]
+//     [--css-inputs <file> [--page-styles <module>] [--css-inputs-only]]
 //
 // --split writes the code behind dynamic imports (shiki's grammars, KaTeX) as chunks/ beside
 // <outfile>, so the page's first script is only what its first frame runs.
 //
-// --css-inputs <file> lists, one per line relative to webviews/, every stylesheet the bundle
-// imports. The bundle drops CSS, so the page build checks each one ships in the page.
+// --css-inputs <file> lists, one per line relative to webviews/, every stylesheet the page imports,
+// in the order the page applies them: esbuild's order for the CSS bundle (import order, each sheet
+// at its first import, after the sheets it @imports), then any sheet only a lazily loaded chunk
+// imports, by path. The bundle drops CSS: the page build writes its <style> from this list
+// (build-agent-pane-web.sh), so a sheet a component imports always ships.
+// --page-styles <module> is imported ahead of <entry> for that list: the page's own sheets, which
+// no component imports, in cascade order (acpmux/pageStyles.ts).
 // --css-inputs-only writes just that list: no React Compiler, no minify, nothing written to
 // <outfile>, so a test can ask for it in about a second.
 //
@@ -38,6 +44,8 @@ const split = rest.includes("--split");
 const cssInputsIndex = rest.indexOf("--css-inputs");
 const cssInputsFile = cssInputsIndex >= 0 ? rest[cssInputsIndex + 1] : undefined;
 const cssInputsOnly = rest.includes("--css-inputs-only");
+const pageStylesIndex = rest.indexOf("--page-styles");
+const pageStyles = pageStylesIndex >= 0 ? rest[pageStylesIndex + 1] : undefined;
 const srcRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "../../src");
 
 const mode = reactCompilerMode();
@@ -50,43 +58,66 @@ const reactCompiler = reactCompilerPlugin({
   onDiagnostic: (diagnostic) => bailouts.push(diagnostic),
 });
 
-const result = await build({
-  entryPoints: [entry],
+const options = {
   bundle: true,
   format: "esm",
   platform: "browser",
   target: "es2022",
   define: { "process.env.NODE_ENV": '"production"' },
-  minify: !cssInputsOnly,
-  write: !cssInputsOnly,
-  legalComments: "none",
   // An imported PNG becomes a data URL: a page ships as one index.html and its CSP allows
   // `img-src data:` only (the Settings page's Chief Pet mascots).
   loader: { ".png": "dataurl" },
   alias: shikiAlias === "-" ? {} : { shiki: path.resolve(shikiAlias) },
   logLevel: "warning",
-  ...(split
-    ? {
-        splitting: true,
-        outdir: path.dirname(outfile),
-        entryNames: path.basename(outfile, ".js"),
-        chunkNames: "chunks/[name]-[hash]",
-      }
-    : { outfile }),
-  plugins: cssInputsOnly
-    ? [tailwindPlugin, jsonParsePlugin, katexStylePlugin({ split })]
-    : [reactCompiler, tailwindPlugin, jsonParsePlugin, katexStylePlugin({ split })],
-  metafile: Boolean(cssInputsFile),
-});
-if (cssInputsFile) {
+};
+
+/** Every stylesheet the page imports, in the order the page applies them (--css-inputs above). */
+async function stylesheets() {
   const webviewsRoot = path.dirname(srcRoot);
-  const sheets = Object.keys(result.metafile.inputs)
-    .filter((input) => input.endsWith(".css") && !input.includes("node_modules/"))
-    .map((input) => path.relative(webviewsRoot, path.resolve(input)))
-    .sort();
-  await writeFile(cssInputsFile, sheets.map((sheet) => sheet + "\n").join(""));
+  const sourcefile = "page-stylesheets.js";
+  const imports = [pageStyles, entry].filter(Boolean).map((file) => `import ${JSON.stringify(path.resolve(file))};`);
+  const result = await build({
+    ...options,
+    stdin: { contents: imports.join("\n"), resolveDir: process.cwd(), sourcefile, loader: "js" },
+    // Split as the page is, so a sheet only a lazily loaded chunk imports stays out of the order.
+    splitting: true,
+    outdir: path.join(path.dirname(outfile), "stylesheets"),
+    write: false,
+    metafile: true,
+    plugins: [tailwindPlugin, jsonParsePlugin, katexStylePlugin({ split: true })],
+  });
+  const local = (input) => input.endsWith(".css") && !input.includes("node_modules/");
+  const relative = (input) => path.relative(webviewsRoot, path.resolve(input));
+  const outputs = result.metafile.outputs;
+  // The page's own CSS bundle; each dynamic import is an entry point of its own.
+  const bundle = Object.values(outputs).find((output) => output.entryPoint === sourcefile)?.cssBundle;
+  const ordered = bundle ? Object.keys(outputs[bundle].inputs).filter(local).map(relative) : [];
+  const all = Object.keys(result.metafile.inputs).filter(local).map(relative);
+  // No page bundle while the graph has sheets means esbuild's metafile changed shape: fail rather
+  // than ship every sheet in path order.
+  if (!bundle && all.length)
+    throw new Error("bundle.mjs: the page imports stylesheets but esbuild wrote no CSS bundle");
+  return [...ordered, ...all.filter((sheet) => !ordered.includes(sheet)).sort()];
 }
 
+if (cssInputsFile) await writeFile(cssInputsFile, (await stylesheets()).map((sheet) => sheet + "\n").join(""));
+if (!cssInputsOnly)
+  await build({
+    ...options,
+    entryPoints: [entry],
+    minify: true,
+    legalComments: "none",
+    ...(split
+      ? {
+          splitting: true,
+          outdir: path.dirname(outfile),
+          entryNames: path.basename(outfile, ".js"),
+          chunkNames: "chunks/[name]-[hash]",
+        }
+      : { outfile }),
+    plugins: [reactCompiler, tailwindPlugin, jsonParsePlugin, katexStylePlugin({ split })],
+  });
+
 bailouts.sort((a, b) => `${a.file}:${a.line}`.localeCompare(`${b.file}:${b.line}`));
 if (bailouts.length) {
   console.error(
diff --git a/webviews/src/agent-session/acpmux/dev.tsx b/webviews/src/agent-session/acpmux/dev.tsx
index ec1032a72cae..0153540158e7 100644
--- a/webviews/src/agent-session/acpmux/dev.tsx
+++ b/webviews/src/agent-session/acpmux/dev.tsx
@@ -1,34 +1,7 @@
-// Dev server entry (vite.config.acpmux-pane.mjs): the bundled pane inlines
-// these stylesheets (scripts/cmux-next/build-agent-pane-web.sh); here Vite
-// serves them with hot reload.
-// desktop.css first, as in the bundle: it defines the popup surface (--surface-popup) and type scale.
-import "../../pages/shared/desktop.css";
-// The liquid glass next, as in the bundle: a surface's own sheet (the composer's queue fill) must
-// come after `.ui-glass`, not before it as desktop.ts's import would put it.
-import "../../ui/glass/glass.css";
-import "../../ui/popupSurface.css";
-import "../shared/styles.css";
-import "./styles.css";
-import "./conversation/conversation.css";
-import "./chips/chips.css";
-import "./previewCard/previewCard.css";
-import "./changes/changes.css";
-import "./turnChanges/turnChanges.css";
-import "./summary/summary.css";
-import "./subagents/subagents.css";
-import "./header/header.css";
-import "./needsYou/needsYou.css";
-import "./composerControls.css";
-import "./composerStates.css";
-import "./composerLocation.css";
-import "./bottomStack.css";
-import "./composerAttachments.css";
-import "./markdownField.css";
-import "./modelPicker.css";
-import "./keys.css";
-import "./newtab/screen.css";
-import "./newtab/history.css";
-import "./threadMinimap/threadMinimap.css";
+// Dev server entry (vite.config.acpmux-pane.mjs): the page's own stylesheets first, in the order
+// the bundled pane ships them (pageStyles.ts; scripts/cmux-next/build-agent-pane-web.sh); here
+// Vite serves them with hot reload.
+import "./pageStyles";
 import { devHostParams, installDevHost } from "../../dev-host/host";
 import { seedDevRecents } from "./devRecents";
 
diff --git a/webviews/src/agent-session/acpmux/pageStyles.ts b/webviews/src/agent-session/acpmux/pageStyles.ts
new file mode 100644
index 000000000000..ff5b18e722dd
--- /dev/null
+++ b/webviews/src/agent-session/acpmux/pageStyles.ts
@@ -0,0 +1,64 @@
+// The agent pane's own stylesheets, in the order its page applies them. The page ships every sheet
+// the pane imports: build-agent-pane-web.sh writes its one <style> from the import graph of this
+// module and then main.tsx (scripts/agent-pane/bundle.mjs --css-inputs), in import order, so a
+// component's own `import "./x.css"` ships with no list to update. The dev server (dev.tsx) and the
+// gallery (dev-server/galleryHost.ts) load this module's sheets in the same order.
+//
+// Listed here: the sheets no component imports (the desktop layer, the base layer, the transcript
+// and composer rules), and the component sheets whose place in the cascade the page held before
+// its list came from imports. Leave a new component's sheet out: it ships after these, at its
+// first import.
+//
+// desktop.css first: it defines the popup surface (--surface-popup) and type scale (R139).
+import "../../pages/shared/desktop.css";
+// The liquid glass next: a surface's own sheet (the composer's queue fill) must come after
+// `.ui-glass`, not before it as desktop.ts's import would put it.
+import "../../ui/glass/glass.css";
+// The shared shimmer wave, which desktop.ts imports too.
+import "../../ui/wave.css";
+import "../shared/styles.css";
+// One surface for every menu and popover (the pane does not load ui.css, which imports it).
+import "../../ui/popupSurface.css";
+import "../../ui/ghost.css";
+import "../../ui/findPill.css";
+import "../../ui/importCards.css";
+import "../../theme/messages.css";
+import "./styles.css";
+import "./conversation/conversation.css";
+import "./chips/chips.css";
+import "./previewCard/previewCard.css";
+// changes.css @imports git.css, which the page carries ahead of it (an @import never loads there).
+import "./changes/changes.css";
+import "./handoff/styles.css";
+import "./checkpoints/styles.css";
+import "./composerControls.css";
+import "./composerStates.css";
+import "./composerLocation.css";
+import "./savedEnvironments.css";
+import "./bottomStack.css";
+import "./composerAttachments.css";
+import "./composer/dropOverlay.css";
+import "./markdownField.css";
+import "./modelPicker.css";
+import "./keys.css";
+import "./summary/summary.css";
+import "./subagents/subagents.css";
+import "./header/header.css";
+import "./needsYou/needsYou.css";
+import "./newtab/screen.css";
+import "./newtab/history.css";
+import "./threadMinimap/threadMinimap.css";
+import "./turnChanges/turnChanges.css";
+import "./Inspector.css";
+import "./inspector/inspector.css";
+import "./inspector/ContextSection.css";
+import "./dictation.css";
+import "./addProject.css";
+import "./harnesses/harnesses.css";
+import "./replay/replay.css";
+import "./offer/suggestedTasks.css";
+import "./started/startedSessions.css";
+import "./started/sessionHover.css";
+import "./conversation/SubsessionCallCard.css";
+import "./conversation/AgentMessageRow.css";
+import "../../markdown-task-checkbox.css";
diff --git a/webviews/test/agent-pane-styles.test.ts b/webviews/test/agent-pane-styles.test.ts
index 21ff03400e98..2a3d6acf1f06 100644
--- a/webviews/test/agent-pane-styles.test.ts
+++ b/webviews/test/agent-pane-styles.test.ts
@@ -2,7 +2,9 @@
 // list of sheets. A sheet a component imports but the list leaves out ships no rules, so in the
 // app the component renders unstyled while the dev server (which loads imports) looks right.
 // That shipped New Tab's tools without their ghost-button geometry (cx-s6zvc), and the
-// Harnesses, Replay and Add Project screens without theirs.
+// Harnesses, Replay and Add Project screens without theirs. While the list was kept by hand, each
+// new import also stopped the page build (ContextSection.css, then ui/wave.css from desktop.ts), and
+// with it every fleet app build; the list now comes from the imports (bundle.mjs --css-inputs).
 //
 // The page is the built resource (CI builds the web bundles before this suite; locally run
 // scripts/cmux-next/build-agent-pane-web.sh first).
@@ -11,6 +13,7 @@ import { spawnSync } from "node:child_process";
 import fs from "node:fs";
 import os from "node:os";
 import path from "node:path";
+import { agentPaneStylesheets } from "../dev-server/galleryHost";
 
 setDefaultTimeout(180_000);
 
@@ -26,36 +29,88 @@ if (!built) console.warn("agent-pane-styles: skipping (run scripts/cmux-next/bui
 /** Trailing spaces are stripped from the page, so compare without them. */
 const normalize = (css: string) => css.replace(/[ \t]+$/gm, "").trim();
 
+/** bundle.mjs's list of the page's stylesheets, as build-agent-pane-web.sh asks for it. */
+let listed: string[] | undefined;
+function listedSheets(): string[] {
+  if (listed) return listed;
+  const work = fs.mkdtempSync(path.join(os.tmpdir(), "agent-pane-styles-"));
+  try {
+    const list = path.join(work, "sheets.txt");
+    const bundle = spawnSync(
+      "bun",
+      [
+        "scripts/agent-pane/bundle.mjs",
+        "src/agent-session/acpmux/main.tsx",
+        "src/agent-session/acpmux/shiki",
+        path.join(work, "pane/pane.js"),
+        "--split",
+        "--css-inputs",
+        list,
+        "--page-styles",
+        "src/agent-session/acpmux/pageStyles.ts",
+        "--css-inputs-only",
+      ],
+      { cwd: webviews, encoding: "utf8" },
+    );
+    expect(bundle.status, bundle.stderr).toBe(0);
+    listed = fs.readFileSync(list, "utf8").split("\n").filter(Boolean);
+    return listed;
+  } finally {
+    fs.rmSync(work, { recursive: true, force: true });
+  }
+}
+
+/** Tailwind's entry ships compiled over the pane's sources, not as written. */
+const TAILWIND = "src/agent-session/acpmux/tailwind.css";
+
+/** A sheet as the page carries it: its @import of a sibling dropped (the sibling ships ahead of it). */
+const shipped = (sheet: string) =>
+  normalize(
+    fs
+      .readFileSync(path.join(webviews, sheet), "utf8")
+      .replace(/^[ \t]*@import\s+["']\.\.?\/[^"']+\.css["'];[ \t]*(?:\n|$)/gim, ""),
+  );
+
+describe("agent pane stylesheet list", () => {
+  test("names every sheet the pane imports, from its own modules and its components'", () => {
+    const sheets = listedSheets();
+    for (const sheet of [
+      "src/pages/shared/desktop.css",
+      "src/agent-session/shared/styles.css",
+      "src/ui/ghost.css",
+      "src/ui/wave.css",
+      "src/agent-session/acpmux/inspector/ContextSection.css",
+      "src/agent-session/acpmux/changes/git.css",
+    ])
+      expect(sheets).toContain(sheet);
+    expect(new Set(sheets).size).toBe(sheets.length);
+  });
+
+  test("keeps the cascade order: pageStyles.ts's sheets first, as the dev server and gallery load them", () => {
+    const sheets = listedSheets();
+    const at = (sheet: string) => sheets.indexOf(sheet);
+    expect(sheets[0]).toBe("src/pages/shared/desktop.css");
+    // A sheet's @import comes ahead of it, as a browser applies it.
+    expect(at("src/agent-session/acpmux/changes/git.css")).toBe(at("src/agent-session/acpmux/changes/changes.css") - 1);
+    const gallery = agentPaneStylesheets()
+      .map((file) => path.relative(webviews, file))
+      .filter((sheet) => sheet !== TAILWIND);
+    expect(sheets.slice(0, gallery.length)).toEqual(gallery);
+  });
+});
+
 describe.skipIf(!built)("agent pane page", () => {
-  test("ships the rules of every stylesheet the pane imports", () => {
-    const work = fs.mkdtempSync(path.join(os.tmpdir(), "agent-pane-styles-"));
-    try {
-      const list = path.join(work, "sheets.txt");
-      const bundle = spawnSync(
-        "bun",
-        [
-          "scripts/agent-pane/bundle.mjs",
-          "src/agent-session/acpmux/main.tsx",
-          "src/agent-session/acpmux/shiki",
-          path.join(work, "pane/pane.js"),
-          "--split",
-          "--css-inputs",
-          list,
-          "--css-inputs-only",
-        ],
-        { cwd: webviews, encoding: "utf8" },
-      );
-      expect(bundle.status, bundle.stderr).toBe(0);
-      const sheets = fs.readFileSync(list, "utf8").split("\n").filter(Boolean);
-      expect(sheets).toContain("src/ui/ghost.css");
-      const style = normalize(fs.readFileSync(page, "utf8"));
-      const missing = sheets.filter(
-        (sheet) => !style.includes(normalize(fs.readFileSync(path.join(webviews, sheet), "utf8"))),
-      );
-      expect(missing).toEqual([]);
-    } finally {
-      fs.rmSync(work, { recursive: true, force: true });
+  test("ships the rules of every stylesheet the pane imports, in the list's order", () => {
+    const sheets = listedSheets();
+    const style = normalize(fs.readFileSync(page, "utf8"));
+    let from = 0;
+    const missing: string[] = [];
+    for (const sheet of sheets.filter((name) => name !== TAILWIND)) {
+      const found = style.indexOf(shipped(sheet), from);
+      if (found < 0) missing.push(sheet);
+      else from = found;
     }
+    expect(missing).toEqual([]);
   });
 
   // A sheet's own @import never loads in the page: mid-stylesheet the browser drops it, and the
@@ -63,7 +118,9 @@ describe.skipIf(!built)("agent pane page", () => {
   // Commit, Push and commit form shipped unstyled.
   test("inlines what its sheets @import, and carries no @import of its own", () => {
     const style = normalize(fs.readFileSync(page, "utf8"));
-    expect(style.match(/^@import .*$/gm) ?? []).toEqual([]);
+    // Outside comments, anywhere on a line, in any case: an indented, conditioned or `@IMPORT` one
+    // never loads either.
+    expect(style.replace(/\/\*[\s\S]*?\*\//g, "").match(/@import\b.*$/gim) ?? []).toEqual([]);
     const git = normalize(fs.readFileSync(path.join(webviews, "src/agent-session/acpmux/changes/git.css"), "utf8"));
     expect(style.includes(git)).toBe(true);
   });
diff --git a/webviews/test/popup-surface-dev.test.ts b/webviews/test/popup-surface-dev.test.ts
index 8b6ed27f5610..f1f470be0a5c 100644
--- a/webviews/test/popup-surface-dev.test.ts
+++ b/webviews/test/popup-surface-dev.test.ts
@@ -1,6 +1,6 @@
 // The popup surface token (`--surface-popup`) lives in pages/shared/desktop.css. The agent pane's
-// dev previews load ui/popupSurface.css without a page, so they must load desktop.css too, or
-// every popup there has no background at all.
+// dev previews (acpmux/pageStyles.ts, which dev.tsx loads) load ui/popupSurface.css without a page,
+// so they must load desktop.css ahead of it, or every popup there has no background at all.
 import { expect, test } from "bun:test";
 import fs from "node:fs";
 import path from "node:path";
@@ -8,7 +8,7 @@ import path from "node:path";
 const source = path.resolve(import.meta.dir, "../src");
 
 test("every dev entry that loads the popup surface also loads the token it reads", () => {
-  const missing = ["agent-session/acpmux/dev.tsx", "agent-session/acpmux-preview/main.tsx"].filter((file) => {
+  const missing = ["agent-session/acpmux/pageStyles.ts", "agent-session/acpmux-preview/main.tsx"].filter((file) => {
     const text = fs.readFileSync(path.join(source, file), "utf8");
     const popup = text.indexOf("ui/popupSurface.css");
     const desktop = text.indexOf("pages/shared/desktop.css");