评论附件拖放区放大：小胶囊 → 整块虚线大框 (#81)

用户 2026-11-05：「评论里面拖文件上传附件，那个地方太小了。」

原来：`padding:4px 10px` 的小胶囊（约 26px 高）+ 一行小字提示，
拖动落点只有那一条窄带 —— 触屏不好瞄，桌面也容易拖偏。

改成与「任务附件」同一套 `.upbox`（那个是站点级上传组件的标准外观）：
  · 高度 89px（触屏建议下限 44px，绰绰有余）
  · 宽度占满整行（桌面 840px / 手机 330px）
  · 虚线大框 + 加号图标 + 说明文字
  · 副标题写清「点『发表』时随这条评论一起发出」——
    与上面那块「拖上去立刻上传」语义不同，不写清楚用户会以为已经传了
  · 比「任务附件」矮一点（96 → 72 min-height，实测 89px）：
    评论框已经在下面，96px 会把讨论区推太长；89px 仍然很好点

顺带改的：
  · 已选文件从"逗号拼一行"改成"一行一个，带 📎"，长名截断
  · 渲染用 createElement + textContent，**不拼 innerHTML**
    （文件名是用户可控的，拼 innerHTML 就是 XSS）
  · 列表为空时 hidden，不挂空灰条
  · 加键盘支持：`.upbox` 带 role=button + tabindex，Enter/Space 能打开选择框

实测（Playwright，两种视口）：
  桌面 900px：840 × 89px，边框 1px dashed，触屏可点性 ✅
  手机 390px：330 × 89px，触屏可点性 ✅
  文件列表：2 项，高 56px，正常显示

assets/css/app.css

@@ -7000,33 +7000,42 @@ h6.md-h { font-size: 17px; color: var(--muted); }
 
 /* #78：评论里的「添加附件」。
    用原生 file input（视觉隐藏），点 label 触发 —— 与站内其它上传入口同一手法。 */
+/* 🔴 #81（用户 2026-11-05）：「评论里面拖文件上传附件，那个地方太小了。」
+
+   原来是一个 `padding:4px 10px` 的小胶囊（高约 26px）+ 一行小字，
+   拖动落点太小：触屏上不好瞄，桌面上也容易拖偏。
+   ⇒ 改用与「任务附件」同一套 `.upbox`（96px 高的虚线大框）。
+      这里只做评论特有的微调，不去覆盖 `.upbox` 本体 ——
+      那一套是站点级组件，改它会影响所有上传入口。 */
 .cmt-attach-row {
-  display: flex; align-items: center; gap: 8px;
-  margin-top: 6px;
+  display: flex; flex-direction: column; gap: 8px;
+  margin-top: 8px;
 }
-.cmt-attach-pick {
-  display: inline-flex; align-items: center; gap: 5px;
-  font-size: 12.5px; color: var(--muted); cursor: pointer;
-  padding: 4px 10px; border-radius: 999px;
-  border: 1px dashed var(--line); background: transparent;
+/* 评论里的上传框比「任务附件」矮一点：评论框本身已经在下方，
+   96px 会把整块讨论区推得太长；72px 在触屏上仍然好点。 */
+.cmt-upbox { min-height: 72px; padding: 10px 14px; gap: 3px; }
+.cmt-upbox .upbox-ico { font-size: 18px; }
+.cmt-upbox .upbox-msg { font-size: 13px; }
+.cmt-upbox-sub {
+  font-size: 11.5px; color: var(--faint); margin-top: 1px;
 }
-.cmt-attach-pick:hover { color: var(--brand); border-color: var(--brand); }
-.cmt-attach-name {
-  font-size: 12px; color: var(--faint);
-  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+/* 拖拽经过时整框高亮（`.is-over` 由 task_panel.js 加在 `.cmt-attach-row` 上，
+   而 `.upbox.is-over` 是站点级规则 —— 这里补一条子选择器把它传导下去） */
+.cmt-attach-row.is-over .cmt-upbox {
+  border-color: var(--brand); border-style: solid;
+  background: #FDF3EC; color: var(--brand);
 }
-/* #79：评论附件区支持拖拽 —— 高亮用虚线框 + 浅主题底色，和上面那块
-   「任务附件」的 is-over 观感一致（同一个交互不该长两个样子）。 */
-.cmt-attach-row {
-  padding: 6px 8px; border-radius: 8px;
-  border: 1px dashed transparent;
-  transition: background-color .12s, border-color .12s;
+/* 已选文件列表：一行一个，前面带个圆点；超长名截断 */
+.cmt-file-list {
+  display: flex; flex-direction: column; gap: 3px;
+  padding: 6px 10px; border-radius: var(--radius-s);
+  background: var(--surface-2, #F2F0EC);
+  font-size: 12px; color: var(--muted);
 }
-.cmt-attach-row.is-over {
-  border-color: var(--brand);
-  background: color-mix(in srgb, var(--brand) 8%, transparent);
+.cmt-file-list span {
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
-.cmt-attach-row.is-over .cmt-attach-pick { color: var(--brand); border-color: var(--brand); }
+.cmt-file-list span::before { content: '📎 '; }
 .tk-sec-lb { flex: 0 0 34px; font-size: 12.5px; color: var(--faint); }
 .tk-seg { display: flex; gap: 6px; flex-wrap: wrap; }
 /* 面板里的状态徽标比卡片上的大一档（这里是要点的按钮，不是标签） */