/* 全站样式：设计 token 与切片阅读同源（暗色唯一主题，琥珀主色，衬线正文/无衬线界面）。
   单列 520px 居中、移动优先——手机随手丢是主场景。 */

:root {
  --color-bg: #09090b;
  --color-panel: #18181b;
  --color-panel2: #27272a;
  --color-ink: #fafafa;
  --color-ink2: #a1a1aa;
  --color-ink3: #52525b;
  --color-accent: #f59e0b;
  --color-accent2: #fbbf24;
  --color-danger: #f87171;
  --color-danger-bg: rgba(239, 68, 68, 0.15);
  --color-ok: #34d399;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-reading: "Noto Serif SC", "Source Han Serif SC", "SimSun", Georgia, serif;
}

* { box-sizing: border-box; }
* { -webkit-tap-highlight-color: transparent; }
/* hidden 属性靠 UA 样式 display:none 生效，作者样式的 display 会顶掉它——全局兜底，
   显隐只靠 hidden 属性切换，不混用 style.display */
[hidden] { display: none !important; }

button {
  font-family: inherit;
  color: inherit;
  background: none;
  border: 0;
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font-ui);
  background: var(--color-bg);
  color: var(--color-ink);
  color-scheme: dark;
}
::selection { background: rgba(245, 158, 11, 0.35); }
a { color: var(--color-accent); }

.shell {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  min-height: 100dvh;
  /* 底部留白＝Tab 栏高度＋iPhone 底部安全区，内容不被固定栏压住 */
  padding: 16px 16px calc(72px + env(safe-area-inset-bottom));
}

/* —— 顶栏 —— */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0 14px;
}
.brand { font-size: 20px; font-weight: 700; }
.brand-sub { margin-left: 8px; font-size: 13px; font-weight: 400; color: var(--color-ink2); }

/* —— 卡片与按钮 —— */
.card {
  background: var(--color-panel);
  border: 1px solid var(--color-panel2);
  border-radius: 14px;
  padding: 14px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--color-panel2);
  color: var(--color-ink);
  cursor: pointer;
}
.btn:active { opacity: 0.85; }
.btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: #18181b; }
.btn-ghost { background: transparent; }
.btn-danger { color: var(--color-danger); border-color: var(--color-danger); }
.btn:disabled { opacity: 0.5; }

input, textarea {
  width: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-panel2);
  border-radius: 10px;
  color: var(--color-ink);
  font-family: inherit;
  font-size: 15px;
  padding: 10px 12px;
}
input:focus, textarea:focus { outline: none; border-color: var(--color-accent); }
textarea { resize: vertical; line-height: 1.6; }

/* —— 收件捕获区 —— */
.capture { display: flex; flex-direction: column; gap: 10px; }
.capture-row { display: flex; gap: 8px; align-items: center; }
.capture-row .label-input { flex: 1; min-width: 0; font-size: 14px; padding: 8px 10px; }
.file-btn {
  flex: none;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid var(--color-panel2);
  font-size: 14px;
  color: var(--color-ink2);
  cursor: pointer;
}

/* —— 过滤 chips —— */
.chips { display: flex; gap: 8px; padding: 14px 0 10px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--color-panel2);
  font-size: 13px;
  color: var(--color-ink2);
  cursor: pointer;
}
.chip.active { border-color: var(--color-accent); color: var(--color-accent); }

/* —— 条目列表 —— */
.item-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.item-card {
  display: block;
  background: var(--color-panel);
  border: 1px solid var(--color-panel2);
  border-radius: 14px;
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
}
.item-card:active { border-color: var(--color-ink3); }
.item-head { display: flex; align-items: center; gap: 8px; }
.item-title {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item-excerpt {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-ink2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.item-meta { margin-top: 8px; font-size: 12px; color: var(--color-ink3); display: flex; gap: 10px; }
.item-error { margin-top: 6px; font-size: 12px; color: var(--color-danger); }

/* —— 状态徽标 —— */
.badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--color-panel2);
  color: var(--color-ink2);
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.st-ready { color: var(--color-ok); border-color: rgba(52, 211, 153, 0.4); }
.badge.st-processing { color: var(--color-accent2); border-color: rgba(251, 191, 36, 0.4); }
.badge.st-processing .dot { animation: pulse 1.2s ease-in-out infinite; }
/* 待本机抓取（档③）：等家里执行器领活，慢速呼吸点（与「处理中」的节奏区分开） */
.badge.st-queued { color: var(--color-accent); border-color: rgba(245, 158, 11, 0.4); }
.badge.st-queued .dot { animation: pulse 3s ease-in-out infinite; }
.badge.st-failed { color: var(--color-danger); border-color: rgba(248, 113, 113, 0.4); }
@keyframes pulse { 50% { opacity: 0.25; } }

/* —— 状态行 / 空态 / 提示 —— */
.state-line { text-align: center; font-size: 14px; color: var(--color-ink3); padding: 40px 0; }
.empty { text-align: center; font-size: 14px; color: var(--color-ink3); padding: 48px 16px; line-height: 1.8; }
.msg { border-radius: 10px; padding: 10px 12px; font-size: 14px; margin: 10px 0; }
.msg.error { background: var(--color-danger-bg); color: var(--color-danger); }
.msg.ok { background: rgba(52, 211, 153, 0.12); color: var(--color-ok); }

/* —— 登录页 —— */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100dvh; padding: 24px 16px; }
.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--color-panel);
  border: 1px solid var(--color-panel2);
  border-radius: 16px;
  padding: 28px 22px;
}
.login-card h1 { margin: 0; font-size: 24px; }
.login-card .subtitle { margin: 8px 0 18px; font-size: 13px; color: var(--color-ink2); line-height: 1.6; }
.login-card form { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.login-card button[type="submit"] {
  margin-top: 4px;
  padding: 11px;
  border-radius: 10px;
  background: var(--color-accent);
  color: #18181b;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.login-card button[type="submit"]:disabled { opacity: 0.5; }
.switch { margin: 14px 0 0; font-size: 13px; text-align: center; }
.switch a { color: var(--color-ink2); }
.switch a:active { color: var(--color-accent); }

/* —— 条目详情 —— */
.detail-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.detail-title { flex: 1; margin: 0; font-size: 20px; line-height: 1.45; }
.detail-meta { font-size: 13px; color: var(--color-ink3); display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.prose {
  font-family: var(--font-reading);
  font-size: 16px;
  line-height: 1.95;
  letter-spacing: 0.02em;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}
.shot { width: 100%; border-radius: 12px; border: 1px solid var(--color-panel2); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* —— AI 归类建议面板 —— */
.suggest-card {
  border: 1px solid rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.06);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 12px 0;
}
.suggest-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.suggest-name { font-size: 14px; font-weight: 700; color: var(--color-accent2); }
.suggest-rows { display: flex; flex-direction: column; gap: 4px; }
.srow { display: flex; gap: 10px; font-size: 13px; line-height: 1.7; }
.sk { flex: none; width: 44px; color: var(--color-ink3); }
.sv { flex: 1; min-width: 0; word-break: break-word; }
.suggest-actions { display: flex; gap: 8px; margin-top: 10px; }
.suggest-actions .btn { padding: 7px 12px; font-size: 13px; }
.icon-btn {
  font-size: 13px;
  color: var(--color-ink2);
  border: 1px solid var(--color-panel2);
  border-radius: 8px;
  padding: 5px 10px;
  cursor: pointer;
}
.back-link { display: inline-block; margin-bottom: 14px; font-size: 14px; color: var(--color-ink2); text-decoration: none; }

/* —— 我的页 —— */
.me-section { margin-bottom: 14px; }
.me-section h2 { margin: 0 0 8px; font-size: 15px; }
.me-section .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.me-section .row input { flex: 1; min-width: 140px; }
.stat-row { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; color: var(--color-ink2); }
.stat-row b { color: var(--color-ink); font-size: 18px; margin-right: 4px; }
.codes {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.9;
  background: var(--color-bg);
  border: 1px solid var(--color-panel2);
  border-radius: 10px;
  padding: 12px;
  white-space: pre-wrap;
  word-break: break-all;
}
.hint { font-size: 12px; color: var(--color-ink3); line-height: 1.7; }

/* —— 知识库：库页与笔记页 —— */
.lib-section { margin-bottom: 16px; }
.lib-section h2 { margin: 0 0 8px; font-size: 15px; color: var(--color-ink2); font-weight: 600; }
.person-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: var(--color-panel);
  border: 1px solid var(--color-panel2);
  border-radius: 12px;
  margin-bottom: 8px;
  text-decoration: none;
  color: inherit;
}
.person-row:active { border-color: var(--color-ink3); }
.person-name { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-kind { font-size: 12px; color: var(--color-ink3); }
.person-count { font-size: 12px; color: var(--color-ink3); }
.zone-flag { font-size: 11px; color: var(--color-danger); border: 1px solid rgba(248, 113, 113, 0.4); border-radius: 999px; padding: 1px 7px; }

.layer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.layer-cell {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 14px;
  background: var(--color-panel);
  border: 1px solid var(--color-panel2);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
}
.layer-cell:active { border-color: var(--color-ink3); }
.layer-cell.wide { grid-column: 1 / -1; }
.layer-name { flex: 1; font-size: 14px; font-weight: 600; }
.layer-n { font-size: 13px; color: var(--color-ink3); }

.search-row { display: flex; gap: 8px; margin-bottom: 12px; }
.search-row input { flex: 1; }

.note-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.note-card {
  display: block;
  padding: 11px 14px;
  background: var(--color-panel);
  border: 1px solid var(--color-panel2);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
}
.note-card:active { border-color: var(--color-ink3); }
.note-card.zoned { border-color: rgba(248, 113, 113, 0.35); }
.note-title { font-size: 15px; font-weight: 600; line-height: 1.5; word-break: break-word; }
.note-meta { margin-top: 6px; font-size: 12px; color: var(--color-ink3); display: flex; flex-wrap: wrap; gap: 10px; }
.note-body-head { margin-top: 6px; font-size: 13px; color: var(--color-ink2); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* —— Markdown 渲染 —— */
.md { font-family: var(--font-reading); font-size: 16px; line-height: 1.95; letter-spacing: 0.02em; word-break: break-word; }
.md-h { font-family: var(--font-ui); line-height: 1.5; margin: 20px 0 8px; }
.md-h:first-child { margin-top: 0; }
.md-p { margin: 0 0 12px; }
.md-list { margin: 0 0 12px; padding-left: 22px; }
.md-list li { margin-bottom: 4px; }
.md-quote { margin: 0 0 12px; padding: 6px 12px; border-left: 3px solid var(--color-ink3); color: var(--color-ink2); }
.md-pre {
  margin: 0 0 12px;
  padding: 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-panel2);
  border-radius: 10px;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.7;
  white-space: pre;
}
.md code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--color-panel2);
  border-radius: 5px;
  padding: 1px 5px;
}
.md-pre code { background: none; padding: 0; }
.md-hr { border: 0; border-top: 1px solid var(--color-panel2); margin: 18px 0; }
.md-img { max-width: 100%; border-radius: 10px; border: 1px solid var(--color-panel2); display: block; margin: 8px 0; }

/* —— 笔记编辑 —— */
.edit-body { min-height: 320px; font-family: var(--font-reading); font-size: 15px; line-height: 1.9; }
.edit-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.edit-grid .field { flex: 1; min-width: 140px; }
.edit-grid label { display: block; font-size: 12px; color: var(--color-ink3); margin-bottom: 4px; }
select {
  width: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-panel2);
  border-radius: 10px;
  color: var(--color-ink);
  font-family: inherit;
  font-size: 15px;
  padding: 10px 12px;
}
select:focus { outline: none; border-color: var(--color-accent); }
.zone-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-ink2); margin: 10px 0; }
.zone-toggle input { width: auto; }

/* —— 底部 Tab 栏（site/tabs.js 渲染，登录页不引入）—— */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: rgba(9, 9, 11, 0.92);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-panel2);
  padding-bottom: env(safe-area-inset-bottom); /* 全面屏底部横条不压文字 */
}
.tabbar-inner { display: flex; max-width: 520px; margin: 0 auto; }
.tab {
  flex: 1;
  position: relative;
  padding: 14px 4px 15px;
  text-align: center;
  font-size: 13px;
  color: var(--color-ink3);
  text-decoration: none;
}
.tab:active { color: var(--color-ink2); }
.tab.active { color: var(--color-accent); font-weight: 600; }
.tab.active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--color-accent);
}

/* 收件箱卡片上的「已入库」标记：这条已经进知识库了 */
.archived-flag {
  font-size: 11px;
  color: var(--color-ok);
  border: 1px solid rgba(52, 211, 153, 0.4);
  border-radius: 999px;
  padding: 1px 7px;
}

/* ================= 对话页 /（2026-10-15 收件箱升级为 AI 聊天界面） =================
   消息区与输入条由共享聊天库驱动（vendor 自 ai_chat_ui，类名前缀 .ac-）。
   本段只做两件事：① 页面外壳（顶栏/议题头/议题列表/上传按钮）② 把共享库的
   --ac-* 主题变量映射到本项目 token——共享库不含本项目的配色。 */
.chat-page {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-width: 520px;
  margin: 0 auto;
  /* 底部固定 Tab 栏（.tab 的 14+15 内边距与行高 ≈47px）＋全面屏安全区；
     聊天输入条要落在 Tab 栏上方，安全区由本层统一留，composer 不再重复留 */
  padding-bottom: calc(47px + env(safe-area-inset-bottom));
}
.chat-top {
  flex: none;
  padding: 12px 16px 0;
  border-bottom: 1px solid var(--color-panel2);
}
.chat-topbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chat-actions { display: flex; align-items: center; gap: 6px; }
.chat-act {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--color-panel2);
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-ink2);
  text-decoration: none;
  cursor: pointer;
}
.chat-act:active { border-color: var(--color-accent); color: var(--color-accent); }

/* 议题头（续聊形态）：标题 + 改名 + 删除 */
.chat-topic { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.chat-topic-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-topic-tools { flex: none; display: flex; gap: 10px; }
.chat-tool { padding: 0; font-size: 12px; color: var(--color-ink3); cursor: pointer; }
.chat-tool:active { color: var(--color-accent); }
.chat-tool-danger:active { color: var(--color-danger); }
/* 就地改名输入框（prompt() 在受控 webview 不可用）：≥16px 防 iOS 聚焦放大 */
.chat-rename-input {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  font-size: 16px;
  color: var(--color-ink);
  background: var(--color-panel);
  border: 1px solid var(--color-accent);
  border-radius: 8px;
}

/* 共享聊天 UI 容器：填满头部以下的剩余高度（.ac 内部自管三段式布局） */
.chat-main { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* —— 主题桥：共享聊天 UI 的变量 → 本项目 token —— */
.chat-main .ac {
  --ac-bg: transparent;
  --ac-panel: var(--color-panel);
  --ac-panel2: var(--color-panel2);
  --ac-ink: var(--color-ink);
  --ac-ink2: var(--color-ink2);
  --ac-ink3: var(--color-ink3);
  --ac-accent: var(--color-accent);
  --ac-danger: var(--color-danger);
  --ac-ok: var(--color-ok);
  --ac-font-ui: var(--font-ui);
  --ac-font-reading: var(--font-reading);
  --ac-radius: 12px;
}
/* 助手气泡用衬线正文（本项目的阅读观感口径）；引用条去掉共享库的 📖 图标，用入口箭头 */
.chat-main .ac-assistant .ac-bubble { font-family: var(--font-reading); }
.chat-main .ac-ref::before { content: "↗ "; }
/* 输入条贴底：安全区已由 .chat-page 统一留，这里只留自身间距 */
.chat-main .ac-composer { padding-bottom: 10px; }

/* 截图上传按钮（插在输入框左侧、胶囊 .ac-inputbar 内）：与胶囊同族的圆形素按钮。
   2026-10-16 胶囊化改造后重做——老样式是 40×40 方角（配旧版裸输入框），塞进胶囊里
   比发送键还大、方角对圆角。尺寸/圆角与 .ac-send 对齐，负左边距抵消胶囊的
   padding-left（14px 是按纯文字排版留的，按钮打头时显得空）。 */
.chat-upload {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-left: -8px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-ink2);
  font-size: 13px;
  cursor: pointer;
}
.chat-upload:active { color: var(--color-accent); }
.chat-upload:disabled { opacity: 0.5; }

/* 议题列表（插在消息区顶部）：空态默认展开，发消息后自动收起 */
.chat-topics {
  margin: 0 0 14px;
  padding: 10px 12px;
  background: var(--color-panel);
  border-radius: 12px;
  max-height: 40vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.chat-topics-label { margin: 0 0 8px; font-size: 12px; color: var(--color-ink3); }
.chat-topics-empty { margin: 0; font-size: 13px; line-height: 1.6; color: var(--color-ink3); }
.chat-topic-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  margin-bottom: 6px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--color-bg);
  cursor: pointer;
}
.chat-topic-item:active { border-color: var(--color-panel2); }
.chat-topic-item:last-child { margin-bottom: 0; }
.chat-topic-item-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-topic-item-meta { display: block; margin-top: 3px; font-size: 11px; color: var(--color-ink3); }

.chat-alert { margin: 0 16px 8px; }