S4: 微信风格消息气泡布局

目标

修改 chat.html 的消息渲染，实现微信风格布局：

• 他人消息：左对齐（头像 + 昵称 + 气泡 + 时间）
• 自己消息：右对齐（气泡 + 时间）
• 气泡色：他人白 #FFF，自己绿 #95EC69（已有）
• 头像：CSS 字母占位符（首字母+背景色），无头像时默认占位

涉及文件

• templates/chat.html：CSS + renderMsg() 函数

当前布局

<div class="msg-bubble sent/received">
  <div class="bubble">
    内容
    <div class="time-sub">时间</div>
  </div>
</div>

新布局

Received:

<div class="msg-row received">
  <div class="msg-avatar">首字母</div>
  <div class="msg-content">
    <div class="msg-nickname">昵称</div>
    <div class="bubble">内容</div>
    <div class="time-sub">时间</div>
  </div>
</div>

Sent:

<div class="msg-row sent">
  <div class="msg-content">
    <div class="bubble">内容</div>
    <div class="time-sub">时间</div>
  </div>
</div>

CSS 新增

• .msg-row: flex 容器
• .msg-row.received: justify-content:flex-start
• .msg-row.sent: justify-content:flex-end
• .msg-avatar: 36px 圆形，背景色根据用户名 hash
• .msg-nickname: 小字灰色
• .msg-content: 限制 max-width

验证

• curl 聊天页 → 检查 .msg-avatar, .msg-nickname, .msg-row 存在
• smoketest 8/8