* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system,sans-serif; background:#f5f5f0; height:100vh; display:flex; flex-direction:column; }
.chat-header { background:#386641; color:#fff; padding:16px 20px; font-size:18px; font-weight:700; display:flex; align-items:center; justify-content:space-between; }
.chat-header .back { font-size:14px; cursor:pointer; text-decoration:none; color:#fff; }
.chat-messages { flex:1; overflow-y:auto; padding:20px 24px; }
.msg { margin-bottom:16px; display:flex; gap:10px; align-items:flex-start; }
.msg-self { flex-direction:row-reverse; justify-content:flex-start; }
.msg-other { justify-content:flex-start; }
.msg-avatar { width:36px; height:36px; border-radius:50%; background:#ddebd3; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:#386641; flex-shrink:0; }
.msg-self .msg-avatar { background:#386641; color:#fff; }
.msg-body { max-width:65%; min-width:80px; }
.msg-self .msg-body { text-align:right; }
.msg-bubble { display:inline-block; padding:12px 16px; border-radius:16px; font-size:15px; line-height:1.6; word-break:break-word; white-space:pre-wrap; text-align:left; }
.msg-self .msg-bubble { background:#386641; color:#fff; border-bottom-right-radius:4px; }
.msg-other .msg-bubble { background:#fff; color:#333; border:1px solid #eee; border-bottom-left-radius:4px; }
.msg-info { font-size:11px; color:#999; margin-top:4px; display:flex; gap:8px; align-items:center; }
.msg-self .msg-info { justify-content:flex-end; color:#aaa; }
.msg-name { font-weight:600; }
.msg-time { color:#bbb; }
.chat-input { display:flex; gap:10px; padding:12px 16px; background:#fff; border-top:1px solid #eee; }
.chat-input input { flex:1; height:44px; border:1px solid #ddd; border-radius:22px; padding:0 16px; font-size:15px; outline:none; }
.chat-input input:focus { border-color:#386641; }
.chat-input button { height:44px; padding:0 24px; background:#386641; color:#fff; border:none; border-radius:22px; font-size:15px; cursor:pointer; }
.chat-input button:disabled { background:#ccc; }
.empty { text-align:center; color:#999; padding:40px; }
.login-required { text-align:center; padding:40px; }
.login-required a { color:#386641; }