聊天第四版：真·文档流内温柔展开 + 浅色卡重设计

目标

hero 输入胶囊点击展开聊天，v3 是「fixed 锚定 + clip-path 0.32s 长出 + 锁滚动」。站主验收不过：动画生硬，且卡是覆盖在页面上的——他要的是聊天卡成为页面的一部分，下方内容被真实推开。

关键 prompt（原文摘录）

这里点击展开对话，动画太生硬了，要温柔一点，直接在这个页面上展开，下面的页面自动往下挪动适配。你来改一下

二轮验收（对着截图）：

这里折叠了，询问选项，不方便看，你可以稍微调小字体，然后曾长一点框，但是要丝滑，让下一页自热往后挪，删掉这两行：AI 生成内容可能不准确……另外聊天框颜色要和主页的颜色配合，黑色太丑了，重新设计

结果

• 流内展开：hero 胶囊（data-chat-inline）点击后，在胶囊后面插一个文档流宿主，createPortal 渲染聊天卡，容器用 grid-template-rows: 0fr→1fr + 透明度过渡（0.65s，iOS sheet 同款软曲线）温柔撑开——提示行与下方内容被真实推开，不锁滚动、无遮罩。关闭反向收拢再卸载。
• 固定入口降级：导航胶囊/速览轮播卡的 DOM 位置没法流内插入（会破坏 fixed 导航和横向轨道布局），保持原位下拉的 fixed 卡，但换用同一套温柔动画；点外/Esc/✕ 均可关。
• 卡高按「视口剩余空间」自适应（380–500px），装不下时温柔滚一点页面适配。
• 浅色 card 变体（二轮）：ChatPanel 拆 variant="island" | "card"——island 仍是黑段里的固定深色；card 配合固定浅色的 hero 重设计：#f5f5f7 苹果灰无边框圆角卡 + 柔和投影、白气泡墨字、用户消息强调蓝、白输入框 + 蓝发送键，chips 13px 白底小胶囊，深浅两套都不跟随系统模式（与所在版面绑定）。card 变体按站主要求去掉「免责声明」「访客记录告知」两行，只留自愿留资 + 导出对话；终章 island 保留这两行（采集时告知是合规审查落的点，日志 014）——若日后启用访客记录 env，card 变体需把采集告知加回（代码里留了注释）。
• 投影会被揭示容器的 overflow clip 切平：裁剪改「纵向 clip、横向放行」，内衬上下留 12/48px 投影余量，卡高由内容盒兜住不跑偏。
• 四处入口行为、中英、移动端、演示模式问答、开关清理（宿主移除/裁剪恢复/滚动锁释放）全部在预览中逐项验证；lint/typecheck/build 全绿。

踩坑与纠正

• 剧场舞台会裁掉流内卡：hero 在剧场模式是 overflow-hidden 的 sticky 舞台屏，滚得较深时胶囊下方剩余空间不足，卡底部正好被白/黑分界切断。修法：展开期间给会裁卡的祖先挂 .chat-unclip（overflow-x: clip 保留横向防 glow 溢出、overflow-y: visible 纵向放行，z-index 抬到后续场景之上、导航之下），关闭时恢复。「滚页面来适配」对这种裁剪无效——裁剪发生在内容坐标系里，滚动时两者一起动，只能解除裁剪。
• 矮卡空状态首行被裁：自适应矮卡里，开场白+问题 chips 超出滚动区高度，justify-center 把顶部裁出可视区外且默认贴底——首行文字被切一半。修法：h-full→min-h-full（超高时自然撑高从顶部滚），空状态不再自动贴底。
• 预览工具三连坑（全是已知模式的新变体）：html { scroll-behavior: smooth } 会让 window.scrollTo(0,y) 走动画、在 rAF 挂起的无头页里永远滚不动（改 behavior:'instant'）；截图会强制驱动挂起的 rAF、把 scrub 引擎在当前 scrollY 重算（在 scroll 0 截图=引擎回卷到 p=0、全部隐藏）；非 0 滚动位截图全白。最终取景法：负 margin-top 把场景推进视口 + scroll 0 + __knTick。
• React 合成事件的提交在无头页里晚于 dispatchEvent 返回——同步断言「点击后 DOM 里应有卡」会误报失败，必须下一拍再查。

用时与备注

约 1.5 小时（含预览验证与两处真 bug 修复、二轮配色重设计）。动画曲线本身在无头预览里不可见（CSS 过渡挂起），几何终态用「禁过渡的调试样式」验证；真实手感待站主真机确认。这是聊天入口交互的第四版：锚点跳转 → 居中弹窗 → 覆盖式长出 → 流内展开（浅色卡）。