@drscrewdriver/dsh-better-display 0.3.3-fork.1

package/src/client/Reader.module.css

@@ -0,0 +1,692 @@
+.root {
+  color: var(--dsw-alias-label-primary);
+  font-family: inherit;
+  font-size: 16px;
+  line-height: 28px;
+  padding: 16px calc(var(--dsh-composer-side-clearance, 16px) + 16px) 24px;
+  min-width: 0;
+  flex: 0 0 auto;
+  overflow-anchor: auto;
+  container-type: inline-size;
+}
+.column { max-width: var(--dsh-chat-content-width, 748px); width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
+.toolbar { position: sticky; top: 0; display: flex; justify-content: flex-end; align-items: center; gap: 6px; min-height: 32px; padding: 0; color: var(--dsw-alias-label-tertiary); font-size: 12px; background: var(--dsw-alias-bg-base); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
+/* 吸顶带第二车道：左「正在处理」+ 右「自动折叠」共享同一条 40px 水平基线。
+   top / z-index 由下方 measured-flow 段统一定义：这一道永远钉在工具栏车道
+   之下、且永远低于宿主输入卡（composerSeat z-index 7）。 */
+.turnProcessSticky { position: sticky; background: var(--dsw-alias-bg-base); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); min-height: 32px; display: flex; align-items: center; }
+.turnProcessSticky .disclosureButton { min-height: 32px; }
+/* 第二车道：折叠胶囊吸附在第一车道正下方，互不重叠 */
+.textButton, .historyButton, .iconButton, .jump, .disclosureButton, .imageOpen, .dialogClose { font: inherit; cursor: pointer; }
+.textButton { border: 0; background: transparent; color: var(--dsw-alias-label-secondary); padding: 2px 6px; border-radius: 6px; white-space: nowrap; }
+.textButton:hover, .iconButton:hover, .disclosureButton:hover { background: var(--dsw-alias-interactive-bg-hover); }
+.root button:focus-visible, .root summary:focus-visible { outline: 2px solid var(--dsw-alias-state-business-primary); outline-offset: 3px; }
+.turn { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
+.turn + .turn { margin-top: 12px; }
+.userCluster { display: flex; flex-direction: column; align-self: flex-end; align-items: flex-end; max-width: min(525px, 82%); gap: 8px; min-width: 0; margin-bottom: 4px; }
+.userImages { display: flex; flex-direction: column; align-items: flex-end; max-width: 100%; min-width: 0; }
+.userImages .imageFigure { align-self: flex-end; }
+.user { align-self: flex-end; max-width: 100%; padding: 10px 16px; border-radius: 22px; background: var(--dsw-specific-bubble); color: var(--dsw-alias-label-primary); line-height: 24px; overflow-wrap: anywhere; box-sizing: border-box; }
+.user .blocks { gap: 10px; }
+.answer { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
+.readingText { min-width: 0; }
+.reasonPlain { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; color: inherit; }
+.readingText button { min-width: 24px; min-height: 24px; }
+.streamWord { display: inline-block; }
+.streamInlineWord { display: inline; }
+.streamWord, .streamInlineWord, .streamAtom { opacity: 1; filter: none; }
+.streamAtom { min-width: 0; }
+@media (prefers-reduced-motion: reduce) { .streamWord, .streamInlineWord, .streamAtom { opacity: 1 !important; filter: none !important; } }
+.retiringContent { min-width: 0; }
+.retiringContent[data-reader-retiring=retiring] { overflow: hidden; }
+.mainFlow, .blocks { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
+.mainFlow:empty, .blocks:empty { display: none; }
+.blocks > :first-child { margin-top: 0; }
+.blocks > :last-child { margin-bottom: 0; }
+.blocks :global(.md-table-wide) { max-width: 100%; }
+.disclosure { min-width: 0; }
+.disclosureButton { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 32px; border: 0; background: transparent; border-radius: 7px; color: var(--dsw-alias-label-tertiary); font-size: 14px; line-height: 24px; font-weight: 400; padding: 4px 6px; margin-left: -6px; text-align: left; }
+.disclosure[data-reader-status-only] { display: flex; align-items: center; min-height: 32px; }
+.statusText { display: inline-flex; min-width: 0; max-width: 100%; font-size: 14px; line-height: 24px; font-weight: 400; color: var(--dsw-alias-label-secondary); }
+.srOnly { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
+/* Transitions.dev — Thinking states, supplied by the user. Native DSH colors;
+   the hidden sizer shares this font and the short phases share a left edge. */
+.think {
+  --think-swap: 150ms;
+  --think-gap: 50ms;
+  --think-distance: 8px;
+  --think-blur: 2px;
+  --think-shimmer: 2000ms;
+  --think-base: var(--dsw-alias-label-secondary);
+  --think-highlight: var(--dsw-alias-label-primary);
+  --think-ease: ease-in-out;
+  position: relative; display: inline-block; max-width: 100%; text-align: left;
+}
+.thinkSizer { display: block; visibility: hidden; white-space: nowrap; }
+.thinkText {
+  position: absolute; top: 0; left: 0; right: 0; display: block;
+  color: var(--think-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  transform: translateY(0); filter: blur(0); opacity: 1;
+  transition: transform var(--think-swap) var(--think-ease), filter var(--think-swap) var(--think-ease), opacity var(--think-swap) var(--think-ease);
+}
+.think[data-reader-status-phase=running] .thinkText[data-reader-status-copy=current] { transition-delay: var(--think-gap); }
+.think:not([data-reader-status-phase=idle]) .thinkText { will-change: transform, filter, opacity; }
+@supports (background-clip: text) or (-webkit-background-clip: text) {
+  .think[data-active=true] .thinkText::before {
+    content: attr(data-text); position: absolute; inset: 0; pointer-events: none;
+    background-image: linear-gradient(90deg, transparent 0%, transparent 40%, var(--think-highlight) 50%, transparent 60%, transparent 100%);
+    background-size: 400% 100%; background-repeat: no-repeat;
+    -webkit-background-clip: text; background-clip: text;
+    color: transparent; -webkit-text-fill-color: transparent;
+    animation: thinkShimmer var(--think-shimmer) linear infinite;
+  }
+}
+@keyframes thinkShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } }
+.thinkText.isExit { transform: translateY(calc(var(--think-distance) * -1)); filter: blur(var(--think-blur)); opacity: 0; }
+.thinkText.isEnterStart { transition: none; transform: translateY(var(--think-distance)); filter: blur(var(--think-blur)); opacity: 0; }
+[data-motion=off] .thinkText { transition: none !important; transform: none !important; filter: none !important; opacity: 1 !important; }
+[data-motion=off] .thinkText[data-reader-status-copy=outgoing] { display: none !important; }
+[data-motion=off] .thinkText::before { display: none !important; }
+@media (prefers-reduced-motion: reduce), (forced-colors: active) {
+  .thinkText { transition: none !important; transform: none !important; filter: none !important; opacity: 1 !important; }
+  .thinkText[data-reader-status-copy=outgoing] { display: none !important; }
+  .thinkText::before { display: none !important; }
+}
+.processMeta { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 260ms cubic-bezier(.22,1,.36,1), opacity 160ms ease-out; }
+.processMeta[data-open=true] { grid-template-rows: 1fr; opacity: 1; }
+.processMetaInner { min-height: 0; overflow: hidden; }
+.processMetaLine { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; padding: 8px 0 0 16px; color: var(--dsw-alias-label-secondary); font-size: 12px; line-height: 20px; font-variant-numeric: tabular-nums; }
+.processMetaLine .meta { color: inherit; }
+.chevron { flex: none; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 260ms cubic-bezier(.22,1,.36,1); }
+.chevron[data-open=true] { transform: rotate(90deg); }
+.disclosureBody { overflow: hidden; height: 0; transform-origin: top center; will-change: height, opacity, transform; }
+/* One rail geometry for every nested lane. These three rules used to sit at
+   6px / 24px / 6px with 1px, 1px and 2px rails, so the vertical guides stepped
+   in and out down the page. They now share --reader-rail: same left edge, same
+   rail width, same gutter, so a column of nested rows reads as one line. */
+.processContents { display: flow-root; border-left: 1px solid var(--dsw-alias-border-l2); padding: 3px 0 2px var(--reader-gutter, 16px); margin: 0 0 0 var(--reader-rail, 6px); color: var(--dsw-alias-label-secondary); font-size: 14px; line-height: 24px; }
+.processContents > :last-child { margin-bottom: 0; }
+.processCommentary { color: var(--dsw-alias-label-secondary); font-size: 14px; line-height: 24px; margin: 4px 0 8px var(--reader-rail, 6px); padding-left: var(--reader-gutter, 16px); border-left: 1px solid var(--dsw-alias-border-l2); }
+.processFrame { min-width: 0; }
+.toolActivity { min-width: 0; color: var(--dsw-alias-label-secondary); }
+.nativeToolRow { min-width: 0; }
+.rowSeparator { flex: none; width: 2px; height: 2px; margin: 0 8px; border-radius: 1px; background: var(--dsw-alias-label-caption); }
+.nativeToolSummary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dsw-alias-label-tertiary); font-size: 14px; line-height: 24px; }
+.nativeToolRow:focus-visible { outline: 2px solid var(--dsw-alias-state-business-primary); outline-offset: 3px; border-radius: 4px; }
+.toolHeading { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: start; gap: 10px; width: 100%; padding: 10px 14px 4px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 11px; }
+.toolHeading:hover { background: var(--dsw-alias-interactive-bg-hover); }
+.toolHeading:focus-visible { outline-offset: -3px !important; }
+.toolGlyph { display: flex; align-items: center; justify-content: center; height: 22px; color: var(--dsw-alias-label-secondary); }
+.toolHeadingCopy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
+.toolTitle { font-size: 13px; line-height: 22px; font-weight: 500; overflow-wrap: anywhere; }
+.toolTarget { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; color: var(--dsw-alias-label-secondary); font-size: 12px; line-height: 19px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+.toolHeadingState { display: flex; align-items: center; gap: 7px; min-height: 22px; color: var(--dsw-alias-label-secondary); }
+/* Line counts of the file a tool changed, matching the official tool row:
+   additions read as growth, deletions as loss. Zero sides stay hidden. */
+.diffStat { flex: none; display: inline-flex; gap: 6px; margin-left: 8px; font-size: 11px; line-height: 18px;
+  font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; white-space: nowrap; }
+.diffAdded { color: var(--dsw-alias-state-success-primary, #2f9e63); }
+.diffRemoved { color: var(--dsw-alias-state-error-primary, #d1483c); }
+/* A digest row is [label][counts]; the counts are pushed to the right edge so
+   every row's numbers line up in one column instead of drifting with the label. */
+.summaryRow { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; flex-wrap: wrap; }
+.summaryRow > .diffStatRoot { flex: none; margin-left: auto; }
+.summaryRow > :first-child { min-width: 0; }
+.diffStatRoot { position: relative; flex: none; }
+/* Transparent at rest like the path and count chips beside it; the outline and
+   surface appear on hover or keyboard focus, so the row reads as text until the
+   pointer says otherwise. */
+.diffStatButton { display: inline-flex; gap: 6px; align-items: center; padding: 2px 8px; cursor: pointer;
+  font: inherit; font-size: 11px; line-height: 16px; font-variant-numeric: tabular-nums;
+  font-feature-settings: "tnum"; color: var(--dsw-alias-label-secondary);
+  background: transparent; border: 1px solid transparent; border-radius: 6px;
+  transition: background 120ms ease, border-color 120ms ease; }
+.diffStatButton:hover, .diffStatButton:focus-visible,
+.diffStatButton[aria-expanded="true"] {
+  background: var(--dsw-alias-bg-module-platform, rgba(127, 127, 127, .1));
+  border-color: var(--dsw-alias-border-l2, rgba(127, 127, 127, .28)); }
+.diffStatButton:focus-visible { outline: none; }
+.diffStatButton[aria-expanded="true"] .diffCaret { opacity: 1; }
+
+/* The diff overlay spans the full column width below the summary row, never overflowing. */
+.diffOverlayRow {
+  flex: 1 1 100%;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  margin-top: 6px;
+  box-sizing: border-box;
+}
+
+.diffOverlay {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  overflow: hidden;
+  border-radius: 10px;
+  background: var(--dsw-alias-bg-module-platform, rgba(127, 127, 127, .08));
+  border: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, .22));
+  padding: 8px;
+}
+
+.diffTabs {
+  display: flex;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  gap: 6px;
+  padding-bottom: 6px;
+  margin-bottom: 4px;
+  max-width: 100%;
+  scrollbar-width: thin;
+}
+
+.diffTab {
+  flex: none;
+  max-width: 220px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 3px 10px;
+  cursor: pointer;
+  font: inherit;
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--dsw-alias-label-secondary);
+  background: var(--dsw-alias-bg-base, rgba(255, 255, 255, .8));
+  border: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, .2));
+  border-radius: 6px;
+  transition: all 120ms ease;
+}
+.diffTab:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+  color: var(--dsw-alias-label-primary);
+}
+.diffTab[data-active] {
+  color: var(--dsw-alias-label-primary);
+  border-color: var(--dsw-alias-state-business-primary, #1e90ff);
+  background: var(--dsw-alias-bg-base);
+  font-weight: 500;
+}
+
+.diffScrollArea {
+  max-height: 420px;
+  overflow-y: auto;
+  overflow-x: auto;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+  border-radius: 8px;
+  border: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, .15));
+  background: var(--dsw-alias-markdown-code-block, rgba(0, 0, 0, .04));
+}
+
+.diffScrollArea :global([data-diff]) {
+  margin: 0 !important;
+  background: transparent !important;
+  border-radius: 0 !important;
+}
+
+.diffCaret { flex: none; width: 10px; opacity: .6; font-size: 10px; }
+.diffPath { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  direction: rtl; text-align: left; }
+.diffStat { flex: none; display: inline-flex; gap: 6px; font-size: 11px; font-variant-numeric: tabular-nums; }
+.diffHunkBody { display: flex; flex-direction: column; gap: 4px; padding: 2px 7px 7px 25px; }
+.diffLines { margin: 0; padding: 6px 8px; overflow-x: auto; border-radius: 6px; font-size: 11px; line-height: 1.55;
+  font-family: var(--dsw-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); white-space: pre; }
+.diffLines[data-side=removed] { background: color-mix(in srgb, #d1483c 12%, transparent); }
+.diffLines[data-side=added] { background: color-mix(in srgb, #2f9e63 12%, transparent); }
+.diffLineRemoved, .diffLineAdded { display: block; }
+.diffLineRemoved { color: var(--dsw-alias-state-error-primary, #d1483c); }
+.diffLineAdded { color: var(--dsw-alias-state-success-primary, #2f9e63); }
+.diffEmpty { margin: 0; padding: 2px 0; font-size: 11px; color: var(--dsw-alias-label-secondary); }
+/* A step still waiting on its result breathes: the command body itself carries a
+   travelling highlight, and a live counter says how long it has been running, so
+   a slow call reads as working rather than as frozen. Both stop on their own when
+   the result lands, because the running phase disappears with it. */
+.nativeToolSummary[data-running] {
+  background-image: linear-gradient(90deg,
+    currentColor 0%, currentColor 35%,
+    color-mix(in srgb, currentColor 35%, transparent) 50%,
+    currentColor 65%, currentColor 100%);
+  /* Keep the travelling band outside the text at both loop endpoints. A single
+     tile covers the row throughout, so wrapping cannot start a second sweep. */
+  background-size: 300% 100%;
+  background-repeat: no-repeat;
+  background-position: 100% 0;
+  -webkit-background-clip: text; background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: readerStepShimmer 1.6s linear infinite;
+}
+@keyframes readerStepShimmer { to { background-position: 0% 0; } }
+/* The duration stays on a step that ran long, so a slow command keeps its number;
+   a fast one shows nothing once it returns. */
+.toolElapsed[data-slow] { opacity: 1; font-weight: 500;
+  color: var(--dsw-alias-state-warning-primary, #d8862c); }
+.toolElapsed { flex: none; margin-left: 8px; font-size: 11px; line-height: 18px; opacity: .72;
+  font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; white-space: nowrap; }
+[data-motion=off] .nativeToolSummary[data-running] { animation: none !important;
+  background-image: none; -webkit-text-fill-color: currentColor; }
+@media (prefers-reduced-motion: reduce) {
+  .nativeToolSummary[data-running] { animation: none !important; background-image: none;
+    -webkit-text-fill-color: currentColor; }
+}
+.toolState { flex: none; font-size: 11px; line-height: 18px; white-space: nowrap; margin-left: 8px; }
+.toolState[data-phase=preparing], .toolState[data-phase=running] { color: var(--dsw-alias-state-business-primary); }
+/* The step that is still running gets a living edge: a breathing dot whose halo
+   expands and fades. Same palette as the turn-status shimmer, no new component. */
+.toolState[data-phase=preparing]::before, .toolState[data-phase=running]::before {
+  content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px;
+  border-radius: 50%; vertical-align: middle; background: currentColor;
+  animation: readerRunningGlow 1.4s ease-in-out infinite;
+}
+@keyframes readerRunningGlow {
+  0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent); opacity: 1; }
+  70% { box-shadow: 0 0 0 7px transparent; opacity: .7; }
+  100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
+}
+[data-motion=off] .toolState[data-phase=preparing]::before, [data-motion=off] .toolState[data-phase=running]::before { animation: none !important; }
+@media (prefers-reduced-motion: reduce) { .toolState[data-phase=preparing]::before, .toolState[data-phase=running]::before { animation: none !important; } }
+.toolState[data-phase=failed] { color: var(--dsw-alias-state-error-primary); }
+.toolState[data-phase=interrupted] { color: inherit; opacity: .7; }
+.toolLedger { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 10px 14px 0; color: var(--dsw-alias-label-secondary); font-size: 11px; line-height: 18px; font-variant-numeric: tabular-nums; }
+.toolEngine { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+.toolDetails { margin: 6px 0 0 22px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 8px; min-width: 0; overflow: hidden; }
+.toolTabs { display: flex; align-items: center; gap: 15px; padding: 0 14px; }
+.toolTabs > button { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 10px 1px 8px; font: inherit; font-size: 12px; line-height: 20px; color: var(--dsw-alias-label-secondary); cursor: pointer; }
+.toolTabs > button[aria-selected=true] { color: var(--dsw-alias-label-primary); border-bottom-color: var(--dsw-alias-state-business-primary); }
+.toolPanel { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 12px; min-width: 0; font-size: 13px; line-height: 22px; }
+.toolPanel:focus-visible { outline: 2px solid var(--dsw-alias-state-business-primary); outline-offset: -3px; }
+.toolDetailNote { margin: 0 0 9px; font-size: 12px; line-height: 20px; color: var(--dsw-alias-label-secondary); }
+.toolRawLabel { margin: 0; color: var(--dsw-alias-label-secondary); font-size: 12px; font-weight: 500; }
+.toolRaw { margin: 0; max-height: 400px; padding: 12px; overflow: auto; border-radius: 8px; background: var(--dsw-alias-bg-module-platform); color: var(--dsw-alias-label-primary); font: 12px/20px ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
+.systemPrompt { margin: 0; max-height: 320px; padding: 12px; overflow: auto; border-radius: 8px; background: var(--dsw-alias-bg-module-platform); color: var(--dsw-alias-label-primary); font: 12px/20px ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
+.commandInput { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
+.toolReceipt .blocks, .toolDocument .blocks { font-size: 13px; line-height: 22px; }
+.toolChildren { margin: 0 14px 12px var(--reader-rail, 6px); padding-left: var(--reader-gutter, 16px); border-left: 1px solid var(--dsw-alias-border-l2); display: flex; flex-direction: column; gap: 9px; }
+@container (max-width: 420px) { .toolHeading { gap: 7px; padding: 11px 10px 6px; grid-template-columns: 16px minmax(0, 1fr) auto; } .toolHeadingState { gap: 4px; } .toolLedger { padding-left: 33px; padding-right: 10px; } .toolPanel { padding: 10px; } /* .toolChildren keeps the shared rail here too: a different left edge under a
+     narrow container is what made nested rows read as misplaced lines. */ }
+@media (pointer: coarse) { .toolTabs > button { min-height: 44px; } }
+/* Transitions.dev — Reasoning stream (user-supplied). Transform the one real
+   transcript; hand the painted offset to native scrolling for manual reading. */
+.reasonCard {
+  --reason-preview-height: 224px;
+  --reason-hold: 840ms;
+  --reason-step: 500ms;
+  --reason-lines: 2;
+  --reason-fade: 28px;
+  --reason-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  position: relative;
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 12px;
+  background: var(--dsw-alias-bg-module-platform);
+  scroll-margin-block: 16px calc(var(--dsh-composer-height, 152px) + 16px);
+}
+.reasonHeading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 16px 0; color: var(--dsw-alias-label-secondary); font-size: 12px; line-height: 20px; font-variant-numeric: tabular-nums; }
+.reasonCard[data-overflow=false][data-expanded=false] { border-color: transparent; border-radius: 0; background: transparent; }
+.reasonCard[data-overflow=false][data-expanded=false] .reasonHeading { padding: 0; }
+.reasonCard[data-overflow=false][data-expanded=false] .reasonText { padding: 4px 0 0 22px; }
+.reasonLabel { font-weight: 500; }
+.reasonViewport {
+  position: relative;
+  max-height: var(--reason-preview-height);
+  overflow: auto;
+  scroll-behavior: auto;
+  overflow-anchor: none;
+  overscroll-behavior-y: contain;
+  scrollbar-width: thin;
+  scrollbar-color: var(--dsw-alias-border-l1) transparent;
+}
+.reasonCard[data-expanded=true] .reasonViewport { max-height: min(60vh, 560px, var(--reason-reading-height, 560px)); }
+.reasonViewport[data-edges=both], .reasonCard[data-following=true][data-overflow=true] .reasonViewport {
+  -webkit-mask-image: linear-gradient(transparent 0, black var(--reason-fade), black calc(100% - var(--reason-fade)), transparent 100%);
+  mask-image: linear-gradient(transparent 0, black var(--reason-fade), black calc(100% - var(--reason-fade)), transparent 100%);
+}
+.reasonViewport[data-edges=top] {
+  -webkit-mask-image: linear-gradient(transparent 0, black var(--reason-fade), black 100%);
+  mask-image: linear-gradient(transparent 0, black var(--reason-fade), black 100%);
+}
+.reasonViewport[data-edges=bottom] {
+  -webkit-mask-image: linear-gradient(black 0, black calc(100% - var(--reason-fade)), transparent 100%);
+  mask-image: linear-gradient(black 0, black calc(100% - var(--reason-fade)), transparent 100%);
+}
+.reasonCard[data-expanded=true] .reasonViewport { -webkit-mask-image: none; mask-image: none; }
+.reasonViewport:focus-visible { outline: 2px solid var(--dsw-alias-state-business-primary); outline-offset: -3px; }
+.reasonTrack { position: relative; transform: translateY(0); }
+.reasonCard[data-following=true] .reasonTrack { will-change: transform; }
+.reasonText { padding: 8px 16px 16px; font-size: 14px; line-height: 24px; color: var(--dsw-alias-label-secondary); overflow-wrap: anywhere; }
+.reasonText .readingText > div { font-size: inherit; line-height: inherit; color: inherit; }
+.reasonFooter { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 10px 8px; font-size: 12px; line-height: 20px; color: var(--dsw-alias-label-secondary); }
+.reasonAction { display: inline-flex; justify-content: center; align-items: center; gap: 5px; min-height: 28px; padding: 4px 6px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; cursor: pointer; white-space: nowrap; }
+.reasonAction:hover { background: var(--dsw-alias-interactive-bg-hover); }
+.reasonAction:disabled { cursor: default; opacity: .65; }
+.reasonAction svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
+.reasonCaption { padding-left: 6px; }
+@container (max-width: 480px) { .reasonCard { --reason-preview-height: 192px; } }
+@media (pointer: coarse) { .reasonAction { min-height: 44px; } }
+@media (prefers-reduced-motion: reduce) { .reasonTrack { transition: none !important; transform: none !important; will-change: auto !important; } }
+@media (forced-colors: active) { .reasonViewport { -webkit-mask-image: none !important; mask-image: none !important; } }
+.processItem, .tool { margin: 0 0 18px; min-width: 0; }
+.processLabel { display: flex; align-items: baseline; gap: 12px; margin: 0 0 6px; color: var(--dsw-alias-label-tertiary); font-size: 12px; line-height: 20px; }
+.processFootnote { color: var(--dsw-alias-label-tertiary); margin: 14px 0 0; font-size: 12px; line-height: 20px; }
+.detail { font-size: 13px; line-height: 22px; color: var(--dsw-alias-label-secondary); }
+.detail > summary { cursor: pointer; padding: 3px 0; }
+.detail[open] > summary { margin-bottom: 8px; }
+.tool > .tool { margin: 10px 0 0 12px; }
+.meta { font-size: 12px; line-height: 20px; color: var(--dsw-alias-label-tertiary); }
+.stopped { align-self: flex-start; border-radius: 6px; padding: 0 6px; background: var(--dsw-alias-interactive-bg-hover); color: var(--dsw-alias-label-tertiary); font-size: 11px; line-height: 18px; margin-top: 12px; }
+.compactionRow { display: flex; flex-direction: column; align-items: center; margin: 16px 0; width: 100%; box-sizing: border-box; }
+.compactionLine { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; color: var(--dsw-alias-label-tertiary); font-size: 11px; line-height: 18px; user-select: none; }
+.compactionLine::before, .compactionLine::after { content: ''; flex: 1; height: 1px; background: var(--dsw-alias-border-l1); opacity: .7; }
+/* The divider arrives rather than simply appearing: the rule sweeps out from the
+   middle, the pill settles in, and its dial turns once. Same idiom (and the same
+   motion gates) as the rest of the reader's transitions. */
+.compactionRow > .compactionLine { animation: compactionLineIn 520ms cubic-bezier(.4,0,.2,1) both; }
+.compactionRow > .compactionLine > .compactionPill { animation: compactionPillIn 420ms 120ms cubic-bezier(.34,1.4,.64,1) both; }
+.compactionRow > .compactionLine .compactionIcon { animation: compactionDial 900ms 200ms cubic-bezier(.4,0,.2,1) both; }
+@keyframes compactionLineIn {
+  from { opacity: 0; transform: scaleX(.6); }
+  to { opacity: 1; transform: scaleX(1); }
+}
+@keyframes compactionPillIn {
+  from { opacity: 0; transform: translateY(-6px) scale(.94); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+@keyframes compactionDial {
+  from { transform: rotate(-140deg); opacity: 0; }
+  to { transform: rotate(0deg); opacity: .7; }
+}
+[data-motion=off] .compactionRow > .compactionLine,
+[data-motion=off] .compactionRow > .compactionLine > .compactionPill,
+[data-motion=off] .compactionRow > .compactionLine .compactionIcon { animation: none !important; }
+@media (prefers-reduced-motion: reduce) {
+  .compactionRow > .compactionLine,
+  .compactionRow > .compactionLine > .compactionPill,
+  .compactionRow > .compactionLine .compactionIcon { animation: none !important; }
+}
+.compactionPill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 12px; background: var(--dsw-alias-bg-module-platform); border: 1px solid var(--dsw-alias-border-l1); color: var(--dsw-alias-label-tertiary); font-size: 11px; line-height: 18px; font-family: inherit; }
+.compactionButton { cursor: pointer; transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease; }
+.compactionButton:hover { color: var(--dsw-alias-label-primary); border-color: var(--dsw-alias-border-l2); background: var(--dsw-alias-interactive-bg-hover); }
+.compactionIcon { width: 12px; height: 12px; flex: none; opacity: .7; }
+.compactionToggle { font-size: 10px; opacity: .8; margin-left: 2px; }
+.compactionSummaryBox { margin-top: 10px; width: 100%; max-width: 680px; padding: 12px 16px; border-radius: 8px; background: var(--dsw-alias-bg-module-platform); border: 1px solid var(--dsw-alias-border-l2); font-size: 12px; line-height: 20px; color: var(--dsw-alias-label-secondary); box-sizing: border-box; }
+.compactionSummaryHeader { font-size: 11px; font-weight: 500; color: var(--dsw-alias-label-tertiary); margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px dashed var(--dsw-alias-border-l1); }
+.notice, .error, .attention { border-radius: 10px; padding: 12px 14px; font-size: 13px; line-height: 20px; overflow-wrap: anywhere; }
+.notice { background: var(--dsw-alias-bg-module-platform); color: var(--dsw-alias-label-secondary); border: 1px solid var(--dsw-alias-border-l2); }
+.error { display: flex; align-items: flex-start; gap: 10px; background: rgba(239, 68, 68, 0.06); border: 1px solid rgba(239, 68, 68, 0.22); color: var(--dsw-alias-label-primary); }
+.errorIcon { width: 16px; height: 16px; flex: none; margin-top: 2px; color: #ef4444; }
+.errorCopy { flex: 1; min-width: 0; }
+.errorTitle { display: flex; align-items: center; gap: 8px; color: #dc2626; font-weight: 500; margin-bottom: 2px; }
+.errorMessage { margin: 0; color: var(--dsw-alias-label-secondary); font-size: 12px; line-height: 18px; word-break: break-word; }
+.errorCode { font-size: 11px; padding: 1px 5px; border-radius: 4px; background: rgba(239, 68, 68, 0.12); color: #dc2626; font-family: inherit; }
+.attention { display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--dsw-alias-state-business-primary); color: var(--dsw-alias-label-primary); background: var(--dsw-alias-bg-base); }
+.attention span { color: var(--dsw-alias-label-secondary); }
+.unknown { background: var(--dsw-alias-bg-module-platform); border: 1px solid var(--dsw-alias-border-l2); border-radius: 10px; padding: 12px 14px; font-size: 13px; line-height: 22px; }
+.unknown p { margin: 0 0 6px; }
+.historyButton { align-self: center; background: transparent; border: 1px solid var(--dsw-alias-border-l2); border-radius: 8px; padding: 4px 12px; font-size: 12px; color: var(--dsw-alias-label-secondary); }
+.historyButton:disabled { opacity: .55; cursor: default; }
+.empty { padding: 40px 0; color: var(--dsw-alias-label-tertiary); text-align: center; }
+.answerActions { display: flex; align-items: center; gap: 8px; margin: 13px 0 0 -6px; min-height: 28px; }
+.userActions { display: flex; align-items: center; gap: 8px; min-height: 28px; }
+.messageClock { font-size: 13px; line-height: 24px; color: var(--dsw-alias-label-tertiary); white-space: nowrap; font-variant-numeric: tabular-nums; }
+.iconButton { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; padding: 6px; background: transparent; color: var(--dsw-alias-label-tertiary); }
+.iconButton svg { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
+.imageFigure { margin: 0; max-width: 100%; width: min(100%, 360px); box-sizing: border-box; align-self: flex-start; }
+.imageFrame { position: relative; border-radius: 12px; background: var(--dsw-alias-bg-module-platform); border: 1px solid var(--dsw-alias-border-l2); overflow: hidden; max-height: 440px; min-height: 96px; max-width: 100%; box-sizing: border-box; }
+.imageOpen { border: 0; padding: 0; position: absolute; inset: 0; background: transparent; display: flex; width: 100%; height: 100%; }
+.imageOpen img { display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 200ms cubic-bezier(.4,0,.2,1); }
+.imageOpen img[data-ready=true] { opacity: 1; }
+.pendingImage { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: contain; }
+.imagePlaceholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; color: var(--dsw-alias-label-tertiary); font-size: 13px; pointer-events: none; }
+.imagePlaceholder button { pointer-events: auto; }
+.imageFigure figcaption { color: var(--dsw-alias-label-tertiary); font-size: 12px; line-height: 20px; margin-top: 6px; overflow-wrap: anywhere; }
+.imageDialog { border: 1px solid var(--dsw-alias-border-l2); padding: 38px 20px 20px; border-radius: 16px; background: var(--dsw-alias-bg-base); color: var(--dsw-alias-label-primary); max-width: 90vw; max-height: 90vh; }
+.imageDialog::backdrop { background: var(--dsw-alias-bg-mask-photo); }
+.imageDialog img { max-width: 82vw; max-height: 75vh; display: block; object-fit: contain; }
+.dialogClose { position: absolute; right: 8px; top: 4px; border: 0; background: transparent; color: inherit; width: 32px; height: 32px; border-radius: 8px; font-size: 24px; }
+.jumpDock { position: sticky; bottom: calc(var(--dsh-composer-height, 152px) + 16px); height: 0; z-index: 8; display: flex; justify-content: flex-end; pointer-events: none; }
+.deliverablesRoot { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: start; column-gap: 10px; margin-top: 14px; font-size: 13px; line-height: 22px; }
+.deliverablesLabel { grid-column: 1; grid-row: 1; color: var(--dsw-alias-label-tertiary); font-size: 12px; padding-top: 2px; font-weight: 500; }
+.deliverablesLane { grid-column: 2; grid-row: 1; min-width: 0; }
+.deliverablesRow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
+.deliverableChip { box-sizing: border-box; display: inline-flex; align-items: center; border: 1px solid var(--dsw-alias-border-l2); border-radius: 6px; background: var(--dsw-alias-interactive-bg-hover); color: var(--dsw-alias-label-secondary); font-size: 12px; line-height: 20px; transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease; overflow: hidden; }
+.deliverableChip:hover { border-color: var(--dsw-alias-border-l3); background: var(--dsw-alias-bg-module-platform); box-shadow: 0 1px 4px var(--dsw-alias-border-l1); }
+.deliverableChip[data-status=opened] { border-color: #10b981; background: rgba(16, 185, 129, 0.12); color: #059669; }
+.chipMain { display: inline-flex; align-items: center; gap: 5px; max-width: 220px; padding: 3px 6px 3px 8px; border: none; background: transparent; color: inherit; font: inherit; cursor: pointer; text-align: left; }
+.chipMain:hover { color: var(--dsw-alias-label-primary); }
+.deliverableIcon, .statusIcon { width: 13px; height: 13px; flex: none; opacity: .8; }
+.statusIcon { color: #10b981; }
+.deliverableName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.chipActions { display: inline-flex; align-items: center; gap: 2px; padding-right: 4px; border-left: 1px solid transparent; opacity: .65; transition: opacity 150ms ease, border-left-color 150ms ease; }
+.deliverableChip:hover .chipActions { opacity: 1; border-left-color: var(--dsw-alias-border-l2); }
+.chipActionBtn { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: none; border-radius: 4px; background: transparent; color: var(--dsw-alias-label-tertiary); cursor: pointer; transition: color 120ms ease, background-color 120ms ease; }
+.chipActionBtn:hover { color: var(--dsw-alias-label-primary); background: var(--dsw-alias-interactive-bg-hover); }
+.actionIcon { width: 12px; height: 12px; }
+.deliverablesMore { font-size: 12px; color: var(--dsw-alias-label-tertiary); white-space: nowrap; }
+.deliverablesShowFolder { border: 1px solid transparent; background: transparent; color: var(--dsw-alias-label-tertiary); font: inherit; font-size: 12px; cursor: pointer; padding: 2px 7px; border-radius: 5px; display: inline-flex; align-items: center; gap: 4px; transition: all 150ms ease; }
+.deliverablesShowFolder:hover { color: var(--dsw-alias-state-business-primary); background: var(--dsw-alias-interactive-bg-hover); border-color: var(--dsw-alias-border-l2); }
+.deliverablesShowFolder[data-status=opened] { color: #10b981; border-color: rgba(16, 185, 129, 0.3); background: rgba(16, 185, 129, 0.08); }
+.morphCluster { display: flex; flex-direction: column; width: 100%; min-width: 0; }
+.morphDrawer { overflow: hidden; height: 0; transform-origin: top center; will-change: height, opacity, transform; }
+.liveFoldImpact { animation: liveFoldElastic 180ms cubic-bezier(0.2, 0, 0, 1) both; }
+@keyframes liveFoldElastic { 0% { transform: scale(1); } 50% { transform: scale(1.015); } 100% { transform: scale(1); } }
+.liveFoldContainer { position: sticky; top: calc(max(var(--reader-toolbar-height, 40px), var(--reader-status-height, 40px)) + var(--reader-sticky-lane, 40px) * 2); z-index: 4; background: var(--dsw-alias-bg-base); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 4px 0; margin-bottom: 6px; animation: liveFoldPulse 320ms cubic-bezier(0.16, 1, 0.3, 1) both; transform-origin: left center; will-change: transform, opacity; }
+@keyframes liveFoldPulse { 0% { transform: translateY(-4px) scale(0.98); opacity: 0.8; } 50% { transform: translateY(0) scale(1.02); opacity: 1; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
+[data-motion=off] .liveFoldContainer { animation: none !important; }
+@media (prefers-reduced-motion: reduce) { .liveFoldContainer { animation: none !important; } }
+.priorFoldDrawer { display: flex; flex-direction: column; gap: 14px; min-width: 0; width: 100%; }
+.jump { margin-top: -34px; flex: none; width: 34px; height: 34px; display: flex; justify-content: center; align-items: center; padding: 0; border: 0; border-radius: 100px; color: var(--dsw-alias-label-primary); background: var(--dsw-alias-button-floating-fill, var(--dsw-alias-bg-base)); box-shadow: var(--dsw-elevation-panel, 0 2px 8px var(--dsw-alias-border-l1)); pointer-events: auto; }
+.jump:hover { background: var(--dsw-alias-button-floating-hover, var(--dsw-alias-interactive-bg-hover)); }
+/* The digest is a single line. nowrap on the parent does not stop the parts
+   from wrapping, so each part is pinned too and the run clips with an ellipsis
+   when the column is narrow. */
+.foldSummary { display: inline-flex; align-items: baseline; white-space: nowrap !important; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
+.foldSummaryPart { display: inline-flex; align-items: baseline; white-space: nowrap !important; flex: none; }
+.numberRollRoot { display: inline-flex; position: relative; overflow: hidden; vertical-align: baseline; line-height: inherit; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; white-space: nowrap !important; flex-shrink: 0; min-width: 1.45em; justify-content: center; text-align: center; }
+.numberRollSizer { visibility: hidden; user-select: none; pointer-events: none; line-height: inherit; white-space: nowrap; }
+.numberRollDigit { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; line-height: inherit; white-space: nowrap; }
+.numberRollExit { animation: numberRollOut 240ms cubic-bezier(0.16, 1, 0.3, 1) forwards; }
+.numberRollEnter { animation: numberRollIn 240ms cubic-bezier(0.16, 1, 0.3, 1) forwards; }
+@keyframes numberRollOut { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-100%); opacity: 0; } }
+@keyframes numberRollIn { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
+[data-motion=off] .chevron, [data-motion=off] .imageOpen img, [data-motion=off] .processMeta, [data-motion=off] .numberRollDigit { transition: none !important; animation: none !important; }
+@media (prefers-reduced-motion: reduce) { .chevron, .imageOpen img, .processMeta, .numberRollDigit { transition: none !important; animation: none !important; } }
+.turnStatus { align-self: flex-start; flex: none; display: inline-flex; align-items: center; height: 26px; font-size: 14px; line-height: 22px; white-space: nowrap; margin: 4px 0 12px; padding: 0 4px; }
+.turnStatusLabel { font-weight: 500; background: linear-gradient(90deg, var(--dsw-static-deepseek-500, #4d6bfe) 0%, var(--dsw-static-deepseek-500, #4d6bfe) 40%, var(--dsw-static-deepseek-200, #a8c7fa) 50%, var(--dsw-static-deepseek-500, #4d6bfe) 60%, var(--dsw-static-deepseek-500, #4d6bfe) 100%); background-position: 100% 0; background-size: 250% 100%; background-clip: text; color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: dsh-turn-status-shimmer 1.8s linear infinite; }
+/* The status line and its clock sit on one row, so a wait is timed right where the
+   reader is looking; the bar fills toward ten seconds and then holds while the
+   readout keeps counting and the badge appears. */
+.waitClock { display: inline-flex; align-items: center; flex: none; margin-left: 8px; }
+.waitSeconds { font-size: 13px; font-weight: 400; font-variant-numeric: tabular-nums;
+  font-feature-settings: "tnum"; color: var(--dsw-alias-label-caption, #86909c); }
+
+.waitOvertime { margin-left: 8px; padding: 0 6px; font-size: 11px; line-height: 16px; border-radius: 5px;
+  color: var(--dsw-alias-state-warning-primary, #d8862c);
+  background: color-mix(in srgb, var(--dsw-alias-state-warning-primary, #d8862c) 16%, transparent); }
+.turnStatusClock { margin-left: 8px; font-size: 13px; font-weight: 400; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; color: var(--dsw-alias-label-caption, #86868b); -webkit-text-fill-color: var(--dsw-alias-label-caption, #86868b); }
+@keyframes dsh-turn-status-shimmer { to { background-position: 0 0; } }
+[data-motion=off] .turnStatusLabel { animation: none !important; color: var(--dsw-static-deepseek-500, #4d6bfe) !important; -webkit-text-fill-color: var(--dsw-static-deepseek-500, #4d6bfe) !important; }
+@media (prefers-reduced-motion: reduce) { .turnStatusLabel { animation: none !important; color: var(--dsw-static-deepseek-500, #4d6bfe) !important; -webkit-text-fill-color: var(--dsw-static-deepseek-500, #4d6bfe) !important; } }
+@media (pointer: coarse) { .disclosureButton { min-height: 44px; } }
+@media (max-width: 600px) { .root { padding-inline: 20px; } .column { gap: 18px; } .toolbar { font-size: 11px; } .user { max-width: 90%; } .root[data-reader-bubbles=on] .answer { padding: 10px 14px; border-radius: 14px; } }
+
+/* Measured flow owns geometry; steps never change React parents when folded. */
+.choreographedFlow { display: flex; flex-direction: column; min-width: 0; overflow-anchor: none; }
+.flowCell { min-width: 0; overflow: clip; display: flow-root; }
+.flowCell[hidden] { display: none; }
+.flowCellInner { display: flex; flex-direction: column; min-width: 0; padding-bottom: 16px; }
+/* A null-rendered ProcessFragment must contribute no cumulative row spacing. */
+.flowCellInner:empty { padding-bottom: 0; }
+.choreographedFlow[data-reader-transition=collapse] .flowCell * { animation-play-state: paused !important; }
+.numberRollExit, .numberRollEnter { animation-duration: 160ms; }
+.foldSummary { display: inline-flex; align-items: baseline; flex-wrap: nowrap !important; white-space: nowrap !important; }
+/* A flex item's intrinsic width must include its real label and chevron.
+   The previous shrink-to-fit + max-width chain clipped even four CJK glyphs. */
+/* Footer precedence (host ConversationRoot): the sticky composer seat owns
+   z-index 7, its own sticky code banner is 6 and the floating controls are 8.
+   Every reader lane a scroll can clamp down into the footer band must stay
+   strictly below 7, otherwise the reader paints its own opaque plate over the
+   input card. Only the top toolbar lane may use 7: it pins to the scrollport's
+   first lane and its containing block always ends above the seat, so it can
+   never reach the band, and 7 keeps it above the host's code-block banners. */
+.toolbar { width: 100%; max-width: 100%; align-self: stretch; box-sizing: border-box; min-height: 40px; z-index: 7; border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
+/* Every sticky lane used to pin to the SAME top: the status row, the folded
+   summary row and the live-fold container all sat at
+   max(toolbar-height, status-height) with z-index 6. Three siblings competing
+   for one slot paint over each other in scroll order, which is what "展开以后
+   内容被盖住、看不见" was: the disclosure opened, and the row that followed
+   pinned straight on top of it. Give each lane its own band instead, stacked
+   from the measured top: status first, then the summary, then the fold body. */
+.turnProcessSticky { box-sizing: border-box; width: calc(100% - var(--reader-control-width, 148px)); top: max(var(--reader-toolbar-height, 40px), var(--reader-status-height, 40px)); min-height: 40px; padding-right: 0; z-index: 6; border-bottom: 1px solid transparent; background-clip: padding-box; backdrop-filter: none; -webkit-backdrop-filter: none; }
+/* A pinned lane's in-flow gap stays visible as an uncovered scrollport strip
+   while the lane itself paints opaque. Cast each plate upward over its strip
+   (the .turn 14px gap / the prior cell's 16px flowCellInner padding) so the
+   lanes read as one band instead of solid plates with notches between them.
+   The status lane reserves --reader-control-width on its right for the
+   toolbar's control group, which leaves the same kind of strip there; paint
+   it too. The toolbar is z-index 7, above the lane's 6, so its buttons still
+   render on top of the extension. */
+.turnProcessSticky { box-shadow: 0 -14px 0 var(--dsw-alias-bg-base), var(--reader-control-width, 148px) 0 0 var(--dsw-alias-bg-base); }
+/* The same summary row stays in flow until it reaches the measured top lane. */
+.flowCell[data-flow-summary], .closedProcessSummary { position: sticky; top: calc(max(var(--reader-toolbar-height, 40px), var(--reader-status-height, 40px)) + var(--reader-sticky-lane, 40px)); z-index: 5; overflow: visible; box-sizing: border-box; min-height: 40px; padding-block: 4px; background: var(--dsw-alias-bg-base); border-bottom: 0; }
+.flowCell[data-flow-summary] { box-shadow: 0 -16px 0 var(--dsw-alias-bg-base); }
+.closedProcessSummary { box-shadow: 0 -14px 0 var(--dsw-alias-bg-base); }
+.foldControl { display: inline-flex; align-items: center; gap: 0; padding: 2px; border-radius: 8px; background: var(--dsw-alias-bg-module-platform); }
+.foldStop { border: 0; background: transparent; color: var(--dsw-alias-label-secondary); padding: 2px 8px; border-radius: 6px; white-space: nowrap; font: inherit; font-size: 12px; line-height: 18px; cursor: pointer; }
+.foldStop[data-on] { background: var(--dsw-alias-bg-base); color: var(--dsw-alias-label-primary); }
+.flowCell[data-flow-summary] > .flowCellInner { padding-bottom: 0; }
+.flowCell[data-flow-summary] .disclosureButton, .closedProcessSummary .disclosureButton { width: auto; max-width: 100%; }
+.flowCell[data-flow-summary] .foldSummary, .closedProcessSummary .foldSummary { min-width: 0; }
+.turnProcessSticky > .disclosure { flex: 1 1 auto; min-width: 0; }
+.disclosureButton { width: max-content; max-width: calc(100% + 6px); }
+.statusText { flex: 0 1 auto; }
+.think { width: max-content; min-width: 0; }
+.thinkSizer { white-space: normal; overflow-wrap: anywhere; }
+.thinkText { white-space: normal; overflow-wrap: anywhere; overflow: visible; text-overflow: clip; }
+
+/* Skin mode is opt-in, and it has one job: some readers run a skinned host
+   (wallpaper / theme), and the reader's own opaque rows hide that skin. On =
+   every surface the reader paints becomes a thin token-derived wash and the
+   decorative chrome (border, 16px radius, floating shadow) is dropped, so the
+   skin stays visible across the whole reading view. Off keeps the pre-#14 /
+   current-main opaque chrome. */
+.root[data-reader-glass] .toolbar,
+.root[data-reader-glass] .turnProcessSticky,
+.root[data-reader-glass] .liveFoldContainer {
+  background: transparent;
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+/* The z-index ladder is mode-independent: skin mode only drops the plate, so
+   a glass reader keeps exactly the same footer precedence as an opaque one. */
+.root[data-reader-glass] .flowCell[data-flow-summary],
+.root[data-reader-glass] .closedProcessSummary {
+  box-shadow: none;
+  position: static;
+  z-index: auto;
+  min-height: 32px;
+  padding-block: 2px;
+  background: transparent;
+  border-left: 2px solid color-mix(in srgb, var(--dsw-alias-border-l2, rgba(128,128,128,.35)) 80%, transparent);
+  padding-left: 10px;
+  border-radius: 0;
+}
+/* User bubble becomes a sleek translucent frosted pill in skin mode */
+.root[data-reader-glass] .user {
+  background: color-mix(in srgb, var(--dsw-specific-bubble, rgba(0,0,0,.08)) 25%, transparent);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid color-mix(in srgb, var(--dsw-alias-border-l1, rgba(128,128,128,.3)) 30%, transparent);
+}
+/* Skin mode paints no plates of the reader's own: cards, panels and frames go
+   fully transparent so the skin behind them stays visible. */
+.root[data-reader-glass] .reasonCard {
+  background: transparent;
+  border-color: color-mix(in srgb, var(--dsw-alias-border-l1, rgba(128,128,128,.35)) 65%, transparent);
+}
+.root[data-reader-glass] .toolDetails,
+.root[data-reader-glass] .notice,
+.root[data-reader-glass] .unknown,
+.root[data-reader-glass] .toolRaw,
+.root[data-reader-glass] .systemPrompt,
+.root[data-reader-glass] .compactionSummaryBox,
+.root[data-reader-glass] .attention,
+.root[data-reader-glass] .imageFrame,
+.root[data-reader-glass] .imageDialog {
+  background: transparent;
+}
+/* Diff overlay in skin mode */
+.root[data-reader-glass] .diffOverlay {
+  background: color-mix(in srgb, var(--dsw-alias-bg-module-platform, rgba(127,127,127,.1)) 20%, transparent);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+}
+.root[data-reader-glass] .diffScrollArea {
+  background: transparent;
+}
+.root[data-reader-glass] .diffTab {
+  background: color-mix(in srgb, var(--dsw-alias-bg-base, rgba(255,255,255,.8)) 25%, transparent);
+}
+.root[data-reader-glass] .diffTab[data-active] {
+  background: color-mix(in srgb, var(--dsw-alias-bg-base, rgba(255,255,255,1)) 45%, transparent);
+}
+/* Code blocks translucent in skin mode */
+.root[data-reader-glass] :global(.md-code-block),
+.root[data-reader-glass] :global([data-diff]) {
+  background: color-mix(in srgb, var(--dsw-alias-markdown-code-block, rgba(0,0,0,.06)) 25%, transparent) !important;
+  border: 1px solid color-mix(in srgb, var(--dsw-alias-border-l1, rgba(128,128,128,.2)) 30%, transparent);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+}
+/* The fold control rides a sticky row: it must not paint a plate of its own. */
+.root[data-reader-glass] .foldControl {
+  background: color-mix(in srgb, var(--dsw-alias-bg-module-platform, rgba(127,127,127,.1)) 25%, transparent);
+  border: 1px solid color-mix(in srgb, var(--dsw-alias-border-l2, rgba(128,128,128,.2)) 30%, transparent);
+}
+.root[data-reader-glass] .foldStop[data-on] {
+  background: color-mix(in srgb, var(--dsw-alias-bg-base, rgba(255,255,255,1)) 35%, transparent);
+}
+.root[data-reader-glass] .compactionPill,
+.root[data-reader-glass] .deliverableChip,
+.root[data-reader-glass] .toolState,
+.root[data-reader-glass] .diffStatButton {
+  background: transparent;
+  border-color: transparent;
+}
+.root[data-reader-glass] .compactionPill:hover,
+.root[data-reader-glass] .compactionPill:focus-visible,
+.root[data-reader-glass] .deliverableChip:hover,
+.root[data-reader-glass] .deliverableChip:focus-within,
+.root[data-reader-glass] .toolState:hover,
+.root[data-reader-glass] .diffStatButton:hover,
+.root[data-reader-glass] .diffStatButton:focus-visible,
+.root[data-reader-glass] .diffStatButton[aria-expanded="true"] {
+  background: var(--dsw-alias-bg-module-platform, rgba(127, 127, 127, .1));
+  border-color: var(--dsw-alias-border-l2, rgba(127, 127, 127, .28));
+}
+
+/* Message bubbles — a rounded surface for each final answer. The reader used
+   to lay answers flat on the page background, which on skinned hosts put text
+   directly over the wallpaper. The bubble gives the answer a plate of its
+   own; the settings switch (data-reader-bubbles) restores the flat layout
+   when off. Glass mode mixes the same tokens translucently so the skin still
+   reads through, mirroring the user bubble's frosted treatment above. */
+.root[data-reader-bubbles=on] .answer {
+  box-sizing: border-box;
+  background: var(--dsw-alias-bg-module-platform, rgba(127, 127, 127, .08));
+  border: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, .22));
+  border-radius: 16px;
+  padding: 12px 16px;
+}
+.root[data-reader-bubbles=on][data-reader-glass] .answer {
+  background: color-mix(in srgb, var(--dsw-alias-bg-module-platform, rgba(127, 127, 127, .12)) 35%, transparent);
+  border-color: color-mix(in srgb, var(--dsw-alias-border-l1, rgba(128, 128, 128, .3)) 35%, transparent);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+}