/* ================= DeepSeek 风格手机版 Web 客户端 ================= */
:root {
  --brand: #4d6bfe;
  --brand-deep: #3a55e0;
  --grad-a: #4d6bfe;
  --grad-b: #8a5cff;
  --bg: #ffffff;
  --bg2: #f3f4f9;
  --panel: #ffffff;
  --text: #1a1d29;
  --text2: #868da7;
  --line: #e8eaf2;
  --bubble-user: #4d6bfe;
  --bubble-ai: transparent;
  --code-bg: #f6f8fb;
  --code-head: #eef1f7;
  --reason-bg: #f4f5fa;
  --danger: #f54a45;
  --ok: #16a34a;
  --shadow: 0 8px 30px rgba(0,0,0,.10);
  --radius: 16px;
}
html[data-theme="dark"] {
  --bg: #0f1014;
  --bg2: #16171d;
  --panel: #1a1b22;
  --text: #e8eaf2;
  --text2: #8a8fa3;
  --line: #262833;
  --bubble-user: #3a55e0;
  --code-bg: #12131a;
  --code-head: #1d1f29;
  --reason-bg: #17181f;
  --shadow: 0 8px 30px rgba(0,0,0,.5);
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  background: var(--bg2);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
button { font-family: inherit; border: none; background: none; cursor: pointer; color: inherit; }
input, textarea, select { font-family: inherit; color: inherit; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-thumb { background: rgba(120,128,160,.35); border-radius: 4px; }

/* ============ 手机壳 ============ */
#frame {
  position: relative; width: 100%; height: 100dvh;
  background: var(--bg); overflow: hidden;
  display: flex; flex-direction: column;
}
@media (min-width: 500px) and (min-height: 640px) {
  body { background: linear-gradient(135deg, #dfe4ff 0%, #eef0fb 50%, #e6ddff 100%); }
  html[data-theme="dark"] body { background: #000; }
  #frame {
    width: 420px; height: min(880px, calc(100dvh - 32px));
    border-radius: 36px; box-shadow: 0 20px 60px rgba(40,60,180,.25), 0 0 0 10px #101014, 0 0 0 12px #2c2d36;
  }
}

/* ============ 顶栏 ============ */
.topbar {
  flex: none; height: 52px; display: flex; align-items: center; gap: 4px;
  padding: 0 10px; background: var(--bg); position: relative; z-index: 5;
  border-bottom: 1px solid transparent;
}
.topbar .icon-btn {
  width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; color: var(--text2);
}
.topbar .icon-btn:active { background: var(--bg2); }
.topbar .icon-btn svg { width: 22px; height: 22px; }
.topbar .title {
  flex: 1; text-align: center; font-size: 16px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar .title small { color: var(--text2); font-weight: 400; font-size: 12px; margin-left: 6px; }
.topbar .title .dd { color: var(--text2); font-size: 10px; margin-left: 3px; vertical-align: 1px; }

/* ============ 消息区 ============ */
.chat {
  flex: 1; overflow-y: auto; padding: 12px 14px 8px;
  scroll-behavior: smooth; overscroll-behavior: contain;
}
.welcome {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding-bottom: 120px; user-select: none;
}
.welcome .logo { width: 56px; height: 56px; }
.welcome h1 {
  font-size: 26px; font-weight: 800; letter-spacing: .5px;
  background: linear-gradient(92deg, var(--grad-a), var(--grad-b));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.welcome h2 { font-size: 26px; font-weight: 800; }
.welcome p { color: var(--text2); font-size: 13px; margin-top: 2px; }

.msg { display: flex; gap: 10px; margin: 18px 0; animation: fadein .25s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } }
.msg .avatar {
  flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--bg2);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.msg .avatar svg { width: 24px; height: 24px; }
.msg .body { min-width: 0; max-width: 100%; flex: 1; }
.msg.user { justify-content: flex-end; flex-direction: column; align-items: flex-end; gap: 4px; }
.msg.user .body {
  flex: none; width: fit-content; max-width: 82%;
  background: var(--bubble-user); color: #fff;
  padding: 10px 14px; border-radius: 18px 4px 18px 18px;
  font-size: 15.5px; line-height: 1.55; word-break: break-word; white-space: pre-wrap;
}
.msg.user .msg-actions { justify-content: flex-end; }
.msg.user .images { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; justify-content: flex-end; }
.msg.user .images img { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; }
.msg.assistant .images { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 2px; }
.msg.assistant .images img {
  max-width: min(100%, 340px); width: auto; display: block;
  border-radius: 12px; border: 1px solid var(--line); background: var(--bg2);
}
.msg.assistant .body { max-width: calc(100% - 44px); }

/* 思考 / 搜索 状态块 */
.reasoning { margin-bottom: 6px; border-radius: 12px; background: var(--reason-bg); overflow: hidden; }
.reasoning > .rg-head {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 8px 12px; font-size: 12.5px; color: var(--text2); text-align: left;
}
.reasoning > .rg-head .chev { margin-left: auto; transition: transform .2s; width: 14px; height: 14px; }
.reasoning.open > .rg-head .chev { transform: rotate(180deg); }
.reasoning > .rg-body {
  display: none; padding: 2px 12px 10px; font-size: 13px; color: var(--text2);
  line-height: 1.6; white-space: pre-wrap; word-break: break-word;
}
.reasoning.open > .rg-body { display: block; }
.searching { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 12.5px; color: var(--text2); }
.searching .dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--brand); border-top-color: transparent; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.sources { margin: 8px 0 2px; }
.sources .s-title { font-size: 12px; color: var(--text2); margin-bottom: 6px; }
.sources .s-list { display: flex; flex-wrap: wrap; gap: 6px; }
.sources a {
  font-size: 12px; color: var(--text2); background: var(--bg2); border: 1px solid var(--line);
  padding: 4px 10px; border-radius: 999px; text-decoration: none; max-width: 46%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
sup.ref { font-size: 11px; color: var(--brand); }

/* markdown */
.md { font-size: 15.5px; line-height: 1.7; word-break: break-word; }
.md.streaming::after {
  content: ""; display: inline-block; width: 7px; height: 15px; background: var(--brand);
  border-radius: 2px; vertical-align: -2px; margin-left: 2px; animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.md h1, .md h2, .md h3, .md h4 { margin: 14px 0 8px; line-height: 1.4; }
.md h1 { font-size: 20px; } .md h2 { font-size: 18px; } .md h3 { font-size: 16.5px; } .md h4 { font-size: 15.5px; }
.md p { margin: 8px 0; }
.md ul, .md ol { margin: 8px 0; padding-left: 22px; }
.md li { margin: 3px 0; }
.md blockquote { border-left: 3px solid var(--brand); padding: 2px 12px; margin: 8px 0; color: var(--text2); background: var(--reason-bg); border-radius: 0 8px 8px 0; }
.md code.inline { background: var(--code-bg); border: 1px solid var(--line); padding: 1px 5px; border-radius: 5px; font-size: 13px; font-family: ui-monospace, SFMono-Regular, Consolas, "Courier New", monospace; }
.md hr { border: none; border-top: 1px solid var(--line); margin: 12px 0; }
.md a { color: var(--brand); text-decoration: none; }
.md table { border-collapse: collapse; margin: 10px 0; width: 100%; font-size: 13.5px; display: block; overflow-x: auto; }
.md th, .md td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; }
.md th { background: var(--code-bg); }
.md .codeblock { border-radius: 12px; overflow: hidden; margin: 10px 0; border: 1px solid var(--line); }
.md .codeblock .cb-head {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--code-head); padding: 6px 12px; font-size: 12px; color: var(--text2);
}
.md .codeblock .cb-copy { font-size: 12px; color: var(--text2); padding: 2px 8px; border-radius: 6px; }
.md .codeblock .cb-copy:active { background: rgba(128,128,160,.15); }
.md .codeblock pre { padding: 12px; overflow-x: auto; background: var(--code-bg); }
.md .codeblock pre code { font-family: ui-monospace, SFMono-Regular, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.55; }
.md .err { color: var(--danger); background: rgba(245,74,69,.08); border: 1px solid rgba(245,74,69,.3); border-radius: 10px; padding: 8px 12px; font-size: 13.5px; margin: 6px 0; }

/* 消息操作条 */
.msg-actions {
  display: flex; gap: 4px; margin-top: 6px; opacity: 0; transition: opacity .15s;
}
.msg:hover .msg-actions, .msg-actions.show { opacity: 1; }
@media (hover: none) { .msg-actions { opacity: 1; } }
.msg-actions button {
  display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text2);
  padding: 4px 10px; border-radius: 999px; background: var(--bg2);
}
.msg-actions button:active { background: var(--line); }
.msg-actions svg { width: 13px; height: 13px; }

.file-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.img-preview .file-chip .file-ic { font-size: 20px; line-height: 1; }
.img-preview .file-chip .file-name { font-size: 10.5px; color: var(--text2); max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.file-tag { font-size: 12px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35); padding: 2px 8px; border-radius: 999px; }

/* ============ 底部输入区 ============ */
.composer-wrap { flex: none; padding: 6px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--bg); }
.composer { border: 1px solid var(--line); border-radius: 20px; background: var(--bg); box-shadow: 0 2px 12px rgba(80,90,160,.06); }
html[data-theme="dark"] .composer { background: var(--bg2); }
.composer textarea {
  width: 100%; border: none; outline: none; resize: none; background: transparent;
  padding: 12px 14px 4px; font-size: 15px; line-height: 1.5; max-height: 132px; min-height: 24px;
}
.composer textarea::placeholder { color: var(--text2); }
.composer .bar { display: flex; align-items: center; gap: 6px; padding: 6px 8px 8px; }
.chip {
  display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text2);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; user-select: none;
  transition: all .15s; white-space: nowrap;
}
.chip svg { width: 14px; height: 14px; }
.chip.on { color: var(--brand); border-color: rgba(77,107,254,.5); background: rgba(77,107,254,.08); font-weight: 600; }
.composer .spacer { flex: 1; }
.send-btn {
  width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center; flex: none; transition: all .15s;
}
.send-btn:disabled { background: var(--line); color: var(--text2); }
.send-btn svg { width: 17px; height: 17px; }
.send-btn.stop { background: #1a1d29; border-radius: 8px; }
html[data-theme="dark"] .send-btn.stop { background: #e8eaf2; color: #101014; }
.img-preview { display: flex; gap: 8px; padding: 8px 12px 0; flex-wrap: wrap; }
.img-preview .it { position: relative; width: 64px; height: 64px; }
.img-preview img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.img-preview .rm {
  position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(0,0,0,.65); color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center;
}
.model-tag { font-size: 11px; color: var(--text2); text-align: center; padding: 4px 0 0; user-select: none; }

/* ============ 抽屉 ============ */
.mask {
  position: absolute; inset: 0; background: rgba(0,0,0,.4); z-index: 20;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.mask.show { opacity: 1; pointer-events: auto; }
.drawer {
  position: absolute; top: 0; bottom: 0; left: 0; width: 300px; max-width: 84%;
  background: var(--bg); z-index: 21; display: flex; flex-direction: column;
  transform: translateX(-102%); transition: transform .25s cubic-bezier(.2,.7,.3,1);
  border-radius: 0 20px 20px 0; box-shadow: var(--shadow);
}
.drawer.show { transform: none; }
.drawer .d-head { padding: 14px 14px 8px; }
.drawer .new-chat {
  width: 100%; display: flex; align-items: center; gap: 8px; justify-content: center;
  background: var(--bg2); color: var(--text); font-size: 14.5px; font-weight: 600;
  border-radius: 12px; padding: 11px 0;
}
.drawer .new-chat svg { width: 16px; height: 16px; color: var(--brand); }
.drawer .d-search { margin: 10px 14px 4px; position: relative; }
.drawer .d-search input {
  width: 100%; border: none; outline: none; background: var(--bg2); border-radius: 10px;
  padding: 9px 12px 9px 32px; font-size: 13.5px;
}
.drawer .d-search svg { position: absolute; left: 10px; top: 9px; width: 15px; height: 15px; color: var(--text2); }
.drawer .d-list { flex: 1; overflow-y: auto; padding: 6px 8px; }
.drawer .d-item {
  display: flex; align-items: center; gap: 8px; padding: 11px 12px; border-radius: 12px;
  font-size: 14px; cursor: pointer; position: relative;
}
.drawer .d-item svg { width: 15px; height: 15px; color: var(--text2); flex: none; }
.drawer .d-item .t { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawer .d-item.active { background: var(--bg2); font-weight: 600; }
.drawer .d-item .ops { display: none; gap: 2px; }
.drawer .d-item:hover .ops, .drawer .d-item.active .ops { display: flex; }
.drawer .d-item .ops button { padding: 4px; border-radius: 8px; color: var(--text2); }
.drawer .d-item .ops button svg { width: 14px; height: 14px; color: var(--text2); }
.drawer .d-empty { text-align: center; color: var(--text2); font-size: 13px; padding: 40px 0; }
.drawer .d-foot {
  border-top: 1px solid var(--line); padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px;
}
.drawer .d-foot button { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); padding: 8px 6px; flex: 1; }
.drawer .d-foot svg { width: 18px; height: 18px; color: var(--text2); }

/* ============ 设置页 ============ */
.page {
  position: absolute; inset: 0; background: var(--bg); z-index: 30;
  transform: translateX(100%); transition: transform .25s cubic-bezier(.2,.7,.3,1);
  display: flex; flex-direction: column;
}
.page.show { transform: none; }
.page .p-head {
  flex: none; height: 52px; display: flex; align-items: center; padding: 0 8px; gap: 4px;
  border-bottom: 1px solid var(--line);
}
.page .p-head .back { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--text); }
.page .p-head .back svg { width: 22px; height: 22px; }
.page .p-head .p-title { flex: 1; text-align: center; font-size: 16px; font-weight: 600; margin-right: 44px; }
.page .p-body { flex: 1; overflow-y: auto; padding: 14px 14px 40px; }
.page.nested { z-index: 31; }

.sec { margin-bottom: 18px; }
.sec .sec-t { font-size: 12.5px; color: var(--text2); margin: 0 4px 8px; display: flex; justify-content: space-between; align-items: center; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.cell {
  display: flex; align-items: center; gap: 10px; padding: 13px 14px; font-size: 14.5px;
  border-bottom: 1px solid var(--line); position: relative;
}
.cell:last-child { border-bottom: none; }
.cell .c-label { flex: none; width: 88px; color: var(--text); }
.cell .c-label small { display: block; color: var(--text2); font-size: 11px; margin-top: 2px; }
.cell input[type=text], .cell input[type=password], .cell input[type=number], .cell select, .cell textarea {
  flex: 1; border: none; outline: none; background: transparent; font-size: 14px; min-width: 0; text-align: right;
}
.cell select { appearance: none; direction: rtl; }
.cell textarea { text-align: left; resize: none; line-height: 1.5; }
.cell input::placeholder, .cell textarea::placeholder { color: var(--text2); }
.cell .c-extra { flex: 1; }
.cell.static { cursor: pointer; }
.cell.static:active { background: var(--bg2); }
.cell .chev-r { width: 16px; height: 16px; color: var(--text2); flex: none; }
.cell .sub { font-size: 12px; color: var(--text2); margin-top: 3px; }
.cell.column { flex-direction: column; align-items: stretch; gap: 6px; }
.cell.column .c-label { width: auto; }

.switch { position: relative; width: 44px; height: 26px; flex: none; }
.switch input { display: none; }
.switch .track {
  position: absolute; inset: 0; border-radius: 999px; background: #d5d8e4; transition: background .2s; cursor: pointer;
}
html[data-theme="dark"] .switch .track { background: #33353f; }
.switch .track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; transition: transform .2s; box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.switch input:checked + .track { background: var(--brand); }
.switch input:checked + .track::after { transform: translateX(18px); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 12px; padding: 11px 16px; font-size: 14.5px; font-weight: 600;
}
.btn.primary { background: var(--brand); color: #fff; }
.btn.plain { background: var(--bg2); color: var(--text); }
.btn.danger-plain { background: rgba(245,74,69,.08); color: var(--danger); }
.btn.small { padding: 7px 12px; font-size: 13px; border-radius: 10px; font-weight: 500; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; }

.cap-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cap-tags .cap {
  font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line);
  color: var(--text2); user-select: none;
}
.cap-tags .cap.on { color: var(--brand); border-color: rgba(77,107,254,.5); background: rgba(77,107,254,.08); font-weight: 600; }
.model-item { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.model-item:last-child { border-bottom: none; }
.model-item .m-row { display: flex; align-items: center; gap: 8px; }
.model-item .m-name { font-size: 14.5px; font-weight: 600; }
.model-item .m-id { font-size: 12px; color: var(--text2); margin-top: 2px; word-break: break-all; }
.model-item .m-ops { margin-left: auto; display: flex; gap: 2px; flex: none; }
.model-item .m-ops button { padding: 5px; color: var(--text2); border-radius: 8px; }
.model-item .m-ops svg { width: 15px; height: 15px; }
.model-item .m-caps { margin-top: 8px; }
.badge-default { font-size: 10.5px; color: var(--brand); border: 1px solid rgba(77,107,254,.4); padding: 1px 6px; border-radius: 999px; margin-left: 6px; }

/* 提供商卡片 */
.prov-item { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
.prov-item:last-child { border-bottom: none; }
.prov-item:active { background: var(--bg2); }
.prov-item .p-ic {
  width: 38px; height: 38px; border-radius: 11px; background: rgba(77,107,254,.1); color: var(--brand);
  display: flex; align-items: center; justify-content: center; flex: none; font-weight: 800; font-size: 16px;
}
.prov-item .p-name { font-size: 14.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.prov-item .p-meta { font-size: 12px; color: var(--text2); margin-top: 2px; }
.prov-item .radio { margin-left: auto; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); flex: none; }
.prov-item.active .radio { border-color: var(--brand); background: radial-gradient(circle, var(--brand) 42%, transparent 46%); }

/* 弹窗 */
.modal-mask {
  position: absolute; inset: 0; background: rgba(0,0,0,.45); z-index: 40;
  display: flex; align-items: flex-end; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .2s;
}
.modal-mask.show { opacity: 1; pointer-events: auto; }
.modal {
  width: 100%; max-height: 78%; background: var(--bg); border-radius: 20px 20px 0 0;
  display: flex; flex-direction: column; transform: translateY(40px); transition: transform .25s cubic-bezier(.2,.7,.3,1);
}
.modal-mask.show .modal { transform: none; }
@media (min-width: 500px) { .modal { max-width: 420px; margin-bottom: 12px; border-radius: 20px; } }
.modal .mo-head { padding: 16px 18px 8px; font-size: 16px; font-weight: 700; display: flex; align-items: center; }
.modal .mo-head .mo-x { margin-left: auto; color: var(--text2); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; }
.modal .mo-body { flex: 1; overflow-y: auto; padding: 6px 18px 18px; }
.modal .mo-foot { padding: 10px 18px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: flex; gap: 10px; }
.pick-item { display: flex; align-items: center; gap: 10px; padding: 11px 4px; border-bottom: 1px solid var(--line); font-size: 14px; }
.pick-item:last-child { border-bottom: none; }
.pick-item .pk-check {
  width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--line); flex: none;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.pick-item.on .pk-check { background: var(--brand); border-color: var(--brand); }
.pick-item .pk-id { word-break: break-all; }
.pick-item .pk-sub { font-size: 11.5px; color: var(--text2); margin-top: 2px; }

/* toast */
.toast {
  position: absolute; left: 50%; bottom: 110px; transform: translateX(-50%) translateY(10px);
  background: rgba(20,22,30,.92); color: #fff; font-size: 13.5px; padding: 10px 18px;
  border-radius: 999px; z-index: 60; opacity: 0; pointer-events: none; transition: all .25s;
  max-width: 82%; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: rgba(200,40,40,.95); }

.empty-tip { text-align: center; color: var(--text2); font-size: 13px; padding: 30px 0; }
.link-btn { color: var(--brand); font-size: 13px; font-weight: 600; }