最稳方案是用display: flex配合margin-left/right: auto控制左右气泡贴边，时间戳外置对齐，伪元素单边border绘尾巴，scrollIntoView需DOM插入后调用且指定block: 'end'、容器设max-height。
直接用 display: flex + margin-left: auto/margin-right: auto 控制左右气泡贴边，是目前最稳的方案——不用 float，也不用 position: absolute，否则时间戳错位、新消息不自动滚动、响应式时气泡重叠的问题会反复出现。
怎么让左右消息自动贴边又不破坏时间戳对齐
关键不是“浮动”或“绝对定位”，而是靠 flex 容器内部子项的 margin 自动推挤。每条消息用一个 .message 包裹，内部气泡再设样式：
-
.message.own .bubble加margin-left: auto实现右对齐，同时加border-top-left-radius: 0 -
.message.theirs .bubble保持默认左对齐，或显式加margin-right: auto，同时加border-top-right-radius: 0 - 所有气泡统一设
max-width: 80%，防长文本撑爆屏幕；禁用width: 100% - 时间戳必须单独作为子元素放在
.message外层（不是嵌在气泡里），用text-align: right或margin-left: auto对齐自身方向
为什么 scrollIntoView 在聊天里经常不动或滚错位置
不是 API 有问题，是调用时机和容器配置没配对。常见现象：新消息来了页面卡在顶部、只滚一次后续就失效、Safari 下完全没反应。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 必须等新
<div class="message"> 真实插入 DOM 后再调用；Vue 里用 <code>this.$nextTick()，原生可套requestAnimationFrame - 滚动容器（如
.messages）必须有明确高度 +overflow-y: auto，不能靠父级撑开；缺max-height会导致scrollHeight计算失准 - 别对整个列表调用，要对最新一条消息元素调：
newMsgElement.scrollIntoView({ behavior: 'smooth', block: 'end' }) - 缺
block: 'end'会默认居中，反而把新消息顶到视口中间甚至上方 - 左气泡尾巴用
::before，border-color: transparent #ff6a00 transparent transparent，配合left: -12px - 右气泡尾巴用
::after，border-color: transparent transparent transparent #007aff，配合right: -12px - 两个伪元素必须错开
z-index：背景色箭头（border）在下，透明边框（用于遮挡）在上，否则边缘发虚 - 尾巴宽度/高度由
border-width控制，建议固定为6px，避免随字体缩放抖动
气泡“小尾巴”怎么写才兼容又抗缩放
用伪元素 + 单边 border 是最可靠方案，不是 SVG、不是图片，也不是 clip-path——后两者在低版本 iOS 或缩放时容易糊边或错位。
立即学习“前端免费学习笔记（深入）”；
真正难的不是画出气泡，而是让它们在各种输入长度、不同设备缩放、消息动态增删时保持一致表现——比如伪元素的 left/right 偏移值、max-width 的断点选择、以及 scrollIntoView 的触发时机，这些细节稍不注意就会在 iOS Safari 或 Windows Edge 上露出马脚。
