/* 颜色都定义成变量，深色模式只要换一组变量的值 */
:root {
  --bg: #ffffff;
  --fg: #1f2328;
  --muted: #6e7781;
  --border: #d0d7de;
  --user-bg: #e8f0fe;
  --code-bg: #f3f4f6;
  --accent: #2563eb;
  --accent-fg: #ffffff;
  --error: #c62828;
  --radius: 14px;
  /* 代码高亮的颜色（highlight.js 的 class 用这些变量） */
  --hl-keyword: #cf222e;
  --hl-string: #0a3069;
  --hl-number: #0550ae;
  --hl-comment: #6e7781;
  --hl-title: #8250df;
  --hl-attr: #953800;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17181a;
    --fg: #e6e6e6;
    --muted: #9aa0a6;
    --border: #3a3d41;
    --user-bg: #26334d;
    --code-bg: #24262a;
    --accent: #4f8cff;
    --error: #ff6b6b;
    --hl-keyword: #ff7b72;
    --hl-string: #a5d6ff;
    --hl-number: #79c0ff;
    --hl-comment: #8b949e;
    --hl-title: #d2a8ff;
    --hl-attr: #ffa657;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  /* 页面本身不滚动（只有消息区、对话列表这些「框」在里面滚），
     这样 iPhone 弹出键盘、橡皮筋回弹时，整个页面不会被拖来拖去 */
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
        "Microsoft YaHei", "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent; /* 去掉 iPhone 上点击时那块灰色的高亮 */
  touch-action: manipulation;               /* 关掉双击放大，点按钮不再有延迟 */
}

/* hidden 属性要能真正隐藏元素（下面给 .chat 设了 display:flex，会盖过浏览器默认的 hidden 样式） */
[hidden] { display: none !important; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 14px;
  cursor: pointer;
}
button:disabled { opacity: 0.5; cursor: default; }

.error { color: var(--error); }

/* ---------- 登录页 ---------- */

/* 登录页自己是一个能滚动的框（安装说明比较长，小屏幕可能放不下）。
   内容最宽 360px：用左右内边距把它挤到中间，滚动条仍然在窗口最右边 */
.login {
  height: var(--app-height, 100dvh);
  overflow-y: auto;
  padding: max(10vh, env(safe-area-inset-top)) max(24px, calc((100% - 360px) / 2)) max(24px, env(safe-area-inset-bottom));
}
.guide {
  margin-bottom: 24px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.guide h2 { margin: 0 0 8px; font-size: 18px; }
.guide ol { margin: 0; padding-left: 1.3em; }
.guide li { margin: 6px 0; }
.guide-note { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
button.link {
  margin-top: 8px;
  padding: 0;
  border: none;
  color: var(--accent);
  font-size: 14px;
  text-decoration: underline;
}
.login h1 { margin: 0 0 32px; font-size: 28px; text-align: center; }
.login label { display: block; margin-bottom: 8px; color: var(--muted); }
.login input {
  width: 100%;
  padding: 12px 14px;
  /* 16px 以上：iPhone 上输入框字号小于 16px 时，一点进去整个页面会被自动放大 */
  font: 18px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
  color: inherit;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.login button[type="submit"] {
  width: 100%;
  margin-top: 16px;
  padding: 12px;
  background: var(--accent);
  color: var(--accent-fg);
  border: none;
}
.login .error { min-height: 1.6em; margin: 12px 0 0; }
.login .note { margin-top: 40px; font-size: 13px; color: var(--muted); text-align: center; }

/* ---------- 聊天页：上中下三段，中间的消息区自己滚动 ---------- */

.chat {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh; /* dvh：手机浏览器地址栏伸缩时也是真实的可见高度；不支持的浏览器用上一行的 100vh */
  /* --app-height 是 pwa.js 根据 visualViewport 算出来的「现在真正看得见的高度」，
     iPhone 弹出键盘时它会变小，聊天页跟着变矮，输入框就贴在键盘上面 */
  height: var(--app-height, 100dvh);
}

/* env(safe-area-inset-*)：刘海、圆角、底部 Home 横条占掉的地方。
   index.html 里设了 viewport-fit=cover，页面铺满整个屏幕，所以要自己把内容让开 */
.topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--border);
}
.topbar .title {
  flex: 1;
  min-width: 0; /* 允许在 flex 里缩小，配合下面三行：标题太长时显示省略号 */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  font-size: 15px;
}
#menu { font-size: 18px; line-height: 1; padding: 6px 10px; }

.messages {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain; /* 消息滚到头时，不要带着整个页面一起弹 */
  padding: 16px max(12px, env(safe-area-inset-right)) 24px max(12px, env(safe-area-inset-left));
}

.msg {
  max-width: 760px;
  margin: 0 auto 16px;
  overflow-wrap: anywhere; /* 很长的网址、没有空格的长串也能折行，不会把页面撑宽 */
}
.msg.user {
  width: fit-content;
  max-width: min(85%, 760px);
  margin-right: max(0px, calc((100% - 760px) / 2)); /* 宽屏时和回复区右边对齐 */
  padding: 8px 14px;
  background: var(--user-bg);
  border-radius: var(--radius);
  white-space: pre-wrap; /* 用户输入原样显示，保留换行 */
}
.msg .tail { white-space: pre-wrap; } /* 正在生成的最后一段，先按纯文本显示 */
.msg .error { margin: 8px 0 0; font-size: 14px; }
.msg .error:empty { display: none; } /* 没出错时不占地方 */
.msg.pending .tail:empty::after { content: "…"; color: var(--muted); } /* 还没收到第一个字时 */
.msg.thinking.pending .tail:empty::after { content: "思考中…"; } /* 深度思考时要先想一会儿才出字 */
.msg .badge {
  display: inline-block;
  margin-bottom: 4px;
  padding: 0 8px;
  font-size: 12px;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
}

.composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  border-top: 1px solid var(--border);
}
/* 键盘弹出时，底部 Home 横条被键盘盖住了，不用再给它留位置（pwa.js 会加上这个 class） */
.keyboard-open .composer { padding-bottom: 10px; }
.composer textarea {
  flex: 1;
  resize: none;
  max-height: 160px; /* 多行输入最多长到这么高，再多就在框里滚动（高度由 app.js 自动调整） */
  padding: 9px 12px;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.composer button[type="submit"] {
  padding: 9px 16px;
  background: var(--accent);
  color: var(--accent-fg);
  border: none;
}
/* 「深度思考」开关：关着是普通的边框按钮，开着就用强调色填满 */
.composer .toggle {
  padding: 9px 10px;
  font-size: 14px;
  white-space: nowrap;
  color: var(--muted);
}
.composer .toggle[aria-pressed="true"] {
  color: var(--accent-fg);
  background: var(--accent);
  border-color: var(--accent);
}

/* ---------- Markdown 渲染出来的内容 ---------- */

.msg.assistant > div > :first-child { margin-top: 0; }
.msg.assistant > div > :last-child { margin-bottom: 0; }
.msg h1, .msg h2, .msg h3, .msg h4 { margin: 1.2em 0 0.5em; line-height: 1.3; }
.msg h1 { font-size: 1.4em; }
.msg h2 { font-size: 1.25em; }
.msg h3 { font-size: 1.1em; }
.msg p, .msg ul, .msg ol, .msg blockquote, .msg pre, .msg table { margin: 0.6em 0; }
.msg ul, .msg ol { padding-left: 1.5em; }
.msg blockquote {
  margin-left: 0;
  padding-left: 12px;
  color: var(--muted);
  border-left: 3px solid var(--border);
}
.msg code {
  font: 0.9em ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  background: var(--code-bg);
  padding: 0.1em 0.35em;
  border-radius: 5px;
}
.msg pre {
  position: relative; /* 让「复制」按钮可以定位在右上角 */
  overflow-x: auto;   /* 代码不折行，太长就横向滚动 */
  padding: 12px 14px;
  background: var(--code-bg);
  border-radius: 10px;
  line-height: 1.45;
}
.msg pre code { padding: 0; background: none; }
.msg pre .copy {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 8px;
  font-size: 12px;
  color: var(--muted);
  background: var(--bg);
}

/* 代码高亮：highlight.js 只负责给代码包上带 class 的 <span>，颜色在这里定（深色模式自动换一套） */
.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-literal, .hljs-meta .hljs-keyword { color: var(--hl-keyword); }
.hljs-string, .hljs-regexp, .hljs-template-string, .hljs-meta .hljs-string { color: var(--hl-string); }
.hljs-number, .hljs-symbol, .hljs-bullet, .hljs-variable, .hljs-template-variable { color: var(--hl-number); }
.hljs-comment, .hljs-quote { color: var(--hl-comment); font-style: italic; }
.hljs-title, .hljs-section, .hljs-function .hljs-title, .hljs-title.class_ { color: var(--hl-title); }
.hljs-attr, .hljs-attribute, .hljs-property, .hljs-type, .hljs-params, .hljs-meta { color: var(--hl-attr); }
.hljs-addition { color: var(--hl-string); }
.hljs-deletion { color: var(--hl-keyword); }
.msg table { display: block; overflow-x: auto; border-collapse: collapse; }
.msg th, .msg td { padding: 6px 10px; border: 1px solid var(--border); }
.msg a { color: var(--accent); }
.msg hr { border: none; border-top: 1px solid var(--border); }

/* ---------- 抽屉：对话列表 ---------- */

.backdrop {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 0.4);
  z-index: 10;
}
.drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(82vw, 320px);
  display: flex;
  flex-direction: column;
  /* 抽屉贴着屏幕左边、上边、下边：让开刘海和底部横条 */
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: var(--bg);
  border-right: 1px solid var(--border);
  z-index: 11;
}
.drawer-head { padding: 14px 16px; font-size: 14px; color: var(--muted); border-bottom: 1px solid var(--border); }
.drawer-head .plan,
.drawer-head .quota { margin-top: 4px; font-size: 12px; }
.drawer-head .plan.expired { color: var(--error); }
.drawer-foot { padding: 12px 16px; border-top: 1px solid var(--border); }
.conv-list {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain; /* 列表滚到头时，不要带着后面的页面一起滚 */
  margin: 0;
  padding: 6px 0;
  list-style: none;
}
.conv-list li { display: flex; align-items: center; gap: 4px; padding: 0 8px; }
.conv-list li.current { background: var(--user-bg); }
.conv-list li.empty { padding: 16px; color: var(--muted); }
.conv-list .open {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 8px;
  border: none;
  text-align: left;
}
.conv-list .open span { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.conv-list .open small { color: var(--muted); font-size: 12px; }
.conv-list .delete { border: none; color: var(--muted); font-size: 13px; padding: 6px 8px; }