/* AIroom — 管理台类视觉（R-con-05），对话页正文按阅读节奏排版（R-read-02）。
   颜色语义固定（R-con-02）：--ok 能用/正常 · --warn 等你 · --bad 出错 · --muted 停了 · --accent 可操作。
   整站跟随系统深浅色，可 data-theme 手动覆盖。 */
:root {
  --bg: #f5f6f8;
  --panel: #ffffff;
  --panel-2: #f9fafb;
  --line: #e4e7ec;
  --line-2: #d0d5dd;
  --text: #101828;
  --text-2: #475467;
  --muted: #98a2b3;
  --accent: #2563eb;
  --accent-bg: #eff4ff;
  --ok: #12b76a;
  --ok-bg: #ecfdf3;
  --bad: #d92d20;
  --bad-bg: #fef3f2;
  --warn: #dc6803;
  --warn-bg: #fffaeb;
  --chip: #f2f4f7;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1115; --panel: #171a21; --panel-2: #1c2029; --line: #262b36; --line-2: #333a48;
    --text: #e6e9ef; --text-2: #a9b1c1; --muted: #6b7385;
    --accent: #5b8cff; --accent-bg: #1a2440;
    --ok: #32d583; --ok-bg: #0f2a1d; --bad: #f97066; --bad-bg: #3a1714; --warn: #fdb022; --warn-bg: #33250b;
    --chip: #222733; --shadow: none; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1115; --panel: #171a21; --panel-2: #1c2029; --line: #262b36; --line-2: #333a48;
  --text: #e6e9ef; --text-2: #a9b1c1; --muted: #6b7385;
  --accent: #5b8cff; --accent-bg: #1a2440;
  --ok: #32d583; --ok-bg: #0f2a1d; --bad: #f97066; --bad-bg: #3a1714; --warn: #fdb022; --warn-bg: #33250b;
  --chip: #222733; --shadow: none; color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { height: 100%; }
body {
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[hidden] { display: none !important; }
button { font-family: inherit; }
input, textarea, select { font-family: inherit; font-size: 16px; color: var(--text); }
a { color: var(--accent); text-decoration: none; }

#app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.view { flex: 1; display: flex; flex-direction: column; }

/* ---------- 通用 ---------- */
.mono { font-family: var(--mono); }

/* 状态灯（R-con-02） */
.light {
  width: 9px; height: 9px; border-radius: 50%;
  flex: 0 0 auto;
  background: var(--muted);
  border: 1.5px solid transparent;
}
.light.running { background: var(--ok); }
.light.waiting { background: var(--warn); }
.light.idle { background: var(--muted); }
.light.stopped { background: transparent; border-color: var(--muted); }
.light.error { background: var(--bad); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.light.running { animation: pulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .light.running { animation: none; }
  .row-actions { transition: none; }
}

/* ---------- 登录 ---------- */
#login-view {
  justify-content: center;
  align-items: center;
  padding: clamp(16px, 5vw, 24px);
}
.login-card {
  width: 100%;
  max-width: 360px;
}
.login-card h1 { font-size: 20px; font-weight: 600; margin: 0 0 4px; }
.login-card p { color: var(--text-2); margin: 0 0 20px; font-size: 14px; }
.login-card input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--panel);
  font-family: var(--mono);
}
.login-card input:focus { outline: none; border-color: var(--accent); }
.login-card button {
  margin-top: 10px;
  width: 100%;
  padding: 11px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.login-error { color: var(--bad); font-size: 13px; margin-top: 10px; min-height: 1em; }

/* ---------- 顶栏 ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px clamp(16px, 5vw, 24px);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar h1 { font-size: 17px; font-weight: 600; margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .back {
  border: 0; background: none; color: var(--accent);
  font-size: 15px; padding: 4px 0; cursor: pointer;
}

/* ---------- 会话页 ---------- */
#sessions-page { position: relative; }
.approval-banner {
  margin: 12px clamp(16px, 5vw, 24px) 0;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--warn-bg);
  color: var(--warn);
  font-size: 14px;
  border: 0;
  width: calc(100% - 2 * clamp(16px, 5vw, 24px));
  text-align: left;
  cursor: pointer;
}
.group-list { padding: 4px 0 calc(76px + env(safe-area-inset-bottom)); }
.project-group { }
.group-head {
  font-size: 12px;
  color: var(--muted);
  font-family: var(--mono);
  padding: 16px clamp(16px, 5vw, 24px) 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.session-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px clamp(16px, 5vw, 24px);
  background: var(--panel);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  margin: 0;
  cursor: pointer;
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  touch-action: pan-y;
}
.session-row:active { background: var(--panel-2); }
.session-row .body { flex: 1; min-width: 0; }
.session-row .title { font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-row .last { font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.session-row .time { font-size: 12px; color: var(--muted); flex: 0 0 auto; }

.fab {
  position: fixed;
  right: clamp(16px, 5vw, 24px);
  bottom: calc(20px + env(safe-area-inset-bottom));
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 0;
  background: var(--accent);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(16,24,40,.18);
  cursor: pointer;
  z-index: 20;
}

/* ---------- 选项目页 ---------- */
#picker-page { }
.search-wrap { padding: 12px clamp(16px, 5vw, 24px) 0; }
.search-wrap input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--panel);
}
.search-wrap input:focus { outline: none; border-color: var(--accent); }
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 10px clamp(16px, 5vw, 24px) 0;
  font-size: 13px;
  color: var(--text-2);
}
.breadcrumb .sep { color: var(--muted); }
.breadcrumb button {
  border: 0; background: none; color: var(--accent);
  font-size: 13px; padding: 2px; cursor: pointer;
}
.breadcrumb .current { color: var(--text); font-family: var(--mono); }
.pin-list { padding: 6px clamp(16px, 5vw, 24px) 0; }
.pin-title { font-size: 12px; color: var(--muted); padding: 6px 2px; }
.dir-list { padding: 0 0 24px; }
.dir-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0 clamp(16px, 5vw, 24px);
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  text-align: left;
}
.dir-row .open {
  flex: 1;
  min-width: 0;
  display: block;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.dir-row .name {
  display: block;
  font-size: 15px;
  padding: 13px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dir-row > .name { flex: 1; min-width: 0; }
.dir-row .pin {
  flex: 0 0 auto;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  padding: 8px;
  cursor: pointer;
}
.dir-row .pin.pinned { color: var(--warn); }
.dir-row .choose {
  flex: 0 0 auto;
  border: 0;
  background: var(--accent);
  color: #fff;
  border-radius: 6px;
  font-size: 13px;
  padding: 8px 12px;
  cursor: pointer;
}
.empty-note { color: var(--muted); font-size: 14px; padding: 24px clamp(16px, 5vw, 24px); text-align: center; }

/* 开始会话 */
.start-panel {
  margin: 16px clamp(16px, 5vw, 24px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
}
.start-panel .cwd { font-family: var(--mono); font-size: 13px; color: var(--text-2); word-break: break-all; margin-bottom: 12px; }
.start-panel textarea {
  width: 100%;
  min-height: 88px;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--panel);
  resize: vertical;
  line-height: 1.6;
}
.start-panel textarea:focus { outline: none; border-color: var(--accent); }
.start-panel .row { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.start-panel select {
  flex: 1;
  padding: 9px 10px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--panel);
}
.start-panel .start-btn {
  padding: 10px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.start-panel .start-btn:disabled { background: var(--chip); color: var(--muted); cursor: default; }

/* ---------- 对话页 ---------- */
#chat-page { }
.chat-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px clamp(16px, 5vw, 24px);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  position: sticky;
  top: 0;
  z-index: 10;
}
.chat-topbar .title { flex: 1; min-width: 0; }
.chat-topbar .title .name { font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-topbar .title .path { font-size: 12px; color: var(--muted); font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-topbar .mode-btn {
  border: 1px solid var(--line-2);
  background: var(--panel);
  color: var(--text-2);
  border-radius: 6px;
  font-size: 12px;
  padding: 5px 9px;
  cursor: pointer;
}

/* 会话行：左滑或长按露出「改名」「删除」（DESIGN §4.1），删前二次确认。
   行本身不收窄，右侧腾出 128px 给两个按钮：标题不会被推出去。 */
.session-row-wrap { position: relative; overflow: hidden; display: flex; align-items: stretch; }
.row-actions {
  display: flex;
  flex: 0 0 auto;
  width: 0;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  transition: width .18s ease;
}
.session-row-wrap.open .row-actions { width: 128px; }
.row-actions .row-action {
  flex: 0 0 auto;
  width: 64px;
  border: 0;
  border-left: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}
.row-actions .row-action.danger { color: var(--bad); }
.delete-confirm {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px clamp(12px, 4vw, 20px);
  background: var(--bad-bg);
  color: var(--bad);
  font-size: 13px;
}
.delete-confirm .text { flex: 1; min-width: 0; }
.delete-confirm button {
  border: 1px solid var(--line-2);
  background: var(--panel);
  color: var(--text);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 13px;
  cursor: pointer;
  flex: 0 0 auto;
}
.delete-confirm button.danger { background: var(--bad); border-color: var(--bad); color: #fff; font-weight: 600; }
.rename-input {
  width: 100%;
  font: inherit;
  font-size: 15px;
  padding: 2px 6px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
}

/* 输入区 */
.composer-bar {
  position: sticky;
  bottom: 0;
  background: var(--panel);
  border-top: 1px solid var(--line);
  padding: 10px clamp(16px, 5vw, 24px) calc(10px + env(safe-area-inset-bottom));
  display: block;
}
.composer-bar .composer-row { display: flex; gap: 10px; align-items: flex-end; }

/* 附件：「＋」每次都走同一个输入处，待发小卡排在输入框上方 */
.attach-input { display: none; }
.attach-btn {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text-2);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.attach-btn:disabled { background: var(--panel-2); color: var(--muted); cursor: default; }
.attach-tray { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 8px; }
.attach-tray[hidden] { display: none; }
.attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--chip);
  font-size: 12px;
  color: var(--text-2);
}
.attach-chip .thumb { display: block; width: 34px; height: 34px; object-fit: cover; border-radius: 5px; }
.attach-chip .name { max-width: 12em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-chip .remove {
  border: 0;
  background: none;
  padding: 0 2px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.attach-note { color: var(--warn); font-size: 12px; }
.start-panel .row .attach-btn { width: 40px; height: 40px; }

.timeline {
  flex: 1;
  padding: 8px clamp(16px, 5vw, 24px) 16px;
  overflow-y: auto;
}
.turn { margin-bottom: 12px; }
.msg-user {
  display: flex;
  justify-content: flex-end;
  margin: 8px 0;
}
.msg-user .user-col { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; max-width: 82%; }
.msg-user .bubble {
  max-width: 100%;
  background: var(--accent);
  color: #fff;
  padding: 9px 13px;
  border-radius: 12px 12px 2px 12px;
  font-size: 15px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.msg-assistant {
  /* 阅读类正文：靠字号/行距/留白分层，不用容器 */
  color: var(--text);
  font-size: 16px;
  line-height: 1.75;
  word-break: break-word;
  padding: 4px 0;
}
.msg-assistant p { margin: 0 0 .5em; }
.msg-assistant p:last-child { margin-bottom: 0; }
.msg-assistant h1, .msg-assistant h2, .msg-assistant h3, .msg-assistant h4 {
  font-weight: 500; /* 标题不加粗（R-read-02） */
  margin: 1em 0 .5em;
  letter-spacing: .02em;
}
.msg-assistant h1 { font-size: 1.2em; }
.msg-assistant h2 { font-size: 1.12em; }
.msg-assistant h3, .msg-assistant h4 { font-size: 1.05em; }
.msg-assistant pre {
  background: var(--chip);
  border-radius: 6px;
  padding: 10px 12px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
}
.msg-assistant code { font-family: var(--mono); font-size: .9em; background: var(--chip); padding: 1px 4px; border-radius: 4px; }
.msg-assistant pre code { background: none; padding: 0; }
.msg-assistant ul, .msg-assistant ol { padding-left: 1.4em; margin: .4em 0 .6em; }
.msg-assistant blockquote { border-left: 2px solid var(--line-2); margin: .5em 0; padding-left: 10px; color: var(--text-2); }
.msg-assistant table { border-collapse: collapse; font-size: 14px; }
.msg-assistant th, .msg-assistant td { border: 1px solid var(--line); padding: 5px 9px; }

.work { border-left: 2px solid var(--line-2); margin: 6px 0 6px 6px; padding-left: 10px; }
.tool-call { margin: 6px 0; }
.tool-call .head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.tool-call .summary { font-family: var(--mono); font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.tool-call .detail { display: none; margin-top: 6px; }
.tool-call.open .detail { display: block; }
.tool-call .detail pre {
  background: var(--chip);
  border-radius: 6px;
  padding: 9px 11px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.5;
  margin: 4px 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.tool-call .detail .label { font-size: 12px; color: var(--muted); margin-top: 6px; }
.tool-call .detail .diff-add { color: var(--ok); }
.tool-call .detail .diff-del { color: var(--bad); }
.thinking { font-size: 13px; color: var(--muted); margin: 6px 0; }

.turn-fold {
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 13px;
  padding: 4px 0;
  cursor: pointer;
  text-align: left;
}
.turn-fold:hover { color: var(--text-2); }

/* 输入区（.composer-bar 的版式在同名块里） */
.composer-bar textarea {
  flex: 1;
  min-height: 42px;
  max-height: 132px;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--panel);
  resize: none;
  line-height: 1.5;
}
.composer-bar textarea:focus { outline: none; border-color: var(--accent); }
.composer-bar textarea:disabled { background: var(--panel-2); color: var(--muted); }
.composer-bar .send-btn {
  padding: 10px 16px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  flex: 0 0 auto;
}
.composer-bar .send-btn:disabled { background: var(--chip); color: var(--muted); cursor: default; }

.bubble-attachments { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }

/* 审批卡（替换输入框，同一时间只有一个输入处） */
.approval-card {
  position: sticky;
  bottom: 0;
  background: var(--panel);
  border-top: 1px solid var(--line);
  padding: 12px clamp(16px, 5vw, 24px) calc(12px + env(safe-area-inset-bottom));
}
.approval-card .kind { font-size: 12px; color: var(--warn); font-weight: 600; }
.approval-card .summary { font-family: var(--mono); font-size: 14px; margin: 6px 0; word-break: break-all; line-height: 1.5; }
.approval-card .reason { font-size: 13px; color: var(--text-2); margin: 4px 0 8px; }
.approval-card .input-pre {
  background: var(--chip);
  border-radius: 6px;
  padding: 9px 11px;
  font-family: var(--mono);
  font-size: 12.5px;
  overflow-x: auto;
  margin: 6px 0;
  max-height: 200px;
  overflow-y: auto;
}
.approval-card .detail-toggle {
  border: 0;
  background: none;
  color: var(--accent);
  font-size: 13px;
  padding: 4px 0;
  cursor: pointer;
}
.approval-card .q { margin: 10px 0; }
.approval-card .q .qt { font-size: 14px; margin-bottom: 6px; }
.approval-card .q .opt {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line-2);
  background: var(--panel);
  border-radius: 8px;
  padding: 9px 11px;
  margin-bottom: 6px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text);
}
.approval-card .q .opt.sel { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }
.approval-card .actions { display: flex; gap: 8px; margin-top: 12px; }
.approval-card .actions button {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--line-2);
  background: var(--panel);
  color: var(--text);
}
.approval-card .actions .allow { background: var(--ok); border-color: var(--ok); color: #fff; }
.approval-card .actions .always { background: var(--accent); border-color: var(--accent); color: #fff; }
.approval-card .actions .deny { color: var(--bad); }
.approval-card .deny-reason { width: 100%; margin-top: 8px; padding: 9px 11px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel); }

/* 断线横幅 */
.conn-banner {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--warn-bg);
  color: var(--warn);
  font-size: 13px;
  text-align: center;
  padding: 7px 12px;
}