交互：表情面板 + 短文快发盒 + 双 UI 手机导航重做 + 社交链接与统计脚本接入

评论表情
- 发布 / 回复 / 编辑三处输入框挂上表情面板（EmojiPicker + emoji.js）：
  「表情 / 颜文字」两个 tab，光标处插入（insertAtCursor，未聚焦追加到
  末尾），面板自己管点外 / Esc 收起
- 操作钮 ✎ ✕ ↩ 圆图标改文字钮（回复 / 编辑 / 删除），删除悬停给红，
  补 focus-visible；编辑态去掉「正在改定此评：」交给 placeholder

双 UI 手机导航（参考 innei.in 的底部胶囊 + 上拉菜单）
- 余白：顶栏手机端整条退场，底部悬浮 dock（品牌 + NavBurger 汉堡），
  点开上拉毛玻璃菜单：mono 序号 01-05 + 中文大字 + 英文小字，当前项
  强调色 + 左缘短杠，逐项错峰 45ms 入场；dock 在菜单之下原位变 ✕
- classic：顶栏 brand 居中（三列网格）+ NavBurger + 下拉纸片；下滑隐藏
  上滑唤回——上滑要累计 40px 才算数（页面高度稳定时浏览器会回弹几十
  像素，那种「假上滑」不拉回顶栏）；首页 .sticky-head 用 var(--topbar-h)
  跟随顶栏一起滑
- NavBurger 两套 UI 共用；经典手机 FAB 避开右下角主题浮钮

sticky 失效修复
- body overflow-x:hidden 把 body 变成滚动容器，页内所有 position:sticky
  全部失明（首页筛选条吸顶从来没生效过）→ 改 overflow-x:clip，
  只裁剪不建滚动容器
- 余白手机端 .article-layout 裸 1fr 的自动最小尺寸是 min-content，
  长 token 把整列顶到 592px 横向溢出 → minmax(0,1fr) + overflow-wrap

短文快发盒（QuickShort，Twitter 式）
- 时间线顶部内联发布盒：头像 + 输入框 + 发布（Ctrl/⌘+Enter），手机收进
  右下角 FAB + 上拉 sheet；只有管理员会话在场才渲染（/api/admin/me
  探测），发布走真实 createPost(kind:short)——标题 / slug / 阅读时长
  后端自动生成。读者社交登录是阶段二产物，后端就绪前访客无法登录，
  所以天然只有站主可见；要放开给读者发，换探测和发布接口即可
- 经典 FAB 避开右下角主题浮钮（bottom 72），余白贴安全区（bottom 20）

社交链接 + 统计脚本接入
- Settings 的 social_links 前台两处渲染：经典左栏「常读标签」区域改为
  「社交账号」图标行（url 域名推导图标：GitHub / Telegram / X / 邮箱
  信封，认不出显示名称文字），右栏卡片下方 Twitter 式页脚小字区三排
  （导航行 / 社交图标行 / 项目源码 + 版权行）——项目源码是固定入口
  （本站 git remote），与版权同为固定元素，后台配置挤不掉
- Settings 加 custom_js：后台贴完整 <script> 片段（GA / Plausible /
  Umami），DOMParser 解析后逐个重建 script 节点插进 head（innerHTML
  塞的 script 不会执行）；公开页每页注入一次，/admin 不注入；
  站主自己的代码不做清洗（洗 JS 只会把统计脚本洗坏）
- 订阅卡删掉：RSS 入口在页脚小字里，一张卡只为一个链接不值得

杂项
- vite dev 加 --host：手机连局域网直接评审
- 评论 mock 的状态浮层窄屏上移，给底部 dock 让位
- 经典页脚在 12px 页边距下的排版对齐

验证
- 后端 go test 全绿；前端构建通过
- 浏览器逐状态过目：双 UI × 亮暗 × 桌面/手机；表情插入 / 短文发布真实
  入库（测试内容已删）/ dock 与 sheet 开合 / FAB 与主题浮钮不重叠 /
  顶栏隐藏与筛选条跟随同步

frontend/src/styles.css

@@ -96,8 +96,10 @@ body {background: var(--paper);
   line-height: var(--lh);
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
-  /* 移动端不留横向滚动 */
-  overflow-x: hidden;}
+  /* 移动端不留横向滚动。用 clip 不用 hidden：hidden 会把 body 变成滚动容器
+     （overflow-y 坍缩成 auto），页内所有 position:sticky 就此失明——
+     首页筛选条吸顶失效就是它干的。clip 只裁剪、不建滚动容器。 */
+  overflow-x: clip;}
 a {color: inherit;
   text-decoration: none;}
 @media (hover: hover) and (pointer: fine) {
@@ -134,6 +136,14 @@ h1, h2, h3, h4 {font-family: var(--serif);
      正文和评论共用同一条左缘（文章 .wrap 的侧边距在 PostView.vue 里归零） */
   .shell {padding: 0 12px;}
 }
+
+/* 顶栏实际高度（9+9 内边距 + 汉堡 40/44 + 1px 边框），首页 .sticky-head 的
+   吸顶偏移用它；TopBar 隐藏时把 html.topbar-hidden 翻上来，偏移归 0 跟着滑走 */
+:root {--topbar-h: 59px;}
+@media (pointer: coarse) {
+  :root {--topbar-h: 63px;}
+}
+html.topbar-hidden {--topbar-h: 0px;}
 .eyebrow {font-size: 12px;
   letter-spacing: 0.16em;
   text-transform: uppercase;
@@ -1152,7 +1162,7 @@ a,
   transition: border-color .2s;}
 .cm-input:focus {outline: none;}
 .cm-field:focus-within .cm-input {border-bottom-color: var(--accent);}
-.cm-bar {display: flex;align-items: center;justify-content: space-between;gap: 10px;
+.cm-bar {position: relative;display: flex;align-items: center;justify-content: space-between;gap: 10px;
   padding: 8px 0 0;font-size: 12.5px;color: var(--muted);}
 .cm-bar-l {display: flex;align-items: center;gap: 8px;min-width: 0;
   overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
@@ -1169,6 +1179,42 @@ a,
 .cm-send:disabled {opacity: .4;cursor: default;}
 .cm-err {margin: 14px 0 0;font-size: 13px;color: #a64953;}
 
+/* 表情 / 颜文字：触发钮在工具条上，面板从条上方弹出、盖住输入框。
+   右锚点 —— 工具条右缘离屏边最近，面板往左伸才不出屏（手机上也成立） */
+.cm-emoji-btn {display: grid;place-items: center;width: 30px;height: 30px;
+  border: 0;border-radius: 8px;background: none;font-size: 17px;line-height: 1;
+  cursor: pointer;opacity: .72;transition: opacity .2s,background-color .2s;}
+.cm-emoji-btn:hover, .cm-emoji-btn.on {opacity: 1;background: var(--accent-soft);}
+.cm-emoji {position: absolute;right: 0;bottom: calc(100% + 8px);z-index: 30;
+  width: min(320px, calc(100vw - 24px));
+  padding: 10px;border: 1px solid var(--line);border-radius: 12px;
+  background: var(--card);color: var(--ink);
+  box-shadow: 0 12px 40px -16px rgba(28, 28, 30, .3);
+  animation: cmEmojiIn .18s cubic-bezier(.22,.61,.36,1) both;}
+/* 上方放不下（打开时量过）翻到工具条下方 */
+.cm-emoji.is-below {bottom: auto;top: calc(100% + 8px);}
+@keyframes cmEmojiIn {from {opacity: 0;transform: translateY(4px)}}
+@media (prefers-reduced-motion: reduce) {
+  .cm-emoji {animation: none;}
+}
+.cm-emoji-tabs {display: flex;gap: 2px;margin-bottom: 8px;}
+.cm-emoji-tabs button {padding: 3px 10px;border: 0;border-radius: 999px;background: none;
+  color: var(--muted);font-size: 12px;font-weight: 600;cursor: pointer;}
+.cm-emoji-tabs button.on {color: var(--accent);background: var(--accent-soft);}
+/* 网格自动填列：面板宽度随屏变化时列数自己跟 */
+.cm-emoji-grid, .cm-emoji-list {max-height: 224px;overflow-y: auto;
+  scrollbar-width: thin;scrollbar-color: var(--line) transparent;}
+.cm-emoji-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));gap: 2px;}
+.cm-emoji-cat {grid-column: 1 / -1;padding: 5px 2px 1px;font-size: 11px;color: var(--faint);}
+.cm-emoji-item {display: grid;place-items: center;border: 0;border-radius: 8px;
+  background: none;color: var(--ink);font-size: 19px;line-height: 1;cursor: pointer;
+  transition: background-color .15s,transform .3s;}
+.cm-emoji-item:hover {background: var(--accent-soft);}
+.cm-emoji-item:active {transform: scale(.88);}
+/* 颜文字是文本：不进方块格子，一行一个胶囊 */
+.cm-emoji-list {display: flex;flex-wrap: wrap;gap: 4px;align-content: flex-start;}
+.cm-kao {width: auto;aspect-ratio: auto;padding: 5px 9px;font-size: 13px;font-weight: 600;}
+
 /* 列表：条与条之间靠留白分隔，不画线不画盒 */
 .cm-list {display: flex;flex-direction: column;gap: 28px;
   margin: 26px 0 0;padding: 0;list-style: none;}
@@ -1289,6 +1335,7 @@ a.cm-name-a:hover {color: var(--accent);}
   .cm-replies .cm-av {width: 24px;height: 24px;font-size: 10.5px;}
   .cm-act {padding: 8px 10px;}
   .cm-act:first-child {margin-left: -10px;}
+  .cm-emoji-btn {width: 36px;height: 36px;}
   .cm-sort button {min-height: 44px;}
   .cm-provider {width: 44px;height: 44px;}
   .cm-compose {gap: 10px;}
@@ -1300,6 +1347,7 @@ a.cm-name-a:hover {color: var(--accent);}
 @media (pointer: coarse) {
   .cm-provider {width: 44px;height: 44px;}
   .cm-act {padding: 8px 10px;}
+  .cm-emoji-btn {width: 36px;height: 36px;}
   .cm-link {padding: 8px 2px;}
   .cm-more-r {padding: 10px 0;}
   .cm-input {font-size: 16px;}