agent-loft 0.0.0-stage → 0.2.8

package/web/style.css

@@ -0,0 +1,2604 @@
+:root {
+  --bg: #ffffff;
+  --bg-side: #f9f9f9;
+  --bg-soft: #f4f4f4;
+  --bg-hover: #ececec;
+  --bg-input: #ffffff;
+  --fg: #0d0d0d;
+  --fg-soft: #5d5d5d;
+  --fg-faint: #8f8f8f;
+  --border: #e5e5e5;
+  --accent: #2563eb;
+  --accent-fg: #ffffff;
+  --link: #2563eb;
+  --danger: #d93f3f;
+  --warn-bg: #fff7e6;
+  --warn-border: #f5c26b;
+  --ask-bg: #f4f0ff;
+  --ask-border: #b9a6f5;
+  --ok: #1a9d55;
+  --user-bubble: #f0f0f0;
+  --code-bg: #f6f8fa;
+  --shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+  --radius: 14px;
+  --side-w: 272px;
+  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
+    "Helvetica Neue", Arial, sans-serif;
+  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  color-scheme: light dark;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #212121;
+    --bg-side: #171717;
+    --bg-soft: #2a2a2a;
+    --bg-hover: #333333;
+    --bg-input: #303030;
+    --fg: #ececec;
+    --fg-soft: #b4b4b4;
+    --fg-faint: #8a8a8a;
+    --border: #3a3a3a;
+    --link: #60a5fa;
+    --warn-bg: #3a2f1a;
+    --warn-border: #8a6a2a;
+    --ask-bg: #2c2640;
+    --ask-border: #6a58b0;
+    --user-bubble: #303030;
+    --code-bg: #171717;
+    --shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
+  }
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  height: 100%;
+  background: var(--bg);
+  color: var(--fg);
+  font-family: var(--font);
+  font-size: 15px;
+  line-height: 1.6;
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: transparent;
+}
+
+#app {
+  height: 100%;
+  height: 100dvh;
+}
+
+button {
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  border: none;
+  background: none;
+}
+
+input,
+textarea,
+select {
+  font: inherit;
+  color: inherit;
+}
+
+.boot {
+  display: grid;
+  place-items: center;
+  height: 100%;
+  color: var(--fg-faint);
+}
+
+/* ---------- 登录 ---------- */
+
+.auth {
+  display: grid;
+  place-items: center;
+  height: 100%;
+  padding: 24px;
+}
+
+.auth-card {
+  width: 100%;
+  max-width: 360px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.auth-card h1 {
+  font-size: 24px;
+  margin: 0 0 4px;
+  text-align: center;
+}
+
+.auth-card p {
+  margin: 0;
+  color: var(--fg-soft);
+  font-size: 14px;
+  text-align: center;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.field > span {
+  font-size: 13px;
+  color: var(--fg-soft);
+}
+
+/* 设置页的模型 / 思考程度下拉：读取失败时里面会换成文本框 + 提示 */
+.picker {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.field small {
+  color: var(--fg-faint);
+  font-size: 12px;
+}
+
+.input,
+.field input,
+.field select,
+.field textarea {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--bg-input);
+  outline: none;
+}
+
+/* 原生下拉框各平台长得不一样（macOS 上忽略内边距、高度对不齐），统一成和输入框一样的外观 */
+.field select,
+select.input {
+  -webkit-appearance: none;
+  appearance: none;
+  height: 46px;
+  padding: 0 36px 0 12px;
+  line-height: 44px;
+  cursor: pointer;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f8f8f' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  background-size: 14px;
+  text-overflow: ellipsis;
+}
+
+.field select:disabled {
+  cursor: default;
+  opacity: 0.7;
+}
+
+.input:focus,
+.field input:focus,
+.field select:focus,
+.field textarea:focus {
+  border-color: var(--accent);
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 8px 14px;
+  border-radius: 10px;
+  border: 1px solid var(--border);
+  background: var(--bg);
+  font-size: 14px;
+  white-space: nowrap;
+}
+
+.btn:hover {
+  background: var(--bg-hover);
+}
+
+.btn svg {
+  width: 18px;
+  height: 18px;
+}
+
+.btn.primary {
+  background: var(--fg);
+  color: var(--bg);
+  border-color: var(--fg);
+}
+
+.btn.primary:hover {
+  opacity: 0.85;
+}
+
+.btn.accent {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--accent-fg);
+}
+
+.btn.danger {
+  color: var(--danger);
+}
+
+.btn.small {
+  padding: 4px 10px;
+  font-size: 13px;
+  border-radius: 8px;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.error-text {
+  color: var(--danger);
+  font-size: 13px;
+  min-height: 1em;
+}
+
+/* ---------- 布局 ---------- */
+
+.layout {
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+.sidebar {
+  width: var(--side-w);
+  flex-shrink: 0;
+  position: relative;
+  background: var(--bg-side);
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--border);
+  padding-top: env(safe-area-inset-top);
+}
+
+/* 侧栏右边缘的拖动条：hover 时显示一条细线 */
+.side-resizer {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: -4px;
+  width: 8px;
+  cursor: col-resize;
+  z-index: 10;
+  touch-action: none;
+}
+
+.side-resizer::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 3px;
+  width: 2px;
+  background: var(--accent);
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.side-resizer:hover::after,
+.side-resizing .side-resizer::after {
+  opacity: 0.6;
+  transition-delay: 0.1s;
+}
+
+body.side-resizing {
+  cursor: col-resize;
+  user-select: none;
+}
+
+@media (max-width: 768px) {
+  .side-resizer {
+    display: none;
+  }
+}
+
+.side-top {
+  padding: 10px 10px 0;
+  display: flex;
+  gap: 8px;
+}
+
+.side-top .new-chat {
+  flex: 1;
+  justify-content: flex-start;
+  background: transparent;
+  border: none;
+  /* 和下面的会话行同字号、同字重 */
+  padding: 7px 10px;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.side-top .new-chat svg {
+  width: 16px;
+  height: 16px;
+}
+
+.side-top .new-chat:hover {
+  background: var(--bg-hover);
+}
+
+.conv-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 8px 8px;
+}
+
+.conv-group {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  width: 100%;
+  font-size: 13px;
+  color: var(--fg-faint);
+  padding: 14px 10px 6px;
+  text-align: left;
+}
+
+.conv-list > .conv-group:first-child {
+  padding-top: 8px;
+}
+
+/* 分组标题 hover 时显示折叠箭头 */
+.conv-group .chev {
+  display: inline-grid;
+  visibility: hidden;
+  transition: transform 0.15s;
+}
+
+.conv-group .chev svg {
+  width: 12px;
+  height: 12px;
+}
+
+.conv-group:hover .chev {
+  visibility: visible;
+}
+
+.conv-group.collapsed .chev {
+  transform: rotate(-90deg);
+}
+
+button.conv-group:hover {
+  color: var(--fg-soft);
+}
+
+.conv-empty {
+  font-size: 13px;
+  color: var(--fg-faint);
+  padding: 4px 10px;
+}
+
+.conv-more {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: 6px 10px;
+  border-radius: 8px;
+  font-size: 13px;
+  color: var(--fg-faint);
+}
+
+.conv-more:hover {
+  color: var(--fg);
+}
+
+.sub-more .conv-more {
+  padding-left: 36px;
+}
+
+.conv-item .lead {
+  width: 14px;
+  height: 14px;
+  opacity: 0.85;
+}
+
+.conv-item.sub {
+  padding-left: 36px;
+}
+
+.proj-row {
+  position: relative;
+  margin-top: 2px;
+}
+
+.conv-item.proj {
+  gap: 10px;
+}
+
+.proj-icon {
+  display: inline-grid;
+  color: var(--fg-soft);
+  flex-shrink: 0;
+}
+
+.proj-icon svg {
+  width: 18px;
+  height: 18px;
+}
+
+/* 目录行 hover 时右侧出现「在此目录开新对话」 */
+.proj-new {
+  position: absolute;
+  right: 4px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 28px;
+  height: 28px;
+  display: none;
+  place-items: center;
+  border-radius: 50%;
+  color: var(--fg-soft);
+}
+
+.proj-new svg {
+  width: 15px;
+  height: 15px;
+}
+
+.proj-new:hover {
+  background: var(--bg-soft);
+  color: var(--fg);
+}
+
+.proj-row:hover .proj-new {
+  display: grid;
+}
+
+.proj-row:hover .conv-item.proj {
+  padding-right: 36px;
+}
+
+@media (pointer: coarse) {
+  .proj-new {
+    display: grid;
+  }
+}
+
+.conv-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  text-align: left;
+  padding: 7px 10px;
+  border-radius: 8px;
+  font-size: 14px;
+  position: relative;
+}
+
+.conv-item:hover {
+  background: var(--bg-hover);
+}
+
+.conv-item.active {
+  background: var(--bg-hover);
+}
+
+.conv-item .title {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 跑马灯滚动时去掉省略号 */
+.conv-item .title.marquee {
+  text-overflow: clip;
+}
+
+.conv-item .badge {
+  font-size: 11px;
+  color: var(--fg-faint);
+  flex-shrink: 0;
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.dot.busy {
+  background: var(--accent);
+  animation: pulse 1.2s infinite;
+}
+
+.dot.ask {
+  background: #f59f00;
+}
+
+@keyframes pulse {
+  50% {
+    opacity: 0.3;
+  }
+}
+
+.side-bottom {
+  border-top: 1px solid var(--border);
+  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 48px;
+}
+
+.side-gear {
+  margin-left: auto;
+}
+
+/* ---- 侧栏底部的额度 ---- */
+.quota {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+}
+
+.quota-btn {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+  padding: 5px 6px;
+  border-radius: 8px;
+  text-align: left;
+}
+
+.quota-btn:hover {
+  background: var(--bg-hover);
+}
+
+.quota.loading .quota-btn {
+  opacity: 0.6;
+}
+
+.quota-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 11px;
+  color: var(--fg-soft);
+  font-variant-numeric: tabular-nums;
+}
+
+.quota-icon svg {
+  width: 13px;
+  height: 13px;
+}
+
+.quota-icon {
+  display: inline-grid;
+  color: var(--fg-soft);
+  flex-shrink: 0;
+}
+
+.quota-cell {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex: 1;
+  min-width: 0;
+}
+
+.q-label {
+  color: var(--fg-faint);
+  flex-shrink: 0;
+}
+
+.q-bar {
+  flex: 1;
+  min-width: 14px;
+  height: 4px;
+  border-radius: 2px;
+  background: color-mix(in srgb, var(--fg-faint) 22%, transparent);
+  overflow: hidden;
+}
+
+.q-bar i {
+  display: block;
+  height: 100%;
+  border-radius: 2px;
+  background: var(--fg-soft);
+}
+
+.q-pct {
+  flex-shrink: 0;
+  min-width: 26px;
+  text-align: right;
+}
+
+.quota-cell.warn .q-bar i {
+  background: #f59f00;
+}
+
+.quota-cell.danger .q-bar i {
+  background: var(--danger);
+}
+
+.quota-cell.danger .q-pct {
+  color: var(--danger);
+}
+
+/* hover 详情：从底部向上弹出 */
+.quota-tip {
+  position: absolute;
+  left: 0;
+  bottom: calc(100% + 8px);
+  width: 310px;
+  max-width: calc(100vw - 24px);
+  padding: 10px 12px;
+  border-radius: 12px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow);
+  font-size: 12px;
+  color: var(--fg-soft);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(4px);
+  transition: opacity 0.12s, transform 0.12s, visibility 0.12s;
+  pointer-events: none;
+  z-index: 20;
+}
+
+.quota:hover .quota-tip {
+  opacity: 1;
+  visibility: visible;
+  transform: none;
+  transition-delay: 0.25s;
+}
+
+.qt-head {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--fg);
+  margin-bottom: 4px;
+}
+
+.qt-head .agent-icon {
+  display: inline-grid;
+}
+
+.qt-head .agent-icon svg {
+  width: 14px;
+  height: 14px;
+}
+
+.qt-plan {
+  margin-left: auto;
+  font-size: 11px;
+  color: var(--fg-faint);
+  text-transform: capitalize;
+}
+
+.qt-row {
+  display: grid;
+  grid-template-columns: auto auto 1fr;
+  gap: 8px;
+  padding: 2px 0 2px 20px;
+}
+
+.qt-name {
+  color: var(--fg);
+  white-space: nowrap;
+}
+
+.qt-pct.warn {
+  color: #d98200;
+}
+
+.qt-pct.danger {
+  color: var(--danger);
+}
+
+.qt-reset {
+  text-align: right;
+  white-space: nowrap;
+  color: var(--fg-faint);
+}
+
+.qt-extra {
+  padding-left: 20px;
+  color: var(--fg-faint);
+}
+
+.qt-extra.danger {
+  color: var(--danger);
+}
+
+.qt-foot {
+  border-top: 1px solid var(--border);
+  padding-top: 8px;
+  font-size: 11px;
+  color: var(--fg-faint);
+}
+
+
+.main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  position: relative;
+}
+
+.topbar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
+  min-height: 52px;
+  border-bottom: 1px solid transparent;
+  /*
+   * iOS 26+ 的主屏 PWA 会在页面顶端叠一层系统的模糊渐变（Liquid Glass 边缘效果），CSS 关不掉。
+   * WebKit 只在顶端有「fixed / sticky、铺满宽度、高于 10px、纯色不透明」的元素时跳过它，
+   * 并改用这个颜色延伸到状态栏。所以顶栏要 sticky + 不透明底色，不能是普通的流式元素。
+   */
+  background: var(--bg);
+  position: sticky;
+  top: 0;
+  z-index: 5;
+}
+
+/* 保险：主屏 PWA 里再在最顶端放一条 fixed 的纯色细条（同样是为了让 WebKit 跳过边缘模糊）。
+   层级低于顶栏和侧栏，和顶栏同色，看不出来 */
+.edge-strip {
+  display: none;
+}
+
+@media (display-mode: standalone) and (max-width: 768px) {
+  .edge-strip {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: max(12px, env(safe-area-inset-top));
+    background: var(--bg);
+    pointer-events: none;
+    z-index: 4;
+  }
+}
+
+/* 顶栏下沿：渐变 + 模糊，聊天内容滚上去时柔和地消失在顶栏后面 */
+/*
+ * 顶栏浮在聊天内容上面：内容一直滚到窗口顶端，经过顶栏时先变模糊、再淡出到底色，
+ * 没有分界线（参考 Claude 桌面端）。顶栏自身比按钮行高出一截，多出来的部分就是过渡带。
+ * iOS 主屏 PWA 例外，见下面的媒体查询。
+ */
+.topbar {
+  position: absolute;
+  left: 0;
+  right: 0;
+  padding-bottom: 20px;
+  background: linear-gradient(
+    to bottom,
+    var(--bg) 0%,
+    var(--bg) calc(100% - 22px),
+    color-mix(in srgb, var(--bg) 75%, transparent) calc(100% - 13px),
+    color-mix(in srgb, var(--bg) 30%, transparent) calc(100% - 5px),
+    color-mix(in srgb, var(--bg) 0%, transparent) 100%
+  );
+  pointer-events: none;
+}
+
+.topbar > * {
+  pointer-events: auto;
+}
+
+/* 模糊层：上实下虚，越往下越清楚，和渐变叠在一起 */
+.topbar::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
+  mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
+  pointer-events: none;
+}
+
+/* 内容让出顶栏按钮行的高度（.main 前缀是为了压过手机端的 padding 简写） */
+.main .messages-inner {
+  padding-top: calc(72px + env(safe-area-inset-top));
+}
+
+.messages {
+  scroll-padding-top: calc(72px + env(safe-area-inset-top));
+}
+
+/* iOS 主屏 PWA：顶端必须是不透明的 sticky 元素才能避开系统的边缘模糊，回到普通顶栏 + 下方淡出 */
+@media (display-mode: standalone) and (max-width: 768px) {
+  .topbar {
+    position: sticky;
+    padding-bottom: 8px;
+    background: var(--bg);
+  }
+
+  .topbar::before {
+    display: none;
+  }
+
+  .topbar::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 100%;
+    height: 24px;
+    pointer-events: none;
+    background: linear-gradient(
+      to bottom,
+      var(--bg),
+      color-mix(in srgb, var(--bg) 60%, transparent) 40%,
+      color-mix(in srgb, var(--bg) 0%, transparent)
+    );
+  }
+
+  .main .messages-inner {
+    padding-top: 16px;
+  }
+}
+
+.topbar .menu-btn {
+  display: none;
+}
+
+.icon-btn {
+  width: 36px;
+  height: 36px;
+  display: inline-grid;
+  place-items: center;
+  border-radius: 8px;
+  flex-shrink: 0;
+  color: var(--fg-soft);
+}
+
+.icon-btn:hover {
+  background: var(--bg-hover);
+}
+
+.icon-btn svg {
+  width: 20px;
+  height: 20px;
+}
+
+.top-title {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.top-title .conv-name {
+  font-size: 15px;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 0 4px;
+}
+
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 5px 10px;
+  border-radius: 999px;
+  font-size: 14px;
+  font-weight: 500;
+  max-width: 100%;
+  white-space: nowrap;
+}
+
+.pill:hover {
+  background: var(--bg-hover);
+}
+
+
+.pill .sub {
+  color: var(--fg-faint);
+  font-weight: 400;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.pill svg {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}
+
+/* ---------- 消息 ---------- */
+
+.messages {
+  flex: 1;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scroll-behavior: auto;
+}
+
+.messages-inner {
+  max-width: 820px;
+  margin: 0 auto;
+  padding: 16px 20px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.empty {
+  margin: auto;
+  text-align: center;
+  color: var(--fg-soft);
+  padding: 40px 20px;
+}
+
+.empty h2 {
+  font-size: 26px;
+  font-weight: 600;
+  color: var(--fg);
+  margin: 0 0 8px;
+}
+
+/* 新对话的欢迎页：居中图标 + 大标题，目录名可点击切换 */
+.messages-inner:has(> .empty) {
+  min-height: 100%;
+}
+
+.empty.hero {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 22px;
+}
+
+.hero-logo {
+  display: inline-grid;
+  color: color-mix(in srgb, var(--fg-faint) 80%, transparent);
+}
+
+.hero-logo svg {
+  width: 64px;
+  height: 64px;
+}
+
+.empty.hero h2 {
+  font-size: clamp(22px, 4.2vw, 36px);
+  font-weight: 400;
+  line-height: 1.4;
+  letter-spacing: 0.01em;
+  margin: 0;
+}
+
+.hero-dir {
+  font: inherit;
+  color: inherit;
+  max-width: 100%;
+  border-bottom: 1.5px dotted var(--fg-faint);
+  border-radius: 0;
+  padding: 0;
+  word-break: break-all;
+}
+
+.hero-dir:hover {
+  border-bottom-color: var(--fg);
+}
+
+.msg-user {
+  align-self: flex-end;
+  max-width: 85%;
+  background: var(--user-bubble);
+  padding: 10px 16px;
+  border-radius: 20px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.msg-user .origin {
+  display: block;
+  font-size: 12px;
+  color: var(--fg-faint);
+  margin-bottom: 2px;
+}
+
+.msg-user .files {
+  margin-top: 6px;
+  font-size: 13px;
+  color: var(--fg-soft);
+}
+
+.msg-ai {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+}
+
+.steps {
+  font-size: 13px;
+  color: var(--fg-soft);
+}
+
+.steps summary {
+  cursor: pointer;
+  list-style: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 0;
+  user-select: none;
+}
+
+.steps summary::-webkit-details-marker {
+  display: none;
+}
+
+.steps summary::before {
+  content: "›";
+  display: inline-block;
+  transition: transform 0.15s;
+  font-size: 16px;
+  line-height: 1;
+}
+
+.steps[open] summary::before {
+  transform: rotate(90deg);
+}
+
+.steps ol {
+  margin: 4px 0 0;
+  padding: 6px 0 6px 14px;
+  border-left: 2px solid var(--border);
+  list-style: none;
+  font-family: var(--mono);
+  font-size: 12px;
+  white-space: pre-wrap;
+  word-break: break-all;
+  max-height: 320px;
+  overflow-y: auto;
+}
+
+.spinner {
+  width: 12px;
+  height: 12px;
+  border: 2px solid var(--border);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+  display: inline-block;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.thinking {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--fg-faint);
+  font-size: 14px;
+}
+
+.footer-note {
+  font-size: 12px;
+  color: var(--fg-faint);
+}
+
+.notice {
+  align-self: center;
+  font-size: 13px;
+  color: var(--fg-soft);
+  background: var(--bg-soft);
+  padding: 6px 14px;
+  border-radius: 12px;
+  max-width: 90%;
+}
+
+.notice .md p {
+  margin: 0;
+}
+
+.error-box {
+  border: 1px solid var(--danger);
+  color: var(--danger);
+  border-radius: 10px;
+  padding: 8px 12px;
+  font-size: 14px;
+  white-space: pre-wrap;
+}
+
+/* markdown */
+.md {
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}
+
+.md > :first-child {
+  margin-top: 0;
+}
+
+.md > :last-child {
+  margin-bottom: 0;
+}
+
+.md p {
+  margin: 0.6em 0;
+}
+
+.md h1,
+.md h2,
+.md h3,
+.md h4 {
+  margin: 1em 0 0.5em;
+  line-height: 1.35;
+}
+
+.md h1 {
+  font-size: 1.4em;
+}
+
+.md h2 {
+  font-size: 1.25em;
+}
+
+.md h3 {
+  font-size: 1.1em;
+}
+
+.md ul,
+.md ol {
+  padding-left: 1.5em;
+  margin: 0.5em 0;
+}
+
+.md li + li {
+  margin-top: 0.2em;
+}
+
+.md a {
+  color: var(--link);
+}
+
+.md blockquote {
+  margin: 0.6em 0;
+  padding: 0 0 0 12px;
+  border-left: 3px solid var(--border);
+  color: var(--fg-soft);
+}
+
+.md table {
+  border-collapse: collapse;
+  display: block;
+  overflow-x: auto;
+  margin: 0.6em 0;
+  font-size: 14px;
+}
+
+.md th,
+.md td {
+  border: 1px solid var(--border);
+  padding: 6px 10px;
+}
+
+.md th {
+  background: var(--bg-soft);
+}
+
+.md code {
+  font-family: var(--mono);
+  font-size: 0.88em;
+  background: var(--bg-soft);
+  padding: 0.12em 0.35em;
+  border-radius: 5px;
+}
+
+.md pre {
+  position: relative;
+  background: var(--code-bg);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  margin: 0.7em 0;
+  overflow: hidden;
+}
+
+.md pre .code-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 12px;
+  color: var(--fg-faint);
+  padding: 4px 10px;
+  border-bottom: 1px solid var(--border);
+  font-family: var(--font);
+}
+
+.md pre code {
+  display: block;
+  padding: 10px 12px;
+  overflow-x: auto;
+  background: transparent;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.md pre code.hljs {
+  background: transparent;
+}
+
+.copy-btn {
+  font-size: 12px;
+  color: var(--fg-faint);
+  padding: 2px 6px;
+  border-radius: 6px;
+}
+
+.copy-btn:hover {
+  background: var(--bg-hover);
+  color: var(--fg);
+}
+
+.ai-actions {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  /* 只有最后一条回复默认显示，前面的 hover 时才出来；用 opacity 占着位置，免得 hover 时内容跳动 */
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.msg-ai.latest .ai-actions,
+.msg-ai:hover .ai-actions,
+.ai-actions:focus-within {
+  opacity: 1;
+}
+
+/* 触屏没有 hover：都显示，否则前面的回复就没法复制 / 分叉了 */
+@media (hover: none) {
+  .ai-actions {
+    opacity: 1;
+  }
+}
+
+.ai-actions .footer-note {
+  margin-left: 4px;
+}
+
+.conv-item .fork-mark {
+  color: var(--fg-soft);
+}
+
+/*
+ * 分叉树：分叉对话缩进挂在主对话下面，虚线连起来。
+ * 竖线从主对话标题下方往下走，每个分叉一个拐角；最后一个分叉的竖线只画到它的拐角为止。
+ * 行高约 34px（.conv-item 上下 7px + 一行字），拐角在 17px 处。
+ */
+.fork-children {
+  margin-left: 16px;
+}
+
+/* 「项目」里的会话行本身缩进 36px，竖线跟着右移 */
+.fork-children.in-proj {
+  margin-left: 42px;
+}
+
+/* 分叉的分叉：竖线对齐上一层分叉的标题 */
+.fork-node .fork-children {
+  margin-left: 14px;
+}
+
+.fork-children .conv-item,
+.fork-children .conv-item.sub {
+  padding-left: 8px;
+}
+
+.fork-node {
+  position: relative;
+  padding-left: 14px;
+}
+
+.fork-node::before,
+.fork-node::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  border: 0 dashed var(--fg-faint);
+  opacity: 0.7;
+  pointer-events: none;
+}
+
+.fork-node::before {
+  top: 0;
+  bottom: 0;
+  border-left-width: 1px;
+}
+
+/* 第一个分叉的竖线往上接到主对话那一行 */
+.fork-node:first-child::before {
+  top: -6px;
+}
+
+.fork-node:last-child::before {
+  bottom: auto;
+  height: 17px;
+}
+
+.fork-node:first-child:last-child::before {
+  height: 23px;
+}
+
+.fork-node::after {
+  top: 17px;
+  width: 10px;
+  border-top-width: 1px;
+}
+
+.ai-actions .icon-btn {
+  width: 28px;
+  height: 28px;
+}
+
+.ai-actions .icon-btn svg {
+  width: 16px;
+  height: 16px;
+}
+
+/* 交互卡 */
+.ix-card {
+  border: 1px solid var(--warn-border);
+  background: var(--warn-bg);
+  border-radius: var(--radius);
+  padding: 12px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.ix-card.ask {
+  border-color: var(--ask-border);
+  background: var(--ask-bg);
+}
+
+.ix-card.settled {
+  background: var(--bg-soft);
+  border-color: var(--border);
+  opacity: 0.85;
+}
+
+.ix-card .ix-title {
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.ix-card .ix-detail {
+  font-size: 14px;
+  max-height: 340px;
+  overflow: auto;
+}
+
+.ix-card .ix-buttons {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.ix-card .ix-meta {
+  font-size: 12px;
+  color: var(--fg-faint);
+}
+
+.ix-q {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.ix-q .q-head {
+  font-size: 14px;
+}
+
+.ix-q .q-head b {
+  margin-right: 6px;
+}
+
+.opt {
+  text-align: left;
+  border: 1px solid var(--border);
+  background: var(--bg);
+  border-radius: 10px;
+  padding: 8px 12px;
+  font-size: 14px;
+}
+
+.opt:hover {
+  border-color: var(--fg-faint);
+}
+
+.opt.on {
+  border-color: var(--accent);
+  box-shadow: inset 0 0 0 1px var(--accent);
+}
+
+.opt small {
+  display: block;
+  color: var(--fg-soft);
+  font-size: 12px;
+}
+
+/* ---------- 输入框 ---------- */
+
+.composer-wrap {
+  padding: 0 16px calc(12px + env(safe-area-inset-bottom));
+}
+
+.composer-box {
+  max-width: 820px;
+  margin: 0 auto;
+}
+
+/* 输入框上方的灰色上下文条，下沿藏在输入框后面 */
+.ctx-bar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0 14px -22px;
+  padding: 5px 10px 27px;
+  background: var(--bg-soft);
+  border-radius: 16px 16px 0 0;
+  font-size: 14px;
+  color: var(--fg);
+}
+
+.ctx-bar .spacer {
+  flex: 1;
+}
+
+.ctx-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  height: 30px;
+  padding: 0 8px;
+  border-radius: 999px;
+  color: inherit;
+  font: inherit;
+}
+
+.ctx-item .label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+button.ctx-item:hover {
+  background: var(--bg-hover);
+}
+
+.ctx-item.static {
+  flex-shrink: 0;
+}
+
+.ctx-item svg {
+  width: 17px;
+  height: 17px;
+  flex-shrink: 0;
+}
+
+.ctx-bar[hidden] {
+  display: none;
+}
+
+.ctx-item .agent-icon {
+  display: inline-grid;
+  color: var(--fg-soft);
+}
+
+.ctx-item .chev {
+  display: inline-grid;
+  margin-left: -2px;
+}
+
+.ctx-item .chev svg {
+  width: 13px;
+  height: 13px;
+  color: var(--fg-faint);
+}
+
+.composer {
+  background: var(--bg-input);
+  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
+  border-radius: 22px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 4px 16px rgba(0, 0, 0, 0.05);
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.composer .icon-btn {
+  width: 32px;
+  height: 32px;
+}
+
+.composer .icon-btn svg {
+  width: 18px;
+  height: 18px;
+}
+
+.composer .add-btn {
+  color: var(--fg);
+}
+
+.composer .add-btn svg {
+  width: 20px;
+  height: 20px;
+}
+
+/* 输入框里的按钮 hover 都用圆形 / 胶囊底，和圆形发送按钮一致 */
+.composer .icon-btn {
+  border-radius: 50%;
+}
+
+.model-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  max-width: min(260px, 45vw);
+  height: 32px;
+  padding: 0 10px;
+  border-radius: 999px;
+  font-size: 14px;
+  color: var(--fg);
+  white-space: nowrap;
+}
+
+.model-pill:hover {
+  background: var(--bg-hover);
+}
+
+.model-pill .model-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.model-pill .sub {
+  color: var(--fg-faint);
+  flex-shrink: 0;
+}
+
+.model-pill svg {
+  width: 13px;
+  height: 13px;
+  color: var(--fg-faint);
+  flex-shrink: 0;
+}
+
+.composer.drag {
+  border-color: var(--accent);
+}
+
+.composer textarea {
+  border: none;
+  outline: none;
+  background: transparent;
+  resize: none;
+  padding: 14px 16px 4px;
+  max-height: 40vh;
+  min-height: 50px;
+  line-height: 1.5;
+  font-size: 16px; /* iOS 小于 16px 会自动放大页面 */
+}
+
+.composer textarea::placeholder {
+  color: color-mix(in srgb, var(--fg-faint) 70%, transparent);
+}
+
+.composer .chips:not(:empty) {
+  padding: 10px 12px 0;
+}
+
+.composer-row {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px 10px 10px 8px;
+}
+
+.composer-row .spacer {
+  flex: 1;
+}
+
+/* 上下文窗口圆环 + hover 气泡 */
+.ctx-ring-slot {
+  display: inline-flex;
+}
+
+/* 只是个指示器，不可点击：不加 hover 底色 */
+.ctx-ring {
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  width: 22px;
+  height: 32px;
+  margin-right: 2px;
+  cursor: default;
+  outline: none;
+}
+
+/* 视觉修正：旁边模型名是小写英文，字形重心比行框中心低 1px 多（macOS 的 SF 字体尤其明显），
+   圆环按几何居中会显得偏高，往下挪 1px 对齐文字 */
+.ctx-ring .ring {
+  display: inline-grid;
+  transform: translateY(1px);
+}
+
+.ctx-ring svg {
+  width: 13px;
+  height: 13px;
+}
+
+.ctx-ring .track {
+  fill: none;
+  stroke: color-mix(in srgb, var(--fg-faint) 28%, transparent);
+  stroke-width: 2.6;
+}
+
+.ctx-ring .bar {
+  fill: none;
+  stroke: var(--fg-faint);
+  stroke-width: 2.6;
+  stroke-linecap: round;
+}
+
+.ctx-ring.warn .bar {
+  stroke: #f59f00;
+}
+
+.ctx-ring.danger .bar {
+  stroke: var(--danger);
+}
+
+.ctx-ring .tip {
+  position: absolute;
+  bottom: calc(100% + 10px);
+  left: 50%;
+  transform: translate(-50%, 4px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  padding: 10px 16px;
+  border-radius: 12px;
+  background: #1f2023;
+  color: #f2f2f2;
+  font-size: 13px;
+  line-height: 1.5;
+  white-space: nowrap;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.12s, transform 0.12s, visibility 0.12s;
+  pointer-events: none;
+  z-index: 30;
+}
+
+.ctx-ring .tip-title {
+  color: #a8a8a8;
+}
+
+.ctx-ring:hover .tip,
+.ctx-ring:focus-visible .tip {
+  opacity: 1;
+  visibility: visible;
+  transform: translate(-50%, 0);
+}
+
+.model-slot {
+  display: inline-flex;
+  min-width: 0;
+}
+
+.mic-btn.recording {
+  color: var(--danger);
+  background: color-mix(in srgb, var(--danger) 12%, transparent);
+  animation: pulse 1.2s infinite;
+}
+
+.send-btn {
+  width: 30px;
+  height: 30px;
+  flex-shrink: 0;
+  border-radius: 50%;
+  /* 像 GPT 那样：浅色模式黑底白箭头，深色模式反过来 */
+  background: var(--fg);
+  color: var(--bg);
+  display: grid;
+  place-items: center;
+  margin-left: 6px;
+}
+
+.send-btn:disabled {
+  opacity: 0.4;
+}
+
+.send-btn svg {
+  width: 15px;
+  height: 15px;
+}
+
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 0 4px;
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: var(--bg-soft);
+  border-radius: 8px;
+  padding: 4px 8px;
+  font-size: 13px;
+  max-width: 220px;
+}
+
+.chip span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chip button {
+  color: var(--fg-faint);
+}
+
+.composer-hint {
+  text-align: center;
+  font-size: 12px;
+  color: var(--fg-faint);
+  margin-top: 6px;
+}
+
+.conn-banner {
+  position: absolute;
+  top: calc(56px + env(safe-area-inset-top));
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--fg);
+  color: var(--bg);
+  padding: 4px 12px;
+  border-radius: 999px;
+  font-size: 12px;
+  z-index: 5;
+}
+
+/* ---------- 弹层 ---------- */
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 40;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+}
+
+/* ---- 小弹窗（重命名） ---- */
+.dialog-overlay {
+  background: rgba(0, 0, 0, 0.32);
+  animation: fade-in 0.12s ease-out;
+}
+
+.dialog-overlay.leaving {
+  opacity: 0;
+  transition: opacity 0.12s;
+}
+
+.dialog {
+  width: min(420px, 100%);
+  background: var(--bg);
+  border-radius: 18px;
+  padding: 20px 20px 16px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.06);
+  display: flex;
+  flex-direction: column;
+  animation: dialog-in 0.16s cubic-bezier(0.2, 0.9, 0.3, 1.2);
+}
+
+.dialog h3 {
+  margin: 0;
+  font-size: 17px;
+  font-weight: 600;
+}
+
+.dialog-sub {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 6px 0 16px;
+  font-size: 13px;
+  color: var(--fg-faint);
+}
+
+.dialog-sub .agent-icon {
+  display: inline-grid;
+}
+
+.dialog-sub .agent-icon svg {
+  width: 14px;
+  height: 14px;
+}
+
+.rename-input {
+  width: 100%;
+  height: 44px;
+  padding: 0 14px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--bg-input);
+  font-size: 15px;
+  outline: none;
+  transition: border-color 0.12s, box-shadow 0.12s;
+}
+
+.rename-input:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
+}
+
+.dialog-foot {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 18px;
+}
+
+.dialog-foot .btn {
+  min-width: 72px;
+  border-radius: 999px;
+  padding: 8px 18px;
+}
+
+.dialog-foot .btn.ghost {
+  border-color: transparent;
+  background: var(--bg-soft);
+}
+
+.dialog-foot .btn.ghost:hover {
+  background: var(--bg-hover);
+}
+
+.dialog-foot .btn.primary {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--accent-fg);
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes dialog-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96) translateY(6px);
+  }
+}
+
+.modal {
+  background: var(--bg);
+  border-radius: 16px;
+  width: 100%;
+  max-width: 560px;
+  max-height: 86vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--shadow);
+  overflow: hidden;
+}
+
+.modal.wide {
+  max-width: 860px;
+}
+
+.modal-head {
+  display: flex;
+  align-items: center;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--border);
+  gap: 8px;
+}
+
+.modal-head h3 {
+  margin: 0;
+  font-size: 17px;
+  flex: 1;
+}
+
+.modal-body {
+  padding: 14px 16px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.modal-foot {
+  padding: 12px 16px;
+  border-top: 1px solid var(--border);
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.list-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  text-align: left;
+  width: 100%;
+}
+
+button.list-item:hover {
+  background: var(--bg-hover);
+}
+
+.list-item .grow {
+  flex: 1;
+  min-width: 0;
+}
+
+.list-item .t {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.list-item .s {
+  font-size: 12px;
+  color: var(--fg-faint);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.list-item.on {
+  border-color: var(--accent);
+}
+
+/* ----- 目录选择器 ----- */
+.dir-crumbs {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 2px;
+  font-size: 14px;
+}
+
+.dir-crumbs .crumb {
+  padding: 2px 6px;
+  border-radius: 6px;
+  color: var(--accent);
+}
+
+.dir-crumbs .crumb:last-child {
+  color: inherit;
+  font-weight: 600;
+}
+
+.dir-crumbs .crumb:hover {
+  background: var(--bg-hover);
+}
+
+.dir-crumbs .crumb-sep {
+  color: var(--fg-faint);
+}
+
+.dir-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-height: 120px;
+  max-height: 50vh;
+  overflow-y: auto;
+}
+
+.dir-item {
+  padding: 8px 12px;
+}
+
+.dir-item .dir-icon {
+  width: 20px;
+  text-align: center;
+}
+
+.dir-item .dir-chev {
+  color: var(--fg-faint);
+  font-size: 18px;
+}
+
+.dir-manual {
+  flex: 1;
+  min-width: 160px;
+  padding: 8px 12px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--bg-input);
+  outline: none;
+}
+
+.dir-manual:focus {
+  border-color: var(--accent);
+}
+
+.modal-foot .grow {
+  flex: 1;
+}
+
+.menu {
+  position: fixed;
+  z-index: 50;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  box-shadow: var(--shadow);
+  padding: 6px;
+  min-width: 180px;
+  display: flex;
+  flex-direction: column;
+}
+
+.menu button {
+  text-align: left;
+  padding: 8px 12px;
+  border-radius: 8px;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.menu button:hover {
+  background: var(--bg-hover);
+}
+
+/* 贴着按钮弹出的选择面板（模型 / agent） */
+.popover {
+  min-width: 220px;
+  max-width: min(340px, calc(100vw - 16px));
+  max-height: min(70vh, 520px);
+  overflow-y: auto;
+  border-radius: 14px;
+  padding: 6px;
+}
+
+.popover .pop-head {
+  font-size: 12px;
+  color: var(--fg-faint);
+  padding: 6px 12px 4px;
+}
+
+.popover .pop-item {
+  width: 100%;
+  gap: 10px;
+}
+
+.popover .pop-item .grow {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.popover .pop-item .s {
+  font-size: 12px;
+  color: var(--fg-faint);
+  white-space: normal;
+}
+
+.popover .pop-item .check {
+  color: var(--accent);
+  font-weight: 600;
+}
+
+.popover .agent-icon {
+  display: inline-grid;
+  color: var(--fg-soft);
+}
+
+.popover .agent-icon svg {
+  width: 18px;
+  height: 18px;
+}
+
+.popover .effort-seg {
+  display: flex;
+  gap: 2px;
+  margin: 2px 6px 6px;
+  padding: 3px;
+  background: var(--bg-soft);
+  border-radius: 999px;
+}
+
+.popover .effort-seg button {
+  flex: 1;
+  justify-content: center;
+  padding: 5px 10px;
+  border-radius: 999px;
+  font-size: 13px;
+  color: var(--fg-soft);
+}
+
+.popover .effort-seg button.on {
+  background: var(--bg);
+  color: var(--fg);
+  font-weight: 500;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+}
+
+.popover .pop-loading,
+.popover .pop-error {
+  padding: 12px;
+  font-size: 13px;
+  color: var(--fg-soft);
+}
+
+.menu .sep {
+  height: 1px;
+  background: var(--border);
+  margin: 4px 0;
+}
+
+.toast {
+  position: fixed;
+  left: 50%;
+  bottom: calc(110px + env(safe-area-inset-bottom));
+  transform: translateX(-50%);
+  background: var(--fg);
+  color: var(--bg);
+  padding: 8px 16px;
+  border-radius: 10px;
+  font-size: 14px;
+  z-index: 60;
+  max-width: 90vw;
+  white-space: pre-wrap;
+}
+
+/* ---------- 设置 ---------- */
+
+.settings {
+  display: flex;
+  min-height: 0;
+  flex: 1;
+}
+
+.settings-nav {
+  width: 160px;
+  border-right: 1px solid var(--border);
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+.settings-nav button {
+  text-align: left;
+  padding: 8px 10px;
+  border-radius: 8px;
+  font-size: 14px;
+}
+
+.settings-nav button.on {
+  background: var(--bg-hover);
+  font-weight: 600;
+}
+
+.settings-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.section {
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.section h4 {
+  margin: 0;
+  font-size: 15px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.section h4 .grow {
+  flex: 1;
+}
+
+.row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.check {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.status-tag {
+  font-size: 12px;
+  padding: 1px 8px;
+  border-radius: 999px;
+  background: var(--bg-soft);
+  color: var(--fg-soft);
+  font-weight: 400;
+}
+
+.status-tag.ok {
+  color: var(--ok);
+}
+
+.status-tag.bad {
+  color: var(--danger);
+}
+
+.qr {
+  align-self: center;
+  background: #fff;
+  padding: 8px;
+  border-radius: 10px;
+}
+
+.muted {
+  color: var(--fg-faint);
+  font-size: 13px;
+}
+
+/* ---------- 手机 ---------- */
+
+@media (max-width: 768px) {
+  /* 侧栏和遮罩用 absolute 而不是 fixed：iOS PWA 会拿贴着顶部的 fixed 元素给状态栏上色，
+     遮罩一出来状态栏就变暗，关掉后还不恢复 */
+  .sidebar {
+    position: absolute;
+    inset: 0 auto 0 0;
+    z-index: 30;
+    transform: translateX(-100%);
+    transition: transform 0.2s ease;
+    width: min(84vw, 320px);
+    box-shadow: var(--shadow);
+  }
+
+  .layout.side-open .sidebar {
+    transform: none;
+  }
+
+  .layout.side-open .scrim {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.35);
+    z-index: 25;
+  }
+
+  .topbar .menu-btn {
+    display: inline-grid;
+  }
+
+  .messages-inner {
+    padding: 12px 14px 20px;
+  }
+
+  .msg-user {
+    max-width: 90%;
+  }
+
+  .md th,
+  .md td {
+    white-space: nowrap;
+  }
+
+  .composer-wrap {
+    padding: 0 10px calc(8px + env(safe-area-inset-bottom));
+  }
+
+  .composer-hint {
+    display: none;
+  }
+
+  .ctx-bar {
+    margin: 0 10px -22px;
+    font-size: 13px;
+  }
+
+  .hero-logo svg {
+    width: 52px;
+    height: 52px;
+  }
+
+  .overlay {
+    padding: 0;
+    align-items: flex-end;
+  }
+
+  /* 重命名这类小弹窗在手机上也居中，不贴底 */
+  .overlay.dialog-overlay {
+    padding: 16px;
+    align-items: center;
+  }
+
+  .modal,
+  .modal.wide {
+    max-width: none;
+    max-height: 92vh;
+    border-radius: 16px 16px 0 0;
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+
+  .settings {
+    flex-direction: column;
+  }
+
+  .settings-nav {
+    width: auto;
+    flex-direction: row;
+    overflow-x: auto;
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+
+  .settings-nav button {
+    white-space: nowrap;
+  }
+}
+
+/* ---------- 斜杠命令补全 ---------- */
+
+.composer {
+  position: relative;
+}
+
+.slash-menu {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: calc(100% + 8px);
+  max-height: min(360px, 50vh);
+  overflow-y: auto;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  padding: 6px;
+  z-index: 20;
+}
+
+.slash-menu[hidden] {
+  display: none;
+}
+
+.slash-item {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: 8px 10px;
+  border-radius: 8px;
+}
+
+.slash-item.on {
+  background: var(--bg-hover);
+}
+
+.slash-head {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  min-width: 0;
+}
+
+.slash-name {
+  font-family: var(--mono);
+  font-weight: 600;
+}
+
+.slash-args {
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--fg-soft);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.slash-desc {
+  font-size: 12px;
+  color: var(--fg-faint);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.slash-empty {
+  padding: 10px;
+  color: var(--fg-faint);
+  font-size: 13px;
+}
+
+.slash-item .badge,
+.cmd-row .badge {
+  font-size: 11px;
+  padding: 1px 6px;
+  border-radius: 6px;
+  background: var(--bg-soft);
+  color: var(--fg-soft);
+  margin-left: 6px;
+}
+
+/* ---------- 设置 → 命令 ---------- */
+
+.cmd-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-height: 50vh;
+  overflow-y: auto;
+}
+
+.cmd-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--bg-input);
+}
+
+.cmd-row.off {
+  opacity: 0.5;
+}
+
+.cmd-row.dragging {
+  border-color: var(--accent);
+}
+
+.cmd-row .grow {
+  flex: 1;
+  min-width: 0;
+}
+
+.cmd-row .t {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cmd-row .s {
+  font-size: 12px;
+  color: var(--fg-faint);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cmd-grip {
+  cursor: grab;
+  color: var(--fg-faint);
+  user-select: none;
+  letter-spacing: -2px;
+}
+
+.cmd-row input[type="checkbox"] {
+  width: auto;
+}
+
+.brand-icon {
+  display: inline-grid;
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+}
+
+.brand-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* 设置 → Agent：输入框可选模型 */
+.model-checks {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 6px;
+}
+
+.model-checks > small {
+  padding: 4px 6px;
+}
+
+.model-check {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.model-check:hover {
+  background: var(--bg-hover);
+}
+
+.field .model-check input[type="checkbox"] {
+  width: auto;
+  padding: 0;
+  flex-shrink: 0;
+}
+
+.model-check .t {
+  white-space: nowrap;
+}
+
+.model-check .s {
+  margin-left: auto;
+  font-size: 12px;
+  color: var(--fg-faint);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}