/* 用霸专家对话平台 · 设计系统（苹果式简洁） */
:root {
  --bg: #f8fafc;
  --surface: #ffffff;
  --ink: #0f172a;
  --ink-2: #64748b;
  --ink-3: #94a3b8;
  --primary: #2563eb;
  --primary-2: #3b82f6;
  --accent: #06b6d4;
  --line: #e2e8f0;
  --ok: #16a34a;
  --warn: #d97706;
  --err: #dc2626;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 8px 24px rgba(15, 23, 42, .06);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro SC", "PingFang SC", "Segoe UI", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* 移动端：点击立即生效，不做"双击缩放"检测（修复"要点两次才生效"） */
a, button, .link-chip, .opt-tag, .preset-q, .cat-tab { touch-action: manipulation; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* 顶栏 */
.topbar {
  background: rgba(255, 255, 255, .85);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.topbar-inner { display: flex; align-items: center; gap: 24px; height: 60px; }
.topbar-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
/* 顶栏用户入口：用户名 + ▾ 下拉菜单（点击进个人中心等） */
.user-menu-wrap { position: relative; display: inline-flex; align-items: center; }
.user-menu-btn { display: inline-flex; align-items: center; gap: 6px; }
.user-menu-arrow { flex-shrink: 0; color: var(--ink-2); transition: transform .15s; }
.user-menu-wrap.open .user-menu-arrow { transform: rotate(180deg); }
.user-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 178px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 8px 28px rgba(15, 23, 42, .14);
  padding: 6px; z-index: 300; display: none;
}
.user-menu-wrap.open .user-menu { display: block; }
.user-menu-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 9px 12px; border: none; background: none;
  border-radius: 8px; font-size: 13.5px; color: var(--ink);
  cursor: pointer; font-family: inherit; text-align: left;
}
.user-menu-item:hover { background: rgba(37, 99, 235, .08); color: var(--primary); text-decoration: none; }
.user-menu-item.logout { color: var(--err); }
.user-menu-item.logout:hover { background: rgba(220, 38, 38, .08); color: var(--err); }
.user-menu-sep { height: 1px; background: var(--line); margin: 5px 8px; }
/* 用户名旁的未读回复徽标（微信式红点 + 条数） */
.user-name-wrap { position: relative; display: inline-flex; }
.fb-badge {
  position: absolute; top: -7px; right: -9px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: #ef4444; color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px #fff; cursor: pointer; line-height: 1;
}
.fb-badge:hover { background: #dc2626; }
/* 个人中心「未读回复」按钮内的红色数字 */
.fb-unread-btn { border-color: #fecaca !important; color: #dc2626 !important; font-weight: 600; }
.fb-unread-btn:hover { background: #fef2f2 !important; }
.fb-badge-inline {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 5px;
  background: #ef4444; color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 999px; line-height: 1;
}
.fb-badge-inline.blue { background: #2563eb; }
/* 用户菜单内的未读数字（站内信蓝 / 意见反馈红，逐级下发） */
.menu-badge-inline {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: auto;
  background: #ef4444; color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 999px; line-height: 1;
}
.menu-badge-inline.blue { background: #2563eb; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand-mark {
  display: block; flex-shrink: 0; align-self: center;
  /* 圆角徽章图标（渐变书本），无文字色块 */
}
/* 后台自定义 Logo 图片（替换默认图标+文字）：560×144 建议，高度自适应、宽度按比例 */
.brand-img {
  height: 40px; width: auto; max-width: 200px;
  object-fit: contain; flex-shrink: 0; align-self: center;
  display: block;
}
.brand-img.hidden { display: none; }
.brand-name { font-weight: 600; font-size: 25px; letter-spacing: -.2px; display: flex; align-items: center; }
.ub-logo { color: var(--primary); }
.ub-logo-ai { color: var(--primary); }
/* 站点名称：与 logo 文字之间用细分隔线，中文名醒目但弱于 logo（后台可改） */
.brand-site {
  font-size: 14.5px; font-weight: 500; color: var(--ink-2);
  margin-left: 4px; padding-left: 14px; border-left: 1px solid var(--line);
  white-space: nowrap;
  display: flex; align-items: center;
}
.nav-links { display: flex; gap: 20px; flex: 1; }
.nav-links a { color: var(--ink-2); font-size: 14px; }
.nav-links a:hover { color: var(--primary); text-decoration: none; }

/* 按钮 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff; border: none; border-radius: 10px;
  padding: 9px 18px; font-size: 14px; font-weight: 500; font-family: inherit;
  cursor: pointer; transition: transform .15s, box-shadow .15s, opacity .15s;
  box-shadow: 0 2px 8px rgba(37, 99, 235, .25);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(37, 99, 235, .3); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn.ghost { background: var(--surface); color: var(--ink); box-shadow: none; border: 1px solid var(--line); }
.btn.ghost:hover { border-color: var(--primary-2); color: var(--primary); box-shadow: none; }
.btn.small { padding: 6px 12px; font-size: 13px; border-radius: 8px; }
.btn.danger { background: linear-gradient(135deg, #dc2626, #ef4444); box-shadow: 0 2px 8px rgba(220, 38, 38, .25); }

/* 弹窗通告 */
.ann-modal { text-align: left; padding: 4px 2px; }

/* 更多相关书籍（分诊台多元视角之外的候选） */
.more-books {
  margin-top: 14px; padding: 12px 14px;
  background: #f8fafc; border: 1px dashed var(--line); border-radius: 12px;
}
.more-books-head { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 8px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.more-books-sub { font-weight: 400; color: var(--ink-3); font-size: 12px; }
.more-books-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* 下一步选项标号：可点击，点击自动填入输入框 */
.opt-tag {
  display: inline-block; margin-right: 4px; padding: 1px 8px;
  background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 7px;
  color: var(--primary); font-weight: 600; font-size: 13px;
  cursor: pointer; transition: background .15s, border-color .15s, transform .1s;
  user-select: none;
}
.opt-tag:hover { background: #dbeafe; border-color: var(--primary); transform: translateY(-1px); }
.opt-tag:active { transform: scale(.95); }
.ann-modal-title { font-size: 17px; font-weight: 700; margin-bottom: 10px; color: var(--ink); }
.ann-modal-body { font-size: 14px; line-height: 1.7; color: var(--ink-2); margin-bottom: 18px; white-space: pre-wrap; }

/* 首页：极简分诊台提问区（DeepSeek 式） */
.home-ask { padding: 40px 0 88px; }
.home-tagline-wrap { text-align: center; margin-bottom: 36px; }
.home-tagline {
  display: inline-block; font-size: 34px; font-weight: 700; letter-spacing: 4px;
  color: var(--ink); text-decoration: none; cursor: pointer; padding: 4px 12px;
  background: linear-gradient(120deg, #0f172a, #2563eb, #06b6d4, #0f172a);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  background-position: 0 0;
  transition: background-position .7s ease, transform .3s ease;
}
a.home-tagline:hover {
  background-position: 100% 0;
  transform: scale(1.05);
  text-decoration: none;
}
.home-ask-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: stretch;
}
.home-ask-left { position: relative; display: flex; min-height: 0; }
#askInput {
  width: 100%; flex: 1; min-height: 300px; resize: none;
  padding: 52px 22px 84px; font-size: 16px; line-height: 1.8; font-family: inherit;
  border: 1.5px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow-sm);
  outline: none; transition: box-shadow .18s, border-color .18s;
}
#askInput:focus { border-color: var(--primary-2); box-shadow: 0 0 0 4px rgba(59, 130, 246, .12); }
.ask-label {
  position: absolute; top: 16px; left: 22px; font-size: 14px; font-weight: 600;
  color: var(--ink-2); pointer-events: none;
}
.ask-btn {
  position: absolute; right: 18px; bottom: 16px; padding: 10px 34px; font-size: 14.5px;
  border-radius: 12px; letter-spacing: 2px;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.ask-btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 20px rgba(37, 99, 235, .4);
  filter: brightness(1.08);
}
.ask-btn:active { transform: translateY(0) scale(.98); }
.home-ask-right { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.home-square {
  flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 6px; padding: 14px 22px; border-radius: var(--radius-lg);
  border: 1px solid var(--line); background: var(--surface);
  box-shadow: var(--shadow-sm); color: var(--ink);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
a.home-square:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--primary-2); }
.home-square-title { font-size: 16px; font-weight: 700; }
.home-square-desc { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
.home-square-more { border-style: dashed; }
a.home-square-more:hover { border-style: dashed; border-color: var(--primary-2); }
/* 最新动态按钮：标题 + 最新 1~2 条预览 */
.home-square-news { border-style: dashed; }
a.home-square-news:hover { border-style: dashed; border-color: var(--primary-2); }
.home-square-news-preview { font-size: 12px; color: var(--ink-2); line-height: 1.8; overflow-wrap: break-word; word-break: break-word; }
/* 未登录：微信一键登录引导块（品牌色突出，替代"继续上次对话/最新动态"） */
.home-square-login { border: 1.5px solid var(--primary); background: linear-gradient(135deg, #eff6ff, #fff); }
a.home-square-login:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.home-square-login .home-square-title { color: var(--primary); }

/* 动态公告列表页 / 详情页 */
.news-page-head { padding: 36px 0 4px; }
.news-page-head h1 {
  font-size: 30px; font-weight: 700;
  background: linear-gradient(120deg, #0f172a 0%, #2563eb 55%, #06b6d4 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.news-list-card {
  display: block; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow-sm); color: var(--ink);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.news-list-card:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--primary-2); box-shadow: var(--shadow); }
.news-list-title { font-size: 15px; font-weight: 600; }
.news-list-excerpt { font-size: 13px; color: var(--ink-2); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-list-date { font-size: 12px; color: var(--ink-3); margin-top: 6px; }
.news-detail { max-width: 760px; margin: 0 auto; padding: 32px 0 56px; }

/* 费用说明页：左侧年会员卡（侧栏）+ 右侧文章内容
 * grid 区域布局：第一行右侧 = 标题，第二行 = 左会员卡 + 右文章（会员卡与文章正文顶部对齐） */
.fee-page-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  grid-template-areas:
    ". fee-title"
    "fee-side fee-article";
  align-items: start;
  column-gap: 28px;
  row-gap: 0;
}
.fee-title { grid-area: fee-title; }
.fee-side { grid-area: fee-side; }
.fee-article { grid-area: fee-article; }
.fee-side .member-card { margin: 0; }
@media (max-width: 860px) {
  .fee-page-grid {
    grid-template-columns: 1fr !important;
    grid-template-areas: "fee-title" "fee-side" "fee-article" !important;
  }
  .fee-side { position: static; }
}

/* 反馈记录页（一来一往线程） */
.feedback-card { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.fb-role-tag {
  display: inline-flex; align-items: center; padding: 2px 10px; font-size: 11.5px; font-weight: 600;
  background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; border-radius: 999px;
}
.fb-reply-input {
  flex: 1; padding: 8px 12px; font-size: 13px; font-family: inherit;
  border: 1px solid var(--line); border-radius: 9px; outline: none;
}
.fb-reply-input:focus { border-color: var(--primary-2); box-shadow: 0 0 0 3px rgba(59,130,246,.1); }

/* 智能体展示页头部 */
.agents-head { text-align: center; padding: 44px 0 6px; }
.agents-head h1 {
  font-size: 34px; font-weight: 700; letter-spacing: -0.5px;
  background: linear-gradient(120deg, #0f172a 0%, #2563eb 55%, #06b6d4 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.agents-head p { color: var(--ink-2); font-size: 15.5px; margin-top: 8px; }

/* 页面区块 */
.hero {
  padding: 56px 0 32px; text-align: center;
}
.hero h1 {
  font-size: 40px; font-weight: 700; letter-spacing: -0.5px;
  background: linear-gradient(120deg, #0f172a 0%, #2563eb 55%, #06b6d4 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero p { color: var(--ink-2); font-size: 17px; margin-top: 10px; max-width: 640px; margin-inline: auto; }
.hero .btn { margin-top: 24px; padding: 12px 28px; font-size: 15px; }

/* 搜索 */
.search-wrap { max-width: 560px; margin: 28px auto 8px; position: relative; }
.search-input {
  width: 100%; padding: 13px 20px; font-size: 15px; font-family: inherit;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  box-shadow: var(--shadow-sm); outline: none; transition: box-shadow .15s, border-color .15s;
}
.search-input:focus { border-color: var(--primary-2); box-shadow: 0 0 0 4px rgba(59, 130, 246, .12); }

/* 分类 tab：横向滚动（分类多时不换行堆叠、不杂乱）；选中放大 + 主题色 */
.cat-tabs {
  display: flex; gap: 10px; justify-content: flex-start; align-items: flex-end;
  margin: 16px 0 4px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding: 6px 10px 4px; /* 上下左右留出选中放大(scale 1.12)的空间，防止被滚动容器裁剪 */
}
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tab {
  padding: 7px 16px; border-radius: 999px; background: var(--surface);
  border: 1px solid var(--line); color: var(--ink-2); font-size: 13.5px; cursor: pointer; font-family: inherit;
  white-space: nowrap; line-height: 1.4; /* 长分类名不截断，宽度随文字自适应 */
  flex-shrink: 0; /* 横向滚动时不被压缩 */
  transform-origin: center bottom;
  transition: all .15s;
}
.cat-tab:hover { border-color: var(--primary-2); color: var(--primary); }
.cat-tab.active {
  background: var(--primary); color: #fff; border-color: var(--primary);
  font-weight: 700; font-size: 15px; transform: scale(1.12);
}

/* 智能体卡片 */
.agent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; margin: 24px 0 40px; }
.agent-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; cursor: pointer; transition: transform .18s, box-shadow .18s, border-color .18s;
  display: flex; flex-direction: column; gap: 10px;
}
.agent-card:hover { transform: translateY(-3px); box-shadow: 0 4px 16px rgba(37, 99, 235, .18), var(--shadow); border-color: var(--primary); text-decoration: none; }
.agent-emoji { font-size: 34px; width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; background: #eff6ff; border-radius: 14px; }
.agent-name { font-weight: 600; font-size: 15.5px; color: var(--ink); }
.agent-intro { color: var(--ink-2); font-size: 13px; line-height: 1.55; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.agent-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--ink-3); font-size: 12px; min-width: 0; }
/* 左侧分类名过长时省略号截断，不给右侧（次数+星标）让位导致溢出 */
.agent-meta > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-meta-right { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; white-space: nowrap; }
.agent-hot { color: var(--warn); }
/* 收藏星标（书籍卡右下角，与咨询次数同行）：加大点击区域 + 悬停反馈 */
.fav-star { font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink-3); padding: 8px 10px; border-radius: 8px; user-select: none; transition: color .15s, background .15s, transform .15s; }
.fav-star:hover { color: #f59e0b; background: #fff7ed; transform: scale(1.18); }
.fav-star.active { color: #f59e0b; }
.fav-star.active:hover { color: #d97706; background: #ffedd5; }
/* 历史页置顶按钮 */
.hist-pin { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 8px 10px; cursor: pointer; font-size: 15px; line-height: 1; flex-shrink: 0; }
.hist-pin:hover { border-color: var(--primary); }
.empty-tip { text-align: center; color: var(--ink-3); padding: 60px 0; }

/* Banner 轮播 */
.banner { position: relative; border-radius: var(--radius-lg); overflow: hidden; margin: 20px 0 0; box-shadow: var(--shadow); }
.banner img { width: 100%; height: 300px; object-fit: cover; display: block; }
.banner-overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 28px; background: linear-gradient(180deg, transparent 40%, rgba(15, 23, 42, .65)); }
.banner-title { color: #fff; font-size: 22px; font-weight: 600; text-align: center; white-space: pre-line; line-height: 1.5; }
.banner-dots { position: absolute; bottom: 12px; right: 16px; display: flex; gap: 6px; }
.banner-dots span { width: 7px; height: 7px; border-radius: 99px; background: rgba(255,255,255,.45); cursor: pointer; }
.banner-dots span.active { background: #fff; width: 18px; }

/* 详情页 */
.detail-head {
  display: flex; gap: 20px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px; margin: 28px 0 20px; box-shadow: var(--shadow-sm);
}
.detail-emoji { font-size: 46px; width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; background: #eff6ff; border-radius: 20px; flex-shrink: 0; }
.detail-name { font-size: 24px; font-weight: 700; }
.detail-book { color: var(--primary); font-size: 14px; margin-top: 2px; }
.detail-intro { color: var(--ink-2); margin-top: 8px; }
.detail-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 16px; }
.detail-field { background: #f8fafc; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-size: 13px; }
.detail-field b { display: block; color: var(--ink-3); font-weight: 500; font-size: 12px; margin-bottom: 3px; }
.welcome-box {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; margin-bottom: 16px;
}
.preset-questions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.preset-q {
  background: #f1f5f9; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px;
  font-size: 13px; color: var(--ink); cursor: pointer; transition: all .15s;
}
.preset-q:hover { border-color: var(--primary-2); color: var(--primary); background: #eff6ff; }

/* 表单 */
.form-card { max-width: 460px; margin: 48px auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-sm); }
.form-card h2 { font-size: 22px; margin-bottom: 4px; }
.form-sub { color: var(--ink-2); font-size: 13.5px; margin-bottom: 22px; }
.form-row { margin-bottom: 16px; }
.form-row label { display: block; font-size: 13.5px; font-weight: 500; margin-bottom: 6px; }
.form-row .hint { color: var(--ink-3); font-weight: 400; font-size: 12px; }
.form-row input, .form-row textarea, .form-row select {
  width: 100%; padding: 10px 14px; font-size: 14px; font-family: inherit;
  border: 1px solid var(--line); border-radius: 10px; outline: none; background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus { border-color: var(--primary-2); box-shadow: 0 0 0 4px rgba(59,130,246,.1); }
.form-row textarea { min-height: 90px; resize: vertical; }
.code-row { display: flex; gap: 8px; }
.code-row input { flex: 1; }

/* API Key 配置：输入框加长可完整显示整个 Key + 小眼睛切换明文 */
.ak-wrap { position: relative; }
.ak-input {
  width: 100%; box-sizing: border-box; padding: 12px 48px 12px 14px; font-size: 14.5px;
  font-family: ui-monospace, SFMono-Regular, Consolas, 'Courier New', monospace; letter-spacing: .2px;
  border: 1px solid var(--line); border-radius: 10px; outline: none; background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
.ak-input:focus { border-color: var(--primary-2); box-shadow: 0 0 0 4px rgba(59,130,246,.1); }
.ak-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; font-size: 17px; border-radius: 8px; color: var(--ink-3); line-height: 1;
}
.ak-eye:hover { background: rgba(59,130,246,.08); color: var(--ink); }
.ak-status { font-size: 12.5px; margin-top: 8px; min-height: 16px; line-height: 1.5; }

/* 会员卡片 / 个人中心 */
.member-card {
  background: linear-gradient(135deg, #1d4ed8, #0ea5e9); color: #fff;
  border-radius: var(--radius-lg); padding: 26px; margin: 28px 0 20px;
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
}
.member-card .m-title { font-size: 18px; font-weight: 600; }
.member-card .m-sub { opacity: .85; font-size: 13px; margin-top: 4px; }
.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 32px; }
/* 个人中心快捷入口宫格（与小程序"我的"页一致的图标格） */
.prof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.prof-cell {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 8px 14px; border: 1px solid var(--line); border-radius: 12px;
  text-decoration: none; color: var(--ink); transition: background .15s, border-color .15s;
}
.prof-cell:hover { background: var(--bg-2); border-color: var(--primary-2); text-decoration: none; }
.prof-cell .pc-icon { font-size: 24px; line-height: 1; }
.prof-cell .pc-label { font-size: 12.5px; color: var(--ink-2); text-align: center; white-space: nowrap; }
@media (max-width: 720px) {
  .prof-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .prof-cell { padding: 12px 4px 10px; }
  .prof-cell .pc-icon { font-size: 20px; }
  .prof-cell .pc-label { font-size: 11px; }
}
/* 极窄屏（≤400px，iPhone SE/多数 Android）：宫格改 3 列 + 标签允许换行，避免"历史咨询记录"等长标签溢出 */
@media (max-width: 400px) {
  .prof-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .prof-cell .pc-label { white-space: normal; line-height: 1.3; word-break: break-word; }
}
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.panel h3 { font-size: 15px; margin-bottom: 12px; }
.kv { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px; }
.kv:last-child { border-bottom: none; }
.kv .k { color: var(--ink-2); }
.kv .v { font-weight: 500; }
/* 账户信息一行细条（手机号默认隐藏，小眼睛切换） */
.account-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 18px; margin-bottom: 16px; font-size: 13px;
}
.account-strip .as-item { display: inline-flex; align-items: center; gap: 6px; }
.account-strip .as-k { color: var(--ink-3); }
.account-strip .as-v { font-weight: 500; color: var(--ink); }
.account-strip .as-eye { cursor: pointer; color: var(--ink-2); padding: 2px 4px; font-size: 14px; user-select: none; }
.account-strip .as-eye:hover { color: var(--primary); }
@media (max-width: 720px) {
  .account-strip { gap: 8px 14px; padding: 10px 14px; font-size: 12px; }
}

/* 富文本说明页 */
.rich-content { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; margin: 28px 0; }
.rich-content img { max-width: 100%; height: auto; border-radius: 10px; margin: 10px 0; }
.rich-content p { margin: 10px 0; }

/* 文章页（富文本编辑器产物，图片自适应 + 公众号式排版） */
.article-page { max-width: 820px; margin: 0 auto; padding: 36px 0 56px; }
.article-page h1 { font-size: 28px; font-weight: 700; line-height: 1.4; }
.article-body { border: none; padding: 0; margin: 0; font-size: 15px; line-height: 1.9; color: var(--ink); }
.article-body h1, .article-body h2, .article-body h3, .article-body h4 { margin: 20px 0 10px; line-height: 1.4; }
.article-body h2 { font-size: 21px; }
.article-body h3 { font-size: 18px; }
.article-body h4 { font-size: 16px; }
.article-body strong { font-weight: 700; }
.article-body em { font-style: italic; }
.article-body blockquote { border-left: 3px solid var(--primary-2); background: #f8fafc; padding: 10px 16px; margin: 12px 0; color: var(--ink-2); border-radius: 0 10px 10px 0; }
.article-body ul, .article-body ol { padding-left: 24px; margin: 10px 0; }
.article-body li { margin: 4px 0; }
.article-body hr { border: none; border-top: 1px solid var(--line); margin: 22px 0; }
.article-body table { border-collapse: collapse; width: 100%; margin: 12px 0; }
.article-body td, .article-body th { border: 1px solid var(--line); padding: 8px 12px; font-size: 14px; }
.article-body img { max-width: 100%; height: auto; border-radius: 10px; margin: 12px 0; display: block; }
.article-body pre { overflow-x: auto; white-space: pre; background: #1f2937; color: #e5e7eb; border-radius: 10px; padding: 12px 14px; font-size: 13px; line-height: 1.6; }
.article-body a { color: var(--primary); }
.article-body .text-center { text-align: center; }
.article-body .text-right { text-align: right; }
.article-body .text-large { font-size: 18px; }
.article-body .text-small { font-size: 13px; color: var(--ink-2); }

/* 页脚（DeepSeek 式：导航菜单放底部，两级） */
.footer { margin-top: auto; border-top: 1px solid var(--line); background: var(--surface); padding: 40px 0 28px; }
.footer-inner { display: flex; flex-direction: column; gap: 22px; }
.footer-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.footer-brand .brand-name { font-size: 22px; }
.footer-brand .brand-site { font-size: 14px; }
.footer-brand .brand-img { height: 32px; max-width: 180px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 48px; }
.footer-nav-col { display: flex; flex-direction: column; gap: 6px; min-width: 120px; }
.footer-nav-title { font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.footer-nav-links { display: flex; flex-direction: column; gap: 6px; }
.footer-nav-links a { color: var(--ink-2); font-size: 13.5px; }
.footer-nav-links a:hover { color: var(--primary); text-decoration: none; }
.footer-nav-single { color: var(--ink-2); font-size: 13.5px; }
.footer-nav-single:hover { color: var(--primary); text-decoration: none; }
.footer-contact { color: var(--ink-2); font-size: 13.5px; }
.footer-copy { color: var(--ink-3); font-size: 12.5px; }

/* Toast */
/* Toast：必须浮在所有弹窗之上（弹窗 250） */
.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  background: rgba(15, 23, 42, .92); color: #fff; padding: 11px 20px; border-radius: 12px;
  font-size: 13.5px; z-index: 400; box-shadow: var(--shadow);
}
.toast.error { background: rgba(220, 38, 38, .95); }
.toast.ok { background: rgba(22, 163, 74, .95); }

/* 弹窗 */
/* 弹窗（置于所有抽屉/菜单之上：历史抽屉 130、菜单 200，弹窗 250） */
.modal-mask { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); display: flex; align-items: center; justify-content: center; z-index: 250; backdrop-filter: blur(3px); }
.modal { position: relative; background: var(--surface); border-radius: var(--radius-lg); padding: 28px; max-width: 420px; width: 92%; box-shadow: var(--shadow); }
.modal-x { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border: none; border-radius: 50%; background: transparent; color: var(--ink-3); font-size: 15px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }
.modal-x:hover { background: rgba(0, 0, 0, .06); color: var(--ink-1); }
.modal h3 { font-size: 18px; margin-bottom: 16px; }
.modal .form-row { margin-bottom: 14px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.sms-dev-tip { background: #fef3c7; border: 1px solid #fde68a; color: #92400e; border-radius: 10px; padding: 8px 12px; font-size: 12.5px; margin-bottom: 12px; }

/* 移动端专属元素（桌面端隐藏）：聊天头部 / 抽屉遮罩 / 抽屉底部用户行 */
.chat-mhead { display: none; }
.chat-drawer-mask { display: none; }
.chat-side-user { display: none; }

/* 响应式 */
@media (max-width: 768px) {
  .home-ask-grid { grid-template-columns: 1fr; gap: 24px; }
  .home-tagline { font-size: 26px; letter-spacing: 2px; }
  #askInput { min-height: 180px; }
  .agents-head h1 { font-size: 26px; }
  .agent-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .banner img { height: 180px; }
  .topbar-inner { gap: 12px; }
  .nav-links { display: none; }
}
.hidden { display: none !important; }
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== 对话区 ===== */
.chat-layout { display: flex; gap: 0; margin: 20px 0 40px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; height: min(74vh, 780px); min-height: 480px; box-shadow: var(--shadow-sm); position: relative; }
/* 对话页全屏模式：从顶栏下方一直到底部；页面级滚动锁死（所有滚动只能在消息区内发生，头部/输入区永不滚出屏幕） */
body.chat-page .footer { display: none; }
html.chat-page, body.chat-page { overflow: hidden; height: 100vh; }
body.chat-page #view { max-width: 1500px; padding: 0 14px; }
body.chat-page .chat-layout { height: calc(100vh - 76px); margin: 12px 0 0; min-height: 400px; }
/* 会员到期横幅（body 前置元素，文档流占位）：聊天页全屏高度扣除横幅高度，避免底部被任务栏截断 */
body.has-expiry-banner.chat-page .chat-layout { height: calc(100vh - 76px - 37px); }
.chat-side { width: 260px; border-right: 1px solid var(--line); background: #fafbfc; display: flex; flex-direction: column; }
/* 侧栏顶部：返回主页按钮 */
.chat-side-nav { flex-shrink: 0; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.chat-side-nav .btn { width: 100%; }
/* 侧栏顶部：智能体身份小块（不再占全宽横条） */
.chat-side-agent { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
/* 名称：完整显示、允许多行换行；两端图标垂直居中保持对称；每行文字居中 */
.csa-name { font-weight: 600; font-size: 14px; line-height: 1.45; word-break: break-word; overflow-wrap: anywhere; text-align: center; }
.csa-sub { font-size: 11.5px; color: var(--ink-3); line-height: 1.4; word-break: break-word; overflow-wrap: anywhere; }
.chat-side-foot { padding: 10px; border-top: 1px solid var(--line); }
.chat-side-foot .btn { width: 100%; }
.chat-side-head { padding: 14px; border-bottom: 1px solid var(--line); }
.chat-side-head .btn { width: 100%; }
/* 开启新对话：圆圈加号 + 全宽（与返回主页同宽） */
.chat-new-btn { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; }
.chat-new-btn .circle-plus {
  width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid currentColor;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1; font-weight: 600; padding: 0 0 1px;
}
/* 搜索按钮（放大镜，位于智能体标识右侧） */
.chat-search-btn {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-2); font-size: 15px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: all .15s;
}
.chat-search-btn:hover { color: var(--primary); border-color: var(--primary-2); background: #eff6ff; }
.chat-search-panel { padding: 10px 12px; border-bottom: 1px solid var(--line); background: #fff; }
.chat-search-input-wrap { display: flex; align-items: center; gap: 8px; }
.chat-search-input-wrap input {
  flex: 1; padding: 7px 10px; font-size: 13px; font-family: inherit;
  border: 1px solid var(--line); border-radius: 8px; outline: none;
}
.chat-search-input-wrap input:focus { border-color: var(--primary-2); box-shadow: 0 0 0 3px rgba(59,130,246,.1); }
.chat-search-clear { border: none; background: none; color: var(--ink-3); cursor: pointer; font-size: 13px; padding: 4px; }
.chat-search-clear:hover { color: var(--err); }
.chat-search-results { margin-top: 8px; max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.chat-search-item { padding: 8px 10px; border-radius: 8px; cursor: pointer; background: #f8fafc; border: 1px solid var(--line); }
.chat-search-item:hover { background: #eff6ff; border-color: var(--primary-2); }
.chat-search-title { font-size: 12.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-search-snip { font-size: 12px; color: var(--ink-2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-search-time { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.chat-search-empty { padding: 14px 6px; text-align: center; color: var(--ink-3); font-size: 12.5px; }
.chat-side-list { flex: 1; overflow-y: auto; padding: 8px; }
.chat-item { padding: 10px 12px; border-radius: 10px; cursor: pointer; margin-bottom: 4px; transition: background .12s; position: relative; }
.chat-item:hover { background: #f1f5f9; }
.chat-item.active { background: #e8effd; }
.chat-item .ci-title { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-item .ci-date { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
/* 就地重命名输入框 */
.ci-title-input {
  width: 100%; padding: 4px 8px; font-size: 13px; font-family: inherit;
  border: 1px solid var(--primary-2); border-radius: 6px; outline: none; background: #fff;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
}
.chat-side-empty { padding: 30px 14px; text-align: center; color: var(--ink-3); font-size: 12.5px; }
/* 历史记录时间跨度分组标题（今天 / 昨天 / 7天内 / 30天内 / 每月） */
.chat-side-group { padding: 12px 14px 4px; font-size: 11.5px; color: var(--ink-3); font-weight: 600; letter-spacing: .3px; }

/* 历史记录项：置顶标记 + 右侧「···」（垂直居中，不靠下划线） */
.chat-item .ci-title { padding-right: 34px; } /* 给 ··· 留位 */
.chat-item.pinned { background: #fffbeb; }
.chat-item.pinned:hover { background: #fef3c7; }
.chat-item .ci-more {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: none; background: none; color: var(--ink-3);
  font-size: 15px; font-weight: 700; letter-spacing: 1px; line-height: 1;
  padding: 6px 8px; border-radius: 8px; cursor: pointer; font-family: inherit;
}
.chat-item .ci-more:hover { color: var(--primary); background: #f1f5f9; }
.chat-item .ci-cb {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid #cbd5e1; margin-right: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; color: #fff; line-height: 1;
}
.chat-item .ci-cb.on { background: var(--primary); border-color: var(--primary); }
.chat-item .ci-cb.on::after { content: '✓'; }
.chat-item.multi { display: flex; align-items: center; }
.chat-item.multi .ci-title { flex: 1; min-width: 0; }
.chat-item.selected { background: #e0f2fe; }

/* 桌面端「···」下拉菜单（白底浅色） */
.ci-drop-menu {
  position: fixed; z-index: 200; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow); min-width: 132px; overflow: hidden; padding: 4px;
}
.ci-drop-menu .ci-dm-item {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px;
  border: none; background: none; font-size: 13px; color: var(--ink);
  cursor: pointer; font-family: inherit; text-align: left; border-radius: 7px;
}
.ci-drop-menu .ci-dm-item:hover { background: #f1f5f9; }
.ci-drop-menu .ci-dm-item.danger { color: var(--err); }
.ci-drop-menu .ci-dm-item svg { flex-shrink: 0; }

/* 手机端长按深色悬浮菜单（比记录颜色深，防误删） */
.ci-float-menu {
  position: fixed; z-index: 200; background: rgba(30, 41, 59, .96);
  border-radius: 12px; overflow: hidden; min-width: 148px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .35); padding: 4px;
}
.ci-float-menu .ci-fm-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px;
  border: none; background: none; color: #fff; font-size: 14px; font-family: inherit;
  cursor: pointer; text-align: left; border-radius: 8px;
}
.ci-float-menu .ci-fm-item:active { background: rgba(255, 255, 255, .14); }
.ci-float-menu .ci-fm-item.danger { color: #fca5a5; }
.ci-float-menu .ci-fm-item svg { flex-shrink: 0; }

/* 知识卡：智能体承载的书籍/知识体系展示（单书或定制多书） */
.know-card { background: #f8fafc; border: 1px dashed var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.know-card-head { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.know-card-books { display: flex; flex-wrap: wrap; gap: 6px; }
.know-chip { font-size: 12px; color: var(--primary); background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 999px; padding: 3px 10px; }
.know-card-tip { font-size: 11.5px; color: var(--ink-3); margin-top: 8px; }

/* 知识晶体：生成结果的正文区（Markdown 渲染，可滚动） */
.crystal-body {
  max-height: 52vh; overflow-y: auto; word-break: break-word;
  background: #f8fafc; border: 1px solid var(--line); border-radius: 10px;
  padding: 14px; font-size: 13.5px; line-height: 1.75; margin: 6px 0 4px;
}
.crystal-body p { margin: 6px 0; }
.crystal-body ul, .crystal-body ol { padding-left: 22px; margin: 6px 0; }
.crystal-body li { margin: 3px 0; }
.crystal-body table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.crystal-body td, .crystal-body th { word-break: break-word; }
.crystal-body h1, .crystal-body h2, .crystal-body h3 { margin: 10px 0 6px; font-size: 15px; }
.crystal-body strong { font-weight: 700; }
.crystal-body table { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 13px; }
.crystal-body th, .crystal-body td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; word-break: break-word; }
.crystal-body th { background: #eef2f7; font-weight: 600; }
.crystal-preview p { margin: 2px 0; }
.crystal-preview ul, .crystal-preview ol { padding-left: 18px; margin: 2px 0; }
.crystal-preview h1, .crystal-preview h2, .crystal-preview h3, .crystal-preview h4 { margin: 4px 0 2px; font-size: 13px; }

.chat-multi-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border-bottom: 1px solid var(--line); background: #eff6ff;
  font-size: 13px; color: var(--ink); flex-shrink: 0;
}
.chat-item.multi { background: #f8fafc; }
.chat-item.multi.active { background: #e8effd; }

.chat-main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
/* 就地修改编辑框：固定足够宽度，避免 flex 按内容收缩成窄条 */
.inline-edit { width: min(640px, 84vw); max-width: 100%; margin: 8px 0; }
.inline-edit textarea {
  width: 100%; min-height: 96px; border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; font-family: inherit; font-size: 14px; line-height: 1.5; resize: vertical; outline: none;
}
.inline-edit textarea:focus { border-color: var(--primary-2); box-shadow: 0 0 0 4px rgba(59,130,246,.1); }
.chat-messages { flex: 1; overflow-y: auto; padding: 22px 26px; display: flex; flex-direction: column; gap: 16px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.msg-row { display: flex; gap: 12px; max-width: 92%; position: relative; }
.msg-row.user { align-self: flex-end; flex-direction: row-reverse; }
/* 消息头像标识（"我" / 书籍📖）：两端统一隐藏，与小程序/手机网页端一致；消息区全宽放大 */
.msg-avatar { display: none; }
.msg-row, .msg-row.user { max-width: 100%; }
.msg-body { max-width: 100%; }
.msg-bubble { padding: 12px 16px; border-radius: 14px; background: #f1f5f9; line-height: 1.65; font-size: 14px; word-break: break-word; }
.msg-row.user .msg-bubble { background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.msg-row:not(.user) .msg-bubble { border-bottom-left-radius: 4px; }
.msg-bubble p { margin: 6px 0; }
.msg-bubble h1, .msg-bubble h2, .msg-bubble h3 { margin: 12px 0 6px; font-size: 15px; }
.msg-bubble ul { padding-left: 20px; margin: 2px 0 10px; }
.msg-bubble ol { list-style-position: inside; padding-left: 0; margin: 12px 0 4px; } /* 序号与文字同列，多条独立 <ol> 也上下并列 */
.msg-bubble code { background: #e2e8f0; border-radius: 5px; padding: 1px 6px; font-size: 12.5px; font-family: ui-monospace, Consolas, monospace; }
.msg-bubble pre { background: #0f172a; color: #e2e8f0; border-radius: 10px; padding: 12px 14px; overflow-x: auto; margin: 8px 0; }
.msg-bubble pre code { background: none; color: inherit; padding: 0; }
.msg-bubble table { border-collapse: collapse; margin: 8px 0; font-size: 13px; }
.msg-bubble th, .msg-bubble td { border: 1px solid var(--line); padding: 6px 10px; }
.msg-bubble th { background: #f8fafc; }
.msg-bubble strong { font-weight: 700; }
.msg-actions { display: flex; gap: 2px; margin-top: 6px; opacity: 0; transition: opacity .15s; }
.msg-row:hover .msg-actions { opacity: 1; }
/* 输出消息的操作常驻显示（复制/刷新），我的输入桌面端悬停显示 */
.msg-row.assistant .msg-actions { opacity: 1; }
/* 输出消息：复制与刷新都靠左，留一点间距 */
.asst-actions { justify-content: flex-start; gap: 12px; }
.user-actions { justify-content: flex-end; }
/* 经典小图标按钮（无边框方框） */
.msg-act-icon {
  border: none; background: none; padding: 5px; margin: 0; cursor: pointer;
  color: var(--ink-3); border-radius: 8px; line-height: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.msg-act-icon:hover { color: var(--primary); background: #f1f5f9; }
.msg-act-icon svg { display: block; }
/* 大白话按钮（低调暗色背景，与复制/刷新一致，无边框不突出） */
.msg-act-icon.plain { line-height: 1.2; font-size: 12px; color: var(--ink-2); background: #f1f5f9; border-radius: 8px; padding: 7px 12px; margin-left: 2px; border: none; }
.msg-act-icon.plain:hover { color: var(--primary); background: #e2e8f0; }
/* 我的输入长按菜单（竖排：复制/选择文本/修改） */
.user-msg-menu {
  position: absolute; bottom: calc(100% + 6px); left: 8px; z-index: 60;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, .18); overflow: hidden; min-width: 128px;
}
.umm-item {
  display: block; width: 100%; text-align: left; padding: 11px 16px;
  border: none; background: none; font-size: 14px; font-family: inherit; color: var(--ink);
  border-bottom: 1px solid #f1f5f9; cursor: pointer;
}
.umm-item:last-child { border-bottom: none; }
.umm-item:active { background: #f1f5f9; }
.msg-act { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: 7px; padding: 3px 9px; font-size: 12px; cursor: pointer; font-family: inherit; }
.msg-act:hover { border-color: var(--primary-2); color: var(--primary); }
.msg-typing { display: inline-block; width: 8px; height: 16px; background: var(--ink-3); border-radius: 2px; animation: blink 1s infinite; vertical-align: middle; margin-left: 2px; }
@keyframes blink { 50% { opacity: 0; } }
.msg-waiting { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: 13px; padding: 10px 16px; }
.msg-error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-top: 8px; }

/* 书籍链接卡片（分诊结果） */
.links-box { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.link-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px;
  background: #eff6ff; border: 1px solid #bfdbfe; color: #1d4ed8; font-size: 13px; cursor: pointer;
  transition: all .15s; font-weight: 500;
}
.link-chip:hover { background: #dbeafe; text-decoration: none; transform: translateY(-1px); }
.link-chip.unmatched { background: #f8fafc; border-color: var(--line); color: var(--ink-3); cursor: default; }
.link-chip.unmatched:hover { transform: none; background: #f8fafc; }
.pending-tag {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  background: #e2e8f0; color: #64748b; font-size: 11px; font-weight: 500; vertical-align: 1px;
}

.chat-input-bar { border-top: 1px solid var(--line); padding: 14px 18px; background: var(--surface); }
/* 一键到底 / 一键到顶 浮动按钮（DeepSeek 式：不在底部显示↓，不在顶部显示↑；桌面端与手机端共用） */
.chat-scroll-btns { position: absolute; right: 14px; bottom: 84px; display: flex; flex-direction: column; gap: 8px; z-index: 40; }
.chat-scroll-btn { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.96); border: 1px solid var(--line); color: var(--ink-2); cursor: pointer; box-shadow: 0 2px 10px rgba(15,23,42,.16); display: flex; align-items: center; justify-content: center; padding: 0; }
.chat-scroll-btn:hover { color: var(--primary); border-color: var(--primary-2); }
.chat-scroll-btn svg { display: block; }
/* 用户偏好 + 思考模式：同一行两端布局（左侧偏好、右侧模式），与小程序一致，一行放得下 */
.chat-pref-row { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0; font-size: 11px; color: var(--ink-2); }
.cpr-left, .cpr-right { display: flex; align-items: center; gap: 3px; min-width: 0; }
.cpr-label { color: var(--ink-3); flex-shrink: 0; white-space: nowrap; }
.cpr-btn {
  display: inline-flex; align-items: center; gap: 2px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 7px; background: #f3f4f6;
  color: var(--ink-2); font-size: 11px; font-family: inherit; line-height: 1.4;
  padding: 2px 7px; flex-shrink: 0; touch-action: manipulation; white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
}
.cpr-btn:hover { border-color: var(--primary-2); color: var(--primary); }
.cpr-btn.on { background: #dbeafe; color: #1d4ed8; border-color: #93c5fd; font-weight: 600; }
.cpr-locked { color: #dc2626; margin-left: 2px; white-space: nowrap; font-size: 10px; flex-shrink: 0; }
.chat-mode-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.chat-mode-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  color: var(--ink-2); font-size: 12.5px; font-family: inherit; font-weight: 500;
  padding: 5px 14px; transition: all .2s ease;
}
.chat-mode-btn:hover { border-color: var(--primary-2); color: var(--primary); }
.chat-mode-btn.on {
  background: linear-gradient(135deg, #7c3aed, #2563eb); color: #fff; border-color: transparent;
  box-shadow: 0 2px 10px rgba(124, 58, 237, .3);
}
.chat-mode-icon { font-size: 13px; }
.chat-mode-hint { font-size: 11.5px; color: var(--ink-3); }
.chat-input-box { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; gap: 10px; align-items: flex-end; background: var(--surface); transition: box-shadow .15s, border-color .15s; }
.chat-input-box:focus-within { border-color: var(--primary-2); box-shadow: 0 0 0 4px rgba(59,130,246,.1); }
.chat-input-box textarea { flex: 1; border: none; outline: none; resize: none; font-family: inherit; font-size: 14.5px; line-height: 1.5; max-height: 220px; background: transparent; color: var(--ink); }
.chat-input-box .btn { border-radius: 10px; padding: 9px 18px; }
/* 知识汇总 + 生成文案：左右并排（桌面端）；手机端自动上下排列 */
.crystal-split { display: flex; gap: 14px; align-items: stretch; }
.crystal-pane {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  background: var(--surface);
}
.crystal-pane-title { font-size: 13px; font-weight: 600; color: var(--primary); margin-bottom: 8px; flex-shrink: 0; }
/* 窗口下方按钮区：左对齐、可换行（知识汇总：重新生成/编辑/复制/下载/保存；文案栏：生成文案/复制文案/下载文案） */
.crystal-pane-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; flex-shrink: 0; }
.crystal-pane-actions .btn { padding: 7px 12px; font-size: 12.5px; white-space: nowrap; }
.crystal-caret { font-size: 10px; margin-left: 2px; opacity: .7; }
.crystal-pane .crystal-body {
  max-height: 46vh; overflow-y: auto; padding-right: 4px;
  /* 现有 .crystal-body 若已有 max-height 会冲突，这里覆盖为双栏限高 */
}
@media (max-width: 860px) {
  .crystal-split { flex-direction: column; }
  .crystal-pane .crystal-body { max-height: 34vh; }
}

/* 知识汇总弹窗加宽（桌面端左右并排需要更宽；用 .modal-wide 类，JS 控制） */
.modal-wide { max-width: 900px; width: 94%; }
.chat-attach-btn {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  border: none; background: transparent; color: var(--ink-3);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s, color .15s;
}
.chat-attach-btn:hover { background: rgba(0, 0, 0, .05); color: var(--ink); }
.chat-attach-btn:active { background: rgba(0, 0, 0, .08); }
/* 附件卡片：输入区上方，清晰展示已上传文件（文件名+大小+移除） */
#chAttachBar { padding: 0 2px 8px; }
.attach-card {
  display: inline-flex; align-items: center; gap: 9px;
  background: #f8fafc; border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 10px; max-width: 100%;
}
.attach-card .attach-icon { font-size: 16px; flex-shrink: 0; }
.attach-card .attach-info { display: flex; flex-direction: column; min-width: 0; }
.attach-card .attach-name { font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.attach-card .attach-size { font-size: 11px; color: var(--ink-3); }
.attach-card .attach-rm {
  flex-shrink: 0; width: 22px; height: 22px; border: none; border-radius: 50%;
  background: transparent; color: var(--ink-3); font-size: 13px; line-height: 1;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.attach-card .attach-rm:hover { background: rgba(220, 38, 38, .1); color: var(--err); }
/* 已绑定状态：无关闭按钮，绿底标识，突出"已绑定本对话" */
.attach-card.bound { background: #f0fdf4; border-color: #86efac; }
.attach-card.bound .attach-name { color: var(--ok, #16a34a); }
.attach-bound {
  flex-shrink: 0; font-size: 11px; font-weight: 600; color: #16a34a;
  background: rgba(22, 163, 74, .1); border: 1px solid rgba(22, 163, 74, .35);
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.attach-tip { font-size: 11px; color: var(--ink-3); margin-top: 5px; }
/* 从问题分诊台带入问题的提示条（不突兀，浅色小字） */
.chat-import-tip {
  font-size: 12px; color: var(--ink-3); background: #f8fafc;
  border: 1px dashed var(--line); border-radius: 8px;
  padding: 5px 10px; margin: 0 0 6px;
}
/* 对话消息内的附件标记（历史记录中用户消息旁的"📎 文件名"） */
.attach-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
  background: #f1f5f9; border: 1px solid var(--line); color: var(--ink-2);
  padding: 3px 9px; border-radius: 8px;
}
.chat-tip { font-size: 11.5px; color: var(--ink-3); margin-top: 7px; text-align: center; }
/* 偏好建议卡片（智能体发现用户新特点时提醒，同一会话一次） */
.pref-suggest {
  margin-top: 8px; padding: 10px 12px; border-radius: 10px;
  background: #f0f9ff; border: 1px solid #bae6fd; font-size: 13px;
}
.pref-suggest-title { font-weight: 600; color: var(--ink); }
.pref-suggest-text { font-size: 12.5px; color: var(--ink-2); margin-top: 4px; }

/* 对话页头部 */
.chat-head { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.chat-head .ch-name { font-weight: 600; font-size: 15.5px; }
.chat-head .ch-sub { font-size: 12px; color: var(--ink-3); }
.chat-head .ch-actions { margin-left: auto; display: flex; gap: 8px; }

/* ===== 移动端适配（手机浏览器；仅作用于窄屏，桌面端不受影响） ===== */
@media (max-width: 768px) {
  .container { padding: 0 14px; }

  /* 顶栏：手机上保留图标+ubookai，隐藏中文站点名（拥挤），压缩按钮；年会员徽章不显示 */
  .topbar-inner { gap: 8px; height: 54px; }
  .brand-site { display: none; }
  .brand-name { font-size: 21px; }
  .brand-mark { width: 28px; height: 28px; }
  .topbar-right { gap: 6px; }
  #memberBadge { display: none; }
  .user-menu-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .user-menu { min-width: 168px; max-height: 70vh; overflow-y: auto; }
  .topbar-right .btn { white-space: nowrap; padding: 5px 10px; font-size: 12.5px; }
  #feeBtn { max-width: 84px; overflow: hidden; text-overflow: ellipsis; }

  /* 表单输入字号 ≥16px：避免 iOS 聚焦时页面被自动放大（含聊天主输入框、内联修改框、知识汇总搜索、分销申请、偏好表单等） */
  .form-row input, .form-row textarea, .form-row select,
  .fb-reply-input, .ci-title-input, .chat-search-input-wrap input,
  .chat-input-box textarea, .inline-edit textarea, .ak-input,
  #crystalSearch, #appIntro, #prefsForm textarea, .search-input,
  #histSearch, #ceContent { font-size: 16px; }

  /* 移动端按钮：触控目标高度 ≥40px，避免误触（.btn.small 及账户条上的小按钮） */
  .btn.small { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
  .account-strip .btn { min-height: 34px; }

  /* 弹窗：限高 + 内部滚动（手机键盘弹起不遮挡按钮）+ 底部安全区 */
  .modal { padding: 20px; max-height: 86dvh; overflow-y: auto; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }

  /* 表格：窄屏可横向滚动，单元格自动换行 */
  .article-body table, .msg-bubble table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .article-body td, .article-body th, .msg-bubble td, .msg-bubble th { word-break: break-word; }
  /* 面板内表格（分销佣金/提现等）：窄屏可横向滚动，避免溢出被裁剪 */
  .panel table, .form-card table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .panel td, .panel th, .form-card td, .form-card th { word-break: break-word; }
  /* 订单号等长串：允许断行，避免溢出 */
  .panel td, .order-row { word-break: break-all; }
  /* 统计卡金额等长数值：窄屏允许断行，避免溢出列宽 */
  .panel .kv .v { word-break: break-all; }
  /* 弹窗按钮行：窄屏允许换行 */
  .modal-actions { flex-wrap: wrap; }

  /* 网格：防止 320px 窄屏出现横向滚动条 */
  .profile-grid, .detail-fields { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }

  /* 页面标题/正文内边距收窄 */
  .hero h1 { font-size: 28px; }
  .news-page-head h1 { font-size: 24px; }
  .rich-content { padding: 20px; }
  .article-page { padding: 24px 0 40px; }
  .news-detail { padding: 24px 0 40px; }
  .form-card { padding: 22px; margin: 28px auto; }
  /* Banner 圆点：触屏热区加大（不小于 10px） */
  .banner-dots span { width: 10px; height: 10px; }
  .banner-dots span.active { width: 22px; }

  /* 页脚导航：两列网格 */
  .footer-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
  .footer-nav-col { min-width: 0; }

  /* 详情页头部：窄屏换行 */
  .detail-head { flex-wrap: wrap; padding: 20px; }

  /* 首页间距收窄 */
  .home-ask { padding: 24px 0 56px; }

  /* 聊天页（手机）：顶栏隐藏，自定义头部；历史记录改为左侧抽屉（DeepSeek 式） */
  body.chat-page .topbar { display: none; }
  html.chat-page, body.chat-page { overflow: hidden; height: 100vh; height: 100dvh; }
  body.chat-page #view { padding: 0; }
  body.chat-page .chat-layout { height: 100vh; height: 100dvh; margin: 0; border-radius: 0; border-left: none; border-right: none; }
  body.has-expiry-banner.chat-page .chat-layout { height: calc(100vh - 37px); height: calc(100dvh - 37px); }
  .chat-layout { height: calc(100vh - 120px); height: calc(100dvh - 120px); min-height: 0; }
  .chat-messages { padding: 14px; }
  .chat-input-bar { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .chat-head { padding: 12px 14px; }
  .inline-edit { width: 100%; }

  /* 头部：☰ 历史记录（左） / 居中标题 / ＋开启新对话（右） */
  .chat-mhead {
    display: flex; align-items: center; gap: 4px;
    height: 48px; padding: 0 8px; flex-shrink: 0;
    border-bottom: 1px solid var(--line); background: var(--surface);
  }
  .chat-hamb, .chat-mhead-new {
    border: none; background: none; color: var(--ink);
    line-height: 1; padding: 8px 10px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px; font-family: inherit;
  }
  .chat-hamb { width: 40px; font-size: 19px; font-weight: 600; }
  .chat-hamb:active, .chat-mhead-new:active { background: #f1f5f9; }
  .chat-mhead-title { flex: 1; text-align: center; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chat-mhead-new { width: 72px; font-size: 13.5px; font-weight: 500; white-space: nowrap; justify-content: flex-end; }

  /* 历史记录抽屉：从左侧滑出，覆盖在对话之上 */
  .chat-side {
    position: fixed !important; top: 0; left: 0; bottom: 0; z-index: 130;
    width: min(80vw, 320px) !important; max-height: none !important;
    border-right: 1px solid var(--line) !important; border-bottom: none !important;
    background: #fff !important;
    transform: translateX(-105%);
    transition: transform .25s ease;
    box-shadow: 0 0 40px rgba(15, 23, 42, .25);
  }
  .chat-side.open { transform: translateX(0); }
  .chat-drawer-mask { display: block; position: fixed; inset: 0; background: rgba(15, 23, 42, .4); z-index: 120; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
  .chat-drawer-mask.show { opacity: 1; pointer-events: auto; }

  /* 抽屉底部：左侧用户名（点击进个人中心）+ 右侧费用说明（替换 DeepSeek 的 3 个点） */
  .chat-side-user {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 12px 14px; border-top: 1px solid var(--line); flex-shrink: 0;
  }
  .chat-user-link { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); min-width: 0; }
  .chat-user-link:hover { text-decoration: none; }
  .chat-user-avatar {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
  }
  .chat-user-name { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; }
  .chat-fee-link {
    display: inline-flex; align-items: center; padding: 7px 14px;
    border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2);
    font-size: 13px; white-space: nowrap;
  }
  .chat-fee-link:hover { color: var(--primary); border-color: var(--primary-2); text-decoration: none; }

  /* 对话消息：全宽显示、不左右晃动（头像已全局隐藏） */
  html, body { overflow-x: hidden; }
  .msg-row { gap: 4px; }

  /* 历史记录抽屉：隐藏时间；移除抽屉内"开启新对话"按钮（右上角已有）；手机端不要「···」按钮 */
  .chat-item .ci-date { display: none; }
  .chat-side-head { display: none; }
  .ci-more { display: none; }
  .chat-item .ci-title { padding-right: 10px; }
  /* 长按菜单由我们自己弹出：禁止系统文本选择/放大镜（避免"长按变长突出"的原生行为） */
  .chat-item, .chat-item *:not(input):not(textarea) {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  /* 输入区（DeepSeek 式）：输入框在上，偏好/模式选项在最底部 */
  .chat-input-bar { display: flex; flex-direction: column; }
  .chat-input-box { order: 1; }
  .chat-mode-row { order: 2; justify-content: center; gap: 10px; margin-top: 8px; margin-bottom: 0; }
  .chat-pref-row { order: 3; margin-bottom: 8px; }
  .chat-pref-row .cpr-btn { min-height: 30px; font-size: 12.5px; padding: 3px 10px; }
  .chat-mode-btn { padding: 6px 16px; font-size: 13px; }
  .chat-mode-hint { display: none; }

  /* 手机端顶栏：费用说明按钮只在费用说明页显示（作"再点一下返回"用），主页等一律不显示 */
  #feeBtn { display: none; }
  body.fee-page #feeBtn { display: inline-flex; }

  /* 主页：手机端保留全部三个入口方块（浏览全部书籍对话体 / 继续上次对话 / 最新动态），与桌面/小程序一致 */
  .home-ask-right { gap: 12px; }

  /* 对话消息：我的输入在手机上不显示操作行（复制/修改走长按竖排菜单），屏蔽系统菜单 */
  .msg-row.user .msg-actions { display: none; }
  .msg-row.user .msg-bubble { -webkit-touch-callout: none; }

  /* 头部视口级固定：☰ / 标题 / ＋新对话 永远钉在屏幕顶端（任何滚动/布局都动不了它） */
  .chat-mhead { position: fixed; top: 0; left: 0; right: 0; z-index: 90; }
  .chat-messages { padding-top: 56px; }
  .chat-input-bar { flex-shrink: 0; }

  /* 触屏：hover 位移会让点击目标在按下瞬间移动，第一次点击被吞掉（要点两次）→ 全部取消位移 */
  .agent-card:hover, .home-square:hover, .news-list-card:hover, .btn:hover, .link-chip:hover,
  .opt-tag:hover, .preset-q:hover, .cat-tab:hover, .chat-item:hover, .msg-act-icon:hover,
  .chat-mode-btn:hover, .chat-hamb:hover, .chat-mhead-new:hover, .chat-search-btn:hover,
  .chat-search-item:hover, .fb-unread-btn:hover, a.home-tagline:hover { transform: none; }

  /* 分类页签（书籍列表/历史记录等）：手机端改为横向滚动，避免多分类纵向堆叠过高 */
  .cat-tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; -webkit-overflow-scrolling: touch; padding: 6px 10px 4px; }
  .cat-tab { flex-shrink: 0; }

  /* 聊天页：一键到底/一键到顶 浮动按钮上移，避免盖住偏好/模式选项行 */
  .chat-scroll-btns { bottom: 150px; }

  /* 输入框瘦身：高度紧凑，不再是一条厚厚的大框 */
  .chat-input-box { padding: 8px 12px; border-radius: 22px; align-items: center; }
  .chat-input-box textarea { min-height: 24px; max-height: 120px; padding: 6px 0; line-height: 1.4; }
  .chat-input-box .btn { padding: 8px 18px; }

  /* 手机端：思考模式（快速/深度）保留显示（与小程序对齐；布局在输入框下方居中） */
  .chat-mode-btn { padding: 6px 16px; font-size: 13px; }
}

@media (max-width: 480px) {
  .home-tagline { font-size: 22px; letter-spacing: 1px; }
  .agents-head h1 { font-size: 22px; }
  .msg-row { max-width: 100%; }
  .banner img { height: 140px; }
}