# 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