* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:root { --red: #b41e2d; --red-d: #97121f; --bg: #f2f3f5; --ink: #1a1a1a; --sub: #8a8f99; }
html, body { height: 100%; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg); color: var(--ink); font-size: 16px;
}
#app { display: flex; flex-direction: column; height: 100vh; max-width: 640px; margin: 0 auto; background: var(--bg); }

/* 顶栏 */
.bar { background: linear-gradient(135deg, var(--red), var(--red-d)); color: #fff; padding: 12px 16px; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.brand { display: flex; align-items: center; gap: 10px; }
.logo { width: 34px; height: 34px; border-radius: 8px; background: rgba(255,255,255,.16); display: grid; place-items: center; font-weight: 700; font-size: 20px; }
.tit .t1 { font-size: 16px; font-weight: 600; }
.tit .t2 { font-size: 11px; opacity: .82; margin-top: 1px; }

/* 消息区 */
.msgs { flex: 1; overflow-y: auto; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; gap: 8px; align-items: flex-end; }
.row.me { flex-direction: row-reverse; }
.avatar { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 13px; color: #fff; }
.row.bot .avatar { background: var(--red); }
.row.me .avatar { background: #6b7785; }
.bubble { max-width: 76%; padding: 10px 13px; border-radius: 14px; line-height: 1.55; font-size: 15px; white-space: pre-wrap; word-break: break-word; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.row.bot .bubble { background: #fff; border-top-left-radius: 4px; }
.row.me .bubble { background: #cfe6ff; border-top-right-radius: 4px; }
.bubble.typing { color: var(--sub); }

/* 转人工提示 */
.handoff { margin: 0 14px 8px; padding: 8px 12px; background: #fff4e5; color: #a8621a; border: 1px solid #ffd8a8; border-radius: 10px; font-size: 13px; text-align: center; }
.hidden { display: none; }

/* 输入区 */
.input { display: flex; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #e6e8eb; }
#box { flex: 1; resize: none; border: none; outline: none; font: inherit; padding: 9px 12px; background: var(--bg); border-radius: 20px; max-height: 100px; }
#send { flex: none; border: none; background: var(--red); color: #fff; font-size: 15px; padding: 0 18px; border-radius: 20px; }
#send:active { background: var(--red-d); }
#send:disabled { opacity: .5; }