用户消息用.user类加margin-left: auto右对齐，AI消息用.ai类保持左对齐或加margin-right: auto；均设max-width: 80%、box-sizing: border-box，圆角差异化处理，伪元素::before/::after配合透明边框绘制稳定小尾巴。
怎么用 CSS 类区分用户和 AI 气泡并控制左右对齐
靠 margin-left: auto 和 margin-right: auto 控制位置，不是靠 text-align 或 float——后者只动文字或脱离文档流，会导致时间戳错位、新消息不滚动、响应式重叠。
用户消息加 class="user"，气泡容器设 margin-left: auto；AI 消息用 class="ai"，保持左对齐或显式加 margin-right: auto。所有气泡必须设 max-width: 80%（移动端建议 max-width: 280px），禁用 width: 100% 或 width: fit-content。
-
display: block或inline-block才能生效margin-left: auto；若外层是flex容器，直接给子项加margin-left: auto即可，别套多一层div - 圆角要差异化：
.user去掉左上角（border-top-left-radius: 0），.ai去掉右上角（border-top-right-radius: 0），否则尾巴接不上 - 避免用
text-align: right模拟右对齐——它不移动整个气泡框，尾巴会悬空偏移
怎么用伪元素画出稳定不偏移的小尾巴
用 ::before 或 ::after + 透明边框 + position: absolute 是唯一兼容性好、缩放无锯齿的方案。三角必须锚定在气泡容器的 position: relative 上，不能脱离文档流。
AI 气泡（左）尾巴用 .ai::before，border-color: transparent #333 transparent transparent + left: -12px + top: 6px；用户气泡（右）用 .user::after，border-color: transparent transparent transparent #007aff + right: -12px + top: 6px。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须用两层伪元素：底层边框色三角（
z-index: 9），上层同尺寸背景色三角（z-index: 10）盖住边缘，否则 Safari/Chrome 下发虚 - 不要用
clip-path：旧版 Safari 不稳定，且遇到transform: scale()或父级overflow: hidden会被裁切 - 深色模式适配？直接在
@media (prefers-color-scheme: dark)里重设border-color即可
长文本换行和移动端点击区域怎么不崩
英文/混合内容用 word-break: break-word（等价于 overflow-wrap: break-word），保留单词完整性；纯中文可加 word-break: break-all，但慎用——可能把“中华人民共和国”切成三段。
所有气泡必须带 box-sizing: border-box，否则 padding + border 会额外加宽。点击区域窄？别盲目加大 padding，那会顶高尾巴位置；改用 min-height: 44px（iOS 最小触控区）+ padding 组合，再包裹一层 div 扩展点击热区，不干扰气泡样式。
- 禁用
white-space: nowrap，它会让整条消息挤成一行直接溢出屏幕 - 含代码片段时，加
font-family: monospace和line-height: 1.4，防止三角被撑高 - 移动端务必加
word-wrap: break-word，否则中文长句在某些安卓 WebView 下不换行
Vue/React 渲染时滚动到底部为什么总失败
根本原因是 DOM 还没更新完就调了 scrollIntoView。Vue 里必须用 this.$nextTick() 包裹；React 函数组件用 useEffect + ref，依赖数组里写 [messages.length]，确保只在新消息插入后触发。
:key 必须用唯一 message.id，禁用 :key="index"——列表增删时会复用旧节点，导致动画错乱、时间戳错位。
- 排序必须提前做：用计算属性返回按
timestamp升序排列的数组，别靠渲染时v-for顺序硬排 - 时间戳格式化别在模板里写
{{ formatTime(msg.ts) }}，统一转成HH:mm字符串存进数据，避免重复计算 - 图片/视频消息要监听
load和error事件，加载失败时 fallback 到占位图，否则空白气泡会卡住布局高度
position: relative + margin + 伪元素三层锚定，少一个环节就错位。 
