@rexvane/piweb 0.3.16 → 0.3.18

package/src/app/globals.css

@@ -1,7 +1,5 @@
 @import "tailwindcss";
 
-@custom-variant dark (&:where([data-ds-dark-theme], [data-ds-dark-theme] *, .dark, .dark *));
-
 /* ============================================================
    Pi Web 视觉令牌
    浅色默认，深色用 body[data-ds-dark-theme]
@@ -223,11 +221,49 @@ textarea::placeholder {
 	}
 }
 
+.piweb-conversation-width-handle {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	z-index: 3;
+	width: 12px;
+	cursor: col-resize;
+	touch-action: none;
+}
+.piweb-conversation-width-handle[data-side="left"] {
+	left: calc(50% - var(--dsh-chat-content-width) / 2 - 20px);
+}
+.piweb-conversation-width-handle[data-side="right"] {
+	right: calc(50% - var(--dsh-chat-content-width) / 2 - 20px);
+}
+.piweb-conversation-width-handle::after {
+	content: "";
+	position: absolute;
+	/* 常显的中间一小段：整条全高竖线会读成边框/分隔线，短抓手才读成"可拖"。
+	   热区仍是 12px 全高（cursor: col-resize），手感不受影响。 */
+	top: 35%;
+	bottom: 35%;
+	left: 5px;
+	width: 2px;
+	border-radius: 2px;
+	background: var(--dsw-border-l3);
+	opacity: 0.3;
+	transition: opacity var(--ds-duration-fast);
+}
+.piweb-conversation-width-handle:hover::after,
+.piweb-conversation-width-handle[data-dragging]::after,
+.piweb-conversation-width-handle:focus-visible::after {
+	opacity: 1;
+}
+
 @media (max-width: 840px) {
 	:root {
 		--dsh-chat-content-width: 100%;
 		--dsh-composer-card-max-width: 100%;
 	}
+	.piweb-conversation-width-handle {
+		display: none;
+	}
 
 	.pi-main > .hairline-b {
 		padding-left: 56px;
@@ -258,14 +294,6 @@ 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; }
 }
 
 /* 滚动条 */
@@ -749,6 +777,18 @@ textarea::placeholder {
 	font-size: 13px;
 	line-height: 1.55;
 }
+.md-code-block {
+	position: relative;
+}
+.md-code-copy {
+	position: absolute;
+	top: 12px;
+	right: 12px;
+	z-index: 1;
+}
+.md-code-block pre {
+	padding-top: 40px;
+}
 .md table {
 	border-collapse: collapse;
 	margin: 0.7em 0;
@@ -897,36 +937,6 @@ 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 {
@@ -1809,6 +1819,48 @@ body[data-pebrel-theme="pebrel"][data-ds-dark-theme] {
 .pw-timeline {
 	flex: none;
 }
+/* 生长时间轴：每轮一根柱，底对齐，超出横向滚动；高度由内联样式给（= 改动行数） */
+.pw-tl-rail {
+	display: flex;
+	align-items: flex-end;
+	gap: 3px;
+	height: 34px;
+	padding: 6px 10px 2px;
+	overflow-x: auto;
+	scrollbar-width: none;
+}
+.pw-tl-rail::-webkit-scrollbar {
+	display: none;
+}
+.pw-tl-bar {
+	flex: none;
+	width: 8px;
+	min-height: 3px;
+	border-radius: 2px 2px 1px 1px;
+	opacity: 0.5;
+	transition: opacity var(--ds-duration-fast) var(--ds-ease-in-out);
+}
+.pw-tl-bar:hover {
+	opacity: 0.85;
+}
+.pw-tl-bar[data-active] {
+	opacity: 1;
+	box-shadow: 0 0 0 1px var(--dsw-sidebar-fill), 0 0 0 2px var(--dsw-label-secondary);
+}
+.pw-tl-bar[data-kind="user"] {
+	width: 4px;
+}
+.pw-tl-bar[data-running] {
+	height: 14px;
+	border: 1px dashed var(--dsw-label-caption);
+	background: transparent;
+	animation: pw-tl-breathe 1.6s var(--ds-ease-in-out) infinite;
+}
+@keyframes pw-tl-breathe {
+	50% {
+		opacity: 0.2;
+	}
+}
 
 /* 文件查看器：80vw × 80vh 居中，全屏切 100% */
 .pw-viewer {
@@ -2077,740 +2129,3 @@ 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;
-}