/* === Variables (Dark theme, WorkBuddy-inspired) === */
:root {
    /* === Dark theme (WorkBuddy-inspired) === */
    --bg: #1a1d23;                 /* app background */
    --bg-sidebar: #14171c;         /* sidebar surface */
    --bg-sidebar-2: #1c1f25;       /* raised sidebar element */
    --bg-chat: #1a1d23;            /* chat area background */
    --bg-user-msg: #2a2f3a;        /* user bubble */
    --bg-agent-msg: #1f2329;       /* agent bubble */
    --bg-plan: #1f2329;
    --bg-tool: #2a2419;            /* tool call row */
    --bg-rag: #1a2620;
    --bg-input: #14171c;           /* input area background */
    --text: #e6e8ec;               /* primary text */
    --text-secondary: #9ba1ad;     /* secondary text */
    --text-muted: #828a96;          /* muted text (≥4.5:1 on --bg) */
    --border: #2a2f37;             /* default border */
    --border-strong: #3a4048;
    --accent: #5b8def;             /* brand accent */
    --accent-hover: #7ba1ff;
    --accent-light: #243047;       /* accent-tinted background */
    --accent2: #f97316;            /* orange — brand logo color */
    --success: #4ade80;
    --success-dark: #22c55e;
    --success-soft: #1a2a22;       /* success-tinted background */
    --error: #f87171;
    --warning: #fbbf24;
    --radius: 10px;                /* ds-control radius */
    /* Q&A 居中阅读轨道宽度（助手内容与用户行共用的最大宽度） */
    --qa-track: 820px;
    --radius-sm: 8px;
    --radius-pill: 4096px;         /* ds pill buttons */
    --shadow: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.5);
    /* inline code / fenced block surface — theme-aware */
    --code-bg: rgba(255,255,255,0.08);
    --code-bg-block: rgba(0,0,0,0.22);
    --code-text: #e599c2;
    /* Chinese: PingFang SC (macOS/iOS) first, Noto Sans CJK SC fallback.
       Latin: SF Pro surfaces via -apple-system/PingFang embedded Latin.
       Explicitly exclude 微软雅黑 (Microsoft YaHei — variable stroke width,
       flared corners) and serif faces (楷体/宋体). */
    --font: Lato, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
    /* Code: JetBrains Mono first, SF Mono fallback. Keep out of --font (body). */
    --font-mono: "JetBrains Mono", "SF Mono", "Menlo", "Consolas", "Courier New", monospace;
    --sidebar-w: 305px;
    --topbar-h: 52px;
}

/* === Light theme (toggle via html[data-theme="light"]) === */
:root[data-theme="light"] {
    --bg: #f5f6f8;
    --bg-sidebar: #eceef1;
    --bg-sidebar-2: #e2e5ea;
    --bg-chat: #f5f6f8;
    --bg-user-msg: #d8e3f7;
    --bg-agent-msg: #ffffff;
    --bg-plan: #ffffff;
    --bg-tool: #fff6e6;
    --bg-rag: #e6f4ec;
    --bg-input: #ffffff;
    --text: #1c1f24;
    --text-secondary: #5a616e;
    --text-muted: #69717e;
    --border: #dde1e7;
    --border-strong: #c6ccd6;
    --accent: #2f6fe0;
    --accent-hover: #1e5cc9;
    --accent-light: #e4ecfc;
    --accent2: #ea6a12;
    --success: #16a34a;
    --success-dark: #15803d;
    --success-soft: #dcf3e5;
    --error: #dc2626;
    --warning: #d97706;
    --shadow: 0 1px 2px rgba(0,0,0,0.08);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.12);
    --code-bg: rgba(0,0,0,0.06);
    --code-bg-block: rgba(0,0,0,0.05);
    --code-text: #b03060;
}

/* === Reset === */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    height: 100%;
    font-family: var(--font);
    font-size: 15px;
    color: var(--text);
    background: var(--bg);
    overflow: hidden;
    /* 兜底：任何意外溢出都不产生横向滚动条 */
    overflow-x: hidden;
}

/* === Layout === */
#app {
    display: flex;
    height: 100vh;
    height: 100dvh;
    /* 不允许整体出现横向滚动条；子项改用 min-width:0 收缩 */
    overflow-x: hidden;
}

/* === Sidebar === */
#sidebar {
    width: var(--sidebar-w);
    min-width: var(--sidebar-w);
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}



/* === 侧栏第一行（素色，仅布局）=== */
.sidebar-header { display: flex; align-items: center; gap: 8px; }
.sidebar-header .brand-text h2 { font-size: 20px; font-weight: 600; margin: 0; white-space: nowrap; }
.sidebar-header .sidebar-header-actions { margin-left: auto; }
/* 新建任务按钮：加号 + 文字，置于品牌名之后 */
#tab-new {
    display: inline-flex; align-items: center; gap: 6px;
    margin-left: 4px;
    background: none; border: 0; padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-family: var(--font); font-size: 14px; font-weight: 500;
    color: var(--text-secondary); cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
#tab-new:hover { background: var(--bg-sidebar-2); color: var(--text); }
#tab-new svg { flex: none; }
.side-link { color: inherit; text-decoration: none; font-size: 15px; white-space: nowrap; padding: 6px 12px; border-radius: var(--radius-sm); transition: background 0.15s, color 0.15s; }
.side-link:hover { background: var(--bg-sidebar-2); color: var(--text); }
/* 选中：用强调底色 + 底部强调条标记，不使用下划线 */
.side-link.active { font-weight: 700; color: var(--accent, #5b8def); background: var(--bg-sidebar-2); box-shadow: inset 0 -2px 0 var(--accent, #5b8def); }
.side-view { flex: 1; min-height: 0; overflow-y: auto; }
.side-view.hidden { display: none; }

.sidebar-header h2 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.icon-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

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

/* === Index section === */
.index-section {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-bottom: 1px solid var(--border);
}

/* Row under the path input: Index Files + refresh + config icons */
.index-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.index-actions #index-btn {
    flex: 1;
    white-space: nowrap;
}

#index-path {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: var(--font-mono);
    outline: none;
    transition: border-color 0.15s;
}

#index-path:focus {
    border-color: var(--accent);
}

.btn-primary {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

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

.btn-primary:disabled {
    background: var(--text-muted);
    cursor: not-allowed;
}

/* === Stats === */
.stats-bar {
    padding: 8px 16px;
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid var(--border);
}

.stat-item span {
    font-weight: 600;
    color: var(--text);
}

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

/* === Index progress === */
.index-progress {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
}

.progress-header {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.progress-bar {
    height: 4px;
    background: var(--bg-chat);
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.3s ease;
    width: 0%;
}

/* === Document list === */
.doc-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.doc-card {
    background: var(--bg-sidebar);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin-bottom: 6px;
    transition: border-color 0.15s;
    cursor: default;
}

.doc-card:hover {
    border-color: var(--accent);
}

.doc-card-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 4px;
    word-break: break-word;
}

.doc-card-meta {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.doc-card-type {
    background: var(--accent-light);
    color: var(--accent);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 500;
    font-family: var(--font-mono);
    text-transform: uppercase;
}

.doc-card-chunks {
    color: var(--text-secondary);
}

.doc-card-summary {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 6px;
    line-height: 1.4;
}

.doc-card-category {
    display: inline-block;
    background: var(--bg-rag);
    color: var(--success);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 500;
    margin-top: 4px;
}

.doc-card-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    opacity: 0;
    transition: opacity 0.15s;
}

.doc-card:hover .doc-card-actions {
    opacity: 1;
}

.doc-action-btn {
    font-size: 11px;
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--bg-sidebar);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.doc-action-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.doc-action-btn.delete:hover {
    border-color: var(--error);
    color: var(--error);
}

/* --- Category-tree document list (replaces the old doc-card layout) --- */

.doc-cat-root > .doc-cat-head {
    display: none; /* root has no label */
}

.doc-cat {
    margin-bottom: 4px;
}

.doc-cat-children {
    margin-left: 12px;
    border-left: 1px solid var(--border);
    padding-left: 8px;
}

.doc-cat-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: default;
}

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

.doc-cat-count {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-chat);
    border-radius: 8px;
    padding: 0 6px;
}

.doc-cat-docs {
    margin-top: 1px;
}

/* One compact row per document: [icon] name [type] [size] (actions icons) */
.doc-row {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 4px;
    border-radius: 4px;
    font-size: 12px;
    color: var(--text);
    cursor: default;
    white-space: nowrap;
}

.doc-row:hover {
    background: var(--bg-chat);
}

.doc-row-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.doc-row-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-row-type {
    flex-shrink: 0;
    font-size: 10px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    text-transform: uppercase;
    background: var(--bg-chat);
    padding: 0 4px;
    border-radius: 3px;
}

.doc-row-size {
    flex-shrink: 0;
    font-size: 10px;
    color: var(--text-muted);
}

.doc-row-actions {
    flex-shrink: 0;
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s;
}

.doc-row:hover .doc-row-actions {
    opacity: 1;
}

.doc-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 3px;
    transition: color 0.15s, background 0.15s;
}

.doc-icon-btn:hover {
    color: var(--accent);
    background: var(--bg-sidebar);
}

.doc-icon-btn.del:hover {
    color: var(--error);
    background: var(--bg-sidebar);
}

.empty-state {
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    padding: 30px 16px;
    line-height: 1.6;
}

/* === Main area === */
#main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;        /* 新任务态：绝对定位输入相对内容区而非视口 */
    /* 主区内部也不允许横向溢出（内容改为自身滚动/换行） */
    overflow-x: hidden;
}

/* === Topbar === */
#topbar {
    height: var(--topbar-h);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    flex-shrink: 0;
}

/* 新会话草稿态（body.mode-newtask）：整条 topbar 不显示；首次提交内容后
   mode-newtask 移除，面包屑 topbar 随之出现。 */
body.mode-newtask #topbar { display: none; }

.topbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.topbar-left h1 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot.connected {
    background: var(--success);
    box-shadow: 0 0 6px rgba(22, 163, 74, 0.4);
}

.status-dot.disconnected {
    background: var(--text-muted);
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.topbar-select {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 5px 8px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    max-width: 160px;
    height: 28px;
}

/* Task switcher — wider so task names stay readable. */
.task-select {
    max-width: 200px;
    font-weight: 600;
}

.topbar-input {
    width: 120px;
}

.btn-ghost {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

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

/* === Chat === */
.chat {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.welcome-msg {
    text-align: center;
    padding: 7vh 20px 8px;
    color: var(--text-muted);
}

.welcome-icon {
    margin-bottom: 16px;
    opacity: 0.6;
}

.welcome-msg h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.welcome-msg p {
    font-size: 14px;
}

/* 首屏标语文案（在新建任务对话框 / 空态 hero 上方） */
.welcome-slogan {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--text-secondary);
    margin-bottom: 18px;
}

/* 首屏快捷入口：全部会话 / 定时任务 / 统计（跳门户对应页） */
.welcome-shortcuts {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 22px;
}
.wc-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.wc-item:hover { border-color: var(--accent); color: var(--text); background: var(--bg-sidebar); }
.wc-item svg { flex: none; }
/* 草稿态：welcome-msg 被绝对定位且 pointer-events:none，快捷入口隐藏 */
body.mode-newtask .welcome-shortcuts { display: none; }

/* 草稿态工作区落点提示：新建任务默认落到 ~/.chat/<日期>，无需先选；
   想换落点点「更换」（打开与工具栏同一套工作区浮层）。
   ★ 父级 .welcome-msg 在草稿态是 pointer-events:none，这里必须重新放开，
   否则「更换」按钮点不动。 */
.draft-ws-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 12.5px;
    color: var(--text-secondary);
    pointer-events: auto;
    position: relative;
    z-index: 31;
}
.draft-ws-hint .dwh-label { opacity: .75; }
.draft-ws-hint .dwh-name {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-weight: 500;
}
.draft-ws-hint .dwh-change {
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    border-radius: 8px;
    padding: 3px 10px;
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
    pointer-events: auto;
    transition: border-color .15s ease, color .15s ease;
}
.draft-ws-hint .dwh-change:hover { border-color: var(--accent); color: var(--text); }
/* 非草稿态永不显示（JS 也只在草稿态注入，这里是双保险） */
body:not(.mode-newtask) .draft-ws-hint { display: none; }
/* 工作区只在新建任务草稿态可选：提交第一条消息后（mode-newtask 移除）
   输入框工具栏的「工作区」按钮一并隐藏 —— 问答开始后不允许再改工作区。 */
body:not(.mode-newtask) #workspace-wrap { display: none; }

/* === Messages === */
.msg {
    max-width: 85%;
    min-width: 0;
    animation: msgIn 0.2s ease;
}

@keyframes msgIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.msg.user {
    align-self: flex-end;
}

.msg.agent {
    align-self: flex-start;
}

.msg-bubble {
    padding: 10px 14px;
    border-radius: var(--radius);
    font-size: 14px;
    line-height: 1.6;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.msg.user .msg-bubble {
    background: var(--bg-user-msg);
    color: var(--text);
    border-bottom-right-radius: 2px;
}

.msg.agent .msg-bubble {
    background: var(--bg-agent-msg);
    border: 1px solid var(--border);
    border-bottom-left-radius: 2px;
    box-shadow: var(--shadow);
}

.msg-bubble code {
    font-family: var(--font-mono);
    font-size: 0.86em;
    background: var(--code-bg);
    color: var(--code-text);
    padding: 1px 5px;
    border-radius: 4px;
    border: none;                 /* 规范: 无边框, 极弱浅灰底 */
    white-space: pre-wrap;
    word-break: break-all;
}

.msg-bubble pre {
    background: var(--code-bg-block);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    overflow-x: auto;
    max-width: 100%;
    margin: 8px 0;
    line-height: 1.55;
}

.msg-bubble pre code {
    background: none;
    color: inherit;
    padding: 0;
    font-size: 12.5px;
}

/* Markdown tables: keep within the bubble, cells wrap instead of overflowing */
.msg-bubble table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0;
    font-size: 13px;
    display: block;
    overflow-x: auto;
}
.msg-bubble th, .msg-bubble td {
    border: 1px solid var(--border);
    padding: 6px 10px;
    text-align: left;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* === Thinking indicator === */
.thinking {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg-agent-msg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--text-secondary);
}

.thinking-dots {
    display: flex;
    gap: 4px;
}

.thinking-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    animation: bounce 1.2s infinite;
}

.thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-6px); opacity: 1; }
}

/* === Plan (task decomposition) === */
.plan-block {
    align-self: flex-start;
    width: 85%;
    background: var(--bg-plan);
    border: 1px solid #e1bee7;
    border-radius: var(--radius);
    padding: 12px 16px;
    animation: msgIn 0.2s ease;
}

.plan-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #7b1fa2;
    margin-bottom: 8px;
}

.plan-steps {
    list-style: none;
    counter-reset: step;
}

.plan-steps li {
    counter-increment: step;
    padding: 4px 0 4px 28px;
    position: relative;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text);
}

.plan-steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 4px;
    width: 20px;
    height: 20px;
    background: #7b1fa2;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
}

/* === Tool call collapsible === */
/* Compact gray line (no card): icon + Chinese label + key info */
.tool-line {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 92%;
    padding: 2px 12px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-muted);
    background: transparent;
    cursor: default;
    animation: msgIn 0.15s ease;
    user-select: none;
}

.tool-line-icon {
    flex-shrink: 0;
    font-size: 13px;
    opacity: 0.85;
}

.tool-line-name {
    flex-shrink: 0;
    font-weight: 500;
    color: var(--text-secondary);
}

.tool-line-key {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
}

.tool-line-key::before {
    content: '·';
    margin-right: 6px;
    opacity: 0.6;
}

.tool-line-state {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--text-muted);
    opacity: 0.7;
}

.tool-line.running .tool-line-state::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 2px;
    border: 1.5px solid var(--text-muted);
    border-top-color: transparent;
    border-radius: 50%;
    animation: none;
    vertical-align: -1px;
}

.tool-line.ok .tool-line-state {
    color: var(--success);
    opacity: 1;
}

.tool-line.err .tool-line-state {
    color: var(--error);
    opacity: 1;
}

.tool-block {
    align-self: flex-start;
    width: 85%;
    background: var(--bg-tool);
    border: 1px solid #ffe082;
    border-radius: var(--radius);
    overflow: hidden;
    animation: msgIn 0.2s ease;
}

.tool-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    font-size: 13px;
}

.tool-header:hover {
    background: rgba(255, 224, 130, 0.3);
}

.tool-icon {
    font-size: 14px;
    flex-shrink: 0;
}

.tool-name {
    font-weight: 500;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 12px;
}

.tool-status {
    margin-left: auto;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 3px;
    font-weight: 500;
}

.tool-status.running {
    background: var(--accent-light);
    color: var(--accent);
}

.tool-status.success {
    background: #dcfce7;
    color: var(--success);
}

.tool-status.error {
    background: #fee2e2;
    color: var(--error);
}

.tool-chevron {
    color: var(--text-muted);
    transition: transform 0.2s;
    flex-shrink: 0;
}

.tool-block.expanded .tool-chevron {
    transform: rotate(90deg);
}

.tool-body {
    display: none;
    padding: 10px 14px;
    border-top: 1px solid #ffe082;
    font-size: 12px;
}

.tool-block.expanded .tool-body {
    display: block;
}

.tool-section-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.tool-args, .tool-result {
    font-family: var(--font-mono);
    font-size: 12px;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.5;
    margin-bottom: 8px;
    padding: 8px;
    background: rgba(0,0,0,0.04);
    border-radius: var(--radius-sm);
}

.tool-result.success-text {
    color: var(--success);
}

.tool-result.error-text {
    color: var(--error);
}

/* === RAG context === */
.rag-block {
    align-self: flex-start;
    width: 85%;
    background: var(--bg-rag);
    border: 1px solid #a5d6a7;
    border-radius: var(--radius);
    padding: 10px 14px;
    animation: msgIn 0.2s ease;
}

.rag-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #2e7d32;
    margin-bottom: 8px;
}

.rag-sources {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rag-source {
    background: rgba(255,255,255,0.6);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-size: 12px;
}

.rag-source-title {
    font-weight: 500;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
}

.rag-source-score {
    font-size: 10px;
    color: var(--success);
    font-family: var(--font-mono);
}

.rag-source-snippet {
    color: var(--text-secondary);
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.4;
    max-height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* === Error message === */
.error-block {
    align-self: flex-start;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--radius);
    padding: 10px 14px;
    font-size: 13px;
    color: var(--error);
    animation: msgIn 0.2s ease;
}

/* === Status message === */
.status-msg {
    align-self: center;
    font-size: 12px;
    color: var(--text-muted);
    padding: 4px 12px;
    background: var(--bg-chat);
    border-radius: 12px;
}

/* === Input area === */
#input-area {
    padding: 12px 24px calc(env(safe-area-inset-bottom, 0px) + 16px);
    background: var(--bg-sidebar);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.input-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    background: var(--bg-input);
    /* No border on the text box area at all; focus highlight uses a soft
       shadow ring so it does not shift layout. */
    border: none;
    border-radius: var(--radius);
    padding: 6px 6px 4px;
    transition: box-shadow 0.15s;
    box-shadow: var(--shadow);
}

/* Focus highlight: soft accent ring instead of a border */
.input-wrapper:focus-within {
    box-shadow: 0 0 0 1.5px var(--accent);
}

#message-input {
    flex: 1;
    border: none;
    outline: none;
    background: none;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.5;
    resize: none;
    max-height: 240px;
    color: var(--text);
}

#message-input::placeholder {
    color: var(--text-muted);
}

.btn-send {
    background: var(--accent);
    border: none;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
}

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

.btn-send:disabled {
    background: var(--text-muted);
    cursor: not-allowed;
}

/* === Utility === */
.hidden { display: none !important; }

/* === Scrollbar === */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c0c0c0; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #a0a0a0; }

/* === Sidebar header actions === */
.sidebar-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* === Config modal === */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    animation: fadeIn 0.15s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-dialog {
    position: relative;
    width: 520px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 64px);
    background: var(--bg-sidebar);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalIn {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
}

.modal-header h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.modal-header .icon-btn {
    font-size: 20px;
    line-height: 1;
    width: 28px;
    height: 28px;
}

.modal-body {
    padding: 16px 20px;
    overflow-y: auto;
}

.modal-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
}

.config-section {
    margin-bottom: 20px;
}

.config-section:last-child {
    margin-bottom: 0;
}

.config-section h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}

.config-hint {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 12px;
}

.config-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.btn-secondary {
    background: var(--bg-input);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

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

.config-path-row {
    display: flex;
    gap: 8px;
}

.config-path-row input {
    flex: 1;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: var(--font-mono);
    outline: none;
    transition: border-color 0.15s;
}

.config-path-row input:focus {
    border-color: var(--accent);
}

.source-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px;
}

.source-list .empty-state {
    padding: 16px;
}

.source-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-chat);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
}

.source-item-path {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-family: var(--font-mono);
    color: var(--text);
    word-break: break-all;
    line-height: 1.4;
}

.source-item-remove {
    flex-shrink: 0;
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.source-item-remove:hover {
    border-color: var(--error);
    color: var(--error);
}

.toggle-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    line-height: 1.5;
}

.toggle-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
}

/* === Sidebar toggle (mobile) === */
.sidebar-toggle { display: none; }
.sidebar-backdrop { display: none; }

/* Desktop: when the sidebar is collapsed to a thin rail, its header (with the
   collapse button) is hidden — the toggle button surfaces at the LEFTMOST of
   the content top bar instead, so the sidebar can always be reopened. */
@media (min-width: 769px) {
    #app:has(#sidebar.collapsed) #sidebar-toggle {
        display: flex;
    }
}

/* === Responsive === */
/* Medium widths: shrink the fixed sidebar + trim paddings so the chat keeps
   comfortable room and never triggers a horizontal scrollbar before the
   mobile off-canvas layout takes over at 768px. */
@media (max-width: 1100px) {
    :root { --sidebar-w: 260px; }
    .chat { padding: 16px 18px; }
    #topbar { padding: 0 14px; }
    #input-area { padding-left: 18px; padding-right: 18px; }
    .topbar-task-name { max-width: 32vw; }
}

@media (max-width: 900px) {
    :root { --sidebar-w: 230px; }
    .chat { padding: 14px 14px; }
    #input-area { padding-left: 14px; padding-right: 14px; }
    .turn-bubble { padding-left: 36px; }
    .topbar-task-name { max-width: 28vw; }
}

@media (max-width: 768px) {
    :root { --sidebar-w: 240px; }
    .msg, .plan-block, .tool-block, .rag-block { max-width: 95%; width: 95%; }

    /* Sidebar collapses off-canvas by default on phones; open via hamburger */
    #sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: min(82%, 305px);
        z-index: 60;
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: var(--shadow-lg);
    }
    #sidebar.open { transform: translateX(0); }
    .sidebar-backdrop:not(.hidden) {
        display: block;
        position: fixed; inset: 0;
        background: rgba(0,0,0,.45);
        z-index: 55;
    }
    .sidebar-toggle { display: flex; }

    /* Keep the input above the browser's bottom navigation bar */
    #input-area {
        padding: 10px 14px calc(env(safe-area-inset-bottom, 0px) + 14px);
    }

    /* 窄屏：完成摘要行允许换行，折叠标签与偏好按钮触控区加大（≥44px） */
    .qa-status-line.qa-status-done {
        flex-wrap: wrap;
        row-gap: 4px;
    }
    .qa-status-line.qa-status-done .qa-proc-toggle { min-height: 32px; display: inline-flex; align-items: center; }
    .qa-status-line.qa-status-done .qa-proc-pref { min-height: 32px; }
}

/* === v0.3: Streaming cursor === */
.cursor-blink {
    display: inline-block;
    animation: blink 0.8s steps(2) infinite;
    color: var(--accent);
    font-weight: bold;
    margin-left: 1px;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.msg-bubble.streaming {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

/* === v0.3: Reasoning panel === */
.reasoning-block {
    align-self: flex-start;
    width: 85%;
    background: #f8f4ff;
    border: 1px solid #d1c4e9;
    border-radius: var(--radius);
    overflow: hidden;
    animation: msgIn 0.2s ease;
}

.reasoning-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    cursor: pointer;
    user-select: none;
    font-size: 12px;
    font-weight: 600;
    color: #6a1b9a;
    background: rgba(106, 27, 154, 0.05);
}

.reasoning-header:hover {
    background: rgba(106, 27, 154, 0.1);
}

.reasoning-chevron {
    margin-left: auto;
    font-size: 10px;
    color: var(--text-muted);
    transition: transform 0.2s;
}

.reasoning-block.expanded .reasoning-chevron {
    transform: rotate(90deg);
}

.reasoning-body {
    display: none;
    padding: 10px 14px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 300px;
    overflow-y: auto;
}

.reasoning-block.expanded .reasoning-body {
    display: block;
}

/* === v0.3: Approval banner === */
.approval-banner {
    align-self: flex-start;
    width: 85%;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fff8e1;
    border: 1px solid #ffcc02;
    border-radius: var(--radius);
    padding: 12px 14px;
    animation: msgIn 0.2s ease;
}

.approval-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.approval-content {
    flex: 1;
    min-width: 0;
}

.approval-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}

.approval-args {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-secondary);
    background: rgba(0,0,0,0.04);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    margin-bottom: 4px;
    word-break: break-word;
}

.approval-reason {
    font-size: 11px;
    color: var(--text-muted);
}

.approval-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

.approve-btn {
    background: var(--success);
    color: #fff;
    border: none;
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    cursor: pointer;
    font-weight: 500;
}

.approve-btn:hover {
    filter: brightness(1.1);
}

.deny-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    cursor: pointer;
}

.deny-btn:hover {
    border-color: var(--error);
    color: var(--error);
}

/* === v0.3: Loop warning === */
.loop-warning-block {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: var(--radius);
    padding: 8px 14px;
    font-size: 12px;
    color: #92400e;
    animation: msgIn 0.2s ease;
}

/* === v0.3: Usage display === */
.usage-block {
    align-self: flex-start;
    font-size: 11px;
    color: var(--text-muted);
    padding: 4px 10px;
    background: var(--bg-chat);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

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

.usage-val {
    font-family: var(--font-mono);
}

.usage-total {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--text-secondary);
}

/* === Login overlay (web auth) === */
.login-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 17, 21, 0.55);
    backdrop-filter: blur(4px);
}

.login-card {
    width: 320px;
    max-width: calc(100vw - 40px);
    background: var(--bg-agent-msg);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 32px 28px 28px;
    text-align: center;
}

.login-logo {
    font-size: 40px;
    line-height: 1;
}

.login-title {
    margin: 8px 0 2px;
    font-size: 22px;
    font-weight: 700;
}

.login-sub {
    margin-bottom: 20px;
    color: var(--text-secondary);
    font-size: 13px;
}

.login-form,
#login-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.login-input {
    width: 100%;
    padding: 11px 12px;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text);
    outline: none;
}

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

.login-btn {
    width: 100%;
    padding: 11px 12px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: var(--accent);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s;
}

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

.login-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.login-error {
    margin-top: 12px;
    color: var(--error);
    font-size: 13px;
}

/* === 未登录门禁（SSO 登录入口）===
   SSO 未登录时铺满全屏，遮住对话区，只留「使用 SSO 登录」一条通路。
   点击后跳 /user/login?next=<当前地址>，由 SSO 授权后回跳本页继续。
   视觉上不做出「浮层卡片」感——无边框 / 无独立底色 / 无阴影，内容直接
   落在页面背景上，与首屏 hero 同构。 */
.auth-gate {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
}

.auth-gate-card {
    width: 440px;
    max-width: calc(100vw - 40px);
    padding: 0 30px;
    text-align: center;
    background: transparent;
    border: none;
    box-shadow: none;
}

.auth-gate-logo {
    display: inline-flex;
    color: var(--accent);
    margin-bottom: 10px;
}

.auth-gate-title {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
}

.auth-gate-desc {
    margin: 0 0 22px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.auth-gate-btn {
    width: 100%;
    padding: 11px 12px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: var(--accent);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s;
}

.auth-gate-btn:hover {
    background: var(--accent-hover);
}

.auth-gate-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.auth-gate-hint {
    margin: 12px 0 0;
    min-height: 16px;
    font-size: 12px;
    color: var(--text-secondary);
}

/* === Task step status (P1-5) === */
.steps-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 12px;
    margin: 4px 0;
    background: var(--bg-agent-msg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 12.5px;
}
.step-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
}
.step-item .step-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    flex-shrink: 0;
}
.step-item.running .step-dot {
    background: var(--accent);
    box-shadow: 0 0 6px rgba(79, 140, 255, 0.5);
}
.step-item.done .step-dot {
    background: var(--success);
}
.step-item.error .step-dot {
    background: var(--danger, #ef4444);
}
.step-item .step-status-text {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* === Skill slash palette (chat "/commands") === */
#input-area {
    position: relative;
}
.skill-palette {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    margin-bottom: 8px;
    max-height: 240px;
    overflow-y: auto;
    background: var(--bg-agent-msg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: 30;
    padding: 4px;
}
.skill-palette.hidden {
    display: none;
}
.skill-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.skill-item:hover,
.skill-item.active {
    background: var(--bg-input);
}
.skill-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
}
.skill-desc {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* === Sidebar: no view tabs; full-width success "New task" button === */
.sidebar-tabs {
    display: flex;
    padding: 8px;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

/* "＋ 新任务" — full sidebar width, success green */
.task-new-full {
    width: 100%;
    padding: 8px 0;
    background: var(--success);
    border-color: var(--success);
    color: #fff;
    font-weight: 600;
    border-radius: var(--radius-sm);
}
.task-new-full:hover {
    background: var(--success-dark);
    border-color: var(--success-dark);
    color: #fff;
}

.sidebar-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* === Tasks view === */
.tasks-toolbar {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.task-list-items {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
}
/* === Sidebar nav rows (WorkBuddy style: icon + label, no heavy buttons) === */
.side-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 8px 10px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
}
.nav-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text);
    font-family: var(--font);
    font-size: 13.5px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}
.nav-row:hover { background: var(--bg-sidebar-2); }
.nav-row .nav-ico { color: var(--text-secondary); flex: none; }

/* Task group header: "任务 (N) ⌄" */
.task-group-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px 4px;
    font-size: 12px;
    color: var(--text-muted);
    user-select: none;
}

.task-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    margin-bottom: 2px;
    border: 1px solid transparent;
    transition: background 0.15s;
}
.task-item:hover { background: var(--bg-sidebar-2); }
/* WorkBuddy-style selected state: soft grey fill, regular text color. */
.task-item.active { background: var(--bg-sidebar-2); }
.task-item-name {
    flex: 1;
    font-size: 13px;
    color: var(--text);
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.task-item-time {
    flex: none;
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}
.task-item-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.task-item.active .task-item-name { color: var(--text); font-weight: 600; }

/* === Chat toolbar (provider / autonomy / clear etc.) === */
.chat-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 20px;
    background: var(--bg-sidebar);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    flex-wrap: wrap;
}
.chat-task-info {
    font-size: 13px;
    color: var(--text-secondary);
    max-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-task-info #chat-task-name { color: var(--text); font-weight: 500; }
.chat-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* === Collapsed sidebar (desktop) === */
@media (min-width: 769px) {
    #sidebar.collapsed { width: 0; min-width: 0; border-right: none; }
}

/* === Question window: input box + toolbar below (DeepSeek-style) === */
/* Toolbar has NO border at all (input-wrapper keeps its own rounded frame) */
#chat-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 8px 10px;
    background: var(--bg-sidebar);
    border: none;
    border-top: none;
    border-radius: 0;
    box-shadow: none;
    flex-shrink: 0;
    flex-wrap: wrap;
}
#chat-toolbar .chat-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Title bar: current task name (no model) */
.topbar-task-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    max-width: 40vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-left: 1px solid var(--border);
    padding-left: 12px;
    margin-left: 4px;
}

/* === DeepSeek-style refinements === */
/* Borderless selects (provider / autonomy) */
.sel-flat {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 13px;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}
.sel-flat:hover { background: var(--bg-chat); color: var(--text); }

/* Per-row task "..." menu (rename / delete) + running spinner */
.task-item { display: flex; align-items: center; gap: 6px; }
.task-item .task-item-name { flex: 1; }
.task-item-menu { position: relative; flex-shrink: 0; }
.task-item-more {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 6px;
    font-size: 16px;
    line-height: 1;
    border-radius: var(--radius-sm);
    opacity: 0;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
}
.task-item:hover .task-item-more { opacity: 1; }
.task-item-more:hover { color: var(--text); background: var(--bg-chat); }
.task-menu-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 2px);
    min-width: 120px;
    max-height: min(320px, 60vh);
    overflow-y: auto;
    background: var(--bg-sidebar);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    padding: 4px;
    /* Above chat messages / normal content so the menu is never covered;
       modals (z-index 1000) still sit above it. */
    z-index: 900;
}
.task-item-menu.open .task-menu-dropdown { display: block; }
.task-menu-item {
    padding: 7px 10px;
    font-size: 12.5px;
    color: var(--text);
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
}
.task-menu-item:hover { background: var(--bg-chat); }
.task-menu-item.danger { color: #dc2626; }
.task-menu-item.danger:hover { background: rgba(220, 38, 38, 0.08); }

/* Top bar: task name as centered title, no brand logo */
#topbar {
    justify-content: flex-start;
    padding: 0 16px;
    gap: 8px;
}
#topbar .topbar-title {
    flex: 1;
    text-align: center;
    overflow: hidden;
    display: flex;
    justify-content: center;
}
.topbar-task-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    max-width: 60vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-left: none;
    padding-left: 0;
    margin-left: 0;
}
#topbar > .status-dot {
    margin-right: 4px;
}

/* Toolbar icon buttons (apply / clear) — tighter, ghost style */
#chat-toolbar .icon-btn {
    padding: 5px;
    border-radius: var(--radius-sm);
}

/* === DeepSeek-style input area (borderless) === */
#input-area {
    padding: 8px 24px calc(env(safe-area-inset-bottom, 0px) + 12px);
    background: transparent;
    border-top: none;
}
#input-area .input-wrapper {
    background: var(--bg-input);
    border: none;
    border-radius: var(--radius);
    box-shadow: none;
    padding: 10px 14px;
    transition: background 0.15s;
}
#input-area .input-wrapper:focus-within {
    border-color: transparent;
    background: var(--bg-input);
}
#chat-toolbar {
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 6px 6px 0;
    background: transparent;
}
#chat-toolbar .chat-toolbar-actions {
    gap: 2px;
}
/* Send sits at the far right (after clear-context) */
#chat-toolbar #send-btn {
    margin-left: auto;
}

/* Sidebar brand logo */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* 品牌 logo：SVG 图标，与品牌名同行、略高于文字 */
.brand-logo {
    display: inline-flex;
    align-items: center;
    flex: none;
    color: var(--accent);
}
.brand-logo svg { display: block; }
.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.brand-text h2 { margin: 0; }
.brand-ver {
    font-size: 10.5px;
    color: var(--text-muted);
}
.sidebar-logo {
    flex-shrink: 0;
}

/* Tasks view: tile across the whole sidebar */
.task-list-items {
    padding: 4px;
    display: flex;
    flex-direction: column;
}
.task-item {
    padding: 10px 12px;
    border-radius: 8px;
    width: 100%;
}

/* === DeepSeek component alignment === */
/* Input box: very light inset border (barely visible), brand-blue on focus */
#input-area .input-wrapper {
    background: var(--bg-sidebar);
    box-shadow: inset 0 0 0 1px var(--border);
    border-radius: var(--radius);
    transition: box-shadow 0.15s;
}
#input-area .input-wrapper:focus-within {
    box-shadow: inset 0 0 0 1px var(--accent);
    background: var(--bg-sidebar);
}
#input-area #message-input { caret-color: var(--accent); }

/* Pill buttons (ds-button radius 4096px) */
.btn-primary, .btn-secondary, .btn-ghost, .btn-send {
    border-radius: var(--radius-pill);
}

/* Toolbar icon buttons: circle on hover like ds icon-btn */
#chat-toolbar .icon-btn {
    border-radius: var(--radius-pill);
}

/* Sidebar header: 60px with bottom border (ds sidebar header) */
.sidebar-header {
    min-height: 56px;
    border-bottom: 1px solid var(--border);
}

/* Welcome / brand accents */
.status-dot.connected { background: var(--success); }
.welcome-icon svg rect { stroke: var(--accent); }

/* Chat bubbles slightly softer */
.bubble-agent, .msg-agent { border-radius: var(--radius); }
.bubble-user, .msg-user { border-radius: var(--radius); }

/* === Final: sidebar header one-row layout (logo + tabs + actions) === */
.sidebar-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    flex-wrap: nowrap;
    overflow: hidden;
}
.sidebar-brand {
    flex-shrink: 0;
}
.sidebar-header h2 {
    font-size: 14px;
    white-space: nowrap;
}
/* No sidebar tabs in compact mode (removed) */
.sidebar-header .sidebar-header-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 2px;
}

/* === Final: question window — borderless textarea inside one framed input-area === */
#input-area {
    padding: 8px 24px calc(env(safe-area-inset-bottom, 0px) + 12px);
    background: transparent;
}
#input-area .input-wrapper {
    background: var(--bg-sidebar);
    box-shadow: inset 0 0 0 1px var(--border);
    border-radius: var(--radius);
    padding: 0;
    /* NOT overflow:hidden — it clips the provider/autonomy drop-up menus that
       open upward out of the toolbar (they would render only 2 of N items).
       The border-radius still rounds this wrapper's own background; its
       children (textarea + toolbar) are transparent, so nothing needs clipping. */
    transition: box-shadow 0.15s;
    /* textarea stacked ABOVE the toolbar, never side-by-side */
    flex-direction: column;
    align-items: stretch;
}
#input-area .input-wrapper:focus-within {
    box-shadow: inset 0 0 0 1px var(--accent);
}
#input-area #message-input {
    border: none;
    outline: none;
    background: transparent;
    box-shadow: none;
    width: 100%;
    resize: none;
    flex: 0 0 auto;
    padding: 12px 14px 4px;
    caret-color: var(--accent);
    font-size: 15px;
}
#chat-toolbar {
    border: none;
    border-top: 1px solid var(--border);
    box-shadow: none;
    border-radius: 0;
    padding: 6px 8px;
    background: var(--bg-input);
}
#chat-toolbar .chat-toolbar-actions {
    gap: 2px;
}
/* Send sits at the far right */
#chat-toolbar #send-btn {
    margin-left: auto;
}

/* Sidebar collapse button (right of the settings gear) */
#sidebar-collapse {
    border-radius: var(--radius-sm);
}

/* === Collapsed sidebar → fully hidden (no thin rail, no expand arrow) ===
   The rail expand button is gone; the ONLY way to reopen is the toggle at
   the leftmost of the content top bar (`#app:has(#sidebar.collapsed)
   #sidebar-toggle`), which mirrors the collapse button. */
.sidebar-rail-open {
    display: none;
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    border-radius: var(--radius-sm);
}
@media (min-width: 769px) {
    #sidebar { position: relative; }
    #sidebar.collapsed {
        width: 0;
        min-width: 0;
        border-right: none;
        overflow: hidden;
    }
    #sidebar.collapsed .sidebar-header,
    #sidebar.collapsed .sidebar-view {
        display: none;
    }
}

/* === Input window: height adjustable up to 3× default === */
#message-input {
    resize: vertical;
    min-height: 40px;
    max-height: 120px; /* 3 × min-height */
}

/* === 新任务态（body.mode-newtask）===
   底部完整输入窗(#input-area，含全部工具栏)整体上移至上中上部，作为整页
   唯一输入。提交后 mode-newtask 移除，#input-area 回到底部原样式。
   标语（.welcome-slogan）保留，贴在居中输入窗正上方；hero 其余部分
   （图标/标题/说明行）隐藏，避免与输入窗的占位提示重复。 */
body.mode-newtask .welcome-msg {
    display: block;
    position: absolute;
    top: 13%;
    left: 50%;
    transform: translate(-50%, -100%);
    width: min(720px, calc(100% - 48px));
    padding: 0 0 14px;
    z-index: 29;
    pointer-events: none;
}
body.mode-newtask .welcome-msg > .welcome-icon,
body.mode-newtask .welcome-msg > h3,
body.mode-newtask .welcome-msg > p { display: none; }
body.mode-newtask #input-area {
    position: absolute;
    top: 13%;
    left: 50%;
    transform: translateX(-50%);
    width: min(720px, calc(100% - 48px));
    z-index: 30;
    background: var(--bg);
    border-radius: var(--radius);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.14);
    padding: 8px 16px calc(env(safe-area-inset-bottom, 0px) + 12px);
}

/* Stop button state (processing) — gray circle with white stop icon */
#send-btn.btn-stop {
    color: #fff;
    background: #9ca3af;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;}

/* Voice button active (recording) — gray circle, white mic icon */
#chat-toolbar #voice-btn.recording {
    color: #fff;
    background: #9ca3af;
    border-radius: 50%;
}

/* Chat toolbar buttons: brand-colored icons instead of gray lines */
#chat-toolbar .icon-btn {
    color: var(--accent);
}

/* === Task finished + generated-file download blocks === */
.task-done {
    align-self: center;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
    font-size: 12.5px;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* Task-start pill — opens the timeline right after the user's message. */
.msg.task-started {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
    font-size: 12px;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* Closing summary prefix（已结束， / 出现异常，） */
.summary-prefix {
    font-weight: 500;
    color: var(--text-secondary);
}

/* Compressed summary body: smaller font, dimmer color, clamped height —
   full text on hover (title attr). */
.summary-body {
    display: inline-block;
    max-width: 100%;
    vertical-align: top;
    font-size: 12px;
    color: var(--text-muted);
    opacity: .85;
    line-height: 1.5;
    max-height: 60px;
    overflow: hidden;
    word-break: break-word;
    white-space: pre-wrap;
}

.msg.task-error-summary .msg-bubble {
    border-color: var(--error, #e5484d);
    color: var(--error, #e5484d);
}

.msg.task-final-summary .msg-bubble {
    border-color: var(--accent, #5b8def);
}

/* Paperclip icon row appended after the closing summary — hidden file list. */
.files-icon-wrap {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
}
.files-icon-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    font-size: 13px;
    color: var(--text-secondary);
    background: var(--bg-sidebar);
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
}
.files-icon-btn:hover {
    border-color: var(--accent, #5b8def);
    color: var(--accent, #5b8def);
}

/* Popup modal listing the generated files. */
.files-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.files-popup {
    width: min(520px, 92vw);
    max-height: 75vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-sidebar);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}
.files-popup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    background: var(--bg-sidebar-2);
    border-bottom: 1px solid var(--border);
}
.files-popup-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 15px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}
.files-popup-close:hover { color: var(--text); background: var(--border); }
.files-popup-list {
    overflow-y: auto;
    padding: 8px 12px;
}
.files-popup-row {
    padding: 8px 4px;
    border-bottom: 1px solid var(--border);
}
.files-popup-row:last-child { border-bottom: none; }

.file-link {
    display: block;
    padding: 5px 0;
    font-size: 13px;
    font-family: var(--font-mono);
    color: var(--accent);
    text-decoration: underline;
    word-break: break-all;
    cursor: pointer;
}

.file-link:hover {
    opacity: 0.85;
}

/* === Markdown rendering (tables, images, headings, lists) === */
.msg-bubble table {
    border-collapse: collapse;
    margin: 8px 0;
    width: 100%;
    font-size: 13px;
    display: block;
    overflow-x: auto;
}
.msg-bubble th, .msg-bubble td {
    border: 1px solid var(--border);
    padding: 6px 10px;
    text-align: left;
    white-space: normal;
}
.msg-bubble th { background: var(--bg-sidebar); font-weight: 600; }
/* === 正文排版规范 ===
   · 中文正文: PingFang SC / Noto Sans CJK SC, sans-serif, 无衬线
   · 加粗强调: 字重 600 (段首黑体式强调用 600/700)
   · 列表/标题/链接延续无衬线混排 */
.msg-bubble strong { font-weight: 600; }
.msg-bubble b { font-weight: 600; }
.msg-bubble h1, .msg-bubble h2, .msg-bubble h3, .msg-bubble h4 {
    font-family: var(--font);
    font-weight: 600;
    letter-spacing: -0.01em;
}
.msg-bubble h1 { font-size: 18px; }
.msg-bubble h2 { font-size: 16px; }
.msg-bubble h3 { font-size: 15px; }
.msg-bubble h4 { font-size: 14px; }
.msg-bubble p { margin: 4px 0; line-height: 1.7; }
.msg-bubble ul, .msg-bubble ol { margin: 4px 0; padding-left: 20px; }
.msg-bubble ul li, .msg-bubble ol li { margin: 2px 0; line-height: 1.65; }
.msg-bubble img { max-width: 100%; border-radius: var(--radius-sm); margin: 6px 0; border: 1px solid var(--border); }
.msg-bubble a { color: var(--accent); text-decoration: underline; }
.msg-bubble blockquote {
    margin: 6px 0;
    padding: 2px 12px;
    border-left: 3px solid var(--border-strong);
    color: var(--text-secondary);
    font-style: normal;
}
.msg-bubble hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 10px 0;
}
.file-img {
    display: block;
    max-width: 100%;
    border-radius: var(--radius-sm);
    margin: 6px 0;
    border: 1px solid var(--border);
    cursor: zoom-in;
}

/* === Workspace input (bottom toolbar, left of provider) === */




/* === Workspace picker (folder-name label + browse button) === */
.workspace-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    flex-shrink: 1;
}

.workspace-label {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-family: var(--font-mono);
    color: var(--text-secondary);
    cursor: default;
}

/* === Server directory picker modal（直接输入目录路径）=== */
.dir-nav {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

.dir-nav input {
    flex: 1;
    min-width: 0;
    padding: 8px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: var(--font-mono);
    outline: none;
    box-sizing: border-box;
}

.dir-nav input:focus {
    border-color: var(--accent);
}

/* === 工作区选择浮层（新建会话时弹出）===
   参考 WorkBuddy：圆角面板 = 搜索框 + 可滚动工作区列表 + 分隔线 + 两个动作项。 */
.ws-picker {
    position: fixed;
    inset: 0;
    z-index: 1100;
}
.ws-picker-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .32);
    animation: fadeIn .12s ease;
}
.ws-picker-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 288px;
    max-width: calc(100vw - 24px);
    max-height: min(440px, calc(100vh - 24px));
    display: flex;
    flex-direction: column;
    background: var(--bg-sidebar);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: modalIn .16s cubic-bezier(.16, 1, .3, 1);
}
.ws-picker-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 10px 6px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text-muted);
    flex: none;
}
.ws-picker-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    font-size: 13px;
    color: var(--text);
}
.ws-picker-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 2px 6px 6px;
}
.ws-picker-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
}
.ws-picker-item:hover { background: rgba(127, 127, 127, .12); color: var(--text); }
.ws-picker-item.is-missing { opacity: .55; }
.ws-picker-item .ws-picker-ico { flex: none; display: inline-flex; color: var(--text-muted); }
.ws-picker-item .ws-picker-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ws-picker-empty {
    padding: 14px 12px;
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
}
.ws-picker-sep {
    height: 1px;
    background: var(--border);
    flex: none;
}
.ws-picker-actions { padding: 6px; flex: none; }
.ws-picker-action {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.ws-picker-action:hover { background: rgba(127, 127, 127, .12); color: var(--text); }
.ws-picker-action svg { flex: none; }

/* === 新建工作空间弹窗 === */
.ws-create-dialog { width: 520px; }
.ws-create-hint {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
}
.ws-create-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    outline: none;
}
.ws-create-input:focus { border-color: var(--accent); }
.ws-create-error {
    margin-top: 8px;
    font-size: 13px;
    color: #e5534b;
}
.modal-footer .btn-secondary + .btn-primary { margin-left: 8px; }
.btn-primary:disabled,
.btn-primary[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

/* === Task sidebar: compact uniform-height blocks. ===
   Long task names / workspace paths are truncated instead of wrapping, so
   every task renders the same single-line shape. Full text via title
   tooltips set in renderTaskList. NOTE: avoid -webkit-line-clamp here — a
   flex item with display:-webkit-box collapses to min-content width in
   Chromium (a CJK name shows only ~2 chars). */
.task-item {
    min-width: 0;
}
.task-item-name {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.task-item-meta {
    min-width: 0;
    flex: 0 1 auto;
    max-width: 55%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Selected item inside toolbar dropdown menus (provider / autonomy) */
.task-menu-item.selected {
    font-weight: 600;
    color: var(--accent, #2563eb);
    background: rgba(37, 99, 235, 0.06);
}
/* Check mark for the selected option — kept left-aligned and aligned across
   items by reserving the width only on selected items (text-align left). */
.task-menu-item.selected::before {
    content: '✓ ';
    font-weight: 700;
    color: var(--accent, #2563eb);
}

/* Toolbar dropdowns (provider / autonomy / workspace) open UPWARD because
   the toolbar sits at the bottom of the screen. */
.task-menu-dropdown.drop-up {
    top: auto;
    bottom: auto;
}

/* Nudge toolbar icon buttons 2px down (visual alignment) */
#chat-toolbar .icon-btn {
    transform: translateY(2px);
}

/* Build label at the far LEFT of the chat toolbar (version · build N).
   margin-right:auto pushes it left while the actions stay right. */
.build-label {
    margin-right: auto;
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    user-select: none;
    padding: 2px 4px;
}

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

/* === run-block: dynamic collapsing execution tracker === */
.run-block {
    align-self: flex-start;
    max-width: 92%;
    margin: 2px 12px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-muted);
    user-select: none;
    animation: msgIn 0.15s ease;
}

.run-block .run-head {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: default;
}

.run-block.live .run-head-label {
    font-weight: 500;
    color: var(--text-secondary);
}

.run-head-spin {
    margin-left: 2px;
    font-size: 11px;
    opacity: 0.8;
    animation: none;
    display: inline-block;
}

.run-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.run-reasoning {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 2px 0;
    color: var(--text-secondary);
    font-size: 12px;
    word-break: break-word;
}

.run-reasoning-icon {
    flex-shrink: 0;
    opacity: 0.8;
}

.run-reasoning-text {
    white-space: pre-wrap;
    max-height: 240px;
    overflow-y: auto;
}

/* per-round (iteration) timeline inside the run-block */
.run-iteration {
    border-left: 1px solid var(--border);
    padding-left: 10px;
    margin: 2px 0 6px;
}

.run-iter-head {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-weight: 500;
}

.run-iter-state {
    font-size: 10px;
    opacity: 0.7;
    animation: none;
    display: inline-block;
}

/* Round spinner stopped once the round's tool finished (✓/✗ shown instead). */
.run-iter-state.stopped {
    animation: none;
}

.run-iter-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.run-think {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 2px 0;
    color: var(--text-secondary);
    font-size: 13px;
    word-break: break-word;
    min-width: 0;
}

.run-think-toggle {
    flex-shrink: 0;
    cursor: pointer;
    user-select: none;
    color: var(--accent, #5b8def);
    display: flex;
    align-items: center;
}

.run-think.collapsed .run-think-toggle .think-chev {
    transform: rotate(-90deg);
}

.run-think.collapsed .run-think-text {
    display: none;
}

.run-think.collapsed .run-think-icon {
    opacity: 0.5;
}

.run-think-icon {
    flex-shrink: 0;
    opacity: 0.8;
    color: var(--accent, #5b8def);
}

.run-think-label {
    flex-shrink: 0;
    color: var(--accent, #5b8def);
    font-weight: 500;
}

.run-think-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-height: 240px;
    overflow-y: auto;
}

.run-decision {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 2px 0;
    color: var(--text-secondary);
    font-size: 12px;
    word-break: break-word;
    min-width: 0;
}

.run-decision-icon {
    flex-shrink: 0;
    opacity: 0.8;
}

.run-decision-label {
    flex-shrink: 0;
    color: var(--success, #22c55e);
    font-weight: 500;
}

.run-decision-text {
    white-space: pre-wrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.run-tool {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    max-width: 100%;
    min-width: 0;
}

.run-tool-summary {
    margin-left: 6px;
    font-size: 11px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 40%;
}

.run-tool.err {
    color: var(--error, #e5484d);
}

.run-tool.err .tool-line-name,
.run-tool.err .tool-line-key {
    color: var(--error, #e5484d);
}

/* LLM / knowledge-base retry notice inside a round's block */
.run-retry {
    padding: 2px 0;
    font-size: 12px;
    color: #b7791f;
}

.run-tool-summary.err {
    color: var(--error, #e5484d);
}

.run-reasoning.fade-out,
.run-tool.fade-out {
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* final (collapsed) state */
.run-block.final .run-head {
    cursor: pointer;
}

.run-block.final .run-head:hover {
    color: var(--text);
}

.run-head-chevron {
    font-size: 9px;
    transition: transform 0.2s;
    color: var(--text-muted);
}

.run-block.final.expanded .run-head-chevron {
    transform: rotate(90deg);
}

.run-block.final .run-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-left: 12px;
    border-left: 1px solid var(--border);
    margin-left: 3px;
}

.run-block.final.collapsed .run-body {
    display: none;
}

.run-final-tool {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    color: var(--text-secondary);
}

.run-final-summary {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 55%;
    color: var(--text-muted);
}

.run-final-reasoning {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed var(--border);
}

.run-final-reasoning-head {
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 2px;
}

.run-final-reasoning-body {
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 160px;
    overflow-y: auto;
    color: var(--text-muted);
}

.run-final-plan {
    margin-top: 4px;
    color: var(--text-secondary);
}

/* task aborted alert */
.aborted-banner {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 92%;
    margin: 6px 12px;
    padding: 8px 12px;
    font-size: 12.5px;
    color: var(--error, #e5484d);
    background: var(--bg-chat);
    border: 1px solid var(--error, #e5484d);
    border-radius: var(--radius-sm);
}

/* === Sidebar user card (signed-in operator) === */
.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-top: 1px solid var(--border);
    background: var(--bg-sidebar);
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
}
.sidebar-user:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* 账号菜单（点击侧栏用户卡向上弹出） */
.user-menu {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: calc(100% + 6px);
    background: var(--bg-sidebar-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    padding: 6px;
    z-index: 50;
    min-width: 180px;
}
.user-menu.hidden { display: none; }
.user-menu-head {
    padding: 8px 10px 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
}
.user-menu-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.user-menu-id {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.user-menu-sep { height: 1px; background: var(--border); margin: 4px 2px; }
.user-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 10px;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--text);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}
.user-menu-item span { line-height: 1; }
.user-menu-item svg { flex-shrink: 0; color: var(--text-secondary); }
.user-menu-item:hover { background: var(--bg-sidebar); }
.user-menu-item.danger { color: var(--error); }
.user-menu-item.danger svg { color: var(--error); }
.user-menu-item.danger:hover { background: rgba(248, 113, 113, 0.12); }
.user-avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    overflow: hidden;
}
.user-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
/* SSO 头像（图片模式）：填充容器并裁成圆形，与「昵称首字块」互斥使用 */
.identity-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.user-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.user-name {
    font-size: 13px;
    color: var(--text);
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.user-id {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.user-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}
.user-action-btn {
    padding: 5px !important;
    color: var(--text-secondary);
}
.user-action-btn:hover {
    color: var(--text);
    background: var(--bg-sidebar-2);
}

/* === Topbar action buttons (search / notify / copy) === */
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-left: auto;
}
.topbar-action-btn {
    padding: 6px !important;
    color: var(--text-secondary);
}
.topbar-action-btn:hover {
    background: var(--bg-sidebar-2);
    color: var(--text);
}

/* === Input area access row ("+ 允许完全访问" 风格) === */
#input-access {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 6px;
    font-size: 12px;
    color: var(--text-secondary);
    flex-wrap: wrap;
}
#input-access .access-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--bg-sidebar-2);
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    font-size: 12px;
}
#input-access .access-chip:hover {
    background: var(--accent-light);
    color: var(--text);
}
#input-access .access-chip.active {
    background: var(--accent-light);
    color: var(--accent);
}
#input-access .access-chip .access-icon {
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
}

/* === Sidebar adjustments for dark theme === */
.sidebar {
    background: var(--bg-sidebar);
}
.sidebar-header {
    background: var(--bg-sidebar);
    border-bottom: 1px solid var(--border);
}
#task-list-items {
    background: var(--bg-sidebar);
}
.task-item {
    background: transparent;
    color: var(--text);
}
.task-item:hover {
    background: var(--bg-sidebar-2);
}
.task-item.active {
    background: var(--accent-light) !important;
    color: var(--text) !important;
}
.task-item-name {
    color: var(--text);
}
.tasks-toolbar .task-new-full {
    background: var(--success);
    color: #fff;
}
.empty-state {
    color: var(--text-muted);
}

/* === Top-bar toast + search highlight === */
.topbar-toast {
    position: fixed;
    top: 64px;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: var(--bg-sidebar-2);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 9999;
    max-width: 70vw;
    text-align: center;
}
.topbar-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.search-hl {
    background: rgba(251, 191, 36, 0.35);
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}

/* === History timeline replay (switched task) === */
.hist-time {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    margin-right: 6px;
    align-self: center;
}
.hist-time-row {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.hist-system {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-muted);
    padding: 2px 0;
}
.history-tool {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    padding: 2px 0;
}
.hist-tool-summary {
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
}

/* === 文档化排版 + 页内折叠（9/6 覆盖）===
   任务过程像文档平铺：去掉卡片/时间线竖线与横线，弱化块感。
   折叠/展开均为页内直接显隐（非 hover/tips）。 */
.run-block .run-head { gap: 5px; }
.run-block.final .run-head-label { font-weight: 600; color: var(--text); }

/* 去掉 run-body/iteration 的竖线边框，纯文档留白分隔 */
.run-block.final .run-body,
.run-body {
    gap: 6px;
    padding-left: 0;
    border-left: none;
    margin-left: 0;
}
.run-iteration {
    border-left: none;
    padding-left: 2px;
    margin: 4px 0 8px;
}
.run-think, .run-decision, .run-reasoning {
    padding: 1px 0;
    align-items: flex-start;
}
.run-think-text, .run-decision-text, .run-reasoning-text {
    flex: 1;
    line-height: 1.7;
}
.run-decision-text {
    -webkit-line-clamp: none;
    overflow: visible;
}
.run-final-reasoning { border-top: none; padding-top: 2px; }
.run-final-plan { border: none; }

/* 工具行：头部一行可点，参数/结果默认折叠在页内显隐 */
.run-tool { display: flex; flex-direction: column; align-items: stretch; padding: 1px 0; }
.run-tool-head {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    max-width: 100%;
    flex-wrap: nowrap; /* 过程行最外层恒单行：超长由 tool-line-name/summary 省略号截断 */
}
.run-tool-head:hover { color: var(--text); }
/* 工具行标题即内容本身（命令/结果摘要）：单行省略，不撑破布局 */
.run-tool-head .tool-line-name {
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tool-line-chev { font-size: 32px; color: var(--text-muted); transition: transform .15s; flex: none; }
.run-tool.expanded > .run-tool-head .tool-line-chev { transform: rotate(90deg); }
.run-tool-detail { display: none; margin: 2px 0 4px 22px; }
.run-tool.expanded .run-tool-detail { display: flex; flex-direction: column; gap: 6px; }

/* 工具子行（方案X）：命令/输出 单层级 run-tool-head，点击展开详情 */
.tool-sub { display: flex; flex-direction: column; }
.tool-sub > .run-tool-head { padding-left: 22px; }
.tool-sub .run-tool-detail { display: none; margin: 2px 0 4px 22px; }
.tool-sub.expanded .run-tool-detail { display: flex; flex-direction: column; gap: 6px; }
.tool-detail-label { font-size: 11px; color: var(--text-muted); display: block; margin-bottom: 2px; }
.tool-args, .tool-out {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-all;
    background: var(--code-bg-block);
    border-radius: 6px;
    padding: 8px 10px;
    margin: 0;
    max-height: 260px;
    overflow-y: auto;
    color: var(--text);
}
.run-tool.err .tool-out { color: var(--error); }

.history-tool { max-width: none; }
.history-tool .run-tool-summary { max-width: 60%; }
.hist-tool-summary.err { color: var(--error); }

/* run-tool-summary 在文档流中作为 tool 行尾注 */
.run-tool-summary { margin-left: 2px; color: var(--text-muted); }
/* 工具名后的结果单行（实时）：压缩成一行，超长省略号，点击展开全文 */
.run-tool-head .run-tool-summary {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    max-width: none;
}
.run-tool-head .run-tool-summary.line-expanded {
    white-space: pre-wrap;
    overflow: visible;
    text-overflow: clip;
}

/* === 气泡对话（带头像，9/6 09:43）===
   user 消息：右侧 + 用户头像（预置选择）；agent 消息：左侧 Chat 图标 + 灰底气泡；
   消息正文字号 16px（原 14 增大）。run-block 内思考/工具/结果仍为文档平铺折叠。 */
.msg {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 100%;
}
.msg.user { flex-direction: row-reverse; }
.msg.user .msg-bubble { align-self: flex-end; }

.msg-avatar {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    margin-top: 2px;
    user-select: none;
    background: var(--accent);
}
.msg-avatar.avatar-agent {
    background: transparent;
}
.msg.user .msg-avatar { order: -1; }

.msg-bubble { font-size: 16px; line-height: 1.7; }
.msg.agent .msg-bubble {
    background: var(--bg-agent-msg);
    border: 1px solid var(--border);
    box-shadow: none;
    padding: 10px 14px;
    border-bottom-left-radius: 2px;
    border-radius: var(--radius);
}
.task-final-summary .msg-bubble,
.task-error-summary .msg-bubble {
    background: var(--bg-agent-msg);
    border: 1px solid var(--border);
    padding: 10px 14px;
}
.msg.agent .msg-bubble p { margin: 4px 0; }

/* 设置弹窗 - 头像选择 */
.settings-section { margin-bottom: 18px; }
.settings-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 10px; }
.avatar-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.avatar-opt {
    background: none; border: none; cursor: pointer; padding: 4px;
    border-radius: 50%; outline: none;
}
.avatar-opt:hover { background: var(--bg-sidebar-2); }
.avatar-opt.selected { box-shadow: 0 0 0 2px var(--accent); background: var(--accent-light); border-radius: 50%; }
.avatar-preview { width: 42px; height: 42px; font-size: 20px; margin-top: 0; }
.settings-hint { font-size: 12px; color: var(--text-muted); margin-top: 10px; }

/* === agent-turn 单组长回复（9/6 10:20 模型重构）===
   一次用户提问 → 一条 Chat 长消息。头像只在组首一次；
   气泡内：状态首行 → 步骤文档流(思考/工具/执行说明) → 结束行 → 正文。
   无 run-head / history-run 折叠分隔条；每行文字前头均带时间戳。 */
.msg.agent-turn {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 100%;
    min-width: 0;
    align-self: flex-start;
}
/* 图标独占行：Chat logo + 「开始执行 XX 任务…」 */
.turn-head-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.msg.agent-turn .msg-avatar { margin-top: 0; }
.turn-bubble {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 7px;
    background: transparent;      /* 视觉上无框：文档平铺 */
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0 0 0 44px;          /* 与图标行对齐（头像 34 + gap 8） */
}
.msg.agent-turn .msg-bubble {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}
.turn-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    color: var(--text-secondary);
    padding: 0 0 2px;
}
.turn-status .hist-time { align-self: center; margin-left: 6px; margin-right: 0; }
.turn-status-icon { flex: none; }
.turn-status-text {
    font-weight: 600;
    color: var(--text);
}
.turn-status-spin {
    margin-left: 2px;
    font-size: 11px;
    opacity: .75;
    display: inline-block;
    animation: none;
}
/* 顶栏"执行中"转圈动画：任务未完成时出现，停止后消失 */
.exec-spinner {
    display: none;
    align-items: center;
    margin-left: 8px;
    color: var(--accent);
}
.exec-spinner.active { display: inline-flex; }

/* 降低动效：尊重系统"减少动态效果"偏好，停用脉冲与旋转 */
@media (prefers-reduced-motion: reduce) {
    .turn-status.executing .turn-status-dot { animation: none; }
    .turn-status-spin,
    .exec-spinner.active,
    .qa-step-spin { animation: none !important; }
    .qa-status-line.qa-status-done .qa-status-chev { transition: none; }
}

/* 执行中脉冲圆点：随 setRunActivity 点亮，提示"正在执行"且不依赖颜色单通道 */
.turn-status-dot { display: none; }
.turn-status.executing .turn-status-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent, #5b8def);
    flex: none;
    animation: mc-pulse-dot 1.1s ease-in-out infinite;
}
.turn-status-activity {
    color: var(--text-secondary, #888);
    font-weight: 400;
    margin-left: 2px;
}
@keyframes mc-pulse-dot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.55); opacity: .35; }
}
.exec-spinner .spin { animation: none; }
/* 任务执行中：文字最底部的"Chat 正在处理…"转圈指示 */
.busy-indicator {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 2px 2px;
    min-width: 0;
    color: var(--text-muted);
    font-size: 13px;
    align-self: flex-start;
}
.busy-spin {
    width: 14px;
    height: 14px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    display: inline-block;
    animation: spin 0.9s linear infinite;
    flex: none;
}
.busy-text { color: var(--text-secondary); }
.turn-flow { max-width: 720px; margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
/* 步骤行文字前头嵌入时间（hist-time 已由 JS 放置于每行 HTML 最前） */
.turn-flow .run-think,
.turn-flow .run-decision,
.turn-flow .run-plan-head,
.turn-flow .run-tool-head,
.turn-flow .run-retry {
    font-size: 13px;
    color: var(--text-secondary);
}
.turn-flow .hist-time { align-self: center; }

/* 任务拆分（plan 即时行） */
.run-plan { display: flex; flex-direction: column; gap: 3px; padding: 1px 0 3px; }
.run-plan-head { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); font-weight: 500; }
.run-plan-icon { flex: none; }
.run-plan-label { color: var(--text-secondary); }
.run-plan-body { padding-left: 30px; display: flex; flex-direction: column; gap: 2px; }
.run-plan-step { font-size: 13px; color: var(--text-secondary); line-height: 1.7; display: flex; align-items: center; gap: 6px; }
/* 左侧状态点：待办=空心灰圈；执行中=转圈；完成=绿勾 */
.run-plan-dot { flex: none; width: 13px; height: 13px; border-radius: 50%; box-sizing: border-box; border: 2px solid var(--text-muted); position: relative; }
.run-plan-step.running .run-plan-dot { border-color: var(--accent); border-top-color: transparent; animation: planSpin .9s linear infinite; }
@keyframes planSpin { to { transform: rotate(360deg); } }
.run-plan-step.running .run-plan-text { color: var(--text); font-weight: 500; }
.run-plan-step.done .run-plan-dot { border-color: var(--ok, #4caf50); background: var(--ok, #4caf50); }
.run-plan-step.done .run-plan-dot::after {
    content: ''; position: absolute; left: 3px; top: 0px; width: 3px; height: 7px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.run-plan-step.done .run-plan-text { text-decoration: line-through; color: var(--text-muted); }

/* 结尾行：任务已结束/失败/停止（无横线，仅文字加重） */
.turn-tail { display: flex; flex-direction: column; gap: 7px; }
.turn-end {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    padding: 3px 0 0;
}
.turn-end-text { font-weight: 600; }
.turn-end.done .turn-end-text { color: var(--success); }
.turn-end.err .turn-end-text { color: var(--error); }
.turn-end.stopped .turn-end-text { color: var(--warning); }
.turn-end .hist-time { align-self: center; }

/* 最终正文 / 失败原因：正常字号 16px 文档段落 */
.turn-answer {
    display: flex;
    flex-direction: column;
}
/* 最终正文首句内嵌时间戳（小字 mono 灰） */
.turn-answer-time {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    margin-bottom: 2px;
}
.turn-answer .msg-bubble {
    font-size: 16px;
    line-height: 1.7;
    white-space: normal;
}
.turn-answer.streaming .msg-bubble { font-size: 16px; }
.turn-answer-err .msg-bubble {
    color: var(--error);
    font-size: 14px;
}
.turn-answer-err .msg-bubble p,
.turn-answer-err .msg-bubble li { color: var(--error); }

/* 产出文件行 */
.turn-files {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
}
.turn-files .files-icon-btn {
    background: var(--accent-light);
    border: none;
    color: var(--accent);
    border-radius: var(--radius-pill);
    padding: 3px 12px;
    font-size: 12.5px;
    cursor: pointer;
    font-family: var(--font);
}
.turn-files .hist-time { align-self: center; }

/* 历史长回复组与实时同构 */
.msg.agent-turn.hist-turn .turn-status { display: none; }

/* === 行内时间戳（9/6 10:30 微调）===
   hist-time 作为"行内小尾巴"跟在工具名 / 结束行文字之后，与正文同行，
   但字号更小、颜色更浅（mono 灰）。思考/执行说明等多行文本行仍在行首。 */
.turn-flow .run-tool-head .hist-time,
.turn-end .hist-time {
    margin-left: 6px;
    margin-right: 0;
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    align-self: center;
    flex-shrink: 0;
}

/* 最后输出（模型未给出最终总结时，直接回显最后一步结果） */
.turn-lastout {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.turn-lastout-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-muted);
}
.turn-lastout-label .hist-time { margin-left: 6px; margin-right: 0; }
.turn-lastout-title { font-weight: 600; color: var(--text-secondary); }
.turn-lastout-text {
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    color: var(--text-secondary);
    max-height: 320px;
    overflow-y: auto;
}

/* 历史长回复组与实时同构（图标行同样显示"开始执行 XX 任务…"） */
.msg.agent-turn.hist-turn .turn-status { display: flex; }
.turn-lastout.collapsed .turn-lastout-text { display: none; }
.turn-lastout-chev { font-size: 32px; color: var(--text-muted); flex: none; }
.turn-lastout-label { cursor: pointer; }
.turn-lastout-label:hover .turn-lastout-title { color: var(--text); }

/* === WorkBuddy 式步骤块（9/6 10:50）===
   思考 = 「深度思考 ∨」标题 + 文章排版内容（可折叠）；
   工具 = 标题行 + 概括说明(常显正文) + 折叠的 具体命令/原始输出；
   结果概括行正文式常显。 */
.run-think { display: flex; flex-direction: column; gap: 3px; padding: 1px 0; }
.run-think-head {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-secondary);
    user-select: none;
}
.run-think-head:hover { color: var(--text); }
.run-think-toggle { display: flex; align-items: center; color: var(--text-muted); }
.run-think-toggle .think-chev { transition: transform .15s; }
.run-think.collapsed .run-think-toggle .think-chev { transform: rotate(-90deg); }
.run-think.collapsed .run-think-head .hist-time { display: none; }
.run-think-text {
    font-size: 15px;
    line-height: 1.75;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
    padding-left: 24px;
}
.run-think.collapsed .run-think-text { display: none; }
/* 任务执行中（流式）：深度思考窗口限制最大高度，超出滚动；结束后恢复常态（折叠/展开按现有逻辑） */
.proc-stage.executing .run-think .run-think-text { max-height: 280px; overflow-y: auto; }

/* 工具概括说明 / 结果概括：正文式常显 */
.run-tool { display: flex; flex-direction: column; gap: 3px; }
.run-tool-desc, .run-tool-result {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    padding-left: 24px;
    cursor: default;
}
.run-tool-result { color: var(--text); }
.run-tool-result.err { color: var(--error); }
.run-tool-detail { margin-left: 24px; }

/* 历史/实时通用的 hist-system 摘要块（系统图标 + 正文 16px） */
.hist-system-msg {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 100%;
    align-self: flex-start;
}
.hist-system-msg .msg-bubble {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-secondary);
    white-space: pre-wrap;
}
.hist-system { display: none; }

/* === 主流程阶段骨架（9/6 11:20）===
   第一层：接收任务 → 思考与拆解 → 步骤 1..N → 最终结果
   第二层：阶段 body 内为思考(大模型返回)/工具/结果/系统处理，可折叠 */
.proc-stage {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 2px 0;
    min-width: 0;
}
.proc-stage-head {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    user-select: none;
}
.proc-stage-head:hover { color: var(--accent); }
.proc-stage-chev { font-size: 36px; color: var(--text-muted); flex: none; }
.proc-stage-icon { flex: none; font-size: 13px; }
.proc-stage-label { flex: none; }
.proc-stage-state {
    font-size: 12px;
    color: var(--text-muted);
    flex: none;
}
.proc-stage-state.ok { color: var(--success); }
.proc-stage-state.err { color: var(--error); }
/* 阶段头行内嵌时间戳（与步骤行同构：小字 mono 灰，推到最右） */
.proc-stage-head .hist-time {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-weight: 400;
    flex-shrink: 0;
}
.proc-stage-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-left: 20px;
    border-left: 2px solid var(--border);
    margin-left: 4px;
    padding-bottom: 2px;
    min-width: 0;
}
.proc-stage.collapsed .proc-stage-body { display: none; }
.stage-think .proc-stage-head { color: var(--text); }

/* === 执行中：动画 + 内部内容展开 === */
/* 执行中的阶段：左侧进度线高亮 + 图标呼吸脉冲（提示正在运行） */
.proc-stage.executing > .proc-stage-body { border-left-color: var(--accent); }
.proc-stage.executing > .proc-stage-head .proc-stage-icon {
    color: var(--accent);
    animation: iconPulse 1.6s ease-in-out infinite;
}
@keyframes iconPulse {
    0%, 100% { opacity: .55; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.15); }
}
/* 执行中：内部思考 / 工具命令输出 / 结果 实时展开，便于观看进度 */
.proc-stage.executing .run-think .run-think-text { display: block; }
.proc-stage.executing .run-think .run-think-toggle .think-chev { transform: rotate(0deg); }
.proc-stage.executing .tool-sub .run-tool-detail {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.proc-stage.executing .tool-sub .tool-line-chev { transform: rotate(90deg); }
/* 思考流式输出末尾闪烁光标（执行中） */
.proc-stage.executing .run-think.streaming .run-think-text::after {
    content: '▍';
    color: var(--accent);
    animation: blink 1s step-end infinite;
}
/* 运行中状态标记：旋转的 ⟳ 作为加载动画 */
.proc-stage-state.running,
.tool-line-state.running {
    display: inline-block;
    color: var(--accent);
    animation: none;
}
/* 运行中的工具行头部轻微呼吸，提示正在执行 */
.run-tool.running > .run-tool-head {
    animation: headBreath 1.6s ease-in-out infinite;
}
@keyframes headBreath {
    0%, 100% { opacity: .72; }
    50% { opacity: 1; }
}

/* 系统处理行（上下文压缩 / 记录文档 / memory） */
.proc-sys {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
    padding: 1px 0;
    min-width: 0;
}
.proc-sys-icon { flex: none; font-size: 12px; opacity: .85; }
.proc-sys-text { color: var(--text-secondary); }
.proc-sys .hist-time { margin-left: 6px; margin-right: 0; }

/* 第一层「最终结果」阶段标签 */
.turn-end-tag {
    flex: none;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-sidebar-2);
    border-radius: var(--radius-pill);
    padding: 1px 9px;
}

/* === 单行紧凑 + 展开（9/6 11:50）=== */
/* 阶段标题行内的工具概括：单行截断，换行符已被 JS 替换为空格 */
.proc-stage-desc {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-secondary);
}
.proc-stage-head { flex-wrap: nowrap; }
.proc-stage-label { flex: none; }
.proc-stage-state { margin-left: auto; }
.proc-stage-desc:empty { display: none; }

/* 结果概括/描述：默认单行，点击展开全文 */
.run-tool-result {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    padding-left: 24px;
    max-width: 100%;
}
.run-tool-result.err { color: var(--error); }
.run-tool-result.line-expanded {
    white-space: pre-wrap;
    word-break: break-word;
    overflow: visible;
}

/* 折叠块：默认只显示标签行（一行），点击展开 pre 全文 */
.fold-block { display: flex; flex-direction: column; gap: 3px; }
.fold-block .tool-detail-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}
.fold-block .tool-detail-label:hover { color: var(--text-secondary); }
.fold-chev { font-size: 32px; color: var(--text-muted); }
.fold-block > pre { display: none; }
.fold-block.expanded > pre { display: block; }

/* 历史对话摘要行：与"接收任务"同一视觉层级，独立系统图标(📝) */
.hist-digest {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 2px 0;
}
.hist-digest-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}
.hist-digest-head:hover { color: var(--text); }
.hist-digest-icon { flex: none; }
.hist-digest-title { font-weight: 600; color: var(--text); flex: none; }
.hist-digest-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
}
.hist-digest-head .hist-time { margin-left: 6px; margin-right: 0; flex: none; }
.hist-digest-chev { font-size: 8px; color: var(--text-muted); flex: none; }
.hist-digest-body {
    display: none;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 320px;
    overflow-y: auto;
    padding-left: 26px;
}
.hist-digest:not(.collapsed) .hist-digest-body { display: block; }

/* === 9/6 12:30 微调：去步骤N / 描述大1号 / 用户时间行内 / 摘要独立层 === */
.proc-stage-label:empty { display: none; }
.proc-stage-state:empty { display: none; }
/* 步骤标题行：去除"步骤 N"后仅留概括描述，字号大 2 号(13px→16px) */
.stage-step .proc-stage-desc {
    font-size: 16px;
    font-weight: 500;
    color: var(--text);
}
/* 第一层摘要状态行：turn-status 样式 + 新图标 🗂️（替代原 proc-stage 📜） */
.hist-digest-status {
    display: flex;
    cursor: pointer;
    user-select: none;
    min-width: 0;
}
.hist-digest-status .turn-status-icon { font-size: 14px; line-height: 1; }
.hist-digest-status:hover .turn-status-text { color: var(--text); }
.hist-digest-status .hist-digest-chev {
    font-size: 8px;
    color: var(--text-muted);
    flex: none;
    margin-left: 2px;
}
.hist-digest-full {
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    padding-left: 24px;
}
/* 用户输入：时间嵌入内容行首(小字灰, 行内) */
.inline-time {
    display: inline;
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    margin-right: 6px;
}

/* === 侧栏素色任务列表（li 直列、系统字体 14px）=== */
#sidebar { font-family: Lato, "LXGW WenKai", "霞鹜文楷", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 16px; } /* side-plain-font */
ul.task-list-items { list-style: none; margin: 0; padding: 0; }
ul.task-list-items .task-item {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 6px 14px;
    margin: 0;
    white-space: nowrap;
}
ul.task-list-items .task-item-name {
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
}
ul.task-list-items .task-item.active { font-weight: 700; }
ul.task-list-items .task-item-menu { margin-left: auto; }

/* === QA 极简问答流（素色：👤 用户行 / 🐾 系统行）=== */
.qa-line {
    font-size: 15px;
    line-height: 1.75;
    margin: 0 0 12px;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text);
}
.qa-who { margin-right: 6px; }
.qa-file { color: var(--accent, #5b8def); }

/* === QA 用户头像（与侧栏头像一致，尺寸 x2）+ 内容贴底 === */
.chat > .msg.agent-turn { margin-top: auto; }  /* 贴底且超高时可滚动（flex-end 会导致顶部溢出不可滚） */
.chat > .welcome-msg { margin-top: auto; }
.chat > .msg { align-self: center; }           /* 问答区消息整体水平居中 */
.qa-user-line { display: flex; align-items: flex-start; gap: 10px; }
.qa-ava {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    line-height: 1;
    overflow: hidden;
}
.qa-user-line .qa-what { flex: 1; min-width: 0; padding-top: 6px; }

/* === 修复：main-col flex 高度链（chat 撑满并可滚动）===
   #app(100dvh) > #main(flex col) > .main-col(flex 1 col) > #chat(flex 1, overflow auto) */
.main-col { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* 侧栏收起（细轨）时，主区左上显示展开按钮（与折叠按钮同款） */
#sidebar-rail-open {
    display: block;   /* 小屏/移动端：侧栏离屏常显展开按钮 */
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 30;
    background: var(--bg-chat);
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text);
    padding: 5px;
    cursor: pointer;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
}
#sidebar-rail-open:hover { color: var(--accent, #5b8def); }
/* 移动端侧栏滑出时（覆盖内容区）隐藏展开按钮 */
#app:has(#sidebar.open) #sidebar-rail-open { display: none; }

/* 桌面（>=769px）：仅侧栏折叠时显示；移动端上面已默认常显 */
@media (min-width: 769px) {
    #sidebar-rail-open { display: none; }
    #app:has(#sidebar.collapsed) #sidebar-rail-open { display: block; }
}
#sidebar-rail-open:hover { color: var(--text); }

/* 自定义确认弹层（原生 confirm 会被遮挡） */
.mc-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.mc-dialog {
    background: var(--bg-chat);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px 20px;
    min-width: 280px;
    max-width: 90vw;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}
.mc-title { font-size: 15px; margin-bottom: 8px; }
.mc-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.mc-btn { border: 0; border-radius: 6px; padding: 6px 16px; font-size: 13px; cursor: pointer; }
.mc-btn.ok { background: #d64545; color: #fff; }
.mc-btn.cancel { background: var(--bg2); color: var(--text); border: 1px solid var(--border); }

/* === WorkBuddy 风格大输入框（textarea + 工具栏 + 按钮融成一块）=== */
#input-area {
    background: transparent;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 20px calc(env(safe-area-inset-bottom, 0px) + 14px);
}
.input-wrapper {
    width: 100%;
    max-width: 880px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 8px 10px 6px;
    box-shadow: var(--shadow);
}
.input-wrapper:focus-within { box-shadow: 0 0 0 1.5px var(--accent); }
#chat-toolbar {
    background: transparent;
    border: 0;
    padding: 2px 6px 0;
    gap: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.icon-btn { background: transparent; border: 0; padding: 4px; border-radius: 6px; color: inherit; cursor: pointer; }
.icon-btn:hover { background: rgba(255, 255, 255, 0.05); }
.chat-toolbar-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

/* === 系统 logo（与用户头像同结构同大，64 → 先做到 64 再 -1/4 = 48）=== */
.qa-sys-line { display: flex; align-items: flex-start; gap: 10px; }
.qa-ava.qa-sys-logo {
    width: 48px;
    height: 48px;
    background: var(--bg-chat);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 22px;
}
.qa-sys-line .qa-what { flex: 1; min-width: 0; padding-top: 4px; }

/* === QA：头像/图标嵌入首行文字（底部对齐）+ 事件块折叠 === */
.qa-line { display: block; }
.qa-ava {
    display: inline-block;
    vertical-align: bottom;
    margin-right: 8px;
}
.qa-user-line .qa-what,
.qa-sys-line .qa-what { display: inline; }
.qa-user-line, .qa-sys-line { display: block; }

/* 事件块：执行中展开 / 结束自动折叠 / hover 显示展开箭头 */
.qa-evt { display: block; }
.qa-evt-head { display: flex; align-items: center; vertical-align: bottom; max-width: calc(100% - 80px); min-width: 0; cursor: pointer; }
/* 事件行最外层恒单行：标题超长省略号截断（展开体仍显示全文） */
.qa-evt-head > .qa-what { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-evt-head > .qa-evt-chev { flex: none; }
.qa-evt-chev { opacity: 0; margin-left: 6px; font-size: 28px; line-height: 1; vertical-align: -0.18em; color: var(--text-secondary, var(--text-muted)); transition: opacity .12s; }
.qa-evt:hover .qa-evt-chev { opacity: 1; }
.qa-evt-body {
    display: none;
    margin: 4px 0 0 72px;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}
.qa-evt.expanded .qa-evt-body { display: block; }
/* 任务执行中：事件/状态长文本（qa-what）限制最大高度，超出滚动；结束后恢复常态 */
.turn-flow.executing .qa-evt-body { max-height: 260px; overflow-y: auto; }
.turn-flow.executing .qa-sys-line .qa-what,
.turn-flow.executing .qa-status-line .qa-what { display: block; max-height: 200px; overflow-y: auto; }

/* === qa-who 与系统图标同尺寸同风格，内联首行底部对齐（覆盖早期规则）=== */
.qa-who {
    display: inline-block;
    vertical-align: bottom;
    width: 48px;
    height: 48px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--bg-chat);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 22px;
    line-height: 46px;
    text-align: center;
    flex-shrink: 0;
}

/* 输入区：模型名字符串 + Send 放大 */
.provider-btn { display: flex; align-items: center; gap: 6px; }
.provider-label { font-size: 13px; color: var(--text-secondary); white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
#send-btn svg { width: 32px; height: 32px; }

/* === 输入区：聚焦不变色；内部背景 = 问答区背景 === */
.input-wrapper:focus-within { box-shadow: var(--shadow); }
.input-wrapper { background: var(--bg-chat); }

/* === 覆盖历史 focus 规则（#input-area .input-wrapper:focus-within 带强调色内描边）===
   聚焦不改色；内部背景与问答区/系统输出背景一致 */
#input-area .input-wrapper:focus-within,
.input-wrapper:focus-within {
    box-shadow: var(--shadow);
    border-color: var(--border);
    background: var(--bg-chat);
}
.input-wrapper { background: var(--bg-chat); }

/* 输入框图标靠右 */
#chat-toolbar { justify-content: flex-end; }
.chat-toolbar-actions { margin-left: auto; }

/* 头像全部素色（不再用强调色填充） */
.qa-ava,
.qa-ava.qa-sys-logo {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
}

/* === 输入框：聚焦/非聚焦同背景；边框加粗 1px === */
#input-area .input-wrapper,
#input-area .input-wrapper:focus-within,
.input-wrapper,
.input-wrapper:focus-within {
    background: var(--bg-chat);
    border: 2px solid var(--border);
    box-shadow: var(--shadow);
}

/* === Bootstrap 风格线性图标：用户/系统同尺寸 48，素色无填充 === */
.qa-ava,
.qa-ava.qa-ava-user,
.qa-ava.qa-sys-logo,
.qa-who {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: bottom;
    margin-right: 8px;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}
.qa-ava svg { width: 30px; height: 30px; }

/* 事件类别标记（思考 / 命令 / 结果 / 计划 / 系统 / 回答） */
.qa-tag {
    display: inline-block;
    margin-right: 8px;
    padding: 1px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12px;
    color: var(--text-secondary);
    vertical-align: 1px;
}
.qa-tag.tag-cmd { color: var(--text); }
.qa-tag.tag-result { color: var(--text-secondary); }
.qa-tag.tag-think, .qa-tag.tag-answer { color: var(--text); }

/* === 用户头像：素色线性图标（侧栏用户卡 / 设置选择 / 问答区统一）=== */
.user-avatar {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
}
.user-avatar svg { width: 20px; height: 20px; }
/* 身份头像模式（SSO 图片 / 昵称首字块）：去掉描边、底色由 JS 指定 */
.user-avatar.has-identity {
    border: none;
    color: #fff;
    background: var(--accent);
}
.avatar-opt .avatar-preview { display: flex; align-items: center; justify-content: center; }
.avatar-opt .avatar-preview svg { width: 26px; height: 26px; }
.avatar-opt.selected {
    box-shadow: 0 0 0 1px var(--text-secondary);
    background: transparent;
}

/* === 缩进与单框（9/8）===
   1) turn-bubble 左缩进减少 3/4：36px -> 9px
   2) 新任务态只保留一个输入框：#input-area 去掉背景/阴影/边框，
      只由 .input-wrapper 呈现一个框 */
.turn-bubble { padding-left: 9px; }
body.mode-newtask #input-area {
    background: transparent;
    box-shadow: none;
    border: 0;
}

/* === 系统侧不再显示图标：仅用户行每次提交显示一次头像 === */
.qa-who { display: none; }
.qa-evt-head { max-width: 100%; }
.qa-evt-body { margin-left: 12px; }
.qa-sys-line { padding-left: 0; }

/* === 事件行图标（16px 线性，素色）=== */
.qa-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    vertical-align: -3px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.qa-ico svg { width: 16px; height: 16px; }
/* qa-ico 仅作为 Agent 头部（Chat 标识）出现，每个用户问题一次；
   其余事件行不再带小图标（保留文字标签，维持可读）。 */
.qa-ico { display: none; }
.qa-sys-head {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin: 2px 0 8px;
}
.qa-sys-head .qa-ico {
    display: inline-flex;
    width: 22px; height: 22px;
    color: var(--accent, #5b8def);
}
.qa-sys-head .qa-ico svg { width: 22px; height: 22px; }
.qa-sys-head .qa-what { flex: none; font-weight: 600; color: var(--text); font-size: 15px; }
/* qa-ico-spin：任务执行期间不再旋转（用户反馈转圈怪异）。保留 class 以便语义态，但关闭动画。 */
.qa-ico-spin { animation: none; }
@keyframes qa-spin { to { transform: rotate(360deg); } }
.qa-evt { position: relative; }
.qa-evt > .qa-ico { position: absolute; left: 0; top: 3px; }
.qa-evt > .qa-evt-head { margin-left: 0; }
.qa-evt-body { margin-left: 0; }
.files-icon-btn .qa-ico { vertical-align: -3px; margin-right: 4px; }

/* === WorkBuddy 风格：用户气泡右对齐 / 状态行 / 执行计划步骤 === */
.qa-user-line { display: flex; justify-content: flex-end; align-items: flex-start; gap: 8px; }
.qa-bubble-user {
    background: var(--bg-sidebar-2, #1e222b);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px 12px;
    max-width: 72%;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.6;
}
.qa-ava-bubble { width: 32px; height: 32px; margin: 0; align-self: flex-start; }
.qa-ava-bubble svg { width: 20px; height: 20px; }
.qa-status-line { color: var(--text-secondary); }
.qa-status-done { color: var(--text); }
.qa-plan { display: block; }
.qa-step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0 3px 22px;
    cursor: pointer;
    color: var(--text-secondary);
}
.qa-step.running, .qa-step.done { color: var(--text); }
.qa-step-state { display: inline-flex; width: 14px; height: 14px; flex-shrink: 0; }
.qa-step-state svg { width: 14px; height: 14px; }
.qa-step-spin { animation: none; }
.qa-step-text { min-width: 0; }
.qa-step-detail { display: none; margin-left: 44px; }
.qa-step.running + .qa-step-detail { display: block; }
.qa-step-detail.open { display: block; }
.qa-step.done .qa-step-text { text-decoration: line-through; text-decoration-color: var(--text-secondary); }

/* === WorkBuddy 风格：主区居中 / 任务列表卡片 / 免责说明 === */
.qa-plan {
    background: var(--bg-sidebar-2, #1e222b);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 14px 12px;
    margin: 8px 0;
    max-width: 720px;
}
.qa-plan > .qa-status-line { padding: 0 0 4px 0; color: var(--text-secondary); font-size: 13px; }
.qa-step { padding: 5px 0 5px 4px; }
.qa-step-text { font-size: 14px; }
.qa-step.running, .qa-step.done { font-weight: 500; }
.qa-step-detail { margin-left: 24px; padding: 4px 0; }
.chat-disclaimer {
    text-align: center;
    color: var(--text-muted);
    font-size: 11px;
    padding: 4px 0 8px;
    opacity: 0.7;
    width: 100%;
    flex-shrink: 0;
}

/* === 侧栏任务列表 / 用户区（WorkBuddy 风格，仅样式）=== */
.side-group-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    margin: 14px 0 6px;
    padding: 0 14px;
    letter-spacing: .02em;
}
.side-group-title { display: inline-flex; align-items: center; gap: 4px; }
.side-group-label #task-count { font-size: 12px; opacity: .75; font-weight: 400; }
.side-group-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    flex: none;
    transition: background .12s ease, color .12s ease;
}
.side-group-action:hover { background: rgba(255, 255, 255, .08); color: var(--text); }

.task-list-items { display: block; padding: 0 6px; }
ul.task-list-items .task-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    margin: 0;
    border: 0;
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.45;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
}
ul.task-list-items .task-item:hover { background: rgba(255, 255, 255, .06); color: var(--text); }
ul.task-list-items .task-item:hover .task-item-name { color: var(--accent, #5b8def); }
ul.task-list-items .task-item.active {
    background: rgba(255, 255, 255, .09);
    color: var(--text);
}
.task-item-icon { display: inline-flex; width: 16px; height: 16px; flex: none; color: var(--text-muted); }
.task-item-icon svg { width: 16px; height: 16px; }
.task-item-icon.is-running { color: var(--accent, #5b8def); }
ul.task-list-items .task-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
.task-item-running { margin-left: auto; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: none; transform-origin: center; }

.sidebar-user { padding: 10px 12px; gap: 10px; }
.user-avatar { width: 28px; height: 28px; border: 0; color: var(--text-secondary); background: transparent; }
.user-avatar svg { width: 18px; height: 18px; }
.user-name { font-size: 15px; color: var(--text-secondary); }
.user-id { font-size: 13px; color: var(--text-muted); }
.user-action-btn { color: var(--text-muted); }
.user-action-btn:hover { color: var(--text); }
#theme-toggle { display: inline-flex; align-items: center; justify-content: center; }
.theme-icon { display: none; }
:root[data-theme="dark"] #theme-toggle .theme-icon-dark,
:root[data-theme="light"] #theme-toggle .theme-icon-light { display: inline-flex; }

/* === 系统输出：醒目但不刺眼 ===
   浅灰底 + 主题色左侧竖条，文字略加重；不用高饱和背景/粗边框。 */
.qa-sys-line,
.qa-evt-sys,
.qa-status-line {
    background: rgba(127, 127, 127, .09);
    box-shadow: inset 2px 0 0 var(--accent, #5b8def);
    border-radius: 6px;
    padding: 5px 10px 5px 12px;
    margin: 2px 0;
}
.qa-sys-line .qa-what,
.qa-evt-sys .qa-evt-head .qa-what,
.qa-status-line .qa-what {
    color: var(--text);
    font-weight: 500;
}
.qa-sys-line .qa-ico,
.qa-status-line .qa-ico,
.qa-evt-sys .qa-ico { color: var(--accent, #5b8def); }
.qa-tag.tag-sys {
    background: rgba(91, 141, 239, .14);
    border-color: transparent;
    color: var(--accent, #5b8def);
    font-weight: 600;
}
/* 轮级分隔行：「第 N 轮」——比普通系统行更靠前的留白，强调分段起点 */
.qa-sys-line.qa-sys-round {
    margin-top: 14px;
    background: rgba(91, 141, 239, .07);
    box-shadow: inset 2px 0 0 var(--accent, #5b8def);
}
.qa-sys-line.qa-sys-round .qa-what {
    color: var(--accent, #5b8def);
    font-weight: 600;
    letter-spacing: .3px;
}

/* 任务完成摘要行：「已完成 4m1s >」，无背景框，可点击展开/折叠执行过程 */
.qa-status-line.qa-status-done {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin: 8px 0 4px;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
}
.qa-status-line.qa-status-done .qa-ico { display: none; }
/* 提高特异性，覆盖执行中的 .qa-what display:block/max-height */
.turn-flow .qa-status-line.qa-status-done .qa-what { font-weight: 400; color: var(--text-muted); display: inline; max-height: none; overflow-y: visible; }
.qa-status-line.qa-status-done .qa-status-chev {
    display: inline-block;
    margin-left: 2px;
    transition: transform .15s ease;
}
.qa-status-line.qa-status-done .qa-status-chev::after { content: '>'; }
/* 展开状态（未折叠）：chevron 朝下 */
.turn-flow:not(.folded) .qa-status-line.qa-status-done .qa-status-chev { transform: rotate(90deg); }
/* 任务完成后默认折叠执行过程，仅保留 Chat 头部、完成摘要、最终结果、文件 */
.turn-flow.folded > :not(.qa-sys-head):not(.qa-status-line.qa-status-done):not(.qa-answer-line):not(.qa-files-line):not(.qa-user-line):not(.qa-diagram-line):not(.qa-evt) { display: none; }
/* 折叠态下保留思考/工具行，但工具结果体量可能很大，限高滚动，避免挤爆版面 */
.turn-flow.folded .qa-evt-body { max-height: 220px; overflow-y: auto; }

/* draw_diagram 工具渲染的图表：始终可见（折叠执行过程后仍保留） */
.qa-diagram-line {
    margin: 8px 0;
    padding: 10px 12px;
    background: var(--panel-2, #fff);
    border: 1px solid var(--border, #e3e8ee);
    border-radius: 10px;
    overflow: auto;
}
.qa-diagram-line svg { max-width: 100%; height: auto; }
.qa-diagram-img { max-width: 100%; height: auto; display: block; }
.qa-diagram-loading { font-size: 12px; color: var(--muted, #8893a5); }

/* markdown 内嵌 mermaid 占位块（renderInlineMermaid 渲染后替换为 SVG） */
.md-mermaid {
    margin: 8px 0;
    padding: 4px 0;
}
.md-mermaid svg { max-width: 100%; height: auto; display: block; }
.md-mermaid-rendering::before {
    content: '图表渲染中…';
    font-size: 12px; color: var(--muted, #8893a5);
}

/* 工具输出截断 + 展开全部（对齐 WorkBuddy） */
.tool-out-preview {
    white-space: pre-wrap; word-break: break-word;
    font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 12px; color: var(--text);
}
.tool-out-more {
    display: inline-block; margin: 6px 0 2px;
    padding: 2px 10px; font-size: 12px; cursor: pointer;
    color: var(--accent, #5b8def);
    background: transparent;
    border: 1px solid var(--border, #e3e8ee);
    border-radius: 6px;
}
.tool-out-more:hover { background: var(--panel-2, #f5f7fa); }
/* write_file 写入 Markdown 文件：结果体内的友好预览（标题 + 可滚渲染区） */
.tool-out-md-head { font-size: 12px; color: var(--muted, #8893a5); margin: 4px 0 6px; }
.tool-out-md {
    max-height: 360px; overflow: auto;
    border: 1px solid var(--border, #e3e8ee); border-radius: 6px;
    padding: 8px 10px; background: var(--panel-2, #f5f7fa);
}
.tool-out-md .qa-what { font-size: 13px; line-height: 1.7; }
.qa-diagram-src {
    font-size: 12px; color: var(--muted, #8893a5);
    white-space: pre-wrap; word-break: break-word; margin: 0;
}

/* 完成摘要行增强：✓ 勾 + 摘要 + 可点折叠标签 + 偏好按钮（结果优先 · 过程可选） */
.qa-status-line.qa-status-done .qa-done-check {
    color: var(--success, #2e9e5b);
    font-weight: 700;
    margin-right: 2px;
}
.qa-status-line.qa-status-done .qa-what { font-weight: 600; color: var(--text); }
.qa-status-line.qa-status-done .qa-proc-toggle {
    color: var(--accent, #5b8def);
    font-weight: 600;
    margin-left: 4px;
    white-space: nowrap;
}
.qa-status-line.qa-status-done .qa-proc-pref {
    margin-left: 10px;
    background: transparent;
    border: 1px solid var(--border, #cfcfcf);
    border-radius: 11px;
    color: var(--text-muted, #888);
    font-size: 11px;
    line-height: 1;
    padding: 3px 8px;
    cursor: pointer;
    min-width: 36px;
    min-height: 24px;
    flex: none;
}
.qa-status-line.qa-status-done .qa-proc-pref:hover {
    color: var(--text);
    border-color: var(--accent, #5b8def);
}
.qa-status-line.qa-status-done:focus-visible {
    outline: 2px solid var(--accent, #5b8def);
    outline-offset: 2px;
    border-radius: 4px;
}

/* === 样式修订（2026-09-08）：免责声明位置 / 按钮状态 / 发送按钮主题色 / QA 居中 === */

/* 免责声明：移到页面底部、输入框之上，居中、弱化显示 */
.chat-disclaimer {
    text-align: center;
    color: var(--text-muted);
    font-size: 11px;
    padding: 4px 0 8px;
    opacity: 0.7;
    width: 100%;
    flex-shrink: 0;
}
/* 免责声明为常驻页脚：常规态位于输入框上方，新任务态（输入框上浮）时留在页面底部。 */

/* 工具栏图标按钮：常态为黑（深主题下为白，即 var(--text)），不用强调蓝 */
#chat-toolbar .icon-btn { color: var(--text); }

/* 发送按钮：圆形 + 主题感知填充
   浅色主题 → 黑底白纸飞机；深色主题 → 白底黑纸飞机 */
#chat-toolbar #send-btn {
    background: #111;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: auto;
}
#chat-toolbar #send-btn svg { width: 17px; height: 17px; }
:root[data-theme="dark"] #chat-toolbar #send-btn {
    background: #f3f3f3;
    color: #111;
}
/* 停止态（运行中）：灰色圆 + 白色方块，与主题无关 */
#chat-toolbar #send-btn.btn-stop,
:root[data-theme="dark"] #chat-toolbar #send-btn.btn-stop {
    background: #9ca3af !important;
    color: #fff !important;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    border: none;
}
/* 无输入内容时（新对话/空白态）发送按钮置灰禁用，明显不可点 */
#chat-toolbar #send-btn:disabled {
    background: #9ca3af !important;
    color: #fff !important;
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
:root[data-theme="dark"] #chat-toolbar #send-btn:disabled {
    background: #4b5563 !important;
    color: #cbd5e1 !important;
    opacity: 1;
    cursor: not-allowed;
    pointer-events: none;
}

/* 任务运行中：除发送（停止）外所有工具栏按钮置灰并禁用 */
body.is-running .chat-toolbar .icon-btn:not(#send-btn) {
    color: var(--text-muted) !important;
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* QA 整块水平居中：内容不满宽时整体居中（turn-flow 内部 max-width + margin auto） */
.chat > .msg.agent-turn { max-width: 100%; }
.turn-flow { margin-left: auto; margin-right: auto; }

/* =====================================================================
   Agent 回答排版精修（2026-09-09 方案 A+B+C）
   A) 字体栈已在上方 :root 修正（移除楷体，正文落 PingFang/YaHei 黑体）
   B) 定格答案行轻量 Markdown 组件样式
   C) 段落缩进与两端对齐 —— 仅作用于定稿后的 .qa-answer-line，
      流式期间为纯文本 pre-wrap，无逐字抖动
   ===================================================================== */

/* --- A: 行宽收敛 + 段落呼吸 + 答案定稿层级 --- */
.chat > .msg.agent-turn { max-width: min(94%, 780px); }
.qa-line { margin-bottom: 3px; line-height: 24px; }
.turn-flow.folded .qa-line.qa-answer-line .qa-what { line-height: 1.8; }
.turn-flow .qa-status-line.qa-status-done .qa-what {
    font-size: 12.5px; letter-spacing: 0.01em;
}

/* --- B+C: 定格富文本容器：span -> block，两端对齐，段首缩进 --- */
.qa-line.qa-answer-line .qa-what {
    display: block;
    text-align: justify;
    text-justify: inter-ideograph;
}
.qa-line.qa-answer-line .qa-what > .md-p { margin: 0 0 0.55em; }
.qa-line.qa-answer-line .qa-what > .md-p:last-child { margin-bottom: 0; }
/* 次段起首行缩进 2em（中文正文阅读节奏）；首段不缩，避免与行首图标脱节。
   非首段落由 JS 在定格渲染时打 md-p-ind（段落被标题/列表隔断时同样生效） */
.qa-line.qa-answer-line .qa-what > .md-p.md-p-ind { text-indent: 2em; }

/* --- B: 行内组件 --- */
.qa-line.qa-answer-line code.md-code {
    font-family: var(--font-mono);
    font-size: 0.85em;
    background: var(--code-bg);
    color: var(--code-text);
    padding: 1px 5px;
    border-radius: 4px;
    white-space: pre-wrap;
    word-break: break-all;
}
.qa-line.qa-answer-line .qa-what strong { font-weight: 600; color: var(--text); }
.qa-line.qa-answer-line .qa-what em { color: var(--text-secondary); }
.qa-line.qa-answer-line a.md-a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    word-break: break-all;
}

/* --- B: 块级组件 --- */
.qa-line.qa-answer-line pre.md-pre {
    background: var(--code-bg-block);
    border: 1px solid var(--border);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    overflow-x: auto;
    max-width: 100%;
    margin: 8px 0 12px;
    line-height: 1.55;
    white-space: pre;
}
.qa-line.qa-answer-line pre.md-pre code {
    background: none;
    color: inherit;
    padding: 0;
    font-size: 12.5px;
    font-family: var(--font-mono);
}
.qa-line.qa-answer-line .md-h { font-weight: 600; color: var(--text); margin: 0.9em 0 0.35em; line-height: 1.4; }
.qa-line.qa-answer-line .md-h1 { font-size: 1.28em; letter-spacing: -0.01em; }
.qa-line.qa-answer-line .md-h2 { font-size: 1.14em; }
.qa-line.qa-answer-line .md-h3 { font-size: 1.04em; }
.qa-line.qa-answer-line .md-ul,
.qa-line.qa-answer-line .md-ol { margin: 0.3em 0 0.7em; padding-left: 1.6em; }
.qa-line.qa-answer-line .md-li { margin: 0.14em 0; }
.qa-line.qa-answer-line .md-quote {
    border-left: 3px solid var(--accent);
    background: var(--accent-light);
    color: var(--text-secondary);
    padding: 6px 14px;
    margin: 0.4em 0 0.7em;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.qa-line.qa-answer-line .md-quote .md-p { margin: 0.2em 0; }

/* 窄屏：行宽放开、字号不缩放 */
@media (max-width: 768px) {
    .chat > .msg.agent-turn { max-width: 97%; }
    .qa-line.qa-answer-line pre.md-pre { white-space: pre-wrap; word-break: break-word; }
}

/* =====================================================================
   WorkBuddy 排版对齐（2026-09-09）：提炼自 cb-markdown loose 档位 + 主题 token
   - 正文 15px / 行高 1.786（~27px）
   - 标题只靠字号+字重区分，h1 21 / h2 19 / h3 17 px，600
   - 段距用 padding 体系：p 12 / 列表 16 / 代码块与引用 12，随块不折叠
   - 行内 code 低对比底色 + 正文色文字（非常用高亮紫）
   - 链接蓝 / 中性引用条 / hljs 语法配色，均按明暗主题 token 化
   ===================================================================== */
:root {
    /* WorkBuddy-like markdown tokens (dark) */
    --md-text: #d2d3e0;
    --md-text-2: #858699;
    --md-text-3: #a0a0a0;
    --md-link: #3794ff;
    --md-code-bg: rgba(255, 255, 255, 0.1);
    --md-code-text: #d2d3e0;
    --md-pre-bg: #1f2329;
    --md-pre-border: #2a2f37;
    --md-border: #3c3c3c;
    --md-quote-bg: transparent;
    --md-th-bg: #2a2f37;
    --md-hl-keyword: #569cd6;
    --md-hl-string: #ce9178;
    --md-hl-number: #b5cea8;
    --md-hl-func: #dcdcaa;
    --md-hl-comment: #6a9955;
    --md-hl-var: #9cdcfe;
    --md-hl-type: #4ec9b0;
}
:root[data-theme="light"] {
    --md-text: #333333;
    --md-text-2: #666666;
    --md-text-3: #808080;
    --md-link: #006ab1;
    --md-code-bg: rgba(0, 0, 0, 0.05);
    --md-code-text: #333333;
    --md-pre-bg: #f6f8fa;
    --md-pre-border: #e4e7ec;
    --md-border: #d0d7de;
    --md-quote-bg: transparent;
    --md-th-bg: #f6f8fa;
    --md-hl-keyword: #0000ff;
    --md-hl-string: #a31515;
    --md-hl-number: #098658;
    --md-hl-func: #795e26;
    --md-hl-comment: #008000;
    --md-hl-var: #001080;
    --md-hl-type: #267f99;
}
/* 容器基准：WorkBuddy loose 正文（15px / 27px 行高） */
.qa-line.qa-answer-line .qa-what {
    font-size: 15px;
    line-height: 1.8;
    color: var(--md-text, var(--text));
    font-weight: 400;
}
.qa-line.qa-answer-line .qa-what strong { font-weight: 600; color: var(--md-text); }
.qa-line.qa-answer-line .qa-what em { font-style: italic; color: inherit; }

/* 标题层级：字号递进 + 顶部留白，颜色同正文（同 WorkBuddy 视觉） */
.qa-line.qa-answer-line .qa-what .md-h {
    font-weight: 600;
    color: var(--md-text);
    line-height: 1.4;
    margin: 0;
    padding: 0 0 8px;
}
.qa-line.qa-answer-line .qa-what .md-h.md-h1 { font-size: 21px; padding: 20px 0 12px; letter-spacing: -0.01em; }
.qa-line.qa-answer-line .qa-what .md-h.md-h2 { font-size: 19px; padding: 16px 0 8px; }
.qa-line.qa-answer-line .qa-what .md-h.md-h3 { font-size: 17px; padding: 12px 0 4px; }
.qa-line.qa-answer-line .qa-what .md-h:first-child { padding-top: 0; }

/* 段落与列表：padding 制间距（不折叠），list 缩进 2em */
.qa-line.qa-answer-line .qa-what > .md-p { margin: 0; padding: 0 0 12px; }
.qa-line.qa-answer-line .qa-what > .md-p:last-child { padding-bottom: 0; }
.qa-line.qa-answer-line .qa-what > .md-p.md-p-ind { text-indent: 2em; }
.qa-line.qa-answer-line .qa-what .md-ul,
.qa-line.qa-answer-line .qa-what .md-ol {
    margin: 0;
    padding: 0 0 12px 2em;
}
.qa-line.qa-answer-line .qa-what .md-li { margin: 0; padding: 0 0 4px; }
.qa-line.qa-answer-line .qa-what .md-li:last-child { padding-bottom: 0; }
.qa-line.qa-answer-line .qa-what .md-li > .md-p { padding-bottom: 0; }

/* 行内代码：低对比底色 + 正文色文字（WorkBuddy 风格，非高亮紫） */
.qa-line.qa-answer-line .qa-what code.md-code {
    font-family: "Menlo", Consolas, "JetBrains Mono", "SF Mono", monospace;
    font-size: 0.85em;
    background: var(--md-code-bg);
    color: var(--md-code-text);
    padding: 0 4px;
    border-radius: 3px;
    white-space: pre-wrap;
    word-break: break-all;
}

/* 围栏代码块 */
.qa-line.qa-answer-line .qa-what pre.md-pre {
    background: var(--md-pre-bg);
    border: 1px solid var(--md-pre-border);
    border-radius: 8px;
    padding: 12px 14px;
    margin: 0 0 12px;
    overflow-x: auto;
    line-height: 1.6;
    white-space: pre;
}
.qa-line.qa-answer-line .qa-what pre.md-pre code {
    background: none;
    color: var(--md-text);
    padding: 0;
    font-size: 12.5px;
    font-family: "Menlo", Consolas, "JetBrains Mono", "SF Mono", monospace;
    line-height: 1.6;
}
/* hljs 基础语法着色（workbuddy/VS Code Dark+ / Light+） */
.qa-line.qa-answer-line .qa-what .hljs-keyword,
.qa-line.qa-answer-line .qa-what .hljs-selector-tag { color: var(--md-hl-keyword); }
.qa-line.qa-answer-line .qa-what .hljs-string,
.qa-line.qa-answer-line .qa-what .hljs-attr { color: var(--md-hl-string); }
.qa-line.qa-answer-line .qa-what .hljs-number,
.qa-line.qa-answer-line .qa-what .hljs-literal { color: var(--md-hl-number); }
.qa-line.qa-answer-line .qa-what .hljs-title,
.qa-line.qa-answer-line .qa-what .hljs-function { color: var(--md-hl-func); }
.qa-line.qa-answer-line .qa-what .hljs-comment,
.qa-line.qa-answer-line .qa-what .hljs-quote { color: var(--md-hl-comment); font-style: italic; }
.qa-line.qa-answer-line .qa-what .hljs-variable,
.qa-line.qa-answer-line .qa-what .hljs-params { color: var(--md-hl-var); }
.qa-line.qa-answer-line .qa-what .hljs-type,
.qa-line.qa-answer-line .qa-what .hljs-built_in { color: var(--md-hl-type); }

/* 引用：中性竖条 + 次要文字（无底色） */
.qa-line.qa-answer-line .qa-what .md-quote {
    border-left: 3px solid var(--md-border);
    background: var(--md-quote-bg);
    color: var(--md-text-2);
    padding: 6px 14px;
    margin: 0 0 12px;
    border-radius: 0 8px 8px 0;
}
.qa-line.qa-answer-line .qa-what .md-quote .md-p { padding-bottom: 0; margin: 0 0 4px; }
.qa-line.qa-answer-line .qa-what .md-quote .md-p:last-child { margin-bottom: 0; }

/* 链接：WorkBuddy 链接蓝 */
.qa-line.qa-answer-line .qa-what a.md-a {
    color: var(--md-link);
    text-decoration: none;
    word-break: break-all;
}
.qa-line.qa-answer-line .qa-what a.md-a:hover { text-decoration: underline; }

/* 分隔线（hr，为未来解析预留样式一致） */
.qa-line.qa-answer-line .qa-what .md-hr {
    border: none;
    border-top: 1px solid var(--md-border);
    margin: 16px 0;
}

/* 表格（cb-markdown 风格：外框圆角 16、th 深一档、8/16 内边距） */
.qa-line.qa-answer-line .qa-what .md-table-wrap { width: 100%; overflow-x: auto; margin: 0 0 12px; }
.qa-line.qa-answer-line .qa-what table.md-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--md-border);
    border-radius: 16px;
    overflow: hidden;
    margin: 0;
    font-size: 14px;
    line-height: 22px;
}
.qa-line.qa-answer-line .qa-what .md-table th {
    background: var(--md-th-bg);
    font-weight: 600;
    text-align: left;
    font-size: 12px;
    line-height: 21px;
    padding: 8px 16px;
    border-right: 1px solid var(--md-border);
    border-bottom: 1px solid var(--md-border);
}
.qa-line.qa-answer-line .qa-what .md-table td {
    padding: 8px 16px;
    border-right: 1px solid var(--md-border);
    border-bottom: 1px solid var(--md-border);
    word-break: break-word;
}
.qa-line.qa-answer-line .qa-what .md-table th:last-child,
.qa-line.qa-answer-line .qa-what .md-table td:last-child { border-right: none; }
.qa-line.qa-answer-line .qa-what .md-table tr:last-child td { border-bottom: none; }

@media (max-width: 768px) {
    .qa-line.qa-answer-line .qa-what pre.md-pre { white-space: pre-wrap; word-break: break-word; }
}

/* =====================================================================
   工具状态扩态（① 对齐 WorkBuddy ToolState：executed/failed/cancelled）
   + 历史最终答案富文本（② 与实时一致）
   ===================================================================== */
/* 阶段式工具行（run-tool）取消态 */
.run-tool.cancelled { opacity: 0.6; }
.run-tool.cancelled .tool-line-icon { filter: grayscale(1); }
.run-tool .tool-line-state.cancelled { color: var(--text-muted); }
.proc-stage-state.cancelled { color: var(--text-muted); }

/* 问答流工具块（qa-evt）取消态：整块半透明 + 灰色标签 */
.qa-evt.qa-evt-cancelled { opacity: 0.6; }
.qa-evt.qa-evt-cancelled .qa-evt-head .qa-ico,
.qa-evt.qa-evt-cancelled .qa-evt-head .qa-what { color: var(--text-secondary); }
.qa-evt-cancelled .qa-tag,
.qa-tag.tag-cancelled { color: var(--text-muted); }

/* 历史最终答案容器：与实时富文本同视觉，顶部留白 */
.turn-answer .hist-answer { margin-top: 4px; }
.turn-answer > .qa-line.qa-answer-line { margin: 2px 0 0; }

/* =====================================================================
   WorkBuddy 执行过程行风格（2026-09-10）：扁平轻量——无标签徽标，
   事件行 = 小图标 + 「动作：对象」次要色文字；状态由行文案自述。
   ===================================================================== */
.qa-evt .qa-tag { display: none; }
.qa-evt > .qa-evt-head > .qa-what {
    color: var(--text-secondary);
    font-size: 13.5px;
    font-weight: 400;
}
.qa-evt > .qa-evt-head > .qa-ico { color: var(--text-muted); }

/* =====================================================================
   过程内容固定高度滚动区（WorkBuddy 风格，2026-09-10）
   思考/命令/结果的展开体：无论执行中还是完成后，一律限制在固定高度
   区域内滚动，不再无限撑长页面；浅底色块 + 常显 chevron。
   ===================================================================== */
.qa-evt .qa-evt-body {
    max-height: 260px;
    overflow-y: auto;
    background: var(--code-bg);
    border-radius: 8px;
    padding: 8px 12px;
    margin: 6px 0 2px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--text-muted) transparent;
}
.qa-evt .qa-evt-chev { opacity: .75; }
.qa-evt:hover .qa-evt-chev { opacity: 1; }
@media (max-width: 768px) {
    .qa-evt .qa-evt-body { max-height: 200px; margin-left: 0; }
}

/* =====================================================================
   事件行图标恢复（WorkBuddy 每行小图标）+ 放大 + 裸 SVG 无框无影
   ===================================================================== */
.qa-ico {
    display: inline-flex;
    width: 24px; height: 24px;
    background: none; border: none; box-shadow: none;
    color: var(--text-muted);
}
.qa-ico svg { width: 24px; height: 24px; }
.qa-line:has(> .qa-ico) { position: relative; padding-left: 31px; }
.qa-line > .qa-ico { position: absolute; left: 0; top: 0; }
.qa-sys-head .qa-ico { width: 36px; height: 36px; background: none; border: none; box-shadow: none; }
.qa-sys-head .qa-ico svg { width: 36px; height: 36px; }

/* =====================================================================
   签名行标识强化（2026-09-10）：对齐 WorkBuddy —— 品牌色圆形底 + 白色爪印
   + 粗体名称。圆形底是标识的一部分（非矩形边框），让用户一眼认出 agent。
   ===================================================================== */
.qa-sys-head .qa-ico {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--accent, #5b8def);
    color: #fff;
    box-shadow: none;
    flex-shrink: 0;
}
.qa-sys-head .qa-ico svg { width: 26px; height: 26px; }
.qa-sys-head .qa-what {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* 签名行豁免系统行底框：裸标识（圆形 logo + 粗体名），无边框/底色/竖条 */
.qa-line.qa-sys-line.qa-sys-head {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin: 2px 0 10px;
    gap: 10px;
}
/* 签名行 logo 与名称错位修正（2026-09-13）
   原 qa-sys-head 被 `.qa-line > .qa-ico { position:absolute }` 命中，圆形 logo 以
   绝对定位压在文字起点；而本块 padding:0 又抵消了 `.qa-line:has(> .qa-ico)` 的 34px
   左内边距，导致 logo 与 "Chat" 重叠。改为让签名行图标回到 flex 正常流，靠 gap
   自然错开（不动事件行的绝对定位逻辑）。 */
.qa-line.qa-sys-line.qa-sys-head > .qa-ico { position: static; }

/* ============================================================================
 * 导航信息架构：工作区（一级）→ 任务（二级）→ 对话常驻（2026-10-07）
 * 一个工作区 = 一组相关任务（目标相同）；任务 ≡ 会话，点即续干。
 * 列表只做统计（弱化入口 → user.html）；主区以 My Helmor 对话为主。
 * ========================================================================== */

/* --- 侧栏：工作区分组 --- */
#task-list-items { padding: 4px 6px 8px; }

/* 「没有工作区」任务平铺在顶层：对齐与文件夹内任务保持一致，并显示当前任务小圆点 */
#task-list-items > .task-item { padding-left: 24px; }
#task-list-items > .task-item .task-item-icon { margin-left: -14px; }
#task-list-items > .task-item.is-current-task::before {
    content: ""; position: absolute; left: 12px; top: 50%;
    transform: translateY(-50%);
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--accent);
}
/* 顶层默认任务与下方用户工作区文件夹之间的细分隔线 */
#task-list-items > .task-list-sep {
    height: 1px; margin: 6px 12px;
    background: var(--border, rgba(128,128,128,.18));
    list-style: none;
}

.ws-group { margin: 0 0 2px; }

.ws-head {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 8px; margin: 1px 0;
    border-radius: 8px;
    cursor: pointer; user-select: none;
    color: var(--text-secondary);
    font-size: 13px; font-weight: 600;
}
.ws-head:hover { background: var(--bg-sidebar-2); color: var(--text); }
.ws-head .ws-caret {
    flex: none; width: 12px; display: inline-flex; align-items: center;
    transition: transform .15s ease; opacity: .7;
}
.ws-group.collapsed .ws-caret { transform: rotate(-90deg); }
.ws-head .ws-ico { flex: none; display: inline-flex; opacity: .8; }
.ws-head .ws-title {
    flex: 1; min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
.ws-head .ws-count {
    flex: none; font-size: 11px; font-weight: 500;
    color: var(--text-muted); background: var(--bg-sidebar-2);
    border-radius: 10px; padding: 1px 7px;
}
.ws-head.is-current { background: var(--bg-sidebar-2); color: var(--text); }
.ws-head.is-current .ws-title { font-weight: 700; }
.ws-head.is-current .ws-count { background: var(--bg-chat); }

.ws-group .ws-body { overflow: hidden; }
.ws-group.collapsed .ws-body { display: none; }
/* 二级任务列表：去掉旧的 flex:1/滚动（交给外层容器滚动） */
.ws-group .ws-body > .task-list-items {
    flex: none; overflow: visible; padding: 0 0 2px;
}
.ws-group .task-item { position: relative; padding-left: 24px; }
/* 当前任务标记：小圆点（≡ 会话，正在干活的那个） */
.ws-group .task-item.is-current-task::before {
    content: ""; position: absolute; left: 12px; top: 50%;
    transform: translateY(-50%);
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--accent);
}
/* 分组内的任务图标槽位留白（保持与旧视觉一致的缩进） */
.ws-group .task-item .task-item-icon { margin-left: -14px; }

/* 工作区分组「⋯」悬浮按钮：默认透明隐藏，鼠标悬浮头部才出现 */
.ws-group-more {
    flex: none;
    margin-left: 4px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 5px;
    font-size: 15px;
    line-height: 1;
    border-radius: var(--radius-sm);
    opacity: 0;
    transition: opacity .15s, color .15s, background .15s;
}
.ws-head:hover .ws-group-more { opacity: 1; }
.ws-group-more:hover { color: var(--text); background: var(--bg-chat); }
.ws-group-more.open { opacity: 1; color: var(--text); }
.ws-group-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 2px);
    min-width: 150px;
    background: var(--bg-sidebar);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    padding: 4px;
    z-index: 900;
}
.ws-group-more.open .ws-group-menu { display: block; }
.ws-group-menu-item {
    padding: 7px 10px;
    font-size: 12.5px;
    color: var(--text);
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
}
.ws-group-menu-item:hover { background: var(--bg-chat); }
.ws-group-menu-item.danger { color: #dc2626; }
.ws-group-menu-item.danger:hover { background: rgba(220, 38, 38, 0.08); }

/* 置顶任务组（与「工作区」平级，置顶时显示） */
.pinned-group { margin: 0 0 2px; }
.pinned-group-title {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 10px 4px;
    font-size: 12px; font-weight: 700;
    color: var(--accent);
    letter-spacing: .02em;
}
.pinned-group-title svg { opacity: .9; }

/* 默认工作区（日期命名）：不折叠分组，直接平铺；给一条轻量信息性小标 */
.ws-default-head {
    padding: 8px 10px 2px;
    font-size: 11px; font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ws-default-subhead {
    padding: 4px 12px 2px;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
}

/* 工作区选择浮层：置顶的"什么都不选（用今天默认）"项高亮 */
.ws-picker-item.ws-picker-default {
    border: 1px dashed var(--border);
    margin-bottom: 4px;
}
.ws-picker-item.ws-picker-default:hover { background: var(--bg-sidebar-2); border-color: var(--accent); }

/* 删除工作区弹窗 */
.ws-delete-dialog { width: 480px; }
.ws-delete-hint { margin: 0 0 10px; font-size: 13px; color: var(--text); }
.ws-delete-hint #ws-delete-name { color: var(--accent); font-weight: 600; }
.ws-delete-options { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.7; }
.ws-delete-options code { background: var(--bg-sidebar-2); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.danger-text { color: #dc2626; font-weight: 600; }
.btn-primary.danger { background: #dc2626; }
.btn-primary.danger:hover { background: #b91c1c; }

/* 侧栏收起时隐藏分组内悬浮菜单与置顶/默认小标（窄轨不放这些） */
#sidebar.collapsed .ws-group-more,
#sidebar.collapsed .ws-default-head,
#sidebar.collapsed .ws-default-subhead { display: none; }

/* --- 侧栏底部：统计入口（弱化） --- */
.side-stats {
    display: flex; align-items: center; gap: 8px;
    margin: 4px 6px 8px; padding: 10px 10px 4px;
    border-top: 1px solid var(--border);
    font-size: 12.5px; color: var(--text-muted);
    cursor: pointer; border-radius: 6px;
    flex: none;
}
.side-stats:hover { background: var(--bg-sidebar-2); color: var(--text); }

/* === 任务级实时轨迹（B+C：类 WorkBuddy 任务列表动态过程）=== */
.task-item-status {
    font-size: 11px; line-height: 1;
    margin-left: 6px; padding: 2px 7px;
    border-radius: 10px; white-space: nowrap;
    max-width: 140px; overflow: hidden; text-overflow: ellipsis;
    flex: none; opacity: .95;
}
.task-item-status.st-idle { display: none; }
.task-item-status.st-think { background: rgba(91,141,239,.18); color: #8fb6ff; }
.task-item-status.st-tool  { background: rgba(217,162,63,.18);  color: #e9c878; }
.task-item-status.st-done  { background: rgba(63,178,127,.18);  color: #6fd6a3; }
.task-item-status.st-error { background: rgba(226,109,90,.20);  color: #f0a593; }
.task-item-status.st-stop  { background: rgba(150,150,150,.20); color: #c8c8c8; }
.task-item-trail-toggle {
    flex: none; margin-left: 4px;
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); font-size: 11px; line-height: 1;
    padding: 2px 3px; border-radius: 4px;
}
.task-item-trail-toggle:hover { background: var(--bg-sidebar-2); color: var(--text); }
.task-trail {
    list-style: none; margin: 0 0 4px 18px; padding: 6px 8px;
    background: var(--bg-sidebar-2, rgba(255,255,255,.03));
    border-left: 2px solid var(--border, #333);
    border-radius: 0 6px 6px 0;
}
.trail-head-bar {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 11px; color: var(--text-muted);
    margin-bottom: 4px; padding-bottom: 3px;
    border-bottom: 1px dashed rgba(255,255,255,.08);
}
.trail-head-meta { opacity: .8; }
.trail-container { max-height: 240px; overflow-y: auto; }
.trail-item { padding: 2px 0; font-size: 12px; line-height: 1.45; }
.trail-head { display: flex; align-items: baseline; gap: 5px; }
.trail-ico { flex: none; }
.trail-title { color: var(--text); }
.trail-detail {
    color: var(--text-muted); font-size: 11px;
    white-space: pre-wrap; word-break: break-all;
    padding-left: 18px; margin-top: 1px;
}
.trail-empty { font-size: 11px; color: var(--text-muted); padding: 4px 0; }

/* --- 主区顶部：面包屑 --- */
#topbar {
    display: flex; align-items: center;
    padding: 10px 16px 6px;
    flex: none;
    min-height: 34px;
}
.nav-crumbs {
    display: flex; align-items: center; gap: 6px;
    flex-wrap: nowrap; min-width: 0; font-size: 13px;
}
.nav-crumbs:empty { display: none; }
.nav-crumbs .crumb {
    color: var(--text-muted); cursor: pointer;
    white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; max-width: 34vw;
}
.nav-crumbs .crumb:hover { color: var(--accent); }
.nav-crumbs .sep { color: var(--text-muted); opacity: .45; flex: none; }
.nav-crumbs .crumb.cur {
    color: var(--text); font-weight: 600;
    cursor: default; max-width: 40vw;
}
.nav-crumbs .crumb.cur:hover { color: var(--text); }

/* 视觉隐藏（保留可访问性锚点） */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* 侧栏折叠态：分组头隐藏计数徽章（空间紧张） */
#sidebar.collapsed .ws-head .ws-count { display: none; }

/* ============================================================================
 * 工具栏浮层（provider / autonomy）统一样式（2026-10-07）
 * 与工作区选择浮层同款观感：圆角面板、内边距、选中态高亮、行间距。
 * 定位由 app.js positionToolbarMenu() 用 fixed + 视口约束处理（不再靠 .drop-up）。
 * ========================================================================== */
#provider-menu.task-menu-dropdown,
#autonomy-menu.task-menu-dropdown {
    position: fixed;            /* 由 JS 赋 top/left，禁止继承 absolute */
    min-width: 168px;
    max-width: min(280px, calc(100vw - 24px));
    max-height: min(360px, calc(100vh - 24px));
    padding: 6px;
    border-radius: 12px;
    background: var(--bg-sidebar);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    animation: modalIn .16s cubic-bezier(.16, 1, .3, 1);
}
/* 菜单项：对齐 ws-picker-item 的行高与内边距 */
#provider-menu .task-menu-item,
#autonomy-menu .task-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#provider-menu .task-menu-item:hover,
#autonomy-menu .task-menu-item:hover {
    background: rgba(127, 127, 127, .12);
    color: var(--text);
}
/* 选中项：主题色文字 + 左侧对勾 */
#provider-menu .task-menu-item.selected,
#autonomy-menu .task-menu-item.selected {
    color: var(--accent);
    font-weight: 600;
    background: rgba(127, 127, 127, .08);
}
/* 选中项的对勾只画在前（左），复用通用的 `.task-menu-item.selected::before`；
   不再加 `::after` 右钩，避免「一前一后两个打钩」。 */

/* Provider 能力徽标（Chat / 推理）—— 口径来自 config、非模型名猜测。
   名字占满剩余宽度并省略，徽标固定在右侧（对勾之前）。 */
.pm-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pm-badge {
    flex: 0 0 auto;
    font-size: 10.5px;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: .02em;
    border: 1px solid transparent;
}
.pm-badge-reason {
    color: #8b5cf6;
    background: rgba(139, 92, 246, .14);
    border-color: rgba(139, 92, 246, .32);
}
.pm-badge-chat {
    color: var(--text-secondary);
    background: rgba(127, 127, 127, .12);
    border-color: var(--border);
}

/* ============================================================================
 * 问答区宽度与对齐修正（2026-10-07）
 * 症状：宽屏下 .turn-flow 被压到 ~477px 且整体偏右（左空右挤），
 *       根因 = `.chat > .msg { align-self: center }` 让 agent-turn 收缩到内容宽，
 *       使 .turn-flow 的 max-width:720px 失效；父级只有 486px，居中还导致偏右。
 * 修法：agent-turn 撑满可用宽（受一个合理的阅读上限约束），并让「用户气泡 +
 *       助手内容」共用同一条居中的内容轨道，左右留白对称。
 * ========================================================================== */

/* 1) agent-turn 不再 shrink-to-fit：撑到内容轨道的宽度 */
.chat > .msg.agent-turn {
    align-self: stretch;                 /* 铺满 #chat 内容宽 */
    width: 100%;
    max-width: none;                     /* 由内部轨道控制上限 */
    margin-left: 0;
    margin-right: 0;
    min-width: 0;
}
/* 2) 建立统一居中轨道：两侧同宽留白，阅读宽度适中 */
.chat > .msg.agent-turn > .turn-head-row,
.chat > .msg.agent-turn > .turn-bubble {
    width: 100%;
    max-width: var(--qa-track, 820px);
    margin-left: auto;
    margin-right: auto;
    min-width: 0;
}
/* 3) 用户行同样落在这条轨道里，与助手内容左右对齐 */
.chat > .msg:not(.agent-turn) {
    align-self: stretch;
    width: 100%;
    max-width: var(--qa-track, 820px);
    margin-left: auto;
    margin-right: auto;
    min-width: 0;
}
/* 4) turn-flow 撑满其轨道（不再自己 margin:0 auto 二次收缩） */
.msg.agent-turn .turn-flow {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    min-width: 0;
}
/* 5) 助手内容不再用 44px 不对称左缩进（改由头部图标行对齐） */
.msg.agent-turn .turn-bubble { padding-left: 0; }

/* 5b) 计划块不再自带上限：随内容轨道拉齐（原来 max-width:720px 在 820 轨道里
   留下右侧 100px 空档 → 视觉上"右缺一块"） */
.qa-plan { max-width: none; }

/* 5c) 状态行（"已完成 2 个工具调用"）原本是 shrink-to-fit + 自身左缩进，
   既短于轨道又不居中；改为撑满内容轨道 —— 但在有 24px 图标缩进时保留其对齐 */
.qa-status-line { width: 100%; max-width: none; }

/* 5d) 助手侧带图标的行（.qa-line:has(> .qa-ico)）有 31px 图标缩进，
   其右侧留白应减去这段缩进，避免"左 31 右 0"的不对称观感 */
.turn-flow > .qa-line:has(> .qa-ico) { margin-right: 0; }
/* 6) 用户行：整行落在内容轨道内，气泡+头像作为一组右对齐；
   头像右侧不再贴到视口边（原来头像落在 1065 宽的行尾，右留白仅 30px，
   与助手内容的 153px 对不上 → 视觉"用户侧比助手侧更宽"） */
.chat > .msg.qa-user-line,
.qa-user-line { width: 100%; max-width: var(--qa-track, 820px); margin-left: auto; margin-right: auto; }
.qa-bubble-user { max-width: min(72%, 560px); }

/* 7) 窄屏兜底：轨道随窗口收窄，保留安全边距 */
@media (max-width: 900px) {
    :root { --qa-track: 100%; }
}

/* ============================================================
   P1 — 交互模式切换（Ask / Plan / Craft）与代码面板
   ============================================================ */

/* 模式分段控件：贴在工具栏左侧，紧凑、圆角药丸 */
/* 代码面板：右侧抽屉 */
.code-panel {
    position: fixed;
    top: var(--topbar-h);
    right: 0;
    bottom: 0;
    width: min(560px, 46vw);
    display: flex;
    flex-direction: column;
    background: var(--bg-sidebar);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    z-index: 60;
}
.code-panel.hidden { display: none; }
.code-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px 8px 14px;
    border-bottom: 1px solid var(--border);
    min-height: 42px;
}
.code-panel-title {
    font-size: 13px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.code-panel-actions { display: inline-flex; gap: 2px; flex: 0 0 auto; }
.code-panel-body {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}
.code-tree {
    flex: 0 0 42%;
    max-width: 260px;
    overflow: auto;
    padding: 6px 4px;
    border-right: 1px solid var(--border);
    font-size: 12.5px;
}
.code-tree-empty { color: var(--text-muted); padding: 10px; font-size: 12px; }
.code-tree-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.code-tree-row:hover { background: var(--bg-sidebar-2); color: var(--text); }
.code-tree-row.is-dir { color: var(--text); }
.code-tree-row.active { background: var(--accent-light); color: var(--accent-hover); }
.code-tree-caret { width: 12px; flex: 0 0 12px; color: var(--text-muted); font-size: 10px; }
.code-tree-name { overflow: hidden; text-overflow: ellipsis; }
.code-tree-children.hidden { display: none; }
.code-viewer-wrap {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.code-viewer-path {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: rtl;           /* 超长路径优先显示文件名一侧 */
    text-align: left;
}
.code-viewer {
    flex: 1 1 auto;
    margin: 0;
    padding: 10px 12px;
    overflow: auto;
    display: flex;
    align-items: flex-start;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.55;
    color: var(--text);
    background: var(--bg-chat);
    white-space: pre;
    tab-size: 4;
}
.code-viewer-empty { color: var(--text-muted); }
.code-gutter {
    flex: 0 0 auto;
    text-align: right;
    color: var(--text-muted);
    user-select: none;
    padding-right: 12px;
    border-right: 1px solid var(--border);
    margin-right: 10px;
}
.code-body { flex: 1 1 auto; white-space: pre; }

@media (max-width: 720px) {
    .code-panel { width: 100vw; }
}

/* === ④ 前端项目视图 (Phase 2 收尾) === */
.project-view {
    position: fixed;
    top: var(--topbar-h);
    right: 0;
    bottom: 0;
    width: min(520px, 44vw);
    display: flex;
    flex-direction: column;
    background: var(--bg-sidebar);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    z-index: 60;
}
.project-view.hidden { display: none; }
.project-view-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px 8px 14px;
    border-bottom: 1px solid var(--border);
    min-height: 42px;
}
.project-view-title { font-size: 13px; color: var(--text); font-weight: 600; white-space: nowrap; }
.project-view-stats { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-view-actions { display: inline-flex; gap: 2px; flex: 0 0 auto; }
.project-view-body { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.pv-section { display: flex; flex-direction: column; min-height: 0; }
.pv-tree-section { flex: 1 1 auto; border-bottom: 1px solid var(--border); min-height: 0; }
.pv-build-section { flex: 0 0 auto; max-height: 34%; border-bottom: 1px solid var(--border); }
.pv-section-title {
    font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em;
    padding: 6px 12px 4px; flex: 0 0 auto;
}
.pv-count { color: var(--accent); font-weight: 600; }
.pv-tree { flex: 1 1 auto; overflow: auto; padding: 4px 4px 8px; font-size: 12.5px; }
.pv-tree-empty { color: var(--text-muted); padding: 10px; font-size: 12px; }
.pv-tree-node { }
.pv-tree-row {
    display: flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 6px;
    cursor: pointer; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pv-tree-row:hover { background: var(--bg-sidebar-2); color: var(--text); }
.pv-tree-row.is-dir { color: var(--text); font-weight: 500; }
.pv-tree-caret { width: 12px; flex: 0 0 12px; color: var(--text-muted); font-size: 10px; }
.pv-tree-name { overflow: hidden; text-overflow: ellipsis; }
.pv-tree-children.hidden { display: none; }
.pv-status-badge {
    margin-left: auto; flex: 0 0 auto; width: 15px; height: 15px; border-radius: 50%;
    font-size: 10px; line-height: 15px; text-align: center; color: #fff;
}
.pv-status-badge.ok { background: #2fa36b; }
.pv-status-badge.fail { background: #d9534f; }
.pv-status-badge.pending { background: var(--text-muted); animation: pvspin 1.1s linear infinite; }
@keyframes pvspin { to { transform: rotate(360deg); } }
.pv-build { flex: 1 1 auto; overflow: auto; padding: 2px 8px 8px; font-size: 12px; }
.pv-build-empty { color: var(--text-muted); padding: 8px 4px; font-size: 12px; }
.pv-build-item {
    display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 6px; margin-bottom: 3px;
    background: var(--bg-sidebar-2); border-left: 3px solid var(--text-muted);
}
.pv-build-item.ok { border-left-color: #2fa36b; }
.pv-build-item.fail { border-left-color: #d9534f; }
.pv-build-item.running { border-left-color: var(--accent); }
.pv-build-name { flex: 0 0 auto; font-weight: 600; color: var(--text); }
.pv-build-cmd {
    flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary);
}
.pv-build-item .pv-status-badge { margin-left: 0; }
.pv-preview-wrap {
    flex: 0 0 38%; display: flex; flex-direction: column; min-height: 0; background: var(--bg-chat);
}
.pv-preview-path {
    font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
    padding: 6px 10px; border-bottom: 1px solid var(--border);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: rtl; text-align: left;
}
.pv-preview {
    flex: 1 1 auto; margin: 0; padding: 10px 12px; overflow: auto;
    display: flex; align-items: flex-start; font-family: var(--font-mono); font-size: 12px;
    line-height: 1.55; color: var(--text); white-space: pre; tab-size: 4;
}
.pv-preview-empty { color: var(--text-muted); }

/* === Phase3-C 项目视图可交互编辑 === */
.pv-edit-btn {
    float: right;
    margin-left: 8px;
    padding: 1px 8px;
    font-size: 11px;
    font-family: var(--font-sans, inherit);
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
}
.pv-edit-btn:hover { color: var(--text); border-color: var(--text-muted); }
.pv-editor { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.pv-editor-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; border-bottom: 1px solid var(--border);
}
.pv-editor-btn {
    padding: 2px 12px; font-size: 12px; cursor: pointer;
    color: var(--text); background: transparent;
    border: 1px solid var(--border); border-radius: 6px;
}
.pv-editor-btn.primary { color: #fff; background: var(--accent, #4a7dff); border-color: transparent; }
.pv-editor-btn:disabled { opacity: .55; cursor: default; }
.pv-editor-tip { font-size: 11px; color: var(--text-muted); }
.pv-editor-ta {
    flex: 1 1 auto; min-height: 0; resize: none;
    padding: 10px 12px; border: none; outline: none;
    font-family: var(--font-mono); font-size: 12px; line-height: 1.55;
    color: var(--text); background: transparent; tab-size: 4;
}
@media (max-width: 720px) {
    .project-view { width: 100vw; }
}

/* === ② 前端事件可视化 (2026-10-15) === */
/* 事件时间线轨：run-flow 直接子节点自动生成竖线 + 节点，无需逐函数注入 */
.turn-flow.timeline { padding-left: 2px; }
.turn-flow.timeline > * {
    position: relative;
    margin-left: 8px;
    padding-left: 20px;
    border-left: 2px solid var(--rail, rgba(125,125,135,.30));
}
.turn-flow.timeline > *::before {
    content: '';
    position: absolute;
    left: -7px; top: 6px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--accent, #5b8def);
    box-shadow: 0 0 0 3px var(--bg, #fff);
}
/* 事件块用自身图标作为节点，隐藏生成圆点 */
.turn-flow.timeline > .qa-evt > .qa-ico { left: -7px; top: 4px; }
.turn-flow.timeline > .qa-evt::before { display: none; }
/* 审批节点标红 */
.turn-flow.timeline > .approval-banner.kind-approval::before { background: #e0533d; }

/* 事件时间戳 */
.qa-ts {
    font-size: 11px;
    color: var(--text-muted, #9aa0aa);
    margin-left: 8px;
    opacity: .7;
    font-variant-numeric: tabular-nums;
}

/* 用量比例条 */
.usage-bar {
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 6px;
    background: rgba(125,125,135,.20);
}
.usage-bar .seg-prompt { background: #5b8def; }
.usage-bar .seg-completion { background: #2ecc71; }

/* 工具卡状态徽标 running→done✓ / failed✗ */
.qa-status-badge {
    font-size: 11px;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 8px;
    font-weight: 600;
}
.qa-status-badge.ok { color: #1e8e4e; background: rgba(46,204,113,.16); }
.qa-status-badge.fail { color: #d23b2a; background: rgba(224,59,42,.16); }

/* 审批分类图标 + 标签配色（按 data.category） */
.approval-icon.cat-shell   { background: rgba(91,141,239,.16); color: #5b8def; }
.approval-icon.cat-file    { background: rgba(46,204,113,.16); color: #2ecc71; }
.approval-icon.cat-git     { background: rgba(240,165,0,.16);  color: #f0a500; }
.approval-icon.cat-install { background: rgba(155,109,255,.16); color: #9b6dff; }
.approval-icon.cat-script  { background: rgba(224,83,61,.16);  color: #e0533d; }
.approval-icon.cat-tool    { background: rgba(138,143,152,.16); color: #8a8f98; }
.approval-cat {
    font-size: 11px;
    padding: 0 6px;
    border-radius: 8px;
    margin-left: 2px;
}
.approval-cat.cat-shell   { color: #5b8def; background: rgba(91,141,239,.14); }
.approval-cat.cat-file    { color: #2ecc71; background: rgba(46,204,113,.14); }
.approval-cat.cat-git     { color: #f0a500; background: rgba(240,165,0,.14); }
.approval-cat.cat-install { color: #9b6dff; background: rgba(155,109,255,.14); }
.approval-cat.cat-script  { color: #e0533d; background: rgba(224,83,61,.14); }
.approval-cat.cat-tool    { color: #8a8f98; background: rgba(138,143,152,.14); }