feat: 品牌裁剪弹窗/Markdown 行内短代码与详情视频块等

新增：
- BrandCropModal 品牌图裁剪弹窗 + cropImage 工具
- Markdown 行内短代码（inlineShortcodes + remark 插件）
- MdDetails 折叠块、MdVideo 视频块组件
- directiveBlocks/inlineShortcodes 测试

其它：
- 聊天后端（handler/service chat）调整
- Markdown 渲染链路、编辑器、全局样式与品牌相关面板更新

frontend/components/LibrarySearchGrid.tsx

@@ -36,17 +36,17 @@ function TextCover({ title }: { title: string }) {
       style={{ "--cover-h": coverHue(name) } as CSSProperties}
       aria-hidden
     >
-      <span className="j13-library-title text-[19px] font-bold leading-snug text-center line-clamp-4 break-all tracking-wide">
+      <span className="j13-library-title text-[17px] font-bold leading-snug text-center line-clamp-3 break-words tracking-wide">
         {name}
       </span>
     </div>
   );
 }
 
-function ExtChip({ ext }: { ext: string }) {
+function ExtChip({ ext, className = "" }: { ext: string; className?: string }) {
   return (
     <span
-      className="text-[10.5px] font-semibold px-1.5 py-0.5 rounded-md uppercase tracking-wide"
+      className={`text-[10.5px] font-semibold px-1.5 py-0.5 rounded-md uppercase tracking-wide ${className}`}
       style={{
         color: "var(--accent)",
         background: "var(--accent-soft)",
@@ -65,33 +65,45 @@ function DocCard({ doc, href }: { doc: LibraryDocListItem; href: string }) {
   const excerpt = plainExcerpt(doc.description ?? "");
   return (
     <Link href={href} className="group flex flex-col min-w-0">
-      {/* 竖版书形封面：书脊光影 + 悬停浮出简介 */}
+      {/* 横版封面框（宽大于高）：模糊底衬完整显示任意比例图 + 悬停浮出简介 */}
       <div
-        className="relative aspect-[3/4] overflow-hidden rounded-[10px] shadow-[var(--shadow-sm)] transition-[transform,box-shadow] duration-200 group-hover:-translate-y-1.5 group-hover:shadow-[var(--shadow-lg)]"
+        className="relative w-full aspect-[3/2] overflow-hidden rounded-[10px] shadow-[var(--shadow-sm)] transition-[transform,box-shadow] duration-200 group-hover:-translate-y-1.5 group-hover:shadow-[var(--shadow-lg)]"
         style={{ background: "var(--panel-2)" }}
       >
         {doc.cover_url ? (
-          // eslint-disable-next-line @next/next/no-img-element
-          <img
-            src={variantURL(doc.cover_url, 384)}
-            srcSet={widthSrcSet(doc.cover_url, [384, 512, 768])}
-            sizes="(max-width:640px) 46vw, (max-width:1024px) 30vw, (max-width:1280px) 22vw, 220px"
-            alt={doc.title}
-            className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-[1.04]"
-            loading="lazy"
-            decoding="async"
-            draggable={false}
-          />
+          <>
+            {/* 底层：同图放大模糊填充，竖版/非 3:2 封面不露黑边 */}
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src={variantURL(doc.cover_url, 384)}
+              alt=""
+              aria-hidden
+              className="absolute inset-0 w-full h-full object-cover scale-125 blur-lg opacity-70"
+              loading="lazy"
+              decoding="async"
+              draggable={false}
+            />
+            {/* 上层：完整封面居中显示 */}
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src={variantURL(doc.cover_url, 384)}
+              srcSet={widthSrcSet(doc.cover_url, [384, 512, 768])}
+              sizes="(max-width:640px) 100vw, (max-width:1024px) 46vw, (max-width:1280px) 30vw, 300px"
+              alt={doc.title}
+              className="absolute inset-0 w-full h-full object-contain transition-transform duration-300 group-hover:scale-[1.04]"
+              loading="lazy"
+              decoding="async"
+              draggable={false}
+            />
+          </>
         ) : (
           <TextCover title={doc.title} />
         )}
-        {/* 书脊/书口光影，营造实体书体积感 */}
+        {/* 边缘内阴影，营造卡片体积感 */}
         <div
           aria-hidden
-          className="absolute inset-0 rounded-[10px] pointer-events-none"
+          className="absolute inset-0 rounded-[inherit] pointer-events-none"
           style={{
-            background:
-              "linear-gradient(90deg, rgba(0,0,0,0.16) 0%, rgba(0,0,0,0.05) 2.5%, transparent 5%, transparent 96%, rgba(0,0,0,0.05) 98.5%, rgba(0,0,0,0.1) 100%)",
             boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.06)",
           }}
         />
@@ -103,7 +115,7 @@ function DocCard({ doc, href }: { doc: LibraryDocListItem; href: string }) {
                 "linear-gradient(to top, rgba(18,20,26,0.92) 0%, rgba(18,20,26,0.55) 55%, rgba(18,20,26,0.15) 100%)",
             }}
           >
-            <p className="text-[12px] leading-relaxed text-white/90 line-clamp-5">{excerpt}</p>
+            <p className="text-[12px] leading-relaxed text-white/90 line-clamp-4">{excerpt}</p>
           </div>
         ) : null}
       </div>
@@ -153,7 +165,7 @@ function DocCard({ doc, href }: { doc: LibraryDocListItem; href: string }) {
 }
 
 /**
- * 书库目录：书架式竖版封面网格 + 书名/作者即时过滤（目录接口一次返回全部已发布
+ * 书库目录：横版封面卡片网格（手机端单列全宽）+ 书名/作者即时过滤（目录接口一次返回全部已发布
  * 条目，纯客户端过滤；上限与后端 ListPublished 的 100 条一致）。
  */
 export default function LibrarySearchGrid({
@@ -230,7 +242,7 @@ export default function LibrarySearchGrid({
           <p className="meta text-[12.5px] mt-2">换个书名或作者关键词试试</p>
         </div>
       ) : (
-        <div className="mt-8 grid gap-x-5 gap-y-9 grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6">
+        <div className="mt-8 grid grid-cols-1 gap-x-5 gap-y-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
           {filtered.map((d) => (
             <DocCard key={d.id} doc={d} href={libraryDocPath(urlStyle, d.slug)} />
           ))}