:root {
  --fg: #1a1a1a;
  --muted: #8a8a8a;
  --bg: #ffffff;
  --line: #ececec;
  --bubble: #f4f4f4;
  --accent: #0ea514;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  display: flex;
  flex-direction: column;
  font: 16px/1.7 system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--fg);
  background: var(--bg);
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--bg);
}
.brand { font-weight: 650; letter-spacing: .01em; }
.ghost {
  background: none;
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 8px;
  padding: 4px 12px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
}
.ghost:hover { color: var(--fg); border-color: #ddd; }

#log {
  flex: 1;
  overflow-y: auto;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 24px;
}
.msg { margin: 0 0 20px; white-space: pre-wrap; word-break: break-word; }
.msg.user { text-align: right; }
.msg.user .bubble {
  display: inline-block;
  text-align: left;
  background: var(--bubble);
  padding: 9px 13px;
  border-radius: 14px;
  max-width: 85%;
}
.msg.assistant { color: var(--fg); }
.msg.assistant .pending { color: var(--muted); font-style: italic; }
.msg.assistant > *:first-child { margin-top: 0; }
.msg.assistant > *:last-child { margin-bottom: 0; }
.msg.assistant h1, .msg.assistant h2, .msg.assistant h3 { margin: 1em 0 .4em; line-height: 1.3; }
.msg.assistant p { margin: .5em 0; }
.msg.assistant ul, .msg.assistant ol { margin: .5em 0; padding-left: 1.4em; }
.msg.assistant code { background: #f4f4f4; padding: .1em .35em; border-radius: 5px; font-size: .92em; }
.msg.assistant pre { background: #f7f7f7; padding: 12px 14px; border-radius: 10px; overflow-x: auto; }
.msg.assistant pre code { background: none; padding: 0; }
.msg.assistant table { border-collapse: collapse; margin: .6em 0; font-size: .94em; }
.msg.assistant th, .msg.assistant td { border: 1px solid var(--line); padding: 5px 10px; text-align: left; }
.msg.assistant th { background: #fafafa; }
.msg.assistant blockquote { margin: .6em 0; padding-left: 12px; border-left: 3px solid var(--line); color: var(--muted); }
.msg.assistant a { color: var(--accent); }
.msg .attach-chip { display: inline-block; margin-top: 6px; font-size: 13px; color: var(--accent); text-decoration: none; }

#composer {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 12px 24px 22px;
}
#composer textarea {
  flex: 1;
  resize: none;
  font: inherit;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  max-height: 180px;
  outline: none;
  background: #fff;
}
#composer textarea:focus { border-color: var(--accent); }
.attach {
  cursor: pointer;
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
  padding: 8px 12px;
}
.attach:hover { color: var(--fg); }
#send {
  border: 0;
  background: var(--accent);
  color: #fff;
  border-radius: 14px;
  padding: 11px 18px;
  cursor: pointer;
  font: inherit;
}
#send:disabled { opacity: .5; cursor: default; }