/* ===== LeanGo 减重AI顾问 · 雪山高级感（炭墨×奶油×黛青×哑金） ===== */
:root {
  --bg: #F5F2EB;
  --card: #FFFFFF;
  --ink: #26251F;
  --ink-soft: #55544F;
  --ink-faint: #8A877D;
  --line: #E2DDD0;
  --slate: #1F3A31;        /* 深黛青：强调、气泡、进度 */
  --slate-deep: #152821;
  --slate-bg: #EDEAE0;
  --slate-border: #C9CDBF;
  --gold: #C9A86A;         /* 哑金：logo、思考点、光标，小面积 */
  --gold-bg: #F4EDDD;
  --amber: #8A6D3B;
  --amber-bg: #F4EDDD;
  --amber-border: #DCCEA8;
  --gray-bg: #EFECE1;
  --danger: #A03B2E;
  --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --radius: 16px;
}
.serif { font-family: var(--font-serif); }

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

html, body { height: 100%; }

body {
  background:
    radial-gradient(900px 480px at 50% -180px, rgba(31, 58, 49, .05), transparent 62%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

#app { max-width: 560px; margin: 0 auto; min-height: 100%; position: relative; }

.view { min-height: 100vh; display: flex; flex-direction: column; padding: 24px 20px 32px; }
.view[hidden] { display: none; }

/* ===== 通用控件 ===== */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 18px;
}
.card-lift {
  box-shadow: 0 10px 34px rgba(43, 43, 40, .07), 0 2px 8px rgba(43, 43, 40, .04);
}

label { display: block; font-size: 14px; color: var(--ink-soft); margin: 14px 0 6px; font-weight: 600; }

input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #FDFCF9;
  color: var(--ink);
  font-size: 16px;
  padding: 12px 14px;
  font-family: inherit;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--slate);
  box-shadow: 0 0 0 3px rgba(31, 58, 49, .12);
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }

.field-error { color: var(--danger); font-size: 13px; min-height: 20px; margin-top: 4px; }

.btn-primary {
  width: 100%;
  background: var(--ink);
  color: var(--bg);
  border: none;
  border-radius: 13px;
  font-size: 16px;
  font-weight: 600;
  padding: 14px 0;
  margin-top: 20px;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 2px;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
  box-shadow: 0 6px 18px rgba(38, 37, 31, .22);
}
.btn-primary:active { background: #1A1915; transform: scale(.97); box-shadow: 0 2px 8px rgba(38, 37, 31, .18); }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn-outline {
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  border-radius: 12px;
  font-size: 14px;
  padding: 12px 12px;
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
  transition: background .2s ease, transform .15s ease;
}
.btn-outline:active { background: var(--gray-bg); transform: scale(.96); }
.btn-outline:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.text-btn {
  background: none;
  border: none;
  color: var(--slate);
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  padding: 6px;
}
.text-btn-light { color: #fff; text-decoration: underline; }

.disclaimer {
  text-align: center;
  color: var(--ink-faint);
  font-size: 12px;
  padding: 16px 12px 0;
  line-height: 1.5;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 120px;
  transform: translateX(-50%);
  background: rgba(43, 43, 40, .92);
  color: #fff;
  font-size: 14px;
  border-radius: 10px;
  padding: 10px 18px;
  z-index: 300;
  max-width: 80%;
  text-align: center;
}
.toast[hidden] { display: none; }

/* ===== 登录页（门脸 · 雪山版） ===== */
.view-login { padding: 0 0 32px; }
.login-hero {
  position: relative;
  height: 47vh;
  min-height: 320px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  padding-top: calc(28px + env(safe-area-inset-top));
}
.hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hero-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,22,20,.32) 0%, rgba(20,22,20,.10) 42%, rgba(24,28,25,.55) 84%, var(--bg) 100%);
}
/* AI 粒子（晨光金） */
.p {
  position: absolute;
  border-radius: 50%;
  background: #EFE3C8;
  opacity: 0;
  animation: drift 6s ease-in-out infinite;
}
@keyframes drift {
  0% { transform: translateY(6px); opacity: 0; }
  25% { opacity: .9; }
  55% { opacity: .4; }
  100% { transform: translateY(-14px); opacity: 0; }
}
.p1 { width: 7px; height: 7px; top: 34%; left: 10%; animation-delay: 0s; }
.p2 { width: 4px; height: 4px; top: 26%; left: 42%; animation-delay: 1.2s; }
.p3 { width: 6px; height: 6px; top: 40%; right: 14%; animation-delay: 2.1s; }
.p4 { width: 4px; height: 4px; top: 48%; left: 28%; animation-delay: 3.2s; }
.p5 { width: 5px; height: 5px; top: 28%; right: 34%; animation-delay: 4s; }

.brand-line {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 5px;
  color: #F2EFE6;
}
.brand-name {
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--gold);
  font-size: 12.5px;
}
.brand-cn {
  font-weight: 600;
  letter-spacing: 3px;
  color: #F2EFE6;
  font-size: 12.5px;
}
.dot-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  display: inline-block;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 168, 106, .35); }
  50% { box-shadow: 0 0 0 7px rgba(201, 168, 106, 0); }
}

.hero-num-zone { position: relative; padding-bottom: 10px; }
.hero-num {
  font-size: clamp(58px, 20vw, 80px);
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1;
  color: #F5F2EB;
  text-shadow: 0 2px 16px rgba(15, 18, 16, .45);
  font-variant-numeric: tabular-nums;
}
.hero-num-label {
  margin-top: 8px;
  font-size: 12.5px;
  color: rgba(245, 242, 235, .82);
  letter-spacing: 1px;
}
.hn-from { color: rgba(245, 242, 235, .55); }
.hn-go {
  display: inline-block;
  margin-left: 6px;
  color: var(--gold);
  font-weight: 600;
  opacity: 0;
  animation: fade-in .8s ease forwards;
  animation-delay: 3.2s;
}
@keyframes fade-in { to { opacity: 1; } }

/* hero 下方内容 */
.hero-body { padding: 14px 20px 0; text-align: center; }

/* 旅程进度条 */
.journey {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px 12px;
  text-align: left;
  box-shadow: 0 6px 22px rgba(38, 37, 31, .05);
}
.j-head { font-size: 14.5px; font-weight: 700; }
/* 蜿蜒山路旅程（SVG） */
.j-track { margin-top: 14px; }
.j-svg { width: 100%; height: auto; display: block; overflow: visible; }
.j-num { font-size: 11px; fill: var(--ink-faint); font-weight: 600; }
.j-tag { font-size: 11px; fill: var(--slate); font-weight: 600; letter-spacing: .5px; }
.j-motiv {
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--slate);
  text-align: center;
  opacity: 0;
  animation: fade-in .8s ease forwards;
  animation-delay: 3.4s;
}

/* 打字机标语 */
.hero-caption {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-top: 20px;
  min-height: 28px;
}
.cap-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--slate-border);
  vertical-align: -7px;
  margin-right: 7px;
  box-shadow: 0 2px 6px rgba(31, 58, 49, .14);
}
.type-cursor {
  display: inline-block;
  width: 2px;
  height: 18px;
  background: var(--gold);
  margin-left: 3px;
  vertical-align: -2px;
  animation: blink .8s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.hero-sub { color: var(--ink-soft); font-size: 13.5px; margin-top: 10px; }

/* 丙奇 → 喂大 → 大饼AI 关系图 */
.duo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}
.duo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.duo-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--slate-border);
  box-shadow: 0 2px 6px rgba(31, 58, 49, .14);
}
.duo-ai { border-color: var(--gold); }
.duo-name {
  font-size: 11px;
  color: var(--ink-soft);
  font-weight: 600;
  letter-spacing: 1px;
}
.duo-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  color: var(--gold);
  padding-bottom: 15px; /* 抵消名字行高，让箭头对准头像中心 */
}
.duo-track { position: relative; width: 28px; height: 12px; }
.duo-track svg { width: 100%; display: block; }
/* 投喂光点：从丙奇飞向大饼，两颗错开循环 */
.feed-dot {
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 6px rgba(201, 168, 106, .8);
  opacity: 0;
  animation: feed-fly 1.6s ease-in infinite;
}
.feed-dot.d2 { animation-delay: .8s; }
@keyframes feed-fly {
  0% { left: -2px; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { left: calc(100% - 3px); opacity: 0; }
}
/* 大饼被喂到：轻轻胀一下+金光 */
.duo-ai { animation: fed 1.6s ease-in-out infinite; }
@keyframes fed {
  0%, 55% { transform: scale(1); box-shadow: 0 2px 6px rgba(31, 58, 49, .14); }
  75% { transform: scale(1.12); box-shadow: 0 0 0 5px rgba(201, 168, 106, .3), 0 2px 6px rgba(31, 58, 49, .14); }
  100% { transform: scale(1); box-shadow: 0 2px 6px rgba(31, 58, 49, .14); }
}
.duo-link span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
}

.trust-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.trust-chip {
  font-size: 12px;
  color: #4A4942;
  background: var(--gray-bg);
  border: 1px solid #D8D3C4;
  border-radius: 20px;
  padding: 4px 12px;
  letter-spacing: 1px;
}
.code-row { display: flex; gap: 10px; }
.code-row input { flex: 1; }
.login-note { text-align: center; color: var(--ink-faint); font-size: 13px; margin-top: 14px; }

/* 回头客：跳过首场动画，直接终态（SVG 终态由 app.js 落位） */
.no-anim *, .no-anim *::before, .no-anim *::after {
  animation: none !important;
}
.no-anim .j-motiv, .no-anim .hn-go { opacity: 1; }
.no-anim .type-cursor { display: none; }

/* ===== 档案引导 ===== */
.ob-head { margin: 8vh 4px 24px; }
.ob-head h2 { font-size: 21px; }
.ob-head p { color: var(--ink-soft); font-size: 14px; margin-top: 8px; }
.ob-form .ob-item:first-child label { margin-top: 0; }
.hw-row { display: flex; gap: 10px; }

/* ===== 聊天页 ===== */
.view-chat { padding: 0; height: 100vh; overflow: hidden; }

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  padding-top: calc(12px + env(safe-area-inset-top));
  background: rgba(38, 37, 31, .94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  position: sticky;
  top: 0;
  z-index: 20;
}
.chat-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .5px;
  color: #F2EFE6;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  display: inline-block;
  animation: pulse 2.4s ease-in-out infinite;
}
.header-ph { width: 40px; }
.icon-btn {
  background: none; border: none; font-size: 20px;
  color: #F2EFE6; cursor: pointer; padding: 6px 10px;
  font-family: inherit; line-height: 1;
  border-radius: 10px;
  transition: background .2s ease, transform .15s ease;
}
.icon-btn:active { background: rgba(255, 255, 255, .12); transform: scale(.92); }
.new-chat-btn {
  background: var(--gold);
  color: var(--ink);
  border: none;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(201, 168, 106, .25);
  transition: background .2s ease, transform .15s ease;
}
.new-chat-btn:active { background: #B9965A; transform: scale(.94); }

.history-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--amber-bg);
  color: var(--amber);
  border-bottom: 1px solid var(--amber-border);
  font-size: 13px;
  padding: 8px 14px;
}
.history-banner[hidden] { display: none; }

.messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.msg-row { display: flex; flex-direction: column; }
.msg-row.user { align-items: flex-end; }
.msg-row.assistant { flex-direction: row; align-items: flex-end; gap: 8px; }

/* 丙奇AI头像（每条AI回复左侧） */
.a-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1.5px solid var(--slate-border);
  box-shadow: 0 2px 6px rgba(31, 58, 49, .12);
  margin-bottom: 2px;
}
.a-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 86%;
  min-width: 0;
}
.a-body .msg-bubble { max-width: 100%; }

/* 新消息入场：淡入 + 上滑 */
.msg-in { animation: msg-in .28s cubic-bezier(.22,.68,.42,1) both; }
@keyframes msg-in {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.msg-tag {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 5px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
}
.msg-tag.t-checked::before, .msg-tag.t-generic::before {
  content: "";
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C7 7 4 11 4 15a8 8 0 0 0 16 0c0-4-3-8-8-13zm0 18a5 5 0 0 1-5-5c0-2.5 1.7-5.4 5-9 3.3 3.6 5 6.5 5 9a5 5 0 0 1-5 5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C7 7 4 11 4 15a8 8 0 0 0 16 0c0-4-3-8-8-13zm0 18a5 5 0 0 1-5-5c0-2.5 1.7-5.4 5-9 3.3 3.6 5 6.5 5 9a5 5 0 0 1-5 5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.msg-tag.t-checked { background: var(--slate-bg); color: var(--slate); border-color: var(--slate-border); }
.msg-tag.t-generic { background: var(--gray-bg); color: var(--ink-soft); border-color: var(--line); }
.msg-tag.t-guard { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-border); }
.msg-tag.t-transfer { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-border); }

.msg-bubble {
  max-width: 86%;
  border-radius: 16px;
  padding: 11px 14px;
  font-size: 15.5px;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.6;
}
.msg-row.user .msg-bubble {
  background: var(--slate);
  color: #fff;
  border-bottom-right-radius: 4px;
  box-shadow: 0 3px 10px rgba(31, 58, 49, .18);
}
.msg-row.assistant .msg-bubble {
  background: var(--card);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
  box-shadow: 0 2px 8px rgba(43, 43, 40, .04);
}

.typing-dots { display: inline-flex; gap: 4px; padding: 5px 0; }
.typing-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
  animation: wave 1.15s ease-in-out infinite;
}
.typing-dots i:nth-child(2) { animation-delay: .15s; }
.typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes wave {
  0%, 60%, 100% { transform: translateY(0); opacity: .3; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ===== 思考中：烙饼进度条 + 大饼语录 ===== */
.thinking-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 150px;
  padding: 2px 0;
}
.thinking-bar {
  height: 4px;
  background: #EDE9DC;
  border-radius: 999px;
  overflow: hidden;
}
.thinking-bar i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(201, 168, 106, .3), var(--gold));
  border-radius: 999px;
  transition: width 4.2s ease-in-out;
}
.thinking-label {
  font-size: 12.5px;
  color: var(--ink-faint);
  letter-spacing: .5px;
  animation: label-in .3s ease-out both;
}
@keyframes label-in {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

.msg-error { color: var(--danger); font-size: 13px; margin-top: 4px; }
.retry-link {
  background: none; border: none; color: var(--slate);
  font-size: 13px; cursor: pointer; text-decoration: underline;
  font-family: inherit; padding: 2px;
}

/* 转人工卡片 */
.transfer-card {
  align-self: flex-start;
  max-width: 86%;
  background: var(--slate-bg);
  border: 1.5px dashed var(--slate);
  border-radius: 16px;
  padding: 16px 16px 14px;
  margin-top: 4px;
}
.transfer-card .tc-title { font-size: 15px; font-weight: 700; color: var(--slate-deep); margin-bottom: 6px; }
.transfer-card .tc-text { font-size: 14px; color: var(--ink); line-height: 1.55; }
.transfer-card .tc-code {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 10px;
  color: var(--slate-deep);
  text-align: center;
  margin: 12px 0 10px;
  font-family: "SF Mono", Consolas, monospace;
}
.transfer-card .tc-copy {
  width: 100%;
  background: var(--slate);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 0;
  cursor: pointer;
  font-family: inherit;
  transition: background .2s ease, transform .15s ease;
}
.transfer-card .tc-copy:active { background: var(--slate-deep); transform: scale(.96); }
.transfer-card .tc-hint { font-size: 12px; color: var(--ink-faint); text-align: center; margin-top: 8px; }

/* 输入区 */
.suggest-bar {
  display: flex;
  gap: 8px;
  padding: 8px 14px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.suggest-bar::-webkit-scrollbar { display: none; }
.suggest-bar[hidden] { display: none; }
.chip {
  flex-shrink: 0;
  background: var(--card);
  border: 1px solid var(--slate-border);
  color: var(--slate);
  border-radius: 20px;
  font-size: 13px;
  padding: 6px 14px;
  cursor: pointer;
  font-family: inherit;
  animation: chip-in .32s ease-out both;
  transition: background .2s ease, transform .15s ease;
}
.chip:nth-child(1) { animation-delay: .05s; }
.chip:nth-child(2) { animation-delay: .12s; }
.chip:nth-child(3) { animation-delay: .19s; }
.chip:nth-child(4) { animation-delay: .26s; }
@keyframes chip-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.chip:active { background: var(--slate-bg); transform: scale(.94); }

.input-bar {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 14px 6px;
}
.input-bar[hidden] { display: none; }
#input {
  flex: 1;
  resize: none;
  max-height: 110px;
  border-radius: 14px;
  line-height: 1.5;
}
.send-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  border: none;
  font-size: 19px;
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(38, 37, 31, .24);
  transition: background .2s ease, transform .15s ease, opacity .2s ease;
}
.send-btn:active { background: #1A1915; transform: scale(.9); }
.send-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.disclaimer-foot { padding: 2px 16px calc(10px + env(safe-area-inset-bottom)); }

/* ===== 历史抽屉 ===== */
.drawer-mask {
  position: fixed; inset: 0;
  background: rgba(43,43,40,.35);
  z-index: 100;
}
.drawer-mask[hidden] { display: none; }
.drawer {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: 78%; max-width: 320px;
  background: var(--bg);
  border-right: 1px solid var(--line);
  z-index: 110;
  display: flex;
  flex-direction: column;
  padding: calc(16px + env(safe-area-inset-top)) 16px 16px;
  animation: slide-in .2s ease-out;
}
.drawer[hidden] { display: none; }
@keyframes slide-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.drawer-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.drawer-title { font-size: 16px; font-weight: 700; }
.session-list { flex: 1; overflow-y: auto; padding-top: 8px; }
.drawer-empty { color: var(--ink-faint); font-size: 13px; text-align: center; margin-top: 30px; }
.session-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 10px;
  border-radius: 12px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.session-item:active { background: var(--card); border-color: var(--line); transform: scale(.98); }
.si-main { flex: 1; min-width: 0; }
.si-more {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  color: var(--ink-faint);
  cursor: pointer;
  font-family: inherit;
}
.si-more:active { background: var(--gray-bg); color: var(--ink); }
.session-item .si-title {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}
.session-item .si-time { font-size: 12px; color: var(--ink-faint); margin-top: 3px; }
.logout-btn {
  background: none;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--danger);
  font-size: 14px;
  padding: 10px 0;
  cursor: pointer;
  font-family: inherit;
  margin-top: 12px;
}

/* ===== 档案编辑 ===== */
.view-overlay {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 90;
  max-width: 560px; margin: 0 auto;
  padding: 0;
}
.profile-body { padding: 18px 20px 40px; overflow-y: auto; }

/* 桌面端微调 */
@media (min-width: 600px) {
  #app { box-shadow: 0 0 40px rgba(43,43,40,.08); }
  .view-overlay { left: 50%; transform: translateX(-50%); width: 100%; }
}

/* toast 入场 */
.toast {
  animation: toast-in .24s ease-out both;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* 无障碍：用户关闭动效时，全部动画归零 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ===== 拍照记卡路里 ===== */
.photo-btn {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--line);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(43, 43, 40, .06);
  transition: transform .15s ease, opacity .2s ease;
}
.photo-btn:active { transform: scale(.9); }
.photo-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.msg-bubble-img { padding: 6px; }
.msg-bubble-img img {
  display: block;
  max-width: 220px;
  max-height: 220px;
  border-radius: 12px;
  object-fit: cover;
}

.kcal-card {
  max-width: 86%;
  background: var(--card);
  border: 1px solid var(--slate-border);
  border-left: 4px solid var(--slate);
  border-radius: 16px;
  border-top-left-radius: 4px;
  padding: 13px 15px;
  box-shadow: 0 2px 8px rgba(43, 43, 40, .05);
}
.kc-head {
  font-weight: 700;
  font-size: 15px;
  color: var(--slate);
  margin-bottom: 8px;
}
.kc-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14.5px;
  color: var(--ink-soft);
  padding: 2.5px 0;
}
.kc-kcal { color: var(--ink); font-weight: 600; flex-shrink: 0; }
.kc-total {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  font-size: 13.5px;
  color: var(--ink-soft);
}
.kc-total b {
  font-size: 20px;
  color: var(--slate);
  font-family: var(--font-serif);
}
.kc-conf {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--amber);
  background: var(--amber-bg);
  border: 1px solid var(--amber-border);
  border-radius: 20px;
  padding: 1px 8px;
  flex-shrink: 0;
}
.kc-advice {
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* ===== 对话操作底部菜单 ===== */
.sheet-mask {
  position: fixed;
  inset: 0;
  background: rgba(43, 43, 40, .35);
  z-index: 200;
  animation: msg-in .2s ease-out both;
}
.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 560px;
  margin: 0 auto;
  background: var(--card);
  border-radius: 20px 20px 0 0;
  padding: 16px 18px calc(16px + env(safe-area-inset-bottom));
  z-index: 201;
  display: flex;
  flex-direction: column;
  animation: sheet-up .24s cubic-bezier(.22, .68, .42, 1) both;
}
@keyframes sheet-up {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.sheet-title {
  font-size: 13px;
  color: var(--ink-faint);
  text-align: center;
  padding: 2px 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sheet-btn {
  border: none;
  background: transparent;
  padding: 13px;
  font-size: 16px;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
}
.sheet-btn:active { background: var(--gray-bg); }
.sheet-btn.danger { color: var(--danger); font-weight: 600; }
.sheet-btn.sheet-cancel {
  border-top: 1px solid var(--line);
  border-radius: 0 0 12px 12px;
  color: var(--ink-soft);
}

/* ===== 丙奇元素：标题头像 + 开场名片 ===== */
.title-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(255, 255, 255, .5);
  vertical-align: -7px;
  margin-right: 8px;
}

.welcome-card {
  max-width: 88%;
  align-self: flex-start;
  background: var(--card);
  border: 1px solid var(--slate-border);
  border-radius: 18px;
  padding: 22px 20px 18px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(31, 58, 49, .08);
}
.wc-avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--slate-border);
  box-shadow: 0 4px 14px rgba(31, 58, 49, .16);
}
.wc-name {
  margin-top: 12px;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .5px;
}
.wc-sub {
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--slate);
  background: var(--slate-bg);
  border: 1px solid var(--slate-border);
  border-radius: 20px;
  display: inline-block;
  padding: 4px 14px;
}
.wc-body {
  margin-top: 14px;
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.7;
  white-space: pre-wrap;
  text-align: left;
}

/* ===== 滚动记忆卡 + 拍照免责 ===== */
.drawer-actions { display: flex; align-items: center; gap: 2px; }
.mem-body {
  margin: 4px 0 8px;
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.7;
  white-space: pre-wrap;
  max-height: 45vh;
  overflow-y: auto;
  background: var(--gray-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
}
/* 记忆抽屉：关键事实标签（可单条删） */
.mem-subtitle {
  margin: 10px 0 6px;
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
}
.mem-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 10px;
}
.mem-fact {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 6px 4px 12px;
  font-size: 13px;
  color: var(--ink-soft);
}
.mem-fact-del {
  border: none;
  background: transparent;
  color: var(--ink-faint);
  font-size: 15px;
  line-height: 1;
  padding: 0 6px;
  cursor: pointer;
}
.mem-fact-del:active { color: var(--danger); }
.kc-disc {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--ink-faint);
}

/* ===== 习惯条（常驻：连续坚持 + 三习惯状态灯） ===== */
.habit-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 12px 8px;
  padding: 8px 8px 8px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 1px 6px rgba(0,0,0,.03);
}
.hb-text {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}
.hb-streak {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hb-today {
  font-size: 11px;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 四个独立小环（方向一：语义图标环，Streaks 式）
   done=黛青实底+白图标；part=白底+黛青进度弧+灰图标；todo=虚线灰环+灰图标 */
.hb-rings { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.hring {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-faint);
  background: var(--card);
  transition: background .2s ease, color .2s ease;
}
.hring svg { display: block; }
.hring .hr-track, .hring .hr-prog {
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
}
.hring .hr-track { stroke: var(--line); stroke-dasharray: 3 4; }
.hring .hr-prog { stroke: transparent; }
.hring .hr-icon path, .hring .hr-icon circle { stroke: currentColor; fill: none; }
.hring.done { background: var(--slate); color: #fff; }
.hring.done .hr-track { stroke: var(--slate); stroke-dasharray: none; }
.hring.done .hr-prog { stroke: transparent; }
.hring.part { color: var(--ink-soft); }
.hring.part .hr-prog { stroke: var(--slate); }
.hb-toggle {
  width: 30px;
  height: 30px;
  border: none;
  background: var(--gray-bg);
  border-radius: 50%;
  color: var(--ink-faint);
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.hb-toggle.open { transform: rotate(180deg); background: var(--slate); color: #fff; }

/* ===== 习惯详情面板（点展开） ===== */
.habit-panel {
  margin: 0 12px 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 0;
  box-shadow: 0 4px 18px rgba(38,37,31,.06);
  animation: hp-in .2s ease-out;
}
@keyframes hp-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.hp-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 16px 8px;
}
.hp-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.hp-meta {
  font-size: 12px;
  color: var(--ink-faint);
  font-weight: 400;
}
.hp-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  width: 100%;
  padding: 11px 16px 12px;
  border: none;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.hp-row:active { background: var(--gray-bg); }
.hp-row-static { cursor: default; }
.hp-row.done { background: linear-gradient(0deg, rgba(31,58,49,.04), rgba(31,58,49,.04)); }
.hp-name {
  font-size: 14px;
  color: var(--ink);
  flex: 1;
  text-align: left;
}
.hp-name-static { color: var(--ink-faint); }
.hp-badge {
  font-size: 11px;
  border-radius: 10px;
  padding: 1px 8px;
  white-space: nowrap;
}
.hp-badge.done { color: var(--slate); background: var(--card); border: 1px solid var(--slate-border); }
.hp-badge.todo { color: var(--ink-faint); background: var(--gray-bg); border: 1px dashed var(--line); }
.hp-badge.part { color: var(--amber); background: var(--gold-bg); border: 1px solid var(--amber-border); }
.hp-val {
  font-size: 12.5px;
  color: var(--ink-faint);
  margin-left: auto;
}
.hp-row.done .hp-val { color: var(--slate); }
.hp-meter {
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background: var(--gray-bg);
  overflow: hidden;
}
.hp-meter-fill {
  display: block;
  height: 4px;
  border-radius: 4px;
  background: var(--slate);
  width: 0%;
  transition: width .3s ease;
}
.hp-foot {
  padding: 8px 16px 10px;
  border-top: 1px solid var(--line);
  margin-top: 2px;
}
.hp-weekly-btn {
  width: 100%;
  padding: 9px;
  border: 1px solid var(--slate-border);
  background: var(--slate-bg);
  color: var(--slate);
  border-radius: 10px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.hp-weekly-btn:active { background: var(--slate); color: #fff; }

/* 欢迎名片里的动态问候（跟在介绍后面） */
.wc-greet {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  color: var(--ink);
  font-weight: 600;
}

/* ===== 手机小屏登录页压缩（v0.3-beta 真机反馈 10-21）=====
   病1：首屏太长（hero 占 47vh）把登录表单挤出屏幕 → 手机端压到 30vh
   病2：SVG overflow:visible 让"丙奇在这"标签画出卡片盖住标题 → 手机端隐藏标签+裁剪溢出 */
@media (max-width: 480px) {
  .login-hero { height: 30vh; min-height: 190px; }
  .hero-num { font-size: clamp(44px, 15vw, 60px); }
  .j-svg { overflow: hidden; }
  .j-hiker rect, .j-hiker text.j-tag { display: none; }
  .hero-body { padding-top: 10px; }
  .journey { padding: 10px 12px 8px; }
}