@lemoncat7/dsh-theme-xiaohei 0.3.0-alpha.23 → 0.3.2

package/lib/chrome/controls.js

@@ -0,0 +1,348 @@
+/**
+ * Browser-independent control primitives.
+ *
+ * This layer owns only the shared native-control contract. Feature chrome is
+ * composed after it and remains free to define geometry or stronger states.
+ */
+export const XIAOHEI_CONTROL_PRIMITIVES_CSS = `
+html {
+  color-scheme: dark;
+  accent-color: var(--xiaohei-spirit);
+  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
+    "Microsoft YaHei", "Segoe UI", sans-serif;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+html[data-xiaohei-appearance='light'] {
+  color-scheme: light;
+}
+
+#root,
+:where(#root) :where(button, input, textarea, select) {
+  font: inherit;
+  letter-spacing: inherit;
+}
+
+:where(#root) :where(button, input, textarea, select) {
+  box-sizing: border-box;
+  color: inherit;
+  -webkit-tap-highlight-color: transparent;
+}
+
+:where(#root) :where(button, select, input[type='button'], input[type='submit'], input[type='reset']) {
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+:where(#root) :where(button, input[type='button'], input[type='submit'], input[type='reset']) {
+  margin: 0;
+  border: 1px solid transparent;
+  border-radius: var(--xiaohei-radius-small);
+  color: var(--dsw-alias-label-primary);
+  background: transparent;
+  cursor: pointer;
+  transition:
+    color var(--xiaohei-motion-fast) ease,
+    border-color var(--xiaohei-motion-fast) ease,
+    background-color var(--xiaohei-motion-fast) ease,
+    transform var(--xiaohei-motion-fast) var(--xiaohei-motion-curve);
+}
+
+:where(#root) :where(button, input[type='button'], input[type='submit'], input[type='reset']):not(:disabled):hover {
+  border-color: var(--xiaohei-edge);
+  background-color: var(--xiaohei-spirit-soft);
+}
+
+:where(#root) :where(button, input[type='button'], input[type='submit'], input[type='reset']):not(:disabled):active {
+  transform: translateY(1px) scale(.98);
+}
+
+:where(#root) :where(button, input[type='button'], input[type='submit'], input[type='reset']):disabled {
+  cursor: not-allowed;
+  opacity: .48;
+}
+
+:where(#root) :where(input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']), textarea, select) {
+  border: 1px solid var(--xiaohei-edge);
+  border-radius: var(--xiaohei-radius-control);
+  color: var(--dsw-alias-label-primary);
+  background-color: var(--xiaohei-plugin-control-fill);
+  box-shadow: inset 0 1px var(--xiaohei-layer-content-highlight);
+  transition:
+    border-color var(--xiaohei-motion-fast) ease,
+    background-color var(--xiaohei-motion-fast) ease,
+    box-shadow var(--xiaohei-motion-fast) ease;
+}
+
+:where(#root) :where(input, textarea)::placeholder {
+  color: var(--dsw-alias-label-tertiary);
+  opacity: 1;
+}
+
+:where(#root) :where(input[type='search'])::-webkit-search-cancel-button,
+:where(#root) :where(input[type='search'])::-webkit-search-decoration {
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+:where(#root) :where(input[type='number']) {
+  -moz-appearance: textfield;
+}
+
+:where(#root) :where(input[type='number'])::-webkit-inner-spin-button,
+:where(#root) :where(input[type='number'])::-webkit-outer-spin-button {
+  margin: 0;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+:where(#root) :where(textarea) {
+  resize: vertical;
+}
+
+:where(#root) :where(select) {
+  padding-inline-end: 30px;
+  background-image:
+    linear-gradient(45deg, transparent 50%, currentColor 50%),
+    linear-gradient(135deg, currentColor 50%, transparent 50%);
+  background-position:
+    calc(100% - 15px) 50%,
+    calc(100% - 10px) 50%;
+  background-repeat: no-repeat;
+  background-size: 5px 5px, 5px 5px;
+}
+
+:where(#root) :where(select)::-ms-expand {
+  display: none;
+}
+
+:where(#root) :where(option, optgroup) {
+  color: var(--dsw-alias-label-primary);
+  background: var(--xiaohei-surface-raised);
+}
+
+:where(#root) :where(input[type='checkbox'], input[type='radio']) {
+  -webkit-appearance: none;
+  appearance: none;
+  display: inline-grid;
+  place-content: center;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  border: 1px solid var(--xiaohei-edge-strong);
+  color: var(--xiaohei-frame-ink);
+  background: var(--xiaohei-plugin-control-fill);
+  box-shadow: inset 0 1px var(--xiaohei-layer-content-highlight);
+  cursor: pointer;
+  transition:
+    border-color var(--xiaohei-motion-fast) ease,
+    background-color var(--xiaohei-motion-fast) ease,
+    box-shadow var(--xiaohei-motion-fast) ease;
+}
+
+:where(#root) :where(input[type='checkbox']) {
+  border-radius: 5px;
+}
+
+:where(#root) :where(input[type='radio']) {
+  border-radius: 50%;
+}
+
+:where(#root) :where(input[type='checkbox'], input[type='radio'])::before {
+  content: '';
+  width: 8px;
+  height: 8px;
+  background: currentColor;
+  opacity: 0;
+  transform: scale(.5);
+  transition:
+    opacity var(--xiaohei-motion-fast) ease,
+    transform var(--xiaohei-motion-fast) var(--xiaohei-motion-curve);
+}
+
+:where(#root) :where(input[type='checkbox'])::before {
+  clip-path: polygon(14% 44%, 0 62%, 40% 100%, 100% 20%, 82% 5%, 38% 70%);
+}
+
+:where(#root) :where(input[type='radio'])::before {
+  border-radius: 50%;
+}
+
+:where(#root) :where(input[type='checkbox'], input[type='radio']):checked {
+  border-color: var(--xiaohei-spirit-strong);
+  background: var(--xiaohei-spirit);
+  box-shadow: 0 0 0 3px var(--xiaohei-spirit-faint);
+}
+
+:where(#root) :where(input[type='checkbox'], input[type='radio']):checked::before {
+  opacity: 1;
+  transform: scale(1);
+}
+
+:where(#root) :where(input[type='checkbox'], input[type='radio']):disabled {
+  cursor: not-allowed;
+  opacity: .48;
+}
+
+:where(#root) :where(input[type='range']) {
+  -webkit-appearance: none;
+  appearance: none;
+  height: 16px;
+  margin: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+:where(#root) :where(input[type='range'])::-webkit-slider-runnable-track {
+  height: 4px;
+  border-radius: 999px;
+  background: var(--xiaohei-surface-muted);
+  box-shadow: inset 0 0 0 1px var(--xiaohei-edge);
+}
+
+:where(#root) :where(input[type='range'])::-webkit-slider-thumb {
+  width: 14px;
+  height: 14px;
+  margin-top: -5px;
+  border: 2px solid var(--xiaohei-surface-raised);
+  border-radius: 50%;
+  background: var(--xiaohei-spirit);
+  box-shadow: 0 2px 6px var(--xiaohei-shadow);
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+:where(#root) :where(input[type='range'])::-moz-range-track {
+  height: 4px;
+  border: 0;
+  border-radius: 999px;
+  background: var(--xiaohei-surface-muted);
+  box-shadow: inset 0 0 0 1px var(--xiaohei-edge);
+}
+
+:where(#root) :where(input[type='range'])::-moz-range-progress {
+  height: 4px;
+  border-radius: 999px;
+  background: var(--xiaohei-spirit);
+}
+
+:where(#root) :where(input[type='range'])::-moz-range-thumb {
+  width: 10px;
+  height: 10px;
+  border: 2px solid var(--xiaohei-surface-raised);
+  border-radius: 50%;
+  background: var(--xiaohei-spirit);
+  box-shadow: 0 2px 6px var(--xiaohei-shadow);
+}
+
+:where(#root) :where(input[type='range']):disabled {
+  cursor: not-allowed;
+  opacity: .48;
+}
+
+:where(#root) :where(input[type='file'])::file-selector-button {
+  margin-inline-end: 10px;
+  padding: 6px 10px;
+  border: 1px solid var(--xiaohei-edge);
+  border-radius: var(--xiaohei-radius-small);
+  color: var(--dsw-alias-label-primary);
+  background: var(--xiaohei-plugin-control-fill);
+  font: inherit;
+  cursor: pointer;
+}
+
+:where(#root) :where(progress) {
+  overflow: hidden;
+  border: 0;
+  border-radius: 999px;
+  color: var(--xiaohei-spirit);
+  background: var(--xiaohei-surface-muted);
+  accent-color: var(--xiaohei-spirit);
+}
+
+:where(#root) :where(progress)::-webkit-progress-bar {
+  background: var(--xiaohei-surface-muted);
+}
+
+:where(#root) :where(progress)::-webkit-progress-value {
+  background: var(--xiaohei-spirit);
+}
+
+:where(#root) :where(progress)::-moz-progress-bar {
+  background: var(--xiaohei-spirit);
+}
+
+:where(#root) :where(fieldset) {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+:where(#root) :where(legend) {
+  padding: 0;
+  color: var(--dsw-alias-label-secondary);
+}
+
+:where(#root) :where(summary) {
+  cursor: pointer;
+}
+
+:where(#root) :where(a) {
+  color: var(--xiaohei-spirit-strong);
+  text-decoration-color: var(--xiaohei-edge-strong);
+  text-underline-offset: .18em;
+}
+
+:where(#root) :where(a):hover {
+  text-decoration-color: currentColor;
+}
+
+#root {
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+
+#root:hover,
+#root:focus-within {
+  scrollbar-color: var(--dsw-alias-scrollbar-bg-l1) transparent;
+}
+
+#root ::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+#root ::-webkit-scrollbar-track,
+#root ::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+#root ::-webkit-scrollbar-thumb {
+  min-width: 28px;
+  min-height: 28px;
+  border: 2px solid transparent;
+  border-radius: 999px;
+  background: transparent;
+  background-clip: padding-box;
+}
+
+#root:hover ::-webkit-scrollbar-thumb,
+#root:focus-within ::-webkit-scrollbar-thumb {
+  background-color: var(--dsw-alias-scrollbar-bg-l1);
+}
+
+#root ::-webkit-scrollbar-thumb:hover {
+  background-color: var(--dsw-alias-scrollbar-hover-l1);
+}
+
+@media (forced-colors: active) {
+  :where(#root) :where(input, textarea, select, button, progress) {
+    forced-color-adjust: auto;
+  }
+}
+`;
+//# sourceMappingURL=controls.js.map

package/lib/chrome/conversation-messages.d.ts

@@ -1,3 +1,3 @@
 /** Native conversation messages restyled without changing their DOM contract. */
-export declare const XIAOHEI_CONVERSATION_MESSAGES_CSS = "\n/* Keep DSH's native max width; only tune vertical reading rhythm. */\n#root [data-chat-flow] {\n  gap: 18px;\n}\n\n#root [data-chat-flow-kind='assistant-step'] {\n  color: var(--xiaohei-conversation-text);\n}\n\n#root [data-chat-flow-kind='assistant-step'] > div {\n  color: var(--xiaohei-conversation-text) !important;\n  background: transparent !important;\n  border: 0 !important;\n  box-shadow: none !important;\n}\n\n#root [data-chat-flow-kind='assistant-step'] :is(p, li, h1, h2, h3, h4, h5, h6) {\n  color: var(--xiaohei-conversation-text);\n}\n\n/* User and steering prose keep a light bubble; image-only rows stay untouched. */\n#root [data-chat-flow-kind='user'] [data-time-hover-root]\n  > div:first-child > div:last-child:not(:has(img)),\n#root [data-pending-steering]\n  > div:first-child > div:last-child:not(:has(img)) {\n  color: var(--xiaohei-conversation-text) !important;\n  border: 1px solid var(--xiaohei-conversation-user-edge);\n  border-radius: 18px;\n  background: var(--xiaohei-conversation-user) !important;\n  box-shadow: none !important;\n}\n\n/* Context, recall, compaction and tool rows stay readable but subordinate. */\n#root [data-chat-flow-kind='context'],\n#root [data-chat-flow-kind='manual-compaction'],\n#root [data-chat-flow-kind='command'] > div,\n#root [data-context-injection-body],\n#root [data-context-source],\n#root [data-context-summary],\n#root [data-turn-tail] [role='status'] {\n  color: var(--xiaohei-conversation-meta);\n}\n\n#root [data-chat-flow-kind='context'],\n#root [data-chat-flow-kind='manual-compaction'] {\n  font-size: 13px;\n}\n\n#root [data-chat-flow-kind='command'] > div {\n  opacity: 0.82;\n  transition: opacity var(--xiaohei-motion-fast) ease;\n}\n\n#root [data-chat-flow-kind='command']:hover > div,\n#root [data-chat-flow-kind='command']:focus-within > div {\n  opacity: 1;\n}\n\n#root [data-context-injection-body] {\n  border: 1px solid rgb(111 153 148 / 8%);\n  background: rgb(111 153 148 / 5%) !important;\n}\n\n/* Copy, branch, retry and plugin-provided message actions stay quiet at rest. */\n#root [data-time-hover-root] button,\n#root [data-turn-tail] button {\n  opacity: 0.38;\n  transition:\n    color var(--xiaohei-motion-fast) ease,\n    background-color var(--xiaohei-motion-fast) ease,\n    opacity var(--xiaohei-motion-fast) ease;\n}\n\n#root [data-time-hover-root]:hover button,\n#root [data-time-hover-root]:focus-within button,\n#root [data-turn-tail]:hover button,\n#root [data-turn-tail]:focus-within button {\n  opacity: 0.82;\n}\n\nhtml[data-xiaohei-appearance='light'] #root [data-chat-flow-kind='assistant-step'] > div,\nhtml[data-xiaohei-appearance='light'] #root [data-chat-flow-kind='assistant-step'] :is(p, li, h1, h2, h3, h4, h5, h6) {\n  color: #343B3A !important;\n}\n\n@media (prefers-contrast: more), (forced-colors: active) {\n  #root [data-time-hover-root] button,\n  #root [data-turn-tail] button,\n  #root [data-chat-flow-kind='command'] > div {\n    opacity: 1;\n  }\n}\n";
+export declare const XIAOHEI_CONVERSATION_MESSAGES_CSS: string;
 //# sourceMappingURL=conversation-messages.d.ts.map

package/lib/chrome/conversation-messages.js

@@ -1,3 +1,4 @@
+import { XIAOHEI_AVATAR_2D_FRONT } from '../generated-keyart.js';
 /** Native conversation messages restyled without changing their DOM contract. */
 export const XIAOHEI_CONVERSATION_MESSAGES_CSS = `
 /* Keep DSH's native max width; only tune vertical reading rhythm. */
@@ -9,7 +10,82 @@ export const XIAOHEI_CONVERSATION_MESSAGES_CSS = `
   color: var(--xiaohei-conversation-text);
 }
 
-#root [data-chat-flow-kind='assistant-step'] > div {
+/* Message portraits are deliberately static and only identify the speaker. */
+#root [data-chat-flow-kind='assistant-step'],
+#root [data-chat-flow-kind='user'] {
+  position: relative;
+  overflow: visible;
+}
+
+#root [data-chat-flow-kind='assistant-step']::before,
+#root [data-chat-flow-kind='user']::after {
+  position: absolute;
+  inset-block-start: 2px;
+  z-index: 2;
+  display: grid;
+  place-items: center;
+  box-sizing: border-box;
+  inline-size: 40px;
+  block-size: 44px;
+  border: 1px solid rgb(235 240 242 / 13%);
+  border-radius: 13px 13px 15px 15px;
+  color: rgb(225 231 232 / 78%);
+  background-color: rgb(18 23 25 / 76%);
+  background-repeat: no-repeat;
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 9%),
+    0 6px 16px rgb(0 0 0 / 16%);
+  pointer-events: none;
+}
+
+#root [data-chat-flow-kind='assistant-step']::before {
+  content: '';
+  inset-inline-start: -50px;
+  background-image:
+    url("${XIAOHEI_AVATAR_2D_FRONT}"),
+    linear-gradient(145deg, rgb(255 255 255 / 7%), transparent 56%);
+  background-position: center -1px, center;
+  background-size: 76px auto, auto;
+}
+
+#root [data-chat-flow-kind='user']::after {
+  content: '我';
+  inset-inline-end: -50px;
+  block-size: 40px;
+  border-radius: 13px;
+  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-size: 13px;
+  font-weight: 650;
+  letter-spacing: .02em;
+  background-image:
+    linear-gradient(145deg, rgb(255 255 255 / 8%), transparent 58%),
+    linear-gradient(160deg, rgb(34 40 43 / 84%), rgb(20 25 27 / 76%));
+}
+
+/* The slot outlet itself uses display:contents, so the box must live on its
+   native AssistantMarkdown child. This keeps the semantic row untouched. */
+#root [data-chat-flow-kind='assistant-step']
+  > [data-slot='conversation.chat.node']
+  > div:first-child {
+  box-sizing: border-box;
+  inline-size: fit-content;
+  max-inline-size: 100%;
+  padding: 16px 28px !important;
+  border: 1px solid var(--xiaohei-conversation-edge) !important;
+  border-radius: 9px 18px 18px 18px;
+  background: var(--xiaohei-conversation-assistant) !important;
+  box-shadow:
+    inset 0 1px 0 var(--xiaohei-conversation-highlight),
+    inset 1px 0 0 color-mix(in srgb, var(--xiaohei-conversation-highlight) 42%, transparent),
+    0 7px 22px var(--xiaohei-conversation-shadow) !important;
+  -webkit-backdrop-filter: blur(var(--xiaohei-conversation-blur)) saturate(124%);
+  backdrop-filter: blur(var(--xiaohei-conversation-blur)) saturate(124%);
+  overflow-wrap: anywhere;
+}
+
+#root [data-chat-flow-kind='assistant-step']
+  > [data-slot='conversation.chat.node']
+  > div:first-child > div {
   color: var(--xiaohei-conversation-text) !important;
   background: transparent !important;
   border: 0 !important;
@@ -20,19 +96,30 @@ export const XIAOHEI_CONVERSATION_MESSAGES_CSS = `
   color: var(--xiaohei-conversation-text);
 }
 
-/* User and steering prose keep a light bubble; image-only rows stay untouched. */
+/* User and steering prose use a slightly denser companion bubble; image-only rows stay untouched. */
+#root [data-chat-flow-kind='user'] > [data-slot='conversation.chat.node']
+  > div:first-child > div:first-child > div:last-child:not([data-slot]):not(:has(img)),
 #root [data-chat-flow-kind='user'] [data-time-hover-root]
   > div:first-child > div:last-child:not(:has(img)),
 #root [data-pending-steering]
   > div:first-child > div:last-child:not(:has(img)) {
+  box-sizing: border-box;
+  padding: 14px 28px !important;
   color: var(--xiaohei-conversation-text) !important;
-  border: 1px solid var(--xiaohei-conversation-user-edge);
-  border-radius: 18px;
+  border: 1px solid var(--xiaohei-conversation-edge);
+  border-radius: 18px 9px 18px 18px;
   background: var(--xiaohei-conversation-user) !important;
-  box-shadow: none !important;
+  box-shadow:
+    inset 0 1px 0 var(--xiaohei-conversation-highlight),
+    inset -1px 0 0 color-mix(in srgb, var(--xiaohei-conversation-highlight) 42%, transparent),
+    0 7px 22px var(--xiaohei-conversation-shadow) !important;
+  -webkit-backdrop-filter: blur(var(--xiaohei-conversation-blur)) saturate(124%);
+  backdrop-filter: blur(var(--xiaohei-conversation-blur)) saturate(124%);
+  overflow-wrap: anywhere;
 }
 
-/* Context, recall, compaction and tool rows stay readable but subordinate. */
+/* Context, recall, compaction and tool rows use the same ink-and-silver family,
+   but at a lower contrast than actual conversation bubbles. */
 #root [data-chat-flow-kind='context'],
 #root [data-chat-flow-kind='manual-compaction'],
 #root [data-chat-flow-kind='command'] > div,
@@ -43,6 +130,38 @@ export const XIAOHEI_CONVERSATION_MESSAGES_CSS = `
   color: var(--xiaohei-conversation-meta);
 }
 
+#root :is(
+  [data-chat-flow-kind='context'],
+  [data-chat-flow-kind='manual-compaction'],
+  [data-chat-flow-kind='tool-call'],
+  [data-chat-flow-kind='command']
+) > [data-slot='conversation.chat.node'] > div:first-child {
+  box-sizing: border-box;
+  inline-size: fit-content;
+  max-inline-size: 100%;
+  padding: 6px 14px;
+  border: 1px solid var(--xiaohei-conversation-meta-edge);
+  border-radius: 11px;
+  background: var(--xiaohei-conversation-meta-surface) !important;
+  box-shadow:
+    inset 0 1px 0 color-mix(in srgb, var(--xiaohei-conversation-highlight) 52%, transparent),
+    0 4px 14px color-mix(in srgb, var(--xiaohei-conversation-shadow) 58%, transparent);
+  -webkit-backdrop-filter: blur(12px) saturate(118%);
+  backdrop-filter: blur(12px) saturate(118%);
+  overflow: hidden;
+}
+
+#root [data-chat-flow-kind='turn-tail'] .dsh-knowledge-writeback-status {
+  box-sizing: border-box;
+  padding: 6px 14px;
+  border: 1px solid var(--xiaohei-conversation-meta-edge);
+  border-radius: 9px;
+  background: var(--xiaohei-conversation-meta-surface) !important;
+  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--xiaohei-conversation-highlight) 48%, transparent);
+  -webkit-backdrop-filter: blur(10px) saturate(116%);
+  backdrop-filter: blur(10px) saturate(116%);
+}
+
 #root [data-chat-flow-kind='context'],
 #root [data-chat-flow-kind='manual-compaction'] {
   font-size: 13px;
@@ -59,8 +178,8 @@ export const XIAOHEI_CONVERSATION_MESSAGES_CSS = `
 }
 
 #root [data-context-injection-body] {
-  border: 1px solid rgb(111 153 148 / 8%);
-  background: rgb(111 153 148 / 5%) !important;
+  border: 1px solid rgb(132 138 143 / 8%);
+  background: rgb(132 138 143 / 5%) !important;
 }
 
 /* Copy, branch, retry and plugin-provided message actions stay quiet at rest. */
@@ -80,12 +199,91 @@ export const XIAOHEI_CONVERSATION_MESSAGES_CSS = `
   opacity: 0.82;
 }
 
-html[data-xiaohei-appearance='light'] #root [data-chat-flow-kind='assistant-step'] > div,
+html[data-xiaohei-appearance='light'] #root [data-chat-flow-kind='assistant-step']
+  > [data-slot='conversation.chat.node']
+  > div:first-child,
 html[data-xiaohei-appearance='light'] #root [data-chat-flow-kind='assistant-step'] :is(p, li, h1, h2, h3, h4, h5, h6) {
   color: #343B3A !important;
 }
 
+html[data-xiaohei-appearance='light'] #root [data-chat-flow-kind='assistant-step']::before,
+html[data-xiaohei-appearance='light'] #root [data-chat-flow-kind='user']::after {
+  border-color: rgb(42 48 52 / 11%);
+  color: rgb(48 54 58 / 72%);
+  background-color: rgb(239 242 243 / 78%);
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 76%),
+    0 6px 16px rgb(34 40 43 / 9%);
+}
+
+html[data-xiaohei-appearance='light'] #root [data-chat-flow-kind='user']::after {
+  background-image:
+    linear-gradient(145deg, rgb(255 255 255 / 74%), transparent 58%),
+    linear-gradient(160deg, rgb(242 244 245 / 86%), rgb(222 226 228 / 76%));
+}
+
+@media (width <= 760px) {
+  #root [data-chat-flow-kind='assistant-step'] {
+    box-sizing: border-box;
+    padding-inline-start: 38px;
+  }
+
+  #root [data-chat-flow-kind='user'] {
+    box-sizing: border-box;
+    padding-inline-end: 38px;
+  }
+
+  #root [data-chat-flow-kind='assistant-step']::before,
+  #root [data-chat-flow-kind='user']::after {
+    inline-size: 32px;
+    block-size: 36px;
+    border-radius: 11px 11px 13px 13px;
+  }
+
+  #root [data-chat-flow-kind='assistant-step']::before {
+    inset-inline-start: 0;
+    background-size: 62px auto, auto;
+  }
+
+  #root [data-chat-flow-kind='user']::after {
+    inset-inline-end: 0;
+    block-size: 32px;
+    border-radius: 11px;
+    font-size: 11px;
+  }
+
+  #root [data-chat-flow-kind='assistant-step']
+    > [data-slot='conversation.chat.node']
+    > div:first-child {
+    padding: 12px 20px !important;
+    border-radius: 8px 16px 16px 16px;
+  }
+
+  #root [data-chat-flow-kind='user'] > [data-slot='conversation.chat.node']
+    > div:first-child > div:first-child > div:last-child:not([data-slot]):not(:has(img)),
+  #root [data-chat-flow-kind='user'] [data-time-hover-root]
+    > div:first-child > div:last-child:not(:has(img)),
+  #root [data-pending-steering]
+    > div:first-child > div:last-child:not(:has(img)) {
+    padding-inline: 20px !important;
+  }
+
+  #root :is(
+    [data-chat-flow-kind='context'],
+    [data-chat-flow-kind='manual-compaction'],
+    [data-chat-flow-kind='tool-call'],
+    [data-chat-flow-kind='command']
+  ) > [data-slot='conversation.chat.node'] > div:first-child {
+    border-radius: 10px;
+  }
+}
+
 @media (prefers-contrast: more), (forced-colors: active) {
+  #root [data-chat-flow-kind='assistant-step']::before,
+  #root [data-chat-flow-kind='user']::after {
+    display: none;
+  }
+
   #root [data-time-hover-root] button,
   #root [data-turn-tail] button,
   #root [data-chat-flow-kind='command'] > div {

package/lib/chrome/conversation.d.ts

@@ -1,3 +1,3 @@
 /** Conversation-level controls and quiet Xiaohei identity details. */
-export declare const XIAOHEI_CONVERSATION_CSS = "\n#root [data-slot='conversation.composer'] button[aria-label='\u9009\u62E9\u5DE5\u4F5C\u533A'],\n#root [data-slot='conversation.composer'] button[aria-label='Select workspace'] {\n  min-height: 32px;\n  padding-inline: 10px;\n  border: 1px solid transparent;\n  border-radius: var(--xiaohei-radius-control);\n  color: var(--dsw-alias-label-primary);\n  background: var(--xiaohei-surface-muted);\n  box-shadow: inset 0 1px rgb(255 255 255 / 5%);\n  transition:\n    color var(--xiaohei-motion-fast) ease,\n    background-color var(--xiaohei-motion-base) ease,\n    border-color var(--xiaohei-motion-base) ease,\n    box-shadow var(--xiaohei-motion-base) ease;\n}\n\n#root [data-slot='conversation.composer'] button[aria-label='\u9009\u62E9\u5DE5\u4F5C\u533A']:hover,\n#root [data-slot='conversation.composer'] button[aria-label='Select workspace']:hover,\n#root [data-slot='conversation.composer'] button[aria-label='\u9009\u62E9\u5DE5\u4F5C\u533A'][aria-expanded='true'],\n#root [data-slot='conversation.composer'] button[aria-label='Select workspace'][aria-expanded='true'] {\n  color: var(--xiaohei-spirit-strong);\n  border-color: var(--xiaohei-edge);\n  background: var(--xiaohei-spirit-soft);\n  box-shadow: inset 3px 0 var(--xiaohei-spirit);\n}\n\n#root [data-slot='conversation.session.header'] button,\n#root [data-slot='conversation.input.plan'] button,\n#root [data-slot='conversation.input.model'] button,\n#root [data-slot='conversation.hero.agentPreset'] button {\n  border: 1px solid transparent;\n  border-radius: var(--xiaohei-radius-small);\n  transition:\n    color var(--xiaohei-motion-fast) ease,\n    background-color var(--xiaohei-motion-fast) ease,\n    border-color var(--xiaohei-motion-fast) ease;\n}\n\n#root [data-slot='conversation.session.header'] button:hover,\n#root [data-slot='conversation.input.plan'] button:hover,\n#root [data-slot='conversation.input.model'] button:hover,\n#root [data-slot='conversation.hero.agentPreset'] button:hover {\n  color: var(--xiaohei-spirit-strong);\n  border-color: var(--xiaohei-edge);\n  background: var(--xiaohei-spirit-soft);\n}\n\n#root [data-slot='conversation.session'] [role='status'],\n#root [data-slot='conversation.composer'] [role='status'] {\n  color: var(--dsw-alias-label-secondary);\n}\n\nhtml[data-xiaohei-appearance='light'] #root [data-slot='conversation.composer'] button[aria-label='\u9009\u62E9\u5DE5\u4F5C\u533A'],\nhtml[data-xiaohei-appearance='light'] #root [data-slot='conversation.composer'] button[aria-label='Select workspace'] {\n  background: rgb(246 249 247 / 70%);\n  box-shadow: inset 0 1px rgb(255 255 255 / 74%);\n}\n";
+export declare const XIAOHEI_CONVERSATION_CSS = "\n/* Identify the resident conversation root through the host's stable scroll\n   contract, without coupling the theme to generated CSS-module class names. */\n#root :has(> [data-conversation-scroll]) {\n  background: transparent;\n}\n\n#root [data-slot='conversation.composer'] button[aria-label='\u9009\u62E9\u5DE5\u4F5C\u533A'],\n#root [data-slot='conversation.composer'] button[aria-label='Select workspace'] {\n  min-height: 32px;\n  padding-inline: 10px;\n  border: 1px solid transparent;\n  border-radius: var(--xiaohei-radius-control);\n  color: var(--dsw-alias-label-primary);\n  background: var(--xiaohei-surface-muted);\n  box-shadow: inset 0 1px rgb(255 255 255 / 5%);\n  transition:\n    color var(--xiaohei-motion-fast) ease,\n    background-color var(--xiaohei-motion-base) ease,\n    border-color var(--xiaohei-motion-base) ease,\n    box-shadow var(--xiaohei-motion-base) ease;\n}\n\n#root [data-slot='conversation.composer'] button[aria-label='\u9009\u62E9\u5DE5\u4F5C\u533A']:hover,\n#root [data-slot='conversation.composer'] button[aria-label='Select workspace']:hover,\n#root [data-slot='conversation.composer'] button[aria-label='\u9009\u62E9\u5DE5\u4F5C\u533A'][aria-expanded='true'],\n#root [data-slot='conversation.composer'] button[aria-label='Select workspace'][aria-expanded='true'] {\n  color: var(--xiaohei-spirit-strong);\n  border-color: var(--xiaohei-edge);\n  background: var(--xiaohei-spirit-soft);\n  box-shadow: inset 3px 0 var(--xiaohei-spirit);\n}\n\n#root [data-slot='conversation.session.header'] button,\n#root [data-slot='conversation.input.plan'] button,\n#root [data-slot='conversation.input.model'] button,\n#root [data-slot='conversation.hero.agentPreset'] button {\n  border: 1px solid transparent;\n  border-radius: var(--xiaohei-radius-small);\n  transition:\n    color var(--xiaohei-motion-fast) ease,\n    background-color var(--xiaohei-motion-fast) ease,\n    border-color var(--xiaohei-motion-fast) ease;\n}\n\n#root [data-slot='conversation.session.header'] button:hover,\n#root [data-slot='conversation.input.plan'] button:hover,\n#root [data-slot='conversation.input.model'] button:hover,\n#root [data-slot='conversation.hero.agentPreset'] button:hover {\n  color: var(--xiaohei-spirit-strong);\n  border-color: var(--xiaohei-edge);\n  background: var(--xiaohei-spirit-soft);\n}\n\n#root [data-slot='conversation.session'] [role='status'],\n#root [data-slot='conversation.composer'] [role='status'] {\n  color: var(--dsw-alias-label-secondary);\n}\n\nhtml[data-xiaohei-appearance='light'] #root [data-slot='conversation.composer'] button[aria-label='\u9009\u62E9\u5DE5\u4F5C\u533A'],\nhtml[data-xiaohei-appearance='light'] #root [data-slot='conversation.composer'] button[aria-label='Select workspace'] {\n  background: rgb(246 249 247 / 70%);\n  box-shadow: inset 0 1px rgb(255 255 255 / 74%);\n}\n";
 //# sourceMappingURL=conversation.d.ts.map

package/lib/chrome/conversation.js

@@ -1,5 +1,11 @@
 /** Conversation-level controls and quiet Xiaohei identity details. */
 export const XIAOHEI_CONVERSATION_CSS = `
+/* Identify the resident conversation root through the host's stable scroll
+   contract, without coupling the theme to generated CSS-module class names. */
+#root :has(> [data-conversation-scroll]) {
+  background: transparent;
+}
+
 #root [data-slot='conversation.composer'] button[aria-label='选择工作区'],
 #root [data-slot='conversation.composer'] button[aria-label='Select workspace'] {
   min-height: 32px;