/* ============================================================
   浦城百晓书 · 共享 Design Token
   用于：landing.html / index.html(聊天+登录) 三处风格统一
   品牌意象：山水青绿（主） + 丹桂暖金（强调） + 宣纸暖白（底）
   ============================================================
   使用约定：
   1. 业务样式只允许引用变量，禁止硬编码色值
   2. 微信登录按钮必须保持微信规范绿 #07C160（见 --wx-green），不得改色
   3. 深色模式由 [data-theme="dark"] 覆盖同名变量，业务代码无需分支
   ============================================================ */

:root {
  /* ---------- 品牌主色：山水黛绿 ---------- */
  --brand-800: #1B4038;
  --brand-700: #24544A;
  --brand-600: #2F6B5E;   /* 主色：按钮 / 品牌字 / 用户气泡 */
  --brand-500: #3A8171;
  --brand-400: #5FA798;
  --brand-100: #DCE9E4;   /* 淡底 */
  --brand-050: #F0F6F4;   /* 极淡底 */

  /* ---------- 强调色：丹桂金 ---------- */
  --accent-700: #96632F;
  --accent-600: #B07B3E;
  --accent-500: #C08A4A;  /* Logo / CTA / 空状态装饰 */
  --accent-100: #F3E4D0;

  /* ---------- 印章朱红：引用出处 ---------- */
  --seal: #A63A2E;
  --seal-100: #F7E6E3;

  /* ---------- 微信品牌色（不可改） ---------- */
  --wx-green: #07C160;

  /* ---------- 中性：宣纸暖白体系 ---------- */
  --bg: #FAF8F4;          /* 页面底：替换原冷灰 #f5f5f5 */
  --surface: #FFFFFF;     /* 卡片 / AI 气泡 */
  --surface-2: #F5F2EC;   /* 次级底：hover / 输入区 */
  --line: rgba(31, 35, 33, .10);        /* hairline */
  --line-strong: rgba(31, 35, 33, .16);

  /* ---------- 墨色文字 ---------- */
  --ink-900: #1F2321;
  --ink-700: #3E443F;
  --ink-500: #6B736E;
  --ink-300: #6B736E;  /* 1114批 ink-300 提到 WCAG AA ≥4.5:1（原 #9AA19B 仅 2.49:1，9~12.5px 小字不达标） */
  --ink-on-brand: #FFFFFF;

  /* ---------- 形状 ---------- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-bubble: 18px;
  --r-tail: 6px;          /* 气泡尾角 */

  /* ---------- 间距（4 倍数） ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;

  /* ---------- 分层软阴影 ---------- */
  --sh-1: 0 1px 2px rgba(31, 35, 33, .05);
  --sh-2: 0 2px 4px rgba(31, 35, 33, .04), 0 8px 24px rgba(31, 35, 33, .06);
  --sh-3: 0 8px 24px rgba(31, 35, 33, .10), 0 24px 64px rgba(31, 35, 33, .08);

  /* ---------- 字体栈 ---------- */
  --font-sans: "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC",
               "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  /* 衬线：仅用于品牌名 / Landing 标题 / 空状态问候 */
  --font-serif: "Source Han Serif SC", "Noto Serif SC", "Songti SC", SimSun, serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- 布局 ---------- */
  --sidebar-width: 280px;
  --content-max: 760px;       /* 正文阅读最大宽 */
  --bottom-nav-height: 60px;

  /* ---------- 动效 ---------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: .16s;
  --dur: .22s;
}

/* ============================================================
   深色模式：深黛（不再用与品牌无关的紫蓝 #1a1a2e）
   ============================================================ */
[data-theme="dark"] {
  --brand-600: #5FA798;
  --brand-500: #47907F;
  --brand-400: #6FB8A9;
  --brand-100: #243531;
  --brand-050: #1B2A26;

  --accent-600: #C89A5E;
  --accent-500: #D6AB72;
  --accent-100: #3A2E20;

  --seal: #D4675A;
  --seal-100: #3A2320;

  --bg: #101614;
  --surface: #171E1C;
  --surface-2: #1E2624;
  --line: rgba(233, 237, 235, .12);
  --line-strong: rgba(233, 237, 235, .20);

  --ink-900: #E9EDEB;
  --ink-700: #C3CAC6;
  --ink-500: #9AA5A0;
  --ink-300: #9AA5A0;  /* 1114批 ink-300 提到 WCAG AA ≥4.5:1（原 #6E7671 仅 3.92:1） */

  --sh-1: 0 1px 2px rgba(0, 0, 0, .30);
  --sh-2: 0 2px 4px rgba(0, 0, 0, .24), 0 8px 24px rgba(0, 0, 0, .30);
  --sh-3: 0 8px 24px rgba(0, 0, 0, .36), 0 24px 64px rgba(0, 0, 0, .30);
}

/* ============================================================
   基础层（三处共用，业务样式不要重复定义）
   ============================================================ */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-align: left;
}

/* 品牌字：衬线，仅用于标题 / 品牌名 */
.brand-text {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--brand-600);
}

/* 通用卡片 */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}

/* 主按钮 */
.btn-primary {
  background: var(--brand-600);
  color: var(--ink-on-brand);
  border: none;
  border-radius: var(--r-md);
  padding: 10px 18px;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.btn-primary:hover {
  background: var(--brand-700);
  transform: translateY(-1px);
  box-shadow: var(--sh-2);
}
.btn-primary:active { transform: none; }

/* 微信登录按钮：颜色锁定微信规范绿，不可改 */
.btn-wechat {
  background: var(--wx-green);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 600;
  width: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  transition: filter var(--dur-fast) var(--ease);
}
.btn-wechat:hover { filter: brightness(1.05); }

/* 输入框 */
.input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  color: var(--ink-900);
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.input:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-050);
}

/* 引用出处标记（印章朱红 pill） */
.cite-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 2px 8px;
  border-radius: var(--r-xs);
  background: var(--seal-100);
  border: 1px solid var(--line);
  color: var(--seal);
  font-size: 12px;
  line-height: 1.6;
}

/* 消息入场动效 */
@keyframes msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
   聊天主页 · 气泡（替换原来微信绿 #95ec69 方案）
   ============================================================ */
.message { max-width: min(72%, var(--content-max)); }
.message.user { align-self: flex-end; }
.message.ai   { align-self: flex-start; }

.message-bubble {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-bubble);
  line-height: 1.75;
  font-size: 15px;
  word-break: break-word;
  animation: msg-in var(--dur) var(--ease) both;
}
.message.user .message-bubble {
  background: var(--brand-600);
  color: var(--ink-on-brand);
  border-bottom-right-radius: var(--r-tail);
  box-shadow: var(--sh-1);
}
.message.ai .message-bubble {
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom-left-radius: var(--r-tail);
  box-shadow: var(--sh-1);
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--s-7);
  gap: var(--s-4);
}
.empty-greeting {
  font-family: var(--font-serif);
  font-size: 24px;
  color: var(--ink-900);
  letter-spacing: .02em;
}
.empty-sub { color: var(--ink-500); font-size: 14px; }

/* 引导提问 chip */
.suggest-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  width: min(100%, 520px);
  margin-top: var(--s-5);
}
.suggest-chip {
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  color: var(--ink-700);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.suggest-chip:hover {
  border-color: var(--brand-500);
  box-shadow: var(--sh-1);
  transform: translateY(-1px);
}

/* 登录卡片 */
.auth-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--s-6) var(--s-5);
  width: 380px;
  max-width: 90vw;
  box-shadow: var(--sh-3);
}
.auth-brand {
  font-family: var(--font-serif);
  font-size: 22px;
  text-align: center;
  color: var(--brand-600);
  letter-spacing: .04em;
}
.auth-slogan {
  text-align: center;
  color: var(--ink-500);
  font-size: 13px;
  margin-top: var(--s-1);
}

/* 移动端 */
@media (max-width: 768px) {
  .message { max-width: 85%; }
  .suggest-grid { grid-template-columns: 1fr; }
}