:root{
  --bg:#f7f7fb;
  --card:#ffffff;
  --accent:#2b6df6;
  --muted:#666;
}
*{box-sizing:border-box;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
body{margin:0;background:var(--bg);display:flex;align-items:center;justify-content:center;height:100vh}
.screen{width:100%;max-width:760px;background:var(--card);border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.08);padding:16px;display:flex;flex-direction:column;gap:12px}
.hidden{display:none}
header{display:flex;justify-content:space-between;align-items:center}
#chatMain{flex:1;overflow:auto;padding:8px;border:1px solid #eee;border-radius:8px;background:#fff;height:60vh}
#chatBox{display:flex;flex-direction:column;gap:8px}
.message{padding:8px;border-radius:8px;max-width:85%;word-wrap:break-word}
.message.me{background:#e6f0ff;align-self:flex-end}
.message.other{background:#f2f2f5;align-self:flex-start}
.meta{font-size:12px;color:var(--muted);margin-bottom:6px}
#chatFooter{display:flex;gap:8px;align-items:center}
#messageInput{flex:1;padding:10px;border-radius:8px;border:1px solid #ddd}
button{background:var(--accent);color:#fff;padding:8px 12px;border:0;border-radius:8px;cursor:pointer}
button:disabled{opacity:.5;cursor:default}
label{font-size:13px;color:var(--muted);display:block;margin-top:6px}
.note{color:#b00;font-size:13px}