fix ui issues: larger chat icons and proper book contextualization

- increased chat bubble icon size with responsive scaling
- fixed ai generating passage quotes instead of book facts
- improved contextualization prompt to generate literary insights

src/aiService.js

@@ -694,10 +694,10 @@ Return JSON: {"passage1": {"words": [${blanksPerPassage} words], "context": "one
             model: this.primaryModel,  // Use Gemma-3-12b for contextualization
             messages: [{
               role: 'system',
-              content: 'Write one factual sentence about the given literary work.'
+              content: 'You are a literary expert. Provide ONE interesting fact about this book or its author. Focus on: publication year, genre, historical context, author biography, literary significance, or themes. Do NOT quote or paraphrase passages from the book. Keep it under 20 words.'
             }, {
               role: 'user',
-              content: `"${title}" by ${author}`
+              content: `Book: "${title}" by ${author}. Give me a brief fact about this work or author, not a quote from the text.`
             }],
             max_tokens: 150,
             temperature: 0.5,

src/clozeGameEngine.js

@@ -84,7 +84,7 @@ class ClozeGame {
         this.currentBook = book1;
         this.originalText = this.passages[0];
         await this.createClozeTextFromPreprocessed(0);
-        this.contextualization = this.preprocessedData.passage1.context;
+        await this.generateContextualization();
         
       } catch (error) {
         console.warn('Batch processing failed, falling back to sequential:', error);
@@ -840,7 +840,7 @@ class ClozeGame {
         // Use preprocessed data if available
         if (this.preprocessedData && this.preprocessedData.passage2) {
           await this.createClozeTextFromPreprocessed(1);
-          this.contextualization = this.preprocessedData.passage2.context;
+          await this.generateContextualization();
         } else {
           // Fallback to sequential processing
           await this.createClozeText();
@@ -984,9 +984,10 @@ class ClozeGame {
             placeholder="${'_'.repeat(Math.max(3, blank.originalWord.length))}"
             style="width: ${Math.max(50, blank.originalWord.length * 10)}px;">
           <button id="${chatButtonId}" 
-            class="chat-button text-blue-500 hover:text-blue-700 text-sm" 
+            class="chat-button text-blue-500 hover:text-blue-700" 
             data-blank-index="${index}"
-            title="Ask question about this word">
+            title="Ask question about this word"
+            style="font-size: 1.5rem; line-height: 1;">
             💬
           </button>
         </span>`;

src/styles.css

@@ -23,12 +23,37 @@
 .chat-button {
   transition: all 0.2s ease;
   border-radius: 4px;
-  padding: 2px 4px;
+  padding: 4px 6px;
+  font-size: 1.5rem;
+  vertical-align: middle;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 32px;
+  min-height: 32px;
 }
 
 .chat-button:hover {
   background-color: rgba(59, 130, 246, 0.1);
-  transform: scale(1.1);
+  transform: scale(1.15);
+}
+
+/* Responsive sizing for mobile */
+@media (max-width: 640px) {
+  .chat-button {
+    font-size: 1.25rem;
+    min-width: 28px;
+    min-height: 28px;
+  }
+}
+
+/* Larger screens get bigger icons */
+@media (min-width: 1024px) {
+  .chat-button {
+    font-size: 1.75rem;
+    min-width: 36px;
+    min-height: 36px;
+  }
 }
 
 /* Chat modal styling to match game font */