评论：去气泡改纸面排版 + 回复 @提及 + 双主题手机 12px 贴边

视觉：评论区从「带边框的聊天气泡盒」改成与去卡片后文章页一致的纸面排版
- .cm-bubble 类名保留（DOM 不动）盒子拆掉：正文直接落在纸面上，层级靠
  头像 / 名字行 / 留白撑起，条与条之间不画线不画盒；删除态靠变灰变斜认
- 输入区去卡片盒，只留 textarea 底下一条「书写线」，聚焦变强调色
  （vivid 再加同色光晕，与 .search 聚焦同一语言）；名字 / 计数 / 发送
  排在线下方，像在纸上落款
- 操作钮 ✎ ✕ ↩ 圆图标 → 一行文字钮（回复/编辑/删除）：桌面 hover 浮现、
  位置预留不跳版；触屏常显并加大可点面积；删除悬停给红；补 focus-visible 环
  （文字钮无边框，键盘可达性自己画）
- 回复串：空白缩进改左侧发丝线（与左栏时间线同一语言）；26px 小头像不再
  戴登录方式小标（戴不下）；登录引导卡去框，一行引导 + 一排登录圆钮
- 暗色代码块修复（.cm-md pre 与 .prose pre 同一 bug）：背景
  color-mix(92% ink, accent) 在暗色下混出浅底浅字，暗端覆盖为
  color-mix(86% paper, accent) + 细边框

@提及
- 回复另一条回复时正文前带强调色 @对方名字，扁平列表里才看得出在跟谁
  说话；回主楼不标。名字由 parent_id 在已加载回复列表里解析，父回复
  未加载就不标 —— 后端阶段二契约不变，纯前端即可工作
- 浮动贴正文首行行首（与首字下沉同一技巧），字号行高与 .cm-md 成对同步
  （基础 / 手机断点 / vivid 三处，改字号要一起改）；正文以代码块、列表
  开头时退成独立一行，避免被块级背景盖住
- 编辑态去掉「正在改定此评：」，交给 placeholder；mock 加 reply-to-reply
  用例（Mason 回 ONE）

手机 12px 贴边（两套主题正文与评论共用同一条左缘）
- vivid：.article-layout 手机断点 1fr → minmax(0,1fr)。裸 1fr 的自动最小
  尺寸是 min-content，正文里不可断行的长 token 把整列顶到 592px、整页
  横向溢出（实测 375 视口 bodyScrollWidth 612）；页边距 20 → 12；
  .prose 加 overflow-wrap:break-word
- classic：.shell 手机 20 → 12（首页信息流同步收边），PostView .wrap
  ≤640 侧边距归零 —— 那 4px 正是正文比评论多出的一截
- 评论手机断点（styles.css 基础段，两套 UI 共用）：头像 36→28、回复
  缩进收紧、排序 / 登录 / 操作钮 44px 触控目标、输入 16px 防 iOS
  聚焦缩放；.cm-md 加 overflow-wrap:break-word（用户内容长链接必须断行）

杂项
- vite dev 加 --host：手机连局域网可直接评审
- 实测（浏览器逐状态截图过目）：vivid/classic × 亮/暗 × 桌面/390，
  默认 / 未登录 / 空 / 审核中 / 已删除 / 多级回复 / 回复框 / 编辑框
  共 13 张；375 视口 bodyScrollWidth = 375 无溢出；pnpm build 通过

frontend/src/ui/yohaku/article.css

@@ -3,7 +3,10 @@ html[data-ui='vivid'] .article-layout {max-width:1100px;margin:0 auto;padding:24
   grid-template-columns:140px minmax(0,1fr) 180px;
   gap:24px;align-items:start;}
 @media (max-width:960px) {
-  html[data-ui='vivid'] .article-layout {grid-template-columns:1fr;gap:0}
+  /* 1fr 的自动最小尺寸是 min-content：正文里出现不可断行的长 token
+     （长内联代码/链接）时轨道会被顶到 592px+，整页横向溢出。
+     minmax(0,1fr) 和 classic 的 .layout 同一写法，把最小尺寸钉死为 0。 */
+  html[data-ui='vivid'] .article-layout {grid-template-columns:minmax(0,1fr);gap:0}
   html[data-ui='vivid'] .side-l, html[data-ui='vivid'] .side-r {display:none}
   html[data-ui='vivid'] .progress-pct {display:none}
 }
@@ -61,7 +64,9 @@ html[data-ui='vivid'] .paper > .dek {margin:0 0 32px;font-size:17px;line-height:
   font-family:var(--serif);}
 html[data-ui='vivid'] .prose {font-size:16.5px;line-height:1.95;color:var(--text);max-width:var(--measure);
   /* 中英混排自动补一点字距（Chrome 120+ 的 text-autospace）。不支持就退回现在的样子。 */
-  text-autospace:normal;}
+  text-autospace:normal;
+  /* 长 token（URL/内联代码）超出行宽时在任意字符处断行，别把列撑破 */
+  overflow-wrap:break-word;}
 /* 段距上下各 1.5em（参考 .v10dui0 .rich-paragraph），首末段把外边距吃掉，
    否则标题/分隔线上方会多出一段空白 */
 html[data-ui='vivid'] .prose p {margin:1.5em 0}
@@ -93,6 +98,10 @@ html[data-ui='vivid'] .prose pre {background:color-mix(in srgb,var(--ink) 92%,va
   color:#e8e8f0;padding:18px 20px;border-radius:12px;
   overflow-x:auto;font-size:13.5px;line-height:1.7;
   box-shadow:var(--shadow-lg);}
+/* 暗色下「92% ink」混出的是浅底，浅底配浅字没法读；暗端换深底微混强调色 */
+html[data-ui='vivid'][data-theme='vivid-dark'] .prose pre {
+  background:color-mix(in srgb,var(--paper) 86%,var(--accent));
+  border:1px solid var(--line);box-shadow:none;}
 html[data-ui='vivid'] .prose pre code {background:none;padding:0;color:inherit;font-size:inherit}
 html[data-ui='vivid'] .prose blockquote {margin:1.8em 0;padding:16px 20px;
   background:var(--accent-soft);