:root {
	
	--bg: #1b1a19;
	--panel: #20201f;
	--panel-2: #1b1a19;
	--panel-3: #2c2b2a;
	--border: #2c2b2a;
	--border-soft: #262524;
	--text: #f8f6f4;
	--text-2: #c9c3bc;
	--muted: #8a837c;
	
	--accent: #ff8e5d;
	--accent-2: #ffaf85;
	--blue: #7e90f5;
	--green: #70b280;
	
	--primary: #f8f6f4;
	--primary-text: #1b1a19;
	--topbar-a: #20201f;
	--topbar-b: #1b1a19;
	--faint: #6b6661;
	--gutter-text: #57534e;
	--code-text: #e7e2dc;
	--code-com: #7a736c;
	--code-str: #95c6a0;
	--code-num: #ffaf85;
	--code-kw: #c4a9ef;
	--stage-bg: #131211;
	--toast-error: #ea6e71;
	--hover: rgba(248, 246, 244, 0.05);
	--scroll-thumb: #3d3c3a;
	--scroll-thumb-hover: #57534e;
	--shadow-soft: 0 1px 10px rgba(0, 0, 0, 0.24), 0 1px 2px rgba(0, 0, 0, 0.28);
	--topbar-h: 58px;
	--col-chat: 330px;
	--mono: 'Azeret Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
	--sans:
		'Wix Madefor Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
		'Microsoft YaHei', system-ui, sans-serif;
	--display: 'Wix Madefor Display', var(--sans);
}


:root[data-theme='light'] {
	--bg: #f8f6f4;
	--panel: #ffffff;
	--panel-2: #ffffff;
	--panel-3: #f1eeea;
	--border: #e9e6e0;
	--border-soft: #f1eeea;
	--text: #1b1a19;
	--text-2: #5d5a57;
	--muted: #99928b;
	--accent: #ff773c;
	--accent-2: #e8641b;
	--blue: #3b51e5;
	--green: #568f63;
	--primary: #1b1a19;
	--primary-text: #f8f6f4;
	--topbar-a: #ffffff;
	--topbar-b: #f8f6f4;
	--faint: #c9c3bc;
	--gutter-text: #ddd8d2;
	--code-text: #20201f;
	--code-com: #99928b;
	--code-str: #347043;
	--code-num: #bf4513;
	--code-kw: #7a4fd0;
	--stage-bg: #f1eeea;
	--toast-error: #bf2124;
	--hover: rgba(27, 26, 25, 0.045);
	--scroll-thumb: #ddd8d2;
	--scroll-thumb-hover: #c9c3bc;
	--shadow-soft: 0 1px 10px rgba(28, 26, 24, 0.05), 0 1px 2px rgba(28, 26, 24, 0.07);
}

* {
	box-sizing: border-box;
}


[hidden] {
	display: none !important;
}

/*
 * 工作台本身是个 Lit 组件（<workbench-app>，light DOM 渲染）。
 * display: contents 让这个宿主盒子「消失」—— 它渲染出的顶栏 / 三栏工作台 / 状态栏
 * 就直接当 body 的 flex 子项，布局和写死在 HTML 里时完全一样。
 */
workbench-app {
	display: contents;
}


.boot-placeholder {
	display: grid;
	place-items: center;
	height: 100vh;
	color: var(--muted);
}

html,
body {
	height: 100%;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--sans);
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

button,
input,
textarea,
select {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: 2px solid rgba(246, 130, 31, 0.7);
	outline-offset: 2px;
	border-radius: 6px;
}



.topbar {
	position: relative;
	height: var(--topbar-h);
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 0 14px 0 16px;
	background: linear-gradient(180deg, var(--topbar-a), var(--topbar-b));
	border-bottom: 1px solid var(--border);
}

.brand {
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 0;
}

.logo {
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	border-radius: 10px;
	display: grid;
	place-items: center;
	color: #fff;
	background: linear-gradient(145deg, #ff9a68 0%, #f7793c 55%, #ef6727 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}


.brand-mark {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

.brand-mark:hover .logo {
	filter: brightness(1.06);
}


.topbar-seg {
	flex: 0 0 auto;
	margin-left: 4px;
}


.project-switcher {
	position: relative;
}

.project-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 220px;
	padding: 3px 8px;
	margin-left: -8px;
	border: 1px solid transparent;
	border-radius: 7px;
	background: transparent;
	color: var(--text);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.01em;
	cursor: pointer;
	transition:
		background 0.15s,
		border-color 0.15s;
}

.project-btn:hover {
	background: var(--hover);
}

.project-btn[aria-expanded='true'] {
	background: var(--hover);
	border-color: var(--border);
}

.project-btn span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.project-btn svg {
	flex: 0 0 auto;
	color: var(--muted);
}

.project-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: -4px;
	z-index: 40;
	min-width: 240px;
	max-width: 320px;
	max-height: 320px;
	overflow-y: auto;
	padding: 6px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--panel);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.menu-item {
	display: flex;
	align-items: baseline;
	gap: 8px;
	width: 100%;
	padding: 7px 9px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--text-2);
	font: inherit;
	font-size: 12.5px;
	text-align: left;
	cursor: pointer;
}

.menu-item:hover {
	background: var(--hover);
	color: var(--text);
}

.menu-item.is-current {
	color: var(--text);
	background: var(--hover);
}

.menu-item.is-current .menu-name::after {
	content: '当前';
	margin-left: 6px;
	font-size: 10px;
	color: var(--accent-2);
}

.menu-item .menu-name {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.menu-item .menu-meta {
	flex: 0 0 auto;
	font-size: 11px;
	color: var(--faint);
	max-width: 120px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.menu-item.is-action {
	color: var(--accent-2);
	font-weight: 600;
}

.menu-sep {
	height: 1px;
	margin: 5px 4px;
	background: var(--border-soft);
}

.menu-empty {
	padding: 8px 9px;
	font-size: 12px;
	color: var(--faint);
}

.topbar-right {
	display: flex;
	align-items: center;
	gap: 9px;
}


.model-select {
	max-width: 190px;
	height: 28px;
	padding: 0 6px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--panel);
	color: var(--text-2);
	font-size: 12px;
	cursor: pointer;
}

.model-select:hover {
	border-color: rgba(246, 130, 31, 0.4);
	color: var(--text);
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 30px;
	padding: 0 11px;
	border-radius: 999px;
	font-size: 12px;
	border: 1px solid var(--border);
	background: var(--panel-2);
	color: var(--text-2);
}

.chip .dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--muted);
}

.chip-live {
	color: var(--green);
	border-color: rgba(61, 220, 151, 0.3);
	background: rgba(61, 220, 151, 0.08);
}

.chip-live .dot {
	background: var(--green);
	box-shadow: 0 0 0 3px rgba(61, 220, 151, 0.16);
}

.chip-link {
	color: var(--blue);
	text-decoration: none;
	border-color: rgba(91, 156, 248, 0.3);
	background: rgba(91, 156, 248, 0.08);
	transition: background 0.15s;
}

.chip-link:hover {
	background: rgba(91, 156, 248, 0.16);
}


.version-wrap {
	position: relative;
	flex: 0 0 auto;
}

.chip-btn {
	font: inherit;
	font-size: 12px;
	cursor: pointer;
}

.chip-btn:disabled {
	cursor: default;
}

.version-menu {
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	z-index: 30;
	min-width: 224px;
	max-height: 320px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 5px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--panel);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}

.version-head {
	padding: 5px 8px 3px;
	color: var(--muted);
	font-size: 11.5px;
}

.version-menu .menu-item {
	text-decoration: none;
}

.version-menu .menu-meta {
	flex: 0 0 auto;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 34px;
	padding: 0 15px;
	border: 1px solid transparent;
	border-radius: 9px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition:
		filter 0.15s,
		transform 0.06s,
		background 0.15s;
}

.btn-primary {
	
	background: var(--primary);
	color: var(--primary-text);
	box-shadow: var(--shadow-soft);
}

.btn-primary:hover {
	filter: brightness(1.12);
}

.btn:active {
	transform: translateY(1px);
}

.btn:disabled {
	opacity: 0.6;
	cursor: progress;
}

.icon-btn {
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	border-radius: 8px;
	border: 1px solid transparent;
	background: transparent;
	color: var(--muted);
	cursor: pointer;
	transition:
		background 0.15s,
		color 0.15s;
}

.icon-btn:hover {
	background: var(--panel-3);
	color: var(--text);
}


.topbar .icon-btn {
	width: 34px;
	height: 34px;
}

.theme-btn:hover {
	color: var(--accent);
}

.shell {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
}

.page {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	overflow-y: auto;
	background: var(--bg);
}

.page-inner {
	max-width: 1080px;
	margin: 0 auto;
	padding: 26px 28px 40px;
}

.page-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.page-title {
	margin: 0 0 18px;
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.01em;
}


.feed {
	border: 1px solid var(--border-soft);
	border-radius: 12px;
	background: var(--panel);
	overflow: hidden;
}

.feed-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 14px;
	font-size: 12.5px;
	border-bottom: 1px solid var(--border-soft);
}

.feed-item:last-child {
	border-bottom: 0;
}

.feed-dot {
	width: 6px;
	height: 6px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--muted);
}

.feed-dot.is-publish {
	background: var(--green);
}

.feed-dot.is-generate {
	background: var(--accent);
}

.feed-text {
	flex: 1;
	min-width: 0;
	color: var(--text-2);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.feed-text b {
	color: var(--text);
	font-weight: 600;
}

.feed-time {
	flex: 0 0 auto;
	color: var(--muted);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
}

.tag {
	flex: 0 0 auto;
	font-size: 10px;
	padding: 2px 7px;
	border-radius: 999px;
	border: 1px solid var(--border);
	color: var(--muted);
}
/* ============================================================
   产品外壳：左侧边栏 + 页面
   —— 一条竖着的边栏管导航（新建 / 搜索 / 应用 / 探索），
      底下一格放运行环境；页面区域自己滚动。
   ============================================================ */

.sidebar {
	flex: 0 0 auto;
	width: 250px;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 10px 10px;
	background: var(--panel-2);
	border-right: 1px solid var(--border-soft);
	transition: width 0.16s ease-out;
}


.sidebar.is-collapsed {
	width: 66px;
}

.sidebar.is-collapsed .side-label,
.sidebar.is-collapsed .side-count,
.sidebar.is-collapsed .side-caret,
.sidebar.is-collapsed .side-brand-name,
.sidebar.is-collapsed .side-sub {
	display: none;
}

.sidebar.is-collapsed .side-head {
	flex-direction: column;
	gap: 4px;
}

.sidebar.is-collapsed .side-brand,
.sidebar.is-collapsed .side-item {
	justify-content: center;
	padding-left: 0;
	padding-right: 0;
}


.sidebar.is-collapsed .side-collapse svg {
	transform: rotate(180deg);
}

.side-head {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 2px 2px 8px;
}

.side-brand {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 6px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--text);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.side-brand:hover {
	background: var(--hover);
}

.side-brand .logo {
	flex: 0 0 auto;
}

.side-brand-name {
	min-width: 0;
	font-size: 14.5px;
	font-weight: 650;
	letter-spacing: -0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.side-collapse {
	flex: 0 0 auto;
}

.side-scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
}


.side-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px 10px;
	border: 1px solid transparent;
	border-radius: 10px;
	background: transparent;
	color: var(--text-2);
	font: inherit;
	font-size: 13.5px;
	text-align: left;
	cursor: pointer;
	transition:
		background 0.14s,
		color 0.14s,
		border-color 0.14s;
}

.side-item:hover {
	background: var(--hover);
	color: var(--text);
}

.side-item.is-active {
	background: var(--panel-3);
	color: var(--text);
	font-weight: 600;
}

.side-item svg {
	flex: 0 0 auto;
}


.side-item.is-primary {
	background: var(--panel-3);
	color: var(--text);
	font-weight: 600;
}

.side-item.is-primary:hover {
	background: var(--panel-3);
	filter: brightness(0.98);
}

.side-label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.side-count {
	flex: 0 0 auto;
	font-size: 11.5px;
	color: var(--muted);
}

.side-caret {
	flex: 0 0 auto;
	color: var(--muted);
	transition: transform 0.16s ease-out;
}

.side-caret.is-open {
	transform: rotate(180deg);
}


.side-sub {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 2px 0 6px 19px;
	padding-left: 9px;
	border-left: 1px solid var(--border-soft);
}

.side-group {
	display: flex;
	flex-direction: column;
	gap: 2px;
}


.side-heading {
	margin: 14px 0 4px;
	padding: 0 10px;
	color: var(--muted);
	font-size: 11.5px;
	letter-spacing: 0.04em;
}

.sidebar.is-collapsed .side-heading {
	display: none;
}

.side-sub .side-item {
	padding: 6px 8px;
	font-size: 13px;
}

.side-foot {
	flex: 0 0 auto;
	margin-top: 8px;
	padding-top: 10px;
}


.side-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 11px 12px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--panel);
}

.sidebar.is-collapsed .side-card {
	align-items: center;
	padding: 8px 0;
}

.side-foot-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: var(--text-2);
}

.sidebar.is-collapsed .side-foot-row {
	justify-content: center;
}


.page-inner {
	max-width: 1120px;
	margin: 0 auto;
	padding: 24px 30px 56px;
}

/* 主页的内容整块竖向居中（和登录页一样）。min-height: 100% 让容器跟着内容长高，
   所以内容比视口高时不会像 justify-content: center 那样被切掉顶部，照常从顶部滚动。 */
.page-inner.is-home {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100%;
	padding-top: 24px;
	padding-bottom: 24px;
}

/* 居中之后，.home-hero 那圈跟视口高度挂钩的上边距（clamp(24px, 8vh, 92px)）就不需要了 */
.page-inner.is-home .home-hero {
	padding-top: 0;
}

.page-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.page-title {
	margin: 0;
	font-size: 23px;
	font-weight: 650;
	letter-spacing: -0.02em;
}

.page-sub {
	margin: 5px 0 0;
	font-size: 13px;
	color: var(--muted);
}

.page-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.stat-strip {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 9px;
	font-size: 12.5px;
	color: var(--muted);
}

.stat-strip b {
	color: var(--text);
	font-weight: 600;
}



.home-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 26px;
	padding: clamp(24px, 8vh, 92px) 0 22px;
	text-align: center;
}

.home-greet {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.home-greet .l1 {
	font-size: 25px;
	font-weight: 500;
	color: var(--text-2);
}

.home-greet .l2 {
	font-size: 34px;
	font-weight: 650;
	letter-spacing: -0.025em;
	color: var(--text);
}

.home-composer {
	width: 100%;
	max-width: 720px;
	text-align: left;
}

.composer-card {
	padding: 14px 14px 10px;
	border: 1px solid var(--border);
	border-radius: 16px;
	background: var(--panel);
	box-shadow: var(--shadow-soft);
	transition:
		border-color 0.15s,
		box-shadow 0.15s;
}

.composer-card:focus-within {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(246, 130, 31, 0.16);
}

.home-input {
	width: 100%;
	max-height: 200px;
	padding: 3px 4px 10px;
	border: 0;
	background: transparent;
	color: var(--text);
	font: inherit;
	font-size: 14.5px;
	line-height: 1.6;
	resize: none;
	outline: none;
}

.home-input::placeholder {
	color: var(--muted);
}

.composer-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.composer-row .spacer {
	flex: 1 1 auto;
}

.send-btn {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--accent);
	color: #fff;
	cursor: pointer;
}

.send-btn:hover:not(:disabled) {
	filter: brightness(1.07);
}

.send-btn:disabled {
	border-color: var(--border);
	background: var(--panel-3);
	color: var(--muted);
	cursor: not-allowed;
}


.send-btn.is-stop {
	background: var(--primary);
	color: var(--primary-text);
}

.prompt-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	max-width: 720px;
}

.prompt-chip {
	padding: 7px 13px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--panel);
	color: var(--text-2);
	font: inherit;
	font-size: 12.5px;
	cursor: pointer;
	transition:
		color 0.15s,
		border-color 0.15s;
}

.prompt-chip:hover {
	border-color: var(--accent);
	color: var(--text);
}

.home-section {
	margin-top: 30px;
}

.section-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}

.section-head .spacer {
	flex: 1 1 auto;
}

.seg-tabs {
	display: flex;
	gap: 2px;
	padding: 2px;
	border-radius: 10px;
	background: var(--panel-3);
}

.seg-tab {
	padding: 5px 11px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--muted);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}

.seg-tab.is-active {
	background: var(--panel);
	color: var(--text);
	font-weight: 600;
	box-shadow: var(--shadow-soft);
}

.link-btn {
	padding: 5px 8px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--text-2);
	font: inherit;
	font-size: 12.5px;
	cursor: pointer;
}

.link-btn:hover {
	background: var(--hover);
	color: var(--text);
}



.apps-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
	gap: 16px;
}

.app-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: var(--panel);
	/* 别加 overflow: hidden —— 卡片右上角的下拉菜单（.app-menu）是绝对定位的，
	   会被卡片自己裁掉。顶部圆角改由 .app-thumb 自己收（见下）。 */
	transition:
		border-color 0.15s,
		box-shadow 0.15s;
}

.app-card:hover {
	border-color: var(--accent);
	box-shadow: var(--shadow-soft);
}


.app-thumb {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	font: inherit;
	cursor: pointer;
	/* 卡片外圆角 14px 减去 1px 边框 = 13px，缩略图自己收上面两个角 */
	border-radius: 13px 13px 0 0;
	background: radial-gradient(
			125% 125% at 18% 8%,
			hsl(var(--thumb-h) 62% 58% / 0.22) 0%,
			hsl(calc(var(--thumb-h) + 34) 58% 48% / 0.3) 60%,
			hsl(calc(var(--thumb-h) + 70) 52% 40% / 0.34) 100%
		), var(--panel-2);
}

.app-thumb > span {
	font-size: 38px;
	font-weight: 600;
	letter-spacing: -0.03em;
	color: var(--text-2);
	opacity: 0.5;
}


.app-live {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--panel-3);
	color: var(--green);
	font-size: 11px;
	white-space: nowrap;
}

.app-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 11px 12px 12px;
}

.app-title-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.app-title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.app-id {
	font-family: var(--mono);
	font-size: 11.5px;
	color: var(--muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.app-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 11.5px;
	color: var(--muted);
}

.app-meta .spacer {
	flex: 1 1 auto;
}

.icon-btn.is-sm {
	width: 26px;
	height: 26px;
	border-radius: 8px;
}

.menu-wrap {
	position: relative;
	flex: 0 0 auto;
}

.app-menu {
	position: absolute;
	right: 0;
	top: calc(100% + 4px);
	z-index: 20;
	min-width: 150px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 5px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--panel);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
}

.app-menu button,
.app-menu a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 9px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--text-2);
	font: inherit;
	font-size: 13px;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.app-menu button:hover,
.app-menu a:hover {
	background: var(--hover);
	color: var(--text);
}

.app-menu .is-danger {
	color: #e5484d;
}

.app-menu .is-danger:hover {
	background: rgba(229, 72, 77, 0.12);
}



.apps-toolbar {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 18px 0;
}

.search-box {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 260px;
	max-width: 380px;
	padding: 8px 12px;
	border: 1px solid var(--border);
	border-radius: 11px;
	background: var(--panel);
	color: var(--muted);
}

.search-box:focus-within {
	border-color: var(--accent);
}

.search-box input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	color: var(--text);
	font: inherit;
	font-size: 13px;
	outline: none;
}

.toolbar-spacer {
	flex: 1 1 auto;
}

.filter-select {
	padding: 7px 10px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--panel);
	color: var(--text-2);
	font: inherit;
	font-size: 12.5px;
	cursor: pointer;
}

.layout-toggle {
	display: flex;
	gap: 2px;
	padding: 2px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--panel);
}

.layout-toggle button {
	display: grid;
	place-items: center;
	width: 28px;
	height: 26px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--muted);
	cursor: pointer;
}

.layout-toggle button.is-active {
	background: var(--panel-3);
	color: var(--text);
}

.apps-list {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: var(--panel);
	overflow: hidden;
}

.app-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--border-soft);
}

.app-row:last-child {
	border-bottom: 0;
}

.app-row:hover {
	background: var(--hover);
}

.app-row .mini-thumb {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	font: inherit;
	cursor: pointer;
	border-radius: 11px;
	background: radial-gradient(
			125% 125% at 20% 10%,
			hsl(var(--thumb-h) 62% 58% / 0.24),
			hsl(calc(var(--thumb-h) + 40) 54% 42% / 0.34)
		), var(--panel-2);
	color: var(--text-2);
	font-size: 17px;
	font-weight: 600;
}

.app-row-main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.app-row-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
	font-size: 11.5px;
	color: var(--muted);
}



.tpl-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
	gap: 14px;
}

.tpl-card {
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: 15px 16px 16px;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: var(--panel);
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition:
		border-color 0.15s,
		box-shadow 0.15s;
}

.tpl-card:hover {
	border-color: var(--accent);
	box-shadow: var(--shadow-soft);
}

.tpl-icon {
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 10px;
	background: var(--panel-3);
	color: var(--accent);
}

.tpl-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
}

.tpl-desc {
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--muted);
}




.modal-backdrop {
	position: fixed;
	inset: 0;
	z-index: 70;
	display: grid;
	place-items: center;
	padding: 24px;
	background: rgba(27, 26, 25, 0.34);
}

.modal {
	width: min(400px, 100%);
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px;
	border: 1px solid var(--border);
	border-radius: 16px;
	background: var(--panel);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.24);
}

.modal-title {
	margin: 0;
	font-family: var(--display);
	font-size: 16.5px;
	font-weight: 650;
	letter-spacing: -0.01em;
}

.modal-sub {
	margin: -4px 0 2px;
	color: var(--muted);
	font-size: 12.5px;
	line-height: 1.6;
}

.modal-field-label {
	margin-top: 2px;
	color: var(--muted);
	font-size: 11.5px;
}

.modal-input {
	width: 100%;
	height: 38px;
	padding: 0 12px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--panel-2);
	color: var(--text);
	font: inherit;
	font-size: 13.5px;
	outline: none;
}

.modal-input:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(255, 119, 60, 0.18);
}

.modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 4px;
}

.btn-ghost {
	border-color: var(--border);
	background: transparent;
	color: var(--text-2);
}

.btn-ghost:hover {
	background: var(--hover);
	color: var(--text);
}

.toast {
	position: fixed;
	left: 50%;
	bottom: 26px;
	z-index: 60;
	max-width: min(80vw, 520px);
	padding: 9px 15px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--panel);
	color: var(--text-2);
	font-size: 12.5px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
	opacity: 0;
	transform: translate(-50%, 10px);
	pointer-events: none;
	transition:
		opacity 0.18s ease-out,
		transform 0.18s ease-out;
}

.toast.is-on {
	opacity: 1;
	transform: translate(-50%, 0);
}

.toast.is-error {
	border-color: rgba(232, 76, 61, 0.5);
	color: var(--toast-error);
}



.login {
	display: grid;
	place-items: center;
	min-height: 100vh;
	padding: 32px 20px;
	background: var(--bg);
}

.login-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 380px;
	padding: 28px 26px 24px;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: var(--panel);
	box-shadow: var(--shadow-soft);
}

.login-brand {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--text-2);
	font-family: var(--display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.login-title {
	margin: 18px 0 0;
	color: var(--text);
	font-family: var(--display);
	font-size: 20px;
	font-weight: 650;
}

.login-note {
	margin: 6px 0 0;
	color: var(--muted);
	font-size: 12.5px;
	line-height: 1.65;
}

.login-passkey {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 42px;
	margin-top: 18px;
	border: 1px solid var(--border);
	border-radius: 9px;
	background: var(--panel-2);
	color: var(--text);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.login-passkey:hover:not(:disabled) {
	border-color: rgba(246, 130, 31, 0.45);
	background: var(--hover);
}

.login-passkey:disabled {
	opacity: 0.55;
	cursor: wait;
}

.login-divider {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 20px 0 2px;
	color: var(--faint);
	font-size: 11px;
}

.login-divider::before,
.login-divider::after {
	flex: 1 1 auto;
	height: 1px;
	background: var(--border-soft);
	content: '';
}

.login-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 16px;
}

.login-field > span {
	color: var(--muted);
	font-size: 11.5px;
}

.login-input {
	height: 38px;
	padding: 0 12px;
	border: 1px solid var(--border);
	border-radius: 9px;
	background: var(--panel-2);
	color: var(--text);
	font-family: inherit;
	font-size: 13px;
}

.login-input.is-code {
	font-family: var(--mono);
	font-size: 17px;
	letter-spacing: 6px;
}

.login-input::placeholder {
	color: var(--faint);
	letter-spacing: normal;
}

.login-input:focus {
	outline: none;
	border-color: rgba(246, 130, 31, 0.45);
}

.login-input:disabled {
	color: var(--muted);
}

.login-notice {
	margin: 14px 0 0;
	color: var(--text-2);
	font-size: 12px;
	line-height: 1.6;
}

.login-error {
	margin: 14px 0 0;
	color: var(--toast-error);
	font-size: 12px;
	line-height: 1.6;
}

.login-btn {
	height: 40px;
	margin-top: 18px;
	border: 0;
	border-radius: 9px;
	background: var(--primary);
	color: var(--primary-text);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.login-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.login-foot {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 14px;
}

.login-link {
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--text-2);
	font-family: inherit;
	font-size: 12px;
	cursor: pointer;
}

.login-link:hover:not(:disabled) {
	color: var(--accent);
}

.login-link:disabled {
	color: var(--faint);
	cursor: default;
}

.login-foot-note {
	margin: 14px 0 0;
	color: var(--faint);
	font-size: 11.5px;
	line-height: 1.6;
}

.passkey-modal {
	width: min(440px, 100%);
}

.passkey-head {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.passkey-head .modal-sub {
	margin-top: 4px;
}

.passkey-mark,
.passkey-row-icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	border-radius: 10px;
	background: rgba(246, 130, 31, 0.12);
	color: var(--accent);
}

.passkey-mark {
	width: 38px;
	height: 38px;
}

.passkey-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 8px;
}

.passkey-row {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 54px;
	padding: 8px 10px;
	border: 1px solid var(--border-soft);
	border-radius: 11px;
	background: var(--panel-2);
}

.passkey-row-icon {
	width: 32px;
	height: 32px;
	border-radius: 8px;
}

.passkey-row-main {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	gap: 3px;
}

.passkey-name {
	overflow: hidden;
	color: var(--text);
	font-size: 13px;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.passkey-meta {
	color: var(--muted);
	font-size: 11.5px;
}

.passkey-empty {
	margin: 0;
	padding: 18px 12px;
	border: 1px dashed var(--border);
	border-radius: 11px;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.6;
	text-align: center;
}

.passkey-add {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px;
	margin-top: 4px;
}

.passkey-add .btn {
	white-space: nowrap;
}


.side-account {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--border-soft);
	color: var(--text-2);
	font-size: 12px;
}

.side-account-mail {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.account-chip .account-mail {
	max-width: 180px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}



.workspace {
	flex: 1 1 auto;
	min-height: 0;
	min-width: 0;
	
	overflow: hidden;
	display: grid;
	
	grid-template-columns: var(--col-chat) 6px minmax(0, 1fr);
}

.pane {
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	background: var(--panel);
	border-right: 1px solid var(--border);
}

.pane:last-of-type {
	border-right: 0;
}

.pane-head {
	flex: 0 0 auto;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 0 10px 0 14px;
	border-bottom: 1px solid var(--border-soft);
	background: var(--panel);
}

.pane-actions {
	display: flex;
	align-items: center;
	gap: 6px;
}


.pane-body {
	flex: 1 1 auto;
	min-height: 0;
	min-width: 0;
	display: flex;
}


.main-body {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	min-width: 0;
}

.main-view {
	position: absolute;
	inset: 0;
	display: none;
}

.main-view.is-active {
	display: flex;
}


.url-pill {
	display: flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
	max-width: 460px;
	height: 28px;
	padding: 0 12px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--panel-3);
	color: var(--text-2);
}

.url-icon {
	flex: 0 0 auto;
	display: flex;
	color: var(--muted);
}

.url-text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12px;
}

.main-view.is-stage {
	flex-direction: column;
}


.main-view.is-code {
	min-width: 0;
	flex-direction: column;
}


.code-split {
	flex: 1 1 auto;
	min-height: 0;
	min-width: 0;
	display: flex;
}


.main-view.is-code .file-tree {
	flex: 0 0 208px;
	min-width: 0;
	border-right: 1px solid var(--border-soft);
	background: var(--panel);
}


.main-view.is-overview {
	flex-direction: column;
	overflow: auto;
	padding: 30px 36px 44px;
}


.main-view.is-domains {
	flex-direction: column;
	gap: 16px;
	overflow: auto;
	padding: 30px 36px 44px;
}

.main-view.is-domains .dash-card {
	max-width: 760px;
}

.inline-code {
	padding: 1px 5px;
	border-radius: 5px;
	background: var(--panel-3);
	font-family: var(--mono);
	font-size: 11.5px;
	color: var(--text);
}

.dash-form {
	display: flex;
	gap: 8px;
	margin-top: 14px;
}

.dash-input {
	flex: 1 1 auto;
	min-width: 0;
	height: 34px;
	padding: 0 12px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--panel-2);
	color: var(--text);
	font-family: inherit;
	font-size: 12.5px;
}

select.dash-input {
	width: 100%;
	margin-top: 6px;
}

.dash-input::placeholder {
	color: var(--faint);
}

.dash-input:focus {
	outline: none;
	border-color: rgba(246, 130, 31, 0.45);
}

.dash-form .dash-btn {
	flex: 0 0 auto;
	margin-top: 0;
}

.dash-error {
	margin: 12px 0 0;
	color: var(--toast-error);
	font-size: 12px;
	line-height: 1.6;
}

.domain-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.domain-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--panel-2);
}

.domain-main {
	flex: 1 1 auto;
	min-width: 0;
}

.domain-line {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.domain-name {
	color: var(--text);
	font-size: 13px;
	font-weight: 600;
	word-break: break-all;
}

.domain-name:hover {
	color: var(--accent);
}

.domain-state {
	flex: 0 0 auto;
	padding: 1px 8px;
	border-radius: 999px;
	font-size: 11px;
}

.domain-state.is-ok {
	background: rgba(112, 178, 128, 0.16);
	color: var(--green);
}

.domain-state.is-wait {
	background: rgba(246, 130, 31, 0.16);
	color: var(--accent);
}

.domain-note {
	margin: 7px 0 0;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.6;
	word-break: break-all;
}

.domain-note.is-code {
	padding: 7px 9px;
	border-radius: 6px;
	background: var(--panel-3);
	color: var(--text-2);
	font-family: var(--mono);
	font-size: 11px;
}

.domain-note.is-bad {
	color: var(--toast-error);
}

.domain-actions {
	display: flex;
	flex: 0 0 auto;
	gap: 8px;
}

.domain-actions .dash-pill {
	height: 30px;
	padding: 0 11px;
}

.meta {
	font-size: 11.5px;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.splitter {
	position: relative;
	background: var(--bg);
	cursor: col-resize;
}

.splitter::after {
	content: '';
	position: absolute;
	inset: 0 2px;
	border-radius: 2px;
	background: transparent;
	transition: background 0.15s;
}

.splitter:hover::after,
.splitter.is-dragging::after {
	background: rgba(246, 130, 31, 0.45);
}



.chat-scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 14px 14px 4px;
}

.messages {
	display: flex;
	flex-direction: column;
}

.msg {
	display: flex;
	margin-bottom: 16px;
	animation: rise 0.22s ease-out;
}

@keyframes rise {
	from {
		opacity: 0;
		transform: translateY(5px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.msg-body {
	min-width: 0;
	flex: 1;
}

.msg-text {
	font-size: 13.5px;
	line-height: 1.68;
	white-space: pre-wrap;
	word-break: break-word;
}


.msg-text a {
	color: var(--accent);
	text-decoration: underline;
}

/* 助手正文用 marked 渲染出来的 Markdown：外层 .msg-text 的 pre-wrap 在这里复位，
   再把原生标签的间距 / 图片 / 代码块收成跟聊天气泡一致的样子。 */
.msg-text .msg-md {
	white-space: normal;
}

.msg-md p {
	margin: 0 0 6px;
}

.msg-md > :last-child {
	margin-bottom: 0;
}

.msg-md ul,
.msg-md ol {
	margin: 0 0 6px;
	padding-left: 18px;
}

.msg-md li {
	margin: 1px 0;
}

.msg-md h1,
.msg-md h2,
.msg-md h3,
.msg-md h4 {
	margin: 8px 0 4px;
	font-size: 13.5px;
}

.msg-md img {
	display: block;
	max-width: 100%;
	margin: 8px 0 2px;
	border: 1px solid var(--border-soft);
	border-radius: 10px;
}

.msg-md a {
	color: var(--accent);
	text-decoration: underline;
}

.msg-md code {
	font-family: var(--mono);
	font-size: 12.5px;
}

.msg-md :not(pre) > code {
	padding: 1px 4px;
	border-radius: 4px;
	background: var(--hover);
}

.msg-md pre {
	margin: 6px 0;
	padding: 8px 10px;
	background: var(--hover);
	border-radius: 8px;
	overflow: auto;
}

.msg-md blockquote {
	margin: 6px 0;
	padding-left: 10px;
	border-left: 2px solid var(--border-soft);
	color: var(--muted);
}


.msg-foot {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 4px;
	font-size: 11px;
	color: var(--faint);
	font-variant-numeric: tabular-nums;
}

.msg-foot .spacer {
	flex: 1 1 auto;
}

.msg-foot .icon-btn {
	opacity: 0;
	transition: opacity 0.15s;
}

.msg:hover .msg-foot .icon-btn,
.msg-foot .icon-btn:focus-visible {
	opacity: 1;
}


.msg-error {
	margin-top: 7px;
	padding: 7px 9px;
	border: 1px solid rgba(244, 63, 94, 0.35);
	border-radius: 8px;
	background: rgba(244, 63, 94, 0.08);
	color: var(--toast-error);
	font-size: 12px;
	line-height: 1.6;
	white-space: pre-wrap;
	word-break: break-word;
}



.steps {
	margin: 2px 0 10px;
}

.steps-head {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	padding: 3px 0;
	border: 0;
	background: transparent;
	color: var(--text);
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.steps-head:hover {
	color: var(--accent);
}

.steps-head svg {
	flex: 0 0 auto;
	color: var(--muted);
	transition: transform 0.15s;
}

.steps.is-open .steps-head svg {
	transform: rotate(180deg);
}

.steps-label {
	font-weight: 600;
}

.steps-count {
	color: var(--muted);
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}

.steps-list {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 5px 0 0 3px;
	padding: 1px 0 1px 13px;
	border-left: 1px solid var(--border);
	list-style: none;
}

.step {
	display: flex;
	gap: 7px;
	min-width: 0;
}

.step-icon {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	height: 18px;
	color: var(--muted);
}

.step-icon svg {
	display: block;
}

.step-body {
	flex: 1 1 auto;
	min-width: 0;
}

.step-title {
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--text-2);
	word-break: break-word;
}


.step-command .step-title,
.step-tool .step-title,
.step-search .step-title {
	font-family: var(--mono);
	font-size: 11.5px;
	color: var(--text);
}

.step-status .step-title {
	color: var(--muted);
	font-size: 11.5px;
}


.step-file .step-path {
	font-family: var(--mono);
	font-size: 11.5px;
	color: var(--text);
}

.step-detail {
	margin: 4px 0 0;
	padding: 6px 8px;
	max-height: 200px;
	overflow: auto;
	border-radius: 7px;
	background: var(--panel-3);
	color: var(--code-text);
	font-family: var(--mono);
	font-size: 11px;
	line-height: 1.55;
	white-space: pre-wrap;
	word-break: break-word;
}

.step-meta {
	margin-top: 3px;
	color: var(--muted);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
}


.step-command .step-icon {
	color: var(--blue);
}

.step-file .step-icon {
	color: var(--accent);
}

.step-reasoning .step-icon {
	color: var(--code-kw);
}

.step-tool .step-icon {
	color: var(--green);
}

.step-search .step-icon {
	color: var(--blue);
}

.step-error .step-icon,
.step.is-failed .step-title {
	color: #f43f5e;
}


.step.is-running .step-icon {
	animation: pulse 1.2s infinite ease-in-out;
}

.step.is-running .step-title {
	color: var(--accent);
}

@keyframes pulse {
	0%,
	100% {
		opacity: 0.3;
	}
	50% {
		opacity: 1;
	}
}

.work-status {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 7px;
	color: var(--muted);
	font-size: 12px;
}

.work-status-icon {
	display: flex;
	color: var(--accent);
	animation: pulse 1.4s infinite ease-in-out;
}

.msg-user .msg-text {
	background: var(--panel-3);
	border: 1px solid var(--border-soft);
	border-radius: 10px;
	padding: 9px 11px;
	color: var(--text);
}

.typing {
	display: inline-flex;
	gap: 4px;
	padding: 4px 0;
}

.typing i {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--accent);
	animation: blink 1.1s infinite ease-in-out;
}

.typing i:nth-child(2) {
	animation-delay: 0.15s;
}

.typing i:nth-child(3) {
	animation-delay: 0.3s;
}

@keyframes blink {
	0%,
	60%,
	100% {
		opacity: 0.25;
		transform: translateY(0);
	}
	30% {
		opacity: 1;
		transform: translateY(-2px);
	}
}

.chat-empty {
	padding: 8px 2px 0;
}

.chat-empty h3 {
	margin: 6px 0 6px;
	font-size: 14px;
	font-weight: 600;
}

.chat-empty p {
	margin: 0 0 14px;
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--muted);
}

.suggestions {
	display: flex;
	flex-direction: column;
	gap: 7px;
}


.suggest-row {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	padding: 6px 14px 0;
}

.suggest-label {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--text-2);
	font-size: 12px;
	font-weight: 600;
}

.suggest-label svg {
	width: 14px;
	height: 14px;
}

.suggest-chips {
	display: flex;
	gap: 6px;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.suggest-chips::-webkit-scrollbar {
	display: none;
}

.suggest-chips .prompt-chip {
	flex: 0 0 auto;
	padding: 5px 11px;
	font-size: 12px;
}

.suggestion {
	text-align: left;
	border: 1px solid var(--border);
	background: var(--panel-2);
	color: var(--text-2);
	border-radius: 9px;
	padding: 9px 11px;
	font-size: 12.5px;
	cursor: pointer;
	transition:
		border-color 0.15s,
		background 0.15s,
		color 0.15s;
}

.suggestion:hover {
	border-color: rgba(246, 130, 31, 0.4);
	background: rgba(246, 130, 31, 0.06);
	color: var(--text);
}

.composer {
	flex: 0 0 auto;
	padding: 12px 14px 14px;
	border-top: 1px solid var(--border-soft);
	background: var(--panel);
}

.composer-box {
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--panel-2);
	padding: 9px 10px 8px;
	transition:
		border-color 0.15s,
		box-shadow 0.15s;
}

.composer-box:focus-within {
	border-color: rgba(246, 130, 31, 0.55);
	box-shadow: 0 0 0 3px rgba(246, 130, 31, 0.12);
}

#promptInput {
	width: 100%;
	border: 0;
	background: transparent;
	outline: none;
	resize: none;
	font-size: 13.5px;
	line-height: 1.6;
	max-height: 132px;
	min-height: 40px;
	color: var(--text);
}

#promptInput::placeholder {
	color: var(--faint);
}

.composer-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 6px;
}

.composer-foot-right {
	display: flex;
	align-items: center;
	gap: 8px;
}

.composer-model {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 28px;
	padding: 0 6px 0 10px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--panel-2);
	color: var(--text-2);
	font-size: 12px;
	cursor: pointer;
}

.composer-model:hover {
	border-color: rgba(246, 130, 31, 0.4);
}

.composer-model-label {
	color: var(--muted);
}

.composer-model .model-select {
	max-width: 170px;
	height: 24px;
	padding: 0 4px;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 12px;
}

.composer-model .model-select:hover {
	border-color: transparent;
	color: var(--text);
}

.hint {
	font-size: 11px;
	color: var(--faint);
}



.tabs {
	display: flex;
	align-items: center;
	gap: 2px;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
	display: none;
}

.tab {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: 0 0 auto;
	height: 42px;
	padding: 0 10px;
	white-space: nowrap;
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	color: var(--muted);
	font-size: 12.5px;
	cursor: pointer;
}

.tab.is-active {
	color: var(--text);
	border-bottom-color: var(--accent);
}

/* 代码编辑器：CodeMirror 6（挂载点内部由它自己管）。
   字号 / 行高 / 内边距 / 行号栏配色都在 frontend/editor.ts 的主题里，
   颜色一律走上面的 CSS 变量，所以深浅色切换不用重建编辑器。 */
.editor {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	background: var(--panel-2);
	overflow: hidden;
}

.editor-mount {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
}

.editor-foot {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	height: 28px;
	padding: 0 12px;
	border-top: 1px solid var(--border-soft);
	background: var(--panel);
}

.editor-hint {
	font-size: 11px;
	color: var(--faint);
}

.editor-hint.is-stale {
	color: var(--accent-2);
}



.file-tree {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	padding: 6px 8px 14px;
}

.tree-item {
	display: flex;
	align-items: center;
	gap: 7px;
	width: 100%;
	height: 26px;
	padding: 0 8px;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: var(--text-2);
	font-family: inherit;
	font-size: 12.5px;
	text-align: left;
	white-space: nowrap;
	cursor: pointer;
}

.tree-item:hover {
	background: var(--panel-2);
	color: var(--text);
}

.tree-item.is-active {
	background: rgba(246, 130, 31, 0.14);
	color: var(--text);
}

.tree-dir > .tree-item {
	font-weight: 600;
}

.tree-caret {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	color: var(--faint);
	transition: transform 0.15s;
}

.tree-dir.is-collapsed .tree-caret {
	transform: rotate(-90deg);
}

.tree-dir.is-collapsed > .tree-children {
	display: none;
}

.tree-children {
	margin-left: 9px;
	padding-left: 8px;
	border-left: 1px solid var(--border-soft);
}

.tree-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tree-size {
	margin-left: auto;
	padding-left: 8px;
	font-size: 10.5px;
	color: var(--faint);
	font-variant-numeric: tabular-nums;
}

.tree-item.is-active .tree-size {
	color: var(--accent-2);
}



.segmented {
	display: inline-flex;
	gap: 2px;
	padding: 2px;
	border-radius: 9px;
	background: var(--panel-2);
	border: 1px solid var(--border-soft);
}

.seg {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 26px;
	padding: 0 12px;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: var(--muted);
	font-size: 12.5px;
	cursor: pointer;
	transition:
		background 0.15s,
		color 0.15s;
}

.seg:hover {
	color: var(--text-2);
}

.seg.is-active {
	background: var(--panel-3);
	color: var(--text);
	box-shadow: var(--shadow-soft);
}

.view {
	display: none;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	min-width: 0;
}

.view.is-active {
	display: flex;
}

.stage {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	min-width: 0;
	display: flex;
	justify-content: center;
	background: var(--stage-bg);
	overflow: auto;
}

.stage-build {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 15px;
	padding: 24px;
	background: var(--stage-bg);
	text-align: center;
}

.build-mark {
	display: grid;
	place-items: center;
	color: var(--text);
	animation: build-pulse 1.7s infinite ease-in-out;
}

.build-mark svg {
	width: 30px;
	height: 30px;
}

.build-title {
	font-size: 15px;
	color: var(--text-2);
}

.build-rule {
	width: 190px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.build-note {
	max-width: 320px;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.7;
}

@keyframes build-pulse {
	0%,
	100% {
		opacity: 0.45;
	}
	50% {
		opacity: 1;
	}
}

#previewFrame {
	width: 100%;
	height: 100%;
	border: 0;
	background: #fff;
	flex: 0 0 auto;
}

.dash {
	display: flex;
	flex: 1 1 auto;
	min-height: 0;
	min-width: 0;
	background: var(--panel-3);
}

.dash-nav {
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
	width: 224px;
	padding: 12px 10px;
	border-right: 1px solid var(--border);
	overflow: auto;
}

.dash-search {
	display: flex;
	align-items: center;
	gap: 7px;
	height: 32px;
	padding: 0 10px;
	margin-bottom: 8px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--panel);
	color: var(--muted);
}

.dash-search input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	color: var(--text);
	font-size: 12.5px;
	outline: none;
}

.dash-nav-list {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.dash-nav-empty {
	padding: 8px 10px;
	color: var(--muted);
	font-size: 12px;
}

.dash-nav-item {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	padding: 7px 10px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--text-2);
	font-size: 12.5px;
	text-align: left;
	cursor: pointer;
}

.dash-nav-item:hover:not(:disabled) {
	background: var(--panel-2);
	color: var(--text);
}

.dash-nav-item.is-active {
	background: var(--panel);
	color: var(--text);
	font-weight: 600;
}

.dash-nav-item:disabled {
	color: var(--faint);
	cursor: default;
}

.dash-nav-dot {
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.55;
}


.dash-content {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
}

.dash-hero {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.dash-icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: linear-gradient(135deg, #f6821f, #ff8c42 45%, #ffb26b);
	color: #fff;
	font-size: 24px;
	font-weight: 700;
}

.dash-hero-main {
	min-width: 0;
}

.dash-name {
	margin: 2px 0 0;
	color: var(--text);
	font-family: var(--display);
	font-size: 19px;
	font-weight: 650;
}

.dash-desc {
	max-width: 640px;
	margin: 5px 0 0;
	color: var(--text-2);
	font-size: 12.5px;
	line-height: 1.65;
}

.dash-desc.is-empty {
	color: var(--muted);
}

.dash-meta {
	margin: 7px 0 0;
	color: var(--muted);
	font-size: 11.5px;
}

.dash-actions {
	display: flex;
	gap: 8px;
	margin-top: 18px;
}

.dash-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 34px;
	padding: 0 14px;
	border: 1px solid var(--border);
	border-radius: 9px;
	background: var(--panel);
	color: var(--text-2);
	font-size: 12.5px;
	text-decoration: none;
	cursor: pointer;
}

.dash-pill:hover:not(:disabled) {
	border-color: rgba(246, 130, 31, 0.45);
	color: var(--text);
}

.dash-pill:disabled {
	color: var(--faint);
	cursor: not-allowed;
}

.dash-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-top: 26px;
}

.dash-card {
	padding: 16px 18px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--panel);
}

.dash-card h3 {
	margin: 0;
	color: var(--text);
	font-size: 13.5px;
	font-weight: 600;
}

.dash-card-note {
	margin: 6px 0 0;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.6;
}

.dash-url {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 34px;
	margin-top: 12px;
	padding: 0 11px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--panel-2);
	color: var(--text-2);
	font-size: 12px;
	overflow: hidden;
}

.dash-url span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dash-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 34px;
	margin-top: 12px;
	padding: 0 14px;
	border: 0;
	border-radius: 8px;
	background: var(--primary);
	color: var(--primary-text);
	font-size: 12.5px;
	cursor: pointer;
}

.dash-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 18px;
	margin: 14px 0 0;
}

.dash-stats dt {
	color: var(--muted);
	font-size: 11px;
}

.dash-stats dd {
	margin: 3px 0 0;
	color: var(--text);
	font-size: 14px;
	font-weight: 600;
}

@media (max-width: 980px) {
	.dash-nav {
		width: 180px;
	}

	.dash-cards {
		grid-template-columns: 1fr;
	}

	.main-view.is-domains {
		padding: 22px 20px 36px;
	}

	.domain-row {
		flex-direction: column;
	}
}

.empty-state {
	text-align: center;
	color: var(--muted);
	font-size: 12.5px;
	line-height: 1.9;
	padding: 46px 20px;
}


::-webkit-scrollbar {
	width: 9px;
	height: 9px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: var(--scroll-thumb);
	border-radius: 9px;
	border: 2px solid transparent;
	background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--scroll-thumb-hover);
	background-clip: content-box;
}



@media (max-width: 1080px) {
	body {
		overflow: auto;
	}

	
	.sidebar {
		width: 66px;
	}

	.sidebar .side-label,
	.sidebar .side-count,
	.sidebar .side-caret,
	.sidebar .side-brand-name,
	.sidebar .side-sub {
		display: none;
	}

	.sidebar .side-head {
		flex-direction: column;
		gap: 4px;
	}

	.sidebar .side-brand,
	.sidebar .side-item {
		justify-content: center;
		padding-left: 0;
		padding-right: 0;
	}

	.page-inner {
		padding: 18px 18px 40px;
	}

	.home-greet .l2 {
		font-size: 27px;
	}

	.workspace {
		display: flex;
		flex-direction: column;
		height: auto;
	}

	.splitter {
		display: none;
	}

	.pane {
		height: 72vh;
		border-right: 0;
		border-bottom: 1px solid var(--border);
	}
}