:root {
  --page: #f5f5f5;
  --card: #ffffff;
  --prompt: #f6f7f4;
  --ink: #303030;
  --muted: #999999;
  --line: #69bd36;
  --green: #68bd36;
  --danger: #c83a34;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--page); }

body {
  color: var(--ink);
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  overflow-x: hidden;
}

button, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, textarea:focus-visible { outline: 3px solid rgba(104, 189, 54, .35); outline-offset: 2px; }

.chat-app {
  width: 100%;
  height: 100dvh;
  min-height: 620px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  background: linear-gradient(180deg, #e5f2df 0, #f4f7f1 28%, var(--page) 48%);
}

.app-header {
  display: grid;
  grid-template-columns: 52px 1fr 64px;
  align-items: center;
  padding: max(18px, env(safe-area-inset-top)) 18px 16px;
}

.app-header h1 { margin: 0; font-size: 22px; text-align: center; letter-spacing: .02em; }
.back-button, .more-button { border: 0; background: transparent; color: var(--ink); }
.back-button { font-size: 0; text-align: left; }
.back-button::before { content: "‹"; font-size: 42px; line-height: 20px; }
.more-button { justify-self: end; background: var(--card); border-radius: 28px; font-size: 22px; letter-spacing: 2px; padding: 8px 13px 11px; }

.chat-history { min-height: 0; overflow-y: auto; padding: 14px 20px 28px; scrollbar-width: thin; }
.welcome-card { background: var(--card); border-radius: 20px; padding: 22px 18px 20px; }
.welcome-card__title { display: flex; align-items: center; gap: 13px; }
.assistant-avatar { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; }
.welcome-card h2 { margin: 0; font-size: 21px; line-height: 1.35; }
.welcome-card p { margin: 22px 0 18px; font-size: 17px; line-height: 1.56; }

.quick-prompts { display: grid; gap: 8px; }
.quick-prompts button { min-height: 48px; border: 0; border-radius: 9px; background: var(--prompt); color: #525252; padding: 0 14px; text-align: left; font-size: 16px; }
.quick-prompts button:hover { background: #edf0e9; }

.message { display: flex; margin: 18px 0; }
.message--user { justify-content: flex-end; }
.message--assistant { justify-content: flex-start; padding-left: 46px; position: relative; }
.message--assistant::before { content: ""; background: url("assets/assistant-avatar.png") center / cover; width: 38px; height: 38px; border-radius: 50%; position: absolute; left: 0; top: 0; }
.message__content { display: flex; flex-direction: column; max-width: min(86%, 560px); }
.message--user .message__content { align-items: flex-end; }
.message--assistant .message__content { align-items: flex-start; }
.message__bubble { max-width: 100%; border-radius: 18px; padding: 16px 18px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 18px; line-height: 1.55; }
.message--user .message__bubble { border-radius: 18px 18px 4px 18px; background: var(--green); color: #fff; }
.message--assistant .message__bubble { border-radius: 4px 18px 18px; background: var(--card); }
.message--pending .message__bubble { color: #707070; }
.message__time { display: block; margin: 7px 8px 0; color: var(--muted); font-size: 14px; line-height: 1; }
.message__bubble--markdown > :first-child { margin-top: 0; }
.message__bubble--markdown > :last-child { margin-bottom: 0; }
.message__bubble--markdown p { margin: 0 0 13px; }
.message__bubble--markdown h3 { margin: 0 0 12px; font-size: 19px; line-height: 1.45; }
.message__bubble--markdown ul, .message__bubble--markdown ol { margin: 0 0 13px; padding-left: 1.35em; }
.message__bubble--markdown li + li { margin-top: 6px; }
.message__bubble--markdown blockquote { margin: 0 0 13px; padding-left: 11px; border-left: 3px solid #b8dca5; color: #5d6d54; }
.message__bubble--markdown strong { font-weight: 700; }
.message__bubble--markdown code { padding: 1px 4px; border-radius: 4px; background: #edf2e9; color: #48683a; font-family: "SFMono-Regular", Consolas, monospace; font-size: .88em; }
.retry-button { align-self: flex-end; margin: 8px 0 0 8px; border: 1px solid var(--green); border-radius: 7px; background: #fff; color: #4f9e26; padding: 5px 9px; font-size: 14px; }

.status-message { margin: 0; padding: 8px 20px; background: #fff7e6; color: #80631c; font-size: 14px; }
.status--error { background: #fff0ef; color: var(--danger); }
.is-hidden { display: none !important; }

.composer { background: var(--card); border-top: 1px solid #eee; padding: 14px 20px max(18px, env(safe-area-inset-bottom)); }
.clear-button { margin-bottom: 13px; border: 1px solid #a7a7a7; border-radius: 7px; background: #fff; color: #888; padding: 7px 16px; font-size: 15px; }
.composer__form { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 5px 7px 5px 13px; border: 1px solid var(--line); border-radius: 9px; }
.composer textarea { flex: 1; min-width: 0; max-height: 100px; resize: none; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 17px; line-height: 1.4; }
.composer textarea::placeholder { color: #aaa; }
.composer__form button { flex: 0 0 auto; min-width: 72px; border: 0; border-radius: 8px; background: var(--green); color: #fff; padding: 10px 12px; font-weight: 600; font-size: 17px; }
button:disabled { cursor: not-allowed; opacity: .55; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (min-width: 768px) {
  .chat-app { max-width: 500px; margin: 0 auto; box-shadow: 0 0 32px rgba(0, 0, 0, .08); }
}