/* ═══════════════════════════════════════════════
   DeepSeek 聊天 · 软萌风界面
   樱花粉 + 薰衣草紫，大圆角柔和阴影；聊天区按微信式
   左右头像布局，自己的消息在右、对方在左。
   ═══════════════════════════════════════════════ */

:root {
  /* 这几个是「主题变量」，由 JS 按当前主题灌进来。
     下面的派生色一律用 color-mix 算，省掉一整套 JS 颜色运算。 */
  --accent: #ff8fbe;
  --accent-2: #cdb9ff;
  --bg: #fff7fb;
  --bubble-me-color: #ffc6de;
  --bubble-me-color2: #cdb9ff;
  --bubble-ai: #ffffff;
  --text: #5c4a55;
  --radius-bubble: 20px;
  --bg-photo: none;
  --bg-photo-dim: 0;

  /* 派生色 */
  --accent-strong: color-mix(in srgb, var(--accent) 80%, #000);
  --accent-soft: color-mix(in srgb, var(--accent) 16%, #fff);
  --text-soft: color-mix(in srgb, var(--text) 74%, var(--panel));
  --border: color-mix(in srgb, var(--accent) 20%, #fff);
  --border-soft: color-mix(in srgb, var(--accent) 10%, #fff);

  --panel: #ffffff;
  --panel-soft: color-mix(in srgb, var(--bg) 55%, #fff);
  --bubble-me: linear-gradient(135deg, var(--bubble-me-color) 0%, var(--bubble-me-color2) 100%);
  --bubble-error: #fff0f0;
  --mint: #9fe3c8;

  --shadow-sm: 0 2px 6px rgba(40, 60, 80, 0.04);
  --shadow-md: 0 8px 24px rgba(40, 60, 80, 0.08);
  --shadow-lg: 0 20px 50px rgba(100, 80, 110, 0.2);

  --radius-card: 26px;
  --radius-pill: 999px;

  --avatar: 42px;
  --sidebar-w: 256px;
}

.quote-preview { display: flex; align-items: center; gap: 12px; padding: 10px 24px; border-top: 1px solid var(--border); background: var(--panel); color: var(--text-soft); }
.quote-preview[hidden] { display: none; }
#quote-preview-text { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }
.message-quote { margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid var(--accent); border-radius: 6px; background: var(--panel-soft); font-size: 13px; }
.message-quote div { max-height: 110px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
#provider-add-preset { width: 100%; margin: 12px 0; }
#provider-add-preset[hidden] { display: none; }
.model-usage-card > .danger { justify-self: end; }

/* 深色主题：面板与描边整体翻过来，否则一片白底会刺眼 */
body[data-dark='1'] {
  --panel: #232833;
  --panel-soft: #1c2029;
  --border: color-mix(in srgb, var(--accent) 26%, #2a2f3a);
  --border-soft: color-mix(in srgb, var(--accent) 14%, #2a2f3a);
  --accent-soft: color-mix(in srgb, var(--accent) 22%, #1c2029);
  --text-soft: color-mix(in srgb, var(--text) 55%, #6b7280);
  --bubble-error: #3a2226;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.38);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.5);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", system-ui,
    -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

/* 背景照片，以及覆在它上面的一层底色 ——
   没有遮罩的话，浅色文字压在花哨照片上会看不清。两层都在内容之下。 */
body::before,
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

body::before {
  background-image: var(--bg-photo);
  background-size: cover;
  background-position: center;
}

body::after {
  background: var(--bg);
  opacity: var(--bg-photo-dim);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

.muted {
  color: var(--text-soft);
  font-size: 13px;
}

.block {
  width: 100%;
}

/* ── 布局 ───────────────────────────────────── */

.layout {
  display: flex;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.sidebar {
  flex: 0 0 var(--sidebar-w);
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: color-mix(in srgb, var(--panel) 76%, transparent);
  backdrop-filter: blur(12px);
  border-right: 1px solid var(--border);
}

/* 宽屏下可以把侧栏收起来：负边距让它整体滑出视口，既不占宽度也不盖住对话区。
   移动端不走这套 —— 那边侧栏本来就是抽屉，由 .open 类控制。 */
@media (min-width: 769px) {
  .sidebar {
    transition: margin-left 0.24s ease;
  }

  body.sidebar-collapsed .sidebar {
    margin-left: calc(-1 * var(--sidebar-w));
  }
}

.sidebar-head {
  display: flex;
  gap: 8px;
  padding: 20px 16px 14px;
}

.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 24px 20px 0; }
.sidebar-brand strong { display: block; font-size: 17px; letter-spacing: 1px; }
.sidebar-brand span { display: block; font-size: 11px; color: var(--text-soft); }
.sidebar-head .btn { padding: 10px 16px; }
.sidebar-foot .btn { text-align: center; justify-content: center; border: 0; background: var(--panel-soft); color: var(--text); }

.conversation-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 10px 10px;
  min-height: 0;
}

.sidebar-foot {
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* ── 顶栏 ───────────────────────────────────── */

.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  padding-top: calc(12px + env(safe-area-inset-top));
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.topbar-title {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.topbar-title > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d9cbd4;
  transition: background 0.3s, box-shadow 0.3s;
}

.dot.online {
  background: var(--mint);
  box-shadow: 0 0 0 3px rgba(159, 227, 200, 0.28);
}

.dot.busy {
  background: #ffd98a;
  box-shadow: 0 0 0 3px rgba(255, 217, 138, 0.3);
}

.dot.offline {
  background: #ffa8a8;
  box-shadow: 0 0 0 3px rgba(255, 168, 168, 0.28);
}

/* 顶栏右上角：当前对话用的智能体，双击可换 */
.topbar-agent {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--panel);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(135deg, var(--bubble-me-color) 0%, var(--accent-2) 100%);
  transition: transform 0.16s, box-shadow 0.16s;
  user-select: none;
  -webkit-user-select: none;
}

.topbar-agent:hover {
  transform: scale(1.06);
  box-shadow: var(--shadow-md);
}

.topbar-agent img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── 会话列表项 ─────────────────────────────── */

.conv {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 16px;
  cursor: pointer;
  border: 1.5px solid transparent;
  margin-bottom: 4px;
  transition: background 0.16s, border-color 0.16s, transform 0.16s;
}

.conv:hover {
  background: var(--panel);
  transform: translateX(2px);
}

.conv.active {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 32%, var(--panel));
  box-shadow: var(--shadow-sm);
}

.conv-body {
  flex: 1;
  min-width: 0;
}

.conv-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
}

.conv-meta {
  color: var(--text-soft);
  font-size: 12px;
}

.conv-del {
  flex: 0 0 auto;
  opacity: 0;
  border: 0;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  padding: 2px 7px;
  border-radius: 50%;
  line-height: 1.2;
  font-size: 13px;
  transition: opacity 0.16s, background 0.16s, color 0.16s;
}

.conv:hover .conv-del,
.conv.active .conv-del {
  opacity: 1;
}

.conv-del:hover {
  color: #fff;
  background: #ff9bb5;
}

.empty-tip {
  padding: 28px 14px;
  text-align: center;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.9;
}

/* ── 消息区（微信式左右头像布局） ───────────── */

.messages {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 28px max(24px, calc((100% - 920px) / 2)) 18px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.msg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 100%;
}

/* 自己的消息：头像靠右，气泡也靠右 */
.msg.user {
  flex-direction: row-reverse;
}

/* ── 头像 ───────────────────────────────────── */

.avatar {
  flex: 0 0 var(--avatar);
  width: var(--avatar);
  height: var(--avatar);
  border-radius: 50%;
  background: var(--panel);
  border: 2px solid var(--panel);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  line-height: 1;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar.ai {
  background: linear-gradient(135deg, #e8f6ff 0%, #f0e8ff 100%);
}

.avatar.me {
  background: linear-gradient(135deg, #ffe8f2 0%, #efe6ff 100%);
}

/* ── 气泡 ───────────────────────────────────── */

.bubble {
  position: relative;
  max-width: min(720px, calc(100% - var(--avatar) - 24px));
  padding: 14px 18px;
  background: var(--bubble-ai);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
  overflow-wrap: anywhere;
  /* 靠近头像的那一角收窄，形成微信式的指向感 */
  border-radius: 6px var(--radius-bubble) var(--radius-bubble) var(--radius-bubble);
}

.msg.user .bubble {
  background: var(--bubble-me);
  border-color: color-mix(in srgb, var(--bubble-me-color) 60%, #fff);
  color: var(--text);
  border-radius: var(--radius-bubble) 6px var(--radius-bubble) var(--radius-bubble);
}

/* 气泡填充方式：默认渐变，另有纯色与描边 */
body[data-bubble-fill='solid'] .msg.user .bubble {
  background: var(--bubble-me-color);
}

body[data-bubble-fill='outline'] .msg.user .bubble {
  background: transparent;
  border: 2px solid var(--bubble-me-color);
}

.msg.error .bubble {
  background: var(--bubble-error);
  border-color: #ffd0d0;
  color: #b4515c;
}

.msg.interrupted .bubble::after {
  content: "（已中断）";
  color: var(--text-soft);
  font-size: 12px;
  margin-left: 6px;
}

/* ── 思考气泡：独立一条，排在回答上方 ───────── */

.thinking-bubble {
  max-width: min(660px, 74%);
  padding: 10px 14px;
  border-radius: 6px var(--radius-bubble) var(--radius-bubble) var(--radius-bubble);
  background: var(--panel-soft);
  border: 1px solid var(--border-soft);
  color: var(--text-soft);
  font-size: 13px;
}

.thinking-head {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-align: left;
}

.thinking-head:hover {
  color: var(--accent-strong);
}

.thinking-caret {
  font-size: 11px;
  opacity: 0.7;
}

.thinking-body {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-soft);
  white-space: pre-wrap;
  line-height: 1.7;
  color: var(--text-soft);
  max-height: 320px;
  overflow-y: auto;
}

.thinking-body[hidden] {
  display: none;
}

/* ── 代码 ───────────────────────────────────── */

.bubble pre.code {
  margin: 9px 0;
  padding: 12px 14px;
  background: var(--panel-soft);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
}

.bubble code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: 0.92em;
}

.bubble code:not(pre code) {
  background: var(--accent-soft);
  color: var(--accent-strong);
  padding: 2px 6px;
  border-radius: 7px;
}

.msg.user .bubble code:not(pre code) {
  background: rgba(255, 255, 255, 0.55);
  color: #8a4a72;
}

.bubble strong {
  font-weight: 700;
}

.bubble p { margin: 0 0 10px; }
.bubble p:last-child { margin-bottom: 0; }

.cursor::after {
  content: "▍";
  color: var(--accent);
  animation: blink 1s steps(2, start) infinite;
}

@keyframes blink {
  to {
    visibility: hidden;
  }
}

/* ── 空状态 ─────────────────────────────────── */

.welcome {
  margin: auto;
  text-align: center;
  color: var(--text-soft);
  max-width: 460px;
  padding: 20px;
  line-height: 2;
}

.welcome .welcome-emoji {
  font-size: 52px;
  display: block;
  margin-bottom: 10px;
}

.welcome p {
  margin: 4px 0;
}

.welcome .welcome-title {
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
}

/* ── 输入区 ─────────────────────────────────── */

.composer {
  padding: 16px max(24px, calc((100% - 920px) / 2)) calc(14px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
}

.composer-form {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

#input {
  flex: 1;
  resize: none;
  max-height: 180px;
  min-height: 46px;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1.5px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  line-height: 1.6;
  outline: none;
  transition: border-color 0.16s, box-shadow 0.16s;
}

#input::placeholder {
  color: var(--text-soft);
}

#input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.composer-hint {
  min-height: 18px;
  margin-top: 6px;
  color: var(--text-soft);
  font-size: 12px;
  padding-left: 4px;
}

/* ── 待发送的图片缩略图 ─────────────────────── */

.pending-images {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 0 10px 4px;
}

.pending-images[hidden] {
  display: none;
}

.pending-image {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--panel);
  box-shadow: var(--shadow-sm);
}

.pending-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pending-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pending-remove:hover {
  background: #e5534b;
}

/* ── 气泡里的图片 ───────────────────────────── */

.bubble-images {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  /* 图片居中：单张时占满看不出差别，多张时明显更整齐 */
  justify-content: center;
  margin-bottom: 6px;
}

.bubble-image {
  /* 用 min() 双保险：既不超过设定值，也绝不超过气泡内容宽度。
     只写死像素值的话，窄屏上图片会把气泡撑满，把头像挤到边缘贴住。 */
  max-width: min(220px, 100%);
  max-height: 220px;
  border-radius: 12px;
  cursor: zoom-in;
  display: block;
  object-fit: cover;
}

.bubble-image:only-child {
  max-width: min(320px, 100%);
  max-height: 320px;
}

/* 多图：等尺寸方形缩略图，每行两张。
   容器宽度按两列算好（缩略图两倍 + 一个间距），气泡就刚好贴合图片块 ——
   不写死的话，flex 的 max-content 会把气泡撑到 660px 上限，
   四张图时图片两侧各空出 90px，看着像被"左右隔开"。
   想看未裁切的完整图点一下，灯箱给的是原图。 */
.bubble-images.multi {
  --thumb: 220px;
  --thumb-gap: 4px;
  width: calc(var(--thumb) * 2 + var(--thumb-gap));
  max-width: 100%;
  gap: var(--thumb-gap);
  margin-inline: auto;
}

.bubble-images.multi .bubble-image {
  width: var(--thumb);
  height: var(--thumb);
  flex: 0 0 auto;
  max-width: none;
  max-height: none;
}

/* 点开看大图 */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  cursor: zoom-out;
}

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
}

/* 气泡内右下角那行小字：这一轮用了多少 token */
.bubble-usage {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.2;
  color: var(--text-soft);
  opacity: 0.8;
  text-align: right;
  font-variant-numeric: tabular-nums;
  user-select: none;
}

/* ── 气泡操作栏（气泡外面、下方那排小图标） ───── */

/* 绝对定位挂在气泡下方外侧 —— 不占流内空间，气泡宽度也不受它影响 */
.bubble-foot {
  position: absolute;
  top: 100%;
  left: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 4px;
  opacity: 0;
  transition: opacity 0.18s ease;
}

/* 有操作栏的气泡往下让出位置（栏不占流内空间，留白得靠这里） */
.bubble.has-foot {
  margin-bottom: 30px;
}

/* 鼠标落进气泡（含操作栏自身）或键盘 Tab 进来时才浮现 */
.bubble:hover .bubble-foot,
.bubble-foot:focus-within {
  opacity: 1;
}

/* 图标按钮：灰调小方块，密度照参考图来（22px 触发区装 15px 图标） */
.copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 0;
  padding: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.copy-btn:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--text-soft) 18%, transparent);
}

/* 「重新生成」靠 hidden 属性决定这条该不该有 ——
   上面的 display 会盖掉 hidden 的默认样式，必须显式补回来 */
.copy-btn[hidden] {
  display: none;
}

/* 触屏没有 hover —— 整排常显，否则手机上根本点不到 */
@media (hover: none) {
  .bubble-foot {
    opacity: 1;
  }
}

/* 代码块右上角的复制：电脑上悬停才浮出来，免得盖住代码 */
.bubble pre.code {
  position: relative;
}

.code-copy {
  position: absolute;
  top: 6px;
  right: 6px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 1px 8px;
  background: var(--panel);
  color: var(--text-soft);
  font-size: 11px;
  line-height: 1.5;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}

/* 鼠标进到气泡范围内就浮出来 —— 不必精确悬停到代码块本身 */
.bubble:hover .code-copy,
.code-copy:focus-visible {
  opacity: 1;
}

/* 触屏没有 hover —— 常显，否则手机上根本点不到 */
@media (hover: none) {
  .code-copy {
    opacity: 1;
  }
}

/* 顶栏那枚会话累计徽章 */
.usage-total {
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-soft);
  background: color-mix(in srgb, var(--text-soft) 12%, transparent);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.usage-total[hidden] {
  display: none;
}

/* ── 按钮 ───────────────────────────────────── */

.btn {
  border: 1.5px solid var(--border);
  background: var(--panel);
  border-radius: 12px;
  padding: 10px 20px;
  cursor: pointer;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: transform 0.14s, box-shadow 0.14s, background 0.14s, border-color 0.14s;
  white-space: nowrap;
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn:active:not(:disabled) {
  transform: translateY(0);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn.primary {
  background: linear-gradient(135deg, var(--accent-strong), color-mix(in srgb, var(--accent) 70%, var(--accent-strong)));
  border-color: var(--accent);
  color: #fff;
  text-shadow: 0 1px 2px rgba(120, 90, 110, 0.25);
}

.btn.ghost {
  background: transparent;
  box-shadow: none;
  border-color: var(--border);
  color: var(--text-soft);
}

.btn.ghost:hover:not(:disabled) {
  color: var(--accent-strong);
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: none;
}

.btn.danger {
  background: transparent;
  border-color: #ffd3d3;
  color: #d9707c;
  box-shadow: none;
}

/*
 * 「从文档导入人设」+「删除这个智能体」：等宽两格。
 *
 * 原先用 .row.gap.spread，两个按钮按文字长度自适应，宽度不等也不成列。
 * 改成一比一的 grid 后，窄屏上每格只有约 145px，而 .btn 默认
 * `white-space: nowrap`，最长的「从文档导入人设」会直接顶出格子。
 * 所以这里必须同时允许换行、收窄内边距、略微缩小字号。
 * grid 默认让同一行的两项等高，因此左边换行、右边不换行时两格仍对齐。
 */
.btn-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.btn-pair .btn {
  width: 100%;
  padding: 10px 10px;
  font-size: 13px;
  white-space: normal;
  line-height: 1.3;
}

.icon-btn {
  border: 1.5px solid var(--border);
  background: var(--panel);
  border-radius: 14px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
  box-shadow: var(--shadow-sm);
  color: var(--text-soft);
  transition: color 0.14s, border-color 0.14s;
}

.icon-btn:hover {
  color: var(--accent-strong);
  border-color: #ffd0e4;
}

/* ── 弹层与卡片 ─────────────────────────────── */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(120, 90, 110, 0.28);
  backdrop-filter: blur(6px);
}

.overlay[hidden] {
  display: none;
}

.card {
  width: 100%;
  max-width: 440px;
  background: var(--panel);
  border-radius: var(--radius-card);
  padding: 26px;
  box-shadow: var(--shadow-lg);
  max-height: 90vh;
  overflow-y: auto;
}

.card h1,
.card h2 {
  margin: 0 0 16px;
  font-size: 19px;
  letter-spacing: 0.3px;
}

.brand {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 20px;
}

.brand h1 {
  margin: 0;
}

.brand p {
  margin: 0;
}

.field {
  display: block;
  margin-bottom: 16px;
}

.field > span {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-soft);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: var(--panel-soft);
  outline: none;
  transition: border-color 0.16s, box-shadow 0.16s;
}

.field textarea {
  resize: vertical;
  min-height: 84px;
  line-height: 1.65;
  font-family: inherit;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* 两个并排的短字段（我和助手的名字） */
.field-row {
  display: flex;
  gap: 12px;
}

.field-row .field {
  flex: 1;
  min-width: 0;
}

/* ── 头像与智能体 ───────────────────────────── */

/* 「我」那一行：头像 + 名字 + 恢复按钮并排 */
.me-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 16px;
}

.me-row .field {
  margin-bottom: 0;
}

.field.grow {
  flex: 1;
  min-width: 0;
}

.avatar-preview {
  flex: 0 0 auto;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 3px solid var(--panel);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  cursor: pointer;
  overflow: hidden;
  background: linear-gradient(135deg, #ffe8f2 0%, #efe6ff 100%);
  transition: transform 0.16s, box-shadow 0.16s;
}

.avatar-preview:hover {
  transform: scale(1.06);
  box-shadow: var(--shadow-lg);
}

.avatar-preview.ai {
  background: linear-gradient(135deg, #e8f6ff 0%, #f0e8ff 100%);
}

.avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.slot-reset {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--text-soft);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0 0 4px;
  text-decoration: underline dotted;
}

.slot-reset:hover {
  color: var(--accent-strong);
}

/* 分区标题：左标题 + 右操作 */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 10px;
  font-weight: 700;
}

.btn.small {
  padding: 6px 14px;
  font-size: 13px;
}

/* 智能体卡片列表 */
.agent-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  min-height: 40px;
}

.agent-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 7px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  background: var(--panel);
  cursor: pointer;
  transition: border-color 0.16s, background 0.16s, transform 0.16s;
}

.agent-chip:hover {
  transform: translateY(-1px);
}

.agent-chip.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.agent-chip .chip-avatar {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  background: #fff;
}

.agent-chip .chip-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.agent-chip .chip-name {
  font-size: 13px;
  font-weight: 600;
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 胶囊里名字下面那行模型摘要：两个智能体各用不同模型时要一眼能分辨 */
.agent-chip .chip-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.agent-chip .chip-model {
  font-size: 10px;
  line-height: 1.3;
  color: var(--text-soft);
  max-width: 132px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 智能体自己的默认模型：与人设之间留一道缝 */
.agent-model {
  margin-top: 4px;
  margin-bottom: 16px;
}

.agent-model .field-row .field {
  margin-bottom: 0;
}

/* 当前智能体的详情区 */
.agent-detail {
  padding: 16px;
  border-radius: 18px;
  background: var(--panel-soft);
  margin-bottom: 18px;
}

.row.gap.spread {
  justify-content: space-between;
}

/* ── 主题编辑区 ─────────────────────────────── */

.theme-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.theme-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px 6px 8px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  background: var(--panel);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: border-color 0.16s, box-shadow 0.16s, transform 0.16s;
}

.theme-chip:hover {
  transform: translateY(-1px);
}

.theme-chip.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.theme-chip .swatch {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--panel);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.color-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 9px 5px;
  border-radius: 14px;
  background: var(--panel-soft);
  font-size: 11px;
  color: var(--text-soft);
}

.color-field input[type='color'] {
  width: 100%;
  height: 30px;
  padding: 0;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.color-field input[type='color']::-webkit-color-swatch-wrapper {
  padding: 2px;
}

.color-field input[type='color']::-webkit-color-swatch {
  border: 0;
  border-radius: 6px;
}

input[type='range'] {
  width: 100%;
  accent-color: var(--accent);
}

.field span b {
  color: var(--accent-strong);
}

.switch-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--panel-soft);
  margin-bottom: 10px;
}

.switch-row small.block {
  margin-top: 2px;
}

/* display: flex 会静默废掉元素上的 hidden 属性（本项目踩过的坑，
   守卫在 test/frontend-wiring.test.js）—— 所以补一条同名兜底 */
.switch-row[hidden] {
  display: none;
}

.switch-row input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: var(--accent);
  flex: 0 0 auto;
  margin-top: 3px;
  cursor: pointer;
}

.info-box {
  background: var(--panel-soft);
  border-radius: 16px;
  padding: 14px 16px;
  font-size: 13px;
  color: var(--text-soft);
  margin-bottom: 18px;
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.9;
}

.row {
  display: flex;
  align-items: center;
}

.row.gap {
  gap: 10px;
  justify-content: flex-end;
}

.error-text {
  color: #d9707c;
  font-size: 13px;
  margin: 0 0 14px;
}

/* ── 提示条 ─────────────────────────────────── */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(26px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 80;
  max-width: min(90vw, 520px);
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  background: var(--panel);
  box-shadow: var(--shadow-lg);
  font-size: 14px;
  font-weight: 600;
}

.toast[hidden] {
  display: none;
}

.toast.error {
  background: #fff0f1;
  color: #c05561;
}

/* ── 抽屉与遮罩（窄屏） ─────────────────────── */

.only-mobile {
  display: none;
}

.scrim {
  position: fixed;
  inset: 0;
  z-index: 25;
  background: rgba(120, 90, 110, 0.3);
}

.scrim[hidden] {
  display: none;
}

@media (max-width: 768px) {
  body {
    overflow: hidden;
  }

  .layout {
    position: fixed;
    top: var(--app-top, 0px);
    left: 0;
    right: 0;
    height: var(--app-height, 100dvh);
  }

  /* 16px 避免 iPhone 聚焦输入框时自动放大页面。 */
  input, select, textarea {
    font-size: 16px;
  }

  #input {
    min-width: 0;
  }

  .overlay {
    top: var(--app-top, 0px);
    bottom: auto;
    height: var(--app-height, 100dvh);
    padding: 12px;
  }

  .overlay .card {
    max-height: 100%;
  }

  .overlay .login-card {
    overflow-y: auto;
  }

  :root {
    --avatar: 38px;
  }

  .only-mobile {
    display: inline-flex;
  }

  /* 窄屏上再收一道：图片小一点，气泡就不会顶到头像 */
  .bubble-image {
    max-width: min(170px, 100%);
    max-height: 200px;
  }

  .bubble-image:only-child {
    max-width: min(230px, 100%);
    max-height: 280px;
  }

  /* 多图缩略图再收一档：两列共 2×108+4=220，360px 宽的气泡也放得下 */
  .bubble-images.multi {
    --thumb: 108px;
  }

  /* 头像与气泡之间的间距不能被吃掉 —— 太窄会显得头像贴在图片上 */
  .msg {
    gap: 8px;
  }

  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    width: min(84vw, var(--sidebar-w));
    flex-basis: auto;
    transform: translateX(-102%);
    transition: transform 0.24s ease;
    box-shadow: var(--shadow-lg);
    padding-top: env(safe-area-inset-top);
  }

  .sidebar.open {
    transform: none;
  }

  .messages {
    padding: 14px 12px 6px;
    gap: 14px;
  }

  .bubble {
    max-width: 78%;
  }

  .composer {
    padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
  }
}

/* 尊重「减少动态效果」的系统偏好 */
@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .dot,
  .cursor::after,
  .btn,
  .conv,
  .avatar-preview {
    transition: none;
    animation: none;
  }
}

/* ── 首页（还没打开会话时） ─────────────────── */

.home {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 18px 40px;
}

.home[hidden],
.main[data-view='chat'] .home {
  display: none;
}

/* 首页状态下把消息区和对话输入框收起来，免得跟首页的大输入框并存两个 */
.main[data-view='home'] .messages,
.main[data-view='home'] .composer {
  display: none;
}

.home-inner {
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.home-avatar {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  border: 4px solid var(--panel);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(135deg, var(--bubble-me-color) 0%, var(--accent-2) 100%);
  transition: transform 0.16s, box-shadow 0.16s;
  user-select: none;
  -webkit-user-select: none;
}

.home-avatar:hover {
  transform: scale(1.04);
}

.home-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-title {
  margin: 20px 0 18px;
  font-size: 23px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.home-title b {
  color: var(--accent-strong);
  font-weight: 700;
}

/* 智能体胶囊行 */
.home-agents {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 16px;
}

.home-agent {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px 7px 8px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  background: var(--panel);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.16s, transform 0.16s, box-shadow 0.16s;
}

.home-agent:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.home-agent.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.home-agent .chip-avatar {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  background: var(--panel-soft);
}

.home-agent .chip-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 最近的对话 */
.home-convs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 20px;
  width: 100%;
}

.home-conv {
  max-width: 220px;
  padding: 8px 14px;
  border-radius: 14px;
  border: 1.5px solid var(--border-soft);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  transition: border-color 0.16s, background 0.16s;
}

.home-conv:hover {
  border-color: var(--accent);
  background: var(--panel);
}

.home-conv .conv-name {
  display: block;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-conv .conv-sub {
  display: block;
  color: var(--text-soft);
  font-size: 11px;
  margin-top: 2px;
}

.home-empty {
  color: var(--text-soft);
  font-size: 13px;
}

/* 首页的大输入框 */
.home-composer {
  width: 100%;
  background: var(--panel);
  border: 1.5px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow-md);
  padding: 14px 16px 12px;
  text-align: left;
}

.home-composer:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-md);
}

.home-composer textarea {
  width: 100%;
  border: 0;
  outline: none;
  background: none;
  resize: none;
  max-height: 180px;
  min-height: 46px;
  line-height: 1.6;
  font-size: 15px;
  color: var(--text);
}

.home-composer textarea::placeholder {
  color: var(--text-soft);
}

.home-composer-foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.home-composer-foot .muted { margin-right: auto; font-size: 12px; }
.archived-delete { border: 0; background: transparent; color: #be5264; padding: 8px 4px; cursor: pointer; font-size: 12px; flex: 0 0 auto; }
.provider-added-models { display: grid; gap: 6px; margin: 10px 0; }
.added-model-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--panel-soft); border: 1px solid var(--border-soft); }
.added-model-name { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.model-kind { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--text-soft); }
.model-kind input { margin: 0; accent-color: var(--accent); }
.model-row-action { border: 0; background: transparent; color: var(--text-soft); width: 28px; height: 30px; cursor: pointer; font-size: 18px; }
.model-add-row { display: flex; flex-wrap: wrap; gap: 8px; }
.model-add-row input { flex: 1 1 170px; min-width: 0; }
.model-add-row input, .model-add-row select { border: 1px solid var(--border); background: var(--panel); border-radius: 10px; padding: 8px 10px; }
.provider-saved-models { margin-top: 10px; font-size: 12px; }
.provider-saved-models summary { cursor: pointer; color: var(--text-soft); }
.saved-model-row { padding: 6px 0; overflow-wrap: anywhere; border-bottom: 1px solid var(--border-soft); }

/* 侧栏每条对话后面的智能体标签 */
.conv-owner {
  color: var(--accent-strong);
}

/* 换智能体的浮层 */
.agent-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.agent-picker .picker-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 16px;
  border: 1.5px solid var(--border);
  background: var(--panel);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.16s, background 0.16s;
}

.agent-picker .picker-item:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.agent-picker .picker-item.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.agent-picker .picker-avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: linear-gradient(135deg, #e8f6ff 0%, #f0e8ff 100%);
}

.agent-picker .picker-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.agent-picker .picker-name {
  font-weight: 600;
}

.agent-picker .picker-persona {
  color: var(--text-soft);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 260px;
}

@media (max-width: 768px) {
  .home {
    padding: 18px 12px 28px;
  }

  .home-avatar {
    width: 84px;
    height: 84px;
    font-size: 38px;
  }

  .home-title {
    font-size: 19px;
  }

  .home-conv {
    max-width: 100%;
  }
}

/* ── 搜索 ───────────────────────────────────── */

.sidebar-search {
  position: relative;
  padding: 0 12px 8px;
  flex: 0 0 auto;
}

.sidebar-search input[type='search'] {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid var(--border-soft);
  background: var(--panel);
  color: var(--text);
  border-radius: var(--radius-pill);
  padding: 8px 32px 8px 14px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  -webkit-appearance: none;
}

.sidebar-search input[type='search']::-webkit-search-cancel-button {
  display: none;
}

.sidebar-search input[type='search']:focus {
  border-color: var(--accent);
}

.sidebar-search .icon-btn.subtle {
  position: absolute;
  right: 16px;
  top: 7px;
  font-size: 12px;
  background: transparent;
  border: 0;
}

.search-results {
  flex: 1;
  overflow-y: auto;
  padding: 0 12px 8px;
}

.search-hit {
  padding: 8px 10px;
  border-radius: 14px;
  cursor: pointer;
  border: 1.5px solid transparent;
  margin-bottom: 4px;
  transition: background 0.16s, border-color 0.16s;
}

.search-hit:hover {
  background: var(--panel);
  border-color: var(--border-soft);
}

.search-hit-head {
  display: flex;
  gap: 6px;
  align-items: baseline;
  font-size: 12px;
  color: var(--text-soft);
}

.search-hit-title {
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60%;
}

.search-hit-body {
  font-size: 13px;
  line-height: 1.6;
  margin-top: 2px;
  word-break: break-word;
}

.search-hit-body mark {
  background: var(--accent-soft);
  color: inherit;
  border-radius: 4px;
  padding: 0 2px;
}

.search-empty {
  padding: 22px 12px;
  text-align: center;
  color: var(--text-soft);
  font-size: 13px;
}

/* ── 会话项里的操作 ─────────────────────────── */

.conv-check {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.conv-actions {
  display: flex;
  gap: 2px;
  flex: 0 0 auto;
}

.conv-more {
  flex: 0 0 auto;
  opacity: 0;
  border: 0;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  padding: 2px 7px;
  border-radius: 50%;
  line-height: 1.2;
  font-size: 13px;
  transition: opacity 0.16s, background 0.16s, color 0.16s;
}

.conv:hover .conv-more,
.conv.active .conv-more {
  opacity: 1;
}

.conv-more:hover {
  background: var(--accent-soft);
  color: var(--text);
}

.conv.selected {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.conv-menu {
  position: fixed;
  z-index: 60;
  background: var(--panel);
  border: 1.5px solid var(--border-soft);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  padding: 6px;
  min-width: 170px;
}

.conv-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
}

.conv-menu-item:hover {
  background: var(--accent-soft);
}

/* ── 已归档 ─────────────────────────────────── */

.archived-section {
  padding: 0 12px 6px;
  flex: 0 0 auto;
}

.archived-list {
  padding: 6px 0 0;
  max-height: 190px;
  overflow-y: auto;
}

.archived-list .conv {
  padding: 6px 8px;
}

.archived-list .conv-title {
  font-size: 13px;
}

.archived-list .conv-meta {
  font-size: 11px;
}

.archived-restore {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 10px;
}

.archived-restore:hover {
  background: var(--accent-soft);
  color: var(--text);
}

/* ── 批量操作条 ─────────────────────────────── */

.bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 12px 6px;
  padding: 8px 10px;
  border-radius: 14px;
  background: var(--accent-soft);
  border: 1.5px solid var(--border-soft);
  flex: 0 0 auto;
}

.bulk-count {
  font-size: 12px;
  color: var(--text);
}

/* ── 用量统计 ───────────────────────────────── */

.stats-panel {
  background: var(--panel-soft);
  border: 1.5px solid var(--border-soft);
  border-radius: 16px;
  padding: 12px;
  margin-bottom: 14px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.usage-heading { font-size: 16px; margin: 22px 0 10px; }
.usage-note { line-height: 1.7; margin-bottom: 16px; }
.model-usage-card { border: 1px solid var(--border); border-radius: 14px; background: var(--panel-soft); padding: 16px; margin-bottom: 12px; }
.model-usage-card > strong { display: block; overflow-wrap: anywhere; }
.model-usage-card > .muted { display: block; margin-top: 6px; font-size: 11px; }
.model-usage-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.model-usage-values b, .model-usage-values small { display: block; }
.model-usage-values b { font-size: 17px; font-variant-numeric: tabular-nums; }
.model-usage-values small { font-size: 11px; color: var(--text-soft); }
@media (max-width: 480px) { .model-usage-values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.stats-cell {
  background: var(--panel);
  border-radius: 12px;
  padding: 8px 10px;
  text-align: center;
}

.stats-value {
  font-size: 16px;
  font-weight: 700;
}

.stats-label {
  font-size: 11px;
  color: var(--text-soft);
}

.stats-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 64px;
  margin-bottom: 4px;
}

.stats-bar {
  flex: 1;
  min-width: 3px;
  height: 4px;
  background: var(--accent);
  opacity: 0.7;
  border-radius: 4px 4px 0 0;
}

.stats-bar:hover {
  opacity: 1;
}

.stats-caption {
  font-size: 11px;
  color: var(--text-soft);
  margin-bottom: 10px;
}

.stats-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  padding: 4px 0;
  border-bottom: 1px dashed var(--border-soft);
}

.stats-row:last-child {
  border-bottom: 0;
}

.stats-row-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 跳到搜索命中的那条消息时闪一下 —— 消息多的时候一眼看到落点 */
.msg.flash .bubble {
  animation: flash-bubble 1.4s ease-out;
}

@keyframes flash-bubble {
  0% {
    box-shadow: 0 0 0 0 var(--accent);
  }
  40% {
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 35%, transparent);
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

/* 搜索结果条数说明（与 .stats-caption 同行样式，单独一类避免和设置面板耦合） */
.search-caption {
  padding: 6px 10px 2px;
  text-align: center;
  font-size: 11px;
  color: var(--text-soft);
}

/* ── hidden 兜底 ───────────────────────────────
   浏览器默认规则 `[hidden] { display: none }` 的特异性低于任何类选择器，
   所以只要作者样式给某个类写了 display，该元素上的 hidden 属性就**静默失效**
   （元素该藏的时候照样显示）。本仓库既有的约定是给每个这样的类补一条 X[hidden]。
   这一轮新增/复用的两处漏了，由渲染验证发现：
   - .bulk-bar{display:flex} —— 退出管理模式后批量条仍然挂着
   - .icon-btn{display:inline-flex} —— 搜索框的「清空」叉一直在
   （对应守卫测试：test/frontend-wiring.test.js 里的 hidden 兜底检查） */

.bulk-bar[hidden] {
  display: none;
}

.icon-btn[hidden] {
  display: none;
}

/* ── 我的：左侧分类导航 + 右侧内容 ───────────────
   面板变长之后一条道滚到底很难找东西，所以按「我 / 智能体 / 主题 / 模型 / 用量」
   分成几栏，一次只看一类。窄屏（手机）下同样保持左右分栏，只是把导航栏收窄。 */

.settings-card {
  /* 覆盖 .card 的 26px 内边距与滚动：分栏后由内部各段自己管间距，
     滚动交给右侧内容区，头尾固定不动 */
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  /* 左右分栏比单列需要更宽一点 */
  max-width: 940px;
  height: min(760px, 90dvh);
  max-height: 90dvh;
  border: 1px solid var(--border);
  border-radius: 20px;
}

.settings-head {
  flex: 0 0 auto;
  padding: 20px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.settings-head h2 {
  margin: 0;
}

.settings-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  border-top: 1.5px solid var(--border-soft);
}

.settings-nav {
  flex: 0 0 224px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 18px 12px;
  background: var(--panel-soft);
  border-right: 1.5px solid var(--border);
  overflow-y: auto;
}

.settings-tab {
  border: 0;
  background: transparent;
  color: var(--text-soft);
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  padding: 12px 14px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.16s, color 0.16s;
}

.settings-tab:hover {
  background: var(--panel);
  color: var(--text);
}

.settings-tab.active {
  background: var(--accent-soft);
  color: var(--text);
  font-weight: 600;
  box-shadow: inset 3px 0 var(--accent);
}

.settings-tab[hidden], .settings-group[hidden] { display: none; }
.settings-tab svg, .settings-search svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
}
.settings-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  margin-bottom: 12px;
  color: var(--text-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
}
.settings-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 13px;
}
.settings-search:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.settings-group {
  padding: 16px 14px 5px;
  font-size: 11px;
  color: var(--text-soft);
  letter-spacing: 1px;
}
.settings-eyebrow { margin: 0 0 4px; font-size: 11px; color: var(--text-soft); letter-spacing: 1px; }
.pane-heading { margin-bottom: 28px; }
.pane-heading h3 { margin: 0 0 8px; font-size: 23px; font-weight: 650; }
.pane-heading p { margin: 0; font-size: 13px; color: var(--text-soft); }
.settings-feature {
  display: flex;
  gap: 18px;
  border: 1px solid var(--border);
  background: var(--panel-soft);
  border-radius: 16px;
  padding: 24px;
}
.settings-feature > svg { width: 32px; height: 32px; flex: 0 0 auto; color: var(--accent-strong); }
.settings-feature h4 { margin: 0; font-size: 16px; }
.settings-feature p { margin: 10px 0 22px; }
.settings-feature a { display: inline-block; text-decoration: none; }
.settings-save-note { margin-right: auto; font-size: 11px; }

button:focus-visible, a:focus-visible, [role='button']:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
}
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }

.settings-panes {
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
  padding: 28px 32px;
}

/* 用一个类控制显隐，而不是 hidden 属性 —— 属性会被作者样式的 display 悄悄废掉
   （本项目踩过一次，见 test/frontend-wiring.test.js 的守卫） */
.settings-pane {
  display: none;
}

.settings-pane.active {
  display: block;
}

.settings-foot {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 26px;
  align-items: center;
  border-top: 1.5px solid var(--border-soft);
}

/* 分栏第一屏就是内容，不需要 .section-head 的顶部留白 */
.settings-pane > .section-head:first-child {
  margin-top: 0;
}

/* ── 模型页：厂商配置中心 ─────────────────────
   卡片列表 + 一份复用的添加/编辑表单。列表里的每一张都是脚本生成的
   （#provider-list 是空的容器），静态 id 只有表单那一个，见 app.js 的
   providerForm* 函数。 */

.provider-list {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

/* 列表由脚本决定有无：`hidden` 属性会被 display: grid 静默废掉，
   所以照本仓库的约定补一条 [hidden] 兜底 */
.provider-list[hidden] {
  display: none;
}

.provider-card {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1.5px solid var(--border);
  background: var(--panel-soft);
}

.provider-card.off {
  opacity: 0.62;
}
.provider-card.editing { border-color: var(--accent); }
.provider-card > .provider-form { margin: 16px 0 0; border-style: solid; background: var(--panel); }

.provider-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.provider-name {
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
}

.provider-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.provider-tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  color: var(--text-soft);
  white-space: nowrap;
}

.provider-tag.ok {
  color: var(--accent-strong);
  border-color: var(--accent-soft);
  background: var(--accent-soft);
}

.provider-tag.warn {
  color: #c2557a;
  border-color: #ffd0e0;
  background: #fff0f6;
}

.provider-models {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-soft);
  overflow-wrap: anywhere;
}

.provider-actions {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}

.provider-actions .btn {
  padding: 5px 10px;
  font-size: 12px;
}

/* 表单：静态声明在 index.html 里，添加与编辑共用一份 */
.provider-form {
  display: block;
  margin-bottom: 16px;
  padding: 14px;
  border-radius: 16px;
  border: 1.5px dashed var(--border);
  background: var(--panel-soft);
}

.provider-form[hidden] {
  display: none;
}

.provider-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.provider-form .field-row {
  gap: 10px;
}

.provider-form .field-row .field {
  margin-bottom: 12px;
}

.provider-hint {
  display: block;
  margin-top: 6px;
  line-height: 1.6;
}

/* 三个模型下拉：没有可用项的整块藏掉（同样要补 [hidden] 兜底） */
.model-select {
  display: block;
}

.model-select[hidden] {
  display: none;
}

/* ── 拉取模型：按钮 + 结果小块 ─────────────────
   模型名由上游报出来，用户点一下决定它是「文本 / 视觉 / 生图」里的哪一个
   （后端只告诉我们有哪些，不告诉我们用途）。 */

.provider-fetch {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.model-hits {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.model-hit {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--panel);
}

.model-hit-name {
  font-size: 12px;
  color: var(--text);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-hit-actions {
  display: flex;
  gap: 4px;
}

.model-hit-actions .btn {
  padding: 2px 7px;
  font-size: 11px;
}

/* 视觉回落提示：一条窄条，说明这一轮的图交给别家看了 */
.model-notice {
  margin: 6px auto 2px;
  max-width: 88%;
  text-align: center;
  font-size: 12px;
  color: var(--text-soft);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 4px 12px;
}

/* 窄屏：三列模型名挤不下，改成两列再换行 */
@media (max-width: 480px) {
  .provider-form .field-row {
    flex-wrap: wrap;
  }
}


/* 手机设置页：分类列表放到顶部，避免左右分栏压缩表单。 */
@media (max-width: 640px) {
  .settings-body { flex-direction: column; }
  .settings-head > p { display: none; }
  .settings-card { height: 100%; max-height: 100%; border-radius: 16px; }
  .settings-nav {
    flex: 0 0 auto;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-height: 190px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .settings-search, .settings-group, #settings-search-empty { grid-column: 1 / -1; }
  .settings-group { display: none; }
  .settings-search { margin: 0 0 4px; }
  .settings-search input { font-size: 16px; }

  .settings-tab {
    font-size: 13px;
    padding: 10px 8px;
  }

  .settings-panes {
    padding: 18px 16px;
  }

  .settings-head {
    padding: 16px 16px 10px;
  }

  .settings-foot {
    padding: 10px 16px 14px;
  }
  .settings-save-note { max-width: 48%; }
  .pane-heading { margin-bottom: 18px; }
  .pane-heading h3 { font-size: 20px; }
  .settings-feature { padding: 16px; }
  .topbar { padding-left: 14px; padding-right: 14px; }
  .composer-form { gap: 6px; }
  .composer-form .icon-btn { width: 36px; height: 44px; border: 0; background: transparent; box-shadow: none; }
  #send, #stop { padding: 10px 14px; min-height: 44px; }
  #input { padding: 10px 12px; }
}

/* 首页只做轻量点缀，保留用户的主题和背景图。 */
.home { position: relative; isolation: isolate; }
.home::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 22% 28%, color-mix(in srgb,var(--accent) 10%,transparent),transparent 34%), radial-gradient(ellipse at 80% 68%,color-mix(in srgb,var(--accent-2) 12%,transparent),transparent 32%); }
.home::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .16; background-image: radial-gradient(var(--accent) .8px,transparent .8px); background-size: 42px 42px; mask-image: linear-gradient(90deg,#000,transparent 35%,transparent 65%,#000); }
.home-kicker { margin: 20px 0 -10px; font-size: 12px; letter-spacing: 3px; color: var(--text-soft); }
#open-settings { position: relative; }
#open-settings .my-label { display: block; width: 100%; text-align: center; }
#open-settings .my-icon { position: absolute; left: calc(50% - 48px); top: 50%; transform: translateY(-50%); }
.toolbar-actions,.memory-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.toolbar-actions { margin-left: auto; }
.usage-toolbar { gap: 16px; flex-wrap: wrap; }
.usage-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.usage-card-head strong { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.usage-card-head .btn { flex-shrink: 0; }
.agent-memory { padding: 16px; margin: 20px 0; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); }
.agent-memory summary { cursor: pointer; font-weight: 600; }
.agent-memory summary small { margin-left: 8px; font-weight: 400; }
.agent-memory .switch-row { margin-top: 16px; }
.memory-row { border-bottom: 1px solid var(--border-soft); padding: 10px 0 14px; }
.memory-row p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.6; }
.agent-memory > small { display: block; margin-top: 12px; line-height: 1.6; }
.settings-back,.settings-dismiss { display: none; }
@media (max-width: 640px) {
  #settings { padding: 0; }
  #settings .settings-card { width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; }
  #settings .settings-head { gap: 10px; min-height: 56px; padding: calc(12px + env(safe-area-inset-top)) 16px 12px; }
  #settings .settings-head h2 { font-size: 19px; }
  #settings .settings-eyebrow { display: none; }
  #settings .settings-dismiss { display: inline-flex; margin-left: auto; min-width: 40px; min-height: 40px; }
  #settings .settings-body { flex-direction: row; }
  #settings .settings-nav { flex: 1; display: flex; width: 100%; max-height: none; padding: 16px; border: 0; gap: 6px; }
  #settings .settings-group { display: block; margin: 12px 0 4px; }
  #settings .settings-tab { font-size: 15px; padding: 14px; min-height: 52px; }
  #settings .settings-tab::after { content: '›'; margin-left: auto; opacity: .6; }
  #settings[data-mobile-view='list'] .settings-panes, #settings[data-mobile-view='list'] .settings-foot { display: none; }
  #settings[data-mobile-view='detail'] .settings-nav { display: none; }
  #settings[data-mobile-view='detail'] .settings-back { display: inline-flex; min-width: 40px; min-height: 40px; }
  #settings .settings-panes { flex: 1; min-height: 0; padding: 20px 16px; }
  #settings input, #settings textarea, #settings select { font-size: 16px; }
  #settings .settings-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  #settings .settings-save-note { display: none; }
  #settings #close-settings { margin-left: auto; }
  .usage-card-head { gap: 8px; }
  .usage-card-head .btn { font-size: 11px; padding: 6px 9px; }
  .home-kicker { font-size: 11px; margin-top: 16px; }
}