:root {
  --bg: #FFF9F2;
  --card: #FFFFFF;
  --ink: #2C2C2A;
  --ink-soft: #6B6A64;
  --line: #EDE6DB;
  --me: #FFE7BE;
  --accent: #E08A2E;
  --accent-ink: #7A4610;
  --radius: 18px;
}

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

html, body {
  margin: 0; height: 100%;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.6 -apple-system, "PingFang SC", "Helvetica Neue", sans-serif;
  overscroll-behavior-y: none;
}

body {
  display: flex; flex-direction: column;
  height: 100dvh;
}

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px 8px;
  padding-top: calc(12px + env(safe-area-inset-top));
  background: var(--bg);
}
.title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.title strong { font-size: 19px; font-weight: 600; }
.title .sub { font-size: 12px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #C9C6BC; flex: none; }
.dot.on { background: #3DBE7B; }
.dot.busy { background: var(--accent); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .35; } }

.ghost {
  border: 1px solid var(--line); background: var(--card); color: var(--ink-soft);
  border-radius: 999px; padding: 6px 14px; font-size: 13px; font-family: inherit;
}

.personas {
  display: flex; gap: 8px; padding: 4px 16px 10px; overflow-x: auto;
  scrollbar-width: none;
}
.personas::-webkit-scrollbar { display: none; }
.chip {
  flex: none; border: 1px solid var(--line); background: var(--card);
  border-radius: 999px; padding: 7px 14px 7px 10px; font-size: 14px;
  font-family: inherit; color: var(--ink-soft); display: flex; align-items: center; gap: 6px;
}
.chip.active { border-color: var(--accent); color: var(--accent-ink); background: #FFF1DC; }
.chip .av { font-size: 15px; }

.log {
  flex: 1; overflow-y: auto; padding: 8px 16px 16px;
  display: flex; flex-direction: column; gap: 12px;
  -webkit-overflow-scrolling: touch;
}

.msg { display: flex; gap: 8px; max-width: 100%; }
.msg .av { flex: none; font-size: 20px; padding-top: 2px; }
.bubble {
  padding: 10px 14px; border-radius: var(--radius); font-size: 17px;
  white-space: pre-wrap; word-break: break-word; max-width: 84%;
  border: 1px solid var(--line); background: var(--card);
}
.msg.me { flex-direction: row-reverse; }
.msg.me .bubble { background: var(--me); border-color: #F4D9A8; }
.msg.me .av { display: none; }
.typing { color: var(--ink-soft); }

.composer {
  display: flex; gap: 8px; align-items: flex-end;
  padding: 10px 12px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: var(--bg); border-top: 1px solid var(--line);
}
.composer textarea {
  flex: 1; resize: none; max-height: 120px;
  border: 1px solid var(--line); border-radius: 20px;
  padding: 10px 14px; font: inherit; font-size: 16px;
  background: var(--card); color: var(--ink); outline: none;
}
.composer textarea:focus { border-color: #F0C88A; }
.mic, .send {
  border: none; border-radius: 999px; font-family: inherit;
  height: 42px; flex: none;
}
.mic { width: 42px; background: var(--card); border: 1px solid var(--line); font-size: 18px; }
.mic:disabled { opacity: .35; }
.send { padding: 0 18px; background: var(--accent); color: #fff; font-size: 16px; }
.send:disabled { opacity: .5; }