dsh-skin-mistblue 1.0.2 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/lib/client.js +109 -41
  2. package/package.json +1 -1
package/lib/client.js CHANGED
@@ -11,7 +11,7 @@ window.__ModuleLoader__.load({
11
11
  var useState = React.useState
12
12
  var useEffect = React.useEffect
13
13
 
14
- var CSS = "\n/* ===== 00-foundation.css ===== */\n/* ============================================================================\n dsh-skin-mistblue · 00 foundation + glass engine\n DeepSeek-web visual language on top of the DSH `--dsw-*` token system.\n\n Glass engine ported from wallpaper-engine's 5-layer recipe (see\n docs/GLASS-SPEC.md):\n ① fill (token) ② top specular sheen ③ backdrop-filter frost\n ④ inset bevel + hairline ⑤ soft outer elevation\n Fill maths (color-mix, premultiplied):\n effAlpha = floor + a * (1 - floor) floor = theme readability floor\n\n Tiers:\n L1 content surfaces · light fill, small frost\n L2 cards / bubbles · medium fill + frost (readability uplift)\n L3 popups / details · strong fill + strong frost (readability uplift)\n ========================================================================== */\n\nhtml[data-dsg='on'] {\n /* ---- engine sources (shared) ------------------------------------------ */\n --dsg-sat: 1.3;\n --dsg-bright: 1.04;\n --dsg-contrast: 1.01;\n --dsg-fidelity: 0.55;\n --dsg-floor-base-light: 0.45;\n --dsg-floor-base-dark: 0.59;\n --dsg-floor: calc(var(--dsg-floor-base-light) * var(--dsg-fidelity));\n\n --dsg-a1: 0.06;\n --dsg-a2: 0.20;\n --dsg-a3: 0.72;\n\n /* blur ladder: wallpaper-engine's 8px anchor, then readability uplift for\n cards and popups (user requirement: more frost on cards/popups/details). */\n --dsg-blur-l1: calc(6px * var(--dsg-blur, 1));\n --dsg-blur-l2: calc(16px * var(--dsg-blur, 1));\n --dsg-blur-l3: calc(24px * var(--dsg-blur, 1));\n /* Large-area surfaces: dialogs/settings are expensive to re-blur; menus are\n small but read better with a slightly softer frost. */\n --dsg-blur-dialog: calc(12px * var(--dsg-blur, 1));\n --dsg-blur-l3-dialog: var(--dsg-blur-dialog);\n --dsg-blur-menu: calc(20px * var(--dsg-blur, 1));\n\n --dsg-motion: 1;\n\n --dsg-radius-card: 20px;\n --dsg-radius-modal: 24px;\n --dsg-radius-composer: 28px;\n --dsg-motion-dur: calc(180ms * var(--dsg-motion));\n --dsg-ease: cubic-bezier(0.22, 0.61, 0.36, 1);\n\n --dsg-blue: #4d6bfe;\n --dsg-blue-strong: #3556f0;\n --dsg-blue-soft: rgba(77, 107, 254, 0.12);\n --dsg-blue-ring: rgba(77, 107, 254, 0.45);\n\n /* document preview paper: fully opaque, never lets chat text show through */\n --dsg-doc-paper: #ffffff;\n}\n\n/* ---- atmosphere ---------------------------------------------------------- */\n/* Static layered mist from docs/DESIGN-SPEC §6.1 (measured from deepseek.com),\n plus three very faint drifting light pools for depth. */\nhtml[data-dsg='on'] body {\n background-color: transparent !important;\n}\nhtml[data-dsg='on'] .dsg-atmosphere {\n position: fixed;\n inset: 0;\n z-index: -1;\n pointer-events: none;\n overflow: hidden;\n background-color: #f4f7fc;\n background-image:\n radial-gradient(120% 62% at 50% -14%, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.55) 42%, rgba(255, 255, 255, 0) 68%),\n radial-gradient(46% 40% at 71% 1%, rgba(120, 152, 219, 0.58) 0%, rgba(120, 152, 219, 0.2) 55%, rgba(120, 152, 219, 0) 78%),\n radial-gradient(40% 42% at 28% 50%, rgba(146, 178, 230, 0.55) 0%, rgba(146, 178, 230, 0.22) 58%, rgba(146, 178, 230, 0) 82%),\n radial-gradient(52% 46% at 100% 62%, rgba(196, 213, 238, 0.4) 0%, rgba(196, 213, 238, 0) 72%),\n radial-gradient(100% 46% at 50% 112%, rgba(248, 247, 248, 0.98) 0%, rgba(248, 247, 248, 0.7) 40%, rgba(248, 247, 248, 0) 70%),\n linear-gradient(178deg, #fbfcfe 0%, #eef4fb 24%, #e3ecf7 46%, #dfe9f6 58%, #e9eff7 74%, #f4f4f5 90%, #f8f7f8 100%);\n background-repeat: no-repeat;\n}\nhtml[data-dsg='on'] .dsg-atmosphere .dsg-aurora {\n position: absolute;\n display: block;\n border-radius: 50%;\n filter: blur(90px);\n opacity: 0.5;\n will-change: transform;\n animation: dsg-drift 34s ease-in-out infinite alternate;\n}\nhtml[data-dsg='on'] .dsg-atmosphere .dsg-aurora-a {\n width: 46vw; height: 38vw; left: -10vw; top: -12vw;\n background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 70%);\n}\nhtml[data-dsg='on'] .dsg-atmosphere .dsg-aurora-b {\n width: 40vw; height: 34vw; right: -10vw; top: 6vh;\n background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 72%);\n animation-delay: -12s; animation-duration: 42s;\n}\nhtml[data-dsg='on'] .dsg-atmosphere .dsg-aurora-c {\n width: 56vw; height: 30vw; left: 22vw; bottom: -18vw;\n background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 72%);\n animation-delay: -20s; animation-duration: 48s;\n}\nhtml[data-dsg='on'] .dsg-atmosphere .dsg-grid {\n position: absolute; inset: 0;\n background-image:\n linear-gradient(to right, rgba(59, 91, 148, 0.045) 1px, transparent 1px),\n linear-gradient(to bottom, rgba(59, 91, 148, 0.045) 1px, transparent 1px);\n background-size: 75px 75px;\n background-position: 56px 56px;\n -webkit-mask-image: radial-gradient(120% 95% at 50% 32%, #000 30%, transparent 82%);\n mask-image: radial-gradient(120% 95% at 50% 32%, #000 30%, transparent 82%);\n}\nhtml[data-dsg='on'] .dsg-atmosphere .dsg-grain {\n position: absolute; inset: 0; opacity: 0.12; mix-blend-mode: soft-light;\n background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>\");\n}\n@keyframes dsg-drift {\n from { transform: translate3d(0, 0, 0) scale(1); }\n to { transform: translate3d(1.4vw, -1vh, 0) scale(1.03); }\n}\nhtml[data-dsg-atmosphere='mist'] .dsg-atmosphere .dsg-aurora { opacity: 0.25; }\nhtml[data-dsg-atmosphere='off'] .dsg-atmosphere { display: none; }\n\n/* Dark palette atmosphere */\nhtml[data-dsg='on'] body[data-ds-dark-theme] .dsg-atmosphere {\n background-color: #0a1020;\n background-image:\n radial-gradient(120% 64% at 50% -14%, rgba(88, 122, 200, 0.34) 0%, rgba(10, 14, 26, 0) 64%),\n radial-gradient(46% 40% at 72% 2%, rgba(77, 107, 254, 0.28) 0%, rgba(77, 107, 254, 0) 76%),\n radial-gradient(42% 44% at 24% 54%, rgba(90, 130, 255, 0.16) 0%, rgba(90, 130, 255, 0) 78%),\n radial-gradient(52% 46% at 100% 62%, rgba(120, 90, 255, 0.12) 0%, rgba(120, 90, 255, 0) 74%),\n linear-gradient(178deg, #0c1322 0%, #0b1426 34%, #0a111f 62%, #0c1524 100%);\n}\nhtml[data-dsg='on'] body[data-ds-dark-theme] .dsg-atmosphere .dsg-aurora { opacity: 0.22; }\nhtml[data-dsg='on'] body[data-ds-dark-theme] .dsg-atmosphere .dsg-aurora-a {\n background: radial-gradient(circle at 40% 40%, rgba(77, 107, 254, 0.45), rgba(77, 107, 254, 0) 68%);\n}\nhtml[data-dsg='on'] body[data-ds-dark-theme] .dsg-atmosphere .dsg-aurora-b {\n background: radial-gradient(circle at 50% 50%, rgba(90, 130, 255, 0.3), rgba(90, 130, 255, 0) 70%);\n}\nhtml[data-dsg='on'] body[data-ds-dark-theme] .dsg-atmosphere .dsg-aurora-c {\n background: radial-gradient(circle at 50% 50%, rgba(120, 90, 255, 0.24), rgba(120, 90, 255, 0) 72%);\n}\nhtml[data-dsg='on'] body[data-ds-dark-theme] .dsg-atmosphere .dsg-grid {\n background-image:\n linear-gradient(to right, rgba(150, 180, 255, 0.045) 1px, transparent 1px),\n linear-gradient(to bottom, rgba(150, 180, 255, 0.045) 1px, transparent 1px);\n}\n\n/* ---- glass engine · light ------------------------------------------------ */\nhtml[data-dsg='on'] body {\n --dsg-tint: #ffffff;\n --dsg-tint-rgb: 255 255 255;\n\n /* three tier fills: effAlpha = floor + a * (1 - floor) */\n --dsg-fill-l1: color-mix(in srgb,\n var(--dsg-tint) calc(var(--dsg-floor) * 100%),\n color-mix(in srgb, var(--dsg-tint) calc(var(--dsg-a1) * 100%), transparent) calc((1 - var(--dsg-floor)) * 100%));\n --dsg-fill-l2: color-mix(in srgb,\n var(--dsg-tint) calc(var(--dsg-floor) * 100%),\n color-mix(in srgb, var(--dsg-tint) calc(var(--dsg-a2) * 100%), transparent) calc((1 - var(--dsg-floor)) * 100%));\n --dsg-fill-l3: color-mix(in srgb,\n var(--dsg-tint) calc(var(--dsg-floor-base-light) * 100%),\n color-mix(in srgb, var(--dsg-tint) calc(var(--dsg-a3) * 100%), transparent) calc((1 - var(--dsg-floor-base-light)) * 100%));\n\n /* frost */\n --dsg-backdrop-l1: blur(var(--dsg-blur-l1)) saturate(var(--dsg-sat)) brightness(var(--dsg-bright)) contrast(var(--dsg-contrast));\n --dsg-backdrop-l2: blur(var(--dsg-blur-l2)) saturate(var(--dsg-sat)) brightness(var(--dsg-bright)) contrast(var(--dsg-contrast));\n --dsg-backdrop-l3: blur(var(--dsg-blur-l3)) saturate(var(--dsg-sat)) brightness(var(--dsg-bright)) contrast(var(--dsg-contrast));\n --dsg-backdrop-l3-dialog: blur(var(--dsg-blur-dialog)) saturate(var(--dsg-sat)) brightness(var(--dsg-bright)) contrast(var(--dsg-contrast));\n --dsg-backdrop-dialog: blur(var(--dsg-blur-dialog)) saturate(var(--dsg-sat)) brightness(var(--dsg-bright)) contrast(var(--dsg-contrast));\n --dsg-backdrop-menu: blur(var(--dsg-blur-menu)) saturate(1.4);\n --dsg-backdrop-panel: blur(calc(10px * var(--dsg-blur, 1))) saturate(1.2) brightness(var(--dsg-bright));\n\n /* specular sheen */\n --dsg-sheen-l1: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03) 38%, rgba(255, 255, 255, 0.02));\n --dsg-sheen-l2: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05) 38%, rgba(255, 255, 255, 0.02));\n --dsg-sheen-l3: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05) 38%, rgba(255, 255, 255, 0.03));\n\n /* bevel + elevation */\n --dsg-bevel-l1:\n inset 0 1px 0 rgba(255, 255, 255, 0.45),\n inset 0 -1px 0 rgba(255, 255, 255, 0.08),\n inset 0 0 0 0.5px rgba(255, 255, 255, 0.16),\n 0 8px 26px rgba(44, 74, 140, 0.08);\n --dsg-bevel-l2:\n inset 0 1px 0 rgba(255, 255, 255, 0.6),\n inset 0 -1px 0 rgba(255, 255, 255, 0.1),\n inset 0 0 0 0.5px rgba(255, 255, 255, 0.22),\n 0 14px 44px rgba(44, 74, 140, 0.12);\n --dsg-bevel-l3:\n inset 0 1px 0 rgba(255, 255, 255, 0.7),\n inset 0 0 0 1px rgba(255, 255, 255, 0.28),\n 0 24px 80px rgba(23, 48, 108, 0.2);\n\n --dsg-border-hair: rgba(56, 88, 158, 0.14);\n\n /* ---- consume engine into DSH tokens ---------------------------------- */\n --dsw-alias-bg-base: transparent;\n --dsw-alias-bg-layer-1: var(--dsg-fill-l1);\n --dsw-alias-bg-layer-2: var(--dsg-fill-l2);\n --dsw-alias-bg-layer-3: var(--dsg-fill-l3);\n --dsw-alias-bg-overlay: var(--dsg-fill-l3);\n --dsw-alias-bg-module-platform: var(--dsg-fill-l1);\n --dsw-alias-bg-multi-select: var(--dsg-fill-l1);\n /* document preview / pdf paper: host uses this for the preview page body —\n opaque so dense text never blends with the conversation behind it. */\n --dsw-alias-bg-document-preview: var(--dsg-doc-paper);\n\n --dsw-specific-sidebar-fill: var(--dsg-fill-l1);\n --dsw-specific-input-major: var(--dsg-fill-l2);\n --dsw-specific-bubble: var(--dsg-fill-l2);\n --dsw-specific-menu: color-mix(in srgb, #ffffff 82%, transparent);\n --dsw-menu-surface-fill: color-mix(in srgb, #ffffff 82%, transparent);\n --dsw-alias-menu-group-header-fill: rgba(250, 252, 255, 0.94);\n --dsw-specific-selector: var(--dsg-fill-l2);\n --dsw-specific-tip: var(--dsg-fill-l2);\n --dsw-specific-sidebar-nav-item-active: var(--dsg-fill-l2);\n --dsw-specific-sidebar-nav-item-hover: rgba(77, 107, 254, 0.07);\n --dsw-specific-sidebar-nav-item-active-accent: var(--dsg-blue-soft);\n\n /* borders: blue-grey hairlines */\n --dsw-alias-border-l1: rgba(56, 88, 158, 0.1);\n --dsw-alias-border-l2: rgba(56, 88, 158, 0.16);\n --dsw-alias-border-l3: rgba(56, 88, 158, 0.2);\n --dsw-alias-border-l4: rgba(56, 88, 158, 0.26);\n --dsw-elevation-stroke-color: rgba(56, 88, 158, 0.18);\n\n /* DeepSeek blue interaction states */\n --dsw-alias-state-business-primary: var(--dsg-blue);\n --dsw-alias-link: var(--dsg-blue);\n --dsw-alias-brand-primary-new-colorprimary-new-color: var(--dsg-blue);\n --dsw-alias-interactive-bg-hover: rgba(77, 107, 254, 0.07);\n --dsw-alias-interactive-bg-active: rgba(77, 107, 254, 0.12);\n --dsw-alias-interactive-bg-hover-accent: var(--dsg-blue-soft);\n --dsw-alias-state-business-tertiary: rgba(77, 107, 254, 0.1);\n\n /* content surfaces */\n --dsw-alias-markdown-code-block: var(--dsg-fill-l1);\n --dsw-alias-markdown-code-block-banner: var(--dsg-fill-l2);\n --dsw-alias-markdown-inline-code: rgba(77, 107, 254, 0.08);\n --dsw-alias-markdown-citation: var(--dsg-fill-l1);\n --dsw-alias-markdown-tag: rgba(77, 107, 254, 0.08);\n --dsw-alias-turn-trigger-bg: var(--dsg-fill-l1);\n --dsw-alias-turn-trigger-bg-hover: var(--dsg-fill-l2);\n --dsw-alias-settings-card-fill: var(--dsg-fill-l2);\n --dsw-alias-settings-card-stroke: rgba(56, 88, 158, 0.16);\n\n /* host frosted channels */\n --dsw-menu-backdrop-filter: blur(calc(24px * var(--dsg-blur, 1))) saturate(1.4);\n --dsw-mask-blur: blur(calc(14px * var(--dsg-blur, 1))) saturate(1.2);\n\n /* elevation: diffuse blue-tinted daylight */\n --dsw-shadow-lv1: 0 2px 6px rgba(44, 74, 140, 0.06);\n --dsw-shadow-lv2: 0 6px 18px rgba(44, 74, 140, 0.08);\n --dsw-shadow-lv3: 0 18px 48px rgba(44, 74, 140, 0.12);\n --dsw-elevation-panel: var(--dsw-elevation-stroke), 0 6px 20px rgba(44, 74, 140, 0.08), 0 0 24px rgba(44, 74, 140, 0.04);\n --dsw-elevation-prominent: var(--dsw-elevation-stroke), 0 10px 34px rgba(44, 74, 140, 0.12), 0 0 30px rgba(44, 74, 140, 0.06);\n --dsw-elevation-soft: var(--dsw-elevation-stroke), 0 8px 28px rgba(44, 74, 140, 0.08), 0 0 28px rgba(44, 74, 140, 0.05);\n\n /* ink: deeper ramp for readable text over glass (≥4.9:1) */\n --dsw-alias-label-primary: #101728;\n --dsw-alias-label-secondary: #333c4d;\n --dsw-alias-label-tertiary: #5c6472;\n --dsw-alias-label-caption: #626a78;\n}\n\n/* ---- glass engine · dark ------------------------------------------------- */\nhtml[data-dsg='on'] body[data-ds-dark-theme] {\n --dsg-tint: #0d1524;\n --dsg-tint-rgb: 13 21 36;\n --dsg-floor: calc(var(--dsg-floor-base-dark) * var(--dsg-fidelity));\n --dsg-a1: 0.08;\n --dsg-a2: 0.34;\n --dsg-a3: 0.66;\n\n --dsg-fill-l1: color-mix(in srgb,\n var(--dsg-tint) calc(var(--dsg-floor) * 100%),\n color-mix(in srgb, var(--dsg-tint) calc(var(--dsg-a1) * 100%), transparent) calc((1 - var(--dsg-floor)) * 100%));\n --dsg-fill-l2: color-mix(in srgb,\n var(--dsg-tint) calc(var(--dsg-floor) * 100%),\n color-mix(in srgb, var(--dsg-tint) calc(var(--dsg-a2) * 100%), transparent) calc((1 - var(--dsg-floor)) * 100%));\n --dsg-fill-l3: color-mix(in srgb,\n var(--dsg-tint) calc(var(--dsg-floor-base-dark) * 100%),\n color-mix(in srgb, var(--dsg-tint) calc(var(--dsg-a3) * 100%), transparent) calc((1 - var(--dsg-floor-base-dark)) * 100%));\n\n /* document preview paper: fully opaque, never lets chat text show through */\n --dsg-doc-paper: #0c1322;\n\n --dsg-sheen-l1: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02) 38%, rgba(255, 255, 255, 0.01));\n --dsg-sheen-l2: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.03) 38%, rgba(255, 255, 255, 0.01));\n --dsg-sheen-l3: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02) 38%, rgba(255, 255, 255, 0.03));\n\n --dsg-bevel-l1:\n inset 0 1px 0 rgba(255, 255, 255, 0.14),\n inset 0 -1px 0 rgba(255, 255, 255, 0.05),\n inset 0 0 0 0.5px rgba(255, 255, 255, 0.08),\n 0 8px 26px rgba(0, 0, 0, 0.22);\n --dsg-bevel-l2:\n inset 0 1px 0 rgba(255, 255, 255, 0.16),\n inset 0 -1px 0 rgba(255, 255, 255, 0.06),\n inset 0 0 0 0.5px rgba(255, 255, 255, 0.1),\n 0 14px 44px rgba(0, 0, 0, 0.32);\n --dsg-bevel-l3:\n inset 0 1px 0 rgba(255, 255, 255, 0.16),\n inset 0 0 0 1px rgba(255, 255, 255, 0.08),\n 0 24px 80px rgba(0, 0, 0, 0.48);\n\n --dsg-border-hair: rgba(150, 180, 255, 0.14);\n\n --dsw-specific-menu: color-mix(in srgb, #0d1524 86%, transparent);\n --dsw-menu-surface-fill: color-mix(in srgb, #0d1524 84%, transparent);\n --dsw-alias-menu-group-header-fill: rgba(13, 21, 36, 0.95);\n --dsw-specific-sidebar-nav-item-hover: rgba(255, 255, 255, 0.05);\n --dsw-specific-sidebar-nav-item-active-accent: rgba(77, 107, 254, 0.22);\n\n --dsw-alias-border-l1: rgba(150, 180, 255, 0.1);\n --dsw-alias-border-l2: rgba(150, 180, 255, 0.16);\n --dsw-alias-border-l3: rgba(150, 180, 255, 0.22);\n --dsw-alias-border-l4: rgba(150, 180, 255, 0.28);\n --dsw-elevation-stroke-color: rgba(150, 180, 255, 0.2);\n\n --dsw-alias-markdown-inline-code: rgba(120, 150, 255, 0.14);\n --dsw-alias-markdown-tag: rgba(120, 150, 255, 0.14);\n --dsw-alias-turn-trigger-bg-hover: var(--dsg-fill-l2);\n --dsw-alias-settings-card-fill: var(--dsg-fill-l2);\n --dsw-alias-settings-card-stroke: rgba(150, 180, 255, 0.18);\n\n --dsw-alias-label-primary: #eef3ff;\n --dsw-alias-label-secondary: #b9c6df;\n --dsw-alias-label-tertiary: #93a3c0;\n --dsw-alias-label-caption: #7d8da9;\n}\n\n/* ---- global texture: selection, focus, scrollbar ------------------------- */\nhtml[data-dsg='on'] ::selection {\n background: rgba(77, 107, 254, 0.22);\n}\nhtml[data-dsg='on'] body :focus-visible:not(:read-write) {\n outline-color: var(--dsg-blue-ring) !important;\n}\nhtml[data-dsg='on'] * {\n scrollbar-color: rgba(77, 107, 254, 0.28) transparent;\n}\nhtml[data-dsg='on'] ::-webkit-scrollbar-thumb {\n background: rgba(77, 107, 254, 0.24) !important;\n border-radius: 999px;\n}\nhtml[data-dsg='on'] ::-webkit-scrollbar-thumb:hover {\n background: rgba(77, 107, 254, 0.38) !important;\n}\n\n/* ---- runtime fallback: software rasteriser (syntax OK, frost missing) ---- */\nhtml[data-dsg='on'] body[data-dsg-fallback] {\n --dsg-fill-l1: rgba(250, 252, 255, 0.92);\n --dsg-fill-l2: rgba(252, 253, 255, 0.95);\n --dsg-fill-l3: rgba(255, 255, 255, 0.97);\n --dsg-backdrop-l1: none;\n --dsg-backdrop-l2: none;\n --dsg-backdrop-l3: none;\n --dsg-backdrop-panel: none;\n --dsw-menu-backdrop-filter: none;\n --dsw-mask-blur: none;\n --dsg-sheen-l1: none;\n --dsg-sheen-l2: none;\n --dsg-sheen-l3: none;\n}\nhtml[data-dsg='on'] body[data-ds-dark-theme][data-dsg-fallback] {\n --dsg-fill-l1: rgba(13, 21, 36, 0.93);\n --dsg-fill-l2: rgba(16, 26, 44, 0.96);\n --dsg-fill-l3: rgba(18, 29, 49, 0.98);\n}\n\n/* ---- reduced motion ------------------------------------------------------- */\n@media (prefers-reduced-motion: reduce) {\n html[data-dsg='on'] .dsg-atmosphere .dsg-aurora {\n animation: none !important;\n }\n html[data-dsg='on'] * {\n transition-duration: 1ms !important;\n animation-duration: 1ms !important;\n }\n}\n\n@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {\n html[data-dsg='on'] body {\n --dsg-fill-l1: rgba(250, 252, 255, 0.9);\n --dsg-fill-l2: rgba(252, 253, 255, 0.94);\n --dsg-fill-l3: rgba(255, 255, 255, 0.97);\n --dsw-specific-menu: #fafcff;\n --dsw-menu-surface-fill: #fafcff;\n }\n html[data-dsg='on'] body[data-ds-dark-theme] {\n --dsg-fill-l1: rgba(13, 21, 36, 0.92);\n --dsg-fill-l2: rgba(16, 26, 44, 0.95);\n --dsg-fill-l3: rgba(18, 29, 49, 0.97);\n --dsw-specific-menu: #0f1728;\n --dsw-menu-surface-fill: #0f1728;\n }\n}\n\n/* ---- resize guard：拖动分栏时卸掉高成本材质 ---------------------------------\n client 半部在 pointerdown（cursor 为 *-resize 的手柄）时给 <html> 打\n data-dsg-resizing，松手立即移除。拖动期间每帧都会重排/重绘：\n · 任何 backdrop-filter 都会让 Chromium 重新采样整块背景 → 卡顿主因；\n · 沿移动边缘的超大外投影会逐帧重新栅格化。\n 这些玻璃背后的衬底是平滑的氛围层，去掉霜与远投影在拖动过程中几乎看不出；\n 静止态（含松手后的每一帧）与原来完全一致，不改变最终观感。 */\nhtml[data-dsg='on'][data-dsg-resizing] :is(\n [class*='_bubble']:not([role='tooltip']),\n [data-turn-trigger]\n ) {\n -webkit-backdrop-filter: none !important;\n backdrop-filter: none !important;\n /* 只保留内侧顶光/发丝边，去掉逐帧重栅格化的 44px 外投影 */\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.55),\n inset 0 -1px 0 rgba(255, 255, 255, 0.1),\n inset 0 0 0 0.5px rgba(255, 255, 255, 0.22) !important;\n}\nhtml[data-dsg='on'][data-dsg-resizing] body[data-ds-dark-theme] :is(\n [class*='_bubble']:not([role='tooltip']),\n [data-turn-trigger]\n ) {\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.14),\n inset 0 0 0 0.5px rgba(255, 255, 255, 0.1) !important;\n}\nhtml[data-dsg='on'][data-dsg-resizing] :is(\n [data-composer-card],\n [data-goal-bar] [class*='_bar'],\n [data-sidebar-right-panel]:not([aria-hidden='true']),\n [data-slot='conversation.header'] > header,\n div:has(> [data-slot='sidebar'])\n )::before {\n -webkit-backdrop-filter: none !important;\n backdrop-filter: none !important;\n}\n/* 侧栏/header 的外投影在拖动时收紧（移动边缘的大半径阴影最贵） */\nhtml[data-dsg='on'][data-dsg-resizing] [data-sidebar-right-panel] {\n box-shadow: -6px 0 16px rgba(44, 74, 140, 0.07) !important;\n}\nhtml[data-dsg='on'][data-dsg-resizing] [data-slot='conversation.header'] > header {\n box-shadow: 0 8px 20px -18px rgba(44, 74, 140, 0.4) !important;\n}\n\n/* ===== 10-shell.css ===== */\n/* ============================================================================\r\n dsh-skin-mistblue · 10 shell — 主壳 / 三栏 / Windows 标题栏 / 会话 header / 右栏外壳\r\n Owner: shell-dev. Consumes the glass engine in 00-foundation.css only.\r\n\r\n 规则来源：docs/UI-CONTRACT.md §3/§4、docs/GLASS-SPEC.md §1/§5、\r\n docs/DESIGN-SPEC.md §8.1/§8.2/§8.4、docs/SURFACE-MAP.md §2/§4/§6/§8。\r\n\r\n 硬约束（本文件逐步遵守）：\r\n · Windows 标题栏是 frame 的 ::before（宿主壳层），模糊另起 ::after —— 伪元素没有\r\n 后代，永不成为 fixed 包含块（左栏 fixed 收起按钮安全）。\r\n · 会话 header 的霜只能挂 ::before；header 设 z-index:0 建普通层叠上下文（不是\r\n isolation —— isolation 会建 backdrop root，霜会失效）。\r\n · 右栏面板必须带 open 守卫（收起态 aria-hidden=true 仍挂载在布局里）。\r\n · 不在 frame / centerCol / rightbarCol 这些 fixed 祖先上挂 backdrop-filter。\r\n ========================================================================== */\r\n\r\n/* ---- shared shell vars (my own layer, foundation keeps the engine) -------- */\r\nhtml[data-dsg='on'] {\r\n --dsg-capsule: rgba(255, 255, 255, 0.55);\r\n --dsg-capsule-hover: rgba(255, 255, 255, 0.74);\r\n --dsg-row-hover: rgba(31, 58, 110, 0.055);\r\n --dsg-row-active: rgba(77, 107, 254, 0.12);\r\n --dsg-row-active-ink: #2f49d9;\r\n --dsg-hairline-soft: rgba(56, 88, 158, 0.1);\r\n --dsg-sheen-top: inset 0 1px 0 rgba(255, 255, 255, 0.55);\r\n --dsg-header-h: 57px;\r\n --dsg-shell-radius: 20px;\r\n /* 会话 header：悬浮玻璃条（比 L2 更透，好让顶部的雾蓝衬光透出来） */\r\n --dsg-header-radius: 18px;\r\n --dsg-header-fill: color-mix(in srgb, #ffffff 17%, transparent);\r\n --dsg-header-backdrop: blur(calc(24px * var(--dsg-blur, 1))) saturate(1.65) brightness(1.02);\r\n --dsg-header-sweep: linear-gradient(\r\n 112deg,\r\n rgba(255, 255, 255, 0.22) 0%,\r\n rgba(255, 255, 255, 0.05) 34%,\r\n rgba(255, 255, 255, 0) 58%\r\n );\r\n /* 右侧栏面板：只留一层玻璃。dockkit 各层容器与内容自带半透明底，必须清零，\r\n 否则层层叠加会把整块面板洗成不透明白（旧版就是这个问题）。 */\r\n --dsg-panel-fill: color-mix(in srgb, #ffffff 18%, transparent);\r\n --dsg-panel-backdrop: blur(calc(22px * var(--dsg-blur, 1))) saturate(1.55) brightness(1.02);\r\n}\r\nhtml[data-dsg='on'] body[data-ds-dark-theme] {\r\n --dsg-capsule: rgba(255, 255, 255, 0.08);\r\n --dsg-capsule-hover: rgba(255, 255, 255, 0.13);\r\n --dsg-row-hover: rgba(255, 255, 255, 0.06);\r\n --dsg-row-active: rgba(123, 147, 255, 0.18);\r\n --dsg-row-active-ink: #9fb4ff;\r\n --dsg-hairline-soft: rgba(150, 180, 255, 0.12);\r\n --dsg-sheen-top: inset 0 1px 0 rgba(255, 255, 255, 0.14);\r\n --dsg-header-fill: color-mix(in srgb, #0d1524 47%, transparent);\r\n --dsg-header-backdrop: blur(calc(24px * var(--dsg-blur, 1))) saturate(1.4) brightness(1.05);\r\n --dsg-header-sweep: linear-gradient(\r\n 112deg,\r\n rgba(255, 255, 255, 0.08) 0%,\r\n rgba(255, 255, 255, 0.02) 34%,\r\n rgba(255, 255, 255, 0) 58%\r\n );\r\n --dsg-panel-fill: color-mix(in srgb, #0d1524 46%, transparent);\r\n --dsg-panel-backdrop: blur(calc(22px * var(--dsg-blur, 1))) saturate(1.35) brightness(1.04);\r\n}\r\n\r\n/* ============================================================\r\n 1. 页面底 / 主壳\r\n ============================================================ */\r\n/* 整窗彻底透明：氛围层是唯一背衬。结构锚点：root slot 的直接子 div = frame；\r\n 不写整串哈希类名（[class*=\"_frame\"] 太宽，只作为结构选择器的组合项）。 */\r\nhtml[data-dsg='on'] [data-slot='root'] > [class*='_frame'] {\r\n background: transparent !important;\r\n}\r\nhtml[data-dsg='on'] [data-slot='main'] {\r\n background: transparent !important;\r\n}\r\n/* 底部槽 / 浮层挂载点：不铺底 */\r\nhtml[data-dsg='on'] [data-shell-bottom] {\r\n background: transparent !important;\r\n}\r\nhtml[data-dsg='on'] [data-shell-overlay] {\r\n background: transparent;\r\n}\r\n/* 中列：不铺整块地板（大滚动容器禁止挂霜）。只留顶部一段很淡的雾蓝衬光，\r\n 让氛围层是画布本身、玻璃面浮在雾上 —— 这是「空气感」的来源，也是悬浮\r\n header 玻璃条背后能“看出模糊”的衬底。 */\r\nhtml[data-dsg='on'] div:has(> [data-slot='main']) {\r\n background:\r\n radial-gradient(78% 240px at 18% 0, rgba(120, 152, 219, 0.3) 0%, rgba(120, 152, 219, 0) 72%),\r\n radial-gradient(64% 250px at 82% 0, rgba(146, 178, 230, 0.26) 0%, rgba(146, 178, 230, 0) 76%),\r\n linear-gradient(\r\n 180deg,\r\n rgba(255, 255, 255, 0.16) 0,\r\n rgba(255, 255, 255, 0.04) 200px,\r\n rgba(255, 255, 255, 0) 440px\r\n );\r\n border-radius: var(--dsg-shell-radius) var(--dsg-shell-radius) 0 0;\r\n box-shadow: inset -0.5px 0 0 var(--dsg-hairline-soft);\r\n}\r\nhtml[data-dsg='on'] body[data-ds-dark-theme] div:has(> [data-slot='main']) {\r\n background:\r\n radial-gradient(78% 240px at 18% 0, rgba(64, 96, 168, 0.34) 0%, rgba(64, 96, 168, 0) 72%),\r\n radial-gradient(64% 250px at 82% 0, rgba(77, 107, 254, 0.22) 0%, rgba(77, 107, 254, 0) 76%),\r\n linear-gradient(\r\n 180deg,\r\n rgba(255, 255, 255, 0.05) 0,\r\n rgba(255, 255, 255, 0.015) 200px,\r\n rgba(255, 255, 255, 0) 440px\r\n );\r\n}\r\n/* 右栏 track 本身透明；面板在下面单独画 */\r\nhtml[data-dsg='on'] [data-rightbar-col] {\r\n background: transparent !important;\r\n}\r\n\r\n/* ============================================================\r\n 2. Windows 原生窗口标题栏（frame 的 ::before 是它唯一底色）\r\n ============================================================ */\r\n/* 底色 + 恒定白釉（不能用三段渐变：40px 与 1111px 的盒子会算出不同釉光） */\r\nhtml[data-dsg='on'][data-windows-titlebar] [data-slot='root'] > [class*='_frame']::before {\r\n background-color: var(--dsg-fill-l1) !important;\r\n background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)) !important;\r\n border-bottom: 0.5px solid var(--dsg-border-hair);\r\n}\r\nhtml[data-dsg='on'][data-windows-titlebar] body[data-ds-dark-theme] [data-slot='root'] > [class*='_frame']::before {\r\n background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)) !important;\r\n}\r\nhtml[data-dsg='on'][data-windows-titlebar] [data-slot='root'] > [class*='_frame']::after {\r\n content: '';\r\n position: absolute;\r\n inset: 0 0 auto;\r\n height: var(--dsh-windows-titlebar-height, 40px);\r\n pointer-events: none;\r\n -webkit-backdrop-filter: var(--dsg-backdrop-l1);\r\n backdrop-filter: var(--dsg-backdrop-l1);\r\n}\r\n\r\n/* ============================================================\r\n 3. 会话 header：悬浮 L2 玻璃条 + DeepSeek tab 语言（高度 ~57px）\r\n ============================================================ */\r\n/* 外槽内缩：玻璃条与列边缘之间露出氛围层 —— 和 composer 同一套「浮在雾上」的\r\n 语言，也是“透明”能被看见的前提（背后不再是同一块白板）。 */\r\nhtml[data-dsg='on'] [data-slot='conversation.header'] {\r\n padding: 9px 12px 8px;\r\n background: transparent !important;\r\n}\r\nhtml[data-dsg='on'] [data-slot='conversation.header'] > header {\r\n position: relative;\r\n z-index: 0; /* 普通层叠上下文，让 ::before 的负 z-index 有落脚点 */\r\n padding: 3px 20px 2px !important;\r\n min-height: var(--dsg-header-h);\r\n border: 0 !important;\r\n border-radius: var(--dsg-header-radius);\r\n background: transparent !important;\r\n /* 外投影只放在本体的外圈；内釉光/发丝边交给 ::before（它在负 z-index 上，\r\n 比本体的 box-shadow 后绘制，否则会被填充层盖掉）。 */\r\n box-shadow:\r\n 0 20px 46px -30px rgba(44, 74, 140, 0.55),\r\n 0 2px 10px rgba(44, 74, 140, 0.06);\r\n transition: box-shadow var(--dsg-motion-dur) var(--dsg-ease);\r\n}\r\nhtml[data-dsg='on'] body[data-ds-dark-theme] [data-slot='conversation.header'] > header {\r\n box-shadow:\r\n 0 20px 46px -30px rgba(0, 0, 0, 0.66),\r\n 0 2px 10px rgba(0, 0, 0, 0.26);\r\n}\r\n/* 霜 + 填充 + 釉光：唯一载体（伪元素无后代，永不成为 fixed 包含块） */\r\nhtml[data-dsg='on'] [data-slot='conversation.header'] > header::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n z-index: -1;\r\n pointer-events: none;\r\n border-radius: inherit;\r\n background-color: var(--dsg-header-fill);\r\n background-image: var(--dsg-header-sweep), var(--dsg-sheen-l2);\r\n box-shadow:\r\n inset 0 1px 0 rgba(255, 255, 255, 0.72),\r\n inset 0 0 0 0.5px rgba(255, 255, 255, 0.4),\r\n inset 0 -16px 24px -22px rgba(58, 92, 158, 0.3);\r\n -webkit-backdrop-filter: var(--dsg-header-backdrop);\r\n backdrop-filter: var(--dsg-header-backdrop);\r\n}\r\nhtml[data-dsg='on'] body[data-ds-dark-theme] [data-slot='conversation.header'] > header::before {\r\n box-shadow:\r\n inset 0 1px 0 rgba(255, 255, 255, 0.16),\r\n inset 0 0 0 0.5px rgba(255, 255, 255, 0.12),\r\n inset 0 -16px 24px -22px rgba(0, 0, 0, 0.4);\r\n}\r\n/* 窄窗：贴边、圆角收小，别把内容挤扁 */\r\n@media (max-width: 760px) {\r\n html[data-dsg='on'] [data-slot='conversation.header'] {\r\n padding: 8px 8px 6px;\r\n }\r\n html[data-dsg='on'] [data-slot='conversation.header'] > header {\r\n padding: 2px 14px 2px !important;\r\n border-radius: 14px;\r\n }\r\n}\r\n/* 回退：无霜 / 软件光栅化时保持近不透明，几何与布局不变 */\r\n@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {\r\n html[data-dsg='on'] body {\r\n --dsg-header-fill: rgba(250, 252, 255, 0.94);\r\n }\r\n html[data-dsg='on'] body[data-ds-dark-theme] {\r\n --dsg-header-fill: rgba(15, 24, 40, 0.95);\r\n }\r\n}\r\nhtml[data-dsg='on'] body[data-dsg-fallback] {\r\n --dsg-header-fill: rgba(251, 253, 255, 0.94);\r\n --dsg-header-backdrop: none;\r\n}\r\nhtml[data-dsg='on'] body[data-ds-dark-theme][data-dsg-fallback] {\r\n --dsg-header-fill: rgba(15, 24, 40, 0.95);\r\n}\r\n/* 标题行更紧凑：52–57px 的 DeepSeek 观感，而不是 76px 的宿主默认 */\r\nhtml[data-dsg='on'] [data-slot='conversation.header'] > header [class*='_titleRow'] {\r\n min-height: 24px;\r\n align-items: center;\r\n}\r\n/* header 里的动作簇统一压到 26px，避免把标题行撑高 */\r\nhtml[data-dsg='on'] [data-slot='conversation.header'] > header :is(\r\n [data-slot='conversation.session.header.actions'],\r\n [data-slot='conversation.session.header.utilities'],\r\n [data-slot='conversation.session.header.corner']\r\n ) button {\r\n height: 26px;\r\n min-height: 26px;\r\n font-size: 12.5px;\r\n}\r\nhtml[data-dsg='on'] [data-slot='conversation.header'] > header [class*='_crumb'] {\r\n color: var(--dsw-alias-label-tertiary);\r\n border-radius: 8px;\r\n font-size: 13px;\r\n line-height: 20px;\r\n padding: 2px 8px;\r\n transition: background-color 140ms var(--dsg-ease), color 140ms var(--dsg-ease);\r\n}\r\nhtml[data-dsg='on'] [data-slot='conversation.header'] > header button[class*='_crumb']:hover {\r\n background: var(--dsg-row-hover);\r\n color: var(--dsw-alias-label-primary);\r\n}\r\nhtml[data-dsg='on'] [data-slot='conversation.header'] > header [class*='_crumbCurrent'] {\r\n color: var(--dsw-alias-label-primary);\r\n font-size: 15px;\r\n font-weight: 600;\r\n letter-spacing: 0.01em;\r\n padding-left: 4px;\r\n}\r\n/* 顶部动作区：一律胶囊化，hover 玻璃反馈 */\r\nhtml[data-dsg='on'] [data-slot='conversation.header'] > header :is(\r\n [data-slot='conversation.session.header.actions'],\r\n [data-slot='conversation.session.header.utilities'],\r\n [data-slot='conversation.session.header.corner']\r\n ) button {\r\n border-radius: 999px;\r\n transition: background-color 140ms var(--dsg-ease), color 140ms var(--dsg-ease);\r\n}\r\nhtml[data-dsg='on'] [data-slot='conversation.header'] > header :is(\r\n [data-slot='conversation.session.header.actions'],\r\n [data-slot='conversation.session.header.utilities'],\r\n [data-slot='conversation.session.header.corner']\r\n ) button:hover {\r\n background: var(--dsg-row-hover);\r\n}\r\n/* header 里的「打开方式」拆分按钮：整组做成胶囊 */\r\nhtml[data-dsg='on'] [data-slot='conversation.header'] > header [data-slot='conversation.session.header.utilities'] [class*='_split'] {\r\n border-radius: 999px;\r\n border: 0.5px solid var(--dsg-hairline-soft);\r\n background: var(--dsg-capsule);\r\n overflow: hidden;\r\n transition: background-color 140ms var(--dsg-ease), border-color 140ms var(--dsg-ease);\r\n}\r\nhtml[data-dsg='on'] [data-slot='conversation.header'] > header [data-slot='conversation.session.header.utilities'] [class*='_split']:hover {\r\n background: var(--dsg-capsule-hover);\r\n border-color: rgba(77, 107, 254, 0.2);\r\n}\r\n/* tabs：DeepSeek 风格——未选中弱化、选中蓝字 + 圆角下划线 */\r\nhtml[data-dsg='on'] [data-conversation-tabs] {\r\n gap: 28px;\r\n margin-top: 0;\r\n padding-left: 6px;\r\n}\r\nhtml[data-dsg='on'] [data-conversation-tabs] [role='tab'] {\r\n color: var(--dsw-alias-label-tertiary);\r\n font-size: 13px;\r\n font-weight: 500;\r\n line-height: 16px;\r\n padding: 2px 1px 7px;\r\n border-radius: 8px 8px 0 0;\r\n transition: color 140ms var(--dsg-ease), background-color 140ms var(--dsg-ease);\r\n}\r\nhtml[data-dsg='on'] [data-conversation-tabs] [role='tab']::after {\r\n height: 2.5px;\r\n border-radius: 999px;\r\n background: transparent;\r\n transition: background-color 160ms var(--dsg-ease), box-shadow 160ms var(--dsg-ease);\r\n}\r\nhtml[data-dsg='on'] [data-conversation-tabs] [role='tab']:hover {\r\n color: var(--dsw-alias-label-primary);\r\n}\r\nhtml[data-dsg='on'] [data-conversation-tabs] [role='tab']:hover::after {\r\n background: rgba(77, 107, 254, 0.22);\r\n}\r\nhtml[data-dsg='on'] [data-conversation-tabs] [role='tab'][aria-selected='true'] {\r\n color: var(--dsg-blue);\r\n font-weight: 600;\r\n}\r\nhtml[data-dsg='on'] [data-conversation-tabs] [role='tab'][aria-selected='true']::after {\r\n background: var(--dsg-blue);\r\n box-shadow: 0 2px 8px rgba(77, 107, 254, 0.35);\r\n}\r\n/* header 里的其它小控件（会话层级 lineage / 团队标签）弱化 */\r\nhtml[data-dsg='on'] [data-slot='conversation.header'] > header [class*='_label'] {\r\n color: var(--dsw-alias-label-tertiary);\r\n}\r\n\r\n/* ============================================================\r\n 4. 右栏面板（外壳一层；内容卡片归 60-settings.css）\r\n ============================================================ */\r\nhtml[data-dsg='on'] [data-rightbar-col] [data-sidebar-right-panel]:not([aria-hidden='true']) {\r\n z-index: var(--dsh-dockkit-dock-layer, 10);\r\n border-radius: var(--dsg-shell-radius) 0 0 var(--dsg-shell-radius);\r\n}\r\nhtml[data-dsg='on'] [data-rightbar-col] [data-sidebar-right-panel]:not([aria-hidden='true'])::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n z-index: -1;\r\n pointer-events: none;\r\n border-radius: inherit;\r\n background-color: var(--dsg-panel-fill);\r\n background-image: var(--dsg-sheen-l2);\r\n box-shadow: inset 0.5px 0 0 var(--dsg-hairline-soft), inset 1px 0 0 rgba(255, 255, 255, 0.42);\r\n -webkit-backdrop-filter: var(--dsg-panel-backdrop);\r\n backdrop-filter: var(--dsg-panel-backdrop);\r\n}\r\n/* 收起态显式清干净（容器仍在布局里） */\r\nhtml[data-dsg='on'] [data-rightbar-col] [data-sidebar-right-panel][aria-hidden='true']::before {\r\n content: none;\r\n}\r\nhtml[data-dsg='on'] body[data-ds-dark-theme] [data-rightbar-col] [data-sidebar-right-panel]:not([aria-hidden='true'])::before {\r\n box-shadow: inset 0.5px 0 0 rgba(255, 255, 255, 0.08);\r\n}\r\n/* dockkit tab strip：胶囊 tab */\r\nhtml[data-dsg='on'] [data-dockkit-strip] {\r\n padding: 0 6px;\r\n}\r\nhtml[data-dsg='on'] [data-dockkit-strip] [data-dockkit-tab] {\r\n border-radius: 9px;\r\n color: var(--dsw-alias-label-tertiary);\r\n transition: background-color 140ms var(--dsg-ease), color 140ms var(--dsg-ease);\r\n}\r\nhtml[data-dsg='on'] [data-dockkit-strip] [data-dockkit-tab]:hover {\r\n background: var(--dsg-row-hover);\r\n color: var(--dsw-alias-label-secondary);\r\n}\r\nhtml[data-dsg='on'] [data-dockkit-strip] [data-dockkit-tab][aria-selected='true'] {\r\n background: var(--dsg-row-active);\r\n color: var(--dsg-row-active-ink);\r\n}\r\n/* dockkit 分栏把手 / 内容区不铺底 */\r\nhtml[data-dsg='on'] [data-dockkit-pane],\r\nhtml[data-dsg='on'] [data-dockkit-content] {\r\n background: transparent !important;\r\n}\r\n\r\n/* ============================================================\r\n 5. 滚动条：宿主局部覆盖回本色（foundation 给的是全局细蓝条）\r\n ============================================================ */\r\nhtml[data-dsg='on'] [data-conversation-scroll],\r\nhtml[data-dsg='on'] [data-sidebar-right-panel] [data-dockkit-pane] {\r\n --dsh-scrollbar-thumb: rgba(77, 107, 254, 0.22);\r\n --dsh-scrollbar-thumb-hover: rgba(77, 107, 254, 0.36);\r\n}\n\n/* ===== 12-windows-titlebar.css ===== */\n/* ============================================================================\r\n 12 windows titlebar — 修复 Windows 原生标题栏（菜单条 + 窗口控制按钮）色差\r\n ----------------------------------------------------------------------------\r\n 背景：DSH Desktop 的 preload 注入一个 Shadow DOM 菜单条 div[data-windows-menu]，\r\n 并用一个隐藏探针 span（background-color: var(--dsw-specific-sidebar-fill)）\r\n 通过 canvas 取色后 IPC 给主进程 setTitleBarOverlay(color, symbolColor)。\r\n 我们把这些 token 改成了半透明玻璃后，Electron 的 titleBarOverlay 把 alpha\r\n 合成到黑色背衬上 → 顶部出现一条深色/突兀的带；浅色模式同样存在。\r\n\r\n 修法（全部为 CSS，不改宿主）：\r\n 1. 探针改成不透明主题色 → 主进程收到不透明 rgba，原生窗口控件区与主题一致。\r\n 2. 网页侧标题栏底色用同一实体色 → 菜单区/控件区/网页区三者同色，不再三层色差。\r\n 3. 给菜单条左侧补上 DSH 官方鲸标（从 primitives 提取的 path，mask 着色）。\r\n ========================================================================== */\r\n\r\nhtml[data-dsg='on'][data-windows-titlebar] {\r\n --dsg-titlebar-solid: #eaf1fb;\r\n --dsg-titlebar-ink: #101728;\r\n}\r\nhtml[data-dsg='on'][data-windows-titlebar] body[data-ds-dark-theme] {\r\n --dsg-titlebar-solid: #0b1322;\r\n --dsg-titlebar-ink: #eef3ff;\r\n}\r\n\r\n/* 1) 探针：让主进程拿到不透明标题栏色（样式表 !important 胜过 inline 非 important） */\r\nhtml[data-dsg='on'] body > span[style*='--dsw-specific-sidebar-fill'] {\r\n background-color: var(--dsg-titlebar-solid) !important;\r\n}\r\nhtml[data-dsg='on'] body[data-ds-dark-theme] > span[style*='--dsw-specific-sidebar-fill'] {\r\n background-color: #0b1322 !important;\r\n}\r\n\r\n/* 2) 网页侧标题栏：与原生 overlay 同色；实体色避免透明叠黑 */\r\nhtml[data-dsg='on'][data-windows-titlebar] [data-slot='root'] > [class*='_frame']::before {\r\n background-color: var(--dsg-titlebar-solid) !important;\r\n background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 60%) !important;\r\n border-bottom: 0.5px solid var(--dsg-border-hair, rgba(56, 88, 158, 0.14)) !important;\r\n -webkit-backdrop-filter: none !important;\r\n backdrop-filter: none !important;\r\n}\r\n/* 原生条上不再挂霜（大面 blur 无收益，且会与 native overlay 抢层） */\r\nhtml[data-dsg='on'][data-windows-titlebar] [data-slot='root'] > [class*='_frame']::after {\r\n content: none !important;\r\n -webkit-backdrop-filter: none !important;\r\n backdrop-filter: none !important;\r\n}\r\n\r\n/* 3) 菜单条：\r\n · 宿主 div[data-windows-menu] 保持完全透明，与标题栏背景同色；\r\n · 不再自绘左侧图标 —— 标题栏左侧 12px 处是 DSH 自带的「侧栏收起/展开」按钮\r\n （collapsed 时 48px 处还有「新会话」按钮），自绘图标会与之重叠；\r\n · 菜单起点只在「侧栏展开」时右移到 54px（给 native toggle 留位）；\r\n 收起时交回 DSH 的 84px，避开左侧两个 28px 按钮。 */\r\nhtml[data-dsg='on'][data-windows-titlebar]:not(:has([data-sidebar-collapsed='true'])) {\r\n --dsh-windows-menu-start: 54px;\r\n}\r\nhtml[data-dsg='on'][data-windows-titlebar] div[data-windows-menu] {\r\n background: transparent !important;\r\n background-color: transparent !important;\r\n box-shadow: none !important;\r\n color: var(--dsw-alias-label-secondary);\r\n}\n\n/* ===== 20-sidebar.css ===== */\n/* ============================================================================\n dsh-skin-mistblue · 20 sidebar — 左栏（品牌 / 新会话 / 面板列表 / 工作区会话树 / footer）\n Owner: shell-dev.\n\n 玻璃策略（GLASS-SPEC §5 #131 / SURFACE-MAP §8）：\n · 左栏列 = `div:has(> [data-slot=\"sidebar\"])`；模糊挂列的 ::before，列自身\n `position:relative; z-index:0`。宿主在 Windows 下把「收起/展开」与「收起态新会话」\n 两个按钮写成 position:fixed，挂列上会让它们改锚、被裁掉。\n · 列 = L2 玻璃（fill-l2 + backdrop-l2 + sheen + 右缘发丝/内阴影）。\n · 内层 [data-slot=\"sidebar\"] 是 display:contents 锚点（不生成盒子），真正的内容根\n `._2H3hWW_root` 自带 sidebar-fill 实底 —— 必须清掉，否则列上叠两层地板。\n · 行级只做 hover/selected 的柔光，不单独挂霜（“one blur per shell”）。\n ========================================================================== */\n\n/* ---- 1. 左栏列：L2 玻璃 ------------------------------------------------ */\nhtml[data-dsg='on'] div:has(> [data-slot='sidebar']) {\n position: relative;\n z-index: 0;\n background: transparent !important;\n /* 玻璃边界：发丝线画在元素边框上（::before 的 inset:0 不会盖住 border） */\n border-right: 0.5px solid var(--dsg-border-hair) !important;\n}\nhtml[data-dsg='on'] body[data-ds-dark-theme] div:has(> [data-slot='sidebar']) {\n border-right-color: rgba(150, 180, 255, 0.14) !important;\n}\nhtml[data-dsg='on'] div:has(> [data-slot='sidebar'])::before {\n content: '';\n position: absolute;\n inset: 0;\n z-index: -1;\n pointer-events: none;\n background-color: var(--dsg-fill-l2);\n background-image: var(--dsg-sheen-l2);\n /* 内侧白光 + 柔和内投影：挂在 ::before 上才会画在填充层之上 */\n box-shadow:\n inset -1px 0 0 rgba(255, 255, 255, 0.5),\n inset -26px 0 30px -30px rgba(44, 74, 140, 0.32);\n -webkit-backdrop-filter: var(--dsg-backdrop-l2);\n backdrop-filter: var(--dsg-backdrop-l2);\n}\nhtml[data-dsg='on'] body[data-ds-dark-theme] div:has(> [data-slot='sidebar'])::before {\n box-shadow:\n inset -1px 0 0 rgba(255, 255, 255, 0.08),\n inset -26px 0 30px -30px rgba(0, 0, 0, 0.5);\n}\n/* 右侧玻璃厚度：一条很窄的纵向高光，让左栏从背景里“立”起来 */\nhtml[data-dsg='on'] div:has(> [data-slot='sidebar'])::after {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n width: 14px;\n z-index: -1;\n pointer-events: none;\n background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.28) 100%);\n}\nhtml[data-dsg='on'] body[data-ds-dark-theme] div:has(> [data-slot='sidebar'])::after {\n background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.06) 100%);\n}\nhtml[data-dsg='on'] body[data-ds-dark-theme] [data-slot='sidebar'] [class*='_searchExpanded'] {\n box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;\n}\n/* 内容根：清掉宿主的 sidebar-fill，避免二次铺底 */\nhtml[data-dsg='on'] [data-slot='sidebar'] > [class*='_root'] {\n background: transparent !important;\n color: var(--dsw-alias-label-primary);\n --dsh-sidebar-inline-padding: 12px;\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] > [class*='_root']::before,\nhtml[data-dsg='on'] [data-slot='sidebar'] > [class*='_root']::after {\n background: transparent !important;\n}\n\n/* ---- 2. 品牌行 ---------------------------------------------------------- */\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_logoRow'] {\n gap: 6px;\n padding-left: 6px;\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_brand'] {\n border-radius: 10px;\n transition: opacity 160ms var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_brand']:hover {\n opacity: 0.85;\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_brandName'] {\n letter-spacing: 0.05em;\n font-weight: 600;\n font-size: 17px;\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_iconButton'] {\n border-radius: 9px;\n color: var(--dsw-alias-label-tertiary);\n transition: background-color 140ms var(--dsg-ease), color 140ms var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_iconButton']:hover {\n background: var(--dsg-row-hover);\n color: var(--dsw-alias-label-secondary);\n}\n\n/* ---- 3. 新会话：DeepSeek 白釉胶囊（蓝色 + 号 + hover 抬升）---------------- */\nhtml[data-dsg='on'] [data-slot='sidebar'] button[class*='_newSession'] {\n height: 38px;\n margin: 0 2px 12px;\n border-radius: 12px;\n border: 0.5px solid var(--dsg-hairline-soft);\n background: var(--dsg-capsule) !important;\n color: var(--dsw-alias-label-primary);\n font-size: 13.5px;\n font-weight: 500;\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.55),\n 0 1px 2px rgba(23, 42, 84, 0.06);\n transition:\n background-color 160ms var(--dsg-ease),\n box-shadow 160ms var(--dsg-ease),\n transform 160ms var(--dsg-ease),\n border-color 160ms var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] button[class*='_newSession']:hover {\n background: var(--dsg-capsule-hover) !important;\n border-color: rgba(77, 107, 254, 0.22);\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.6),\n 0 4px 12px -2px rgba(23, 42, 84, 0.14),\n 0 1px 2px rgba(23, 42, 84, 0.06);\n transform: translateY(-1px);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] button[class*='_newSession']:active {\n transform: translateY(0) scale(0.99);\n}\n/* + 号用品牌蓝，文字保持墨色 */\nhtml[data-dsg='on'] [data-slot='sidebar'] button[class*='_newSession'] [class*='_newSessionContent'] > svg {\n color: var(--dsg-blue);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] button[class*='_newSession'] [class*='_newSessionShortcut'] {\n color: var(--dsw-alias-label-caption);\n opacity: 0.8;\n}\n\n/* ---- 4. 全局面板列表（上下文洞察 / 插件 / 自动化 / 技能 / MCP）------------ */\nhtml[data-dsg='on'] [data-slot='sidebar'] nav[class*='_panelList'] {\n gap: 2px;\n margin-bottom: 10px;\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] nav[class*='_panelList'] button {\n min-height: 36px;\n height: 36px;\n padding: 0 10px;\n gap: 10px;\n border-radius: 10px;\n color: var(--dsw-alias-label-secondary);\n font-size: 13.5px;\n font-weight: 500;\n transition: background-color 140ms var(--dsg-ease), color 140ms var(--dsg-ease),\n box-shadow 140ms var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] nav[class*='_panelList'] button [class*='_panelGlyph'] {\n color: var(--dsw-alias-label-tertiary);\n transition: color 140ms var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] nav[class*='_panelList'] button:hover {\n background: var(--dsg-row-hover);\n color: var(--dsw-alias-label-primary);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] nav[class*='_panelList'] button:hover [class*='_panelGlyph'] {\n color: var(--dsg-blue);\n}\n/* 选中：蓝色柔光胶囊（不是实心块） */\nhtml[data-dsg='on'] [data-slot='sidebar'] nav[class*='_panelList'] button[class*='_panelActive'] {\n background: var(--dsg-row-active);\n color: var(--dsg-row-active-ink);\n box-shadow: inset 0 0 0 0.5px rgba(77, 107, 254, 0.16);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] nav[class*='_panelList'] button[class*='_panelActive'] [class*='_panelGlyph'] {\n color: var(--dsg-blue);\n}\n\n/* ---- 5. 工作区 / 会话树 ------------------------------------------------- */\n/* section header：工作区标签 + 搜索 + 视图按钮 */\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_sectionHeader'] {\n height: 34px;\n margin-top: 6px;\n margin-bottom: 2px;\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_sectionLabel'] {\n color: var(--dsw-alias-label-tertiary);\n font-size: 12px;\n font-weight: 600;\n letter-spacing: 0.04em;\n}\n/* 搜索：默认只是一枚图标；展开后是胶囊玻璃 + 蓝色 focus ring */\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_search'] {\n border-radius: 10px;\n transition: background-color 160ms var(--dsg-ease), box-shadow 160ms var(--dsg-ease),\n border-color 160ms var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_searchExpanded'] {\n background: var(--dsg-capsule) !important;\n border: 0.5px solid var(--dsg-hairline-soft) !important;\n border-radius: 10px;\n box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_searchExpanded']:focus-within {\n border-color: rgba(77, 107, 254, 0.55) !important;\n box-shadow: 0 0 0 2px var(--dsg-blue-ring);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_searchInput'] {\n font-size: 12.5px;\n color: var(--dsw-alias-label-primary);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_searchInput']::placeholder {\n color: var(--dsw-alias-label-caption);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_searchButton']:hover,\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_clearButton']:hover {\n background: var(--dsg-row-hover);\n border-radius: 8px;\n}\n/* 行：圆角柔光，不铺底 */\nhtml[data-dsg='on'] [data-slot='sidebar'] [role='treeitem'] {\n border-radius: 10px;\n color: var(--dsw-alias-label-secondary);\n transition: background-color 130ms var(--dsg-ease), color 130ms var(--dsg-ease),\n box-shadow 130ms var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [role='treeitem']:hover {\n background: var(--dsg-row-hover) !important;\n color: var(--dsw-alias-label-primary);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [role='treeitem'][aria-selected='true'] {\n background: var(--dsg-row-active) !important;\n color: var(--dsw-alias-label-primary);\n box-shadow: inset 0 0 0 0.5px rgba(77, 107, 254, 0.14);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [role='treeitem'] [class*='_title'] {\n font-size: 13.5px;\n line-height: 20px;\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [role='treeitem'] [class*='_time'] {\n color: var(--dsw-alias-label-caption);\n font-size: 10.5px;\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_projectRow'] {\n height: 32px;\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_projectText'] [class*='_title'] {\n font-weight: 500;\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_folderActive'] {\n color: var(--dsg-blue);\n}\n/* hover 才出现的行内操作按钮 */\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_rowActions'] [class*='_iconButton'] {\n border-radius: 7px;\n color: var(--dsw-alias-label-tertiary);\n transition: background-color 120ms var(--dsg-ease), color 120ms var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_rowActions'] [class*='_iconButton']:hover {\n background: rgba(77, 107, 254, 0.1);\n color: var(--dsg-blue);\n}\n/* 列表底部渐隐：跟随 L2 玻璃色（宿主的 sidebar-fill 现在是 L1，会对不上） */\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_fade'] {\n background: linear-gradient(to bottom, transparent, var(--dsg-fill-l2)) !important;\n}\n/* 会话溢出行（+N 更多） */\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_sessionOverflowButton'] {\n border-radius: 8px;\n color: var(--dsw-alias-label-tertiary);\n transition: color 120ms var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_sessionOverflowButton']:hover {\n color: var(--dsg-blue);\n}\n\n/* ---- 6. footer：设置入口 / 用户区 / 新版本 ------------------------------- */\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_footArea'] {\n gap: 2px;\n margin-top: 6px;\n padding-top: 8px;\n padding-bottom: 4px;\n border-top: 0.5px solid var(--dsg-hairline-soft);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_footArea'] button {\n border-radius: 10px;\n color: var(--dsw-alias-label-secondary);\n transition: background-color 140ms var(--dsg-ease), color 140ms var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_footArea'] button:hover {\n background: var(--dsg-row-hover);\n color: var(--dsw-alias-label-primary);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [data-slot='sidebar.settings'] button {\n min-height: 38px;\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_footArea'] [class*='_avatar'] {\n border-radius: 999px;\n box-shadow: inset 0 0 0 0.5px var(--dsg-hairline-soft);\n}\n/* 「新版本」小胶囊：品牌蓝弱底 */\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_indicator'] {\n height: 26px;\n border-radius: 999px;\n border: 0.5px solid rgba(77, 107, 254, 0.22);\n background: var(--dsg-blue-soft);\n color: var(--dsg-blue);\n font-size: 11.5px;\n font-weight: 500;\n transition: background-color 140ms var(--dsg-ease), transform 140ms var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_indicator']:hover {\n background: rgba(77, 107, 254, 0.18);\n transform: translateY(-1px);\n}\n\n/* ---- 7. 收起态（56px rail）：不要胶囊化，也不叠底 ---------------------- */\n/* 收起态两个 28×28 的标题栏按钮（展开/折叠 + 新建会话）由宿主用 position:fixed\n 钉在原生标题栏里；这里必须把几何完全交回宿主（28×28、无 margin/内边距），\n 只统一“材质”—— 否则基础规则的 38px 高/12px 圆角/品牌蓝图标会把 + 号顶歪。*/\nhtml[data-dsg='on'] [data-sidebar-collapsed] [data-slot='sidebar'] button[class*='_newSession'] {\n width: 28px !important;\n height: 28px !important;\n min-width: 28px !important;\n min-height: 28px !important;\n margin: 0 !important;\n padding: 0 !important;\n border: none !important;\n border-radius: 8px !important;\n background: transparent !important;\n box-shadow: none !important;\n transform: none !important;\n color: var(--dsw-alias-label-secondary) !important;\n}\nhtml[data-dsg='on'] [data-sidebar-collapsed] [data-slot='sidebar'] button[class*='_newSession'] [class*='_newSessionContent'] {\n padding: 0 !important;\n gap: 0 !important;\n justify-content: center !important;\n}\n/* 收起态的 + 号回到中性墨色（品牌蓝只留给展开态的主 CTA），并与 panel 图标同尺寸 */\nhtml[data-dsg='on'] [data-sidebar-collapsed] [data-slot='sidebar'] button[class*='_newSession'] [class*='_newSessionContent'] > svg {\n color: var(--dsw-alias-label-secondary) !important;\n width: 16px !important;\n height: 16px !important;\n}\nhtml[data-dsg='on'] [data-sidebar-collapsed] [data-slot='sidebar'] button[class*='_newSession']:hover {\n background: var(--dsg-row-hover) !important;\n color: var(--dsw-alias-label-primary) !important;\n}\nhtml[data-dsg='on'] [data-sidebar-collapsed] [data-slot='sidebar'] button[class*='_newSession']:hover [class*='_newSessionContent'] > svg {\n color: var(--dsw-alias-label-primary) !important;\n}\n/* 收起按钮右上角是「桌面更新」徽标（6px 品牌蓝圆点）；收起态只需要一个干净的\n panel 图标 —— 更新提示仍保留在展开态 footer 的「新版本」胶囊里。 */\nhtml[data-dsg='on'] [data-sidebar-collapsed] [data-slot='sidebar'] button[class*='_toggle'] [class*='_badge'] {\n display: none !important;\n}\nhtml[data-dsg='on'] [data-sidebar-collapsed] [data-slot='sidebar'] [class*='_panelList'] {\n gap: 8px;\n}\nhtml[data-dsg='on'] [data-sidebar-collapsed] [data-slot='sidebar'] [class*='_panelRow'] {\n border-radius: 12px;\n background: transparent;\n}\nhtml[data-dsg='on'] [data-sidebar-collapsed] [data-slot='sidebar'] [class*='_panelRow']:hover {\n background: var(--dsg-row-hover);\n}\nhtml[data-dsg='on'] [data-sidebar-collapsed] [data-slot='sidebar'] [class*='_footArea'] {\n border-top: none;\n}\n\n/* ---- 8. 深色：蓝色柔光再压一档，避免发灰 -------------------------------- */\nhtml[data-dsg='on'] body[data-ds-dark-theme] [data-slot='sidebar'] nav[class*='_panelList'] button[class*='_panelActive'] {\n box-shadow: inset 0 0 0 0.5px rgba(123, 147, 255, 0.22);\n}\nhtml[data-dsg='on'] body[data-ds-dark-theme] [data-slot='sidebar'] button[class*='_newSession'] {\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.14),\n 0 1px 2px rgba(0, 0, 0, 0.35);\n}\n\n/* ===== 21-collapsed-titlebar.css ===== */\n/* 收起态（标题栏里的 rail 按钮）的 tooltip 修复 ---------------------------------\n Windows 标题栏里「展开/折叠」与「新建会话」两个按钮在收起态是 position:fixed、\n 位于侧栏列内；它们的 tooltip 因此落在侧栏列的层叠上下文里。悬浮 header 现在是\n 一条带霜的玻璃条，会盖住 tooltip 并把它染成一块灰黑\"阴影\"（用户看到的\"黑色阴影\"）。\n 这里只在 tooltip 真的挂载时把 rail 提到 header 之上，让 tooltip 正常浮在下拉层，\n 不影响静止态层次。 */\nhtml[data-dsg='on'][data-windows-titlebar] div:has(> [data-slot='sidebar']):has([role='tooltip']) {\n z-index: 120;\n}\n\n/* ===== 22-drag-smooth.css ===== */\n/* ============================================================================\n dsh-skin-mistblue · 22 drag smooth (v1.12)\n ----------------------------------------------------------------------------\n Splitter drags drive pane width with a React state update per pointermove; the\n dockkit shell also keeps `transition: transform var(--ds-transition-duration-slow)`\n armed while open. That combination is what makes panes feel heavy and land\n early/late. Instead of fighting the host's pointer stream we keep the pointer\n behaviour untouched and simply:\n · start the expensive-material fallback on pointerdown (see client guard),\n · replace the shell's slow transform transition with a short *linear width\n chase* — the split follows the cursor through a 90ms linear interpolation,\n so a fast flick can never teleport the layout in one frame, while slow\n drags still feel 1:1,\n · drop scroll anchoring so reflow never scroll-compensates mid-drag.\n ========================================================================== */\n\nhtml[data-dsg='on'][data-dsg-resizing] [data-dockkit-host],\nhtml[data-dsg='on'][data-dsg-resizing] [data-dockkit-empty],\nhtml[data-dsg='on'][data-dsg-resizing] [data-dockkit-divider],\nhtml[data-dsg='on'][data-dsg-resizing] [data-dockkit-split],\nhtml[data-dsg='on'][data-dsg-resizing] [data-dockkit-cell],\nhtml[data-dsg='on'][data-dsg-resizing] [data-dockkit-pane],\nhtml[data-dsg='on'][data-dsg-resizing] [data-dockkit-surface] {\n transition: none !important;\n animation: none !important;\n}\n\n/* the moving edges chase the pointer with a bounded, linear follow */\nhtml[data-dsg='on'][data-dsg-resizing] [data-sidebar-right-panel],\nhtml[data-dsg='on'][data-dsg-resizing] div:has(> [data-slot='sidebar']),\nhtml[data-dsg='on'][data-dsg-resizing] [data-slot='sidebar'] {\n transition: width 90ms linear, transform 90ms linear !important;\n will-change: width;\n}\n\nhtml[data-dsg='on'][data-dsg-resizing] [data-conversation-region='chat'],\nhtml[data-dsg='on'][data-dsg-resizing] [data-chat-flow] {\n overflow-anchor: none;\n scroll-behavior: auto;\n}\n\nhtml[data-dsg='on'][data-dsg-resizing] [data-dockkit-divider] {\n cursor: col-resize;\n touch-action: none;\n}\n\n/* ===== 23-panel-reorder.css ===== */\n/* ============================================================================\n dsh-skin-mistblue · 23 panel reorder (v1.14)\n ----------------------------------------------------------------------------\n Left sidebar panel list (插件 / 上下文洞察 / MCP 连接器 …) gets two behaviours\n from `initSidebarEnhancer`:\n · HTML5 drag & drop to reorder — rows become draggable, drop writes per-row\n CSS `order` (no DOM moves) and persists the label order in localStorage;\n · clicking the already-open row returns to the Conversation via the layout\n service (`layout.selectPanel(null)`).\n Native DnD is used on purpose: pointer-event heuristics conflict with the\n host tooltip/click handlers, while dragstart/dragover/drop never fire a click.\n ========================================================================== */\n\nhtml[data-dsg='on'] nav[class*='_panelList'] > button[class*='_panelRow'] {\n cursor: grab;\n -webkit-user-drag: element;\n}\n\nhtml[data-dsg='on'] nav[class*='_panelList'] {\n user-select: none;\n -webkit-user-select: none;\n}\n\nhtml[data-dsg='on'] nav[class*='_panelList'] > button[class*='_panelRow']:active {\n cursor: grabbing;\n}\n\nhtml[data-dsg='on'] nav[class*='_panelList'] > button[class*='_panelRow'].dsg-panel-row-drag {\n opacity: 0.55;\n}\n\nhtml[data-dsg='on'] nav[class*='_panelList'] > button[class*='_panelRow'].dsg-panel-row-drop {\n background-color: var(--dsg-row-hover) !important;\n box-shadow:\n inset 0 0 0 1.5px rgba(77, 107, 254, 0.5),\n 0 6px 18px -10px rgba(23, 48, 108, 0.35);\n}\n\nhtml[data-dsg='on'] body[data-ds-dark-theme]\n nav[class*='_panelList'] > button[class*='_panelRow'].dsg-panel-row-drop {\n box-shadow:\n inset 0 0 0 1.5px rgba(123, 147, 255, 0.55),\n 0 8px 20px -12px rgba(0, 0, 0, 0.6);\n}\n\n/* ===== 30-composer.css ===== */\n/* ============================================================================\n dsh-skin-mistblue · 30 composer — 输入座位 / 输入卡 / 工具行 / 发送键 / dock 胶囊 / goal bar\n Owner: shell-dev.\n\n 硬约束（UI-CONTRACT §3 / GLASS-SPEC §5 #89）：\n · [data-composer-seat] 不铺底、不挂霜（内部有外部插件塞进来的 position:fixed 座位）。\n · [data-composer-card] 本体 backdrop-filter:none；霜只挂 ::before（伪元素无后代，\n 永不成为 fixed 包含块）。\n · 卡片自身的 background / sheen / bevel 画在本体上 —— 它比 ::before 的负 z-index\n 后绘制，所以霜在“填充层之下”，高光是锐的。\n ========================================================================== */\n\n/* ---- 1. 座位：纯容器，不铺底不挂霜 -------------------------------------- */\nhtml[data-dsg='on'] [data-composer-seat],\nhtml[data-dsg='on'] [data-conversation-region='composer'] {\n background: none !important;\n -webkit-backdrop-filter: none !important;\n backdrop-filter: none !important;\n box-shadow: none;\n}\n/* composer 区域宽度：DeepSeek 参考图口径 732–760，不跟 chat 列一起收窄；\n dock / goal bar 读同一个变量，保持左右对齐（Lead 口径 min(760px, 100% - 48px)）。 */\nhtml[data-dsg='on'] [data-conversation-region='chat'] {\n --dsh-composer-card-max-width: min(calc(100% - 48px), 760px);\n}\nhtml[data-dsg='on'] [data-goal-bar] [class*='_bar'] {\n max-width: var(--dsh-composer-card-max-width) !important;\n}\n\n/* ---- 2. 输入卡：L2 玻璃，radius 28 ------------------------------------- */\nhtml[data-dsg='on'] [data-composer-card] {\n border-radius: var(--dsg-radius-composer) !important;\n border: 0 !important;\n background: var(--dsg-fill-l2) !important;\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.55),\n inset 0 -1px 0 rgba(255, 255, 255, 0.1),\n inset 0 0 0 0.5px rgba(255, 255, 255, 0.22),\n 0 18px 44px -18px rgba(44, 74, 140, 0.28),\n 0 2px 8px rgba(44, 74, 140, 0.06);\n -webkit-backdrop-filter: none !important;\n backdrop-filter: none !important;\n transition: box-shadow 200ms var(--dsg-ease);\n}\nhtml[data-dsg='on'] body[data-ds-dark-theme] [data-composer-card] {\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.14),\n inset 0 -1px 0 rgba(255, 255, 255, 0.05),\n inset 0 0 0 0.5px rgba(255, 255, 255, 0.1),\n 0 18px 44px -18px rgba(0, 0, 0, 0.55),\n 0 2px 8px rgba(0, 0, 0, 0.25);\n}\n/* 霜：唯一载体 */\nhtml[data-dsg='on'] [data-composer-card]::before {\n content: '';\n position: absolute;\n inset: 0;\n z-index: -1;\n border-radius: inherit;\n pointer-events: none;\n -webkit-backdrop-filter: var(--dsg-backdrop-l2);\n backdrop-filter: var(--dsg-backdrop-l2);\n}\n/* focus：不要过亮，只加一圈品牌蓝柔光 */\nhtml[data-dsg='on'] [data-composer-card]:focus-within {\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.6),\n inset 0 -1px 0 rgba(255, 255, 255, 0.1),\n inset 0 0 0 0.5px rgba(255, 255, 255, 0.24),\n 0 0 0 2px rgba(77, 107, 254, 0.28),\n 0 18px 48px -18px rgba(44, 74, 140, 0.3);\n}\n\n/* ---- 3. 输入文字 / placeholder ----------------------------------------- */\nhtml[data-dsg='on'] [data-composer-card] [class*='_input'] {\n font-size: 15px !important;\n line-height: 25px !important;\n min-height: 40px;\n padding: 6px 10px 0 14px !important;\n color: var(--dsw-alias-label-primary);\n caret-color: var(--dsg-blue);\n}\nhtml[data-dsg='on'] [data-composer-card] [class*='_placeholder'] {\n top: 6px !important;\n left: 14px !important;\n right: 10px !important;\n font-size: 15px !important;\n line-height: 25px;\n color: var(--dsw-alias-label-caption) !important;\n}\nhtml[data-dsg='on'] [data-composer-card] [class*='_row'] {\n gap: 10px;\n padding: 2px 8px 7px !important;\n}\n\n/* ---- 4. 工具行：+ / 权限 / 模型 胶囊化 ---------------------------------- */\n/* + 号：白釉圆钮 */\nhtml[data-dsg='on'] [data-composer-card] button[class*='_add'] {\n width: 30px;\n height: 30px;\n border-radius: 999px;\n border: 0.5px solid var(--dsg-hairline-soft);\n background: var(--dsg-capsule) !important;\n color: var(--dsw-alias-label-secondary);\n box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 2px rgba(23, 42, 84, 0.05);\n transition: background-color 140ms var(--dsg-ease), color 140ms var(--dsg-ease),\n transform 140ms var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-composer-card] button[class*='_add']:hover:not(:disabled) {\n background: var(--dsg-capsule-hover) !important;\n color: var(--dsw-alias-label-primary);\n transform: translateY(-1px);\n}\n/* 权限选择器 */\nhtml[data-dsg='on'] [data-slot='conversation.input.permission'] button {\n height: 28px;\n padding: 0 9px 0 8px;\n gap: 5px;\n border-radius: 999px;\n color: var(--dsw-alias-label-secondary);\n font-size: 12.5px;\n font-weight: 500;\n background: var(--dsg-capsule);\n border: 0.5px solid var(--dsg-hairline-soft);\n transition: background-color 140ms var(--dsg-ease), color 140ms var(--dsg-ease),\n border-color 140ms var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-slot='conversation.input.permission'] button:hover:not(:disabled) {\n background: var(--dsg-capsule-hover);\n border-color: rgba(77, 107, 254, 0.2);\n color: var(--dsw-alias-label-primary);\n}\nhtml[data-dsg='on'] [data-slot='conversation.input.permission'] button [class*='_triggerIcon'] {\n color: var(--dsw-alias-label-tertiary);\n}\n/* 模型选择器：胶囊 + 1017 蓝标 + High 弱化 */\nhtml[data-dsg='on'] [data-slot='conversation.input.model'] button {\n height: 28px;\n padding: 0 10px 0 9px;\n gap: 5px;\n border-radius: 999px;\n background: var(--dsg-capsule);\n border: 0.5px solid var(--dsg-hairline-soft);\n color: var(--dsw-alias-label-secondary);\n font-size: 12.5px;\n font-weight: 500;\n transition: background-color 140ms var(--dsg-ease), color 140ms var(--dsg-ease),\n border-color 140ms var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-slot='conversation.input.model'] button:hover:not(:disabled),\nhtml[data-dsg='on'] [data-slot='conversation.input.model'] button[aria-expanded='true'] {\n background: var(--dsg-capsule-hover);\n border-color: rgba(77, 107, 254, 0.2);\n color: var(--dsw-alias-label-primary);\n}\nhtml[data-dsg='on'] [data-slot='conversation.input.model'] [data-tone='info'] {\n height: 16px;\n padding: 0 5px;\n border-radius: 5px;\n background: var(--dsg-blue-soft);\n color: var(--dsg-blue);\n font-size: 10px;\n font-weight: 600;\n line-height: 16px;\n}\nhtml[data-dsg='on'] [data-slot='conversation.input.model'] [class*='_triggerEffort'] {\n color: var(--dsw-alias-label-caption);\n font-weight: 400;\n}\nhtml[data-dsg='on'] [data-slot='conversation.input.model'] [class*='_chevron'] {\n color: var(--dsw-alias-label-caption);\n}\n\n/* ---- 5. 发送 / 停止：DeepSeek 蓝圆钮 ----------------------------------- */\nhtml[data-dsg='on'] [data-composer-card] button[class*='_primary'] {\n width: 34px;\n height: 34px;\n border-radius: 999px;\n background: var(--dsg-blue) !important;\n color: #fff;\n border: none;\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.26),\n 0 6px 18px -6px rgba(77, 107, 254, 0.55);\n transform: translateY(-1px);\n transition: background-color 140ms var(--dsg-ease), transform 140ms var(--dsg-ease),\n box-shadow 140ms var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-composer-card] button[class*='_primary']:hover:not(:disabled) {\n background: var(--dsg-blue-strong) !important;\n transform: translateY(-2px);\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.3),\n 0 10px 22px -6px rgba(77, 107, 254, 0.6);\n}\nhtml[data-dsg='on'] [data-composer-card] button[class*='_primary']:active:not(:disabled) {\n transform: translateY(0) scale(0.94);\n}\nhtml[data-dsg='on'] [data-composer-card] button[class*='_primary']:disabled {\n opacity: 1 !important;\n cursor: default;\n background: rgba(77, 107, 254, 0.3) !important;\n box-shadow: none;\n transform: none;\n color: rgba(255, 255, 255, 0.85);\n}\nhtml[data-dsg='on'] [data-composer-card] button[class*='_primary'] svg {\n width: 18px;\n height: 18px;\n}\n\n/* ---- 6. composer dock：统计 / 上下文占用 = 小胶囊 ----------------------- */\nhtml[data-dsg='on'] [data-composer-dock] {\n gap: 6px;\n padding-top: 4px;\n}\nhtml[data-dsg='on'] [data-composer-dock] [class*='_pill'],\nhtml[data-dsg='on'] [data-composer-dock] [class*='_trigger'] {\n height: 24px;\n padding: 0 9px;\n border-radius: 999px;\n background: var(--dsg-capsule);\n border: 0.5px solid var(--dsg-hairline-soft);\n color: var(--dsw-alias-label-tertiary);\n font-size: 11.5px;\n transition: background-color 140ms var(--dsg-ease), color 140ms var(--dsg-ease),\n border-color 140ms var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-composer-dock] [class*='_pill']:hover,\nhtml[data-dsg='on'] [data-composer-dock] [class*='_trigger']:hover,\nhtml[data-dsg='on'] [data-composer-dock] [class*='_pill'][aria-expanded='true'],\nhtml[data-dsg='on'] [data-composer-dock] [class*='_trigger'][aria-expanded='true'] {\n background: var(--dsg-capsule-hover);\n border-color: var(--dsg-hairline-soft);\n color: var(--dsw-alias-label-secondary);\n}\nhtml[data-dsg='on'] [data-composer-dock] [class*='_pill'] svg,\nhtml[data-dsg='on'] [data-composer-dock] [class*='_trigger'] svg {\n width: 13px;\n height: 13px;\n}\n\n/* ---- 7. goal bar：L2 + 蓝色强调 ---------------------------------------- */\nhtml[data-dsg='on'] [data-goal-bar] [class*='_bar'] {\n border-radius: 999px !important;\n height: 34px;\n isolation: auto; /* 宿主 isolate 会建 backdrop root，霜失效 */\n box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 6px 18px rgba(44, 74, 140, 0.08);\n}\nhtml[data-dsg='on'] [data-goal-bar] [class*='_bar']::before {\n background: var(--dsg-fill-l2);\n -webkit-backdrop-filter: var(--dsg-backdrop-l1);\n backdrop-filter: var(--dsg-backdrop-l1);\n}\nhtml[data-dsg='on'] body[data-ds-dark-theme] [data-goal-bar] [class*='_bar'] {\n box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 18px rgba(0, 0, 0, 0.3);\n}\nhtml[data-dsg='on'] [data-goal-bar] [class*='_goalGlyph'] {\n color: var(--dsg-blue);\n}\nhtml[data-dsg='on'] [data-goal-bar] [class*='_label'] {\n color: var(--dsw-alias-label-primary);\n font-weight: 600;\n}\nhtml[data-dsg='on'] [data-goal-bar] [class*='_objective'] {\n color: var(--dsw-alias-label-secondary);\n}\nhtml[data-dsg='on'] [data-goal-bar] [class*='_iconBtn'] {\n border-radius: 999px;\n transition: background-color 140ms var(--dsg-ease), color 140ms var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-goal-bar] [class*='_iconBtn']:hover {\n background: var(--dsg-row-hover);\n color: var(--dsw-alias-label-secondary);\n}\n/* ---- 8. 无霜降级：fill 已由 foundation 抬到近不透明，保持布局不变 -------- */\n@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {\n html[data-dsg='on'] [data-composer-card] {\n background: rgba(252, 253, 255, 0.94) !important;\n }\n html[data-dsg='on'] body[data-ds-dark-theme] [data-composer-card] {\n background: rgba(16, 26, 44, 0.96) !important;\n }\n}\n\n/* ===== 35-hero.css ===== */\n/* ============================================================================\n dsh-skin-mistblue · 35 hero — 空会话 Hero（品牌标记 / 大标题 / lede 位 / workspace 控件 / 输入卡）\n Owner: shell-dev.\n\n Hero 的真实结构（conversation 包 ConversationContent，phase=hero）：\n [data-phase=\"hero\"] .Dc7zOa_composerHero\n ├ HeroShell.root (Hqq-bq_root) → stack → headline(fish + titleGroup + previewBadge)\n ├ heroWorkspaceRow（workspace / agentPreset 控件）\n ├ dock 槽（goal / todo，空则 display:none）\n └ inputBar（[data-composer-card]，hero 变体）\n 宿主在 hero 态把 [data-conversation-scroll] 设成 justify-content:center，\n 所以整组天然垂直居中；这里只做排版、字距、间距与控件胶囊化，不铺任何底板\n （SURFACE-MAP §4.2：Hero 不铺底，避免与输入卡重复加雾）。\n ========================================================================== */\n\n/* ---- 1. 组内节奏：标题 → 控件 → 输入卡 --------------------------------- */\nhtml[data-dsg='on'] [data-phase='hero'] [class*='_composerHero'] {\n gap: 14px;\n padding-bottom: 34px;\n}\nhtml[data-dsg='on'] [data-phase='hero'] [class*='_composerHero'] > :first-child {\n margin-bottom: 6px;\n}\n\n/* ---- 2. Hero 标题：48px / 600 / 0.1em，东方气质的粗黑体 ---------------- */\nhtml[data-dsg='on'] [data-phase='hero'] [class*='_headline'] {\n font-size: clamp(38px, 4.4vw, 48px);\n line-height: 1.22;\n font-weight: 600;\n letter-spacing: 0.1em;\n color: var(--dsw-alias-label-primary);\n text-wrap: balance;\n justify-content: center;\n gap: 12px;\n}\n/* 字距是给正文标题的；品牌标记与「预览版」角标不吃字距 */\nhtml[data-dsg='on'] [data-phase='hero'] [class*='_titleGroup'] {\n gap: 0.28em;\n justify-content: center;\n}\nhtml[data-dsg='on'] [data-phase='hero'] [class*='_fishHitbox'],\nhtml[data-dsg='on'] [data-phase='hero'] [data-slot='conversation.hero.brand.mark'] {\n color: var(--dsg-blue);\n margin-right: 0.1em;\n}\nhtml[data-dsg='on'] [data-phase='hero'] [class*='_fishHitbox'] svg,\nhtml[data-dsg='on'] [data-phase='hero'] [data-slot='conversation.hero.brand.mark'] svg {\n width: 42px;\n height: 42px;\n color: var(--dsg-blue);\n}\n/* 「预览版」角标：品牌蓝弱底小胶囊 */\nhtml[data-dsg='on'] [data-phase='hero'] [class*='_previewBadge'] {\n padding: 1px 8px;\n margin-top: 8px;\n border-radius: 999px;\n border: 0.5px solid rgba(77, 107, 254, 0.2);\n background: var(--dsg-blue-soft);\n color: var(--dsg-blue);\n font-family: var(--dsw-font-family);\n font-size: 11px;\n font-weight: 500;\n line-height: 18px;\n letter-spacing: 0.02em;\n align-self: center;\n}\n\n/* ---- 3. workspace / preset 控件：居中胶囊 ------------------------------- */\nhtml[data-dsg='on'] [data-phase='hero'] [class*='_heroWorkspaceRow'] {\n justify-content: center;\n padding: 0 8px;\n margin-top: 0;\n gap: 8px;\n}\nhtml[data-dsg='on'] [data-phase='hero'] [class*='_heroWorkspaceRow'] button,\nhtml[data-dsg='on'] [data-phase='hero'] [class*='_heroOptions'] button,\nhtml[data-dsg='on'] [data-phase='hero'] [data-slot='conversation.hero.workspace'] button,\nhtml[data-dsg='on'] [data-phase='hero'] [data-slot='conversation.hero.agentPreset'] button {\n height: 30px;\n padding: 0 11px;\n gap: 6px;\n border-radius: 999px;\n border: 0.5px solid var(--dsg-hairline-soft);\n background: var(--dsg-capsule);\n color: var(--dsw-alias-label-secondary);\n font-size: 12.5px;\n font-weight: 500;\n transition: background-color 140ms var(--dsg-ease), color 140ms var(--dsg-ease),\n transform 140ms var(--dsg-ease), border-color 140ms var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-phase='hero'] [class*='_heroWorkspaceRow'] button:hover,\nhtml[data-dsg='on'] [data-phase='hero'] [class*='_heroOptions'] button:hover,\nhtml[data-dsg='on'] [data-phase='hero'] [data-slot='conversation.hero.workspace'] button:hover,\nhtml[data-dsg='on'] [data-phase='hero'] [data-slot='conversation.hero.agentPreset'] button:hover {\n background: var(--dsg-capsule-hover);\n border-color: rgba(77, 107, 254, 0.2);\n color: var(--dsw-alias-label-primary);\n transform: translateY(-1px);\n}\nhtml[data-dsg='on'] [data-phase='hero'] [class*='_heroWorkspaceRow'] svg {\n color: var(--dsw-alias-label-tertiary);\n}\n\n/* ---- 4. Hero 里的输入卡：更高的呼吸感（宽度固定 760，不被 hero 变体的双层 padding 吃掉）--- */\n/* hero 结构是 composerHero(+32 clearance) → RlGAzG_root(padding 16×2) → card，\n 若继续用 `calc(100% - 48px)` 会算出 760−48=712；这里用绝对 760（max-width 不强制宽度，\n 窄窗仍按 100% 收缩）。 */\nhtml[data-dsg='on'] [data-phase='hero'] {\n --dsh-composer-card-max-width: 760px;\n}\nhtml[data-dsg='on'] [data-phase='hero'] [data-composer-card] {\n border-radius: 28px;\n}\nhtml[data-dsg='on'] [data-phase='hero'] [data-composer-card] [class*='_input'] {\n min-height: 54px;\n padding-top: 10px !important;\n font-size: 15.5px !important;\n line-height: 26px !important;\n}\nhtml[data-dsg='on'] [data-phase='hero'] [data-composer-card] [class*='_placeholder'] {\n top: 10px !important;\n font-size: 15.5px !important;\n line-height: 26px;\n}\n/* hero 态 dock 为空时不留缝 */\nhtml[data-dsg='on'] [data-phase='hero'] [data-composer-dock]:empty {\n display: none;\n}\n\n/* ---- 5. 入场：轻微上浮（240ms，reduced-motion 由 foundation 收掉） ------ */\n@keyframes dsg-hero-rise {\n from {\n opacity: 0;\n transform: translateY(8px);\n }\n to {\n opacity: 1;\n transform: none;\n }\n}\nhtml[data-dsg='on'] [data-phase='hero'] [class*='_composerHero'] > * {\n animation: dsg-hero-rise 260ms var(--dsg-ease) both;\n}\nhtml[data-dsg='on'] [data-phase='hero'] [class*='_composerHero'] > :nth-child(2) {\n animation-delay: 60ms;\n}\nhtml[data-dsg='on'] [data-phase='hero'] [class*='_composerHero'] > :nth-child(3) {\n animation-delay: 110ms;\n}\nhtml[data-dsg='on'] [data-phase='hero'] [class*='_composerHero'] > :nth-child(4) {\n animation-delay: 150ms;\n}\nhtml[data-dsg='on'] [data-phase='hero'] [class*='_headline'] {\n animation: dsg-hero-rise 300ms var(--dsg-ease) both;\n}\n\n/* ---- 6. 深色：品牌蓝标记提亮 ------------------------------------------- */\nhtml[data-dsg='on'] body[data-ds-dark-theme] [data-phase='hero'] [class*='_fishHitbox'] svg,\nhtml[data-dsg='on'] body[data-ds-dark-theme] [data-phase='hero'] [data-slot='conversation.hero.brand.mark'] svg {\n color: #9fb4ff;\n}\n\n/* ===== 40-content.css ===== */\n/* ============================================================================\n dsh-skin-mistblue · 40 content surfaces (conversation, cards, code, tools)\n ----------------------------------------------------------------------------\n Tier map (docs/DESIGN-SPEC §7.4 + UI-CONTRACT §3):\n L1 content canvas / long tool output plates → fill-l1, no canvas blur\n L2 user bubbles, think trigger, tool rows, deliverable/plan cards\n L3 (owned by 50-overlays.css) dialogs, menus, question/plan/approval\n Hard rules honoured here:\n · every [class*=\"_bubble\"] rule carries :not([role=\"tooltip\"])\n · no backdrop-filter on scroll containers ([data-conversation-scroll])\n · code / logs / terminal / inline code keep a near-opaque plate\n · sticky carriers (code banner, reasoning header) are re-painted, because\n foundation made --dsw-alias-bg-base transparent\n ========================================================================== */\n\n/* ---- local high-opacity plates (readability floor for code/logs) --------- */\nhtml[data-dsg='on'] body {\n --dsg-code-solid: rgba(255, 255, 255, 0.86);\n --dsg-code-banner: rgba(255, 255, 255, 0.95);\n --dsg-code-inline: rgba(255, 255, 255, 0.88);\n --dsg-tool-plate: rgba(255, 255, 255, 0.8);\n --dsg-tool-plate-strong: rgba(255, 255, 255, 0.9);\n --dsg-row-capsule: color-mix(in srgb, var(--dsg-blue) 4%, var(--dsg-fill-l2));\n --dsg-row-capsule-hover: color-mix(in srgb, var(--dsg-blue) 8%, var(--dsg-fill-l2));\n}\nhtml[data-dsg='on'] body[data-ds-dark-theme] {\n --dsg-code-solid: rgba(18, 27, 45, 0.9);\n --dsg-code-banner: rgba(22, 32, 52, 0.96);\n --dsg-code-inline: rgba(24, 35, 56, 0.92);\n --dsg-tool-plate: rgba(17, 26, 43, 0.86);\n --dsg-tool-plate-strong: rgba(20, 30, 49, 0.94);\n --dsg-row-capsule: color-mix(in srgb, var(--dsg-blue) 12%, var(--dsg-fill-l2));\n --dsg-row-capsule-hover: color-mix(in srgb, var(--dsg-blue) 18%, var(--dsg-fill-l2));\n}\n\n/* ============================================================================\n 1. conversation flow rhythm\n ========================================================================== */\nhtml[data-dsg='on'] [data-chat-flow] {\n --dsh-chat-flow-gap: 10px;\n}\n/* slight breathing room after a user turn / before tool groups */\nhtml[data-dsg='on'] [data-chat-flow] > [data-chat-flow-kind='user'] {\n margin-bottom: 4px;\n}\nhtml[data-dsg='on'] [data-chat-flow] > [data-chat-flow-kind='turn-process'] {\n margin-top: 6px;\n}\n\n/* ============================================================================\n 2. user bubbles — L2 glass (soft blue-white), readable ink\n ========================================================================== */\nhtml[data-dsg='on'] [class*='_bubble']:not([role='tooltip']) {\n position: relative;\n background-color: color-mix(in srgb, var(--dsg-blue) 9%, var(--dsg-fill-l2));\n background-image: var(--dsg-sheen-l2);\n -webkit-backdrop-filter: var(--dsg-backdrop-l2);\n backdrop-filter: var(--dsg-backdrop-l2);\n border-radius: var(--dsg-radius-card);\n box-shadow:\n var(--dsg-bevel-l2),\n 0 0 0 0.5px rgba(77, 107, 254, 0.14);\n color: var(--dsw-alias-label-primary);\n line-height: 1.62;\n transition:\n box-shadow var(--dsg-motion-dur) var(--dsg-ease),\n background-color var(--dsg-motion-dur) var(--dsg-ease);\n}\nhtml[data-dsg='on'] [class*='_bubble']:not([role='tooltip']):hover {\n box-shadow:\n var(--dsg-bevel-l2),\n 0 0 0 0.5px rgba(77, 107, 254, 0.16);\n}\nhtml[data-dsg='on'] body[data-ds-dark-theme] [class*='_bubble']:not([role='tooltip']) {\n background-color: color-mix(in srgb, var(--dsg-blue) 12%, var(--dsg-fill-l2));\n box-shadow:\n var(--dsg-bevel-l2),\n 0 0 0 0.5px rgba(120, 150, 255, 0.16);\n}\n/* the assistant text column has no plate — it sits on the L1 canvas */\nhtml[data-dsg='on'] [data-chat-flow] [class*='_userStack'] {\n gap: 8px;\n}\n\n/* ============================================================================\n 3. disclosure capsules — think trigger rows + tool call rows (L2)\n ========================================================================== */\nhtml[data-dsg='on'] [data-chat-flow] [data-disclosure-header] {\n box-sizing: border-box;\n border-radius: 12px;\n background-color: var(--dsg-fill-l1);\n background-image: var(--dsg-sheen-l1);\n box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.32);\n padding: 1px 8px;\n transition:\n background-color var(--dsg-motion-dur) var(--dsg-ease),\n box-shadow var(--dsg-motion-dur) var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-chat-flow] :is([data-variant='think'], [data-tool]) [data-disclosure-header] {\n background-color: var(--dsg-row-capsule);\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.45),\n inset 0 0 0 0.5px rgba(56, 88, 158, 0.12);\n}\nhtml[data-dsg='on'] [data-chat-flow] [data-disclosure-header]:hover,\nhtml[data-dsg='on'] [data-chat-flow] [data-disclosure-header]:has(> [data-disclosure-row][aria-expanded='true']) {\n background-color: var(--dsg-row-capsule-hover);\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.55),\n inset 0 0 0 0.5px rgba(56, 88, 158, 0.16),\n 0 6px 18px -12px rgba(44, 74, 140, 0.45);\n}\nhtml[data-dsg='on'] body[data-ds-dark-theme] [data-chat-flow] :is([data-variant='think'], [data-tool]) [data-disclosure-header] {\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.12),\n inset 0 0 0 0.5px rgba(150, 180, 255, 0.14);\n}\n\n/* turn trigger strip (recorded trigger above a turn) — L2 glass card */\nhtml[data-dsg='on'] [data-turn-trigger] {\n background-color: color-mix(in srgb, var(--dsg-blue) 4%, var(--dsg-fill-l2));\n background-image: var(--dsg-sheen-l2);\n -webkit-backdrop-filter: var(--dsg-backdrop-l2);\n backdrop-filter: var(--dsg-backdrop-l2);\n border: 0;\n border-radius: var(--dsg-radius-card);\n box-shadow: var(--dsg-bevel-l2);\n transition: box-shadow var(--dsg-motion-dur) var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-turn-trigger]:hover {\n background-color: color-mix(in srgb, var(--dsg-blue) 7%, var(--dsg-fill-l2));\n background-image: var(--dsg-sheen-l2);\n box-shadow:\n var(--dsg-bevel-l2),\n 0 0 0 0.5px rgba(77, 107, 254, 0.14);\n}\nhtml[data-dsg='on'] [data-turn-trigger] [class*='_header'] {\n border-radius: inherit;\n}\nhtml[data-dsg='on'] [data-turn-trigger] [class*='_header']:hover {\n background-color: transparent;\n}\n\n/* ============================================================================\n 4. reasoning (think) — expanded body stays transparent, sticky header painted\n ========================================================================== */\nhtml[data-dsg='on'] [data-variant='think'] [class*='_thinkBody'] {\n color: var(--dsw-alias-label-secondary);\n line-height: 1.66;\n}\nhtml[data-dsg='on'] [data-variant='think'] [data-open] [data-disclosure-header] {\n background-color: var(--dsg-code-banner);\n background-image: none;\n border-radius: 10px;\n box-shadow: 0 1px 0 var(--dsg-border-hair);\n}\n/* compaction / context fold sticky header (was --dsw-alias-bg-base = transparent) */\nhtml[data-dsg='on'] [class*='_compactionRow']:has([class*='_compactionBody']) [class*='_compactionButton'] {\n background-color: var(--dsg-code-banner);\n box-shadow: 0 1px 0 var(--dsg-border-hair);\n}\n\n/* ============================================================================\n 5. tool results — flat L1 plates, near opaque (code / logs / diffs)\n ========================================================================== */\nhtml[data-dsg='on'] [data-slot='tool.call.toolview'] [data-inspect],\nhtml[data-dsg='on'] [data-chat-flow-kind='context'] [data-context-injection-body],\nhtml[data-dsg='on'] [data-terminal],\nhtml[data-dsg='on'] [data-tool='read'] [data-read],\nhtml[data-dsg='on'] [data-tool='grep'] [data-search='matches'],\nhtml[data-dsg='on'] [data-tool='glob'] [data-search='paths'],\nhtml[data-dsg='on'] [data-tool='write'] [data-diff],\nhtml[data-dsg='on'] [data-variant='others'] [class*='_ioCard'] {\n background-color: var(--dsg-tool-plate);\n border: 0.5px solid var(--dsg-border-hair);\n border-radius: 12px;\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.35),\n 0 10px 28px -22px rgba(44, 74, 140, 0.4);\n color: var(--dsw-alias-label-primary);\n}\nhtml[data-dsg='on'] body[data-ds-dark-theme] [data-slot='tool.call.toolview'] [data-inspect],\nhtml[data-dsg='on'] body[data-ds-dark-theme] [data-terminal],\nhtml[data-dsg='on'] body[data-ds-dark-theme] [data-tool='read'] [data-read],\nhtml[data-dsg='on'] body[data-ds-dark-theme] [data-tool='grep'] [data-search='matches'],\nhtml[data-dsg='on'] body[data-ds-dark-theme] [data-tool='glob'] [data-search='paths'],\nhtml[data-dsg='on'] body[data-ds-dark-theme] [data-tool='write'] [data-diff] {\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.08),\n 0 10px 28px -22px rgba(0, 0, 0, 0.6);\n}\n/* long scroll bodies keep their own plate; never add blur here */\nhtml[data-dsg='on'] [data-slot='tool.call.toolview'] [class*='_bodyScroll'],\nhtml[data-dsg='on'] [data-slot='tool.call.toolview'] [class*='_list'] {\n scrollbar-gutter: stable;\n}\n/* diff semantic colours stay untouched (host tokens) but need a solid floor */\nhtml[data-dsg='on'] [data-tool='write'] [data-diff] [data-diff-line],\nhtml[data-dsg='on'] [data-review-view] [class*='_line'],\nhtml[data-dsg='on'] [data-review-view] [class*='_splitLine'] {\n box-shadow: none;\n}\n\n/* ============================================================================\n 6. code blocks — near-opaque plate + painted sticky banner\n ========================================================================== */\nhtml[data-dsg='on'] .md-code-block {\n --dsl-code-block-background: transparent;\n --dsl-code-block-banner-background-color: var(--dsg-code-banner);\n background-color: var(--dsg-code-solid);\n background-image: var(--dsg-sheen-l1);\n border: 0.5px solid var(--dsg-border-hair);\n border-radius: 14px;\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.45),\n 0 14px 34px -26px rgba(44, 74, 140, 0.5);\n /* no overflow:hidden here — it would kill the banner's position:sticky */\n}\nhtml[data-dsg='on'] .md-code-block :where(pre) {\n padding: 13px 16px;\n border-radius: 0 0 14px 14px;\n}\nhtml[data-dsg='on'] .md-code-block [class*='_bannerWrap'] {\n background-color: var(--dsg-code-banner);\n border-radius: 14px 14px 0 0;\n box-shadow: 0 1px 0 var(--dsg-border-hair);\n}\nhtml[data-dsg='on'] .md-code-block [class*='_banner'] {\n background: transparent;\n padding: 7px 12px;\n}\nhtml[data-dsg='on'] .md-code-block [class*='_infostring'] {\n color: var(--dsw-alias-label-secondary);\n letter-spacing: 0.02em;\n}\nhtml[data-dsg='on'] .md-code-block [class*='_copyButton'] {\n border-radius: 8px;\n padding: 2px 8px;\n font-size: 11px;\n line-height: 16px;\n color: var(--dsw-alias-label-secondary);\n background-color: color-mix(in srgb, var(--dsg-blue) 6%, transparent);\n transition:\n background-color var(--dsg-motion-dur) var(--dsg-ease),\n color var(--dsg-motion-dur) var(--dsg-ease);\n}\nhtml[data-dsg='on'] .md-code-block [class*='_copyButton']:hover {\n background-color: var(--dsg-blue-soft);\n color: var(--dsg-blue-strong);\n}\nhtml[data-dsg='on'] .md-code-block [class*='_lineNumber'],\nhtml[data-dsg='on'] .md-code-block [class*='_numbered'] :where(pre) code > .line::before {\n color: var(--dsw-alias-label-caption);\n}\n\n/* inline code: opaque chip, never a backdrop-filter (inline boxes smear rows) */\nhtml[data-dsg='on'] [data-chat-flow] :not(pre) > code,\nhtml[data-dsg='on'] [class*='_markdown'] :not(pre) > code {\n background-color: color-mix(in srgb, var(--dsg-blue) 6%, var(--dsg-code-inline));\n border-color: rgba(77, 107, 254, 0.16);\n border-radius: 6px;\n color: var(--dsw-alias-label-primary);\n}\n\n/* ============================================================================\n 7. deliverables / plan cards / trajectory panes — L2 cards\n ========================================================================== */\nhtml[data-dsg='on'] [data-presented-file],\nhtml[data-dsg='on'] [data-changed-files],\nhtml[data-dsg='on'] [data-plan-card],\nhtml[data-dsg='on'] [data-plan-artifacts] > * {\n background-color: var(--dsg-fill-l2);\n background-image: var(--dsg-sheen-l2);\n border: 0.5px solid var(--dsg-border-hair);\n border-radius: 14px;\n box-shadow: var(--dsg-bevel-l1);\n transition:\n box-shadow var(--dsg-motion-dur) var(--dsg-ease),\n background-color var(--dsg-motion-dur) var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-presented-file]:hover,\nhtml[data-dsg='on'] [data-changed-files]:hover,\nhtml[data-dsg='on'] [data-plan-card]:hover {\n background-color: color-mix(in srgb, var(--dsg-blue) 4%, var(--dsg-fill-l2));\n box-shadow: var(--dsg-bevel-l2);\n}\n/* the plan card is a 60px row — give it a calmer inner surface */\nhtml[data-dsg='on'] [data-plan-card] {\n height: 60px;\n padding: 8px 12px;\n}\nhtml[data-dsg='on'] [data-plan-card] [class*='_cardIcon'] {\n background: color-mix(in srgb, var(--dsg-blue) 7%, rgba(255, 255, 255, 0.6));\n border: 0.5px solid rgba(77, 107, 254, 0.14);\n border-radius: 10px;\n}\nhtml[data-dsg='on'] body[data-ds-dark-theme] [data-plan-card] [class*='_cardIcon'] {\n background: color-mix(in srgb, var(--dsg-blue) 16%, rgba(255, 255, 255, 0.04));\n}\n\n/* trajectory: big scrollable table pane → flat L2 wash, no backdrop-filter */\nhtml[data-dsg='on'] [class*='_tablePane'],\nhtml[data-dsg='on'] [class*='_overviewPreview'],\nhtml[data-dsg='on'] [class*='_programPanel'] {\n background-color: var(--dsg-fill-l2);\n border: 0.5px solid var(--dsg-border-hair);\n border-radius: 14px;\n box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);\n}\nhtml[data-dsg='on'] [class*='_tablePane']:has([data-trajectory-scroll]),\nhtml[data-dsg='on'] [class*='_overviewPreview'] {\n --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2);\n --dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2);\n}\n\n/* ============================================================================\n 8. message meta / actions — quiet hover, blue focus only\n ========================================================================== */\nhtml[data-dsg='on'] [data-chat-flow] [class*='_actions'] [class*='_action'] {\n border-radius: 8px;\n color: var(--dsw-alias-label-tertiary);\n transition: background-color var(--dsg-motion-dur) var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-chat-flow] [class*='_actions'] [class*='_action']:hover {\n background-color: rgba(77, 107, 254, 0.08);\n color: var(--dsw-alias-label-secondary);\n}\n\n/* ============================================================================\n 9. fallback legs — no backdrop-filter support / software rasteriser\n ========================================================================== */\n@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {\n html[data-dsg='on'] [class*='_bubble']:not([role='tooltip']),\n html[data-dsg='on'] [data-turn-trigger] {\n background-color: var(--dsg-code-solid);\n background-image: none;\n }\n}\nhtml[data-dsg='on'] body[data-dsg-fallback] [class*='_bubble']:not([role='tooltip']),\nhtml[data-dsg='on'] body[data-dsg-fallback] [data-turn-trigger] {\n background-color: var(--dsg-code-solid);\n background-image: none;\n -webkit-backdrop-filter: none;\n backdrop-filter: none;\n}\n\n/* ===== 50-overlays.css ===== */\n/* ============================================================================\r\n dsh-skin-mistblue · 50 overlays (dialog / menu / toast / tooltip / prompts)\r\n ----------------------------------------------------------------------------\r\n Tier map:\r\n L3 dialogs, question / plan-review / approval cards, lightbox chrome\r\n token channel menus (--dsw-specific-menu / --dsw-menu-backdrop-filter)\r\n glass tip tooltips + chart hover tips (v1.9 — L2 frost, see §5)\r\n exempt hovercard (host preview card), native <select>, [data-windows-menu]\r\n Hard rules honoured here:\r\n · [class*=\"_bubble\"] rules always carry :not([role=\"tooltip\"])\r\n · menus are NOT re-painted (host already draws a material layer); only\r\n tokens + radius/rows are tuned — no double board\r\n · mask keeps using --dsw-mask-blur (tuned lighter here so the dialog's\r\n own frost is not stacked on top of a second large blur)\r\n · tooltips are glass with a legible high fill; hovercards / native menus\r\n keep the host material (frosted image previews would lose legibility)\r\n ========================================================================== */\r\n\r\n/* mask channel: the dialog owns the strong frost (L3); keep the backdrop\r\n scrim cheap so we never pay for two large blurs at once (GLASS-SPEC §5.9). */\r\n@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {\r\n html[data-dsg='on'] body {\r\n --dsw-mask-blur: blur(calc(10px * var(--dsg-blur, 1))) saturate(1.18);\r\n }\r\n}\r\nhtml[data-dsg='on'] body[data-dsg-fallback] {\r\n --dsw-mask-blur: none;\r\n}\r\n\r\n/* ============================================================================\r\n 1. dialogs — L3 glass face\r\n ========================================================================== */\r\nhtml[data-dsg='on'] [role='dialog'][aria-modal='true']:is(\r\n [class*='_dialog'],\r\n [class*='_panel'],\r\n [class*='_confirmation'],\r\n [class*='_installDialog'],\r\n [class*='_guideDialog']\r\n ) {\r\n background-color: var(--dsg-fill-l3);\r\n background-image: var(--dsg-sheen-l3);\r\n -webkit-backdrop-filter: var(--dsg-backdrop-l3);\r\n backdrop-filter: var(--dsg-backdrop-l3);\r\n border: 0;\r\n border-radius: var(--dsg-radius-modal);\r\n box-shadow: var(--dsg-bevel-l3);\r\n overflow: hidden;\r\n}\r\nhtml[data-dsg='on'] body[data-ds-dark-theme] [role='dialog'][aria-modal='true']:is(\r\n [class*='_dialog'],\r\n [class*='_panel'],\r\n [class*='_confirmation']\r\n ) {\r\n box-shadow:\r\n var(--dsg-bevel-l3),\r\n inset 0 0 0 0.5px rgba(150, 180, 255, 0.12);\r\n}\r\n\r\n/* dialog chrome: title / close / footer */\r\nhtml[data-dsg='on'] [role='dialog'][aria-modal='true'] [class*='_title'] {\r\n font-weight: 600;\r\n letter-spacing: 0.005em;\r\n color: var(--dsw-alias-label-primary);\r\n}\r\nhtml[data-dsg='on'] [role='dialog'][aria-modal='true'] [class*='_description'] {\r\n color: var(--dsw-alias-label-secondary);\r\n line-height: 1.62;\r\n}\r\nhtml[data-dsg='on'] [role='dialog'][aria-modal='true'] [class*='_close'] {\r\n border-radius: 10px;\r\n color: var(--dsw-alias-label-secondary);\r\n background-color: transparent;\r\n transition:\r\n background-color var(--dsg-motion-dur) var(--dsg-ease),\r\n color var(--dsg-motion-dur) var(--dsg-ease);\r\n}\r\nhtml[data-dsg='on'] [role='dialog'][aria-modal='true'] [class*='_close']:hover {\r\n background-color: var(--dsg-blue-soft);\r\n color: var(--dsg-blue-strong);\r\n}\r\n/* dialog fields stay opaque (readability on top of the frosted face) */\r\nhtml[data-dsg='on'] [role='dialog'][aria-modal='true']\r\n :is(input, textarea, select):not([type='range']):not([type='checkbox']):not([type='radio']) {\r\n background-color: var(--dsg-code-solid);\r\n border-color: var(--dsg-border-hair);\r\n color: var(--dsw-alias-label-primary);\r\n}\r\nhtml[data-dsg='on'] [role='dialog'][aria-modal='true'] [class*='_footer'] [class*='_button']:not([disabled]) {\r\n transition:\r\n background-color var(--dsg-motion-dur) var(--dsg-ease),\r\n box-shadow var(--dsg-motion-dur) var(--dsg-ease);\r\n}\r\n\r\n/* ============================================================================\r\n 2. question / plan-review / approval cards — L3 reading cards\r\n (they live in the composer seat, not in a portal: no fixed descendants)\r\n ========================================================================== */\r\nhtml[data-dsg='on'] [data-question-key] [class*='_card'],\r\nhtml[data-dsg='on'] [data-plan-review-key] [class*='_card'],\r\nhtml[data-dsg='on'] [data-approval-key] [class*='_card'] {\r\n --dsw-elevation-stroke-color: transparent;\r\n background-color: var(--dsg-fill-l3);\r\n background-image: var(--dsg-sheen-l3);\r\n -webkit-backdrop-filter: var(--dsg-backdrop-l3);\r\n backdrop-filter: var(--dsg-backdrop-l3);\r\n border: 0;\r\n border-radius: var(--dsg-radius-modal);\r\n box-shadow: var(--dsg-bevel-l3);\r\n color: var(--dsw-alias-label-primary);\r\n}\r\nhtml[data-dsg='on'] [data-question-key] [class*='_strip'],\r\nhtml[data-dsg='on'] [data-plan-review-key] [class*='_strip'],\r\nhtml[data-dsg='on'] [data-approval-key] [class*='_strip'] {\r\n border-bottom: 0.5px solid rgba(150, 110, 20, 0.14);\r\n font-weight: 500;\r\n}\r\n/* the action row must stay crisp above the frost */\r\nhtml[data-dsg='on'] [data-question-key] [class*='_footer']:not([class*='_footerActions']),\r\nhtml[data-dsg='on'] [data-plan-review-key] [class*='_footer']:not([class*='_footerActions']),\r\nhtml[data-dsg='on'] [data-approval-key] [class*='_actionRow'],\r\nhtml[data-dsg='on'] [data-approval-key] [class*='_footer']:not([class*='_footerActions']) {\r\n background-color: color-mix(in srgb, var(--dsg-tint) 24%, transparent);\r\n border-top: 0.5px solid var(--dsg-border-hair);\r\n}\r\n/* option rows inside a question card: opaque enough to read, hover in blue */\r\nhtml[data-dsg='on'] [data-question-key] :is(button, label)[class*='_option'],\r\nhtml[data-dsg='on'] [data-plan-review-key] :is(button, label)[class*='_option'] {\r\n background-color: color-mix(in srgb, var(--dsg-tint) 34%, transparent);\r\n border: 0.5px solid var(--dsg-border-hair);\r\n border-radius: 12px;\r\n transition:\r\n background-color var(--dsg-motion-dur) var(--dsg-ease),\r\n border-color var(--dsg-motion-dur) var(--dsg-ease);\r\n}\r\nhtml[data-dsg='on'] [data-question-key] :is(button, label)[class*='_option']:hover:not(:disabled),\r\nhtml[data-dsg='on'] [data-plan-review-key] :is(button, label)[class*='_option']:hover:not(:disabled) {\r\n background-color: color-mix(in srgb, var(--dsg-blue) 6%, var(--dsg-fill-l2));\r\n border-color: rgba(77, 107, 254, 0.24);\r\n}\r\nhtml[data-dsg='on'] [data-question-key] :is(button, label)[class*='_optionSelected'],\r\nhtml[data-dsg='on'] [data-plan-review-key] :is(button, label)[class*='_optionSelected'] {\r\n background-color: color-mix(in srgb, var(--dsg-blue) 9%, var(--dsg-fill-l2));\r\n border-color: rgba(77, 107, 254, 0.34);\r\n}\r\n\r\n/* ============================================================================\r\n 3. menus — token channel only (host draws the material layer)\r\n ========================================================================== */\r\nhtml[data-dsg='on'] [data-menu-material] {\r\n border-radius: 12px;\r\n}\r\nhtml[data-dsg='on'] [data-menu-material] > [class*='_material'] {\r\n border-radius: inherit;\r\n background: var(--dsw-menu-surface-fill);\r\n -webkit-backdrop-filter: var(--dsw-menu-backdrop-filter);\r\n backdrop-filter: var(--dsw-menu-backdrop-filter);\r\n box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.28);\r\n}\r\nhtml[data-dsg='on'] body[data-ds-dark-theme] [data-menu-material] > [class*='_material'] {\r\n box-shadow: inset 0 0 0 0.5px rgba(150, 180, 255, 0.12);\r\n}\r\nhtml[data-dsg='on'] [data-menu-backing] {\r\n background-color: color-mix(in srgb, var(--dsg-tint) 86%, transparent);\r\n}\r\n/* rows / group headers / shortcuts (host radii kept, ink tuned) */\r\nhtml[data-dsg='on'] [data-menu-material] [role='menuitem'],\r\nhtml[data-dsg='on'] [data-menu-material] [role='menuitemcheckbox'],\r\nhtml[data-dsg='on'] [data-menu-material] [role='menuitemradio'],\r\nhtml[data-dsg='on'] [data-menu-material] button[class*='_item'] {\r\n border-radius: 9px;\r\n color: var(--dsw-alias-label-primary);\r\n}\r\nhtml[data-dsg='on'] [data-menu-material] [role='menuitem']:hover,\r\nhtml[data-dsg='on'] [data-menu-material] [role='menuitemcheckbox']:hover,\r\nhtml[data-dsg='on'] [data-menu-material] [role='menuitemradio']:hover,\r\nhtml[data-dsg='on'] [data-menu-material] button[class*='_item']:hover:not(:disabled) {\r\n background-color: var(--dsg-blue-soft);\r\n}\r\nhtml[data-dsg='on'] [data-menu-material] [class*='_label'] {\r\n color: var(--dsw-alias-label-tertiary);\r\n letter-spacing: 0.02em;\r\n}\r\nhtml[data-dsg='on'] [data-menu-material] [class*='_separator'] {\r\n background-color: var(--dsg-border-hair);\r\n}\r\nhtml[data-dsg='on'] [data-menu-material] [class*='_shortcut'] {\r\n color: var(--dsw-alias-label-caption);\r\n}\r\n\r\n/* ============================================================================\r\n 4. hovercard / popover previews — host already paints an opaque dark card\r\n (--dsw-hovercard-bg: #2C2C2E, white ink). We only soften its edge; never\r\n add glass here, a frosted hovercard drops contrast to ~1.1:1.\r\n ========================================================================== */\r\nhtml[data-dsg='on'] [class*='_preview']:has(> [class*='_previewPrompt']) {\r\n border-radius: 14px;\r\n box-shadow: var(--dsg-bevel-l3);\r\n}\r\n\r\n/* ============================================================================\r\n 5. tooltips — near-opaque glass plate (v1.10)\r\n ----------------------------------------------------------------------------\r\n Every hover-only tooltip shares one recipe:\r\n · DSH primitive tooltips → [role='tooltip']\r\n · dsh-context chart hover tips → .lc-tip / .lc-chart-tip\r\n · other plugin chart tips → [class*='chart-tip'] / [class*='chartTip']\r\n User feedback (v1.10): make them almost opaque — readable text wins, the plate\r\n keeps only ~4% translucency plus the 16px frost, sheen and hairline so it still\r\n reads as glass instead of a flat white box. Chart tips sit on the densest\r\n surface, so they are 96% instead of 94%.\r\n ========================================================================== */\r\nhtml[data-dsg='on'] {\r\n --dsg-tip-fill: color-mix(in srgb, #ffffff 94%, transparent);\r\n --dsg-tip-fill-chart: color-mix(in srgb, #ffffff 96%, transparent);\r\n --dsg-tip-border: rgba(255, 255, 255, 0.72);\r\n --dsg-tip-ink: var(--dsw-alias-label-primary);\r\n --dsg-tip-shadow:\r\n 0 12px 30px -14px rgba(23, 48, 108, 0.38),\r\n 0 2px 6px rgba(23, 48, 108, 0.09);\r\n}\r\nhtml[data-dsg='on'] body[data-ds-dark-theme] {\r\n --dsg-tip-fill: color-mix(in srgb, #0d1524 94%, transparent);\r\n --dsg-tip-fill-chart: color-mix(in srgb, #0d1524 96%, transparent);\r\n --dsg-tip-border: rgba(255, 255, 255, 0.18);\r\n --dsg-tip-shadow:\r\n 0 14px 34px -16px rgba(0, 0, 0, 0.6),\r\n 0 2px 8px rgba(0, 0, 0, 0.32);\r\n}\r\n\r\nhtml[data-dsg='on']\r\n :is(\r\n [role='tooltip'],\r\n .lc-tip,\r\n .lc-chart-tip,\r\n [class*='_chart-tip'],\r\n [class*='_chartTip']\r\n ) {\r\n background-color: var(--dsg-tip-fill) !important;\r\n background-image: var(--dsg-sheen-l2) !important;\r\n -webkit-backdrop-filter: var(--dsg-blur-l2) saturate(1.45) brightness(1.02);\r\n backdrop-filter: var(--dsg-blur-l2) saturate(1.45) brightness(1.02);\r\n border: 0.5px solid var(--dsg-tip-border) !important;\r\n border-radius: 10px;\r\n color: var(--dsg-tip-ink) !important;\r\n box-shadow: var(--dsg-tip-shadow);\r\n text-shadow: none;\r\n}\r\n\r\n/* DSH primitive tooltip: tiny plate + shortcut pills */\r\nhtml[data-dsg='on'] [role='tooltip'] {\r\n padding: 5px 9px;\r\n font-size: 12px;\r\n line-height: 18px;\r\n font-weight: 400;\r\n border-radius: 9px;\r\n}\r\nhtml[data-dsg='on'] [role='tooltip'] :is(kbd, [class*='_key']) {\r\n background-color: color-mix(in srgb, var(--dsg-tip-ink) 9%, transparent);\r\n border: 0.5px solid color-mix(in srgb, var(--dsg-tip-ink) 13%, transparent);\r\n border-radius: 4px;\r\n color: var(--dsg-tip-ink);\r\n}\r\nhtml[data-dsg='on'] [role='tooltip'] [class*='_shortcut'],\r\nhtml[data-dsg='on'] [role='tooltip'] [class*='_label'] {\r\n color: var(--dsg-tip-ink);\r\n}\r\n\r\n/* chart hover tips: denser fill + softer edge, always above the plot marks */\r\nhtml[data-dsg='on'] :is(.lc-tip, .lc-chart-tip, [class*='_chart-tip'], [class*='_chartTip']) {\r\n background-color: var(--dsg-tip-fill-chart) !important;\r\n -webkit-backdrop-filter: calc(var(--dsg-blur-l2) * 1.1) saturate(1.5) brightness(1.02);\r\n backdrop-filter: calc(var(--dsg-blur-l2) * 1.1) saturate(1.5) brightness(1.02);\r\n border-radius: 10px;\r\n padding: 6px 10px;\r\n color: var(--dsg-tip-ink) !important;\r\n z-index: 40;\r\n}\r\nhtml[data-dsg='on'] :is(.lc-chart-tip, [class*='_chart-tip'], [class*='_chartTip']) span + span {\r\n color: var(--dsw-alias-label-secondary);\r\n}\r\n\r\n/* no backdrop-filter: fill is already near-opaque, just push the last percents */\r\n@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {\r\n html[data-dsg='on']\r\n :is([role='tooltip'], .lc-tip, .lc-chart-tip, [class*='_chart-tip'], [class*='_chartTip']) {\r\n background-color: color-mix(in srgb, #ffffff 98%, transparent) !important;\r\n }\r\n html[data-dsg='on'] body[data-ds-dark-theme]\r\n :is([role='tooltip'], .lc-tip, .lc-chart-tip, [class*='_chart-tip'], [class*='_chartTip']) {\r\n background-color: color-mix(in srgb, #0d1524 98%, transparent) !important;\r\n }\r\n}\r\n\r\n/* ============================================================================\r\n 6. toast — L3 shape, opaque deep plate (contrast first)\r\n ========================================================================== */\r\nhtml[data-dsg='on'] [class*='_toast'] {\r\n border-radius: 14px;\r\n padding: 12px 16px;\r\n font-size: 13px;\r\n line-height: 20px;\r\n box-shadow:\r\n 0 18px 48px rgba(23, 48, 108, 0.24),\r\n inset 0 1px 0 rgba(255, 255, 255, 0.12);\r\n -webkit-backdrop-filter: none;\r\n backdrop-filter: none;\r\n}\r\nhtml[data-dsg='on'] [class*='_toast'] [class*='_action'] {\r\n color: var(--dsw-static-deepseek-400);\r\n}\r\n\r\n/* ============================================================================\r\n 7. image lightbox — chrome only, the image itself stays opaque (L0)\r\n ========================================================================== */\r\nhtml[data-dsg='on'] [role='dialog'][aria-modal='true']:has(> [class*='_stage']) {\r\n background: none;\r\n box-shadow: none;\r\n -webkit-backdrop-filter: none;\r\n backdrop-filter: none;\r\n}\r\nhtml[data-dsg='on'] [role='dialog'][aria-modal='true'] [class*='_image'] {\r\n background-color: var(--dsg-code-solid);\r\n border-radius: 16px;\r\n box-shadow: var(--dsg-bevel-l3);\r\n}\r\nhtml[data-dsg='on'] [role='dialog'][aria-modal='true'] [class*='_close'] {\r\n -webkit-backdrop-filter: var(--dsg-backdrop-l2);\r\n backdrop-filter: var(--dsg-backdrop-l2);\r\n background-color: color-mix(in srgb, var(--dsg-tint) 64%, transparent);\r\n box-shadow: var(--dsg-bevel-l2);\r\n}\r\n\r\n/* ============================================================================\r\n 8. native surfaces — stay opaque (Windows menu, <select> popup rows)\r\n ========================================================================== */\r\nhtml[data-dsg='on'] [data-windows-menu] {\r\n background-color: var(--dsw-alias-bg-layer-3);\r\n -webkit-backdrop-filter: none;\r\n backdrop-filter: none;\r\n}\r\nhtml[data-dsg='on'] select,\r\nhtml[data-dsg='on'] option {\r\n background-color: var(--dsg-tint);\r\n color: var(--dsw-alias-label-primary);\r\n}\n\n/* ===== 60-settings.css ===== */\n/* ============================================================================\n dsh-skin-mistblue · 60 settings / plugin pages / right sidebar / preview\n ----------------------------------------------------------------------------\n Tier map:\n L3 settings window, fullscreen right panel, document preview paper\n L2 settings cards, plugin list/detail cards, right-panel shell, tabs\n L1 pane bodies, page canvases\n Hard rules honoured here:\n · settings window fill L3 + own frost ≤12px (never a 24px full-window blur)\n · inner scrollers (settings options / right pane body) never get blur\n · right panel needs the dockkit z-index lift once backdrop-filter is on\n · text / code / pdf / office preview keep an opaque paper plate\n ========================================================================== */\n\n/* ============================================================================\n 1. settings window — L3 face, capped frost\n ========================================================================== */\nhtml[data-dsg='on'] [role='dialog'][aria-modal='true'][data-shortcut-modal='settings'],\nhtml[data-dsg='on'] [role='dialog'][aria-modal='true']:has([data-slot='settings.section']) {\n background-color: var(--dsg-fill-l3);\n background-image: var(--dsg-sheen-l3);\n /* foundation's dialog channel: 12px, never a 24px full-window blur */\n -webkit-backdrop-filter: var(--dsg-backdrop-dialog);\n backdrop-filter: var(--dsg-backdrop-dialog);\n border-radius: var(--dsg-radius-modal);\n box-shadow: var(--dsg-bevel-l3);\n /* blue primary CTAs + white ink on them, scoped to this window */\n --dsw-alias-brand-primary: var(--dsg-blue);\n --dsw-alias-button-primary-fill: var(--dsg-blue);\n --dsw-alias-button-primary-hover: var(--dsg-blue-strong);\n --dsw-alias-label-primary-foreground: #ffffff;\n}\nhtml[data-dsg='on'] body[data-dsg-fallback] [role='dialog'][aria-modal='true'][data-shortcut-modal='settings'],\nhtml[data-dsg='on'] body[data-dsg-fallback] [role='dialog'][aria-modal='true']:has([data-slot='settings.section']) {\n -webkit-backdrop-filter: none;\n backdrop-filter: none;\n}\n/* the scrim behind the settings window keeps the shared mask channel */\nhtml[data-dsg='on']\n [role='presentation']:has(> [role='dialog'][data-shortcut-modal='settings'])\n > [class*='_mask'] {\n background-color: rgba(16, 24, 40, 0.28);\n -webkit-backdrop-filter: var(--dsw-mask-blur);\n backdrop-filter: var(--dsw-mask-blur);\n}\nhtml[data-dsg='on'] body[data-ds-dark-theme]\n [role='presentation']:has(> [role='dialog'][data-shortcut-modal='settings'])\n > [class*='_mask'] {\n background-color: rgba(0, 0, 0, 0.46);\n}\n\n/* left navigation — pill rows with a blue active state */\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] nav {\n border-right: 0.5px solid var(--dsg-border-hair);\n gap: 14px;\n}\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_navTitle'] {\n font-size: 16px;\n font-weight: 600;\n letter-spacing: 0.01em;\n color: var(--dsw-alias-label-primary);\n}\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_navCell'] {\n height: 38px;\n border-radius: 10px;\n color: var(--dsw-alias-label-secondary);\n transition:\n background-color var(--dsg-motion-dur) var(--dsg-ease),\n color var(--dsg-motion-dur) var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_navCell']:hover {\n background-color: rgba(77, 107, 254, 0.07);\n color: var(--dsw-alias-label-primary);\n}\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_navCell'][aria-current='true'] {\n background-color: rgba(77, 107, 254, 0.11);\n color: var(--dsg-blue-strong);\n font-weight: 500;\n box-shadow: inset 0 0 0 0.5px rgba(77, 107, 254, 0.16);\n}\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_navLabel'] {\n color: inherit;\n}\n\n/* content chrome */\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_header'] {\n background-color: transparent;\n}\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_content'] {\n min-width: 0;\n}\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_options'] {\n padding: 0 28px 28px;\n /* a scroller: never frost it (per-frame backdrop recompute) */\n}\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] :is(h2, h3) {\n letter-spacing: 0.005em;\n}\n\n/* ============================================================================\n 2. settings cards / rows / controls\n ========================================================================== */\n/* card items only: direct children of a card list/grid (avoids _cardMainRow,\n _cardContent, _cardTitle … being painted as cards) */\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_cards'] > *,\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_rowCard'] {\n background-color: color-mix(in srgb, var(--dsg-blue) 2.5%, var(--dsg-fill-l2));\n background-image: var(--dsg-sheen-l2);\n border: 0.5px solid var(--dsg-border-hair);\n border-radius: 16px;\n box-shadow: var(--dsg-bevel-l1);\n transition:\n background-color var(--dsg-motion-dur) var(--dsg-ease),\n box-shadow var(--dsg-motion-dur) var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_cards'] > *:hover,\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_rowCard']:hover {\n background-color: color-mix(in srgb, var(--dsg-blue) 4%, var(--dsg-fill-l2));\n box-shadow: var(--dsg-bevel-l2);\n}\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_cards'] > *[data-open='true'] {\n background-color: color-mix(in srgb, var(--dsg-blue) 4%, var(--dsg-fill-l2));\n border-color: rgba(77, 107, 254, 0.2);\n}\n/* single cards that are not inside a card list (account / balance rows) */\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_balanceCard'] {\n background-color: color-mix(in srgb, var(--dsg-blue) 2.5%, var(--dsg-fill-l2));\n background-image: var(--dsg-sheen-l2);\n border-radius: 16px;\n box-shadow: var(--dsg-bevel-l1);\n}\n/* card head / tags */\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_cards'] [class*='_cardTitle'] {\n font-weight: 600;\n color: var(--dsw-alias-label-primary);\n}\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_cards'] [class*='_cardDesc'],\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_intro'] {\n color: var(--dsw-alias-label-secondary);\n line-height: 1.6;\n}\n/* setting rows: comfortable height, blue hover (form fields + inventory rows) */\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_field'] {\n border-radius: 10px;\n transition: background-color var(--dsg-motion-dur) var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_field']:hover,\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_cardMainRow']:hover {\n background-color: rgba(77, 107, 254, 0.045);\n}\n/* form fields stay opaque on the frosted face */\nhtml[data-dsg='on'] [data-shortcut-modal='settings']\n :is(input, textarea, select):not([type='range']):not([type='checkbox']):not([type='radio']) {\n background-color: var(--dsg-code-solid);\n border: 0.5px solid var(--dsg-border-hair);\n border-radius: 10px;\n color: var(--dsw-alias-label-primary);\n}\nhtml[data-dsg='on'] [data-shortcut-modal='settings']\n :is(input, textarea, select):not([type='range']):focus-visible {\n border-color: rgba(77, 107, 254, 0.42);\n box-shadow: 0 0 0 2px rgba(77, 107, 254, 0.16);\n outline: none;\n}\n/* switches / sliders / checkboxes: DeepSeek blue accent */\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] :is(input[type='checkbox'], input[type='radio'], input[type='range']) {\n accent-color: var(--dsg-blue);\n}\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_switch'][aria-checked='true'] {\n background: var(--dsg-blue);\n}\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_switch']:hover {\n filter: brightness(1.05);\n}\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_segmented'],\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_control']:has(> [class*='_indicator']) {\n background-color: color-mix(in srgb, var(--dsg-tint) 30%, transparent);\n border: 0.5px solid var(--dsg-border-hair);\n border-radius: 10px;\n}\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_control'] > [class*='_indicator'] {\n border-radius: 8px;\n background: var(--dsg-fill-l2);\n box-shadow: var(--dsg-bevel-l1);\n}\n\n/* ============================================================================\n 3. plugin manager page (main panel) — L1 page, L2 cards\n ========================================================================== */\nhtml[data-dsg='on'] [data-plugin-panel] {\n --dsw-alias-brand-primary: var(--dsg-blue);\n --dsw-alias-button-primary-fill: var(--dsg-blue);\n --dsw-alias-button-primary-hover: var(--dsg-blue-strong);\n --dsw-alias-label-primary-foreground: #ffffff;\n color: var(--dsw-alias-label-primary);\n}\nhtml[data-dsg='on'] [data-plugin-panel] [class*='_pageTitle'] {\n font-weight: 600;\n letter-spacing: 0.005em;\n}\nhtml[data-dsg='on'] [data-plugin-panel] [class*='_pageIntro'] {\n color: var(--dsw-alias-label-secondary);\n}\nhtml[data-dsg='on'] [data-plugin-group] {\n border-radius: 18px;\n}\nhtml[data-dsg='on'] [data-plugin-group] [class*='_groupTitle'] {\n font-size: 12px;\n font-weight: 600;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n color: var(--dsw-alias-label-tertiary);\n}\n/* list rows / cards */\nhtml[data-dsg='on'] [data-plugin-item],\nhtml[data-dsg='on'] [data-plugin-package] {\n background-color: var(--dsg-fill-l2);\n background-image: var(--dsg-sheen-l2);\n border: 0.5px solid var(--dsg-border-hair);\n border-radius: 16px;\n box-shadow: var(--dsg-bevel-l1);\n transition:\n background-color var(--dsg-motion-dur) var(--dsg-ease),\n box-shadow var(--dsg-motion-dur) var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-plugin-item]:hover,\nhtml[data-dsg='on'] [data-plugin-package]:hover {\n background-color: color-mix(in srgb, var(--dsg-blue) 4%, var(--dsg-fill-l2));\n box-shadow: var(--dsg-bevel-l2);\n}\nhtml[data-dsg='on'] [data-plugin-item] [class*='_cardIcon'],\nhtml[data-dsg='on'] [data-plugin-package] [class*='_cardIcon'] {\n background: color-mix(in srgb, var(--dsg-blue) 6%, rgba(255, 255, 255, 0.6));\n border-color: rgba(77, 107, 254, 0.14);\n}\nhtml[data-dsg='on'] [data-plugin-item] [class*='_cardTitle'],\nhtml[data-dsg='on'] [data-plugin-package] [class*='_cardTitle'] {\n font-weight: 600;\n}\nhtml[data-dsg='on'] [data-plugin-item] [class*='_cardDesc'],\nhtml[data-dsg='on'] [data-plugin-package] [class*='_cardDesc'] {\n color: var(--dsw-alias-label-secondary);\n}\n/* status tags / badges */\nhtml[data-dsg='on'] [data-plugin-status] [class*='_statusTag'],\nhtml[data-dsg='on'] [data-plugin-panel] [class*='_statusTag'],\nhtml[data-dsg='on'] [data-plugin-panel] [class*='_badge'] {\n border-radius: 999px;\n background-color: rgba(77, 107, 254, 0.1);\n color: var(--dsg-blue-strong);\n border: 0.5px solid rgba(77, 107, 254, 0.16);\n font-weight: 500;\n}\n\n/* detail page (same surface, just a view) */\nhtml[data-dsg='on'] [data-plugin-detail] {\n color: var(--dsw-alias-label-primary);\n}\nhtml[data-dsg='on'] [data-plugin-detail] [class*='_crumb'] {\n border-radius: 10px;\n color: var(--dsw-alias-label-secondary);\n}\nhtml[data-dsg='on'] [data-plugin-detail] [class*='_crumb']:hover {\n background-color: rgba(77, 107, 254, 0.07);\n color: var(--dsg-blue-strong);\n}\nhtml[data-dsg='on'] [data-plugin-rows] {\n background-color: color-mix(in srgb, var(--dsg-tint) 18%, transparent);\n border: 0.5px solid var(--dsg-border-hair);\n border-radius: 16px;\n padding: 4px;\n}\nhtml[data-dsg='on'] [data-plugin-row] {\n border-radius: 12px;\n min-height: 44px;\n transition: background-color var(--dsg-motion-dur) var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-plugin-row]:hover {\n background-color: rgba(77, 107, 254, 0.05);\n}\nhtml[data-dsg='on'] [data-plugin-row][data-state='failed'] {\n box-shadow: inset 2px 0 0 rgba(239, 68, 68, 0.6);\n}\nhtml[data-dsg='on'] [data-plugin-detail] [class*='_detailSection'] {\n background-color: var(--dsg-fill-l2);\n border: 0.5px solid var(--dsg-border-hair);\n border-radius: 16px;\n padding: 12px 14px;\n}\n/* plugin market */\nhtml[data-dsg='on'] [data-market-entry] {\n background-color: var(--dsg-fill-l2);\n background-image: var(--dsg-sheen-l2);\n border: 0.5px solid var(--dsg-border-hair);\n border-radius: 16px;\n box-shadow: var(--dsg-bevel-l1);\n transition:\n background-color var(--dsg-motion-dur) var(--dsg-ease),\n box-shadow var(--dsg-motion-dur) var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-market-entry]:hover {\n background-color: color-mix(in srgb, var(--dsg-blue) 4%, var(--dsg-fill-l2));\n box-shadow: var(--dsg-bevel-l2);\n}\nhtml[data-dsg='on'] [data-market-detail] {\n --dsw-alias-brand-primary: var(--dsg-blue);\n --dsw-alias-button-primary-fill: var(--dsg-blue);\n --dsw-alias-button-primary-hover: var(--dsg-blue-strong);\n --dsw-alias-label-primary-foreground: #ffffff;\n}\nhtml[data-dsg='on'] [data-market-detail] [class*='_detailSection'] {\n background-color: var(--dsg-fill-l2);\n border: 0.5px solid var(--dsg-border-hair);\n border-radius: 16px;\n padding: 12px 14px;\n}\n/* install dialog keeps the generic dialog face but gets the blue CTA */\nhtml[data-dsg='on'] [role='dialog'][aria-modal='true']:has([data-install-phase]),\nhtml[data-dsg='on'] [role='dialog'][aria-modal='true'] [class*='_installDialog'] {\n --dsw-alias-brand-primary: var(--dsg-blue);\n --dsw-alias-button-primary-fill: var(--dsg-blue);\n --dsw-alias-button-primary-hover: var(--dsg-blue-strong);\n --dsw-alias-label-primary-foreground: #ffffff;\n}\n\n/* ============================================================================\n 4. right sidebar (dockkit) — 单层玻璃壳 + L1 pane bodies + L3 fullscreen\n ============================================================================\n 玻璃只在 ::before（10-shell §4）画一次；本体保持透明。之前本体也铺了 fill-l2，\n 再叠上 dockkit 各层的半透明底，整块面板被洗成不透明白 —— 面板与对话区不再共享\n 背景。这里把本体与所有中间容器清零，只留一层霜。*/\nhtml[data-dsg='on'] [data-rightbar-col] [data-sidebar-right-panel]:not([aria-hidden='true']),\nhtml[data-dsg='on'] [data-sidebar-right-panel][data-sidebar-right-open] {\n background-color: transparent;\n background-image: none;\n -webkit-backdrop-filter: none;\n backdrop-filter: none;\n border-left: 0.5px solid var(--dsg-border-hair);\n border-radius: 18px 0 0 18px;\n box-shadow: -14px 0 44px rgba(44, 74, 140, 0.1);\n z-index: var(--dsh-dockkit-dock-layer, 10);\n}\n/* closed state must be explicitly clean (container stays mounted) */\nhtml[data-dsg='on'] [data-rightbar-col] [data-sidebar-right-panel][aria-hidden='true'] {\n background: none;\n background-image: none;\n border-left: none;\n box-shadow: none;\n -webkit-backdrop-filter: none;\n backdrop-filter: none;\n}\n/* fullscreen right panel = detail surface → L3（只换 ::before 的两个变量） */\nhtml[data-dsg='on'] [data-sidebar-right-panel][data-sidebar-right-mode='fullscreen'] {\n --dsg-panel-fill: var(--dsg-fill-l3);\n --dsg-panel-backdrop: var(--dsg-backdrop-l3);\n}\n/* dockkit 中间层全部透明：surface / host / pane / paneBody / panelBody / tabHost…\n 这些容器原本各带 --dsw-alias-bg-base 或 bg-layer 层，叠在玻璃壳上会发白。 */\nhtml[data-dsg='on'] [data-sidebar-right-panel] :is(\n [data-dockkit-surface],\n [data-dockkit-host],\n [data-dockkit-pane],\n [data-dockkit-content],\n [class*='_panelBody'],\n [class*='_tabLayout'],\n [class*='_tabCell'],\n [class*='_tabHost'],\n [class*='_paneBody']\n ) {\n background-color: transparent !important;\n background-image: none !important;\n}\nhtml[data-dsg='on'] [data-sidebar-right-panel] [data-dockkit-pane] {\n border-radius: 14px;\n overflow: hidden;\n}\n/* tab strip: capsule tabs */\nhtml[data-dsg='on'] [data-sidebar-right-panel] [data-dockkit-strip] {\n background-color: transparent;\n padding-bottom: 4px;\n}\nhtml[data-dsg='on'] [data-sidebar-right-panel] [data-dockkit-tab] {\n border-radius: 9px;\n color: var(--dsw-alias-label-secondary);\n transition:\n background-color var(--dsg-motion-dur) var(--dsg-ease),\n color var(--dsg-motion-dur) var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-sidebar-right-panel] [data-dockkit-tab]:hover {\n background-color: rgba(77, 107, 254, 0.07);\n color: var(--dsw-alias-label-primary);\n}\nhtml[data-dsg='on'] [data-sidebar-right-panel] [data-dockkit-tab][data-dockkit-tab-active],\nhtml[data-dsg='on'] [data-sidebar-right-panel] [data-dockkit-tab][aria-selected='true'] {\n background-color: rgba(77, 107, 254, 0.1);\n color: var(--dsg-blue-strong);\n font-weight: 500;\n}\nhtml[data-dsg='on'] [data-sidebar-right-panel] [data-dockkit-divider] {\n background: var(--dsg-border-hair);\n}\n/* right-panel guide entries */\nhtml[data-dsg='on'] [data-sidebar-right-panel] [data-sidebar-right-guide-entry],\nhtml[data-dsg='on'] [data-sidebar-right-panel] :is(button, a)[class*='_entry'] {\n background-color: var(--dsg-fill-l2);\n background-image: var(--dsg-sheen-l2);\n border: 0.5px solid var(--dsg-border-hair);\n border-radius: 16px;\n box-shadow: var(--dsg-bevel-l1);\n}\nhtml[data-dsg='on'] [data-sidebar-right-panel] :is(button, a)[class*='_entry']:hover {\n background-color: color-mix(in srgb, var(--dsg-blue) 4%, var(--dsg-fill-l2));\n}\n\n/* ============================================================================\n 5. document preview — opaque paper plate (readability first)\n ----------------------------------------------------------------------------\n 文档预览 / 文本预览 / PDF 页是“读字”的 L3 面：背景必须完全不透明，否则对话区\n 的高对比文字会透上来，和预览内容叠成“双行字”（用户反馈）。宿主 token\n --dsw-alias-bg-document-preview 也已映射到同一张纸（00-foundation）。\n ========================================================================== */\nhtml[data-dsg='on'] [data-document-preview],\nhtml[data-dsg='on'] [data-textpreview-state],\nhtml[data-dsg='on'] [data-textpreview-wrap],\nhtml[data-dsg='on'] [data-code-preview],\nhtml[data-dsg='on'] [data-pdf-preview],\nhtml[data-dsg='on'] [data-html-preview],\nhtml[data-dsg='on'] [data-document-markdown],\nhtml[data-dsg='on'] [data-plan-preview] [class*='_document'] {\n background-color: var(--dsg-doc-paper) !important;\n background-image: none !important;\n -webkit-backdrop-filter: none !important;\n backdrop-filter: none !important;\n border: 0.5px solid var(--dsg-border-hair);\n border-radius: 14px;\n box-shadow: var(--dsg-bevel-l1);\n color: var(--dsw-alias-label-primary);\n}\n/* 预览所在的整个面板 / dockkit 容器也一起做实：预览通常铺满 tab，\n 只把纸面做实、父容器仍透，文字照样会从纸外的边角透上来。 */\nhtml[data-dsg='on'] [data-sidebar-right-panel]:has([data-document-preview]),\nhtml[data-dsg='on'] [data-dockkit-pane]:has([data-document-preview]),\nhtml[data-dsg='on'] [data-dockkit-content]:has([data-document-preview]),\nhtml[data-dsg='on'] [data-dockkit-surface]:has([data-document-preview]),\nhtml[data-dsg='on'] [data-dockkit-host]:has([data-document-preview]),\nhtml[data-dsg='on'] [data-slot='sidebar-right']:has([data-document-preview]),\nhtml[data-dsg='on'] [role='dialog']:has([data-document-preview]),\nhtml[data-dsg='on'] [data-shell-overlay] :has(> [data-document-preview]),\nhtml[data-dsg='on'] [data-slot='sidebar-documentpreview'] {\n --dsg-panel-fill: var(--dsg-doc-paper);\n --dsg-panel-backdrop: none;\n background-color: var(--dsg-doc-paper) !important;\n background-image: none !important;\n -webkit-backdrop-filter: none !important;\n backdrop-filter: none !important;\n}\nhtml[data-dsg='on'] [data-document-preview] [class*='_header'],\nhtml[data-dsg='on'] [data-textpreview-wrap] [class*='_header'] {\n background-color: color-mix(in srgb, var(--dsg-tint) 62%, transparent);\n border-bottom: 0.5px solid var(--dsg-border-hair);\n border-radius: 14px 14px 0 0;\n}\nhtml[data-dsg='on'] [data-document-preview] [class*='_page'],\nhtml[data-dsg='on'] [data-document-preview] [class*='_body'],\nhtml[data-dsg='on'] [data-textpreview-wrap] [class*='_body'] {\n background-color: transparent;\n}\nhtml[data-dsg='on'] [data-document-preview] [class*='_frontmatter'] {\n background-color: var(--dsg-fill-l1);\n border: 0.5px solid var(--dsg-border-hair);\n border-radius: 10px;\n}\n/* plan preview inside the right panel */\nhtml[data-dsg='on'] [data-plan-preview] {\n background-color: var(--dsg-fill-l3);\n background-image: var(--dsg-sheen-l3);\n border-radius: var(--dsg-radius-modal);\n box-shadow: var(--dsg-bevel-l2);\n}\n\n/* ===== 95-settings-panel.css ===== */\n/* ============================================================================\n 95 plugin settings panel (rendered inside Settings → settings.section)\n Uses its own .dsg-* vocabulary so it never collides with shipped UI.\n ========================================================================== */\nhtml[data-dsg='on'] .dsg-settings {\n display: flex;\n flex-direction: column;\n gap: 18px;\n max-width: 760px;\n color: var(--dsw-alias-label-primary);\n}\nhtml[data-dsg='on'] .dsg-settings-head {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\nhtml[data-dsg='on'] .dsg-settings-title {\n font-size: 15px;\n font-weight: 600;\n letter-spacing: 0.01em;\n}\nhtml[data-dsg='on'] .dsg-settings-sub {\n font-size: 12px;\n line-height: 1.6;\n color: var(--dsw-alias-label-tertiary);\n}\nhtml[data-dsg='on'] .dsg-settings-body {\n display: flex;\n flex-direction: column;\n gap: 4px;\n padding: 8px 18px;\n border-radius: var(--dsg-radius-card);\n background: rgba(255, 255, 255, calc(0.5 * var(--dsg-glass, 1)));\n border: 1px solid var(--dsw-alias-border-l2);\n -webkit-backdrop-filter: blur(var(--dsg-card-blur)) saturate(var(--dsg-sat));\n backdrop-filter: blur(var(--dsg-card-blur)) saturate(var(--dsg-sat));\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.55),\n 0 10px 30px rgba(44, 74, 140, 0.08);\n}\nhtml[data-dsg='on'] body[data-ds-dark-theme] .dsg-settings-body {\n background: rgba(22, 33, 58, calc(0.6 * var(--dsg-glass, 1)));\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.08),\n 0 14px 36px rgba(0, 0, 0, 0.32);\n}\nhtml[data-dsg='on'] .dsg-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n padding: 14px 0;\n border-bottom: 1px solid var(--dsw-alias-border-l1);\n}\nhtml[data-dsg='on'] .dsg-row:last-child {\n border-bottom: 0;\n}\nhtml[data-dsg='on'] .dsg-row-text {\n min-width: 0;\n}\nhtml[data-dsg='on'] .dsg-row-label {\n font-size: 13px;\n font-weight: 500;\n}\nhtml[data-dsg='on'] .dsg-row-hint {\n margin-top: 3px;\n font-size: 11px;\n color: var(--dsw-alias-label-tertiary);\n}\nhtml[data-dsg='on'] .dsg-row-control {\n display: flex;\n align-items: center;\n gap: 10px;\n flex: 0 0 auto;\n}\nhtml[data-dsg='on'] .dsg-slider {\n display: flex;\n align-items: center;\n gap: 10px;\n}\nhtml[data-dsg='on'] .dsg-slider input[type='range'] {\n width: 148px;\n accent-color: var(--dsg-blue);\n}\nhtml[data-dsg='on'] .dsg-slider-value {\n width: 40px;\n font-size: 12px;\n font-variant-numeric: tabular-nums;\n color: var(--dsw-alias-label-secondary);\n text-align: right;\n}\nhtml[data-dsg='on'] .dsg-seg {\n display: inline-flex;\n padding: 3px;\n gap: 2px;\n border-radius: 999px;\n background: rgba(77, 107, 254, 0.07);\n border: 1px solid var(--dsw-alias-border-l1);\n}\nhtml[data-dsg='on'] .dsg-seg-btn {\n border: 0;\n background: transparent;\n color: var(--dsw-alias-label-secondary);\n font-size: 12px;\n line-height: 1;\n padding: 7px 13px;\n border-radius: 999px;\n cursor: pointer;\n transition: background var(--dsg-motion-dur) var(--dsg-ease), color var(--dsg-motion-dur) var(--dsg-ease);\n}\nhtml[data-dsg='on'] .dsg-seg-btn:hover {\n color: var(--dsw-alias-label-primary);\n background: rgba(255, 255, 255, 0.5);\n}\nhtml[data-dsg='on'] .dsg-seg-btn.is-on {\n color: var(--dsg-blue);\n background: #fff;\n box-shadow: 0 2px 8px rgba(44, 74, 140, 0.12);\n}\nhtml[data-dsg='on'] body[data-ds-dark-theme] .dsg-seg-btn.is-on {\n background: rgba(77, 107, 254, 0.28);\n color: #dce6ff;\n}\nhtml[data-dsg='on'] .dsg-switch {\n position: relative;\n width: 44px;\n height: 26px;\n padding: 0;\n border-radius: 999px;\n border: 1px solid var(--dsw-alias-border-l2);\n background: rgba(120, 140, 180, 0.22);\n cursor: pointer;\n transition: background var(--dsg-motion-dur) var(--dsg-ease);\n}\nhtml[data-dsg='on'] .dsg-switch .dsg-switch-thumb {\n position: absolute;\n top: 3px;\n left: 3px;\n width: 18px;\n height: 18px;\n border-radius: 50%;\n background: #fff;\n box-shadow: 0 1px 4px rgba(20, 40, 90, 0.24);\n transition: transform var(--dsg-motion-dur) var(--dsg-ease);\n}\nhtml[data-dsg='on'] .dsg-switch.is-on {\n background: var(--dsg-blue);\n border-color: transparent;\n}\nhtml[data-dsg='on'] .dsg-switch.is-on .dsg-switch-thumb {\n transform: translateX(18px);\n}\nhtml[data-dsg='on'] .dsg-settings-foot {\n display: flex;\n justify-content: flex-end;\n padding: 12px 0 10px;\n}\nhtml[data-dsg='on'] .dsg-btn {\n border: 1px solid var(--dsw-alias-border-l2);\n background: rgba(255, 255, 255, 0.6);\n color: var(--dsw-alias-label-secondary);\n font-size: 12px;\n padding: 8px 16px;\n border-radius: 999px;\n cursor: pointer;\n transition: all var(--dsg-motion-dur) var(--dsg-ease);\n}\nhtml[data-dsg='on'] .dsg-btn:hover {\n color: var(--dsg-blue);\n border-color: var(--dsg-blue-ring);\n background: #fff;\n}\nhtml[data-dsg='on'] body[data-ds-dark-theme] .dsg-btn {\n background: rgba(255, 255, 255, 0.06);\n}\nhtml[data-dsg='on'] body[data-ds-dark-theme] .dsg-btn:hover {\n background: rgba(77, 107, 254, 0.22);\n color: #dce6ff;\n}\n"
14
+ var CSS = "\n/* ===== 00-foundation.css ===== */\n/* ============================================================================\n dsh-skin-mistblue · 00 foundation + glass engine\n DeepSeek-web visual language on top of the DSH `--dsw-*` token system.\n\n Glass engine ported from wallpaper-engine's 5-layer recipe (see\n docs/GLASS-SPEC.md):\n ① fill (token) ② top specular sheen ③ backdrop-filter frost\n ④ inset bevel + hairline ⑤ soft outer elevation\n Fill maths (color-mix, premultiplied):\n effAlpha = floor + a * (1 - floor) floor = theme readability floor\n\n Tiers:\n L1 content surfaces · light fill, small frost\n L2 cards / bubbles · medium fill + frost (readability uplift)\n L3 popups / details · strong fill + strong frost (readability uplift)\n ========================================================================== */\n\nhtml[data-dsg='on'] {\n /* ---- engine sources (shared) ------------------------------------------ */\n --dsg-sat: 1.3;\n --dsg-bright: 1.04;\n --dsg-contrast: 1.01;\n --dsg-fidelity: 0.55;\n --dsg-floor-base-light: 0.45;\n --dsg-floor-base-dark: 0.59;\n --dsg-floor: calc(var(--dsg-floor-base-light) * var(--dsg-fidelity));\n\n --dsg-a1: 0.06;\n --dsg-a2: 0.20;\n --dsg-a3: 0.72;\n\n /* blur ladder: wallpaper-engine's 8px anchor, then readability uplift for\n cards and popups (user requirement: more frost on cards/popups/details). */\n --dsg-blur-l1: calc(6px * var(--dsg-blur, 1));\n --dsg-blur-l2: calc(16px * var(--dsg-blur, 1));\n --dsg-blur-l3: calc(24px * var(--dsg-blur, 1));\n /* Large-area surfaces: dialogs/settings are expensive to re-blur; menus are\n small but read better with a slightly softer frost. */\n --dsg-blur-dialog: calc(12px * var(--dsg-blur, 1));\n --dsg-blur-l3-dialog: var(--dsg-blur-dialog);\n --dsg-blur-menu: calc(20px * var(--dsg-blur, 1));\n\n --dsg-motion: 1;\n\n --dsg-radius-card: 20px;\n --dsg-radius-modal: 24px;\n --dsg-radius-composer: 28px;\n --dsg-motion-dur: calc(180ms * var(--dsg-motion));\n --dsg-ease: cubic-bezier(0.22, 0.61, 0.36, 1);\n\n --dsg-blue: #4d6bfe;\n --dsg-blue-strong: #3556f0;\n --dsg-blue-soft: rgba(77, 107, 254, 0.12);\n --dsg-blue-ring: rgba(77, 107, 254, 0.45);\n\n /* document preview paper: fully opaque, never lets chat text show through */\n --dsg-doc-paper: #ffffff;\n}\n\n/* ---- atmosphere ---------------------------------------------------------- */\n/* Static layered mist from docs/DESIGN-SPEC §6.1 (measured from deepseek.com),\n plus three very faint drifting light pools for depth. */\nhtml[data-dsg='on'] body {\n background-color: transparent !important;\n}\nhtml[data-dsg='on'] .dsg-atmosphere {\n position: fixed;\n inset: 0;\n z-index: -1;\n pointer-events: none;\n overflow: hidden;\n background-color: #f4f7fc;\n background-image:\n radial-gradient(120% 62% at 50% -14%, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.55) 42%, rgba(255, 255, 255, 0) 68%),\n radial-gradient(46% 40% at 71% 1%, rgba(120, 152, 219, 0.58) 0%, rgba(120, 152, 219, 0.2) 55%, rgba(120, 152, 219, 0) 78%),\n radial-gradient(40% 42% at 28% 50%, rgba(146, 178, 230, 0.55) 0%, rgba(146, 178, 230, 0.22) 58%, rgba(146, 178, 230, 0) 82%),\n radial-gradient(52% 46% at 100% 62%, rgba(196, 213, 238, 0.4) 0%, rgba(196, 213, 238, 0) 72%),\n radial-gradient(100% 46% at 50% 112%, rgba(248, 247, 248, 0.98) 0%, rgba(248, 247, 248, 0.7) 40%, rgba(248, 247, 248, 0) 70%),\n linear-gradient(178deg, #fbfcfe 0%, #eef4fb 24%, #e3ecf7 46%, #dfe9f6 58%, #e9eff7 74%, #f4f4f5 90%, #f8f7f8 100%);\n background-repeat: no-repeat;\n}\nhtml[data-dsg='on'] .dsg-atmosphere .dsg-aurora {\n position: absolute;\n display: block;\n border-radius: 50%;\n filter: blur(90px);\n opacity: 0.5;\n will-change: transform;\n animation: dsg-drift 34s ease-in-out infinite alternate;\n}\nhtml[data-dsg='on'] .dsg-atmosphere .dsg-aurora-a {\n width: 46vw; height: 38vw; left: -10vw; top: -12vw;\n background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 70%);\n}\nhtml[data-dsg='on'] .dsg-atmosphere .dsg-aurora-b {\n width: 40vw; height: 34vw; right: -10vw; top: 6vh;\n background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 72%);\n animation-delay: -12s; animation-duration: 42s;\n}\nhtml[data-dsg='on'] .dsg-atmosphere .dsg-aurora-c {\n width: 56vw; height: 30vw; left: 22vw; bottom: -18vw;\n background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 72%);\n animation-delay: -20s; animation-duration: 48s;\n}\nhtml[data-dsg='on'] .dsg-atmosphere .dsg-grid {\n position: absolute; inset: 0;\n background-image:\n linear-gradient(to right, rgba(59, 91, 148, 0.045) 1px, transparent 1px),\n linear-gradient(to bottom, rgba(59, 91, 148, 0.045) 1px, transparent 1px);\n background-size: 75px 75px;\n background-position: 56px 56px;\n -webkit-mask-image: radial-gradient(120% 95% at 50% 32%, #000 30%, transparent 82%);\n mask-image: radial-gradient(120% 95% at 50% 32%, #000 30%, transparent 82%);\n}\nhtml[data-dsg='on'] .dsg-atmosphere .dsg-grain {\n position: absolute; inset: 0; opacity: 0.12; mix-blend-mode: soft-light;\n background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>\");\n}\n@keyframes dsg-drift {\n from { transform: translate3d(0, 0, 0) scale(1); }\n to { transform: translate3d(1.4vw, -1vh, 0) scale(1.03); }\n}\nhtml[data-dsg-atmosphere='mist'] .dsg-atmosphere .dsg-aurora { opacity: 0.25; }\nhtml[data-dsg-atmosphere='off'] .dsg-atmosphere { display: none; }\n\n/* Dark palette atmosphere */\nhtml[data-dsg='on'] body[data-ds-dark-theme] .dsg-atmosphere {\n background-color: #0a1020;\n background-image:\n radial-gradient(120% 64% at 50% -14%, rgba(88, 122, 200, 0.34) 0%, rgba(10, 14, 26, 0) 64%),\n radial-gradient(46% 40% at 72% 2%, rgba(77, 107, 254, 0.28) 0%, rgba(77, 107, 254, 0) 76%),\n radial-gradient(42% 44% at 24% 54%, rgba(90, 130, 255, 0.16) 0%, rgba(90, 130, 255, 0) 78%),\n radial-gradient(52% 46% at 100% 62%, rgba(120, 90, 255, 0.12) 0%, rgba(120, 90, 255, 0) 74%),\n linear-gradient(178deg, #0c1322 0%, #0b1426 34%, #0a111f 62%, #0c1524 100%);\n}\nhtml[data-dsg='on'] body[data-ds-dark-theme] .dsg-atmosphere .dsg-aurora { opacity: 0.22; }\nhtml[data-dsg='on'] body[data-ds-dark-theme] .dsg-atmosphere .dsg-aurora-a {\n background: radial-gradient(circle at 40% 40%, rgba(77, 107, 254, 0.45), rgba(77, 107, 254, 0) 68%);\n}\nhtml[data-dsg='on'] body[data-ds-dark-theme] .dsg-atmosphere .dsg-aurora-b {\n background: radial-gradient(circle at 50% 50%, rgba(90, 130, 255, 0.3), rgba(90, 130, 255, 0) 70%);\n}\nhtml[data-dsg='on'] body[data-ds-dark-theme] .dsg-atmosphere .dsg-aurora-c {\n background: radial-gradient(circle at 50% 50%, rgba(120, 90, 255, 0.24), rgba(120, 90, 255, 0) 72%);\n}\nhtml[data-dsg='on'] body[data-ds-dark-theme] .dsg-atmosphere .dsg-grid {\n background-image:\n linear-gradient(to right, rgba(150, 180, 255, 0.045) 1px, transparent 1px),\n linear-gradient(to bottom, rgba(150, 180, 255, 0.045) 1px, transparent 1px);\n}\n\n/* ---- glass engine · light ------------------------------------------------ */\nhtml[data-dsg='on'] body {\n --dsg-tint: #ffffff;\n --dsg-tint-rgb: 255 255 255;\n\n /* three tier fills: effAlpha = floor + a * (1 - floor) */\n --dsg-fill-l1: color-mix(in srgb,\n var(--dsg-tint) calc(var(--dsg-floor) * 100%),\n color-mix(in srgb, var(--dsg-tint) calc(var(--dsg-a1) * 100%), transparent) calc((1 - var(--dsg-floor)) * 100%));\n --dsg-fill-l2: color-mix(in srgb,\n var(--dsg-tint) calc(var(--dsg-floor) * 100%),\n color-mix(in srgb, var(--dsg-tint) calc(var(--dsg-a2) * 100%), transparent) calc((1 - var(--dsg-floor)) * 100%));\n --dsg-fill-l3: color-mix(in srgb,\n var(--dsg-tint) calc(var(--dsg-floor-base-light) * 100%),\n color-mix(in srgb, var(--dsg-tint) calc(var(--dsg-a3) * 100%), transparent) calc((1 - var(--dsg-floor-base-light)) * 100%));\n\n /* frost */\n --dsg-backdrop-l1: blur(var(--dsg-blur-l1)) saturate(var(--dsg-sat)) brightness(var(--dsg-bright)) contrast(var(--dsg-contrast));\n --dsg-backdrop-l2: blur(var(--dsg-blur-l2)) saturate(var(--dsg-sat)) brightness(var(--dsg-bright)) contrast(var(--dsg-contrast));\n --dsg-backdrop-l3: blur(var(--dsg-blur-l3)) saturate(var(--dsg-sat)) brightness(var(--dsg-bright)) contrast(var(--dsg-contrast));\n --dsg-backdrop-l3-dialog: blur(var(--dsg-blur-dialog)) saturate(var(--dsg-sat)) brightness(var(--dsg-bright)) contrast(var(--dsg-contrast));\n --dsg-backdrop-dialog: blur(var(--dsg-blur-dialog)) saturate(var(--dsg-sat)) brightness(var(--dsg-bright)) contrast(var(--dsg-contrast));\n --dsg-backdrop-menu: blur(var(--dsg-blur-menu)) saturate(1.4);\n --dsg-backdrop-panel: blur(calc(10px * var(--dsg-blur, 1))) saturate(1.2) brightness(var(--dsg-bright));\n\n /* specular sheen */\n --dsg-sheen-l1: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03) 38%, rgba(255, 255, 255, 0.02));\n --dsg-sheen-l2: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05) 38%, rgba(255, 255, 255, 0.02));\n --dsg-sheen-l3: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05) 38%, rgba(255, 255, 255, 0.03));\n\n /* bevel + elevation */\n --dsg-bevel-l1:\n inset 0 1px 0 rgba(255, 255, 255, 0.45),\n inset 0 -1px 0 rgba(255, 255, 255, 0.08),\n inset 0 0 0 0.5px rgba(255, 255, 255, 0.16),\n 0 8px 26px rgba(44, 74, 140, 0.08);\n --dsg-bevel-l2:\n inset 0 1px 0 rgba(255, 255, 255, 0.6),\n inset 0 -1px 0 rgba(255, 255, 255, 0.1),\n inset 0 0 0 0.5px rgba(255, 255, 255, 0.22),\n 0 14px 44px rgba(44, 74, 140, 0.12);\n --dsg-bevel-l3:\n inset 0 1px 0 rgba(255, 255, 255, 0.7),\n inset 0 0 0 1px rgba(255, 255, 255, 0.28),\n 0 24px 80px rgba(23, 48, 108, 0.2);\n\n --dsg-border-hair: rgba(56, 88, 158, 0.14);\n\n /* ---- consume engine into DSH tokens ---------------------------------- */\n --dsw-alias-bg-base: transparent;\n --dsw-alias-bg-layer-1: var(--dsg-fill-l1);\n --dsw-alias-bg-layer-2: var(--dsg-fill-l2);\n --dsw-alias-bg-layer-3: var(--dsg-fill-l3);\n --dsw-alias-bg-overlay: var(--dsg-fill-l3);\n --dsw-alias-bg-module-platform: var(--dsg-fill-l1);\n --dsw-alias-bg-multi-select: var(--dsg-fill-l1);\n /* document preview / pdf paper: host uses this for the preview page body —\n opaque so dense text never blends with the conversation behind it. */\n --dsw-alias-bg-document-preview: var(--dsg-doc-paper);\n\n --dsw-specific-sidebar-fill: var(--dsg-fill-l1);\n --dsw-specific-input-major: var(--dsg-fill-l2);\n --dsw-specific-bubble: var(--dsg-fill-l2);\n --dsw-specific-menu: color-mix(in srgb, #ffffff 82%, transparent);\n --dsw-menu-surface-fill: color-mix(in srgb, #ffffff 82%, transparent);\n --dsw-alias-menu-group-header-fill: rgba(250, 252, 255, 0.94);\n --dsw-specific-selector: var(--dsg-fill-l2);\n --dsw-specific-tip: var(--dsg-fill-l2);\n --dsw-specific-sidebar-nav-item-active: var(--dsg-fill-l2);\n --dsw-specific-sidebar-nav-item-hover: rgba(77, 107, 254, 0.07);\n --dsw-specific-sidebar-nav-item-active-accent: var(--dsg-blue-soft);\n\n /* borders: blue-grey hairlines */\n --dsw-alias-border-l1: rgba(56, 88, 158, 0.1);\n --dsw-alias-border-l2: rgba(56, 88, 158, 0.16);\n --dsw-alias-border-l3: rgba(56, 88, 158, 0.2);\n --dsw-alias-border-l4: rgba(56, 88, 158, 0.26);\n --dsw-elevation-stroke-color: rgba(56, 88, 158, 0.18);\n\n /* DeepSeek blue interaction states */\n --dsw-alias-state-business-primary: var(--dsg-blue);\n --dsw-alias-link: var(--dsg-blue);\n --dsw-alias-brand-primary-new-colorprimary-new-color: var(--dsg-blue);\n --dsw-alias-interactive-bg-hover: rgba(77, 107, 254, 0.07);\n --dsw-alias-interactive-bg-active: rgba(77, 107, 254, 0.12);\n --dsw-alias-interactive-bg-hover-accent: var(--dsg-blue-soft);\n --dsw-alias-state-business-tertiary: rgba(77, 107, 254, 0.1);\n\n /* content surfaces */\n --dsw-alias-markdown-code-block: var(--dsg-fill-l1);\n --dsw-alias-markdown-code-block-banner: var(--dsg-fill-l2);\n --dsw-alias-markdown-inline-code: rgba(77, 107, 254, 0.08);\n --dsw-alias-markdown-citation: var(--dsg-fill-l1);\n --dsw-alias-markdown-tag: rgba(77, 107, 254, 0.08);\n --dsw-alias-turn-trigger-bg: var(--dsg-fill-l1);\n --dsw-alias-turn-trigger-bg-hover: var(--dsg-fill-l2);\n --dsw-alias-settings-card-fill: var(--dsg-fill-l2);\n --dsw-alias-settings-card-stroke: rgba(56, 88, 158, 0.16);\n\n /* host frosted channels */\n --dsw-menu-backdrop-filter: blur(calc(24px * var(--dsg-blur, 1))) saturate(1.4);\n --dsw-mask-blur: blur(calc(14px * var(--dsg-blur, 1))) saturate(1.2);\n\n /* elevation: diffuse blue-tinted daylight */\n --dsw-shadow-lv1: 0 2px 6px rgba(44, 74, 140, 0.06);\n --dsw-shadow-lv2: 0 6px 18px rgba(44, 74, 140, 0.08);\n --dsw-shadow-lv3: 0 18px 48px rgba(44, 74, 140, 0.12);\n --dsw-elevation-panel: var(--dsw-elevation-stroke), 0 6px 20px rgba(44, 74, 140, 0.08), 0 0 24px rgba(44, 74, 140, 0.04);\n --dsw-elevation-prominent: var(--dsw-elevation-stroke), 0 10px 34px rgba(44, 74, 140, 0.12), 0 0 30px rgba(44, 74, 140, 0.06);\n --dsw-elevation-soft: var(--dsw-elevation-stroke), 0 8px 28px rgba(44, 74, 140, 0.08), 0 0 28px rgba(44, 74, 140, 0.05);\n\n /* ink: deeper ramp for readable text over glass (≥4.9:1) */\n --dsw-alias-label-primary: #101728;\n --dsw-alias-label-secondary: #333c4d;\n --dsw-alias-label-tertiary: #5c6472;\n --dsw-alias-label-caption: #626a78;\n}\n\n/* ---- glass engine · dark ------------------------------------------------- */\nhtml[data-dsg='on'] body[data-ds-dark-theme] {\n --dsg-tint: #0d1524;\n --dsg-tint-rgb: 13 21 36;\n --dsg-floor: calc(var(--dsg-floor-base-dark) * var(--dsg-fidelity));\n --dsg-a1: 0.08;\n --dsg-a2: 0.34;\n --dsg-a3: 0.66;\n\n --dsg-fill-l1: color-mix(in srgb,\n var(--dsg-tint) calc(var(--dsg-floor) * 100%),\n color-mix(in srgb, var(--dsg-tint) calc(var(--dsg-a1) * 100%), transparent) calc((1 - var(--dsg-floor)) * 100%));\n --dsg-fill-l2: color-mix(in srgb,\n var(--dsg-tint) calc(var(--dsg-floor) * 100%),\n color-mix(in srgb, var(--dsg-tint) calc(var(--dsg-a2) * 100%), transparent) calc((1 - var(--dsg-floor)) * 100%));\n --dsg-fill-l3: color-mix(in srgb,\n var(--dsg-tint) calc(var(--dsg-floor-base-dark) * 100%),\n color-mix(in srgb, var(--dsg-tint) calc(var(--dsg-a3) * 100%), transparent) calc((1 - var(--dsg-floor-base-dark)) * 100%));\n\n /* document preview paper: fully opaque, never lets chat text show through */\n --dsg-doc-paper: #0c1322;\n\n --dsg-sheen-l1: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02) 38%, rgba(255, 255, 255, 0.01));\n --dsg-sheen-l2: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.03) 38%, rgba(255, 255, 255, 0.01));\n --dsg-sheen-l3: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02) 38%, rgba(255, 255, 255, 0.03));\n\n --dsg-bevel-l1:\n inset 0 1px 0 rgba(255, 255, 255, 0.14),\n inset 0 -1px 0 rgba(255, 255, 255, 0.05),\n inset 0 0 0 0.5px rgba(255, 255, 255, 0.08),\n 0 8px 26px rgba(0, 0, 0, 0.22);\n --dsg-bevel-l2:\n inset 0 1px 0 rgba(255, 255, 255, 0.16),\n inset 0 -1px 0 rgba(255, 255, 255, 0.06),\n inset 0 0 0 0.5px rgba(255, 255, 255, 0.1),\n 0 14px 44px rgba(0, 0, 0, 0.32);\n --dsg-bevel-l3:\n inset 0 1px 0 rgba(255, 255, 255, 0.16),\n inset 0 0 0 1px rgba(255, 255, 255, 0.08),\n 0 24px 80px rgba(0, 0, 0, 0.48);\n\n --dsg-border-hair: rgba(150, 180, 255, 0.14);\n\n --dsw-specific-menu: color-mix(in srgb, #0d1524 86%, transparent);\n --dsw-menu-surface-fill: color-mix(in srgb, #0d1524 84%, transparent);\n --dsw-alias-menu-group-header-fill: rgba(13, 21, 36, 0.95);\n --dsw-specific-sidebar-nav-item-hover: rgba(255, 255, 255, 0.05);\n --dsw-specific-sidebar-nav-item-active-accent: rgba(77, 107, 254, 0.22);\n\n --dsw-alias-border-l1: rgba(150, 180, 255, 0.1);\n --dsw-alias-border-l2: rgba(150, 180, 255, 0.16);\n --dsw-alias-border-l3: rgba(150, 180, 255, 0.22);\n --dsw-alias-border-l4: rgba(150, 180, 255, 0.28);\n --dsw-elevation-stroke-color: rgba(150, 180, 255, 0.2);\n\n --dsw-alias-markdown-inline-code: rgba(120, 150, 255, 0.14);\n --dsw-alias-markdown-tag: rgba(120, 150, 255, 0.14);\n --dsw-alias-turn-trigger-bg-hover: var(--dsg-fill-l2);\n --dsw-alias-settings-card-fill: var(--dsg-fill-l2);\n --dsw-alias-settings-card-stroke: rgba(150, 180, 255, 0.18);\n\n --dsw-alias-label-primary: #eef3ff;\n --dsw-alias-label-secondary: #b9c6df;\n --dsw-alias-label-tertiary: #93a3c0;\n --dsw-alias-label-caption: #7d8da9;\n}\n\n/* ---- global texture: selection, focus, scrollbar ------------------------- */\nhtml[data-dsg='on'] ::selection {\n background: rgba(77, 107, 254, 0.22);\n}\nhtml[data-dsg='on'] body :focus-visible:not(:read-write) {\n outline-color: var(--dsg-blue-ring) !important;\n}\nhtml[data-dsg='on'] * {\n scrollbar-color: rgba(77, 107, 254, 0.28) transparent;\n}\nhtml[data-dsg='on'] ::-webkit-scrollbar-thumb {\n background: rgba(77, 107, 254, 0.24) !important;\n border-radius: 999px;\n}\nhtml[data-dsg='on'] ::-webkit-scrollbar-thumb:hover {\n background: rgba(77, 107, 254, 0.38) !important;\n}\n\n/* ---- runtime fallback: software rasteriser (syntax OK, frost missing) ---- */\nhtml[data-dsg='on'] body[data-dsg-fallback] {\n --dsg-fill-l1: rgba(250, 252, 255, 0.92);\n --dsg-fill-l2: rgba(252, 253, 255, 0.95);\n --dsg-fill-l3: rgba(255, 255, 255, 0.97);\n --dsg-backdrop-l1: none;\n --dsg-backdrop-l2: none;\n --dsg-backdrop-l3: none;\n --dsg-backdrop-panel: none;\n --dsw-menu-backdrop-filter: none;\n --dsw-mask-blur: none;\n --dsg-sheen-l1: none;\n --dsg-sheen-l2: none;\n --dsg-sheen-l3: none;\n}\nhtml[data-dsg='on'] body[data-ds-dark-theme][data-dsg-fallback] {\n --dsg-fill-l1: rgba(13, 21, 36, 0.93);\n --dsg-fill-l2: rgba(16, 26, 44, 0.96);\n --dsg-fill-l3: rgba(18, 29, 49, 0.98);\n}\n\n/* ---- reduced motion ------------------------------------------------------- */\n@media (prefers-reduced-motion: reduce) {\n html[data-dsg='on'] .dsg-atmosphere .dsg-aurora {\n animation: none !important;\n }\n html[data-dsg='on'] * {\n transition-duration: 1ms !important;\n animation-duration: 1ms !important;\n }\n}\n\n@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {\n html[data-dsg='on'] body {\n --dsg-fill-l1: rgba(250, 252, 255, 0.9);\n --dsg-fill-l2: rgba(252, 253, 255, 0.94);\n --dsg-fill-l3: rgba(255, 255, 255, 0.97);\n --dsw-specific-menu: #fafcff;\n --dsw-menu-surface-fill: #fafcff;\n }\n html[data-dsg='on'] body[data-ds-dark-theme] {\n --dsg-fill-l1: rgba(13, 21, 36, 0.92);\n --dsg-fill-l2: rgba(16, 26, 44, 0.95);\n --dsg-fill-l3: rgba(18, 29, 49, 0.97);\n --dsw-specific-menu: #0f1728;\n --dsw-menu-surface-fill: #0f1728;\n }\n}\n\n/* ---- resize guard：拖动分栏时卸掉高成本材质 ---------------------------------\n client 半部在 pointerdown（cursor 为 *-resize 的手柄）时给 <html> 打\n data-dsg-resizing，松手立即移除。拖动期间每帧都会重排/重绘：\n · 任何 backdrop-filter 都会让 Chromium 重新采样整块背景 → 卡顿主因；\n · 沿移动边缘的超大外投影会逐帧重新栅格化。\n 这些玻璃背后的衬底是平滑的氛围层，去掉霜与远投影在拖动过程中几乎看不出；\n 静止态（含松手后的每一帧）与原来完全一致，不改变最终观感。 */\nhtml[data-dsg='on'][data-dsg-resizing] :is(\n [class*='_bubble']:not([role='tooltip']),\n [data-turn-trigger]\n ) {\n -webkit-backdrop-filter: none !important;\n backdrop-filter: none !important;\n /* 只保留内侧顶光/发丝边，去掉逐帧重栅格化的 44px 外投影 */\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.55),\n inset 0 -1px 0 rgba(255, 255, 255, 0.1),\n inset 0 0 0 0.5px rgba(255, 255, 255, 0.22) !important;\n}\nhtml[data-dsg='on'][data-dsg-resizing] body[data-ds-dark-theme] :is(\n [class*='_bubble']:not([role='tooltip']),\n [data-turn-trigger]\n ) {\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.14),\n inset 0 0 0 0.5px rgba(255, 255, 255, 0.1) !important;\n}\nhtml[data-dsg='on'][data-dsg-resizing] :is(\n [data-composer-card],\n [data-goal-bar] [class*='_bar'],\n [data-sidebar-right-panel]:not([aria-hidden='true']),\n [data-slot='conversation.header'] > header,\n div:has(> [data-slot='sidebar'])\n )::before {\n -webkit-backdrop-filter: none !important;\n backdrop-filter: none !important;\n}\n/* 侧栏/header 的外投影在拖动时收紧（移动边缘的大半径阴影最贵） */\nhtml[data-dsg='on'][data-dsg-resizing] [data-sidebar-right-panel] {\n box-shadow: -6px 0 16px rgba(44, 74, 140, 0.07) !important;\n}\nhtml[data-dsg='on'][data-dsg-resizing] [data-slot='conversation.header'] > header {\n box-shadow: 0 8px 20px -18px rgba(44, 74, 140, 0.4) !important;\n}\n\n/* ===== 10-shell.css ===== */\n/* ============================================================================\r\n dsh-skin-mistblue · 10 shell — 主壳 / 三栏 / Windows 标题栏 / 会话 header / 右栏外壳\r\n Owner: shell-dev. Consumes the glass engine in 00-foundation.css only.\r\n\r\n 规则来源：docs/UI-CONTRACT.md §3/§4、docs/GLASS-SPEC.md §1/§5、\r\n docs/DESIGN-SPEC.md §8.1/§8.2/§8.4、docs/SURFACE-MAP.md §2/§4/§6/§8。\r\n\r\n 硬约束（本文件逐步遵守）：\r\n · Windows 标题栏是 frame 的 ::before（宿主壳层），模糊另起 ::after —— 伪元素没有\r\n 后代，永不成为 fixed 包含块（左栏 fixed 收起按钮安全）。\r\n · 会话 header 的霜只能挂 ::before；header 设 z-index:0 建普通层叠上下文（不是\r\n isolation —— isolation 会建 backdrop root，霜会失效）。\r\n · 右栏面板必须带 open 守卫（收起态 aria-hidden=true 仍挂载在布局里）。\r\n · 不在 frame / centerCol / rightbarCol 这些 fixed 祖先上挂 backdrop-filter。\r\n ========================================================================== */\r\n\r\n/* ---- shared shell vars (my own layer, foundation keeps the engine) -------- */\r\nhtml[data-dsg='on'] {\r\n --dsg-capsule: rgba(255, 255, 255, 0.55);\r\n --dsg-capsule-hover: rgba(255, 255, 255, 0.74);\r\n --dsg-row-hover: rgba(31, 58, 110, 0.055);\r\n --dsg-row-active: rgba(77, 107, 254, 0.12);\r\n --dsg-row-active-ink: #2f49d9;\r\n --dsg-hairline-soft: rgba(56, 88, 158, 0.1);\r\n --dsg-sheen-top: inset 0 1px 0 rgba(255, 255, 255, 0.55);\r\n --dsg-header-h: 57px;\r\n --dsg-shell-radius: 20px;\r\n /* 会话 header：悬浮玻璃条（比 L2 更透，好让顶部的雾蓝衬光透出来） */\r\n --dsg-header-radius: 18px;\r\n --dsg-header-fill: color-mix(in srgb, #ffffff 17%, transparent);\r\n --dsg-header-backdrop: blur(calc(24px * var(--dsg-blur, 1))) saturate(1.65) brightness(1.02);\r\n --dsg-header-sweep: linear-gradient(\r\n 112deg,\r\n rgba(255, 255, 255, 0.22) 0%,\r\n rgba(255, 255, 255, 0.05) 34%,\r\n rgba(255, 255, 255, 0) 58%\r\n );\r\n /* 右侧栏面板：只留一层玻璃。dockkit 各层容器与内容自带半透明底，必须清零，\r\n 否则层层叠加会把整块面板洗成不透明白（旧版就是这个问题）。 */\r\n --dsg-panel-fill: color-mix(in srgb, #ffffff 18%, transparent);\r\n --dsg-panel-backdrop: blur(calc(22px * var(--dsg-blur, 1))) saturate(1.55) brightness(1.02);\r\n}\r\nhtml[data-dsg='on'] body[data-ds-dark-theme] {\r\n --dsg-capsule: rgba(255, 255, 255, 0.08);\r\n --dsg-capsule-hover: rgba(255, 255, 255, 0.13);\r\n --dsg-row-hover: rgba(255, 255, 255, 0.06);\r\n --dsg-row-active: rgba(123, 147, 255, 0.18);\r\n --dsg-row-active-ink: #9fb4ff;\r\n --dsg-hairline-soft: rgba(150, 180, 255, 0.12);\r\n --dsg-sheen-top: inset 0 1px 0 rgba(255, 255, 255, 0.14);\r\n --dsg-header-fill: color-mix(in srgb, #0d1524 47%, transparent);\r\n --dsg-header-backdrop: blur(calc(24px * var(--dsg-blur, 1))) saturate(1.4) brightness(1.05);\r\n --dsg-header-sweep: linear-gradient(\r\n 112deg,\r\n rgba(255, 255, 255, 0.08) 0%,\r\n rgba(255, 255, 255, 0.02) 34%,\r\n rgba(255, 255, 255, 0) 58%\r\n );\r\n --dsg-panel-fill: color-mix(in srgb, #0d1524 46%, transparent);\r\n --dsg-panel-backdrop: blur(calc(22px * var(--dsg-blur, 1))) saturate(1.35) brightness(1.04);\r\n}\r\n\r\n/* ============================================================\r\n 1. 页面底 / 主壳\r\n ============================================================ */\r\n/* 整窗彻底透明：氛围层是唯一背衬。结构锚点：root slot 的直接子 div = frame；\r\n 不写整串哈希类名（[class*=\"_frame\"] 太宽，只作为结构选择器的组合项）。 */\r\nhtml[data-dsg='on'] [data-slot='root'] > [class*='_frame'] {\r\n background: transparent !important;\r\n}\r\nhtml[data-dsg='on'] [data-slot='main'] {\r\n background: transparent !important;\r\n}\r\n/* 底部槽 / 浮层挂载点：不铺底 */\r\nhtml[data-dsg='on'] [data-shell-bottom] {\r\n background: transparent !important;\r\n}\r\nhtml[data-dsg='on'] [data-shell-overlay] {\r\n background: transparent;\r\n}\r\n/* 中列：不铺整块地板（大滚动容器禁止挂霜）。只留顶部一段很淡的雾蓝衬光，\r\n 让氛围层是画布本身、玻璃面浮在雾上 —— 这是「空气感」的来源，也是悬浮\r\n header 玻璃条背后能“看出模糊”的衬底。 */\r\nhtml[data-dsg='on'] div:has(> [data-slot='main']) {\r\n background:\r\n radial-gradient(78% 240px at 18% 0, rgba(120, 152, 219, 0.3) 0%, rgba(120, 152, 219, 0) 72%),\r\n radial-gradient(64% 250px at 82% 0, rgba(146, 178, 230, 0.26) 0%, rgba(146, 178, 230, 0) 76%),\r\n linear-gradient(\r\n 180deg,\r\n rgba(255, 255, 255, 0.16) 0,\r\n rgba(255, 255, 255, 0.04) 200px,\r\n rgba(255, 255, 255, 0) 440px\r\n );\r\n border-radius: var(--dsg-shell-radius) var(--dsg-shell-radius) 0 0;\r\n box-shadow: inset -0.5px 0 0 var(--dsg-hairline-soft);\r\n}\r\nhtml[data-dsg='on'] body[data-ds-dark-theme] div:has(> [data-slot='main']) {\r\n background:\r\n radial-gradient(78% 240px at 18% 0, rgba(64, 96, 168, 0.34) 0%, rgba(64, 96, 168, 0) 72%),\r\n radial-gradient(64% 250px at 82% 0, rgba(77, 107, 254, 0.22) 0%, rgba(77, 107, 254, 0) 76%),\r\n linear-gradient(\r\n 180deg,\r\n rgba(255, 255, 255, 0.05) 0,\r\n rgba(255, 255, 255, 0.015) 200px,\r\n rgba(255, 255, 255, 0) 440px\r\n );\r\n}\r\n/* 右栏 track 本身透明；面板在下面单独画 */\r\nhtml[data-dsg='on'] [data-rightbar-col] {\r\n background: transparent !important;\r\n}\r\n\r\n/* ============================================================\r\n 2. Windows 原生窗口标题栏（frame 的 ::before 是它唯一底色）\r\n ============================================================ */\r\n/* 底色 + 恒定白釉（不能用三段渐变：40px 与 1111px 的盒子会算出不同釉光） */\r\nhtml[data-dsg='on'][data-windows-titlebar] [data-slot='root'] > [class*='_frame']::before {\r\n background-color: var(--dsg-fill-l1) !important;\r\n background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)) !important;\r\n border-bottom: 0.5px solid var(--dsg-border-hair);\r\n}\r\nhtml[data-dsg='on'][data-windows-titlebar] body[data-ds-dark-theme] [data-slot='root'] > [class*='_frame']::before {\r\n background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)) !important;\r\n}\r\nhtml[data-dsg='on'][data-windows-titlebar] [data-slot='root'] > [class*='_frame']::after {\r\n content: '';\r\n position: absolute;\r\n inset: 0 0 auto;\r\n height: var(--dsh-windows-titlebar-height, 40px);\r\n pointer-events: none;\r\n -webkit-backdrop-filter: var(--dsg-backdrop-l1);\r\n backdrop-filter: var(--dsg-backdrop-l1);\r\n}\r\n\r\n/* ============================================================\r\n 3. 会话 header：悬浮 L2 玻璃条 + DeepSeek tab 语言（高度 ~57px）\r\n ============================================================ */\r\n/* 外槽内缩：玻璃条与列边缘之间露出氛围层 —— 和 composer 同一套「浮在雾上」的\r\n 语言，也是“透明”能被看见的前提（背后不再是同一块白板）。 */\r\nhtml[data-dsg='on'] [data-slot='conversation.header'] {\r\n padding: 9px 12px 8px;\r\n background: transparent !important;\r\n}\r\nhtml[data-dsg='on'] [data-slot='conversation.header'] > header {\r\n position: relative;\r\n z-index: 0; /* 普通层叠上下文，让 ::before 的负 z-index 有落脚点 */\r\n padding: 3px 20px 2px !important;\r\n min-height: var(--dsg-header-h);\r\n border: 0 !important;\r\n border-radius: var(--dsg-header-radius);\r\n background: transparent !important;\r\n /* 外投影只放在本体的外圈；内釉光/发丝边交给 ::before（它在负 z-index 上，\r\n 比本体的 box-shadow 后绘制，否则会被填充层盖掉）。 */\r\n box-shadow:\r\n 0 20px 46px -30px rgba(44, 74, 140, 0.55),\r\n 0 2px 10px rgba(44, 74, 140, 0.06);\r\n transition: box-shadow var(--dsg-motion-dur) var(--dsg-ease);\r\n}\r\nhtml[data-dsg='on'] body[data-ds-dark-theme] [data-slot='conversation.header'] > header {\r\n box-shadow:\r\n 0 20px 46px -30px rgba(0, 0, 0, 0.66),\r\n 0 2px 10px rgba(0, 0, 0, 0.26);\r\n}\r\n/* 霜 + 填充 + 釉光：唯一载体（伪元素无后代，永不成为 fixed 包含块） */\r\nhtml[data-dsg='on'] [data-slot='conversation.header'] > header::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n z-index: -1;\r\n pointer-events: none;\r\n border-radius: inherit;\r\n background-color: var(--dsg-header-fill);\r\n background-image: var(--dsg-header-sweep), var(--dsg-sheen-l2);\r\n box-shadow:\r\n inset 0 1px 0 rgba(255, 255, 255, 0.72),\r\n inset 0 0 0 0.5px rgba(255, 255, 255, 0.4),\r\n inset 0 -16px 24px -22px rgba(58, 92, 158, 0.3);\r\n -webkit-backdrop-filter: var(--dsg-header-backdrop);\r\n backdrop-filter: var(--dsg-header-backdrop);\r\n}\r\nhtml[data-dsg='on'] body[data-ds-dark-theme] [data-slot='conversation.header'] > header::before {\r\n box-shadow:\r\n inset 0 1px 0 rgba(255, 255, 255, 0.16),\r\n inset 0 0 0 0.5px rgba(255, 255, 255, 0.12),\r\n inset 0 -16px 24px -22px rgba(0, 0, 0, 0.4);\r\n}\r\n/* 窄窗：贴边、圆角收小，别把内容挤扁 */\r\n@media (max-width: 760px) {\r\n html[data-dsg='on'] [data-slot='conversation.header'] {\r\n padding: 8px 8px 6px;\r\n }\r\n html[data-dsg='on'] [data-slot='conversation.header'] > header {\r\n padding: 2px 14px 2px !important;\r\n border-radius: 14px;\r\n }\r\n}\r\n/* 回退：无霜 / 软件光栅化时保持近不透明，几何与布局不变 */\r\n@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {\r\n html[data-dsg='on'] body {\r\n --dsg-header-fill: rgba(250, 252, 255, 0.94);\r\n }\r\n html[data-dsg='on'] body[data-ds-dark-theme] {\r\n --dsg-header-fill: rgba(15, 24, 40, 0.95);\r\n }\r\n}\r\nhtml[data-dsg='on'] body[data-dsg-fallback] {\r\n --dsg-header-fill: rgba(251, 253, 255, 0.94);\r\n --dsg-header-backdrop: none;\r\n}\r\nhtml[data-dsg='on'] body[data-ds-dark-theme][data-dsg-fallback] {\r\n --dsg-header-fill: rgba(15, 24, 40, 0.95);\r\n}\r\n/* 标题行更紧凑：52–57px 的 DeepSeek 观感，而不是 76px 的宿主默认 */\r\nhtml[data-dsg='on'] [data-slot='conversation.header'] > header [class*='_titleRow'] {\r\n min-height: 24px;\r\n align-items: center;\r\n}\r\n/* header 里的动作簇统一压到 26px，避免把标题行撑高 */\r\nhtml[data-dsg='on'] [data-slot='conversation.header'] > header :is(\r\n [data-slot='conversation.session.header.actions'],\r\n [data-slot='conversation.session.header.utilities'],\r\n [data-slot='conversation.session.header.corner']\r\n ) button {\r\n height: 26px;\r\n min-height: 26px;\r\n font-size: 12.5px;\r\n}\r\nhtml[data-dsg='on'] [data-slot='conversation.header'] > header [class*='_crumb'] {\r\n color: var(--dsw-alias-label-tertiary);\r\n border-radius: 8px;\r\n font-size: 13px;\r\n line-height: 20px;\r\n padding: 2px 8px;\r\n transition: background-color 140ms var(--dsg-ease), color 140ms var(--dsg-ease);\r\n}\r\nhtml[data-dsg='on'] [data-slot='conversation.header'] > header button[class*='_crumb']:hover {\r\n background: var(--dsg-row-hover);\r\n color: var(--dsw-alias-label-primary);\r\n}\r\nhtml[data-dsg='on'] [data-slot='conversation.header'] > header [class*='_crumbCurrent'] {\r\n color: var(--dsw-alias-label-primary);\r\n font-size: 15px;\r\n font-weight: 600;\r\n letter-spacing: 0.01em;\r\n padding-left: 4px;\r\n}\r\n/* 顶部动作区：一律胶囊化，hover 玻璃反馈 */\r\nhtml[data-dsg='on'] [data-slot='conversation.header'] > header :is(\r\n [data-slot='conversation.session.header.actions'],\r\n [data-slot='conversation.session.header.utilities'],\r\n [data-slot='conversation.session.header.corner']\r\n ) button {\r\n border-radius: 999px;\r\n transition: background-color 140ms var(--dsg-ease), color 140ms var(--dsg-ease);\r\n}\r\nhtml[data-dsg='on'] [data-slot='conversation.header'] > header :is(\r\n [data-slot='conversation.session.header.actions'],\r\n [data-slot='conversation.session.header.utilities'],\r\n [data-slot='conversation.session.header.corner']\r\n ) button:hover {\r\n background: var(--dsg-row-hover);\r\n}\r\n/* header 里的「打开方式」拆分按钮：整组做成胶囊 */\r\nhtml[data-dsg='on'] [data-slot='conversation.header'] > header [data-slot='conversation.session.header.utilities'] [class*='_split'] {\r\n border-radius: 999px;\r\n border: 0.5px solid var(--dsg-hairline-soft);\r\n background: var(--dsg-capsule);\r\n overflow: hidden;\r\n transition: background-color 140ms var(--dsg-ease), border-color 140ms var(--dsg-ease);\r\n}\r\nhtml[data-dsg='on'] [data-slot='conversation.header'] > header [data-slot='conversation.session.header.utilities'] [class*='_split']:hover {\r\n background: var(--dsg-capsule-hover);\r\n border-color: rgba(77, 107, 254, 0.2);\r\n}\r\n/* tabs：DeepSeek 风格——未选中弱化、选中蓝字 + 圆角下划线 */\r\nhtml[data-dsg='on'] [data-conversation-tabs] {\r\n gap: 28px;\r\n margin-top: 0;\r\n padding-left: 6px;\r\n}\r\nhtml[data-dsg='on'] [data-conversation-tabs] [role='tab'] {\r\n color: var(--dsw-alias-label-tertiary);\r\n font-size: 13px;\r\n font-weight: 500;\r\n line-height: 16px;\r\n padding: 2px 1px 7px;\r\n border-radius: 8px 8px 0 0;\r\n transition: color 140ms var(--dsg-ease), background-color 140ms var(--dsg-ease);\r\n}\r\nhtml[data-dsg='on'] [data-conversation-tabs] [role='tab']::after {\r\n height: 2.5px;\r\n border-radius: 999px;\r\n background: transparent;\r\n transition: background-color 160ms var(--dsg-ease), box-shadow 160ms var(--dsg-ease);\r\n}\r\nhtml[data-dsg='on'] [data-conversation-tabs] [role='tab']:hover {\r\n color: var(--dsw-alias-label-primary);\r\n}\r\nhtml[data-dsg='on'] [data-conversation-tabs] [role='tab']:hover::after {\r\n background: rgba(77, 107, 254, 0.22);\r\n}\r\nhtml[data-dsg='on'] [data-conversation-tabs] [role='tab'][aria-selected='true'] {\r\n color: var(--dsg-blue);\r\n font-weight: 600;\r\n}\r\nhtml[data-dsg='on'] [data-conversation-tabs] [role='tab'][aria-selected='true']::after {\r\n background: var(--dsg-blue);\r\n box-shadow: 0 2px 8px rgba(77, 107, 254, 0.35);\r\n}\r\n/* header 里的其它小控件（会话层级 lineage / 团队标签）弱化 */\r\nhtml[data-dsg='on'] [data-slot='conversation.header'] > header [class*='_label'] {\r\n color: var(--dsw-alias-label-tertiary);\r\n}\r\n\r\n/* ============================================================\r\n 4. 右栏面板（外壳一层；内容卡片归 60-settings.css）\r\n ============================================================ */\r\nhtml[data-dsg='on'] [data-rightbar-col] [data-sidebar-right-panel]:not([aria-hidden='true']) {\r\n z-index: var(--dsh-dockkit-dock-layer, 10);\r\n border-radius: var(--dsg-shell-radius) 0 0 var(--dsg-shell-radius);\r\n}\r\nhtml[data-dsg='on'] [data-rightbar-col] [data-sidebar-right-panel]:not([aria-hidden='true'])::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n z-index: -1;\r\n pointer-events: none;\r\n border-radius: inherit;\r\n background-color: var(--dsg-panel-fill);\r\n background-image: var(--dsg-sheen-l2);\r\n box-shadow: inset 0.5px 0 0 var(--dsg-hairline-soft), inset 1px 0 0 rgba(255, 255, 255, 0.42);\r\n -webkit-backdrop-filter: var(--dsg-panel-backdrop);\r\n backdrop-filter: var(--dsg-panel-backdrop);\r\n}\r\n/* 收起态显式清干净（容器仍在布局里） */\r\nhtml[data-dsg='on'] [data-rightbar-col] [data-sidebar-right-panel][aria-hidden='true']::before {\r\n content: none;\r\n}\r\nhtml[data-dsg='on'] body[data-ds-dark-theme] [data-rightbar-col] [data-sidebar-right-panel]:not([aria-hidden='true'])::before {\r\n box-shadow: inset 0.5px 0 0 rgba(255, 255, 255, 0.08);\r\n}\r\n/* dockkit tab strip：胶囊 tab */\r\nhtml[data-dsg='on'] [data-dockkit-strip] {\r\n padding: 0 6px;\r\n}\r\nhtml[data-dsg='on'] [data-dockkit-strip] [data-dockkit-tab] {\r\n border-radius: 9px;\r\n color: var(--dsw-alias-label-tertiary);\r\n transition: background-color 140ms var(--dsg-ease), color 140ms var(--dsg-ease);\r\n}\r\nhtml[data-dsg='on'] [data-dockkit-strip] [data-dockkit-tab]:hover {\r\n background: var(--dsg-row-hover);\r\n color: var(--dsw-alias-label-secondary);\r\n}\r\nhtml[data-dsg='on'] [data-dockkit-strip] [data-dockkit-tab][aria-selected='true'] {\r\n background: var(--dsg-row-active);\r\n color: var(--dsg-row-active-ink);\r\n}\r\n/* dockkit 分栏把手 / 内容区不铺底 */\r\nhtml[data-dsg='on'] [data-dockkit-pane],\r\nhtml[data-dsg='on'] [data-dockkit-content] {\r\n background: transparent !important;\r\n}\r\n\r\n/* ============================================================\r\n 5. 滚动条：宿主局部覆盖回本色（foundation 给的是全局细蓝条）\r\n ============================================================ */\r\nhtml[data-dsg='on'] [data-conversation-scroll],\r\nhtml[data-dsg='on'] [data-sidebar-right-panel] [data-dockkit-pane] {\r\n --dsh-scrollbar-thumb: rgba(77, 107, 254, 0.22);\r\n --dsh-scrollbar-thumb-hover: rgba(77, 107, 254, 0.36);\r\n}\n\n/* ===== 12-windows-titlebar.css ===== */\n/* ============================================================================\r\n 12 windows titlebar — 修复 Windows 原生标题栏（菜单条 + 窗口控制按钮）色差\r\n ----------------------------------------------------------------------------\r\n 背景：DSH Desktop 的 preload 注入一个 Shadow DOM 菜单条 div[data-windows-menu]，\r\n 并用一个隐藏探针 span（background-color: var(--dsw-specific-sidebar-fill)）\r\n 通过 canvas 取色后 IPC 给主进程 setTitleBarOverlay(color, symbolColor)。\r\n 我们把这些 token 改成了半透明玻璃后，Electron 的 titleBarOverlay 把 alpha\r\n 合成到黑色背衬上 → 顶部出现一条深色/突兀的带；浅色模式同样存在。\r\n\r\n 修法（全部为 CSS，不改宿主）：\r\n 1. 探针改成不透明主题色 → 主进程收到不透明 rgba，原生窗口控件区与主题一致。\r\n 2. 网页侧标题栏底色用同一实体色 → 菜单区/控件区/网页区三者同色，不再三层色差。\r\n 3. 给菜单条左侧补上 DSH 官方鲸标（从 primitives 提取的 path，mask 着色）。\r\n ========================================================================== */\r\n\r\nhtml[data-dsg='on'][data-windows-titlebar] {\r\n --dsg-titlebar-solid: #eaf1fb;\r\n --dsg-titlebar-ink: #101728;\r\n}\r\nhtml[data-dsg='on'][data-windows-titlebar] body[data-ds-dark-theme] {\r\n --dsg-titlebar-solid: #0b1322;\r\n --dsg-titlebar-ink: #eef3ff;\r\n}\r\n\r\n/* 1) 探针：让主进程拿到不透明标题栏色（样式表 !important 胜过 inline 非 important） */\r\nhtml[data-dsg='on'] body > span[style*='--dsw-specific-sidebar-fill'] {\r\n background-color: var(--dsg-titlebar-solid) !important;\r\n}\r\nhtml[data-dsg='on'] body[data-ds-dark-theme] > span[style*='--dsw-specific-sidebar-fill'] {\r\n background-color: #0b1322 !important;\r\n}\r\n\r\n/* 2) 网页侧标题栏：与原生 overlay 同色；实体色避免透明叠黑 */\r\nhtml[data-dsg='on'][data-windows-titlebar] [data-slot='root'] > [class*='_frame']::before {\r\n background-color: var(--dsg-titlebar-solid) !important;\r\n background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 60%) !important;\r\n border-bottom: 0.5px solid rgba(56, 88, 158, 0.06) !important;\r\n -webkit-backdrop-filter: none !important;\r\n backdrop-filter: none !important;\r\n}\r\n/* 原生条上不再挂霜（大面 blur 无收益，且会与 native overlay 抢层） */\r\nhtml[data-dsg='on'][data-windows-titlebar] [data-slot='root'] > [class*='_frame']::after {\r\n content: none !important;\r\n -webkit-backdrop-filter: none !important;\r\n backdrop-filter: none !important;\r\n}\r\n\r\n/* 3) 菜单条：\r\n · 宿主 div[data-windows-menu] 保持完全透明，与标题栏背景同色；\r\n · 不再自绘左侧图标 —— 标题栏左侧 12px 处是 DSH 自带的「侧栏收起/展开」按钮\r\n （collapsed 时 48px 处还有「新会话」按钮），自绘图标会与之重叠；\r\n · 菜单起点只在「侧栏展开」时右移到 54px（给 native toggle 留位）；\r\n 收起时交回 DSH 的 84px，避开左侧两个 28px 按钮。 */\r\nhtml[data-dsg='on'][data-windows-titlebar]:not(:has([data-sidebar-collapsed='true'])) {\r\n --dsh-windows-menu-start: 54px;\r\n}\r\nhtml[data-dsg='on'][data-windows-titlebar] div[data-windows-menu] {\r\n background: transparent !important;\r\n background-color: transparent !important;\r\n box-shadow: none !important;\r\n color: var(--dsw-alias-label-secondary);\r\n}\n\n/* ===== 20-sidebar.css ===== */\n/* ============================================================================\n dsh-skin-mistblue · 20 sidebar — 左栏（品牌 / 新会话 / 面板列表 / 工作区会话树 / footer）\n Owner: shell-dev.\n\n 玻璃策略（GLASS-SPEC §5 #131 / SURFACE-MAP §8）：\n · 左栏列 = `div:has(> [data-slot=\"sidebar\"])`；模糊挂列的 ::before，列自身\n `position:relative; z-index:0`。宿主在 Windows 下把「收起/展开」与「收起态新会话」\n 两个按钮写成 position:fixed，挂列上会让它们改锚、被裁掉。\n · 列 = L2 玻璃（fill-l2 + backdrop-l2 + sheen + 右缘发丝/内阴影）。\n · 内层 [data-slot=\"sidebar\"] 是 display:contents 锚点（不生成盒子），真正的内容根\n `._2H3hWW_root` 自带 sidebar-fill 实底 —— 必须清掉，否则列上叠两层地板。\n · 行级只做 hover/selected 的柔光，不单独挂霜（“one blur per shell”）。\n ========================================================================== */\n\n/* ---- 1. 左栏列：L2 玻璃 ------------------------------------------------ */\nhtml[data-dsg='on'] div:has(> [data-slot='sidebar']) {\n position: relative;\n z-index: 0;\n background: transparent !important;\n /* 玻璃边界：发丝线画在元素边框上（::before 的 inset:0 不会盖住 border） */\n border-right: 0.5px solid var(--dsg-border-hair) !important;\n}\nhtml[data-dsg='on'] body[data-ds-dark-theme] div:has(> [data-slot='sidebar']) {\n border-right-color: rgba(150, 180, 255, 0.14) !important;\n}\nhtml[data-dsg='on'] div:has(> [data-slot='sidebar'])::before {\n content: '';\n position: absolute;\n inset: 0;\n z-index: -1;\n pointer-events: none;\n /* Slightly blue-tinted glass: a pure-white fill next to the #eaf1fb titlebar and\n the airy conversation atmosphere read as a hard paper slab. 10% of the titlebar\n hue keeps the column in the same family without dulling text. */\n background-color: color-mix(in srgb, var(--dsg-fill-l2) 86%, #dfeafd 14%);\n /* Top fade: the window titlebar (solid #eaf1fb across the full width) meets the\n sidebar directly under it, so carry that tone ~150px down and let it dissolve\n into the glass — a gradient instead of a visible horizontal seam. */\n background-image:\n linear-gradient(180deg,\n #eaf1fb 0px,\n rgba(234, 241, 251, 0.55) 56px,\n rgba(234, 241, 251, 0) 176px),\n var(--dsg-sheen-l2);\n /* 内侧白光 + 柔和内投影：挂在 ::before 上才会画在填充层之上 */\n box-shadow:\n inset -1px 0 0 rgba(255, 255, 255, 0.36),\n inset -26px 0 30px -30px rgba(44, 74, 140, 0.28);\n -webkit-backdrop-filter: var(--dsg-backdrop-l2);\n backdrop-filter: var(--dsg-backdrop-l2);\n}\nhtml[data-dsg='on'] body[data-ds-dark-theme] div:has(> [data-slot='sidebar'])::before {\n background-color: color-mix(in srgb, var(--dsg-fill-l2) 88%, #16304f 12%);\n background-image:\n linear-gradient(180deg,\n #0b1322 0px,\n rgba(11, 19, 34, 0.5) 56px,\n rgba(11, 19, 34, 0) 176px),\n var(--dsg-sheen-l2);\n box-shadow:\n inset -1px 0 0 rgba(255, 255, 255, 0.06),\n inset -26px 0 30px -30px rgba(0, 0, 0, 0.5);\n}\n/* 右侧玻璃厚度：一条很窄的纵向高光，让左栏从背景里“立”起来 */\nhtml[data-dsg='on'] div:has(> [data-slot='sidebar'])::after {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n width: 14px;\n z-index: -1;\n pointer-events: none;\n background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.28) 100%);\n}\nhtml[data-dsg='on'] body[data-ds-dark-theme] div:has(> [data-slot='sidebar'])::after {\n background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.06) 100%);\n}\nhtml[data-dsg='on'] body[data-ds-dark-theme] [data-slot='sidebar'] [class*='_searchExpanded'] {\n box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;\n}\n/* 内容根：清掉宿主的 sidebar-fill，避免二次铺底 */\nhtml[data-dsg='on'] [data-slot='sidebar'] > [class*='_root'] {\n background: transparent !important;\n color: var(--dsw-alias-label-primary);\n --dsh-sidebar-inline-padding: 12px;\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] > [class*='_root']::before,\nhtml[data-dsg='on'] [data-slot='sidebar'] > [class*='_root']::after {\n background: transparent !important;\n}\n\n/* ---- 2. 品牌行 ---------------------------------------------------------- */\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_logoRow'] {\n gap: 6px;\n padding-left: 6px;\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_brand'] {\n border-radius: 10px;\n transition: opacity 160ms var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_brand']:hover {\n opacity: 0.85;\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_brandName'] {\n letter-spacing: 0.05em;\n font-weight: 600;\n font-size: 17px;\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_iconButton'] {\n border-radius: 9px;\n color: var(--dsw-alias-label-tertiary);\n transition: background-color 140ms var(--dsg-ease), color 140ms var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_iconButton']:hover {\n background: var(--dsg-row-hover);\n color: var(--dsw-alias-label-secondary);\n}\n\n/* ---- 3. 新会话：DeepSeek 白釉胶囊（蓝色 + 号 + hover 抬升）---------------- */\nhtml[data-dsg='on'] [data-slot='sidebar'] button[class*='_newSession'] {\n height: 38px;\n margin: 0 2px 12px;\n border-radius: 12px;\n border: 0.5px solid var(--dsg-hairline-soft);\n /* A flat white capsule on a near-white column disappears; a soft vertical\n gradient + a slightly stronger hairline keeps it a distinct glass chip that\n still melts into the tinted sidebar top. */\n background:\n linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.36)) !important;\n color: var(--dsw-alias-label-primary);\n font-size: 13.5px;\n font-weight: 500;\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.6),\n 0 1px 2px rgba(23, 42, 84, 0.05);\n transition:\n background-color 160ms var(--dsg-ease),\n box-shadow 160ms var(--dsg-ease),\n transform 160ms var(--dsg-ease),\n border-color 160ms var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] button[class*='_newSession']:hover {\n background:\n linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.52)) !important;\n border-color: rgba(77, 107, 254, 0.22);\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.65),\n 0 4px 12px -2px rgba(23, 42, 84, 0.14),\n 0 1px 2px rgba(23, 42, 84, 0.06);\n transform: translateY(-1px);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] button[class*='_newSession']:active {\n transform: translateY(0) scale(0.99);\n}\n/* + 号用品牌蓝，文字保持墨色 */\nhtml[data-dsg='on'] [data-slot='sidebar'] button[class*='_newSession'] [class*='_newSessionContent'] > svg {\n color: var(--dsg-blue);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] button[class*='_newSession'] [class*='_newSessionShortcut'] {\n color: var(--dsw-alias-label-caption);\n opacity: 0.8;\n}\n\n/* ---- 4. 全局面板列表（上下文洞察 / 插件 / 自动化 / 技能 / MCP）------------ */\nhtml[data-dsg='on'] [data-slot='sidebar'] nav[class*='_panelList'] {\n gap: 2px;\n margin-bottom: 10px;\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] nav[class*='_panelList'] button {\n min-height: 36px;\n height: 36px;\n padding: 0 10px;\n gap: 10px;\n border-radius: 10px;\n color: var(--dsw-alias-label-secondary);\n font-size: 13.5px;\n font-weight: 500;\n transition: background-color 140ms var(--dsg-ease), color 140ms var(--dsg-ease),\n box-shadow 140ms var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] nav[class*='_panelList'] button [class*='_panelGlyph'] {\n color: var(--dsw-alias-label-tertiary);\n transition: color 140ms var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] nav[class*='_panelList'] button:hover {\n background: var(--dsg-row-hover);\n color: var(--dsw-alias-label-primary);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] nav[class*='_panelList'] button:hover [class*='_panelGlyph'] {\n color: var(--dsg-blue);\n}\n/* 选中：蓝色柔光胶囊（不是实心块） */\nhtml[data-dsg='on'] [data-slot='sidebar'] nav[class*='_panelList'] button[class*='_panelActive'] {\n background: var(--dsg-row-active);\n color: var(--dsg-row-active-ink);\n box-shadow: inset 0 0 0 0.5px rgba(77, 107, 254, 0.16);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] nav[class*='_panelList'] button[class*='_panelActive'] [class*='_panelGlyph'] {\n color: var(--dsg-blue);\n}\n\n/* ---- 5. 工作区 / 会话树 ------------------------------------------------- */\n/* section header：工作区标签 + 搜索 + 视图按钮 */\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_sectionHeader'] {\n height: 34px;\n margin-top: 6px;\n margin-bottom: 2px;\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_sectionLabel'] {\n color: var(--dsw-alias-label-tertiary);\n font-size: 12px;\n font-weight: 600;\n letter-spacing: 0.04em;\n}\n/* 搜索：默认只是一枚图标；展开后是胶囊玻璃 + 蓝色 focus ring */\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_search'] {\n border-radius: 10px;\n transition: background-color 160ms var(--dsg-ease), box-shadow 160ms var(--dsg-ease),\n border-color 160ms var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_searchExpanded'] {\n background: var(--dsg-capsule) !important;\n border: 0.5px solid var(--dsg-hairline-soft) !important;\n border-radius: 10px;\n box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_searchExpanded']:focus-within {\n border-color: rgba(77, 107, 254, 0.55) !important;\n box-shadow: 0 0 0 2px var(--dsg-blue-ring);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_searchInput'] {\n font-size: 12.5px;\n color: var(--dsw-alias-label-primary);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_searchInput']::placeholder {\n color: var(--dsw-alias-label-caption);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_searchButton']:hover,\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_clearButton']:hover {\n background: var(--dsg-row-hover);\n border-radius: 8px;\n}\n/* 行：圆角柔光，不铺底 */\nhtml[data-dsg='on'] [data-slot='sidebar'] [role='treeitem'] {\n border-radius: 10px;\n color: var(--dsw-alias-label-secondary);\n transition: background-color 130ms var(--dsg-ease), color 130ms var(--dsg-ease),\n box-shadow 130ms var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [role='treeitem']:hover {\n background: var(--dsg-row-hover) !important;\n color: var(--dsw-alias-label-primary);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [role='treeitem'][aria-selected='true'] {\n background: var(--dsg-row-active) !important;\n color: var(--dsw-alias-label-primary);\n box-shadow: inset 0 0 0 0.5px rgba(77, 107, 254, 0.14);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [role='treeitem'] [class*='_title'] {\n font-size: 13.5px;\n line-height: 20px;\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [role='treeitem'] [class*='_time'] {\n color: var(--dsw-alias-label-caption);\n font-size: 10.5px;\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_projectRow'] {\n height: 32px;\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_projectText'] [class*='_title'] {\n font-weight: 500;\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_folderActive'] {\n color: var(--dsg-blue);\n}\n/* hover 才出现的行内操作按钮 */\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_rowActions'] [class*='_iconButton'] {\n border-radius: 7px;\n color: var(--dsw-alias-label-tertiary);\n transition: background-color 120ms var(--dsg-ease), color 120ms var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_rowActions'] [class*='_iconButton']:hover {\n background: rgba(77, 107, 254, 0.1);\n color: var(--dsg-blue);\n}\n/* 列表底部渐隐：跟随 L2 玻璃色（宿主的 sidebar-fill 现在是 L1，会对不上） */\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_fade'] {\n background: linear-gradient(to bottom, transparent, var(--dsg-fill-l2)) !important;\n}\n/* 会话溢出行（+N 更多） */\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_sessionOverflowButton'] {\n border-radius: 8px;\n color: var(--dsw-alias-label-tertiary);\n transition: color 120ms var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_sessionOverflowButton']:hover {\n color: var(--dsg-blue);\n}\n\n/* ---- 6. footer：设置入口 / 用户区 / 新版本 ------------------------------- */\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_footArea'] {\n gap: 2px;\n margin-top: 6px;\n padding-top: 8px;\n padding-bottom: 4px;\n border-top: 0.5px solid var(--dsg-hairline-soft);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_footArea'] button {\n border-radius: 10px;\n color: var(--dsw-alias-label-secondary);\n transition: background-color 140ms var(--dsg-ease), color 140ms var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_footArea'] button:hover {\n background: var(--dsg-row-hover);\n color: var(--dsw-alias-label-primary);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [data-slot='sidebar.settings'] button {\n min-height: 38px;\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_footArea'] [class*='_avatar'] {\n border-radius: 999px;\n box-shadow: inset 0 0 0 0.5px var(--dsg-hairline-soft);\n}\n/* 「新版本」小胶囊：品牌蓝弱底 */\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_indicator'] {\n height: 26px;\n border-radius: 999px;\n border: 0.5px solid rgba(77, 107, 254, 0.22);\n background: var(--dsg-blue-soft);\n color: var(--dsg-blue);\n font-size: 11.5px;\n font-weight: 500;\n transition: background-color 140ms var(--dsg-ease), transform 140ms var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-slot='sidebar'] [class*='_indicator']:hover {\n background: rgba(77, 107, 254, 0.18);\n transform: translateY(-1px);\n}\n\n/* ---- 7. 收起态（56px rail）：不要胶囊化，也不叠底 ---------------------- */\n/* 收起态两个 28×28 的标题栏按钮（展开/折叠 + 新建会话）由宿主用 position:fixed\n 钉在原生标题栏里；这里必须把几何完全交回宿主（28×28、无 margin/内边距），\n 只统一“材质”—— 否则基础规则的 38px 高/12px 圆角/品牌蓝图标会把 + 号顶歪。*/\nhtml[data-dsg='on'] [data-sidebar-collapsed] [data-slot='sidebar'] button[class*='_newSession'] {\n width: 28px !important;\n height: 28px !important;\n min-width: 28px !important;\n min-height: 28px !important;\n margin: 0 !important;\n padding: 0 !important;\n border: none !important;\n border-radius: 8px !important;\n background: transparent !important;\n box-shadow: none !important;\n transform: none !important;\n color: var(--dsw-alias-label-secondary) !important;\n}\nhtml[data-dsg='on'] [data-sidebar-collapsed] [data-slot='sidebar'] button[class*='_newSession'] [class*='_newSessionContent'] {\n padding: 0 !important;\n gap: 0 !important;\n justify-content: center !important;\n}\n/* 收起态的 + 号回到中性墨色（品牌蓝只留给展开态的主 CTA），并与 panel 图标同尺寸 */\nhtml[data-dsg='on'] [data-sidebar-collapsed] [data-slot='sidebar'] button[class*='_newSession'] [class*='_newSessionContent'] > svg {\n color: var(--dsw-alias-label-secondary) !important;\n width: 16px !important;\n height: 16px !important;\n}\nhtml[data-dsg='on'] [data-sidebar-collapsed] [data-slot='sidebar'] button[class*='_newSession']:hover {\n background: var(--dsg-row-hover) !important;\n color: var(--dsw-alias-label-primary) !important;\n}\nhtml[data-dsg='on'] [data-sidebar-collapsed] [data-slot='sidebar'] button[class*='_newSession']:hover [class*='_newSessionContent'] > svg {\n color: var(--dsw-alias-label-primary) !important;\n}\n/* 收起按钮右上角是「桌面更新」徽标（6px 品牌蓝圆点）；收起态只需要一个干净的\n panel 图标 —— 更新提示仍保留在展开态 footer 的「新版本」胶囊里。 */\nhtml[data-dsg='on'] [data-sidebar-collapsed] [data-slot='sidebar'] button[class*='_toggle'] [class*='_badge'] {\n display: none !important;\n}\nhtml[data-dsg='on'] [data-sidebar-collapsed] [data-slot='sidebar'] [class*='_panelList'] {\n gap: 8px;\n}\nhtml[data-dsg='on'] [data-sidebar-collapsed] [data-slot='sidebar'] [class*='_panelRow'] {\n border-radius: 12px;\n background: transparent;\n}\nhtml[data-dsg='on'] [data-sidebar-collapsed] [data-slot='sidebar'] [class*='_panelRow']:hover {\n background: var(--dsg-row-hover);\n}\nhtml[data-dsg='on'] [data-sidebar-collapsed] [data-slot='sidebar'] [class*='_footArea'] {\n border-top: none;\n}\n\n/* ---- 8. 深色：蓝色柔光再压一档，避免发灰 -------------------------------- */\nhtml[data-dsg='on'] body[data-ds-dark-theme] [data-slot='sidebar'] nav[class*='_panelList'] button[class*='_panelActive'] {\n box-shadow: inset 0 0 0 0.5px rgba(123, 147, 255, 0.22);\n}\nhtml[data-dsg='on'] body[data-ds-dark-theme] [data-slot='sidebar'] button[class*='_newSession'] {\n background:\n linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04)) !important;\n border-color: rgba(150, 180, 255, 0.16);\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.14),\n 0 1px 2px rgba(0, 0, 0, 0.35);\n}\nhtml[data-dsg='on'] body[data-ds-dark-theme] [data-slot='sidebar'] button[class*='_newSession']:hover {\n background:\n linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07)) !important;\n border-color: rgba(150, 180, 255, 0.28);\n}\n\n/* ===== 21-collapsed-titlebar.css ===== */\n/* 收起态（标题栏里的 rail 按钮）的 tooltip 修复 ---------------------------------\n Windows 标题栏里「展开/折叠」与「新建会话」两个按钮在收起态是 position:fixed、\n 位于侧栏列内；它们的 tooltip 因此落在侧栏列的层叠上下文里。悬浮 header 现在是\n 一条带霜的玻璃条，会盖住 tooltip 并把它染成一块灰黑\"阴影\"（用户看到的\"黑色阴影\"）。\n 这里只在 tooltip 真的挂载时把 rail 提到 header 之上，让 tooltip 正常浮在下拉层，\n 不影响静止态层次。 */\nhtml[data-dsg='on'][data-windows-titlebar] div:has(> [data-slot='sidebar']):has([role='tooltip']) {\n z-index: 120;\n}\n\n/* ===== 22-drag-smooth.css ===== */\n/* ============================================================================\n dsh-skin-mistblue · 22 drag smooth (v1.13)\n ----------------------------------------------------------------------------\n Splitter drags drive pane width with a React state update per pointermove; the\n dockkit shell also keeps `transition: transform var(--ds-transition-duration-slow)`\n armed while open. That combination is what makes panes feel heavy and land\n early/late. Instead of fighting the host's pointer stream we keep the pointer\n behaviour untouched and simply:\n · start the expensive-material fallback on pointerdown (see client guard),\n · stop *all* geometry animation on the moving full-height columns for the\n duration of any pointer drag — each per-pointermove state update already\n lands on the pointer, so a 1:1 follow can never teleport the layout and\n does not need an interpolation layer,\n · (opt-in) on a *real* splitter drag re-arm a short linear width chase,\n · drop scroll anchoring so reflow never scroll-compensates mid-drag.\n\n v1.13 — why the old `will-change: width` + width/transform transition is gone\n (`div:has(> [data-slot='sidebar'])` and `[data-sidebar-right-panel]` are\n full-window-height columns; the sidebar column paints its right edge as a\n 0.5px hairline + inset sheen, the panel its left edge as inset hairlines):\n 1. `will-change: width` tells the compositor to pre-promote such a\n full-height column into its own rasterised layer. The column's painted\n edge then becomes the edge of that layer; the compositor snaps layer\n edges to whole device pixels, so on fractional DPR (125% / 150%) a\n ~1 device-px strip of the atmosphere/backdrop shows through the column\n edge → the faint vertical seam.\n 2. A `width` and `transform` transition then keeps moving that layer\n boundary over fractional device-pixel offsets every frame, and the\n 0.5px hairline is repainted at alternating sub-pixel offsets → the seam\n reads as a dashed/dotted ghost line instead of a clean edge.\n 3. It only exists while `data-dsg-resizing` is set, because those are the\n only frames where the layer/transition is armed — exactly the reported\n symptom (line appears during drag / text selection, vanishes on release).\n 4. Text selection reproduces it because the client guard arms on ANY 4px\n pointer drag, not only on splitters. During selection the column width\n never changes, so the *only* rule with a visual effect there was\n `will-change` — removing it alone kills the seam for selection.\n Keeping the column out of its own layer (no will-change, no transform/width\n transition on the generic path) means its edge is painted in the same layer\n as the parent/backdrop, i.e. the parent always paints underneath it, so a\n fractional pixel can never expose a gap. See rules 2 and 3.\n ========================================================================== */\n\n/* ---- 1. 拖动期间：dockkit 每个壳层的高成本过渡/动画一律停 ------------------\n （过渡本身不合成，安全；这里只是别让壳层动画继续逐帧重排。） */\nhtml[data-dsg='on'][data-dsg-resizing] [data-dockkit-host],\nhtml[data-dsg='on'][data-dsg-resizing] [data-dockkit-empty],\nhtml[data-dsg='on'][data-dsg-resizing] [data-dockkit-divider],\nhtml[data-dsg='on'][data-dsg-resizing] [data-dockkit-split],\nhtml[data-dsg='on'][data-dsg-resizing] [data-dockkit-cell],\nhtml[data-dsg='on'][data-dsg-resizing] [data-dockkit-pane],\nhtml[data-dsg='on'][data-dsg-resizing] [data-dockkit-surface] {\n transition: none !important;\n animation: none !important;\n}\n\n/* ---- 2. 全高列：任何拖动（含误触的文字选择）期间禁止几何过渡与合成提升 ----\n · transition: none → 列宽（以及任何 transform）不再被插值，边缘只在布局\n 真正变化时移动，拖动/选择期间不会出现「亚像素边缘逐帧重绘」的虚线；\n · will-change: auto !important → 同时压掉宿主行内写在列上的 will-change\n （行内普通声明压不过带 !important 的作者样式），确保列不会被预先提升成\n 独立合成层，从而没有可被吸附的层边缘 = 不会漏出 1px 接缝；\n · `[data-slot='sidebar']` 本身是 display:contents 锚点（无盒子，见\n 20-sidebar.css），对它写 transition/will-change 没有任何效果，故移出选择器。 */\nhtml[data-dsg='on'][data-dsg-resizing] [data-sidebar-right-panel],\nhtml[data-dsg='on'][data-dsg-resizing] div:has(> [data-slot='sidebar']) {\n transition: none !important;\n will-change: auto !important;\n}\n\n/* ---- 3. 真·拖动分隔条：可选的有界线性跟随（需要 client 打标） --------------\n 默认（属性不存在）就是规则 2 的 1:1 跟随；只有 client 在确实按住分隔条\n （pointerdown 命中 `[data-dockkit-divider]`）时同时打上\n html[data-dsg-dragging-divider]，拖动结束（pointerup/cancel/blur）移除，\n 才启用这段 90ms 的宽度追赶。\n 安全边界：这里只过渡 width——\n · 不做 transform 过渡：transform 过渡会把整列抬成合成层，正是接缝成因；\n · 不加 will-change：列留在父级 paint layer 里，宽度动画走布局+重绘，\n 列边缘与父级/背景同层连续绘制，没有可被设备像素吸附的层边缘。\n 若实机验收不需要这段追赶，保持属性不设置即可（规则 2 已是完整修复）。 */\nhtml[data-dsg='on'][data-dsg-resizing][data-dsg-dragging-divider] [data-sidebar-right-panel]:not([aria-hidden='true']),\nhtml[data-dsg='on'][data-dsg-resizing][data-dsg-dragging-divider] div:has(> [data-slot='sidebar']) {\n transition: width 90ms linear !important;\n will-change: auto !important;\n}\n\n/* ---- 4. 拖动时取消滚动锚定，避免 reflow 触发滚动补偿 ----------------------- */\nhtml[data-dsg='on'][data-dsg-resizing] [data-conversation-region='chat'],\nhtml[data-dsg='on'][data-dsg-resizing] [data-chat-flow] {\n overflow-anchor: none;\n scroll-behavior: auto;\n}\n\n/* ---- 5. 分隔条命中区：col-resize 光标 + 禁止触摸滚动 ----------------------- */\nhtml[data-dsg='on'][data-dsg-resizing] [data-dockkit-divider] {\n cursor: col-resize;\n touch-action: none;\n}\n\n/* ===== 23-panel-reorder.css ===== */\n/* ============================================================================\n dsh-skin-mistblue · 23 panel reorder (v1.14)\n ----------------------------------------------------------------------------\n Left sidebar panel list (插件 / 上下文洞察 / MCP 连接器 …) gets two behaviours\n from `initSidebarEnhancer`:\n · HTML5 drag & drop to reorder — rows become draggable, drop writes per-row\n CSS `order` (no DOM moves) and persists the label order in localStorage;\n · clicking the already-open row returns to the Conversation via the layout\n service (`layout.selectPanel(null)`).\n Native DnD is used on purpose: pointer-event heuristics conflict with the\n host tooltip/click handlers, while dragstart/dragover/drop never fire a click.\n ========================================================================== */\n\nhtml[data-dsg='on'] nav[class*='_panelList'] > button[class*='_panelRow'] {\n cursor: grab;\n -webkit-user-drag: element;\n}\n\nhtml[data-dsg='on'] nav[class*='_panelList'] {\n user-select: none;\n -webkit-user-select: none;\n}\n\nhtml[data-dsg='on'] nav[class*='_panelList'] > button[class*='_panelRow']:active {\n cursor: grabbing;\n}\n\nhtml[data-dsg='on'] nav[class*='_panelList'] > button[class*='_panelRow'].dsg-panel-row-drag {\n opacity: 0.55;\n}\n\nhtml[data-dsg='on'] nav[class*='_panelList'] > button[class*='_panelRow'].dsg-panel-row-drop {\n background-color: var(--dsg-row-hover) !important;\n box-shadow:\n inset 0 0 0 1.5px rgba(77, 107, 254, 0.5),\n 0 6px 18px -10px rgba(23, 48, 108, 0.35);\n}\n\nhtml[data-dsg='on'] body[data-ds-dark-theme]\n nav[class*='_panelList'] > button[class*='_panelRow'].dsg-panel-row-drop {\n box-shadow:\n inset 0 0 0 1.5px rgba(123, 147, 255, 0.55),\n 0 8px 20px -12px rgba(0, 0, 0, 0.6);\n}\n\n/* ===== 30-composer.css ===== */\n/* ============================================================================\n dsh-skin-mistblue · 30 composer — 输入座位 / 输入卡 / 工具行 / 发送键 / dock 胶囊 / goal bar\n Owner: shell-dev.\n\n 硬约束（UI-CONTRACT §3 / GLASS-SPEC §5 #89）：\n · [data-composer-seat] 不铺底、不挂霜（内部有外部插件塞进来的 position:fixed 座位）。\n · [data-composer-card] 本体 backdrop-filter:none；霜只挂 ::before（伪元素无后代，\n 永不成为 fixed 包含块）。\n · 卡片自身的 background / sheen / bevel 画在本体上 —— 它比 ::before 的负 z-index\n 后绘制，所以霜在“填充层之下”，高光是锐的。\n ========================================================================== */\n\n/* ---- 1. 座位：纯容器，不铺底不挂霜 -------------------------------------- */\nhtml[data-dsg='on'] [data-composer-seat],\nhtml[data-dsg='on'] [data-conversation-region='composer'] {\n background: none !important;\n -webkit-backdrop-filter: none !important;\n backdrop-filter: none !important;\n box-shadow: none;\n}\n/* composer 区域宽度：DeepSeek 参考图口径 732–760，不跟 chat 列一起收窄；\n dock / goal bar 读同一个变量，保持左右对齐（Lead 口径 min(760px, 100% - 48px)）。 */\nhtml[data-dsg='on'] [data-conversation-region='chat'] {\n --dsh-composer-card-max-width: min(calc(100% - 48px), 760px);\n}\nhtml[data-dsg='on'] [data-goal-bar] [class*='_bar'] {\n max-width: var(--dsh-composer-card-max-width) !important;\n}\n\n/* ---- 2. 输入卡：L2 玻璃，radius 28 ------------------------------------- */\nhtml[data-dsg='on'] [data-composer-card] {\n border-radius: var(--dsg-radius-composer) !important;\n border: 0 !important;\n background: var(--dsg-fill-l2) !important;\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.55),\n inset 0 -1px 0 rgba(255, 255, 255, 0.1),\n inset 0 0 0 0.5px rgba(255, 255, 255, 0.22),\n 0 18px 44px -18px rgba(44, 74, 140, 0.28),\n 0 2px 8px rgba(44, 74, 140, 0.06);\n -webkit-backdrop-filter: none !important;\n backdrop-filter: none !important;\n transition: box-shadow 200ms var(--dsg-ease);\n}\nhtml[data-dsg='on'] body[data-ds-dark-theme] [data-composer-card] {\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.14),\n inset 0 -1px 0 rgba(255, 255, 255, 0.05),\n inset 0 0 0 0.5px rgba(255, 255, 255, 0.1),\n 0 18px 44px -18px rgba(0, 0, 0, 0.55),\n 0 2px 8px rgba(0, 0, 0, 0.25);\n}\n/* 霜：唯一载体 */\nhtml[data-dsg='on'] [data-composer-card]::before {\n content: '';\n position: absolute;\n inset: 0;\n z-index: -1;\n border-radius: inherit;\n pointer-events: none;\n -webkit-backdrop-filter: var(--dsg-backdrop-l2);\n backdrop-filter: var(--dsg-backdrop-l2);\n}\n/* focus：不要过亮，只加一圈品牌蓝柔光 */\nhtml[data-dsg='on'] [data-composer-card]:focus-within {\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.6),\n inset 0 -1px 0 rgba(255, 255, 255, 0.1),\n inset 0 0 0 0.5px rgba(255, 255, 255, 0.24),\n 0 0 0 2px rgba(77, 107, 254, 0.28),\n 0 18px 48px -18px rgba(44, 74, 140, 0.3);\n}\n\n/* ---- 3. 输入文字 / placeholder ----------------------------------------- */\nhtml[data-dsg='on'] [data-composer-card] [class*='_input'] {\n font-size: 15px !important;\n line-height: 25px !important;\n min-height: 40px;\n padding: 6px 10px 0 14px !important;\n color: var(--dsw-alias-label-primary);\n caret-color: var(--dsg-blue);\n}\nhtml[data-dsg='on'] [data-composer-card] [class*='_placeholder'] {\n top: 6px !important;\n left: 14px !important;\n right: 10px !important;\n font-size: 15px !important;\n line-height: 25px;\n color: var(--dsw-alias-label-caption) !important;\n}\nhtml[data-dsg='on'] [data-composer-card] [class*='_row'] {\n gap: 10px;\n padding: 2px 8px 7px !important;\n}\n\n/* ---- 4. 工具行：+ / 权限 / 模型 胶囊化 ---------------------------------- */\n/* + 号：白釉圆钮 */\nhtml[data-dsg='on'] [data-composer-card] button[class*='_add'] {\n width: 30px;\n height: 30px;\n border-radius: 999px;\n border: 0.5px solid var(--dsg-hairline-soft);\n background: var(--dsg-capsule) !important;\n color: var(--dsw-alias-label-secondary);\n box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 2px rgba(23, 42, 84, 0.05);\n transition: background-color 140ms var(--dsg-ease), color 140ms var(--dsg-ease),\n transform 140ms var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-composer-card] button[class*='_add']:hover:not(:disabled) {\n background: var(--dsg-capsule-hover) !important;\n color: var(--dsw-alias-label-primary);\n transform: translateY(-1px);\n}\n/* 权限选择器 */\nhtml[data-dsg='on'] [data-slot='conversation.input.permission'] button {\n height: 28px;\n padding: 0 9px 0 8px;\n gap: 5px;\n border-radius: 999px;\n color: var(--dsw-alias-label-secondary);\n font-size: 12.5px;\n font-weight: 500;\n background: var(--dsg-capsule);\n border: 0.5px solid var(--dsg-hairline-soft);\n transition: background-color 140ms var(--dsg-ease), color 140ms var(--dsg-ease),\n border-color 140ms var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-slot='conversation.input.permission'] button:hover:not(:disabled) {\n background: var(--dsg-capsule-hover);\n border-color: rgba(77, 107, 254, 0.2);\n color: var(--dsw-alias-label-primary);\n}\nhtml[data-dsg='on'] [data-slot='conversation.input.permission'] button [class*='_triggerIcon'] {\n color: var(--dsw-alias-label-tertiary);\n}\n/* 模型选择器：胶囊 + 1017 蓝标 + High 弱化 */\nhtml[data-dsg='on'] [data-slot='conversation.input.model'] button {\n height: 28px;\n padding: 0 10px 0 9px;\n gap: 5px;\n border-radius: 999px;\n background: var(--dsg-capsule);\n border: 0.5px solid var(--dsg-hairline-soft);\n color: var(--dsw-alias-label-secondary);\n font-size: 12.5px;\n font-weight: 500;\n transition: background-color 140ms var(--dsg-ease), color 140ms var(--dsg-ease),\n border-color 140ms var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-slot='conversation.input.model'] button:hover:not(:disabled),\nhtml[data-dsg='on'] [data-slot='conversation.input.model'] button[aria-expanded='true'] {\n background: var(--dsg-capsule-hover);\n border-color: rgba(77, 107, 254, 0.2);\n color: var(--dsw-alias-label-primary);\n}\nhtml[data-dsg='on'] [data-slot='conversation.input.model'] [data-tone='info'] {\n height: 16px;\n padding: 0 5px;\n border-radius: 5px;\n background: var(--dsg-blue-soft);\n color: var(--dsg-blue);\n font-size: 10px;\n font-weight: 600;\n line-height: 16px;\n}\nhtml[data-dsg='on'] [data-slot='conversation.input.model'] [class*='_triggerEffort'] {\n color: var(--dsw-alias-label-caption);\n font-weight: 400;\n}\nhtml[data-dsg='on'] [data-slot='conversation.input.model'] [class*='_chevron'] {\n color: var(--dsw-alias-label-caption);\n}\n\n/* ---- 5. 发送 / 停止：DeepSeek 蓝圆钮 ----------------------------------- */\nhtml[data-dsg='on'] [data-composer-card] button[class*='_primary'] {\n width: 34px;\n height: 34px;\n border-radius: 999px;\n background: var(--dsg-blue) !important;\n color: #fff;\n border: none;\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.26),\n 0 6px 18px -6px rgba(77, 107, 254, 0.55);\n transform: translateY(-1px);\n transition: background-color 140ms var(--dsg-ease), transform 140ms var(--dsg-ease),\n box-shadow 140ms var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-composer-card] button[class*='_primary']:hover:not(:disabled) {\n background: var(--dsg-blue-strong) !important;\n transform: translateY(-2px);\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.3),\n 0 10px 22px -6px rgba(77, 107, 254, 0.6);\n}\nhtml[data-dsg='on'] [data-composer-card] button[class*='_primary']:active:not(:disabled) {\n transform: translateY(0) scale(0.94);\n}\nhtml[data-dsg='on'] [data-composer-card] button[class*='_primary']:disabled {\n opacity: 1 !important;\n cursor: default;\n background: rgba(77, 107, 254, 0.3) !important;\n box-shadow: none;\n transform: none;\n color: rgba(255, 255, 255, 0.85);\n}\nhtml[data-dsg='on'] [data-composer-card] button[class*='_primary'] svg {\n width: 18px;\n height: 18px;\n}\n\n/* ---- 6. composer dock：统计 / 上下文占用 = 小胶囊 ----------------------- */\nhtml[data-dsg='on'] [data-composer-dock] {\n gap: 6px;\n padding-top: 4px;\n}\nhtml[data-dsg='on'] [data-composer-dock] [class*='_pill'],\nhtml[data-dsg='on'] [data-composer-dock] [class*='_trigger'] {\n height: 24px;\n padding: 0 9px;\n border-radius: 999px;\n background: var(--dsg-capsule);\n border: 0.5px solid var(--dsg-hairline-soft);\n color: var(--dsw-alias-label-tertiary);\n font-size: 11.5px;\n transition: background-color 140ms var(--dsg-ease), color 140ms var(--dsg-ease),\n border-color 140ms var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-composer-dock] [class*='_pill']:hover,\nhtml[data-dsg='on'] [data-composer-dock] [class*='_trigger']:hover,\nhtml[data-dsg='on'] [data-composer-dock] [class*='_pill'][aria-expanded='true'],\nhtml[data-dsg='on'] [data-composer-dock] [class*='_trigger'][aria-expanded='true'] {\n background: var(--dsg-capsule-hover);\n border-color: var(--dsg-hairline-soft);\n color: var(--dsw-alias-label-secondary);\n}\nhtml[data-dsg='on'] [data-composer-dock] [class*='_pill'] svg,\nhtml[data-dsg='on'] [data-composer-dock] [class*='_trigger'] svg {\n width: 13px;\n height: 13px;\n}\n\n/* ---- 7. goal bar：L2 + 蓝色强调 ---------------------------------------- */\nhtml[data-dsg='on'] [data-goal-bar] [class*='_bar'] {\n border-radius: 999px !important;\n height: 34px;\n isolation: auto; /* 宿主 isolate 会建 backdrop root，霜失效 */\n box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 6px 18px rgba(44, 74, 140, 0.08);\n}\nhtml[data-dsg='on'] [data-goal-bar] [class*='_bar']::before {\n background: var(--dsg-fill-l2);\n -webkit-backdrop-filter: var(--dsg-backdrop-l1);\n backdrop-filter: var(--dsg-backdrop-l1);\n}\nhtml[data-dsg='on'] body[data-ds-dark-theme] [data-goal-bar] [class*='_bar'] {\n box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 18px rgba(0, 0, 0, 0.3);\n}\nhtml[data-dsg='on'] [data-goal-bar] [class*='_goalGlyph'] {\n color: var(--dsg-blue);\n}\nhtml[data-dsg='on'] [data-goal-bar] [class*='_label'] {\n color: var(--dsw-alias-label-primary);\n font-weight: 600;\n}\nhtml[data-dsg='on'] [data-goal-bar] [class*='_objective'] {\n color: var(--dsw-alias-label-secondary);\n}\nhtml[data-dsg='on'] [data-goal-bar] [class*='_iconBtn'] {\n border-radius: 999px;\n transition: background-color 140ms var(--dsg-ease), color 140ms var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-goal-bar] [class*='_iconBtn']:hover {\n background: var(--dsg-row-hover);\n color: var(--dsw-alias-label-secondary);\n}\n/* ---- 8. 无霜降级：fill 已由 foundation 抬到近不透明，保持布局不变 -------- */\n@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {\n html[data-dsg='on'] [data-composer-card] {\n background: rgba(252, 253, 255, 0.94) !important;\n }\n html[data-dsg='on'] body[data-ds-dark-theme] [data-composer-card] {\n background: rgba(16, 26, 44, 0.96) !important;\n }\n}\n\n/* ===== 35-hero.css ===== */\n/* ============================================================================\n dsh-skin-mistblue · 35 hero — 空会话 Hero（品牌标记 / 大标题 / lede 位 / workspace 控件 / 输入卡）\n Owner: shell-dev.\n\n Hero 的真实结构（conversation 包 ConversationContent，phase=hero）：\n [data-phase=\"hero\"] .Dc7zOa_composerHero\n ├ HeroShell.root (Hqq-bq_root) → stack → headline(fish + titleGroup + previewBadge)\n ├ heroWorkspaceRow（workspace / agentPreset 控件）\n ├ dock 槽（goal / todo，空则 display:none）\n └ inputBar（[data-composer-card]，hero 变体）\n 宿主在 hero 态把 [data-conversation-scroll] 设成 justify-content:center，\n 所以整组天然垂直居中；这里只做排版、字距、间距与控件胶囊化，不铺任何底板\n （SURFACE-MAP §4.2：Hero 不铺底，避免与输入卡重复加雾）。\n ========================================================================== */\n\n/* ---- 1. 组内节奏：标题 → 控件 → 输入卡 --------------------------------- */\nhtml[data-dsg='on'] [data-phase='hero'] [class*='_composerHero'] {\n gap: 14px;\n padding-bottom: 34px;\n}\nhtml[data-dsg='on'] [data-phase='hero'] [class*='_composerHero'] > :first-child {\n margin-bottom: 6px;\n}\n\n/* ---- 2. Hero 标题：48px / 600 / 0.1em，东方气质的粗黑体 ---------------- */\nhtml[data-dsg='on'] [data-phase='hero'] [class*='_headline'] {\n font-size: clamp(38px, 4.4vw, 48px);\n line-height: 1.22;\n font-weight: 600;\n letter-spacing: 0.1em;\n color: var(--dsw-alias-label-primary);\n text-wrap: balance;\n justify-content: center;\n gap: 12px;\n}\n/* 字距是给正文标题的；品牌标记与「预览版」角标不吃字距 */\nhtml[data-dsg='on'] [data-phase='hero'] [class*='_titleGroup'] {\n gap: 0.28em;\n justify-content: center;\n}\nhtml[data-dsg='on'] [data-phase='hero'] [class*='_fishHitbox'],\nhtml[data-dsg='on'] [data-phase='hero'] [data-slot='conversation.hero.brand.mark'] {\n color: var(--dsg-blue);\n margin-right: 0.1em;\n}\nhtml[data-dsg='on'] [data-phase='hero'] [class*='_fishHitbox'] svg,\nhtml[data-dsg='on'] [data-phase='hero'] [data-slot='conversation.hero.brand.mark'] svg {\n width: 42px;\n height: 42px;\n color: var(--dsg-blue);\n}\n/* 「预览版」角标：品牌蓝弱底小胶囊 */\nhtml[data-dsg='on'] [data-phase='hero'] [class*='_previewBadge'] {\n padding: 1px 8px;\n margin-top: 8px;\n border-radius: 999px;\n border: 0.5px solid rgba(77, 107, 254, 0.2);\n background: var(--dsg-blue-soft);\n color: var(--dsg-blue);\n font-family: var(--dsw-font-family);\n font-size: 11px;\n font-weight: 500;\n line-height: 18px;\n letter-spacing: 0.02em;\n align-self: center;\n}\n\n/* ---- 3. workspace / preset 控件：居中胶囊 ------------------------------- */\nhtml[data-dsg='on'] [data-phase='hero'] [class*='_heroWorkspaceRow'] {\n justify-content: center;\n padding: 0 8px;\n margin-top: 0;\n gap: 8px;\n}\nhtml[data-dsg='on'] [data-phase='hero'] [class*='_heroWorkspaceRow'] button,\nhtml[data-dsg='on'] [data-phase='hero'] [class*='_heroOptions'] button,\nhtml[data-dsg='on'] [data-phase='hero'] [data-slot='conversation.hero.workspace'] button,\nhtml[data-dsg='on'] [data-phase='hero'] [data-slot='conversation.hero.agentPreset'] button {\n height: 30px;\n padding: 0 11px;\n gap: 6px;\n border-radius: 999px;\n border: 0.5px solid var(--dsg-hairline-soft);\n background: var(--dsg-capsule);\n color: var(--dsw-alias-label-secondary);\n font-size: 12.5px;\n font-weight: 500;\n transition: background-color 140ms var(--dsg-ease), color 140ms var(--dsg-ease),\n transform 140ms var(--dsg-ease), border-color 140ms var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-phase='hero'] [class*='_heroWorkspaceRow'] button:hover,\nhtml[data-dsg='on'] [data-phase='hero'] [class*='_heroOptions'] button:hover,\nhtml[data-dsg='on'] [data-phase='hero'] [data-slot='conversation.hero.workspace'] button:hover,\nhtml[data-dsg='on'] [data-phase='hero'] [data-slot='conversation.hero.agentPreset'] button:hover {\n background: var(--dsg-capsule-hover);\n border-color: rgba(77, 107, 254, 0.2);\n color: var(--dsw-alias-label-primary);\n transform: translateY(-1px);\n}\nhtml[data-dsg='on'] [data-phase='hero'] [class*='_heroWorkspaceRow'] svg {\n color: var(--dsw-alias-label-tertiary);\n}\n\n/* ---- 4. Hero 里的输入卡：更高的呼吸感（宽度固定 760，不被 hero 变体的双层 padding 吃掉）--- */\n/* hero 结构是 composerHero(+32 clearance) → RlGAzG_root(padding 16×2) → card，\n 若继续用 `calc(100% - 48px)` 会算出 760−48=712；这里用绝对 760（max-width 不强制宽度，\n 窄窗仍按 100% 收缩）。 */\nhtml[data-dsg='on'] [data-phase='hero'] {\n --dsh-composer-card-max-width: 760px;\n}\nhtml[data-dsg='on'] [data-phase='hero'] [data-composer-card] {\n border-radius: 28px;\n}\nhtml[data-dsg='on'] [data-phase='hero'] [data-composer-card] [class*='_input'] {\n min-height: 54px;\n padding-top: 10px !important;\n font-size: 15.5px !important;\n line-height: 26px !important;\n}\nhtml[data-dsg='on'] [data-phase='hero'] [data-composer-card] [class*='_placeholder'] {\n top: 10px !important;\n font-size: 15.5px !important;\n line-height: 26px;\n}\n/* hero 态 dock 为空时不留缝 */\nhtml[data-dsg='on'] [data-phase='hero'] [data-composer-dock]:empty {\n display: none;\n}\n\n/* ---- 5. 入场：轻微上浮（240ms，reduced-motion 由 foundation 收掉） ------ */\n@keyframes dsg-hero-rise {\n from {\n opacity: 0;\n transform: translateY(8px);\n }\n to {\n opacity: 1;\n transform: none;\n }\n}\nhtml[data-dsg='on'] [data-phase='hero'] [class*='_composerHero'] > * {\n animation: dsg-hero-rise 260ms var(--dsg-ease) both;\n}\nhtml[data-dsg='on'] [data-phase='hero'] [class*='_composerHero'] > :nth-child(2) {\n animation-delay: 60ms;\n}\nhtml[data-dsg='on'] [data-phase='hero'] [class*='_composerHero'] > :nth-child(3) {\n animation-delay: 110ms;\n}\nhtml[data-dsg='on'] [data-phase='hero'] [class*='_composerHero'] > :nth-child(4) {\n animation-delay: 150ms;\n}\nhtml[data-dsg='on'] [data-phase='hero'] [class*='_headline'] {\n animation: dsg-hero-rise 300ms var(--dsg-ease) both;\n}\n\n/* ---- 6. 深色：品牌蓝标记提亮 ------------------------------------------- */\nhtml[data-dsg='on'] body[data-ds-dark-theme] [data-phase='hero'] [class*='_fishHitbox'] svg,\nhtml[data-dsg='on'] body[data-ds-dark-theme] [data-phase='hero'] [data-slot='conversation.hero.brand.mark'] svg {\n color: #9fb4ff;\n}\n\n/* ===== 40-content.css ===== */\n/* ============================================================================\n dsh-skin-mistblue · 40 content surfaces (conversation, cards, code, tools)\n ----------------------------------------------------------------------------\n Tier map (docs/DESIGN-SPEC §7.4 + UI-CONTRACT §3):\n L1 content canvas / long tool output plates → fill-l1, no canvas blur\n L2 user bubbles, think trigger, tool rows, deliverable/plan cards\n L3 (owned by 50-overlays.css) dialogs, menus, question/plan/approval\n Hard rules honoured here:\n · every [class*=\"_bubble\"] rule carries :not([role=\"tooltip\"])\n · no backdrop-filter on scroll containers ([data-conversation-scroll])\n · code / logs / terminal / inline code keep a near-opaque plate\n · sticky carriers (code banner, reasoning header) are re-painted, because\n foundation made --dsw-alias-bg-base transparent\n ========================================================================== */\n\n/* ---- local high-opacity plates (readability floor for code/logs) --------- */\nhtml[data-dsg='on'] body {\n --dsg-code-solid: rgba(255, 255, 255, 0.86);\n --dsg-code-banner: rgba(255, 255, 255, 0.95);\n --dsg-code-inline: rgba(255, 255, 255, 0.88);\n --dsg-tool-plate: rgba(255, 255, 255, 0.8);\n --dsg-tool-plate-strong: rgba(255, 255, 255, 0.9);\n --dsg-row-capsule: color-mix(in srgb, var(--dsg-blue) 4%, var(--dsg-fill-l2));\n --dsg-row-capsule-hover: color-mix(in srgb, var(--dsg-blue) 8%, var(--dsg-fill-l2));\n}\nhtml[data-dsg='on'] body[data-ds-dark-theme] {\n --dsg-code-solid: rgba(18, 27, 45, 0.9);\n --dsg-code-banner: rgba(22, 32, 52, 0.96);\n --dsg-code-inline: rgba(24, 35, 56, 0.92);\n --dsg-tool-plate: rgba(17, 26, 43, 0.86);\n --dsg-tool-plate-strong: rgba(20, 30, 49, 0.94);\n --dsg-row-capsule: color-mix(in srgb, var(--dsg-blue) 12%, var(--dsg-fill-l2));\n --dsg-row-capsule-hover: color-mix(in srgb, var(--dsg-blue) 18%, var(--dsg-fill-l2));\n}\n\n/* ============================================================================\n 1. conversation flow rhythm\n ========================================================================== */\nhtml[data-dsg='on'] [data-chat-flow] {\n --dsh-chat-flow-gap: 10px;\n}\n/* slight breathing room after a user turn / before tool groups */\nhtml[data-dsg='on'] [data-chat-flow] > [data-chat-flow-kind='user'] {\n margin-bottom: 4px;\n}\nhtml[data-dsg='on'] [data-chat-flow] > [data-chat-flow-kind='turn-process'] {\n margin-top: 6px;\n}\n\n/* ============================================================================\n 2. user bubbles — L2 glass (soft blue-white), readable ink\n ========================================================================== */\nhtml[data-dsg='on'] [class*='_bubble']:not([role='tooltip']) {\n position: relative;\n background-color: color-mix(in srgb, var(--dsg-blue) 9%, var(--dsg-fill-l2));\n background-image: var(--dsg-sheen-l2);\n -webkit-backdrop-filter: var(--dsg-backdrop-l2);\n backdrop-filter: var(--dsg-backdrop-l2);\n border-radius: var(--dsg-radius-card);\n box-shadow:\n var(--dsg-bevel-l2),\n 0 0 0 0.5px rgba(77, 107, 254, 0.14);\n color: var(--dsw-alias-label-primary);\n line-height: 1.62;\n transition:\n box-shadow var(--dsg-motion-dur) var(--dsg-ease),\n background-color var(--dsg-motion-dur) var(--dsg-ease);\n}\nhtml[data-dsg='on'] [class*='_bubble']:not([role='tooltip']):hover {\n box-shadow:\n var(--dsg-bevel-l2),\n 0 0 0 0.5px rgba(77, 107, 254, 0.16);\n}\nhtml[data-dsg='on'] body[data-ds-dark-theme] [class*='_bubble']:not([role='tooltip']) {\n background-color: color-mix(in srgb, var(--dsg-blue) 12%, var(--dsg-fill-l2));\n box-shadow:\n var(--dsg-bevel-l2),\n 0 0 0 0.5px rgba(120, 150, 255, 0.16);\n}\n/* the assistant text column has no plate — it sits on the L1 canvas */\nhtml[data-dsg='on'] [data-chat-flow] [class*='_userStack'] {\n gap: 8px;\n}\n\n/* ============================================================================\n 3. disclosure capsules — think trigger rows + tool call rows (L2)\n ========================================================================== */\nhtml[data-dsg='on'] [data-chat-flow] [data-disclosure-header] {\n box-sizing: border-box;\n border-radius: 12px;\n background-color: var(--dsg-fill-l1);\n background-image: var(--dsg-sheen-l1);\n box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.32);\n padding: 1px 8px;\n transition:\n background-color var(--dsg-motion-dur) var(--dsg-ease),\n box-shadow var(--dsg-motion-dur) var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-chat-flow] :is([data-variant='think'], [data-tool]) [data-disclosure-header] {\n background-color: var(--dsg-row-capsule);\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.45),\n inset 0 0 0 0.5px rgba(56, 88, 158, 0.12);\n}\nhtml[data-dsg='on'] [data-chat-flow] [data-disclosure-header]:hover,\nhtml[data-dsg='on'] [data-chat-flow] [data-disclosure-header]:has(> [data-disclosure-row][aria-expanded='true']) {\n background-color: var(--dsg-row-capsule-hover);\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.55),\n inset 0 0 0 0.5px rgba(56, 88, 158, 0.16),\n 0 6px 18px -12px rgba(44, 74, 140, 0.45);\n}\nhtml[data-dsg='on'] body[data-ds-dark-theme] [data-chat-flow] :is([data-variant='think'], [data-tool]) [data-disclosure-header] {\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.12),\n inset 0 0 0 0.5px rgba(150, 180, 255, 0.14);\n}\n\n/* turn trigger strip (recorded trigger above a turn) — L2 glass card */\nhtml[data-dsg='on'] [data-turn-trigger] {\n background-color: color-mix(in srgb, var(--dsg-blue) 4%, var(--dsg-fill-l2));\n background-image: var(--dsg-sheen-l2);\n -webkit-backdrop-filter: var(--dsg-backdrop-l2);\n backdrop-filter: var(--dsg-backdrop-l2);\n border: 0;\n border-radius: var(--dsg-radius-card);\n box-shadow: var(--dsg-bevel-l2);\n transition: box-shadow var(--dsg-motion-dur) var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-turn-trigger]:hover {\n background-color: color-mix(in srgb, var(--dsg-blue) 7%, var(--dsg-fill-l2));\n background-image: var(--dsg-sheen-l2);\n box-shadow:\n var(--dsg-bevel-l2),\n 0 0 0 0.5px rgba(77, 107, 254, 0.14);\n}\nhtml[data-dsg='on'] [data-turn-trigger] [class*='_header'] {\n border-radius: inherit;\n}\nhtml[data-dsg='on'] [data-turn-trigger] [class*='_header']:hover {\n background-color: transparent;\n}\n\n/* ============================================================================\n 4. reasoning (think) — expanded body stays transparent, sticky header painted\n ========================================================================== */\nhtml[data-dsg='on'] [data-variant='think'] [class*='_thinkBody'] {\n color: var(--dsw-alias-label-secondary);\n line-height: 1.66;\n}\nhtml[data-dsg='on'] [data-variant='think'] [data-open] [data-disclosure-header] {\n background-color: var(--dsg-code-banner);\n background-image: none;\n border-radius: 10px;\n box-shadow: 0 1px 0 var(--dsg-border-hair);\n}\n/* compaction / context fold sticky header (was --dsw-alias-bg-base = transparent) */\nhtml[data-dsg='on'] [class*='_compactionRow']:has([class*='_compactionBody']) [class*='_compactionButton'] {\n background-color: var(--dsg-code-banner);\n box-shadow: 0 1px 0 var(--dsg-border-hair);\n}\n\n/* ============================================================================\n 5. tool results — flat L1 plates, near opaque (code / logs / diffs)\n ========================================================================== */\nhtml[data-dsg='on'] [data-slot='tool.call.toolview'] [data-inspect],\nhtml[data-dsg='on'] [data-chat-flow-kind='context'] [data-context-injection-body],\nhtml[data-dsg='on'] [data-terminal],\nhtml[data-dsg='on'] [data-tool='read'] [data-read],\nhtml[data-dsg='on'] [data-tool='grep'] [data-search='matches'],\nhtml[data-dsg='on'] [data-tool='glob'] [data-search='paths'],\nhtml[data-dsg='on'] [data-tool='write'] [data-diff],\nhtml[data-dsg='on'] [data-variant='others'] [class*='_ioCard'] {\n background-color: var(--dsg-tool-plate);\n border: 0.5px solid var(--dsg-border-hair);\n border-radius: 12px;\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.35),\n 0 10px 28px -22px rgba(44, 74, 140, 0.4);\n color: var(--dsw-alias-label-primary);\n}\nhtml[data-dsg='on'] body[data-ds-dark-theme] [data-slot='tool.call.toolview'] [data-inspect],\nhtml[data-dsg='on'] body[data-ds-dark-theme] [data-terminal],\nhtml[data-dsg='on'] body[data-ds-dark-theme] [data-tool='read'] [data-read],\nhtml[data-dsg='on'] body[data-ds-dark-theme] [data-tool='grep'] [data-search='matches'],\nhtml[data-dsg='on'] body[data-ds-dark-theme] [data-tool='glob'] [data-search='paths'],\nhtml[data-dsg='on'] body[data-ds-dark-theme] [data-tool='write'] [data-diff] {\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.08),\n 0 10px 28px -22px rgba(0, 0, 0, 0.6);\n}\n/* long scroll bodies keep their own plate; never add blur here */\nhtml[data-dsg='on'] [data-slot='tool.call.toolview'] [class*='_bodyScroll'],\nhtml[data-dsg='on'] [data-slot='tool.call.toolview'] [class*='_list'] {\n scrollbar-gutter: stable;\n}\n/* diff semantic colours stay untouched (host tokens) but need a solid floor */\nhtml[data-dsg='on'] [data-tool='write'] [data-diff] [data-diff-line],\nhtml[data-dsg='on'] [data-review-view] [class*='_line'],\nhtml[data-dsg='on'] [data-review-view] [class*='_splitLine'] {\n box-shadow: none;\n}\n\n/* ============================================================================\n 6. code blocks — near-opaque plate + painted sticky banner\n ========================================================================== */\nhtml[data-dsg='on'] .md-code-block {\n --dsl-code-block-background: transparent;\n --dsl-code-block-banner-background-color: var(--dsg-code-banner);\n background-color: var(--dsg-code-solid);\n background-image: var(--dsg-sheen-l1);\n border: 0.5px solid var(--dsg-border-hair);\n border-radius: 14px;\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.45),\n 0 14px 34px -26px rgba(44, 74, 140, 0.5);\n /* no overflow:hidden here — it would kill the banner's position:sticky */\n}\nhtml[data-dsg='on'] .md-code-block :where(pre) {\n padding: 13px 16px;\n border-radius: 0 0 14px 14px;\n}\nhtml[data-dsg='on'] .md-code-block [class*='_bannerWrap'] {\n background-color: var(--dsg-code-banner);\n border-radius: 14px 14px 0 0;\n box-shadow: 0 1px 0 var(--dsg-border-hair);\n}\nhtml[data-dsg='on'] .md-code-block [class*='_banner'] {\n background: transparent;\n padding: 7px 12px;\n}\nhtml[data-dsg='on'] .md-code-block [class*='_infostring'] {\n color: var(--dsw-alias-label-secondary);\n letter-spacing: 0.02em;\n}\nhtml[data-dsg='on'] .md-code-block [class*='_copyButton'] {\n border-radius: 8px;\n padding: 2px 8px;\n font-size: 11px;\n line-height: 16px;\n color: var(--dsw-alias-label-secondary);\n background-color: color-mix(in srgb, var(--dsg-blue) 6%, transparent);\n transition:\n background-color var(--dsg-motion-dur) var(--dsg-ease),\n color var(--dsg-motion-dur) var(--dsg-ease);\n}\nhtml[data-dsg='on'] .md-code-block [class*='_copyButton']:hover {\n background-color: var(--dsg-blue-soft);\n color: var(--dsg-blue-strong);\n}\nhtml[data-dsg='on'] .md-code-block [class*='_lineNumber'],\nhtml[data-dsg='on'] .md-code-block [class*='_numbered'] :where(pre) code > .line::before {\n color: var(--dsw-alias-label-caption);\n}\n\n/* inline code: opaque chip, never a backdrop-filter (inline boxes smear rows) */\nhtml[data-dsg='on'] [data-chat-flow] :not(pre) > code,\nhtml[data-dsg='on'] [class*='_markdown'] :not(pre) > code {\n background-color: color-mix(in srgb, var(--dsg-blue) 6%, var(--dsg-code-inline));\n border-color: rgba(77, 107, 254, 0.16);\n border-radius: 6px;\n color: var(--dsw-alias-label-primary);\n}\n\n/* ============================================================================\n 7. deliverables / plan cards / trajectory panes — L2 cards\n ========================================================================== */\nhtml[data-dsg='on'] [data-presented-file],\nhtml[data-dsg='on'] [data-changed-files],\nhtml[data-dsg='on'] [data-plan-card],\nhtml[data-dsg='on'] [data-plan-artifacts] > * {\n background-color: var(--dsg-fill-l2);\n background-image: var(--dsg-sheen-l2);\n border: 0.5px solid var(--dsg-border-hair);\n border-radius: 14px;\n box-shadow: var(--dsg-bevel-l1);\n transition:\n box-shadow var(--dsg-motion-dur) var(--dsg-ease),\n background-color var(--dsg-motion-dur) var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-presented-file]:hover,\nhtml[data-dsg='on'] [data-changed-files]:hover,\nhtml[data-dsg='on'] [data-plan-card]:hover {\n background-color: color-mix(in srgb, var(--dsg-blue) 4%, var(--dsg-fill-l2));\n box-shadow: var(--dsg-bevel-l2);\n}\n/* the plan card is a 60px row — give it a calmer inner surface */\nhtml[data-dsg='on'] [data-plan-card] {\n height: 60px;\n padding: 8px 12px;\n}\nhtml[data-dsg='on'] [data-plan-card] [class*='_cardIcon'] {\n background: color-mix(in srgb, var(--dsg-blue) 7%, rgba(255, 255, 255, 0.6));\n border: 0.5px solid rgba(77, 107, 254, 0.14);\n border-radius: 10px;\n}\nhtml[data-dsg='on'] body[data-ds-dark-theme] [data-plan-card] [class*='_cardIcon'] {\n background: color-mix(in srgb, var(--dsg-blue) 16%, rgba(255, 255, 255, 0.04));\n}\n\n/* trajectory: big scrollable table pane → flat L2 wash, no backdrop-filter */\nhtml[data-dsg='on'] [class*='_tablePane'],\nhtml[data-dsg='on'] [class*='_overviewPreview'],\nhtml[data-dsg='on'] [class*='_programPanel'] {\n background-color: var(--dsg-fill-l2);\n border: 0.5px solid var(--dsg-border-hair);\n border-radius: 14px;\n box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);\n}\nhtml[data-dsg='on'] [class*='_tablePane']:has([data-trajectory-scroll]),\nhtml[data-dsg='on'] [class*='_overviewPreview'] {\n --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2);\n --dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2);\n}\n\n/* ============================================================================\n 8. message meta / actions — quiet hover, blue focus only\n ========================================================================== */\nhtml[data-dsg='on'] [data-chat-flow] [class*='_actions'] [class*='_action'] {\n border-radius: 8px;\n color: var(--dsw-alias-label-tertiary);\n transition: background-color var(--dsg-motion-dur) var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-chat-flow] [class*='_actions'] [class*='_action']:hover {\n background-color: rgba(77, 107, 254, 0.08);\n color: var(--dsw-alias-label-secondary);\n}\n\n/* ============================================================================\n 9. fallback legs — no backdrop-filter support / software rasteriser\n ========================================================================== */\n@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {\n html[data-dsg='on'] [class*='_bubble']:not([role='tooltip']),\n html[data-dsg='on'] [data-turn-trigger] {\n background-color: var(--dsg-code-solid);\n background-image: none;\n }\n}\nhtml[data-dsg='on'] body[data-dsg-fallback] [class*='_bubble']:not([role='tooltip']),\nhtml[data-dsg='on'] body[data-dsg-fallback] [data-turn-trigger] {\n background-color: var(--dsg-code-solid);\n background-image: none;\n -webkit-backdrop-filter: none;\n backdrop-filter: none;\n}\n\n/* ===== 50-overlays.css ===== */\n/* ============================================================================\r\n dsh-skin-mistblue · 50 overlays (dialog / menu / toast / tooltip / prompts)\r\n ----------------------------------------------------------------------------\r\n Tier map:\r\n L3 dialogs, question / plan-review / approval cards, lightbox chrome\r\n token channel menus (--dsw-specific-menu / --dsw-menu-backdrop-filter)\r\n glass tip tooltips + chart hover tips (v1.9 — L2 frost, see §5)\r\n exempt hovercard (host preview card), native <select>, [data-windows-menu]\r\n Hard rules honoured here:\r\n · [class*=\"_bubble\"] rules always carry :not([role=\"tooltip\"])\r\n · menus are NOT re-painted (host already draws a material layer); only\r\n tokens + radius/rows are tuned — no double board\r\n · mask keeps using --dsw-mask-blur (tuned lighter here so the dialog's\r\n own frost is not stacked on top of a second large blur)\r\n · tooltips are glass with a legible high fill; hovercards / native menus\r\n keep the host material (frosted image previews would lose legibility)\r\n ========================================================================== */\r\n\r\n/* mask channel: the dialog owns the strong frost (L3); keep the backdrop\r\n scrim cheap so we never pay for two large blurs at once (GLASS-SPEC §5.9). */\r\n@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {\r\n html[data-dsg='on'] body {\r\n --dsw-mask-blur: blur(calc(10px * var(--dsg-blur, 1))) saturate(1.18);\r\n }\r\n}\r\nhtml[data-dsg='on'] body[data-dsg-fallback] {\r\n --dsw-mask-blur: none;\r\n}\r\n\r\n/* ============================================================================\r\n 1. dialogs — L3 glass face\r\n ========================================================================== */\r\nhtml[data-dsg='on'] [role='dialog'][aria-modal='true']:is(\r\n [class*='_dialog'],\r\n [class*='_panel'],\r\n [class*='_confirmation'],\r\n [class*='_installDialog'],\r\n [class*='_guideDialog']\r\n ) {\r\n background-color: var(--dsg-fill-l3);\r\n background-image: var(--dsg-sheen-l3);\r\n -webkit-backdrop-filter: var(--dsg-backdrop-l3);\r\n backdrop-filter: var(--dsg-backdrop-l3);\r\n border: 0;\r\n border-radius: var(--dsg-radius-modal);\r\n box-shadow: var(--dsg-bevel-l3);\r\n overflow: hidden;\r\n}\r\nhtml[data-dsg='on'] body[data-ds-dark-theme] [role='dialog'][aria-modal='true']:is(\r\n [class*='_dialog'],\r\n [class*='_panel'],\r\n [class*='_confirmation']\r\n ) {\r\n box-shadow:\r\n var(--dsg-bevel-l3),\r\n inset 0 0 0 0.5px rgba(150, 180, 255, 0.12);\r\n}\r\n\r\n/* dialog chrome: title / close / footer */\r\nhtml[data-dsg='on'] [role='dialog'][aria-modal='true'] [class*='_title'] {\r\n font-weight: 600;\r\n letter-spacing: 0.005em;\r\n color: var(--dsw-alias-label-primary);\r\n}\r\nhtml[data-dsg='on'] [role='dialog'][aria-modal='true'] [class*='_description'] {\r\n color: var(--dsw-alias-label-secondary);\r\n line-height: 1.62;\r\n}\r\nhtml[data-dsg='on'] [role='dialog'][aria-modal='true'] [class*='_close'] {\r\n border-radius: 10px;\r\n color: var(--dsw-alias-label-secondary);\r\n background-color: transparent;\r\n transition:\r\n background-color var(--dsg-motion-dur) var(--dsg-ease),\r\n color var(--dsg-motion-dur) var(--dsg-ease);\r\n}\r\nhtml[data-dsg='on'] [role='dialog'][aria-modal='true'] [class*='_close']:hover {\r\n background-color: var(--dsg-blue-soft);\r\n color: var(--dsg-blue-strong);\r\n}\r\n/* dialog fields stay opaque (readability on top of the frosted face) */\r\nhtml[data-dsg='on'] [role='dialog'][aria-modal='true']\r\n :is(input, textarea, select):not([type='range']):not([type='checkbox']):not([type='radio']) {\r\n background-color: var(--dsg-code-solid);\r\n border-color: var(--dsg-border-hair);\r\n color: var(--dsw-alias-label-primary);\r\n}\r\nhtml[data-dsg='on'] [role='dialog'][aria-modal='true'] [class*='_footer'] [class*='_button']:not([disabled]) {\r\n transition:\r\n background-color var(--dsg-motion-dur) var(--dsg-ease),\r\n box-shadow var(--dsg-motion-dur) var(--dsg-ease);\r\n}\r\n\r\n/* ============================================================================\r\n 2. question / plan-review / approval cards — L3 reading cards\r\n (they live in the composer seat, not in a portal: no fixed descendants)\r\n ========================================================================== */\r\nhtml[data-dsg='on'] [data-question-key] [class*='_card'],\r\nhtml[data-dsg='on'] [data-plan-review-key] [class*='_card'],\r\nhtml[data-dsg='on'] [data-approval-key] [class*='_card'] {\r\n --dsw-elevation-stroke-color: transparent;\r\n background-color: var(--dsg-fill-l3);\r\n background-image: var(--dsg-sheen-l3);\r\n -webkit-backdrop-filter: var(--dsg-backdrop-l3);\r\n backdrop-filter: var(--dsg-backdrop-l3);\r\n border: 0;\r\n border-radius: var(--dsg-radius-modal);\r\n box-shadow: var(--dsg-bevel-l3);\r\n color: var(--dsw-alias-label-primary);\r\n}\r\nhtml[data-dsg='on'] [data-question-key] [class*='_strip'],\r\nhtml[data-dsg='on'] [data-plan-review-key] [class*='_strip'],\r\nhtml[data-dsg='on'] [data-approval-key] [class*='_strip'] {\r\n border-bottom: 0.5px solid rgba(150, 110, 20, 0.14);\r\n font-weight: 500;\r\n}\r\n/* the action row must stay crisp above the frost */\r\nhtml[data-dsg='on'] [data-question-key] [class*='_footer']:not([class*='_footerActions']),\r\nhtml[data-dsg='on'] [data-plan-review-key] [class*='_footer']:not([class*='_footerActions']),\r\nhtml[data-dsg='on'] [data-approval-key] [class*='_actionRow'],\r\nhtml[data-dsg='on'] [data-approval-key] [class*='_footer']:not([class*='_footerActions']) {\r\n background-color: color-mix(in srgb, var(--dsg-tint) 24%, transparent);\r\n border-top: 0.5px solid var(--dsg-border-hair);\r\n}\r\n/* option rows inside a question card: opaque enough to read, hover in blue */\r\nhtml[data-dsg='on'] [data-question-key] :is(button, label)[class*='_option'],\r\nhtml[data-dsg='on'] [data-plan-review-key] :is(button, label)[class*='_option'] {\r\n background-color: color-mix(in srgb, var(--dsg-tint) 34%, transparent);\r\n border: 0.5px solid var(--dsg-border-hair);\r\n border-radius: 12px;\r\n transition:\r\n background-color var(--dsg-motion-dur) var(--dsg-ease),\r\n border-color var(--dsg-motion-dur) var(--dsg-ease);\r\n}\r\nhtml[data-dsg='on'] [data-question-key] :is(button, label)[class*='_option']:hover:not(:disabled),\r\nhtml[data-dsg='on'] [data-plan-review-key] :is(button, label)[class*='_option']:hover:not(:disabled) {\r\n background-color: color-mix(in srgb, var(--dsg-blue) 6%, var(--dsg-fill-l2));\r\n border-color: rgba(77, 107, 254, 0.24);\r\n}\r\nhtml[data-dsg='on'] [data-question-key] :is(button, label)[class*='_optionSelected'],\r\nhtml[data-dsg='on'] [data-plan-review-key] :is(button, label)[class*='_optionSelected'] {\r\n background-color: color-mix(in srgb, var(--dsg-blue) 9%, var(--dsg-fill-l2));\r\n border-color: rgba(77, 107, 254, 0.34);\r\n}\r\n\r\n/* ============================================================================\r\n 3. menus — token channel only (host draws the material layer)\r\n ========================================================================== */\r\nhtml[data-dsg='on'] [data-menu-material] {\r\n border-radius: 12px;\r\n}\r\nhtml[data-dsg='on'] [data-menu-material] > [class*='_material'] {\r\n border-radius: inherit;\r\n background: var(--dsw-menu-surface-fill);\r\n -webkit-backdrop-filter: var(--dsw-menu-backdrop-filter);\r\n backdrop-filter: var(--dsw-menu-backdrop-filter);\r\n box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.28);\r\n}\r\nhtml[data-dsg='on'] body[data-ds-dark-theme] [data-menu-material] > [class*='_material'] {\r\n box-shadow: inset 0 0 0 0.5px rgba(150, 180, 255, 0.12);\r\n}\r\nhtml[data-dsg='on'] [data-menu-backing] {\r\n background-color: color-mix(in srgb, var(--dsg-tint) 86%, transparent);\r\n}\r\n/* rows / group headers / shortcuts (host radii kept, ink tuned) */\r\nhtml[data-dsg='on'] [data-menu-material] [role='menuitem'],\r\nhtml[data-dsg='on'] [data-menu-material] [role='menuitemcheckbox'],\r\nhtml[data-dsg='on'] [data-menu-material] [role='menuitemradio'],\r\nhtml[data-dsg='on'] [data-menu-material] button[class*='_item'] {\r\n border-radius: 9px;\r\n color: var(--dsw-alias-label-primary);\r\n}\r\nhtml[data-dsg='on'] [data-menu-material] [role='menuitem']:hover,\r\nhtml[data-dsg='on'] [data-menu-material] [role='menuitemcheckbox']:hover,\r\nhtml[data-dsg='on'] [data-menu-material] [role='menuitemradio']:hover,\r\nhtml[data-dsg='on'] [data-menu-material] button[class*='_item']:hover:not(:disabled) {\r\n background-color: var(--dsg-blue-soft);\r\n}\r\nhtml[data-dsg='on'] [data-menu-material] [class*='_label'] {\r\n color: var(--dsw-alias-label-tertiary);\r\n letter-spacing: 0.02em;\r\n}\r\nhtml[data-dsg='on'] [data-menu-material] [class*='_separator'] {\r\n background-color: var(--dsg-border-hair);\r\n}\r\nhtml[data-dsg='on'] [data-menu-material] [class*='_shortcut'] {\r\n color: var(--dsw-alias-label-caption);\r\n}\r\n\r\n/* ============================================================================\r\n 4. hovercard / popover previews — host already paints an opaque dark card\r\n (--dsw-hovercard-bg: #2C2C2E, white ink). We only soften its edge; never\r\n add glass here, a frosted hovercard drops contrast to ~1.1:1.\r\n ========================================================================== */\r\nhtml[data-dsg='on'] [class*='_preview']:has(> [class*='_previewPrompt']) {\r\n border-radius: 14px;\r\n box-shadow: var(--dsg-bevel-l3);\r\n}\r\n\r\n/* ============================================================================\r\n 5. tooltips — near-opaque glass plate (v1.10)\r\n ----------------------------------------------------------------------------\r\n Every hover-only tooltip shares one recipe:\r\n · DSH primitive tooltips → [role='tooltip']\r\n · dsh-context chart hover tips → .lc-tip / .lc-chart-tip\r\n · other plugin chart tips → [class*='chart-tip'] / [class*='chartTip']\r\n User feedback (v1.10): make them almost opaque — readable text wins, the plate\r\n keeps only ~4% translucency plus the 16px frost, sheen and hairline so it still\r\n reads as glass instead of a flat white box. Chart tips sit on the densest\r\n surface, so they are 96% instead of 94%.\r\n ========================================================================== */\r\nhtml[data-dsg='on'] {\r\n --dsg-tip-fill: color-mix(in srgb, #ffffff 94%, transparent);\r\n --dsg-tip-fill-chart: color-mix(in srgb, #ffffff 96%, transparent);\r\n --dsg-tip-border: rgba(255, 255, 255, 0.72);\r\n --dsg-tip-ink: var(--dsw-alias-label-primary);\r\n --dsg-tip-shadow:\r\n 0 12px 30px -14px rgba(23, 48, 108, 0.38),\r\n 0 2px 6px rgba(23, 48, 108, 0.09);\r\n}\r\nhtml[data-dsg='on'] body[data-ds-dark-theme] {\r\n --dsg-tip-fill: color-mix(in srgb, #0d1524 94%, transparent);\r\n --dsg-tip-fill-chart: color-mix(in srgb, #0d1524 96%, transparent);\r\n --dsg-tip-border: rgba(255, 255, 255, 0.18);\r\n --dsg-tip-shadow:\r\n 0 14px 34px -16px rgba(0, 0, 0, 0.6),\r\n 0 2px 8px rgba(0, 0, 0, 0.32);\r\n}\r\n\r\nhtml[data-dsg='on']\r\n :is(\r\n [role='tooltip'],\r\n .lc-tip,\r\n .lc-chart-tip,\r\n [class*='_chart-tip'],\r\n [class*='_chartTip']\r\n ) {\r\n background-color: var(--dsg-tip-fill) !important;\r\n background-image: var(--dsg-sheen-l2) !important;\r\n -webkit-backdrop-filter: var(--dsg-blur-l2) saturate(1.45) brightness(1.02);\r\n backdrop-filter: var(--dsg-blur-l2) saturate(1.45) brightness(1.02);\r\n border: 0.5px solid var(--dsg-tip-border) !important;\r\n border-radius: 10px;\r\n color: var(--dsg-tip-ink) !important;\r\n box-shadow: var(--dsg-tip-shadow);\r\n text-shadow: none;\r\n}\r\n\r\n/* DSH primitive tooltip: tiny plate + shortcut pills */\r\nhtml[data-dsg='on'] [role='tooltip'] {\r\n padding: 5px 9px;\r\n font-size: 12px;\r\n line-height: 18px;\r\n font-weight: 400;\r\n border-radius: 9px;\r\n}\r\nhtml[data-dsg='on'] [role='tooltip'] :is(kbd, [class*='_key']) {\r\n background-color: color-mix(in srgb, var(--dsg-tip-ink) 9%, transparent);\r\n border: 0.5px solid color-mix(in srgb, var(--dsg-tip-ink) 13%, transparent);\r\n border-radius: 4px;\r\n color: var(--dsg-tip-ink);\r\n}\r\nhtml[data-dsg='on'] [role='tooltip'] [class*='_shortcut'],\r\nhtml[data-dsg='on'] [role='tooltip'] [class*='_label'] {\r\n color: var(--dsg-tip-ink);\r\n}\r\n\r\n/* chart hover tips: denser fill + softer edge, always above the plot marks */\r\nhtml[data-dsg='on'] :is(.lc-tip, .lc-chart-tip, [class*='_chart-tip'], [class*='_chartTip']) {\r\n background-color: var(--dsg-tip-fill-chart) !important;\r\n -webkit-backdrop-filter: calc(var(--dsg-blur-l2) * 1.1) saturate(1.5) brightness(1.02);\r\n backdrop-filter: calc(var(--dsg-blur-l2) * 1.1) saturate(1.5) brightness(1.02);\r\n border-radius: 10px;\r\n padding: 6px 10px;\r\n color: var(--dsg-tip-ink) !important;\r\n z-index: 40;\r\n}\r\nhtml[data-dsg='on'] :is(.lc-chart-tip, [class*='_chart-tip'], [class*='_chartTip']) span + span {\r\n color: var(--dsw-alias-label-secondary);\r\n}\r\n\r\n/* no backdrop-filter: fill is already near-opaque, just push the last percents */\r\n@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {\r\n html[data-dsg='on']\r\n :is([role='tooltip'], .lc-tip, .lc-chart-tip, [class*='_chart-tip'], [class*='_chartTip']) {\r\n background-color: color-mix(in srgb, #ffffff 98%, transparent) !important;\r\n }\r\n html[data-dsg='on'] body[data-ds-dark-theme]\r\n :is([role='tooltip'], .lc-tip, .lc-chart-tip, [class*='_chart-tip'], [class*='_chartTip']) {\r\n background-color: color-mix(in srgb, #0d1524 98%, transparent) !important;\r\n }\r\n}\r\n\r\n/* ============================================================================\r\n 6. toast — L3 shape, opaque deep plate (contrast first)\r\n ========================================================================== */\r\nhtml[data-dsg='on'] [class*='_toast'] {\r\n border-radius: 14px;\r\n padding: 12px 16px;\r\n font-size: 13px;\r\n line-height: 20px;\r\n box-shadow:\r\n 0 18px 48px rgba(23, 48, 108, 0.24),\r\n inset 0 1px 0 rgba(255, 255, 255, 0.12);\r\n -webkit-backdrop-filter: none;\r\n backdrop-filter: none;\r\n}\r\nhtml[data-dsg='on'] [class*='_toast'] [class*='_action'] {\r\n color: var(--dsw-static-deepseek-400);\r\n}\r\n\r\n/* ============================================================================\r\n 7. image lightbox — chrome only, the image itself stays opaque (L0)\r\n ========================================================================== */\r\nhtml[data-dsg='on'] [role='dialog'][aria-modal='true']:has(> [class*='_stage']) {\r\n background: none;\r\n box-shadow: none;\r\n -webkit-backdrop-filter: none;\r\n backdrop-filter: none;\r\n}\r\nhtml[data-dsg='on'] [role='dialog'][aria-modal='true'] [class*='_image'] {\r\n background-color: var(--dsg-code-solid);\r\n border-radius: 16px;\r\n box-shadow: var(--dsg-bevel-l3);\r\n}\r\nhtml[data-dsg='on'] [role='dialog'][aria-modal='true'] [class*='_close'] {\r\n -webkit-backdrop-filter: var(--dsg-backdrop-l2);\r\n backdrop-filter: var(--dsg-backdrop-l2);\r\n background-color: color-mix(in srgb, var(--dsg-tint) 64%, transparent);\r\n box-shadow: var(--dsg-bevel-l2);\r\n}\r\n\r\n/* ============================================================================\r\n 8. native surfaces — stay opaque (Windows menu, <select> popup rows)\r\n ========================================================================== */\r\nhtml[data-dsg='on'] [data-windows-menu] {\r\n background-color: var(--dsw-alias-bg-layer-3);\r\n -webkit-backdrop-filter: none;\r\n backdrop-filter: none;\r\n}\r\nhtml[data-dsg='on'] select,\r\nhtml[data-dsg='on'] option {\r\n background-color: var(--dsg-tint);\r\n color: var(--dsw-alias-label-primary);\r\n}\n\n/* ===== 60-settings.css ===== */\n/* ============================================================================\n dsh-skin-mistblue · 60 settings / plugin pages / right sidebar / preview\n ----------------------------------------------------------------------------\n Tier map:\n L3 settings window, fullscreen right panel, document preview paper\n L2 settings cards, plugin list/detail cards, right-panel shell, tabs\n L1 pane bodies, page canvases\n Hard rules honoured here:\n · settings window fill L3 + own frost ≤12px (never a 24px full-window blur)\n · inner scrollers (settings options / right pane body) never get blur\n · right panel needs the dockkit z-index lift once backdrop-filter is on\n · text / code / pdf / office preview keep an opaque paper plate\n ========================================================================== */\n\n/* ============================================================================\n 1. settings window — L3 face, capped frost\n ========================================================================== */\nhtml[data-dsg='on'] [role='dialog'][aria-modal='true'][data-shortcut-modal='settings'],\nhtml[data-dsg='on'] [role='dialog'][aria-modal='true']:has([data-slot='settings.section']) {\n background-color: var(--dsg-fill-l3);\n background-image: var(--dsg-sheen-l3);\n /* foundation's dialog channel: 12px, never a 24px full-window blur */\n -webkit-backdrop-filter: var(--dsg-backdrop-dialog);\n backdrop-filter: var(--dsg-backdrop-dialog);\n border-radius: var(--dsg-radius-modal);\n box-shadow: var(--dsg-bevel-l3);\n /* blue primary CTAs + white ink on them, scoped to this window */\n --dsw-alias-brand-primary: var(--dsg-blue);\n --dsw-alias-button-primary-fill: var(--dsg-blue);\n --dsw-alias-button-primary-hover: var(--dsg-blue-strong);\n --dsw-alias-label-primary-foreground: #ffffff;\n}\nhtml[data-dsg='on'] body[data-dsg-fallback] [role='dialog'][aria-modal='true'][data-shortcut-modal='settings'],\nhtml[data-dsg='on'] body[data-dsg-fallback] [role='dialog'][aria-modal='true']:has([data-slot='settings.section']) {\n -webkit-backdrop-filter: none;\n backdrop-filter: none;\n}\n/* the scrim behind the settings window keeps the shared mask channel */\nhtml[data-dsg='on']\n [role='presentation']:has(> [role='dialog'][data-shortcut-modal='settings'])\n > [class*='_mask'] {\n background-color: rgba(16, 24, 40, 0.28);\n -webkit-backdrop-filter: var(--dsw-mask-blur);\n backdrop-filter: var(--dsw-mask-blur);\n}\nhtml[data-dsg='on'] body[data-ds-dark-theme]\n [role='presentation']:has(> [role='dialog'][data-shortcut-modal='settings'])\n > [class*='_mask'] {\n background-color: rgba(0, 0, 0, 0.46);\n}\n\n/* left navigation — pill rows with a blue active state */\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] nav {\n border-right: 0.5px solid var(--dsg-border-hair);\n gap: 14px;\n}\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_navTitle'] {\n font-size: 16px;\n font-weight: 600;\n letter-spacing: 0.01em;\n color: var(--dsw-alias-label-primary);\n}\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_navCell'] {\n height: 38px;\n border-radius: 10px;\n color: var(--dsw-alias-label-secondary);\n transition:\n background-color var(--dsg-motion-dur) var(--dsg-ease),\n color var(--dsg-motion-dur) var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_navCell']:hover {\n background-color: rgba(77, 107, 254, 0.07);\n color: var(--dsw-alias-label-primary);\n}\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_navCell'][aria-current='true'] {\n background-color: rgba(77, 107, 254, 0.11);\n color: var(--dsg-blue-strong);\n font-weight: 500;\n box-shadow: inset 0 0 0 0.5px rgba(77, 107, 254, 0.16);\n}\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_navLabel'] {\n color: inherit;\n}\n\n/* content chrome */\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_header'] {\n background-color: transparent;\n}\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_content'] {\n min-width: 0;\n}\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_options'] {\n padding: 0 28px 28px;\n /* a scroller: never frost it (per-frame backdrop recompute) */\n}\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] :is(h2, h3) {\n letter-spacing: 0.005em;\n}\n\n/* ============================================================================\n 2. settings cards / rows / controls\n ========================================================================== */\n/* card items only: direct children of a card list/grid (avoids _cardMainRow,\n _cardContent, _cardTitle … being painted as cards) */\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_cards'] > *,\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_rowCard'] {\n background-color: color-mix(in srgb, var(--dsg-blue) 2.5%, var(--dsg-fill-l2));\n background-image: var(--dsg-sheen-l2);\n border: 0.5px solid var(--dsg-border-hair);\n border-radius: 16px;\n box-shadow: var(--dsg-bevel-l1);\n transition:\n background-color var(--dsg-motion-dur) var(--dsg-ease),\n box-shadow var(--dsg-motion-dur) var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_cards'] > *:hover,\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_rowCard']:hover {\n background-color: color-mix(in srgb, var(--dsg-blue) 4%, var(--dsg-fill-l2));\n box-shadow: var(--dsg-bevel-l2);\n}\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_cards'] > *[data-open='true'] {\n background-color: color-mix(in srgb, var(--dsg-blue) 4%, var(--dsg-fill-l2));\n border-color: rgba(77, 107, 254, 0.2);\n}\n/* single cards that are not inside a card list (account / balance rows) */\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_balanceCard'] {\n background-color: color-mix(in srgb, var(--dsg-blue) 2.5%, var(--dsg-fill-l2));\n background-image: var(--dsg-sheen-l2);\n border-radius: 16px;\n box-shadow: var(--dsg-bevel-l1);\n}\n/* card head / tags */\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_cards'] [class*='_cardTitle'] {\n font-weight: 600;\n color: var(--dsw-alias-label-primary);\n}\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_cards'] [class*='_cardDesc'],\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_intro'] {\n color: var(--dsw-alias-label-secondary);\n line-height: 1.6;\n}\n/* setting rows: comfortable height, blue hover (form fields + inventory rows) */\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_field'] {\n border-radius: 10px;\n transition: background-color var(--dsg-motion-dur) var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_field']:hover,\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_cardMainRow']:hover {\n background-color: rgba(77, 107, 254, 0.045);\n}\n/* form fields stay opaque on the frosted face */\nhtml[data-dsg='on'] [data-shortcut-modal='settings']\n :is(input, textarea, select):not([type='range']):not([type='checkbox']):not([type='radio']) {\n background-color: var(--dsg-code-solid);\n border: 0.5px solid var(--dsg-border-hair);\n border-radius: 10px;\n color: var(--dsw-alias-label-primary);\n}\nhtml[data-dsg='on'] [data-shortcut-modal='settings']\n :is(input, textarea, select):not([type='range']):focus-visible {\n border-color: rgba(77, 107, 254, 0.42);\n box-shadow: 0 0 0 2px rgba(77, 107, 254, 0.16);\n outline: none;\n}\n/* switches / sliders / checkboxes: DeepSeek blue accent */\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] :is(input[type='checkbox'], input[type='radio'], input[type='range']) {\n accent-color: var(--dsg-blue);\n}\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_switch'][aria-checked='true'] {\n background: var(--dsg-blue);\n}\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_switch']:hover {\n filter: brightness(1.05);\n}\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_segmented'],\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_control']:has(> [class*='_indicator']) {\n background-color: color-mix(in srgb, var(--dsg-tint) 30%, transparent);\n border: 0.5px solid var(--dsg-border-hair);\n border-radius: 10px;\n}\nhtml[data-dsg='on'] [data-shortcut-modal='settings'] [class*='_control'] > [class*='_indicator'] {\n border-radius: 8px;\n background: var(--dsg-fill-l2);\n box-shadow: var(--dsg-bevel-l1);\n}\n\n/* ============================================================================\n 3. plugin manager page (main panel) — L1 page, L2 cards\n ========================================================================== */\nhtml[data-dsg='on'] [data-plugin-panel] {\n --dsw-alias-brand-primary: var(--dsg-blue);\n --dsw-alias-button-primary-fill: var(--dsg-blue);\n --dsw-alias-button-primary-hover: var(--dsg-blue-strong);\n --dsw-alias-label-primary-foreground: #ffffff;\n color: var(--dsw-alias-label-primary);\n}\nhtml[data-dsg='on'] [data-plugin-panel] [class*='_pageTitle'] {\n font-weight: 600;\n letter-spacing: 0.005em;\n}\nhtml[data-dsg='on'] [data-plugin-panel] [class*='_pageIntro'] {\n color: var(--dsw-alias-label-secondary);\n}\nhtml[data-dsg='on'] [data-plugin-group] {\n border-radius: 18px;\n}\nhtml[data-dsg='on'] [data-plugin-group] [class*='_groupTitle'] {\n font-size: 12px;\n font-weight: 600;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n color: var(--dsw-alias-label-tertiary);\n}\n/* list rows / cards */\nhtml[data-dsg='on'] [data-plugin-item],\nhtml[data-dsg='on'] [data-plugin-package] {\n background-color: var(--dsg-fill-l2);\n background-image: var(--dsg-sheen-l2);\n border: 0.5px solid var(--dsg-border-hair);\n border-radius: 16px;\n box-shadow: var(--dsg-bevel-l1);\n transition:\n background-color var(--dsg-motion-dur) var(--dsg-ease),\n box-shadow var(--dsg-motion-dur) var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-plugin-item]:hover,\nhtml[data-dsg='on'] [data-plugin-package]:hover {\n background-color: color-mix(in srgb, var(--dsg-blue) 4%, var(--dsg-fill-l2));\n box-shadow: var(--dsg-bevel-l2);\n}\nhtml[data-dsg='on'] [data-plugin-item] [class*='_cardIcon'],\nhtml[data-dsg='on'] [data-plugin-package] [class*='_cardIcon'] {\n background: color-mix(in srgb, var(--dsg-blue) 6%, rgba(255, 255, 255, 0.6));\n border-color: rgba(77, 107, 254, 0.14);\n}\nhtml[data-dsg='on'] [data-plugin-item] [class*='_cardTitle'],\nhtml[data-dsg='on'] [data-plugin-package] [class*='_cardTitle'] {\n font-weight: 600;\n}\nhtml[data-dsg='on'] [data-plugin-item] [class*='_cardDesc'],\nhtml[data-dsg='on'] [data-plugin-package] [class*='_cardDesc'] {\n color: var(--dsw-alias-label-secondary);\n}\n/* status tags / badges */\nhtml[data-dsg='on'] [data-plugin-status] [class*='_statusTag'],\nhtml[data-dsg='on'] [data-plugin-panel] [class*='_statusTag'],\nhtml[data-dsg='on'] [data-plugin-panel] [class*='_badge'] {\n border-radius: 999px;\n background-color: rgba(77, 107, 254, 0.1);\n color: var(--dsg-blue-strong);\n border: 0.5px solid rgba(77, 107, 254, 0.16);\n font-weight: 500;\n}\n\n/* detail page (same surface, just a view) */\nhtml[data-dsg='on'] [data-plugin-detail] {\n color: var(--dsw-alias-label-primary);\n}\nhtml[data-dsg='on'] [data-plugin-detail] [class*='_crumb'] {\n border-radius: 10px;\n color: var(--dsw-alias-label-secondary);\n}\nhtml[data-dsg='on'] [data-plugin-detail] [class*='_crumb']:hover {\n background-color: rgba(77, 107, 254, 0.07);\n color: var(--dsg-blue-strong);\n}\nhtml[data-dsg='on'] [data-plugin-rows] {\n background-color: color-mix(in srgb, var(--dsg-tint) 18%, transparent);\n border: 0.5px solid var(--dsg-border-hair);\n border-radius: 16px;\n padding: 4px;\n}\nhtml[data-dsg='on'] [data-plugin-row] {\n border-radius: 12px;\n min-height: 44px;\n transition: background-color var(--dsg-motion-dur) var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-plugin-row]:hover {\n background-color: rgba(77, 107, 254, 0.05);\n}\nhtml[data-dsg='on'] [data-plugin-row][data-state='failed'] {\n box-shadow: inset 2px 0 0 rgba(239, 68, 68, 0.6);\n}\nhtml[data-dsg='on'] [data-plugin-detail] [class*='_detailSection'] {\n background-color: var(--dsg-fill-l2);\n border: 0.5px solid var(--dsg-border-hair);\n border-radius: 16px;\n padding: 12px 14px;\n}\n/* plugin market */\nhtml[data-dsg='on'] [data-market-entry] {\n background-color: var(--dsg-fill-l2);\n background-image: var(--dsg-sheen-l2);\n border: 0.5px solid var(--dsg-border-hair);\n border-radius: 16px;\n box-shadow: var(--dsg-bevel-l1);\n transition:\n background-color var(--dsg-motion-dur) var(--dsg-ease),\n box-shadow var(--dsg-motion-dur) var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-market-entry]:hover {\n background-color: color-mix(in srgb, var(--dsg-blue) 4%, var(--dsg-fill-l2));\n box-shadow: var(--dsg-bevel-l2);\n}\nhtml[data-dsg='on'] [data-market-detail] {\n --dsw-alias-brand-primary: var(--dsg-blue);\n --dsw-alias-button-primary-fill: var(--dsg-blue);\n --dsw-alias-button-primary-hover: var(--dsg-blue-strong);\n --dsw-alias-label-primary-foreground: #ffffff;\n}\nhtml[data-dsg='on'] [data-market-detail] [class*='_detailSection'] {\n background-color: var(--dsg-fill-l2);\n border: 0.5px solid var(--dsg-border-hair);\n border-radius: 16px;\n padding: 12px 14px;\n}\n/* install dialog keeps the generic dialog face but gets the blue CTA */\nhtml[data-dsg='on'] [role='dialog'][aria-modal='true']:has([data-install-phase]),\nhtml[data-dsg='on'] [role='dialog'][aria-modal='true'] [class*='_installDialog'] {\n --dsw-alias-brand-primary: var(--dsg-blue);\n --dsw-alias-button-primary-fill: var(--dsg-blue);\n --dsw-alias-button-primary-hover: var(--dsg-blue-strong);\n --dsw-alias-label-primary-foreground: #ffffff;\n}\n\n/* ============================================================================\n 4. right sidebar (dockkit) — 单层玻璃壳 + L1 pane bodies + L3 fullscreen\n ============================================================================\n 玻璃只在 ::before（10-shell §4）画一次；本体保持透明。之前本体也铺了 fill-l2，\n 再叠上 dockkit 各层的半透明底，整块面板被洗成不透明白 —— 面板与对话区不再共享\n 背景。这里把本体与所有中间容器清零，只留一层霜。*/\nhtml[data-dsg='on'] [data-rightbar-col] [data-sidebar-right-panel]:not([aria-hidden='true']),\nhtml[data-dsg='on'] [data-sidebar-right-panel][data-sidebar-right-open] {\n background-color: transparent;\n background-image: none;\n -webkit-backdrop-filter: none;\n backdrop-filter: none;\n border-left: 0.5px solid var(--dsg-border-hair);\n border-radius: 18px 0 0 18px;\n box-shadow: -14px 0 44px rgba(44, 74, 140, 0.1);\n z-index: var(--dsh-dockkit-dock-layer, 10);\n}\n/* closed state must be explicitly clean (container stays mounted) */\nhtml[data-dsg='on'] [data-rightbar-col] [data-sidebar-right-panel][aria-hidden='true'] {\n background: none;\n background-image: none;\n border-left: none;\n box-shadow: none;\n -webkit-backdrop-filter: none;\n backdrop-filter: none;\n}\n/* fullscreen right panel = detail surface → L3（只换 ::before 的两个变量） */\nhtml[data-dsg='on'] [data-sidebar-right-panel][data-sidebar-right-mode='fullscreen'] {\n --dsg-panel-fill: var(--dsg-fill-l3);\n --dsg-panel-backdrop: var(--dsg-backdrop-l3);\n}\n/* dockkit 中间层全部透明：surface / host / pane / paneBody / panelBody / tabHost…\n 这些容器原本各带 --dsw-alias-bg-base 或 bg-layer 层，叠在玻璃壳上会发白。 */\nhtml[data-dsg='on'] [data-sidebar-right-panel] :is(\n [data-dockkit-surface],\n [data-dockkit-host],\n [data-dockkit-pane],\n [data-dockkit-content],\n [class*='_panelBody'],\n [class*='_tabLayout'],\n [class*='_tabCell'],\n [class*='_tabHost'],\n [class*='_paneBody']\n ) {\n background-color: transparent !important;\n background-image: none !important;\n}\nhtml[data-dsg='on'] [data-sidebar-right-panel] [data-dockkit-pane] {\n border-radius: 14px;\n overflow: hidden;\n}\n/* tab strip: capsule tabs */\nhtml[data-dsg='on'] [data-sidebar-right-panel] [data-dockkit-strip] {\n background-color: transparent;\n padding-bottom: 4px;\n}\nhtml[data-dsg='on'] [data-sidebar-right-panel] [data-dockkit-tab] {\n border-radius: 9px;\n color: var(--dsw-alias-label-secondary);\n transition:\n background-color var(--dsg-motion-dur) var(--dsg-ease),\n color var(--dsg-motion-dur) var(--dsg-ease);\n}\nhtml[data-dsg='on'] [data-sidebar-right-panel] [data-dockkit-tab]:hover {\n background-color: rgba(77, 107, 254, 0.07);\n color: var(--dsw-alias-label-primary);\n}\nhtml[data-dsg='on'] [data-sidebar-right-panel] [data-dockkit-tab][data-dockkit-tab-active],\nhtml[data-dsg='on'] [data-sidebar-right-panel] [data-dockkit-tab][aria-selected='true'] {\n background-color: rgba(77, 107, 254, 0.1);\n color: var(--dsg-blue-strong);\n font-weight: 500;\n}\nhtml[data-dsg='on'] [data-sidebar-right-panel] [data-dockkit-divider] {\n background: var(--dsg-border-hair);\n}\n/* right-panel guide entries */\nhtml[data-dsg='on'] [data-sidebar-right-panel] [data-sidebar-right-guide-entry],\nhtml[data-dsg='on'] [data-sidebar-right-panel] :is(button, a)[class*='_entry'] {\n background-color: var(--dsg-fill-l2);\n background-image: var(--dsg-sheen-l2);\n border: 0.5px solid var(--dsg-border-hair);\n border-radius: 16px;\n box-shadow: var(--dsg-bevel-l1);\n}\nhtml[data-dsg='on'] [data-sidebar-right-panel] :is(button, a)[class*='_entry']:hover {\n background-color: color-mix(in srgb, var(--dsg-blue) 4%, var(--dsg-fill-l2));\n}\n\n/* ============================================================================\n 5. document preview — opaque paper plate (readability first)\n ----------------------------------------------------------------------------\n 文档预览 / 文本预览 / PDF 页是“读字”的 L3 面：背景必须完全不透明，否则对话区\n 的高对比文字会透上来，和预览内容叠成“双行字”（用户反馈）。宿主 token\n --dsw-alias-bg-document-preview 也已映射到同一张纸（00-foundation）。\n ========================================================================== */\nhtml[data-dsg='on'] [data-document-preview],\nhtml[data-dsg='on'] [data-textpreview-state],\nhtml[data-dsg='on'] [data-textpreview-wrap],\nhtml[data-dsg='on'] [data-code-preview],\nhtml[data-dsg='on'] [data-pdf-preview],\nhtml[data-dsg='on'] [data-html-preview],\nhtml[data-dsg='on'] [data-document-markdown],\nhtml[data-dsg='on'] [data-plan-preview] [class*='_document'] {\n background-color: var(--dsg-doc-paper) !important;\n background-image: none !important;\n -webkit-backdrop-filter: none !important;\n backdrop-filter: none !important;\n border: 0.5px solid var(--dsg-border-hair);\n border-radius: 14px;\n box-shadow: var(--dsg-bevel-l1);\n color: var(--dsw-alias-label-primary);\n}\n/* 预览所在的整个面板 / dockkit 容器也一起做实：预览通常铺满 tab，\n 只把纸面做实、父容器仍透，文字照样会从纸外的边角透上来。 */\nhtml[data-dsg='on'] [data-sidebar-right-panel]:has([data-document-preview]),\nhtml[data-dsg='on'] [data-dockkit-pane]:has([data-document-preview]),\nhtml[data-dsg='on'] [data-dockkit-content]:has([data-document-preview]),\nhtml[data-dsg='on'] [data-dockkit-surface]:has([data-document-preview]),\nhtml[data-dsg='on'] [data-dockkit-host]:has([data-document-preview]),\nhtml[data-dsg='on'] [data-slot='sidebar-right']:has([data-document-preview]),\nhtml[data-dsg='on'] [role='dialog']:has([data-document-preview]),\nhtml[data-dsg='on'] [data-shell-overlay] :has(> [data-document-preview]),\nhtml[data-dsg='on'] [data-slot='sidebar-documentpreview'] {\n --dsg-panel-fill: var(--dsg-doc-paper);\n --dsg-panel-backdrop: none;\n background-color: var(--dsg-doc-paper) !important;\n background-image: none !important;\n -webkit-backdrop-filter: none !important;\n backdrop-filter: none !important;\n}\nhtml[data-dsg='on'] [data-document-preview] [class*='_header'],\nhtml[data-dsg='on'] [data-textpreview-wrap] [class*='_header'] {\n background-color: color-mix(in srgb, var(--dsg-tint) 62%, transparent);\n border-bottom: 0.5px solid var(--dsg-border-hair);\n border-radius: 14px 14px 0 0;\n}\nhtml[data-dsg='on'] [data-document-preview] [class*='_page'],\nhtml[data-dsg='on'] [data-document-preview] [class*='_body'],\nhtml[data-dsg='on'] [data-textpreview-wrap] [class*='_body'] {\n background-color: transparent;\n}\nhtml[data-dsg='on'] [data-document-preview] [class*='_frontmatter'] {\n background-color: var(--dsg-fill-l1);\n border: 0.5px solid var(--dsg-border-hair);\n border-radius: 10px;\n}\n/* plan preview inside the right panel */\nhtml[data-dsg='on'] [data-plan-preview] {\n background-color: var(--dsg-fill-l3);\n background-image: var(--dsg-sheen-l3);\n border-radius: var(--dsg-radius-modal);\n box-shadow: var(--dsg-bevel-l2);\n}\n\n/* ============================================================================\n 6. MCP 连接器页面（profile 插件 dsh-mcp-connector）\n — 顶部白块融合 + 「推荐」卡片黄边去色\n ----------------------------------------------------------------------------\n 结构（源码证据见报告）：\n · 主文档里是 `.mcpConnectorMarketPanel`（panel 模式 role=region，\n dialog 模式 role=dialog），内容装在同源 iframe `/mcp-connector/ui/` 里。\n · iframe 页面只有它自己的 <style>，主文档 CSS 不能跨文档命中它的 DOM，\n 所以这里不能直接写 `header {}` / `.card.featured {}`。\n · 唯一 CSS-only 通道：该 iframe 页面里有一段宿主主题桥\n (`<script id=\"dsh-theme-bridge\">`，dsh-host-theme-compat 注入)，它在\n 首帧把父页面 body 上**计算后**的 --dsw-alias-* 令牌抄进 iframe :root。\n 因此只要在「MCP 面板存在时」改写父页面 body 上的两个令牌，\n iframe 内就会跟着变：\n --dsw-alias-bg-overlay → iframe --surface-overlay\n → header / .detail-header / .modal .m-actions 的背景。\n 原来它 = L3(0.97 白) —— 就是页顶那条生硬白块；改成蓝白半透玻璃。\n --dsw-alias-state-warn-primary → iframe --warn\n → .card.featured 的描边（原来 #fbbf24 琥珀黄）；改成蓝灰，\n 与其它卡片的 --line 发丝边同一色系。\n 作用域：:has(.mcpConnectorMarketPanel) 只在 MCP 页挂载期间成立。DSH 的\n MainPanel 只渲染当前选中的 main 条目，面板卸载/切走后面板节点消失，两个令牌\n 立刻恢复原值，不影响对话页、设置页等其它页面。\n 降级：宿主升级若把 iframe 里的 dsh-theme-compat 桥去掉，iframe 会回落到它\n 自带的浅色调色板，本段规则自然不生效（无副作用）。\n ========================================================================== */\n\n/* 顶部白块 → 蓝白玻璃（iframe 用 --surface-overlay 画 header 背景） */\nhtml[data-dsg='on']:has(.mcpConnectorMarketPanel) body {\n --dsw-alias-bg-overlay: rgba(240, 245, 255, 0.66);\n}\nhtml[data-dsg='on']:has(.mcpConnectorMarketPanel) body[data-ds-dark-theme] {\n --dsw-alias-bg-overlay: rgba(24, 35, 56, 0.62);\n}\n\n/* 「推荐」卡片黄边 → 中性蓝灰（iframe 的 .card.featured 用 var(--warn) 描边）\n 同一个 --warn 还用于 iframe 内的「去配置/授权」警告按钮文字，所以取可读的\n 石板蓝（#64748b 在白底上 ≈4.8:1），而不是极淡的 hairline 值，避免按钮文字\n 发虚。 */\nhtml[data-dsg='on']:has(.mcpConnectorMarketPanel) body {\n --dsw-alias-state-warn-primary: #64748b;\n}\nhtml[data-dsg='on']:has(.mcpConnectorMarketPanel) body[data-ds-dark-theme] {\n --dsw-alias-state-warn-primary: #9aa8c2;\n}\n\n/* 把面板自身的磨砂底钉回原来的配方：上面的 --dsw-alias-bg-overlay 覆盖是给\n iframe 用的，如果不钉住，dialog 模式的面板 ::before 会跟着变透。\n （panel 模式 role=region 的 ::before 本来就是 display:none。） */\nhtml[data-dsg='on'] .mcpConnectorMarketPanel::before {\n background-color: color-mix(in srgb, var(--dsg-fill-l3) 72%, transparent);\n}\n\n/* ===== 95-settings-panel.css ===== */\n/* ============================================================================\n 95 plugin settings panel (rendered inside Settings → settings.section)\n Uses its own .dsg-* vocabulary so it never collides with shipped UI.\n ========================================================================== */\nhtml[data-dsg='on'] .dsg-settings {\n display: flex;\n flex-direction: column;\n gap: 18px;\n max-width: 760px;\n color: var(--dsw-alias-label-primary);\n}\nhtml[data-dsg='on'] .dsg-settings-head {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\nhtml[data-dsg='on'] .dsg-settings-title {\n font-size: 15px;\n font-weight: 600;\n letter-spacing: 0.01em;\n}\nhtml[data-dsg='on'] .dsg-settings-sub {\n font-size: 12px;\n line-height: 1.6;\n color: var(--dsw-alias-label-tertiary);\n}\nhtml[data-dsg='on'] .dsg-settings-body {\n display: flex;\n flex-direction: column;\n gap: 4px;\n padding: 8px 18px;\n border-radius: var(--dsg-radius-card);\n background: rgba(255, 255, 255, calc(0.5 * var(--dsg-glass, 1)));\n border: 1px solid var(--dsw-alias-border-l2);\n -webkit-backdrop-filter: blur(var(--dsg-card-blur)) saturate(var(--dsg-sat));\n backdrop-filter: blur(var(--dsg-card-blur)) saturate(var(--dsg-sat));\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.55),\n 0 10px 30px rgba(44, 74, 140, 0.08);\n}\nhtml[data-dsg='on'] body[data-ds-dark-theme] .dsg-settings-body {\n background: rgba(22, 33, 58, calc(0.6 * var(--dsg-glass, 1)));\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.08),\n 0 14px 36px rgba(0, 0, 0, 0.32);\n}\nhtml[data-dsg='on'] .dsg-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n padding: 14px 0;\n border-bottom: 1px solid var(--dsw-alias-border-l1);\n}\nhtml[data-dsg='on'] .dsg-row:last-child {\n border-bottom: 0;\n}\nhtml[data-dsg='on'] .dsg-row-text {\n min-width: 0;\n}\nhtml[data-dsg='on'] .dsg-row-label {\n font-size: 13px;\n font-weight: 500;\n}\nhtml[data-dsg='on'] .dsg-row-hint {\n margin-top: 3px;\n font-size: 11px;\n color: var(--dsw-alias-label-tertiary);\n}\nhtml[data-dsg='on'] .dsg-row-control {\n display: flex;\n align-items: center;\n gap: 10px;\n flex: 0 0 auto;\n}\nhtml[data-dsg='on'] .dsg-slider {\n display: flex;\n align-items: center;\n gap: 10px;\n}\nhtml[data-dsg='on'] .dsg-slider input[type='range'] {\n width: 148px;\n accent-color: var(--dsg-blue);\n}\nhtml[data-dsg='on'] .dsg-slider-value {\n width: 40px;\n font-size: 12px;\n font-variant-numeric: tabular-nums;\n color: var(--dsw-alias-label-secondary);\n text-align: right;\n}\nhtml[data-dsg='on'] .dsg-seg {\n display: inline-flex;\n padding: 3px;\n gap: 2px;\n border-radius: 999px;\n background: rgba(77, 107, 254, 0.07);\n border: 1px solid var(--dsw-alias-border-l1);\n}\nhtml[data-dsg='on'] .dsg-seg-btn {\n border: 0;\n background: transparent;\n color: var(--dsw-alias-label-secondary);\n font-size: 12px;\n line-height: 1;\n padding: 7px 13px;\n border-radius: 999px;\n cursor: pointer;\n transition: background var(--dsg-motion-dur) var(--dsg-ease), color var(--dsg-motion-dur) var(--dsg-ease);\n}\nhtml[data-dsg='on'] .dsg-seg-btn:hover {\n color: var(--dsw-alias-label-primary);\n background: rgba(255, 255, 255, 0.5);\n}\nhtml[data-dsg='on'] .dsg-seg-btn.is-on {\n color: var(--dsg-blue);\n background: #fff;\n box-shadow: 0 2px 8px rgba(44, 74, 140, 0.12);\n}\nhtml[data-dsg='on'] body[data-ds-dark-theme] .dsg-seg-btn.is-on {\n background: rgba(77, 107, 254, 0.28);\n color: #dce6ff;\n}\nhtml[data-dsg='on'] .dsg-switch {\n position: relative;\n width: 44px;\n height: 26px;\n padding: 0;\n border-radius: 999px;\n border: 1px solid var(--dsw-alias-border-l2);\n background: rgba(120, 140, 180, 0.22);\n cursor: pointer;\n transition: background var(--dsg-motion-dur) var(--dsg-ease);\n}\nhtml[data-dsg='on'] .dsg-switch .dsg-switch-thumb {\n position: absolute;\n top: 3px;\n left: 3px;\n width: 18px;\n height: 18px;\n border-radius: 50%;\n background: #fff;\n box-shadow: 0 1px 4px rgba(20, 40, 90, 0.24);\n transition: transform var(--dsg-motion-dur) var(--dsg-ease);\n}\nhtml[data-dsg='on'] .dsg-switch.is-on {\n background: var(--dsg-blue);\n border-color: transparent;\n}\nhtml[data-dsg='on'] .dsg-switch.is-on .dsg-switch-thumb {\n transform: translateX(18px);\n}\nhtml[data-dsg='on'] .dsg-settings-foot {\n display: flex;\n justify-content: flex-end;\n padding: 12px 0 10px;\n}\nhtml[data-dsg='on'] .dsg-btn {\n border: 1px solid var(--dsw-alias-border-l2);\n background: rgba(255, 255, 255, 0.6);\n color: var(--dsw-alias-label-secondary);\n font-size: 12px;\n padding: 8px 16px;\n border-radius: 999px;\n cursor: pointer;\n transition: all var(--dsg-motion-dur) var(--dsg-ease);\n}\nhtml[data-dsg='on'] .dsg-btn:hover {\n color: var(--dsg-blue);\n border-color: var(--dsg-blue-ring);\n background: #fff;\n}\nhtml[data-dsg='on'] body[data-ds-dark-theme] .dsg-btn {\n background: rgba(255, 255, 255, 0.06);\n}\nhtml[data-dsg='on'] body[data-ds-dark-theme] .dsg-btn:hover {\n background: rgba(77, 107, 254, 0.22);\n color: #dce6ff;\n}\n"
15
15
 
16
16
  // 旧包名（v1.0–v1.6）的配置键：读新键失败时回退到旧键，避免改名丢设置。
17
17
  var STORAGE_KEY = 'dsh-skin-mistblue/config'
@@ -133,26 +133,51 @@ window.__ModuleLoader__.load({
133
133
  } catch (e) { /* keep the frost */ }
134
134
  }
135
135
 
136
- // Color mode is owned by DSH's native theme service; this plugin only
137
- // selects a mode on first activation (the reference look is the airy light
138
- // palette) and then mirrors whatever the native Appearance setting says.
136
+ // Color mode is owned by DSH's native theme service (`ui-theme` provides
137
+ // `ctx.theme`). `getTheme()` returns an immutable snapshot:
138
+ // { preference: 'light'|'dark'|'system'|<theme id>, active, themes, ... }
139
+ // The settings row must follow `preference` — the persisted choice, exactly
140
+ // like DSH's own Appearance cubes — not the resolved `active.colorScheme`
141
+ // (with `system` those differ). There is no `snapshot.id`: an earlier build
142
+ // read that field, always got `undefined`, and therefore always highlighted
143
+ // "浅色". Never keep a local copy as the truth either: the theme service owns
144
+ // persistence, and its `theme/change` event keeps this row in lockstep with
145
+ // DSH's native Appearance settings.
139
146
  function themeService(ctx) {
140
- try { return ctx.get('theme') } catch (e) { return null }
147
+ try {
148
+ var theme = ctx && ctx.get ? ctx.get('theme') : null
149
+ if (theme) return theme
150
+ } catch (e) { /* non-fatal */ }
151
+ try { return ctx && ctx.theme ? ctx.theme : null } catch (e) { return null }
152
+ }
153
+ function isColorMode(v) {
154
+ return v === 'light' || v === 'dark' || v === 'system'
141
155
  }
142
156
  function currentColor(theme) {
143
157
  try {
144
- var snap = theme && theme.getTheme && theme.getTheme()
145
- return snap && snap.id ? snap.id : 'light'
146
- } catch (e) { return 'light' }
158
+ var snap = theme && theme.getTheme ? theme.getTheme() : null
159
+ if (snap && typeof snap.preference === 'string' && snap.preference) return snap.preference
160
+ // defensive: very old snapshots only exposed the resolved palette
161
+ if (snap && snap.active && (snap.active.colorScheme === 'light' || snap.active.colorScheme === 'dark')) {
162
+ return snap.active.colorScheme
163
+ }
164
+ } catch (e) { /* non-fatal */ }
165
+ try {
166
+ var source = typeof document !== 'undefined' && document.documentElement
167
+ ? document.documentElement.getAttribute('data-ds-theme-source')
168
+ : null
169
+ if (isColorMode(source)) return source
170
+ } catch (e) { /* non-fatal */ }
171
+ return 'system' // DSH's own default preference
147
172
  }
148
173
  function setColor(ctx, id) {
174
+ if (!isColorMode(id)) return
149
175
  var theme = themeService(ctx)
150
- if (!theme || !theme.setTheme) return
151
- try { theme.setTheme(id) } catch (e) { /* non-fatal */ }
152
176
  try {
153
- window.localStorage.setItem(COLOR_KEY, id)
154
- window.localStorage.removeItem(LEGACY_COLOR_KEY)
177
+ if (theme && typeof theme.setTheme === 'function') theme.setTheme(id)
155
178
  } catch (e) { /* non-fatal */ }
179
+ // emit() re-renders the settings row right away; the service also emits
180
+ // `theme/change`, which covers DSH's native Appearance controls.
156
181
  emit()
157
182
  }
158
183
 
@@ -216,8 +241,18 @@ window.__ModuleLoader__.load({
216
241
  var cfgState = useState(state.config || DEFAULTS)
217
242
  var config = cfgState[0]
218
243
  var setConfig = cfgState[1]
244
+ // Color mode is read from the theme service on mount and refreshed on every
245
+ // change (plugin click, DSH native Appearance, OS scheme flip). A plain
246
+ // render-time read was not enough: `setColor` changed no plugin config, so
247
+ // React never re-rendered and the highlight stayed on the old option.
248
+ var colorState = useState(function () { return currentColor(themeService(ctxRef)) })
249
+ var color = colorState[0]
250
+ var setColorMode = colorState[1]
219
251
  useEffect(function () {
220
- return subscribe(function () { setConfig(state.config || DEFAULTS) })
252
+ return subscribe(function () {
253
+ setConfig(state.config || DEFAULTS)
254
+ setColorMode(currentColor(themeService(ctxRef)))
255
+ })
221
256
  }, [])
222
257
  return h('div', { className: 'dsg-settings' }, [
223
258
  h('div', { className: 'dsg-settings-head', key: 'head' }, [
@@ -226,11 +261,11 @@ window.__ModuleLoader__.load({
226
261
  ]),
227
262
  h('div', { className: 'dsg-settings-body', key: 'body' }, [
228
263
  h(Row, { key: 'color', label: T('配色', 'Color mode'), hint: T('浅色为 DeepSeek 网页端基准；深色为同构夜航玻璃', 'Light matches the DeepSeek web reference; dark is the same glass at night') }, h('div', { className: 'dsg-seg' }, ['light', 'dark', 'system'].map(function (v) {
229
- var theme = ctxRef ? themeService(ctxRef) : null
230
- var active = (theme && currentColor(theme) === v)
264
+ var active = (color === v)
231
265
  return h('button', {
232
266
  key: v,
233
267
  type: 'button',
268
+ 'aria-pressed': active,
234
269
  className: 'dsg-seg-btn' + (active ? ' is-on' : ''),
235
270
  onClick: function () { setColor(ctxRef, v) }
236
271
  }, v === 'light' ? T('浅色', 'Light') : v === 'dark' ? T('深色', 'Dark') : T('跟随系统', 'System'))
@@ -314,40 +349,51 @@ window.__ModuleLoader__.load({
314
349
  var was = active
315
350
  armed = false
316
351
  active = false
317
- if (was) html.removeAttribute('data-dsg-resizing')
318
- window.removeEventListener('pointermove', onMove, true)
352
+ startX = 0
353
+ startY = 0
354
+ if (was) {
355
+ html.removeAttribute('data-dsg-resizing')
356
+ html.removeAttribute('data-dsg-dragging-divider')
357
+ }
319
358
  window.removeEventListener('pointerup', clear, true)
320
359
  window.removeEventListener('pointercancel', clear, true)
321
360
  window.removeEventListener('blur', clear, true)
322
361
  }
323
- function onMove(e) {
324
- if (!armed || active) return
325
- var dx = e.clientX - startX
326
- var dy = e.clientY - startY
327
- if (dx * dx + dy * dy < 16) return // ~4px: clicks never trigger, drags do
328
- active = true
329
- html.setAttribute('data-dsg-resizing', '1')
330
- window.removeEventListener('pointermove', onMove, true)
331
- timer = window.setTimeout(clear, 15000) // safety net
362
+ // Only a press that actually landed on a splitter / resize handle arms the
363
+ // guard. Earlier builds armed on ANY pointer press and activated after 4px of
364
+ // movement, so selecting text in the composer flipped `data-dsg-resizing` and
365
+ // repainted every full-height column — one source of the vertical ghost seam.
366
+ function resizeTarget(target) {
367
+ if (!target || target.nodeType !== 1) return null
368
+ var divider = target.closest ? target.closest('[data-dockkit-divider]') : null
369
+ if (divider) return divider
370
+ var el = target
371
+ var depth = 0
372
+ while (el && el !== document.body && depth < 6) {
373
+ try {
374
+ var cursor = window.getComputedStyle(el).cursor || ''
375
+ if (cursor.indexOf('resize') >= 0) return el
376
+ } catch (e) { /* non-fatal */ }
377
+ el = el.parentElement
378
+ depth++
379
+ }
380
+ return null
332
381
  }
333
382
  function onDown(e) {
334
383
  if (e.button !== 0) return
384
+ var handle = resizeTarget(e.target)
385
+ if (!handle) return
335
386
  clear()
336
387
  armed = true
337
388
  startX = e.clientX
338
389
  startY = e.clientY
339
390
  // A splitter press IS a resize drag from the first frame: drop the frosted
340
- // materials immediately instead of waiting for the 4px threshold, otherwise
341
- // the first frames of every drag still pay for the full glass stack.
342
- var target = e.target
343
- var divider = target && target.closest ? target.closest('[data-dockkit-divider]') : null
344
- if (divider) {
345
- active = true
346
- html.setAttribute('data-dsg-resizing', '1')
347
- timer = window.setTimeout(clear, 15000)
348
- } else {
349
- window.addEventListener('pointermove', onMove, true)
350
- }
391
+ // materials immediately instead of waiting for a movement threshold.
392
+ active = true
393
+ html.setAttribute('data-dsg-resizing', '1')
394
+ var divider = handle.closest ? handle.closest('[data-dockkit-divider]') : null
395
+ if (divider) html.setAttribute('data-dsg-dragging-divider', '1')
396
+ timer = window.setTimeout(clear, 15000)
351
397
  window.addEventListener('pointerup', clear, true)
352
398
  window.addEventListener('pointercancel', clear, true)
353
399
  window.addEventListener('blur', clear, true)
@@ -648,11 +694,33 @@ window.__ModuleLoader__.load({
648
694
  }, 'dsh-skin-mistblue: locale labels')
649
695
  } catch (e) { /* non-fatal */ }
650
696
 
651
- // 0. first activation: adopt the DeepSeek-web light palette once. Later
652
- // changes made in DSH's native Appearance settings are left alone.
697
+ // DSH's native theme service is the single source of truth for color mode.
698
+ // Re-render the settings row whenever it publishes, so the plugin's own
699
+ // toggle, DSH's Appearance controls, and an OS scheme flip while the
700
+ // preference is `system` all move the highlight immediately.
653
701
  try {
654
- var stored = readItem(COLOR_KEY, LEGACY_COLOR_KEY)
655
- if (!stored) setColor(ctx, 'light')
702
+ ctx.effect(function () {
703
+ var off = null
704
+ var handler = function () { emit() }
705
+ try { off = ctx.on('theme/change', handler) } catch (e) { /* non-fatal */ }
706
+ return function () {
707
+ try {
708
+ if (typeof off === 'function') off()
709
+ else if (ctx.off) ctx.off('theme/change', handler)
710
+ } catch (e) { /* non-fatal */ }
711
+ }
712
+ }, 'dsh-skin-mistblue: theme labels')
713
+ } catch (e) { /* non-fatal */ }
714
+
715
+ // 0. Color mode belongs to DSH's native theme service: this plugin never
716
+ // writes a preference on activation. An earlier build forced `light` once,
717
+ // which overwrote the user's own Appearance choice (the "fight" that made
718
+ // a dark selection appear to revert), and kept a localStorage mirror that
719
+ // could resurrect a stale mode. Drop that mirror — the theme service
720
+ // already persists the user's selection.
721
+ try {
722
+ window.localStorage.removeItem(COLOR_KEY)
723
+ window.localStorage.removeItem(LEGACY_COLOR_KEY)
656
724
  } catch (e) { /* non-fatal */ }
657
725
 
658
726
  // 1. global stylesheet, owned by this plugin (removed on unload/HMR)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dsh-skin-mistblue",
3
- "version": "1.0.2",
3
+ "version": "1.0.4",
4
4
  "description": "Mistblue (雾蓝) — a DeepSeek-web inspired translucent glass skin for DeepSeek Harness: airy ambient background, liquid-glass surfaces, readability-tiered blur for cards, popups and detail panels.",
5
5
  "license": "MIT",
6
6
  "repository": {