dsh-better-display 0.1.1

package/src/client/McpAppFrame.tsx

@@ -0,0 +1,317 @@
+import { createContext, memo, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from 'react';
+import {
+  getHostTheme,
+  getCssTokens,
+  extractHtmlTitle,
+  ensureHtmlDocument,
+  formatReceiptPrompt,
+  fillComposerDom,
+} from './mcp-app.js';
+import css from './McpAppFrame.module.css';
+
+/**
+ * Composer fill channel shared by every McpAppFrame in one Reader tree.
+ * Provided by Blocks from the session-scoped Reader face (sanctioned
+ * conversation input API); absent outside a Reader, where the DOM fallback
+ * applies. React context avoids threading the callback through the whole
+ * markdown pipeline (MarkdownText -> render context -> code fence).
+ */
+export type ComposerFill = (text: string) => boolean;
+export const ComposerFillContext = createContext<ComposerFill | undefined>(undefined);
+export function useComposerFill(): ComposerFill | undefined {
+  return useContext(ComposerFillContext);
+}
+
+export interface McpAppFrameProps {
+  html: string;
+  title?: string;
+  initialHeight?: number;
+  /** Session-scoped composer writer; falls back to context, then DOM. */
+  fillComposer?: ComposerFill;
+}
+
+export const McpAppFrame = memo(function McpAppFrame({
+  html,
+  title: initialTitle,
+  initialHeight = 240,
+  fillComposer: fillComposerProp,
+}: McpAppFrameProps) {
+  const fillComposerFromContext = useComposerFill();
+  const writeComposer = useMemo<ComposerFill>(
+    () => fillComposerProp ?? fillComposerFromContext ?? fillComposerDom,
+    [fillComposerProp, fillComposerFromContext],
+  );
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const lastParamsRef = useRef<Record<string, unknown>>({});
+  const [height, setHeight] = useState(() => Math.max(60, Math.min(2400, initialHeight)));
+  const [ready, setReady] = useState(false);
+  const [receipt, setReceipt] = useState<string | null>(null);
+  const [lastPrompt, setLastPrompt] = useState<string | null>(null);
+  const [reloadNonce, setReloadNonce] = useState(0);
+  const frameId = useId();
+
+  const title = useMemo(() => {
+    return initialTitle || extractHtmlTitle(html) || '交互式 MCP App';
+  }, [initialTitle, html]);
+
+  // Capture the host theme ONCE for the initial srcDoc. Live theme switches
+  // are delivered via postMessage (broadcastTheme), so the srcDoc identity
+  // stays stable and the iframe never reloads (which would wipe user state
+  // such as checked boxes or selected tabs).
+  const [initialTheme] = useState(getHostTheme);
+  const preparedHtml = useMemo(() => ensureHtmlDocument(html, initialTheme), [html, initialTheme]);
+
+  const fillComposer = useCallback((params: Record<string, unknown>) => {
+    const prompt = formatReceiptPrompt(params, title);
+    setLastPrompt(prompt);
+    try {
+      if (writeComposer(prompt)) return true;
+      // Composer refused: leave the prompt visible in the receipt bar and
+      // stash a clipboard copy as a fallback.
+      try {
+        void navigator.clipboard?.writeText(prompt);
+      } catch {
+        // Clipboard unavailable; the visible receipt text remains copyable.
+      }
+    } catch {
+      // Ignore DOM query errors in non-browser environments
+    }
+    return false;
+  }, [title, writeComposer]);
+
+  const handleUserSubmit = useCallback((params: Record<string, unknown>) => {
+    lastParamsRef.current = params;
+    let summary = '';
+    if (typeof params.choice === 'string') {
+      const desc = typeof params.desc === 'string' ? ` (${params.desc})` : '';
+      summary = `选择: ${params.choice}${desc}`;
+    } else if (typeof params.action === 'string') {
+      summary = `操作: ${params.action}${params.payload ? ` (${JSON.stringify(params.payload)})` : ''}`;
+    } else if (typeof params.selectedVariant === 'string') {
+      summary = `方案: ${params.selectedVariant}`;
+    } else {
+      summary = JSON.stringify(params);
+    }
+    setReceipt(summary);
+
+    // Populate DSH composer with natural prompt and trigger React input state
+    fillComposer(params);
+  }, [fillComposer]);
+
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      const iframe = iframeRef.current;
+      if (!iframe || event.source !== iframe.contentWindow) return;
+
+      const data = event.data;
+      if (!data || typeof data !== 'object') return;
+
+      // Protocol SEP-1865 JSON-RPC 2.0
+      const currentTheme = getHostTheme();
+      const cssTokens = getCssTokens(currentTheme);
+
+      // 1. ui/initialize (View -> Host)
+      if (data.method === 'ui/initialize') {
+        const response = {
+          jsonrpc: '2.0',
+          id: data.id,
+          result: {
+            protocolVersion: '2026-01-26',
+            hostContext: {
+              theme: currentTheme,
+              locale: 'zh-CN',
+              styles: {
+                variables: cssTokens,
+              },
+            },
+          },
+        };
+        iframe.contentWindow?.postMessage(response, '*');
+        setReady(true);
+        return;
+      }
+
+      // 2. ui/ready or initialized notification
+      if (data.method === 'ui/ready' || data.method === 'ui/notifications/initialized') {
+        setReady(true);
+        return;
+      }
+
+      // 3. ui/resize
+      if (data.method === 'ui/resize' && data.params?.height) {
+        const h = Number(data.params.height);
+        if (Number.isFinite(h) && h > 0) {
+          setHeight(Math.max(60, Math.min(2400, Math.round(h))));
+        }
+        return;
+      }
+
+      // 4. ui/submit or ui/update-model-context
+      if (data.method === 'ui/submit' || data.method === 'ui/update-model-context') {
+        const params = (data.params as Record<string, unknown>) || {};
+        handleUserSubmit(params);
+        return;
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+
+    // Broadcast live theme changes to running iframe
+    const broadcastTheme = () => {
+      const newTheme = getHostTheme();
+      const tokens = getCssTokens(newTheme);
+      iframeRef.current?.contentWindow?.postMessage({
+        jsonrpc: '2.0',
+        method: 'ui/notifications/host-context-changed',
+        params: {
+          theme: newTheme,
+          styles: { variables: tokens },
+        },
+      }, '*');
+    };
+
+    let observer: MutationObserver | null = null;
+    if (typeof MutationObserver !== 'undefined' && typeof document !== 'undefined') {
+      observer = new MutationObserver(broadcastTheme);
+      if (document.body) {
+        observer.observe(document.body, { attributes: true, attributeFilter: ['data-ds-dark-theme', 'class', 'style', 'data-theme'] });
+      }
+      if (document.documentElement) {
+        observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme', 'class', 'style'] });
+      }
+    }
+
+    const media = typeof window !== 'undefined' && window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)') : null;
+    media?.addEventListener?.('change', broadcastTheme);
+
+    return () => {
+      window.removeEventListener('message', handleMessage);
+      observer?.disconnect();
+      media?.removeEventListener?.('change', broadcastTheme);
+    };
+  }, [handleUserSubmit]);
+
+  const handleFrameLoad = useCallback(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+
+    // Proactive Host -> View initialize notification for boilerplate compatibility
+    const currentTheme = getHostTheme();
+    const cssTokens = getCssTokens(currentTheme);
+    iframe.contentWindow?.postMessage({
+      jsonrpc: '2.0',
+      method: 'ui/initialize',
+      params: {
+        theme: currentTheme,
+        locale: 'zh-CN',
+        styles: {
+          variables: cssTokens,
+        },
+      },
+    }, '*');
+
+    setReady(true);
+  }, []);
+
+  const handleReload = useCallback(() => {
+    setReloadNonce(n => n + 1);
+    setReady(false);
+    setReceipt(null);
+  }, []);
+
+  return (
+    <div className={css.card} data-mcp-app-card data-testid="mcp-app-card">
+      <div className={css.header}>
+        <div className={css.titleArea}>
+          <span className={css.icon} aria-hidden="true">
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <rect width="18" height="18" x="3" y="3" rx="2" />
+              <path d="M3 9h18" />
+              <path d="M9 21V9" />
+            </svg>
+          </span>
+          <span className={css.title} title={title}>{title}</span>
+        </div>
+        <div className={css.actions}>
+          <button
+            type="button"
+            className={css.iconBtn}
+            onClick={handleReload}
+            title="重置组件状态"
+            aria-label="重置组件状态"
+          >
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+              <path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
+              <path d="M3 3v5h5" />
+              <path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" />
+              <path d="M16 16h5v5" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <div className={css.iframeWrapper} style={{ height: `${height}px` }}>
+        <iframe
+          key={`${frameId}-${reloadNonce}`}
+          ref={iframeRef}
+          className={css.iframe}
+          title={title}
+          srcDoc={preparedHtml}
+          sandbox="allow-scripts allow-forms"
+          referrerPolicy="no-referrer"
+          onLoad={handleFrameLoad}
+        />
+      </div>
+
+      {receipt && (
+        <div className={css.receipt} data-testid="mcp-app-receipt">
+          <span className={css.receiptSummary}>
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+              <polyline points="20 6 9 17 4 12" />
+            </svg>
+            <span>已就绪：{receipt}</span>
+          </span>
+          {lastPrompt && (
+            <div className={css.receiptPrompt} title={lastPrompt}>
+              {lastPrompt}
+            </div>
+          )}
+          <div className={css.receiptHint}>
+            <button
+              type="button"
+              className={css.sendKbd}
+              title="把这条结果重新填入输入框，然后回车发送"
+              onClick={() => {
+                fillComposer(lastParamsRef.current);
+              }}
+            >
+              <span>填入输入框</span>
+              <kbd>↵</kbd>
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+});
+
+/**
+ * Markdown code-fence mount point: picks the session composer writer from
+ * React context (provided by Blocks) without changing the markdown
+ * pipeline's signatures.
+ */
+export function McpAppCodeBlock({ html, title, initialHeight }: {
+  html: string; title?: string; initialHeight?: number;
+}) {
+  const fillComposer = useComposerFill();
+  return <McpAppFrame html={html} title={title} initialHeight={initialHeight} fillComposer={fillComposer} />;
+}
+
+export function StreamingMcpAppPlaceholder({ title }: { title?: string }) {
+  return (
+    <div className={css.streamingPlaceholder}>
+      <span className={css.pulseDot} aria-hidden="true" />
+      <span>正在生成交互组件{title ? `（${title}）` : ''}...</span>
+    </div>
+  );
+}

package/src/client/Reader.module.css

@@ -0,0 +1,329 @@
+.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; z-index: 9; display: flex; justify-content: flex-end; align-items: center; 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); }
+/* 吸顶带第一车道：左「正在处理」+ 右「自动折叠」共享同一 32px 水平基线 */
+.turnProcessSticky { position: sticky; top: 0; z-index: 8; 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; }
+.processContents { display: flow-root; border-left: 1px solid var(--dsw-alias-border-l2); padding: 3px 0 2px 17px; margin: 0 0 0 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 6px; padding-left: 12px; border-left: 2px 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); }
+.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); }
+.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 24px; padding-left: 12px; 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 { margin-left: 12px; padding-left: 8px; } }
+@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; }
+.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: 32px; z-index: 8; 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)); }
+.foldSummary { display: inline-flex; align-items: baseline; white-space: nowrap !important; max-width: 100%; }
+.foldSummaryPart { display: inline-flex; align-items: baseline; white-space: nowrap !important; }
+.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; }
+.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%; } }
+
+/* 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 { flex-wrap: wrap; white-space: normal !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. */
+.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; }
+.turnProcessSticky { box-sizing: border-box; width: calc(100% - var(--reader-control-width, 100px)); min-height: 40px; padding-right: 0; z-index: 8; border-bottom: 1px solid transparent; background-clip: padding-box; backdrop-filter: none; -webkit-backdrop-filter: none; }
+/* The same summary row stays in flow until it reaches the measured top lane. */
+.flowCell[data-flow-summary], .closedProcessSummary { position: sticky; top: max(var(--reader-toolbar-height, 40px), var(--reader-status-height, 40px)); z-index: 6; 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] > .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; }