/* ============================================================
   好好聊 · 设计令牌 (Design Tokens)
   主题：深墨夜（默认） / 暖纸（浅色）
   关键词：深夜台灯下的信纸、私密、编辑感、温度
   ============================================================ */

/* ---------- 字体 ---------- */
:root {
  /* 中文显示体：macOS/iOS 用系统宋体，优雅且零加载；其它平台回落到 Noto Serif SC */
  --font-display: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC",
    "SimSun", Georgia, serif;
  /* 中文正文体：优先系统字体，秒开无闪 */
  --font-body: "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Noto Sans SC",
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  /* 拉丁展示体：仅用于数字与英文，制造杂志感的斜体序号 */
  --font-latin: "Instrument Serif", "Times New Roman", Georgia, serif;
  --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
}

/* ---------- 色板：深墨夜 ---------- */
:root,
[data-theme="ink"] {
  color-scheme: dark;

  --bg: #100E0C;
  --bg-deep: #0A0908;
  --bg-2: #17130F;
  --surface: rgba(247, 241, 231, 0.045);
  --surface-2: rgba(247, 241, 231, 0.075);
  --surface-3: rgba(247, 241, 231, 0.11);
  --surface-solid: #1B1712;

  --fg: #F5EFE4;
  --fg-2: rgba(245, 239, 228, 0.70);
  --fg-3: rgba(245, 239, 228, 0.66);
  --fg-4: rgba(245, 239, 228, 0.60);

  --line: rgba(245, 239, 228, 0.10);
  --line-2: rgba(245, 239, 228, 0.17);
  --line-strong: rgba(245, 239, 228, 0.30);

  /* 琥珀 = 主色，象征被好好接住的温度 */
  --accent: #F0A64B;
  --accent-hi: #FFD08A;
  --accent-soft: rgba(240, 166, 75, 0.13);
  --accent-line: rgba(240, 166, 75, 0.34);
  --on-accent: #1A1206;

  /* 语义色 */
  --ember: #E8673C;   /* 风险 / 降温 */
  --ember-soft: rgba(232, 103, 60, 0.14);
  --sage: #9FBC95;    /* 积极 / 升温 */
  --sage-soft: rgba(159, 188, 149, 0.14);
  --dusk: #9486BA;    /* 冷淡 / 试探 */
  --dusk-soft: rgba(148, 134, 186, 0.14);

  --shadow-card: 0 1px 0 rgba(245, 239, 228, 0.04) inset,
    0 18px 40px -24px rgba(0, 0, 0, 0.9);
  --shadow-pop: 0 24px 60px -20px rgba(0, 0, 0, 0.85);
  --scrim: rgba(8, 7, 6, 0.66);
}

/* ---------- 色板：暖纸（浅色） ---------- */
[data-theme="paper"] {
  color-scheme: light;

  --bg: #F4EDE1;
  --bg-deep: #EAE1D2;
  --bg-2: #FBF6EE;
  --surface: rgba(43, 34, 24, 0.035);
  --surface-2: rgba(43, 34, 24, 0.062);
  --surface-3: rgba(43, 34, 24, 0.095);
  --surface-solid: #FFFCF6;

  --fg: #241D15;
  --fg-2: rgba(36, 29, 21, 0.72);
  --fg-3: rgba(36, 29, 21, 0.70);
  --fg-4: rgba(36, 29, 21, 0.66);

  --line: rgba(43, 34, 24, 0.11);
  --line-2: rgba(43, 34, 24, 0.19);
  --line-strong: rgba(43, 34, 24, 0.34);

  --accent: #A35A0E;
  --accent-hi: #8F5009;
  --accent-soft: rgba(181, 106, 22, 0.10);
  --accent-line: rgba(181, 106, 22, 0.30);
  --on-accent: #FFF8EC;

  --ember: #C2441C;
  --ember-soft: rgba(194, 68, 28, 0.10);
  --sage: #4E7A45;
  --sage-soft: rgba(78, 122, 69, 0.11);
  --dusk: #5B4E86;
  --dusk-soft: rgba(91, 78, 134, 0.10);

  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 14px 34px -26px rgba(70, 50, 25, 0.5);
  --shadow-pop: 0 26px 60px -22px rgba(70, 50, 25, 0.35);
  --scrim: rgba(40, 32, 22, 0.42);
}

/* ---------- 间距与尺度 ---------- */
:root {
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 44px;
  --sp-9: 64px;

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-full: 999px;

  /* 两端共用的语义规范，页面不得另设同类控件尺寸。 */
  --control-radius: var(--r-md);
  --card-radius: var(--r-lg);
  --dialog-radius: var(--r-xl);
  --control-height: 44px;
  --control-height-lg: 52px;
  --textarea-min-height: 84px;
  --chat-input-min-height: 64px;
  --control-font-size: 14px;
  --input-font-size: 16px;
  --label-font-size: 13px;
  --feedback-font-size: 13px;
  --danger-fill: #B63F25;
  --on-danger: #FFFFFF;
  --label-gap: var(--sp-2);
  --field-gap: var(--sp-5);
  --action-gap: var(--sp-2);

  --shell: 480px;
  --nav-h: 58px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-1: 160ms;
  --dur-2: 280ms;
  --dur-3: 480ms;
}

/* ---------- 基础重置 ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.62;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

button {
  cursor: pointer;
  touch-action: manipulation;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

::selection {
  background: var(--accent-soft);
  color: var(--fg);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* 两端共享；减少动态效果也覆盖弹窗和页面切换。 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 应用外壳 ---------- */
#app {
  min-height: 100dvh;
  background: var(--bg-deep);
}

.shell {
  position: relative;
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--line);
}

.app-col {
  flex: 1;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

#view {
  flex: 1;
}

.view-host {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ---------- 排版 ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: 0.01em;
}

.eyebrow {
  font-family: var(--font-latin);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  text-transform: lowercase;
}

.num {
  font-family: var(--font-latin);
  font-weight: 400;
  font-variant-numeric: lining-nums;
}

.serif-it {
  font-family: var(--font-latin);
  font-style: italic;
}

.muted {
  color: var(--fg-3);
}

.tnum {
  font-variant-numeric: tabular-nums;
}