@linxin666/dsh-client-ui-skin-center 0.3.19 → 0.3.21

package/lib/index.js

@@ -717,6 +717,11 @@ const REVIEWED_SKIN_HOOKS = {
 		manifestSha256: "b22cc82145e1f90f4257af1411724e34a99513761290980fb5f8d25727809808",
 		hooksSha256: "21ac2ad4d4423acf31e3391bfba18ce2d9eec7b192f7a0ba47e8a0c843ff15a5"
 	},
+	"blueprint": {
+		entry: "hooks.mjs",
+		manifestSha256: "e36d9d53aae73c4693e36fc2e130bca2996cda6dcd8f80917627897774232a3e",
+		hooksSha256: "4f6c7db598e72469920d1dbafd5c20cec39f435f225220ffc860636523ed70bb"
+	},
 	"cyber-night": {
 		entry: "hooks.mjs",
 		manifestSha256: "38de22962a80602c22910324e7c5fec171342363760972b7421debeb628d8508",
@@ -744,8 +749,8 @@ const REVIEWED_SKIN_HOOKS = {
 	},
 	"maid-atelier": {
 		entry: "hooks.mjs",
-		manifestSha256: "f36e854f52f24939dfe6318ed6b1ff6fe33d0564e63255a22aaca459af1a84d9",
-		hooksSha256: "8a50922c970337ab07b0843e61b9a771f3a57baf54d18a24e906f13dbb39b4ff"
+		manifestSha256: "7596a704bce65006381d27417d4c12bb09d7e5ede038a6f486cfa58e62314aa5",
+		hooksSha256: "c4668f9cee8192fe3c25e6a01b779bc9ec9ab1980061106e749551a7bafa4153"
 	},
 	"matrix": {
 		entry: "hooks.mjs",
@@ -805,7 +810,7 @@ const REVIEWED_SKIN_HOOKS = {
 	"xp": {
 		entry: "hooks.mjs",
 		manifestSha256: "8bceb95c45b400b67ceb80a7f063b6c2086c0e9f9907a7b72a592d33017623eb",
-		hooksSha256: "823f25fd5f969feb8e51d8ff1577c1cbecbad847b2abac6e5020fc9ef543663f"
+		hooksSha256: "1574d30f271f481a681feddc0608b04b0aec684e323fec0b00481f08450e4eb3"
 	}
 };
 //#endregion
@@ -5484,6 +5489,7 @@ function buildSceneManifestVia(access, token, projectOverride) {
 	const width = typeof projW === "number" && Number.isFinite(projW) && projW > 0 ? Math.floor(projW) : 3840;
 	const height = typeof projH === "number" && Number.isFinite(projH) && projH > 0 ? Math.floor(projH) : 2160;
 	const resourceBase = "/api/skin-center/we/scene-resource/" + token + "/";
+	const resourceUrl = (pkgPath) => resourceBase + pkgPath.split("/").map(encodeURIComponent).join("/");
 	const manifest = {
 		width,
 		height,
@@ -5724,7 +5730,7 @@ function buildSceneManifestVia(access, token, projectOverride) {
 					uv2B64: m.uv2 ? Buffer$1.from(m.uv2.buffer, m.uv2.byteOffset, m.uv2.byteLength).toString("base64") : void 0,
 					indicesB64: Buffer$1.from(m.indices.buffer, m.indices.byteOffset, m.indices.byteLength).toString("base64"),
 					idx32: m.indices instanceof Uint32Array || void 0,
-					texUrl: subTex ? resourceBase + subTex : void 0,
+					texUrl: subTex ? resourceUrl(subTex) : void 0,
 					repeatBase: m.uv.some((value) => value < 0 || value > 1) || void 0,
 					materialPath: m.materialPath,
 					shader,
@@ -5733,8 +5739,8 @@ function buildSceneManifestVia(access, token, projectOverride) {
 					noDepthWrite,
 					tint,
 					tint2,
-					texUrl2: texPath2 ? resourceBase + texPath2 : void 0,
-					lightmapUrl: lightmapPath ? resourceBase + lightmapPath : void 0,
+					texUrl2: texPath2 ? resourceUrl(texPath2) : void 0,
+					lightmapUrl: lightmapPath ? resourceUrl(lightmapPath) : void 0,
 					translucent,
 					gradFade,
 					userColors,
@@ -5796,7 +5802,7 @@ function buildSceneManifestVia(access, token, projectOverride) {
 						manifest.bgLayers.push({
 							name: typeof obj.name === "string" ? obj.name : "fullscreen",
 							shader: typeof pass0.shader === "string" ? pass0.shader : void 0,
-							texUrl: texPath ? resourceBase + texPath : void 0,
+							texUrl: texPath ? resourceUrl(texPath) : void 0,
 							userColors: Object.keys(userColors).length > 0 ? userColors : void 0,
 							userNums: Object.keys(userNums).length > 0 ? userNums : void 0
 						});
@@ -5819,7 +5825,7 @@ function buildSceneManifestVia(access, token, projectOverride) {
 				manifest.sprites = manifest.sprites ?? [];
 				manifest.sprites.push({
 					name: typeof obj.name === "string" ? obj.name : "sprite",
-					texUrl: texPath ? resourceBase + texPath : void 0,
+					texUrl: texPath ? resourceUrl(texPath) : void 0,
 					origin: parseVec3(obj.origin, [
 						0,
 						0,
@@ -5869,7 +5875,7 @@ function buildSceneManifestVia(access, token, projectOverride) {
 				manifest.particles3d = manifest.particles3d ?? [];
 				manifest.particles3d.push({
 					name: typeof obj.name === "string" ? obj.name : "particles",
-					texUrl: texPath ? resourceBase + texPath : void 0,
+					texUrl: texPath ? resourceUrl(texPath) : void 0,
 					origin: [
 						objOrigin[0] + emitterOrigin[0],
 						objOrigin[1] + emitterOrigin[1],
@@ -5914,9 +5920,9 @@ function buildSceneManifestVia(access, token, projectOverride) {
 		if (nameLower.includes("fireflies") || nameLower.includes("motes") || nameLower.includes("dust")) manifest.hasFireflies = true;
 	}
 	const meteorTexPath = allTex.find((p) => p.toLowerCase().includes("shootingstar") || p.toLowerCase().includes("meteor"));
-	if (meteorTexPath) manifest.meteorTex = resourceBase + meteorTexPath;
+	if (meteorTexPath) manifest.meteorTex = resourceUrl(meteorTexPath);
 	const sparkleTexPath = allTex.find((p) => p.toLowerCase().includes("sparkle") || p.toLowerCase().includes("halo") || p.toLowerCase().includes("star"));
-	if (sparkleTexPath) manifest.sparkleTex = resourceBase + sparkleTexPath;
+	if (sparkleTexPath) manifest.sparkleTex = resourceUrl(sparkleTexPath);
 	const sceneObjects = scene.objects;
 	const resolveObjectTransform = (obj) => {
 		const chain = [obj];
@@ -5987,7 +5993,7 @@ function buildSceneManifestVia(access, token, projectOverride) {
 				if (reflTex) manifest.layers.push({
 					name: "Reflection",
 					isReflection: true,
-					texUrl: resourceBase + reflTex,
+					texUrl: resourceUrl(reflTex),
 					x: width / 2,
 					y: height / 2,
 					w: width,
@@ -6095,7 +6101,7 @@ function buildSceneManifestVia(access, token, projectOverride) {
 		const alpha = typeof obj.alpha === "number" && Number.isFinite(obj.alpha) ? Math.min(1, Math.max(0, obj.alpha)) : 1;
 		let videoUrl;
 		try {
-			if (parseTexInternal(file.bytes).isVideoMp4) videoUrl = resourceBase + texPath;
+			if (parseTexInternal(file.bytes).isVideoMp4) videoUrl = resourceUrl(texPath);
 		} catch {}
 		let uvCrop;
 		if (decoded && typeof modelJson.width === "number" && typeof modelJson.height === "number") {
@@ -6118,7 +6124,7 @@ function buildSceneManifestVia(access, token, projectOverride) {
 			if (reflTex) manifest.layers.push({
 				name: "Reflection",
 				isReflection: true,
-				texUrl: resourceBase + reflTex,
+				texUrl: resourceUrl(reflTex),
 				x: layerX,
 				y: layerY,
 				w: lw,
@@ -6128,7 +6134,7 @@ function buildSceneManifestVia(access, token, projectOverride) {
 		}
 		manifest.layers.push({
 			name: typeof obj.name === "string" ? obj.name : "layer",
-			texUrl: resourceBase + texPath,
+			texUrl: resourceUrl(texPath),
 			x: layerX,
 			y: layerY,
 			w: lw,
@@ -6137,7 +6143,7 @@ function buildSceneManifestVia(access, token, projectOverride) {
 			angle: objAngles[2] || 0,
 			uvCrop,
 			shader: layerShader,
-			texUrls: texPaths.length > 1 ? texPaths.map((p) => resourceBase + p) : void 0,
+			texUrls: texPaths.length > 1 ? texPaths.map((p) => resourceUrl(p)) : void 0,
 			userColors: layerUserColors,
 			nums: Object.keys(nums).length > 0 ? nums : void 0,
 			isGround,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linxin666/dsh-client-ui-skin-center",
   "description": "In-GUI skin center for the dsh web GUI — the single skin package: skins are pure asset directories (built-in plus $DSH_HOME/skins) loaded and rendered only by the skin center; live try-on and one-click apply switch atomically in the page (no reload, no cordis.patch.yml rewrite, no restart)",
-  "version": "0.3.19",
+  "version": "0.3.21",
   "type": "module",
   "main": "lib/index.js",
   "exports": {
@@ -12,7 +12,7 @@
   },
   "dsh": {
     "engines": {
-      "dsh": ">=0.1.2-rc.1"
+      "dsh": ">=0.1.5-rc.1"
     },
     "bundle": {
       "patch": "./cordis.patch.yml"
@@ -39,15 +39,15 @@
   },
   "devDependencies": {
     "@deepseek-ai/cordis": "^4.0.2",
-    "@deepseek-ai/dsh-api-remotes": "^0.1.2-rc.1",
-    "@deepseek-ai/dsh-api-workspace-controller": "^0.1.2-rc.1",
-    "@deepseek-ai/dsh-client-locale": "^0.1.2-rc.1",
-    "@deepseek-ai/dsh-client-ui-renderer": "^0.1.2-rc.1",
-    "@deepseek-ai/dsh-client-ui-settings": "^0.1.2-rc.1",
-    "@deepseek-ai/dsh-client-ui-slots": "^0.1.2-rc.1",
-    "@deepseek-ai/dsh-client-ui-theme": "^0.1.2-rc.1",
-    "@deepseek-ai/dsh-host-webserver": "^0.1.2-rc.1",
-    "@deepseek-ai/dsh-settings": "^0.1.2-rc.1",
+    "@deepseek-ai/dsh-api-remotes": "^0.1.5-rc.1",
+    "@deepseek-ai/dsh-api-workspace-controller": "^0.1.5-rc.1",
+    "@deepseek-ai/dsh-client-locale": "^0.1.5-rc.1",
+    "@deepseek-ai/dsh-client-ui-renderer": "^0.1.5-rc.1",
+    "@deepseek-ai/dsh-client-ui-settings": "^0.1.5-rc.1",
+    "@deepseek-ai/dsh-client-ui-slots": "^0.1.5-rc.1",
+    "@deepseek-ai/dsh-client-ui-theme": "^0.1.5-rc.1",
+    "@deepseek-ai/dsh-host-webserver": "^0.1.5-rc.1",
+    "@deepseek-ai/dsh-settings": "^0.1.5-rc.1",
     "@types/jpeg-js": "^0.3.7",
     "@types/node": "^22.20.0",
     "@types/react": "^18.3.0",

package/skins/blue-fantasy/patches.css

@@ -260,3 +260,372 @@ body[data-ds-dark-theme] [data-phase="active"] [class*="composerSeat"]:before {
   backdrop-filter: blur(6px);
   background: linear-gradient(#0000 0, #101624d1 36px);
 }
+
+/**
+ * Blue Fantasy — text readability layer (L3).
+ *
+ * The whale illustration sits directly behind the conversation, so body text,
+ * tool output and the turn-tail controls lose contrast against the art. This
+ * layer paints a translucent frosted plate *behind the text only* (shrink to
+ * fit on block elements), leaving the illustration visible everywhere else.
+ *
+ *  - Markdown blocks, lists, code and tables: one plate per block.
+ *  - Disclosure rows (think / bash / context injection / system prompt):
+ *    one plate per row, clipped to the content width.
+ *  - The shimmering turn-status line keeps its gradient — the plate is painted
+ *    by a ::before layer instead of the element's own background.
+ *  - Expanded bodies (command output / reasoning / injected context) stay
+ *    full-width so long output keeps its measure.
+ *  - Turn-tail controls (copy / feedback / regenerate) sit on a plate so the
+ *    icons stay legible where the art is busy.
+ *  - Tool-call rows (bash / custom renderers) plate their outermost wrapper and
+ *    reset the two layers nested inside it, so a row is one plate and not three.
+ *  - The user's own message bubble keeps its accent colour and gains a
+ *    translucent frosted body whose density rides the same slider.
+ *
+ * Both knobs come from the skin-center Background card and are read as optional
+ * variables with fallbacks: the blur is var(--dsh-skin-bubble-blur, 10px), and
+ * every text plate alpha rides var(--dsh-skin-bubble-alpha, .5). Each plate keeps
+ * its own ratio so the default 50% reproduces the values this layer first shipped
+ * with. The "Bubble opacity" slider therefore drives everything painted *behind
+ * text* -- markdown blocks, tool output, the turn-process row -- and nothing else.
+ * The window chrome (header, right sidebar) is deliberately not on that slider:
+ * it is frame, not bubble, and it keeps a fixed density.
+ *
+ * The light base is the left pane's measured rgb(242 245 250) (dark:
+ * rgb(16 22 42)) instead of pure white, so the plates sit in the same colour
+ * family as the panels around them.
+ */
+
+/* --- markdown: one plate per block ---------------------------------------- */
+
+[class*="markdown"] > p,
+[class*="markdown"] > :where(h1, h2, h3, h4, h5, h6),
+[class*="markdown"] > blockquote {
+  background: rgb(242 245 250 / calc(var(--dsh-skin-bubble-alpha, .5) * 1));
+  -webkit-backdrop-filter: blur(var(--dsh-skin-bubble-blur, 10px)) saturate(1.3);
+  backdrop-filter: blur(var(--dsh-skin-bubble-blur, 10px)) saturate(1.3);
+  border-radius: 6px;
+  padding: 2px 7px;
+  width: fit-content;
+  max-width: 100%;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+  box-shadow: 0 1px 3px rgba(28, 37, 70, 0.08);
+}
+
+/* One plate for the whole list: the markers sit outside the ul/ol box, and a
+   plate per item would leave the markers on the bare illustration. */
+[class*="markdown"] > :where(ul, ol) {
+  background: rgb(242 245 250 / calc(var(--dsh-skin-bubble-alpha, .5) * 1));
+  -webkit-backdrop-filter: blur(var(--dsh-skin-bubble-blur, 10px)) saturate(1.3);
+  backdrop-filter: blur(var(--dsh-skin-bubble-blur, 10px)) saturate(1.3);
+  border-radius: 8px;
+  padding: 6px 12px 6px 26px;
+  width: fit-content;
+  max-width: 100%;
+  box-shadow: 0 1px 3px rgba(28, 37, 70, 0.08);
+}
+
+[class*="markdown"] > pre {
+  background: rgb(242 245 250 / calc(var(--dsh-skin-bubble-alpha, .5) * 1));
+  -webkit-backdrop-filter: blur(var(--dsh-skin-bubble-blur, 10px)) saturate(1.3);
+  backdrop-filter: blur(var(--dsh-skin-bubble-blur, 10px)) saturate(1.3);
+  border-radius: 6px;
+  padding: 3px 7px;
+  box-shadow: 0 1px 3px rgba(28, 37, 70, 0.08);
+}
+
+/* A table renders inside a scroll wrapper, so it is not a direct child of the
+   markdown box; plate the wrapper to frost the table as a whole.
+
+   The wrapper is a block and stretches to the column by default, so a table
+   narrower than the column leaves the plate hanging ~300px past the last cell --
+   a slab of empty glass next to prose plates that all hug their text. Shrink the
+   plate to its table (still capped at the column) and centre it. Wide tables are
+   unaffected: max-width keeps the plate inside the column and the wrapper's own
+   overflow-x:auto still scrolls the table itself. */
+[class*="markdown"] [class*="tableScroll"] {
+  background: rgb(242 245 250 / calc(var(--dsh-skin-bubble-alpha, .5) * 1.1));
+  -webkit-backdrop-filter: blur(var(--dsh-skin-bubble-blur, 10px)) saturate(1.3);
+  backdrop-filter: blur(var(--dsh-skin-bubble-blur, 10px)) saturate(1.3);
+  border-radius: 10px;
+  padding: 8px 10px;
+  box-shadow: 0 1px 4px rgba(28, 37, 70, 0.08);
+  width: fit-content;
+  max-width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* The shell ships two table shapes: the default hugs its content
+   (`.tableScroll table { width: max-content }`) and a fill variant stretches to
+   the column (`.tableFill table { width: 100% }`). Tables here were landing on
+   the fill variant, so a four-column table spanned the whole column while every
+   prose plate above it hugged its text -- the layer contradicted itself, and a
+   short table read as a slab of empty plate.
+
+   Put the fill variant back on the content-hugging shape. Wide tables still
+   behave: the wrapper keeps max-width:100% and overflow-x:auto, so an
+   over-long table scrolls instead of overflowing. */
+[class*="markdown"] [class*="tableFill"] table {
+  width: max-content;
+  max-width: 100%;
+}
+
+body[data-ds-dark-theme] [class*="markdown"] > p,
+body[data-ds-dark-theme] [class*="markdown"] > :where(h1, h2, h3, h4, h5, h6),
+body[data-ds-dark-theme] [class*="markdown"] > blockquote,
+body[data-ds-dark-theme] [class*="markdown"] > :where(ul, ol),
+body[data-ds-dark-theme] [class*="markdown"] > pre {
+  background: rgb(16 22 42 / calc(var(--dsh-skin-bubble-alpha, .5) * .8));
+}
+
+body[data-ds-dark-theme] [class*="markdown"] [class*="tableScroll"] {
+  background: rgb(16 22 42 / calc(var(--dsh-skin-bubble-alpha, .5) * .9));
+}
+
+/* --- disclosure rows: one plate per row, clipped to the text -------------- */
+
+[data-slot="conversation.session"] [data-disclosure-row] {
+  background: rgb(242 245 250 / calc(var(--dsh-skin-bubble-alpha, .5) * 1));
+  -webkit-backdrop-filter: blur(var(--dsh-skin-bubble-blur, 10px)) saturate(1.3);
+  backdrop-filter: blur(var(--dsh-skin-bubble-blur, 10px)) saturate(1.3);
+  border-radius: 8px;
+  padding: 1px 8px;
+  width: fit-content;
+  max-width: 100%;
+}
+
+body[data-ds-dark-theme] [data-slot="conversation.session"] [data-disclosure-row] {
+  background: rgb(16 22 42 / calc(var(--dsh-skin-bubble-alpha, .5) * .8));
+}
+
+/* --- turn status: keep the shimmer, plate behind the text ----------------- */
+
+/* The status line paints its own background with background-clip: text, so it
+   cannot take a plate directly; a ::before layer frosts the art underneath
+   while the gradient stays on the text. The turn-status clock chip embeds the
+   same substring, hence the explicit exclusion. */
+[class*="turnStatus"]:not([class*="turnStatusClock"]) {
+  position: relative;
+  border-radius: 8px;
+}
+
+[class*="turnStatus"]:not([class*="turnStatusClock"])::before {
+  content: "";
+  position: absolute;
+  inset: -5px -10px;
+  z-index: -1;
+  background: rgb(242 245 250 / calc(var(--dsh-skin-bubble-alpha, .5) * 1.1));
+  -webkit-backdrop-filter: blur(var(--dsh-skin-bubble-blur, 10px)) saturate(1.3);
+  backdrop-filter: blur(var(--dsh-skin-bubble-blur, 10px)) saturate(1.3);
+  border-radius: 8px;
+}
+
+body[data-ds-dark-theme] [class*="turnStatus"]:not([class*="turnStatusClock"])::before {
+  background: rgb(16 22 42 / calc(var(--dsh-skin-bubble-alpha, .5) * 1));
+}
+
+/* --- turn-tail controls: copy / feedback / regenerate --------------------- */
+
+[data-turn-tail] [class*="actions"],
+[data-chat-flow-kind="user"] [class*="actions"],
+[data-chat-flow-kind="steering"] [class*="actions"] {
+  background: rgb(242 245 250 / calc(var(--dsh-skin-bubble-alpha, .5) * 1));
+  -webkit-backdrop-filter: blur(var(--dsh-skin-bubble-blur, 10px)) saturate(1.3);
+  backdrop-filter: blur(var(--dsh-skin-bubble-blur, 10px)) saturate(1.3);
+  border-radius: 10px;
+  padding: 0 8px;
+  width: fit-content;
+}
+
+body[data-ds-dark-theme] [data-turn-tail] [class*="actions"],
+body[data-ds-dark-theme] [data-chat-flow-kind="user"] [class*="actions"],
+body[data-ds-dark-theme] [data-chat-flow-kind="steering"] [class*="actions"] {
+  background: rgb(16 22 42 / calc(var(--dsh-skin-bubble-alpha, .5) * .8));
+}
+
+/* --- expanded bodies: full width, plate only ----------------------------- */
+
+[class*="_5OnbHa_body"],
+[class*="lcKema_thinkBody"],
+[class*="XrJvXW_body"],
+[data-context-injection-body],
+[data-system-prompt-body] {
+  background: rgb(242 245 250 / calc(var(--dsh-skin-bubble-alpha, .5) * 1));
+  -webkit-backdrop-filter: blur(var(--dsh-skin-bubble-blur, 10px)) saturate(1.3);
+  backdrop-filter: blur(var(--dsh-skin-bubble-blur, 10px)) saturate(1.3);
+  border-radius: 8px;
+}
+
+body[data-ds-dark-theme] [class*="_5OnbHa_body"],
+body[data-ds-dark-theme] [class*="lcKema_thinkBody"],
+body[data-ds-dark-theme] [class*="XrJvXW_body"],
+body[data-ds-dark-theme] [data-context-injection-body],
+body[data-ds-dark-theme] [data-system-prompt-body] {
+  background: rgb(16 22 42 / calc(var(--dsh-skin-bubble-alpha, .5) * .8));
+}
+
+/* --- fenced code: the shell paints a plate but no frosting ---------------- */
+
+/* A fenced block renders through the shell as a <div class="md-code-block">, not
+   a <pre>, so the markdown block rule above never reached it. It already carries
+   the shell's own plate (rgba(243 245 251 / .58) light, and its banner + <pre>
+   rows repeat it), but with no backdrop-filter the art stays sharp underneath
+   and the block reads flatter than the prose around it. Frost it and leave the
+   shell's fill alone. */
+[class*="markdown"] [class*="md-code-block"] {
+  -webkit-backdrop-filter: blur(var(--dsh-skin-bubble-blur, 10px)) saturate(1.3);
+  backdrop-filter: blur(var(--dsh-skin-bubble-blur, 10px)) saturate(1.3);
+}
+
+
+/* --- turn-process row: one plate, and only one ---------------------------- */
+
+/* The "N tool calls . M messages" row is one module whose three slots share a
+   single class prefix: the button, its label span and its chevron. Painting the
+   prefix lands on all three, the .5 plates stack, and the row reads as a double
+   background. The button carries a stable semantic attribute (data-turn-process,
+   stamped by TurnProcessNodeView with its turn number), so target that: an
+   attribute selector matches the name exactly and leaves the -member / -hidden /
+   -answer / -inline siblings alone.
+
+   Upstream that row is a separator (height 33px, padding 0 0 8px, a .5px bottom
+   border). Inside a plate the 8px reads as dead space with a stray line across
+   the rounded corner, so square it up with the tool rows and hand the separator
+   back only while expanded. */
+[data-slot="main.conversation"] [data-turn-process] {
+  background: rgb(242 245 250 / calc(var(--dsh-skin-bubble-alpha, .5) * 1));
+  -webkit-backdrop-filter: blur(var(--dsh-skin-bubble-blur, 10px)) saturate(1.3);
+  backdrop-filter: blur(var(--dsh-skin-bubble-blur, 10px)) saturate(1.3);
+  border-radius: 8px;
+  height: auto;
+  padding: 1px 8px;
+  border-bottom: none;
+  width: fit-content;
+  max-width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+body[data-ds-dark-theme] [data-slot="main.conversation"] [data-turn-process] {
+  background: rgb(16 22 42 / calc(var(--dsh-skin-bubble-alpha, .5) * .8));
+}
+
+[data-slot="main.conversation"] [data-turn-process][data-open] {
+  border-bottom: .5px solid var(--dsw-alias-border-l2);
+}
+
+/* --- chrome: the top bar and the right sidebar ---------------------------- */
+
+/* The three columns only read as one surface if they share a base, so the
+   conversation header and the right sidebar reuse the left pane's measured
+   rgb(242 245 250) at the same density instead of plain white. The density is
+   fixed rather than tied to --dsh-skin-bubble-alpha: this is window chrome, and
+   dragging the Bubble opacity slider should fade bubbles, not the frame.
+
+   The right sidebar renders as [class*="rightbarCol"] > [data-slot="rightbar"]
+   > [data-slot="rightbar.session"] > [class*="panel"]. The two slot hosts are
+   display:contents and measure 0x0, so a background on them paints nothing --
+   the plate has to land on .panel.
+
+   The items inside the header (session name, mode picker, the tabs) stay
+   background-free on purpose: plates under those labels read as smudges and
+   fight the official underline indicator. */
+[data-slot="main.conversation"] header,
+[data-slot="rightbar.session"] > *,
+[class*="rightbarCol"] [class*="panel"] {
+  background: rgba(242, 245, 250, 0.75);
+}
+
+[data-slot="main.conversation"] header {
+  border-bottom: 1px solid rgba(28, 37, 70, 0.08);
+}
+
+body[data-ds-dark-theme] [data-slot="main.conversation"] header,
+body[data-ds-dark-theme] [data-slot="rightbar.session"] > *,
+body[data-ds-dark-theme] [class*="rightbarCol"] [class*="panel"] {
+  background: rgba(16, 22, 42, 0.75);
+}
+
+body[data-ds-dark-theme] [data-slot="main.conversation"] header {
+  border-bottom-color: rgba(160, 180, 230, 0.12);
+}
+
+
+/* --- tool-call rows: one plate per row ------------------------------------ */
+
+/* A tool call renders as a wrapper with two near-identical layers inside it
+   (the row body and its disclosure header). Plating all three stacks the same
+   translucent fill three times and the row reads as a doubled background, so
+   plate the wrapper only and reset what is nested inside it. The wrapper
+   carries a stable callRow suffix; the inner reset is scoped to the row and
+   repeats the dark-theme prefix so it outranks the dark disclosure rule. */
+[data-slot="main.conversation"] [class*="callRow"] {
+  background: rgb(242 245 250 / calc(var(--dsh-skin-bubble-alpha, .5) * 1));
+  -webkit-backdrop-filter: blur(var(--dsh-skin-bubble-blur, 10px)) saturate(1.3);
+  backdrop-filter: blur(var(--dsh-skin-bubble-blur, 10px)) saturate(1.3);
+  border-radius: 8px;
+  padding: 1px 8px;
+  width: fit-content;
+  max-width: 100%;
+}
+
+body[data-ds-dark-theme] [data-slot="main.conversation"] [class*="callRow"] {
+  background: rgb(16 22 42 / calc(var(--dsh-skin-bubble-alpha, .5) * .8));
+}
+
+[data-slot="conversation.session"] [class*="callRow"] [class*="o3BgMG_root"],
+[data-slot="conversation.session"] [class*="callRow"] [class*="o3BgMG_summary"],
+[data-slot="conversation.session"] [class*="callRow"] [data-disclosure-row],
+body[data-ds-dark-theme] [data-slot="conversation.session"] [class*="callRow"] [class*="o3BgMG_root"],
+body[data-ds-dark-theme] [data-slot="conversation.session"] [class*="callRow"] [class*="o3BgMG_summary"],
+body[data-ds-dark-theme] [data-slot="conversation.session"] [class*="callRow"] [data-disclosure-row] {
+  background: none;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+  border-radius: 0;
+  box-shadow: none;
+  padding: 0;
+  margin: 0;
+  width: auto;
+  max-width: none;
+}
+
+/* --- the user's own message bubble ---------------------------------------- */
+
+/* Keep the accent fill the skin already assigns, add translucency to it and
+   frost what shows through. The compound selector matters: a bare
+   [class*="bubble"] would also catch unrelated bubbles elsewhere in the shell. */
+[data-slot="main.conversation"] [class*="userStack"] [class*="bubble"] {
+  /* 120% of the slider reproduces the 60% body this layer shipped with. */
+  background: color-mix(in srgb, var(--dsw-specific-bubble) calc(var(--dsh-skin-bubble-alpha, .5) * 120%), transparent);
+  -webkit-backdrop-filter: blur(var(--dsh-skin-bubble-blur, 12px)) saturate(1.3);
+  backdrop-filter: blur(var(--dsh-skin-bubble-blur, 12px)) saturate(1.3);
+}
+
+/* --- deliverables row (this turn's produced files) ------------------------ */
+
+/* Sits in the turn tail and had no plate at all.
+
+   The width cannot come from a bare fit-content: the row's parent is a
+   display:contents slot host that measures 0, and fit-content plus max-width
+   then crushes the file chips onto three lines. Making the row an inline-level
+   shrink-to-fit box keeps it independent of the parent's width, and align-self
+   stops a flex parent from stretching it. */
+[data-slot="main.conversation"] [class*="producedRow"] {
+  display: inline-flex;
+  align-self: flex-start;
+  width: fit-content;
+  max-width: 100%;
+  background: rgb(242 245 250 / calc(var(--dsh-skin-bubble-alpha, .5) * 1));
+  -webkit-backdrop-filter: blur(var(--dsh-skin-bubble-blur, 10px)) saturate(1.3);
+  backdrop-filter: blur(var(--dsh-skin-bubble-blur, 10px)) saturate(1.3);
+  border-radius: 8px;
+  padding: 4px 10px;
+}
+
+body[data-ds-dark-theme] [data-slot="main.conversation"] [class*="producedRow"] {
+  background: rgb(16 22 42 / calc(var(--dsh-skin-bubble-alpha, .5) * .8));
+}