/* 原生 pi Agent 页样式（piagent2 + 共用对话面板）。 */

/* ═══════════════════════════════════════════════════════════════════════
 * 页面容器：撑满视口 + 只在内容区内部滚动
 *
 * 框架给每个页面渲染 `.page-view.page-view-<pageId>`，但只给 agent / settings /
 * app-center / knowledge 写了专用覆盖。piagent 吃的是默认：
 *     .page-view { position:absolute; inset:0; overflow:auto; padding:42px 7vw }
 * 那是"整页滚动 + 左右 7vw 留白"—— 所以在 .piagent-page 上写 height:100% 是无效的，
 * 父层根本不是可分配高度的 flex 容器。
 *
 * 这里照 .page-view-agent 的做法覆盖：标题栏固定，内容区 flex:1 撑满，滚动收进内部。
 * ═══════════════════════════════════════════════════════════════════════ */

.page-view.page-view-piagent2 {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 28px clamp(18px, 2vw, 32px);
}

.page-view.page-view-piagent2 .page-view-body {
  min-height: 0;
  flex: 1;
  display: flex;
  /* ⚠️ 必须显式 column：display:flex 默认是 row，那样子元素的 flex:1 只会横向拉伸，
     纵向仍是内容高度 —— 页面撑不满，下面还会露出同级的画布/项目中心。 */
  flex-direction: column;
  overflow: hidden;
  padding: 12px 0 0;
}

/* 独立于 `agent 页` 的样式：这里只用项目全局 CSS 变量（--ink / --line / --cyan …）， 不引用任何 `.agent-*` 类，所以删改 agent 页样式不会影响这三个页面。 */

.piagent-page {
  display: flex;
  flex-direction: column;
  /* 与 agent 页的 .agent-main-grid 同一做法：height:100% + min-height:0，
     再叠加 flex:1（父层 .page-view-body 已是 column 方向的 flex 容器）。
     ⚠️ 不能写 min-height: 60vh 之类的值 —— 那会把页面撑高、退化成整页滚动。 */
  height: 100%;
  flex: 1 1 auto;
  min-height: 0;
  gap: 10px;
  padding: 4px 2px;
  overflow: hidden;
}

/* ---------- 对话面板 ---------- */

.pi-chat {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;   /* 只有 .pi-chat-log 滚 */
  border: 1px solid var(--line, #dbe6e5);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.pi-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line, #dbe6e5);
  background: #f7faf9;
}

.pi-chat-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.pi-chat-title strong { font-size: 12px; color: var(--ink, #16302f); }
.pi-chat-meta { font-size: 10px; color: var(--muted, #8a9a9a); }

.pi-chat-status { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--muted, #8a9a9a); }
.pi-chat-dot { width: 7px; height: 7px; border-radius: 50%; background: #c9d4d3; }
.pi-chat-dot.is-on { background: #3fa46a; }
.pi-chat-pending { color: var(--cyan, #2b969b); }
/* 工具执行提示（生图这类要几十秒，必须让用户看到进度） */
.pi-chat-tool {
  padding: 0 6px;
  border-radius: 8px;
  background: #fdf6ec;
  color: #a5673a;
  font-size: 10px;
}

/* 方案三：角色选择器 + 消息上的角色标签（方案一/二 不渲染这些元素） */
.pi-chat-role-picker { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--muted, #8a9a9a); }
.pi-chat-role-picker select {
  padding: 2px 5px;
  border: 1px solid var(--line, #dbe6e5);
  border-radius: 4px;
  background: #fff;
  color: var(--ink, #16302f);
  font-family: inherit;
  font-size: 10px;
}
.pi-chat-agent-role {
  margin-left: 5px;
  padding: 0 4px;
  border-radius: 3px;
  background: #eaf4f3;
  color: #2b7f83;
  font-size: 9px;
}

.pi-chat-log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pi-chat-empty { margin: 0; color: var(--muted, #8a9a9a); font-size: 11px; }

.pi-chat-msg { display: flex; flex-direction: column; gap: 4px; max-width: 100%; }
.pi-chat-msg.is-user { align-items: flex-end; }
.pi-chat-role { font-size: 9px; color: var(--muted, #9aa8ad); letter-spacing: .04em; }

.pi-chat-body {
  max-width: 92%;
  padding: 8px 11px;
  border-radius: 8px;
  background: #f4f8f7;
  color: var(--ink, #16302f);
  font-size: 12px;
  line-height: 1.7;
  word-break: break-word;
}

.pi-chat-msg.is-user .pi-chat-body { background: #e8f1fb; }
.pi-chat-msg.is-pending .pi-chat-body { opacity: .92; }
.pi-chat-text { white-space: pre-wrap; }
.pi-chat-cursor { animation: pi-chat-blink 1s steps(2, start) infinite; }
@keyframes pi-chat-blink { to { visibility: hidden; } }

.pi-chat-image-wrap { display: block; margin: 6px 0; }
.pi-chat-image {
  max-width: 100%;
  max-height: 320px;
  border-radius: 6px;
  border: 1px solid var(--line, #dbe6e5);
  cursor: zoom-in;
  display: block;
}

.pi-chat-error {
  margin: 0 12px 8px;
  padding: 6px 9px;
  border-radius: 6px;
  background: #fdf1f0;
  color: #b4463d;
  font-size: 11px;
}

.pi-chat-input {
  border-top: 1px solid var(--line, #dbe6e5);
  padding: 8px 12px 10px;
  background: #fbfdfc;
}
.pi-chat-input textarea {
  width: 100%;
  resize: vertical;
  min-height: 44px;
  max-height: 180px;
  padding: 7px 9px;
  border: 1px solid var(--line, #dbe6e5);
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  color: var(--ink, #16302f);
  outline: none;
}
.pi-chat-input textarea:focus { border-color: var(--cyan, #2b969b); }
/* 2026-09-27 用户要求：输入框下方**不再放解释文字**；模型 / 思考 / 插话靠左集中，发送靠右。 */
.pi-chat-actions { display: flex; align-items: center; justify-content: flex-start; gap: 6px; margin-top: 6px; }
/* 2026-10-04：输入区左下角新增「权限档位」选择器 —— spacer 把它与右侧的模型/思考拉开（左权限、右模型） */
.pi-chat-spacer { flex: 1 1 auto; }
.pi-chat-actions .pi-pick-permission { color: #1f7a4d; border-color: #cfe6d8; background: #f4fbf7; }
/* 2026-10-04 会话内审批条：越界写入时后端挂住等用户决定，这里弹「允许 / 拒绝」 */
.pi-approval { display: flex; align-items: center; gap: 10px; margin: 8px 0; padding: 8px 10px; border: 1px solid #f0c98a; border-radius: 8px; background: #fffaf1; }
.pi-approval-main { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.pi-approval-main strong { font-size: 12px; color: #8a5a10; }
.pi-approval-hint { font-size: 11px; color: var(--muted, #7b8a8a); }
.pi-approval-main code { overflow: hidden; font-size: 11px; color: #1c2b2b; text-overflow: ellipsis; white-space: nowrap; }
.pi-approval-countdown { font-size: 11px; color: #8a5a10; }
.pi-approval-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 6px; }
/* 2026-10-04 方案 A：Agent 编辑抽屉里的「能调用的工具」—— 按分组折叠（原生 details） */
.pi-drawer-tool-group { margin: 4px 0; border-top: 1px solid rgba(0, 0, 0, .07); }
.pi-drawer-tool-group > summary { display: flex; align-items: center; gap: 6px; padding: 5px 0; cursor: pointer; font-size: 12px; color: #1c2b2b; }
/* summary 用了 flex，浏览器自带的三角会被隐藏 —— 自己画一个，明确"这行能点" */
.pi-drawer-tool-group > summary::before { content: "▸"; font-size: 10px; color: #7b8a8a; }
.pi-drawer-tool-group[open] > summary::before { content: "▾"; color: #1f7a4d; }
.pi-drawer-tool-group > summary > em { margin-left: auto; font-size: 11px; font-style: normal; color: #1f7a4d; }
.pi-drawer-tool-group[open] > summary { font-weight: 600; }
.pi-drawer-tool-rows { padding: 2px 0 6px 16px; }
.pi-drawer-tool-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: 12px; color: #1c2b2b; cursor: pointer; }
.pi-drawer-tool-row input { flex: 0 0 auto; margin: 0; }
.pi-drawer-tool-row code { font-size: 11px; color: #7b8a8a; }
.pi-drawer-tool-row em { margin-left: auto; font-size: 11px; font-style: normal; color: #b06a1a; }
.pi-chat-hint { font-size: 10px; color: var(--muted, #9aa8ad); }

/* `@文件` 附件标签（2026-09-28）：输入框上方一行，可点 × 移除 */
.pi-attach-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 5px; }
.pi-attach-chip {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  padding: 2px 6px; border: 1px solid #cfe2e2; border-radius: 999px;
  background: #eef7f5; color: #2b6f73; font-size: 10px; line-height: 1.6;
}
.pi-attach-chip > b { color: var(--cyan, #2b969b); font-weight: 700; }
.pi-attach-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-attach-chip > button { border: 0; background: none; color: #7c9a9a; font-size: 11px; line-height: 1; cursor: pointer; padding: 0 1px; }
.pi-attach-chip > button:hover { color: #b4463d; }

/* 拖拽悬停：输入区高亮提示"松手即添加"（2026-09-28） */
.pi-chat-input.is-dragging { border-color: var(--cyan, #2b969b); background: #f2fbfa; }
/* 发送按钮：形态与字号对齐状态条上的「已启动」胶囊 */
.pi-chat-actions .pi-send-button { margin-left: auto; padding: 3px 12px; border-radius: 999px; font-size: 10px; font-weight: 600; line-height: 1.7; }

/* 流式中发消息（P0 #3）：待投递标记 + 「插话 / 排队」开关 */
.pi-chat-queued { color: var(--cyan, #2b969b); font-size: 9px; }
.pi-chat-mode { padding: 3px 9px; border: 1px solid var(--line, #dbe6e5); border-radius: 6px; background: #fff; color: var(--muted, #9aa8ad); font-size: 10px; cursor: pointer; }
.pi-chat-mode.is-active { border-color: #9fd0cf; background: #eaf4f3; color: #2b7f83; }

/* 「从这里分叉」（P0 #4）：只出现在**已落盘**的 user 消息下 */
/* 分叉入口（2026-09-27 定稿）：只用符号、不写文字，放在**助手回复下方** */
.pi-chat-fork { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 20px; margin-top: 4px; padding: 0; border: 1px solid var(--line, #dbe6e5); border-radius: 5px; background: #fff; color: var(--muted, #9aa8ad); cursor: pointer; }
.pi-chat-fork svg { width: 13px; height: 13px; }
.pi-chat-fork:hover { border-color: #9fd0cf; background: #eaf4f3; color: #2b7f83; }

/* 输入区下方的「模型」「思考」：改用原生 select（2026-09-27）——
   两个框**等宽**（用户要求"用长的那个"），点一下必然能选（自定义弹层会被祖先 overflow 裁掉）。 */
.pi-pick-select {
  width: 140px;
  padding: 3px 6px;
  border: 1px solid var(--line, #dbe6e5);
  border-radius: 6px;
  background: #fff;
  color: var(--ink, #16302f);
  font-family: inherit;
  font-size: 10px;
  cursor: pointer;
}
.pi-pick-select:hover { border-color: #cfe3e1; }
.pi-pick { position: relative; display: inline-flex; }
.pi-pick-button { padding: 2px 8px; border: 1px solid var(--line, #dbe6e5); border-radius: 6px; background: #fff; color: var(--ink, #16302f); font-size: 10px; cursor: pointer; }
.pi-pick-button:hover { border-color: #cfe3e1; background: #f6fbfa; }
.pi-pick-panel { position: absolute; bottom: calc(100% + 6px); left: 0; min-width: 190px; max-height: 260px; overflow: auto; padding: 4px; border: 1px solid var(--line, #dbe6e5); border-radius: 8px; background: #fff; box-shadow: 0 8px 24px rgba(20, 60, 58, .12); display: none; z-index: 6; }
.pi-pick-panel.is-open { display: block; }
.pi-pick-row { display: block; width: 100%; padding: 5px 8px; border: 0; border-radius: 6px; background: none; color: var(--ink, #16302f); font: inherit; font-size: 10px; text-align: left; cursor: pointer; white-space: nowrap; }
.pi-pick-row:hover { background: #f2f8f7; }
.pi-pick-row.is-active { background: #eaf4f3; color: #1f6f73; font-weight: 600; }
.pi-pick-empty { display: block; padding: 5px 8px; color: var(--muted, #8a9a9a); font-size: 10px; }

/* ---------- 图片放大 ---------- */
.pi-chat-lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10, 20, 20, .78);
  cursor: zoom-out;
}
.pi-chat-lightbox.is-open { display: flex; }
.pi-chat-lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 6px; }

/* ---------- 顶部实时运行状态条（三页共用；数据来自 /meta） ---------- */

.piagent-status {
  flex: 0 0 auto;   /* 状态条固定，不参与高度分配 */
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--line, #dbe6e5);
  border-left: 3px solid var(--cyan, #2b969b);
  border-radius: 6px;
  background: #f8fbfa;
}

.piagent-status-note { margin: 0; color: var(--muted, #647777); font-size: 11px; line-height: 1.6; }
.piagent-status-note code { padding: 1px 4px; border-radius: 3px; background: #eef4f3; font-family: Consolas, monospace; font-size: 10px; }
.piagent-status-note b { color: var(--ink, #16302f); }

.piagent-status-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* 新版状态条（2026-09-27）：左侧普通信息 chips，右侧两个压缩按钮 */
.piagent-status-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: space-between; }
.pi-status-chips-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pi-status-actions { display: flex; gap: 6px; align-items: center; }
.pi-status-button { padding: 3px 10px; border: 1px solid var(--line, #dbe6e5); border-radius: 6px; background: #fff; color: var(--ink, #16302f); font-size: 10px; cursor: pointer; }
.pi-status-button.is-primary { border-color: #9fd0cf; background: #eaf4f3; color: #1f6f73; font-weight: 600; }
.pi-status-button[disabled] { opacity: .45; cursor: not-allowed; }
.pi-status-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 2px 7px;
  border: 1px solid var(--line, #dbe6e5);
  border-radius: 10px;
  background: #fff;
  font-size: 10px;
}
.pi-status-chip b { color: var(--muted, #8a9a9a); font-weight: 500; }
.pi-status-chip i { color: var(--ink, #16302f); font-style: normal; }
.pi-status-chip.is-ok i { color: #2f7d55; }
.pi-status-chip.is-warn { border-color: #e6c9a8; background: #fdf6ec; }
.pi-status-chip.is-warn i { color: #a5673a; }
.pi-status-chip.is-on i { color: #3fa46a; }
.pi-status-title { font-size: 10px; color: var(--muted, #8a9a9a); }
.pi-status-error { font-size: 10px; color: #b4463d; }

/* ---------- 对话区：主对话 + 可选侧面板 ---------- */

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

.pi-chat-panel {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid var(--line, #dbe6e5);
  background: #fbfdfc;
}
.pi-panel-title {
  margin: 0;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line, #dbe6e5);
  background: #f4f8f7;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink, #16302f);
  letter-spacing: .03em;
}
.pi-panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 10px; }
.pi-panel-hint { margin: 0; color: var(--muted, #8a9a9a); font-size: 10px; line-height: 1.7; }
.pi-panel-hint code { padding: 1px 3px; border-radius: 3px; background: #eef4f3; font-family: Consolas, monospace; font-size: 10px; }

/* ---------- 右栏：模型方案 + Agent 列表（2026-09-27，按定稿 demo 落地）----------
 * 全部用自己的类名（.pi-*），不引用原 AI Agent 页 / pi-web 的任何类名。
 */
.pi-rail-section { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
/* 2026-10-05：右栏「生图工作流」选择器（用户级默认通道；对话里明确指定时以对话为准）。 */
.pi-rail-select { width: 100%; padding: 5px 6px; border: 1px solid var(--line, #dbe6e5); border-radius: 7px; background: #f7fbfb; color: #26424a; font-size: 12px; font-weight: 300; }
.pi-rail-select:disabled { opacity: .6; }
.pi-rail-title { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--muted, #8a9a9a); font-size: 12px; font-weight: 600; }
.pi-rail-title .pi-side-mini { margin-left: auto; }
.pi-profile-group { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--line, #dbe6e5); border-radius: 8px; background: #eef5f4; }
.pi-profile-button { flex: 1; padding: 5px 6px; border: 0; border-radius: 6px; background: transparent; color: #52666c; font-size: 12px; font-weight: 600; cursor: pointer; }
.pi-profile-button.is-active { background: #fff; color: #1f6f73; font-weight: 600; box-shadow: 0 1px 2px rgba(20, 60, 58, .08); }
.pi-agent-row { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; padding: 6px 7px; background: #f7fbfb; border: 1px solid var(--line, #dbe6e5); border-radius: 7px; }
.pi-agent-row:hover { border-color: #a9cdce; background: #eef8f8; }
.pi-agent-row.is-current { background: #eef8f5; border-color: #8fc7b4; box-shadow: inset 3px 0 0 #2f8f6b; }

.pi-agent-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pi-agent-head { display: flex; align-items: center; gap: 7px; min-width: 0; }
/* 2026-09-28 用户要求：右栏「标题 / 方案按钮 / Agent 名」统一 12px **灰色粗体**（次要文字 10px）。 */
.pi-agent-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--muted, #647777); }
.pi-agent-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; }
/* 动作按钮：统一 27×26、同一行、同一间距（用户要求"大小位置统一整齐"） */
.pi-agent-action { width: 27px; height: 26px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 1px solid #cfe2e2; border-radius: 5px; background: #fff; color: #276b71; font-size: 10px; cursor: pointer; }
.pi-agent-action:hover { color: #124d53; border-color: #9ecaca; }
.pi-agent-action.is-wide { width: auto; min-width: 54px; padding: 0 8px; font-weight: 800; }
.pi-agent-action.is-current { width: auto; min-width: 42px; padding: 0 6px; border-color: #b9dfcf; background: #dcf1e7; color: #236a50; font-weight: 900; }
.pi-agent-action[disabled] { opacity: .45; cursor: not-allowed; }
.pi-agent-role { color: var(--muted, #8a9a9a); font-size: 10px; font-weight: 400; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-agent-summary { display: flex; gap: 3px; min-width: 0; overflow: hidden; }
.pi-agent-summary span { min-height: 18px; display: inline-flex; align-items: center; gap: 3px; padding: 0 5px; border: 1px solid #d8e6e6; border-radius: 5px; background: #fff; color: #44686f; font-size: 10px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pi-agent-summary span:first-child { flex: 1 1 auto; min-width: 0; }
/* 卡片上的「恢复默认」（2026-09-28）：把本次会话切回该 Agent 配置的默认模型。
   与同行的摘要芯片同高同底色，但用 button 语义（可点、有 hover）。 */
.pi-agent-summary .pi-agent-recover { min-height: 18px; display: inline-flex; align-items: center; padding: 0 5px; border: 1px solid #d8e6e6; border-radius: 5px; background: #fff; color: #276b71; font-size: 10px; font-weight: 400; white-space: nowrap; cursor: pointer; }
.pi-agent-summary .pi-agent-recover:hover { color: #124d53; border-color: #9ecaca; background: #f2fafa; }
/* 有无「会话级临时切换」两种态（计划 2.3）：有则醒目（暖色），没有则淡色。 */
.pi-agent-summary .pi-agent-recover.is-idle { color: var(--muted, #8a9a9a); border-color: #e6efef; background: #fbfdfd; }
.pi-agent-summary .pi-agent-recover.is-idle:hover { color: #124d53; border-color: #9ecaca; background: #f2fafa; }
.pi-agent-summary .pi-agent-recover.is-armed { color: #a8561f; border-color: #e6c9a8; background: #fff7ef; font-weight: 600; }
.pi-agent-summary .pi-agent-recover.is-armed:hover { color: #7f3f13; border-color: #d9a86f; background: #fdeedd; }
.pi-agent-think { margin-left: 2px; padding: 0 2px; border: 1px solid #d8e6e6; border-radius: 4px; background: #fff; font: inherit; font-size: 10px; }
.pi-head-actions { display: flex; align-items: center; gap: 6px; }
.pi-panel-error { margin: 0; color: #b4463d; font-size: 10px; }

/* 方案一的原始事件流 */
.pi-event-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.pi-event-list li { display: flex; align-items: baseline; gap: 6px; font-size: 10px; line-height: 1.5; }
.pi-event-list time { flex: 0 0 auto; color: #a8b4b4; font-family: Consolas, monospace; }
.pi-event-list code {
  flex: 1 1 auto;
  color: #2b6f73;
  font-family: Consolas, monospace;
  word-break: break-all;
}
.pi-event-role { flex: 0 0 auto; padding: 0 4px; border-radius: 3px; background: #eaf4f3; color: #2b7f83; font-size: 9px; }

/* 方案二的 SDK 键值表 */
.pi-kv { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.pi-kv th, .pi-kv td { padding: 3px 4px; font-size: 10px; text-align: left; vertical-align: top; }
.pi-kv th { width: 74px; color: var(--muted, #8a9a9a); font-weight: 500; }
.pi-kv td { color: var(--ink, #16302f); font-family: Consolas, monospace; word-break: break-all; }

/* 上下文占用 / 压缩（P0 #2）：明细 + 「压缩上下文」「中止压缩」两个动作 */
.pi-context { margin: 8px 0 6px; padding: 7px 8px; border: 1px solid #dfe9e7; border-radius: 6px; background: #f8fcfb; }
.pi-context.is-busy { border-color: #e6c9a8; background: #fdf6ec; }
.pi-context-title { margin: 0 0 5px; font-size: 10px; font-weight: 600; color: var(--muted, #8a9a9a); }
.pi-context .pi-kv { margin-bottom: 0; }
.pi-context-actions { display: flex; gap: 6px; margin-top: 6px; }
.pi-context-actions .pi-side-mini[disabled] { opacity: .45; cursor: not-allowed; }

/* 契约自检（P0 #1）：把"依赖的 pi 符号 / 事件形状有没有变"直接摆进面板 */
.pi-contract { margin: 8px 0 6px; padding: 7px 8px; border: 1px solid #dfe9e7; border-radius: 6px; background: #f7fbfa; }
.pi-contract.is-warn { border-color: #e6c9a8; background: #fdf6ec; }
.pi-contract-title { margin: 0 0 5px; font-size: 10px; font-weight: 600; color: var(--muted, #8a9a9a); }
.pi-contract .pi-kv { margin-bottom: 0; }
.pi-contract-issues { margin: 5px 0 0; padding-left: 15px; color: #a5673a; font-size: 10px; line-height: 1.6; }

/* ---------- 方案三：多角色分栏 ---------- */

.pi-orch { display: grid; grid-template-columns: 170px 1fr; gap: 8px; flex: 1 1 auto; min-height: 0; }

.pi-role-rail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--line, #dbe6e5);
  border-radius: 8px;
  background: #fbfdfc;
  overflow-y: auto;
}
.pi-role-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--ink, #16302f);
  font-family: inherit;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}
.pi-role-item:hover { background: #f0f6f5; }
.pi-role-item.is-active { border-color: var(--cyan, #2b969b); background: #eaf4f3; font-weight: 600; }
.pi-role-dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: #ccd6d5; }
.pi-role-dot.is-on { background: #3fa46a; }
.pi-role-name { flex: 1 1 auto; }
.pi-role-count {
  flex: 0 0 auto;
  min-width: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #e6eeed;
  color: var(--muted, #647777);
  font-size: 9px;
  text-align: center;
}

/* ---------- 手机端 ---------- */
/* ---------- 系统提示词：分段展示 + AGENTS.md 编辑 ---------- */

.pi-side-seg { border: 1px solid var(--line, #dbe6e5); border-radius: 5px; background: #fff; }
.pi-side-seg > summary {
  padding: 4px 7px;
  font-size: 10px;
  color: var(--ink, #16302f);
  cursor: pointer;
  list-style: none;
}
.pi-side-seg > summary::-webkit-details-marker { display: none; }
.pi-side-seg > summary::before { content: "▸ "; color: var(--muted, #9aa8ad); }
.pi-side-seg[open] > summary::before { content: "▾ "; }
.pi-side-seg .pi-side-prompt { border-radius: 0 0 5px 5px; max-height: 220px; }

.pi-side-editor {
  width: 100%;
  min-height: 160px;
  padding: 6px;
  border: 1px solid var(--line, #dbe6e5);
  border-radius: 5px;
  background: #fff;
  color: var(--ink, #16302f);
  font-family: Consolas, monospace;
  font-size: 10px;
  line-height: 1.5;
  resize: vertical;
}
.pi-side-row { display: flex; gap: 6px; }
.pi-side-path {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted, #9aa8ad);
  font-family: Consolas, monospace;
  font-size: 9px;
}

@media (max-width: 900px) {
  /* 侧面板与角色栏在窄屏改为纵向堆叠 */
  .pi-chat-area { flex-direction: column; }
  .pi-chat-panel { flex: 0 0 auto; max-height: 220px; border-left: none; border-top: 1px solid var(--line, #dbe6e5); }
  .pi-orch { grid-template-columns: 1fr; }
  .pi-role-rail { flex-direction: row; flex-wrap: wrap; }
}

/* ---------- 方案二：左侧栏（项目 / 任务 / 模型 / 系统提示词） ---------- */

.pi-workspace {
  display: grid;
  /* 三栏（2026-09-27 定稿）：左栏 332 / 对话自适应 / 右栏 332 —— 左右等宽 */
  grid-template-columns: 332px minmax(0, 1fr) 332px;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;   /* 三列各自滚，整体不滚 */
  align-items: stretch;
}
/* grid 轨道也禁止被内容撑高 */
.pi-workspace > * { min-height: 0; }
/* 打开「文档」列时多一格（列宽由 --pi-doc-width 决定，拖拽把手改的就是它） */
.pi-workspace.has-doc { grid-template-columns: 332px minmax(0, 1fr) var(--pi-doc-width, 380px) 332px; }
/* ⚠️ 2026-10-06（用户要求"为了有更大的显示区，右侧 agent 列做成可以向右边隐藏"）：
   收起右栏 = 把 grid 第三列压成 0，宽度全给对话区。`!important` 是为了盖过 `has-doc`
   等其它列数声明（它们特异性更高）。 */
.pi-workspace[data-pi-rail-hidden] {
  grid-template-columns: 332px minmax(0, 1fr) 0 !important;
}
.pi-workspace[data-pi-rail-hidden] > .pi-rail { display: none; }

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

/* ---------- 右侧「文档」列（对话区与右栏之间，2026-09-28）---------- */

.pi-doc {
  position: relative;
  min-width: 0;        /* 宽度由 grid 列决定 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line, #dbe6e5);
  border-radius: 8px;
  background: #fff;
}
.pi-doc-grip {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  cursor: col-resize;
}
.pi-doc-grip:hover { background: #cfe6e4; }
.pi-doc-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line, #dbe6e5);
}
.pi-doc-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--muted, #647777); }
.pi-doc-size { flex: 0 0 auto; font-size: 10px; color: var(--muted, #9aa8ad); }
.pi-doc-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 8px; }
/* 「撑满」态（编辑框 / 渲染 iframe）：让 body 变纵向 flex，子元素才能铺满整个预览区
   （之前编辑框写死 min-height:340px，结果只占上半部分）。滚动交给子元素自己。 */
.pi-doc-body.is-fill { display: flex; flex-direction: column; overflow: hidden; }
/* 预览里的文字统一 12px 细体灰（与用户对左栏的要求一致） */
.pi-doc-text { margin: 0; font-family: Consolas, "Courier New", monospace; font-size: 12px; font-weight: 400; color: var(--muted, #55686a); white-space: pre-wrap; word-break: break-word; }
.pi-doc-image { max-width: 100%; display: block; margin: 0 auto; }
/* html / svg 的渲染预览：铺满预览区（sandbox="" 由标签属性给出 —— 禁脚本 / 表单 / 同源） */
.pi-doc-frame { display: block; width: 100%; flex: 1 1 auto; min-height: 0; border: 0; background: #fff; }
.pi-doc-note { margin: 0; font-size: 12px; font-weight: 400; color: var(--muted, #9aa8ad); }
.pi-doc-note.is-error { color: #b4553d; }

/* ---------- 右栏「Agent 编辑 / 创建」抽屉（2026-09-28）---------- */

.pi-drawer-mask {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  justify-content: flex-end;
  /* 2026-09-30 用户第 6 条：**不遮暗背景** —— "弹窗就只是弹窗"。
     这一层仍然留着（点空白处关闭、挡住下层误触），只是不再压一层深色。 */
  background: transparent;
}
.pi-drawer {
  width: min(560px, 92vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-left: 1px solid var(--line, #dbe6e5);
  box-shadow: -8px 0 24px rgba(24, 39, 44, .12);
}
.pi-drawer-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line, #dbe6e5);
}
.pi-drawer-head strong { flex: 1 1 auto; font-size: 12px; font-weight: 600; color: var(--muted, #647777); }
/* 2026-09-30 去页签：五个区**一次全渲染**，从上到下、不够就滚动（抽屉 body 已有 overflow:auto）。
   `.pi-drawer-tabs` / `.pi-drawer-tab` 那套随之删除。 */
.pi-drawer-section { display: flex; flex-direction: column; gap: 8px; }
.pi-drawer-section + .pi-drawer-section { padding-top: 12px; border-top: 1px solid var(--line, #e4eded); }
.pi-drawer-section-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #146b70;
  letter-spacing: .02em;
}
.pi-drawer-section-body { display: flex; flex-direction: column; gap: 8px; }
/* 「显示名」标题后面那句 `id：main（内置 Agent，不可删除）` */
.pi-drawer-id { font-weight: 400; color: var(--muted, #8a9a9a); }
.pi-drawer-id code { font-size: 11px; }
/* 勾选框旁边的一句说明（例如「停用后不会被自动派活」） */
.pi-drawer-inline-hint { margin-left: 8px; font-size: 11px; font-weight: 400; color: var(--muted, #8a9a9a); }
/* 2026-10-04 抽屉标题栏右侧的「启用」开关（原在基本信息区占一行；说明文字改放 title，hover 才显示） */
.pi-drawer-head-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted, #647777); cursor: pointer; user-select: none; }
.pi-drawer-head-toggle input { width: 13px; height: 13px; margin: 0; cursor: pointer; }
/* 2026-10-04 「技能与知识库」标题右端的「知识库」勾选（由原来占一行的「关联知识库」简化而来） */
.pi-drawer-title-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; color: var(--muted, #647777); cursor: pointer; user-select: none; }
.pi-drawer-title-toggle input { width: 13px; height: 13px; margin: 0; cursor: pointer; }
/* 2026-10-04 「模型与思考」左右两列（左=首选方案，右=混合本地） */
.pi-drawer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pi-drawer-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pi-drawer-col-title { font-size: 11px; font-weight: 700; color: #146b70; letter-spacing: .02em; }
/* 2026-10-04 「技能 / MCP」只读预览：下拉展开明细（安装与绑定只在左侧 Skills / MCP 页做） */
.pi-drawer-picker { border: 1px solid var(--line, #dbe6e5); border-radius: 7px; background: #fff; }
.pi-drawer-picker > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted, #647777);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.pi-drawer-picker > summary::-webkit-details-marker { display: none; }
.pi-drawer-picker > summary::after { content: "▾"; margin-left: auto; font-size: 10px; color: var(--muted, #8a9a9a); }
.pi-drawer-picker[open] > summary::after { content: "▴"; }
.pi-drawer-picker > summary em { font-style: normal; font-size: 11px; font-weight: 400; color: var(--muted, #8a9a9a); }
/* 2026-10-04：面板改成**悬浮弹窗** —— 原来内联展开会把抽屉下面的字段整体顶下去。
   位置（left/top/width/maxHeight）由 piagent2 的 toggle 处理按 summary 的 rect 现算；
   宽度占满抽屉、高度够放 10 组两行内容（约 480px），超出滚动查看。 */
.pi-drawer-picker-panel {
  position: fixed;
  z-index: 260;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  overflow-y: auto;
  /* 面板内滚到底时不要把滚动链带给抽屉 body */
  overscroll-behavior: contain;
  background: #fff;
  border: 1px solid var(--line, #dbe6e5);
  border-radius: 9px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .2);
}
/* 每项两行：名称一行 + 说明一行（说明一行放不下就省略号隐藏） */
.pi-drawer-picker-item { display: flex; flex-direction: column; gap: 2px; padding: 5px 8px; background: #f7fbfa; border: 1px solid #e4eded; border-radius: 6px; }
.pi-drawer-picker-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pi-drawer-picker-head strong { overflow: hidden; font-size: 11.5px; color: #1c2b2b; text-overflow: ellipsis; white-space: nowrap; }
.pi-drawer-picker-state { flex: 0 0 auto; padding: 1px 6px; font-size: 10px; color: #146b70; background: #e2f2f1; border-radius: 999px; }
.pi-drawer-picker-item p { margin: 0; overflow: hidden; font-size: 10.5px; line-height: 1.4; color: var(--muted, #7b8a8a); text-overflow: ellipsis; white-space: nowrap; }
.pi-drawer-picker-empty { display: flex; flex-direction: column; gap: 3px; padding: 8px 9px; font-size: 11px; color: var(--muted, #8a9a9a); }
.pi-drawer-picker-empty span { font-size: 10.5px; color: var(--muted, #9aa8ad); }
.pi-drawer-field-block { display: flex; flex-direction: column; gap: 4px; }
/* 权限区只读展示的「实际生效的工具白名单」 */
.pi-drawer-tools { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.pi-drawer-tools code {
  padding: 1px 5px;
  border: 1px solid var(--line, #dbe6e5);
  border-radius: 4px;
  background: #f4f9f8;
  font-size: 11px;
  color: #3d6b6a;
}
.pi-drawer-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}
.pi-drawer-row { display: flex; flex-direction: column; gap: 4px; }
.pi-drawer-label { font-size: 12px; font-weight: 600; color: var(--muted, #647777); }
.pi-drawer-input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 7px;
  border: 1px solid var(--line, #dbe6e5);
  border-radius: 6px;
  background: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink, #16302f);
}
.pi-drawer-input:focus { outline: none; border-color: #8fc9c5; }
textarea.pi-drawer-input { resize: vertical; line-height: 1.5; }
.pi-drawer-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--line, #dbe6e5);
}
.pi-drawer-foot .pi-side-hint { flex: 1 1 auto; }
.pi-side-hint.is-error { color: #b4553d; }
/* docx / pptx 这类“抽出来的只读文本”会标一下来源格式 */
.pi-doc-tag { flex: 0 0 auto; padding: 0 4px; border: 1px solid #d8e6e6; border-radius: 4px; background: #f3f8f8; font-size: 9px; font-weight: 600; color: var(--muted, #647777); }
/* 正文里的可点文件路径（点了在右侧「文档」列打开） */
.pi-doc-link {
  display: inline;
  padding: 0 2px;
  border: 0;
  border-radius: 3px;
  background: #eef6f5;
  color: #146b70;
  font: inherit;
  cursor: pointer;
  text-decoration: underline dotted;
}
.pi-doc-link:hover { background: #d9ecea; }

/* 编辑态：铺满预览区，等宽字体，跟只读预览同一套字号 / 颜色 */
.pi-doc-editor {
  display: block;
  width: 100%;
  flex: 1 1 auto;      /* 撑满 .pi-doc-body.is-fill */
  min-height: 240px;   /* 兜底：容器高度算不出来时也别太矮 */
  box-sizing: border-box;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted, #55686a);
  resize: none;
  outline: none;
}

/* ---------- 右栏：模型方案 + Agent 列表（2026-09-27）---------- */
.pi-rail {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 8px;
  border: 1px solid var(--line, #dbe6e5);
  border-radius: 8px;
  background: #fbfdfc;
  min-height: 0;
  overflow-y: auto;
}
.pi-rail-agents { display: flex; flex-direction: column; gap: 6px; min-height: 0; }

/* 标题栏的启动状态按钮（一个按钮两种状态）：运行中＝绿色「已启动」，停下＝「待启动」 */
.pi-head-state-button.is-online { border-color: #b9dfcf; background: #eef8f5; color: #236a50; font-weight: 600; }
.pi-head-state-button.is-online svg { color: #2f7d55; }
.pi-status-button.pi-head-stop.is-danger { border-color: #ead2d2; background: #fdf3f2; color: #a33f3f; }
.pi-head-stop[disabled] { opacity: .5; cursor: not-allowed; }

/* 「系统提示词」弹层改成 Agent 设置（按当前 Agent 可编辑） */
.pi-agent-setup { display: flex; flex-direction: column; gap: 8px; }
.pi-agent-setup-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11px; }
.pi-agent-setup-head b { color: var(--ink, #16302f); }
.pi-agent-setup textarea { width: 100%; min-height: 240px; padding: 8px 9px; border: 1px solid var(--line, #dbe6e5); border-radius: 8px; font: 11px/1.7 Consolas, monospace; color: var(--ink, #16302f); resize: vertical; }

.pi-side {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 8px;
  border: 1px solid var(--line, #dbe6e5);
  border-radius: 8px;
  background: #fbfdfc;
  /* ⚠️ 它是 .pi-workspace（grid）的 grid item，而 grid item 默认 min-height:auto
     —— 不归零就会被内容（比如展开的系统提示词）撑高，进而把整页撑出视口。
     这正是"页面高度受左侧栏高度推出来"的原因。 */
  min-height: 0;
  overflow-y: auto;
}
.pi-side-block { display: flex; flex-direction: column; gap: 4px; min-height: 0; flex: 0 0 auto; }
.pi-side-grow { flex: 1 1 auto; min-height: 0; }

.pi-side-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink, #16302f);
  letter-spacing: .03em;
}
.pi-side-hint { font-weight: 400; color: var(--muted, #9aa8ad); font-size: 10px; }

/* ---------- 左栏重排（2026-09-27，按定稿截图：新建会话 + 项目分组 + 会话行） ---------- */
.pi-side-new {
  display: flex; align-items: center; gap: 6px; padding: 7px 9px;
  border: 1px solid var(--line, #dbe6e5); border-radius: 8px; background: #fff;
  color: var(--ink, #16302f); font-family: inherit; font-size: 12px; text-align: left; cursor: pointer;
}
.pi-side-new:hover { border-color: #a9cdce; background: #f6fbfa; }
.pi-side-new-icon { font-size: 13px; color: var(--cyan, #2b969b); }
.pi-side-group-head { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.pi-side-group-name { font-size: 12px; font-weight: 600; color: var(--muted, #647777); }
.pi-side-group-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; }
.pi-side-icon-btn {
  width: 20px; height: 20px; display: grid; place-items: center;
  border: 0; border-radius: 5px; background: none; color: var(--muted, #8a9a9a);
  font-family: inherit; font-size: 11px; cursor: pointer;
}
.pi-side-icon-btn:hover { background: #eef4f3; color: #2b7f83; }
.pi-side-sort-wrap { position: relative; display: inline-flex; }
.pi-side-sort-panel {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 6; min-width: 132px; padding: 4px;
  border: 1px solid var(--line, #dbe6e5); border-radius: 8px; background: #fff;
  box-shadow: 0 6px 18px rgba(20, 60, 60, .12);
}
.pi-side-sort-row {
  display: block; width: 100%; padding: 5px 8px; border: 0; border-radius: 6px; background: none;
  color: var(--ink, #16302f); font-family: inherit; font-size: 11px; text-align: left; cursor: pointer;
}
.pi-side-sort-row:hover { background: #f2f8f7; }
.pi-side-sort-row.is-active { background: #eaf4f3; color: #1f6f73; font-weight: 600; }
.pi-side-more {
  display: block; width: 100%; margin-top: 2px; padding: 4px 6px; border: 0; border-radius: 6px;
  background: none; color: var(--muted, #8a9a9a); font-family: inherit; font-size: 12px; font-weight: 600;
  text-align: left; cursor: pointer;
}
.pi-side-more:hover { color: #2b7f83; background: #f2f8f7; }


.pi-side-select {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid var(--line, #dbe6e5);
  border-radius: 5px;
  background: #fff;
  color: var(--ink, #16302f);
  font-family: inherit;
  font-size: 11px;
}

.pi-side-mini {
  padding: 1px 7px;
  border: 1px solid var(--line, #dbe6e5);
  border-radius: 10px;
  background: #fff;
  color: var(--cyan, #2b969b);
  font-family: inherit;
  font-size: 10px;
  cursor: pointer;
}
.pi-side-mini:hover { background: #eaf4f3; }

.pi-side-tasks { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; min-height: 0; }
/* 会话行（2026-09-27 用户要求：**标题左对齐**、时间在同一行右侧）。
   ⚠️ 必须是 row + flex-start：早先用 column + align-items:center，文字会跑到中间。 */
.pi-side-task {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 5px 7px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--ink, #16302f);
  font-family: inherit;
  /* 2026-09-28 用户要求：左栏列表文字统一 12px；**会话行标题用细体**（其余才是灰色粗体） */
  font-size: 12px;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
}
.pi-side-task:hover { background: #f0f6f5; }
.pi-side-task.is-active { border-color: var(--cyan, #2b969b); background: #eaf4f3; }
.pi-side-task-title { flex: 1 1 auto; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-side-task-meta { flex: 0 0 auto; margin-left: auto; font-size: 10px; color: var(--muted, #9aa8ad); }

/* 项目下的注释（如「（还没有会话）」）：**整行灰度 + 细体**（2026-09-28 用户要求） */
.pi-side-empty { margin: 0; color: var(--muted, #9aa8ad); font-size: 12px; font-weight: 400; line-height: 1.6; }
.pi-side-prompt {
  margin: 0;
  /* 内容再长也只占这么高，内部滚 —— 绝不允许它把整栏撑开 */
  max-height: 180px;
  overflow: auto;
  padding: 6px;
  border-radius: 5px;
  background: #f4f8f7;
  color: var(--ink, #16302f);
  font-family: Consolas, monospace;
  font-size: 9px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.pi-side-error { margin: 0; color: #b4463d; font-size: 10px; }
/* 会话导出等一次性提示（与 .pi-side-error 同位置，用中性的绿） */
.pi-side-notice { margin: 0; color: #1f6b52; font-size: 10px; }
.pi-side-pending { margin: 0; color: var(--cyan, #2b969b); font-size: 10px; }

@media (max-width: 900px) {
  .pi-workspace { grid-template-columns: 1fr; }
  .pi-side, .pi-rail { max-height: 320px; }
}

@media (max-width: 640px) {
  .piagent-page { min-height: 50vh; }
  .pi-chat-body { max-width: 100%; font-size: 12px; }
}


/* ---------- 项目 → 会话 两层树 ---------- */

.pi-side-tree {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pi-side-proj { display: flex; flex-direction: column; }
.pi-side-proj-head {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding: 4px 5px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ink, #16302f);
  font-family: inherit;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}
.pi-side-proj-head:hover { background: #f0f6f5; }
.pi-side-proj.is-current > .pi-side-proj-head { background: #eaf4f3; font-weight: 600; }
.pi-side-proj-caret { flex: 0 0 auto; width: 10px; color: var(--muted, #9aa8ad); font-size: 9px; }
.pi-side-proj-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted, #8a9a9a); font-weight: 600; }
.pi-side-proj-count {
  flex: 0 0 auto;
  /* ⚠️ 2026-10-06（用户要求）：数量要在**整行最右端**。它在 DOM 里已是最后一个兄弟，
     这条 `margin-left:auto` 是双保险（不依赖前面那块的 flex 撑开）。 */
  margin-left: auto;
  min-width: 14px;
  padding: 0 4px;
  border-radius: 8px;
  background: #e6eeed;
  color: var(--muted, #647777);
  font-size: 9px;
  text-align: center;
}
.pi-side-proj-body { display: flex; flex-direction: column; gap: 1px; padding-left: 13px; }
.pi-side-badge {
  margin-left: 4px;
  padding: 0 3px;
  border-radius: 3px;
  background: #fdf1e6;
  color: #a5673a;
  font-size: 9px;
}
.pi-side-newproj { display: flex; gap: 4px; align-items: center; }
.pi-side-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 3px 6px;
  border: 1px solid var(--line, #dbe6e5);
  border-radius: 5px;
  background: #fff;
  color: var(--ink, #16302f);
  font-family: inherit;
  font-size: 10px;
}
/* ：占 1/3 高，内部滚动，折叠后贴底 ---------- */

.pi-side-files {
  /* 高度：先按用户要求 ×1.5（49%），再 ×0.8 ⇒ 39%；不够时内部滚（.pi-side-files-list 自己 overflow） */
  flex: 0 0 39%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line, #dbe6e5);
  padding-top: 6px;
}
.pi-side-files.is-collapsed {
  /* 折叠后不再占 1/3，只剩标题条并贴到底部 */
  flex: 0 0 auto;
  margin-top: auto;
}
.pi-side-files-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
/* 2026-09-28 用户要求：文件区**整块文字统一 12px / 细体 / 灰**，不再用颜色区分目录
   （目录已有 ▸ / ▾ 三角标记），也不再靠加粗区分名称。 */
.pi-side-file {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 5px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted, #9aa8ad);
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  text-align: left;
  cursor: default;
}
.pi-side-file.is-dir { cursor: pointer; }
.pi-side-file.is-dir:hover { background: #eaf4f3; }
/* 选中的文件（2026-09-28 用户要求）：点了必须看得见 —— 与目录 hover 同色系的浅底 */
.pi-side-file.is-active { background: #eaf4f3; color: #146b70; }
.pi-side-file-icon { flex: 0 0 auto; width: 9px; color: var(--muted, #9aa8ad); }
.pi-side-file-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }
.pi-side-file-size { flex: 0 0 auto; color: var(--muted, #9aa8ad); font-size: 12px; }
/* 树里「读取中…」「（空）」这类占位行（缩进由内联 padding-left 决定） */
.pi-side-file-note { padding: 1px 5px; }

/* ---------- 「系统提示词」弹层（从标题栏按钮打开） ---------- */

.pi-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(12, 28, 32, .38);
}
.pi-modal[hidden] { display: none; }
.pi-modal-box {
  width: min(760px, 92vw);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #ffffff;
  border: 1px solid var(--line, #dbe6e5);
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(12, 28, 32, .22);
  overflow: hidden;
}
.pi-modal-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line, #dbe6e5);
  background: #f6faf9;
}
.pi-modal-head strong { font-size: 12px; color: var(--ink, #16302f); }
.pi-modal-head .pi-side-hint { flex: 1 1 auto; }
.pi-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pi-modal-body .pi-side-prompt { max-height: 300px; }

/* ---------- pi 的思考 / 工具调用：折叠成一行摘要，点开看全文 ---------- */

.pi-chat-step {
  margin: 0 0 6px;
  padding-left: 8px;
  border-left: 2px solid var(--line, #dbe6e5);
}
.pi-chat-step > summary {
  cursor: pointer;
  color: var(--muted, #647777);
  font-size: 11px;
  list-style: none;
}
.pi-chat-step > summary::-webkit-details-marker { display: none; }
.pi-chat-step > summary:hover { color: var(--cyan, #2b969b); }
.pi-chat-step > pre {
  margin: 4px 0 0;
  max-height: 220px;
  overflow: auto;
  padding: 6px;
  border-radius: 5px;
  background: #f7faf9;
  color: var(--muted, #647777);
  font-family: Consolas, monospace;
  font-size: 10px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.pi-chat-step.is-think { border-left-color: #c9b07a; }
.pi-chat-step.is-tool { border-left-color: var(--cyan, #2b969b); }
.pi-chat-step.is-tool > summary { color: var(--cyan, #2b969b); }

.pi-chat-step.is-json { border-left-color: #a9b7c6; }
.pi-chat-step.is-json > summary { color: #5d6b7a; }

/* ---------- 左栏行内动作（2026-09-27）：平时隐藏，鼠标悬浮整行才显示 ---------- */
/* 会话行容器：会话按钮 + 右侧动作按钮（不能把按钮嵌在按钮里，所以外面套一层 div） */
.pi-side-task-row { display: flex; align-items: center; gap: 2px; border-radius: 5px; }
.pi-side-task-row:hover { background: #f0f6f5; }
.pi-side-task-row .pi-side-task:hover { background: transparent; }
.pi-side-row-acts { flex: 0 0 auto; display: none; align-items: center; gap: 1px; padding-right: 3px; }
/* ⚠️ 2026-10-06（用户要求）：**动作按钮一律平时隐藏，悬浮该行才出现** ——
   原来还有一条 `.pi-side-proj.is-current .pi-side-row-acts { display: inline-flex }`，
   导致「当前项目」那一行的 ✎ 🗑 **一直显示**（用户截图里的正是它），已删除。 */
.pi-side-task-row:hover .pi-side-row-acts,
.pi-side-proj-head:hover .pi-side-row-acts { display: inline-flex; }
.pi-side-act {
  width: 18px; height: 18px; display: grid; place-items: center;
  border: 0; border-radius: 4px; background: none; color: var(--muted, #8a9a9a);
  font-family: inherit; font-size: 10px; line-height: 1; cursor: pointer;
}
.pi-side-act:hover { background: #e6eeed; color: #2b7f83; }
.pi-side-act.is-danger:hover { background: #fbe9e7; color: #b4463d; }
/* 项目行：head 改成 flex 容器 + 内部可点按钮（原来整个 head 是一个 button，塞不进动作按钮） */
.pi-side-proj-head { display: flex; align-items: center; gap: 2px; padding: 0; border-radius: 5px; }
.pi-side-proj-head:hover { background: #f0f6f5; }
.pi-side-proj-main {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 4px;
  padding: 5px 7px; border: 0; border-radius: 5px; background: none;
  color: var(--ink, #16302f); font-family: inherit; font-size: 11px; text-align: left; cursor: pointer;
}
.pi-side-proj.is-current > .pi-side-proj-head { background: #eaf4f3; font-weight: 600; }


/* --- 对话正文的最小 Markdown（2026-10-05）------------------------------
   提示词要求模型用 <details> 折叠过程、用表格列关键参数、用代码围栏放提示词正文；
   而渲染侧原来只按纯文本输出，标记符号全挤在正文里（用户报"生成图像时内容太多了"）。
   这里只给新支持的几种元素配样式，折叠块本身复用 .pi-chat-step。 */
.pi-chat-table { border-collapse: collapse; margin: 4px 0 6px; font-size: 11.5px; }
.pi-chat-table th, .pi-chat-table td {
  border: 1px solid var(--line, #dbe6e5); padding: 3px 7px; text-align: left; vertical-align: top;
  word-break: break-word;
}
.pi-chat-table th { background: #f4fafa; font-weight: 600; white-space: nowrap; color: var(--ink, #16302f); }
.pi-chat-code {
  padding: 0 4px; border-radius: 4px; background: #eef5f4;
  font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: 11.5px;
}
.pi-chat-more { padding: 2px 0 0 8px; margin-left: 2px; border-left: 2px solid #e6efee; }
.pi-chat-step.is-code > pre.pi-chat-pre { white-space: pre-wrap; word-break: break-word; }


/* --- 生图回复的排版收紧（2026-10-05 用户要求）-----------------------------
   目的：减少占用空间。行距收紧、折叠块的间距压到最小、围栏不再嵌套折叠。 */
.pi-chat-text { line-height: 1.5; }
.pi-chat-step { margin: 0 0 3px; }
.pi-chat-step > summary { padding: 1px 0; line-height: 1.4; }
.pi-chat-more { padding: 0 0 0 8px; }
.pi-chat-table { margin: 3px 0 4px; }
.pi-chat-table th, .pi-chat-table td { padding: 2px 7px; line-height: 1.45; }
/* 代码围栏现在直接显示（不再被包进折叠块），所以需要独立样式。 */
.pi-chat-pre {
  margin: 2px 0 4px; padding: 6px 8px; max-height: 260px; overflow: auto;
  background: #f7fbfb; border: 1px solid var(--line, #dbe6e5); border-radius: 6px;
  color: #26424a; font-family: ui-monospace, Consolas, "Courier New", monospace;
  font-size: 11.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word;
}


/* --- 左栏两级层次（2026-10-05 用户要求）----------------------------------
   项目是第一级、会话是第二级：会话行整体**缩进一个汉字的宽度**，与项目标题区分开。
   （11px 字号下一个汉字约 12px；只缩进会话行，不动项目行。） */
.pi-side-task-row { padding-left: 12px; }

/* 会话「导出为 …」小菜单（2026-10-06）：跟在对应会话行下面展开。
   起因：导出原来直接下 .jsonl，用户反馈"这个怎么打开" → 改成先选格式。 */
.pi-side-export-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0 6px 22px;
}

.pi-side-export-menu .pi-side-hint {
  font-size: 11px;
}

/* ── 多视口（2026-10-06，dec-c7e3c3de2c36a1e3）─────────────────────────────
   每个额外视口 = 一条锁定的对话 + 一个独立进程；本期用最简单的**上下排列**。 */
.pi-workspace-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* ⚠️ 2026-10-06（多视口）：主视口 + 多个视口是**上下堆叠**的，总高会超出一屏 ——
     这里必须能滚动，否则下面的视口会被裁掉、根本看不到（用户报的正是"看不到两个对话"）。 */
  overflow-y: auto;
}

.pi-viewport {
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* 竖把手（左右排列时用）要靠它做绝对定位。 */
  position: relative;
  /* ⚠️ 2026-10-06（用户反馈"不能正常拉伸、不跟手"）——**这是根因**：
     `.pi-viewport` 是 `.pi-workspace-main`（flex column）的子项，flex 子项默认
     `flex-shrink: 1`，于是我们在里面把高度改了、外层立刻又把它压回去 ——
     表现就是"拖不动 / 不跟手"。必须 `flex: 0 0 auto` 固定住。 */
  flex: 0 0 auto;
  margin-top: 10px;
  border-top: 1px solid var(--line, #8883);
}

.pi-viewport-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 2px;
  font-size: 12px;
  color: var(--text-dim, #888);
}

.pi-viewport-agent {
  padding: 1px 6px;
  border-radius: 4px;
  background: #8882;
}

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

.pi-viewport-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* ⚠️ 2026-10-06（用户反馈"不能正常拉伸、不跟手"）：
     ① `flex: 0 0 auto` —— 不让父级 flex 压缩我们设定的高度（否则拖了立刻被压回去）；
     ② `resize: vertical` —— **浏览器原生**的上下拖拽手柄（在右下角），
        原生的一定跟手，作为自定义分隔条之外的保底手段。
     高度默认 300px；拖动分隔条后由内联 height 覆盖。内容超出时内部滚动。 */
  flex: 0 0 auto;
  height: var(--pi-vp-h, 300px);
  max-height: 88vh;
  resize: vertical;
  overflow: auto;
}

/* 主视口（中栏那个大对话）：也带分隔条（dec-7882617d70b11e29）。
   ⚠️ 默认 `flex: 1 1 auto` —— **保持原来"占满中栏"的行为不变**；
   用户拖过之后 JS 会把它切成 `flex: 0 0 auto` + 内联 height，那时才固定。 */
.pi-viewport.is-primary {
  flex: 1 1 auto;
  min-height: 140px;
  margin-top: 0;
  border-top: 0;
}
.pi-viewport.is-primary > .pi-chat {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

/* 被激活的视口（用户点它 = 左栏随后的「点会话」会切进它）。 */
/* 被激活的视口（用户点它 = 左栏随后的「点会话」会切进它）。
   ⚠️ 2026-10-06（用户反馈"点击视口没有出现青色边框，切换不过去"）——**这是根因**：
   原来高亮只靠 `border-top`，但左右排列那条
   `.pi-workspace-main[data-pi-layout="horizontal"] > .pi-viewport { border-top: 0 }`
   **特异性更高**，把高亮整个盖掉了；而默认又是左右排列 → 点了完全看不出反馈。
   现在改成**不依赖 border-top** 的写法：整圈描边 + 浅底 + 左侧色条。 */
.pi-viewport.is-active {
  border: 2px solid var(--cyan, #2b969b);
  background: #f6fbfb;
}
.pi-viewport.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--cyan, #2b969b);
  border-radius: 3px;
}

/* 把手：默认只显示横的（上下排列拖高度）；左右排列时换成竖的（拖宽度）。 */
.pi-viewport-grip.is-v { display: none; }
/* ⚠️ 2026-10-06：左右排列时视口左侧要留出竖把手的位置，否则把手和内容重叠。 */
.pi-workspace-main[data-pi-layout="horizontal"] > .pi-viewport { padding-left: 12px; }

/* ─── 视口排列方向（dec-929e4fd33f1bf6b3：上下 / 左右分栏）──────────────────────
   用 `data-pi-layout` 切排布，不重建 DOM（重建会丢草稿，见 syncViewports 的注释）。
   ⚠️ 2026-10-06：拖拽标题栏的方案作废（这套框架 render 会整体替换 DOM，DnD 收不到 drop），
   改为**一个隐蔽的小图标**开关：平时半透明、悬浮才明显。 */
.pi-layout-toggle {
  align-self: flex-end;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--muted, #9aa8ad);
  font-family: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  opacity: .3;                 /* 平时很淡，不抢视线 */
  transition: opacity .15s;
}
.pi-layout-toggle:hover {
  opacity: 1;
  background: #eaf4f3;
  color: #2b7f83;
}

/* 左右分栏：各占一半宽（`min-width: 0` 防止内容把列撑爆）。
   ⚠️ 2026-10-06（用户要求）：① **高度充满**（不要上下留空）；② **每个对话框都能左右拉伸**
   —— 高度用 `!important` 覆盖内联值（上下排列时拖出来的 height 在这里不该生效）；
   宽度由分隔条拖（`bindGripDrag` 在 horizontal 下改拖 X 轴）。 */
.pi-workspace-main[data-pi-layout="horizontal"] { flex-direction: row; align-items: stretch; }
.pi-workspace-main[data-pi-layout="horizontal"] > .pi-viewport {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  margin-top: 0;
  border-top: 0;
  border-left: 1px solid var(--line, #8883);
  padding-left: 8px;
  /* 左右排列时，分隔条竖在左侧，光标改成左右箭头更贴切。 */
}
.pi-workspace-main[data-pi-layout="horizontal"] > .pi-viewport:first-child { border-left: 0; padding-left: 0; }
.pi-workspace-main[data-pi-layout="horizontal"] > .pi-viewport > .pi-viewport-body {
  height: 100% !important;
  max-height: none;
  resize: horizontal;
}
.pi-workspace-main[data-pi-layout="horizontal"] .pi-viewport-grip.is-h { display: none; }
/* 竖把手：常显在视口左边界，光标是左右箭头（拖它改宽度）。 */
.pi-workspace-main[data-pi-layout="horizontal"] .pi-viewport-grip.is-v {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 7px;
  height: auto;
  margin: 0;
  border-radius: 0 3px 3px 0;
  background: #8882;
  cursor: ew-resize;
}
.pi-workspace-main[data-pi-layout="horizontal"] .pi-viewport-grip.is-v:hover { background: #2b969b88; }
/* ⚠️ 最左边那个视口：它的左边界已经贴着容器，拖它没有意义 ——
   它的宽度是由**右边那条**把手（下一个视口的左边界）决定的，所以把自己的藏掉。 */
.pi-workspace-main[data-pi-layout="horizontal"] > .pi-viewport:first-child .pi-viewport-grip.is-v { display: none; }
.pi-workspace-main[data-pi-layout="horizontal"] > .pi-viewport:first-child { padding-left: 0; }

/* 视口高度分隔条：上下拖动改这个视口的高度。
   ⚠️ 2026-10-06：原来做成全透明，用户**根本找不到**能拖的地方（反馈"不能正常拉伸"），
   现在给一条常显的浅灰条 + 悬浮高亮。 */
.pi-viewport-head {
  display: none;   /* 已不再使用（标题由 renderPiChat 出，保证与主视口等高） */
}
/* ⚠️ 2026-10-06（用户反馈"右上角的删除按钮挡住已连接这三个文字，请将文字向左移动点"）：
   视口右上角的 ✕ 按钮（绝对定位 `right: 6px`）会压住标题栏右侧的「已连接」。
   「已连接」在 `.pi-chat-status` 里（**不是** `.pi-chat-title`），给它留出右侧空间 = 整体左移。 */
.pi-viewport .pi-chat-status { margin-right: 34px; }
/* ⚠️ 2026-10-06（用户反馈"目前没有删除按钮"）：原来 `opacity: .5` + 20px 太小、还让位给
   "已连接"文字，实际**根本看不出来**。改成常显、稍大、贴在标题栏最右（与左栏的 🗑 同一视觉语言）。 */
.pi-viewport-close {
  position: absolute;
  top: 4px;
  right: 6px;
  z-index: 3;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid #dbe6e5;
  border-radius: 5px;
  background: #fff;
  color: #7b8c90;
  font-family: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.pi-viewport-close:hover { background: #fbe9e7; border-color: #f0c4bd; color: #b4463d; }

.pi-viewport-grip {
  height: 7px;
  margin: 2px 0;
  border-radius: 4px;
  background: #8882;
  cursor: ns-resize;
}
.pi-viewport-grip:hover { background: #2b969b88; }