Enhance styling and typography in frontend components

- Added custom font size and line height variables in CSS for better typography control.
- Updated Tailwind configuration to include new font sizes and line heights.
- Refined markdown content styles to utilize new typography settings, improving readability.
- Adjusted Chat component styles for consistent text sizing and improved user experience.

app/frontend/src/components/Chat.js

@@ -457,7 +457,7 @@ ${results.score >= 80
               </SyntaxHighlighter>
             </div>
           ) : (
-            <code className="px-1 py-0.5 bg-secondary rounded text-xs font-mono" {...props}>
+            <code className="px-1 py-0.5 bg-secondary rounded text-sm font-mono" {...props}>
               {children}
             </code>
           );
@@ -522,7 +522,7 @@ ${results.score >= 80
                         ? '⚠️' 
                         : '🤖'}
                   </span>
-                  <div className={`text-sm ${message.sender === 'ai' ? 'markdown-content' : ''} overflow-hidden`}>
+                  <div className={`${message.sender === 'ai' ? 'markdown-content' : 'text-base'} overflow-hidden`}>
                     {message.sender === 'user' ? (
                       message.text
                     ) : message.isStreaming ? (
@@ -611,7 +611,7 @@ ${results.score >= 80
                 <div className="flex flex-col items-start gap-2 max-w-[80%] rounded-lg px-4 py-3 bg-primary/10 text-foreground shadow-sm border border-primary/20">
                   <div className="flex items-start gap-2">
                     <span className="mt-1 text-lg flex-shrink-0">🧠</span>
-                    <div className="text-sm">
+                    <div className="text-base">
                       <p className="mb-3">
                         I notice you've asked several questions about this document. Would you like to test your knowledge with a quick quiz?
                       </p>
@@ -639,18 +639,7 @@ ${results.score >= 80
             )}
           </div>
         )}
-        {isLoading && (
-          <div className="mb-4 flex justify-start w-full">
-            <div className="flex items-start gap-2 max-w-[80%] rounded-lg px-4 py-3 bg-secondary text-secondary-foreground shadow-sm">
-              <span className="mt-1 text-lg flex-shrink-0">🤖</span>
-              <div className="flex items-center space-x-2">
-                <div className="h-2 w-2 animate-bounce rounded-full bg-primary"></div>
-                <div className="h-2 w-2 animate-bounce rounded-full bg-primary" style={{ animationDelay: '0.2s' }}></div>
-                <div className="h-2 w-2 animate-bounce rounded-full bg-primary" style={{ animationDelay: '0.4s' }}></div>
-              </div>
-            </div>
-          </div>
-        )}
+        {/* Loading indicator removed since streaming response handles this */}
         {quizLoading && (
           <div className="mb-4 flex justify-start w-full">
             <div className="flex items-start gap-2 max-w-[80%] rounded-lg px-4 py-3 bg-secondary text-secondary-foreground shadow-sm">
@@ -661,7 +650,7 @@ ${results.score >= 80
                   <div className="h-2 w-2 animate-bounce rounded-full bg-primary" style={{ animationDelay: '0.2s' }}></div>
                   <div className="h-2 w-2 animate-bounce rounded-full bg-primary" style={{ animationDelay: '0.4s' }}></div>
                 </div>
-                <span className="text-xs">Generating quiz questions...</span>
+                <span className="text-sm">Generating quiz questions...</span>
               </div>
             </div>
           </div>

app/frontend/src/globals.css

@@ -33,6 +33,19 @@
     --ring: 222.2 84% 4.9%;
 
     --radius: 0.5rem;
+    
+    /* Font size variables */
+    --font-size-xs: 0.8125rem;    /* 13px */
+    --font-size-sm: 0.9375rem;    /* 15px */
+    --font-size-base: 1.0625rem;  /* 17px */
+    --font-size-lg: 1.1875rem;    /* 19px */
+    --font-size-xl: 1.375rem;     /* 22px */
+    --font-size-2xl: 1.625rem;    /* 26px */
+    
+    /* Line height variables */
+    --line-height-tight: 1.3;
+    --line-height-normal: 1.5;
+    --line-height-relaxed: 1.7;
   }
 
   .dark {
@@ -71,9 +84,19 @@
     @apply border-border;
   }
   
+  html {
+    font-size: 16px; /* Base font size */
+  }
+  
   body {
     @apply bg-background text-foreground;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-size: var(--font-size-base);
+    line-height: var(--line-height-normal);
     transition: background-color 0.3s ease, color 0.3s ease;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
   }
   
   /* Custom scrollbar styles */
@@ -115,15 +138,19 @@
   
   /* Markdown content styles */
   .markdown-content {
-    line-height: 1.6;
+    font-size: var(--font-size-base);
+    line-height: var(--line-height-relaxed);
+    letter-spacing: 0.01em;
   }
   
   .markdown-content pre {
     position: relative;
+    margin: 1.25rem 0;
   }
   
   .markdown-content code {
-    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    font-family: 'SF Mono', 'Roboto Mono', Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    font-size: var(--font-size-sm);
   }
   
   /* Syntax highlighting for code blocks */
@@ -132,6 +159,7 @@
     padding: 1rem;
     overflow-x: auto;
     border-radius: 0.375rem;
+    line-height: 1.5;
   }
   
   /* Specific element styles */
@@ -140,7 +168,39 @@
   .markdown-content h3, 
   .markdown-content h4 {
     font-weight: 600;
-    line-height: 1.25;
+    line-height: var(--line-height-tight);
+    margin-top: 1.5em;
+    margin-bottom: 0.75em;
+  }
+  
+  .markdown-content h1 {
+    font-size: var(--font-size-2xl);
+  }
+  
+  .markdown-content h2 {
+    font-size: var(--font-size-xl);
+  }
+  
+  .markdown-content h3 {
+    font-size: var(--font-size-lg);
+  }
+  
+  .markdown-content h4 {
+    font-size: var(--font-size-base);
+  }
+  
+  .markdown-content p {
+    margin-bottom: 1.25rem;
+  }
+  
+  .markdown-content ul,
+  .markdown-content ol {
+    margin-bottom: 1.25rem;
+    padding-left: 1.5rem;
+  }
+  
+  .markdown-content li {
+    margin-bottom: 0.5rem;
   }
   
   .markdown-content strong {
@@ -159,11 +219,13 @@
     width: 100%;
     table-layout: fixed;
     overflow: hidden;
+    margin-bottom: 1.25rem;
   }
   
   .markdown-content img {
     max-width: 100%;
     height: auto;
+    margin: 1.25rem 0;
   }
 }
 

app/frontend/tailwind.config.js

@@ -40,6 +40,43 @@ module.exports = {
           foreground: "hsl(var(--card-foreground))",
         },
       },
+      fontSize: {
+        xs: "var(--font-size-xs)",    /* 13px */
+        sm: "var(--font-size-sm)",    /* 15px */
+        base: "var(--font-size-base)", /* 17px */
+        lg: "var(--font-size-lg)",    /* 19px */
+        xl: "var(--font-size-xl)",    /* 22px */
+        "2xl": "var(--font-size-2xl)" /* 26px */
+      },
+      lineHeight: {
+        tight: "var(--line-height-tight)",
+        normal: "var(--line-height-normal)",
+        relaxed: "var(--line-height-relaxed)"
+      },
+      fontFamily: {
+        sans: [
+          "-apple-system", 
+          "BlinkMacSystemFont", 
+          "Segoe UI", 
+          "Roboto", 
+          "Oxygen", 
+          "Ubuntu", 
+          "Cantarell", 
+          "Open Sans", 
+          "Helvetica Neue", 
+          "sans-serif"
+        ],
+        mono: [
+          "SF Mono",
+          "Roboto Mono",
+          "Menlo",
+          "Monaco",
+          "Consolas",
+          "Liberation Mono",
+          "Courier New",
+          "monospace"
+        ]
+      },
       borderRadius: {
         lg: "var(--radius)",
         md: "calc(var(--radius) - 2px)",