refactor: 优化会议总结和关键词展示布局

- 移除 `linkifySummary` 和 `MarkdownSummary` 组件
- 优化关键词和讨论点的展示逻辑
- 重构会议总结编辑和导出功能的交互
- 更新样式以改善整体视觉效果

frontend/src/pages/business/MeetingDetail.tsx

@@ -350,70 +350,6 @@ function parseChapterTimeToMs(value?: string) {
   return totalSeconds * 1000;
 }
 
-/**
- * 给 Markdown 文本中的关键词添加虚拟超链接
- */
-const linkifySummary = (content: string, keywords: string[]) => {
-  if (!content || !keywords.length) return content;
-
-  // 按长度降序排列关键词，防止短词匹配长词的一部分
-  const sortedKeywords = [...keywords].sort((a, b) => b.length - a.length);
-  const keywordPattern = sortedKeywords.map(k => k.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|');
-  
-  // 这种正则替换需要非常小心，不要破坏已有的 Markdown 结构（链接、代码块等）
-  // 这里的策略是：先按代码块/链接分割，只在纯文本部分进行替换
-  const parts = content.split(/(```[\s\S]*?```|`[^`]*`|\[[^\]]*\]\([^)]*\))/g);
-  
-  return parts.map(part => {
-    // 如果是代码块或已有链接，不处理
-    if (part.startsWith('```') || part.startsWith('`') || part.startsWith('[')) {
-      return part;
-    }
-    // 在普通文本中查找并替换关键词
-    return part.replace(new RegExp(`(${keywordPattern})`, 'g'), '[$1](#/keyword/$1)');
-  }).join('');
-};
-
-const MarkdownSummary: React.FC<{
-  content: string;
-  keywords: string[];
-  onKeywordClick: (keyword: string) => void;
-}> = ({ content, keywords, onKeywordClick }) => {
-  const processedContent = useMemo(() => linkifySummary(content, keywords), [content, keywords]);
-
-  return (
-    <ReactMarkdown
-      components={{
-        a: ({ href, children, ...props }) => {
-          // 检查是否是关键词链接（支持 URL 编码后的格式）
-          const isKeywordLink = href?.startsWith('#/keyword/') || (href && decodeURIComponent(href).startsWith('#/keyword/'));
-          
-          if (isKeywordLink) {
-            const decodedHref = decodeURIComponent(href!);
-            const keyword = decodedHref.replace('#/keyword/', '');
-            return (
-              <span
-                className="summary-keyword-link"
-                role="link"
-                onClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  onKeywordClick(keyword);
-                }}
-              >
-                {children}
-              </span>
-            );
-          }
-          return <a href={href} target="_blank" rel="noopener noreferrer" {...props}>{children}</a>;
-        }
-      }}
-    >
-      {processedContent}
-    </ReactMarkdown>
-  );
-};
-
 const MeetingProgressDisplay: React.FC<{
   meetingId: number;
   onComplete: () => void;
@@ -1860,88 +1796,38 @@ const MeetingDetail: React.FC = () => {
           <Row gutter={24} style={{ height: '100%' }}>
             <Col xs={24} xl={13} style={{ height: '100%' }}>
               <div className="detail-side-column detail-left-column">
-                <Card className="left-flow-card keyword-panel" variant="borderless">
-                  <div className="keyword-panel-head">
-                    <div className="keyword-panel-title">关键词</div>
-                    <div className="transcript-keyword-actions">
-                      {analysis.keywords.length > 9 ? (
-                        <button type="button" className="summary-link" onClick={() => setExpandKeywords((value) => !value)}>
-                          {expandKeywords ? '收起' : '展开全部'}
-                        </button>
-                      ) : null}
-                      {isOwner && analysis.keywords.length > 0 ? (
-                        <Button
-                          size="small"
-                          type="primary"
-                          ghost
-                          disabled={!selectedKeywords.length}
-                          loading={addingHotwords}
-                          onClick={handleAddSelectedHotwords}
-                        >
-                          加入热词 {selectedKeywords.length > 0 ? `(${selectedKeywords.length})` : ''}
-                        </Button>
-                      ) : null}
-                    </div>
-                  </div>
-                  <div className="record-tags">
-                    {keywordItems.length ? (
-                      keywordItems.map((tag) => {
-                        const isSelected = selectedKeywords.includes(tag);
-                        const isHighlighted = highlightKeyword === tag;
-                        return (
-                          <div
-                            key={tag}
-                            className={`tag selectable-tag ${isSelected ? 'selected' : ''} ${isHighlighted ? 'highlighted-tag' : ''}`}
-                            onClick={() => {
-                              if (isOwner && analysis.keywords.length) {
-                                handleKeywordToggle(tag, !isSelected);
-                              }
-                              handleKeywordClick(tag);
-                            }}
-                            style={isHighlighted ? { borderColor: '#5f51ff', backgroundColor: 'rgba(95, 81, 255, 0.1)' } : {}}
-                          >
-                            <span>#{tag}</span>
-                            {isOwner && isSelected && <CheckCircleFilled style={{ fontSize: 12 }} />}
-                          </div>
-                        );
-                      })
-                    ) : (
-                      <Text type="secondary">暂无关键词</Text>
-                    )}
-                  </div>
-                </Card>
-
                 <Card className="left-flow-card summary-panel" variant="borderless">
                   <div className="summary-head">
                     <div className="summary-title">
-                      <RobotOutlined />
+                      <RobotOutlined style={{ color: '#5f51ff', fontSize: 20 }} />
                       <span>AI 智能总结</span>
                     </div>
                     <div className="summary-head-actions">
-                      {meeting.summaryContent ? (
+                      {meeting.summaryContent && (
-                        // <Button type="link" size="small" onClick={() => {
+                        <span className="summary-head-link summary-head-link--static">
-                        //   setIsEditingSummary(false);
+                          <ClockCircleOutlined /> 总结记录
-                        //   setSummaryRecordVisible(true);
-                        // }}>
-                        <span>
-                          总结记录
                         </span>
-                        // </Button>
+                      )}
-                      ) : null}
+                      {meeting.summaryContent && isOwner && (
-                      {meeting.summaryContent && isOwner ? (
+                        <span
-                        <Button
+                          className="summary-head-link"
-                          type="link"
-                          size="small"
-                          icon={<EditOutlined />}
                           onClick={() => {
-                            setSummaryDraft(meeting.summaryContent || '');
+                            if (isEditingSummary) {
-                            setIsEditingSummary(true);
+                              handleSaveSummary();
-                            setSummaryRecordVisible(true);
+                            } else {
+                              setSummaryDraft(meeting.summaryContent || '');
+                              setIsEditingSummary(true);
+                            }
                           }}
                         >
-                          编辑
+                          {isEditingSummary ? <><CheckCircleFilled /> 保存</> : <><EditOutlined /> 编辑</>}
-                        </Button>
+                        </span>
-                      ) : null}
+                      )}
+                      {isEditingSummary && (
+                        <span className="summary-head-link" onClick={() => setIsEditingSummary(false)}>
+                          取消
+                        </span>
+                      )}
                     </div>
                   </div>
 
@@ -1954,38 +1840,70 @@ const MeetingDetail: React.FC = () => {
                       />
                     </div>
                   ) : meeting.summaryContent ? (
-                    <div className="summary-markdown-panel">
+                    <div className="summary-content-box">
-                      <div className="markdown-body summary-markdown">
+                      {/* Keywords placed between title and overview */}
-                        <MarkdownSummary
+                      <div className="summary-section" style={{ marginBottom: 24 }}>
-                          content={meeting.summaryContent}
+                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
-                          keywords={analysis.keywords}
+                          <div className="summary-section-title" style={{ marginBottom: 0 }}>关键词</div>
-                          onKeywordClick={handleKeywordClick}
+                          {isOwner && analysis.keywords.length > 0 && (
-                        />
+                            <Button
-                      </div>
+                              size="small"
-                    </div>
+                              type="primary"
-                  ) : false ? (
+                              ghost
-                    <>
+                              disabled={!selectedKeywords.length}
-                      <div className="brief-section">
+                              loading={addingHotwords}
-                      <div className="brief-section-title">会议概述</div>
+                              onClick={handleAddSelectedHotwords}
-                      {analysis.overview ? (
+                            >
-                        <div className="summary-copy-wrap">
+                              加入热词 {selectedKeywords.length > 0 ? `(${selectedKeywords.length})` : ''}
-                          <div className={!expandSummary && analysis.overview.length > 220 ? 'summary-copy summary-fade' : 'summary-copy'}>
+                            </Button>
-                            {analysis.overview}
-                          </div>
-                          {analysis.overview.length > 220 && (
-                            <button type="button" className="summary-link" onClick={() => setExpandSummary((value) => !value)}>
-                              {expandSummary ? '收起' : '展开全部'}
-                            </button>
                           )}
                         </div>
-                      ) : (
+                        <div className="record-tags">
-                        <Text type="secondary">暂无概述</Text>
+                          {keywordItems.length ? (
-                      )}
+                            keywordItems.map((tag) => {
-                    </div>
+                              const isSelected = selectedKeywords.includes(tag);
+                              return (
+                                <div
+                                  key={tag}
+                                  className={`tag selectable-tag ${isSelected ? 'selected' : ''}`}
+                                  onClick={() => {
+                                    if (isOwner && analysis.keywords.length) {
+                                      handleKeywordToggle(tag, !isSelected);
+                                    }
+                                  }}
+                                >
+                                  <span>#{tag}</span>
+                                  {isOwner && isSelected && <CheckCircleFilled style={{ fontSize: 12 }} />}
+                                </div>
+                              );
+                            })
+                          ) : (
+                            <Text type="secondary">暂无关键词</Text>
+                          )}
+                        </div>
+                      </div>
 
-                      <div className="brief-section">
+                      <div className="summary-section">
-                        <div className="brief-section-title">主要讨论点</div>
+                        <div className="summary-section-title">会议概述</div>
-                        {discussionItems.length ? (
+                        <div className="markdown-body summary-markdown">
+                          {isEditingSummary ? (
+                            <Input.TextArea
+                              value={summaryDraft}
+                              onChange={(e) => setSummaryDraft(e.target.value)}
+                              autoSize={{ minRows: 10 }}
+                              className="summary-inline-edit"
+                            />
+                          ) : (
+                            <ReactMarkdown>
+                              {analysis.overview || meeting.summaryContent}
+                            </ReactMarkdown>
+                          )}
+                        </div>
+                      </div>
+
+                      {discussionItems.length > 0 && !isEditingSummary && (
+                        <div className="summary-section" style={{ marginTop: 24 }}>
+                          <div className="summary-section-title">主要讨论点</div>
                           <div className="discussion-list">
                             {discussionItems.map((item, index) => (
                               <div className="discussion-item" key={`${item.title}-${index}`}>
@@ -1993,37 +1911,15 @@ const MeetingDetail: React.FC = () => {
                                 <div className="discussion-body">
                                   <div className="discussion-title-row">
                                     <strong>{item.title || `讨论点 ${index + 1}`}</strong>
-                                    {(item.speaker || item.time) && (
-                                      <div className="discussion-meta">
-                                        {item.speaker ? <span className="summary-tag">{item.speaker}</span> : null}
-                                        {item.time ? <span className="summary-tag">{item.time}</span> : null}
-                                      </div>
-                                    )}
                                   </div>
-                                  <div className="discussion-copy">{item.summary || '暂无讨论摘要'}</div>
+                                  <div className="discussion-copy">{item.summary}</div>
                                 </div>
                               </div>
                             ))}
                           </div>
-                        ) : (
-                          <Text type="secondary">暂无主要讨论点</Text>
-                        )}
-                      </div>
-
-                      {analysis.todos.length ? (
-                        <div className="brief-section">
-                          <div className="brief-section-title">待办事项</div>
-                          <div className="todo-list">
-                            {analysis.todos.map((item, index) => (
-                              <div className="todo-item" key={`${item}-${index}`}>
-                                <span className="todo-dot" />
-                                <span>{item}</span>
-                              </div>
-                            ))}
-                          </div>
                         </div>
-                      ) : null}
+                      )}
-                    </>
+                    </div>
                   ) : (
                     <div className="summary-empty-state">
                       <Empty description="暂无智能总结内容" />
@@ -2137,21 +2033,33 @@ const MeetingDetail: React.FC = () => {
                             catalogChapterLinks.map((chapter, index) => (
                               <div
                                 key={chapter.key}
-                                className={`catalog-item ${linkedChapterKey === chapter.key ? 'active' : ''}`}
+                                className={`catalog-item-container ${linkedChapterKey === chapter.key ? 'active' : ''}`}
                               >
-                                <div className="catalog-item-time">{chapter.timeLabel}</div>
+                                <div className="catalog-timeline-axis">
-                                <div className="catalog-item-main">
+                                  <div className="catalog-timeline-dot" />
-                                  <div className="catalog-item-title">{chapter.title}</div>
+                                  <div className="catalog-timeline-line" />
-                                  <button
-                                    type="button"
-                                    className="catalog-item-link"
-                                    onClick={() => handleLocateChapterTranscript(index)}
-                                  >
-                                    关联原文
-                                  </button>
                                 </div>
-                              </div>
+                                <div 
-                            ))
+                                  className="catalog-item-card"
+                                  onClick={() => handleLocateChapterTranscript(index)}
+                                  style={{ cursor: 'pointer' }}
+                                >
+                                  <div className="catalog-item-time">{chapter.timeLabel}</div>
+                                  <div className="catalog-item-title-row" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginTop: 4 }}>
+                                    <div className="catalog-item-title">{chapter.title}</div>
+                                    <button
+                                      type="button"
+                                      className="catalog-item-link"
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        handleLocateChapterTranscript(index);
+                                      }}
+                                    >
+                                      <LinkOutlined /> 关联原文
+                                    </button>
+                                  </div>
+                                </div>
+                              </div>                            ))
                           ) : (
                             <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无 AI 目录" />
                           )}
@@ -2296,17 +2204,27 @@ const MeetingDetail: React.FC = () => {
           display: flex;
           flex-direction: column;
           background: 
-            radial-gradient(circle at top left, rgba(108, 103, 255, 0.08), transparent 22%),
+            radial-gradient(circle at 20% 20%, rgba(95, 81, 255, 0.05) 0%, transparent 40%),
-            linear-gradient(180deg, #f8faff 0%, #f3f6fc 100%);
+            radial-gradient(circle at 80% 80%, rgba(108, 140, 255, 0.05) 0%, transparent 40%),
+            #fbfcfd;
+          position: relative;
+        }
+        .meeting-detail-page::before {
+          content: "";
+          position: absolute;
+          inset: 0;
+          background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3%3Ffilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
+          opacity: 0.015;
+          pointer-events: none;
         }
         .meeting-detail-page-header {
           margin-bottom: 18px;
-          padding: 18px 20px;
+          padding: 24px 32px;
-          border-radius: 24px;
+          border-radius: 28px;
-          border: 1px solid rgba(220, 226, 242, 0.9);
+          border: 1px solid rgba(220, 226, 242, 0.5);
-          background: rgba(255, 255, 255, 0.92);
+          background: rgba(255, 255, 255, 0.8);
-          box-shadow: 0 18px 46px rgba(95, 109, 155, 0.1);
+          box-shadow: 0 20px 50px rgba(0, 0, 0, 0.03);
-          backdrop-filter: blur(18px);
+          backdrop-filter: blur(20px);
         }
         .meeting-detail-title-wrap {
           display: flex;
@@ -2337,10 +2255,11 @@ const MeetingDetail: React.FC = () => {
           flex-wrap: wrap;
         }
         .meeting-detail-title-text {
-          color: #16203d;
+          color: #1a1f36;
-          font-size: 18px;
+          font-size: 24px;
           line-height: 1.2;
           font-weight: 800;
+          letter-spacing: -0.03em;
         }
         .meeting-detail-title-edit {
           width: 28px;
@@ -2401,37 +2320,72 @@ const MeetingDetail: React.FC = () => {
         .summary-panel .ant-card-body {
           display: flex;
           flex-direction: column;
-          gap: 24px;
+          gap: 20px;
-          padding: 22px 24px 24px;
+          padding: 24px;
         }
         .summary-head {
           display: flex;
           align-items: center;
           justify-content: space-between;
-          gap: 12px;
+          margin-bottom: 4px;
         }
         .summary-title {
           display: inline-flex;
           align-items: center;
-          gap: 10px;
+          gap: 8px;
-          color: #5f51ff;
+          color: #1a1f36;
-          font-size: 26px;
+          font-size: 18px;
           font-weight: 800;
         }
         .summary-head-actions {
-          display: inline-flex;
-          align-items: center;
-          gap: 4px;
-        }
-        .summary-progress-shell,
-        .summary-empty-state {
-          min-height: 280px;
           display: flex;
           align-items: center;
-          justify-content: center;
+          gap: 16px;
         }
-        .summary-markdown-panel {
+        .summary-head-link {
-          min-height: 0;
+          color: #6e7695;
+          font-size: 14px;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          transition: color 0.2s;
+        }
+        .summary-head-link:hover {
+          color: #5f51ff;
+        }
+        
+        .summary-content-box {
+          background: #f8faff;
+          border: 1px solid #eef1f9;
+          border-radius: 16px;
+          padding: 24px;
+        }
+        .summary-section-title {
+          color: #9aa0bd;
+          font-size: 14px;
+          font-weight: 700;
+          margin-bottom: 12px;
+          letter-spacing: 0.02em;
+        }
+        .summary-markdown {
+          font-size: 15px;
+          line-height: 1.8;
+          color: #2d3553;
+        }
+        .summary-markdown p {
+          margin-bottom: 16px;
+        }
+        .summary-markdown ul {
+          padding-left: 20px;
+          margin-bottom: 16px;
+        }
+        .summary-markdown li {
+          margin-bottom: 8px;
+          position: relative;
+        }
+        .summary-markdown li::marker {
+          color: #5f51ff;
         }
         .keyword-panel .ant-card-body {
           display: grid;
@@ -2807,24 +2761,29 @@ const MeetingDetail: React.FC = () => {
         .transcript-stage-tabs {
           display: flex;
           align-items: center;
-          gap: 20px;
+          gap: 32px;
-          padding: 0 18px;
+          padding: 0 24px;
-          min-height: 54px;
+          min-height: 56px;
-          border-bottom: 1px solid rgba(228, 232, 245, 0.92);
+          border-bottom: 1px solid #eef1f9;
-          background: rgba(255, 255, 255, 0.84);
+          background: #ffffff;
         }
         .transcript-stage-tabs button {
           padding: 0;
           border: 0;
           background: transparent;
-          color: #7d86a5;
+          color: #6e7695;
-          font-size: 14px;
+          font-size: 16px;
           font-weight: 700;
           height: 100%;
+          cursor: pointer;
           position: relative;
+          transition: color 0.2s;
+        }
+        .transcript-stage-tabs button:hover {
+          color: #5f51ff;
         }
         .transcript-stage-tabs button.active {
-          color: #4f56ff;
+          color: #5f51ff;
         }
         .transcript-stage-tabs button.active::after {
           content: "";
@@ -2832,9 +2791,9 @@ const MeetingDetail: React.FC = () => {
           left: 0;
           right: 0;
           bottom: 0;
-          height: 2px;
+          height: 3px;
-          border-radius: 999px;
           background: #5f51ff;
+          border-radius: 99px 99px 0 0;
         }
         .transcript-scroll-shell {
           flex: 1;
@@ -2844,62 +2803,136 @@ const MeetingDetail: React.FC = () => {
           padding: 18px 18px 0;
         }
         .catalog-list {
-          display: grid;
+          display: flex;
-          gap: 14px;
+          flex-direction: column;
-          padding-bottom: 0;
+          gap: 0;
+          padding: 10px 0 20px;
         }
-        .catalog-item {
+        .catalog-item-container {
-          display: grid;
+          display: flex;
-          grid-template-columns: 76px minmax(0, 1fr);
+          gap: 20px;
-          gap: 14px;
+          padding: 0 10px;
-          align-items: start;
-          padding: 16px 18px;
-          border-radius: 18px;
-          border: 1px solid rgba(228, 232, 245, 0.96);
-          background: rgba(248, 250, 255, 0.96);
-          transition: all 0.24s ease;
         }
-        .catalog-item:hover {
+        .catalog-timeline-axis {
-          border-color: rgba(95, 81, 255, 0.18);
+          display: flex;
-          box-shadow: 0 12px 28px rgba(95, 81, 255, 0.08);
+          flex-direction: column;
-          transform: translateY(-1px);
+          align-items: center;
+          width: 20px;
+          flex-shrink: 0;
+          position: relative;
         }
-        .catalog-item.active {
+        .catalog-timeline-dot {
-          border-color: rgba(95, 81, 255, 0.24);
+          width: 10px;
-          background: linear-gradient(135deg, rgba(95, 81, 255, 0.08), rgba(108, 140, 255, 0.06));
+          height: 10px;
-          box-shadow: 0 14px 30px rgba(95, 81, 255, 0.1);
+          background: #5f51ff;
+          border-radius: 50%;
+          margin-top: 24px;
+          z-index: 2;
+          transition: all 0.3s ease;
         }
-        .catalog-item-time {
+        .catalog-timeline-line {
-          color: #5c66a2;
+          position: absolute;
-          font-size: 13px;
+          top: 0;
-          font-weight: 800;
+          bottom: 0;
-          letter-spacing: 0.04em;
+          width: 2px;
-          padding-top: 4px;
+          background: #eef1f9;
+          z-index: 1;
         }
-        .catalog-item-main {
+        .catalog-item-container:first-child .catalog-timeline-line {
-          min-width: 0;
+          top: 24px;
-          display: grid;
-          gap: 10px;
         }
-        .catalog-item-title {
+        .catalog-item-container:last-child .catalog-timeline-line {
-          color: #273153;
+          bottom: calc(100% - 34px);
-          font-size: 15px;
+        }
-          font-weight: 700;
+        .catalog-item-card {
-          line-height: 1.7;
+          flex: 1;
+          background: #ffffff;
+          border: 1px solid #eef1f9;
+          border-radius: 12px;
+          padding: 16px 20px;
+          margin-bottom: 20px;
+          transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+        .catalog-item-card:hover {
+          background: #f9faff;
+          border-color: rgba(95, 81, 255, 0.2);
         }
         .catalog-item-link {
-          width: fit-content;
+          opacity: 0;
-          padding: 0;
+          visibility: hidden;
-          border: 0;
+          padding: 4px 10px;
-          background: transparent;
+          border-radius: 6px;
+          border: 1px solid transparent;
+          background: rgba(95, 81, 255, 0.06);
           color: #5f51ff;
-          font-size: 13px;
+          font-size: 12px;
-          font-weight: 700;
+          font-weight: 600;
           cursor: pointer;
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          transition: all 0.2s ease;
+        }
+        .catalog-item-container:hover .catalog-item-link {
+          opacity: 1;
+          visibility: visible;
+        }
+        
+        .summary-head-link--static {
+          cursor: default !important;
+          color: #9aa0bd !important;
+        }
+        .summary-head-link--static:hover {
+          color: #9aa0bd !important;
+        }
+        
+        .summary-inline-edit {
+          width: 100% !important;
+          border-radius: 12px !important;
+          border: 1px solid #d9d9d9 !important;
+          padding: 12px 16px !important;
+          font-size: 15px !important;
+          line-height: 1.8 !important;
+          color: #2d3553 !important;
+          background: #fff !important;
+        }
+        .summary-inline-edit:focus {
+          border-color: #5f51ff !important;
+          box-shadow: 0 0 0 2px rgba(95, 81, 255, 0.1) !important;
         }
         .catalog-item-link:hover {
-          color: #4536f0;
+          background: rgba(95, 81, 255, 0.12);
-          text-decoration: underline;
+          border-color: rgba(95, 81, 255, 0.2);
+        }
+        
+        .tag,
+        .summary-tag {
+          display: inline-flex;
+          align-items: center;
+          gap: 6px;
+          padding: 5px 14px;
+          border-radius: 99px;
+          background: #ffffff;
+          color: #6e7695;
+          border: 1px solid #eef1f9;
+          font-size: 13px;
+          font-weight: 500;
+          transition: all 0.2s ease;
+        }
+        .selectable-tag:hover {
+          border-color: #5f51ff;
+          color: #5f51ff;
+          background: rgba(95, 81, 255, 0.02);
+        }
+        .selectable-tag.selected {
+          border-color: #5f51ff;
+          background: rgba(95, 81, 255, 0.06);
+          color: #5f51ff;
+        }
+        .selectable-tag.highlighted-tag {
+          border-color: #5f51ff;
+          background: rgba(95, 81, 255, 0.05);
+          color: #5f51ff;
         }
         .segmented-tabs {
           display: flex;
@@ -3155,19 +3188,21 @@ const MeetingDetail: React.FC = () => {
           width: 100%;
           max-width: 100%;
           box-sizing: border-box;
-          padding: 14px 18px;
+          padding: 16px 22px;
-          border-radius: 22px;
+          border-radius: 20px;
-          background: rgba(255, 255, 255, 0.96);
+          background: #ffffff;
-          border: 1px solid rgba(228, 232, 245, 0.96);
+          border: 1px solid rgba(228, 232, 245, 0.6);
-          color: #313b5b;
+          color: #2d3553;
-          line-height: 1.74;
+          line-height: 1.8;
           font-size: 15px;
           white-space: pre-wrap;
-          transition: all 0.3s ease;
+          transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
         }
         .transcript-bubble:hover {
-          border-color: rgba(95, 81, 255, 0.24);
+          border-color: rgba(95, 81, 255, 0.2);
-          box-shadow: 0 8px 24px rgba(95, 81, 255, 0.08);
+          box-shadow: 0 12px 24px rgba(95, 81, 255, 0.05);
+          transform: translateY(-1px);
         }
         .transcript-bubble.editable {
           cursor: text;
@@ -3396,9 +3431,6 @@ const MeetingDetail: React.FC = () => {
           .detail-left-column {
             padding-right: 0;
           }
-          .catalog-item {
-            grid-template-columns: 68px minmax(0, 1fr);
-          }
           .speaker-summary-card {
             grid-template-columns: 1fr;
           }
@@ -3420,10 +3452,6 @@ const MeetingDetail: React.FC = () => {
           .detail-left-column {
             overflow: visible;
           }
-          .catalog-item {
-            grid-template-columns: 1fr;
-            gap: 8px;
-          }
           .transcript-player--floating {
             bottom: 72px;
             max-width: calc(100vw - 24px);
@@ -3494,11 +3522,9 @@ const MeetingDetail: React.FC = () => {
               />
             ) : (
               <div className="markdown-body summary-markdown">
-                <MarkdownSummary
+                <ReactMarkdown>
-                  content={meeting.summaryContent}
+                  {meeting.summaryContent}
-                  keywords={analysis.keywords}
+                </ReactMarkdown>
-                  onKeywordClick={handleKeywordClick}
-                />
               </div>
             )
           ) : (