:root {
  --bg: #f7f6f3;
  --panel: #ffffff;
  --line: #e8e5df;
  --text: #1f1d1a;
  --muted: #8a857c;
  --brand: #2f6b4f;
  --brand-soft: #e8f1ec;
  --warn: #b4552d;
  --warn-soft: #fdf1ea;
  --ai: #ffffff;
  --me: #2f6b4f;
}

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

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

#app {
  max-width: 480px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

/* ---------- 灵售品牌标 ---------- */
.brand-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  padding-top: max(8px, env(safe-area-inset-top));
  background: linear-gradient(180deg, #ffffff, #fbfaf8);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.brand-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--brand), #4a8d6e);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -1px;
  box-shadow: 0 2px 6px rgba(47,107,79,0.25);
}
.brand-name {
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  letter-spacing: 0.5px;
}
.brand-suffix {
  font-weight: 400;
  font-size: 11px;
  color: var(--muted);
  margin-left: 4px;
}
.brand-tag {
  font-size: 10px;
  color: var(--muted);
  font-family: "SF Mono", Consolas, monospace;
  opacity: 0.7;
}

/* ---------- 顶栏 ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  padding-top: max(10px, env(safe-area-inset-top));
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 17px;
  flex: 0 0 auto;
}
.who { flex: 1; min-width: 0; }
.who .name { font-size: 16px; font-weight: 600; }
.who .tag {
  font-size: 11px; font-weight: 500;
  background: var(--brand-soft); color: var(--brand);
  padding: 1px 6px; border-radius: 4px; margin-left: 4px;
  vertical-align: 2px;
}
.who .status { font-size: 12px; color: var(--muted); }
button.ghost {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  border-radius: 14px;
  padding: 5px 12px;
  font-size: 13px;
  cursor: pointer;
}
button.ghost:active { background: #f0eee9; }

/* ---------- 语音按钮 + 状态 ---------- */
.voice-chip { cursor: pointer; user-select: none; padding: 2px 6px; border-radius: 8px; }
.voice-chip.muted { color: var(--muted); opacity: 0.5; }

.voice-btn {
  width: 44px; height: 44px; min-width: 44px;
  border-radius: 50%; border: none;
  background: var(--brand-soft); color: var(--brand);
  font-size: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.1s, background 0.2s;
}
.voice-btn:active { transform: scale(0.92); }
.voice-btn.recording {
  background: var(--warn-soft); color: var(--warn);
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(180,85,45,0.4); }
  50%      { box-shadow: 0 0 0 8px rgba(180,85,45,0); }
}

/* 数字人头像在说话时的微妙动画 */
.avatar.speaking {
  animation: nod 0.8s ease-in-out infinite;
  background: linear-gradient(135deg, var(--brand-soft), #d4e8df);
}
@keyframes nod {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-2px) scale(1.04); }
}

/* ---------- 数字人展示区 ---------- */
.avatar-stage {
  background: linear-gradient(180deg, #f1efe8 0%, var(--bg) 100%);
  padding: 16px 14px 8px;
  display: flex; flex-direction: column; align-items: center;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.avatar-big {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-soft), #d4e8df);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  box-shadow: 0 4px 16px rgba(47,107,79,0.15), 0 0 0 4px #fff inset;
  margin-bottom: 8px;
  transition: transform 0.3s;
}
.avatar-big.speaking {
  animation: avatar-talk 0.6s ease-in-out infinite;
}
@keyframes avatar-talk {
  0%, 100% { transform: scale(1) rotate(0); box-shadow: 0 4px 16px rgba(47,107,79,0.15), 0 0 0 4px #fff inset; }
  25%      { transform: scale(1.05) rotate(-1deg); box-shadow: 0 4px 24px rgba(47,107,79,0.3), 0 0 0 4px #fff inset, 0 0 0 8px rgba(47,107,79,0.1); }
  50%      { transform: scale(1.08) rotate(0);    box-shadow: 0 4px 32px rgba(47,107,79,0.4), 0 0 0 4px #fff inset, 0 0 0 12px rgba(47,107,79,0.05); }
  75%      { transform: scale(1.05) rotate(1deg);  box-shadow: 0 4px 24px rgba(47,107,79,0.3), 0 0 0 4px #fff inset, 0 0 0 8px rgba(47,107,79,0.1); }
}
.avatar-emoji { font-size: 52px; line-height: 1; user-select: none; }
.avatar-big img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.avatar-mouth {
  position: absolute; left: 50%; bottom: 28%;
  transform: translateX(-50%);
  width: 14px; height: 6px;
  background: #c54a3b; border-radius: 50%;
  opacity: 0; transition: opacity 0.05s;
}
.avatar-big.speaking .avatar-mouth {
  animation: mouth 0.4s ease-in-out infinite alternate;
}
@keyframes mouth {
  0%   { opacity: 0.3; transform: translateX(-50%) scaleY(0.4); }
  100% { opacity: 1.0; transform: translateX(-50%) scaleY(1.8); }
}
.avatar-meta { text-align: center; margin-bottom: 8px; }
.avatar-name { font-size: 18px; font-weight: 600; }
.avatar-status { font-size: 12px; color: var(--muted); margin-top: 2px; }
.avatar-subtitle {
  font-size: 13px; color: var(--brand);
  min-height: 18px; margin-top: 4px;
  text-align: center;
  font-weight: 500;
  font-style: italic;
}
.avatar-stage .stagebar { padding: 0; margin-top: 4px; justify-content: center; }

/* ---------- 状态条 ---------- */
.stagebar {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 7px 14px;
  background: #fbfaf8;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
}
.stagebar span { padding: 2px 8px; border-radius: 10px; }
.stage-chip { background: var(--brand-soft); color: var(--brand); }
.emotion-chip { background: #eef1f6; color: #4a5a70; }
.fence-chip { background: #f0f0ee; color: var(--muted); }
.fence-chip.blocked { background: var(--warn-soft); color: var(--warn); }

/* ---------- 消息区 ---------- */
.chat {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}
.tips {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  background: #f0eee9;
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 14px;
}

.msg { display: flex; margin-bottom: 14px; }
.msg.me { justify-content: flex-end; }
.bubble {
  max-width: 78%;
  padding: 9px 13px;
  border-radius: 14px;
  background: var(--ai);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 15px;
}
.msg.me .bubble {
  background: var(--me);
  color: #fff;
  border-color: var(--me);
}
.bubble .cursor {
  display: inline-block;
  width: 2px; height: 15px;
  background: var(--brand);
  vertical-align: -2px;
  animation: blink .8s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.meta {
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
}
.attachment {
  margin-top: 6px;
  padding: 7px 10px;
  background: #fbfaf8;
  border: 1px dashed var(--line);
  border-radius: 8px;
  font-size: 12px;
  color: var(--muted);
}
.handoff {
  margin-top: 6px;
  padding: 7px 10px;
  background: var(--warn-soft);
  color: var(--warn);
  border-radius: 8px;
  font-size: 12px;
}

/* ---------- 正在输入 ---------- */
.typing {
  display: flex; align-items: center; gap: 4px;
  padding: 0 18px 8px;
  font-size: 12px;
  color: var(--muted);
}
.typing span {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--muted);
  animation: bounce 1.2s infinite;
}
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
.typing em { margin-left: 6px; font-style: normal; }
@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ---------- 输入区 ---------- */
.composer {
  display: flex; gap: 8px;
  padding: 10px 14px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: var(--panel);
  border-top: 1px solid var(--line);
}
.composer input {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 9px 14px;
  font-size: 15px;
  outline: none;
  background: #fbfaf8;
}
.composer input:focus { border-color: var(--brand); background: #fff; }
.composer button {
  border: none;
  background: var(--brand);
  color: #fff;
  border-radius: 18px;
  padding: 0 18px;
  font-size: 15px;
  cursor: pointer;
}
.composer button:disabled { background: #c3c9c5; }

/* ---------- 快捷提问 ---------- */
.quick {
  display: flex; gap: 6px;
  overflow-x: auto;
  padding: 0 14px 10px;
  background: var(--panel);
  scrollbar-width: none;
}
.quick::-webkit-scrollbar { display: none; }
.quick button {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: #fbfaf8;
  color: #5c5850;
  border-radius: 14px;
  padding: 5px 12px;
  font-size: 13px;
  cursor: pointer;
}
.quick button:active { background: var(--brand-soft); }