/* ============ BeeChinese — design tokens ============ */
:root{
  /* brand */
  --blue:#1E50C8;            /* primary, user-selected */
  --blue-bright:#2D63E0;     /* logo blue, highlights */
  --blue-deep:#163C99;
  --blue-tint:#EAF0FC;       /* light fill */
  --blue-tint-2:#F2F6FD;
  --yellow:#F6C026;          /* accent — encouragement / progress only */
  --yellow-soft:#FCEFC0;
  --yellow-deep:#C9930B;

  /* warm neutral ground */
  --ink:#16213C;             /* navy text */
  --ink-2:#41506E;           /* secondary text */
  --ink-3:#75809A;           /* tertiary / captions */
  --line:#E7E1D6;            /* warm hairline */
  --line-2:#EFEAE0;
  --bg:#F4EFE6;              /* warm off-white ground */
  --bg-2:#FBF8F2;            /* warm panel */
  --card:#FFFFFF;
  --card-warm:#FCFAF6;

  --good:#1F8A5B;
  --good-tint:#E4F2EA;
  --bad:#C0492F;
  --bad-tint:#F7E7E1;

  /* type —— 系统字体栈(不依赖 Google Fonts,国内离线可用) */
  --serif:'Songti SC','STSong','Noto Serif SC','SimSun',serif;            /* 编辑感衬线标题:Mac 宋体/Win 宋体 */
  --sans:'PingFang SC','Microsoft YaHei','Hiragino Sans GB',system-ui,-apple-system,'Segoe UI',sans-serif;
  --num:system-ui,-apple-system,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
  --mono:ui-monospace,'SFMono-Regular',Menlo,'Cascadia Code','Consolas',monospace;

  /* shape */
  --r-lg:18px;
  --r-md:13px;
  --r-sm:9px;
  --r-pill:999px;
  --shadow-card:0 1px 2px rgba(22,33,60,.05), 0 8px 24px rgba(22,33,60,.06);
  --shadow-pop:0 12px 40px rgba(22,33,60,.16);
  --shadow-soft:0 1px 3px rgba(22,33,60,.06);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:#E8E1D4;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--yellow-soft)}

/* ===== full-bleed app(无设备框,铺满视口) ===== */
#app{
  position:fixed;inset:0;
  width:100vw;height:100vh;
  background:var(--bg);
  overflow:hidden;
  display:flex;flex-direction:column;
}

/* numbers */
.num{font-family:var(--num);font-feature-settings:"tnum" 1;letter-spacing:-.01em}
.pinyin{font-family:var(--num);color:var(--blue);font-weight:500;letter-spacing:.01em}
.en{font-family:var(--num);color:var(--ink-3);font-style:normal}

/* scrollbars inside cards */
.scroll::-webkit-scrollbar{width:8px;height:8px}
.scroll::-webkit-scrollbar-thumb{background:#DCD4C5;border-radius:8px}
.scroll::-webkit-scrollbar-track{background:transparent}

/* shared kbd / label */
.eyebrow{
  font-family:var(--num);font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);
}

/* fade/slide screen transition */
@keyframes screenIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.screen-anim{animation:screenIn .45s cubic-bezier(.22,.61,.36,1) both}

@keyframes popIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.stagger>*{animation:popIn .5s cubic-bezier(.22,.61,.36,1) both}
.stagger>*:nth-child(1){animation-delay:.04s}
.stagger>*:nth-child(2){animation-delay:.10s}
.stagger>*:nth-child(3){animation-delay:.16s}
.stagger>*:nth-child(4){animation-delay:.22s}
.stagger>*:nth-child(5){animation-delay:.28s}
.stagger>*:nth-child(6){animation-delay:.34s}

/* dot loader */
@keyframes dotPulse{0%,80%,100%{opacity:.25}40%{opacity:1}}
.dot{display:inline-block;width:4px;height:4px;border-radius:50%;background:currentColor;margin:0 1.5px;animation:dotPulse 1.2s infinite}
.dot:nth-child(2){animation-delay:.18s}
.dot:nth-child(3){animation-delay:.36s}

/* audio bars */
@keyframes vbar{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}

/* ===== chat / agent-trace ===== */
.mono{font-family:var(--mono);font-feature-settings:"tnum" 1;letter-spacing:-.01em}
@keyframes msgIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.msg-in{animation:msgIn .5s cubic-bezier(.22,.61,.36,1) both}
@keyframes caret{0%,100%{opacity:1}50%{opacity:0}}
.caret{display:inline-block;width:7px;height:1.05em;background:var(--blue);border-radius:1px;margin-left:2px;vertical-align:-2px;animation:caret 1s steps(1) infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.spin{animation:spin .9s linear infinite}
@keyframes barGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.bar-grow{transform-origin:left;animation:barGrow .8s cubic-bezier(.22,.61,.36,1) both}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(30,80,200,.35)}70%{box-shadow:0 0 0 8px rgba(30,80,200,0)}100%{box-shadow:0 0 0 0 rgba(30,80,200,0)}}
.pulse-ring{animation:pulseRing 1.6s infinite}

.thread::-webkit-scrollbar{width:10px}
.thread::-webkit-scrollbar-thumb{background:#D8D0C0;border-radius:8px;border:3px solid transparent;background-clip:padding-box}
.thread::-webkit-scrollbar-track{background:transparent}

/* focus ring */
.ring:focus-visible{outline:2px solid var(--blue);outline-offset:2px}