/* claude2：深色、移动优先，配色沿用 /claude/（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: 8px;
  padding: 8px 10px; padding-top: calc(8px + 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; }

/* ── 降级提示条（读不到 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;
}

/* ── 对话流 ───────────────────────────────────────────────────────────── */
#stream {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; 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; word-break: break-word;
}
.md { min-width: 0; max-width: 100%; word-break: break-word; }
.md p { margin: 0 0 8px; }
.md p:last-child { margin-bottom: 0; }
.md h3, .md h4, .md h5, .md h6 { margin: 12px 0 6px; font-size: 15px; line-height: 1.4; 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; }
.md ul, .md ol { margin: 6px 0; padding-left: 22px; }
.md li { margin: 2px 0; }
.md code {
  background: #161b22; border: 1px solid #30363d; border-radius: 4px;
  padding: 1px 5px; font: 13px/1.5 ui-monospace, Menlo, Consolas, monospace;
  word-break: break-word;
}
.md pre {
  margin: 8px 0; padding: 10px; background: #161b22; border: 1px solid #30363d;
  border-radius: 8px; overflow-x: auto;
}
.md pre code {
  background: none; border: 0; padding: 0; font-size: 12.5px; line-height: 1.5;
  white-space: pre; word-break: 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;
}

/* 思考：灰色窄条，默认折叠成一行 */
.think { border-left: 2px solid #30363d; padding-left: 8px; }
.think-head {
  display: block; width: 100%; text-align: left; padding: 2px 0;
  background: none; border: 0; color: #8b949e; font: 12px/1.5 ui-monospace, Menlo, Consolas, monospace;
}
.think-head::before { content: '▸ '; }
.think.open .think-head::before { content: '▾ '; }
.think-body {
  margin-top: 4px; color: #8b949e; font-size: 13px; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
}
.think-body[hidden] { display: none; }

/* 工具卡片：tool + result 合成一张，默认折叠 */
.tool { background: #161b22; border: 1px solid #30363d; border-radius: 10px; overflow: hidden; }
.tool[data-state="error"] { border-color: rgba(248, 81, 73, .45); }
.tool-head {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px;
  background: none; border: 0; color: #e6edf3; 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: #79c0ff; font: 600 13px/1.4 ui-monospace, Menlo, Consolas, monospace;
}
.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; font-size: 11.5px; color: #8b949e; }
.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: break-word;
}
.tool-result { color: #c9d1d9; }

/* 提示分隔线 */
.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;
}
.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-btn.ghost { flex: 0 0 auto; color: #8b949e; }
.approval-more { color: #8b949e; font-size: 11.5px; text-align: center; }

/* ── composer ─────────────────────────────────────────────────────────── */
#composer {
  flex: 0 0 auto; display: flex; align-items: flex-end; gap: 8px;
  padding: 8px 10px; padding-bottom: calc(8px + env(safe-area-inset-bottom));
  background: #161b22; border-top: 1px solid #30363d;
}
#input {
  flex: 1 1 auto; min-height: 38px; max-height: 132px; resize: none;
  background: #0d1117; color: #e6edf3; border: 1px solid #30363d; border-radius: 10px;
  padding: 8px 10px; outline: none;
  font: 16px/1.4 ui-monospace, Menlo, Consolas, monospace;   /* 16px：iOS 聚焦不缩放 */
}
#input:focus { border-color: #1f6feb; }
#send {
  flex: 0 0 auto; padding: 10px 16px; border: 0; border-radius: 10px;
  background: #1f6feb; color: #fff; font: inherit; font-size: 14px;
}
#send:disabled { opacity: .45; }
#send:active:not(:disabled) { background: #388bfd; }

/* ── 会话抽屉 ─────────────────────────────────────────────────────────── */
#drawer { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; background: rgba(0, 0, 0, .55); }
#drawer[hidden] { display: none; }
.sheet {
  width: 100%; max-height: 80%; display: flex; flex-direction: column;
  background: #161b22; border-top: 1px solid #30363d; border-radius: 14px 14px 0 0;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
}
.sheet-head { display: flex; align-items: center; gap: 8px; padding: 2px 2px 10px; }
.sheet-head strong { flex: 1; font-size: 15px; }
.sheet-head button {
  background: #21262d; color: #c9d1d9; border: 1px solid #30363d; border-radius: 8px;
  padding: 7px 12px; font: inherit; font-size: 13px;
}
#session-list { overflow-y: auto; min-height: 0; }
.session-row {
  display: flex; flex-direction: column; width: 100%; text-align: left;
  background: transparent; border: 0; border-bottom: 1px solid #21262d;
  color: #e6edf3; padding: 12px 4px; font: inherit;
}
.session-row.on { color: #79c0ff; }
.session-row small {
  display: block; margin-top: 2px; color: #8b949e; font-size: 11.5px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.session-row.on small { color: #58a6ff; }

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