@rexvane/piweb 0.3.15 → 0.3.16

package/src/app/globals.css

@@ -1,5 +1,7 @@
 @import "tailwindcss";
 
+@custom-variant dark (&:where([data-ds-dark-theme], [data-ds-dark-theme] *, .dark, .dark *));
+
 /* ============================================================
    Pi Web 视觉令牌
    浅色默认，深色用 body[data-ds-dark-theme]
@@ -256,6 +258,14 @@ textarea::placeholder {
 	.settings-title {
 		display: none;
 	}
+
+	.settings-row { flex-direction: column; align-items: stretch; gap: 10px; }
+	.settings-row-control { min-width: 0; }
+	.settings-row-control > .flex { flex-wrap: wrap; }
+	.settings-theme-grid, .settings-appearance-mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
+	.settings-theme-grid > button { min-width: 0; padding: 10px 6px !important; border-radius: 12px !important; }
+	.settings-theme-grid > button:last-child:nth-child(odd) { grid-column: span 2; }
+	.settings-appearance-mode-grid > button { min-width: 0; padding: 10px 6px !important; border-radius: 12px !important; }
 }
 
 /* 滚动条 */
@@ -887,6 +897,36 @@ body[data-ds-dark-theme] {
 	font-size: var(--piweb-chat-font-size);
 	line-height: 1.65;
 }
+.pw-user-message-clickable { cursor: text; transition: box-shadow 140ms ease; }
+.pw-user-message-clickable:hover { box-shadow: inset 0 0 0 1px var(--dsw-border-l2); }
+.pw-user-editor {
+	display: block;
+	width: 85%;
+	padding: 10px 12px 8px;
+	box-shadow: inset 0 0 0 1px var(--dsw-border-l2);
+}
+.pw-user-editor-input {
+	display: block;
+	width: 100%;
+	min-height: 28px;
+	max-height: 320px;
+	resize: none;
+	border: 0;
+	outline: 0;
+	background: transparent;
+	color: var(--dsw-label-primary);
+	font: inherit;
+	line-height: inherit;
+	overflow-y: auto;
+}
+.pw-user-editor-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 5px; }
+.pw-user-editor-actions button { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; }
+.pw-user-editor-cancel { color: var(--dsw-label-secondary); }
+.pw-user-editor-cancel:hover { background: var(--dsw-hover); color: var(--dsw-label-primary); }
+.pw-user-editor-send { background: var(--dsw-label-primary); color: var(--dsw-bg-base); }
+.pw-user-editor-send:hover:not(:disabled) { opacity: .82; }
+.pw-user-editor-send:disabled { opacity: .45; cursor: not-allowed; }
+.pw-user-editor-actions button:focus-visible { outline: 2px solid var(--dsw-accent); outline-offset: 2px; }
 
 /* 消息操作图标行：常显低透明度，悬停变亮（dsh 同款） */
 .msg-actions {
@@ -2037,3 +2077,740 @@ body[data-pebrel-theme="pebrel"][data-ds-dark-theme] {
 		border-radius: 0;
 	}
 }
+
+.pw-workflow-add {
+	display: grid;
+	width: 29px;
+	height: 29px;
+	flex: none;
+	place-items: center;
+	border-radius: 50%;
+	background: var(--dsw-hover);
+	color: var(--dsw-label-secondary);
+	transition: background 140ms ease, color 140ms ease, transform 140ms ease;
+}
+.pw-workflow-add:hover:not(:disabled),
+.pw-workflow-add[aria-expanded="true"] { background: var(--dsw-btn-elevated); color: var(--dsw-label-primary); }
+.pw-workflow-add[aria-expanded="true"] .pw-workflow-plus { transform: rotate(45deg); }
+.pw-workflow-add:focus-visible,
+.pw-workflow-option:focus-visible { outline: 2px solid var(--dsw-accent); outline-offset: 2px; }
+.pw-workflow-add:disabled { opacity: .55; cursor: not-allowed; }
+.pw-workflow-plus { position: relative; width: 14px; height: 14px; transition: transform 140ms ease; }
+.pw-workflow-plus::before,
+.pw-workflow-plus::after {
+	position: absolute;
+	top: 6px;
+	left: 1px;
+	width: 12px;
+	height: 1.5px;
+	border-radius: 1px;
+	background: currentColor;
+	content: "";
+}
+.pw-workflow-plus::after { transform: rotate(90deg); }
+.pw-workflow-current {
+	display: inline-flex;
+	align-items: center;
+	gap: 5px;
+	height: 25px;
+	padding: 0 4px 0 7px;
+	border: 1px solid color-mix(in srgb, var(--pw-mode-color) 30%, transparent);
+	border-radius: 8px;
+	background: color-mix(in srgb, var(--pw-mode-color) 12%, transparent);
+	color: var(--pw-mode-color);
+	font-size: 11.5px;
+	font-weight: 600;
+}
+.pw-workflow-current[data-mode="plan"] { --pw-mode-color: var(--dsw-warn); }
+.pw-workflow-current[data-mode="goal"] { --pw-mode-color: var(--dsw-accent); }
+.pw-workflow-current-icon { display: grid; place-items: center; }
+.pw-workflow-current-dismiss {
+	display: grid;
+	width: 17px;
+	height: 17px;
+	place-items: center;
+	border-radius: 4px;
+	color: inherit;
+	font-size: 17px;
+	font-weight: 400;
+	line-height: 1;
+}
+.pw-workflow-current-dismiss:hover:not(:disabled) { background: color-mix(in srgb, var(--pw-mode-color) 20%, transparent); }
+.pw-workflow-current-dismiss:disabled { opacity: .5; cursor: not-allowed; }
+.pw-workflow-current-dismiss:focus-visible { outline: 2px solid var(--pw-mode-color); outline-offset: 2px; }
+.pw-workflow-menu {
+	position: absolute;
+	bottom: calc(100% + 9px);
+	left: 0;
+	z-index: 70;
+	width: min(380px, calc(100vw - 32px));
+	padding: 6px;
+	border-radius: 14px;
+}
+.pw-workflow-menu-label {
+	padding: 5px 8px 8px;
+	color: var(--dsw-label-tertiary);
+	font-size: 10.5px;
+	font-weight: 600;
+	letter-spacing: .03em;
+}
+.pw-workflow-option {
+	display: grid;
+	grid-template-columns: 18px max-content minmax(0, 1fr) 14px;
+	align-items: center;
+	gap: 9px;
+	width: 100%;
+	min-height: 37px;
+	padding: 0 8px;
+	border-radius: 7px;
+	text-align: left;
+	transition: background 140ms ease;
+}
+.pw-workflow-option[data-mode="agent"] { --pw-mode-color: var(--dsw-label-tertiary); }
+.pw-workflow-option[data-mode="plan"] { --pw-mode-color: var(--dsw-warn); }
+.pw-workflow-option[data-mode="goal"] { --pw-mode-color: var(--dsw-accent); }
+.pw-workflow-option:hover,
+.pw-workflow-option[aria-checked="true"] { background: var(--dsw-hover); }
+.pw-workflow-option-icon { display: grid; width: 18px; place-items: center; color: var(--pw-mode-color); }
+.pw-workflow-option-name { color: var(--dsw-label-primary); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
+.pw-workflow-option-description { overflow: hidden; color: var(--dsw-label-tertiary); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
+.pw-workflow-option-check { color: var(--dsw-label-secondary); visibility: hidden; }
+.pw-workflow-option[aria-checked="true"] .pw-workflow-option-check { visibility: visible; }
+.pw-plan-ready {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) auto;
+	align-items: center;
+	gap: 8px 12px;
+	margin: 0 0 9px;
+	padding: 10px 11px;
+	border: 1px solid color-mix(in srgb, var(--dsw-warn) 30%, var(--dsw-border-l2));
+	border-radius: 15px;
+	background: color-mix(in srgb, var(--dsw-warn) 5%, var(--dsw-bg-elevated));
+	animation: pw-mode-enter 220ms cubic-bezier(.2,.7,.2,1) both;
+}
+.pw-plan-ready-content { display: flex; align-items: center; gap: 9px; min-width: 0; }
+.pw-plan-ready-icon {
+	display: grid;
+	flex: none;
+	place-items: center;
+	width: 29px;
+	height: 29px;
+	border-radius: 9px;
+	background: color-mix(in srgb, var(--dsw-warn) 13%, transparent);
+	color: var(--dsw-warn);
+}
+.pw-plan-ready-copy { display: grid; gap: 2px; min-width: 0; }
+.pw-plan-ready-copy strong { color: var(--dsw-label-primary); font-size: 12px; font-weight: 650; line-height: 1.25; }
+.pw-plan-ready-copy > span { color: var(--dsw-label-tertiary); font-size: 11px; line-height: 1.3; }
+.pw-plan-ready-actions { display: flex; align-items: center; gap: 5px; }
+.pw-plan-ready-actions button { flex: none; min-height: 28px; padding: 5px 9px; border-radius: 9px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
+.pw-plan-ready-refine { color: var(--dsw-label-secondary); }
+.pw-plan-ready-refine:hover:not(:disabled) { background: var(--dsw-hover); color: var(--dsw-label-primary); }
+.pw-plan-ready-approve {
+	display: inline-flex;
+	align-items: center;
+	gap: 2px;
+	background: var(--dsw-accent);
+	color: white;
+}
+.pw-plan-ready-approve:hover:not(:disabled) { filter: brightness(1.08); }
+.pw-plan-ready-actions button:disabled { opacity: .55; cursor: not-allowed; }
+.pw-plan-ready-actions button:focus-visible { outline: 2px solid var(--dsw-accent); outline-offset: 2px; }
+.pw-plan-ready-error { grid-column: 1 / -1; margin: 0 0 0 38px; color: var(--dsw-danger); font-size: 11px; }
+.pw-goal-active {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	min-width: 0;
+	margin: 0 3px 7px;
+	color: var(--dsw-accent);
+	font-size: 11.5px;
+}
+.pw-goal-active svg { flex: none; }
+.pw-goal-active-label { flex: none; font-weight: 600; }
+.pw-goal-active-text { overflow: hidden; color: var(--dsw-label-tertiary); text-overflow: ellipsis; white-space: nowrap; }
+@media (max-width: 560px) {
+	.pw-plan-ready { grid-template-columns: minmax(0, 1fr); }
+	.pw-plan-ready-actions { justify-content: flex-end; }
+}
+
+/* PiWeb workbench skin. Legacy --dsw tokens remain adapters for existing panels. */
+html[data-pebrel-theme="piweb"],
+body[data-pebrel-theme="piweb"] {
+	--dsw-bg-base: #f2f5ee;
+	--dsw-bg-elevated: #fbfcf8;
+	--dsw-sidebar-fill: #e8eee7;
+	--dsw-input-major: #fcfdf9;
+	--dsw-bubble: #e4f0e9;
+	--dsw-hover: rgba(42, 99, 75, .08);
+	--dsw-active: rgba(42, 99, 75, .13);
+	--dsw-label-primary: #1c2a25;
+	--dsw-label-secondary: #43564c;
+	--dsw-label-tertiary: #6d8074;
+	--dsw-label-caption: #8b9b90;
+	--dsw-border-l1: rgba(37, 70, 52, .07);
+	--dsw-border-l2: rgba(37, 70, 52, .14);
+	--dsw-border-l3: rgba(37, 70, 52, .19);
+	--dsw-border-l4: rgba(37, 70, 52, .25);
+	--dsw-accent: #2e8067;
+	--dsw-accent-soft: rgba(46, 128, 103, .12);
+	--dsw-warn: #ac7136;
+	--dsw-success: #288067;
+	--dsw-danger: #b7504a;
+	--dsw-selector: rgba(43, 89, 62, .09);
+	--dsw-layer-2: #f5f8f2;
+	--dsw-layer-3: #ecf2ea;
+	--dsw-btn-elevated: #f7faf5;
+	--dsw-btn-floating-hover: #edf4ed;
+	--dsw-module-platform: #e8efe8;
+	--dsw-border-strong: #729b82;
+	--dsw-glass-popover: #fbfdf8;
+	--dsw-glass-input: #f7faf5;
+	--dsw-glass-modal: #f9fbf7;
+	--dsw-elevation-stroke: rgba(37, 70, 52, .14);
+	--dsw-elevation-soft: 0 0 0 1px var(--dsw-elevation-stroke), 0 14px 30px rgba(37, 70, 52, .08);
+	--dsw-elevation-panel: 0 0 0 1px var(--dsw-elevation-stroke), 0 18px 42px rgba(37, 70, 52, .12);
+	--dsw-elevation-prominent: 0 0 0 1px var(--dsw-elevation-stroke), 0 24px 56px rgba(37, 70, 52, .18);
+}
+
+@media (prefers-color-scheme: dark) {
+	html[data-pebrel-theme="piweb"]:not([data-ds-light-theme]),
+	body[data-pebrel-theme="piweb"]:not([data-ds-light-theme]) {
+		--dsw-bg-base: #101816;
+		--dsw-bg-elevated: #17221e;
+		--dsw-sidebar-fill: #121d19;
+		--dsw-input-major: #1b2924;
+		--dsw-bubble: #20362c;
+		--dsw-hover: rgba(173, 230, 191, .07);
+		--dsw-active: rgba(139, 218, 168, .13);
+		--dsw-label-primary: #ecf4eb;
+		--dsw-label-secondary: #bfd0c2;
+		--dsw-label-tertiary: #92aa98;
+		--dsw-label-caption: #6e8978;
+		--dsw-border-l1: rgba(191, 225, 195, .06);
+		--dsw-border-l2: rgba(191, 225, 195, .13);
+		--dsw-border-l3: rgba(191, 225, 195, .18);
+		--dsw-border-l4: rgba(191, 225, 195, .23);
+		--dsw-accent: #84d9ad;
+		--dsw-accent-soft: rgba(132, 217, 173, .13);
+		--dsw-warn: #e5b36b;
+		--dsw-success: #83d3a4;
+		--dsw-danger: #ef8b7f;
+		--dsw-selector: rgba(176, 225, 188, .09);
+		--dsw-layer-2: #203028;
+		--dsw-layer-3: #2b3c32;
+		--dsw-btn-elevated: #22332a;
+		--dsw-btn-floating-hover: #2d4034;
+		--dsw-module-platform: #26372d;
+		--dsw-border-strong: #5c9370;
+		--dsw-glass-popover: #1d2a23;
+		--dsw-glass-input: #1b2924;
+		--dsw-glass-modal: #1b2821;
+		--dsw-elevation-stroke: rgba(191, 225, 195, .13);
+		--dsw-elevation-soft: 0 0 0 1px var(--dsw-elevation-stroke), 0 16px 32px rgba(0, 0, 0, .24);
+		--dsw-elevation-panel: 0 0 0 1px var(--dsw-elevation-stroke), 0 20px 46px rgba(0, 0, 0, .36);
+		--dsw-elevation-prominent: 0 0 0 1px var(--dsw-elevation-stroke), 0 26px 60px rgba(0, 0, 0, .48);
+	}
+}
+
+html[data-pebrel-theme="piweb"][data-ds-dark-theme],
+body[data-pebrel-theme="piweb"][data-ds-dark-theme] {
+	--dsw-bg-base: #101816;
+	--dsw-bg-elevated: #17221e;
+	--dsw-sidebar-fill: #121d19;
+	--dsw-input-major: #1b2924;
+	--dsw-bubble: #20362c;
+	--dsw-hover: rgba(173, 230, 191, .07);
+	--dsw-active: rgba(139, 218, 168, .13);
+	--dsw-label-primary: #ecf4eb;
+	--dsw-label-secondary: #bfd0c2;
+	--dsw-label-tertiary: #92aa98;
+	--dsw-label-caption: #6e8978;
+	--dsw-border-l1: rgba(191, 225, 195, .06);
+	--dsw-border-l2: rgba(191, 225, 195, .13);
+	--dsw-border-l3: rgba(191, 225, 195, .18);
+	--dsw-border-l4: rgba(191, 225, 195, .23);
+	--dsw-accent: #84d9ad;
+	--dsw-accent-soft: rgba(132, 217, 173, .13);
+	--dsw-warn: #e5b36b;
+	--dsw-success: #83d3a4;
+	--dsw-danger: #ef8b7f;
+	--dsw-selector: rgba(176, 225, 188, .09);
+	--dsw-layer-2: #203028;
+	--dsw-layer-3: #2b3c32;
+	--dsw-btn-elevated: #22332a;
+	--dsw-btn-floating-hover: #2d4034;
+	--dsw-module-platform: #26372d;
+	--dsw-border-strong: #5c9370;
+	--dsw-glass-popover: #1d2a23;
+	--dsw-glass-input: #1b2924;
+	--dsw-glass-modal: #1b2821;
+	--dsw-elevation-stroke: rgba(191, 225, 195, .13);
+	--dsw-elevation-soft: 0 0 0 1px var(--dsw-elevation-stroke), 0 16px 32px rgba(0, 0, 0, .24);
+	--dsw-elevation-panel: 0 0 0 1px var(--dsw-elevation-stroke), 0 20px 46px rgba(0, 0, 0, .36);
+	--dsw-elevation-prominent: 0 0 0 1px var(--dsw-elevation-stroke), 0 26px 60px rgba(0, 0, 0, .48);
+}
+
+.pw-shell {
+	--pw-line: color-mix(in srgb, var(--dsw-label-primary) 9%, transparent);
+	--pw-grid: color-mix(in srgb, var(--dsw-label-primary) 2.5%, transparent);
+	--pw-glow: color-mix(in srgb, var(--dsw-accent) 10%, transparent);
+}
+.pw-sidebar-surface { border-right: 1px solid var(--pw-line); }
+.pw-sidebar {
+	background: linear-gradient(165deg, color-mix(in srgb, var(--dsw-sidebar-fill) 88%, var(--dsw-accent) 12%), var(--dsw-sidebar-fill) 52%);
+}
+.pw-sidebar-head {
+	min-height: 54px;
+	padding: 12px 14px 10px;
+	border-bottom: 1px solid var(--pw-line);
+}
+.pw-brand { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
+.pw-brand-symbol { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--dsw-border-l3); border-radius: 8px; background: var(--dsw-accent-soft); }
+.pw-brand-name { color: var(--dsw-label-primary); font-size: 16px; font-weight: 700; letter-spacing: -.075em; line-height: 1; }
+.pw-brand-meta { margin-left: 4px; color: var(--dsw-label-caption); font-size: 8px; font-weight: 600; letter-spacing: .1em; white-space: nowrap; }
+.pw-sidebar-new { padding-top: 10px; padding-bottom: 5px; }
+.btn-new-session {
+	justify-content: flex-start;
+	gap: 8px;
+	height: 34px;
+	padding: 0 10px;
+	border: 1px solid var(--dsw-border-l3);
+	border-left: 3px solid var(--dsw-accent);
+	border-radius: 10px;
+	background: var(--dsw-bg-elevated);
+	font-size: 12px;
+	font-weight: 650;
+	box-shadow: 0 2px 8px color-mix(in srgb, var(--dsw-bg-base) 24%, transparent);
+}
+.btn-new-session:hover { background: var(--dsw-accent-soft); border-color: var(--dsw-accent); }
+.btn-new-session svg { color: var(--dsw-accent); }
+.pw-sidebar-section-head { padding-top: 10px; padding-bottom: 3px; }
+.pw-sidebar-section-head > span:first-child { color: var(--dsw-label-tertiary) !important; font-size: 10px !important; font-weight: 700; letter-spacing: .13em; }
+.pw-sidebar-list { padding-top: 0; }
+.pw-session-row, .pw-workspace-row { min-height: 30px; margin: 1px 0; padding: 4px 7px; border: 1px solid transparent; border-radius: 8px; }
+.pw-workspace-row { min-height: 32px; }
+.pw-session-row[data-selected], .pw-workspace-row[data-current] { border-color: var(--dsw-border-l2); }
+.pw-session-row[data-selected]::before, .pw-workspace-row[data-current]::before {
+	position: absolute;
+	top: 8px;
+	bottom: 8px;
+	left: 0;
+	width: 2px;
+	border-radius: 2px;
+	background: var(--dsw-accent);
+	content: "";
+}
+.pw-sidebar-footer { border-top: 1px solid var(--pw-line); }
+.pw-sidebar-footer > button { border-radius: 8px; }
+.pw-main { isolation: isolate; background: var(--dsw-bg-base); }
+.pw-main-hero {
+	background-image: radial-gradient(circle at 86% 10%, var(--pw-glow), transparent 38%), linear-gradient(var(--pw-grid) 1px, transparent 1px), linear-gradient(90deg, var(--pw-grid) 1px, transparent 1px);
+	background-size: auto, 48px 48px, 48px 48px;
+}
+.pw-session-header {
+	padding: 11px 24px 12px;
+	border-bottom: 1px solid var(--pw-line);
+	background: color-mix(in srgb, var(--dsw-bg-base) 88%, transparent);
+	backdrop-filter: blur(12px);
+}
+.pw-session-heading { display: flex; flex-direction: column; gap: 2px; }
+.pw-session-eyebrow { color: var(--dsw-accent); font-size: 9px; font-weight: 700; letter-spacing: .13em; line-height: 1.2; }
+.pw-session-title { display: block; color: var(--dsw-label-primary); font-size: 14px; font-weight: 650; line-height: 1.4; }
+.pw-session-composer { padding: 8px 22px 15px; background: linear-gradient(transparent, color-mix(in srgb, var(--dsw-bg-base) 90%, transparent) 32%); }
+.pw-chat-flow { padding-top: 22px; padding-bottom: 18px; }
+.pw-conversation-turn { padding: 0 0 16px; }
+.pw-conversation-turn + .pw-conversation-turn { padding-top: 15px; border-top: 1px solid var(--pw-line); }
+.msg-user-bubble { max-width: 80%; padding: 7px 11px; border: 1px solid var(--dsw-border-l2); border-left: 2px solid var(--dsw-accent); border-radius: 13px 16px 16px 13px; background: var(--dsw-bubble); line-height: 1.5; }
+.pw-user-editor { padding: 8px 10px 6px; }
+.pw-user-editor-input { min-height: 23px; }
+.pw-user-editor-actions { margin-top: 3px; }
+.msg-actions { margin-top: 4px; opacity: .62; }
+.pw-hero { position: relative; overflow: auto; }
+.pw-hero-content { position: relative; padding: 18px 0 26px; animation: pw-hero-enter 420ms cubic-bezier(.2,.7,.2,1) both; }
+.pw-hero-intro { width: 100%; max-width: 540px; margin-inline: auto; }
+.pw-hero-identity { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; color: var(--dsw-accent); font-size: 10px; font-weight: 700; letter-spacing: .12em; }
+.pw-hero-mark { display: grid; width: 39px; height: 39px; place-items: center; border: 1px solid var(--dsw-border-l3); border-radius: 10px; background: var(--dsw-accent-soft); }
+.pw-hero-index { margin-left: auto; color: var(--dsw-label-caption); font-size: 9px; font-weight: 500; letter-spacing: .07em; }
+.pw-hero-title { max-width: 17ch; margin: 0 0 11px; color: var(--dsw-label-primary); font-size: clamp(28px, 3.3vw, 43px); font-weight: 650; letter-spacing: -.075em; line-height: 1.23; }
+.pw-hero-description { margin: 0 0 22px; color: var(--dsw-label-tertiary); font-size: 12.5px; letter-spacing: -.01em; line-height: 1.7; }
+.pw-hero-workspace { margin-bottom: 6px; }
+.hero-chip { height: 31px; padding: 0 10px; border: 1px solid var(--dsw-border-l2); border-radius: 8px; background: var(--dsw-bg-elevated); font-size: 12px; }
+.hero-chip:hover, .hero-chip[data-open="true"] { border-color: var(--dsw-border-l3); background: var(--dsw-hover); }
+.pw-composer-shell { max-width: 540px; margin-inline: auto; transition: max-width 220ms cubic-bezier(.2,.7,.2,1); }
+.pw-composer-shell[data-expanded="true"] { max-width: var(--dsh-composer-card-max-width); }
+.pw-composer {
+	--pw-composer-accent: var(--dsw-accent);
+	border: 1px solid rgba(226, 232, 240, 0.9);
+	border-radius: 24px;
+	background: #FFFFFF;
+	box-shadow: 10px 14px 28px rgba(166, 178, 198, 0.35),
+		-8px -8px 20px rgba(255, 255, 255, 0.95),
+		inset 1px 1px 2px rgba(255, 255, 255, 0.9);
+	transition: border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
+}
+html[data-ds-dark-theme] .pw-composer {
+	border-color: rgba(255, 255, 255, 0.08);
+	background: #1c212b;
+	box-shadow: 10px 14px 28px rgba(0, 0, 0, 0.45),
+		-6px -6px 16px rgba(255, 255, 255, 0.03),
+		inset 1px 1px 1px rgba(255, 255, 255, 0.06);
+}
+.pw-composer::after {
+	position: absolute;
+	right: 22px;
+	bottom: -1px;
+	left: 22px;
+	height: 2px;
+	border-radius: 2px;
+	background: linear-gradient(90deg, transparent, var(--pw-composer-accent), transparent);
+	content: "";
+	opacity: 0;
+	pointer-events: none;
+	transform: scaleX(.55);
+	transition: opacity 240ms ease, transform 300ms cubic-bezier(.2,.7,.2,1);
+}
+.pw-composer:focus-within { border-color: color-mix(in srgb, var(--pw-composer-accent) 50%, var(--dsw-border-l3)); box-shadow: var(--dsw-elevation-soft), 0 0 0 3px color-mix(in srgb, var(--pw-composer-accent) 10%, transparent); }
+.pw-composer[data-mode="plan"] { --pw-composer-accent: var(--dsw-warn); }
+.pw-composer[data-mode="goal"] { --pw-composer-accent: var(--dsw-accent); }
+.pw-composer[data-mode="plan"], .pw-composer[data-mode="goal"] {
+	border-color: color-mix(in srgb, var(--pw-composer-accent) 38%, var(--dsw-border-l3));
+	background-color: color-mix(in srgb, var(--dsw-input-major) 96%, var(--pw-composer-accent) 4%);
+}
+.pw-composer[data-mode="plan"]::after, .pw-composer[data-mode="goal"]::after { opacity: .72; transform: scaleX(1); }
+.pw-composer-body { min-height: 29px; padding: 4px 13px 0; }
+.pw-composer-toolbar { height: 35px; gap: 6px; padding: 1px 10px 4px; container-type: inline-size; }
+.pw-model-selector { flex: 0 1 auto; margin-left: auto; }
+.pw-model-selector .chip { display: flex; }
+.pw-workflow-add { width: 27px; height: 27px; border: 1px solid var(--dsw-border-l2); border-radius: 9px; background: var(--dsw-bg-elevated); }
+.pw-workflow-add:hover:not(:disabled), .pw-workflow-add[aria-expanded="true"] { border-color: var(--dsw-border-l3); background: var(--dsw-accent-soft); color: var(--dsw-accent); }
+.pw-workflow-current { height: 27px; padding-right: 5px; border-radius: 999px; animation: pw-mode-enter 230ms cubic-bezier(.2,.7,.2,1) both; }
+.pw-workflow-menu { border-radius: 15px; border: 1px solid var(--dsw-border-l3); padding: 7px; box-shadow: var(--dsw-elevation-panel); }
+.pw-workflow-menu-label { padding: 5px 9px 8px; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
+.pw-workflow-option { min-height: 39px; border-radius: 9px; }
+.pw-workflow-option[aria-checked="true"] { background: var(--dsw-accent-soft); }
+.pw-workflow-option-name { font-size: 12px; }
+.pw-workflow-option-description { font-size: 11px; }
+.btn-primary-circle {
+	width: 32px;
+	height: 32px;
+	margin: 0;
+	border-radius: 9999px;
+	background: linear-gradient(135deg, #34D399, #059669);
+	color: #FFFFFF;
+	box-shadow: 4px 6px 12px rgba(16, 185, 129, 0.35),
+		-2px -2px 6px rgba(255, 255, 255, 0.8),
+		inset 1px 1px 2px rgba(255, 255, 255, 0.5);
+	transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.btn-primary-circle:hover:not(:disabled) {
+	opacity: 1;
+	filter: brightness(1.08);
+	transform: translateY(-1px) scale(1.04);
+	box-shadow: 6px 8px 16px rgba(16, 185, 129, 0.45), -3px -3px 8px rgba(255, 255, 255, 0.9);
+}
+.btn-primary-circle:active:not(:disabled) {
+	transform: translateY(1px) scale(0.96);
+	box-shadow: inset 2px 2px 4px rgba(0, 86, 59, 0.45);
+}
+.btn-ghost-circle { margin: 0; border-radius: 12px; transform: none; }
+.popover { border: 1px solid var(--dsw-border-l2); border-radius: 11px; }
+.icon-btn, .rail-btn { border-radius: 8px; }
+.icon-btn:hover, .rail-btn:hover { color: var(--dsw-accent); background: var(--dsw-accent-soft); }
+.btn-outline, .btn-primary-white, .select-chip { border-radius: 9px; }
+@keyframes pw-hero-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+@keyframes pw-mode-enter { from { opacity: 0; transform: translateY(4px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
+@media (max-width: 840px) {
+	.pw-sidebar-surface { border-right: 0; }
+	.pw-hero { justify-content: center; padding: 26px 20px; }
+	.pw-hero-content { padding-bottom: 20px; }
+	.pw-hero-title { font-size: clamp(28px, 8vw, 38px); }
+	.pw-hero-description { margin-bottom: 20px; }
+	.pw-session-header { padding-left: 56px; padding-right: 12px; }
+	.pw-session-composer { padding: 8px 10px 13px; }
+	.pw-brand-meta { display: none; }
+}
+@media (prefers-reduced-motion: reduce) {
+	.pw-hero-content, .pw-workflow-current { animation: none; }
+	.pw-composer, .pw-composer::after, .pw-composer-shell { transition: none; }
+}
+
+/* ============================================================
+   Soft Claymorphism Design System Tokens & Classes
+   ============================================================ */
+
+:root {
+	--clay-bg: #F0F4F8;
+	--clay-surface: #FFFFFF;
+	--clay-sidebar: #F8FAFC;
+	--clay-mint: #10B981;
+	--clay-mint-deep: #059669;
+	--clay-mint-soft: #ECFDF5;
+	--clay-peach: #FB923C;
+	--clay-peach-deep: #EA580C;
+	--clay-peach-soft: #FFF7ED;
+	--clay-sky: #0284C7;
+	--clay-sky-deep: #0369A1;
+	--clay-sky-soft: #F0F9FF;
+	--clay-lavender: #6366F1;
+	--clay-lavender-soft: #EEF2FF;
+	--clay-slate-text: #0F172A;
+	--clay-subtext: #475569;
+	--clay-muted: #64748B;
+
+	--clay-shadow-card: 12px 14px 28px rgba(166, 178, 198, 0.35),
+		-10px -10px 24px rgba(255, 255, 255, 0.95),
+		inset 1.5px 1.5px 3px rgba(255, 255, 255, 0.8),
+		inset -2px -2px 4px rgba(166, 178, 198, 0.12);
+	--clay-shadow-surface: 8px 10px 22px rgba(160, 174, 192, 0.22),
+		-8px -8px 20px rgba(255, 255, 255, 0.95);
+	--clay-shadow-inset: inset 4px 4px 8px rgba(166, 178, 198, 0.4),
+		inset -4px -4px 8px rgba(255, 255, 255, 0.9);
+	--clay-shadow-btn: 5px 6px 12px rgba(148, 163, 184, 0.32),
+		-4px -4px 10px rgba(255, 255, 255, 0.95),
+		inset 1px 1px 2px rgba(255, 255, 255, 0.9),
+		inset -1px -1px 2px rgba(100, 116, 139, 0.15);
+	--clay-shadow-btn-active: inset 3px 3px 6px rgba(148, 163, 184, 0.4),
+		inset -2px -2px 5px rgba(255, 255, 255, 0.85);
+}
+
+html[data-ds-dark-theme],
+body[data-ds-dark-theme],
+html.dark,
+body.dark {
+	--clay-bg: #13171F;
+	--clay-surface: #1E232D;
+	--clay-sidebar: #181C24;
+	--clay-slate-text: #F8FAFC;
+	--clay-subtext: #CBD5E1;
+	--clay-muted: #94A3B8;
+	--clay-shadow-card: 12px 14px 28px rgba(0, 0, 0, 0.45),
+		-8px -8px 20px rgba(255, 255, 255, 0.04),
+		inset 1px 1px 2px rgba(255, 255, 255, 0.1),
+		inset -2px -2px 4px rgba(0, 0, 0, 0.4);
+	--clay-shadow-surface: 8px 10px 22px rgba(0, 0, 0, 0.4),
+		-6px -6px 18px rgba(255, 255, 255, 0.03);
+	--clay-shadow-inset: inset 4px 4px 8px rgba(0, 0, 0, 0.5),
+		inset -4px -4px 8px rgba(255, 255, 255, 0.04);
+}
+
+.clay-card {
+	background: var(--clay-surface);
+	color: var(--clay-slate-text);
+	border-radius: 1.5rem;
+	box-shadow: var(--clay-shadow-card);
+	border: 1px solid rgba(255, 255, 255, 0.8);
+	transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+html[data-ds-dark-theme] .clay-card,
+html.dark .clay-card {
+	border-color: rgba(255, 255, 255, 0.08);
+}
+
+.clay-surface {
+	background: var(--clay-sidebar);
+	color: var(--clay-slate-text);
+	border-radius: 1.75rem;
+	box-shadow: var(--clay-shadow-surface);
+	border: 1px solid rgba(255, 255, 255, 0.9);
+}
+html[data-ds-dark-theme] .clay-surface,
+html.dark .clay-surface {
+	border-color: rgba(255, 255, 255, 0.06);
+}
+
+.clay-inset {
+	background: #EFF3F8;
+	color: var(--clay-slate-text);
+	border-radius: 1.25rem;
+	box-shadow: var(--clay-shadow-inset);
+	border: 1px solid rgba(226, 232, 240, 0.6);
+}
+html[data-ds-dark-theme] .clay-inset,
+html.dark .clay-inset {
+	background: #141820;
+	border-color: rgba(255, 255, 255, 0.05);
+}
+
+.clay-code-window {
+	background-color: #0d1117 !important;
+	border-radius: 1.25rem;
+	box-shadow: inset 4px 4px 12px rgba(0, 0, 0, 0.6), inset -2px -2px 6px rgba(255, 255, 255, 0.04);
+	border: 1px solid rgba(255, 255, 255, 0.12);
+	color: #f0f6fc !important;
+}
+
+.clay-btn {
+	position: relative;
+	border-radius: 9999px;
+	transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+	box-shadow: var(--clay-shadow-btn);
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	user-select: none;
+}
+.clay-btn:hover {
+	transform: translateY(-2px) scale(1.02);
+	box-shadow: 7px 9px 16px rgba(148, 163, 184, 0.38), -5px -5px 12px rgba(255, 255, 255, 1);
+}
+.clay-btn:active {
+	transform: translateY(1px) scale(0.98);
+	box-shadow: var(--clay-shadow-btn-active);
+}
+
+.clay-btn-mint, .clay-btn-primary {
+	background: linear-gradient(135deg, #34D399, #059669);
+	color: #FFFFFF;
+	box-shadow: 6px 8px 18px rgba(16, 185, 129, 0.35),
+		-4px -4px 12px rgba(255, 255, 255, 0.9),
+		inset 1.5px 1.5px 3px rgba(255, 255, 255, 0.6),
+		inset -2px -2px 4px rgba(4, 120, 87, 0.35);
+}
+.clay-btn-mint:active, .clay-btn-primary:active {
+	box-shadow: inset 3px 3px 6px rgba(0, 86, 59, 0.5);
+	transform: translateY(1px) scale(0.98);
+}
+
+.clay-btn-peach {
+	background: linear-gradient(135deg, #FB923C, #EA580C);
+	color: #FFFFFF;
+	box-shadow: 6px 8px 18px rgba(249, 115, 22, 0.35),
+		-4px -4px 12px rgba(255, 255, 255, 0.9),
+		inset 1.5px 1.5px 3px rgba(255, 255, 255, 0.6),
+		inset -2px -2px 4px rgba(194, 65, 12, 0.35);
+}
+
+.clay-btn-soft {
+	background-color: #FFFFFF;
+	box-shadow: 4px 5px 10px rgba(166, 178, 198, 0.25),
+		-4px -4px 8px rgba(255, 255, 255, 0.9);
+	transition: all 0.15s ease-out;
+}
+html[data-ds-dark-theme] .clay-btn-soft {
+	background-color: #242934;
+	box-shadow: 4px 5px 10px rgba(0, 0, 0, 0.4),
+		-3px -3px 6px rgba(255, 255, 255, 0.04);
+}
+.clay-btn-soft:active {
+	box-shadow: inset 2px 2px 4px rgba(166, 178, 198, 0.35);
+	transform: translateY(1px);
+}
+
+.clay-bubble-user {
+	background: linear-gradient(145deg, #38BDF8, #0284C7);
+	color: #FFFFFF !important;
+	border-radius: 1.5rem 1.5rem 0.4rem 1.5rem;
+	padding: 12px 18px;
+	box-shadow: 6px 8px 18px rgba(2, 132, 199, 0.3),
+		-3px -3px 8px rgba(255, 255, 255, 0.7),
+		inset 1.5px 1.5px 2px rgba(255, 255, 255, 0.6),
+		inset -2px -2px 3px rgba(3, 105, 161, 0.35);
+}
+.clay-bubble-user .md,
+.clay-bubble-user .md p {
+	color: #FFFFFF !important;
+}
+.clay-bubble-user .md code {
+	background: rgba(255, 255, 255, 0.22) !important;
+	color: #FFFFFF !important;
+	border-radius: 6px;
+	padding: 2px 5px;
+}
+.clay-bubble-user .md pre {
+	background: rgba(15, 23, 42, 0.45) !important;
+	color: #F8FAFC !important;
+	border-radius: 12px;
+	padding: 12px;
+}
+.clay-bubble-user .md a {
+	color: #E0F2FE !important;
+	text-decoration: underline;
+}
+
+.clay-badge {
+	border-radius: 9999px;
+	box-shadow: 2px 3px 6px rgba(166, 178, 198, 0.25),
+		-2px -2px 5px rgba(255, 255, 255, 0.9),
+		inset 1px 1px 1px rgba(255, 255, 255, 0.8),
+		inset -1px -1px 1px rgba(148, 163, 184, 0.15);
+}
+
+.clay-code-pill {
+	background: #F1F5F9;
+	border-radius: 0.6rem;
+	box-shadow: inset 2px 2px 4px rgba(148, 163, 184, 0.28),
+		inset -2px -2px 4px rgba(255, 255, 255, 0.95);
+	border: 1px solid rgba(226, 232, 240, 0.8);
+	font-family: var(--font-mono);
+}
+html[data-ds-dark-theme] .clay-code-pill {
+	background: #141820;
+	border-color: rgba(255, 255, 255, 0.08);
+}
+
+/* Ocean Ink uses the same surface tokens as the other selectable themes. */
+html[data-pebrel-theme="ocean-ink"],
+body[data-pebrel-theme="ocean-ink"] {
+	--dsw-bg-base: #edf6fa;
+	--dsw-bg-elevated: #f9fcfe;
+	--dsw-sidebar-fill: #e3f0f6;
+	--dsw-input-major: #ffffff;
+	--dsw-bubble: #dceef8;
+	--dsw-hover: rgba(2, 132, 199, 0.09);
+	--dsw-active: rgba(2, 132, 199, 0.16);
+	--dsw-label-primary: #183244;
+	--dsw-label-secondary: #426074;
+	--dsw-label-tertiary: #698699;
+	--dsw-label-caption: #879eaa;
+	--dsw-border-l1: rgba(30, 83, 112, 0.08);
+	--dsw-border-l2: rgba(30, 83, 112, 0.14);
+	--dsw-border-l3: rgba(30, 83, 112, 0.2);
+	--dsw-border-l4: rgba(30, 83, 112, 0.27);
+	--dsw-accent: #0284c7;
+	--dsw-accent-soft: rgba(2, 132, 199, 0.14);
+	--dsw-success: #0c8b81;
+	--dsw-selector: rgba(2, 132, 199, 0.1);
+	--dsw-layer-2: #f2f9fc;
+	--dsw-layer-3: #e4f1f7;
+	--dsw-btn-elevated: #f8fcfe;
+	--dsw-btn-floating-hover: #e4f1f7;
+	--dsw-module-platform: #e3f0f6;
+	--dsw-border-strong: #5e9dbb;
+	--dsw-glass-popover: #f9fcfe;
+	--dsw-glass-input: #ffffff;
+	--dsw-glass-modal: #f9fcfe;
+}
+
+html[data-pebrel-theme="ocean-ink"][data-ds-dark-theme],
+body[data-pebrel-theme="ocean-ink"][data-ds-dark-theme] {
+	--dsw-bg-base: #0d1821;
+	--dsw-bg-elevated: #142431;
+	--dsw-sidebar-fill: #101f2b;
+	--dsw-input-major: #192d3b;
+	--dsw-bubble: #193748;
+	--dsw-hover: rgba(125, 211, 252, 0.1);
+	--dsw-active: rgba(56, 189, 248, 0.19);
+	--dsw-label-primary: #e8f6fc;
+	--dsw-label-secondary: #b7d3e0;
+	--dsw-label-tertiary: #87aabb;
+	--dsw-label-caption: #648696;
+	--dsw-border-l1: rgba(153, 213, 239, 0.07);
+	--dsw-border-l2: rgba(153, 213, 239, 0.14);
+	--dsw-border-l3: rgba(153, 213, 239, 0.2);
+	--dsw-border-l4: rgba(153, 213, 239, 0.27);
+	--dsw-accent: #38bdf8;
+	--dsw-accent-soft: rgba(56, 189, 248, 0.16);
+	--dsw-success: #5ccec0;
+	--dsw-selector: rgba(56, 189, 248, 0.12);
+	--dsw-layer-2: #192c39;
+	--dsw-layer-3: #243d4d;
+	--dsw-btn-elevated: #1b3040;
+	--dsw-btn-floating-hover: #294455;
+	--dsw-module-platform: #172b39;
+	--dsw-border-strong: #76acc4;
+	--dsw-glass-popover: #192d3b;
+	--dsw-glass-input: #192d3b;
+	--dsw-glass-modal: #172b39;
+}