/* claude2：深色、移动优先，配色走 GitHub 暗色。
   正文用系统字体（中文折行好读），等宽只留给代码、工具卡片和状态这类「终端味」的地方。 */

:root { color-scheme: dark; }
* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; background: #0d1117; color: #e6edf3; }
body {
  /* 固定 body：iOS 聚焦输入框会滚动页面，把 composer 顶到屏幕上方（旧皮同款处理） */
  position: fixed; inset: 0; overflow: hidden; width: 100%;
  font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}
#app { display: flex; flex-direction: column; height: 100%; }

/* ── 顶栏 ─────────────────────────────────────────────────────────────── */
#bar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
  padding: 7px 10px; padding-top: calc(7px + env(safe-area-inset-top));
  background: #161b22; border-bottom: 1px solid #30363d;
}
#dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #8b949e; }
#dot[data-state="working"] { background: #1f6feb; animation: pulse 1.4s ease-in-out infinite; }
#dot[data-state="blocked"] { background: #e3b341; animation: pulse-warn 1.4s ease-in-out infinite; }
#dot[data-state="down"] { background: #f85149; }
@keyframes pulse-warn {
  0%, 100% { box-shadow: 0 0 0 0 rgba(227, 179, 65, .55); opacity: 1; }
  50% { box-shadow: 0 0 0 5px rgba(227, 179, 65, 0); opacity: .55; }
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(31, 111, 235, .55); opacity: 1; }
  50% { box-shadow: 0 0 0 5px rgba(31, 111, 235, 0); opacity: .55; }
}
#who { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 6px; }
#title {
  font-size: 15px; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto;
}
#cwd {
  flex: 0 1 auto; min-width: 0; color: #8b949e; font-size: 11.5px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#bar button, #bar a {
  flex: 0 0 auto; background: #21262d; color: #c9d1d9; border: 1px solid #30363d;
  border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 13px;
  text-decoration: none; line-height: 1.3;
}
#bar a { color: #79c0ff; }
#bar button:active, #bar a:active { background: #30363d; }
#list-refresh, #new-session {
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
  background: transparent; border: 0; font-size: 20px;
}
#list-refresh svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
#new-session { color: #e6edf3; }

/* ── 降级提示条（读不到 transcript / 发送失败）──────────────────────────── */
#banner {
  flex: 0 0 auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 8px 10px; font-size: 13px;
  background: #2d1b1b; border-bottom: 1px solid rgba(248, 81, 73, .35); color: #ffb3b0;
}
#banner[hidden] { display: none; }
#banner a { color: #79c0ff; }
#banner-close {
  margin-left: auto; background: transparent; border: 0; color: #8b949e;
  font: inherit; font-size: 15px; line-height: 1; padding: 2px 6px;
}

/* ── 对话流 ───────────────────────────────────────────────────────────── */
/* 只写 overflow-y 时另一轴也会算成 auto，iOS 会出现整页横向拖动/回弹。
   对话流和列表都显式关掉横轴；代码块、宽表格仍由自己的容器横向滚动。 */
#stream {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 10px 10px 4px;
  scrollbar-width: thin; scrollbar-color: #30363d transparent;
}
#flow { display: flex; flex-direction: column; gap: 10px; }
#empty { color: #8b949e; font-size: 13px; text-align: center; padding: 48px 16px; }
#empty[hidden] { display: none; }

/* 工作中：request 之后到 turn 之前 */
#working { display: flex; align-items: center; gap: 8px; padding: 2px 2px 6px; color: #79c0ff; font-size: 12.5px; }
#working[hidden] { display: none; }
.spinner {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid rgba(31, 111, 235, .35); border-top-color: #79c0ff;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 消息 ─────────────────────────────────────────────────────────────── */
.row { display: flex; }
.row.user { justify-content: flex-end; }
.bubble {
  max-width: 85%; padding: 9px 12px; border-radius: 14px 14px 4px 14px;
  background: #1f6feb; color: #fff; white-space: pre-wrap;
  line-break: strict; word-break: normal; overflow-wrap: break-word;
  hanging-punctuation: allow-end;
}
/* 中文正文：只保留稳定的禁则和自然断行。iOS 的 text-autospace /
   text-spacing-trim 会在标点、英文和行内代码两侧叠加出异常空隙，不在这里使用。 */
.md {
  min-width: 0; max-width: 100%; font-size: 16px; line-height: 1.8; text-align: left;
  line-break: strict; word-break: normal; overflow-wrap: break-word;
  hanging-punctuation: allow-end;
}
.md p { margin: 0 0 .9em; }
.md p:last-child { margin-bottom: 0; }
.md h3, .md h4, .md h5, .md h6 {
  margin: 1.5em 0 .6em; font-size: 17px; font-weight: 600; line-height: 1.5; color: #fff;
}
.md h3:first-child, .md h4:first-child, .md h5:first-child, .md h6:first-child { margin-top: 0; }
.md strong { color: #fff; font-weight: 600; }
.md a { color: #79c0ff; overflow-wrap: anywhere; }
.md ul, .md ol { margin: .5em 0 1em; padding-left: 1.4em; }
.md li { margin: .4em 0; padding-left: .15em; }
.md li::marker { color: #8b949e; }
/* 行内代码是正文里的辅助标注，不用粗重边框把中文行高撑得参差不齐。 */
.md code {
  background: rgba(230, 237, 243, .08); border: 0; border-radius: 4px;
  padding: .06em .3em; margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "PingFang SC", "Microsoft YaHei", monospace;
  font-size: .9em; line-height: inherit; word-break: normal; overflow-wrap: anywhere;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.md pre {
  margin: .8em 0; padding: 12px 14px; background: #161b22; border: 0;
  border-radius: 10px; overflow-x: auto; tab-size: 4;
}
.md pre code {
  background: none; border: 0; padding: 0; margin: 0; font-size: 13px; line-height: 1.55;
  white-space: pre; word-break: normal; overflow-wrap: normal;
}
.md pre[data-lang]::before {
  content: attr(data-lang); display: block; margin-bottom: 6px;
  color: #8b949e; font: 11px/1 ui-monospace, Menlo, Consolas, monospace;
  text-transform: lowercase;
}

/* 表格：宽表横向可滚，不把整页撑宽；两列窄表在手机上改为卡片。 */
.md-table-wrap { position: relative; margin: 1em 0; }
.md-table {
  background: #0d1117;
  border: 1px solid #30363d; border-radius: 8px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
/* 还有内容在右边时给一道渐隐，免得看起来像被截断了 */
.md-table-wrap[data-scroll="1"]:not([data-at-end="1"])::after {
  content: ''; position: absolute; top: 1px; right: 1px; bottom: 1px; width: 26px;
  border-radius: 0 8px 8px 0; pointer-events: none;
  background: linear-gradient(to right, rgba(13, 17, 23, 0), #0d1117 75%);
}
.md-table table {
  width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 1.65;
  /* 列多时给每列留够宽度，宁可横向滚，也不要把「12m」压成两行 */
  min-width: calc(var(--cols, 1) * 5.4em);
}
.md-table th, .md-table td {
  padding: 8px 10px; border-bottom: 1px solid #21262d;
  text-align: left; vertical-align: top;
  line-break: strict; word-break: normal; overflow-wrap: break-word;
  min-width: 3.5em;
}
.md-table th { background: #161b22; color: #e6edf3; font-weight: 600; white-space: nowrap; }
/* 列多时不折行，整张表横向滚：手机上读「进行中」比读「进行/中」容易 */
.md-table table.wide th, .md-table table.wide td { white-space: nowrap; }
.md-table tr:last-child td { border-bottom: 0; }
.md-table .ta-c { text-align: center; }
.md-table .ta-r { text-align: right; }

/* 「项 / 结果」这类两列表格，在手机上不再争一行的宽度：
   每张卡先放完整标签，再放结果；代码、路径仍有足够的横向空间。 */
@media (max-width: 600px) {
  .md-table:has(table.pairs) { border: 0; background: transparent; overflow: visible; }
  .md-table table.pairs { min-width: 0; font-size: 14px; line-height: 1.75; }
  .md-table table.pairs thead {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .md-table table.pairs tbody,
  .md-table table.pairs tr,
  .md-table table.pairs td { display: block; width: 100%; min-width: 0; }
  .md-table table.pairs tbody tr {
    margin-bottom: 8px; padding: 10px 12px;
    background: #161b22; border: 1px solid #30363d; border-radius: 10px;
  }
  .md-table table.pairs tbody tr:last-child { margin-bottom: 0; }
  .md-table table.pairs td { padding: 0; border: 0; }
  .md-table table.pairs td:first-child {
    margin-bottom: 3px; color: #adbac7; font-size: 13px; font-weight: 600; line-height: 1.5;
  }
  .md-table-wrap:has(table.pairs)::after { display: none; }
}

/* 引用、分隔线、任务清单 */
.md blockquote {
  margin: 8px 0; padding: 2px 0 2px 10px;
  border-left: 3px solid #30363d; color: #8b949e;
}
.md hr { margin: 12px 0; border: 0; border-top: 1px solid #30363d; }
.md del { color: #8b949e; }
.md li.task {
  list-style: none; display: flex; gap: 7px; align-items: flex-start;
  margin-left: -18px;
}
.md .task-box {
  flex: none; width: 12px; height: 12px; margin-top: 3px;
  border: 1.5px solid #8b949e; border-radius: 3px; position: relative;
}
.md li.task[data-done="1"] .task-box { background: #238636; border-color: #238636; }
.md li.task[data-done="1"] .task-box::after {
  content: '✓'; position: absolute; left: 1px; top: -2px;
  color: #fff; font-size: 9px; line-height: 1;
}

/* 工作过程：相邻工具与思考共用一个外框。完成时只留摘要，运行中/出错自动展开。 */
.activity {
  overflow: hidden; background: #161b22;
  border: 1px solid #30363d; border-radius: 10px;
}
.activity[data-state="error"] { border-color: rgba(248, 81, 73, .55); }
.activity-head {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px;
  padding: 8px 10px; background: none; border: 0; color: #c9d1d9;
  font: inherit; text-align: left;
}
.activity-head::before { content: '▸'; color: #8b949e; font-size: 10px; flex: 0 0 auto; }
.activity.open .activity-head::before { content: '▾'; }
.activity-title { flex: 0 0 auto; font-size: 13px; font-weight: 600; }
.activity-preview {
  flex: 1 1 auto; min-width: 0; color: #8b949e;
  font: 11.5px/1.4 ui-monospace, Menlo, Consolas, monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.activity.open .activity-preview { display: none; }
.activity-state { flex: 0 0 auto; color: #3fb950; font-size: 12px; }
.activity[data-state="running"] .activity-state { color: #79c0ff; }
.activity[data-state="error"] .activity-state { color: #f85149; }
.activity-body { border-top: 1px solid #21262d; }
.activity-body[hidden] { display: none; }
.activity-item + .activity-item { border-top: 1px solid #21262d; }

/* 思考：折叠时只是组里的一行；展开内容限高，避免长思考把对话流撑没。 */
.think { padding: 0; }
.think-head {
  display: block; width: 100%; text-align: left; padding: 9px 10px;
  background: none; border: 0; color: #8b949e; font: inherit; font-size: 13px; line-height: 1.5;
}
.think-head::before { content: '▸ '; font-size: 10px; }
.think.open .think-head::before { content: '▾ '; }
.think-body {
  margin: 0; padding: 0 12px 10px 27px; max-height: 40vh; overflow-y: auto; overflow-x: hidden;
  color: #8b949e; font-size: 14px; line-height: 1.7;
  white-space: pre-wrap; line-break: strict; word-break: normal; overflow-wrap: break-word;
}
.think-body[hidden] { display: none; }

/* 单条工具仍独立展开输入/结果，但不再各自套一层卡片。 */
.tool { background: transparent; overflow: hidden; }
.tool-head {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px;
  background: none; border: 0; color: #c9d1d9; font: inherit; text-align: left;
}
.tool-head::before { content: '▸'; color: #8b949e; font-size: 10px; flex: 0 0 auto; }
.tool.open .tool-head::before { content: '▾'; }
.tool-name {
  flex: 0 0 auto; color: #8b949e; font: 500 12.5px/1.4 ui-monospace, Menlo, Consolas, monospace;
}
.tool[data-state="running"] .tool-name { color: #79c0ff; }
.tool[data-state="error"] .tool-name { color: #f85149; }
.tool-sum {
  flex: 1 1 auto; min-width: 0; color: #8b949e;
  font: 12px/1.4 ui-monospace, Menlo, Consolas, monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tool-state { flex: 0 0 auto; min-width: 12px; font-size: 11.5px; color: #3fb950; }
.tool[data-state="running"] .tool-state { color: #79c0ff; }
.tool[data-state="error"] .tool-state { color: #f85149; }
.tool-body { border-top: 1px solid #21262d; padding: 8px 10px; display: flex; flex-direction: column; gap: 8px; }
.tool-body[hidden] { display: none; }
.tool-label { color: #8b949e; font-size: 11px; font-family: ui-monospace, Menlo, Consolas, monospace; }
.tool-body pre {
  margin: 0; padding: 8px; max-height: 42vh; overflow: auto;
  background: #0d1117; border: 1px solid #21262d; border-radius: 6px;
  font: 12px/1.5 ui-monospace, Menlo, Consolas, monospace;
  white-space: pre-wrap; word-break: normal; overflow-wrap: break-word;
}
.tool-result { color: #c9d1d9; }

/* 对话里的图片：发送者与助手共用；单图大一点，多图双列，点击看原图。 */
.image-msg { display: flex; min-width: 0; }
.image-msg.user { justify-content: flex-end; }
.image-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
  width: min(100%, 336px);
}
.image-grid[data-count="1"] { grid-template-columns: minmax(0, 1fr); width: min(100%, 280px); }
.image-card {
  position: relative; min-width: 0; min-height: 120px; padding: 0; overflow: hidden;
  background: #161b22; border: 1px solid #30363d; border-radius: 12px;
  color: #8b949e; font: inherit;
}
.image-card img { display: none; width: 100%; height: 160px; object-fit: cover; }
.image-grid[data-count="1"] .image-card img { height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
.image-card.ready img { display: block; }
.image-card:not(:disabled) { cursor: zoom-in; }
.image-card.error { border-color: rgba(248, 81, 73, .35); }
.image-status {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 12px;
  color: #8b949e; font-size: 12px; line-height: 1.5; text-align: center;
}
.image-status[hidden] { display: none; }

/* 全屏图片预览：objectURL 已带凭据加载，不需要再请求一次原路径。 */
#image-viewer {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  padding: calc(16px + env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom));
  background: rgba(1, 4, 9, .96);
}
#image-viewer[hidden] { display: none; }
#image-full { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
#image-viewer-close {
  position: absolute; top: calc(8px + env(safe-area-inset-top)); right: 12px;
  width: 40px; height: 40px; padding: 0; border: 1px solid #30363d; border-radius: 50%;
  background: rgba(33, 38, 45, .9); color: #e6edf3; font: inherit; font-size: 26px; line-height: 1;
}

/* 提示分隔线 */
.notice { display: flex; align-items: center; gap: 8px; color: #8b949e; font-size: 12px; }
.notice::before, .notice::after { content: ''; flex: 1; height: 1px; background: #30363d; }
.notice span { flex: 0 1 auto; text-align: center; word-break: break-word; }

/* 本轮用量：底部一行小字 */
#usage {
  flex: 0 0 auto; padding: 4px 12px 6px; color: #8b949e;
  font: 11.5px/1.5 ui-monospace, Menlo, Consolas, monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
}
#usage[hidden] { display: none; }

/* ── 权限审批卡 ───────────────────────────────────────────────────────── */
#approval { flex: 0 0 auto; padding: 8px 10px 0; }
#approval[hidden] { display: none; }
.approval {
  border: 1px solid rgba(227, 179, 65, .45); border-radius: 12px;
  background: #1c1a12; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.approval[data-state="busy"] { opacity: .7; }
.approval[data-state="error"] { border-color: rgba(248, 81, 73, .6); }
.approval-head { display: flex; align-items: baseline; gap: 8px; }
.approval-tag {
  flex: 0 0 auto; font-size: 11.5px; padding: 1px 7px; border-radius: 999px;
  background: rgba(227, 179, 65, .16); color: #e3b341;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.approval-tool { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 14px; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.approval-age { flex: 0 0 auto; color: #8b949e; font-size: 11.5px; }
.approval-body {
  margin: 0; max-height: 30vh; overflow: auto;
  background: #0d1117; border: 1px solid #30363d; border-radius: 8px; padding: 8px 10px;
  font: 12px/1.5 ui-monospace, Menlo, Consolas, monospace; color: #e6edf3;
  white-space: pre-wrap; word-break: break-word;
}
.approval-actions { display: flex; gap: 8px; }
.approval-btn {
  flex: 1 1 0; padding: 9px 10px; border-radius: 9px; border: 1px solid #30363d;
  background: #21262d; color: #c9d1d9; font: inherit; font-size: 14px;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
}
.approval-btn:disabled { opacity: .5; }
.approval-btn.primary { background: #238636; border-color: #238636; color: #fff; }
.approval-btn.danger { background: #21262d; border-color: rgba(248, 81, 73, .5); color: #ff9d97; }
.approval-more { color: #8b949e; font-size: 11.5px; text-align: center; }

/* ── 提问卡（AskUserQuestion）──────────────────────────────────────────── */
#question { flex: 0 0 auto; padding: 8px 10px 0; }
#question[hidden] { display: none; }
.question {
  border: 1px solid rgba(88, 166, 255, .45); border-radius: 12px;
  background: #0f1724; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
  max-height: 46vh; overflow: auto;
}
.question[data-state="busy"] { opacity: .7; }
.q-head { display: flex; align-items: baseline; gap: 8px; }
.q-tag {
  flex: 0 0 auto; font-size: 11.5px; padding: 1px 7px; border-radius: 999px;
  background: rgba(88, 166, 255, .16); color: #58a6ff;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.q-age { flex: 0 0 auto; margin-left: auto; color: #8b949e; font-size: 11.5px; }
.q-item { display: flex; flex-direction: column; gap: 6px; }
.q-header { color: #58a6ff; font-size: 12px; }
.q-text { font-size: 15px; line-height: 1.45; color: #fff; }
.q-options { display: flex; flex-direction: column; gap: 6px; }
.q-option {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: 9px 10px; border-radius: 10px; border: 1px solid #30363d;
  background: #161b22; color: #e6edf3; font: inherit;
}
.q-option:active { background: #1f2937; }
.q-option[data-on="true"] { border-color: #1f6feb; background: rgba(31, 111, 235, .18); }
.q-option:disabled { opacity: .6; }
.q-label { font-size: 14px; font-weight: 600; }
.q-desc { font-size: 12px; color: #8b949e; line-height: 1.35; }
.q-actions { display: flex; gap: 8px; }
.q-btn {
  flex: 1 1 0; padding: 9px 10px; border-radius: 9px; border: 1px solid #30363d;
  background: #21262d; color: #c9d1d9; font: inherit; font-size: 14px;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
}
.q-btn:disabled { opacity: .5; }
.q-btn.primary { background: #1f6feb; border-color: #1f6feb; color: #fff; }
.q-hint { color: #8b949e; font-size: 11.5px; }

/* ── 快捷键与 composer ────────────────────────────────────────────────── */
#shortcuts {
  flex: 0 0 auto; display: flex; gap: 8px; padding: 7px 10px 0;
  background: #161b22; border-top: 1px solid #30363d;
}
#shortcuts button {
  min-width: 52px; padding: 4px 12px; border: 1px solid #30363d; border-radius: 7px;
  background: #21262d; color: #c9d1d9; font: inherit; font-size: 12px; line-height: 1.4;
}
#shortcuts button:disabled { opacity: .4; }
#shortcuts button:active:not(:disabled) { background: #30363d; }
/* 结束会话：靠右、红色，跟 Esc/模型 拉开距离；第一次点只是"上膛"。 */
#end-session { margin-left: auto; color: #f85149; border-color: rgba(248, 81, 73, .45); }
#end-session[data-confirm="yes"] {
  background: rgba(248, 81, 73, .16); color: #ffb3b0; border-color: rgba(248, 81, 73, .8);
}
#composer {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 7px;
  padding: 8px 10px; padding-bottom: calc(24px + env(safe-area-inset-bottom));
  background: #161b22;
}
/* 收起时是居中的 75% 宽单行胶囊；聚焦或有草稿时，输入在上、操作在下（参考手机 ChatGPT）。
   不为纯装饰引入 JS 状态：focus-within / placeholder-shown 已覆盖键盘与附件按钮。 */
#composer-row {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: end; gap: 4px;
  width: 75%; min-width: 0; margin-inline: auto; padding: 5px 6px;
  background: #21262d; border: 1px solid #30363d; border-radius: 26px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .12);
  transition: border-color .15s ease, background-color .15s ease;
}
#attach, #send {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border-radius: 50%; font: inherit;
}
#attach {
  grid-column: 1; grid-row: 1; border: 0; background: transparent; color: #e6edf3;
}
#attach svg, #send svg {
  width: 21px; height: 21px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
#attach:disabled { opacity: .4; }
#attach:active:not(:disabled) { background: #30363d; }
/* 拖文件进来时给整个胶囊一圈虚线：桌面端知道松手会落到哪儿。 */
#composer[data-drag="yes"] #composer-row {
  outline: 1px dashed #1f6feb; outline-offset: 3px;
}
#attachments {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin;
}
#attachments[hidden] { display: none; }
.att {
  position: relative; flex: 0 0 auto; width: 72px; height: 72px;
  padding: 0; border: 1px solid #30363d; border-radius: 12px; overflow: hidden;
  background: #0d1117; color: #fff; font-size: 10px;
}
.att[data-state="busy"] { opacity: .6; }
.att[data-state="error"] { border-color: rgba(248, 81, 73, .5); color: #ffb3b0; }
.att-preview {
  display: block; width: 100%; height: 100%; padding: 0; border: 0;
  background: #0d1117; color: inherit;
}
.att img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.att-meta {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 3px 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center;
  background: linear-gradient(transparent, rgba(1, 4, 9, .88)); pointer-events: none;
}
.att-x {
  position: absolute; top: 3px; right: 3px; z-index: 1;
  display: grid; place-items: center; width: 22px; height: 22px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(1, 4, 9, .78); color: #fff;
  font: inherit; font-size: 12px; line-height: 1;
}
#input {
  grid-column: 2; grid-row: 1; width: 100%; min-width: 0;
  min-height: 40px; max-height: 132px; resize: none;
  background: transparent; color: #e6edf3; border: 0; border-radius: 0;
  padding: 8px 6px; outline: none; caret-color: #79c0ff;
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;  /* 16px：iOS 聚焦不缩放 */
  line-break: strict; word-break: normal; overflow-wrap: break-word;
}
#input::placeholder { color: #8b949e; opacity: 1; }
#send {
  grid-column: 3; grid-row: 1; border: 0;
  background: #1f6feb; color: #fff;
}
#send:disabled { background: #30363d; color: #6e7681; opacity: 1; }
#send:active:not(:disabled) { background: #388bfd; }
#composer:focus-within #composer-row,
#composer:has(#input:not(:placeholder-shown)) #composer-row {
  grid-template-columns: 40px minmax(0, 1fr) 40px; width: 100%;
  border-color: #484f58; border-radius: 22px; padding: 8px;
}
#composer:focus-within #input,
#composer:has(#input:not(:placeholder-shown)) #input {
  grid-column: 1 / -1; grid-row: 1; min-height: 48px; padding: 3px 6px 10px;
}
#composer:focus-within #attach,
#composer:has(#input:not(:placeholder-shown)) #attach { grid-column: 1; grid-row: 2; }
#composer:focus-within #send,
#composer:has(#input:not(:placeholder-shown)) #send { grid-column: 3; grid-row: 2; }

/* ── 视图切换：list = 会话列表（首页），chat = 某条会话的对话流 ──────────
   显隐只认 #app[data-view]，JS 切属性即可，不用两个分支抢 display。 */
#app[data-view="list"] #stream,
#app[data-view="list"] #usage,
#app[data-view="list"] #approval,
#app[data-view="list"] #question,
#app[data-view="list"] #shortcuts,
#app[data-view="list"] #composer,
#app[data-view="list"] #readonly,
#app[data-view="list"] #dot,
#app[data-view="list"] #end-session,
#app[data-view="list"] #back { display: none; }
#app[data-view="chat"] #new-session,
#app[data-view="chat"] #space-bar { display: none; }
#app[data-view="list"] #list-view { display: flex; }
#app[data-view="chat"] #list-view { display: none; }
#app[data-view="chat"] #list-refresh { display: none; }
/* 只读会话（没有托管终端）：composer 整条收起，底部只留「去终端」那句 */
#app[data-view="chat"][data-send="no"] #shortcuts,
#app[data-view="chat"][data-send="no"] #composer { display: none; }

/* ── 会话列表（首页）：顶部「现在」+ 按目录分组 ───────────────────────── */
#list-view {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  flex-direction: column; gap: 8px;
  /* 顶部不留 padding：Chrome 的 sticky 是贴内容盒的，留了 padding 组头就吸在
     10px 下面，滚动时上沿还会漏出一条卡片。间距改由子元素自己给。 */
  padding: 0 10px calc(10px + env(safe-area-inset-bottom));
  scrollbar-width: thin; scrollbar-color: #30363d transparent;
}
#list-note {
  margin-top: 10px; padding: 10px 12px;
  border: 1px solid rgba(248, 81, 73, .35); border-radius: 10px;
  background: #2d1b1b; color: #ffb3b0; font-size: 13px;
}
#list-note[hidden] { display: none; }
/* 目录之间留 14px；会话行自己不再套卡片，靠分组和分隔线建立层级。 */
#session-cards { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }
#list-empty {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 64px 20px; text-align: center;
}
#list-empty[hidden] { display: none; }
.le-title { font-size: 15px; font-weight: 600; color: #adbac7; }
.le-sub { font-size: 12.5px; color: #6e7681; }

/* ── 顶部「现在」：谁在等你、谁在跑、谁刚做完 ───────────────────────────
   一行一个终端，左边一道状态色条。等你的排最前，并带一点暖色底，
   扫一眼就知道要不要点进去。 */
.now { display: flex; flex-direction: column; gap: 8px; }
.now-head { display: flex; align-items: baseline; gap: 8px; padding: 0 4px; }
.now-label { font-size: 12px; font-weight: 600; color: #adbac7; letter-spacing: .04em; }
.now-count {
  margin-left: auto; font-size: 11px; color: #6e7681;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.now-count[data-alert="1"] { color: #e3b341; }
.now-count[data-alert="err"] { color: #f85149; }
.now-rows {
  display: flex; flex-direction: column; overflow: hidden;
  background: #161b22; border: 1px solid #30363d; border-radius: 12px;
}
.now-row {
  position: relative; display: flex; align-items: stretch; width: 100%;
  padding: 0; margin: 0; text-align: left;
  background: transparent; border: 0; border-radius: 0;
  color: inherit; font: inherit;
}
.now-row + .now-row { border-top: 1px solid #262c36; }
.now-row:active { background: #1c2129; }
.now-row[data-state="blocked"] { background: rgba(227, 179, 65, .05); }
.now-row[data-state="error"] { background: rgba(248, 81, 73, .05); }

.n-bar { flex: 0 0 3px; background: #30363d; }
.now-row[data-state="blocked"] .n-bar { background: #e3b341; animation: pulse-warn 1.6s ease-in-out infinite; }
.now-row[data-state="error"] .n-bar { background: #f85149; }
.now-row[data-state="working"] .n-bar { background: #1f6feb; }
.now-row[data-state="done"] .n-bar { background: #3fb950; }

.n-main { flex: 1 1 auto; min-width: 0; padding: 9px 12px 9px 11px; }
.n-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.n-title {
  flex: 1 1 auto; min-width: 0;
  font-size: 14px; font-weight: 500; color: #e6edf3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.now-row[data-state="done"] .n-title { color: #adbac7; }
.n-pill { flex: 0 0 auto; color: #8b949e; font-size: 11px; line-height: 1.4; }
.now-row[data-state="blocked"] .n-pill { color: #e3b341; }
.now-row[data-state="error"] .n-pill { color: #ff7b72; }
.now-row[data-state="working"] .n-pill { color: #79c0ff; }
.now-row[data-state="done"] .n-pill { color: #3fb950; }
.n-age {
  flex: 0 0 auto; color: #6e7681; font-size: 11px;
  font-family: ui-monospace, Menlo, Consolas, monospace; white-space: nowrap;
}

/* ── 目录分组 ─────────────────────────────────────────────────────────── */
.s-group { display: flex; flex-direction: column; gap: 5px; }
/* 组头一行：折叠按钮 + 新建按钮。吸顶必须放在这一行上——组头本身是 <button>，
   不能再往里塞 <button>（点击会互相触发）。 */
.g-row {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: stretch; gap: 4px;
  padding: 0 2px;
  background: #0d1117;   /* 挡住下面滚上来的会话行 */
}
.g-head {
  display: flex; align-items: center; gap: 7px; flex: 1 1 auto; min-width: 0;
  min-height: 32px; padding: 5px 4px; margin: 0; text-align: left;
  background: transparent; border: 0; border-radius: 6px;
  color: #c9d1d9; font: inherit; font-size: 12px;
}
.g-head:active { background: #21262d; }
/* 有告警时只点亮文字和计数，不再给目录头套一层框。 */
.s-group[data-alert="1"] .g-name,
.s-group[data-alert="err"] .g-name { color: #e6edf3; }
/* 目录组头上的「＋」：就地在这个目录新建会话 */
.g-add {
  flex: 0 0 auto; width: 30px; padding: 0;
  background: transparent; border: 0; border-radius: 6px;
  color: #8b949e; font: inherit; font-size: 19px; line-height: 1;
}
.g-add:active { background: #21262d; }
.g-add:disabled { opacity: .45; }
.g-caret {
  flex: 0 0 auto; color: #8b949e; font-size: 10px; line-height: 1;
  transition: transform .15s ease;
}
.g-row[data-expanded="false"] .g-caret { transform: rotate(-90deg); }
.g-name {
  flex: 1 1 auto; min-width: 0;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11.5px; color: #adbac7;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.g-tag {
  flex: 0 0 auto; font-size: 10px; padding: 0 5px; border-radius: 999px;
  border: 1px solid #30363d; color: #8b949e;
}
.g-alert {
  flex: 0 0 auto; font-size: 10px; line-height: 1.6; padding: 0 6px; border-radius: 999px;
  color: #e3b341; background: rgba(227, 179, 65, .12); border: 1px solid rgba(227, 179, 65, .35);
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.s-group[data-alert="err"] .g-alert {
  color: #ff7b72; background: rgba(248, 81, 73, .12); border-color: rgba(248, 81, 73, .35);
}
.g-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: #3fb950; }
.g-dot.is-working { background: #1f6feb; animation: pulse 1.6s ease-in-out infinite; }
.g-meta {
  flex: 0 0 auto; color: #6e7681; font-size: 11px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.g-body {
  display: flex; flex-direction: column; overflow: hidden;
  background: #161b22; border: 1px solid #30363d; border-radius: 10px;
}
.g-row[data-expanded="false"] + .g-body { display: none; }
/* 窄屏：有告警的组头优先保目录名，「N 条」让位（目录名截断会认不出是哪个组） */
@media (max-width: 380px) {
  .s-group[data-alert] .g-meta { display: none; }
}
/* 子代理 transcript 的显隐开关：默认隐藏，但要让人知道藏了几条 */
.g-hidden {
  display: flex; align-items: center; gap: 6px; padding: 2px 4px;
  color: #8b949e; font-size: 11.5px;
}
.g-hidden button {
  background: transparent; border: 0; color: #79c0ff;
  font: inherit; font-size: 11.5px; padding: 2px 4px;
}

/* ── 会话行：标题 / 状态 / 时间共一行；同组共用外框，不再每条一张卡 ───── */
.session-card {
  display: block; width: 100%; min-height: 42px; padding: 10px 12px; text-align: left;
  background: transparent; border: 0; border-radius: 0; color: inherit; font: inherit;
}
.session-card + .session-card { border-top: 1px solid #262c36; }
.session-card:active { background: #21262d; }
.session-card[data-state="blocked"] { box-shadow: inset 3px 0 0 rgba(227, 179, 65, .8); }
.session-card[data-state="error"] { box-shadow: inset 3px 0 0 rgba(248, 81, 73, .8); }
.session-card[data-state="working"] { box-shadow: inset 3px 0 0 rgba(31, 111, 235, .55); }
.session-card .c-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.session-card .c-text {
  flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 500; color: #e6edf3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.session-card .c-live,
.session-card .c-state {
  flex: 0 0 auto; color: #8b949e; font-size: 11px; line-height: 1.4; white-space: nowrap;
}
.session-card .c-live { color: #3fb950; }
.session-card[data-state="blocked"] .c-state { color: #e3b341; }
.session-card[data-state="error"] .c-state { color: #ff7b72; }
.session-card[data-state="working"] .c-state { color: #79c0ff; }
.session-card[data-state="done"] .c-state { color: #3fb950; }
.session-card .c-meta {
  flex: 0 0 auto; color: #6e7681; font-size: 11px; line-height: 1.4;
  font-family: ui-monospace, Menlo, Consolas, monospace; white-space: nowrap;
}

/* 草稿不必再重复一张「未发言」徽标，标题本身已经说清楚。 */
.session-card.is-draft .c-text { color: #adbac7; }

/* ── 新建会话：目录选择（底部弹层）────────────────────────────────────── */
#dir-picker {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: flex-end;
  background: rgba(1, 4, 9, .62);
}
#dir-picker[hidden] { display: none; }
.dp-sheet {
  width: 100%; max-height: 82vh; display: flex; flex-direction: column;
  background: #0d1117; border-top: 1px solid #30363d; border-radius: 14px 14px 0 0;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
}
.dp-head { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding-bottom: 8px; }
.dp-head button {
  background: #21262d; border: 1px solid #30363d; border-radius: 8px;
  color: #c9d1d9; font: inherit; font-size: 13px; padding: 6px 10px;
}
#dp-crumb {
  flex: 1 1 auto; min-width: 0; color: #adbac7; font-size: 12px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dp-title { color: #8b949e; font-size: 11.5px; padding: 6px 2px 2px; }
#dp-list, #dp-recent-list {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px;
}
.dp-row {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 9px 10px; background: #161b22; border: 1px solid #30363d; border-radius: 9px;
  color: #c9d1d9; font: inherit; font-size: 13px;
}
.dp-row:active { background: #21262d; }
.dp-row .dp-path {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px;
}
.dp-foot { flex: 0 0 auto; padding-top: 10px; }
#dp-ok {
  width: 100%; padding: 12px; border: 0; border-radius: 10px;
  background: #1f6feb; color: #fff; font: inherit; font-size: 14px;
}
#dp-ok:disabled { opacity: .45; }

/* ── space 选择（顶栏入口 + 底部弹层）──────────────────────────────────── */
#space-bar { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; }
#space-bar[hidden] { display: none; }
#space-pick {
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  min-width: 34px; max-width: 92px; height: 34px; padding: 0 7px;
  background: transparent; border: 1px solid #30363d; border-radius: 8px;
  color: #adbac7; font: inherit; font-size: 12px; overflow: hidden;
}
#space-pick:active { background: #30363d; }
#space-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-caret { color: #6e7681; flex: 0 0 auto; font-size: 10px; }
#space-picker {
  position: fixed; inset: 0; z-index: 22;
  display: flex; align-items: flex-end;
  background: rgba(1, 4, 9, .62);
}
#space-picker[hidden] { display: none; }
.space-sheet {
  width: 100%; max-height: 62vh; display: flex; flex-direction: column;
  background: #0d1117; border-top: 1px solid #30363d; border-radius: 14px 14px 0 0;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
}
.space-head {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 10px; font-size: 14px; font-weight: 600;
}
.space-head button {
  background: #21262d; border: 1px solid #30363d; border-radius: 8px;
  color: #c9d1d9; font: inherit; font-size: 13px; padding: 5px 10px;
}
#space-list {
  flex: 1 1 auto; min-height: 44px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 7px; color: #8b949e; font-size: 13px;
}
.space-row {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; padding: 10px 12px; text-align: left;
  background: #161b22; border: 1px solid #30363d; border-radius: 9px;
  color: #c9d1d9; font: inherit;
}
.space-row[data-current="true"] { border-color: #1f6feb; }
.space-row:active { background: #21262d; }
.space-name { font-size: 14px; }
.space-folder {
  max-width: 100%; color: #8b949e; font: 11.5px/1.4 ui-monospace, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
}

/* ── 模型选择（底部弹层）──────────────────────────────────────────────── */
#model-picker {
  position: fixed; inset: 0; z-index: 21;
  display: flex; align-items: flex-end;
  background: rgba(1, 4, 9, .62);
}
#model-picker[hidden] { display: none; }
.model-sheet {
  width: 100%; max-height: 72vh; display: flex; flex-direction: column;
  background: #0d1117; border-top: 1px solid #30363d; border-radius: 14px 14px 0 0;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
}
.model-head {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 10px; font-size: 14px; font-weight: 600;
}
.model-head button {
  background: #21262d; border: 1px solid #30363d; border-radius: 8px;
  color: #c9d1d9; font: inherit; font-size: 13px; padding: 5px 10px;
}
#model-list {
  flex: 1 1 auto; min-height: 44px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 7px; color: #8b949e; font-size: 13px;
}
.model-row {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; padding: 10px 12px; text-align: left;
  background: #161b22; border: 1px solid #30363d; border-radius: 9px;
  color: #c9d1d9; font: inherit;
}
.model-row[data-current="true"] { border-color: #1f6feb; }
.model-row:active { background: #21262d; }
.model-name { font-size: 14px; }
.model-id {
  max-width: 100%; color: #8b949e; font: 11.5px/1.4 ui-monospace, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
}
.model-error { color: #ffb3b0; }
.model-retry {
  align-self: flex-start; margin-top: 10px; padding: 7px 14px;
  background: #21262d; color: #c9d1d9; border: 1px solid #30363d; border-radius: 8px;
  font: inherit;
}

/* 只读会话：没有托管终端，输入框不出现，但给条路去终端 */
#readonly {
  flex: 0 0 auto; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  font-size: 13px; color: #c9d1d9;
  background: #161b22; border-top: 1px solid #30363d;
}
#readonly[hidden] { display: none; }
#readonly a { color: #79c0ff; }

/* 动效偏好：能省则省（脉冲和 spinner 在真机上不抢注意力） */
@media (prefers-reduced-motion: reduce) {
  #dot[data-state="working"], .spinner,
  .now-row[data-state="blocked"] .n-bar, .g-dot.is-working { animation: none; }
}