/* theme-name: 白色 */
/* pios — dark theme, pi-flavored */

:root {
	color-scheme: light;
	--bg: #ffffff;
	--bg-elev: #ffffff;
	--bg-elev2: #f6f8fa;
	--border: #d0d7de;
	--border-soft: #d8dee4;
	--text: #1f2328;
	--text-dim: #59636e;
	--text-faint: #818b98;
	--accent: #0969da;
	--accent-soft: rgba(9, 105, 218, 0.1);
	--green: #059669;
	--green-soft: rgba(5, 150, 105, 0.12);
	--red: #dc2626;
	--red-soft: rgba(220, 38, 38, 0.1);
	--amber: #d97706;
	/* Terminal ANSI palette — light: canvas + padded area both light. */
	--term-bg: #ffffff;
	--term-fg: #1f2328;
	--term-cursor: #0969da;
	--term-cursor-accent: #ffffff;
	--term-selection: rgba(9, 105, 218, 0.32);
	--term-black: #e8eaf0;
	--term-red: #dc2626;
	--term-green: #059669;
	--term-yellow: #d97706;
	--term-blue: #2563eb;
	--term-magenta: #9333ea;
	--term-cyan: #0e7490;
	--term-white: #1f2328;
	--term-bright-black: #8a91a3;
	--term-bright-red: #dc2626;
	--term-bright-green: #059669;
	--term-bright-yellow: #d97706;
	--term-bright-blue: #2563eb;
	--term-bright-magenta: #9333ea;
	--term-bright-cyan: #0e7490;
	--term-bright-white: #000000;
	--mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
	--sans:
		-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
		"Hiragino Sans GB", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
}

* {
	box-sizing: border-box;
}

html,
body,
#root {
	height: 100%;
	margin: 0;
}

body {
	background: var(--bg);
	color: var(--text);
	font-family: var(--sans);
	font-size: 14px;
	line-height: 1.6;
}

.app {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.login-screen {
	min-height: 100%;
	display: grid;
	place-items: center;
	padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
	background: radial-gradient(circle at 50% 0%, rgba(139, 92, 246, .18), transparent 45%), var(--bg);
}
.login-card {
	width: min(100%, 420px);
	padding: 34px 28px 26px;
	border: 1px solid var(--border);
	border-radius: 20px;
	background: rgba(20, 22, 28, .94);
	box-shadow: 0 24px 80px rgba(0, 0, 0, .35);
}
.login-mark {
	width: 52px;
	height: 52px;
	display: grid;
	place-items: center;
	border-radius: 16px;
	background: var(--accent);
	color: white;
	font-size: 30px;
	font-weight: 700;
}
.login-card h1 { margin: 22px 0 6px; font-size: 25px; }
.login-card p { margin: 0 0 24px; color: var(--text-dim); }
.login-card label { display: block; margin-bottom: 8px; color: var(--text-dim); font-size: 13px; }
.login-card input {
	width: 100%; min-height: 50px; padding: 0 14px; border: 1px solid var(--border);
	border-radius: 10px; background: var(--bg); color: var(--text); font: 14px var(--mono); outline: none;
}
.login-card input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.login-button {
	width: 100%; min-height: 50px; margin-top: 18px; border: 0; border-radius: 10px;
	background: var(--accent); color: white; font-weight: 700; cursor: pointer;
}
.login-button:disabled { opacity: .55; cursor: not-allowed; }
.login-error { margin-top: 10px; color: var(--red); font-size: 13px; }
.login-hint { margin-top: 18px; color: var(--text-faint); text-align: center; font-size: 12px; }

@media (max-width: 480px) {
	.login-screen { padding-left: 16px; padding-right: 16px; place-items: start center; padding-top: 16vh; }
	.login-card { padding: 28px 22px 22px; border-radius: 16px; }
}

/* ------------------------------------------------------------ 3-column layout */

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

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

.panel {
	display: flex;
	flex-direction: column;
	width: 240px;
	flex-shrink: 0;
	min-height: 0;
	background: var(--bg-elev);
	border-right: 1px solid var(--border);
	position: relative;
}
.panel-right {
	border-right: none;
	border-left: 1px solid var(--border);
}

/* 可拖拽面板宽度：宽度由 .layout 上的 CSS 变量控制（ResizeHandle 拖拽更新） */
.drawer-left .panel {
	width: var(--left-w, 240px);
}
.drawer-right .panel {
	width: var(--right-w, 240px);
}
.resize-handle {
	flex-shrink: 0;
	width: 6px;
	margin: 0 -3px; /* 盖住面板边框，扩大可拖拽命中区 */
	position: relative;
	z-index: 10;
	cursor: col-resize;
	touch-action: none;
}
.resize-handle::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 2px;
	width: 2px;
	background: transparent;
	transition: background 0.15s ease;
}
.resize-handle:hover::after,
body.panel-resizing .resize-handle::after {
	background: var(--accent);
	opacity: 0.55;
}
body.panel-resizing {
	cursor: col-resize;
	user-select: none;
}

.panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 12px 8px;
	border-bottom: 1px solid var(--border-soft);
	flex-shrink: 0;
}

.panel-title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--text-faint);
}

.panel-new,
.panel-refresh {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: var(--bg-elev2);
	color: var(--text-dim);
	cursor: pointer;
	padding: 3px 8px;
	font-size: 12px;
}
.panel-new:hover,
.panel-refresh:hover {
	color: var(--text);
	border-color: var(--accent);
}

/* Floating circular refresh button (bottom-right of a panel). */
.panel-fab {
	position: absolute;
	right: 14px;
	bottom: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--border);
	background: var(--bg-elev2);
	color: var(--text-dim);
	font-size: 14px;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
	z-index: 2;
}
.panel-fab:hover {
	color: var(--accent);
	border-color: var(--accent);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.panel-fab:active {
	transform: scale(0.94);
}

/* Keep the last list item clear of the floating refresh button. */
.panel-right .panel-body,
.sessions-scroll {
	padding-bottom: 56px;
}

/* Running conversations: pinned above the scrolling history (like projects),
   so the two sections never scroll together and both titles stay visible. */
.panel-convs {
	flex-shrink: 0;
	max-height: 32%;
	overflow-y: auto;
	padding: 6px 6px 0;
}
.panel-sessions {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	padding: 0 6px;
}
.panel-sessions .panel-section-title {
	flex-shrink: 0;
	padding-top: 8px;
}
.sessions-scroll {
	flex: 1;
	overflow-y: auto;
	min-height: 0;
}

.panel-body {
	flex: 1;
	overflow-y: auto;
	padding: 6px;
}

/* ------------------------------------------------------ extension widgets */

.panel-widgets {
	flex-shrink: 0;
	max-height: 40%;
	overflow-y: auto;
	padding: 8px;
	border-top: 1px solid var(--border-soft);
	background: rgba(0, 0, 0, 0.15);
}

.widget {
	border: 1px solid var(--border-soft);
	border-radius: 8px;
	background: var(--bg-elev2);
	margin-bottom: 6px;
	overflow: hidden;
}
.widget:last-child {
	margin-bottom: 0;
}
.widget-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	width: 100%;
	padding: 4px 10px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--text-faint);
	border-bottom: 1px solid var(--border-soft);
	text-align: left;
	background: none;
	border-top: none;
	border-left: none;
	border-right: none;
	font-family: inherit;
}
.widget-title-btn {
	cursor: pointer;
}
.widget-title-btn:hover {
	color: var(--text);
	background: rgba(255, 255, 255, 0.05);
}
.widget-title-btn svg {
	flex-shrink: 0;
	opacity: 0.6;
}

.widget-lines {
	margin: 0;
	padding: 6px 10px;
	font-family: var(--mono);
	font-size: 11px;
	line-height: 1.5;
	color: var(--text-dim);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

/* 点击放大后的 widget 浮层：完整宽度展示，保留等宽对齐，超宽可横向滚动 */
.widget-expand {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(90vw, 1100px);
	max-height: min(80vh, calc(100vh - 80px));
	display: flex;
	flex-direction: column;
	background: var(--bg-elev2);
	border: 1px solid var(--border);
	border-radius: 14px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
	z-index: 400;
}
.widget-expand-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 12px;
	border-bottom: 1px solid var(--border-soft);
}
.widget-expand-title {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--text-dim);
}
.widget-expand-lines {
	margin: 0;
	padding: 12px 16px;
	font-family: var(--mono);
	font-size: 12px;
	line-height: 1.55;
	color: var(--text-dim);
	white-space: pre;
	overflow: auto;
}

.pc-item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	width: 100%;
	padding: 5px 8px;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: var(--text-dim);
	font-size: 12px;
	text-align: left;
	cursor: pointer;
}
.pc-item:hover,
.pc-item.sel {
	background: var(--accent-soft);
	color: var(--text);
}

.pc-icon {
	flex-shrink: 0;
	margin-top: 1px;
	color: var(--text-faint);
}
.pc-item.sel .pc-icon {
	color: var(--accent);
}

.pc-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.pc-name {
	font-family: var(--mono);
	font-size: 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Full path is shown unwrapped-style: wraps inside the container so every
   character is visible — no ellipsis, no horizontal scrollbar. */
.pc-path {
	font-size: 10.5px;
	line-height: 1.4;
	color: var(--text-faint);
	font-family: var(--mono);
	word-break: break-all;
	overflow-wrap: anywhere;
}

.panel-empty {
	padding: 16px 8px;
	text-align: center;
	font-size: 12px;
	color: var(--text-faint);
}

/* Huge directories get their list cut at the platform cap — surface it. */
.files-truncated {
	color: var(--amber);
	border-top: 1px dashed var(--border);
	margin-top: 8px;
	padding-top: 12px;
}

/* ------------------------------------------------------------------ sessions */

.session-item {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	height: 44px;
	padding: 0 10px;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: var(--text-dim);
	font-size: 12.5px;
	text-align: left;
	cursor: pointer;
	margin-bottom: 2px;
	line-height: 1.2;
	box-sizing: border-box;
}
.session-item:hover {
	background: var(--bg-elev2);
	color: var(--text);
}
.session-item.active {
	background: var(--accent-soft);
	color: var(--text);
	border: 1px solid rgba(139, 92, 246, 0.3);
	padding: 0 9px;
}

.session-icon {
	flex-shrink: 0;
	color: var(--text-faint);
}
.session-item.active .session-icon {
	color: var(--accent);
}

.session-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.session-title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 5em;
	font-size: 12.5px;
	line-height: 1.2;
}

.session-sub {
	font-size: 11px;
	color: var(--text-faint);
}

.session-src {
	margin-left: 6px;
	font-size: 9.5px;
	padding: 0 5px;
	border-radius: 999px;
	border: 1px solid var(--border);
	color: var(--text-faint);
	text-transform: uppercase;
	letter-spacing: 0.4px;
	vertical-align: 1px;
}

.session-time {
	font-size: 10.5px;
	color: var(--text-faint);
	flex-shrink: 0;
}

/* ------------------------------------------------------- recent projects */

/*
 * Recent-project list: pinned ABOVE the scrolling session list (independent
 * scroll — scrolling sessions never hides the projects), with a clear
 * separator line underneath. Scrolls internally only when many projects.
 */
.panel-projects {
	flex-shrink: 0;
	max-height: 45%;
	display: flex;
	flex-direction: column;
	padding: 6px 6px 8px;
	border-bottom: 2px solid var(--border);
}

/* 最近项目标题占位不悬浮：只有项目列表内部滚动，滚动条不会出现在标题右侧 */
.panel-projects .panel-section-title {
	flex-shrink: 0;
}

.projects-scroll {
	flex: 1;
	overflow-y: auto;
	min-height: 0;
}

.panel-section-title {
	padding: 4px 10px 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--text-faint);
}

/* Divider between the running-conversations and history sections. */
.panel-section-divider {
	height: 1px;
	background: var(--border);
	margin: 6px 10px;
}

/* Streaming indicator on running-conversation entries (left panel). */
.conv-streaming {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex-shrink: 0;
	background: var(--green);
	box-shadow: 0 0 4px var(--green);
	animation: conv-pulse 1.2s ease-in-out infinite;
}

@keyframes conv-pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.25;
	}
}
.project-item {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 7px 10px;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: var(--text-dim);
	font-size: 12.5px;
	text-align: left;
	cursor: pointer;
	margin-bottom: 2px;
}
.project-item:hover {
	background: var(--bg-elev2);
	color: var(--text);
}
.project-item.active {
	background: var(--accent-soft);
	color: var(--text);
	border: 1px solid rgba(139, 92, 246, 0.3);
	padding: 6px 9px;
}

.project-icon {
	flex-shrink: 0;
	color: var(--text-faint);
}
.project-item.active .project-icon {
	color: var(--accent);
}

.project-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.project-name {
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.project-path {
	font-size: 11px;
	color: var(--text-faint);
	font-family: var(--mono);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.project-time {
	font-size: 10.5px;
	color: var(--text-faint);
	flex-shrink: 0;
}

/* 左栏行包装 + 悬停删除按钮（最近项目 / 历史对话的两步确认删除）：
   方形小图标钮，确认态红底白勾 */
.lp-row {
	position: relative;
}
.lp-row .lp-del {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	display: none;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0;
	border-radius: 5px;
	border: none;
	background: transparent;
	color: var(--text-faint);
	cursor: pointer;
}
.lp-row .lp-del svg {
	width: 13px;
	height: 13px;
}
.lp-row:hover .lp-del {
	display: inline-flex;
}
/* hover 时隐藏时间标签，给删除按钮腾位置 */
.lp-row:hover .project-time,
.lp-row:hover .session-time {
	visibility: hidden;
}
.lp-row .lp-del:hover {
	color: var(--red);
	background: color-mix(in srgb, var(--red) 12%, transparent);
}
/* 确认态：红底白勾，一眼可辨 */
.lp-row .lp-del.confirm,
.lp-row .lp-del.confirm:hover {
	color: #fff;
	background: var(--red);
}

/* --------------------------------------------------------------------- files */

.panel-crumbs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 2px;
	padding: 6px 8px;
	border-bottom: 1px solid var(--border-soft);
	flex-shrink: 0;
	font-size: 12px;
}

.crumb {
	border: none;
	background: transparent;
	color: var(--text-faint);
	cursor: pointer;
	padding: 2px 4px;
	border-radius: 4px;
	font-size: 12px;
	max-width: 90px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* Git 入口已移到顶栏 workspace-nav（Editor 左边），此样式不再使用。 */
.crumb:hover {
	color: var(--text);
	background: var(--bg-elev2);
}
.crumb.active {
	color: var(--accent);
}

/* 根路径：默认保留末尾目录名、超长时从左侧省略（direction: rtl 技巧）。
 * 现在根路径显示 formatHomePath(cwd)（home 下为 ~/xx），rtl 会把 ~ 弄到
 * 末尾（xxx/~ 反了），改回正常 LTR；~ 前缀本身很短，不再需要省略技巧。
 * 点击打开「切换项目」弹窗 —— 用链接色提示可点（无下划线）。 */
.crumb-root {
	direction: ltr;
	text-align: left;
	color: #0969da;
	transition: color 0.12s;
}
.crumb-root:hover {
	color: #0550ae;
	background: transparent;
}

.crumb-seg {
	display: inline-flex;
	align-items: center;
	color: var(--text-faint);
}

.file-item {
	display: flex;
	align-items: center;
	gap: 7px;
	width: 100%;
	padding: 5px 8px;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: var(--text-dim);
	font-size: 12.5px;
	text-align: left;
	cursor: pointer;
	/* 长按只走我们自己的右键菜单：禁掉浏览器原生的文本选择与 iOS 长按
	   呼叫菜单，并去掉 300ms 双击缩放延迟；纵向滚动由 .panel-body 容器
	   自己处理，touch-action: manipulation 不影响它。 */
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	touch-action: manipulation;
}
.file-item:hover {
	background: var(--bg-elev2);
	color: var(--text);
}

/* Folder rows: the whole row is a div — the main button navigates, the trailing
   link button attaches the folder path as a reference. */
.file-item.dir {
	cursor: default;
}
.file-dir-main {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 7px;
	border: none;
	background: transparent;
	color: inherit;
	font-size: inherit;
	text-align: left;
	cursor: pointer;
	padding: 0;
}
.file-item:hover {
	background: var(--bg-elev2);
	color: var(--text);
}

.file-icon {
	flex-shrink: 0;
	color: var(--text-faint);
}
.file-item.dir .file-icon {
	color: #d97706;
}

.file-name {
	flex: 1;
	min-width: 0;
	/* Now a button (click = open preview): reset button chrome. */
	display: flex;
	align-items: center;
	gap: 7px;
	border: none;
	background: transparent;
	color: inherit;
	font-size: inherit;
	font-family: inherit;
	text-align: left;
	padding: 0;
	overflow: hidden;
	cursor: pointer;
}
.file-name:hover {
	color: var(--accent);
}
.file-name.no-preview {
	cursor: default;
}
.file-name.no-preview:hover {
	color: inherit;
}
.file-name-text {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.file-attach {
	position: relative;
	display: none;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	flex-shrink: 0;
}
.file-item:hover .file-attach {
	display: inline-flex;
}

/* Instant CSS tooltip (no browser title delay). Anchored to the button's RIGHT
   edge so text never overflows the right side of the screen (file panel is at
   the window edge). */
.file-attach::after {
	content: attr(data-tip);
	position: absolute;
	bottom: calc(100% + 8px);
	right: 0;
	background: #ffffff;
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 4px 9px;
	font-size: 11px;
	line-height: 1.4;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.09s ease;
	z-index: 40;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.file-attach::before {
	content: "";
	position: absolute;
	bottom: calc(100% + 3px);
	right: 6px; /* arrow centered on the 22px-wide button */
	border: 5px solid transparent;
	border-top-color: #ffffff;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.09s ease;
	z-index: 40;
}
.file-attach:hover::after,
.file-attach:hover::before {
	opacity: 1;
}

/* ---- Windows 风格树状文件树 ---- */

.tree-container {
	overflow: auto;
	padding: 4px 0;
}

.tree-view {
	font-size: 13px;
}

/* react-arborist 内层 */
.tree-view > div {
	overflow: visible !important;
}

.tree-node-wrapper {
	display: flex;
	align-items: center;
	gap: 4px;
	height: 24px;
	padding: 0 4px;
	border-radius: 4px;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	touch-action: manipulation;
}

.tree-node-wrapper:hover {
	background: var(--bg-elev2);
}

/* 展开/折叠箭头 */
.tree-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	color: var(--text-faint);
	cursor: pointer;
	transition: transform 0.15s ease;
	flex-shrink: 0;
}

.tree-arrow svg {
	width: 14px;
	height: 14px;
}

.tree-arrow.open {
	transform: rotate(90deg);
}

.tree-arrow-spacer {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* 文件图标 */
.tree-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.tree-icon svg {
	width: 16px;
	height: 16px;
}

.tree-icon.dir {
	color: #d97706; /* Windows 文件夹黄色 */
}

.tree-icon.file {
	color: var(--text-dim);
}

/* 文件名 */
.tree-label {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--text-dim);
	font-size: 13px;
}

.tree-node-wrapper:hover .tree-label {
	color: var(--text);
}

/* react-arborist 行样式覆盖 */
.tree-view [data-testid="tree-node"] {
	padding: 0 !important;
}

.tree-view [data-testid="tree-node-inner"] {
	padding: 0 4px !important;
	height: 24px !important;
	align-items: center !important;
}

/* Tooltip below the trigger for toolbar chips (they sit at the window top). */
.chip[data-tip] {
	position: relative;
}
.chip[data-tip]::after {
	content: attr(data-tip);
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	background: #ffffff;
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 4px 9px;
	font-size: 11px;
	line-height: 1.4;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.09s ease;
	z-index: 40;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.chip[data-tip]:hover::after {
	opacity: 1;
}

.file-context-backdrop {
	position: fixed;
	inset: 0;
	/* 需要高于 modal-backdrop（300）和 modal 内层（400），否则在打开
	   modal（如归档弹窗）里长按某项时菜单会被 modal 盖住。 */
	z-index: 500;
}
.file-context-menu {
	position: fixed;
	z-index: 501;
	min-width: 150px;
	padding: 4px;
	background: var(--bg-elev2);
	border: 1px solid var(--border);
	border-radius: 7px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.file-context-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 5px;
	color: var(--text-dim);
	font-size: 12px;
	cursor: pointer;
	white-space: nowrap;
}
.file-context-item:hover {
	background: var(--bg-elev);
	color: var(--text);
}
.file-context-item.danger {
	color: var(--red, #ef4444);
}

/* + : inline file content */
.file-attach.inline {
	background: var(--accent-soft);
	color: var(--accent);
}
.file-attach.inline:hover {
	background: var(--accent);
	color: #fff;
}

/* download icon : save the file (any kind, incl. binary/archives) */
.file-attach.download {
	background: rgba(52, 211, 153, 0.14);
	color: var(--green);
	text-decoration: none;
}
.file-attach.download:hover {
	background: var(--green);
	color: #fff;
}

/* link icon : reference path only */
.file-attach.ref {
	background: rgba(251, 191, 36, 0.12);
	color: var(--amber);
}
.file-attach.ref:hover {
	background: var(--amber);
	color: #1a1a1a;
}

/* --------------------------------------------------------------- attachments */

.attach-row {
	max-width: 860px;
	margin: 0 auto 6px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

.attach-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px;
	border: 1px solid rgba(139, 92, 246, 0.4);
	border-radius: 999px;
	background: var(--accent-soft);
	color: var(--text);
	font-size: 12px;
	max-width: 320px;
}
.attach-chip.reference {
	border-color: rgba(251, 191, 36, 0.4);
	background: rgba(251, 191, 36, 0.1);
}
.attach-chip.lines {
	border-color: rgba(52, 211, 153, 0.4);
	background: rgba(52, 211, 153, 0.1);
}
.attach-chip.image {
	border-color: rgba(236, 72, 153, 0.45);
	background: rgba(236, 72, 153, 0.12);
}
.attach-chip.file {
	border-color: rgba(96, 165, 250, 0.45);
	background: rgba(96, 165, 250, 0.12);
}

/* Paste / drag-drop / upload image dropzone overlay. */
.inputbar.drop-active {
	outline: 2px dashed var(--accent);
	outline-offset: -2px;
}
.drop-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
	z-index: 5;
	pointer-events: none;
}
.drop-overlay span {
	padding: 10px 18px;
	border: 1px dashed var(--accent);
	border-radius: 10px;
	background: var(--bg-elev2);
	color: var(--text);
	font-size: 14px;
}

.attach-range {
	font-family: var(--mono);
	font-size: 10.5px;
	padding: 0 6px;
	border-radius: 999px;
	background: rgba(52, 211, 153, 0.18);
	color: var(--green);
}

.attach-remove {
	border: none;
	background: transparent;
	color: var(--text-dim);
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	padding: 0 2px;
}
.attach-remove:hover {
	color: var(--red);
}

.attach-hint {
	font-size: 11.5px;
	color: var(--text-faint);
}

/* ----------------------------------------------------------- attachment card */

.attachcard {
	margin: 6px 0;
	border: 1px dashed rgba(139, 92, 246, 0.45);
	border-radius: 8px;
	background: var(--accent-soft);
	overflow: hidden;
}

.attachcard-head {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 7px 12px;
	border: none;
	background: transparent;
	color: var(--text);
	font-size: 12.5px;
	cursor: pointer;
	text-align: left;
}
.attachcard-head:hover {
	background: rgba(139, 92, 246, 0.08);
}

.attachcard-icon {
	flex-shrink: 0;
}

.attachcard-name {
	font-weight: 600;
	font-family: var(--mono);
	font-size: 12px;
}

.attachcard-path {
	color: var(--text-faint);
	font-size: 11px;
	font-family: var(--mono);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 200px;
}

.attachcard-meta {
	margin-left: auto;
	color: var(--text-faint);
	font-size: 11px;
	flex-shrink: 0;
}

.attachcard-mode {
	margin-left: auto;
	font-size: 11px;
	flex-shrink: 0;
	padding: 1px 8px;
	border-radius: 999px;
	border: 1px solid var(--border);
	color: var(--text-faint);
}
.attachcard-mode.inline {
	color: var(--green);
	border-color: rgba(52, 211, 153, 0.35);
}
.attachcard-mode.ref {
	color: var(--amber);
	border-color: rgba(251, 191, 36, 0.4);
}
.attachcard-mode.lines {
	color: var(--accent);
	border-color: rgba(139, 92, 246, 0.4);
}

/* ---- attachcard mode: vision-bridge transcript -------------------------- */
.attachcard-mode.bridged {
	color: var(--accent);
	border-color: rgba(139, 92, 246, 0.4);
}
.attachcard-bridgenote {
	font-size: 11px;
	color: var(--text-faint);
	padding: 6px 10px;
	border-bottom: 1px solid var(--border);
	background: rgba(139, 92, 246, 0.06);
}

.attachcard-refnote {
	padding: 8px 12px;
	border-top: 1px dashed rgba(251, 191, 36, 0.3);
	font-size: 11.5px;
	color: var(--text-faint);
}

.attachcard-content {
	margin: 0;
	padding: 10px 12px;
	border-top: 1px dashed rgba(139, 92, 246, 0.3);
	font-family: var(--mono);
	font-size: 12px;
	line-height: 1.55;
	color: var(--text-dim);
	white-space: pre-wrap;
	word-break: break-word;
	max-height: 320px;
	overflow-y: auto;
	background: rgba(0, 0, 0, 0.2);
}

.attachcard-image img {
	max-width: 100%;
	max-height: 320px;
	border-radius: 0 0 8px 8px;
	display: block;
}

/* --------------------------------------------------------------- skill card */

.skillcard {
	margin: 8px 0;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--bg-elev2);
	overflow: hidden;
}

.skillcard-head {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 8px 12px;
	border: none;
	background: transparent;
	color: var(--text);
	font-size: 12.5px;
	cursor: pointer;
	text-align: left;
	transition: background 0.12s ease;
}

.skillcard-head:hover {
	background: rgba(139, 92, 246, 0.08);
}

.skillcard-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 6px;
	background: var(--accent-soft);
	color: var(--accent);
	font-size: 12px;
}

.skillcard-name {
	font-family: var(--mono);
	font-weight: 600;
	color: var(--text);
	font-size: 12.5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.skillcard-path {
	flex: 1;
	min-width: 0;
	color: var(--text-faint);
	font-size: 11px;
	font-family: var(--mono);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.skillcard-action {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
	color: var(--text-faint);
	font-size: 11.5px;
}

.skillcard-action:hover {
	color: var(--text);
}

.skillcard-body {
	padding: 10px 14px 12px;
	border-top: 1px solid var(--border-soft);
	max-height: 420px;
	overflow-y: auto;
	background: rgba(0, 0, 0, 0.15);
}

.skillcard-body .markdown > :first-child {
	margin-top: 0;
}

/* ------------------------------------------------------------ view switch */

.view-pane {
	flex: 1;
	display: flex;
	min-width: 0;
	min-height: 0;
}
.view-pane.hidden {
	display: none;
}

/* 插件视图：容器只给布局，内容完全由插件自己的 mount() 填充。
   .broken = 服务端激活失败，tab 置灰提示。 */
.plugin-view {
	flex: 1;
	overflow: auto;
	padding: 16px;
	min-width: 0;
}
.view-switch .plugin-tab.broken {
	opacity: 0.45;
}

/* Mobile panel drawers: transparent wrappers on desktop, so the classic
   3-column layout is untouched. Toggled fixed drawers kick in ≤768px. */
.panel-drawer {
	display: contents;
}
.panel-toggle {
	display: none;
}
.topbar .mobile-files-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--border);
	border-radius: 9px;
	background: var(--bg-elev2);
	color: var(--text-dim);
	font-size: 15px;
	cursor: pointer;
	flex-shrink: 0;
}
.topbar .mobile-files-toggle:hover,
.topbar .mobile-files-toggle.active {
	background: var(--accent-soft);
	border-color: var(--accent);
	color: var(--accent);
}
.drawer-backdrop {
	position: fixed;
	inset: 0;
	z-index: 55;
	background: rgba(0, 0, 0, 0.5);
	animation: drawer-fade 0.2s ease;
}
@keyframes drawer-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.view-switch {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--border);
	border-radius: 999px;
	overflow: hidden;
	background: var(--bg-elev2);
	flex-shrink: 0;
}
.view-switch button {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	border: none;
	background: transparent;
	color: var(--text-dim);
	font-size: 12.5px;
	padding: 4px 12px;
	cursor: pointer;
	transition:
		background 0.15s,
		color 0.15s;
}
.view-switch button:hover {
	color: var(--text);
}
.view-switch button.active {
	background: var(--accent-soft);
	color: var(--accent);
}
.view-switch button + button {
	border-left: 1px solid var(--border);
}

/* -------------------------------------------------------------- terminal */

.terminal-view {
	flex: 1;
	display: flex;
	min-height: 0;
	min-width: 0;
}

.term-side {
	display: flex;
	flex-direction: column;
	width: 250px;
	flex-shrink: 0;
	min-height: 0;
	background: var(--bg-elev);
}
.term-commands {
	border-right: 1px solid var(--border);
}

/* Tabs live under the command list in the same left column — the two
   bodies split the column 50/50. */
.term-tabs-block {
	display: flex;
	flex-direction: column;
	min-height: 0;
	flex: 1 1 0;
	border-top: 1px solid var(--border);
}
.term-tabs-block .panel-body {
	flex: 1;
	min-height: 0;
}

/* Mobile drawer toggle for the left column (hidden on desktop). */
.term-side-toggle {
	display: none;
}

.term-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	background: var(--term-bg);
	/* Padding lives here (not on .term-xterm): FitAddon measures the xterm's
	   parent element and only subtracts the xterm's own padding, so padding on
	   .term-xterm made it compute rows for more space than is actually visible
	   and the bottom line of the terminal was clipped below the viewport. */
	padding: 10px 8px 8px;
}

.term-xterm-outer {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}
.term-xterm-outer.hidden {
	display: none;
}
.term-xterm {
	flex: 1;
	min-height: 0;
}
.term-xterm .xterm {
	height: 100%;
}
/* xterm.css hard-codes .xterm-viewport background to #000; when the fitted
   row count doesn't fill the viewport exactly (rows × cellHeight < height)
   the leftover strip at the bottom shows pure black. Use the theme
   background so it blends with the terminal content (three-class selector
   beats the injected xterm.css rule). */
.term-xterm .xterm .xterm-viewport {
	background-color: var(--term-bg);
}

/* ---- 移动端终端虚拟键栏（移植 clawos）：ESC/TAB/CTRL/ALT/方向键等，
   解决手机软键盘没有控制键/方向键的问题 ---- */
.term-keybar {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding-top: 6px;
	border-top: 1px solid var(--border);
	user-select: none;
	flex-shrink: 0;
}
.term-keybar-row {
	display: flex;
	gap: 5px;
}
.term-key {
	flex: 1;
	min-width: 0;
	padding: 9px 4px;
	border: 1px solid var(--border);
	border-radius: 7px;
	background: var(--bg-elev2);
	color: var(--text-dim);
	font-size: 12.5px;
	line-height: 1;
	text-align: center;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	transition: background 0.12s, color 0.12s, transform 0.12s;
}
.term-key:active {
	background: var(--accent-soft);
	color: var(--accent);
	transform: scale(0.95);
}
/* CTRL/ALT 闩锁 armed 高亮 */
.term-key.active {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}
/* 顶栏键栏开关（移动端可见）：展开时高亮；⌨ 字形没有 svg 尺寸规则可用 */
.term-keybar-toggle {
	font-size: 13px;
	line-height: 1;
}
.term-keybar-toggle.active {
	color: var(--accent);
	border-color: var(--accent);
}
/* 键栏只在移动端出现；桌面物理键盘场景零感知 */
@media (min-width: 769px) {
	.term-keybar,
	.term-keybar-toggle {
		display: none !important;
	}
}

.term-empty {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: var(--text-faint);
}
.term-empty-icon {
	font-size: 34px;
	opacity: 0.5;
}
.term-empty-title {
	font-size: 15px;
	color: var(--text-dim);
}
.term-empty-sub {
	font-size: 12px;
}

/* ---------------------------------------------------- terminal command list */

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

.cmd-item {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 6px 6px;
	border-radius: 8px;
	margin-bottom: 2px;
}
.cmd-item:hover {
	background: var(--bg-elev2);
}

.cmd-run {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border: none;
	border-radius: 6px;
	background: var(--accent-soft);
	color: var(--accent);
	cursor: pointer;
}
.cmd-run:hover {
	background: var(--accent);
	color: #fff;
}

.cmd-main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
	text-align: left;
	background: transparent;
	border: none;
	color: var(--text-dim);
	cursor: pointer;
	padding: 1px 4px;
}
.cmd-name {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.cmd-command {
	font-family: var(--mono);
	font-size: 11px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.cmd-cwd {
	font-size: 10px;
	color: var(--text-faint);
	font-family: var(--mono);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cmd-act {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border: none;
	border-radius: 5px;
	background: transparent;
	color: var(--text-faint);
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.1s;
	font-size: 11px;
}
.cmd-item:hover .cmd-act {
	opacity: 1;
}
.cmd-act:hover {
	color: var(--text);
	background: var(--bg-elev);
}
.cmd-act.del:hover {
	color: var(--red);
}
.cmd-act.del.confirm {
	opacity: 1;
	color: var(--red);
	background: var(--red-soft);
	border: 1px solid rgba(248, 113, 113, 0.4);
	width: auto;
	padding: 0 7px;
}

.cmd-form {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 6px 4px;
}
.cmd-form label {
	font-size: 11px;
	color: var(--text-faint);
	margin-top: 4px;
}
.cmd-input {
	width: 100%;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: var(--bg-elev2);
	color: var(--text);
	font-family: var(--mono);
	font-size: 12px;
	padding: 5px 8px;
	outline: none;
}
.cmd-input:focus {
	border-color: var(--accent);
}
.cmd-hint {
	color: var(--text-faint);
	font-size: 10.5px;
}
.cmd-form-actions {
	display: flex;
	gap: 6px;
	justify-content: flex-end;
	margin-top: 8px;
}

/* ------------------------------------------------------- terminal tabs */

.term-tab {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 4px 6px;
	border-radius: 8px;
	margin-bottom: 2px;
}
.term-tab:hover {
	background: var(--bg-elev2);
}
.term-tab.active {
	background: var(--accent-soft);
	border: 1px solid rgba(139, 92, 246, 0.3);
	padding: 3px 5px;
}

.term-tab-main {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: none;
	color: var(--text-dim);
	cursor: pointer;
	text-align: left;
	padding: 2px 2px;
}
.term-tab-main:hover {
	color: var(--text);
}
.term-tab.active .term-tab-main {
	color: var(--text);
}

.term-tab-dot {
	flex-shrink: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
}
.term-tab-dot.run {
	background: var(--green);
	box-shadow: 0 0 5px var(--green);
}
.term-tab-dot.exit {
	background: var(--text-faint);
}

.term-tab-title {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12.5px;
}
.term-tab-exit {
	color: var(--text-faint);
	font-size: 11px;
}

.term-tab-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border: none;
	border-radius: 5px;
	background: transparent;
	color: var(--text-faint);
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.1s;
}
.term-tab:hover .term-tab-close,
.term-tab.active .term-tab-close {
	opacity: 1;
}
.term-tab-close:hover {
	color: var(--red);
	background: var(--red-soft);
}

/* ------------------------------------------------------- source control (Git) */

/* Git 弹窗：把 ScmPanel 装进大尺寸 modal（原整页视图的布局原样复用）。 */
.git-modal {
	width: min(1180px, 96vw);
	max-width: 96vw;
	height: min(820px, 92vh);
	max-height: 92vh;
	overflow-y: hidden;
	padding: 12px 14px;
	gap: 8px;
}
.git-modal .modal-head {
	flex-shrink: 0;
	justify-content: space-between;
}
.git-modal .modal-title {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 700;
}
/* 左侧簇：标题 + ScmPanel portal 进来的「选择分支 / 切换」按钮。 */
.git-modal-head-left {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}
.git-modal-head-extras {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.git-modal-body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
	border: 1px solid var(--border-soft);
	border-radius: 8px;
}
.git-modal-body .scm-view {
	flex: 1;
	min-height: 0;
}

/* Git 面板：文件列内嵌版（和 TrashPanel 一样） */
.git-panel {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--bg-primary);
}
.git-modal-head-extras {
	display: flex;
	align-items: center;
	gap: 6px;
}
.git-panel-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
}
.git-panel-body .scm-view {
	flex: 1;
	min-height: 0;
}

.scm-view {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	background: var(--bg-elev);
}

.scm-header {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--border-soft);
}

.scm-title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.scm-title {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--text-faint);
}
.scm-title svg {
	color: var(--accent);
}

.scm-view-tabs {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 2px;
	border: 1px solid var(--border);
	border-radius: 7px;
	background: var(--bg-elev2);
}
.scm-view-tabs button {
	border: none;
	border-radius: 5px;
	background: transparent;
	color: var(--text-faint);
	font-size: 12px;
	padding: 4px 9px;
	cursor: pointer;
}
.scm-view-tabs button:hover {
	color: var(--text);
}
.scm-view-tabs button.active {
	background: var(--accent-soft);
	color: var(--accent);
	font-weight: 600;
}

/* CO / push / pull 图标按钮：文件表头里、在「更改/提交树」tab 左侧靠左显示。 */
.scm-git-actions {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-right: 8px;
}
.scm-git-actions .btn.btn-icon {
	height: 28px;
	padding: 0 7px;
}

/* ScmPanel portal 到 GitModal 标题行里的分支控件：紧凑、与标题同行不挤成一团。 */
.git-modal-head-extras .scm-select-inline {
	height: 28px;
	font-size: 12px;
	padding: 2px 6px;
	min-width: 140px;
	max-width: 220px;
}
.git-modal-head-extras .btn {
	height: 28px;
	font-size: 12px;
	padding: 2px 10px;
}

/* 文件表头右侧：计数 + 刷新按钮挤在一起不散。 */
.scm-files-header-right {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.scm-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.scm-row-branch {
	padding: 8px 14px;
	border-bottom: 1px solid var(--border-soft);
}
.scm-header-inline {
	padding-top: 8px;
}

/* 一行里的控件（分支 chip / 下拉 / 按钮 / 提交输入框）统一高度，对齐整齐。 */
.scm-row .btn,
.scm-row .scm-select,
.scm-row .scm-commit-input,
.scm-row .scm-branch-current {
	height: 34px;
}

.scm-branch-current {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--mono);
	font-size: 13px;
	color: var(--text);
	background: var(--bg-elev2);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 4px 10px;
	max-width: 260px;
	overflow: hidden;
}
.scm-branch-current svg {
	color: var(--accent);
	flex-shrink: 0;
}
.scm-upstream {
	color: var(--text-faint);
	font-size: 12px;
	white-space: nowrap;
}

.scm-select {
	flex: 0 1 auto;
	min-width: 120px;
	max-width: 200px;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: var(--bg-elev2);
	color: var(--text);
	font-size: 13px;
	padding: 0 8px;
}
.scm-select:focus {
	outline: none;
	border-color: var(--accent);
}

.scm-commit-input {
	flex: 1;
	min-width: 140px;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: var(--bg-elev2);
	color: var(--text);
	font-size: 13px;
	padding: 0 10px;
}
.scm-commit-input:focus {
	outline: none;
	border-color: var(--accent);
}
.scm-commit-input::placeholder {
	color: var(--text-faint);
}

.scm-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
}

.scm-files,
.scm-history {
	display: flex;
	flex-direction: column;
	min-height: 0;
	width: 100%;
}

.scm-files-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.4px;
	color: var(--text-faint);
	border-bottom: 1px solid var(--border-soft);
}
.scm-files-count {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--text-dim);
	background: var(--bg-elev2);
	border: 1px solid var(--border);
	border-radius: 999px;
	padding: 0 7px;
}

.scm-files-list,
.scm-history-list {
	flex: 1;
	overflow-y: auto;
	min-height: 0;
}

.scm-commit {
	width: 100%;
	display: flex;
	align-items: stretch;
	border-left: 2px solid transparent;
}
.scm-commit:hover,
.scm-commit.active {
	background: var(--accent-soft);
	border-left-color: var(--accent);
}
.scm-commit-main {
	flex: 1;
	display: flex;
	align-items: flex-start;
	gap: 4px;
	padding: 7px 10px 7px 8px;
	border: none;
	background: transparent;
	color: var(--text);
	text-align: left;
	cursor: pointer;
}
.scm-commit-actions {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 0 8px 0 4px;
}
.scm-commit-actions .scm-act {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px 6px;
	font-size: 14px;
	color: var(--text-faint);
	border: 1px solid transparent;
	border-radius: 4px;
	background: transparent;
	cursor: pointer;
}
.scm-commit-actions .scm-act:hover {
	color: var(--accent);
	border-color: var(--accent);
	background: var(--accent-soft);
}
.scm-commit-graph {
	min-width: 8px;
	max-width: 12px;
	overflow: hidden;
	white-space: pre;
	font-family: var(--mono);
	font-size: 12px;
	line-height: 1.35;
	color: var(--accent);
}
.scm-commit-info {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.scm-commit-subject {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12.5px;
	color: var(--text);
}
.scm-commit-meta,
.scm-commit-refs {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: var(--mono);
	font-size: 10.5px;
	color: var(--text-faint);
}
.scm-commit-refs {
	color: var(--green);
}

.scm-file {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	font-size: 13px;
	cursor: pointer;
	border-left: 2px solid transparent;
}
.scm-file:hover {
	background: var(--accent-soft);
}
.scm-file.active {
	background: var(--accent-soft);
	border-left-color: var(--accent);
}

/* per-file stage / unstage actions (visible on hover) */
.scm-file-actions {
	display: none;
	margin-left: auto;
	gap: 2px;
}
.scm-file:hover .scm-file-actions {
	display: inline-flex;
}
.scm-act {
	width: 18px;
	height: 18px;
	padding: 0;
	border: 1px solid var(--border);
	border-radius: 4px;
	background: var(--bg-elev2);
	color: var(--text-2);
	font-size: 13px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.scm-act:hover {
	background: var(--accent-soft);
	color: var(--text);
	border-color: var(--accent);
}

.scm-file-xy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 13px;
	height: 18px;
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 700;
	flex-shrink: 0;
}
.scm-file-xy.x {
	color: var(--green);
}
.scm-file-xy.y {
	color: var(--red);
}
.scm-file-xy.q {
	color: var(--amber);
}

.scm-file-path {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: var(--mono);
	font-size: 12.5px;
	color: var(--accent);
	text-decoration: none;
}
.scm-file-path:hover {
	text-decoration: underline;
}

.scm-file-stat {
	font-family: var(--mono);
	font-size: 11px;
	flex-shrink: 0;
}
.scm-file-stat .add {
	color: var(--green);
}
.scm-file-stat .del {
	color: var(--red);
}

.scm-empty {
	padding: 26px 16px;
	text-align: center;
	color: var(--text-faint);
	font-size: 13px;
}

.scm-diff {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	background: var(--bg);
}

.scm-diff-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-bottom: 1px solid var(--border-soft);
	font-family: var(--mono);
	font-size: 12.5px;
	color: var(--text-dim);
	background: var(--bg-elev);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.scm-diff-loading {
	color: var(--text-faint);
	font-size: 11px;
	flex-shrink: 0;
}
.scm-diff-header-right {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}
.scm-diff-close {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
	border: none;
	border-radius: 4px;
	background: transparent;
	color: var(--text-faint);
	cursor: pointer;
	flex-shrink: 0;
}
.scm-diff-close:hover {
	color: var(--text);
	background: var(--accent-soft);
}

.scm-diff-body {
	flex: 1;
	overflow: auto;
	min-height: 0;
	padding: 6px 0 12px;
}

.scm-diff-section {
	padding: 8px 14px 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--text-faint);
}

.scm-diff-pre {
	margin: 0;
	font-family: var(--mono);
	font-size: 12.5px;
	line-height: 1.55;
}

.scm-diff-line {
	padding: 0 14px;
	white-space: pre-wrap;
	word-break: break-word;
	color: var(--text-dim);
}
.scm-diff-line.hdr {
	color: var(--text-faint);
}
.scm-diff-line.hunk {
	color: var(--accent);
	background: var(--accent-soft);
}
.scm-diff-line.add {
	color: var(--green);
	background: var(--green-soft);
}
.scm-diff-line.del {
	color: var(--red);
	background: var(--red-soft);
}

.scm-error {
	margin: 10px 14px;
	padding: 8px 12px;
	border: 1px solid var(--red-soft);
	border-radius: 8px;
	background: var(--red-soft);
	color: var(--red);
	font-size: 12.5px;
}

.scm-hint {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	font-size: 12px;
	color: var(--text-faint);
	border-top: 1px solid var(--border-soft);
}
.scm-hint svg {
	flex-shrink: 0;
}

.scm-goto-term {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-left: auto;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: var(--bg-elev2);
	color: var(--text-dim);
	font-size: 12px;
	padding: 3px 10px;
	cursor: pointer;
}
.scm-goto-term:hover {
	color: var(--accent);
	border-color: var(--accent);
}

/** Small "jump to terminal" link rendered next to a disabled push/pull/switch
 *  button when that git op is still in flight in a terminal tab (e.g. blocked
 *  on SSH passphrase / large upload). Subtle so it doesn't compete with the
 *  main button. */
.scm-goto-term-inline {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	border: 1px solid var(--border);
	border-radius: 5px;
	background: transparent;
	color: var(--text-dim);
	font-size: 11px;
	padding: 2px 8px;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.scm-goto-term-inline:hover {
	color: var(--accent);
	border-color: var(--accent);
}

/** "Running…" state for push/pull/checkout buttons when their previous run is
 *  still in flight in a terminal tab (after F5 the snapshot rehydrates the
 *  running terminal; the button stays disabled so users don't think a new
 *  command was triggered). */
.scm-row .btn.running,
.git-modal-head-extras .btn.running {
	background: var(--bg-elev2);
	color: var(--text-dim);
	border-color: var(--border);
	cursor: not-allowed;
	opacity: 0.75;
}
.scm-row .btn.running:hover,
.git-modal-head-extras .btn.running:hover {
	color: var(--text-dim);
	border-color: var(--border);
}

.scm-spin {
	animation: spin 0.8s linear infinite;
}

/* Narrow screens: shrink the files column so the diff keeps usable width. */
@media (max-width: 768px) {
	.scm-files,
	.scm-history {
		width: 200px;
	}
	.scm-branch-current {
		max-width: 150px;
	}
	.scm-select {
		min-width: 90px;
	}
}

/* ------------------------------------------------------------------ statusbar */

.statusbar {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 16px;
	border-top: 1px solid var(--border);
	background: var(--bg-elev);
	font-size: 11px;
	color: var(--text-faint);
	white-space: nowrap;
	overflow: hidden;
}
.connection-status {
	flex-shrink: 0;
}
.statusbar-stats {
	flex: 1;
	min-width: 0;
	max-width: 860px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
	justify-content: flex-end;
}
.status-dot.ok {
	background: var(--green);
	box-shadow: 0 0 5px var(--green);
}
.status-dot.busy {
	background: var(--amber);
}

.system-status-bar {
	display: none;
}

.status-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex-shrink: 0;
}
.status-dot.ok {
	background: var(--green);
	box-shadow: 0 0 5px var(--green);
}
.status-dot.busy {
	background: var(--amber);
}

.status-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--text-dim);
}

.status-sep {
	color: var(--border);
}

.ctx-stat {
	display: inline-flex;
	align-items: baseline;
	gap: 3px;
	margin-right: 8px;
	white-space: nowrap;
}
.ctx-arrow {
	font-size: 11px;
	line-height: 1;
	font-weight: 600;
}
.ctx-arrow.up {
	color: var(--accent);
}
.ctx-arrow.down {
	color: var(--green);
}
.ctx-bar {
	display: inline-block;
	width: 46px;
	height: 5px;
	border-radius: 3px;
	background: var(--bg-elev2);
	border: 1px solid var(--border-soft);
	overflow: hidden;
	vertical-align: middle;
}
.ctx-bar-fill {
	display: block;
	height: 100%;
	border-radius: 2px;
	transition: width 0.3s ease;
}
.ctx-bar.ok .ctx-bar-fill {
	background: var(--green);
}
.ctx-bar.mid .ctx-bar-fill {
	background: var(--amber);
}
.ctx-bar.warn .ctx-bar-fill {
	background: var(--red);
}

.status-item.working {
	color: var(--accent);
}

.working-spin {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: 2px solid rgba(139, 92, 246, 0.25);
	border-top-color: var(--accent);
	animation: spin 0.8s linear infinite;
	flex-shrink: 0;
}

/* Workspace path displayed below the file browser root breadcrumb. */
.file-path {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	box-sizing: border-box;
	padding: 5px 8px;
	border: none;
	border-bottom: 1px solid var(--border-soft);
	background: transparent;
	color: var(--text-faint);
	font: inherit;
	font-family: var(--mono);
	font-size: 11px;
	text-align: left;
	cursor: pointer;
	overflow: hidden;
}
.file-path:hover {
	color: var(--text-dim);
	background: var(--bg-elev2);
}
.file-path > span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.file-path-wrap {
	position: relative;
	padding: 4px 8px;
	border-bottom: 1px solid var(--border-soft);
}
.file-path-completions {
	position: fixed;
	left: 8px;
	bottom: 40px;
	width: min(440px, calc(100vw - 32px));
	max-height: 260px;
	overflow-y: auto;
	margin: 0;
	padding: 4px;
	list-style: none;
	background: var(--bg-elev2);
	border: 1px solid var(--border);
	border-radius: 8px;
	box-shadow: var(--shadow);
	z-index: 100;
}

/* Legacy footer path styles retained for compatibility. */
.status-cwd {
	margin-left: auto;
	max-width: 42%;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--text-faint);
	border: none;
	background: transparent;
	font: inherit;
	font-size: 11px;
	cursor: pointer;
	padding: 2px 4px;
	border-radius: 4px;
}
.status-cwd:hover {
	color: var(--text-dim);
	background: var(--bg-elev2);
}

.status-cwd-wrap {
	position: relative;
	margin-left: auto;
	max-width: 46%;
	min-width: 0;
	display: flex;
	align-items: center;
}

.status-cwd-input {
	width: 100%;
	border: 1px solid var(--accent);
	border-radius: 6px;
	background: var(--bg-elev2);
	color: var(--text);
	font-family: var(--mono);
	font-size: 11px;
	padding: 3px 7px;
	outline: none;
}

/* Completion popup floats above the footer, fixed so the statusbar's
   overflow:hidden can't clip it. */
.status-completions {
	position: fixed;
	right: 16px;
	bottom: 40px;
	width: min(440px, calc(100vw - 32px));
	max-height: 260px;
	overflow-y: auto;
	overflow-x: hidden;
	margin: 0;
	padding: 4px;
	list-style: none;
	background: var(--bg-elev2);
	border: 1px solid var(--border);
	border-radius: 8px;
	box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.45);
	z-index: 200;
}

.status-queue {
	color: var(--amber);
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

.topbar {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	padding: 10px 16px;
	border-bottom: 1px solid var(--border);
	background: var(--bg-elev);
	flex-shrink: 0;
	flex-wrap: nowrap;
	min-width: 0;
}

/* Everything to the right of .brand scrolls horizontally when the icons
 * (workspace tabs + plugins + tools) don't fit. The .brand block stays pinned
 * to the left edge — its files-toggle remains reachable on narrow viewports. */
.topbar-scroll {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	flex-wrap: nowrap;
	/* Hide the scrollbar everywhere — the toolbar still scrolls (wheel /
	 * touch / drag), it just has no visible bar. Mobile Chrome ignores
	 * ::-webkit-scrollbar entirely, so hiding unconditionally is the only
	 * way to get a consistent look across desktop and mobile. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.topbar-scroll::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

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

.workspace-nav {
	position: relative;
	display: flex;
	align-items: center;
	gap: 3px;
	min-width: 0;
}
.topbar-workspace-nav,
.topbar-tools-nav {
	flex-shrink: 0;
}
.topbar-tools-nav {
	margin-left: auto;
}
.topbar-tool-button {
	font-size: 12px;
}
.topbar-tool-button > svg {
	font-size: 14px;
	flex-shrink: 0;
}
.workspace-nav-button {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 8px;
	border: 1px solid transparent;
	border-radius: 4px;
	background: transparent;
	color: var(--text-dim);
	font-size: 12px;
	white-space: nowrap;
	cursor: pointer;
}
.workspace-nav-button:hover {
	background: var(--bg);
	color: var(--text);
}
.workspace-nav-button.active {
	background: var(--accent-soft);
	border-color: var(--accent);
	color: var(--text);
}
.workspace-nav-button > span:first-child {
	font-size: 14px;
	line-height: 1;
}
.topbar-git-button {
	color: var(--accent);
	padding: 5px 7px;
}

.topbar-git-button > svg {
	font-size: 14px;
	display: block;
}
.file-project-button {
	border: 0;
	border-right: 1px solid var(--border);
	background: transparent;
	color: var(--text-dim);
	padding: 4px 9px 4px 2px;
	font-size: 12px;
	cursor: pointer;
}
.file-project-button:hover,
.file-project-button:focus-visible {
	color: var(--text);
}
.topbar-desktop .toolbar-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	visibility: visible;
	opacity: 1;
}
.toolbar-toggle-label {
	font-size: 12px;
}

.brand-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 7px;
	background: linear-gradient(135deg, #8b5cf6, #6366f1);
	color: #fff;
	font-weight: 700;
	font-size: 16px;
}

.brand-name {
	font-weight: 600;
	letter-spacing: 0.2px;
}

.conn-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-left: 6px;
}
.conn-dot.ok {
	background: var(--green);
	box-shadow: 0 0 6px var(--green);
}
.conn-dot.busy {
	background: var(--amber);
}
.conn-dot.err {
	background: var(--red);
}

.conn-label {
	color: var(--text-faint);
	font-size: 12px;
}

.topbar-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	margin-left: auto;
	/* Chips are white-space:nowrap and don't shrink — overflow is handled by
	 * the parent .topbar-scroll's horizontal scroll, so the actions stay on a
	 * single row and scroll together with the workspace nav. */
	flex-shrink: 0;
}

	/* Background-task chip + badge — AI-started servers. The chip is a plain
	   .chip; only the counter badge needs bespoke styling. */
	.bg-task-chip { position: relative; }
	.bg-task-badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 17px;
		height: 17px;
		padding: 0 5px;
		border-radius: 9px;
		background: var(--red);
		color: #fff;
		font-size: 10.5px;
		font-weight: 700;
		line-height: 1;
	}
	.dd-item .bg-task-badge { font-style: normal; margin-left: 6px; }

	/* ---- 后台任务面板 (BgTasksModal) ---- */
	.bg-task-modal {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: min(460px, calc(100vw - 32px));
		max-height: min(560px, calc(100vh - 80px));
		display: flex;
		flex-direction: column;
		background: var(--bg-elev2);
		border: 1px solid var(--border);
		border-radius: 14px;
		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
		z-index: 400;
	}
	.bg-task-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 14px 16px;
		border-bottom: 1px solid var(--border);
	}
	.bg-task-title {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		font-size: 14px;
		font-weight: 600;
		color: var(--text);
	}
	.bg-task-count {
		font-style: normal;
		font-size: 11px;
		font-weight: 700;
		color: var(--amber);
		background: rgba(255, 193, 7, 0.12);
		border-radius: 9px;
		padding: 1px 7px;
	}
	.bg-task-empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
		padding: 40px 16px;
		color: var(--text-dim);
		font-size: 13px;
	}
	.bg-task-empty svg { font-size: 26px; opacity: 0.5; }
	.bg-task-empty small { font-size: 11.5px; opacity: 0.7; text-align: center; }
	.bg-task-list {
		list-style: none;
		margin: 0;
		padding: 6px 0;
		overflow-y: auto;
		flex: 1;
		min-height: 0;
	}
	.bg-task-item {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 9px 16px;
		border-bottom: 1px solid var(--border-subtle, var(--border));
	}
	.bg-task-item:last-child { border-bottom: none; }
	.bg-task-icon {
		flex: none;
		width: 9px;
		height: 9px;
		border-radius: 50%;
		background: var(--green);
		box-shadow: 0 0 8px rgba(76, 175, 80, 0.55);
		font-size: 0;
	}
	.bg-task-info { flex: 1; min-width: 0; }
	.bg-task-line1 {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 13px;
		color: var(--text);
	}
	.bg-task-port {
		font-family: var(--mono, ui-monospace, monospace);
		font-weight: 700;
		color: var(--accent);
	}
	.bg-task-name {
		font-size: 11.5px;
		color: var(--text-dim);
		background: var(--bg-elev3, rgba(0, 0, 0, 0.03));
		border-radius: 4px;
		padding: 1px 6px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.bg-task-line2 {
		display: flex;
		gap: 12px;
		margin-top: 2px;
		font-size: 11px;
		color: var(--text-dim);
	}
	/* 运行命令行：默认单行省略 + 悬浮 tooltip 显示完整命令，点击切换换行展开 */
	.bg-task-cmd {
		display: flex;
		align-items: flex-start;
		gap: 6px;
		width: 100%;
		margin-top: 4px;
		padding: 3px 7px;
		border: 1px solid var(--border);
		border-radius: 5px;
		background: var(--bg-elev3, rgba(255, 255, 255, 0.04));
		color: var(--text-dim);
		font-size: 11px;
		text-align: left;
		cursor: pointer;
	}
	.bg-task-cmd svg {
		flex: none;
		margin-top: 1px;
	}
	.bg-task-cmd code {
		min-width: 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-family: var(--mono, ui-monospace, monospace);
		color: var(--text);
	}
	.bg-task-cmd.open code {
		white-space: pre-wrap;
		overflow-wrap: anywhere;
	}
	.bg-task-stop {
		flex: none;
		display: inline-flex;
		align-items: center;
		gap: 5px;
		height: 26px;
		padding: 0 10px;
		border: 1px solid var(--border);
		border-radius: 6px;
		font-size: 12px;
		color: var(--text);
		cursor: pointer;
		transition: all 0.15s;
	}
	.bg-task-stop:hover:not(:disabled) {
		border-color: var(--red);
		color: #fff;
		background: var(--red);
	}
	.bg-task-foot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 12px 16px;
		border-top: 1px solid var(--border);
	}
	.bg-task-stopall {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		height: 30px;
		padding: 0 14px;
		border: 1px solid var(--red);
		border-radius: 7px;
		background: transparent;
		color: var(--red);
		font-size: 12.5px;
		font-weight: 600;
		cursor: pointer;
		transition: all 0.15s;
	}
	.bg-task-stopall:hover:not(:disabled) {
		background: var(--red);
		color: #fff;
	}
	.bg-task-stopall:disabled {
		opacity: 0.4;
		cursor: not-allowed;
	}

	/* ---- 全局搜索弹窗 (GlobalSearchModal)：搜对话 / 项目 / 文件 ---- */
	.gs-backdrop {
		align-items: flex-start;
		padding-top: 10vh;
	}
	.gs-modal {
		display: flex;
		flex-direction: column;
		width: min(640px, 92vw);
		max-height: 70vh;
		border: 1px solid var(--border);
		border-radius: 12px;
		background: var(--bg-elev2, var(--bg-elev));
		box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
		overflow: hidden;
	}
	.gs-input-row {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 12px 14px;
		border-bottom: 1px solid var(--border);
		color: var(--text-faint);
	}
	.gs-input-row svg {
		flex: none;
	}
	.gs-input-row input {
		flex: 1;
		min-width: 0;
		border: none;
		outline: none;
		background: transparent;
		color: var(--text);
		font-size: 15px;
	}
	.gs-close {
		flex: none;
		display: inline-flex;
		padding: 4px;
		border: none;
		background: transparent;
		color: var(--text-faint);
		cursor: pointer;
		border-radius: 6px;
	}
	.gs-close:hover {
		color: var(--text);
		background: var(--bg-elev3, rgba(0, 0, 0, 0.03));
	}
	.gs-results {
		flex: 1;
		min-height: 0;
		overflow-y: auto;
		padding: 6px 8px 10px;
	}
	.gs-empty {
		padding: 26px 12px;
		font-size: 13px;
		color: var(--text-faint);
		text-align: center;
	}
	.gs-section + .gs-section {
		margin-top: 10px;
	}
	.gs-section-head {
		display: flex;
		align-items: center;
		gap: 6px;
		padding: 6px 8px 4px;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.6px;
		text-transform: uppercase;
		color: var(--text-faint);
	}
	.gs-section-head em {
		font-style: normal;
		font-weight: 600;
		color: var(--accent);
	}
	.gs-item {
		display: flex;
		flex-direction: column;
		gap: 2px;
		width: 100%;
		padding: 7px 10px;
		border: none;
		border-radius: 7px;
		background: transparent;
		color: var(--text-dim);
		font-size: 13px;
		text-align: left;
		cursor: pointer;
	}
	.gs-item:hover:not(:disabled),
	.gs-item.active:not(:disabled) {
		background: var(--bg-elev3, rgba(0, 0, 0, 0.03));
	}
	.gs-item:disabled {
		cursor: default;
		opacity: 0.55;
	}
	.gs-item-title {
		display: flex;
		align-items: baseline;
		gap: 8px;
		font-size: 13px;
		font-weight: 600;
		color: var(--text);
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.gs-item-meta {
		font-style: normal;
		font-size: 11px;
		font-weight: 500;
		color: var(--text-dim);
		background: var(--bg-elev3, rgba(0, 0, 0, 0.03));
		border-radius: 4px;
		padding: 1px 6px;
	}
	.gs-item-sub {
		font-size: 11.5px;
		color: var(--text-dim);
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.gs-truncated {
		padding: 5px 10px;
		font-size: 11.5px;
		color: var(--amber, #e6b450);
	}
	.gs-foot {
		display: flex;
		gap: 14px;
		padding: 8px 14px;
		border-top: 1px solid var(--border);
		font-size: 11px;
		color: var(--text-faint);
	}

	/* Desktop-only toolbar block (model/thinking/sound/lang/update/github).
   On phones it is replaced by the single "⋯" button (.topbar-more). */
.topbar-desktop {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}
/* "More" dropdown trigger in the topbar tools area — styled to match the
   square workspace-nav buttons (not the rounded .chip used by the model
   selector). The browser/search/bg-tasks entries live inside it. */
.topbar-tools-nav {
	display: inline-flex;
	align-items: center;
}
.topbar-tools-nav .chip {
	padding: 5px 8px;
	border: 1px solid transparent;
	border-radius: 4px;
	background: transparent;
	color: var(--text-dim);
	font-size: 12px;
	gap: 5px;
}
.topbar-tools-nav .chip:hover {
	background: var(--bg);
	color: var(--text);
	border-color: transparent;
}
.topbar-tools-nav .chip > svg:first-child {
	font-size: 14px;
	line-height: 1;
}
.topbar-tools-nav .chip > svg.dd-caret {
	font-size: 10px;
}

/* Dropdown item row — icon + label, with the badge pushed to the right via
   the existing .dd-item flex space-between layout. */
.dd-item-row {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}
.dd-item-row > svg {
	font-size: 14px;
	flex-shrink: 0;
}
.dd-item-row > span {
	font-size: 13px;
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--bg-elev2);
	color: var(--text);
	font-size: 12.5px;
	cursor: pointer;
	transition:
		border-color 0.15s,
		background 0.15s;
	white-space: nowrap;
}
.chip:hover {
	border-color: var(--accent);
	background: var(--accent-soft);
}

.chip-model {
	max-width: 220px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.chip-vision {
	color: var(--accent);
	font-size: 11px;
	line-height: 1;
}

.chip-sub {
	color: var(--text-faint);
	font-size: 11px;
}

.chip.newchat {
	color: var(--accent);
	border-color: rgba(139, 92, 246, 0.4);
}
.chip.newchat:hover {
	background: var(--accent-soft);
}
/* GitHub repo link (top-right corner) — perfect circle. */
.chip.github {
	width: 28px;
	height: 28px;
	padding: 0;
	justify-content: center;
	border-radius: 50%;
	text-decoration: none;
	color: var(--text-dim);
}
.chip.github:hover {
	color: var(--text);
	border-color: var(--accent);
}
.chip.github svg {
	width: 15px;
	height: 15px;
}

/* ------------------------------------------------------------------ dropdown */

.dropdown {
	position: relative;
	display: inline-flex;
}

.dd-caret {
	color: var(--text-faint);
	transition: transform 0.15s;
}
.dd-caret.up {
	transform: rotate(180deg);
}

.dd-menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	min-width: 240px;
	max-width: 340px;
	max-height: 420px;
	overflow-y: auto;
	background: var(--bg-elev2);
	border: 1px solid var(--border);
	border-radius: 10px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
	padding: 6px;
	z-index: 60;
}
.dropdown.left .dd-menu {
	right: auto;
	left: 0;
}

/* Open upward (bottom-anchored bars like the goal bar — dropping down would
   overflow the viewport and a max-height menu then scrolls internally).
   Desktop only: on ≤768px the dropdown becomes a fixed bottom sheet (see the
   mobile rules), which is already correctly positioned. */
@media (min-width: 769px) {
	.dropdown.dd-up .dd-menu {
		top: auto;
		bottom: calc(100% + 6px);
		max-height: min(360px, calc(100vh - 240px));
	}
}

/* Small fixed panels (update etc.): grow to fit content, no scrollbar. */
.dropdown.fit .dd-menu {
	max-height: none;
	overflow: visible;
}

.dd-header {
	padding: 6px 10px 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--text-faint);
}

.dd-loading {
	padding: 10px;
	font-size: 12px;
	color: var(--text-faint);
	text-align: center;
}

/* Scrollable middle band of the model dropdown — the model list; the
   dd-header / dd-search-row on top and the dd-footer below stay fixed. */
.dd-model-scroll {
	/* 可用模型列表比初版 +30%（900px/70vh → 1170px/91vh）。 */
	max-height: min(1170px, 91vh);
	overflow-y: auto;
}

/* Fixed footer (refresh / manage models) — never scrolls away. */
.dd-footer {
	border-top: 1px solid var(--border-soft);
	margin-top: 6px;
	padding-top: 3px;
}

/* 模型下拉（dd-menu-model）：外层菜单本身不滚动，只有中间的模型列表
   （.dd-model-scroll）滚动——顶部搜索行和底部「刷新 / 管理模型」始终可见。 */
.dd-menu.dd-menu-model {
	display: flex;
	flex-direction: column;
	overflow-y: hidden;
}
.dd-menu.dd-menu-model .dd-model-scroll {
	flex: 1 1 auto;
	min-height: 0;
	max-height: none; /* 由外层 max-height 约束，列表吃掉剩余空间后内部滚动 */
}
/* 可用模型下拉比默认菜单高 30%（桌面 360→468px、240px 预留同步放宽到 168px；
   ≤768px 底部面板 55vh → 71.5vh）。只针对模型菜单，不影响其他 dd-up 下拉。 */
@media (min-width: 769px) {
	.dropdown.dd-up .dd-menu.dd-menu-model {
		max-height: min(468px, calc(100vh - 168px));
	}
}
@media (max-width: 768px) {
	.dropdown .dd-menu.dd-menu-model {
		max-height: 71.5vh;
	}
}
.dd-menu.dd-menu-model .dd-footer {
	flex-shrink: 0;
}
.dd-footer .dd-refresh {
	border-top: none;
	margin-top: 0;
}

/* 模型下拉的搜索过滤框（ModelThinking） */
.dd-search-row {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 2px 8px 6px;
	padding: 0 8px;
	border: 1px solid var(--border);
	border-radius: 7px;
	background: var(--bg-elev);
	color: var(--text-faint);
}
.dd-search-row:focus-within {
	border-color: var(--accent);
}
.dd-search-row svg {
	flex: none;
}
.dd-search {
	flex: 1;
	min-width: 0;
	height: 28px;
	border: none;
	outline: none;
	background: transparent;
	color: var(--text);
	font-size: 12.5px;
}

.dd-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	padding: 7px 10px;
	border: none;
	border-radius: 7px;
	background: transparent;
	color: var(--text-dim);
	font-size: 13px;
	text-align: left;
	cursor: pointer;
}
.dd-item:hover {
	background: var(--bg-elev);
	color: var(--text);
}
.dd-item:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}
.dd-item:disabled:hover {
	background: transparent;
	color: var(--text-dim);
}
.dd-item.active {
	background: var(--accent-soft);
	color: var(--text);
}
.dd-item.active::after {
	content: "✓";
	color: var(--accent);
	font-size: 12px;
}

.dd-model-cell {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	flex: 1;
}
.dd-model-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 8px;
	min-width: 0;
}
.dd-model-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.dd-model-provider {
	flex-shrink: 0;
	font-size: 11px;
	color: var(--text-faint);
	font-family: var(--mono);
}
.dd-model-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}
.dd-model-badge {
	font-size: 10.5px;
	line-height: 1.5;
	color: var(--text-faint);
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 0 6px;
	white-space: nowrap;
}

.dd-refresh {
	width: 100%;
	margin-top: 4px;
	padding: 6px;
	border: none;
	border-top: 1px solid var(--border-soft);
	background: transparent;
	color: var(--text-faint);
	font-size: 12px;
	cursor: pointer;
}
.dd-refresh:hover {
	color: var(--accent);
}

/* GitHub link row inside the mobile "⋯" panel. */
.dd-refresh.dd-more-link {
	display: flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
}

/* ------------------------------------------------------------ self-update */

.update-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--amber);
	flex-shrink: 0;
	box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
}

.dd-update {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 8px 10px 10px;
}

.dd-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: 12.5px;
	color: var(--text-dim);
}
.dd-row b {
	color: var(--text);
	font-family: var(--mono);
	font-weight: 600;
}

.dd-note {
	font-size: 12px;
	line-height: 1.5;
	padding: 6px 10px;
	border-radius: 6px;
	background: var(--bg-elev1);
	border: 1px solid var(--border-soft);
	color: var(--text-dim);
}
.dd-note.ok {
	color: var(--green);
	border-color: rgba(52, 211, 153, 0.3);
}
.dd-note.warn {
	color: var(--amber);
	border-color: rgba(245, 158, 11, 0.35);
}
.dd-note.err {
	color: var(--red);
	border-color: rgba(248, 113, 113, 0.35);
}

.dd-actions {
	display: flex;
	gap: 6px;
	padding: 0 2px 2px;
}
.dd-actions .dd-refresh {
	margin-top: 0;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: var(--bg-elev1);
}
.dd-refresh.accent {
	color: var(--accent);
	border-color: rgba(139, 92, 246, 0.4);
}
.dd-refresh.accent.armed {
	color: var(--amber);
	border-color: rgba(245, 158, 11, 0.5);
}

/* ----------------------------------------------------------------- notices */

/* Protocol version mismatch (stale page after an in-place app update). */
.protocol-banner {
	position: fixed;
	top: 52px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 60;
	padding: 6px 14px;
	border-radius: 8px;
	background: rgba(245, 158, 11, 0.12);
	border: 1px solid var(--amber);
	color: var(--amber);
	font-size: 12px;
	white-space: nowrap;
}

	.notices {
		position: fixed;
		/* 顶部偏下：顶栏下方，不挡顶栏也不贴消息区 */
		top: 80px;
		left: 50%;
		transform: translateX(-50%);
		/* Must stay above ALL modals / overlays so commit / push / checkout
		 * toasts are never hidden behind an open Git modal (or settings /
		 * goal / plugin modals). Modal backdrop is 300; modal contents top
		 * out around 500. 1000 leaves comfortable headroom. */
		z-index: 1000;
		display: flex;
		flex-direction: column;
		gap: 8px;
		align-items: center;
		pointer-events: none;
	}

	.notice {
		pointer-events: auto;
		display: flex;
		align-items: center;
		gap: 10px;
		max-width: min(760px, 92vw);
		padding: 10px 12px 10px 14px;
		border-radius: 10px;
		border: 1px solid var(--border);
		/* 等级色左条：一眼看出级别 */
		border-left: 3px solid var(--accent);
		background: var(--bg-elev2);
		color: var(--text);
		font-size: 13px;
		font-weight: 600;
		line-height: 1.5;
		text-align: left;
		box-shadow: 0 10px 36px rgba(0, 0, 0, 0.55);
		animation: notice-in 0.18s ease;
	}
	@keyframes notice-in {
		from {
			opacity: 0;
			transform: translateY(-6px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
	/* 悬浮中：计时暂停、通知一直显示——边框高亮给出反馈 */
	.notice.paused {
		border-color: var(--accent);
		box-shadow: 0 0 0 1px var(--accent), 0 14px 44px rgba(0, 0, 0, 0.65);
	}
	.notice-icon {
		flex: none;
		font-size: 15px;
		line-height: 1;
	}
	.notice-text {
		flex: 1;
		min-width: 0;
	}
	.notice-close {
		flex: none;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 20px;
		height: 20px;
		border: none;
		border-radius: 5px;
		background: transparent;
		color: var(--text-dim);
		cursor: pointer;
		font-size: 13px;
	}
	.notice-close:hover {
		background: rgba(0, 0, 0, 0.08);
		color: var(--text);
	}
	.notice-error {
		border-color: rgba(248, 113, 113, 0.55);
		border-left-color: #ef4444;
		color: #dc2626;
		/* 不透明背景：避免下层文字透出来干扰阅读 */
		background: #eadadf;
	}
	.notice-error .notice-icon {
		color: #dc2626;
	}
	.notice-warning {
		border-color: rgba(251, 191, 36, 0.5);
		border-left-color: #f59e0b;
		color: #b45309;
		background: #eae2dc;
	}
	.notice-warning .notice-icon {
		color: #d97706;
	}
	.notice-info {
		border-color: rgba(96, 165, 250, 0.45);
		border-left-color: #3b82f6;
		color: var(--text);
		background: #d8e0f3;
	}
	.notice-info .notice-icon {
		color: #2563eb;
	}
	.notice-success {
		border-color: rgba(74, 222, 128, 0.45);
		border-left-color: #22c55e;
		color: var(--text);
		background: #dcefe1;
	}
	.notice-success .notice-icon {
		color: #16a34a;
	}

/* ------------------------------------------------------------ message list */

.messages-wrap {
	flex: 1;
	position: relative;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.messages {
	flex: 1;
	overflow-y: auto;
	padding: 20px 0 12px;
	/* 惰性窗口化自己做 scrollTop 补偿（LazyMount / MessageList sweep），
	 * 浏览器原生滚动锚定会与之叠加导致双重跳动，关掉。 */
	overflow-anchor: none;
}

.turn-stats {
	max-width: 860px;
	margin: 8px auto 4px;
	padding: 5px 12px;
	display: flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	font-size: 11px;
	line-height: 1.3;
	color: var(--text-dim);
	border: 1px solid var(--border);
	border-radius: 6px;
	background: color-mix(in srgb, var(--bg-elev) 70%, transparent);
	white-space: nowrap;
	overflow-x: auto;
}
.turn-stats-label {
	color: var(--text);
	font-weight: 600;
}

/* 惰性窗口化的等高占位（视口外的重型消息收起后的替身） */
.msg-lazy-ph {
	max-width: 860px;
	margin: 0 auto;
}

.msg {
	max-width: 860px;
	margin: 0 auto;
	padding: 6px 20px 14px;
	/* Question-nav jumps land the message just below the top of the list,
	 * matching the active-bar detection line in MessageList. */
	scroll-margin-top: 84px;
}

.msg-meta {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 4px;
}

.msg-role {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--text-faint);
}

.msg-model {
	font-size: 11px;
	color: var(--accent);
	font-family: var(--mono);
}

.msg-provider {
	font-size: 10px;
	opacity: 0.55;
	color: var(--text-faint);
	font-family: var(--mono);
	margin-left: 2px;
}

.msg-customtype {
	font-size: 11px;
	color: var(--amber);
}

.msg-time {
	font-size: 11px;
	color: var(--text-faint);
	margin-left: auto;
}

/* ------------------------------------------------ in-conversation search (Ctrl+F) */

.search-bar {
	position: absolute;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 30;
	display: flex;
	align-items: center;
	gap: 2px;
	max-width: min(480px, calc(100% - 32px));
	padding: 5px 6px 5px 12px;
	border-radius: 10px;
	border: 1px solid var(--border);
	background: var(--bg-elev2);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.search-input {
	background: transparent;
	border: none;
	outline: none;
	color: var(--text);
	font-size: 13px;
	width: 200px;
	padding: 4px 0;
}

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

.search-count {
	font-size: 11px;
	color: var(--text-faint);
	white-space: nowrap;
	padding: 0 6px;
	font-variant-numeric: tabular-nums;
}

.search-count.empty {
	color: var(--red);
}

.search-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 7px;
	border: none;
	background: transparent;
	color: var(--text-dim);
	cursor: pointer;
}

.search-btn:hover:not(:disabled) {
	background: var(--accent-soft);
	color: var(--text);
}

.search-btn:disabled {
	opacity: 0.4;
	cursor: default;
}

/* CSS Custom Highlight API —— 搜索命中内联高亮（不支持时自动无样式降级） */
::highlight(msg-search) {
	background-color: color-mix(in srgb, var(--amber) 28%, transparent);
}

::highlight(msg-search-active) {
	background-color: color-mix(in srgb, var(--amber) 80%, transparent);
	color: #1a1d26;
}

/* ------------------------------------------------------- message edit/re-ask */

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

.msg-action {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	border: none;
	background: transparent;
	color: var(--text-faint);
	font-size: 11.5px;
	cursor: pointer;
	padding: 3px 8px;
	border-radius: 6px;
	opacity: 0;
	transition:
		opacity 0.15s ease,
		color 0.15s ease,
		background 0.15s ease;
}
.msg:hover .msg-action,
.msg-action:focus-visible {
	opacity: 1;
}
.msg-action:hover {
	color: var(--accent);
	background: var(--bg-elev2);
}

.msg-editor {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.msg-editor-input {
	width: 100%;
	min-height: 48px;
	resize: vertical;
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--bg-elev1);
	color: var(--text);
	font-family: inherit;
	font-size: 13.5px;
	line-height: 1.6;
	outline: none;
}
.msg-editor-input:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.15);
}

.msg-editor-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
}

.msg-editor-hint {
	margin-right: auto;
	font-size: 11px;
	color: var(--text-faint);
}

.chip.primary {
	border-color: var(--accent);
	background: var(--accent-soft);
	color: var(--accent);
}
.chip.primary:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* -------------------------------------------------- collapsed old messages */

.msg-collapsed {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	max-width: 860px;
	margin: 0 auto 2px;
	padding: 7px 12px;
	border: 1px solid var(--border-soft);
	border-radius: 8px;
	background: var(--bg-elev1);
	color: var(--text-dim);
	font-size: 12px;
	text-align: left;
	cursor: pointer;
	transition:
		border-color 0.15s ease,
		background 0.15s ease,
		color 0.15s ease;
}
.msg-collapsed:hover {
	border-color: var(--border);
	background: var(--bg-elev2);
	color: var(--text);
}

.msg-collapsed-role {
	flex-shrink: 0;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.7px;
	color: var(--text-faint);
	min-width: 52px;
}
.msg-collapsed-role.role-user {
	color: var(--accent);
}
.msg-collapsed-role.role-assistant {
	color: var(--green);
}
.msg-collapsed-role.role-bashExecution,
.msg-collapsed-role.role-toolResult {
	color: var(--amber);
}

.msg-collapsed-body {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	overflow: hidden;
}

.msg-collapsed-preview {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--text-dim);
}

.msg-collapsed-chips {
	display: inline-flex;
	gap: 4px;
	flex-shrink: 0;
}
.msg-collapsed-chip {
	font-size: 10px;
	color: var(--text-faint);
	padding: 1px 6px;
	border-radius: 999px;
	border: 1px solid var(--border);
	white-space: nowrap;
}

.msg-collapsed-time {
	flex-shrink: 0;
	font-size: 10.5px;
	color: var(--text-faint);
}

.msg-collapsed-action {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 11px;
	color: var(--text-faint);
}
.msg-collapsed:hover .msg-collapsed-action {
	color: var(--accent);
}

.msg-collapse-btn {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin-left: auto;
	border: none;
	background: transparent;
	color: var(--text-faint);
	font-size: 11px;
	cursor: pointer;
	padding: 1px 6px;
	border-radius: 5px;
}
.msg-collapse-btn:hover {
	color: var(--accent);
	background: var(--bg-elev2);
}
.msg-text {
	color: var(--text);
}

.msg-text p {
	margin: 6px 0;
}
.msg-text p:first-child {
	margin-top: 0;
}
.msg-text p:last-child {
	margin-bottom: 0;
}

.msg-text ul,
.msg-text ol {
	padding-left: 22px;
	margin: 6px 0;
}
.msg-text li {
	margin: 2px 0;
}
.msg-text blockquote {
	margin: 8px 0;
	padding: 2px 14px;
	border-left: 3px solid var(--accent);
	color: var(--text-dim);
}
.msg-text table {
	border-collapse: collapse;
	margin: 8px 0;
}
.msg-text th,
.msg-text td {
	border: 1px solid var(--border);
	padding: 4px 10px;
}
.msg-text a {
	color: #0969da;
}
.msg-text code {
	font-family: var(--mono);
	font-size: 12.5px;
	background: var(--bg-elev2);
	border: 1px solid var(--border-soft);
	border-radius: 4px;
	padding: 1px 5px;
}

.codeblock {
	position: relative;
	margin: 10px 0;
}
.codeblock pre {
	background: #f6f8fa !important;
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 12px 14px;
	overflow-x: auto;
	margin: 0;
}
.codeblock code {
	background: transparent;
	border: none;
	padding: 0;
	font-family: var(--mono);
	font-size: 12.5px;
	line-height: 1.55;
}

.copy-btn {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 6px;
	border: 1px solid var(--border);
	background: var(--bg-elev2);
	color: var(--text-dim);
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.15s;
}
.codeblock:hover .copy-btn {
	opacity: 1;
}
.copy-btn:hover {
	color: var(--text);
	border-color: var(--accent);
}

.trunc-note {
	margin-top: 6px;
	font-size: 11.5px;
	color: var(--text-faint);
	font-style: italic;
}

.msg-image img {
	max-width: 100%;
	max-height: 420px;
	border-radius: 8px;
	border: 1px solid var(--border);
}

/* -------------------------------------------------------------- thinking */

.thinking {
	margin: 8px 0;
	border: 1px solid var(--border-soft);
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.02);
}

.thinking-toggle {
	display: flex;
	align-items: center;
	gap: 7px;
	width: 100%;
	padding: 7px 12px;
	border: none;
	background: transparent;
	color: var(--text-dim);
	font-size: 12.5px;
	cursor: pointer;
	text-align: left;
}

.thinking-toggle:hover {
	color: var(--text);
}

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

.thinking-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.thinking-body {
	padding: 4px 14px 12px;
	color: var(--text-dim);
	font-style: italic;
	font-size: 13px;
	white-space: pre-wrap;
	border-top: 1px solid var(--border-soft);
}

/* Animated “…” on the thinking header while reasoning is streaming live. */
.thinking-live .thinking-toggle {
	color: var(--text);
}

.thinking-live-label {
	display: inline-flex;
	align-items: center;
}

.thinking-live-label .dots::after {
	content: "";
	display: inline-block;
	width: 1.2em;
	text-align: left;
	animation: thinking-dots 1.2s steps(4, end) infinite;
}

@keyframes thinking-dots {
	0% {
		content: "";
	}
	25% {
		content: ".";
	}
	50% {
		content: "..";
	}
	75% {
		content: "...";
	}
}

/* Visible placeholder while the streaming bubble has no content yet
   (first token hasn't arrived — otherwise the bubble is invisible). */
.thinking-wait {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--text-dim);
	font-size: 13px;
	padding: 2px 0;
}

.thinking-wait .dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
	animation: stream-blink 1s steps(2, start) infinite;
}

/* Blinking caret shown while the assistant message is streaming. */
.stream-cursor {
	display: inline-block;
	width: 8px;
	height: 1.05em;
	margin-left: 3px;
	vertical-align: text-bottom;
	border-radius: 1px;
	background: var(--accent);
	animation: stream-blink 1s steps(2, start) infinite;
}

@keyframes stream-blink {
	0%,
	49% {
		opacity: 1;
	}
	50%,
	100% {
		opacity: 0;
	}
}

/* --------------------------------------------------------------- toolcall */

.toolcall {
	margin: 8px 0;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--bg-elev);
	overflow: hidden;
}

.toolcall-head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px;
	font-size: 12.5px;
}

.toolcall-icon {
	font-size: 13px;
}

.toolcall-name {
	font-family: var(--mono);
	font-weight: 600;
	color: var(--text);
}

.toolcall-status {
	font-size: 11px;
	padding: 1px 8px;
	border-radius: 999px;
	border: 1px solid var(--border);
	color: var(--text-faint);
}

.toolcall.run .toolcall-status {
	color: var(--amber);
	border-color: rgba(251, 191, 36, 0.4);
}
.toolcall.ok .toolcall-status {
	color: var(--green);
	border-color: rgba(52, 211, 153, 0.35);
}
.toolcall.err .toolcall-status {
	color: var(--red);
	border-color: rgba(248, 113, 113, 0.4);
}
.toolcall-exit {
	font-style: normal;
	opacity: 0.85;
	margin-left: 6px;
}
.toolcall-exit::before {
	content: "·";
	margin-right: 6px;
	opacity: 0.6;
}
.toolcall.err {
	border-color: rgba(248, 113, 113, 0.35);
}

.toolcall-spacer {
	flex: 1;
}

/* Kill button on running bash tool cards — stops ONLY the command;
   the agent run and conversation continue. */
.toolcall-kill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	border: 1px solid var(--red);
	background: var(--red-soft);
	color: var(--red);
	font-size: 11px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 999px;
	cursor: pointer;
	transition:
		background 0.15s,
		color 0.15s;
}
.toolcall-kill:hover {
	background: var(--red);
	color: #fff;
}

.toolcall-copy,
.toolcall-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	color: var(--text-faint);
	cursor: pointer;
	padding: 3px;
	border-radius: 5px;
}
.toolcall-copy:hover,
.toolcall-toggle:hover {
	color: var(--text);
	background: var(--bg-elev2);
}

.toolcall-body {
	border-top: 1px solid var(--border-soft);
	padding: 8px 12px 10px;
}

.toolcall-args pre {
	margin: 0;
	font-family: var(--mono);
	font-size: 12px;
	color: var(--text-dim);
	white-space: pre;
	overflow: auto;
	max-height: 200px;
	background: var(--bg-elev2);
	border: 1px solid var(--border-soft);
	border-radius: 6px;
	padding: 8px 10px;
}

.termline {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #f6f8fa;
	border: 1px solid var(--border-soft);
	border-radius: 6px;
	padding: 8px 10px;
	font-family: var(--mono);
	font-size: 12.5px;
}
.termline-icon {
	color: var(--green);
	flex-shrink: 0;
}
.termline code {
	word-break: break-all;
}
.termline-timeout {
	margin-left: auto;
	color: var(--text-faint);
	font-size: 11px;
	flex-shrink: 0;
}

.toolcall-output {
	margin-top: 8px;
}

.toolcall-output-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--text-faint);
	margin-bottom: 4px;
}

.toolcall-output pre {
	margin: 0;
	max-height: 320px;
	overflow: auto;
	background: #f6f8fa;
	border: 1px solid var(--border-soft);
	border-radius: 6px;
	padding: 8px 10px;
	font-family: var(--mono);
	font-size: 12px;
	line-height: 1.5;
	color: #1f2937;
	/* terminal-style: keep original line breaks & column layout, scroll horizontally
     instead of wrapping long lines */
	white-space: pre;
	word-break: normal;
}

.toolcall.err .toolcall-output pre {
	color: #dc2626;
}

.toolcall-waiting {
	margin-top: 8px;
	font-size: 12px;
	color: var(--text-faint);
}

.cursor {
	display: inline-block;
	width: 7px;
	height: 13px;
	background: var(--accent);
	vertical-align: -2px;
	margin-left: 4px;
	animation: blink 1s steps(2, start) infinite;
}

@keyframes blink {
	50% {
		opacity: 0;
	}
}

/* ---------------------------------------------------------------- bashblock */

.bashblock {
	margin: 8px 0;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: #f6f8fa;
	overflow: hidden;
}

.bashblock-command {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px;
	font-family: var(--mono);
	font-size: 12.5px;
	border-bottom: 1px solid var(--border-soft);
}
.bashblock-prompt {
	color: var(--green);
	font-weight: 700;
}
.bashblock-exit {
	margin-left: auto;
	font-size: 11px;
	padding: 1px 8px;
	border-radius: 999px;
	border: 1px solid var(--border);
}
.bashblock-exit.ok {
	color: var(--green);
}
.bashblock-exit.err {
	color: var(--red);
}
.bashblock-output {
	margin: 0;
	padding: 10px 12px;
	font-family: var(--mono);
	font-size: 12px;
	line-height: 1.5;
	color: #1f2937;
	/* terminal-style: no wrapping, horizontal scroll for long lines */
	white-space: pre;
	overflow: auto;
	max-height: 320px;
}

/* ----------------------------------------------------------- message roles */

/* Queued prompts (steer = 插队 / followUp = 排队) — pending user bubbles at
 * the bottom of the real message list, styled like user messages but dimmed
 * with a tag until the server actually delivers them. */
.queued-msg {
	display: flex;
	justify-content: flex-end;
	padding: 6px 16px;
}
.queued-bubble {
	max-width: min(85%, 720px);
	background: var(--accent-soft);
	border: 1px dashed rgba(139, 92, 246, 0.35);
	border-radius: 12px;
	padding: 8px 12px;
	opacity: 0.75;
}
.queued-tag {
	display: inline-block;
	font-size: 10px;
	line-height: 1.4;
	padding: 1px 7px;
	border-radius: 999px;
	margin-bottom: 4px;
	font-weight: 600;
}
.queued-tag.steer {
	color: var(--amber);
	background: rgba(251, 191, 36, 0.14);
}
.queued-tag.follow {
	color: var(--text-dim);
	background: var(--bg-elev2);
}
.queued-text {
	white-space: pre-wrap;
	word-break: break-word;
	font-size: 13px;
	color: var(--text);
}

.msg-user .msg-body {
	background: var(--accent-soft);
	border: 1px solid rgba(139, 92, 246, 0.25);
	border-radius: 12px;
	padding: 10px 14px;
}

.msg-error {
	color: var(--red);
	background: var(--red-soft);
	border: 1px solid rgba(248, 113, 113, 0.35);
	border-radius: 8px;
	padding: 8px 12px;
	margin-bottom: 8px;
	font-size: 13px;
}

/* -------------------------------------------------------------- empty state */

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 70px 20px 30px;
	color: var(--text-dim);
}

.empty-logo-wrap {
	position: relative;
	margin-bottom: 20px;
}

.empty-logo {
	width: 68px;
	height: 68px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40px;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 60%, #4f46e5 100%);
	border-radius: 20px;
	box-shadow:
		0 16px 44px rgba(139, 92, 246, 0.38),
		inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* soft glow behind the logo */
.empty-logo-wrap::before {
	content: "";
	position: absolute;
	inset: -18px;
	border-radius: 32px;
	background: radial-gradient(
		ellipse at center,
		rgba(139, 92, 246, 0.28),
		transparent 70%
	);
	z-index: -1;
}

.empty-title {
	margin: 0 0 6px;
	color: var(--text);
	font-size: 22px;
	font-weight: 650;
	letter-spacing: 0.3px;
}

.empty-sub {
	margin: 0 0 16px;
	font-size: 13px;
	color: var(--text-faint);
}

.empty-cwd {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	max-width: min(560px, 80vw);
	padding: 4px 12px;
	border: 1px solid var(--border-soft);
	border-radius: 999px;
	background: var(--bg-elev);
	font-size: 11.5px;
}

.empty-cwd-label {
	color: var(--text-faint);
	flex-shrink: 0;
}

.empty-cwd-path {
	color: var(--text-dim);
	font-family: var(--mono);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.empty-examples {
	margin-top: 34px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 10px;
	width: min(560px, 90vw);
}

.empty-example {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 14px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--bg-elev);
	color: var(--text-dim);
	font-size: 13px;
	text-align: left;
	cursor: pointer;
	transition:
		border-color 0.15s,
		background 0.15s,
		transform 0.12s,
		box-shadow 0.15s;
}
.empty-example:hover {
	border-color: rgba(139, 92, 246, 0.5);
	background: var(--accent-soft);
	color: var(--text);
	transform: translateY(-1px);
	box-shadow: 0 8px 22px rgba(139, 92, 246, 0.16);
}

.empty-example-icon {
	font-size: 17px;
	flex-shrink: 0;
}

.empty-example-text {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.streaming-wait,
.boot-wait {
	text-align: center;
	color: var(--text-faint);
	padding: 60px 20px;
	font-size: 13px;
}

.scroll-bottom {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: var(--bg-elev2);
	color: var(--text-dim);
	font-size: 12px;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.scroll-bottom:hover {
	color: var(--text);
	border-color: var(--accent);
}

/* ------------------------------------------- floating question-nav rail */

/* A small strip hugging the message list's scrollbar. Every user question is
   one row: a 16×3 tick plus its question text in the same container. The
   text chip is hidden by default and fades in to the left of its tick while
   the strip is hovered. The whole group of rows stays centered in the strip;
   the tick of the question being read is highlighted. Clicking a tick or its
   text chip scrolls to that question.
   With many questions the JS-driven --rail-gap shrinks so the tick cluster
   always fits (never clipped), and the .many variant swaps the per-tick
   chips for a scrollable question-list panel on hover. */
.qn-rail {
	position: absolute;
	top: 10px;
	bottom: 10px;
	right: 14px;
	width: 24px;
	z-index: 15;
	border-radius: 12px;
	background: transparent;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* Fixed row spacing — same collapsed and hovered, no expand animation.
	   JS sets --rail-gap to shrink it when there are many questions. */
	gap: var(--rail-gap, 27px);
}

/* Invisible hover bridge: extends the rail's hover zone leftward over the
   chip area, so the mouse can travel from the ticks onto a question chip
   without the chips fading out. pointer-events are only enabled while the
   rail is hovered — otherwise the bridge would block clicks on the
   conversation underneath. */
.qn-rail::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 100%;
	width: 260px;
	pointer-events: none;
}
.qn-rail:hover::before {
	pointer-events: auto;
}

.qn-bar {
	position: relative;
	flex-shrink: 0;
	width: 16px;
	height: 3px;
	border: none;
	border-radius: 2px;
	background: rgba(0, 0, 0, 0.12);
	cursor: pointer;
	padding: 0;
	transition: background 0.12s;
}
.qn-bar:hover {
	background: rgba(0, 0, 0, 0.25);
}
.qn-bar.active {
	background: var(--accent);
	box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 65%, transparent);
}

/* Question text chip: hidden by default, fades in left of its tick on hover.
   visibility gates hit-testing (hidden = invisible AND unclickable, so the
   chips never block the conversation underneath). The hover bridge keeps
   :hover alive while the mouse travels onto a chip, so chips hide instantly
   when the pointer leaves the rail — no lingering delay. */
.qn-bar-text {
	position: absolute;
	right: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%);
	/* All question rows share the same width; text is left-aligned. */
	width: 210px;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 11px;
	line-height: 1.3;
	color: var(--text-dim);
	background: var(--bg-elev2);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 3px 9px;
	pointer-events: auto;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.15s ease, visibility 0s;
}
.qn-rail:hover .qn-bar-text {
	visibility: visible;
	opacity: 1;
}
.qn-rail:not(:hover) .qn-bar-text {
	transition: opacity 0.15s ease, visibility 0s;
}
.qn-bar:hover .qn-bar-text {
	color: var(--text);
	border-color: var(--accent);
}
.qn-bar.active .qn-bar-text {
	color: var(--text);
	border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}

/* ---- many questions: scrollable list panel replaces the per-tick chips -- */

.qn-rail.many .qn-bar-text {
	display: none;
}

.qn-list {
	position: absolute;
	right: calc(100% + 10px);
	top: 0;
	bottom: 0;
	width: 230px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	overflow-y: auto;
	padding: 6px;
	background: var(--bg-elev2);
	border: 1px solid var(--border);
	border-radius: 10px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
	pointer-events: none;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.15s ease, visibility 0s;
}
.qn-rail.many:hover .qn-list {
	pointer-events: auto;
	visibility: visible;
	opacity: 1;
}
.qn-rail.many:not(:hover) .qn-list {
	/* Hide immediately when the mouse leaves the rail — the hover bridge
	   (::before, 260px left of the ticks) keeps :hover alive while the mouse
	   travels onto the list, so no lingering delay is needed. */
	transition: opacity 0.15s ease, visibility 0s;
}

.qn-list-item {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	min-height: 26px;
	padding: 3px 8px;
	border: none;
	border-radius: 7px;
	background: transparent;
	color: var(--text-dim);
	font-size: 11.5px;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	transition: background 0.12s, color 0.12s;
}
.qn-list-item:hover {
	background: var(--bg-elev);
	color: var(--text);
}
.qn-list-item.active {
	background: color-mix(in srgb, var(--accent) 30%, transparent);
	color: #fff;
}

.qn-list-idx {
	flex-shrink: 0;
	min-width: 17px;
	height: 17px;
	line-height: 17px;
	text-align: center;
	border-radius: 5px;
	background: rgba(0, 0, 0, 0.35);
	color: var(--text-faint);
	font-size: 10px;
	font-weight: 700;
	font-family: var(--mono);
}
.qn-list-item.active .qn-list-idx {
	background: var(--accent);
	color: #fff;
}

.qn-list-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --------------------------------------------- per-question tags */

/* Every user question also gets a small tag pinned to the right end of its own
   message header: a 16×3 tick plus the question's ordinal. Always visible, no
   hover delay — the tick lives inside the question's container, so hovering it
   is hovering the question itself. The tag of the question currently being
   read (top of viewport) is highlighted; clicking it flashes that question. */
.qn-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	align-self: center;
	margin-left: auto;
	padding: 3px 8px 3px 7px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--bg);
	color: var(--text-faint);
	font-family: var(--mono);
	font-size: 10px;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.qn-tag-bar {
	width: 16px;
	height: 3px;
	border-radius: 2px;
	background: rgba(0, 0, 0, 0.15);
	transition: background 0.12s;
}
.qn-tag:hover {
	background: var(--bg-elev2);
	border-color: var(--accent);
	color: var(--text);
}
.qn-tag:hover .qn-tag-bar {
	background: var(--accent);
}
.qn-tag.active {
	border-color: color-mix(in srgb, var(--accent) 55%, transparent);
	color: var(--accent);
}
.qn-tag.active .qn-tag-bar {
	background: var(--accent);
	box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 65%, transparent);
}

/* Highlight flash when jumping to a question. */
@keyframes qn-flash {
	0% {
		background-color: color-mix(in srgb, var(--accent) 32%, transparent);
	}
	100% {
		background-color: transparent;
	}
}
.msg-flash {
	border-radius: 8px;
	animation: qn-flash 1.6s ease-out;
}


@media (max-width: 640px) {
	/* On phones the rail would cover most of the conversation — hide it. */
	.qn-rail {
		display: none;
	}
}


/* ---------------------------------------------------------------- goalbar */

.goalbar {
	max-width: 860px;
	margin: 0 auto 8px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--bg-elev1);
	padding: 8px 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

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

.goalbar-icon {
	color: var(--amber);
	display: inline-flex;
	align-items: center;
	font-size: 15px;
	flex-shrink: 0;
}

.goalbar-spin {
	display: inline-block;
	animation: goalbar-spin 1s linear infinite;
}

@keyframes goalbar-spin {
	to {
		transform: rotate(360deg);
	}
}

.goalbar-input {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: none;
	outline: none;
	color: var(--text);
	font-size: 13px;
	padding: 4px 2px;
}

.goalbar-input::placeholder {
	color: var(--text-dim);
}

.goalbar-btn {
	background: var(--accent);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 5px 12px;
	font-size: 12px;
	cursor: pointer;
	flex-shrink: 0;
}

.goalbar-btn:disabled {
	opacity: 0.45;
	cursor: default;
}

.goalbar-btn.wizard {
	background: var(--amber);
}

.goalbar-active.wizard {
	border-color: var(--amber);
}

.msg-goal-wizard.msg-custom {
	border-left: 3px solid var(--amber);
}

.goalbar-icon-btn {
	background: transparent;
	border: none;
	color: var(--text-dim);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	padding: 4px;
	border-radius: 6px;
	font-size: 15px;
	flex-shrink: 0;
}

.goalbar-icon-btn:hover {
	color: var(--text);
	background: var(--bg-elev2);
}

.goalbar-opts {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 12px;
	color: var(--text-dim);
}

.goalbar-opt {
	cursor: pointer;
	padding: 2px 6px;
	border-radius: 6px;
}

.goalbar-opt:hover {
	background: var(--bg-elev2);
}

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

.goalbar-round {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--text-dim);
	font-size: 12px;
}

.goalbar-round input {
	width: 54px;
	padding: 3px 6px;
	font-size: 12px;
	color: var(--text);
	background: var(--bg-elev2);
	border: 1px solid var(--border);
	border-radius: 6px;
	outline: none;
	text-align: center;
}

.goalbar-round input:focus {
	border-color: var(--accent);
}

.goalbar-round input::placeholder {
	color: var(--text-faint);
}

.goalbar-lock-hint {
	color: var(--text-dim);
}

/* Active (goal set) state */
.goalbar-active {
	border-color: var(--amber);
	background: color-mix(in srgb, var(--amber) 8%, var(--bg-elev1));
}

.goalbar-active.reviewing {
	border-color: var(--green);
}

.goalbar-active-row {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
}

.goalbar-text {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--text);
	flex: 1;
	min-width: 0;
}

.goalbar-chip {
	flex-shrink: 0;
	font-size: 11px;
	padding: 2px 8px;
	border-radius: 10px;
	background: var(--bg-elev2);
	color: var(--text-dim);
	white-space: nowrap;
}

.goalbar-chip.reviewing {
	background: var(--green);
	color: #fff;
}

.goalbar-chip.pass {
	background: var(--green);
	color: #fff;
}

.goalbar-chip.fail {
	background: var(--red);
	color: #fff;
}

.goalbar-detail {
	color: var(--text-dim);
	font-size: 12px;
	flex-shrink: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 30%;
}

.goalbar-x {
	background: transparent;
	border: none;
	color: var(--text-dim);
	cursor: pointer;
	padding: 4px;
	display: inline-flex;
	border-radius: 6px;
	flex-shrink: 0;
}

.goalbar-x:disabled {
	opacity: 0.4;
	cursor: default;
}

.goalbar-x:hover:not(:disabled) {
	color: var(--red);
	background: var(--bg-elev2);
}

.goalbar-collapsed {
	/* No border/panel — a tiny chip that doesn't dominate the bottom strip. */
	border: none;
	background: transparent;
	padding: 0;
	align-items: flex-start;
}

.goalbar-hint {
	background: transparent;
	border: none;
	color: var(--text-dim);
	font-size: 12px;
	padding: 4px 10px;
	cursor: pointer;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 1px dashed var(--border);
	background: var(--bg-elev1);
	transition: border-color 0.15s, color 0.15s;
}

.goalbar-hint svg {
	color: var(--amber);
}

.goalbar-hint:hover {
	color: var(--text);
	border-color: var(--amber);
	border-style: solid;
}

.goalbar-hint span {
	white-space: nowrap;
}

/* The review-result card inserted into the message flow. */
.msg-goal-review {
	border-left: 3px solid var(--amber);
}

.msg-goal-review.msg-custom {
	background: transparent;
}

/* ---------------------------------------------------------------- inputbar */

.inputbar {
	flex-shrink: 0;
	padding: 12px 10px 7px;
	position: relative;
}

.queue-hint {
	max-width: 860px;
	margin: 0 auto 8px;
	display: flex;
	gap: 14px;
	font-size: 12px;
	color: var(--amber);
}

.inputbox {
	max-width: 860px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--bg-elev2);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 5px;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.7),
		0 4px 18px rgba(0, 0, 0, 0.28);
}
.inputbox-row {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	min-width: 0;
}

/* Model selector below input box (desktop) */
.model-selector-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: var(--bg);
	border-top: 1px solid var(--border);
	flex-shrink: 0;
	/* 左划/右划切历史：允许纵向滚动（交还浏览器），但把横向手势留给 JS
	   （pan-y = 垂直平移归浏览器、水平手势不触发浏览器默认行为）。 */
	touch-action: pan-y;
}

.chat-input-row .model-selector-row {
	margin-bottom: -4px; /* Offset the margin from model-selector-row itself */
}

/* Mobile tools row (file / model / thinking / send) — desktop hides it,
   phones show it under the textarea (see the ≤768px block). */
.input-tools {
	display: none;
}
.inputbox:focus-within {
	border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.7),
		0 0 0 3px var(--accent-soft),
		0 6px 22px rgba(0, 0, 0, 0.32);
}

.inputbox textarea {
	flex: 1;
	resize: none;
	border: none;
	outline: none;
	background: transparent;
	color: var(--text);
	font-family: var(--sans);
	font-size: 14.5px;
	line-height: 1.6;
	max-height: 220px;
	padding: 6px 2px;
	caret-color: var(--accent);
	overflow: hidden; /* JS switches to auto only when capped at 220px */
}
.inputbox textarea::placeholder {
	color: var(--text-faint);
}
.inputbox textarea:disabled {
	opacity: 0.6;
}

.inputbox-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	padding-bottom: 2px;
}

/* Base button — shared by dialogs / modals / preview. */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 7px 12px;
	font-size: 13px;
	cursor: pointer;
	transition: all 0.15s;
}
.btn:disabled {
	opacity: 0.4;
	cursor: default;
}

/* Icon-only variant (no text label — square, compact). */
.btn.btn-icon {
	padding: 7px;
	gap: 0;
}
.btn.btn-icon svg {
	width: 15px;
	height: 15px;
}

/* Icon action buttons inside the input box (paperclip / send / stop). */
.inputbox .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--border);
	border-radius: 50%;
	background: transparent;
	color: var(--text-dim);
	cursor: pointer;
	transition:
		background 0.18s,
		color 0.18s,
		border-color 0.18s,
		transform 0.18s,
		box-shadow 0.18s,
		filter 0.18s;
	flex-shrink: 0;
}
.inputbox .btn svg {
	width: 17px;
	height: 17px;
}
.inputbox .btn:disabled {
	opacity: 0.4;
	cursor: default;
}

/* Paperclip: quiet until hovered. */
.inputbox .btn.attach-img {
	border: none;
	color: var(--text-faint);
}
.inputbox .btn.model-attach {
	flex: 0 0 28px;
	width: 28px;
	min-width: 28px;
	height: 28px;
	padding: 0;
	margin-left: auto;
}
.inputbox .btn.attach-img:hover:not(:disabled) {
	background: var(--accent-soft);
	color: var(--accent);
}

/* Send: solid blue circle with a white up-arrow. */
.inputbox .btn.send {
	background: #3b82f6;
	border-color: #3b82f6;
	color: #fff;
	box-shadow: 0 2px 10px rgba(59, 130, 246, 0.35);
}
.inputbox .btn.send:hover:not(:disabled) {
	background: #2563eb;
	border-color: #2563eb;
	transform: translateY(-1px);
	box-shadow: 0 4px 16px rgba(59, 130, 246, 0.45);
}

/* Stop: solid blue circle matching send, icon only. */
.inputbox .btn.stop {
	background: #3b82f6;
	border-color: #3b82f6;
	color: #fff;
	box-shadow: 0 2px 10px rgba(59, 130, 246, 0.35);
}
.inputbox .btn.stop:hover:not(:disabled) {
	background: #2563eb;
	border-color: #2563eb;
	transform: translateY(-1px);
	box-shadow: 0 4px 16px rgba(59, 130, 246, 0.45);
}

/* 补充: queue a message that sends the moment the current reply finishes. */
.inputbox .btn.supplement {
	width: auto;
	border-radius: 999px;
	padding: 0 16px;
	gap: 5px;
	font-size: 13px;
	border-color: rgba(139, 92, 246, 0.45);
	color: var(--accent);
}
.inputbox .btn.supplement:hover:not(:disabled) {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

/* ---------------------------------------------------- slash command picker */

.slash-menu {
	position: absolute;
	bottom: calc(100% - 4px);
	left: 50%;
	transform: translateX(-50%);
	/* Same footprint as the input box (inputbar horizontal padding 20px). */
	width: min(860px, calc(100% - 40px));
	max-height: min(320px, 50vh);
	overflow-y: auto;
	background: var(--bg-elev2);
	border: 1px solid var(--border);
	border-radius: 14px;
	box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.35), 0 2px 12px rgba(0, 0, 0, 0.25);
	z-index: 60;
	padding: 6px;
}
.slash-menu-hint {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 4px 10px 8px;
	font-size: 11.5px;
	color: var(--text-faint);
	border-bottom: 1px dashed var(--border);
	margin-bottom: 6px;
}
.slash-menu-close {
	cursor: pointer;
	opacity: 0.7;
}
.slash-menu-close:hover {
	opacity: 1;
}
.slash-item {
	display: flex;
	align-items: baseline;
	gap: 10px;
	width: 100%;
	padding: 7px 10px;
	border: none;
	border-radius: 9px;
	background: transparent;
	color: var(--text);
	font-family: var(--sans);
	font-size: 13.5px;
	text-align: left;
	cursor: pointer;
}
.slash-item.active {
	background: var(--accent-soft);
}
.slash-name {
	font-family: var(--mono);
	font-size: 12.5px;
	color: var(--accent);
	white-space: nowrap;
}
.slash-desc {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--text-dim);
	font-size: 12.5px;
}
.slash-hint {
	color: var(--text-faint);
	font-family: var(--mono);
	font-size: 11.5px;
	margin-left: 6px;
}
.slash-source {
	flex-shrink: 0;
	font-size: 10.5px;
	padding: 1px 7px;
	border-radius: 999px;
	border: 1px solid var(--border);
	color: var(--text-faint);
	white-space: nowrap;
}
.slash-source.builtin {
	color: var(--green);
	border-color: color-mix(in srgb, var(--green) 45%, transparent);
}
.slash-source.extension {
	color: var(--amber);
	border-color: color-mix(in srgb, var(--amber) 45%, transparent);
}
.slash-source.prompt {
	color: var(--accent);
	border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.slash-source.skill {
	color: #2563eb;
	border-color: color-mix(in srgb, #2563eb 45%, transparent);
}

/* /help modal */
.slash-help {
	/* Same width as the input box (860px), capped by the backdrop padding. */
	max-width: 860px;
	width: 100%;
	max-height: min(560px, 80vh);
	display: flex;
	flex-direction: column;
	background: var(--bg-elev2);
	border: 1px solid var(--border);
	border-radius: 16px;
	box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
	overflow: hidden;
}
.slash-help-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	border-bottom: 1px solid var(--border);
	font-size: 15px;
	font-weight: 600;
}
.slash-help-body {
	overflow-y: auto;
	padding: 8px 12px 14px;
}
.slash-help-row {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 7px 8px;
	border-radius: 8px;
}
.slash-help-row:hover {
	background: var(--bg-elev1);
}
.slash-help-cmd {
	font-family: var(--mono);
	font-size: 12.5px;
	color: var(--accent);
	white-space: nowrap;
}
.slash-help-desc {
	flex: 1;
	color: var(--text-dim);
	font-size: 13px;
}
.slash-help-empty {
	padding: 24px;
	text-align: center;
	color: var(--text-faint);
}

/* ------------------------------------------------------------------ scroll */

::-webkit-scrollbar {
	width: 3px;
	height: 3px;
}
::-webkit-scrollbar-thumb {
	background: #c7ccd8;
	border-radius: 6px;
	border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover {
	background: #aab2c0;
}
::-webkit-scrollbar-track {
	background: transparent;
}

@media (max-width: 640px) {
	.chip-model {
		max-width: 120px;
	}
	.brand-name,
	.conn-label {
		display: none;
	}
}

/* ------------------------------------------------------ dialog inline panel */
/* 扩展问卷（ui.select/confirm/input）：非模态内联面板，插在输入框上方，
   回答时对话内容保持可见。不再有全屏遮罩。 */

.dialog-inline {
	display: flex;
	flex-direction: column;
	gap: 10px;
	/* 与输入框（.inputbox）同宽：860px 上限；
	   窄屏下扣除 .inputbar 的左右 20px 内边距，保证任何宽度下都齐平 */
	width: min(100% - 40px, 860px);
	margin: 0 auto 8px;
	max-height: 45vh;
	overflow-y: auto;
	background: var(--bg-elev2);
	border: 1px solid var(--accent);
	border-left: 3px solid var(--accent);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
	padding: 12px 14px;
	animation: dialog-slide-up 0.18s ease-out;
}

@keyframes dialog-slide-up {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.dialog-head {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.dialog-badge {
	flex-shrink: 0;
	font-size: 11px;
	font-weight: 700;
	color: var(--accent);
	border: 1px solid var(--accent);
	border-radius: 999px;
	padding: 1px 8px;
	white-space: nowrap;
}

.dialog-title {
	flex: 1;
	font-size: 13px;
	font-weight: 700;
	color: var(--text);
	white-space: pre-wrap;
	word-break: break-word;
}

.dialog-dismiss {
	flex-shrink: 0;
	margin-left: auto;
	background: none;
	border: none;
	color: var(--text-faint);
	cursor: pointer;
	font-size: 13px;
	line-height: 1;
	padding: 4px 6px;
	border-radius: 6px;
}
.dialog-dismiss:hover {
	color: var(--text);
	background: var(--bg-elev);
}

.dialog-options {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dialog-option {
	display: block;
	width: 100%;
	text-align: left;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--bg-elev);
	color: var(--text);
	padding: 9px 12px;
	font-size: 13px;
	line-height: 1.5;
	cursor: pointer;
	white-space: pre-wrap;
	word-break: break-word;
	transition:
		border-color 0.12s,
		background 0.12s;
}
.dialog-option:hover,
.dialog-option.sel {
	border-color: var(--accent);
	background: var(--accent-soft);
}

.dialog-hint {
	color: var(--text-faint);
	font-size: 13px;
}

.dialog-body {
	font-size: 13px;
	color: var(--text-dim);
	white-space: pre-wrap;
	word-break: break-word;
}
.dialog-body p {
	margin: 0 0 8px;
}

.dialog-input {
	width: 100%;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--bg);
	color: var(--text);
	font-family: var(--sans);
	font-size: 14px;
	padding: 9px 12px;
	outline: none;
}
.dialog-input:focus {
	border-color: var(--accent);
}

.dialog-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}

.btn.primary {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}
.btn.primary:hover:not(:disabled) {
	filter: brightness(1.12);
}

/* ------------------------------------------------------------ setup / model modals */

.modal-backdrop {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(4, 5, 8, 0.62);
	backdrop-filter: blur(3px);
	padding: 24px;
}

.modal {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
	max-width: 460px;
	max-height: 84vh;
	overflow-y: auto;
	background: var(--bg-elev2);
	border: 1px solid var(--border);
	border-radius: 12px;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
	padding: 20px 22px;
}

.model-modal {
	max-width: 640px;
}

/* ---- settings modal ---- */
.settings-modal {
	max-width: 760px;
	/* 头部（modal-head/modal-desc）与底部（modal-actions）固定，仅内容区滚动 */
	overflow-y: hidden;
}
.settings-modal .modal-head,
.settings-modal .modal-desc,
.settings-modal .modal-actions,
.settings-modal > .modal-close {
	flex-shrink: 0;
}
/* 滚动的内容区：承接原 modal 的 gap，各区块间距保持一致 */
.settings-modal .modal-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* 设置面板：工作区内嵌版（Settings tab），占满整个工作区列，不再是全屏弹窗。 */
.settings-panel {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px 14px;
	box-sizing: border-box;
	background: var(--bg-elev);
}
.settings-panel-inner {
	/* SettingsModal 内嵌时保留的一层容器：参与 flex，避免被内容高度撑爆 */
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.settings-panel-head {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}
.settings-panel-head h2 {
	font-size: 15px;
	margin: 0;
}
.settings-panel .modal-desc {
	flex-shrink: 0;
}
.settings-panel .modal-body {
	/* flex-basis 0%（非 auto）：按剩余空间分配高度，杜绝内容高度撑爆滚动容器 */
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 14px;
	border: 1px solid var(--border-soft);
	border-radius: 8px;
	padding: 14px 16px;
}

.set-section {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px;
	background: var(--bg-elev);
	border: 1px solid var(--border-soft);
	border-radius: 10px;
}

.set-section-title {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 600;
	color: var(--text);
}

.set-section-icon {
	color: var(--accent);
	font-size: 14px;
}

.set-count {
	margin-left: auto;
	font-size: 11px;
	font-weight: 500;
	color: var(--text-dim);
	background: var(--bg-elev2);
	border: 1px solid var(--border-soft);
	border-radius: 999px;
	padding: 1px 8px;
}

.set-effect-tag {
	font-size: 11px;
	font-weight: 500;
	border-radius: 999px;
	padding: 1px 8px;
	margin-left: 6px;
	line-height: 1.5;
}

.set-effect-tag.now {
	color: var(--green);
	background: color-mix(in srgb, var(--green) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--green) 40%, transparent);
}

.set-effect-tag.deferred {
	color: var(--amber);
	background: color-mix(in srgb, var(--amber) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent);
}

.set-mode-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.set-field-label {
	font-size: 12px;
	color: var(--text-dim);
}

.set-select {
	flex: 1;
	max-width: 160px;
	background: var(--bg-elev2);
	border: 1px solid var(--border);
	border-radius: 8px;
	color: var(--text);
	padding: 6px 8px;
	font-size: 13px;
	outline: none;
}
.set-select:focus {
	border-color: var(--accent);
}

.set-prompt-input {
	width: 100%;
	box-sizing: border-box;
	resize: vertical;
	min-height: 140px;
	background: var(--bg-elev2);
	border: 1px solid var(--border);
	border-radius: 8px;
	color: var(--text);
	padding: 10px 12px;
	font-size: 13px;
	font-family: inherit;
	line-height: 1.6;
	outline: none;
}
.set-prompt-input:focus {
	border-color: var(--accent);
}

/* 查看当前完整系统提示词（只读） */
.set-view-prompt-btn {
	align-self: flex-start;
	background: none;
	border: none;
	color: var(--accent);
	font-size: 12px;
	padding: 2px 0;
	cursor: pointer;
}
.set-view-prompt-btn:hover {
	text-decoration: underline;
}
.set-prompt-view {
	display: flex;
	flex-direction: column;
	gap: 6px;
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 8px 10px;
	background: var(--bg-elev2);
}
.set-prompt-view-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: 12px;
	color: var(--text-dim);
}
.set-prompt-view-text {
	margin: 0;
	max-height: 320px;
	overflow: auto;
	white-space: pre-wrap;
	word-break: break-word;
	font-size: 12px;
	line-height: 1.55;
	font-family: var(--mono, ui-monospace, monospace);
	color: var(--text);
	user-select: text;
}

.set-hint {
	margin: 0;
	font-size: 12px;
	color: var(--text-dim);
	line-height: 1.5;
}

/* ---- ？悬浮提示（设置里的长解释默认收起，hover/聚焦浮出全文）---- */
.set-tip {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 15px;
	height: 15px;
	margin-left: 6px;
	border: 1px solid var(--border);
	border-radius: 50%;
	font-size: 10px;
	line-height: 1;
	color: var(--text-dim);
	cursor: help;
	user-select: none;
}
.set-tip:hover,
.set-tip:focus-visible {
	color: var(--text);
	border-color: var(--text-dim);
	outline: none;
}
.set-tip-bubble {
	display: none;
	position: absolute;
	left: -8px;
	top: calc(100% + 8px);
	width: max-content;
	max-width: min(320px, 72vw);
	padding: 8px 11px;
	background: var(--bg-elev2);
	border: 1px solid var(--border);
	border-radius: 8px;
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
	color: var(--text);
	font-size: 12px;
	line-height: 1.55;
	white-space: normal;
	text-align: left;
	z-index: 60;
	pointer-events: none;
}
.set-tip:hover .set-tip-bubble,
.set-tip:focus-visible .set-tip-bubble {
	display: block;
}
/* 问号贴近右缘时（HintTip 加 flip）气泡改为向左展开，避免超出容器 */
.set-tip.flip .set-tip-bubble {
	left: auto;
	right: -8px;
}
/* 问号独占一行的容器（贴在输入框上方时用） */
.set-tip-line {
	display: flex;
	align-items: center;
	min-height: 18px;
}

.set-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-height: 260px;
	overflow-y: auto;
}

.set-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 9px;
	background: var(--bg-elev2);
	border: 1px solid var(--border-soft);
	border-radius: 8px;
}

.set-row-info {
	flex: 1;
	min-width: 0;
}

.set-row-name {
	font-size: 13px;
	color: var(--text);
	word-break: break-all;
}

.set-row-desc {
	font-size: 11px;
	color: var(--text-dim);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Switch */
.set-uninstall {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 8px;
	font-size: 11px;
	border-radius: 6px;
	border: 1px solid var(--border);
	background: transparent;
	color: var(--text-dim);
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s;
}
.set-uninstall:hover {
	color: var(--red);
	border-color: var(--red);
}
.set-uninstall.confirm {
	color: var(--red);
	border-color: var(--red);
	font-weight: 600;
}

/* Switch */
.set-switch {
	flex: none;
	position: relative;
	width: 36px;
	height: 20px;
	border: none;
	border-radius: 999px;
	background: var(--border);
	cursor: pointer;
	transition: background 0.15s;
	padding: 0;
}
.set-switch.on {
	background: var(--accent);
}
.set-switch-knob {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	transition: left 0.15s;
}
.set-switch.on .set-switch-knob {
	left: 18px;
}

.set-preset-save {
	display: flex;
	align-items: center;
	width: 100%;
	gap: 8px;
}

.set-input {
	flex: 1;
	min-width: 0;
	background: var(--bg-elev2);
	border: 1px solid var(--border);
	border-radius: 8px;
	color: var(--text);
	padding: 9px 12px;
	font-size: 13px;
	outline: none;
}

/* Save-as-preset button — NOT the dd-refresh dropdown style (that one is
 * full-width with a divider, which would crush the input next to it). */
.set-save-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	padding: 9px 14px;
	border: 1px solid rgba(139, 92, 246, 0.4);
	border-radius: 8px;
	background: transparent;
	color: var(--accent);
	font-size: 13px;
	cursor: pointer;
	white-space: nowrap;
}
.set-save-btn:hover:not(:disabled) {
	background: var(--bg-elev2);
}
.set-save-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}
.set-input:focus {
	border-color: var(--accent);
}

.set-row-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: none;
}

.set-icon-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: 1px solid var(--border-soft);
	border-radius: 6px;
	background: transparent;
	color: var(--text-dim);
	cursor: pointer;
}
.set-icon-btn:hover {
	color: var(--text);
	background: var(--bg-elev);
}
.set-icon-btn.danger:hover {
	color: var(--red);
}

.set-empty {
	margin: 0;
	font-size: 12px;
	color: var(--text-dim);
}

.modal-close {
	/* sticky instead of absolute: the modal itself is the scroll container
	   (overflow-y: auto), so an absolutely positioned close button scrolls
	   away with the content on tall modals. Sticky keeps it pinned at the
	   top-right while the body scrolls; margin-bottom compensates its flow
	   height (28px button + 14px modal gap) so the head stays put. */
	position: sticky;
	top: 12px;
	align-self: flex-end;
	margin-bottom: -42px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: var(--text-dim);
	cursor: pointer;
}
.modal-close:hover {
	color: var(--text);
	background: var(--bg-elev);
}

.modal-head {
	display: flex;
	align-items: center;
	gap: 10px;
}
.modal-head-icon {
	color: var(--accent);
	font-size: 18px;
}
.modal-head h2 {
	font-size: 16px;
	margin: 0;
}

.modal-desc {
	margin: 0;
	color: var(--text-dim);
	font-size: 13px;
	line-height: 1.6;
}
.modal-desc code {
	background: var(--bg-elev);
	border: 1px solid var(--border-soft);
	border-radius: 4px;
	padding: 1px 5px;
	font-size: 12px;
}

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

/* 空服务商列表的提示块：图标 + 文案 + 补充说明。 */
.empty-providers {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 28px 12px;
	color: var(--text-dim);
	font-size: 13px;
	text-align: center;
}
.empty-providers .empty-icon {
	font-size: 28px;
	opacity: 0.55;
}
.empty-providers .empty-hint {
	font-size: 12px;
	opacity: 0.75;
}

/* 编辑表单顶部条：留出 “导入模板” 入口，不抢占表单内容。 */
.form-topbar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 12px;
}

/* 模板选择器作为嵌套 modal 叠在外层上：同款 backdrop + 略窄宽度。 */
.picker-backdrop {
	background: rgba(0, 0, 0, 0.45);
}
.picker-modal {
	max-width: 460px;
	width: 92%;
}

.setup-actions {
	display: flex;
	gap: 10px;
	margin-top: 6px;
}

.setup-key-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.setup-done {
	color: var(--text);
	font-size: 13px;
	line-height: 1.6;
}

.setup-failed {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.setup-detail {
	margin: 0;
	max-height: 140px;
	overflow-y: auto;
	white-space: pre-wrap;
	word-break: break-all;
	background: var(--bg-elev);
	border: 1px solid var(--border-soft);
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 12px;
	color: #dc2626;
}

.field {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.field-label {
	font-size: 12px;
	color: var(--text-dim);
}
.field-label em {
	font-style: normal;
	opacity: 0.7;
}
.field input,
.field select {
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: 8px;
	color: var(--text);
	padding: 8px 10px;
	font-size: 13px;
	outline: none;
}
.field input:focus,
.field select:focus {
	border-color: var(--accent);
}
.field-input-wrap {
	position: relative;
}
.field-input-wrap input {
	width: 100%;
	padding-right: 34px;
}
/* 密码键默认隐藏（不改变 type，仍为 text，用 -webkit-text-security 视觉遮蔽），
 * 前端用眼睛按钮切换 .masked 类控制明文/密文。 */
.field-input-wrap input.masked {
	-webkit-text-security: disc;
}
.toggle-eye {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: none;
	background: transparent;
	color: var(--text-dim);
	cursor: pointer;
	padding: 0;
}
.toggle-eye:hover {
	color: var(--text);
}
.field.check {
	flex-direction: row;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--text);
}

.field-hint {
	font-size: 12px;
	color: var(--text-dim);
}
.field-error {
	font-size: 12px;
	color: var(--red);
}
.field input.has-error,
.field select.has-error {
	border-color: var(--red);
}
.field input.has-error:focus,
.field select.has-error:focus {
	border-color: var(--red);
}

.form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.form-section-title {
	font-size: 12px;
	font-weight: 700;
	color: var(--text-dim);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-top: 4px;
}

/* Model-config modal: fetch-models button row in the models section head. */
.model-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 8px;
}
.model-section-titles {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	min-width: 0;
}
.model-section-head .form-section-title {
	margin: 0;
}
.model-section-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.fetch-msg {
	font-size: 12px;
	max-width: 260px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.fetch-msg.ok {
	color: var(--green);
}
.fetch-msg.err {
	color: var(--red);
}

/* Model-config modal: collapsible "Compat (advanced)" section under the
 *  authHeader toggle. Styled to match .form-section-title / .hint, but
 *  collapsed by default and opens when the user has picked a non-default
 *  value. */
.compat-details {
	margin: 4px 0 8px;
	padding: 8px 10px;
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: 6px;
}
.compat-details > summary {
	cursor: pointer;
	font-size: 13px;
	color: var(--text);
	user-select: none;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 6px;
}
.compat-details > summary::before {
	content: "▶";
	font-size: 9px;
	color: var(--text-dim);
	transition: transform 0.15s ease;
	display: inline-block;
}
.compat-details[open] > summary::before {
	transform: rotate(90deg);
}
.compat-details > summary::-webkit-details-marker {
	display: none;
}
.compat-details .hint {
	margin: 6px 0 8px;
	font-size: 12px;
	color: var(--text-dim);
	line-height: 1.5;
}
.compat-details .field.check {
	margin: 0;
}

.section-hint {
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	opacity: 0.75;
}

.auth-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: 99px;
	font-size: 11px;
	color: #059669;
	background: rgba(52, 211, 153, 0.12);
	border: 1px solid rgba(52, 211, 153, 0.25);
	vertical-align: 1px;
}
.auth-badge.dim {
	color: var(--text-dim);
	background: var(--bg-elev);
	border-color: var(--border);
}

.key-input {
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: 6px;
	color: var(--text);
	padding: 6px 9px;
	font-size: 12.5px;
	outline: none;
	width: 190px;
}
.key-input:focus {
	border-color: var(--accent);
}

.btn.sm {
	padding: 6px 10px;
	font-size: 12px;
}

.provider-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.provider-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: var(--bg-elev);
	border: 1px solid var(--border-soft);
	border-radius: 8px;
	padding: 10px 12px;
}

.provider-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.provider-name-row {
	display: flex;
	align-items: center;
	gap: 7px;
}
.provider-name {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--text);
}
.provider-switch {
	position: relative;
	width: 26px;
	height: 15px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--accent);
	cursor: pointer;
	flex: 0 0 auto;
}
.provider-switch span {
	position: absolute;
	top: 2px;
	left: 13px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #fff;
	transition: left .15s ease;
}
.provider-switch.off {
	background: var(--border);
}
.provider-switch.off span {
	left: 2px;
}
.provider-disabled .provider-name,
.provider-disabled .provider-sub {
	color: var(--text-muted);
}
.provider-sub {
	font-size: 12px;
	color: var(--text-dim);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.provider-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.iconbtn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: transparent;
	color: var(--text-dim);
	cursor: pointer;
}
.iconbtn:hover {
	color: var(--text);
	background: var(--bg-elev);
}
/* 危险动作按钮（内置供应商「清空」等） */
.btn.sm.danger {
	color: var(--red);
	border-color: var(--red);
}
.btn.sm.danger:hover {
	background: var(--red);
	color: #fff;
}

.iconbtn.danger {
	color: #dc2626;
}
.iconbtn.danger:hover {
	background: var(--red-soft);
}

.model-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}
/* 模型 ID 输入框：更大的 flex 权重 + 最小宽度，避免被挤成一条缝。 */
.model-row input[type="text"] {
	flex: 2 1 0;
	min-width: 120px;
}
.model-row input[type="number"] {
	flex: 1 1 0;
	min-width: 72px;
}
.model-row select {
	flex: 0 0 auto;
	width: 110px;
}
.model-row input,
.model-row select {
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: 6px;
	color: var(--text);
	padding: 6px 8px;
	font-size: 12.5px;
	outline: none;
}
.model-row input:focus,
.model-row select:focus {
	border-color: var(--accent);
}
.model-row .check {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: var(--text-dim);
	white-space: nowrap;
}
.model-row .iconbtn {
	flex: 0 0 auto;
}

/* 链接按钮：无边框无背景，仅文字 + 强调色，hover 下划线。 */
.link-btn {
	background: none;
	border: none;
	padding: 0;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--accent);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
}
.link-btn:hover {
	text-decoration: underline;
}
.link-btn:disabled {
	color: var(--text-dim);
	cursor: not-allowed;
	text-decoration: none;
}

@media (max-width: 640px) {
	.form-grid {
		grid-template-columns: 1fr;
	}
	.model-row {
		flex-wrap: wrap;
	}
}

/* ------------------------------------------------------------ sound settings */

.sound-menu {
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 300px;
}

.sound-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.12s;
}
.sound-row:hover {
	background: var(--bg-elev);
}
.sound-row.disabled {
	opacity: 0.45;
	pointer-events: none;
}

.sound-row input[type="checkbox"] {
	width: 15px;
	height: 15px;
	accent-color: var(--accent);
	cursor: pointer;
	flex-shrink: 0;
}

.sound-label {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.sound-master .sound-name {
	font-weight: 700;
}

.sound-icon {
	color: var(--accent);
	flex-shrink: 0;
}

.sound-name {
	font-size: 13px;
	color: var(--text);
}

.sound-desc {
	font-size: 11px;
	color: var(--text-faint);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sound-right {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.sound-preview {
	border: 1px solid var(--border);
	border-radius: 6px;
	background: var(--bg-elev);
	color: var(--text-dim);
	font-size: 11px;
	padding: 2px 8px;
	cursor: pointer;
	transition:
		border-color 0.12s,
		color 0.12s;
}
.sound-preview:hover:not(:disabled) {
	border-color: var(--accent);
	color: var(--text);
}
.sound-preview:disabled {
	opacity: 0.4;
	cursor: default;
}

.sound-volume {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
}
.sound-volume.disabled {
	opacity: 0.45;
	pointer-events: none;
}
.sound-volume input[type="range"] {
	flex: 1;
	accent-color: var(--accent);
	cursor: pointer;
}
.sound-vol-num {
	font-size: 11px;
	color: var(--text-faint);
	min-width: 34px;
	text-align: right;
}

/* ------------------------------------------------------------ file preview modal */

.fp-overlay {
	position: fixed;
	inset: 0;
	z-index: 250;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(4, 5, 8, 0.62);
	backdrop-filter: blur(3px);
	padding: 28px;
}

.fp-overlay.fullscreen {
	padding: 0;
}

.fp {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 1120px;
	height: min(88vh, 880px);
	background: var(--bg-elev2);
	border: 1px solid var(--border);
	border-radius: 12px;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
	overflow: hidden;
}

.fp.fullscreen {
	width: 100vw;
	height: 100vh;
	max-width: none;
	max-height: none;
	border-radius: 0;
	border-left: 0;
	border-right: 0;
}

.fp-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--border-soft);
	flex-shrink: 0;
	min-width: 0;
}

.fp-name {
	font-family: var(--mono);
	font-size: 13px;
	font-weight: 700;
	color: var(--text);
	white-space: nowrap;
}

.fp-path {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--text-faint);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
	min-width: 0;
}

.fp-meta {
	font-size: 11px;
	color: var(--text-faint);
	flex-shrink: 0;
	white-space: nowrap;
}

.fp-head-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.fp-attach {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: var(--bg-elev);
	color: var(--text-dim);
	cursor: pointer;
}
.fp-attach.inline:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}
.fp-attach.ref:hover {
	background: var(--amber);
	border-color: var(--amber);
	color: #1a1a1a;
}
.fp-attach.wrap:hover,
.fp-attach.wrap.on,
.fp-attach.edit:hover,
.fp-attach.edit.on,
.fp-attach.zoom-in:hover,
.fp-attach.zoom-out:hover,
.fp-attach.full:hover,
.fp-attach.full.on {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}
.fp-attach:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}
.fp-attach:disabled:hover {
	background: var(--bg-elev);
	border-color: var(--border);
	color: var(--text-dim);
}

/* Tooltip for the header icon buttons (same pattern as .file-attach). */
.fp-attach::after {
	content: attr(data-tip);
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	background: #ffffff;
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 4px 9px;
	font-size: 11px;
	line-height: 1.4;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.09s ease;
	z-index: 40;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.fp-attach:hover::after {
	opacity: 1;
}

/* Zoom control in the header: [-] 100% [+], % resets to 100. */
.fp-zoom {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.fp-zoom-val {
	min-width: 42px;
	height: 26px;
	padding: 0 4px;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: var(--bg-elev);
	color: var(--text-dim);
	font-size: 10.5px;
	line-height: 1;
	text-align: center;
	cursor: pointer;
}
.fp-zoom-val:hover {
	border-color: var(--accent);
	color: var(--text);
}

.fp-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: transparent;
	color: var(--text-dim);
	cursor: pointer;
	margin-left: 2px;
}
.fp-close:hover {
	color: var(--red);
	border-color: var(--red);
}

.fp-notice {
	padding: 7px 14px;
	font-size: 11.5px;
	color: var(--amber);
	background: rgba(251, 191, 36, 0.08);
	border-bottom: 1px solid var(--border-soft);
	flex-shrink: 0;
}

.fp-empty {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-faint);
	font-size: 13px;
	padding: 40px;
}

/* Hex dump view for binary files (comprehensive preview). */
.fp-hex-wrap {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}
.fp-hex {
	flex: 1;
	overflow: auto;
	margin: 0;
	padding: 12px 14px;
	background: rgba(0, 0, 0, 0.22);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: calc(12px * var(--fp-zoom, 1));
	line-height: 1.55;
	color: var(--text-dim);
	white-space: pre;
	user-select: text;
}

.fp-code {
	flex: 1;
	overflow: auto;
	background: rgba(0, 0, 0, 0.22);
	font-family: var(--mono);
	font-size: calc(12px * var(--fp-zoom, 1));
	line-height: 1.6;
	padding: 6px 0;
	user-select: none;
	-webkit-user-select: none;
}

/* Rendered Markdown view for .md files. Reuse the chat Markdown typography via
   the msg-text class, but give the preview its own scrollable body. */
.fp-markdown {
	flex: 1;
	min-width: 0;
	min-height: 0;
	overflow: auto;
	padding: 22px clamp(18px, 4vw, 48px) 34px;
	background:
		radial-gradient(circle at 10% 0%, rgba(139, 92, 246, 0.08), transparent 34%),
		rgba(0, 0, 0, 0.22);
	color: var(--text);
	font-size: 14px;
	line-height: 1.8;
	word-break: break-word;
	overflow-wrap: anywhere;
}
/* Markdown typography uses fixed px/clamp sizes, so scale the whole body with
   CSS zoom (a zoom-out can leave side whitespace — acceptable). */
.fp-markdown-zoom {
	zoom: var(--fp-zoom, 1);
}
.fp-markdown-zoom > .md {
	width: 100%;
	max-width: 860px;
	min-width: 0;
	margin: 0 auto;
}
.fp-markdown h1,
.fp-markdown h2,
.fp-markdown h3,
.fp-markdown h4,
.fp-markdown h5,
.fp-markdown h6 {
	position: relative;
	margin: 1.35em 0 0.55em;
	color: var(--text);
	font-weight: 750;
	line-height: 1.28;
	letter-spacing: -0.015em;
}
.fp-markdown h1 {
	margin-top: 0;
	padding-bottom: 0.42em;
	border-bottom: 1px solid var(--border);
	font-size: clamp(24px, 3vw, 34px);
	letter-spacing: -0.03em;
}
.fp-markdown h2 {
	padding-bottom: 0.28em;
	border-bottom: 1px solid var(--border-soft);
	font-size: clamp(19px, 2.2vw, 25px);
}
.fp-markdown h3 {
	color: #0550ae;
	font-size: 19px;
}
.fp-markdown h4,
.fp-markdown h5,
.fp-markdown h6 {
	font-size: 16px;
}
.fp-markdown p {
	margin: 0.8em 0;
	line-height: 1.85;
}
.fp-markdown p:first-child {
	margin-top: 0;
}
.fp-markdown p:last-child {
	margin-bottom: 0;
}
.fp-markdown strong {
	color: #111827;
	font-weight: 720;
}
.fp-markdown em {
	color: #0550ae;
}
.fp-markdown del {
	color: var(--text-faint);
}
.fp-markdown a {
	color: #0969da;
	text-decoration: underline;
	text-decoration-color: rgba(167, 139, 250, 0.45);
	text-underline-offset: 3px;
	transition: color 0.12s, text-decoration-color 0.12s;
}
.fp-markdown a:hover {
	color: #0550ae;
	text-decoration-color: currentColor;
}
.fp-markdown ul,
.fp-markdown ol {
	margin: 0.8em 0;
	padding-left: 1.8em;
}
.fp-markdown li {
	margin: 0.28em 0;
	padding-left: 0.2em;
}
.fp-markdown li::marker {
	color: var(--accent);
	font-weight: 700;
}
.fp-markdown li > p {
	margin: 0.35em 0;
}
.fp-markdown blockquote {
	margin: 1.1em 0;
	padding: 0.7em 1.1em;
	border: 1px solid rgba(139, 92, 246, 0.2);
	border-left: 4px solid var(--accent);
	border-radius: 0 10px 10px 0;
	background: rgba(139, 92, 246, 0.08);
	color: var(--text-dim);
}
.fp-markdown blockquote p:last-child {
	margin-bottom: 0;
}
.fp-markdown hr {
	margin: 1.8em 0;
	border: 0;
	border-top: 1px solid var(--border);
}
.fp-markdown table {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	margin: 1.15em 0;
	border-collapse: collapse;
	border-spacing: 0;
	font-size: 13px;
}
.fp-markdown thead {
	background: rgba(139, 92, 246, 0.12);
}
.fp-markdown th,
.fp-markdown td {
	min-width: 90px;
	padding: 8px 12px;
	border: 1px solid var(--border);
	text-align: left;
	vertical-align: top;
	line-height: 1.55;
}
.fp-markdown th {
	color: var(--text);
	font-weight: 700;
	white-space: nowrap;
}
.fp-markdown tbody tr:nth-child(even) {
	background: rgba(0, 0, 0, 0.02);
}
.fp-markdown tbody tr:hover {
	background: rgba(139, 92, 246, 0.07);
}
.fp-markdown code {
	font-family: var(--mono);
	font-size: 0.88em;
	word-break: break-word;
}
.fp-markdown :not(pre) > code {
	padding: 0.16em 0.42em;
	border: 1px solid var(--border-soft);
	border-radius: 5px;
	background: rgba(139, 92, 246, 0.1);
	color: #0969da;
}
.fp-markdown .codeblock {
	max-width: 100%;
	min-width: 0;
	margin: 1.1em 0;
}
.fp-markdown .codeblock pre {
	max-width: 100%;
	min-width: 0;
	padding: 14px 16px;
	border-color: var(--border);
	border-radius: 10px;
	font-size: 12.5px;
	line-height: 1.65;
}
.fp-markdown .codeblock pre code {
	white-space: pre;
	word-break: normal;
}
.fp-markdown img {
	display: block;
	box-sizing: border-box;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: min(62vh, 680px);
	margin: 1.15em auto;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--bg-elev);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
	object-fit: contain;
}
.fp-markdown figcaption {
	margin-top: -0.7em;
	color: var(--text-faint);
	font-size: 12px;
	font-style: italic;
	text-align: center;
}
.fp-markdown input[type="checkbox"] {
	margin-right: 0.45em;
	accent-color: var(--accent);
}
.fp-markdown kbd {
	padding: 0.12em 0.45em;
	border: 1px solid var(--border);
	border-bottom-width: 2px;
	border-radius: 5px;
	background: var(--bg-elev2);
	font-family: var(--mono);
	font-size: 0.82em;
	color: var(--text-dim);
}

/* Opt-in text editor. Unlike the line picker, this keeps native selection and
   keyboard editing enabled. */
.fp-editor {
	flex: 1;
	min-height: 0;
	width: 100%;
	resize: none;
	border: none;
	outline: none;
	padding: 12px 14px;
	background: rgba(0, 0, 0, 0.22);
	color: var(--text);
	font-family: var(--mono);
	font-size: calc(12px * var(--fp-zoom, 1));
	line-height: 1.6;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
.fp-editor.no-wrap {
	white-space: pre;
	overflow-wrap: normal;
	overflow-x: auto;
}

/* Media previews (image / video) fill the same body area as .fp-code. */
.fp-media-wrap {
	flex: 1;
	min-width: 0;
	min-height: 0;
	overflow: auto;
	background: rgba(0, 0, 0, 0.22);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
}
.fp-media {
	display: block;
	width: auto;
	min-width: 0;
	max-width: 100%;
	max-height: 100%;
	border-radius: 4px;
	object-fit: contain;
}

.fp-line {
	display: flex;
	gap: 0;
	padding-right: 16px;
	cursor: pointer;
}
.fp-line:hover {
	background: rgba(139, 92, 246, 0.08);
}
.fp-line.sel {
	background: rgba(139, 92, 246, 0.22);
}
.fp-code.dragging .fp-line.sel {
	background: rgba(139, 92, 246, 0.3);
}

.fp-num {
	flex-shrink: 0;
	width: 52px;
	padding-right: 12px;
	text-align: right;
	color: var(--text-faint);
	background: transparent;
	border-right: 1px solid var(--border-soft);
	margin-right: 14px;
	user-select: none;
	-webkit-user-select: none;
}

.fp-code-text {
	flex: 1;
	min-width: 0;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	color: var(--text-dim);
}
.fp-code.no-wrap .fp-code-text {
	white-space: pre;
	overflow-wrap: normal;
}
.fp-line.sel .fp-code-text {
	color: var(--text);
}

.fp-lines-note {
	padding: 8px 16px 6px;
	font-size: 11px;
	color: var(--text-faint);
}

.fp-foot {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border-top: 1px solid var(--border-soft);
	flex-shrink: 0;
	background: var(--bg-elev);
}

.fp-hint {
	flex: 1;
	min-width: 0;
	font-size: 12px;
	color: var(--text-faint);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.fp-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.fp-actions .btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

/* ================================================================ mobile (≤768px) */

.mobile-workspace-back,
.mobile-bottom-nav {
	display: none;
}

@media (max-width: 768px) {
	/* ---- topbar: compact single-row navigation ---- */
	.system-status-bar {
		display: flex;
		align-items: center;
		gap: 9px;
		min-height: 25px;
		padding: 3px 10px;
		overflow: hidden;
		white-space: nowrap;
		background: var(--bg-elev);
		border-bottom: 1px solid var(--border);
		color: var(--text-dim);
		font: 10px var(--mono);
	}
	.system-status-bar > span {
		flex: 0 0 auto;
	}
	/* 拖拽分隔条仅桌面端有意义 */
	.resize-handle {
		display: none;
	}
	.topbar-tools-nav {
		gap: 2px;
	}
	.topbar-tool-button {
		width: 32px;
		height: 32px;
		justify-content: center;
		padding: 0;
	}
	.topbar-tool-button .workspace-nav-label {
		display: none;
	}
	.topbar {
		padding: 8px 10px;
		gap: 8px;
		flex-wrap: nowrap;
	}
	.brand-name,
	.conn-label,
	.brand-logo,
	.brand .conn-dot {
		display: none;
	}
	.chip > span:not(.update-dot) {
		display: none;
	}
	.workspace-nav {
		gap: 2px;
	}
	.workspace-nav-button {
		width: 32px;
		height: 32px;
		justify-content: center;
		padding: 0;
	}
	.workspace-nav-label {
		display: none;
	}
	/* More dropdown trigger on phones — square 32x32 icon-only, matches the
	   other workspace-nav buttons. The chevron caret stays hidden. */
	.topbar-tools-nav .chip {
		width: 32px;
		height: 32px;
		justify-content: center;
		padding: 0;
	}
	.topbar-tools-nav .chip > svg.dd-caret {
		display: none;
	}
	.topbar-desktop .toolbar-toggle {
		width: 34px;
		min-width: 34px;
		height: 34px;
		padding: 0;
	}
	.topbar-desktop .toolbar-toggle-label {
		display: none;
	}

	/* Keep the desktop input row on phones: attachment left, send right. */
	.inputbox-row {
		align-items: center;
		gap: 6px;
	}
	.inputbox-row .attach-img {
		display: inline-flex !important;
		order: 0;
		flex: 0 0 38px;
		width: 38px;
		min-width: 38px;
		visibility: visible;
		opacity: 1;
	}
	.inputbox-row textarea {
		order: 1;
		flex: 1 1 auto;
		min-width: 0;
	}
	.inputbox-row .inputbox-actions {
		display: flex !important;
		order: 2;
		flex: 0 0 auto;
		min-width: 38px;
		margin-left: auto;
		visibility: visible;
		opacity: 1;
	}
	.inputbox-row .inputbox-actions .btn {
		display: inline-flex !important;
		flex: 0 0 38px;
		width: 38px;
		min-width: 38px;
		visibility: visible;
		opacity: 1;
	}
	.input-tools {
		display: none;
	}
	.topbar-actions {
		gap: 6px;
		flex-wrap: wrap;
		row-gap: 6px;
	}
	
	/* Keep the desktop model selector layout on phones and show its labels. */
	.model-selector-row {
		display: flex;
		align-items: center;
		gap: 6px;
		padding: 6px 8px;
		background: var(--bg);
		border-top: 1px solid var(--border);
		margin-bottom: 0;
	}
	.model-selector-row .chip {
		max-width: 100%;
		min-width: 0;
		padding: 5px 8px;
	}
	.model-selector-row .chip > span:not(.update-dot) {
		display: inline;
	}
	.model-selector-row .chip-model,
	.model-selector-row .chip-sub {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.model-selector-row .chip-model {
		max-width: min(42vw, 180px);
	}

	/* Dropdown menus become bottom sheets: fixed positioning so no ancestor
	   overflow can clip them, and they can't overflow the viewport sideways. */
	.dropdown .dd-menu {
		position: fixed;
		left: 12px;
		right: 12px;
		top: auto;
		bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
		max-width: none;
		max-height: 55vh;
		z-index: 90;
	}
	.dropdown.left .dd-menu {
		left: 12px;
		right: 12px;
	}
	/* Project switching follows the desktop dropdown behavior on phones. */
	.dropdown .dd-menu-projects {
		position: absolute;
		top: calc(100% + 6px);
		bottom: auto;
		left: 0;
		right: auto;
		width: max-content;
		min-width: min(240px, calc(100vw - 20px));
		max-width: calc(100vw - 20px);
		max-height: min(360px, 60vh);
	}

	/* Sound settings panel fills the bottom-sheet width. */
	.sound-menu {
		width: 100%;
	}
	.chip {
		padding: 6px 9px;
	}
	.view-switch button {
		padding: 5px 10px;
	}

	/* Panel drawer layout on phones. Button appearance is shared with desktop. */
	.panel-toggle {
		display: inline-flex;
	}
	.panel-toggle:active {
		background: var(--accent-soft);
		color: var(--accent);
	}

	/* ---- side panels become sliding drawers ---- */

	/* File tree: hover-revealed attach buttons don't work on touch — always
	   show them; hide the hover-only tooltip bubbles. */
	.file-item .file-attach {
		display: inline-flex;
	}
	.file-attach::after,
	.file-attach::before {
		display: none;
	}
	.panel-drawer {
		display: block;
		position: fixed;
		top: 0;
		bottom: 0;
		z-index: 60;
		width: min(300px, 86vw);
		background: var(--bg-elev);
		transition: transform 0.25s ease;
	}
	.panel-drawer.drawer-left {
		left: 0;
		border-right: 1px solid var(--border);
		box-shadow: 8px 0 30px rgba(0, 0, 0, 0.35);
		transform: translateX(-105%);
	}
	.panel-drawer.drawer-right {
		right: 0;
		border-left: 1px solid var(--border);
		box-shadow: -8px 0 30px rgba(0, 0, 0, 0.35);
		transform: translateX(105%);
	}
	.panel-drawer.open {
		transform: translateX(0);
	}
	.panel-drawer .panel {
		width: 100%;
		height: 100%;
		border: none;
	}

	/* ---- terminal: the left column (commands + tabs) becomes a drawer ---- */
	.term-main {
		position: relative;
		/* Same padding move as the base rule (see .term-main above). */
		padding: 54px 8px 8px;
	}
	.term-commands {
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		z-index: 60;
		width: min(300px, 86vw);
		transform: translateX(-105%);
		transition: transform 0.25s ease;
		box-shadow: 8px 0 30px rgba(0, 0, 0, 0.35);
		border-right: 1px solid var(--border);
	}
	.term-commands.open {
		transform: translateX(0);
	}
	.term-side-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 10px;
		left: 10px;
		z-index: 20;
		width: 36px;
		height: 36px;
		border: 1px solid var(--border);
		border-radius: 9px;
		background: var(--bg-elev2);
		color: var(--text-dim);
		font-size: 15px;
		cursor: pointer;
	}
	.term-side-toggle:active {
		background: var(--accent-soft);
		color: var(--accent);
	}
	/* Make room for the floating toggle so it doesn't cover the prompt:
	   padding moved to .term-main (see base rule — FitAddon measures the
	   parent element, so the measured container must have no padding). */

	/* ---- chat ---- */
	.msg {
		padding: 6px 14px 12px;
	}
	.inputbar {
		padding: 10px 10px 12px;
	}
	.inputbox {
		padding: 8px 8px 8px 10px;
		gap: 6px;
	}
	.inputbox textarea {
		font-size: 16px; /* avoid iOS auto-zoom on focus */
	}
	.inputbox .btn {
		width: 40px;
		height: 40px;
	}
	.attach-chip {
		max-width: 78vw;
	}

	/* ---- overlays: near-fullscreen bottom sheets ---- */
	.modal-backdrop,
	.fp-overlay {
		padding: 10px;
		align-items: flex-end;
	}
	/* 问卷内联面板在窄屏下贴满宽度、限制高度（.inputbar 移动端内边距 10px） */
	.dialog-inline {
		width: calc(100% - 20px);
		max-height: 55vh;
	}
	.modal,
	.fp {
		width: 100%;
		max-width: 100%;
		max-height: 94vh;
		border-radius: 14px;
	}
	.fp {
		height: 92vh;
	}
	.fp-markdown {
		padding: 16px 14px 24px;
		font-size: 13.5px;
	}
	.fp-markdown img {
		max-height: 50vh;
	}

	/* ---- footer: phones show only context usage + cwd, one line ---- */
	.statusbar {
		flex-wrap: nowrap;
		padding: 6px 10px;
		font-size: 10.5px;
	}
	.status-sep,
	.status-item:not(.status-ctx):not(.status-cwd):not(.connection-status) {
		display: none;
	}
	footer.statusbar > .connection-status {
		display: inline-flex !important;
		visibility: visible !important;
		order: -1;
		flex: 0 0 auto;
		min-width: max-content;
	}
	footer.statusbar > .connection-status .status-dot {
		display: inline-block !important;
		visibility: visible !important;
		width: 7px;
		height: 7px;
		flex: 0 0 7px;
	}
	.status-ctx {
		flex-shrink: 1;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.status-cwd-wrap {
		flex: 1;
		min-width: 0;
		margin-left: auto;
	}
	.status-cwd-input {
		font-size: 12px; /* avoid iOS auto-zoom on focus */
	}

	/* Mobile is a single-column chat shell. Files and workspace keep their
	   React state but are presented as overlays instead of side-by-side columns. */
	.layout.three-columns {
		position: relative;
		width: 100%;
		min-width: 0;
		height: 100%;
	}
	.layout.three-columns .column-files,
	.layout.three-columns .column-workspace {
		display: none;
	}
	.layout.three-columns .column-chat {
		display: flex;
		width: 100%;
		min-width: 0;
		max-width: none;
		flex: 1 1 auto;
	}
	.layout.three-columns .column-workspace {
		position: fixed;
		inset: 0;
		z-index: 85;
		width: 100vw;
		min-width: 0;
		max-width: none;
		background: var(--bg);
	}
	.layout.three-columns.mobile-workspace-open .column-workspace {
		display: flex;
	}
	.mobile-workspace-back {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		flex: 0 0 auto;
		min-height: 44px;
		padding: 0 14px;
		border: 0;
		border-bottom: 1px solid var(--border);
		background: var(--bg-elev);
		color: var(--text-dim);
		font: inherit;
		text-align: left;
	}
	.statusbar {
		margin-bottom: 0;
	}
}

/* ================================================================
   布局重构新增样式
   ================================================================ */

/* ---- 项目选择弹窗 ---- */
.project-modal-backdrop {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0, 0, 0, 0.45);
}
.project-modal {
	width: min(440px, 100%);
	max-height: min(620px, 85vh);
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: var(--bg-elev);
	box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
}
.project-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border-bottom: 1px solid var(--border);
}
.project-modal-close {
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--text-faint);
	font-size: 24px;
	cursor: pointer;
}
.project-modal-list {
	max-height: calc(min(620px, 85vh) - 64px);
	overflow-y: auto;
	padding: 8px;
}
.project-modal-item {
	display: flex;
	align-items: center;
	width: 100%;
	gap: 12px;
	padding: 12px;
	border: 1px solid transparent;
	border-radius: 10px;
	background: transparent;
	color: var(--text);
	text-align: left;
	cursor: pointer;
}
.project-modal-item:hover,
.project-modal-item.active {
	border-color: var(--accent);
	background: var(--accent-soft);
}
.project-modal-item .dd-project-cell {
	flex: 1;
}
.project-modal-check {
	flex: 0 0 auto;
	color: var(--accent);
	font-size: 18px;
	font-weight: 700;
}

/* ---- 顶栏：项目切换菜单（tab 左侧） ---- */
.chip-project-name {
	max-width: 140px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.dd-menu-projects {
	max-height: min(360px, 60vh);
	overflow-y: auto;
	min-width: 240px;
}
.dd-project-cell {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
	text-align: left;
}
.dd-project-name {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.dd-project-path {
	font-family: var(--mono);
	font-size: 10.5px;
	color: var(--text-faint);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---- 左栏：历史对话标题行 + 新对话链接按钮 ---- */
.panel-section-title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
}
.lp-newchat-link {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	border: none;
	background: transparent;
	color: var(--accent);
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
	padding: 2px 5px;
	border-radius: 6px;
	text-transform: none;
	letter-spacing: 0;
	white-space: nowrap;
}
.lp-newchat-link:hover {
	background: var(--accent-soft);
	text-decoration: underline;
}
.lp-newchat-link svg {
	width: 11px;
	height: 11px;
}

/* ---- 模型菜单：头部（标题 + 刷新 + 管理）+ 思考段 ---- */
.chip-think-sep {
	display: inline-block;
	width: 1px;
	height: 14px;
	background: var(--border);
	margin: 0 4px;
}
.dd-model-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	padding: 6px 10px 4px;
}
.dd-model-head-title {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--text-faint);
}
.dd-model-head-actions {
	display: flex;
	align-items: center;
	gap: 4px;
}
.dd-mini-btn {
	border: 1px solid var(--border);
	border-radius: 6px;
	background: var(--bg-elev);
	color: var(--text-dim);
	font-size: 11px;
	padding: 2px 8px;
	cursor: pointer;
	white-space: nowrap;
}
.dd-mini-btn:hover {
	color: var(--accent);
	border-color: var(--accent);
}
/* 思考强度段（模型菜单底部，固定不随列表滚动）——横向 5 端 segmented。 */
.dd-menu.dd-menu-model .dd-thinking-band {
	flex-shrink: 0;
	border-top: 1px solid var(--border-soft);
	margin-top: 4px;
	padding-top: 4px;
}
.dd-thinking-head {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var(--text-dim);
	text-transform: uppercase;
	margin-bottom: 3px;
}
.dd-seg {
	display: flex;
	gap: 4px;
}
.dd-seg-btn {
	flex: 1 1 0;
	min-width: 0;
	padding: 4px 6px;
	font-size: 12px;
	background: var(--bg-elev);
	color: var(--text-dim);
	border: 1px solid var(--border);
	border-radius: 4px;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.dd-seg-btn:hover:not(:disabled):not(.active) {
	color: var(--text);
	border-color: var(--accent-soft);
}
.dd-seg-btn.active {
	background: var(--accent);
	color: #fff;
	border-color: var(--accent);
	font-weight: 600;
}
.dd-seg-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}
.dd-thinking-cur {
	margin-left: 6px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	color: var(--accent);
}

/* ---- 终端：顶部 tab 切换 + 动作按钮 ---- */
.terminal-view.term-columns {
	flex-direction: column;
}
.term-topbar {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	padding: 6px 8px;
	background: var(--bg-elev);
	border-bottom: 1px solid var(--border);
}
.term-tabs-row {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 1;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
}
.term-tabs-empty {
	font-size: 12px;
	color: var(--text-faint);
	padding: 0 4px;
}
.term-tabs-row .term-tab {
	flex-shrink: 0;
	margin-bottom: 0;
	padding: 3px 6px;
	max-width: 200px;
}
.term-tabs-row .term-tab.active {
	padding: 2px 5px;
}
.term-tabs-row .term-tab-title {
	max-width: 130px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.term-topbar-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}
.term-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 1px solid var(--border-soft);
	border-radius: 7px;
	background: var(--bg-elev2);
	color: var(--text-dim);
	cursor: pointer;
}
.term-action:hover {
	color: var(--accent);
	border-color: var(--accent);
}
.term-action svg {
	width: 14px;
	height: 14px;
}

/* ---- 命令弹窗 ---- */
.commands-modal {
	width: min(560px, 94vw);
	max-width: 94vw;
	max-height: 82vh;
	display: flex;
	flex-direction: column;
	padding: 12px 14px;
	gap: 8px;
}
.commands-modal .modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
}
.commands-modal .modal-head h2 {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
}
.modal-head-actions {
	display: flex;
	align-items: center;
	gap: 6px;
}
.commands-modal-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}
.commands-modal-body .cmd-act {
	opacity: 1;
}

/* ---- 设置弹窗：外观区（语言/主题/声音/更新） ---- */
.set-inline-icon {
	width: 13px;
	height: 13px;
	color: var(--text-faint);
	vertical-align: -2px;
	margin-right: 4px;
}
.set-theme-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 2px 0 6px;
}
.set-theme-item {
	border: 1px solid var(--border);
	border-radius: 7px;
	background: var(--bg-elev);
	color: var(--text-dim);
	font-size: 12px;
	padding: 5px 12px;
	cursor: pointer;
}
.set-theme-item:hover {
	border-color: var(--accent);
	color: var(--text);
}
.set-theme-item.active {
	border-color: var(--accent);
	background: var(--accent-soft);
	color: var(--accent);
	font-weight: 600;
}
/* 外观区里复用下拉的更新信息块，去掉其自身的内边距冲突。 */
.set-section .dd-update {
	padding: 0 2px;
}
.set-section .dd-actions {
	padding: 0 2px;
}

/* ---- 主区嵌入终端（始终对话模式，终端在输入框下方） ---- */
.main-terminal {
	flex-shrink: 0;
	height: 280px;
	min-height: 120px;
	border-top: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.main-terminal .terminal-view {
	flex: 1;
	min-height: 0;
}
/* 无终端时只露出顶部 tab 栏（含 + 按钮），不占大块空间。 */
.main-terminal.empty {
	height: auto;
}
.main-terminal.empty .term-main {
	display: none;
}

/* ---- 文件预览/编辑器内联（在对话位置打开，非弹窗） ---- */
.fp-overlay.inline {
	position: static;
	inset: auto;
	z-index: auto;
	background: none;
	backdrop-filter: none;
	padding: 0;
	flex: 1;
	min-height: 0;
	align-items: stretch;
	justify-content: stretch;
}
.fp-overlay.inline .fp.inline {
	height: 100%;
	max-width: none;
	max-height: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	background: var(--bg-elev2);
}

/* ---- 对话块：历史对话 tab 头 + 历史列表嵌在对话主体上方 ---- */
.chat-block-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	padding: 4px 10px;
	flex-shrink: 0;
	background: var(--bg-elev);
	border-bottom: 1px solid var(--border-soft);
}
.chat-tab {
	border: none;
	background: transparent;
	color: var(--text-faint);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	padding: 4px 6px 2px;
	cursor: pointer;
	border-bottom: 2px solid transparent;
}
.chat-tab:hover {
	color: var(--text);
}
.chat-tab.active {
	color: var(--accent);
	border-bottom-color: var(--accent);
}
/* 历史列表嵌入对话块顶部：限高 + 外层统一滚动，收起时 hidden 属性隐藏 */
.chat-history {
	flex-shrink: 0;
	max-height: 38%;
	overflow-y: auto;
	border-bottom: 1px solid var(--border);
	background: var(--bg-elev);
}
.lp-embed {
	display: flex;
	flex-direction: column;
	min-height: 0;
}
.lp-embed .panel-sessions {
	flex: none;
}
.lp-embed .sessions-scroll {
	overflow: visible;
	padding-bottom: 8px;
}
.lp-embed .panel-convs {
	max-height: none;
	overflow: visible;
}

/* ---- Workspace tab bar --- */
.workspace-tab-bar {
	display: flex;
	align-items: center;
	padding: 6px 8px;
	background: var(--bg);
	border-bottom: 1px solid var(--border);
	flex-shrink: 0;
	gap: 4px;
}

.workspace-tab-bar .tab {
	padding: 6px 14px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 4px;
	color: var(--text-secondary);
	font-size: 12px;
	cursor: pointer;
	transition: all 0.15s ease;
	outline: none;
}

.workspace-tab-bar .tab:hover {
	background: var(--bg-elev);
	color: var(--text);
}

.workspace-tab-bar .tab.active {
	background: var(--accent);
	color: white;
	border-color: var(--accent);
}

/* ---- Editor placeholder in file-editor tab --- */
.editor-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 200px;
	padding: 40px;
	text-align: center;
	color: var(--text-secondary);
}

.editor-title {
	font-size: 18px;
	font-weight: 600;
	color: var(--text);
	margin-bottom: 12px;
}

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

/* ---- 三栏固定布局（带拖拽分隔条）---- */
.layout.three-columns {
	display: flex;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.column {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	height: 100%;
}

/* ---- FilePanel (unified tab container) ---- */
.file-panel {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--bg-primary);
}

.fp-tabs {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
	padding: 6px 8px;
	border-bottom: 1px solid var(--border-soft);
	background: var(--bg-secondary);
}

.fp-tabs-left {
	display: flex;
	align-items: center;
	gap: 2px;
}

.fp-tab {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	font-size: 12px;
	font-weight: 500;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: var(--text-secondary);
	cursor: pointer;
	position: relative;
	transition: background 0.15s, color 0.15s;
}
.fp-tab:hover {
	background: var(--bg-hover);
	color: var(--text-primary);
}
.fp-tab.active {
	background: var(--accent-soft);
	color: var(--accent);
	font-weight: 600;
}
.fp-tab svg {
	width: 14px;
	height: 14px;
}

/* Icon-only tabs (no text label) */
.fp-tab-icon {
	padding: 5px;
	justify-content: center;
}
.fp-tab-icon .fp-badge {
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 14px;
	height: 14px;
	padding: 0 3px;
	font-size: 9px;
	line-height: 14px;
}

.fp-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	font-size: 10px;
	font-weight: 600;
	line-height: 16px;
	text-align: center;
	background: var(--red);
	color: white;
	border-radius: 8px;
}

.fp-project-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 10px;
	font-size: 12px;
	font-weight: 500;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: var(--bg-elev2);
	color: var(--text-primary);
	cursor: pointer;
	white-space: nowrap;
	max-width: 120px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.fp-project-btn:hover {
	background: var(--bg-hover);
	border-color: var(--accent);
}
.fp-project-btn svg {
	width: 12px;
	height: 12px;
	color: var(--text-secondary);
	flex-shrink: 0;
}

/* Content area — all three mounted, visibility toggled by CSS */
.fp-content-wrap {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
}
.fp-content {
	display: none;
	flex: 1;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
}
.fp-content.active {
	display: flex;
}


/* Column 1: File Browser */
.column-files {
	width: var(--left-w, 240px);
	flex: 0 0 var(--left-w, 240px);
	box-sizing: border-box;
	min-width: 80px;
	border-right: 1px solid var(--border);
}
.column-files.files-hidden {
	display: none;
}
.layout.three-columns .column-files {
	border-right: 1px solid var(--border);
	border-left: 0;
}

/* Column 2: Workspace + Terminal */
.column-workspace {
	flex: 1;
	min-width: 80px;
	flex-shrink: 0;
	border-right: 1px solid var(--border);
}

/* Column 3: Chat with Tabs */
.column-chat {
	width: var(--right-w, 240px);
	flex: 0 0 var(--right-w, 240px);
	box-sizing: border-box;
	min-width: 80px;
}
.work-content {
	flex: 1;
	min-height: 0;
	padding: 0;
	background: var(--bg-elev);
}
.workspace-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--text-faint);
	font-size: 14px;
}
.terminal-section {
	flex-shrink: 0;
	max-height: 280px;
	border-top: 1px solid var(--border);
	overflow: hidden;
}
.terminal-section.empty .term-main {
	display: none;
}

/* Column 3: Chat with Tabs */
.column-chat {
	/* width is controlled by --right-w via layout style */
}
.chat-tabs-bar {
	flex-shrink: 0;
	padding: 8px 12px;
	background: var(--bg-elev);
	border-bottom: 1px solid var(--border);
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	font-size: 12px;
	color: var(--text-faint);
}
.chat-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-height: 0;
}

.chat-main > * {
	flex-shrink: 0;
}
.chat-main .message-list {
	flex: 1;
	overflow-y: auto;
	min-height: 0;
}

/* ---- WebBrowser (iframe + address bar) ---- */
.web-browser {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}
.web-browser .wb-toolbar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	background: var(--bg-elev);
	border-bottom: 1px solid var(--border);
	flex-shrink: 0;
}
.web-browser .wb-address {
	flex: 1;
	padding: 7px 12px;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: var(--bg-elev2);
	color: var(--text);
	font-size: 13px;
	font-family: inherit;
	outline: none;
	transition: border-color 0.15s ease;
}
.web-browser .wb-address:focus {
	border-color: var(--accent);
}
.web-browser .wb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: var(--bg-elev2);
	color: var(--text-dim);
	cursor: pointer;
	transition: all 0.15s ease;
	flex-shrink: 0;
}
.web-browser .wb-btn:hover {
	color: var(--accent);
	border-color: var(--accent);
}
.web-browser .wb-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}
.web-browser .wb-ext:hover {
	background: var(--accent);
	color: white;
	border-color: var(--accent);
}
.web-browser .wb-close:hover {
	background: var(--red-soft);
	color: var(--red);
	border-color: var(--red);
}
.web-browser .wb-icon.spin {
	animation: spin 0.8s linear infinite;
}
@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}
.web-browser .wb-iframe-wrap {
	position: relative;
	flex: 1;
	min-height: 0;
	overflow: hidden;
	background: var(--bg);
}

/* Empty state when no URL entered */
.web-browser .wb-empty-state {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	flex-direction: column;
	text-align: center;
	gap: 8px;
}

.web-browser .wb-empty-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--text);
}

.web-browser .wb-empty-hint {
	font-size: 13px;
	color: var(--text-secondary);
}

.web-browser .wb-loading {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 8px 16px;
	background: rgba(0, 0, 0, 0.75);
	color: white;
	border-radius: 6px;
	font-size: 13px;
	z-index: 10;
}
.web-browser .wb-iframe {
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}
.web-browser .wb-editor-scroll {
	flex: 1;
	min-height: 0;
	overflow: auto;
	background: var(--bg-elev);
	height: calc(100% - 40px); /* Ensure it fills workspace */
}
.web-browser .wb-editor-placeholder {
	padding: 20px;
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
}
.web-browser .wb-editor-title {
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 12px;
	color: var(--text);
}
.web-browser .wb-editor-loading {
	color: var(--text-faint);
	font-size: 13px;
	animation: pulse 1.5s infinite ease-in-out;
}
.web-browser .wb-editor-info {
	color: var(--text-secondary);
	font-size: 12px;
	margin-top: 8px;
}
@keyframes pulse {
	0%, 100% { opacity: 0.5; }
	50% { opacity: 1; }
}
.web-browser .wb-editor-demo {
	padding: 20px;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 8px;
	color: var(--text-faint);
	font-family: var(--mono);
	font-size: 12px;
	line-height: 1.6;
}

/* ---- Right column (Chat) must have explicit width ---- */
.column-chat {
	width: var(--right-w, 240px);
	min-width: 80px;
	flex-shrink: 0;
}


/* ---- ChatTabs (conversation tabs) ---- */
/* ---- Chat Tabs (Radix UI Tabs, underline style) ---- */

.chat-tabs-root {
	display: flex;
	align-items: stretch;
	background: var(--bg-elev);
	border-bottom: 1px solid var(--border);
	flex-shrink: 0;
	padding: 0 12px 0 12px;
}

.chat-tabs-list {
	display: flex;
	align-items: stretch;
	flex: 1;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
}
.chat-tabs-list::-webkit-scrollbar {
	display: none;
}

.chat-tab-trigger {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 12px;
	border: none;
	background: transparent;
	color: var(--text-dim);
	font-size: 13px;
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.15s ease;
	outline: none;
	/* 禁掉系统长按菜单、文本选择 */
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	touch-action: manipulation;
	flex-shrink: 0;
}
.chat-tab-trigger:hover {
	color: var(--text);
}
.chat-tab-trigger[data-state="active"] {
	color: var(--accent);
	font-weight: 500;
}
/* underline 指示条：用伪元素做底部高亮线 */
.chat-tab-trigger[data-state="active"]::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 0;
	height: 2px;
	border-radius: 2px 2px 0 0;
	background: var(--accent);
}

.chat-tab-title {
	display: inline-block;
	max-width: 5em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: middle;
}

/* 后台流式中的 tab：标题绿色（激活态由 accent 色胜出） */
.chat-tab-trigger.streaming .chat-tab-title {
	color: var(--green);
}

.chat-tabs-actions {
	display: flex;
	align-items: center;
	gap: 4px;
	padding-left: 8px;
	margin-left: auto;
	flex-shrink: 0;
}

.chat-tab-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 36px;
	border: none;
	background: transparent;
	color: var(--text-dim);
	cursor: pointer;
	transition: color 0.15s ease;
}
.chat-tab-icon-btn:hover:not(:disabled) {
	color: var(--accent);
}
.chat-tab-icon-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* ---- 归档会话 modal ---- */

.archived-sessions-modal {
	max-width: 420px;
	width: 100%;
	margin: auto;
}
.archived-sessions-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 8px;
	max-height: 60vh;
	overflow-y: auto;
}
.archived-sessions-body .panel-empty {
	text-align: center;
	padding: 24px 12px;
	color: var(--text-faint);
	font-size: 13px;
}
.chat-tab-archive-row {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 4px 6px 4px 12px;
	border-radius: 6px;
	color: var(--text-dim);
	font-size: 13px;
	transition: background 0.15s ease, color 0.15s ease;
}
.chat-tab-archive-row:hover {
	background: var(--bg-elev2);
	color: var(--text);
}
.chat-tab-archive-title {
	flex: 1;
	min-width: 0;
	padding: 4px 0;
	border: none;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	overflow: hidden;
}
.chat-tab-archive-title .chat-tab-title {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.chat-tab-archive-actions {
	display: flex;
	align-items: center;
	gap: 3px;
	flex-shrink: 0;
}
.chat-tab-archive-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 1px solid var(--border);
	border-radius: 5px;
	background: transparent;
	color: var(--text-dim);
	cursor: pointer;
}
.chat-tab-archive-action:hover {
	border-color: var(--accent);
	color: var(--accent);
}
.chat-tab-archive-action.danger:hover {
	border-color: var(--red);
	color: var(--red);
}

/* ---- DiffViewer ---- */
.diff-viewer {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--bg-base);
	min-height: 0;
}
@media (max-width: 768px) {
	.diff-viewer-body {
		flex-direction: column;
	}
	.diff-viewer-files {
		width: 100% !important;
		min-width: 0;
		max-height: 35vh;
		border-right: none !important;
		border-bottom: 1px solid var(--border);
	}
	.diff-viewer-file-path {
		font-size: 12px;
	}
	.diff-viewer-file-dir {
		font-size: 10px;
	}
	.diff-viewer-split {
		flex-direction: column;
	}
}
.diff-viewer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 12px;
	border-bottom: 1px solid var(--border);
	background: var(--bg-elevated);
}
.diff-viewer-title {
	font-weight: 600;
	font-size: 14px;
}
.diff-viewer-close {
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	color: var(--text-faint);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
}
.diff-viewer-close:hover {
	color: var(--text);
	background: var(--bg-hover);
}
.diff-viewer-body {
	display: flex;
	flex: 1;
	overflow: hidden;
}
.diff-viewer-files {
	width: 200px;
	min-width: 150px;
	border-right: 1px solid var(--border);
	display: flex;
	flex-direction: column;
}
.diff-viewer-files-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 12px;
	border-bottom: 1px solid var(--border);
	font-size: 12px;
	color: var(--text-faint);
}
.diff-viewer-files-count {
	background: var(--bg-hover);
	padding: 2px 6px;
	border-radius: 10px;
	font-size: 11px;
}
.diff-viewer-files-list {
	flex: 1;
	overflow-y: auto;
	padding: 4px;
}
.diff-viewer-file {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 6px 8px;
	margin-bottom: 2px;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	border-radius: 4px;
	color: var(--text);
}
.diff-viewer-file:hover {
	background: var(--bg-hover);
}
.diff-viewer-file.active {
	background: var(--accent-dim);
	color: var(--accent);
}
.diff-viewer-file-path {
	font-size: 13px;
	font-family: var(--font-mono);
	word-break: break-all;
}
.diff-viewer-file-dir {
	font-size: 11px;
	color: var(--text-faint);
	margin-top: 2px;
}
.diff-viewer-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.diff-viewer-content-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-bottom: 1px solid var(--border);
	font-size: 12px;
	font-family: var(--font-mono);
	color: var(--text);
	background: var(--bg-elevated);
}
.diff-viewer-unchanged {
	font-size: 11px;
	color: var(--text-faint);
	font-family: sans-serif;
}
.diff-viewer-diff {
	flex: 1;
	overflow: auto;
	padding: 8px;
}
.diff-viewer-pre {
	font-family: var(--font-mono);
	font-size: 12px;
	line-height: 1.5;
	margin: 0;
	/* Long lines scroll horizontally instead of wrapping — keeps the diff
	 * grid readable (one real line per visual row) like a terminal. */
	white-space: pre;
	overflow-x: auto;
}
.diff-line {
	display: block;
	padding: 0 4px;
	margin: 0 -4px;
}
.diff-line.diff-hdr {
	color: var(--accent);
}
.diff-line.diff-hunk {
	color: var(--amber);
	font-weight: 500;
}
.diff-line.diff-add {
	background: var(--green-dim, rgba(0, 200, 100, 0.1));
	color: var(--green);
}
.diff-line.diff-del {
	background: var(--red-dim, rgba(255, 80, 80, 0.1));
	color: var(--red);
}
.diff-viewer-split {
	display: flex;
	gap: 8px;
}
.diff-viewer-split-pane {
	flex: 1;
	min-width: 0;
}
.diff-viewer-pane-header {
	padding: 4px 8px;
	font-size: 11px;
	font-weight: 500;
	color: var(--text-faint);
	background: var(--bg-elevated);
	border-radius: 4px 4px 0 0;
	margin-bottom: -1px;
}
.diff-viewer-split-pane .diff-viewer-pre {
	border: 1px solid var(--border);
	border-radius: 0 0 4px 4px;
	max-height: 70vh;
	overflow: auto;
}
.diff-line-num {
	display: inline-block;
	width: 40px;
	text-align: right;
	padding-right: 8px;
	margin-right: 8px;
	color: var(--text-faint);
	border-right: 1px solid var(--border);
	user-select: none;
}
.diff-viewer-empty,
.diff-viewer-loading,
.diff-viewer-error,
.diff-viewer-binary {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--text-faint);
	font-size: 13px;
}
.diff-viewer-error {
	color: var(--red);
}

/* SCM diff button */
.scm-diff-btn {
	padding: 2px 4px !important;
	margin-left: 4px;
}.change-bar-file {
	display: flex;
	align-items: center;
	gap: 8px;
}

.change-bar-path {
	flex: 1;
	min-width: 0;
	font-family: var(--mono);
	font-size: 12.5px;
	color: var(--accent);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.change-bar-path:hover {
	text-decoration: underline;
}

/* ---- syntax highlighting (overrides static github-dark import) ---- */
.hljs {
	color: #1f2328;
	background: #f6f8fa;
}
.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ {
	color: #cf222e;
}
.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_ {
	color: #8250df;
}
.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-variable,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id {
	color: #0550ae;
}
.hljs-regexp,
.hljs-string,
.hljs-meta .hljs-string {
	color: #0a3069;
}
.hljs-built_in,
.hljs-symbol {
	color: #953800;
}
.hljs-comment,
.hljs-code,
.hljs-formula {
	color: #6e7781;
}
.hljs-name,
.hljs-quote,
.hljs-selector-tag,
.hljs-selector-pseudo {
	color: #116329;
}
.hljs-subst {
	color: #24292f;
}
.hljs-section {
	color: #0550ae;
	font-weight: 700;
}
.hljs-bullet {
	color: #0550ae;
}
.hljs-emphasis {
	color: #24292f;
	font-style: italic;
}
.hljs-strong {
	color: #24292f;
	font-weight: 700;
}
.hljs-addition {
	color: #116329;
	background: #dafbe1;
}
.hljs-deletion {
	color: #82071e;
	background: #ffebe9;
}

/* ---- TrashPanel (回收站) ---- */
.trash-panel {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--bg-primary);
}

.trash-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 6px 12px;
	border-bottom: 1px solid var(--border-soft);
	flex-shrink: 0;
}
.trash-count-text {
	font-size: 12px;
	color: var(--text-secondary);
}
.btn-sm {
	padding: 4px 10px;
	font-size: 12px;
}
	align-items: center;
	gap: 8px;
}

.trash-panel .panel-header-right {
	display: flex;
	align-items: center;
	gap: 8px;
}

.panel-back-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: none;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	color: var(--text-secondary);
}
.panel-back-btn:hover {
	background: var(--bg-hover);
	color: var(--text-primary);
}

.trash-panel .panel-title {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	color: var(--text-primary);
}
.git-panel .panel-title {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	color: var(--text-primary);
}

.trash-panel .trash-path-info {
	padding: 6px 12px;
	font-size: 11px;
	color: var(--text-muted);
	border-bottom: 1px solid var(--border);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.trash-panel .trash-label {
	color: var(--text-muted);
}

.trash-panel .trash-cwd {
	color: var(--text-secondary);
}

.trash-panel .trash-list {
	flex: 1;
	overflow-y: auto;
	padding: 8px 0;
}

.trash-panel .trash-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 200px;
	color: var(--text-muted);
	gap: 12px;
}

.trash-panel .trash-empty p {
	margin: 0;
	font-size: 14px;
}

.trash-panel .trash-item {
	display: flex;
	align-items: center;
	padding: 10px 12px;
	border-bottom: 1px solid var(--border-subtle);
	gap: 10px;
}

.trash-panel .trash-item:hover {
	background: var(--bg-hover);
}

.trash-panel .trash-item-icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-muted);
}

.trash-panel .trash-item-info {
	flex: 1;
	min-width: 0;
}

.trash-panel .trash-item-name {
	font-size: 13px;
	font-weight: 500;
	color: var(--text-primary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.trash-panel .trash-item-original {
	font-size: 11px;
	color: var(--text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-top: 2px;
}

.trash-panel .trash-item-meta {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	color: var(--text-muted);
	margin-top: 2px;
}

.trash-panel .trash-sep {
	color: var(--border);
}

.trash-panel .trash-item-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.trash-panel .trash-action-btn {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	font-size: 12px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.15s;
}

.trash-panel .trash-action-btn.restore {
	background: var(--accent-bg);
	color: var(--accent);
}

.trash-panel .trash-action-btn.restore:hover {
	background: var(--accent);
	color: white;
}

.trash-panel .trash-action-btn.delete {
	background: var(--red-bg);
	color: var(--red);
	padding: 4px;
}

.trash-panel .trash-action-btn.delete:hover {
	background: var(--red);
	color: white;
}

.trash-panel .trash-footer {
	padding: 8px 12px;
	font-size: 11px;
	color: var(--text-muted);
	text-align: center;
	border-top: 1px solid var(--border);
}

/* ---- File Project Switcher Trash Button ---- */
.file-trash-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: none;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	color: var(--text-secondary);
	position: relative;
	margin-left: 4px;
}

.file-trash-button:hover {
	background: var(--bg-hover);
	color: var(--text-primary);
}

.file-trash-button .trash-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	font-size: 10px;
	font-weight: 600;
	line-height: 16px;
	text-align: center;
	background: var(--red);
	color: white;
	border-radius: 8px;
}
.file-git-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: var(--text-secondary);
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.file-git-button:hover {
	background: var(--accent-soft);
	color: var(--accent);
}
.file-git-button svg {
	width: 16px;
	height: 16px;
}

/* ---- round groups (per-prompt collapse) ------------------------------ */

.round {
	max-width: 860px;
	margin: 0 auto;
	padding: 0;
}

.round + .round {
	margin-top: 8px;
}

.round-changes {
	margin-top: 4px;
}

.round-changes .change-bars {
	margin: 0;
}

.round-header {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--border-soft);
	border-radius: 10px;
	background: var(--bg-elev1);
	color: var(--text-dim);
	font-size: 12px;
	cursor: pointer;
	transition: background 0.12s, border-color 0.12s;
	text-align: left;
	font-family: inherit;
}

/* Line 1: left = 轮次 + 消息数 + 发出消息；right = 时间 + 折叠三角 */
.round-header-row1 {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
}

/* Line 2: 最后一条消息，单行省略号塞满一行 */
.round-header-row2 {
	width: 100%;
	overflow: hidden;
}

.round-header-last {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--text-secondary);
	font-size: 12px;
}

.round-header:hover {
	background: var(--bg-elev2);
	border-color: var(--border);
}

.round.active .round-header {
	border-color: var(--accent);
	background: var(--bg-elev2);
}

.round-ordinal {
	flex: 0 0 auto;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--accent-soft, var(--bg-elev3));
	color: var(--accent);
	font-weight: 600;
	font-size: 11px;
	line-height: 16px;
	white-space: nowrap;
}

.round.active .round-ordinal {
	background: var(--accent);
	color: white;
}

.round-header-preview {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--text-secondary);
	font-weight: 500;
}

.round-header-meta {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--text-muted);
	font-size: 11px;
}

.round-header-time {
	white-space: nowrap;
}

.round-header-count {
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--bg-elev3);
	color: var(--text-secondary);
	font-size: 11px;
	line-height: 16px;
	white-space: nowrap;
}

.round-header-toggle {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	color: var(--text-muted);
	font-size: 11px;
	white-space: nowrap;
}

.round-header-toggle svg {
	width: 14px;
	height: 14px;
}

.round.expanded .round-header {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom-color: transparent;
}

.round-body {
	border: 1px solid var(--border-soft);
	border-top: 0;
	border-radius: 0 0 10px 10px;
	background: transparent;
}

.round.expanded .round-body {
	/* when expanded, give the messages their normal flow */
}

.round.collapsed .round-body {
	display: none;
}

.round-body > .msg-lazy-ph + .msg-lazy-ph,
.round-body > .message + .message,
.round-body > .message + .msg-lazy-ph,
.round-body > .msg-lazy-ph + .message {
	margin-top: 6px;
}