:root{ --bg:#f5f3ee; --ink:#2b2b2b; --brand:#1f6f54; --brand2:#2a8d6c; --u:#1f6f54; --a:#ffffff; --line:#e3ddd0; }
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif; color:var(--ink); background:var(--bg); }
.app{ max-width:860px; margin:0 auto; height:100vh; display:flex; flex-direction:column; }
.hdr{ padding:18px 22px; background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#fff; }
.brand{ font-size:22px; font-weight:700; letter-spacing:1px; }
.tag{ font-size:13px; opacity:.9; margin-top:3px; }
.messages{ flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:14px; }
.row{ display:flex; }
.row.u{ justify-content:flex-end; }
.bubble{ max-width:78%; padding:11px 15px; border-radius:14px; line-height:1.6; font-size:15px; box-shadow:0 1px 2px rgba(0,0,0,.06); word-break:break-word; }
.row.u .bubble{ background:var(--u); color:#fff; border-bottom-right-radius:4px; }
.row.a .bubble{ background:var(--a); color:var(--ink); border:1px solid var(--line); border-bottom-left-radius:4px; }
.bubble :first-child{ margin-top:0; } .bubble :last-child{ margin-bottom:0; }
.bubble table{ border-collapse:collapse; margin:8px 0; font-size:13px; }
.bubble th,.bubble td{ border:1px solid var(--line); padding:5px 9px; }
.bubble code{ background:#f0ece1; padding:1px 5px; border-radius:4px; }
.hint{ text-align:center; color:#998; font-size:13px; margin:auto 0; max-width:80%; align-self:center; line-height:1.7; }
.composer{ display:flex; align-items:flex-end; gap:8px; padding:12px 16px; border-top:1px solid var(--line); background:#fff; }
.icon{ cursor:pointer; font-size:22px; padding:6px 8px; border-radius:10px; user-select:none; }
.icon:hover{ background:#f0ece1; }
#input{ flex:1; resize:none; border:1px solid var(--line); border-radius:12px; padding:10px 12px; font:inherit; max-height:120px; outline:none; }
#input:focus{ border-color:var(--brand2); }
.send{ background:var(--brand); color:#fff; border:0; border-radius:12px; padding:10px 18px; font-size:15px; cursor:pointer; }
.send:disabled{ opacity:.5; cursor:default; }
.typing::after{ content:"▋"; animation:blink 1s steps(2) infinite; }
@keyframes blink{ 50%{ opacity:0; } }