Update app/templates/article.html

app/templates/article.html

@@ -5,6 +5,14 @@
 {% block extra_css %}
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
 <style>
+    :root {
+        --primary-blue: #4A90E2;
+        --light-blue: #63C2DE;
+        --soft-purple: #9B59B6;
+        --text-dark: #2C3E50;
+        --warm-cream: #FFF9E6;
+    }
+
     /* 文章容器样式 */
     .article-container {
         max-width: 900px;
@@ -78,36 +86,36 @@
         color: var(--text-dark);
     }
 
-    .article-content .markdown-body {
+    .markdown-body {
         font-size: 1.1rem;
     }
 
-    .article-content .markdown-body h1,
-    .article-content .markdown-body h2,
-    .article-content .markdown-body h3 {
+    .markdown-body h1,
+    .markdown-body h2,
+    .markdown-body h3 {
         color: var(--primary-blue);
         margin-top: 2em;
         margin-bottom: 1em;
         font-weight: 600;
     }
 
-    .article-content .markdown-body p {
+    .markdown-body p {
         margin-bottom: 1.5em;
     }
 
-    .article-content .markdown-body a {
+    .markdown-body a {
         color: var(--primary-blue);
         text-decoration: none;
         border-bottom: 1px dashed var(--light-blue);
         transition: all 0.3s;
     }
 
-    .article-content .markdown-body a:hover {
+    .markdown-body a:hover {
         border-bottom-style: solid;
         color: var(--soft-purple);
     }
 
-    .article-content .markdown-body code {
+    .markdown-body code {
         background: #F8FAFC;
         padding: 0.2em 0.4em;
         border-radius: 4px;
@@ -115,7 +123,7 @@
         color: var(--primary-blue);
     }
 
-    .article-content .markdown-body pre {
+    .markdown-body pre {
         background: #F8FAFC;
         border-radius: 12px;
         padding: 1rem;
@@ -123,13 +131,13 @@
         border: 1px solid var(--light-blue);
     }
 
-    .article-content .markdown-body pre code {
+    .markdown-body pre code {
         background: none;
         padding: 0;
         color: inherit;
     }
 
-    .article-content .markdown-body blockquote {
+    .markdown-body blockquote {
         border-left: 4px solid var(--light-blue);
         padding: 0.5rem 0 0.5rem 1rem;
         margin: 1.5rem 0;
@@ -137,7 +145,7 @@
         background: #F8FAFC;
     }
 
-    .article-content .markdown-body img {
+    .markdown-body img {
         max-width: 100%;
         border-radius: 12px;
         margin: 1.5rem 0;
@@ -185,7 +193,7 @@
         transform-origin: bottom right;
         transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
         z-index: 999;
-        border: 1px solid var(--light-blue);
+        border: 2px solid var(--light-blue);
     }
 
     .chat-window.active {
@@ -235,7 +243,6 @@
         display: flex;
         flex-direction: column;
         gap: 1rem;
-        width: 100%;
         background: #f8f9fa;
     }
 
@@ -268,13 +275,13 @@
     .chat-message p {
         margin: 0;
         margin-bottom: 0.75rem;
-        white-space: pre-wrap;
     }
 
     .chat-message p:last-child {
         margin-bottom: 0;
     }
 
+    /* Chat Message Content Styling */
     .chat-message pre {
         background: #f1f5f9;
         border-radius: 8px;
@@ -302,22 +309,6 @@
         font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
     }
 
-    .chat-message img {
-        max-width: 100%;
-        height: auto;
-        border-radius: 8px;
-        margin: 0.75rem 0;
-    }
-
-    .chat-message blockquote {
-        border-left: 3px solid var(--light-blue);
-        margin: 0.75rem 0;
-        padding: 0.5rem 0 0.5rem 1rem;
-        color: #64748b;
-        background: #f8fafc;
-        border-radius: 4px;
-    }
-
     .chat-message .katex-display {
         margin: 0.75rem 0;
         overflow-x: auto;
@@ -328,25 +319,6 @@
         font-size: 1.1em;
     }
 
-    .chat-message table {
-        border-collapse: collapse;
-        width: 100%;
-        margin: 0.75rem 0;
-        overflow-x: auto;
-        display: block;
-    }
-
-    .chat-message table th,
-    .chat-message table td {
-        padding: 0.5rem 0.75rem;
-        border: 1px solid var(--light-blue);
-    }
-
-    .chat-message table th {
-        background: #f8fafc;
-        font-weight: 600;
-    }
-
     .chat-input-container {
         padding: 1.25rem;
         border-top: 1px solid var(--light-blue);
@@ -396,7 +368,7 @@
         transform: translateY(-2px);
     }
 
-    /* 动画 */
+    /* Animations */
     @keyframes messageSlide {
         from {
             opacity: 0;
@@ -408,7 +380,7 @@
         }
     }
 
-    /* 响应式设计 */
+    /* Responsive Design */
     @media (max-width: 768px) {
         .article-container {
             padding: 1.5rem;