:root {
  --bg: #0f1115;
  --bg-2: #161a21;
  --bg-3: #1d222b;
  --line: #2a313c;
  --text: #e6e9ef;
  --text-2: #9aa4b2;
  --accent: #4c8dff;
  --user: #2a3340;
  /* 峰谷配色：高峰=橙，谷=深蓝（与 DeepSeek 计费口径一致） */
  --peak: #ff8a3d;
  --peak-glow: rgba(255, 138, 61, 0.55);
  --valley: #2f6bff;
  --valley-glow: rgba(47, 107, 255, 0.5);
  --danger: #ff5d5d;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
}
.hidden { display: none !important; }
button { cursor: pointer; font-family: inherit; }
select, input, textarea {
  background: var(--bg-3); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 10px; font-size: 13px; outline: none;
}
select:focus, input:focus, textarea:focus { border-color: var(--accent); }

/* ---------- 登录 ---------- */
.login-mask {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 30%, #1a2030, #0a0c10);
}
.login-card {
  width: 320px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 28px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.login-card h1 { margin: 0; font-size: 28px; letter-spacing: 2px; color: var(--accent); }
.login-card .sub { margin: 0 0 8px; color: var(--text-2); font-size: 12px; }
.login-card button {
  background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 10px; font-weight: 600;
}
.err { color: var(--danger); font-size: 12px; min-height: 14px; margin: 0; }

/* ---------- 布局 ---------- */
.app { display: flex; flex-direction: column; height: 100vh; }
.topbar {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--bg-2); border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; color: var(--accent); letter-spacing: 1px; }
.topbar .spacer { flex: 1; }
.topbar button { background: var(--bg-3); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; }
.topbar label.toggle { display: flex; align-items: center; gap: 5px; color: var(--text-2); font-size: 12px; }

.body { flex: 1; display: flex; min-height: 0; }
.sidebar {
  width: 250px; background: var(--bg-2); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; overflow: hidden;
}
.side-head { padding: 10px; }
.side-head button { width: 100%; background: var(--bg-3); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
.chat-list { flex: 1; overflow-y: auto; padding: 0 8px; }
.chat-item {
  padding: 9px 10px; border-radius: 8px; margin-bottom: 4px; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
}
.chat-item:hover { background: var(--bg-3); }
.chat-item.active { background: var(--bg-3); border: 1px solid var(--line); }
.chat-item .t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-item .rename, .chat-item .del { color: var(--text-2); opacity: 0; font-size: 13px; cursor: pointer; padding: 0 2px; }
.chat-item .rename:hover, .chat-item .del:hover { color: var(--accent); }
.chat-item:hover .rename, .chat-item:hover .del { opacity: 1; }
.branch-head { padding: 10px 12px 4px; color: var(--text-2); font-size: 12px; border-top: 1px solid var(--line); }
.branch-list { overflow-y: auto; padding: 0 8px 10px; max-height: 35%; }
.branch-item { padding: 7px 10px; border-radius: 8px; cursor: pointer; color: var(--text-2); display: flex; gap: 6px; align-items: center; }
.branch-item:hover { background: var(--bg-3); color: var(--text); }
.branch-item.active { color: var(--text); background: var(--bg-3); }
.branch-item .bk { color: var(--accent); }

/* ---------- 主区 ---------- */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.conv-view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.messages { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.msg { max-width: 82%; padding: 12px 14px; border-radius: 12px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.msg.user { align-self: flex-end; background: var(--user); border: 2px solid transparent; }
.msg.assistant { align-self: flex-start; background: var(--bg-2); border: 1px solid var(--line); }
.msg .reasoning {
  border-left: 3px solid var(--accent); padding: 4px 10px; margin-bottom: 8px; color: var(--text-2);
  font-size: 12.5px; opacity: .9; background: rgba(76,141,255,.06); border-radius: 4px;
}
.msg .reasoning summary { cursor: pointer; color: var(--text-2); }
.msg .tools { font-size: 12px; color: var(--text-2); border-top: 1px dashed var(--line); margin-top: 8px; padding-top: 6px; }
.msg .fork-btn { margin-top: 8px; font-size: 11px; color: var(--accent); background: none; border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; }
.msg .fork-btn:hover { background: var(--bg-3); }
.msg .placeholder { color: var(--text-2); font-style: italic; }

/* 峰谷发光：user 消息永久保留发送瞬间的颜色框 */
body.period-peak .composer-box { border-color: var(--peak); box-shadow: 0 0 0 1px var(--peak-glow), 0 0 14px var(--peak-glow); animation: peakpulse 2.4s ease-in-out infinite; }
body.period-valley .composer-box { border-color: var(--valley); box-shadow: 0 0 0 1px var(--valley-glow), 0 0 14px var(--valley-glow); animation: valleypulse 2.4s ease-in-out infinite; }
@keyframes peakpulse { 0%,100% { box-shadow: 0 0 0 1px var(--peak-glow), 0 0 10px var(--peak-glow); } 50% { box-shadow: 0 0 0 1px var(--peak-glow), 0 0 20px var(--peak-glow); } }
@keyframes valleypulse { 0%,100% { box-shadow: 0 0 0 1px var(--valley-glow), 0 0 10px var(--valley-glow); } 50% { box-shadow: 0 0 0 1px var(--valley-glow), 0 0 20px var(--valley-glow); } }
.msg.user.peak { border-color: var(--peak); box-shadow: 0 0 10px var(--peak-glow); }
.msg.user.valley { border-color: var(--valley); box-shadow: 0 0 10px var(--valley-glow); }

.composer-wrap { padding: 10px 14px 14px; }
.composer-box { display: flex; gap: 10px; align-items: flex-end; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 8px; transition: border-color .3s; }
.composer-box textarea { flex: 1; border: none; background: transparent; resize: none; min-height: 64px; max-height: 420px; overflow-y: auto; line-height: 1.5; }
.composer-box button { background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 9px 16px; font-weight: 600; }
.hint { color: var(--text-2); font-size: 11px; margin-top: 6px; min-height: 14px; }

/* ---------- 对比 ---------- */
.compare-view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.compare-prompt { padding: 16px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.compare-prompt textarea { min-height: 70px; resize: vertical; }
.cmp-variants { display: flex; flex-direction: column; gap: 8px; }
.cmp-variant { display: flex; gap: 8px; align-items: center; }
.cmp-variant select { flex: 0 0 180px; }
.cmp-variant .rm { background: none; border: none; color: var(--danger); font-size: 16px; }
.compare-prompt button { background: var(--bg-3); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; align-self: flex-start; }
#cmp-run { background: var(--accent); color: #fff; border: none; }
.cmp-cols { flex: 1; display: flex; gap: 12px; overflow: auto; padding: 16px; }
.cmp-col { flex: 1; min-width: 260px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; }
.cmp-col h4 { margin: 0 0 8px; font-size: 13px; color: var(--accent); }
.cmp-col .reasoning { border-left: 3px solid var(--accent); padding: 4px 8px; margin-bottom: 8px; color: var(--text-2); font-size: 12px; white-space: pre-wrap; }
.cmp-col .content { white-space: pre-wrap; line-height: 1.6; flex: 1; }
.cmp-col .usage { color: var(--text-2); font-size: 11px; margin-top: 8px; }

/* ---------- 设置弹窗 ---------- */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; }
.modal-card { width: 360px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.modal-card h3 { margin: 0 0 6px; }
.modal-card label { color: var(--text-2); font-size: 12px; margin-top: 6px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; }
.modal-actions button { padding: 8px 16px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-3); color: var(--text); }
#set-save { background: var(--accent); color: #fff; border: none; }
.sep { border: none; border-top: 1px solid var(--line); margin: 10px 0 2px; }
#set-pw { background: var(--bg-3); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; align-self: flex-start; }

/* ---------- 工作空间弹窗 ---------- */
.ws-card { width: 460px; max-width: 92vw; max-height: 84vh; }
.ws-cur { color: var(--text-2); font-size: 12px; font-weight: 400; }
.ws-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 10px; }
.ws-toolbar button { background: var(--bg-3); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 7px 11px; }
#ws-download { background: var(--accent); color: #fff; border: none; }
.ws-sel { color: var(--text-2); font-size: 12px; margin-left: auto; }
.ws-list { overflow-y: auto; max-height: 46vh; border: 1px solid var(--line); border-radius: 10px; padding: 4px; }
.ws-row { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.ws-row:hover { background: var(--bg-3); }
.ws-row .cb { width: 16px; height: 16px; flex: 0 0 16px; }
.ws-row .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-row .nm.dir { color: var(--accent); font-weight: 600; }
.ws-row .meta { color: var(--text-2); font-size: 11px; flex: 0 0 auto; }
.ws-row .ic { width: 18px; text-align: center; color: var(--text-2); }

/* 滚动条 */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; }