Merge branch 'main' into clean-deploy

.dockerignore

@@ -0,0 +1,53 @@
+# Node modules
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+
+# Git
+.git/
+.gitignore
+
+# Environment files
+.env
+.env.*
+
+# IDE files
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# Logs
+*.log
+logs/
+
+# Temporary files
+tmp/
+temp/
+.aider*
+
+# Documentation
+*.md
+!README.md
+
+# Planning documents
+*_PLAN.md
+IMPLEMENTATION_*.md
+
+# Python cache
+__pycache__/
+*.pyc
+*.pyo
+*.pyd
+
+# Coverage
+coverage/
+.nyc_output/
+
+# Build artifacts
+dist/
+build/

.gitignore

@@ -55,7 +55,17 @@ tmp/
 temp/
 .aider*
 
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+
 # Planning documents
 HF_DATASET_INTEGRATION_PLAN.md
 *_PLAN.md
 IMPLEMENTATION_*.md
+
+# Local configuration files
+*.local
+.env

Makefile

@@ -0,0 +1,48 @@
+.PHONY: help dev dev-python dev-docker build test clean install docker-build docker-run docker-dev
+
+help: ## Show this help message
+	@echo "Available commands:"
+	@grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | sort | awk 'BEGIN {FS = ":.*?## "}; {printf "  \033[36m%-15s\033[0m %s\n", $$1, $$2}'
+
+install: ## Install dependencies
+	@echo "Installing Python dependencies..."
+	pip install -r requirements.txt
+	@echo "Installing Node.js dependencies..."
+	npm install
+
+dev: ## Start local development server (Python HTTP server)
+	@echo "Starting local development server on http://localhost:8000"
+	python local-server.py 8000
+
+dev-python: ## Start FastAPI development server
+	@echo "Starting FastAPI server on http://localhost:7860"
+	python app.py
+
+dev-docker: ## Start development environment with Docker Compose
+	docker-compose --profile dev up --build
+
+build: ## Build the application (no-op for vanilla JS)
+	@echo "No build step needed for vanilla JS application"
+
+test: ## Run tests (placeholder)
+	@echo "No tests configured yet"
+
+clean: ## Clean temporary files
+	find . -type f -name "*.pyc" -delete
+	find . -type d -name "__pycache__" -delete
+	find . -type d -name "node_modules" -exec rm -rf {} + 2>/dev/null || true
+
+docker-build: ## Build Docker image
+	docker build -t cloze-reader .
+
+docker-run: ## Run Docker container
+	docker run -p 7860:7860 --env-file .env cloze-reader
+
+docker-dev: ## Start with docker-compose
+	docker-compose up --build
+
+logs: ## Show Docker logs
+	docker-compose logs -f
+
+stop: ## Stop Docker containers
+	docker-compose down

README.md

@@ -1,10 +1,12 @@
 ---
 title: Cloze Reader
 emoji: 📚
-colorFrom: blue
-colorTo: purple
+colorFrom: yellow
+colorTo: gray
 sdk: docker
-pinned: false
+pinned: true
+thumbnail: >-
+  https://cdn-uploads.huggingface.co/production/uploads/65a0caa15dfd8b9b1f3aa3d3/3GdgODxZMuycEJvbrtAdm.png
 ---
 
 # Cloze Reader

docker-compose.yml

@@ -0,0 +1,27 @@
+version: '3.8'
+
+services:
+  cloze-reader:
+    build: .
+    ports:
+      - "7860:7860"
+    environment:
+      - OPENROUTER_API_KEY=${OPENROUTER_API_KEY:-}
+      - HF_API_KEY=${HF_API_KEY:-}
+    volumes:
+      - ./src:/app/src:ro
+      - ./index.html:/app/index.html:ro
+    restart: unless-stopped
+    
+  dev-server:
+    image: python:3.9-slim
+    working_dir: /app
+    ports:
+      - "8000:8000"
+    volumes:
+      - .:/app
+    command: python -m http.server 8000
+    environment:
+      - PYTHONUNBUFFERED=1
+    profiles:
+      - dev

local-server.py

@@ -0,0 +1,62 @@
+#!/usr/bin/env python3
+"""
+Local development server for cloze-reader
+Serves static files with CORS enabled for local testing
+"""
+
+import http.server
+import socketserver
+import os
+from urllib.parse import urlparse
+import json
+
+class LocalHandler(http.server.SimpleHTTPRequestHandler):
+    def end_headers(self):
+        # Enable CORS for local development
+        self.send_header('Access-Control-Allow-Origin', '*')
+        self.send_header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS')
+        self.send_header('Access-Control-Allow-Headers', 'Content-Type')
+        super().end_headers()
+    
+    def do_GET(self):
+        # Handle root path
+        if self.path == '/':
+            self.path = '/index.html'
+        
+        # Handle icon.png (serve local file if exists, otherwise redirect)
+        if self.path == '/icon.png':
+            if os.path.exists('icon.png'):
+                return super().do_GET()
+            else:
+                self.send_response(302)
+                self.send_header('Location', 'https://raw.githubusercontent.com/zmuhls/cloze-reader/main/icon.png')
+                self.end_headers()
+                return
+        
+        # Serve static files
+        return super().do_GET()
+    
+    def do_OPTIONS(self):
+        self.send_response(200)
+        self.end_headers()
+
+def run_server(port=8000):
+    handler = LocalHandler
+    
+    try:
+        with socketserver.TCPServer(("", port), handler) as httpd:
+            print(f"Local development server running at http://localhost:{port}/")
+            print("Press Ctrl+C to stop")
+            httpd.serve_forever()
+    except KeyboardInterrupt:
+        print("\nServer stopped")
+    except OSError as e:
+        if e.errno == 48:  # Address already in use
+            print(f"Port {port} is already in use. Try a different port.")
+        else:
+            print(f"Error starting server: {e}")
+
+if __name__ == "__main__":
+    import sys
+    port = int(sys.argv[1]) if len(sys.argv) > 1 else 8000
+    run_server(port)

package.json

@@ -0,0 +1,38 @@
+{
+  "name": "cloze-reader",
+  "version": "1.0.0",
+  "description": "Interactive cloze reading comprehension game",
+  "main": "src/app.js",
+  "type": "module",
+  "scripts": {
+    "dev": "python -m http.server 8000",
+    "dev:python": "python app.py",
+    "build": "echo 'No build step needed for vanilla JS'",
+    "test": "echo 'No tests specified yet'",
+    "lint": "echo 'No linting configured yet'",
+    "start": "python app.py",
+    "docker:build": "docker build -t cloze-reader .",
+    "docker:run": "docker run -p 7860:7860 --env-file .env cloze-reader",
+    "docker:dev": "docker-compose up --build",
+    "docker:stop": "docker-compose down",
+    "docker:logs": "docker-compose logs -f",
+    "docker:clean": "docker-compose down -v --remove-orphans"
+  },
+  "keywords": [
+    "education",
+    "reading",
+    "comprehension",
+    "cloze",
+    "game"
+  ],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "http-server": "^14.1.1"
+  },
+  "dependencies": {},
+  "engines": {
+    "node": ">=14.0.0",
+    "python": ">=3.9"
+  }
+}

src/aiService.js

@@ -138,6 +138,19 @@ Passage: "${passage}"`
       }
 
       const data = await response.json();
+      
+      // Check for OpenRouter error response
+      if (data.error) {
+        console.error('OpenRouter API error for word selection:', data.error);
+        throw new Error(`OpenRouter API error: ${data.error.message || JSON.stringify(data.error)}`);
+      }
+      
+      // Check if response has expected structure
+      if (!data.choices || !data.choices[0] || !data.choices[0].message || !data.choices[0].message.content) {
+        console.error('Invalid word selection API response structure:', data);
+        throw new Error('API response missing expected content');
+      }
+      
       const content = data.choices[0].message.content.trim();
       
       // Try to parse as JSON array
@@ -207,13 +220,25 @@ Passage: "${passage}"`
       }
 
       const data = await response.json();
+      
+      // Check for OpenRouter error response
+      if (data.error) {
+        console.error('OpenRouter API error for contextualization:', data.error);
+        throw new Error(`OpenRouter API error: ${data.error.message || JSON.stringify(data.error)}`);
+      }
+      
+      // Check if response has expected structure
+      if (!data.choices || !data.choices[0] || !data.choices[0].message || !data.choices[0].message.content) {
+        console.error('Invalid contextualization API response structure:', data);
+        throw new Error('API response missing expected content');
+      }
+      
       let content = data.choices[0].message.content.trim();
       
       // Clean up AI response artifacts
       content = content
         .replace(/^\s*["']|["']\s*$/g, '')  // Remove leading/trailing quotes
         .replace(/^\s*[:;]+\s*/, '')        // Remove leading colons and semicolons
-        .replace(/^\s*[a-z]+:\s*/i, '')     // Remove any word followed by colon (like "mas:")
         .replace(/\*+/g, '')                // Remove asterisks (markdown bold/italic)
         .replace(/_+/g, '')                 // Remove underscores (markdown)
         .replace(/#+\s*/g, '')              // Remove hash symbols (markdown headers)

src/app.js

@@ -69,10 +69,11 @@ class App {
       <strong>${roundData.title}</strong> by ${roundData.author}
     `;
 
-    // Show level information without round number
+    // Show level information with passage number
     const blanksCount = roundData.blanks.length;
     const difficultyText = blanksCount === 1 ? 'Easy' : blanksCount === 2 ? 'Medium' : 'Hard';
-    this.elements.roundInfo.innerHTML = `Level ${this.game.currentLevel} • ${blanksCount} blank${blanksCount > 1 ? 's' : ''} • ${difficultyText}`;
+    const passageInfo = roundData.passageNumber ? `Passage ${roundData.passageNumber}/${roundData.totalPassages} • ` : '';
+    this.elements.roundInfo.innerHTML = `Level ${this.game.currentLevel} • ${passageInfo}${blanksCount} blank${blanksCount > 1 ? 's' : ''} • ${difficultyText}`;
 
     // Show contextualization from AI agent
     this.elements.contextualization.innerHTML = `
@@ -206,15 +207,24 @@ class App {
       // Show loading immediately with specific message
       this.showLoading(true, 'Loading next passage...');
       
-      // Clear chat history when starting new round
+      // Clear chat history when starting new passage/round
       this.chatUI.clearChatHistory();
       
-      const roundData = await this.game.nextRound();
+      // Check if we should load next passage or next round
+      let roundData;
+      if (this.game.currentPassageIndex === 0) {
+        // Load second passage in current round
+        roundData = await this.game.nextPassage();
+      } else {
+        // Load next round (two new passages)
+        roundData = await this.game.nextRound();
+      }
+      
       this.displayRound(roundData);
       this.resetUI();
       this.showLoading(false);
     } catch (error) {
-      console.error('Error loading next round:', error);
+      console.error('Error loading next passage:', error);
       this.showError('Could not load next passage. Please try again.');
     }
   }

src/chatInterface.js

@@ -44,7 +44,12 @@ class ChatUI {
           <!-- Question buttons area -->
           <div class="p-4 border-t">
             <div class="text-sm text-gray-600 mb-3">Choose a question:</div>
-            <div id="question-buttons" class="grid grid-cols-2 gap-2">
+            <!-- Dropdown for mobile -->
+            <select id="question-dropdown" class="w-full p-2 border rounded md:hidden mb-2">
+              <option value="">Select a question...</option>
+            </select>
+            <!-- Button grid for desktop -->
+            <div id="question-buttons" class="hidden md:grid grid-cols-2 gap-2">
               <!-- Question buttons will be inserted here -->
             </div>
           </div>
@@ -107,6 +112,7 @@ class ChatUI {
     messagesContainer.innerHTML = `
       <div class="text-center text-gray-500 text-sm">
         Choose a question below to get help with this word.
+        <br>
       </div>
     `;
   }
@@ -159,27 +165,39 @@ class ChatUI {
   // Load question buttons with disabled state for used questions
   loadQuestionButtons() {
     const buttonsContainer = document.getElementById('question-buttons');
+    const dropdown = document.getElementById('question-dropdown');
     const questions = this.game.getSuggestedQuestionsForBlank(this.activeChatBlank);
     
-    let html = '';
+    // Clear existing content
+    buttonsContainer.innerHTML = '';
+    dropdown.innerHTML = '<option value="">Select a question...</option>';
+    
+    // Build button grid for desktop and dropdown options
+    let buttonHtml = '';
     questions.forEach(question => {
       const isDisabled = question.used;
       const buttonClass = isDisabled
-        ? 'question-btn px-3 py-2 bg-gray-200 text-gray-500 rounded cursor-not-allowed text-sm font-medium'
-        : 'question-btn px-3 py-2 bg-blue-100 text-blue-800 rounded hover:bg-blue-200 text-sm font-medium';
+        ? 'question-btn px-2 py-1 bg-gray-100 text-gray-500 rounded cursor-not-allowed text-xs'
+        : 'question-btn px-2 py-1 bg-blue-50 text-blue-700 rounded hover:bg-blue-100 text-xs border border-blue-200';
       
-      html += `
+      // Desktop buttons
+      buttonHtml += `
         <button class="${buttonClass}"
                 data-type="${question.type}"
                 ${isDisabled ? 'disabled' : ''}>
           ${question.text}${isDisabled ? ' ✓' : ''}
         </button>
       `;
+      
+      // Mobile dropdown options
+      if (!isDisabled) {
+        dropdown.innerHTML += `<option value="${question.type}">${question.text}</option>`;
+      }
     });
     
-    buttonsContainer.innerHTML = html;
+    buttonsContainer.innerHTML = buttonHtml;
     
-    // Add click listeners to individual question buttons (not the container)
+    // Add click listeners to desktop buttons
     buttonsContainer.querySelectorAll('.question-btn').forEach(btn => {
       btn.addEventListener('click', (e) => {
         if (!btn.disabled) {
@@ -190,6 +208,14 @@ class ChatUI {
         }
       });
     });
+    
+    // Add change listener to mobile dropdown
+    dropdown.addEventListener('change', (e) => {
+      if (e.target.value) {
+        this.askQuestion(e.target.value);
+        e.target.value = ''; // Reset dropdown
+      }
+    });
   }
 
   // Ask a specific question

src/clozeGameEngine.js

@@ -19,6 +19,11 @@ class ClozeGame {
     this.hints = [];
     this.chatService = new ChatService(aiService);
     this.lastResults = null; // Store results for answer revelation
+    
+    // Two-passage system properties
+    this.currentBooks = []; // Array of two books per round
+    this.passages = []; // Array of two passages per round
+    this.currentPassageIndex = 0; // 0 for first passage, 1 for second
   }
 
   async initialize() {
@@ -33,20 +38,30 @@ class ClozeGame {
 
   async startNewRound() {
     try {
-      // Get a random book (now async with HF streaming)
-      this.currentBook = await bookDataService.getRandomBook();
+      // Get two random books for this round
+      const book1 = await bookDataService.getRandomBook();
+      const book2 = await bookDataService.getRandomBook();
+      
+      // Extract passages from both books
+      const passage1 = this.extractCoherentPassage(book1.text);
+      const passage2 = this.extractCoherentPassage(book2.text);
+      
+      // Store both books and passages
+      this.currentBooks = [book1, book2];
+      this.passages = [passage1.trim(), passage2.trim()];
+      this.currentPassageIndex = 0;
       
-      // Extract a coherent passage avoiding fragmented text
-      const fullText = this.currentBook.text;
-      let passage = this.extractCoherentPassage(fullText);
+      // Start with the first passage
+      this.currentBook = book1;
+      this.originalText = this.passages[0];
       
-      this.originalText = passage.trim();
+      // Run AI calls sequentially to avoid rate limiting
+      await this.createClozeText();
       
-      // Run AI calls in parallel for faster loading
-      const [clozeResult, contextualizationResult] = await Promise.all([
-        this.createClozeText(),
-        this.generateContextualization()
-      ]);
+      // Add small delay between API calls to avoid rate limiting
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      
+      await this.generateContextualization();
       
       return {
         title: this.currentBook.title,
@@ -54,7 +69,9 @@ class ClozeGame {
         text: this.clozeText,
         blanks: this.blanks,
         contextualization: this.contextualization,
-        hints: this.hints
+        hints: this.hints,
+        passageNumber: 1,
+        totalPassages: 2
       };
     } catch (error) {
       console.error('Error starting new round:', error);
@@ -376,8 +393,8 @@ class ClozeGame {
       const inputHtml = `<input type="text" 
         class="cloze-input" 
         data-blank-index="${index}" 
-        placeholder="${'_'.repeat(Math.max(3, blank.originalWord.length))}"
-        style="width: ${Math.max(80, blank.originalWord.length * 12)}px;">`;
+        placeholder="${'_ '.repeat(Math.max(3, blank.originalWord.length)).trim()}"
+        style="width: ${Math.max(80, blank.originalWord.length * 16)}px;">`;
       
       html = html.replace(`___BLANK_${index}___`, inputHtml);
     });
@@ -452,6 +469,48 @@ class ClozeGame {
     }));
   }
 
+  async nextPassage() {
+    try {
+      // Move to the second passage in the current round
+      if (this.currentPassageIndex === 0 && this.passages && this.passages.length > 1) {
+        this.currentPassageIndex = 1;
+        this.currentBook = this.currentBooks[1];
+        this.originalText = this.passages[1];
+        
+        // Clear chat conversations for new passage
+        this.chatService.clearConversations();
+        
+        // Clear last results
+        this.lastResults = null;
+        
+        // Generate new cloze text and contextualization for second passage sequentially
+        await this.createClozeText();
+        
+        // Add small delay between API calls to avoid rate limiting
+        await new Promise(resolve => setTimeout(resolve, 1000));
+        
+        await this.generateContextualization();
+        
+        return {
+          title: this.currentBook.title,
+          author: this.currentBook.author,
+          text: this.clozeText,
+          blanks: this.blanks,
+          contextualization: this.contextualization,
+          hints: this.hints,
+          passageNumber: 2,
+          totalPassages: 2
+        };
+      } else {
+        // If we're already on the second passage, move to next round
+        return this.nextRound();
+      }
+    } catch (error) {
+      console.error('Error loading next passage:', error);
+      throw error;
+    }
+  }
+
   nextRound() {
     // Check if user passed the previous round
     const passed = this.lastResults && this.lastResults.passed;
@@ -547,8 +606,8 @@ class ClozeGame {
           <input type="text" 
             class="cloze-input" 
             data-blank-index="${index}" 
-            placeholder="${'_'.repeat(Math.max(3, blank.originalWord.length))}"
-            style="width: ${Math.max(80, blank.originalWord.length * 12)}px;">
+            placeholder="${'_ '.repeat(Math.max(3, blank.originalWord.length)).trim()}"
+            style="width: ${Math.max(80, blank.originalWord.length * 16)}px;">
           <button id="${chatButtonId}" 
             class="chat-button text-blue-500 hover:text-blue-700 text-sm" 
             data-blank-index="${index}"

src/styles.css

@@ -31,14 +31,38 @@
   transform: scale(1.1);
 }
 
-.suggestion-btn {
+.suggestion-btn, .question-btn {
   transition: all 0.2s ease;
+  padding: 14px 18px;
+  background: #f8f9fa;
+  border: 2px solid #e9ecef;
+  border-radius: 8px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+  font-size: 15px;
+  font-weight: 500;
+  text-align: center;
+  cursor: pointer;
+  line-height: 1.4;
+  min-height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  box-sizing: border-box;
 }
 
-.suggestion-btn:hover {
+.suggestion-btn:hover, .question-btn:hover:not(:disabled) {
+  background: #e9ecef;
+  border-color: #6c757d;
   transform: translateY(-1px);
 }
 
+.suggestion-btn:disabled, .question-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background: #f8f9fa;
+}
+
 /* Answer revelation styles */
 .revealed-answer {
   background-color: #fef3c7 !important;
@@ -138,10 +162,11 @@
 
 @layer base {
   body {
-    font-family: 'Special Elite', 'Courier New', monospace;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
     background-color: var(--aged-paper);
     color: var(--typewriter-ink);
-    letter-spacing: 0.05em;
+    line-height: 1.6;
+    font-size: 16px;
     background-image: 
       radial-gradient(circle at 25% 25%, rgba(139, 92, 246, 0.02) 0%, transparent 50%),
       radial-gradient(circle at 75% 75%, rgba(139, 92, 246, 0.02) 0%, transparent 50%);
@@ -150,18 +175,17 @@
 
 @layer components {
   .typewriter-text {
-    font-family: 'Special Elite', 'Courier New', monospace;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
     color: var(--typewriter-ink);
-    letter-spacing: 0.1em;
-    word-spacing: 0.1em;
-    line-height: 1.8;
+    font-weight: 600;
+    line-height: 1.7;
   }
 
   .typewriter-subtitle {
-    font-family: 'Special Elite', 'Courier New', monospace;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
     color: #666;
-    letter-spacing: 0.05em;
-    font-size: 0.95rem;
+    font-size: 1rem;
+    line-height: 1.5;
   }
 
   .paper-sheet {
@@ -197,55 +221,56 @@
   }
 
   .cloze-input {
-    font-family: 'Special Elite', 'Courier New', monospace;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
     background-color: transparent;
     border: none;
-    border-bottom: 2px solid black;
+    border-bottom: 2px dotted black;
     color: var(--typewriter-ink);
     text-align: center;
     outline: none;
-    padding: 2px 4px;
+    padding: 4px 6px;
     margin: 0 2px;
-    min-width: 3ch;
+    min-width: 4ch;
     width: auto;
-    letter-spacing: 0.05em;
     font-size: inherit;
     line-height: inherit;
     transition: all 0.2s ease;
   }
   
   .cloze-input:focus {
-    border-bottom-color: black;
+    border-bottom: 2px dotted black;
     box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
     background-color: rgba(0, 0, 0, 0.05);
   }
   
   .cloze-input.correct {
-    border-bottom-color: #10b981;
+    border-bottom: 2px dotted #10b981;
     background-color: rgba(16, 185, 129, 0.1);
   }
   
   .cloze-input.incorrect {
-    border-bottom-color: #ef4444;
+    border-bottom: 2px dotted #ef4444;
     background-color: rgba(239, 68, 68, 0.1);
   }
 
   .cloze-input::placeholder {
     color: rgba(0, 0, 0, 0.4);
-    font-style: italic;
+    font-style: normal;
+    font-family: monospace;
+    letter-spacing: 0.1em;
   }
 
   .typewriter-button {
-    font-family: 'Special Elite', 'Courier New', monospace;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
     min-width: 120px;
-    min-height: 42px;
-    padding: 8px 16px;
+    min-height: 44px;
+    padding: 10px 18px;
     background-color: var(--aged-paper-dark);
     color: var(--typewriter-ink);
     border: 2px solid black;
-    border-radius: 4px;
+    border-radius: 6px;
     font-weight: 600;
-    letter-spacing: 0.05em;
+    font-size: 16px;
     cursor: pointer;
     transition: all 0.15s ease;
     box-shadow: 
@@ -288,11 +313,9 @@
   }
 
   .prose {
-    font-family: 'Special Elite', 'Courier New', monospace;
-    font-size: 1.1rem;
-    line-height: 1.8;
-    letter-spacing: 0.05em;
-    word-spacing: 0.1em;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+    font-size: 1.125rem;
+    line-height: 1.7;
     color: var(--typewriter-ink);
     overflow-wrap: break-word;
   }
@@ -384,6 +407,34 @@
     }
   }
 
+  /* Compact question buttons for chat interface */
+  #chat-modal .question-btn {
+    padding: 6px 8px;
+    min-height: auto;
+    font-size: 12px;
+    line-height: 1.3;
+    font-weight: 400;
+    transition: all 0.15s ease;
+  }
+
+  /* Mobile dropdown styling */
+  #question-dropdown {
+    background: #f8f9fa;
+    border: 2px solid #e9ecef;
+    border-radius: 8px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+    font-size: 15px;
+    font-weight: 500;
+    color: #495057;
+    transition: all 0.2s ease;
+  }
+
+  #question-dropdown:focus {
+    outline: none;
+    border-color: #007bff;
+    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
+  }
+
   /* Print styles */
   @media print {
     body {