:root,
:host {
  --font-sans: "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  --font-round: "Avenir Next", "Segoe UI Variable", "PingFang SC", sans-serif;
  --color-ink: #163b36;
  --color-ink-soft: #46625c;
  --color-muted: #65756f;
  --color-faint: #82918c;
  --color-line: #dce5e1;
  --color-line-soft: #eaf0ed;
  --color-bg: #f4f7f4;
  --color-surface: #ffffff;
  --color-sunken: #edf4f1;
  --color-brand: #d96b43;
  --color-brand-deep: #b95432;
  --color-brand-soft: #f8e7df;
  --color-accent: #2c6e63;
  --color-accent-soft: #edf4f1;
  --color-good: #2d7d58;
  --color-warn: #9a5a25;
  --color-bad: #b64a45;
  --radius-card: 12px;
  --shadow-soft: 0 18px 46px rgba(24, 65, 57, 0.08);
}

body {
  background:
    radial-gradient(900px 520px at 100% -10%, #dcece7 0%, transparent 56%),
    radial-gradient(620px 420px at -12% 40%, #f7e6df 0%, transparent 54%),
    var(--color-bg);
}

.card,
.surface {
  border-color: var(--color-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}

.btn {
  border-radius: 999px;
}

.btn-primary {
  background: var(--color-brand);
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-brand-deep);
}

.field {
  border-radius: 8px;
  background: #fff;
}

.field:focus {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(217, 107, 67, 0.16);
}

.chat-bubble-user,
[data-role="user"] {
  --color-ink: #163b36;
}

.recording-pulse {
  animation: feiling-pulse 1.4s infinite;
}

@keyframes feiling-pulse {
  0% { box-shadow: 0 0 0 0 rgba(217, 107, 67, 0.38); }
  70% { box-shadow: 0 0 0 14px rgba(217, 107, 67, 0); }
  100% { box-shadow: 0 0 0 0 rgba(217, 107, 67, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .recording-pulse { animation: none; }
}

/* The old "ask Lumi something" button caused repetitive, mechanical prompts. */
button[title="让 Lumi 说点什么"] {
  display: none !important;
}