feat: 消息气泡长文字支持「展开全部/收起全部」折叠

- 新增 CollapsibleText 组件：超过 8 行文字自动折叠，按行高对齐裁切，底部柔和渐隐遮罩暗示有更多内容
- 折叠按钮左对齐，胶囊样式 + chevron 图标，hover 浅背景高亮，点击 chevron 旋转 180°
- 应用到全部 5 种气泡：Text/ImageWithText/Album/Video/FileDoc
- 动画统一使用 motion 包的 EASE_OUT 缓动，尊重 reducedMotion=user
- i18n 七种语言新增 showMore/showLess 文案

src/components/messageStream/CollapsibleText.tsx

@@ -0,0 +1,127 @@
+import { AnimatePresence, m } from "framer-motion";
+import { ChevronDown } from "lucide-react";
+import {
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+import { useI18n } from "../../i18n";
+import { EASE_OUT } from "../../motion";
+
+/**
+ * Collapsible long-text container.
+ *
+ * When the rendered text overflows `collapsedLines`:
+ * 1. The text is clipped to a clean line boundary.
+ * 2. A soft gradient fade hints that more content is below.
+ * 3. A centered pill button with a chevron icon offers a clear tap target.
+ *
+ * The clipped height is `collapsedLines × computed line-height` so the cut
+ * always lands at a line boundary — no half-cut characters.
+ *
+ * Motion uses the shared `EASE_OUT` curve and respects MotionProvider's
+ * global `reducedMotion="user"`.
+ */
+export function CollapsibleText({
+  children,
+  className = "",
+  wrapperClassName = "",
+  collapsedLines = 8,
+}: {
+  children: ReactNode;
+  /** Typography classes applied to the text container. */
+  className?: string;
+  /** Outer wrapper classes (padding, etc.). */
+  wrapperClassName?: string;
+  collapsedLines?: number;
+}) {
+  const { t } = useI18n();
+  const innerRef = useRef<HTMLDivElement>(null);
+  const [clampedHeight, setClampedHeight] = useState(0);
+  const [fullHeight, setFullHeight] = useState(0);
+  const [needsToggle, setNeedsToggle] = useState(false);
+  const [expanded, setExpanded] = useState(false);
+
+  const measure = () => {
+    const el = innerRef.current;
+    if (!el) return;
+    const lh = parseFloat(getComputedStyle(el).lineHeight) || 24;
+    const ch = Math.round(lh * collapsedLines);
+    const fh = el.scrollHeight;
+    setClampedHeight(ch);
+    setFullHeight(fh);
+    setNeedsToggle(fh > ch + 4);
+  };
+
+  useLayoutEffect(() => {
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(measure);
+    if (innerRef.current) ro.observe(innerRef.current);
+    return () => ro.disconnect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [children, collapsedLines]);
+
+  useEffect(() => {
+    const id = window.requestAnimationFrame(measure);
+    return () => window.cancelAnimationFrame(id);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [children, collapsedLines]);
+
+  const isClamped = needsToggle && !expanded;
+  const targetHeight = needsToggle
+    ? expanded
+      ? fullHeight
+      : clampedHeight
+    : undefined;
+
+  return (
+    <div className={wrapperClassName}>
+      <m.div
+        className="relative overflow-hidden"
+        animate={{ height: targetHeight }}
+        transition={{ duration: 0.3, ease: EASE_OUT }}
+        style={needsToggle ? undefined : { height: "auto" }}
+      >
+        <div ref={innerRef} className={className}>
+          {children}
+        </div>
+
+        {/* Soft fade hints "more content below" when clamped. */}
+        <AnimatePresence>
+          {isClamped ? (
+            <m.div
+              key="fade"
+              aria-hidden
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.2, ease: EASE_OUT }}
+              className="pointer-events-none absolute inset-x-0 bottom-0 h-10 bg-gradient-to-t from-[#272632] via-[#272632]/85 to-transparent"
+            />
+          ) : null}
+        </AnimatePresence>
+      </m.div>
+
+      {needsToggle ? (
+        <button
+          type="button"
+          onClick={() => setExpanded((v) => !v)}
+          aria-expanded={expanded}
+          className="group mt-1.5 -ml-2 inline-flex h-8 items-center gap-1 rounded-full px-2 text-[13px] font-medium text-ark-gold transition-colors duration-200 hover:bg-white/5 hover:text-ark-gold2"
+        >
+          <span>{expanded ? t("showLess") : t("showMore")}</span>
+          <m.span
+            className="inline-flex"
+            animate={{ rotate: expanded ? 180 : 0 }}
+            transition={{ duration: 0.25, ease: EASE_OUT }}
+          >
+            <ChevronDown className="h-4 w-4" strokeWidth={2.2} />
+          </m.span>
+        </button>
+      ) : null}
+    </div>
+  );
+}