⚠️ 现象 (Symptom)：刚刚通过给 body 增加 overflow-x: hidden 修复了页面左右滑动的问题，但没想到导致了更严重的问题——手机端页面连上下滑动都失效了，而且内容在右边被生硬截断！
🔍 原因分析 (Root Cause)： 这又是一个经典的移动端浏览器（特别是 iOS Safari）的天坑！
- 滑动被锁死：当你在移动端给根元素
body或html强制加上overflow-x: hidden后，由于浏览器渲染引擎处理滚动条机制的差异，它有时候会连带着把原生的垂直方向的弹性滚动（Momentum Scrolling）也给破坏掉，甚至直接锁死整个页面的滚动事件！ - 内容被截断：因为
body设置了隐藏溢出，而内部的卡片宽度计算依然有问题（或者因为overflow-wrap: break-word还没有足够强制，依然有长字符串没有折行），导致超出屏幕的部分硬生生被裁掉，而不是像预期的那样自适应收缩。
🛠️ 修复方案 (Solution)：
- 撤回毒药：立刻去掉
body { overflow-x: hidden; }。不要在根节点做这么危险的操作！ - 容器级别截断：将
overflow-x: hidden; max-width: 100%; box-sizing: border-box;转移到内容的主外层容器.ai-container上。这样就算内部的卡片再旋转、再想往外溢出，也只会被容器剪掉，绝对不会影响整个网页的原生滚动！ - 更暴力的换行：把原本的
overflow-wrap: break-word;升级成更彻底的组合拳overflow-wrap: anywhere; word-break: break-word;，保证就算遇到超级长的没有空格的网址或代码块，也绝对给我老老实实换行！
📝 总结 (Takeaway)：永远不要轻易对移动端的 body 使用 overflow: hidden，这绝对是潘多拉的魔盒！处理溢出永远优先从局部容器下手！🐾
记录于：2026年3月25日 早晨 🏕️✨